/* Distraction Meter B – a lake at dawn, glass over water. */
@font-face{font-family:"Lora";src:url(fonts/lora-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --serif:"Lora",Georgia,"Times New Roman",serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#1D2921;--ink-2:#3B493F;--ink-3:#525E56;
  --glass:rgba(250,248,241,.72);--glass-b:rgba(255,255,255,.75);--glass-sh:0 30px 80px rgba(28,40,32,.20),0 2px 0 rgba(255,255,255,.6) inset;
  --tile:rgba(255,255,255,.62);--tile-b:rgba(29,41,33,.11);--tile-h:rgba(255,255,255,.92);
  --pri:#4C6B45;--pri-2:#36522F;--ping-t:#AE452B;--pri-ink:#fff;--pri-soft:rgba(90,122,82,.14);--pri-line:rgba(90,122,82,.45);
  --ping:#D46A4E;--ping-soft:rgba(212,106,78,.12);--line:rgba(29,41,33,.13);--input:rgba(255,255,255,.7);
  --sun:#F6CF86;--far1:#AEBDC0;--far2:#93A8A8;--mid:#5F7B6E;--fg:#24372D;--lake0:#EADBC2;--lake1:#A7C1BD;--lake2:#57807C;
  --shore:rgba(255,250,240,.75);--bird:rgba(40,55,50,.5);--bokeh:rgba(170,195,150,.22);--mistc:255,255,255;
  --ring-rgb:255,255,255;--glint-rgb:255,240,210;--mote-rgb:255,250,232;
  --mist:1;color-scheme:light}
@media (prefers-color-scheme:dark){:root{
  --ink:#EDF0EA;--ink-2:#C5CDC4;--ink-3:#99A49A;
  --glass:rgba(12,18,22,.66);--glass-b:rgba(255,255,255,.10);--glass-sh:0 30px 80px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.06) inset;
  --tile:rgba(255,255,255,.045);--tile-b:rgba(255,255,255,.12);--tile-h:rgba(255,255,255,.09);
  --pri:#E3BF7C;--pri-2:#C79A4C;--pri-ink:#1E170A;--pri-soft:rgba(227,191,124,.14);--pri-line:rgba(227,191,124,.5);
  --ping:#F08A6C;--ping-t:#F49A7E;--ping-soft:rgba(240,138,108,.12);--line:rgba(255,255,255,.12);--input:rgba(255,255,255,.06);
  --sun:#F1E8CF;--far1:#25353D;--far2:#1B2A30;--mid:#13201E;--fg:#070E0C;--lake0:#34444A;--lake1:#16272C;--lake2:#071216;
  --shore:rgba(220,230,235,.25);--bird:rgba(200,210,220,.3);--bokeh:rgba(240,200,120,.18);--mistc:170,190,200;
  --ring-rgb:215,228,240;--glint-rgb:245,232,190;--mote-rgb:255,212,130;color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:#DCD9CC;color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){body{background:#0B1418}}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-.005em;color:var(--ink)}
em{font-style:italic;color:var(--pri)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--pri)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pri);outline-offset:3px;border-radius:10px}
.vh,.skip:not(:focus){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;z-index:100;background:var(--glass);padding:10px 14px;border-radius:12px}
[hidden]{display:none!important}
.ico{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.25em;flex:none}

