/* Silver white and pale mist blue: translucent, quiet, and legible. */
:root{color-scheme:light;--bg:#e9eef1;--panel:rgba(250,252,253,.66);--line:rgba(113,142,160,.23);--text:#334958;--muted:#617787;--accent:#557f95}
body{background:linear-gradient(120deg,rgba(249,250,250,.94),rgba(224,236,244,.87) 52%,rgba(236,241,244,.94)),url('assets/resonance-field.svg') center/cover fixed;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 12%,#ffffffa6,transparent 60%)}
::selection{background:#b5d2e2;color:#243e50}
aside{background:#f6f8fa91;border-color:#ffffffbd;box-shadow:0 1px #8da8b71a;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{color:#354b5a;letter-spacing:1px}.brand b{color:#8c8874}.brand small{color:#667c8c;letter-spacing:2px}
nav button{border:1px solid transparent;border-radius:5px;color:#5d7484;transition:background .18s,color .18s}nav button.active{background:linear-gradient(110deg,#ffffffbd,#dae7ee60);color:#385b71;border-color:#ffffffc9;box-shadow:0 2px 10px #617e8b08}nav button:hover{background:#ffffff85;color:#294d64}
.badge{background:#f7fafb6b;border-color:#9cb2bf40;color:#607582;border-radius:3px}
h1{font-weight:500;letter-spacing:4px;color:#3e5362}.eyebrow{color:#647e8d;letter-spacing:3px}#date-label,footer{color:#637c8c}
.panel{background:var(--panel);border:1px solid #ffffffcf;border-radius:8px;box-shadow:0 14px 42px #4c6c800a,inset 0 1px #fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.timer-panel{position:relative;background:linear-gradient(135deg,#ffffffab,#f5f9fc6b 50%,#e9f1f67d);border-color:#ffffffd9;border-radius:8px;box-shadow:0 20px 64px #5577880d,inset 0 1px #fff}
.timer-panel::before,.timer-panel::after{content:"";position:absolute;width:28px;height:28px;pointer-events:none;border-color:#a6a28bb3;border-style:solid}
.timer-panel::before{left:-1px;top:-1px;border-width:1px 0 0 1px}.timer-panel::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.panel-top{color:#657f8f;font-size:12px;letter-spacing:2px}.panel-top>span:first-child{color:#79765f}
.mode-tabs{background:#d9e5ed66;border:1px solid #ffffff73;border-radius:4px;padding:4px}.mode-tabs button{border-radius:2px;color:#5b7283}.mode-tabs button.selected{background:#ffffffc9;color:#385d73;box-shadow:inset 0 -1px #9aabac,0 2px 8px #50677908}
.clock-wrap{background:radial-gradient(circle,#fff9,transparent 67%);border-radius:50%}.clock-wrap svg{opacity:.9}.clock-wrap .track{stroke:#8da7b433;stroke-width:1}.clock-wrap circle{stroke:#7d9eae;stroke-width:1.4}.clock-content #timer{color:#3b5669;font-weight:300;letter-spacing:1px;text-shadow:0 1px #fff}.clock-content span{color:#526d7f}.clock-content>span:last-child{font-size:12px;letter-spacing:1px;color:#667e8c}
.primary{background:linear-gradient(110deg,#6c8b9d,#56798e);color:#fff;box-shadow:0 4px 16px #587c9326;border:1px solid #68899a;border-radius:4px;font-weight:500;letter-spacing:1px}.primary:hover{background:#4e7288;box-shadow:0 5px 20px #587c9333}
.icon-button,.timer-actions .icon-button,.secondary,.stage-top-actions button,.stage-controls .secondary{background:#ffffff78;border:1px solid #a5bbc85c;color:#4c6c80;border-radius:4px;box-shadow:none}.icon-button:hover,.secondary:hover,.stage-reset:hover{background:#f8fcffe0;color:#2e566d}
.timer-foot{border-color:#9db6c32b;color:#60798a}#round-dots{color:#8c876e}#focus-enter{color:#52758a}
.character-picker-heading{color:#5e7889;font-size:12px;letter-spacing:2px}.character-picker-heading #character-selection{color:#7a745e}.character-carousel{scrollbar-color:#a0b3be66 transparent}.character-carousel>button{background:#fafcfd70;border:1px solid #ffffffb3;border-radius:5px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .18s,border-color .18s}.character-carousel>button:hover{background:#ffffffa6;border-color:#93afbf8c}.character-carousel>button[aria-pressed=true]{background:linear-gradient(110deg,#f9fbfcd1,#e3edf4a6);border-color:#a5b5b47d;box-shadow:inset 2px 0 #a6a18a}.character-carousel strong{color:#3e5869;letter-spacing:2px}.character-carousel small{color:#60798a;font-size:12px}.character-monogram{background:#e0e9ee66;border:1px solid #9db3be40;border-radius:4px;color:#6e7f84;font-size:18px}.character-check{color:#847e61}
.stats-summary .stat strong,.companion-stat strong{color:#476d83;font-weight:400}.companion-stat{border-color:var(--line)}.chart-bar{background:linear-gradient(#b8ceda,#91adbe);border-radius:2px}.chart-column:last-child .chart-bar{background:linear-gradient(#a4b9c0,#6d91a6)}
select,input,textarea{background:#fbfdffab;border-color:#96b0c14d;color:#344e60;border-radius:4px}input::placeholder,textarea::placeholder{color:#6b8190}input[type=checkbox]{accent-color:#65889e}input:focus,textarea:focus{outline:1px solid #7598ad;border-color:#7598ad}
.danger{color:#a04752;background:#fff6f780;border-color:#cc9ca34d;border-radius:4px}.danger:hover{background:#fff1f3}
dialog{background:linear-gradient(130deg,#fcfdfef2,#e8f0f6ed);border-color:#ffffffe0;border-radius:8px;color:var(--text);box-shadow:0 24px 90px #314f6a33;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}dialog::backdrop{background:#344f6952;backdrop-filter:blur(6px)}
#toast,#alarm-banner{background:#f3f8fdf2;color:#3b5b71;border-color:#b3c7d47d;border-radius:5px;box-shadow:0 10px 38px #3e617a24}.warning{background:#fff5deed;border-color:#bfa47266;color:#785c2b}
.focus-stage{background:linear-gradient(110deg,#f7fafbea,#e2edf5e3),url('assets/resonance-field.svg') center/cover;color:var(--text)}.stage-brand,.stage-brand>span:first-child{color:#4b6473}.stage-divider{color:#95a9b5}.stage-companion,.stage-footer{color:#607b8c}.stage-timer>.eyebrow{color:#6c7f87}.stage-timer h2{color:#577286}.stage-timer #stage-time{color:#3a576d;font-weight:300;text-shadow:0 1px #fff}.stage-progress{background:#9eb5c33b}.stage-progress div{background:#799cac}#stage-status,.stage-reset{color:#5b788c}.character-caption>span{color:#526b7a}.character-caption p{color:#647e8e}.scene-video{border-radius:5px}.scene-retry{background:#f6fafeeb;color:#3f647b;border-color:#92aebe80;border-radius:4px}
html:fullscreen,html:fullscreen body{background:#e9eff3}button:focus-visible{outline:2px solid #6c8da3;outline-offset:4px}
@media(max-width:900px){aside{background:#f6f8fac2}.panel{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
@media(prefers-reduced-transparency:reduce){.panel,.timer-panel,.character-carousel>button,aside,dialog{background:#f1f6f9;backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Uniform portrait selection; scrolling stays inside the strip. */
.character-carousel{gap:16px;padding:6px 4px 10px;scrollbar-width:thin;overscroll-behavior-x:contain;align-items:flex-start}
.character-carousel>button{position:relative;flex:0 0 94px;min-width:94px;max-width:94px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:7px;padding:5px 4px;border:1px solid transparent;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:center;border-radius:8px;scroll-snap-align:center}
.character-carousel>button:hover{background:#ffffff5c;border-color:#ffffff96}.character-carousel>button[aria-pressed=true]{background:#ffffff70;border-color:#a2b8c44d;box-shadow:none}
.avatar-frame{width:76px;height:76px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid #c0cdd370;padding:3px;box-sizing:border-box;background:#eef4f775;pointer-events:none}.avatar-frame img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;user-select:none;-webkit-user-drag:none}.character-carousel [aria-pressed=true] .avatar-frame{border-color:#9b9980;box-shadow:0 0 0 2px #d1d3c32e}.character-carousel strong{font-size:14px;font-weight:500;letter-spacing:0;white-space:nowrap;line-height:22px;pointer-events:none}.character-carousel .character-check{position:absolute;right:8px;top:60px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#6e8b98;color:#fff;font-size:11px;pointer-events:none}.solo-avatar{font-size:30px;color:#7f949e;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#e4edf1}
#companion-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}.companion-stat{gap:12px;padding:10px 0}.companion-identity{display:flex;align-items:center;gap:12px;min-width:0}.stats-avatar{width:44px;height:44px;flex:none;object-fit:contain;border-radius:50%;border:1px solid #acbec766;padding:2px;box-sizing:border-box;background:#f3f8fb66}.avatar-placeholder{display:grid;place-items:center;color:#748996;font-size:21px}.companion-stat strong{font-size:14px;text-align:right;white-space:nowrap}
.character-crop{position:relative;pointer-events:none}.character-crop #stage-gif{display:block;width:100%;height:100%;object-fit:contain;transform:none}.character-crop #stage-avatar{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;object-fit:contain;opacity:.8}#media-status{position:absolute;left:5%;right:5%;bottom:14%;text-align:center;font-size:13px;color:#577486;margin:0}#media-retry{position:absolute;left:50%;bottom:0;transform:translateX(-50%);pointer-events:auto;font-size:13px;white-space:nowrap}
@media(min-width:901px) and (max-height:800px){.timer-panel .clock-wrap{width:clamp(170px,25vh,215px);height:clamp(170px,25vh,215px)}#view-focus{gap:10px}}
@media(max-width:650px){.character-carousel>button{flex:0 0 94px;min-width:94px}.character-carousel{gap:12px}#companion-stats{grid-template-columns:1fr}.companion-stat{padding:9px 0}.character-picker{max-width:100%}}

/* Free scrolling must not select or snap back to a character. */
.character-carousel{scroll-snap-type:none;touch-action:pan-x pan-y;overflow-anchor:none}
.character-carousel>button{flex:0 0 122px;min-width:122px;max-width:122px;scroll-snap-align:none}
.avatar-frame{width:108px;height:108px}
.character-carousel .character-check{top:91px;right:8px}
@media(max-height:800px) and (min-width:651px){.clock-wrap{width:clamp(160px,23vh,198px);height:clamp(160px,23vh,198px)}}

.clock-wrap{container-type:inline-size}
.clock-content{gap:6px}
.clock-content>span{max-width:70%;line-height:1.35;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
.clock-content>span:last-child{letter-spacing:0}
.clock-content #timer{font-size:29cqw;line-height:1.15;letter-spacing:0;white-space:nowrap}

.duration-open{font-size:14px;letter-spacing:0;text-decoration:underline;text-underline-offset:4px;padding:2px 8px;color:#496b80}
#duration-form label{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:14px 0}#duration-form input{width:110px}

/* Companion achievements: light glass, quiet locked badges, gold unlocked accents. */
.achievement-intro{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin:8px 0 28px}.achievement-intro p{margin:0 0 8px}.achievement-intro .muted{font-size:14px}.achievement-intro>strong{white-space:nowrap;font-size:16px;color:#526d7d;padding:9px 16px;border:1px solid #ffffffbd;border-radius:999px;background:#ffffff80}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding-bottom:24px}.achievement-card{position:relative;text-align:center;padding:22px 20px 20px;min-width:0;overflow:hidden}.achievement-art{width:164px;height:164px;margin:0 auto 12px}.achievement-badge{width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.55}.achievement-state{display:inline-block;font-size:13px;color:#657680;background:#e1e9ed;border-radius:999px;padding:3px 11px;margin-bottom:12px}.achievement-character{font-size:14px;margin:0 0 5px;color:#617b8a}.achievement-title{font-size:19px;line-height:1.5;min-height:57px;margin:0 0 16px;color:#29495d;display:flex;justify-content:center;align-items:center}.achievement-progress{height:5px;overflow:hidden;border-radius:10px;background:#d3dfe5}.achievement-progress>span{display:block;height:100%;background:#8baabd;border-radius:inherit}.achievement-time{font-size:14px;margin:10px 0 4px;color:#425e71;font-variant-numeric:tabular-nums}.achievement-hint{font-size:13px;margin:0;color:#647887}.achievement-card.is-unlocked{border-color:#b9a27399;background:linear-gradient(145deg,#fffdf7e8,#e5eff4c7)}.is-unlocked .achievement-badge{filter:none;opacity:1}.is-unlocked .achievement-state{background:#eee4ca;color:#705a30}.is-unlocked .achievement-progress>span{background:#b39a61}
@media(max-width:650px){.achievement-intro{display:block}.achievement-intro>strong{display:inline-block;margin-top:6px}.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.achievement-card{padding:16px 10px}.achievement-art{width:120px;max-width:100%;height:auto;aspect-ratio:1}.achievement-title{font-size:16px;min-height:48px}.achievement-time,.achievement-character{font-size:14px}nav{overflow-x:auto}nav button{flex-shrink:0}}
@media(max-width:360px){.achievement-grid{grid-template-columns:1fr}}

.calendar-caption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:12px 0}.calendar-year-label{display:flex;gap:8px;align-items:center}.calendar-year-label select{width:auto;padding:6px 12px}.calendar-detail{padding:12px 16px;border-radius:12px;background:#ffffff80;font-size:14px;font-weight:600}.focus-calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:24px;margin-top:24px}.calendar-month h3{font-size:14px;margin:0 0 10px}.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-weekday{text-align:center;font-size:11px;color:#718590;padding-bottom:4px}.calendar-day{padding:0;min-height:0;aspect-ratio:1;border-radius:5px;background:#c5d0d6;color:#4b616d;border:1px solid #b7c5cd;font-size:11px;box-shadow:none}.calendar-day.is-lit{background:#427c8d;color:#fff;border-color:#356b7b}.calendar-day.is-future{opacity:.3;cursor:default}.calendar-day[aria-pressed="true"]{outline:2px solid #263e4c;outline-offset:2px}.calendar-day:focus-visible{outline:3px solid #bb9858;outline-offset:2px}@media(max-width:650px){.focus-calendar{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.calendar-days{gap:3px}.calendar-day{font-size:10px}.calendar-caption{font-size:12px}.calendar-detail{font-size:13px;padding:12px 8px}}
/* Mist gradients and fine orbital ornament. */
body{background:radial-gradient(ellipse at 8% 5%,#f6f5fa 0,transparent 45%),radial-gradient(ellipse at 90% 80%,#7598ae75,transparent 50%),linear-gradient(125deg,#e9f0f4 5%,#b6cedc 55%,#aab7d0 100%);background-attachment:fixed}
body::before{background:repeating-linear-gradient(125deg,transparent 0 89px,#ffffff18 90px,transparent 91px 180px),radial-gradient(ellipse at 80% 15%,transparent 30%,#ffffff3d 30.1%,transparent 30.3%,transparent 37%,#ffffff24 37.1%,transparent 37.3%);opacity:.9}
aside{background:linear-gradient(105deg,#f8fbf5ed,#d9e8f2ed 60%,#ced8eaed);box-shadow:0 4px 24px #355c7412}
nav button.active{background:linear-gradient(120deg,#54798e,#365b77);color:#fff;border-color:#96b7ca;box-shadow:0 4px 14px #3e63752b}
.panel{position:relative;background:linear-gradient(135deg,#f8fcfff0,#e6eff6eb 60%,#cdddebec);box-shadow:0 12px 32px #3b61731a,inset 0 1px #ffffff}
.panel::after{content:"";position:absolute;right:0;top:0;width:105px;height:105px;pointer-events:none;border-radius:0 8px 0 0;background:linear-gradient(135deg,transparent 65%,#668ca214 65.5%,transparent 66.5%),linear-gradient(135deg,transparent 77%,#668ca221 77.5%,transparent 78.5%),radial-gradient(circle at 78% 22%,#829aad55 0 2px,transparent 3px);}
.timer-panel{background:radial-gradient(ellipse at 15% 10%,#fff,transparent 60%),linear-gradient(135deg,#f4f6fbdc,#c5dce9e6)}
.timer-panel::after{width:28px;height:28px;background:none;top:auto;right:-1px}
.primary{background:linear-gradient(115deg,#719da9,#4c7890 55%,#4e627f)}
.achievement-card{background:radial-gradient(ellipse at 50% 5%,#ffffffd9,transparent 58%),linear-gradient(145deg,#eaf2f8f0,#cbdbe7ed)}
.achievement-art{position:relative;z-index:1}.achievement-art::before{content:"";position:absolute;inset:-7px;border:1px solid #8ca7b538;border-radius:50%;pointer-events:none}.achievement-card.is-unlocked{background:radial-gradient(ellipse at 50% 12%,#fff6dfe6,transparent 60%),linear-gradient(145deg,#fffdf8f0,#d1e2ebed)}
.calendar-day{background:linear-gradient(135deg,#cedae3,#b5c4d1)}.calendar-day.is-lit{background:linear-gradient(135deg,#629b9a,#386c87);box-shadow:0 2px 5px #315b7826}.calendar-detail{background:linear-gradient(110deg,#f9fcffcf,#dcebf5ba);border:1px solid #ffffff99}
.focus-stage{background:radial-gradient(ellipse at 75% 20%,#eef0ffe6,transparent 65%),linear-gradient(125deg,#eaf3f5,#abcada 65%,#a9b9d2)}
@media(prefers-reduced-transparency:reduce){.panel{background:linear-gradient(135deg,#f6faff,#dce8f1)}}

#launch-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 25% 20%,#f8fbff,transparent 65%),linear-gradient(135deg,#dcebf1,#a9c6d8 65%,#91a9c8);color:#34566e;transition:opacity .45s ease,visibility .45s;overflow:hidden;pointer-events:none}
#launch-screen[hidden]{display:none}#launch-screen.is-ready{opacity:0;visibility:hidden}#launch-screen::before{content:"";position:absolute;inset:-40%;background:repeating-radial-gradient(ellipse at center,transparent 0 110px,#ffffff35 111px,transparent 112px 190px);transform:rotate(-25deg);pointer-events:none}#launch-screen h2{font-size:clamp(25px,5vw,34px);letter-spacing:8px;font-weight:500;margin:28px 0 10px}#launch-screen p{font-size:14px;letter-spacing:3px;margin:0 0 30px}#launch-screen>span{font-size:12px;letter-spacing:2px;margin-top:16px;color:#526e83}.launch-orbit{position:relative;display:grid;place-items:center;width:96px;height:96px;border:1px solid #ffffffb0;border-radius:50%;box-shadow:0 0 50px #ffffff80}.launch-orbit i{position:absolute;inset:-10px;border:1px solid #5d819441;border-top-color:#567b91;border-right-color:#ffffff;border-radius:50%;animation:launch-spin 2.2s linear infinite}.launch-orbit b{font-size:44px;font-weight:300;color:#688694;animation:launch-glow 1.5s ease-in-out infinite alternate}.launch-line{height:2px;width:150px;border-radius:2px;overflow:hidden;background:#7895a82b}.launch-line::after{content:"";display:block;width:60%;height:100%;background:linear-gradient(90deg,transparent,#53798e,#fff,transparent);animation:launch-track 1.4s ease-in-out infinite}@keyframes launch-spin{to{transform:rotate(360deg)}}@keyframes launch-glow{to{opacity:.5;transform:scale(.9)}}@keyframes launch-track{from{transform:translateX(-100%)}to{transform:translateX(180%)}}@media(prefers-reduced-motion:reduce){.launch-orbit i,.launch-orbit b,.launch-line::after{animation:none}#launch-screen{transition:none}}