/* ─────────────────────────────────────────────────────────────────────────────
   Úvodná obrazovka webu zmaturuj.app v palube ukážok (index.html) – shadow DOM.
   Celé styles.css + phone.css webu (zdroj ~/dyad-apps/zmaturuj-web, len na čítanie),
   strojovo upravené pre plátno 1440 × 856 px vo svetlej téme: bez html.dark pravidiel,
   :root → :host, html/body → .zmw-html/.zmw-body, jednotky okna prepočítané na px,
   @media podľa šírky vyhodnotené staticky. Písma sú v assets/zmx.css (Space Grotesk).
   Telefón na pódiu poháňa assets/zmx.js, vstup textov a viditeľnosť assets/zmw.js.
   Generované ~/.claude/anma-dev/zmw-gen.py; neupravovať ručne.
   ───────────────────────────────────────────────────────────────────────────── */
.zmw-canvas{position:absolute;left:0;top:0;width:1440px;height:856px;overflow:hidden;
  transform:scale(var(--zmw-k,.44));transform-origin:0 0;background:#534AB7;pointer-events:none}
.zmw-html{display:block;letter-spacing:normal;word-spacing:normal;text-transform:none;font-weight:400;
  font-style:normal;font-variant:normal;font-feature-settings:normal;font-kerning:auto;text-rendering:auto;
  -moz-osx-font-smoothing:auto}
/* počas pohybu paluby je plátno na kompozitore; bubliny a značka s will-change sa na ten čas nekreslia */
.zmw-canvas.is-moving{will-change:transform}
.zmw-canvas.is-moving .stage-blob,.zmw-canvas.is-moving .stage-mark{visibility:hidden}
/* kým panel nevidno, animácie stoja */
.zmw-canvas.is-off *,.zmw-canvas.is-off *::before,.zmw-canvas.is-off *::after{animation-play-state:paused!important}

:host{--bg: #FAF9FD;
  --card: #FFFFFF;
  --card2: #F1EFF6;
  --line: rgba(27, 22, 38, .10);
  --ink: #1B1626;
  --ink2: #6E6880;
  --nav: #FFFFFF;
  --nav-item: rgba(27, 22, 38, .055);
  --chip-amber-bg: #FAEEDA;
  --chip-amber-ink: #854F0B;
  --chip-green-bg: #EAF3DE;
  --chip-green-ink: #3B6D11;
  --chip-violet-bg: #EEEDFE;
  --chip-violet-ink: #534AB7;
  --chip-red-bg: #FCEBEB;
  --chip-red-ink: #A03030;
  --accent-ink: #534AB7;
  --press-shadow: #D6D1E4;
  --press-shadow-red: #EBC5C5;
  --listen-bg: #E6EFFD;
  --listen-ink: #1D4ED8;
  --listen-fill: #2563EB;
  --listen-shadow: #1E40AF;
  --listen-track: #CFDCF4;
  --path-trail: #E4E0EF;
  --shadow-soft: 0 1px 2px rgba(27, 22, 38, .04), 0 10px 30px rgba(27, 22, 38, .06);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --nav-h: 68px;}
*, *::before, *::after{box-sizing: border-box;}
.zmw-html{background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%;}
.zmw-body{margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
img{max-width: 100%;}
a{color: inherit;}
p{margin: 0;}
h1, .stage-h1, h2, h3, h4{margin: 0; font-family: var(--display); text-wrap: balance;}
button, input, select, textarea{font: inherit; color: inherit;}
:focus-visible{outline: 2px solid #7F77DD; outline-offset: 3px; border-radius: 8px;}
@media (prefers-reduced-motion: reduce){.zmw-html{scroll-behavior: auto;}}
.wrap{width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px;}
.skip{position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: var(--card); color: var(--ink);}
.skip:focus{left: 12px;}
.ic{width: 20px; height: 20px; display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.ic-f{fill: currentColor; stroke: none;}
.ic-12{width: 12px; height: 12px;}
.ic-14{width: 14px; height: 14px;}
.ic-15{width: 15px; height: 15px;}
.ic-16{width: 16px; height: 16px;}
.ic-18{width: 18px; height: 18px;}
.ic-20{width: 20px; height: 20px;}
.ic-22{width: 22px; height: 22px;}
.ic-23{width: 23px; height: 23px;}
.ic-24{width: 24px; height: 24px;}
.ic-28{width: 28px; height: 28px;}
.ic.inline{display: inline-block; vertical-align: -2px;}
.ink2{color: var(--ink2);}
.press{--pd: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 18px; margin-bottom: var(--pd);
  border-radius: 14px; border: 1px solid transparent;
  font: 700 14px/1 var(--font); text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease, box-shadow 80ms ease;}
.press:active, .press.is-pressed{transform: translateY(var(--pd)); box-shadow: none !important;}
.press-primary{background: #534AB7; color: #fff; box-shadow: 0 var(--pd) 0 #3C3489;}
.press-secondary{background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: 0 var(--pd) 0 var(--press-shadow);}
.press-danger{background: var(--chip-red-bg); color: var(--chip-red-ink); box-shadow: 0 var(--pd) 0 var(--press-shadow-red);}
.press-white{background: #fff; color: #26215C; box-shadow: 0 var(--pd) 0 #3C3489;}
.press-ghost{background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 var(--pd) 0 rgba(20, 14, 60, .35);}
.press-sm{--pd: 3px; height: 38px; padding: 0 14px; border-radius: 11px; font-size: 12.5px;}
.press-block{display: flex; width: 100%;}
.press.is-disabled{background: var(--card2); color: var(--ink2); box-shadow: none; opacity: .75;}
@media (hover: hover) and (pointer: fine){.press-primary:hover{background: #5B52C2;}
.press-secondary:hover{background: var(--card2);}
.press-white:hover{background: #F4F2FD;}
.press-ghost:hover{background: rgba(255, 255, 255, .2);}}
@media (prefers-reduced-motion: reduce){.press{transition: none;}}
.icbtn{width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2); cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;}
.icbtn:active{transform: scale(.92);}
.link-btn{background: none; border: 0; padding: 0; color: var(--ink2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;}
.nav{position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;}
.nav.on-stage{background: transparent; border-color: transparent; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;}
.nav-in{height: 100%; display: flex; align-items: center; gap: 20px;}
.brand{display: inline-flex; align-items: center; gap: 9px; text-decoration: none;}
.brand-word{font: 700 18px var(--display); letter-spacing: -.02em;}
.brand-word span{font-weight: 500;}
.brand-white{display: none;}
.nav.on-stage .brand-white{display: block;}
.nav.on-stage .brand-color{display: none;}
.beta-chip{padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--chip-violet-bg); color: var(--chip-violet-ink);}
.nav.on-stage .beta-chip{background: rgba(255, 255, 255, .16); color: #fff;}
.nav-links{display: flex; gap: 4px; margin-left: auto;}
.nav-links a{padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink2); transition: background-color 150ms ease, color 150ms ease;}
.nav.on-stage .nav-links a{color: rgba(255, 255, 255, .82);}
@media (hover: hover) and (pointer: fine){.nav-links a:hover{background: var(--nav-item); color: var(--ink);}
.nav.on-stage .nav-links a:hover{background: rgba(255, 255, 255, .12); color: #fff;}}
.nav-actions{display: flex; align-items: center; gap: 10px;}
.nav-actions .press{margin-bottom: 3px;}
.nav.on-stage .icbtn{background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .18); color: #fff;}
.nav.on-stage .press-primary{background: #fff; color: #26215C; box-shadow: 0 var(--pd) 0 #3C3489;}
.stage{position: relative; overflow: hidden; background: #534AB7; color: #fff; padding: calc(var(--nav-h) + 48px) 0 96px;}
.stage-mark{position: absolute; right: -90px; top: 90px; width: 560px; opacity: .10; pointer-events: none;}
.stage-blob{position: absolute; border-radius: 50%; pointer-events: none;}
.stage-blob.b1{width: 560px; height: 560px; top: -260px; right: -160px; background: #7F77DD; opacity: .45;}
.stage-blob.b2{width: 320px; height: 320px; bottom: -140px; left: -110px; background: #F4C0D1; opacity: .2;}
.stage-grid{position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center;}
.stage-eyebrow{display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600;}
.pulse-dot{width: 8px; height: 8px; border-radius: 50%; background: #C0DD97; box-shadow: 0 0 0 0 rgba(192, 221, 151, .6); animation: pulseDot 2.4s var(--ease-out) infinite;}
@keyframes pulseDot{0%{box-shadow: 0 0 0 0 rgba(192, 221, 151, .55);}
70%, 100%{box-shadow: 0 0 0 9px rgba(192, 221, 151, 0);}}
.stage .stage-h1{margin-top: 22px; font-size: clamp(42px, 92.16px, 72px); line-height: 1.02; font-weight: 400; letter-spacing: -.035em;}
.stage .stage-h1 span{display: block; color: #F4C0D1; font-weight: 500;}
.lead{margin-top: 20px; max-width: 54ch; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .82);}
.stage-cta{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px;}
.facts{display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none;}
.facts li{padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px;}
.facts b{font-weight: 700; font-variant-numeric: tabular-nums;}
.stage-count{margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .72);}
.stage-count b{color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;}
.stage-phone{display: flex; justify-content: center;}
.sheet{position: relative; margin-top: -34px; border-radius: 34px 34px 0 0; background: var(--bg); box-shadow: 0 -14px 34px rgba(20, 12, 50, .16);}
.sec{padding: 96px 0 0;}
.sec:first-child{padding-top: 76px;}
.sec-head{max-width: 720px; margin-bottom: 40px;}
.eyebrow{font-size: 13px; font-weight: 600; color: var(--accent-ink); margin-bottom: 10px;}
.sec h2, .rules h2, .faq h2{font-size: clamp(30px, 60.48px, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -.025em;}
.sec-lead{margin-top: 14px; max-width: 64ch; font-size: 16.5px; color: var(--ink2);}
.a-cardish, .notice, .feat, .more-card, .focus, .mission-progress, .week, .bug-form, .bug-preview, .rule-list li, .faq-list details{background: var(--card); border: 1px solid var(--line); border-radius: 20px;}
.onb-grid{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center;}
.steps{list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;}
.step{border-radius: 20px; border: 1px solid var(--line); background: var(--card); transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;}
.step.is-active{border-color: #7F77DD; box-shadow: 0 4px 0 #CECBF6;}
.step-btn{display: grid; grid-template-columns: 40px 1fr; gap: 16px; width: 100%; padding: 18px 20px; text-align: left; background: none; border: 0; cursor: pointer; border-radius: 20px;}
.step-num{width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 16px var(--display); background: var(--card2); color: var(--ink2); transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;}
.step.is-active .step-num{background: #534AB7; color: #fff; box-shadow: 0 3px 0 #3C3489;}
.step-title{display: block; font: 600 18px/1.3 var(--display); letter-spacing: -.01em;}
.step-text{display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink2);}
.a2hs-howto{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 18px 76px;}
.a2hs-howto div{padding: 10px 12px; border-radius: 14px; background: var(--card2); font-size: 13px; line-height: 1.45;}
.a2hs-howto b{display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 13px;}
.a2hs-howto span{color: var(--ink2);}
.notice{display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 16px 18px; background: var(--chip-violet-bg); border-color: transparent;}
.notice-ico{width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #534AB7; color: #fff; flex-shrink: 0;}
.notice p{font-size: 14.5px; color: var(--chip-violet-ink); align-self: center;}
.notice a{font-weight: 600;}
.tour{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: start;}
.tour-list{display: grid; gap: 10px;}
.feat{display: grid; grid-template-columns: 44px 1fr; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 120ms var(--ease-out);}
.feat:active{transform: scale(.99);}
.feat.is-active{border-color: #7F77DD; box-shadow: 0 4px 0 #CECBF6;}
.feat-ico, .more-ico{width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--c); color: var(--ci);}
.feat-title{display: block; font: 600 17px/1.3 var(--display); letter-spacing: -.01em;}
.feat-sub{display: block; font-size: 13.5px; color: var(--ink2);}
.feat-desc{display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 360ms var(--ease-out), opacity 220ms ease;}
.feat.is-active .feat-desc{max-height: 260px; opacity: 1;}
.feat-p{display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.6;}
.feat-try{display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink2);}
.feat-try b{color: var(--accent-ink); font-weight: 600;}
.tour-stage{position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; align-items: center; gap: 14px;}
.tour-caption{font-size: 13px; font-weight: 500; color: var(--ink2);}
.tour-detail{display: none;}
.more{margin-top: 72px;}
.more-title{font-size: 22px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 16px;}
.more-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.more-card{display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px;}
.more-card b{display: block; font: 600 16px/1.3 var(--display);}
.more-card p{margin-top: 4px; font-size: 14px; color: var(--ink2);}
.missions{display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start;}
.mission-progress{position: sticky; top: calc(var(--nav-h) + 20px); padding: 18px;}
.mp-top{display: flex; justify-content: space-between; align-items: baseline; font-size: 14px;}
.mp-top span{font: 600 22px var(--display); font-variant-numeric: tabular-nums;}
.mp-bar{display: block; height: 8px; margin: 12px 0 14px; border-radius: 999px; background: var(--chip-violet-bg); overflow: hidden;}
.mp-bar i{display: block; height: 100%; width: 0; border-radius: inherit; background: #7F77DD; transition: width 500ms var(--ease-out);}
.mission-weeks{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.week{padding: 16px;}
.week-label{display: flex; flex-direction: column; margin-bottom: 8px; font: 600 17px/1.25 var(--display);}
.week-label span{font: 600 12px var(--font); color: var(--accent-ink);}
.mission{display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 10px 6px; border-radius: 12px; cursor: pointer;}
.mission + .mission{border-top: 1px solid var(--line); border-radius: 0;}
.mission input{position: absolute; opacity: 0; pointer-events: none;}
.mission .box{width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1.5px solid var(--line); color: transparent; box-shadow: 0 2px 0 var(--press-shadow); transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);}
.mission input:checked + .box{background: #3B6D11; border-color: #3B6D11; color: #fff; box-shadow: 0 2px 0 #27500A;}
.mission input:focus-visible + .box{outline: 2px solid #7F77DD; outline-offset: 2px;}
.mission:active .box{transform: scale(.9);}
.m-text b{display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4;}
.m-text small{display: block; font-size: 13px; color: var(--ink2);}
.mission input:checked ~ .m-text b{color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--ink2);}
.focus-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.focus{padding: 16px;}
.focus b{display: block; margin-top: 12px; font: 600 16px var(--display);}
.focus p{margin-top: 4px; font-size: 14px; color: var(--ink2);}
.focus-ico{width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;}
.focus-ico.bad{background: var(--chip-red-bg); color: var(--chip-red-ink);}
.focus-ico.warn{background: var(--chip-amber-bg); color: var(--chip-amber-ink);}
.focus-ico.good{background: var(--chip-green-bg); color: var(--chip-green-ink);}
.focus-ico.violet{background: var(--chip-violet-bg); color: var(--chip-violet-ink);}
.bug{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start;}
.bug-form{display: grid; gap: 14px; padding: 20px;}
.fld{display: grid; gap: 6px;}
.fld > span{font-size: 13px; font-weight: 600;}
.fld input, .fld select, .fld textarea{width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 14.5px; line-height: 1.45; resize: vertical; transition: border-color 150ms ease, box-shadow 150ms ease;}
.fld textarea::placeholder, .fld input::placeholder{color: var(--ink2); opacity: .8;}
.fld select{-webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C86A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer;}
.fld input:focus, .fld select:focus, .fld textarea:focus{outline: none; border-color: #7F77DD; box-shadow: inset 0 0 0 1px #7F77DD;}
.fld-row{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.bug-out{position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 12px;}
.bug-preview{overflow: hidden;}
.bug-preview-head{display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card2); font-size: 13px;}
.bug-preview-head span{color: var(--ink2);}
.bug-preview pre{margin: 0; padding: 16px; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);}
.bug-actions{display: flex; flex-wrap: wrap; gap: 10px;}
#otazky .wrap{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start;}
.rules .sec-head, .faq .sec-head{margin-bottom: 24px;}
.rule-list{list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;}
.rule-list li{display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px;}
.rule-ico{width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--chip-violet-bg); color: var(--chip-violet-ink);}
.rule-list b{display: block; font: 600 16px var(--display);}
.rule-list p{margin-top: 3px; font-size: 14px; color: var(--ink2);}
.faq-list{display: grid; gap: 8px;}
.faq-list details{overflow: hidden;}
.faq-list summary{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none;}
.faq-list summary::-webkit-details-marker{display: none;}
.faq-list summary .ic{color: var(--ink2); transition: transform 250ms var(--ease-out);}
.faq-list details[open] summary .ic{transform: rotate(180deg);}
.faq-list details p{padding: 0 16px 16px; font-size: 14.5px; color: var(--ink2);}
.faq-list details a{color: var(--accent-ink); font-weight: 600;}
.cta-band{padding: 96px 0;}
.cta-in{position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 44px; border-radius: 28px; background: #534AB7; color: #fff;}
.cta-mark{position: absolute; right: 180px; top: -40px; width: 260px; opacity: .12; pointer-events: none;}
.cta-in > div{position: relative;}
.cta-in h2{font-size: clamp(28px, 51.84px, 40px); line-height: 1.08; font-weight: 400; letter-spacing: -.025em;}
.cta-in h2 span{display: block; color: #F4C0D1; font-weight: 500;}
.cta-in p{margin-top: 10px; color: rgba(255, 255, 255, .8);}
.cta-in .press{position: relative; flex-shrink: 0;}
.foot{border-top: 1px solid var(--line); padding: 40px 0 28px;}
.foot-in{display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;}
.foot-brand p{margin-top: 6px; font-size: 13px; color: var(--ink2);}
.foot-cols{display: flex; gap: 48px; flex-wrap: wrap;}
.foot-cols div{display: grid; gap: 4px; align-content: start; font-size: 14px;}
.foot-cols b{font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 2px;}
.foot-cols a{text-decoration: none;}
.foot-cols a:hover{text-decoration: underline; text-underline-offset: 3px;}
.foot-legal{margin-top: 28px; font-size: 12.5px; color: var(--ink2);}
.scroll-progress{position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #7F77DD, #F4C0D1); pointer-events: none; transition: opacity 250ms ease;}
.nav.on-stage .scroll-progress{opacity: 0;}
.stage-mark, .stage-blob{will-change: transform;}
.js [data-reveal]:not(.is-done){transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 850ms var(--ease-out) var(--d, 0ms);}
.js [data-reveal]:not(.is-in){opacity: 0; transform: translateY(28px);}
.js [data-reveal="scale"]:not(.is-in){transform: translateY(18px) scale(.96);}
.js [data-reveal="left"]:not(.is-in){transform: translateX(-40px);}
.js [data-reveal="right"]:not(.is-in){transform: translateX(40px);}
.js [data-reveal="phone"]:not(.is-done){transition-duration: 900ms, 1150ms;}
.js [data-reveal="phone"]:not(.is-in){transform: translateY(70px) rotate(5deg) scale(.95);}
.js [data-reveal="lines"]:not(.is-in){opacity: 1; transform: none;}
.line{display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em;}
.line > span{display: block; transition: transform 1000ms var(--ease-out) var(--ld, 0ms);}
.js [data-reveal="lines"]:not(.is-in) .line > span{transform: translateY(118%);}
.no-reveal [data-reveal]{opacity: 1 !important; transform: none !important;}
.no-reveal .line > span{transform: none !important;}
.phone.bump{animation: phoneBump 420ms var(--ease-out);}
@keyframes phoneBump{0%{transform: scale(1);}
35%{transform: scale(.975) rotate(-.6deg);}
100%{transform: scale(1);}}
.mission.just .box{animation: boxPop 420ms var(--ease-out-back);}
@keyframes boxPop{0%{transform: scale(.7);}
60%{transform: scale(1.14);}
100%{transform: scale(1);}}
@media (hover: hover) and (pointer: fine){.more-card, .focus, .rule-list li{transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 200ms ease;}
.more-card:hover, .focus:hover, .rule-list li:hover{transform: translateY(-4px); box-shadow: 0 16px 34px rgba(27, 22, 38, .08); border-color: rgba(127, 119, 221, .35);}
.more-ico, .focus-ico, .feat-ico, .rule-ico, .step-num{transition: transform 420ms var(--ease-out-back), background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;}
.more-card:hover .more-ico, .focus:hover .focus-ico, .feat:hover .feat-ico, .rule-list li:hover .rule-ico, .step:hover .step-num{transform: rotate(-8deg) scale(1.08);}
.feat:not(.is-active):hover, .step:not(.is-active):hover{border-color: rgba(127, 119, 221, .45);}
.faq-list details{transition: border-color 200ms ease;}
.faq-list details:hover{border-color: rgba(127, 119, 221, .45);}}
@media (prefers-reduced-motion: reduce){.js [data-reveal], .line > span{transition: opacity 250ms ease !important; transform: none !important;}
.phone.bump, .mission.just .box{animation: none;}
.scroll-progress{display: none;}}
.ic-10{width: 10px; height: 10px;}
.ic-11{width: 11px; height: 11px;}
.ic-13{width: 13px; height: 13px;}
.ic-17{width: 17px; height: 17px;}
.phone-canvas [hidden]{display: none !important;}
.stage-price{display: flex; align-items: flex-start; gap: 8px; max-width: 52ch; margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78);}
.stage-price .ic{margin-top: 2px; color: #F4C0D1;}
.stage-price b{color: #fff; font-weight: 700;}
.stage-price a{color: #fff; font-weight: 600; text-underline-offset: 3px;}
.lock-chip{display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--chip-amber-bg); color: var(--chip-amber-ink); font: 600 11.5px/1.4 var(--font); letter-spacing: 0; vertical-align: 2px; white-space: nowrap;}
.feat.is-locked .feat-ico{position: relative;}
.price-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch;}
.price{position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);}
.price.is-main{border: 1.5px solid #7F77DD; box-shadow: 0 4px 0 #CECBF6;}
.price-badge{position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 999px; background: #534AB7; color: #fff; font-size: 11.5px; font-weight: 700;}
.price-name{font-size: 14px; font-weight: 600; color: var(--ink2);}
.price-val{display: flex; align-items: baseline; gap: 6px; margin-top: 6px;}
.price-val b{font: 500 40px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums;}
.price.is-main .price-val b{color: #7F77DD;}
.price-val span{font-size: 14px; color: var(--ink2);}
.price ul{display: grid; gap: 6px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none;}
.price li{display: flex; gap: 8px; font-size: 14px; line-height: 1.45;}
.price li .ic{margin-top: 2px; color: var(--chip-green-ink);}
.price-note{display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--ink2);}
.price-note .ic{margin-top: 3px;}
.js .stage-copy > *{animation: heroIn 800ms var(--ease-out) both;}
.js .stage-copy > :nth-child(2){animation-delay: 80ms;}
.js .stage-copy > :nth-child(3){animation-delay: 160ms;}
.js .stage-copy > :nth-child(4){animation-delay: 240ms;}
.js .stage-copy > :nth-child(5){animation-delay: 300ms;}
.js .stage-copy > :nth-child(6){animation-delay: 360ms;}
.js .stage-copy > :nth-child(7){animation-delay: 400ms;}
.js .stage-phone > .phone{animation: heroPhone 1100ms var(--ease-out) 150ms both;}
@keyframes heroIn{from{opacity: 0; transform: translateY(18px);}}
@keyframes heroPhone{from{opacity: 0; transform: translateY(60px) rotate(4deg);}}
@media (prefers-reduced-motion: reduce){.js .stage-copy > *, .js .stage-phone > .phone{animation: heroFade 300ms ease both;}
@keyframes heroFade{from{opacity: 0;}}}
.tour-caption.is-locked{display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--chip-amber-bg); color: var(--chip-amber-ink); font-weight: 600;}
.tour-caption.is-locked::before{content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6'/%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6'/%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;}
.zmw-body{overflow-x: hidden;}
@supports (overflow: clip){.zmw-body{overflow-x: clip;}}
.nav.on-stage.is-scrolled, .nav.on-stage.menu-open{background: rgba(83, 74, 183, .94); border-color: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);}
.nav-menu-btn{display: none;}
.nav-menu-btn .i-close, .nav.menu-open .nav-menu-btn .i-open{display: none;}
.nav.menu-open .nav-menu-btn .i-close{display: block;}
.nav-panel{position: absolute; left: 12px; right: 12px; top: calc(var(--nav-h) - 6px); z-index: 2;
  display: grid; gap: 2px; padding: 8px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(20, 12, 50, .22); color: var(--ink);
  animation: panelIn 220ms var(--ease-out);}
@keyframes panelIn{from{opacity: 0; transform: translateY(-6px) scale(.98);}}
.nav-panel a, .nav-panel button{display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 0 14px;
  border: 0; border-radius: 14px; background: none; color: var(--ink); font: 600 16px var(--font); text-decoration: none; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;}
.nav-panel a:active, .nav-panel button:active{background: var(--card2);}
.nav-panel .ic{color: var(--ink2);}
.nav-panel button{margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px;}
.nav-panel button > span{flex: 1;}
.nav-panel{display: none !important;}
@media (prefers-reduced-motion: reduce){.nav-panel{animation: none;}}
.apply{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start;}
.apply .sec-head{margin-bottom: 28px;}
.apply-points{list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;}
.apply-points li{display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;}
.apply-points b{display: block; font: 600 16px/1.35 var(--display);}
.apply-points span:not(.rule-ico){display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink2);}
.apply-form{display: grid; gap: 14px; padding: 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 0 #CECBF6;}
.fld > span em{font-style: normal; font-weight: 400; color: var(--ink2);}
.apply-consent{display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--ink2); cursor: pointer;}
.apply-consent input{position: absolute; opacity: 0; pointer-events: none;}
.apply-consent .box{width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1.5px solid var(--line); color: transparent; box-shadow: 0 2px 0 var(--press-shadow); transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;}
.apply-consent input:checked + .box{background: #534AB7; border-color: #534AB7; color: #fff; box-shadow: 0 2px 0 #3C3489;}
.apply-consent input:focus-visible + .box{outline: 2px solid #7F77DD; outline-offset: 2px;}
.apply-error{padding: 10px 12px; border-radius: 12px; background: var(--chip-red-bg); color: var(--chip-red-ink); font-size: 14px; font-weight: 500;}
.apply-done{padding: 12px 14px; border-radius: 14px; background: var(--chip-green-bg); color: var(--chip-green-ink); font-size: 14px; font-weight: 500;}
.apply-note{font-size: 13px; line-height: 1.55; color: var(--ink2);}
.apply-note .link-btn{font-size: inherit; color: var(--accent-ink);}
.mcta{display: none;}
@media (prefers-reduced-motion: reduce){.mcta{transition: opacity 200ms ease;}}
.nav-panel[hidden]{display: none;}
.nav.on-stage.is-scrolled, .nav.on-stage.menu-open{background: #534AB7; box-shadow: 0 8px 24px rgba(20, 12, 50, .18);}
#misie .focus-grid{margin-bottom: 0;}
#misie .more-title{margin-top: 56px;}
.nav:not(.on-stage){background: color-mix(in srgb, var(--bg) 96%, transparent);}
.hp{position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.apply-form.is-sending button[type="submit"]{opacity: .75; cursor: progress;}
.legal-page .nav{background: color-mix(in srgb, var(--bg) 96%, transparent);}
.legal-page .nav-actions .press{display: inline-flex;}
.legal{width: 100%; max-width: 780px; margin: 0 auto; padding: calc(var(--nav-h) + 44px) 24px 72px;}
.legal h1{font-size: clamp(34px, 72px, 48px); line-height: 1.08; font-weight: 500; letter-spacing: -.025em;}
.legal-lead{margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--ink2);}
.legal-meta{margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink2);}
.legal-toc{display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px;}
.legal-toc a{padding: 7px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; text-decoration: none;}
.legal section{padding-top: 40px; scroll-margin-top: calc(var(--nav-h) + 12px);}
.legal h2{font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em;}
.legal section > p, .legal-list{margin-top: 12px; font-size: 15.5px; line-height: 1.7;}
.legal a{color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px;}
.legal code{padding: 1px 6px; border-radius: 6px; background: var(--card2); font-size: .9em;}
.legal-list{padding-left: 20px;}
.legal-list li + li{margin-top: 6px;}
.legal-card{margin-top: 14px; padding: 6px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);}
.legal-card dl{margin: 0;}
.legal-card dl > div{display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0;}
.legal-card dl > div + div{border-top: 1px solid var(--line);}
.legal-card dt{font-size: 13.5px; font-weight: 600; color: var(--ink2);}
.legal-card dd{margin: 0; font-size: 15px; line-height: 1.6;}
.apply-consent a{color: var(--accent-ink); font-weight: 600; text-underline-offset: 2px;}
.apply-note a{color: var(--accent-ink); font-weight: 600; text-underline-offset: 2px;}
.rule-list p a{color: var(--accent-ink); font-weight: 600;}
.foot-cols div span + span{margin-top: -2px;}
.legal-page .nav-actions{margin-left: auto;}
.foot-cols a[href$=".html"]{color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;}
.foot-legal p{max-width: 80ch; line-height: 1.55;}
.foot-legal p + p{margin-top: 6px;}
.subj-groups{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; align-items: start;}
.subj-group{display: grid; gap: 10px;}
.subj-label{font-size: 13px; font-weight: 600; color: var(--ink2);}
.subj-list{display: grid; gap: 8px;}
.subj{display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);}
.subj.soon{opacity: .5;}
.js .subj.soon[data-reveal].is-in{opacity: .5;}
.subj-tile{width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--base);}
.subj-tile .emb{width: 32px; height: 21px; border-radius: 6px;}
.subj-t{flex: 1; min-width: 0; display: flex; flex-direction: column;}
.subj-t b{font-size: 15px; font-weight: 600; line-height: 1.3;}
.subj-t small{margin-top: 2px; font-size: 13px; color: var(--ink2);}
.subj.soon .subj-t small{font-weight: 600;}
.subj-lv{display: flex; gap: 4px; flex-shrink: 0;}
.subj-lv i{padding: 2px 7px; border-radius: 999px; background: var(--chip-violet-bg); color: var(--chip-violet-ink); font-size: 11.5px; font-style: normal; font-weight: 700;}
.subj-note{margin-top: 24px; font-size: 14.5px; color: var(--ink2);}
.subj-note a{color: var(--accent-ink); font-weight: 600;}
.no-reveal .subj.soon{opacity: .5 !important;}
.why-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.why{padding: 20px 20px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);}
.why-num b{font: 500 44px/1 var(--display); letter-spacing: -.02em; color: #7F77DD; font-variant-numeric: tabular-nums;}
.why-label{margin-top: 8px; font: 600 17px/1.3 var(--display);}
.why-text{margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink2);}
@media (hover: hover) and (pointer: fine){.why{transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 200ms ease;}
.why:hover{transform: translateY(-4px); box-shadow: 0 16px 34px rgba(27, 22, 38, .08); border-color: rgba(127, 119, 221, .35);}}
.sr-only{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.compare{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 32px; align-items: start; margin-top: 12px; padding: 24px; border-radius: 24px; background: var(--chip-violet-bg);}
.compare-title{font: 600 22px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink);}
.compare-sub{margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink2);}
.compare-scroll{overflow-x: auto;}
.compare-table{width: 100%; border-collapse: collapse;}
.compare-table th, .compare-table td{padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line);}
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{border-bottom: 0;}
.compare-table thead th{padding-top: 0; font-size: 12.5px; font-weight: 600; color: var(--ink2);}
.compare-table thead th.us{color: var(--accent-ink);}
.compare-table tbody th{font-size: 15px; font-weight: 600; color: var(--ink);}
.compare-table .us, .compare-table .them{width: 1%; white-space: nowrap; text-align: center;}
.compare-table td.us b{font: 600 34px/1 var(--display); color: #7F77DD; font-variant-numeric: tabular-nums;}
.compare-table td.them{font: 500 24px/1 var(--display); color: var(--ink2); font-variant-numeric: tabular-nums;}
.compare-table .compare-group th{padding-top: 22px; font-size: 12.5px; font-weight: 600; color: var(--ink2);}
.compare-feats th small{display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--ink2);}
.compare-table .compare-feats td.them{font-size: 22px;}
.compare-table .yes{display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #7F77DD; color: #fff;}
.pro-chip{display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #534AB7; color: #fff; font: 700 10.5px/1.5 var(--font); letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px;}
.compare-note{grid-column: 1 / -1; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink2);}
.compare-table thead th.us, .compare-table thead th.them{white-space: normal; line-height: 1.3; vertical-align: bottom;}
.phone{--pw: 300px; --ps: .74667;
  position: relative; flex-shrink: 0;
  width: var(--pw); height: calc((var(--pw) - 20px) * 2.16533 + 20px);
  padding: 10px; border-radius: 52px; background: #0E0A14;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .09), 0 34px 70px rgba(20, 12, 50, .34), 0 10px 22px rgba(20, 12, 50, .22);}
.phone::before, .phone::after{content: ''; position: absolute; width: 3px; border-radius: 2px; background: #0E0A14;}
.phone::before{left: -3px; top: 150px; height: 56px;}
.phone::after{right: -3px; top: 190px; height: 84px;}
.phone-tour{--pw: 330px; --ps: .82667;}
.phone-screen{position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 42px; background: var(--bg); isolation: isolate;}
.phone-canvas{position: absolute; left: 0; top: 0; width: 375px; height: 812px; overflow: hidden;
  transform: scale(var(--ps)); transform-origin: 0 0;
  background: var(--bg); color: var(--ink); font: 14px/1.4 var(--font); text-align: left;}
.status{position: absolute; inset: 0 0 auto; z-index: 30; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 36px; font: 600 15px var(--font); color: var(--ink); pointer-events: none; transition: color 300ms ease;}
.phone-canvas.status-light .status{color: #fff;}
.status-r{display: flex; align-items: center; gap: 6px;}
.status .sig{width: 17px; height: 11px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 4.6px, currentColor 4.6px 7.6px, transparent 7.6px 9.2px, currentColor 9.2px 12.2px, transparent 12.2px 13.8px, currentColor 13.8px); clip-path: polygon(0 75%, 18% 75%, 18% 50%, 45% 50%, 45% 25%, 72% 25%, 72% 0, 100% 0, 100% 100%, 0 100%);}
.status .wifi{width: 15px; height: 11px; background: currentColor; clip-path: polygon(50% 100%, 0 30%, 16% 12%, 50% 0, 84% 12%, 100% 30%); border-radius: 2px;}
.status .bat{position: relative; width: 25px; height: 12px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .95;}
.status .bat::before{content: ''; position: absolute; inset: 1.5px; right: 5px; border-radius: 2px; background: currentColor;}
.island{position: absolute; top: 11px; left: 50%; z-index: 31; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000;}
.home-ind{position: absolute; bottom: 8px; left: 50%; z-index: 32; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ink); opacity: .85; pointer-events: none;}
.phone-canvas.status-light .home-ind{background: #fff;}
.scr{position: absolute; inset: 0; padding-top: 54px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms;}
.scr.is-active{opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s;}
.tap{position: absolute; left: 0; top: 0; z-index: 40; width: 46px; height: 46px; opacity: 0; pointer-events: none; transform: translate(165px, 860px); transition: transform 560ms var(--ease-in-out), opacity 200ms ease;}
.tap.is-on{opacity: 1;}
.tap.is-fast{transition-duration: 380ms, 200ms;}
.tap::before{content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(83, 74, 183, .26); border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(20, 12, 50, .28); transition: transform 140ms var(--ease-out);}
.tap::after{content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(127, 119, 221, .8); opacity: 0;}
.tap.is-down::before{transform: scale(.78);}
.tap.is-down::after{animation: tapRipple 520ms var(--ease-out) forwards;}
@keyframes tapRipple{from{opacity: .9; transform: scale(.6);}
to{opacity: 0; transform: scale(1.9);}}
.rise{transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);}
.js .rise:not(.in){opacity: 0; transform: translateY(14px);}
.is-hidden{opacity: 0; pointer-events: none;}
.mt16{margin-top: 16px;}
.mono{font-variant-numeric: tabular-nums;}
.xp-float{position: absolute; z-index: 5; padding: 3px 8px; border-radius: 999px; background: #534AB7; color: #fff; font: 700 12px var(--font); white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.95); pointer-events: none;}
.xp-float.go{animation: xpFloat 1300ms var(--ease-out) forwards;}
@keyframes xpFloat{0%{opacity: 0; transform: translateY(6px) scale(.95);}
18%{opacity: 1; transform: translateY(0) scale(1);}
70%{opacity: 1; transform: translateY(-14px);}
100%{opacity: 0; transform: translateY(-22px);}}
.pop{animation: popIn 360ms var(--ease-out-back);}
@keyframes popIn{0%{transform: scale(.94);}
50%{transform: scale(1.07);}
100%{transform: scale(1);}}
.a-card{background: var(--card); border: 1px solid var(--line); border-radius: 16px;}
.a-label{font-size: 12px; font-weight: 500; color: var(--ink2);}
.a-icbtn{width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--card); border: 1px solid var(--line); color: var(--ink2); transition: transform 120ms var(--ease-out);}
.a-icbtn.is-pressed{transform: scale(.9);}
.a-chip{display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; flex-shrink: 0;}
.a-chip.amber{background: var(--chip-amber-bg); color: var(--chip-amber-ink);}
.a-chip.green{background: var(--chip-green-bg); color: var(--chip-green-ink);}
.a-chip.violet{background: var(--chip-violet-bg); color: var(--chip-violet-ink);}
.a-chip.red{background: var(--chip-red-bg); color: var(--chip-red-ink);}
.a-avatar{position: relative; overflow: hidden; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--av, #CECBF6); color: var(--avi, #26215C); font: 600 17px var(--display);}
.a-avatar::before{content: ''; position: absolute; width: 62%; height: 62%; top: -20%; right: -16%; border-radius: 50%; background: var(--avb, #AFA9EC);}
.a-avatar > span{position: relative;}
.a-avatar.s26{width: 26px; height: 26px; font-size: 11px;}
.emb{display: inline-block; flex-shrink: 0; overflow: hidden; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);}
.emb svg{display: block; width: 100%; height: 100%;}
.phone-canvas .press{font-family: var(--font);}
.press-success{background: #3B6D11; color: #fff; box-shadow: 0 var(--pd) 0 #27500A;}
.a-pchip{--pd: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin-bottom: 3px; padding: 0 12px; border-radius: 11px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--press-shadow); font-size: 12.5px; font-weight: 600; transition: background-color 150ms ease, color 150ms ease, transform 80ms ease;}
.a-pchip.is-on{background: #534AB7; color: #fff; border-color: transparent; box-shadow: 0 3px 0 #3C3489;}
.a-opt{--pd: 3px;
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 3px; padding: 11px 13px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--press-shadow);
  color: var(--ink); font-size: 14px; line-height: 1.35;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 120ms ease, opacity 200ms ease, transform 80ms ease;}
.a-opt .lbl{width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--card2); color: var(--ink2); font: 700 12px var(--display); transition: background-color 200ms ease, color 200ms ease;}
.a-opt .txt{flex: 1; min-width: 0;}
.a-opt .trail{flex-shrink: 0; opacity: 0; transform: scale(.5); transition: opacity 180ms ease, transform 260ms var(--ease-out-back);}
.a-opt.st-selected{background: rgba(127, 119, 221, .14); border: 1.5px solid #7F77DD; box-shadow: 0 3px 0 #3C3489;}
.a-opt.st-selected .lbl{background: #7F77DD; color: #26215C;}
.a-opt.acc.st-selected{background: var(--acc-bg); border: 1.5px solid transparent; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); color: var(--acc-ink);}
.a-opt.acc.st-selected .lbl{background: #534AB7; color: #fff;}
.a-opt.st-correct{background: var(--chip-green-bg); border: 1.5px solid var(--chip-green-ink); box-shadow: 0 3px 0 rgba(16, 185, 129, .45);}
.a-opt.st-correct .lbl{background: var(--chip-green-ink); color: var(--chip-green-bg);}
.a-opt.st-wrong{background: var(--chip-red-bg); border: 1.5px solid var(--chip-red-ink); box-shadow: 0 3px 0 rgba(239, 68, 68, .45);}
.a-opt.st-wrong .lbl{background: var(--chip-red-ink); color: var(--chip-red-bg);}
.a-opt.st-dim{opacity: .7; box-shadow: none; color: var(--ink2);}
.a-opt.st-dim .lbl{background: var(--card2); color: var(--ink2);}
.a-opt.st-selected .trail, .a-opt.st-correct .trail{opacity: 1; transform: none;}
.a-opt.acc .trail{color: var(--acc-ink);}
.a-opt.st-correct .trail{color: var(--chip-green-ink);}
.phone-canvas .is-pressed{transform: translateY(var(--pd, 4px)); box-shadow: none !important;}
.a-tile{--pd: 0px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; min-height: 106px; padding: 12px; border-radius: 20px; background: var(--base); transition: transform 120ms var(--ease-out);}
.a-tile.is-pressed{transform: scale(.97);}
.a-tile .blob1{position: absolute; width: 80px; height: 80px; top: -24px; right: -16px; border-radius: 50%; background: var(--b1);}
.a-tile .blob2{position: absolute; width: 48px; height: 48px; top: 34px; right: 30px; border-radius: 50%; background: var(--b2);}
.a-tile .arrow{position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--strong);}
.a-tile .tag{position: relative; padding: 2px 10px; border-radius: 999px; background: var(--tagbg); color: var(--tagink); font-size: 12px; font-weight: 500;}
.a-tile .tile-title{position: relative; margin-top: auto; padding-top: 16px; color: var(--strong); font-size: 15px; font-weight: 600; line-height: 1.2;}
.a-tile .tile-title small{display: block; margin-top: 2px; color: var(--soft); font-size: 12px; font-weight: 400;}
.a-tabbar{position: absolute; left: 14px; right: 14px; bottom: 20px; z-index: 20; height: 60px; display: flex; align-items: center; border-radius: 999px; background: var(--nav); border: 1px solid var(--line);}
.a-tabbar .cell{flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink2);}
.a-tabbar .cell.is-on .ic{opacity: 0;}
.a-tabbar .tile{position: absolute; top: 6px; left: calc(var(--i) * 20% + (20% - 46px) / 2); z-index: 1; width: 46px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #534AB7; box-shadow: 0 4px 0 #3C3489; color: #fff;}
.fbar{position: absolute; left: 14px; right: 14px; bottom: 34px; z-index: 12; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 999px; background: var(--nav); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(27, 22, 38, .08);}
.fbar .press{margin-bottom: 3px;}
.fbar-back{width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--card2); color: var(--ink2);}
.fbar-skip{flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: #EF9F27;}
.fbar-count{flex: 1; padding-left: 8px; font-size: 12px; font-weight: 600; color: var(--ink2);}
.segs{flex: 1; display: flex; gap: 4px;}
.segs i{flex: 1; height: 6px; border-radius: 999px; background: var(--card2); transition: background-color 300ms ease;}
.segs.h5 i{height: 5px;}
.segs.g2{gap: 2px;}
.segs.g3{gap: 3px;}
.segs i.on{background: #7F77DD;}
.segs i.cur{background: var(--accent-ink);}
.slide{position: absolute; inset: 0; padding: 0 16px; opacity: 0; transform: translateX(40px); pointer-events: none; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);}
.slide.is-current{opacity: 1; transform: none;}
.slide.is-past{opacity: 0; transform: translateX(-40px);}
.view{position: absolute; inset: 54px 0 0; opacity: 0; transform: scale(.98); pointer-events: none; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);}
.view.is-current{opacity: 1; transform: none;}
.opts{display: flex; flex-direction: column; gap: 8px; margin-top: 12px;}
.h-wrap{padding: 16px 16px 0;}
.h-head{display: flex; align-items: center; gap: 12px;}
.h-hello{flex: 1; display: flex; flex-direction: column;}
.h-small{font-size: 12px; line-height: 1.2; color: var(--ink2);}
.h-name{font: 600 17px/1.25 var(--display);}
.h-status{position: relative; margin-top: 16px; padding: 14px;}
.h-status-top{display: flex; justify-content: space-between; gap: 12px;}
.h-count{display: flex; align-items: baseline; gap: 6px; margin-top: 4px;}
.h-days{font: 500 40px/1 var(--display); color: #7F77DD; font-variant-numeric: tabular-nums;}
.h-dword{font-size: 18px; font-weight: 500; color: var(--ink2);}
.h-chips{display: flex; flex-direction: column; align-items: flex-end; gap: 6px;}
.h-xp{position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);}
.h-lvl{font-size: 13px; font-weight: 500;}
.h-bar{flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: var(--chip-violet-bg);}
.h-fill{display: block; width: 56%; height: 100%; border-radius: inherit; background: #7F77DD; transition: width 900ms var(--ease-out);}
.h-xptext{font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums;}
.h-xp .xp-float{right: 0; top: -2px;}
.h-continue{display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px;}
.h-play{width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #CECBF6; color: #26215C;}
.h-cont-text{flex: 1; display: flex; flex-direction: column; min-width: 0;}
.h-cont-title{font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.h-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px;}
.tp-top{display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line);}
.tp-timer{display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--chip-violet-bg); color: var(--chip-violet-ink); font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums;}
.tp-body{position: absolute; left: 0; right: 0; top: 49px; bottom: 0;}
.pc{margin-top: 12px; padding: 12px;}
.pc-head{display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500;}
.pc-head .ic{color: var(--ink2);}
.pc-text{margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.pc-more{display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent-ink);}
.ap{margin-top: 8px; padding: 12px 12px 10px; border-radius: 14px; background: var(--listen-bg); color: var(--listen-ink);}
.ap-head{display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;}
.ap-head .ic:last-child{margin-left: auto; opacity: .8;}
.ap-slider{position: relative; height: 32px; margin-top: 10px;}
.ap-track{position: absolute; left: 0; right: 0; top: 13px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--listen-track);}
.ap-fill{display: block; width: var(--ap, 30%); height: 100%; background: var(--listen-fill); transition: width 1000ms linear;}
.ap-thumb{position: absolute; top: 7px; left: var(--ap, 30%); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2.5px solid var(--listen-fill); transition: left 1000ms linear;}
.ap-times{display: flex; justify-content: space-between; margin-top: -4px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .85;}
.ap-ctrl{display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 14px; margin-top: 6px;}
.ap-btn{width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--listen-ink);}
.ap-play{--pd: 4px; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--listen-fill); color: #fff; box-shadow: 0 4px 0 var(--listen-shadow); transition: transform 80ms ease;}
.ap-play .ic{position: absolute; transition: opacity 150ms ease, transform 200ms var(--ease-out);}
.ap-play{position: relative;}
.ap-play .i-pause{opacity: 0; transform: scale(.6);}
.ap.is-playing .ap-play .i-play{opacity: 0; transform: scale(.6);}
.ap.is-playing .ap-play .i-pause{opacity: 1; transform: none;}
.ap-speed{grid-column: 5; justify-self: end; height: 32px; padding: 0 10px; border-radius: 10px; display: flex; align-items: center; background: var(--card); color: var(--listen-ink); font-size: 12px; font-weight: 700;}
.q-label{margin-top: 16px;}
.q-text{margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.35;}
.tr{padding: 24px 16px 0;}
.tr-head{position: relative; height: 170px; display: flex; align-items: center; justify-content: center;}
.cf{position: absolute; opacity: 0; transform: translateY(-10px) rotate(0deg) scale(.6); transition: opacity 300ms ease, transform 700ms var(--ease-out-back);}
.view.is-current .cf{opacity: 1; transform: rotate(var(--r));}
.tr-ring{position: relative; width: 120px; height: 120px;}
.tr-ring svg{width: 100%; height: 100%; transform: rotate(-90deg);}
.tr-ring .trk{fill: none; stroke: var(--chip-violet-bg); stroke-width: 10;}
.tr-ring .val{fill: none; stroke: #7F77DD; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1100ms var(--ease-out);}
.tr-ring b{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 26px var(--display); font-variant-numeric: tabular-nums;}
.tr-title{margin-top: 12px; text-align: center; font: 600 21px var(--display);}
.tr-sub{margin-top: 2px; text-align: center; font-size: 12px; color: var(--ink2);}
.tr-chips{display: flex; justify-content: center; gap: 8px; margin-top: 12px;}
.tr-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px;}
.tr-stat{padding: 10px;}
.tr-stat small{display: block; font-size: 12px; color: var(--ink2);}
.tr-stat b{display: block; margin-top: 2px; font: 600 19px var(--display); font-variant-numeric: tabular-nums;}
.tr .press{margin-top: 14px;}
.tr-back{margin-top: 10px; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink2);}
.pr-top{display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px;}
.pr-body{position: absolute; left: 0; right: 0; top: 104px; bottom: 0;}
.pr-body .slide{padding-top: 16px;}
.pr-label{margin-bottom: 8px; font-size: 11px; color: var(--ink2);}
.pr-q{font-size: 15px; font-weight: 600; line-height: 1.4;}
.pr-body .opts{margin-top: 16px;}
.fb{margin-top: 12px; opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out);}
.fb.is-on{opacity: 1; transform: none;}
.fb-ok{display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .2);}
.fb-ck{width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--chip-green-bg); color: var(--chip-green-ink);}
.fb-ok p{flex: 1; font-size: 13px;}
.fb-ok p b{font-weight: 600; color: #34D399;}
.fb-ok p span{color: #10B981;}
.fb-bad{display: grid; gap: 8px;}
.fb-box{padding: 10px 14px; border-radius: 12px;}
.fb-box small{display: block; font-size: 11px; font-weight: 600;}
.fb-box p{margin-top: 2px; font-size: 13px;}
.fb-box.red{background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .2);}
.fb-box.red small{color: var(--chip-red-ink);}
.fb-box.green{background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .2);}
.fb-box.green small{color: #10B981;}
.fbar .lbl-swap{display: inline-flex; align-items: center; gap: 6px;}
.pa-head{display: flex; align-items: center; gap: 8px; padding: 8px 16px;}
.pa-title{flex: 1; min-width: 0; font: 600 17px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pa-chip{display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--chip-green-bg); color: var(--chip-green-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;}
.pa-banner{position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; height: 64px; margin: 4px 16px 0; padding: 0 14px; border-radius: 16px; background: var(--base);}
.pa-banner .bb1{position: absolute; width: 84px; height: 84px; top: -30px; right: -22px; border-radius: 50%; background: var(--b1); opacity: .9;}
.pa-banner .bb2{position: absolute; width: 40px; height: 40px; bottom: -14px; right: 58px; border-radius: 50%; background: var(--b2);}
.pa-banner-t{position: relative; flex: 1; min-width: 0;}
.pa-banner-t small{display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft);}
.pa-banner-t b{display: block; margin-top: 1px; font: 600 16px var(--display); color: var(--strong);}
@property --p{syntax: '<number>'; inherits: true; initial-value: 0;}
.pa-ring{position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--strong) calc(var(--p) * 360deg), rgba(255, 255, 255, .45) 0deg); transition: --p 700ms cubic-bezier(0.23, 1, 0.32, 1);}
.pa-ring i{position: absolute; inset: 4px; border-radius: 50%; background: var(--base);}
.pa-ring span{position: relative; font-size: 11px; font-weight: 800; color: var(--strong); font-variant-numeric: tabular-nums;}
.pa-map{position: absolute; left: 0; right: 0; top: 196px; height: 580px;}
.pa-trail{position: absolute; left: 0; top: 0; width: 375px; height: 580px; overflow: visible;}
.pa-trail path{fill: none; stroke-width: 6; stroke-linecap: round;}
.pa-trail .dim{stroke: var(--path-trail);}
.pa-trail .lit{stroke: var(--b1);}
.pa-trail .grow{transition: stroke-dashoffset 800ms var(--ease-in-out);}
.pa-node{position: absolute; width: 170px; margin-left: -85px; display: flex; flex-direction: column; align-items: center;}
.pa-node .bub{--pd: 5px; position: relative; width: 58px; height: 58px; margin-top: -29px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 300ms ease, box-shadow 300ms ease, transform 80ms ease, color 300ms ease;}
.pa-node.big .bub{width: 66px; height: 66px; margin-top: -33px; border-radius: 22px;}
.pa-node .bub .ic{position: absolute; transition: opacity 220ms ease, transform 320ms var(--ease-out-back);}
.pa-node .i-alt{opacity: 0; transform: scale(.5);}
.pa-node.swap .i-main{opacity: 0; transform: scale(.5);}
.pa-node.swap .i-alt{opacity: 1; transform: none;}
.pa-node.lesson.st-done .bub{background: #534AB7; box-shadow: 0 5px 0 #3C3489; color: #fff;}
.pa-node.quiz.st-done .bub{background: #ED93B1; box-shadow: 0 5px 0 #993556; color: #4B1528;}
.pa-node.lesson.st-current .bub{background: #7F77DD; box-shadow: 0 5px 0 #534AB7; color: #fff;}
.pa-node.quiz.st-current .bub{background: #F4C0D1; box-shadow: 0 5px 0 #ED93B1; color: #4B1528;}
.pa-node.st-current .bub::after{content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid #7F77DD; opacity: .55;}
.pa-node.st-locked .bub{background: var(--card2); box-shadow: 0 4px 0 var(--press-shadow); color: var(--ink2);}
.pa-node.big.st-locked .bub{background: var(--chip-amber-bg); color: var(--chip-amber-ink);}
.situ{position: absolute; bottom: calc(100% + 14px); left: 50%; z-index: 5; padding: 5px 11px; border-radius: 10px; background: #534AB7; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; box-shadow: 0 3px 0 #3C3489; opacity: 0; transform: translate(-50%, 6px); transition: opacity 260ms ease, transform 320ms var(--ease-out);}
.situ::after{content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #534AB7;}
.pa-node.st-current .situ{opacity: 1; transform: translate(-50%, 0); animation: situBob 1.6s ease-in-out infinite;}
@keyframes situBob{0%, 100%{transform: translate(-50%, 0);}
50%{transform: translate(-50%, -4px);}}
.pa-lbl{margin-top: 8px; padding: 3px 8px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 12px; font-weight: 500; white-space: nowrap;}
.pa-node.st-locked .pa-lbl{color: var(--ink2);}
.pa-node .xp-float{top: -64px;}
.sh-head{display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--nav) 88%, transparent);}
.sh-head .sh-title{flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sh-head .a-icbtn.s30{width: 30px; height: 30px;}
.sh-body{padding: 0 16px;}
.sh-h1{margin-top: 14px; font: 600 20px/1.2 var(--display);}
.sh-chips{display: flex; gap: 6px; margin-top: 10px;}
.sh-chip{display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;}
.sh-chip.violet{background: var(--chip-violet-bg); color: var(--chip-violet-ink);}
.sh-chip.green{background: var(--chip-green-bg); color: var(--chip-green-ink);}
.sh-chip.gray{background: var(--card2); color: var(--ink2);}
.sh-modes{display: flex; gap: 8px; margin-top: 16px;}
.sh-modes .a-pchip{flex: 1;}
.sh-prog{display: flex; align-items: center; gap: 10px; margin-top: 12px;}
.sh-prog .segs i.know{background: #7F77DD;}
.sh-prog .segs i.now{background: #AFA9EC;}
.sh-prog .segs i.again{background: var(--chip-violet-bg);}
.sh-prog span{font-size: 11.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums;}
.deck{position: absolute; left: 16px; right: 16px; top: 272px; height: 412px;}
.fc{position: absolute; left: 0; right: 0; top: 0; height: 388px; transform-origin: 50% 100%; transition: transform 380ms cubic-bezier(.22, 1.1, .36, 1), opacity 320ms ease;}
.fc[data-depth="1"]{transform: translateY(12px) scale(.95);}
.fc[data-depth="2"]{transform: translateY(24px) scale(.9);}
.fc-top{z-index: 3;}
.fc-next{z-index: 2;}
.fc-ghost{z-index: 1;}
.fc-inner{position: relative; width: 100%; height: 100%;}
.fc-top.is-flipped .fc-front{display: none;}
.fc-top.is-flipped .fc-back{display: flex;}
.fc-top.is-leaving{transition: transform 320ms var(--ease-out), opacity 320ms ease; opacity: 0;}
.fc-face{position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; padding: 20px; border-radius: 24px;}
.fc-front{background: var(--base); color: var(--strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .14);}
.fc-back{display: none; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .10);}
.fc-front i{position: absolute; border-radius: 50%;}
.fc-front .fb1{width: 150px; height: 150px; top: -52px; right: -40px; background: var(--b1);}
.fc-front .fb2{width: 72px; height: 72px; top: 64px; right: 52px; background: var(--b2);}
.fc-front .fb3{width: 110px; height: 110px; bottom: -50px; left: -36px; background: var(--b2); opacity: .55;}
.fc-tag{position: relative; align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--tagbg); color: var(--tagink); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;}
.fc-term{position: relative; margin: auto 0; font: 600 27px/1.12 var(--display); letter-spacing: -.01em;}
.fc-hint{position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 11px; font-weight: 600; color: var(--soft);}
.fc-hint span{display: inline-flex; align-items: center; gap: 4px;}
.fc-back .fc-hint{color: var(--ink2);}
.fc-md{margin-top: 12px;}
.fc-md p{font-size: 13.5px; line-height: 1.6;}
.fc-callout{margin-top: 10px; padding: 9px 11px 8px; border-radius: 14px; background: var(--chip-violet-bg);}
.fc-callout small{display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chip-violet-ink);}
.fc-callout p{font-size: 13px; line-height: 1.6;}
.stamp{position: absolute; top: 18px; z-index: 5; padding: 6px 12px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; opacity: 0; pointer-events: none; transition: opacity 200ms ease;}
.stamp.know{left: 18px; background: #3B6D11; transform: rotate(-8deg);}
.stamp.again{right: 18px; background: #534AB7; transform: rotate(8deg);}
.fc-top.is-dragging .stamp.know{opacity: 1;}
.sh-actions{position: absolute; left: 16px; right: 16px; top: 700px; display: flex; align-items: flex-start; gap: 10px;}
.sh-actions .press{flex: 1;}
.sh-rot{width: 44px; height: 44px; margin-top: 2px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--card); border: 1px solid var(--line); color: var(--ink2);}
.sh-hint{position: absolute; left: 24px; right: 24px; top: 762px; text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--ink2);}
.ar-top{display: flex; align-items: center; gap: 10px; padding: 12px 16px;}
.ar-ring{position: relative; width: 62px; height: 62px; margin: 4px auto 0;}
.ar-ring svg{width: 100%; height: 100%; transform: rotate(-90deg);}
.ar-ring .trk{fill: none; stroke: var(--card2); stroke-width: 5;}
.ar-ring .val{fill: none; stroke: #7F77DD; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms linear;}
.ar-ring b{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums;}
.ar-count{margin-top: 6px; text-align: center; font-size: 11px; color: var(--ink2);}
.ar-card{margin: 14px 16px 12px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);}
.ar-card small{font-size: 11px; color: var(--ink2);}
.ar-card p{margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.45;}
.ar-sent{display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(16, 185, 129, .1); color: #34D399; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 220ms ease, transform 260ms var(--ease-out);}
.ar-sent.is-on{opacity: 1; transform: none;}
.ar-tiles{display: flex; flex-direction: column; gap: 8px; padding: 0 16px;}
.ar-tile{display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-radius: 16px; background: var(--t); color: #fff; font-size: 14px; font-weight: 500; transition: opacity 200ms ease, transform 120ms var(--ease-out), box-shadow 200ms ease;}
.ar-tile i{width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.ar-tile.is-pressed{transform: scale(.98);}
.ar-tile.is-dim{opacity: .45;}
.ar-tile.is-picked{box-shadow: 0 0 0 2px #fff;}
.ar-res{display: flex; justify-content: center; margin-top: 2px;}
.ar-res .a-chip{font-weight: 600; transform: scale(.8); opacity: 0; transition: opacity 200ms ease, transform 360ms var(--ease-out-back);}
.view.is-current .ar-res .a-chip{transform: none; opacity: 1; transition-delay: 150ms;}
.ar-ropts{display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 0 16px;}
.ar-ro{display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: 16px; background: var(--card2); color: var(--ink2); font-size: 14px; font-weight: 500;}
.ar-ro i{width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .7;}
.ar-ro.ok{background: var(--t); color: #fff; box-shadow: 0 0 0 2px #97C459;}
.ar-ro.ok i{opacity: 1;}
.ar-ro.ok .ic-ok{margin-left: auto;}
.ar-lb{margin: 16px 16px 8px;}
.ar-rows{position: relative; margin: 0 16px; height: 212px;}
.ar-row{position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); transition: transform 600ms var(--ease-in-out);}
.ar-row.me{background: rgba(83, 74, 183, .1); border-color: rgba(83, 74, 183, .25);}
.ar-row .rank{width: 24px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink2);}
.ar-row .nm{flex: 1; font-size: 14px; font-weight: 500;}
.ar-row.me .nm{color: var(--accent-ink);}
.ar-row .pts{font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;}
.ar-wait{margin-top: 12px; text-align: center; font-size: 12px; color: var(--ink2);}
.exam-stage{--stage-bg: radial-gradient(120% 80% at 50% 22%, #E6E1F7 0%, #FAF9FD 60%);
  --stage-ink: #1B1626; --stage-ink2: #6E6880;
  --stage-status-speak: #534AB7; --stage-status-listen: #3B6D11;
  --stage-chip-bg: rgba(83, 74, 183, .12);
  --stage-ctrl-bg: rgba(27, 22, 38, .06); --stage-ctrl-line: rgba(27, 22, 38, .14); --stage-ctrl-ink: rgba(27, 22, 38, .65);
  --stage-panel-bg: rgba(255, 255, 255, .72); --stage-panel-line: rgba(27, 22, 38, .10);
  --stage-text-dim: rgba(27, 22, 38, .5); --stage-text-faint: rgba(27, 22, 38, .32); --stage-text-body: rgba(27, 22, 38, .74);
  --stage-avatar-shadow: rgba(83, 74, 183, .28); --stage-avatar-ring: rgba(255, 255, 255, .9);
  --stage-card2: #F1EFF6; --stage-line: rgba(27, 22, 38, .10);}
.scr.exam-stage{display: flex; flex-direction: column; padding: 62px 12px 52px; background: var(--stage-bg); color: var(--stage-ink);}
.ex-top{display: flex; align-items: center; gap: 10px; margin-bottom: 4px;}
.ex-top-c{flex: 1; min-width: 0; text-align: center;}
.ex-top-c b{display: block; font-size: 12px; font-weight: 600; line-height: 1.3;}
.ex-top-c span{display: block; margin-top: 2px; font-size: 11px; color: var(--stage-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ex-clock{display: flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 10px; border-radius: 100px; background: var(--stage-chip-bg); color: var(--stage-status-speak); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;}
.ex-mid{flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px;}
.ex-status{display: flex; align-items: center; justify-content: center; gap: 6px; height: 20px; font-size: 14px; font-weight: 500; color: var(--stage-status-speak); transition: color 200ms ease;}
.ex-status[data-mode="listen"]{color: var(--stage-status-listen);}
.ex-status[data-mode="think"]{color: var(--stage-ink2);}
.eq{display: inline-flex; align-items: center; gap: 2px; height: 12px;}
.eq i{width: 2px; height: 100%; border-radius: 1px; background: currentColor; animation: eq 900ms ease-in-out infinite;}
.eq i:nth-child(2){animation-duration: 1.1s; animation-delay: .25s;}
.eq i:nth-child(3){animation-duration: .8s; animation-delay: .1s;}
.eq i:nth-child(4){animation-duration: 1s; animation-delay: .35s;}
.eq i:nth-child(5){animation-duration: .95s; animation-delay: .15s;}
@keyframes eq{0%, 100%{transform: scaleY(.3);}
50%{transform: scaleY(1);}}
.ex-status[data-mode="think"] .eq{display: none;}
.ex-disc{max-width: 280px; text-align: center; font-size: 11px; line-height: 1.45; color: var(--stage-ink2);}
.ex-ctrl{display: flex; align-items: center; justify-content: center; gap: 16px;}
.ex-side{width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--stage-ctrl-bg); outline: 1.5px solid var(--stage-ctrl-line); color: var(--stage-ctrl-ink);}
.ex-end{--pd: 0px; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #E24B4A; color: #fff; box-shadow: 0 4px 22px rgba(226, 75, 74, .45); transition: transform 120ms var(--ease-out);}
.ex-end.is-pressed{transform: scale(.92);}
.ec-root{position: relative; width: 300px; height: 200px; flex-shrink: 0; --ec-skin: #CECBF6; --ec-skin2: #B9B3EE; --ec-hair: #26215C; --ec-pink: #F4C0D1; --ec-lav: #AFA9EC; --ec-deep: #534AB7; --ec-sclera: #FBFAFE;}
.ec-aura{position: absolute; left: 50%; top: 4px; width: 132px; height: 132px; margin-left: -66px; pointer-events: none;}
.ec-aura > *{position: absolute; left: 50%; top: 50%; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%);}
.ec-p1, .ec-p2{width: 220px; height: 220px; background: radial-gradient(circle, rgba(127, 119, 221, .35), transparent 70%);}
.ec-rip{width: 150px; height: 150px; border: 1.5px solid rgba(151, 196, 89, .45);}
.ec-root[data-state="speaking"] .ec-p1{animation: ecPulse 2.4s ease-out infinite;}
.ec-root[data-state="speaking"] .ec-p2{animation: ecPulse 2.4s ease-out infinite 1.2s;}
.ec-root[data-state="listening"] .ec-rip{animation: ecRipple 1.6s ease-out infinite;}
.ec-think{position: absolute; left: calc(50% + 58px); top: 0; display: flex; gap: 4px; padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: var(--stage-card2); border: 1px solid var(--stage-line); opacity: 0; transform: translateY(6px) scale(.95); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);}
.ec-think i{width: 6px; height: 6px; border-radius: 50%; background: var(--stage-status-speak); animation: ecProc 1.6s ease-in-out infinite;}
.ec-think i:nth-child(2){animation-delay: .2s;}
.ec-think i:nth-child(3){animation-delay: .4s;}
.ec-root[data-state="thinking"] .ec-think{opacity: 1; transform: none;}
.ec-m{position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; --look: 0; --tilt: 0; --nod: 0; transition: transform 250ms var(--ease-out);}
.ec-m.ec-lead{left: 50%; top: 4px; transform: translateX(-50%);}
.ec-root[data-state="listening"] .ec-m.ec-lead{transform: translateX(-50%) translateY(-4px) scale(1.03);}
.ec-m.ec-l2{left: 18px; top: 80px; opacity: .92;}
.ec-m.ec-l3{right: 18px; top: 80px; opacity: .92;}
.ec-head{transform: rotate(calc(var(--tilt) * 1deg)) translateY(calc(var(--nod) * 3px)); transform-origin: 50% 95%; transition: transform 420ms var(--ease-in-out);}
.ec-av{position: relative; overflow: hidden; border-radius: 50%; background: var(--ec-skin); box-shadow: 0 10px 30px var(--stage-avatar-shadow); border: 3px solid var(--stage-avatar-ring);}
.ec-lead .ec-av{width: 132px; height: 132px;}
.ec-l2 .ec-av, .ec-l3 .ec-av{width: 60px; height: 60px; border-width: 2px;}
.ec-inner{position: absolute; left: -3px; top: -3px; width: 132px; height: 132px; transform-origin: 0 0;}
.ec-l2 .ec-inner, .ec-l3 .ec-inner{left: -2px; top: -2px; transform: scale(.4545);}
.ec-hair{position: absolute; background: var(--ec-hair);}
.ec-rn .ec-hair{left: -4px; top: -8px; width: 140px; height: 42px; border-radius: 70px 70px 44px 14px;}
.ec-rn .ec-hair::before, .ec-rn .ec-hair::after{content: ''; position: absolute; top: 22px; width: 20px; height: 76px; background: var(--ec-hair); border-radius: 0 0 12px 12px;}
.ec-rn .ec-hair::before{left: 0;}
.ec-rn .ec-hair::after{right: 0;}
.ec-mk .ec-hair{left: 16px; top: 2px; width: 100px; height: 22px; border-radius: 50px 50px 8px 8px; opacity: .9;}
.ec-ph .ec-hair{left: 0; top: -6px; width: 132px; height: 40px; border-radius: 66px 66px 20px 34px;}
.ec-ph .ec-bun{position: absolute; left: 94px; top: -12px; width: 32px; height: 32px; border-radius: 50%; background: var(--ec-hair);}
.ec-collar{position: absolute; left: 21px; bottom: -18px; width: 90px; height: 46px; border-radius: 45px 45px 0 0;}
.ec-rn .ec-collar{background: var(--ec-pink);}
.ec-mk .ec-collar{background: var(--ec-lav);}
.ec-ph .ec-collar{background: var(--ec-deep);}
.ec-mk .ec-tie{position: absolute; left: 60px; bottom: -4px; width: 12px; height: 24px; background: var(--ec-hair); clip-path: polygon(50% 0, 100% 28%, 50% 100%, 0 28%);}
.ec-rn .ec-earring{position: absolute; left: 14px; top: 84px; width: 7px; height: 7px; border-radius: 50%; background: var(--ec-pink);}
.ec-face{position: absolute; inset: 0; transform: translateX(calc(var(--look) * 5px)); transition: transform 360ms var(--ease-in-out);}
.ec-brow{position: absolute; top: 38px; width: 19px; height: 4.5px; border-radius: 3px 3px 4px 4px; background: var(--ec-hair);}
.ec-brow-l{left: 37px; transform: rotate(-4deg);}
.ec-brow-r{right: 37px; transform: rotate(4deg);}
.ec-mk .ec-brow{width: 20px; height: 5px;}
.ec-mk .ec-brow-l{left: 36px;}
.ec-mk .ec-brow-r{right: 36px;}
.ec-eye{position: absolute; top: 49px; width: 16px; height: 16px; overflow: hidden; border-radius: 50%; background: var(--ec-sclera);}
.ec-eye-l{left: 37px;}
.ec-eye-r{right: 37px;}
.ec-pupil{position: absolute; left: 4.5px; top: 4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ec-hair); transform: translateX(calc(var(--look) * 3px)); transition: transform 300ms var(--ease-in-out);}
.ec-lid{position: absolute; inset: -1px; background: var(--ec-skin); transform: scaleY(0); transform-origin: top;}
.ec-blink .ec-lid{animation: ecBlink 170ms var(--ease-out) 1;}
.ec-nose{position: absolute; left: 62px; top: 66px; width: 8px; height: 5px; border-radius: 0 0 5px 5px; background: var(--ec-skin2);}
.ec-mouth{position: absolute; left: 46px; top: 76px; width: 40px; height: 24px; overflow: visible;}
.ec-mouth path{fill: var(--ec-hair);}
.ec-mk .ec-stache{position: absolute; left: 51px; top: 79px; width: 30px; height: 8px;}
.ec-mk .ec-stache::before, .ec-mk .ec-stache::after{content: ''; position: absolute; top: 0; width: 15px; height: 6px; background: var(--ec-hair); border-radius: 3px 3px 6px 6px;}
.ec-mk .ec-stache::before{left: 0; transform: rotate(-9deg); transform-origin: right center;}
.ec-mk .ec-stache::after{right: 0; transform: rotate(9deg); transform-origin: left center;}
.ec-ph .ec-glasses{position: absolute; left: 0; top: 0; width: 132px; height: 132px;}
.ec-ph .ec-glasses i{position: absolute; top: 45px; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--ec-hair);}
.ec-ph .ec-glasses i:first-child{left: 33px;}
.ec-ph .ec-glasses i:last-child{right: 33px;}
.ec-ph .ec-glasses b{position: absolute; left: 57px; top: 55px; width: 18px; height: 2.5px; background: var(--ec-hair);}
.ec-tag{padding: 3px 8px; border-radius: 999px; background: var(--ec-skin); color: #26215C; font-size: 10px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;}
.ec-lead .ec-tag{padding: 4px 10px; font-size: 11px;}
.ec-role{margin-top: -2px; font-size: 10px; color: var(--stage-ink2);}
.ec-nod .ec-l2 .ec-head, .ec-nod .ec-l3 .ec-head{animation: ecNod 700ms var(--ease-out);}
@keyframes ecPulse{0%{transform: translate(-50%, -50%) scale(.55); opacity: .38;}
100%{transform: translate(-50%, -50%) scale(1.25); opacity: 0;}}
@keyframes ecRipple{0%{transform: translate(-50%, -50%) scale(.7); opacity: .6;}
100%{transform: translate(-50%, -50%) scale(1.15); opacity: 0;}}
@keyframes ecProc{0%, 100%{opacity: .5;}
50%{opacity: 1;}}
@keyframes ecBlink{0%, 100%{transform: scaleY(0);}
50%{transform: scaleY(1);}}
@keyframes ecNod{0%, 100%{transform: none;}
40%{transform: translateY(3px);}}
.lt-box{width: 100%; max-width: 351px; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px 8px; border-radius: 14px; background: var(--stage-panel-bg); border: .5px solid var(--stage-panel-line);}
.lt-h{display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;}
.lt-t{font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stage-text-dim);}
.lt-all{font-size: 11px; font-weight: 600; color: var(--stage-status-speak);}
.lt-lines{flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden;}
.lt-line{display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);}
.lt-line.is-on{opacity: 1; transform: none;}
.lt-line.is-gone{display: none;}
.lt-who{width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #CECBF6; color: #26215C; font-size: 9px; font-weight: 800;}
.lt-me .lt-who{background: var(--chip-green-bg); color: var(--chip-green-ink);}
.lt-meta{display: flex; align-items: center; gap: 6px; margin-bottom: 2px;}
.lt-nm{font-size: 11px; font-weight: 600; color: var(--stage-text-dim);}
.lt-ts{font-size: 10px; color: var(--stage-text-faint); font-variant-numeric: tabular-nums;}
.lt-tx{font-size: 13px; line-height: 1.5; color: var(--stage-text-body);}
.lt-line.is-live .lt-tx{color: var(--stage-ink);}
.lt-caret{display: none; width: 2px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--stage-status-speak); animation: ltCaret 1s steps(2, start) infinite;}
.lt-me .lt-caret{background: var(--stage-status-listen);}
.lt-line.is-live .lt-caret{display: inline-block;}
@keyframes ltCaret{to{visibility: hidden;}}
.lt-chip{display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--chip-green-bg); color: var(--chip-green-ink); font-size: 9px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; opacity: 0; transform: scale(.6); transition: opacity 200ms ease, transform 320ms var(--ease-out-back);}
.lt-chip.is-on{opacity: 1; transform: none;}
.ex-res{position: absolute; inset: 0; z-index: 12; overflow: hidden; padding: 62px 16px 0; background: var(--stage-bg); color: var(--stage-ink); opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-drawer);}
.ex-res.is-on{opacity: 1; transform: none;}
.ex-res-head{display: flex; align-items: center; gap: 10px;}
.ex-res-head > span{width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--stage-chip-bg); color: var(--stage-status-speak);}
.ex-res-head b{display: block; font: 600 20px/1.2 var(--display);}
.ex-res-head small{display: block; font-size: 12px; color: var(--stage-ink2);}
.gr{position: relative; width: 110px; height: 110px; margin: 18px auto 0;}
.gr svg{width: 100%; height: 100%; transform: rotate(-90deg);}
.gr .trk{fill: none; stroke: var(--stage-card2); stroke-width: 9;}
.gr .val{fill: none; stroke: var(--g); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: 289.03; transition: stroke-dashoffset 1100ms var(--ease-out);}
.ex-res.is-on .gr .val{stroke-dashoffset: 57.8;}
.gr div{position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.gr b{font: 800 30px/1 var(--display); color: var(--g);}
.gr small{margin-top: 3px; font-size: 10px; color: var(--stage-ink2);}
.ex-res-chips{display: flex; justify-content: center; gap: 8px; margin-top: 12px;}
.ex-res .ex-disc{margin: 8px auto 0;}
.ex-res .a-label{margin-top: 16px; margin-bottom: 8px;}
.ex-part{display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px;}
.ex-part div{flex: 1; min-width: 0;}
.ex-part b{display: block; font-size: 13px; font-weight: 600;}
.ex-part small{display: block; font-size: 11px; color: var(--ink2);}
.ex-part i{width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 800 14px var(--display); font-style: normal;}
.ex-bars{padding: 12px; display: grid; gap: 10px;}
.ex-bar{display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; font-size: 12px;}
.ex-bar span:last-child{text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;}
.ex-bar em{height: 6px; overflow: hidden; border-radius: 999px; background: var(--card2);}
.ex-bar em i{display: block; width: 0; height: 100%; border-radius: inherit; background: #7F77DD; transition: width 900ms var(--ease-out) 300ms;}
.ex-res.is-on .ex-bar em i{width: var(--w);}
.scr.au{display: flex; flex-direction: column; padding-top: 0; background: var(--bg);}
.au-stage{position: relative; overflow: hidden; flex-shrink: 0; padding: 68px 20px 48px; background: #534AB7; color: #fff;}
.au-mark{position: absolute; right: -56px; top: 44px; width: 220px; height: 220px; opacity: .13; pointer-events: none;}
.au-brand{position: relative; display: flex; align-items: center; gap: 8px; font: 600 15px var(--display);}
.au-title{position: relative; margin: 28px 0 0; font: 400 34px/1.12 var(--display);}
.au-title span{display: block;}
.au-title .acc{color: #F4C0D1; font-weight: 500;}
.au-sub{position: relative; max-width: 360px; margin-top: 8px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .74);}
.au-sheet{position: relative; flex: 1; display: flex; flex-direction: column; margin-top: -28px; padding: 22px 20px 50px; border-radius: 28px 28px 0 0; background: var(--bg); box-shadow: 0 -12px 30px rgba(0, 0, 0, .18);}
.au-social{display: flex; gap: 8px;}
.au-social .press{flex: 1;}
.au-social .press.is-off{opacity: .5;}
.au-div{display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 12px; color: var(--ink2);}
.au-div::before, .au-div::after{content: ''; flex: 1; height: 1px; background: var(--line);}
.au-form{display: flex; flex-direction: column; gap: 10px;}
.au-field{display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color 150ms ease, box-shadow 150ms ease;}
.au-field.is-focus{border-color: #7F77DD; box-shadow: inset 0 0 0 1px #7F77DD;}
.au-field .f{flex: 1; min-width: 0;}
.au-field .f > span{display: block; font-size: 11px; line-height: 1; color: var(--ink2);}
.au-field .v{display: block; min-height: 18px; margin-top: 4px; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden;}
.au-field .v:empty::before{content: attr(data-ph); color: var(--ink2); opacity: .6;}
.au-field.is-focus .v::after{content: ''; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: #7F77DD; animation: ltCaret 1s steps(2, start) infinite;}
.au-field.is-focus .v:empty::before{content: none;}
.au-field > .ic{color: var(--ink2);}
.au-strength{display: flex; align-items: center; gap: 10px; margin-top: -4px; opacity: 0; transition: opacity 200ms ease;}
.au-strength.is-on{opacity: 1;}
.au-strength div{flex: 1; display: flex; gap: 4px;}
.au-strength i{flex: 1; height: 5px; border-radius: 999px; background: var(--card2); transition: background-color 200ms ease;}
.au-strength span{font-size: 11px; font-weight: 500;}
.au-strength[data-s="1"] i:nth-child(-n+1), .au-strength[data-s="1"] span{background-color: var(--chip-red-ink); color: var(--chip-red-ink);}
.au-strength[data-s="2"] i:nth-child(-n+2), .au-strength[data-s="2"] span{background-color: var(--chip-amber-ink); color: var(--chip-amber-ink);}
.au-strength[data-s="3"] i, .au-strength[data-s="3"] span{background-color: var(--chip-green-ink); color: var(--chip-green-ink);}
.au-strength span{background-color: transparent !important;}
.au-consent{display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink2);}
.au-box{width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--card); border: 1px solid var(--line); color: transparent; transition: background-color 150ms ease, border-color 150ms ease;}
.au-consent.is-on .au-box{background: #534AB7; border-color: #534AB7; color: #fff;}
.au-consent u{color: var(--accent-ink); text-underline-offset: 2px;}
.au-form .press{margin-top: 4px;}
.au-foot{margin-top: auto; padding-top: 24px; text-align: center; font-size: 13px; color: var(--ink2);}
.au-foot b{font-weight: 600; color: var(--accent-ink);}
.ml-top{display: flex; align-items: center; gap: 4px; padding: 8px 12px; color: #007AFF; font-size: 16px;}
.ml-head{display: flex; align-items: center; gap: 10px; padding: 8px 16px;}
.ml-av{width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #534AB7;}
.ml-av img{width: 22px;}
.ml-head b{display: block; font-size: 15px;}
.ml-head span{font-size: 12px; color: var(--ink2);}
.ml-subject{padding: 4px 16px 10px; font: 600 20px/1.25 var(--font);}
.ml-mail{margin: 0 14px; overflow: hidden; border-radius: 22px; background: var(--card); border: 1px solid var(--line);}
.ml-mail > img{display: block; width: 100%; height: auto;}
.ml-body{padding: 16px 18px 18px;}
.ml-body > p{font-size: 13px; line-height: 1.55; color: var(--ink2);}
.ml-chip{display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; padding: 9px 10px; border-radius: 14px; background: var(--card2);}
.ml-chip > span{width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--chip-violet-bg); color: var(--chip-violet-ink); font-weight: 700;}
.ml-chip small{display: block; font-size: 11px; color: var(--ink2);}
.ml-chip b{font-size: 13px;}
.ml-note{display: block; margin-top: 8px; text-align: center; font-size: 11px; color: var(--ink2);}
.ob-chrome{display: flex; flex-direction: column; align-items: center; padding-top: 8px;}
.ob-word{font: 600 16px var(--display);}
.ob-word span{color: #7F77DD;}
.ob-dots{display: flex; gap: 6px; margin-top: 10px;}
.ob-dots i{width: 6px; height: 6px; border-radius: 999px; background: var(--card2);}
.ob-dots i.on{width: 22px; background: #7F77DD;}
.ob-step{margin-top: 6px; font-size: 11px; color: var(--ink2);}
.ob-body{padding: 0 16px;}
.ob-t{margin-top: 20px; font: 600 21px/1.25 var(--display);}
.ob-help{margin-top: 6px; font-size: 11px; color: var(--ink2);}
.ob-rows{display: flex; flex-direction: column; gap: 10px; margin-top: 20px;}
.ob-row{--pd: 0px; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: background-color 200ms ease, border-color 200ms ease, transform 120ms var(--ease-out);}
.ob-row.is-pressed{transform: scale(.98);}
.ob-row.is-on, .ob-sub.is-on{background: var(--chip-violet-bg); border: 1.5px solid #534AB7; padding: 9.5px;}
.ob-sub.is-on{padding: 0;}
.ob-ico{width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--card2); color: var(--ink2); transition: background-color 150ms ease, color 150ms ease;}
.ob-row.is-on .ob-ico{background: #7F77DD; color: #26215C;}
.ob-row .t, .ob-sub .t{flex: 1; min-width: 0;}
.ob-row .t b{display: block; font-size: 14px; font-weight: 500; line-height: 1.25;}
.ob-row .t small, .ob-sub .t small{display: block; margin-top: 2px; font-size: 11px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ob-row.is-on .t small, .ob-sub.is-on .t small{color: var(--chip-violet-ink);}
.ob-radio{width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--line); color: transparent; transition: background-color 150ms ease;}
.is-on > .ob-radio, .is-on > .ob-sub-row > .ob-radio{background: #7F77DD; border-color: transparent; color: #26215C;}
.ob-sh{display: flex; align-items: flex-start; gap: 12px; margin-top: 20px;}
.ob-sh .a-icbtn{margin-top: 2px;}
.ob-sh b{display: block; font: 600 18px/1.25 var(--display);}
.ob-sh small{display: block; margin-top: 4px; font-size: 11px; color: var(--ink2);}
.ob-groups{display: flex; flex-direction: column; gap: 18px; margin-top: 16px;}
.ob-group{display: flex; flex-direction: column; gap: 8px;}
.ob-group .a-label em{font-style: normal; opacity: .75;}
.ob-sub{overflow: hidden; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: background-color 150ms ease, border-color 150ms ease;}
.ob-sub.soon{opacity: .5;}
.ob-sub-row{display: flex; align-items: center; gap: 12px; padding: 10px;}
.ob-sub.is-on .ob-sub-row{padding: 9.5px;}
.ob-tile{width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--base);}
.ob-tile .emb{width: 26px; height: 17px;}
.ob-sub .t b{display: block; font-size: 13px; font-weight: 600; line-height: 1.25;}
.ob-lv{display: flex; gap: 8px; padding: 0 10px 10px 44px;}
.ob-lv[hidden]{display: none;}
.ob-cta{position: absolute; left: 16px; right: 16px; bottom: 50px;}
.ios-page{position: absolute; inset: 54px 0 0;}
.ios-mini{padding: 16px;}
.ios-mini-head{display: flex; align-items: center; gap: 12px;}
.ios-mini-head small{display: block; font-size: 12px; color: var(--ink2);}
.ios-mini-head b{font: 600 17px var(--display);}
.ios-mini-card{height: 128px; margin-top: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);}
.ios-mini-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;}
.ios-mini-grid i{height: 106px; border-radius: 20px;}
.ios-bar{position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 30px; background: color-mix(in srgb, var(--card) 92%, transparent); border-top: 1px solid var(--line);}
.ios-url{display: flex; align-items: center; justify-content: center; gap: 5px; height: 40px; border-radius: 12px; background: var(--card2); font-size: 14px;}
.ios-tools{display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 0 8px; color: #007AFF;}
.ios-tools .dim{opacity: .35;}
.ios-share{display: flex; border-radius: 10px; transition: transform 80ms ease;}
.ios-sheet{position: absolute; left: 0; right: 0; bottom: 0; z-index: 14; padding: 16px 16px 40px; border-radius: 22px 22px 0 0; background: var(--card2); box-shadow: 0 -14px 34px rgba(0, 0, 0, .22); transform: translateY(105%); transition: transform 480ms var(--ease-drawer);}
.ios-sheet.is-on{transform: none;}
.ios-sheet-app{display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px;}
.ios-sheet-app img{width: 44px; height: 44px; border-radius: 11px;}
.ios-sheet-app b{display: block; font-size: 15px;}
.ios-sheet-app small{font-size: 12px; color: var(--ink2);}
.ios-rows{overflow: hidden; border-radius: 14px; background: var(--card);}
.ios-row{display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 16px; transition: background-color 150ms ease;}
.ios-row + .ios-row{border-top: 1px solid var(--line);}
.ios-row.is-pressed{background: var(--card2); transform: none;}
.ios-home{position: absolute; inset: 0; z-index: 16; padding: 70px 22px 0; background: linear-gradient(165deg, #7F77DD 0%, #534AB7 45%, #26215C 100%); opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease-out);}
.ios-home.is-on{opacity: 1;}
.ios-grid{display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 22px;}
.ios-app{display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 11px;}
.ios-app i, .ios-app img{width: 62px; height: 62px; border-radius: 15px;}
.ios-app.zm{opacity: 0; transform: scale(.4);}
.ios-app.zm.is-on{opacity: 1; transform: none; transition: opacity 260ms ease, transform 520ms var(--ease-out-back);}
.ios-app.zm img{box-shadow: 0 6px 16px rgba(0, 0, 0, .25);}
.ios-dock{position: absolute; left: 14px; right: 14px; bottom: 26px; display: flex; justify-content: space-around; padding: 14px; border-radius: 30px; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.ios-dock i{width: 60px; height: 60px; border-radius: 15px;}
@media (prefers-reduced-motion: reduce){.scr, .slide, .view, .rise, .fb, .ex-res, .ios-sheet, .fc, .fc-inner, .cf, .lt-line{transition-property: opacity !important; transform: none !important;}
.ec-p1, .ec-p2, .ec-rip, .ec-think i, .eq i, .situ, .lt-caret, .pulse-dot, .au-field .v::after{animation: none !important;}
.tap{display: none;}}
.pc-head > span{flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pc-excerpt{margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink2);}
.pc-excerpt .gap{display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; margin: 0 2px; padding: 0 6px; border-radius: 6px; background: var(--chip-violet-bg); color: var(--chip-violet-ink); font-size: 11px; font-weight: 700; vertical-align: 1px;}
.ap.is-static .ap-fill, .ap.is-static .ap-thumb{transition: none;}
.pr-body .pc{margin-top: 0;}
.pr-label{margin-top: 16px;}
.pa-block{position: absolute; left: 16px; right: 16px; top: 108px; display: flex; align-items: center; gap: 10px;}
.pa-block::before, .pa-block::after{content: ''; flex: 1; height: 1px; background: var(--line);}
.pa-block span{font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--accent-ink);}
.pa-banner.low{margin-top: 38px;}
.pa-lbl{max-width: 150px; text-align: center; white-space: normal;}
.pa-lbl b{display: block; font-weight: 600;}
.pa-lbl small{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; font-weight: 400; color: var(--ink2);}
.pa-node.st-locked .pa-lbl b{color: var(--ink2);}
.ios-url .redact, .ios-sheet-app .redact{display: inline-block; width: 128px; height: 10px; border-radius: 999px; background: currentColor; opacity: .22; vertical-align: middle;}
.ios-sheet-app .redact{width: 110px; height: 8px; margin-top: 6px; color: var(--ink2);}
.ob-scroll{transition: transform 700ms var(--ease-in-out);}
.ob-sub .t b{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ex-bar{grid-template-columns: 96px 1fr 16px;}
.ex-bar em i{background: var(--g, #7F77DD);}
.ex-bar span:last-child{font-weight: 700; color: var(--g, var(--ink));}
.ex-scale{margin-top: 2px; font-size: 10px; color: var(--ink2);}
.ex-part small{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pa-node.quiz.st-current .bub{box-shadow: 0 5px 0 #993556;}
.sh-chip.amber{background: var(--chip-amber-bg); color: var(--chip-amber-ink);}
.fc-callout.note{background: var(--chip-amber-bg);}
.fc-callout.note small{color: var(--chip-amber-ink);}
.ob-viewport{position: absolute; left: 0; right: 0; top: 54px; bottom: 0; overflow: hidden;}
.scr[data-screen="subjects"]{padding-top: 0;}
.pa-map{height: 720px;}
.pa-trail{height: 720px;}
.ap-title{flex: 1; min-width: 0;}