/* ---------- the world ---------- */
#world{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.w-l{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.w-c{position:fixed;inset:0;width:100%;height:100%}
.sky i{position:absolute;inset:0;transition:opacity 3s ease}
.s-dawn{background:linear-gradient(180deg,#BCCDD3 0%,#DCDBD1 34%,#F2D9B6 58%,#F4E6D2 100%)}
.s-day{background:linear-gradient(180deg,#9FC0CE 0%,#C9DCDF 38%,#EEE5CF 60%,#F2ECDF 100%);opacity:0}
.s-night{background:linear-gradient(180deg,#071016 0%,#0E1A21 40%,#1E2C33 60%,#18252B 100%);opacity:0}
body[data-mood=day] .s-day,body[data-mood=clear] .s-day{opacity:1}
@media (prefers-color-scheme:dark){.s-night{opacity:1!important}.s-day,.s-dawn{opacity:0!important}}
.w-sun{fill:var(--sun);opacity:.92}
.w-glow{opacity:.9;transition:opacity 3s}
body[data-mood=clear] .w-glow{opacity:.65}
.w-far1{fill:var(--far1)}.w-far2{fill:var(--far2)}.w-mid{fill:var(--mid)}.w-fg{fill:var(--fg);opacity:.92}
.w-refl{opacity:.32}.w-col{opacity:.8}
.w-shore{stroke:var(--shore);stroke-width:1.4;fill:none}
.w-bokeh circle{fill:var(--bokeh)}
.w-birds{fill:none;stroke:var(--bird);stroke-width:2;stroke-linecap:round;animation:birds 80s linear infinite}
@keyframes birds{0%{transform:translate(-120px,330px)}100%{transform:translate(1720px,250px)}}
.mists{opacity:calc(.25 + var(--mist) * .75);transition:opacity 2.5s ease}
.mist{position:absolute;left:-20%;width:90%;height:16%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(var(--mistc),.78) 0%,rgba(var(--mistc),.35) 45%,rgba(var(--mistc),0) 70%);filter:blur(8px);animation:drift 60s ease-in-out infinite alternate}
.m1{top:50%;animation-duration:70s}.m2{top:56%;left:30%;height:12%;animation-duration:54s;animation-delay:-20s}.m3{top:61%;left:-5%;animation-duration:80s;animation-delay:-35s}
.m4{top:44%;left:45%;width:70%;height:12%;opacity:.7;animation-duration:66s;animation-delay:-10s}.m5{top:68%;left:20%;width:80%;opacity:calc(var(--mist) * .9);animation-duration:90s}
@keyframes drift{from{transform:translateX(-10%)}to{transform:translateX(14%)}}
.w-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 18%,transparent 82%,rgba(0,0,0,.08))}
@media (prefers-color-scheme:dark){.w-veil{background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 25%,transparent 80%,rgba(0,0,0,.3))}}
@media (prefers-reduced-motion:reduce){.mist,.w-birds{animation:none}}

/* ---------- header and footer ---------- */
header.top{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top)}
.bar{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:18px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 1.12rem var(--serif);color:var(--ink);letter-spacing:.01em}
.logo svg{width:40px;height:24px;color:var(--pri)}
.logo-dot{fill:var(--ping)}
.mainnav{margin-left:auto;display:flex;gap:18px;font-size:.95rem}
.mainnav a{text-decoration:none;color:var(--ink-2)}
.freechip{font:600 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);color:var(--pri);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
header.top .bar{background:none}
body.scrolled header.top{background:linear-gradient(var(--glass),transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.testing .mainnav{display:none}
body.testing .freechip{margin-left:auto}
.foot{margin-top:40px;padding:22px 0 calc(22px + env(safe-area-inset-bottom));background:var(--glass);border-top:1px solid var(--glass-b);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.foot .bar{display:block}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem}
.foot nav a{color:var(--ink-2);text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot p{margin-top:12px;font-size:.84rem;color:var(--ink-3)}
body.testing .foot,body.testing .about,body.testing .scrollcue{display:none}

/* ---------- glass ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:28px;box-shadow:var(--glass-sh);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){:root{--glass:rgba(250,248,241,.95)}@media (prefers-color-scheme:dark){:root{--glass:rgba(12,18,22,.94)}}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;background:linear-gradient(180deg,var(--pri),var(--pri-2));color:var(--pri-ink);font:600 1rem var(--sans);text-decoration:none;cursor:pointer;box-shadow:0 10px 26px rgba(61,90,57,.28),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s,box-shadow .2s,opacity .2s,background .2s}
@media (prefers-color-scheme:dark){.btn{box-shadow:0 10px 30px rgba(199,154,76,.25),inset 0 1px 0 rgba(255,255,255,.3)}}
.btn:hover{color:var(--pri-ink)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.big{min-height:60px;padding:0 34px;font-size:1.1rem}
.btn.ghost{background:var(--tile);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{color:var(--ink);background:var(--tile-h)}
.btn.small{min-height:42px;padding:0 18px;font-size:.92rem}
.btn .ico{width:20px;height:20px}
.btn[aria-pressed=true]{background:var(--pri-soft);border-color:var(--pri-line)}
.linkbtn{background:none;border:0;padding:0;color:var(--pri);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}

/* ---------- the stage: the check is the page ---------- */
.stage{min-height:100vh;min-height:100svh;display:grid;place-items:center;align-content:center;gap:18px;padding:88px 16px 56px;position:relative}
.card{width:min(900px,100%);padding:clamp(22px,4.4vw,52px)}
.eyebrow{display:flex;flex-wrap:wrap;gap:6px 0;font:600 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow span+span::before{content:"·";margin:0 10px;color:var(--ink-3)}
.eyebrow b{color:var(--pri);font-weight:600}
.intro h1{font-size:clamp(2.5rem,6.4vw,4.4rem);margin:16px 0 18px;text-wrap:balance}
.intro .lead{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--ink-2);max-width:60ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:.92rem;color:var(--ink-3)}
.trust li{display:block}
.trust li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pri);margin-right:9px;vertical-align:2px}
.trust b{color:var(--ink);font-weight:600}
.scrollcue{display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-size:.85rem;color:var(--ink-2);opacity:.9}
.scrollcue i{width:1px;height:28px;background:linear-gradient(var(--ink-2),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* the quiz card */
.qhead{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:.95rem;color:var(--ink-2)}
.qtime{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3)}
.qbar{height:7px;border-radius:7px;background:var(--line);margin:12px 0 30px;overflow:hidden}
.qbar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--pri),var(--pri-2));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.qcard{animation:cardIn .5s cubic-bezier(.2,.8,.2,1)}
.qcard.out{animation:cardOut .22s ease forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cardOut{to{opacity:0;transform:translateY(-10px)}}
.qchap{display:flex;align-items:center;gap:8px;font:600 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--pri);margin-bottom:12px}
.qchap .ico{width:20px;height:20px}
.qprompt{display:block;font:500 clamp(1.55rem,3.5vw,2.4rem)/1.22 var(--serif);margin:0 0 12px;text-wrap:balance}
.qprompt:focus{outline:none}
.qhelp{display:flex;gap:10px;align-items:flex-start;color:var(--ink-3);font-size:1rem;margin-bottom:24px}
.qhelp .ico{color:var(--pri);margin-top:2px}
.qfoot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:30px}
.qhint{text-align:center;font-size:.9rem;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:8px}
.qcalm{text-align:center;font-size:.86rem;color:var(--ink-3);margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.qcalm .ico{color:var(--ping)}
@media (hover:none){.qhint{visibility:hidden}}

/* tiles: big tap targets with numbers */
.tiles{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:12px}
.tiles label{position:relative;display:block;cursor:pointer}
.tiles input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;min-height:128px;padding:16px 10px;border-radius:18px;background:var(--tile);border:1px solid var(--tile-b);text-align:center;transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,box-shadow .25s,color .2s}
.tn{font:500 2rem/1 var(--serif);color:var(--pri)}
.tl{font-size:.94rem;line-height:1.28;color:var(--ink-2)}
.ts{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px}
.tb .ico{width:34px;height:34px;color:var(--pri)}
.tb .wpic{width:78px;height:auto;color:var(--pri)}
.tok{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--pri-2);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.18);opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.tok svg{width:16px;height:16px}
@media (hover:hover){.tiles label:hover .tb{transform:translateY(-3px);background:var(--tile-h);box-shadow:0 10px 24px rgba(0,0,0,.08)}}
.tiles input:checked+.tb{background:linear-gradient(160deg,var(--pri),var(--pri-2));border-color:transparent;color:var(--pri-ink);box-shadow:0 14px 30px rgba(61,90,57,.3)}
.tiles input:checked+.tb .tn,.tiles input:checked+.tb .tl,.tiles input:checked+.tb .ts,.tiles input:checked+.tb .ico,.tiles input:checked+.tb .wpic{color:var(--pri-ink)}
.tiles input:checked+.tb .tok{opacity:1;transform:none}
.tiles input:focus-visible+.tb{outline:3px solid var(--pri);outline-offset:3px}
.tiles input:disabled+.tb{opacity:.45;cursor:default}
.tiles.pics .tb{min-height:120px}
.tiles.scale{--n:11;gap:8px}
.tiles.scale .tb{min-height:64px;padding:8px 2px;border-radius:14px}
.tiles.scale .tn{font-size:1.45rem}
.ends{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-3);margin-top:10px}
.tiles.two{--n:2}.tiles.three{--n:3}.tiles.four{--n:4}
.words{display:block;width:100%;min-height:130px;padding:16px 18px;border-radius:18px;border:1px solid var(--tile-b);background:var(--input);font-size:1.1rem;line-height:1.5;color:var(--ink);resize:vertical}
.words:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-soft)}
input[type=text].words{min-height:0;padding:12px 16px;font-size:1rem}
.checkin{border-radius:16px;padding:14px 18px;background:var(--pri-soft);border:1px solid var(--pri-line);color:var(--ink-2);margin-bottom:18px}
.checkin b{color:var(--ink)}

