*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--surface:#111;--accent:#e8ff3c;--accent-dim:#b8cc2a;--accent2:#3cf0e8;--accent2-dim:#2abcb5;--urgent:#ff3c3c;--text:#f0f0f0;--muted:#b0b0b0;--muted-soft:#8a8a8a;--border:#2a2a2a}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:DM Mono,monospace;overflow-x:hidden}.app{flex-direction:column;min-height:100dvh;transition:background-color .1s;display:flex;position:relative}.app.beeping{animation:.15s 3 flash}@keyframes flash{0%,to{background:var(--bg)}50%{background:#1a0a0a}}.header{border-bottom:1px solid var(--border);z-index:1;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1.5rem 2rem;display:grid;position:relative}.header-right{justify-self:end;align-items:center;gap:1rem;display:flex}.logo{letter-spacing:.2em;color:var(--accent);font-family:Bebas Neue,sans-serif;font-size:1.6rem}.room-badge{letter-spacing:.05em;color:var(--muted);border:1px solid var(--border);padding:.15rem .5rem;font-family:DM Mono,monospace;font-size:.85rem}.icon-btn{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:.4rem;transition:border-color .15s,color .15s;display:inline-flex}.icon-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px #e8ff3c40}.icon-btn[aria-pressed=true]{border-color:var(--urgent);color:var(--urgent)}.icon-btn svg{width:1.3rem;height:1.3rem;display:block}.lang-switch{border:1px solid var(--border);gap:.25rem;padding:2px;display:flex}.lang-btn{color:var(--muted);letter-spacing:.1em;cursor:pointer;background:0 0;border:none;padding:.3rem .6rem;font-family:DM Mono,monospace;font-size:.85rem;transition:background-color .15s,color .15s}.lang-btn:hover:not(.active){color:var(--text)}.lang-btn.active{background:var(--accent);color:var(--bg)}.room-bar{align-self:flex-start;align-items:center;gap:.6rem;display:flex}.home-btn{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:.4rem;transition:border-color .15s,color .15s;display:inline-flex}.home-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px #e8ff3c40}.home-btn svg{width:1.3rem;height:1.3rem;display:block}.copied-toast{letter-spacing:.05em;color:var(--accent);font-family:DM Mono,monospace;font-size:.8rem;animation:.15s fade-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.duration-row{flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.duration-field{flex-direction:column;align-items:center;gap:.4rem;display:flex}.duration-label{letter-spacing:.2em;font-family:Bebas Neue,sans-serif;font-size:1rem}.duration-label.window-main{color:var(--accent)}.duration-label.window-break{color:var(--accent2)}.duration-input-group{align-items:center;gap:.5rem;display:inline-flex}.duration-field input{background:var(--surface);color:var(--text);letter-spacing:.1em;text-align:center;appearance:textfield;border:1px solid #383838;border-radius:3px;outline:none;width:5.5rem;padding:.4rem .7rem;font-family:Bebas Neue,sans-serif;font-size:1.6rem;transition:border-color .15s,box-shadow .15s,opacity .15s;box-shadow:inset 0 1px 3px #00000080}.duration-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.duration-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.duration-field input:hover:not(:disabled){border-color:#4a4a4a}.duration-field input:focus{border-color:var(--accent);box-shadow:inset 0 1px 3px #00000080,0 0 0 2px #e8ff3c33}.duration-field input:disabled{opacity:.5;cursor:not-allowed}.duration-unit{letter-spacing:.1em;color:var(--muted-soft);text-transform:uppercase;font-family:DM Mono,monospace;font-size:.9rem}.field-error{color:var(--urgent);text-align:center;max-width:24ch;font-size:.78rem;line-height:1.4}.infinite-toggle{color:var(--muted);cursor:pointer;justify-content:center;align-items:center;gap:.5rem;font-size:.85rem;display:inline-flex}.infinite-toggle input{accent-color:var(--accent);cursor:pointer}.cycle-progress{letter-spacing:.15em;color:var(--muted);text-transform:uppercase;text-align:center;max-width:100%;font-size:.85rem}.route-fallback{text-align:center;color:var(--muted);padding:2rem}.main{z-index:1;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2rem;padding:2rem;display:flex;position:relative}.timer-ring-wrap{width:clamp(200px,50vw,260px);height:clamp(200px,50vw,260px);position:relative}.timer-ring-wrap.phase-changed{animation:.6s phase-change}@keyframes phase-change{0%{opacity:1;transform:scale(1)}30%{opacity:.55;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.timer-ring-wrap.phase-changed,.app.beeping{animation:none}}.ring{width:100%;height:100%;overflow:visible}.ring-bg{fill:none;stroke:var(--border);stroke-width:6px}.ring-progress{fill:none;stroke-width:6px;stroke-linecap:square;transition:stroke-dasharray .9s linear,stroke .3s,filter .3s}.window-main .ring-progress{stroke:var(--accent);filter:drop-shadow(0 0 6px #e8ff3c73)}.window-break .ring-progress{stroke:var(--accent2);filter:drop-shadow(0 0 6px var(--accent2))}.timer-inner{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;display:flex;position:absolute;inset:0}.timer-number{letter-spacing:.04em;font-variant-numeric:tabular-nums;font-family:Bebas Neue,sans-serif;font-size:clamp(2.4rem,9vw,3.6rem);line-height:1;transition:color .3s,text-shadow .3s}.window-main .timer-number{color:var(--text);text-shadow:0 0 18px #f0f0f02e}.window-break .timer-number{color:var(--accent2);text-shadow:0 0 18px #3cf0e859}.timer-unit{letter-spacing:.2em;color:var(--muted);text-transform:uppercase;font-size:.8rem}.button-row{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.action-btn{background:var(--accent);color:var(--bg);letter-spacing:.2em;cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);border:none;padding:1rem 2.4rem;font-family:Bebas Neue,sans-serif;font-size:1.4rem;transition:background-color .15s,transform .1s,opacity .15s,color .15s;position:relative;overflow:hidden}.action-btn.primary:hover:not(:disabled){background:#f5ff6e;box-shadow:0 0 16px #e8ff3c66}.action-btn.primary:active:not(:disabled){background:var(--accent-dim);transform:scale(.97)}.action-btn.danger{background:var(--urgent);color:var(--text)}.action-btn.danger:hover:not(:disabled){background:#ff5e5e;box-shadow:0 0 16px #ff3c3c66}.action-btn.danger:active:not(:disabled){background:#cc2a2a;transform:scale(.97)}.action-btn:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed;opacity:.5}.last-actor{letter-spacing:.1em;color:var(--muted);text-transform:uppercase;align-items:center;gap:.5rem;font-size:.8rem;display:flex}.room-footer{border-top:1px solid var(--border);flex-direction:column;align-items:center;gap:1.1rem;width:100%;max-width:32rem;padding-top:1.6rem;display:flex}.host-hint{letter-spacing:.05em;color:var(--muted);text-align:center;text-wrap:balance;background:#e8ff3c0d;border:1px solid #e8ff3c2e;border-radius:1rem;align-items:center;gap:.5rem;max-width:100%;padding:.4rem .9rem;font-size:.8rem;display:inline-flex}.host-badge{color:var(--accent);filter:drop-shadow(0 0 4px #e8ff3c80);margin-right:.4rem;font-size:.85em}.last-actor-label{white-space:nowrap}.overlay{justify-content:center;align-items:center;min-height:100dvh;padding:2rem;display:flex}.overlay-card{border:1px solid var(--border);border-top:2px solid var(--accent);text-align:center;background:linear-gradient(#e8ff3c08,#0000 120px);flex-direction:column;align-items:center;gap:1rem;max-width:400px;padding:2.5rem;display:flex}.overlay-card.error{border-top-color:var(--urgent);background:linear-gradient(#ff3c3c0a,#0000 120px)}.overlay-card h2{letter-spacing:.1em;color:var(--accent);font-family:Bebas Neue,sans-serif;font-size:2.1rem}.overlay-card.error h2{color:var(--urgent)}.overlay-card p{color:#c8c8c8;font-size:1rem;line-height:1.7}.room-input-row{flex-direction:column;gap:.6rem;width:100%;margin-top:.5rem;display:flex}.floating-field{position:relative}.floating-field .room-input{width:100%;padding-top:1.4rem;padding-bottom:.5rem}.floating-field label{color:var(--muted);pointer-events:none;font-family:DM Mono,monospace;font-size:1rem;transition:top .15s,font-size .15s,color .15s,transform .15s;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.floating-field .room-input:focus~label,.floating-field .room-input:not(:placeholder-shown)~label{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:.7rem;top:.45rem;transform:none}.room-input{background:var(--surface);color:var(--text);letter-spacing:.05em;border:1px solid #383838;border-radius:3px;outline:none;flex:1;padding:.85rem 1rem;font-family:DM Mono,monospace;font-size:1.1rem;transition:border-color .15s,background-color .15s,box-shadow .15s;box-shadow:inset 0 1px 3px #00000080}.room-input:hover{border-color:#4a4a4a}.room-input::placeholder{color:#0000}.room-input:focus::placeholder{color:var(--muted)}.room-input:focus{border-color:var(--accent);background:#161616;box-shadow:inset 0 1px 3px #00000080,0 0 0 2px #e8ff3c33}.presence-list{flex-direction:column;align-items:center;gap:.4rem;display:flex}.presence-label{letter-spacing:.18em;color:var(--muted-soft);text-transform:uppercase;font-size:.72rem}.presence-users{flex-wrap:wrap;justify-content:center;gap:.4rem .75rem;list-style:none;display:flex}.presence-users li{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;align-items:center;padding:.3rem .8rem;font-family:DM Mono,monospace;font-size:.82rem;transition:border-color .15s,color .15s,background-color .15s;display:inline-flex}.presence-users li:hover{border-color:#444}.presence-users li.presence-host{background:#e8ff3c0f;border-color:#e8ff3c59}.presence-users li.presence-you{border-color:var(--accent);color:var(--accent);background:#e8ff3c14}.presence-users li.presence-you:hover{border-color:var(--accent);color:var(--accent)}.connection-overlay{text-align:center;background:var(--bg);z-index:20;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:2rem;display:flex;position:fixed;inset:0}.connection-overlay p{max-width:34ch;color:var(--muted)}.connection-banner{text-align:center;color:var(--bg);background:var(--accent-dim);z-index:15;padding:.5rem 1rem;font-size:.9rem;position:fixed;top:0;left:0;right:0}@media (width<=640px){.header{grid-template-columns:1fr;justify-items:center;gap:.6rem;padding:1rem}.header-right{justify-self:center}.main{gap:1.5rem;padding:1.5rem 1rem}.duration-row{gap:1rem}.action-btn{padding:.85rem 1.6rem;font-size:1.2rem}.room-footer{gap:.85rem;padding-top:1.2rem}.overlay{padding:1rem}.overlay-card{padding:1.75rem 1.25rem}.overlay-card h2{font-size:1.7rem}.overlay-card p{font-size:.9rem;line-height:1.6}}@media (width<=400px){.logo{font-size:1.35rem}.button-row{gap:.5rem}.action-btn{letter-spacing:.12em;padding:.8rem .9rem;font-size:1.1rem}.cycle-progress{letter-spacing:.08em}.last-actor{text-align:center;flex-direction:column;gap:.2rem}}@media (hover:none){.icon-btn,.home-btn{color:var(--text)}}