@font-face{
font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/spacegrotesk-500-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/spacegrotesk-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/spacegrotesk-600-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/spacegrotesk-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/spacegrotesk-700-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/spacegrotesk-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/manrope-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/manrope-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/manrope-500-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/manrope-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/manrope-600-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/manrope-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/manrope-700-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/manrope-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
src:url('fonts/manrope-800-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
src:url('fonts/manrope-800-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
--bg:#0b0f14; --panel:#131a22; --panel2:#1b242e; --line:#243040;
--text:#eef4fb; --muted:#8aa0b6; --accent:#3ddc97;
--work:#28a260; --rest:#f5a623; --ready:#3a7bd5; --done:#8e79ff;
--danger:#ff5d5d;
--run-work:#28a260; --run-ready:#3f5bd6; --run-done:#1a4d7a;
--run-bg:linear-gradient(180deg, #12161d 0%, #0c1015 55%, #080b10 100%);
--drain-blue:#3680c7;
--consumed-top:#0e141b; --consumed-bot:#1a2634;
--refill-top:#8fd0ff; --refill-bot:#3680c7;
--act-ring:#1f9d52; --act-track:rgba(130,130,130,.30); --act-disc:#0c0e12; --act-badge:#f5c451;
--frame:100%;
--run-scale:1;
--runpad-scale:calc(1 + (var(--run-scale) - 1) * .6);
--runpad-base:calc(156px * var(--runpad-scale));
--runpad-base-np:calc(202px * var(--runpad-scale));
--runctl-h:calc(80px * var(--runpad-scale));
--runpad-h:var(--runpad-base);
--runpad-h-np:var(--runpad-base-np);
--run-topbar-h:70px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
background:var(--bg); color:var(--text);
font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
overscroll-behavior:none;
}
button,input,select,textarea{font-family:inherit}
.app-splash{
position:fixed; inset:0; z-index:1;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
background:var(--bg); color:var(--text);
animation:screen-fade .4s ease both;
}
.app-splash-mark{width:72px; height:72px; color:var(--accent)}
.app-splash-word{
font-family:"Space Grotesk","Manrope",sans-serif;
font-size:34px; font-weight:800; letter-spacing:.18em; padding-left:.18em;
}
.app-splash-spin{
width:30px; height:30px; border-radius:50%;
border:3px solid rgba(255,255,255,.14); border-top-color:var(--accent);
animation:qrspin .8s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .app-splash-spin{animation-duration:2.4s} }
.logo,.hero .big,.hero .sub,.time,.phase,.setname,.val{font-family:"Space Grotesk","Manrope",sans-serif}
.app{max-width:var(--frame);margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
html,body{overflow:hidden}
.app{
position:fixed; top:100%; left:0;
transform-origin:left top; transform:rotate(-90deg);
width:100vh;  height:100vw;
width:100dvh; height:100dvw;
min-height:0; max-width:none; margin:0;
overflow-y:auto;
}
}
header{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto;
padding:calc(14px + env(safe-area-inset-top, 0px)) max(20px,env(safe-area-inset-right, 0px)) 14px max(20px,env(safe-area-inset-left, 0px));
min-height:44px;z-index:20}
.app.running{background:var(--run-bg)}
.hdr-left,.hdr-right{display:flex;align-items:center;flex:1 1 0;min-width:0}
.hdr-right{justify-content:flex-end}
.hdr-split>.hdr-left,.hdr-split>.hdr-right{flex:0 0 auto}
.hdr-split>.logo{margin-inline:auto}
.logo{flex:0 0 auto;
display:inline-flex;align-items:center;gap:9px;
font-weight:800;font-size:20px;text-decoration:none;color:var(--text)}
.app.home .logo{visibility:hidden}
.brandmark{display:block;width:1em;height:1em;flex:none}
.logo .brandmark{width:19px;height:19px;color:var(--accent)}
.logo .wordmark{letter-spacing:.1em}
.tag{font-size:11px;color:var(--muted);letter-spacing:1px}
.screen{flex:1;display:flex;flex-direction:column;padding:8px max(20px,env(safe-area-inset-right, 0px)) 24px max(20px,env(safe-area-inset-left, 0px))}
.hidden{display:none!important}
.me-btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:15px;font-weight:600;padding:10px 16px;border-radius:16px;cursor:pointer}
.me-btn:active{background:var(--panel2);transform:scale(.98)}
.me-btn svg{display:block;flex:0 0 auto}
.me-label{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.me-overlay{position:fixed;inset:0;z-index:45;background:var(--bg);max-width:var(--frame);margin:0 auto;
display:flex;flex-direction:column;overflow-y:auto;
padding-bottom:env(safe-area-inset-bottom, 0px)}
.me-title{font-family:"Space Grotesk","Manrope",sans-serif;font-size:30px;font-weight:800;letter-spacing:2px;margin:10px 0 20px}
.me-title span{color:var(--accent)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:16px 0}
label.toggle-row{cursor:pointer;user-select:none}
a.toggle-row{cursor:pointer;color:inherit;text-decoration:none}
a.toggle-row .chev{color:var(--muted);font-size:20px;line-height:1;flex:0 0 auto}
.toggle-title{font-weight:700;font-size:15px}
.toggle-sub{font-size:12px;color:var(--muted);margin-top:2px}
.health-notice{padding:0 4px 10px;color:var(--warn,#f5a524)}
.switch{position:relative;display:inline-block;width:50px;height:30px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--panel2);border:1px solid var(--line);border-radius:30px;transition:.2s;cursor:pointer}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.slider{background:var(--accent);border-color:var(--accent)}
.switch input:checked+.slider:before{transform:translateX(20px)}
.userfield.off,.volfield.off{opacity:.4;pointer-events:none}
.user-row{display:flex;gap:8px;align-items:stretch}
.user-row input[type=text]{flex:1;min-width:0}
.user-save{flex:0 0 auto;background:var(--accent);color:#08110c;border:none;border-radius:12px;
padding:0 18px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .15s ease}
.user-save:active{transform:scale(.98)}
.user-save:disabled{opacity:.45;cursor:default}
.user-save:disabled:active{transform:none}
.volfield input[type=range]{width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.back{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;
background:var(--panel);border:1px solid var(--line);color:var(--text);
font-size:14px;font-weight:600;padding:9px 15px;border-radius:12px;cursor:pointer;margin-bottom:4px;text-decoration:none}
.back:active{background:var(--panel2);transform:scale(.98)}
@keyframes screen-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes screen-fade{from{opacity:0}to{opacity:1}}
.screen{animation:screen-in .32s cubic-bezier(.22,.61,.36,1) both}
.screen.run{animation:none}
@media(prefers-reduced-motion:reduce){.screen,.screen.run{animation:none}}
.screen.home{justify-content:center}
.hero{text-align:center;margin:6px 0 26px}
.hero-mark{width:52px;height:52px;color:var(--accent);margin:0 auto 14px}
.hero .big{font-size:52px;font-weight:800;letter-spacing:.1em}
.hero .sub{color:var(--muted);margin-top:10px;font-size:15px;letter-spacing:.3px}
.home-actions{display:flex;flex-direction:column;gap:12px}
.action{
display:flex;align-items:center;gap:16px;text-align:left;width:100%;
background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;color:var(--text)
}
.action:active{transform:scale(.99);border-color:var(--accent)}
.action.primary{background:linear-gradient(135deg,#173a2b,#0f2a1f);border-color:#245c43}
.action .ic{width:48px;height:48px;border-radius:12px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto}
.action.primary .ic{background:var(--accent);color:#04120b}
.action .t{font-size:17px;font-weight:700}
.action .d{font-size:13px;color:var(--muted);margin-top:3px}
.action:disabled{opacity:.45;cursor:not-allowed}
.action .chev{margin-left:auto;color:var(--muted);font-size:20px}
.home-foot{text-align:center;color:var(--muted);font-size:11px;margin-top:26px;letter-spacing:.5px}
.install-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:center;margin-top:18px;
background:var(--panel);border:1px solid var(--line);color:var(--text);
font-size:14px;font-weight:600;padding:11px 18px;border-radius:14px;cursor:pointer}
.install-btn:active{background:var(--panel2);transform:scale(.98)}
.install-btn svg{display:block;flex:0 0 auto}
.update-btn{border-color:var(--accent);color:var(--accent)}
.ios-share{display:flex;justify-content:center;color:var(--accent);margin:2px 0 16px}
.field{margin:14px 0}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;letter-spacing:.5px;text-transform:uppercase}
input[type=text]{
width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);
padding:14px;border-radius:12px;font-size:16px;outline:none
}
input[type=text]:focus{border-color:var(--accent)}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px 10px 8px 16px}
.stepper .steplabel{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text);letter-spacing:.2px}
.stepctl{display:flex;align-items:center;gap:clamp(6px, calc((100vw - 360px) * 0.35 + 6px), 26px)}
.stepper .stepctl{flex:0 0 auto}
.stepval{min-width:64px;text-align:center}
.val{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.unit{font-size:12px;color:var(--muted);margin-left:3px;font-weight:400}
.steprow{display:flex;gap:12px;margin:14px 0}
.steprow > .stepcard{flex:1}
.stepcard{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 6px 18px;min-width:0}
.stepcard-label{font-size:14px;font-weight:600;color:var(--text);text-align:center}
.stepcard .stepctl{width:100%;justify-content:center;margin-top:auto}
.steprow .stepcard .stepval{flex:0 1 auto;min-width:0}
.steprow .stepcard .round{flex:0 0 38px;width:38px;height:38px;font-size:19px}
.steprow .stepcard .val{font-size:18px}
.stepcard .unit{font-size:11px;margin-left:2px}
.stepper,.stepcard{border-color:#33414f}
.label-unit{color:var(--muted);font-weight:400;font-size:.85em}
.rowlabel{display:flex;justify-content:space-between;align-items:baseline}
.btn{
border:none;border-radius:14px;padding:16px;font-size:16px;font-weight:700;width:100%;
background:var(--accent);color:#04120b;cursor:pointer;letter-spacing:.5px
}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:600}
.round{flex:0 0 44px;width:44px;height:44px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.round:active{background:var(--line)}
.tint-green .round{border-color:var(--run-work)}
.tint-blue .round{border-color:var(--drain-blue)}
.tint-indigo .round{border-color:#6d7ff0}
.start-btn{display:flex;align-items:center;justify-content:center;gap:14px;animation:start-glow 2.2s ease-in-out infinite}
@keyframes start-glow{
0%,100%{box-shadow:0 6px 18px rgba(61,220,151,.28),0 0 0 0 rgba(61,220,151,.30)}
50%{box-shadow:0 8px 30px rgba(61,220,151,.55),0 0 22px 3px rgba(61,220,151,.38)}
}
@media(prefers-reduced-motion:reduce){.start-btn{animation:none}}
.start-time{font-family:"Space Grotesk","Manrope",sans-serif;font-weight:800;font-variant-numeric:tabular-nums;padding-left:14px;border-left:1px solid rgba(4,18,11,.28)}
.actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.screen.setup .actions{margin-top:auto;padding-top:18px}
.screen.setup{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))}
.inline{display:flex;gap:10px}
.inline .btn{flex:1}
.screen.run{align-items:center;justify-content:safe center;text-align:center;transition:background .35s ease;border-radius:0}
.screen.run.noctl{
--runpad-h:calc(var(--runpad-base) - var(--runctl-h));
--runpad-h-np:calc(var(--runpad-base-np) - var(--runctl-h));
}
.drainwrap{position:fixed;top:calc(var(--run-topbar-h) + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
width:100%;max-width:var(--frame);bottom:calc(var(--runpad-h) + env(safe-area-inset-bottom, 0px));overflow:hidden}
.drainfill{position:absolute;left:0;right:0;bottom:0;height:0;transition:height 1s linear}
.drainfill.snap{transition:none}
.drainfill.work{background:var(--run-work)}
.drainfill.pause{background:var(--drain-blue)}
.drainfill.idle{background:transparent}
.pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(82vw, calc(380px * var(--run-scale)));aspect-ratio:1;display:grid;place-items:center;pointer-events:none;z-index:0}
.pulse::before{content:"";grid-area:1/1;width:52%;height:52%;border-radius:50%;
background:radial-gradient(circle,rgba(47,191,113,.5),rgba(47,191,113,0) 70%);
animation:pulse-glow var(--pulse-dur,1s) ease-in-out infinite}
.pulse-ring{grid-area:1/1;width:100%;height:100%;border-radius:50%;border:2px solid var(--run-work);
opacity:0;animation:pulse-ping var(--pulse-dur,1s) ease-out infinite}
.pulse-ring:nth-child(2){animation-delay:calc(var(--pulse-dur,1s) / 2)}
@keyframes pulse-ping{0%{transform:scale(.32);opacity:.55}70%{opacity:.12}100%{transform:scale(1);opacity:0}}
@keyframes pulse-glow{0%,100%{transform:scale(.82);opacity:.3}45%{transform:scale(1.1);opacity:.65}}
@media(prefers-reduced-motion:reduce){.pulse-ring,.pulse::before{animation-duration:1.6s}}
.runwrap{position:relative;z-index:1;width:100%;max-width:var(--frame);display:flex;flex-direction:column;align-items:center;gap:calc(10px * var(--run-scale));padding-top:8px;padding-bottom:calc(var(--runpad-h) + env(safe-area-inset-bottom, 0px))}
.screen.run:has(.nowplaying) .drainwrap{bottom:calc(var(--runpad-h-np) + env(safe-area-inset-bottom, 0px))}
.screen.run:has(.nowplaying) .runwrap{padding-bottom:calc(var(--runpad-h-np) + env(safe-area-inset-bottom, 0px))}
.phase{font-size:calc(15px * var(--run-scale));letter-spacing:calc(5px * var(--run-scale));text-transform:uppercase;font-weight:800;opacity:.95}
.time{font-size:22vw;line-height:.95;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:calc(-2px * var(--run-scale))}
@media(min-width:520px){.time{font-size:calc(110px * var(--run-scale))}}
.dotrow{display:flex;align-items:center;justify-content:center;gap:calc(12px * var(--run-scale));margin-top:calc(8px * var(--run-scale))}
.dotrow .dots{margin-top:0}
.dotlbl{font-size:calc(12px * var(--run-scale));letter-spacing:calc(1px * var(--run-scale));text-transform:uppercase;color:rgba(255,255,255,.7);min-width:calc(66px * var(--run-scale));text-align:right}
.dotlbl b{color:#fff;font-weight:800;font-size:calc(15px * var(--run-scale))}
.next{margin-top:calc(6px * var(--run-scale));font-size:calc(14px * var(--run-scale));color:rgba(255,255,255,.85);letter-spacing:calc(.5px * var(--run-scale))}
.donelabel{margin-top:calc(14px * var(--run-scale));font-size:calc(12px * var(--run-scale));letter-spacing:calc(1.5px * var(--run-scale));text-transform:uppercase;color:rgba(255,255,255,.6)}
.donetime{font-family:"Space Grotesk","Manrope",sans-serif;font-size:calc(46px * var(--run-scale));font-weight:800;line-height:1;margin-top:calc(4px * var(--run-scale));color:#fff;font-variant-numeric:tabular-nums;letter-spacing:calc(-1px * var(--run-scale))}
.next b{color:#fff}
.done-close{position:relative;z-index:2;width:auto;min-width:calc(220px * var(--run-scale));margin-top:calc(30px * var(--run-scale));
font-size:calc(18px * var(--run-scale));letter-spacing:calc(1px * var(--run-scale));padding:calc(20px * var(--run-scale)) calc(44px * var(--run-scale))}
.dots{display:flex;gap:calc(6px * var(--run-scale));margin-top:calc(10px * var(--run-scale));flex-wrap:wrap;justify-content:center;max-width:calc(300px * var(--run-scale))}
.dot{width:calc(9px * var(--run-scale));height:calc(9px * var(--run-scale));border-radius:50%;background:rgba(255,255,255,.28)}
.dot.done{background:#fff}
.dot.cur{background:#fff;animation:repPulse 1.15s ease-out infinite}
@keyframes repPulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);transform:scale(1)}
70%{box-shadow:0 0 0 calc(10px * var(--run-scale)) rgba(255,255,255,0);transform:scale(1.35)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0);transform:scale(1)}
}
.setdots{margin-top:calc(6px * var(--run-scale));gap:calc(8px * var(--run-scale))}
.setdots .dot{width:calc(13px * var(--run-scale));height:calc(13px * var(--run-scale))}
.dot.setcur{background:#fff;box-shadow:0 0 0 calc(3px * var(--run-scale)) rgba(255,255,255,.35)}
.actgrid{
--act-ring-size:calc(40px * var(--run-scale));
--act-unit:calc(48px * var(--run-scale));
--act-col-gap:calc(6px * var(--run-scale));
display:flex;flex-wrap:wrap;justify-content:center;
gap:calc(12px * var(--run-scale)) var(--act-col-gap);
max-width:calc(var(--act-unit) * 4 + var(--act-col-gap) * 3);
margin-top:calc(10px * var(--run-scale));
}
.actmember{display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--run-scale));width:var(--act-unit);min-width:0}
.actring-wrap{position:relative}
@property --act{syntax:'<angle>';inherits:false;initial-value:0deg}
.actring{width:var(--act-ring-size);height:var(--act-ring-size);border-radius:50%;padding:calc(3px * var(--run-scale));display:flex;
background:conic-gradient(var(--act-ring) var(--act), var(--act-track) 0);
transition:--act 1s linear}
.actring-inner{width:100%;height:100%;border-radius:50%;background:var(--act-disc);padding:calc(2px * var(--run-scale));display:flex}
.actavatar{width:100%;height:100%;border-radius:50%;background-color:#2a2a2a;
display:flex;align-items:center;justify-content:center;
font-size:calc(12px * var(--run-scale));font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.actring.off{opacity:.55}
.actstar{position:absolute;top:calc(-3px * var(--run-scale));right:calc(-3px * var(--run-scale));width:calc(15px * var(--run-scale));height:calc(15px * var(--run-scale));border-radius:50%;
background:var(--act-badge);color:#3a2600;border:calc(1.5px * var(--run-scale)) solid var(--act-disc);
display:flex;align-items:center;justify-content:center;
font-size:calc(9px * var(--run-scale));font-weight:700;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.actlabel{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:var(--act-unit);min-width:0;
letter-spacing:.03em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.actname{max-width:100%;font-size:calc(11px * var(--run-scale));font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.actname.me{font-weight:700}
.actlevel{font-size:calc(10.5px * var(--run-scale));font-weight:700}
@media(prefers-reduced-motion:reduce){.actring{transition:none}}
.sync-banner{display:flex;align-items:center;gap:10px;margin-top:10px;max-width:300px;
padding:9px 10px 9px 12px;border-radius:14px;
background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);
color:#fff;text-align:left}
.sync-banner svg{flex:0 0 auto;width:17px;height:17px;opacity:.9}
.sync-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.sync-text b{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.sync-text span{font-size:11px;opacity:.8;line-height:1.25}
.sync-retry{flex:0 0 auto;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
color:#fff;font-size:12px;font-weight:700;padding:6px 11px;border-radius:10px;cursor:pointer}
.sync-retry:active{transform:scale(.96)}
.sync-retry:disabled{opacity:.5;cursor:default}
.toast{position:fixed;left:50%;transform:translateX(-50%);z-index:6;
bottom:calc(var(--runpad-h, 150px) + 16px + env(safe-area-inset-bottom, 0px));
max-width:min(320px, calc(100vw - 32px));
padding:10px 16px;border-radius:999px;
background:rgba(20,20,20,.94);border:1px solid rgba(255,255,255,.14);
box-shadow:0 6px 24px rgba(0,0,0,.45);
color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
animation:toast-in .22s ease-out}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}
.power-hint{position:fixed;left:50%;transform:translateX(-50%);z-index:6;
bottom:calc(var(--runpad-h, 150px) + 16px + env(safe-area-inset-bottom, 0px));
display:flex;align-items:center;gap:10px;width:min(340px, calc(100vw - 28px));
padding:10px 10px 10px 13px;border-radius:16px;
background:rgba(20,20,20,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 24px rgba(0,0,0,.45);
color:#fff;text-align:left;animation:toast-in .22s ease-out}
.power-hint svg{flex:0 0 auto;width:18px;height:18px;opacity:.9}
.power-hint-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.power-hint-text b{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.power-hint-text span{font-size:11px;opacity:.82;line-height:1.3}
.power-hint-x{flex:0 0 auto;align-self:stretch;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:11px;cursor:pointer}
.power-hint-x:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){.power-hint{animation:none}}
.runpad{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:3;
width:100%;max-width:var(--frame);display:flex;flex-direction:column;align-items:center;gap:calc(10px * var(--runpad-scale));
background:rgba(0,0,0,.82);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.06);
padding:calc(12px * var(--runpad-scale)) 20px calc(14px * var(--runpad-scale) + env(safe-area-inset-bottom, 0px))}
.runpad .next{margin:0;font-size:calc(14px * var(--runpad-scale));line-height:calc(20px * var(--runpad-scale))}
.nowplaying{display:flex;align-items:center;justify-content:center;gap:calc(14px * var(--runpad-scale));width:100%;min-width:0}
.np-text{min-width:0;max-width:60%}
.np-title{font-size:calc(13px * var(--runpad-scale));line-height:calc(18px * var(--runpad-scale));font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-title.np-idle{color:rgba(255,255,255,.6)}
.np-meta{font-size:calc(11px * var(--runpad-scale));line-height:calc(15px * var(--runpad-scale));color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-controls{display:flex;align-items:center;gap:calc(8px * var(--runpad-scale));flex:0 0 auto}
.np-toggle,.np-skip{display:inline-flex;align-items:center;justify-content:center;width:calc(36px * var(--runpad-scale));height:calc(36px * var(--runpad-scale));padding:0;
border-radius:calc(12px * var(--runpad-scale));background:var(--panel);border:1px solid var(--line);cursor:pointer}
.np-skip{color:var(--text)}
.np-toggle{color:var(--accent)}
.np-toggle:active,.np-skip:active{background:var(--panel2);transform:scale(.96)}
.np-skip svg{width:calc(18px * var(--runpad-scale));height:calc(18px * var(--runpad-scale));display:block}
.np-retry{display:inline-flex;align-items:center;justify-content:center;height:calc(36px * var(--runpad-scale));padding:0 calc(14px * var(--runpad-scale));
border-radius:calc(12px * var(--runpad-scale));background:var(--panel);border:1px solid var(--line);color:var(--text);
font-size:calc(12px * var(--runpad-scale));font-weight:700;cursor:pointer}
.np-retry:active{background:var(--panel2);transform:scale(.96)}
.np-retry:disabled{opacity:.5;cursor:default;transform:none}
.np-toggle svg{width:calc(18px * var(--runpad-scale));height:calc(18px * var(--runpad-scale));display:block;color:var(--muted)}
.np-voice.on svg{color:var(--accent)}
.eq{display:flex;align-items:flex-end;gap:calc(2px * var(--runpad-scale));height:calc(16px * var(--runpad-scale))}
.eq span{width:calc(3px * var(--runpad-scale));height:100%;background:currentColor;border-radius:calc(2px * var(--runpad-scale));transform:scaleY(.3);transform-origin:bottom;
animation:eq-bounce .9s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.15s}
.eq span:nth-child(3){animation-delay:.3s}
.eq span:nth-child(4){animation-delay:.45s}
.np-toggle:not(.playing) .eq span{animation-play-state:paused;transform:scaleY(.3)}
@keyframes eq-bounce{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.eq span{animation:none;transform:scaleY(.6)}}
.timeline{display:flex;align-items:center;gap:calc(10px * var(--runpad-scale));width:100%}
.tl-time{flex:0 0 auto;display:inline-flex;align-items:center;gap:calc(6px * var(--runpad-scale));font-size:calc(14px * var(--runpad-scale));
line-height:calc(20px * var(--runpad-scale));font-weight:700;
font-variant-numeric:tabular-nums;color:#fff;letter-spacing:calc(.3px * var(--runpad-scale))}
.tl-time svg{width:calc(16px * var(--runpad-scale));height:calc(16px * var(--runpad-scale));display:block;flex:0 0 auto;color:rgba(255,255,255,.75)}
.tlbar{position:relative;flex:1;height:calc(10px * var(--runpad-scale));border-radius:calc(5px * var(--runpad-scale));overflow:hidden;min-width:0}
.tlbar-veil{position:absolute;left:0;top:0;bottom:0;background:rgba(5,8,12,.62);
border-right:calc(2px * var(--runpad-scale)) solid rgba(255,255,255,.5);transition:width 1s linear}
.runctl{display:flex;gap:calc(12px * var(--runpad-scale));justify-content:center;width:100%}
.runctl .btn{flex:0 0 auto;width:calc(70px * var(--runpad-scale));height:calc(70px * var(--runpad-scale));padding:0;border-radius:calc(16px * var(--runpad-scale));font-size:calc(14px * var(--runpad-scale));font-weight:700;letter-spacing:calc(1px * var(--runpad-scale));
white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:calc(9px * var(--runpad-scale));
background:var(--panel);border:1px solid var(--line);color:var(--text)}
.runctl .btn:active{background:var(--panel2);transform:scale(.98)}
.runctl .btn.pause-wide{flex:1;width:auto;padding:0 calc(18px * var(--runpad-scale))}
.runctl .btn svg{width:calc(26px * var(--runpad-scale));height:calc(26px * var(--runpad-scale));display:block;flex:0 0 auto}
.run-topbar{position:absolute;left:50%;transform:translateX(-50%);top:0;z-index:21;
width:100%;max-width:var(--frame);display:flex;align-items:center;pointer-events:none;
height:calc(var(--run-topbar-h) + env(safe-area-inset-top, 0px));
padding:calc(14px + env(safe-area-inset-top, 0px)) max(20px,env(safe-area-inset-right, 0px)) 14px max(20px,env(safe-area-inset-left, 0px))}
.run-stop{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
background:var(--panel);border:1px solid var(--line);color:var(--text);
font-size:15px;line-height:20px;font-weight:600;padding:10px 16px;border-radius:16px}
.run-stop svg{width:18px;height:18px;display:block}
.run-stop:active{background:var(--panel2);transform:scale(.98)}
.sound-tap{position:fixed;left:50%;top:calc(var(--run-topbar-h) + env(safe-area-inset-top, 0px));transform:translateX(-50%);z-index:22;
display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#04120b;border:none;border-radius:999px;
padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.sound-tap:active{transform:translateX(-50%) scale(.97)}
.sound-tap svg{width:18px;height:18px;display:block;flex:0 0 auto}
.setname{font-size:13px;color:rgba(255,255,255,.8);letter-spacing:1px;text-transform:uppercase}
.modal{position:fixed;inset:0;background:rgba(3,6,10,.86);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;max-width:360px;width:100%;text-align:center;max-height:88dvh;overflow:auto}
.card h3{margin:0 0 4px}
.card p{color:var(--muted);font-size:13px;margin:0 0 16px}
.share-sep{margin:18px 0 6px;font-size:11px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.card .share-hint{font-size:12px;color:var(--muted);margin:8px 0 14px}
.card .toggle-row{text-align:left;margin:10px 0}
.qr{display:flex;align-items:center;justify-content:center;min-height:240px;padding:14px;background:#fff;border-radius:12px;margin-bottom:14px}
.qr img{display:block;width:min(64vw,248px);height:auto;max-width:100%}
.spinner{width:44px;height:44px;border:4px solid rgba(0,0,0,.12);border-top-color:var(--accent);border-radius:50%;animation:qrspin .8s linear infinite}
@keyframes qrspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}
.linkbox{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);word-break:break-all;background:var(--panel2);padding:10px;border-radius:10px;margin-bottom:12px;max-height:70px;overflow:auto}
.readerwrap{position:relative;width:100%;aspect-ratio:1;margin-bottom:12px;
border-radius:12px;overflow:hidden;background:var(--panel2)}
.readerwrap .reader{width:100%;height:100%;margin-bottom:0;border-radius:0}
.readerwrap .reader video{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.reader-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:var(--panel2)}
.reader-veil .spinner{border-color:rgba(255,255,255,.14);border-top-color:var(--accent)}
.scanhint{font-size:12px;color:var(--muted);margin:8px 0}
.setcard{display:flex;align-items:center;justify-content:space-between;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;text-align:left}
.setcard .name{font-weight:700}
.setcard .meta{font-size:12px;color:var(--muted);margin-top:3px}
.setcard .x{color:var(--muted);font-size:16px;padding:6px;cursor:pointer}
.empty{color:var(--muted);font-size:13px;padding:18px 0}
.ex-and-details{display:flex;align-items:stretch;gap:10px;margin:14px 0}
.ex-and-details-stepper{flex:1;min-width:0}
.ex-and-details-stepper .field{margin:0}
.details-btn{width:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 16px;font-size:14px;font-weight:600;border-radius:12px;white-space:nowrap;
color:var(--text);border:1px solid #33414f;background:var(--panel)}
.details-btn .chev{font-size:20px;line-height:1;color:var(--muted)}
.collapse{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:14px 0}
.collapse-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
background:transparent;border:none;color:var(--text);text-align:left;padding:13px 16px;cursor:pointer;font:inherit}
.collapse-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.ct-label{font-size:14px;font-weight:600;letter-spacing:.2px}
.ct-summary{font-size:12px;color:var(--muted)}
.collapse .chev{font-size:22px;line-height:1;color:var(--muted);flex:0 0 auto;transform:rotate(90deg);transition:transform .2s ease}
.collapse.open .chev{transform:rotate(-90deg)}
.collapse-body{padding:0 12px 6px}
.collapse-body .field{margin:8px 0}
.collapse.off{opacity:.4;pointer-events:none}
.genre-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:4px 4px 10px}
.genre-btn{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);
border-radius:14px;padding:14px;color:var(--text);cursor:pointer;font-size:15px;font-weight:600;text-align:left}
.genre-btn .gic{font-size:22px;line-height:1;flex:0 0 auto}
.genre-btn:active{transform:scale(.98)}
.genre-btn.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel2))}
.langflag{width:18px;height:13px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.lang-current{display:flex;align-items:center;gap:8px}
.exdetails .exhint{color:var(--muted);font-size:13px;margin:2px 2px 12px}
.exlist{display:flex;flex-direction:column;gap:8px}
.exrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left}
.exrow.chosen{border-color:var(--run-work);background:color-mix(in srgb,var(--run-work) 12%,var(--panel))}
.exrow-main{display:flex;align-items:center;gap:12px;min-width:0}
.exnum{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted)}
.exrow.chosen .exnum{background:var(--run-work);border-color:var(--run-work);color:#04120b}
.exrow-text{min-width:0}
.exname{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exmeta{font-size:12px;color:var(--muted);margin-top:2px}
.exchev{color:var(--muted);font-size:20px;flex:0 0 auto}
.exclear{flex:0 0 auto;background:transparent;border:none;color:var(--muted);font-size:15px;padding:6px;cursor:pointer;border-radius:8px}
.exclear:active{background:var(--line)}
.expick{max-width:420px;text-align:left}
.excat{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:14px 0 8px;font-weight:700}
.expick .excat:first-of-type{margin-top:4px}
.exitem{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer}
.exitem:active{border-color:var(--run-work)}
.exitem-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.exitem-name{font-weight:700;font-size:15px}
.exitem-diff{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.exitem-diff.beginner{color:var(--run-work);border-color:color-mix(in srgb,var(--run-work) 50%,var(--line))}
.exitem-diff.advanced{color:var(--rest);border-color:color-mix(in srgb,var(--rest) 50%,var(--line))}
.exitem-how{font-size:13px;color:var(--text);opacity:.85;margin-top:6px}
.exitem-eq{font-size:12px;color:var(--muted);margin-top:4px}
#blazor-error-ui{
display:none;position:fixed;left:0;bottom:0;width:100%;z-index:1000;
background:#2b1416;color:#ffd9d9;border-top:1px solid var(--danger);
padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
box-shadow:0 -2px 12px rgba(0,0,0,.45);font-size:14px
}
#blazor-error-ui .reload{color:var(--accent);text-decoration:underline;cursor:pointer;margin-left:8px}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:16px;top:12px;color:var(--muted)}
@media (min-width:600px)  and (min-height:640px){ :root{--run-scale:1.15} }
@media (min-width:720px)  and (min-height:760px){ :root{--run-scale:1.35} }
@media (min-width:1024px) and (min-height:900px){ :root{--run-scale:1.7} }
@media (min-width:1440px) and (min-height:900px){ :root{--run-scale:2} }
html:has(.screen.run .nowplaying){--runpad-h:var(--runpad-h-np)}
.runwrap .me-btn{gap:calc(8px * var(--run-scale));font-size:calc(15px * var(--run-scale));
padding:calc(10px * var(--run-scale)) calc(16px * var(--run-scale));border-radius:calc(16px * var(--run-scale))}
.runwrap .me-btn svg{width:calc(18px * var(--run-scale));height:calc(18px * var(--run-scale))}
@media (min-width:600px) and (min-height:640px){
.time,.donetime{font-weight:700}
.dotlbl{font-variant-numeric:tabular-nums}
.screen.run:not(:has(.runpad)) .runwrap{padding-bottom:0}
}