/* the 15 seconds */
.hold{display:grid;justify-items:center;gap:16px;margin:4px 0 6px}
.stone{position:relative;width:168px;height:168px;border-radius:50%;border:0;padding:0;cursor:pointer;background:radial-gradient(circle at 38% 32%,#7F977A,#4A6644 55%,#2F4A2B);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);font:600 1.05rem var(--sans);box-shadow:0 22px 40px rgba(40,60,40,.35),inset 0 2px 6px rgba(255,255,255,.35),inset 0 -8px 18px rgba(0,0,0,.25);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .25s,box-shadow .3s}
@media (prefers-color-scheme:dark){.stone{background:radial-gradient(circle at 38% 32%,#F2D89E,#C99B4E 55%,#8A6427);color:#1E170A}}
.stone svg{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg)}
.stone .rbg{fill:none;stroke:var(--line);stroke-width:4}
.stone .rfg{fill:none;stroke:var(--pri);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .2s linear}
.stone.holding{transform:scale(.95);box-shadow:0 10px 26px rgba(40,60,40,.3),0 0 0 14px var(--pri-soft),inset 0 2px 6px rgba(255,255,255,.35)}
.stone.done{cursor:default}
.stone .sl2{position:relative;display:block;line-height:1.25}
.stone .sl2 small{display:block;font-weight:500;font-size:.8rem;opacity:.85;margin-top:4px}
.hstat{min-height:1.6em;text-align:center;color:var(--ink-2);max-width:52ch}
.hstat b{color:var(--ink)}
.toasts{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:60;width:min(360px,calc(100vw - 28px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-b);box-shadow:0 18px 40px rgba(0,0,0,.18);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);cursor:pointer;animation:toastIn .45s cubic-bezier(.2,.9,.25,1.2);text-align:left;font:inherit;color:var(--ink)}
.toast i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font:700 1rem var(--sans);font-style:normal;color:#fff;background:var(--ping)}
.toast b{display:block;font-size:.82rem;color:var(--ink-3);font-weight:600}
.toast span{display:block;font-size:.95rem;line-height:1.3}
.toast.out{animation:toastOut .35s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ---------- result ---------- */
.result{display:grid;gap:26px;justify-items:center;padding:96px 16px 30px}
.rsec{width:min(900px,100%);padding:clamp(22px,4.4vw,52px);scroll-margin-top:84px}
.rsec h2{font-size:clamp(1.85rem,4.4vw,2.9rem);margin:12px 0 14px;text-wrap:balance}
.rsec h3{font-size:1.3rem;margin:26px 0 8px}
.rsec .say{color:var(--ink-2);font-size:1.08rem;max-width:64ch;margin-top:12px}
.note{font-size:.9rem;color:var(--ink-3)}
.rhead{text-align:center}
.rhead h1{font-size:clamp(2.2rem,5.6vw,3.6rem);margin-top:8px}
.rhead .eyebrow{justify-content:center}
.rnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.rnav a{text-decoration:none;font-size:.9rem;padding:8px 14px;border-radius:999px;background:var(--tile);border:1px solid var(--tile-b);color:var(--ink-2)}
.rnav a:hover{background:var(--tile-h);color:var(--ink)}
.pondwrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:18px}
.pond{width:100%;height:auto;display:block;overflow:visible}
.pond .water{fill:url(#pondG)}
.pond .rim{fill:none;stroke:var(--line);stroke-width:1.5}
.pond .src{fill:var(--pri)}
.pond .src.top{fill:var(--ping)}
.pond .ring{fill:none;stroke:var(--pri);transform-box:fill-box;transform-origin:center;animation:ring var(--dur,4s) ease-out infinite;opacity:0}
.pond .ring.top{stroke:var(--ping)}
.pond text{font:600 13px var(--sans);fill:var(--ink-2)}
.pond tspan.v{font:600 12px var(--sans);fill:var(--ink-3)}
@keyframes ring{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1);opacity:0}}
.scorebox{text-align:left}
.score-n{font:500 clamp(4.2rem,10vw,6rem)/1 var(--serif);color:var(--ink)}
.score-n small{display:block;font:500 .95rem var(--sans);color:var(--ink-3);margin-top:8px}
.wname{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:999px;background:var(--pri-soft);color:var(--ink);font-weight:600}
.since{display:block;margin-top:10px;font-size:.92rem;color:var(--ink-3)}
.since.better{color:var(--pri)}.since.worse{color:var(--ping-t)}
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.vs2 > div{border-radius:18px;background:var(--tile);border:1px solid var(--tile-b);padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.vs2 .wpic{width:62px;grid-row:span 2;color:var(--pri)}
.vs2 small{color:var(--ink-3);font-size:.82rem}
.vs2 b{font-weight:600}
.mirror{margin-top:14px;color:var(--ink-2)}
.hourline{margin-top:24px}
.hourline .lab{display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink-3);margin-bottom:8px}
.hourbar{display:flex;gap:5px;align-items:center;height:30px}
.hourbar i{flex:var(--w,1);height:12px;border-radius:8px;background:linear-gradient(90deg,var(--pri),var(--pri-2));opacity:.85}
.hourbar b{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ping);box-shadow:0 0 0 4px var(--ping-soft)}
.areas{display:grid;gap:12px;margin-top:18px}
.area{border-radius:20px;background:var(--tile);border:1px solid var(--tile-b);overflow:hidden}
.area > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr auto 22px;gap:14px;align-items:center;padding:16px 18px}
.area > summary::-webkit-details-marker{display:none}
.area .aico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri)}
.area.top .aico{background:var(--ping-soft);color:var(--ping)}
.area .aico .ico{width:24px;height:24px}
.area .an{font-weight:600;display:block}
.area .gauge{display:block;height:8px;border-radius:8px;background:var(--line);margin-top:8px;overflow:hidden}
.area .gauge i{display:block;height:100%;border-radius:inherit;width:0;background:linear-gradient(90deg,var(--pri),var(--pri-2));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.area.hi .gauge i{background:linear-gradient(90deg,var(--pri),var(--ping))}
.area .av{font:500 1.5rem var(--serif);min-width:2.2ch;text-align:right}
.area .chev{width:22px;height:22px;transition:transform .3s;color:var(--ink-3)}
.area[open] .chev{transform:rotate(180deg)}
.area .abody{padding:0 18px 18px 76px;display:grid;gap:12px;color:var(--ink-2)}
.area .abody h4{margin:6px 0 0;font:600 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.area .abody ol{padding-left:1.2em;display:grid;gap:8px}
.area .abody .said{font-size:.92rem;color:var(--ink-3)}
.toptag{display:inline-block;margin-left:8px;font:600 .7rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ping-t);vertical-align:2px}
.quote{font:italic 400 1.3rem/1.45 var(--serif);color:var(--ink);border-left:3px solid var(--pri);padding:6px 0 6px 18px;margin-top:16px}
.quote small{display:block;font:500 .82rem var(--sans);color:var(--ink-3);margin-top:6px;font-style:normal}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-top:20px}
.vs .side{border-radius:18px;background:var(--tile);border:1px solid var(--tile-b);padding:16px 18px}
.vs .side.leak{background:var(--ping-soft);border-color:rgba(212,106,78,.3)}
.vs small{display:block;font:600 .76rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.vs .arrow{align-self:center;font-size:1.6rem;color:var(--ink-3)}
.vchip{display:inline-flex;align-items:center;gap:6px;margin:0 6px 6px 0;padding:6px 12px;border-radius:999px;background:var(--pri-soft);font-weight:600;font-size:.92rem}
.vchip .ico{width:18px;height:18px;color:var(--pri)}
.bodyideas{display:grid;gap:10px;margin-top:14px}
.bodyideas > div{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;border-radius:16px;padding:12px 14px;background:var(--tile);border:1px solid var(--tile-b)}
.bodyideas .ico{width:28px;height:28px;color:var(--pri);margin-top:2px}
.bodyideas b{display:block}
/* first step */
.optcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.optcards .tb{min-height:150px;align-items:flex-start;justify-content:flex-start;text-align:left;padding:18px}
.optcards .tb b{font:500 1.15rem/1.25 var(--serif);color:var(--ink)}
.tiles input:checked+.tb b{color:var(--pri-ink)}
.switchleak{margin-top:12px;font-size:.95rem;color:var(--ink-3)}
.builder{display:grid;gap:18px;margin-top:22px;padding:20px;border-radius:20px;background:var(--tile);border:1px solid var(--tile-b)}
.lab{font:600 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.whens{display:flex;flex-wrap:wrap;gap:8px}
.whens label{position:relative}
.whens input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.whens span{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--tile-b);background:var(--input);cursor:pointer;transition:background .2s,border-color .2s}
.whens input:checked+span{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.whens input:focus-visible+span{outline:3px solid var(--pri);outline-offset:2px}
.sentence{font:italic 400 1.35rem/1.45 var(--serif);color:var(--ink)}
.sentence em{color:var(--pri)}
.smaller{border-radius:16px;padding:14px 16px;background:var(--pri-soft);border:1px solid var(--pri-line);color:var(--ink-2)}
.smaller .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.plancard{margin-top:20px;border-radius:22px;padding:22px 24px;border:1.5px dashed var(--pri-line);background:var(--input)}
.plancard h3{margin:4px 0 12px;font-size:1.5rem}
.plancard dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px}
.plancard dt{font:600 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.plancard dd{color:var(--ink)}
.plancard .pc-ifthen{font:italic 1.12rem var(--serif)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.ok-line{color:var(--pri);font-weight:600;margin-top:10px}
/* breathing */
.breath{display:grid;justify-items:center;gap:18px;margin-top:18px}
.bcircle{position:relative;width:220px;height:220px;display:grid;place-items:center}
.bcircle .bf{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--pri-soft) 0,var(--pri-soft) 55%,transparent 72%);border:2px solid var(--pri-line);transform:scale(.55);transition-property:transform;transition-timing-function:cubic-bezier(.45,0,.55,1)}
.bcircle .bf2{position:absolute;inset:18%;border-radius:50%;border:1px solid var(--pri-line);opacity:.5}
.bcircle span{position:relative;font:500 1.25rem var(--serif);color:var(--ink);text-align:center}
.bcircle span small{display:block;font:500 .85rem var(--sans);color:var(--ink-3);margin-top:4px}
/* closing and going further */
.closing{text-align:center}
.closing h2{margin-top:6px}
.closing .say{margin-left:auto;margin-right:auto}
.closing .actions{justify-content:center}
.further{width:min(900px,100%);padding:clamp(20px,3.6vw,40px);border-radius:24px;background:var(--glass);border:1px dashed var(--glass-b);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:.97}
.further h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:10px 0 10px}
.further ul{padding-left:1.2em;display:grid;gap:6px;color:var(--ink-2);margin-top:10px}
.further .price{font:500 1.6rem var(--serif);color:var(--ink)}
.codeform{margin-top:16px}
.codeform label{display:block;font-size:.9rem;color:var(--ink-2);margin-bottom:6px}
.codeform .row2{display:flex;gap:8px;flex-wrap:wrap}
.codeform input{flex:1 1 220px;min-height:46px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--input);color:var(--ink);font:.92rem ui-monospace,Menlo,monospace}
.err{display:none;color:var(--ping-t);font-size:.92rem;margin-top:8px}.err.on{display:block}
details.more{margin-top:14px}
details.more summary{cursor:pointer;color:var(--ink-2);font-size:.95rem}
details.more p{margin-top:8px;font-size:.92rem;color:var(--ink-3)}
.care{border-left:4px solid var(--ping);background:var(--ping-soft);border-radius:16px;padding:16px 18px;margin-top:4px}
.care h3{font-size:1.15rem;margin:0 0 6px}
.care p{color:var(--ink-2)}
.care + .care{margin-top:12px}

