*{box-sizing:border-box}body{color:#fff;background:#1b1b1b;margin:0;font-family:system-ui,-apple-system,sans-serif}#root{min-height:100vh}.timer{flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:100vh;padding:16px;transition:background .3s;display:flex;position:relative}.top-bar{justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;display:flex;position:absolute;top:0;left:0;right:0}.bar-btn{color:#fff;cursor:pointer;background:#00000040;border:1px solid #ffffff59;border-radius:999px;padding:8px 16px;font-size:.85rem}.bar-btn:hover{background:#0006}.session-chip{background:#0000004d;border:1px solid #ffffff40;border-radius:999px;align-items:center;gap:8px;padding:6px 6px 6px 12px;font-size:.85rem;display:flex}.session-chip strong{letter-spacing:.12em}.session-chip .peers{opacity:.6;font-size:.75rem}.session-chip button{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:999px;padding:5px 12px;font-size:.78rem}.session-chip button:hover{background:#ffffff47}.dot{background:#8bc34a;border-radius:50%;width:8px;height:8px}.dot.connecting{background:#ffb300}.dot.error{background:#e53935}.overlay{z-index:10;background:#000000a6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.panel{text-align:center;background:#1e1e1e;border:1px solid #2e2e2e;border-radius:18px;flex-direction:column;gap:12px;width:100%;max-width:360px;padding:26px 22px;display:flex}.panel h2{margin:0;font-size:1.25rem}.panel p{opacity:.6;margin:0;font-size:.9rem;line-height:1.5}.panel .err{color:#ef9a9a;opacity:1}.panel .code{letter-spacing:.22em;font-family:ui-monospace,monospace;font-size:2.6rem;font-weight:700}.share-url{opacity:.5;word-break:break-all;background:#262626;border-radius:10px;padding:10px;font-family:ui-monospace,monospace;font-size:.75rem}.panel button{cursor:pointer;border:none;border-radius:12px;padding:13px;font-size:.95rem;font-weight:600}.panel .or{text-transform:uppercase;letter-spacing:.12em;opacity:.35;margin:2px 0;font-size:.75rem}.join-form{gap:8px;display:flex}.join-form input{color:#fff;letter-spacing:.22em;text-align:center;text-transform:uppercase;background:#262626;border:1px solid #3a3a3a;border-radius:12px;outline:none;flex:1;min-width:0;padding:13px;font-family:ui-monospace,monospace;font-size:1.25rem}.join-form input:focus{border-color:#5a5a5a}.join-form button{color:#fff;background:#ffffff24;flex:none;padding:13px 20px}.join-form button:disabled{opacity:.35;cursor:default}.panel .primary{color:#111;background:#fff}.panel .ghost{color:#fff;background:0 0;border:1px solid #3a3a3a}.phase{letter-spacing:.3em;opacity:.85;font-size:1.5rem}.clock{font-variant-numeric:tabular-nums;font-size:clamp(4rem,22vw,12rem);font-weight:700;line-height:1}.rounds{opacity:.9;font-size:1.4rem}.controls{align-items:center;gap:12px;margin-top:24px;display:flex}.controls button{color:#fff;cursor:pointer;background:#0003;border:2px solid #ffffff8c;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;transition:background .15s,transform .1s,border-color .15s;display:flex}.controls button:hover{background:#00000059;border-color:#fff}.controls button:active{transform:scale(.94)}.controls .primary{color:#111;background:#fff;border-color:#fff}.controls .primary:hover{background:#ffffffd9}.settings-screen{background:radial-gradient(1000px 500px at 50% -10%,#2e7d3240,#0000 70%),#141414;min-height:100vh;padding:32px 16px 48px}.settings{flex-direction:column;gap:16px;max-width:480px;margin:0 auto;display:flex}.settings-head{text-align:center;margin-bottom:8px}.settings-head h1{letter-spacing:-.02em;margin:0 0 6px;font-size:1.8rem}.settings-head p{opacity:.55;margin:0;font-size:.92rem}.card{background:#1e1e1e;border:1px solid #2e2e2e;border-radius:16px;padding:6px 18px 14px}.card h2{text-transform:uppercase;letter-spacing:.14em;opacity:.45;margin:16px 0 4px;font-size:.75rem}.row{border-top:1px solid #2a2a2a;align-items:center;gap:12px;padding:12px 0;display:flex}.card h2+.row{border-top:none}.row-label{flex:1;font-size:1rem}.duration{gap:8px;display:flex}.duration label{background:#262626;border:1px solid #3a3a3a;border-radius:10px;align-items:baseline;gap:4px;padding:6px 10px;display:flex}.duration label:focus-within{border-color:#5a5a5a}.duration em{opacity:.45;font-size:.72rem;font-style:normal}input[type=number]{color:#fff;font-variant-numeric:tabular-nums;text-align:right;-moz-appearance:textfield;background:0 0;border:none;outline:none;width:44px;padding:0;font-size:1.05rem}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]:disabled{opacity:.35}.color-pick{cursor:pointer;border:2px solid #ffffff2e;border-radius:12px;width:40px;height:40px;position:relative;overflow:hidden}.color-pick input[type=color]{cursor:pointer;opacity:0;background:0 0;border:none;width:200%;height:200%;padding:0;position:absolute;inset:-6px}.hex{opacity:.45;text-align:right;width:66px;font-family:ui-monospace,monospace;font-size:.78rem}.switch{cursor:pointer;display:inline-flex}.switch input{opacity:0;width:0;height:0;position:absolute}.switch .track{background:#3a3a3a;border-radius:13px;width:44px;height:26px;transition:background .15s;position:relative}.switch .track:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch input:checked+.track{background:#2e7d32}.switch input:checked+.track:after{transform:translate(18px)}.actions{gap:12px;margin-top:8px;display:flex}.actions button{cursor:pointer;border:none;border-radius:12px;flex:1;padding:15px;font-size:1rem;font-weight:600}.actions .primary{color:#111;background:#fff}.actions .primary:hover{background:#ddd}.actions .ghost{color:#fff;background:0 0;border:1px solid #3a3a3a;flex:none;padding:15px 22px}.actions .ghost:hover{border-color:#5a5a5a}@media (width<=640px){.timer{padding-top:72px;padding-bottom:140px}.controls{padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:#00000040;justify-content:center;margin-top:0;position:fixed;bottom:0;left:0;right:0}}
