/* landing pages – "קלף אחרי קלף" (student + teacher). Loaded after app.css. */
/* ---------- tokens ---------- */
:root{
  --display:"Karantina","Rubik","Segoe UI",Arial,sans-serif;
  --ld-hot:#FFC24D;                 /* 3.2:1 at the gradient's lightest point, 4.4:1 at its darkest; #FFB020 measured 2.8:1 on #2F5BFF */
  --ld-plate:#FFFFFF; --ld-plate-edge:#C9D4FF;
  --ld-cols:rgba(255,255,255,.075);
  --ld-hall:#0F1A44; --ld-hall-2:#B9C6F2; --ld-hall-kick:#9DB2FF;
  --ld-card:#FFFFFF; --ld-card-ink:#14203B; --ld-card-2:#4A5675; --ld-card-edge:rgba(0,0,0,.28);
  --ld-paper:#FFFFFF; --ld-step:#2F5BFF; --ld-step-2:#1E3FD0;
  --ld-sh-slip:0 1px 0 rgba(20,32,59,.05),0 16px 28px -16px rgba(20,32,59,.42);
  --ld-sh-slip-up:0 2px 0 rgba(20,32,59,.05),0 26px 36px -18px rgba(20,32,59,.5);
  --ld-spec:linear-gradient(to left,#2F6BFF 0 9.09%,#7C4DFF 0 18.18%,#0099E5 0 27.27%,#00A88F 0 36.36%,#F59E0B 0 45.45%,#E8458B 0 54.54%,#F0503C 0 63.63%,#5BAA1F 0 72.72%,#5B5BD6 0 81.81%,#F2711C 0 90.9%,#0E9F6E 0);
  --ld-logo:min(224px,calc(100vw - 152px));
}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}

/* ---------- shell ---------- */
body.on-landing{background:var(--bg)}
.ld{position:relative;display:block;outline:0}
.ld-s{display:inline}.ld-l{display:none}

/* ---------- hero ---------- */
.ld-hero{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;min-height:100svh;color:#fff;border-radius:0 0 32px 32px;
  background:radial-gradient(46rem 26rem at 88% -6%,rgba(255,255,255,.16),transparent 62%),linear-gradient(160deg,var(--hero-1),var(--hero-2))}