/* ---------- landing panels ---------- */
.about{display:grid;gap:26px;justify-items:center;padding:10px 16px 20px}
.panel{width:min(1000px,100%);padding:clamp(24px,4.4vw,52px)}
.panel h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:12px 0 22px;text-wrap:balance}
.steps3{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.steps3 li{border-radius:20px;background:var(--tile);border:1px solid var(--tile-b);padding:18px}
.steps3 h3{font-size:1.2rem;margin:10px 0 6px}
.steps3 p{color:var(--ink-2);font-size:.98rem}
.mini{width:100%;height:auto;display:block}
.mini .rg{fill:none;stroke:var(--pri);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:ring 3.6s ease-out infinite}
.mini .r2{animation-delay:.6s}.mini .r3{animation-delay:1.2s}
.mini .stone{fill:var(--ping);animation:fall 3.6s ease-in infinite}
@keyframes fall{0%{transform:translateY(-8px);opacity:0}15%{opacity:1}30%{transform:translateY(34px);opacity:1}34%,100%{transform:translateY(34px);opacity:0}}
.m-map .pond{fill:var(--pri-soft);stroke:var(--pri-line)}
.m-map circle{fill:var(--pri)}
.m-step .line{stroke:var(--line);stroke-width:2}
.m-step .st{fill:var(--tile);stroke:var(--pri);stroke-width:2;animation:stepOn 4.5s ease-in-out infinite}
.m-step .s2{animation-delay:.9s}.m-step .s3{animation-delay:1.8s}
@keyframes stepOn{0%,100%{fill:var(--tile)}25%,60%{fill:var(--pri)}}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fact{border-radius:20px;background:var(--tile);border:1px solid var(--tile-b);padding:18px}
.fact b{display:block;font:500 1.5rem var(--serif);margin:8px 0 6px}
.fact p{color:var(--ink-2);font-size:.96rem}
.fact cite{display:block;margin-top:10px;font-size:.82rem;color:var(--ink-3);font-style:normal}
.fv{width:100%;height:auto;display:block}
.fv .ln{stroke:var(--line);stroke-width:1.5;fill:none}
.fv .dot{fill:var(--ping)}
.fv .rg{fill:none;stroke:var(--pri);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ring 4s ease-out infinite}
.fv .r2{animation-delay:.5s}.fv .r3{animation-delay:1s}.fv .r4{animation-delay:1.5s}
.fv .ghost{stroke:var(--ping);opacity:.6;animation-duration:5s}
.fv .g2{animation-delay:1.2s}
.fv .pace{fill:none;stroke:var(--pri);stroke-width:2.2}
.fv .stress{fill:none;stroke:var(--ping);stroke-width:2.2;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 4s ease-in-out infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
.fv text{font:600 10px var(--sans);fill:var(--ink-3)}
.five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.five div{border-radius:18px;background:var(--tile);border:1px solid var(--tile-b);padding:16px}
.five .ico{width:30px;height:30px;color:var(--pri)}
.five b{display:block;margin:10px 0 4px;font-weight:600}
.five p{font-size:.88rem;color:var(--ink-3);line-height:1.45}
.faq{display:grid;gap:10px}
.faq details{border-radius:18px;background:var(--tile);border:1px solid var(--tile-b);padding:16px 18px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pri);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-2)}
.again-cta{margin-top:26px;text-align:center}

/* ---------- sub-pages and the PRO plan ---------- */
.page{display:grid;justify-items:center;padding:96px 16px 10px}
.prose{width:min(880px,100%);padding:clamp(24px,4.6vw,56px)}
.prose h1{font-size:clamp(2.1rem,5vw,3.3rem);margin:10px 0 16px}
.prose h2{font-size:clamp(1.45rem,3vw,1.9rem);margin:40px 0 12px}
.prose h3{font-size:1.2rem;margin:24px 0 8px}
.prose p,.prose li{color:var(--ink-2)}
.prose p+p{margin-top:12px}
.prose ul,.prose ol{padding-left:1.2em;display:grid;gap:8px;margin-top:10px}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem;margin-top:12px}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--ink-3);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.prose pre{background:var(--input);border:1px solid var(--line);border-radius:12px;padding:12px 14px;overflow-x:auto;font-size:.88rem}
.prose .lead{font-size:1.15rem}
.stepmeta{font:600 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tw{overflow-x:auto}
.byline{font-size:.88rem;color:var(--ink-3);margin-top:14px}
.status{color:var(--ping-t)}
.refs li{font-size:.92rem}
.rep-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 20px}
.rep-key{font-size:.86rem;color:var(--ink-3)}
.ripple-vis{width:180px;height:auto;display:block;margin:0 0 14px}
.ripple-vis ellipse{fill:none;stroke:var(--pri);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:ring 4s ease-out infinite}
.ripple-vis ellipse:nth-child(2){animation-delay:1.3s}.ripple-vis ellipse:nth-child(3){animation-delay:2.6s}
.ripple-vis circle{fill:var(--ping)}
.plan h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin:44px 0 12px}
.plan h3{margin:22px 0 6px}
.plan p,.plan li{color:var(--ink-2)}
.plan .week{border:1px solid var(--tile-b);border-radius:20px;padding:20px 22px;margin-top:16px;background:var(--tile)}
.plan .week h3{margin-top:0}
.plan .wk{font:600 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pri)}
.plan .act{display:grid;grid-template-columns:28px 1fr;gap:10px;margin-top:12px}
.plan .act::before{content:"";width:14px;height:14px;border:2px solid var(--pri);border-radius:4px;margin-top:.35em}
.plan .act b{color:var(--ink)}
.plan .ifthen{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink);border-left:3px solid var(--pri);padding:4px 0 4px 14px;margin-top:10px}
.plan .said{font-size:.9rem;color:var(--ink-3)}
.plan .card{border:1.5px dashed var(--pri-line);border-radius:20px;padding:22px;margin-top:20px}
.plan blockquote{margin:10px 0;padding:12px 16px;border-radius:14px;background:var(--input);color:var(--ink)}
.plan .woop{border:1px solid var(--tile-b);border-radius:16px;padding:12px 16px;margin-top:12px;background:var(--input);display:grid;gap:4px}
.plan .woop p{margin:0}.plan .woop b{color:var(--pri)}
.plan .woop .ifthen{margin-top:4px}
.plan .woop .blank{display:block;height:1.6em;border-bottom:1px dashed var(--ink-3);margin:4px 0 6px}
.plan .woop .said{display:block}
.plan .care{margin-top:16px}

