/* Generated from @fontsource packages (OFL). unicode-range keeps downloads per script. */
@font-face{font-family:'Lalezar';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/lalezar-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'Lalezar';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/lalezar-latin-ext-400-normal.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:'Lalezar';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/lalezar-latin-400-normal.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:'Vazirmatn';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/vazirmatn-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'Vazirmatn';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/vazirmatn-latin-ext-wght-normal.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:'Vazirmatn';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/vazirmatn-latin-wght-normal.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:'Rubik';font-style:normal;font-display:swap;font-weight:300 900;src:url(fonts/rubik-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';font-style:normal;font-display:swap;font-weight:300 900;src:url(fonts/rubik-latin-wght-normal.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}

/* ---------- Tokens ---------- */
:root{
  --bg:#E7EDEB;--surface:#F7FAF9;--sunk:#DCE4E1;--ink:#15202B;--ink-2:#4A5966;--line:#C5D0CC;
  --iris:#1D6862;--iris-hi:#3A9B90;--iris-ink:#FFFFFF;--amber:#DD8E22;--sclera:#FFFFFF;--lid:#15202B;--focus:#8F5300;--danger:#B3261E;
  --stage:#0D141B;--stage-2:#121C25;--stage-ink:#DCE5E3;--stage-muted:#8D9CA7;
  --ts:26px;--tc:#F0AE45;
  --r-m:14px;--r-l:22px;
  --sh-1:0 1px 2px rgba(21,32,43,.06),0 2px 6px rgba(21,32,43,.05);
  --sh-3:0 20px 44px rgba(21,32,43,.18),0 4px 12px rgba(21,32,43,.08);
  --f-brand:'Lalezar','Vazirmatn',system-ui,sans-serif;
  --f-body:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-display:'Lalezar','Vazirmatn',system-ui,sans-serif;
  --dw:400;--lh:1.65;--h1-lh:1.05;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0F1821;--surface:#16222D;--sunk:#0B131A;--ink:#E2E9E7;--ink-2:#9AA9B3;--line:#2A3844;
  --iris:#6CBFB4;--iris-hi:#A6E0D7;--iris-ink:#0B1419;--amber:#F0AE45;--sclera:#D3DDDA;--lid:#0B131A;--focus:#F0AE45;--danger:#F2A097;
  --sh-1:0 1px 2px rgba(0,0,0,.3);--sh-3:0 20px 44px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
  color-scheme:dark;
}

/* ---------- Per-language type (add a block here for a new script) ---------- */
:root:lang(fa),:root:lang(ar){--lh:1.9;--h1-lh:1.25}
:root:lang(ru){--f-body:'Rubik',system-ui,sans-serif;--f-display:'Rubik',system-ui,sans-serif;--dw:800;--h1-lh:1.1}
:root:lang(ja){--f-body:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic',Meiryo,'Noto Sans JP',system-ui,sans-serif;--f-display:var(--f-body);--dw:800;--lh:1.8;--h1-lh:1.3}
:root:lang(ko){--f-body:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;--f-display:var(--f-body);--dw:800;--lh:1.8;--h1-lh:1.3;word-break:keep-all}
:root:lang(de){hyphens:auto}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 17px/var(--lh) var(--f-body);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.in-session{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;margin:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.skip-link{position:absolute;z-index:100;inset-inline-start:12px;top:-60px;padding:10px 16px;border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
.skip-link:focus{top:12px}

/* ---------- Language suggestion bar ---------- */
.lang-hint{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;padding:10px 16px;font-size:15px;line-height:1.5;background:color-mix(in srgb,var(--iris) 12%,var(--bg))}
.lang-hint p{margin:0}
.lang-hint-go{display:inline-flex;align-items:center;height:36px;padding-inline:16px;border-radius:999px;font-weight:700;text-decoration:none;background:var(--iris);color:var(--iris-ink)}
.lang-hint-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.lang-hint-x svg{width:16px;height:16px}

/* ---------- Header ---------- */
.top{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:400 30px/1.2 var(--f-brand)}
.brand svg{width:42px;height:42px;flex:none}
.bm-sclera{fill:var(--sclera);stroke:var(--lid);stroke-width:2.4;stroke-linejoin:round}
.bm-iris{fill:var(--iris)}
.bm-pupil{fill:#0D141B}
.tools{display:flex;align-items:center;gap:8px}
.tool{height:42px;min-width:42px;padding-inline:14px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:500;line-height:1;color:inherit;background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background-color .15s}
.tool:hover{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.tool.icon{padding:0;width:42px}
.tool svg{width:20px;height:20px;flex:none}

.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-list{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:190px;max-height:70vh;overflow:auto;margin:0;padding:6px;list-style:none;
  border-radius:16px;background:var(--surface);box-shadow:var(--sh-3)}
.lang-list a{display:block;padding:8px 12px;border-radius:10px;color:inherit;text-decoration:none;font-size:15px;line-height:1.5}
.lang-list a:hover{background:var(--sunk)}
.lang-list a[aria-current="page"]{font-weight:700;background:color-mix(in srgb,var(--iris) 14%,transparent)}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,64px);
  padding-block:clamp(12px,4vw,48px) clamp(48px,7vw,96px)}
.hero h1{margin:0 0 18px;font:var(--dw) clamp(34px,4.6vw,58px)/var(--h1-lh) var(--f-display);text-wrap:balance}
.lead{margin:0;max-width:31em;color:var(--ink-2);font-size:18px}
.hero-eye svg{display:block;width:100%;height:auto;max-width:560px;margin-inline:auto}
.orbit{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round;opacity:.45}
.sclera{fill:var(--sclera)}
.lidline{fill:none;stroke:var(--lid);stroke-width:4;stroke-linejoin:round}
.ig-1{stop-color:var(--iris-hi)}
.ig-2{stop-color:var(--iris)}
.fibers line{stroke:var(--sclera);stroke-width:1.2;opacity:.24}
.iris-rim{fill:none;stroke:#0D141B;stroke-width:3;opacity:.3}
.pupil{fill:#0D141B}
.glint{fill:#fff;opacity:.9}
.hd{fill:var(--amber)}
.hd-core{fill:#0D141B}
#eyeLid{transform-box:view-box;transform-origin:240px 190px}
.rm-note{margin:18px 0 0;max-width:520px;padding:12px 16px;border-radius:var(--r-m);font-size:15px;color:var(--ink);background:color-mix(in srgb,var(--amber) 16%,transparent)}

/* ---------- Routine tickets ---------- */
.tickets{display:grid;gap:12px;margin-top:32px;max-width:520px}
.ticket{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 16px;padding:16px 16px 16px 18px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-1)}
.t-main{display:grid;min-width:0}
.t-title{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:19px;line-height:1.5}
.t-bolt{flex:none;width:18px;height:18px;color:var(--amber)}
.t-dur{font-size:15px;line-height:1.5;color:var(--ink-2)}
.t-strip{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;color:var(--ink)}
.t-strip svg{width:30px;height:22px;padding:1px;border-radius:6px;background:color-mix(in srgb,currentColor 7%,transparent)}
.t-start{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding-inline:18px 22px;border-radius:999px;white-space:nowrap;
  font-size:16px;font-weight:700;background:var(--iris);color:var(--iris-ink);box-shadow:0 8px 20px color-mix(in srgb,var(--iris) 28%,transparent);transition:background-color .15s,transform .15s}
.t-start:hover{background:color-mix(in srgb,var(--iris) 88%,var(--ink))}
.t-start:active{transform:scale(.97)}
.t-start svg{width:18px;height:18px;flex:none}
@media (max-width:420px){.ticket{grid-template-columns:1fr}.t-start{width:100%}}

/* ---------- Glyphs ---------- */
.gl-path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.gl-arc{fill:none;stroke:var(--amber);stroke-linecap:round}
.gl-fill{fill:currentColor;opacity:.14}
.gl-mute{fill:currentColor;opacity:.3}
.gl-dot{fill:var(--amber)}

/* ---------- Sections ---------- */
.block{padding-block:clamp(36px,5vw,64px)}
.block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin-bottom:18px}
.block h2{margin:0;font:var(--dw) clamp(28px,3.6vw,40px)/1.3 var(--f-display)}
.block-head p{margin:0;color:var(--ink-2);font-size:16px}

.ex-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px}
.ex{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;padding:10px;border-radius:18px;text-align:start;transition:background-color .15s}
.ex:hover{background:var(--surface)}
.ex-glyph{width:76px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--surface);transition:background-color .15s}
.ex:hover .ex-glyph{background:var(--sunk)}
.ex-name{display:block;font-weight:700;font-size:17px;line-height:1.5}
.ex-desc{display:block;font-size:15px;line-height:1.55;color:var(--ink-2)}
.ex-dur{font-size:14px;color:var(--ink-2);white-space:nowrap}

.habit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.stat{display:flex;flex-direction:column;justify-content:center;padding:18px 16px;border-radius:var(--r-l);background:var(--surface)}
.stat dd{order:-1;margin:0;font:var(--dw) 44px/1.2 var(--f-display)}
.stat dt{font-size:14px;line-height:1.5;color:var(--ink-2)}
.reminder{padding:20px 22px;border-radius:var(--r-l);background:var(--surface)}
.switch-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;cursor:pointer}
.switch-row strong{display:block;font-size:17px}
.sr-text{display:block;margin-top:2px;font-size:15px;color:var(--ink-2)}
.rem-status{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.rem-status:empty{display:none}

.sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:48px;height:28px;margin:4px 0 0;border-radius:999px;background:var(--line);cursor:pointer;transition:background-color .2s}
.sw::before{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start .2s}
.sw:checked{background:var(--iris)}
.sw:checked::before{inset-inline-start:23px}
.sw:focus-visible{outline-offset:2px}

.notes ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:46em}
.notes li{position:relative;padding-inline-start:22px;color:var(--ink-2)}
.notes li::before{content:"";position:absolute;inset-inline-start:2px;top:.75em;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.keys{margin:22px 0 0;font-size:15px;color:var(--ink-2)}
kbd{display:inline-block;direction:ltr;padding:3px 8px;border-radius:6px;font:500 13px/1.4 var(--f-body);background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)}

.faq-list{display:grid;gap:8px;max-width:52em}
.qa{border-radius:var(--r-m);background:var(--surface)}
.qa summary{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;font-weight:700;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font-weight:400;color:var(--ink-2)}
.qa[open] summary::after{content:"−"}
.qa p{margin:0;padding:0 18px 16px;color:var(--ink-2)}

.foot{padding-block:24px 48px;font-size:14px;color:var(--ink-2)}
.foot p{margin:0}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-eye{order:-1}
  .hero-eye svg{max-width:360px}
  .habit-grid{grid-template-columns:1fr}
}
@media (max-width:720px){.ex-list{grid-template-columns:1fr}}
@media (max-width:480px){
  .brand{font-size:26px}
  .lang-cur{display:none}
  .lang-menu .tool{padding:0;width:42px}
  .stat dd{font-size:36px}
  .ex{grid-template-columns:64px minmax(0,1fr) auto;gap:12px}
  .ex-glyph{width:64px;height:48px}
}

/* ---------- Session ---------- */
.session{position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--stage);color:var(--stage-ink);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);--focus:#F0AE45}
.s-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"c i a" "p p p";align-items:center;gap:10px 12px;padding:12px clamp(10px,2.5vw,20px);transition:opacity .5s}
#sClose{grid-area:c}
.s-info{grid-area:i;display:grid;min-width:0}
.s-title{font-weight:700;font-size:16px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-sub{min-height:1.5em;font-size:13px;line-height:1.5;color:var(--stage-muted)}
.s-actions{grid-area:a;display:flex;gap:8px}
.s-progress{grid-area:p;display:flex;gap:4px}
.s-progress span{flex:1;height:4px;border-radius:2px;overflow:hidden;background:rgba(220,229,227,.14)}
.s-progress i{display:block;width:0;height:100%;border-radius:inherit;background:var(--stage-ink)}
.s-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(220,229,227,.08);transition:background-color .15s}
.s-btn:hover{background:rgba(220,229,227,.16)}
.s-btn svg{width:20px;height:20px}
.session.idle{cursor:none}
.session.idle .s-bar,.session.idle .s-instr{opacity:.2}