.ld-cols{position:absolute;z-index:0;inset:auto 0 0 0;height:34%;pointer-events:none;
  background:linear-gradient(var(--ld-cols),var(--ld-cols)) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--ld-cols) 0 16px,transparent 16px 42px) 0 20px/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(#000 30%,transparent 95%);mask-image:linear-gradient(#000 30%,transparent 95%)}
.ld-hero-in{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;width:100%;max-width:1280px;margin:0 auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-right,0px)) max(var(--gutter),env(safe-area-inset-left,0px))}
.ld-mast{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ld-plate{flex:none;position:relative;margin:0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;background:var(--ld-plate);border-radius:0 0 22px 22px;
  box-shadow:0 6px 0 var(--ld-plate-edge),0 22px 34px -14px rgba(6,14,64,.6)}
.ld-logo{display:block;width:var(--ld-logo);aspect-ratio:663/290;overflow:hidden;direction:ltr}   /* alpha bbox of logo.png: x13–676, y53–343 */
.ld-logo img{display:block;width:104.223%;max-width:none;height:auto;margin:-7.994% 0 0 -1.961%}
.ld-plate-fb{display:none;width:var(--ld-logo);aspect-ratio:663/290;place-content:center;text-align:center}
.ld-plate.nologo .ld-logo{display:none}.ld-plate.nologo .ld-plate-fb{display:grid}
.ld-plate-fb b{font:800 1.75rem/1.1 var(--font);color:#14203B}.ld-plate-fb span{font:500 1rem/1.3 var(--font);color:#C2185B}
.ld-date{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0;padding-top:calc(16px + env(safe-area-inset-top,0px));text-align:left;font-size:.8125rem;line-height:1.35}
.ld-dl{display:grid;justify-items:end;font-weight:500;color:rgba(255,255,255,.9);white-space:nowrap}
.ld-dl b{font-weight:700;color:#fff}
.ld-tag{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--cta);color:var(--cta-ink);font-weight:800;font-size:.75rem;line-height:1.3;white-space:nowrap}
.ld-spec{display:block;width:76px;height:6px;border-radius:3px;background:var(--ld-spec)}
.ld-pill{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;color:#fff;font-weight:600;font-size:.8125rem;text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);transition:background-color .15s}
.ld-pill::after{content:"";position:absolute;inset:-6px -4px}
@media (max-width:399px){.ld-date{font-size:.78rem}}

.ld-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.ld-title{margin:20px 0 0;font:700 clamp(3.4rem,17vw,7.5rem)/.86 var(--display);letter-spacing:.005em;color:#fff}
.ld-ln{display:block;clip-path:inset(-.3em -.12em -.22em -.12em)}   /* mask for the rise; keeps the tall lamed and final-letter descenders */
.ld-ln>span{display:block}
:is(.ld-hero,.ld-hall,.ld-end) .ld-ln.hot{color:var(--ld-hot)}
.ld-sub{margin-top:12px;max-width:24em;font-weight:500;font-size:1.0625rem;line-height:1.5;color:rgba(255,255,255,.92);text-wrap:pretty}
.ld-hwt{margin-top:14px;font-weight:700;font-size:1.125rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ld-hwm{margin-top:4px;font-size:.9375rem;color:rgba(255,255,255,.88)}

/* main button: its own class, never .cta-start (that class carries margin-top:-34px) */
.ld-cta{position:relative;align-self:stretch;display:grid;grid-template-columns:52px 1fr 26px;align-items:center;gap:14px;min-height:76px;margin-top:18px;padding:12px 16px;border-radius:var(--r-lg);
  background:var(--cta);color:var(--cta-ink);text-align:start;overflow:hidden;box-shadow:0 6px 0 var(--cta-2),0 18px 30px -14px rgba(6,12,60,.65);transition:transform .12s var(--ease),box-shadow .12s,filter .15s}
.ld-cta:active{transform:translateY(4px);box-shadow:0 2px 0 var(--cta-2),0 8px 16px -10px rgba(6,12,60,.6)}
.ld-cta:disabled{background:var(--line);color:var(--ink-3);box-shadow:none}
.ld-cta-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.55)}
.ld-cta-ico .ico{width:28px;height:28px;stroke:var(--cta-ink);stroke-width:2.2}
.ld-cta-ico .ico.fill{fill:var(--cta-ink)}            /* bolt only; redo and clipboard stay stroked */
.ld-cta-ico.ring{border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.72) 79%,transparent 80%),conic-gradient(var(--cta-ink) var(--p),rgba(42,23,0,.16) 0)}
.ld-cta-txt{display:grid;gap:2px;min-width:0}
.ld-cta-txt b{font-weight:800;font-size:1.375rem;line-height:1.15}
.ld-cta-txt small{font-weight:500;font-size:.875rem;opacity:.85}
.ld-cta>.ico{width:26px;height:26px;transition:transform .2s var(--ease)}
.ld-cta.is-resume{grid-template-columns:44px 1fr 24px;gap:12px}
.ld-cta.is-resume .ld-cta-ico{width:44px;height:44px;border-radius:50%}
.ld-cta.is-resume .ld-cta-txt b{font-size:1.25rem}
.ld-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(110%)}
@media (hover:hover){.ld-cta:hover{filter:brightness(1.05)}.ld-cta:hover>.ico{transform:translateX(-4px)}.ld-pill:hover{background:rgba(255,255,255,.12)}}
:is(.ld-hero,.ld-end) :focus-visible{outline-color:#fff;outline-offset:4px}
.ld-alt{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0 2px;color:#fff;font-weight:600;font-size:.9375rem;text-decoration:underline;text-underline-offset:3px;opacity:.92}

/* returning tray */
.ld-me{align-self:stretch;max-width:30rem;margin-top:12px;padding:11px 14px 13px;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 14px 28px -16px rgba(6,14,64,.55)}
.ld-me-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.875rem;color:var(--ink-2)}
.ld-me-row b,.ld-me-pts{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ld-me-pts{display:inline-flex;align-items:center;gap:4px}.ld-me-pts .ico{width:18px;height:18px;fill:var(--cta);stroke:var(--cta)}
.ld-seg{display:flex;gap:3px;height:10px;margin-top:9px}
.ld-seg i{flex:var(--n) 1 0;border-radius:3px;background:linear-gradient(to left,var(--tc) var(--p),color-mix(in srgb,var(--tc) 22%,var(--surface)) 0)}

/* hand */
.ld-hand{position:relative;z-index:1;flex:1 0 128px;margin-top:22px;pointer-events:none}
.ld-hc{--w:min(300px,80vw);position:absolute;top:max(22px,calc(100% - 180px));left:50%;width:var(--w);height:214px;margin-left:calc(var(--w)/-2);transform-origin:50% 170%;
  rotate:calc(var(--r,0deg)*(1 + var(--u,0)*1.1));translate:0 calc(var(--y,0px) - var(--u,0)*90px);z-index:calc(10 - var(--k));
  display:grid;align-content:start;gap:10px;padding:12px 14px;border-radius:22px;border-top:6px solid var(--mc);background:var(--surface);color:var(--ink);overflow:hidden;
  box-shadow:0 26px 40px -20px rgba(6,14,64,.75),0 1px 2px rgba(6,14,64,.25)}
.ld-hc[data-k="1"]{--r:-7deg;--y:-12px}.ld-hc[data-k="2"]{--r:7deg;--y:-12px}.ld-hc[data-k="3"]{--r:-14deg;--y:-22px}.ld-hc[data-k="4"]{--r:14deg;--y:-22px}
.ld-hc-head{display:flex;gap:6px;min-width:0;overflow:hidden}
.ld-q{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--mc) 8%,var(--surface));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mc) 18%,transparent);font-weight:600;font-size:.9375rem;line-height:1.45;transition:opacity .25s}
.ld-q .blank{inline-size:2.4em}
.ld-ans{display:flex;align-items:center;gap:8px;height:46px;padding-inline:14px 8px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line-strong);font-weight:700;font-size:1.0625rem;transition:background-color .2s,box-shadow .2s}
.ld-ans-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.ld-ans.is-typing{background:var(--surface);box-shadow:inset 0 0 0 2.5px var(--brand),0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.ld-ans.is-typing .ld-ans-t::after{content:"";display:inline-block;width:2px;height:1.1em;margin-inline-start:2px;vertical-align:-.15em;background:var(--brand);animation:ld-caret 1s steps(1) infinite}
.ld-ans .v-pts,.ld-ans .ld-ok{display:none}
.ld-ans.is-ok{background:var(--ok-soft);box-shadow:inset 0 0 0 2.5px var(--ok)}
.ld-ans.is-ok .v-pts{display:inline-block;margin:0}
.ld-ok{place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ok);color:#fff}
.ld-ans.is-ok .ld-ok{display:grid;animation:pop .35s var(--spring)}
.ld-ok .ico{width:16px;height:16px;stroke-width:3}
.ld-pass{padding:10px 12px;border-radius:12px;background:var(--surface-2);border-inline-start:4px solid var(--mc);font-size:.875rem;line-height:1.55}
.ld-pass mark{background:linear-gradient(transparent 60%,var(--mark) 60% 92%,transparent 92%);color:inherit}
.ld-chs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ld-ch{display:flex;align-items:center;gap:8px;height:44px;padding-inline:8px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-strong);font-weight:700;font-size:.875rem}
.ld-ch i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--brand-soft);color:var(--brand);font-style:normal;font-weight:800}
.ld-ch.ok{background:var(--ok-soft);box-shadow:inset 0 0 0 2px var(--ok)}.ld-ch.ok i{background:var(--ok);color:#fff}
.ld-mini-t{font-weight:800;font-size:1rem}
.ld-score{padding:0;border-top:0;gap:0}
.ld-score-band{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;color:#fff;background:linear-gradient(160deg,var(--hero-1),var(--hero-2))}
.ld-score-band b{font:700 3.5rem/.85 var(--display)}
.ld-score .star{width:26px;height:26px;fill:rgba(255,255,255,.28)}.ld-score .star.on{fill:var(--cta)}
.ld-score-t{padding:12px 16px 0;font-weight:800;font-size:1.0625rem}.ld-score-s{padding:4px 16px;font-size:.875rem;color:var(--ink-3)}

/* ---------- section kit ---------- */
.ld-sec{max-width:46rem;margin:0 auto;padding-top:72px;padding-bottom:8px;padding-inline:max(var(--gutter),env(safe-area-inset-right,0px)) max(var(--gutter),env(safe-area-inset-left,0px))}
.ld-kick{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.875rem;color:var(--brand)}
.ld-kick i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.ld-h2{margin-top:10px;font:700 clamp(3.25rem,14.5vw,6.25rem)/.88 var(--display);color:var(--ink)}
.ld-h2 .ld-ln.hot{color:var(--brand)}
.ld-lead{margin-top:14px;max-width:34ch;font-size:1.0625rem;line-height:1.55;color:var(--ink-2)}

/* ---------- slips ---------- */
.ld-sliprow{list-style:none;margin:24px calc(var(--gutter)*-1) 0;padding:18px var(--gutter) 30px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,62vw,250px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.ld-sliprow::-webkit-scrollbar{display:none}
.ld-sliprow>li{display:flex}
.ld-slip{--r:0deg;--mc-ink:var(--mc-l);position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:286px;padding:26px 18px 18px;border-radius:18px;
  background:var(--ld-paper);color:var(--ink);text-align:center;rotate:var(--r);box-shadow:var(--ld-sh-slip);scroll-snap-align:center;
  transition:translate .25s var(--spring),rotate .25s var(--spring),scale .12s,box-shadow .25s}
.ld-slip::before{content:"";position:absolute;inset:8px;border-radius:12px;border:2px solid var(--mc);pointer-events:none}
.ld-code{font:700 4.75rem/.85 var(--display);color:var(--mc-ink)}
.ld-tear{width:40%;margin:8px 0 6px;border-top:2px dashed color-mix(in srgb,var(--mc) 45%,transparent)}
.ld-slip-name{font-weight:800;font-size:1.0625rem;line-height:1.25}
.ld-slip-desc{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.ld-slip-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font-weight:700;font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ld-slip-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--mc);color:var(--mc-on,#fff)}.ld-slip-ico .ico{width:18px;height:18px}
@media (hover:hover){.ld-slip:hover{translate:0 -8px;rotate:0deg;box-shadow:var(--ld-sh-slip-up)}}
.ld-slip:active{translate:0 2px;rotate:0deg;scale:.985}

/* ---------- hall ---------- */
.ld-hall{margin-top:72px;background:var(--ld-hall);color:#fff;border-radius:32px;overflow:clip}
.ld-hall .ld-sec{padding-block:56px}
.ld-hall .ld-kick{color:var(--ld-hall-kick)}.ld-hall .ld-h2{color:#fff}.ld-hall .ld-lead{color:var(--ld-hall-2)}
.ld-hall :focus-visible{outline-color:var(--cta)}
.ld-plen{position:relative;max-width:520px;margin:28px auto 0}
.ld-plen::before{content:"";position:absolute;inset:-12% -18% -30%;background:radial-gradient(closest-side,rgba(47,91,255,.38),transparent);pointer-events:none}
.ld-plen svg{position:relative;display:block;width:100%;height:auto}
.ld-plen circle{stroke-width:0;transform-box:fill-box;transform-origin:center;transition:transform .32s var(--spring) var(--d),opacity .25s,fill-opacity .3s,stroke-width .3s}
.ld-plen.is-pending circle{transform:scale(0)}
.ld-plen.focus circle:not(.on){opacity:.16}
.ld-plen.peeking circle:not(.peek){opacity:.35}
.ld-plen.show-out circle[data-out]{fill-opacity:0;stroke-width:1.6;stroke-opacity:.6}
.ld-plen-c{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:grid;justify-items:center;text-align:center;pointer-events:none}
.ld-plen-c b{font:700 clamp(3.5rem,17vw,6rem)/.8 var(--display);font-variant-numeric:tabular-nums}
.ld-plen-c span{max-width:9em;margin-top:4px;font-weight:700;font-size:.875rem;line-height:1.25;color:rgba(255,255,255,.72)}
.ld-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:20px}
.ld-lg{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding-block:4px;padding-inline:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  color:#fff;font-weight:600;font-size:.8125rem;transition:background-color .15s,color .15s}
.ld-lg-i{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--tc);color:#fff}.ld-lg-i .ico{width:16px;height:16px}
.ld-lg small{font-weight:700;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}
.ld-lg[aria-pressed="true"]{background:#fff;color:#14203B}.ld-lg[aria-pressed="true"] small{color:#4A5675}
@media (pointer:coarse){.ld-lg{min-height:44px}}
.ld-plen-go{display:flex;align-items:center;gap:8px;margin:14px auto 0;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:#14203B;font-weight:700;font-size:.9375rem;box-shadow:0 4px 0 rgba(0,0,0,.28)}
.ld-plen-go .ico{width:20px;height:20px}
.ld-ledger{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ld-lc{display:grid;align-content:start;gap:4px;padding:14px 14px 12px;border-radius:14px;background:var(--ld-card);color:var(--ld-card-ink);box-shadow:0 5px 0 var(--ld-card-edge)}
.ld-lc::before{content:"";width:28px;height:7px;margin-bottom:6px;border-radius:4px;background:var(--sc)}
.ld-lc b{font:700 4.5rem/.8 var(--display);font-variant-numeric:tabular-nums}
.ld-lc strong{font-weight:700;font-size:.9375rem;line-height:1.3}
.ld-lc small{font-weight:500;font-size:.8125rem;line-height:1.35;color:var(--ld-card-2)}
.ld-lc.wide{grid-column:1/-1;grid-template-columns:auto 1fr;column-gap:16px;align-items:end}
.ld-lc.wide::before{grid-column:1/-1}.ld-lc.wide b{grid-column:1;grid-row:2/span 2;min-width:3.2ch}.ld-lc.wide strong,.ld-lc.wide small{grid-column:2}

/* ---------- steps ---------- */
.ld-steps{position:relative;list-style:none;margin:28px 0 0;padding:0;display:grid;gap:28px}
.ld-steps::before{content:"";position:absolute;inset-inline-start:22px;top:24px;bottom:24px;width:4px;border-radius:2px;
  background:linear-gradient(to bottom,#2F6BFF,#7C4DFF,#0099E5,#00A88F,#F59E0B,#E8458B,#F0503C,#5BAA1F,#5B5BD6,#F2711C,#0E9F6E);transform:scaleY(var(--rail,1));transform-origin:top;transition:transform .9s var(--ease)}
.ld-st{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
.ld-st-n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--ld-step);color:#fff;font:700 2.25rem/1 var(--display);box-shadow:0 4px 0 var(--ld-step-2);
  transition:transform .35s var(--spring) calc(var(--k)*300ms),opacity .2s calc(var(--k)*300ms)}
.ld-st h3{padding-top:10px;font-weight:800;font-size:1.25rem;line-height:1.25}
.ld-st p{margin-top:4px;max-width:46ch;font-size:1rem;line-height:1.5;color:var(--ink-2)}
.ld-st-mock{grid-column:2;margin-top:12px;padding:12px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-2)}
.ld-mts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ld-mt{position:relative;display:grid;align-content:start;gap:6px;min-height:86px;padding:8px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:.75rem;line-height:1.3}
.ld-mt.on{background:color-mix(in srgb,var(--tc) 11%,var(--surface));box-shadow:inset 0 0 0 2px var(--tc)}
.ld-mt>i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--tc);color:#fff}.ld-mt>i .ico{width:16px;height:16px}
.ld-mt-ck{position:absolute;top:8px;inset-inline-end:8px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--tc);color:#fff}.ld-mt-ck .ico{width:12px;height:12px;stroke-width:3}
.ld-mchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ld-hint{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ld-res{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.ld-res>b{font:700 4rem/.8 var(--display)}
.ld-res .star{width:22px;height:22px}.ld-res .star:nth-child(2){width:30px;height:30px}
.ld-res-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.8125rem}
.ld-link{direction:ltr;text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:.8125rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-copied{display:inline-flex;align-items:center;gap:6px;margin-top:8px;min-height:38px;padding:0 14px;border-radius:12px;background:var(--ok);color:#fff;font-weight:700;font-size:.875rem;box-shadow:0 3px 0 var(--ok-ink)}
.ld-share{display:grid;justify-items:center;align-content:start;gap:4px;width:132px;aspect-ratio:4/5;margin-inline:auto;padding-bottom:10px;border-radius:12px;background:#fff;color:#14203B;overflow:hidden;rotate:-3deg;box-shadow:var(--shadow-2)}
.ld-share::before{content:"";justify-self:stretch;height:6px;background:#2F5BFF}
.ld-share img{width:72px;margin-top:6px}.ld-share>b{font:700 2.5rem/.9 var(--display)}.ld-share .star{width:14px;height:14px}
.ld-share small{padding:2px 8px;border-radius:999px;background:#FDECEC;color:#C0352B;font-weight:700;font-size:.625rem}

/* ---------- final band, footer, dock ---------- */
.ld-end{position:relative;isolation:isolate;overflow:clip;margin:56px 12px 0;padding:44px 16px 22px;border-radius:32px;color:#fff;
  background:radial-gradient(40rem 22rem at 90% 0%,rgba(255,255,255,.14),transparent 60%),linear-gradient(160deg,var(--hero-1),var(--hero-2))}
.ld-end-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.ld-end .ld-h2{color:#fff;margin-top:0}
.ld-foot{max-width:46rem;margin:0 auto;padding:24px var(--gutter) calc(112px + env(safe-area-inset-bottom,0px));font-size:.875rem;line-height:1.6;color:var(--ink-3)}
.ld-foot a{font-weight:700}
.ld-dock{position:fixed;inset:auto 0 0 0;z-index:20;padding:12px max(var(--gutter),env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));
  background:linear-gradient(to top,var(--bg) 65%,transparent);transform:translateY(120%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.ld-dock.show{transform:none;visibility:visible;transition:transform .3s var(--ease)}
.ld-dock .btn{display:flex;max-width:46rem;margin-inline:auto}
@media (max-width:399px){.ld-end .ld-cta-ico{display:none}.ld-end .ld-cta{grid-template-columns:1fr 26px}}

/* ---------- motion (classes are added by JS only; without JS nothing is hidden) ---------- */
@media (prefers-reduced-motion:no-preference){
  .ld.is-pre .ld-plate{transform:translateY(calc(-100% - 12px))}
  .ld.is-pre .ld-title .ld-ln>span{transform:translateY(115%)}
  .ld.is-pre .ld-hc{transform:translateY(130%)}
  .ld.is-intro .ld-plate{transition:transform .56s var(--spring)}
  .ld.is-intro .ld-title .ld-ln>span{transition:transform .62s var(--ease) calc(.1s + var(--i)*70ms)}
  .ld.is-intro .ld-hc{transition:transform .76s cubic-bezier(.34,1.3,.64,1) var(--hd)}
  .ld.is-intro .ld-hero .ld-cta::after{animation:ld-sheen .7s 1.15s cubic-bezier(.4,0,.2,1) both}
  .ld.is-intro .ld-seg i{animation:ld-fill .9s var(--ease) calc(.3s + var(--k)*40ms) both}
  .ld.is-fade{animation:ld-fade .18s ease both}
  .ld.is-leaving{opacity:0;transform:translateY(-12px);transition:opacity .16s ease,transform .16s ease}
  .ld-rv:not(.in) .ld-ln>span{transform:translateY(115%)}
  .ld-rv.in .ld-ln>span{transition:transform .6s var(--ease) calc(var(--i)*70ms)}
  .ld-sliprow.is-pending .ld-slip{opacity:0;transform:translateX(56px) rotate(9deg)}
  .ld-sliprow.is-dealt .ld-slip{transition:opacity .3s ease calc(var(--i)*70ms),transform .46s cubic-bezier(.2,.9,.3,1.15) calc(var(--i)*70ms)}
  .ld-steps.is-pending{--rail:0}
  .ld-steps.is-pending .ld-st-n{transform:scale(.85);opacity:.4}
  .ld-hc.swap .ld-q,.ld-hc.swap .topic-chip{opacity:0}
}
@keyframes ld-sheen{to{transform:translateX(-110%)}}
@keyframes ld-fill{from{--p:0%}}
@keyframes ld-caret{50%{opacity:0}}
@keyframes ld-fade{from{opacity:0}}

/* ---------- view transition into the app (html.vt-enter exists only during the transition) ---------- */
.vt-enter .ld-plate,.vt-enter .appbar .logo-chip{view-transition-name:school-logo}
.vt-enter body.on-home .cta-start{view-transition-name:ld-cta}
::view-transition-group(school-logo),::view-transition-group(ld-cta){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,.8,.24,1)}
::view-transition-old(school-logo),::view-transition-new(school-logo){height:100%;object-fit:contain}
::view-transition-old(root){animation:ld-vt-out .22s ease both}
::view-transition-new(root){animation:ld-vt-in .32s .08s cubic-bezier(.22,.8,.24,1) both}
@keyframes ld-vt-out{to{opacity:0}}
@keyframes ld-vt-in{from{opacity:0;transform:translateY(16px)}}

/* ---------- breakpoints ---------- */
@media (min-width:600px){
  :root{--ld-logo:260px}
  .ld-s{display:none}.ld-l{display:inline}
  .ld-plate{padding:calc(18px + env(safe-area-inset-top,0px)) 22px 18px;border-radius:0 0 26px 26px}
  .ld-cta{align-self:flex-start;width:100%;max-width:30rem}
  .ld-me{align-self:flex-start;width:100%}
}
@media (min-width:1024px){
  :root{--ld-logo:320px}
  .ld-hero{min-height:min(100svh,960px);border-radius:0 0 48px 48px}
  .ld-hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:auto 1fr;column-gap:40px;padding-inline:56px;padding-bottom:72px}
  .ld-mast{grid-column:1/-1}
  .ld-copy{grid-column:1;grid-row:2;align-self:center}
  .ld-hand{grid-column:2;grid-row:2;margin:0;min-height:420px}
  .ld-cols{inset:16% auto auto 0;width:50%;height:74%}
  .ld-plate{padding:calc(24px + env(safe-area-inset-top,0px)) 28px 24px;border-radius:0 0 30px 30px;box-shadow:0 8px 0 var(--ld-plate-edge),0 28px 44px -18px rgba(6,14,64,.6)}
  .ld-date{padding-top:32px;font-size:.9375rem}.ld-spec{width:120px}.ld-pill{height:40px;padding:0 18px;font-size:.9375rem}
  .ld-title{margin-top:36px;font-size:clamp(5rem,8.4vw,8.25rem)}
  .ld-sub{margin-top:18px;font-size:1.25rem}
  .ld-cta{min-height:84px;margin-top:28px;grid-template-columns:60px 1fr 28px}
  .ld-cta-ico{width:60px;height:60px;border-radius:17px}.ld-cta-txt b{font-size:1.625rem}
  .ld-hc{--w:380px;top:50%;height:236px;margin-top:-118px;transform-origin:50% 190%}
  .ld-hc[data-k="1"]{--r:-9deg;--y:-16px}.ld-hc[data-k="2"]{--r:9deg;--y:-16px}.ld-hc[data-k="3"]{--r:-18deg;--y:-30px}.ld-hc[data-k="4"]{--r:18deg;--y:-30px}
  .ld-sec{max-width:76rem;padding:96px 56px 8px}
  .ld-sliprow{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin-inline:0;padding:18px 0 30px;gap:22px}
  .ld-slip{aspect-ratio:3/4;min-height:0}
  .ld-hall{margin-top:96px;border-radius:48px}
  .ld-hall-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:56px;align-items:center}
  .ld-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .ld-steps::before{inset:22px 24px auto 24px;width:auto;height:4px;background:var(--ld-spec);transform:scaleX(var(--rail,1));transform-origin:right}
  .ld-st{grid-template-columns:1fr;row-gap:14px}.ld-st-mock{grid-column:1}
  .ld-end{max-width:76rem;margin:96px auto 0;padding:64px 56px}
  .ld-end-in{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:40px}
  .ld-end .ld-cta{width:26rem;margin-top:0}
  .ld-dock{inset:auto auto 24px 32px;padding:0;background:none}
  .ld-dock .btn{width:22rem}
}
@media (min-width:1024px) and (max-height:780px){:root{--ld-logo:272px}.ld-title{font-size:clamp(4.5rem,7.4vw,7rem)}}

/* ---------- dark mode (same two-selector pattern as app.css) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ld-plate:#EEF2FF;--ld-plate-edge:#6F84DE;--ld-cols:rgba(255,255,255,.055);--ld-hall:#070C22;--ld-card:#F4F6FF;--ld-card-edge:rgba(0,0,0,.55);--ld-paper:#1B2654;--ld-step:#4D6BFF;--ld-step-2:#2B3FA8;
    --ld-sh-slip:0 0 0 1px var(--line),0 18px 30px -18px rgba(0,0,0,.7);--ld-sh-slip-up:0 0 0 1px var(--line-strong),0 28px 40px -20px rgba(0,0,0,.8)}
  :root:not([data-theme="light"]) .ld-slip{--mc-ink:var(--mc-d)}
  :root:not([data-theme="light"]) .ld-hc{box-shadow:0 0 0 1px var(--line),0 26px 40px -20px rgba(0,0,0,.8)}
  :root:not([data-theme="light"]) .ld-hall{box-shadow:inset 0 0 0 1px var(--line)}
}
:root[data-theme="dark"]{--ld-plate:#EEF2FF;--ld-plate-edge:#6F84DE;--ld-cols:rgba(255,255,255,.055);--ld-hall:#070C22;--ld-card:#F4F6FF;--ld-card-edge:rgba(0,0,0,.55);--ld-paper:#1B2654;--ld-step:#4D6BFF;--ld-step-2:#2B3FA8;
  --ld-sh-slip:0 0 0 1px var(--line),0 18px 30px -18px rgba(0,0,0,.7);--ld-sh-slip-up:0 0 0 1px var(--line-strong),0 28px 40px -20px rgba(0,0,0,.8)}
:root[data-theme="dark"] .ld-slip{--mc-ink:var(--mc-d)}
:root[data-theme="dark"] .ld-hc{box-shadow:0 0 0 1px var(--line),0 26px 40px -20px rgba(0,0,0,.8)}
:root[data-theme="dark"] .ld-hall{box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- accessibility ---------- */
@media (forced-colors:active){
  .ld-plate,.ld-slip,.ld-lc,.ld-hc,.ld-me{border:2px solid CanvasText}
  .ld-plen circle,.ld-seg i,.ld-spec,.ld-lg-i{forced-color-adjust:none}
}
@media (prefers-reduced-motion:reduce){
  .ld-hc{rotate:var(--r,0deg);translate:0 var(--y,0px)}
  .ld-ans.is-typing .ld-ans-t::after,.ld-cta::after{animation:none;display:none}
}

/* display face failed to load: keep the poster layout with Rubik */
.no-display .ld-title{font-family:var(--font);font-weight:800;line-height:1.02;font-size:clamp(2.5rem,11vw,5.5rem)}
.no-display .ld-h2{font-family:var(--font);font-weight:800;line-height:1.05;font-size:clamp(2.2rem,9vw,4.5rem)}
.no-display .ld-code,.no-display .ld-lc b,.no-display .ld-plen-c b,.no-display .ld-res>b,.no-display .ld-score-band b{font-family:var(--font);font-weight:800}


/* back-card skeleton lines */
.ld-skel{display:block;height:10px;border-radius:5px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.ld-skel.s2{width:68%}