/* ---------- dialog ---------- */
dialog{border:1px solid var(--glass-b);border-radius:24px;padding:0;max-width:min(540px,calc(100vw - 32px));background:var(--glass);color:var(--ink);box-shadow:var(--glass-sh);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){dialog{background:#F6F3EA}@media (prefers-color-scheme:dark){dialog{background:#11191D}}}
dialog::backdrop{background:rgba(10,18,20,.45);backdrop-filter:blur(4px)}
dialog form{padding:26px 26px 22px;display:grid;gap:12px}
dialog h3{font-size:1.5rem}
dialog p{color:var(--ink-2);font-size:.98rem}

/* ---------- small screens ---------- */
@media (max-width:820px){
  .tiles.freq,.tiles.long{grid-template-columns:1fr;gap:8px}
  .tiles.freq .tb,.tiles.long .tb{flex-direction:row;justify-content:flex-start;min-height:58px;padding:10px 16px;gap:14px;text-align:left}
  .tiles.freq .tn,.tiles.long .tn{font-size:1.1rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--pri-soft);flex:none}
  .tiles.freq input:checked+.tb .tn,.tiles.long input:checked+.tb .tn{background:rgba(255,255,255,.22)}
  .tiles.pics{--n:2!important}
  .tiles.pics .tb{min-height:112px}
  .tiles.scale{--n:6!important;gap:8px}
  .optcards{grid-template-columns:1fr}
  .optcards .tb{min-height:0}
  .steps3,.facts3{grid-template-columns:1fr}
  .five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pondwrap{grid-template-columns:1fr}
  .scorebox{text-align:center}
  .vs{grid-template-columns:1fr}.vs .arrow{transform:rotate(90deg);justify-self:center}
}
@media (max-width:560px){
  .bar{padding:12px 16px}
  .mainnav{display:none}
  .freechip{margin-left:auto}
  .stage{padding:74px 10px 34px;align-content:start}
  .card{border-radius:24px;padding:20px 18px 18px}
  .qbar{margin:10px 0 22px}
  .qfoot{grid-template-columns:auto 1fr;gap:10px}
  .qhint{display:none}
  .qfoot #qNext{justify-self:end}
  .btn.round .lbl{display:none}
  .btn.round{width:52px;padding:0}
  .vs2{grid-template-columns:1fr}
  .area .abody{padding:0 16px 16px}
  .area > summary{grid-template-columns:40px 1fr auto 20px;gap:12px;padding:14px}
  .result{padding-top:78px}
  .rsec{border-radius:24px}
  .stone{width:150px;height:150px}
  .toasts{left:12px;right:12px;width:auto}
  .five{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .qcard,.qcard.out,.toast,.toast.out{animation:none}
  .pond .ring,.mini .rg,.fv .rg,.ripple-vis ellipse{animation:none;opacity:.5;transform:none}
  .mini .stone,.m-step .st,.fv .stress{animation:none}.fv .stress{stroke-dashoffset:0}
  .scrollcue i{animation:none}
  .bcircle .bf{transition:none}
}

/* ---------- print ---------- */
@media print{
  :root{--ink:#111;--ink-2:#222;--ink-3:#555;--tile:#fff;--tile-b:#bbb;--line:#ccc;--input:#fff;--pri:#3D5A39;--pri-soft:#eef2ec;--glass:#fff}
  body{background:#fff}
  #world,header.top,.foot,.about,.stage,.further,.rnav,.toasts,.no-print,.actions,.builder,.optcards,.switchleak,.breath,dialog{display:none!important}
  .glass,.rsec,.prose{box-shadow:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;padding:0;margin:0 0 18px;width:100%}
  .result{padding:0;display:block}
  .area > summary .chev{display:none}
  details.area > .abody{display:grid}
  .pond .ring{animation:none;opacity:.5;transform:none}
  #r4:not(.chosen),.rsec#r5{display:none!important}
  body.print-card .result{padding:0}
  body.print-card .result > *:not(#r4){display:none!important}
  body.print-card #r4 > *:not(.plancard){display:none!important}
  body.print-card .plancard{display:block!important;border-color:#777}
  .plan .week,.plan .card,.plan .woop{border-color:#999;background:none}
}
.hidden{display:none!important}
body.resulting .about,body.resulting .scrollcue{display:none}
body.sub .page .prose{margin-bottom:10px}
body.resulting .mainnav a[href="#how"]{display:none}
body.scrolled header.top{background:linear-gradient(var(--glass) 60%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.page,.result,.about{grid-template-columns:minmax(0,1fr)}
.prose,.rsec,.panel,.further{min-width:0}
#repBody:focus,#result:focus,#card:focus,.qprompt:focus{outline:none}
.so{font:600 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--line);color:var(--ink-2)}
[aria-pressed=true] .so{background:var(--pri);color:var(--pri-ink)}

/* ---------- scenes: the scene chooses the look (light or dark) ---------- */
:root[data-ui=light]{--ink:#1D2921;--ink-2:#3B493F;--ink-3:#525E56;--glass:rgba(250,248,241,.74);--glass-b:rgba(255,255,255,.75);--glass-sh:0 30px 80px rgba(28,40,32,.20),0 2px 0 rgba(255,255,255,.6) inset;--tile:rgba(255,255,255,.62);--tile-b:rgba(29,41,33,.11);--tile-h:rgba(255,255,255,.92);--pri:#4C6B45;--pri-2:#36522F;--ping-t:#AE452B;--pri-ink:#fff;--pri-soft:rgba(90,122,82,.14);--pri-line:rgba(90,122,82,.45);--ping:#D46A4E;--ping-soft:rgba(212,106,78,.12);--line:rgba(29,41,33,.13);--input:rgba(255,255,255,.7);color-scheme:light}
:root[data-ui=dark]{--ink:#EDF0EA;--ink-2:#C5CDC4;--ink-3:#A3ADA4;--glass:rgba(12,16,22,.66);--glass-b:rgba(255,255,255,.10);--glass-sh:0 30px 80px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.06) inset;--tile:rgba(255,255,255,.05);--tile-b:rgba(255,255,255,.12);--tile-h:rgba(255,255,255,.09);--pri:#E3BF7C;--pri-2:#C79A4C;--pri-ink:#1E170A;--pri-soft:rgba(227,191,124,.14);--pri-line:rgba(227,191,124,.5);--ping:#F08A6C;--ping-t:#F49A7E;--ping-soft:rgba(240,138,108,.12);--line:rgba(255,255,255,.12);--input:rgba(255,255,255,.06);color-scheme:dark}
:root[data-ui=light] body{background:#DCD9CC}
:root[data-ui=dark] body{background:#0B1418}
:root[data-ui=light] .btn{box-shadow:0 10px 26px rgba(61,90,57,.28),inset 0 1px 0 rgba(255,255,255,.25)}
:root[data-ui=dark] .btn{box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}
:root[data-ui=light] .stone{background:radial-gradient(circle at 38% 32%,#7F977A,#4A6644 55%,#2F4A2B);color:#fff}
:root[data-ui=dark] .stone{background:radial-gradient(circle at 38% 32%,#F2D89E,#C99B4E 55%,#8A6427);color:#1E170A;text-shadow:none}
/* drawn lake, chosen explicitly */
:root[data-scene=dawn]{--sun:#F6CF86;--far1:#AEBDC0;--far2:#93A8A8;--mid:#5F7B6E;--fg:#24372D;--lake0:#EADBC2;--lake1:#A7C1BD;--lake2:#57807C;--shore:rgba(255,250,240,.75);--bird:rgba(40,55,50,.5);--bokeh:rgba(170,195,150,.22);--mistc:255,255,255;--ring-rgb:255,255,255;--glint-rgb:255,240,210;--mote-rgb:255,250,232}
:root[data-scene=dawn] .s-dawn{opacity:1!important}
:root[data-scene=dawn] .s-night,:root[data-scene=dawn] .s-day{opacity:0!important}
:root[data-scene=dawn] body[data-mood=clear] .s-day,:root[data-scene=dawn] body[data-mood=day] .s-day{opacity:1!important}
:root[data-scene=dawn] .w-veil{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 18%,transparent 82%,rgba(0,0,0,.08))}
:root[data-scene=night]{--sun:#F1E8CF;--far1:#25353D;--far2:#1B2A30;--mid:#13201E;--fg:#070E0C;--lake0:#34444A;--lake1:#16272C;--lake2:#071216;--shore:rgba(220,230,235,.25);--bird:rgba(200,210,220,.3);--bokeh:rgba(240,200,120,.18);--mistc:170,190,200;--ring-rgb:215,228,240;--glint-rgb:245,232,190;--mote-rgb:255,212,130}
:root[data-scene=night] .s-night{opacity:1!important}
:root[data-scene=night] .s-dawn,:root[data-scene=night] .s-day{opacity:0!important}
:root[data-scene=night] .w-veil{background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 25%,transparent 80%,rgba(0,0,0,.3))}
/* pictures */
.w-img{background:center/cover no-repeat;opacity:0;transition:opacity 1.2s ease}
:root[data-scene=pic] .w-img{opacity:1}
:root[data-scene=pic] #world .w-l:not(.w-img){display:none}
:root[data-scene=pic] .w-veil{background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 22%,transparent 78%,rgba(0,0,0,.22))}
:root[data-scene=pic][data-scene-tone=light] .w-veil{background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 22%,transparent 85%,rgba(255,255,255,.15))}
:root[data-scene=pic][data-ui=light]{--glass:rgba(250,248,242,.80);--ring-rgb:255,255,255;--glint-rgb:255,240,210;--mote-rgb:255,248,225}
:root[data-scene=pic][data-ui=dark]{--glass:rgba(12,14,22,.68);--ring-rgb:230,220,255;--mote-rgb:255,210,150}
/* each picture brings its own accent */
:root[data-scene-id=aurora]{--pri:#B794FF;--pri-2:#7C5CFF;--pri-ink:#fff;--pri-soft:rgba(183,148,255,.16);--pri-line:rgba(183,148,255,.5);--ping:#FF9A6B;--ping-t:#FFB08C}
:root[data-scene-id=aurora] .btn:not(.ghost){background:linear-gradient(90deg,#8E63FF,#E9848C 60%,#FFA76B);color:#fff}
:root[data-scene-id=aurora] .tiles input:checked+.tb{background:linear-gradient(160deg,#C08BFF,#7C5CFF 55%,#E9848C)}
:root[data-scene-id=room]{--pri:#B0563A;--pri-2:#8F412A;--pri-soft:rgba(176,86,58,.12);--pri-line:rgba(176,86,58,.45)}
:root[data-scene-id=white]{--pri:#2F6BDB;--pri-2:#1F52B8;--pri-soft:rgba(47,107,219,.12);--pri-line:rgba(47,107,219,.45)}
:root[data-scene-id=terrace]{--pri:#5A6B43;--pri-2:#414F2D;--pri-soft:rgba(90,107,67,.14);--pri-line:rgba(90,107,67,.45)}
:root[data-scene-id=lounge]{--pri:#E7C27E;--pri-2:#C9994A}

/* ---------- movement switched off in settings ---------- */
html.no-motion .mist,html.no-motion .w-birds,html.no-motion .scrollcue i{animation:none}
html.no-motion .qcard,html.no-motion .qcard.out,html.no-motion .toast,html.no-motion .toast.out{animation:none}
html.no-motion .pond .ring,html.no-motion .mini .rg,html.no-motion .fv .rg,html.no-motion .ripple-vis ellipse{animation:none;opacity:.5;transform:none}
html.no-motion .mini .stone,html.no-motion .m-step .st,html.no-motion .fv .stress{animation:none}
html.no-motion .fv .stress{stroke-dashoffset:0}
html.no-motion .bcircle .bf{transition-duration:.6s!important}

/* ---------- icon buttons and the settings panel ---------- */
.iconbtn{width:40px;height:40px;flex:none;border-radius:50%;display:inline-grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--tile);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.iconbtn:hover{background:var(--tile-h)}
.iconbtn .ico{width:20px;height:20px}
.iconbtn[aria-pressed=true]{background:var(--pri-soft);border-color:var(--pri-line);color:var(--pri)}
header.top .iconbtn{background:var(--glass);border-color:var(--glass-b);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qtools{display:inline-flex;align-items:center;gap:8px}
.qtools .qtime{margin-right:4px}
dialog#settings{width:min(700px,calc(100vw - 24px));max-height:calc(100vh - 28px);overflow:auto}
.setform{padding:22px 24px 24px;display:grid;gap:20px}
.sethead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.setform section{display:grid;gap:12px}
.setform h4{margin:0;font:600 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.setrow small{display:block;color:var(--ink-3);font-size:.82rem}
.setrow input[type=range]{flex:1;max-width:340px;accent-color:var(--pri)}
.switch{position:relative;width:52px;height:30px;flex:none;border-radius:999px;border:1px solid var(--line);background:var(--line);cursor:pointer;padding:0;transition:background .2s}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
.switch[aria-checked=true]{background:var(--pri);border-color:var(--pri)}
.switch[aria-checked=true] i{transform:translateX(22px)}
.switch:disabled{opacity:.45;cursor:default}
.setkits .tb{min-height:94px;gap:6px}
.setscenes{gap:10px}
.setscenes .tb{min-height:0;padding:8px 8px 12px;justify-content:flex-start;gap:4px}
.setscenes .tl{font-size:.9rem}
.sth{display:block;width:100%;aspect-ratio:16/9;border-radius:11px;background:center/cover no-repeat;margin-bottom:6px;border:1px solid var(--tile-b)}
.sth.auto{background:linear-gradient(115deg,#F2D9B6 0 50%,#14232A 50% 100%)}
.sth.dawn{background:linear-gradient(180deg,#BCCDD3,#F2D9B6 56%,#A7C1BD 57%,#57807C)}
.sth.night{background:linear-gradient(180deg,#071016,#1E2C33 56%,#16272C 57%,#071216)}
@media (max-width:560px){.setscenes{--n:2!important}.setform{padding:18px 16px 20px}.qtools .qtime{display:none}}

/* ---------- the PRO card at the end ---------- */
.further{width:min(900px,100%);padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1}
.procard{--ink:#F5F1E6;--ink-2:#DDE5D7;--ink-3:#BAC6B5;--pri:#EBCB8A;--pri-2:#D6A95B;--pri-ink:#20180A;--pri-soft:rgba(235,203,138,.16);--pri-line:rgba(235,203,138,.5);--tile:rgba(255,255,255,.08);--tile-b:rgba(255,255,255,.18);--line:rgba(255,255,255,.2);--input:rgba(255,255,255,.08);
  position:relative;overflow:hidden;color:var(--ink);border-radius:28px;padding:clamp(24px,4.4vw,48px);background:radial-gradient(120% 90% at 100% 0%,rgba(235,203,138,.22),transparent 55%),linear-gradient(160deg,#33502E,#1B2D1A);box-shadow:0 34px 80px rgba(16,30,16,.38)}
@media (prefers-color-scheme:dark){:root:not([data-ui=light]) .procard{--ink:#1E2A22;--ink-2:#3B493F;--ink-3:#5A665D;--pri:#3D5A39;--pri-2:#2A4227;--pri-ink:#fff;--pri-soft:rgba(61,90,57,.12);--pri-line:rgba(61,90,57,.4);--tile:rgba(0,0,0,.04);--tile-b:rgba(0,0,0,.12);--line:rgba(0,0,0,.14);--input:rgba(255,255,255,.7);background:radial-gradient(120% 90% at 100% 0%,rgba(227,191,124,.35),transparent 55%),linear-gradient(160deg,#F7F1E3,#E8DEC8);box-shadow:0 34px 80px rgba(0,0,0,.45)}}
:root[data-ui=dark] .procard{--ink:#1E2A22;--ink-2:#3B493F;--ink-3:#5A665D;--pri:#3D5A39;--pri-2:#2A4227;--pri-ink:#fff;--pri-soft:rgba(61,90,57,.12);--pri-line:rgba(61,90,57,.4);--tile:rgba(0,0,0,.04);--tile-b:rgba(0,0,0,.12);--line:rgba(0,0,0,.14);--input:rgba(255,255,255,.7);background:radial-gradient(120% 90% at 100% 0%,rgba(227,191,124,.35),transparent 55%),linear-gradient(160deg,#F7F1E3,#E8DEC8);box-shadow:0 34px 80px rgba(0,0,0,.45)}
.procard h2{font-size:clamp(1.8rem,4.2vw,2.7rem);margin:14px 0 6px;color:var(--ink);text-wrap:balance}
.procard h2 em{color:var(--pri)}
.procard .eyebrow{color:var(--ink-3)}
.procard .pill{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--pri);color:var(--pri-ink);letter-spacing:.14em}
.procard .eyebrow .pill+span::before{content:"";margin:0 6px}
.procard .btn:not(.ghost){background:linear-gradient(180deg,var(--pri),var(--pri-2));color:var(--pri-ink);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.procard .linkbtn{color:var(--pri)}
.procard details.more summary{color:var(--ink-2)}
.procard details.more p{color:var(--ink-3)}
.prolead{font-size:1.1rem;color:var(--ink-2);max-width:64ch;margin-top:4px}
.prosmall{font-size:.88rem;color:var(--ink-3);margin-top:12px;max-width:62ch}
.weeks{list-style:none;padding:0;margin:24px 0 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.weeks li{position:relative;padding-top:24px}
.weeks li i{position:absolute;top:5px;left:0;right:-12px;height:6px;border-radius:6px;background:var(--line)}
.weeks li:last-child i{right:0}
.weeks li.now i{background:linear-gradient(90deg,var(--pri),var(--pri-2))}
.weeks li.now::before{content:"";position:absolute;top:0;left:-2px;width:16px;height:16px;border-radius:50%;background:var(--pri);box-shadow:0 0 0 6px var(--pri-soft);z-index:1;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 11px transparent}}
.weeks b{display:block;font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.weeks span{display:block;font:500 1.02rem/1.3 var(--serif);color:var(--ink);margin-top:4px}
@media (max-width:620px){.weeks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.weeks li:nth-child(2) i{right:0}}
html.no-motion .weeks li.now::before{animation:none}
@media (prefers-reduced-motion:reduce){.weeks li.now::before{animation:none}}
@media print{.procard{display:none!important}}
:root[data-scene-id=dunes]{--pri:#F2A98A;--pri-2:#C77DFF;--pri-ink:#1B1030;--pri-soft:rgba(242,169,138,.16);--pri-line:rgba(242,169,138,.5);--ping:#FF9A8B}
:root[data-scene-id=dunes] .btn:not(.ghost){background:linear-gradient(90deg,#9A7BFF,#F2A98A);color:#1B1030}
:root[data-scene-id=dunes] .tiles input:checked+.tb{background:linear-gradient(160deg,#9A7BFF,#E58FB0 60%,#F2A98A)}
:root[data-scene-id=glow]{--pri:#5FD1C8;--pri-2:#3A9FB0;--pri-ink:#081A1E;--pri-soft:rgba(95,209,200,.15);--pri-line:rgba(95,209,200,.5);--ping:#FF8FB8}
:root[data-scene-id=glow] .btn:not(.ghost){background:linear-gradient(90deg,#5FD1C8,#C77DFF 70%,#FF8FB8);color:#081A1E}
:root[data-scene-id=glow] .tiles input:checked+.tb{background:linear-gradient(160deg,#3A9FB0,#7B5CD6 60%,#D46FA8)}

/* ---------- blurred background, three levels ---------- */
:root[data-blur="1"]{--bgblur:3px}:root[data-blur="2"]{--bgblur:8px}:root[data-blur="3"]{--bgblur:16px}
:root[data-blur]:not([data-blur="0"]) #world .w-l{filter:blur(var(--bgblur))}
:root[data-blur]:not([data-blur="0"]) #world .w-img{transform:scale(1.1)!important}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--line)}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:7px 14px;border-radius:999px;font-size:.88rem;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.seg input:checked+span{background:var(--pri);color:var(--pri-ink);font-weight:600}
.seg input:focus-visible+span{outline:3px solid var(--pri);outline-offset:2px}
/* the first screen: choose your place */
.quickplace{margin-top:26px;display:grid;gap:12px}
.qplab,.qpblur > span{font:600 .78rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.qplaces{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.qplaces label{position:relative}
.qplaces input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qpl{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:16px;border:1.5px solid var(--tile-b);background:var(--tile);cursor:pointer;font-weight:600;font-size:.95rem;transition:border-color .2s,background .2s}
.qpl .sth{width:84px;margin:0;border-radius:11px}
.qplaces input:checked+.qpl{border-color:var(--pri);background:var(--pri-soft);box-shadow:0 0 0 3px var(--pri-soft)}
.qplaces input:focus-visible+.qpl{outline:3px solid var(--pri);outline-offset:2px}
.qpblur{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
@media (max-width:560px){.qpl{padding-right:12px;font-size:.88rem}.qpl .sth{width:64px}.qplaces .linkbtn{width:100%}.seg span{padding:7px 11px}}

/* ---------- language flag ---------- */
.langflag{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;padding:0;border:1px solid var(--glass-b);background:var(--glass);cursor:pointer;text-decoration:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s}
.langflag:hover{transform:scale(1.06)}
.langflag .flag{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);display:block}
header.top .langflag{margin-left:10px}
body.testing .langflag{display:none}

/* ---------- the free overview: one card ---------- */
.overview h1{font-size:clamp(2rem,5vw,3rem);margin:10px 0 8px}
.ovnote{max-width:62ch}
.overview .care{margin-top:16px}
.ovtop{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-top:22px;padding:20px 22px;border-radius:20px;background:var(--tile);border:1px solid var(--tile-b)}
.ovnum{display:grid;justify-items:start}
.ovnum .score-n{font-size:clamp(3.6rem,8vw,4.8rem)}
.ovnum small{font-size:.86rem;color:var(--ink-3);max-width:16ch;line-height:1.3;margin-top:4px}
.ovnum .since{margin-top:8px}
.ovline{color:var(--ink-2)}
.ovline b{display:block;color:var(--ink);font:500 1.25rem/1.3 var(--serif);margin-bottom:6px}
.ovh{font:600 .8rem var(--sans)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:24px 0 10px!important}
.ovareas{list-style:none;padding:0;display:grid;gap:10px}
.ovareas li{display:grid;grid-template-columns:30px minmax(0,1.1fr) minmax(0,1.4fr) 2.4ch;gap:12px;align-items:center}
.ovareas .oi .ico{width:22px;height:22px;color:var(--pri)}
.ovareas li.top .oi .ico{color:var(--ping)}
.ovareas .on{font-weight:600;font-size:.98rem}
.ovareas .toptag{font-style:normal}
.ovareas .gauge{display:block;height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.ovareas .gauge i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--pri),var(--pri-2));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.ovareas li.top .gauge i{background:linear-gradient(90deg,var(--pri),var(--ping))}
.ovareas .ov{font:500 1.15rem var(--serif);text-align:right}
.ovwords{margin-top:22px;display:grid;gap:10px}
.ovwords small{display:block;font:600 .76rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.ovwords .quote{margin-top:0}
.ovidea{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--pri-soft);border:1px solid var(--pri-line)}
.ovidea .ico{width:26px;height:26px;color:var(--pri);margin-top:2px}
.ovidea small{display:block;font:600 .76rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.ovidea p{color:var(--ink)}
@media (max-width:560px){.ovtop{grid-template-columns:1fr;gap:12px}.ovareas li{grid-template-columns:26px minmax(0,1fr) 2.4ch;row-gap:4px}.ovareas .gauge{grid-column:2/4;grid-row:2}}
@media print{.overview .actions,.langflag{display:none!important}.ovtop,.ovidea{background:none;border-color:#bbb}}
.logo span{white-space:nowrap}
@media (max-width:420px){.bar{gap:8px}.logo{gap:7px;font-size:1rem}.logo svg{width:32px}header.top .langflag,header.top .iconbtn{width:36px;height:36px;margin-left:0}.freechip{padding:5px 9px;font-size:.7rem}}

/* ---------- header: always readable over any scene ---------- */
header.top{padding:calc(10px + env(safe-area-inset-top)) 16px 0}
header.top .bar{max-width:1180px;padding:8px 10px 8px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);box-shadow:0 10px 30px rgba(0,0,0,.12);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
:root[data-scene=pic][data-ui=light] header.top .bar{background:rgba(250,248,242,.86)}
:root[data-scene=pic][data-ui=dark] header.top .bar{background:rgba(12,14,22,.78)}
body.scrolled header.top{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
header.top .logo{color:var(--ink)}
header.top .mainnav a{color:var(--ink);font-weight:500}
header.top .mainnav a:hover{color:var(--pri)}
header.top .freechip,header.top .iconbtn,header.top .langflag{background:var(--tile);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage{padding-top:96px}
.result,.page{padding-top:104px}
@media (max-width:560px){header.top{padding:calc(8px + env(safe-area-inset-top)) 10px 0}header.top .bar{padding:6px 6px 6px 12px}.stage{padding-top:78px}.result,.page{padding-top:86px}}

/* ---------- notice before first use ---------- */
.notice h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:12px 0 14px}
.ntlist{padding-left:1.2em;display:grid;gap:8px;color:var(--ink-2);max-width:64ch}
.ntlist a{color:var(--pri)}
.ntok{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;border-radius:16px;background:var(--tile);border:1px solid var(--tile-b);cursor:pointer;font-weight:600}
.ntok input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--pri)}
.notice .cta{align-items:center;margin-top:20px}
/* pause before the overview */
.qcard.pause{min-height:180px;display:grid;align-content:center}
.qcard.pause .qprompt{animation:breatheTxt 1.8s ease-in-out infinite}
@keyframes breatheTxt{50%{opacity:.55}}
html.no-motion .qcard.pause .qprompt{animation:none}
@media (prefers-reduced-motion:reduce){.qcard.pause .qprompt{animation:none}}
/* neutral overview: no warning colours */
.ovareas li.mark .toptag{color:var(--pri)}
.ovareas li.mark .on{color:var(--ink)}
@media (max-width:400px){header.top .freechip{display:none}header.top .langflag{margin-left:auto}}

/* ---------- the 20-second counting exercise ---------- */
.watch{position:relative;width:176px;height:176px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--ink);font:600 1.05rem var(--sans);
  background:radial-gradient(circle at 50% 42%,var(--tile-h),var(--tile) 72%);box-shadow:inset 0 0 0 2px var(--pri-line),0 18px 40px rgba(0,0,0,.12);transition:box-shadow .1s ease-out,background .1s ease-out}
.watch svg{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg)}
.watch .rbg{fill:none;stroke:var(--line);stroke-width:3}
.watch .rfg{fill:none;stroke:var(--pri);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.watch .sl2{position:relative;display:block;line-height:1.25;text-align:center}
.watch .sl2 small{display:block;font-weight:500;font-size:.8rem;color:var(--ink-3);margin-top:4px}
.watch.running{cursor:default}
.watch.glow{background:radial-gradient(circle,#FFF8DE 0,#F6D788 58%,var(--tile) 76%);box-shadow:inset 0 0 0 2px rgba(246,215,136,.9),0 0 0 10px rgba(246,215,136,.35),0 0 60px 18px rgba(246,215,136,.5)}
.watch.done{cursor:default;font:500 3rem/1 var(--serif);color:var(--pri);width:120px;height:120px}
.hold.ask{justify-items:stretch}
.hold.ask .hstat{text-align:center;margin:0 auto 6px}
@media (max-width:560px){.watch{width:150px;height:150px}}
body.testing header.top .iconbtn{margin-left:auto}

/* collapsed PRO offer (care): a clear, calm button instead of a small link */
details.more.prosoft>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:12px 20px;border-radius:999px;border:1.5px solid var(--ink-2);color:var(--ink);font-weight:600;font-size:1rem;min-height:44px}
details.more.prosoft>summary::-webkit-details-marker{display:none}
details.more.prosoft>summary::after{content:"↓";font-weight:400}
details.more.prosoft[open]>summary{margin-bottom:14px}
details.more.prosoft[open]>summary::after{content:"↑"}
/* DEV ONLY – remove before launch */
.devbar{position:fixed;left:12px;bottom:12px;z-index:9999;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;background:#1d1d1b;color:#fff;font:600 13px/1.2 system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:calc(100vw - 24px)}
.devbar button{font:inherit;padding:6px 10px;border-radius:8px;border:0;background:#f2c94c;color:#1d1d1b;cursor:pointer}
.devbar a{color:#fff;text-decoration:none;padding:4px 6px;opacity:.7}
@media print{.devbar{display:none}}