.stage{position:relative;overflow:hidden;margin-inline:clamp(6px,1.5vw,16px);border-radius:24px;background:var(--stage-2);transition:background-color 1.2s}
.stage:focus{outline:none}
.session.dim .stage{background:#070B0F}
.ghost{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ghost path{fill:none;stroke:rgba(220,229,227,.17);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 10}
.ghost circle{fill:rgba(220,229,227,.17)}
.target{position:absolute;left:0;top:0;width:var(--ts);height:var(--ts);border-radius:50%;pointer-events:none;will-change:transform;background:var(--tc);
  box-shadow:0 0 0 calc(var(--ts)*.22) color-mix(in srgb,var(--tc) 18%,transparent),0 0 calc(var(--ts)*1.4) color-mix(in srgb,var(--tc) 30%,transparent)}
.target::after{content:"";position:absolute;inset:0;margin:auto;width:30%;height:30%;border-radius:50%;background:var(--stage)}
.target.pop{animation:pop .28s ease-out}
@keyframes pop{from{scale:1.45}to{scale:1}}
.s-instr{margin:0;padding:12px 20px 16px;min-height:3.6em;text-align:center;font-size:16px;line-height:1.7;color:var(--stage-muted);transition:opacity .5s}

.overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:24px;text-align:center}
.intro-step{margin:0;font-size:14px;color:var(--stage-muted)}
.intro-step:empty{display:none}
.intro h2,.panel h2{margin:0;font:var(--dw) clamp(34px,6vw,56px)/1.25 var(--f-display)}
.intro .txt{margin:4px 0 0;max-width:30em;font-size:16px;line-height:1.8;color:var(--stage-muted)}
.count{display:block;margin-top:10px;min-height:1.1em;font:var(--dw) 76px/1.1 var(--f-display);color:var(--tc)}
.g-visual svg{display:block;width:min(250px,52vmin);height:auto}
.g-label{margin:10px 0 0;font:var(--dw) clamp(34px,5vw,48px)/1.25 var(--f-display)}
.g-count{margin:0;font-size:16px;color:var(--stage-muted)}
.g-base{fill:none;stroke:rgba(220,229,227,.12);stroke-width:3}
.g-ring{fill:none;stroke:var(--tc);stroke-width:4;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:transform 1.1s cubic-bezier(.3,0,.2,1)}
.g-ring.far{transform:scale(.14)}
.g-core{fill:var(--tc)}
.g-prog{fill:none;stroke:var(--tc);stroke-width:6;stroke-linecap:round}
.g-sclera{fill:#DDE6E3}
.g-iris{fill:#3E8F86}
.g-pupil{fill:#0D141B}
.g-glint{fill:#fff;opacity:.85}
.g-breath{fill:color-mix(in srgb,var(--tc) 16%,transparent);stroke:color-mix(in srgb,var(--tc) 45%,transparent);stroke-width:2;transform-box:fill-box;transform-origin:center}
.panel{background:rgba(13,20,27,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.panel p{margin:0;max-width:28em;color:var(--stage-muted)}
.panel .hint{font-size:15px}
.panel .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.done-mark{width:120px;height:80px;margin-bottom:4px}
.done-mark path{fill:none;stroke:var(--tc);stroke-width:5;stroke-linecap:round}
.btn{height:50px;padding-inline:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:700}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--tc);color:#0D141B}
.btn.quiet{background:rgba(220,229,227,.1)}
.btn.quiet:hover{background:rgba(220,229,227,.18)}

/* ---------- Toast ---------- */
.toast{position:fixed;z-index:60;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:540px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  padding:16px 18px;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
.toast p{flex:1 1 220px;margin:0;font-size:16px}
.toast .acts{display:flex;gap:8px}
.tbtn{height:42px;padding-inline:16px;border-radius:999px;font-size:15px;font-weight:700;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.tbtn.primary{background:var(--iris);color:var(--iris-ink)}

/* ---------- Settings ---------- */
dialog.set{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
dialog.set::backdrop{background:rgba(9,14,19,.5)}
.set-in{display:grid;gap:20px;padding:18px 22px 24px}
.set-head{display:flex;align-items:center;justify-content:space-between}
.set-head h2{margin:0;font:var(--dw) 30px/1.3 var(--f-display)}
.set fieldset{min-width:0;margin:0;padding:0;border:0}
.set legend,.set .lbl{display:block;margin-bottom:8px;padding:0;font-size:15px;font-weight:700;line-height:1.5}
.seg{display:flex;padding:4px;border-radius:14px;background:var(--sunk)}
.seg label{position:relative;flex:1}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:block;padding:7px 6px;border-radius:10px;text-align:center;font-size:15px;font-weight:500;line-height:1.5;transition:background-color .15s}
.seg input:checked+span{background:var(--surface);box-shadow:var(--sh-1);font-weight:700}
.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:1px}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:42px;height:42px;border-radius:50%;background:var(--sunk);font-size:22px;font-weight:700;line-height:1}
.stepper output{min-width:2ch;text-align:center;font:var(--dw) 28px/1.2 var(--f-display)}
.swatches{display:flex;gap:14px}
.swatches label{position:relative}
.swatches input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.swatches span{display:block;width:40px;height:40px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.swatches input:checked+span{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink)}
.swatches input:focus-visible+span{outline:3px solid var(--focus);outline-offset:5px}
.toggles{display:grid;gap:14px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16px;cursor:pointer}
.trow .sw{margin:0}
.danger{justify-self:start;font-size:15px;color:var(--danger);text-decoration:underline;text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .t-start,.ex,.ex-glyph,.sw,.sw::before,.g-ring,.stage,.s-bar,.s-instr{transition:none}
}