@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0c1114;--panel:#141e23;--line:#ffffff12;--green:#b8f885;--muted:#94a5ad;--white:#edf4f5}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 12% 0%,#42765820,transparent 52%),radial-gradient(ellipse at 95% 35%,#37608215,transparent 50%),var(--bg);color:var(--white);font:14px 'DM Sans',sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:background .15s,border-color .15s,transform .15s}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:4px}button:hover:not(:disabled){filter:brightness(1.15);border-color:#b8f88570}button:active:not(:disabled){transform:translateY(1px)}
.shell{max-width:1280px;margin:auto;padding:0 40px}header{height:72px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;letter-spacing:-1px;color:var(--white);text-decoration:none}.brand-icon{display:grid;place-items:center;background:linear-gradient(135deg,#91d36d25,#78b6ca0a);border:1px solid #b8f88530;border-radius:10px;color:var(--green);width:36px;height:36px;box-shadow:inset 0 1px 0 #ffffff0c}.brand-icon svg{width:27px;height:27px}.brand-detail{font:500 10px 'DM Sans',sans-serif;letter-spacing:1.7px;margin-left:12px;color:var(--muted);border-left:1px solid #ffffff20;padding-left:22px}.connection{font-size:11px;border:1px solid #b8f88520;background:#b8f88508;border-radius:30px;padding:8px 12px;color:#c5dbbb}i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 8px #b8f88550}.connection.offline i{background:#e5aa68}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0 22px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:600;color:var(--muted)}.intro .eyebrow{display:none}h1{font-family:'Space Grotesk',sans-serif;font-size:30px;line-height:1.2;letter-spacing:-1.2px;font-weight:500;margin:0}h1 span{color:var(--green)}.intro p{font-size:12px;color:var(--muted);line-height:1.65;margin:0;text-align:right}.board-heading{display:flex;justify-content:space-between;align-items:center;padding:0 0 16px}.board-heading h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14px;margin:0}.board-heading h2 span{font:10px 'DM Sans',sans-serif;display:inline-block;margin-left:7px;padding:3px 6px;border-radius:5px;background:#ffffff08;border:1px solid #ffffff10;color:var(--muted)}.live-label{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start}.timer-list{display:grid;gap:16px;min-width:0}.timer-card{background:linear-gradient(125deg,#273b324f,#19232ba8 70%);border:1px solid #a3cdb125;border-radius:16px;padding:24px 28px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff08,0 12px 30px #0000001c}.timer-card::before{content:'';position:absolute;pointer-events:none;width:250px;height:200px;right:-80px;top:-130px;background:#b8f88514;filter:blur(50px)}.timer-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.timer-title{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}.timer-status{font-size:9px;font-weight:500;letter-spacing:1.2px;color:var(--green);display:flex;align-items:center;white-space:nowrap}.clock{font-family:'Space Grotesk',monospace;font-size:clamp(64px,7.4vw,100px);font-weight:500;letter-spacing:-5px;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:24px;text-shadow:0 3px 32px #a4ffd00c}.ends{color:var(--muted);font-size:11px;margin:8px 0 26px}.timer-actions{display:flex;align-items:center;gap:8px}.timer-actions button{background:linear-gradient(#ffffff09,#ffffff04);border:1px solid #ffffff16;color:#cfddd7;border-radius:7px;padding:9px 14px;font-size:12px;box-shadow:inset 0 1px 0 #ffffff05}.timer-actions .remove{margin-left:auto;color:var(--muted);background:transparent;border-color:transparent;padding:9px 0;box-shadow:none}.progress{height:2px;background:#ffffff08;position:absolute;bottom:0;left:0;right:0}.progress span{display:block;background:linear-gradient(90deg,#69bda2,var(--green));box-shadow:0 0 10px #b8f88570;height:100%;transition:width .2s}.timer-card.done .clock,.timer-card.done .timer-status{color:var(--muted)}.timer-card.done .progress span{background:var(--muted)}
.create-panel{background:linear-gradient(145deg,#2433299c,#18232bc7);border:1px solid #b8f88520;border-radius:16px;padding:24px;color:var(--white);box-shadow:inset 0 1px 0 #ffffff08,0 12px 40px #00000017;backdrop-filter:blur(16px)}.create-panel .eyebrow{font-size:9px;letter-spacing:1.6px;color:#a2ba9b}.create-panel h2{font:500 23px 'Space Grotesk',sans-serif;letter-spacing:-.6px;margin:9px 0 24px;display:flex;justify-content:space-between}.plus{font-weight:400;color:var(--green)}.create-panel label{display:block;font-size:9px;letter-spacing:1px;font-weight:500;color:#b3c1c4;margin:20px 0 9px}.create-panel label span{font-size:8px;color:#738890;margin-left:4px}input{width:100%;border:1px solid #ffffff14;background:#0b131970;color:var(--white);border-radius:8px;padding:12px;font-size:12px;outline:none;box-shadow:inset 0 2px 4px #00000012}input::placeholder{color:#73878d}.minutes-input{display:flex;align-items:center;border:1px solid #ffffff14;border-radius:8px;background:#0b131970}.minutes-input input{border:0;background:transparent;font-family:'Space Grotesk',sans-serif;font-size:30px;padding:10px 13px;box-shadow:none}.minutes-input span{padding:0 14px;color:var(--muted);font-size:12px}.presets{display:flex;gap:7px;margin:10px 0 22px}.presets button{border:1px solid #ffffff12;border-radius:6px;background:#ffffff03;padding:8px 0;color:var(--muted);flex:1;font-size:10px}.presets button.selected{background:#b8f88514;color:var(--green);border-color:#b8f88550}.create-button{width:100%;background:linear-gradient(115deg,#c1fa9a,#a5e873);color:#1b2a15;border:1px solid #d9ffb7a0;border-radius:8px;padding:14px;font-weight:700;font-size:12px;text-align:left;display:flex;justify-content:space-between;box-shadow:0 4px 20px #a5e87312,inset 0 1px 0 #ffffff50}.panel-note{font-size:10px;line-height:1.6;color:var(--muted);margin:16px 0 0;display:flex;gap:10px}.panel-note span{font-size:17px;color:var(--green)}.empty{min-height:310px;border:1px dashed #8eac972b;background:linear-gradient(130deg,#24322945,#19232b33);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.empty-symbol{font-size:24px;background:#b8f8850a;border:1px solid #b8f88520;width:50px;height:50px;display:grid;place-items:center;border-radius:12px;margin-bottom:8px}.empty h3{font:500 23px 'Space Grotesk',sans-serif;letter-spacing:-.5px;margin:12px 0}.empty p{color:var(--muted);font-size:12px;line-height:1.7;max-width:300px;margin:0}#notice{min-height:18px;color:var(--green);font-size:12px;margin:16px 0}#notice.error{color:#f1b17d}footer{border-top:1px solid var(--line);margin:24px 0 0;padding:20px 0 28px;display:flex;justify-content:space-between;font-size:10px;color:#72868c}dialog{background:#182329;color:var(--white);border:1px solid #ffffff20;border-radius:14px;padding:28px;max-width:400px;box-shadow:0 20px 80px #0006}dialog::backdrop{background:#060b10b0;backdrop-filter:blur(5px)}dialog h2{font:500 24px 'Space Grotesk',sans-serif;margin-top:0}dialog p{color:var(--muted)}.dialog-actions{display:flex;gap:12px;margin-top:24px}.dialog-actions button{padding:12px;border:1px solid #ffffff20;border-radius:7px;background:#ffffff08;color:var(--white)}.dialog-actions .confirm-remove{background:var(--green);color:var(--bg)}
@media(max-width:850px){.shell{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:16px}.timer-card{padding:22px}.clock{font-size:66px}.timer-actions button{padding:9px 10px}.create-panel{padding:20px}.intro p{font-size:11px}h1{font-size:27px}}
@media(max-width:650px){.shell{padding:0 18px}header{height:62px}.brand{font-size:21px}.brand-detail{font-size:8px;max-width:95px;letter-spacing:1px;padding-left:11px;margin-left:2px;line-height:1.5}.brand-icon{width:32px;height:32px}.connection{font-size:10px;padding:7px 9px}.intro{padding:20px 0 18px;display:block}h1{font-size:25px;letter-spacing:-.8px}.intro p{font-size:11px;margin-top:7px;text-align:left}.intro p br{display:none}.workspace{display:flex;flex-direction:column;gap:18px}.timer-list,.create-panel{width:100%}.timer-card{padding:20px 22px}.clock{font-size:80px;margin-top:18px}.ends{margin-bottom:22px}.create-panel h2{margin-bottom:18px}.create-panel label{margin-top:16px}.empty{min-height:250px}.empty h3{font-size:21px}.live-label{font-size:8px;letter-spacing:1px}.timer-actions .remove{padding-left:8px}footer{gap:20px;line-height:1.6;margin-top:18px}footer span:last-child{text-align:right}.timer-title{font-size:14px}.timer-status{font-size:8px;letter-spacing:.8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Original Overworld art direction: atmospheric terrain, luminous instrument panels. */
:root{--bg:#0f131a;--muted:#9aabb6;--white:#f0f3ea;--green:#d4fca1;--line:#e0ebff16}
body{background:radial-gradient(ellipse at 80% -15%,#9e88b327,transparent 55%),radial-gradient(ellipse at 3% 60%,#456b5a1c,transparent 55%),#0f131a;font-family:'Manrope','DM Sans',sans-serif;isolation:isolate}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.22' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.world-backdrop{position:fixed;z-index:-2;inset:0;background:linear-gradient(#10131a33 0%,#10131a5c 55%,#10131a 95%),url('/art/overworld.svg') right -150px top -150px/1100px auto no-repeat;opacity:.18;pointer-events:none}
.shell{max-width:1360px;padding:0 52px}header{height:78px;border-bottom:1px solid #d7e9ed10}.brand{gap:12px;font-size:26px}.brand-icon{width:36px;height:36px;background:linear-gradient(135deg,#d9ff9c26,#ccff8c03);border:1px solid #d4fca133;box-shadow:inset 0 1px 0 #efffc91c,0 0 24px #b7ee6a08;border-radius:11px}.brand-detail{border-left:1px solid #d5e0df22;letter-spacing:2.2px;color:#d5ddcf;padding-left:24px;line-height:1.8;font-size:9px}.brand-detail b{display:block;font-size:8px;letter-spacing:1.8px;color:#7b8995;font-weight:400}.connection{background:#d4fca109;color:#d4ebba;border-color:#d4fca123;font-size:10px;padding:9px 13px;letter-spacing:.2px}i{background:#d4fca1;box-shadow:0 0 8px #d4fca165}.intro{padding:24px 0 25px}.intro .eyebrow{display:block;font-size:8px;letter-spacing:2.4px;color:#8d9b9c;margin-bottom:9px}h1{font-family:'Manrope','DM Sans',sans-serif;font-size:32px;letter-spacing:-1.3px;font-weight:500}.intro p{font-size:11px;color:#8c9ba5;line-height:1.8}.mobile-break{display:none}.board-heading{padding:0 0 14px}.board-heading h2{font:500 12px 'Manrope','DM Sans',sans-serif;color:#b5c1c4}.board-heading h2 span{margin-left:9px;border-radius:4px;background:#c9dfe908;border:1px solid #c9dfe914;color:#9caab4;padding:2px 6px}.live-label{font-size:8px;letter-spacing:1.4px;color:#78878e}.tiny-cross{color:#d4fca1;font-size:14px;margin-right:5px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
.timer-card,.empty{position:relative;min-height:342px;border-radius:20px;overflow:hidden;background:linear-gradient(125deg,#28343dca,#1a222ccb 55%,#222c3cb8);border:1px solid #d8eeef26;box-shadow:0 2px 3px #0003,0 22px 70px #0003,inset 0 1px 0 #edf6ee12;isolation:isolate}
.timer-card{padding:26px 32px 24px}.timer-card::before{inset:0;top:auto;right:auto;width:100%;height:1px;background:linear-gradient(90deg,transparent,#edffdd48,transparent);filter:none}.timer-card::after,.empty::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(100deg,#19232bec 0%,#1c2633a6 44%,#1c263305 100%)}.card-world{position:absolute;inset:-90px -240px -30px 18%;z-index:-2;background:url('/art/overworld.svg') center/contain no-repeat;opacity:.85;pointer-events:none;transition:transform 1.4s cubic-bezier(.2,.6,.3,1)}.timer-card:hover .card-world{transform:translateY(-4px)}.timer-top{position:relative}.timer-title{font-family:'Manrope','DM Sans',sans-serif;font-size:16px;font-weight:500;color:#e9eddf}.timer-status{background:#0b10174a;border:1px solid #d1eca314;border-radius:20px;padding:6px 10px;font-size:8px;letter-spacing:1.2px;color:#d5efb6;backdrop-filter:blur(10px)}.clock-caption{font-size:8px;letter-spacing:2.3px;color:#8e9da7;margin-top:30px}.clock{font-family:'Space Grotesk',monospace;font-size:clamp(76px,8vw,120px);font-weight:400;line-height:1.15;letter-spacing:-6px;margin:3px 0 0;color:#eef5e1;text-shadow:0 2px 0 #fff1,0 0 50px #e5ffd01c}.clock.long{font-size:clamp(48px,6vw,88px)}.ends{margin:6px 0 26px;color:#92a5a9;font-size:10px}.timer-actions{position:relative}.timer-actions button{padding:9px 15px;border-radius:8px;color:#d2dfcd;background:linear-gradient(#edffe10c,#d9edff04);border-color:#cce2de20;box-shadow:inset 0 1px 0 #f6ffe50a;font-size:11px;backdrop-filter:blur(16px)}.timer-actions .remove{font-size:10px;background:#0c121526;padding:8px 10px;color:#adc0bb;border:1px solid #efffe010;backdrop-filter:blur(10px)}.progress{height:2px;background:#d1faba08;bottom:0;left:22px;right:22px}.progress span{background:linear-gradient(90deg,#83b4a9,#d8f9a2);box-shadow:0 0 14px #c5ff9b33}.timer-card.done .clock{color:#a6b4ad}.timer-card.done .card-world{opacity:.5}
.create-panel{border-radius:20px;padding:24px;background:linear-gradient(148deg,#33394199,#20272ddb 60%,#29343b99);border:1px solid #dae9ed21;box-shadow:0 20px 60px #0003,inset 0 1px 0 #e4f2ed12;backdrop-filter:blur(30px)}.create-panel .eyebrow{font-size:8px;letter-spacing:2.2px;color:#a3ada9}.create-panel h2{font:500 25px 'Manrope','DM Sans',sans-serif;letter-spacing:-1px;margin:9px 0 26px}.plus{font-size:24px;font-weight:400;color:#c9e9a4}.create-panel label{font-size:8px;letter-spacing:1.1px;color:#acb8b9;margin:22px 0 10px}.create-panel label span{font-size:7px;letter-spacing:.7px;color:#7e8c94;float:right}.create-panel input{background:#0a131747;border:1px solid #def4e317;color:#e6eddf;border-radius:9px;box-shadow:inset 0 2px 8px #0001;font-size:11px;padding:13px}.create-panel input::placeholder{color:#788a93}.minutes-input{background:linear-gradient(110deg,#0b141b66,#141f2644);border-color:#daece21c;border-radius:10px;padding:3px 0}.minutes-input input{font:400 37px 'Space Grotesk',monospace;background:none;border:0;padding:10px 14px}.minutes-input span{font-size:8px;letter-spacing:1.2px;padding-right:17px;color:#94a6a6}.presets{margin:10px 0 25px;gap:6px}.presets button{border-radius:6px;font-size:9px;border-color:#e3f2e51a;color:#a2b1b3;background:#f0ffec03;padding:8px 0}.presets button.selected{border-color:#d9ffb23c;background:#d9ffb215;color:#d7f4b7}.create-button{position:relative;background:linear-gradient(135deg,#e6ffc3,#b9e78d);border-color:#f0ffce80;color:#25331c;box-shadow:inset 0 1px 0 #fff9,0 4px 20px #d4ef950c;font-size:11px;font-weight:700;padding:15px 14px;border-radius:9px;transition:box-shadow .3s,transform .3s}.create-button:hover:not(:disabled){box-shadow:inset 0 1px 0 #fff9,0 6px 30px #d4ef9528;transform:translateY(-1px)}.panel-note{font-size:9px;margin-top:17px;line-height:1.8;color:#859b9e}.panel-note span{color:#b2c993}
.empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:30px 34px;background-image:url('/art/overworld.svg'),linear-gradient(125deg,#28343d,#1c2532);background-position:right -210px top -85px,center;background-size:auto 490px,cover;background-repeat:no-repeat}.empty::after{background:linear-gradient(100deg,#1c2633fa,#1c2633a8 42%,#1c263310)}.empty-kicker{font-size:8px;letter-spacing:2px;color:#a8bcaa;margin-bottom:16px}.empty h3{font:500 43px/1.12 'Manrope','DM Sans',sans-serif;letter-spacing:-1.8px;margin:0 0 14px}.empty h3 span{color:#d4fca1}.empty p{font-size:11px;color:#9cb0b4;line-height:1.8;max-width:260px}.empty-bottom{display:flex;align-items:center;gap:9px;margin-top:26px;font-size:7px;letter-spacing:1.6px;color:#9daea3}.empty-bottom span{font-size:21px;color:#d4fca1}.empty-symbol{font-size:22px;background:#d4fca10a;border-color:#d4fca121}
footer{border-top-color:#e8f5ef0c;margin-top:25px;font-size:9px;color:#697d87;padding:22px 0 26px}footer span:last-child{font-size:7px;letter-spacing:1.7px;color:#81948d}.footer-star{font-size:15px;color:#c6e7b2;margin-left:8px}#notice{font-size:11px;color:#c9e5aa}
@media(min-width:1500px){.shell{padding-top:12px}.intro{padding:30px 0}}
@media(max-width:1050px){.shell{padding:0 30px}.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.timer-card{padding:25px}.clock{font-size:92px}.card-world{left:0;right:-310px}.empty{background-position:right -290px top -50px,center}.empty h3{font-size:37px}.timer-status{font-size:7px}.create-panel{padding:22px}}
@media(max-width:760px){.shell{padding:0 20px}.brand-detail{font-size:8px;padding-left:15px;letter-spacing:1px}.brand-detail b{font-size:7px;letter-spacing:1px}header{height:66px}.intro{padding:22px 0}.intro h1{font-size:26px}.intro p{font-size:10px}.workspace{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.create-panel{padding:20px}.timer-card{padding:22px 20px}.clock{font-size:72px;letter-spacing:-4px}.timer-top{align-items:flex-start;gap:8px;flex-direction:column}.clock-caption{margin-top:20px}.timer-title{font-size:14px}.empty h3{font-size:31px}.empty{padding:28px 24px}.timer-actions{flex-wrap:wrap}.timer-actions button{font-size:10px;padding:8px 12px}.timer-actions .remove{margin-left:0}.live-label{font-size:7px;letter-spacing:1px}}
@media(max-width:650px){.shell{padding:0 18px}.brand{font-size:23px;gap:9px}.brand-icon{width:33px;height:33px}.brand-detail{font-size:7px;padding-left:12px;margin-left:3px;max-width:none}.brand-detail b{font-size:6px}.connection{font-size:9px;padding:8px 10px}.intro{padding:19px 0 20px}.intro .eyebrow{font-size:7px;letter-spacing:1.6px;margin-bottom:7px}.intro h1{font-size:27px;letter-spacing:-1.1px}.intro p{display:none}.board-heading{padding-bottom:13px}.board-heading h2{font-size:11px}.live-label{font-size:6px;letter-spacing:.8px}.tiny-cross{font-size:12px}.workspace{display:flex;gap:20px}.timer-card{min-height:322px;padding:24px}.timer-top{flex-direction:row;align-items:center}.timer-status{font-size:6px;padding:6px 7px;letter-spacing:.6px}.timer-title{font-size:13px;max-width:55%}.clock-caption{margin-top:32px;font-size:7px}.clock{font-size:90px;letter-spacing:-5px}.clock.long{font-size:59px;letter-spacing:-3px}.ends{font-size:9px;margin:9px 0 26px}.timer-actions button{font-size:10px;padding:9px 13px}.timer-actions .remove{margin-left:auto;padding:8px}.card-world{inset:-35px -250px -10px -50px;opacity:.55}.timer-card::after{background:linear-gradient(100deg,#19232be8,#1c263399 65%,#1c263350)}.empty{min-height:340px;padding:30px 27px;background-position:right -250px top -10px,center;background-size:auto 400px,cover}.empty h3{font-size:39px}.empty::after{background:linear-gradient(100deg,#1c2633f5,#1c2633b3 50%,#1c263350)}.empty p{font-size:10px;max-width:235px}.create-panel{padding:25px}.create-panel h2{font-size:26px;margin-bottom:24px}.create-panel label{font-size:8px}.create-panel input{font-size:12px}.minutes-input input{font-size:36px}.create-button{font-size:12px}.panel-note{font-size:10px}.world-backdrop{background-size:1000px;background-position:center top;opacity:.1}footer{font-size:8px;gap:16px}footer span:last-child{font-size:6px}.footer-star{display:none}}
@media(prefers-reduced-motion:reduce){.card-world{transition:none}.timer-card:hover .card-world{transform:none}.create-button:hover:not(:disabled){transform:none}}