/* The Try it page: one lesson and three questions from the course, laid out like the app (src/styles.css), with
   the Eclipse mark raised out of a bottom bar to open the tutor sheet. Tokens match the landing page. */
:root{
  color-scheme:dark;
  --sky:#0A0C10; --sky-hi:#111823; --moon:#0F151E;
  --ink:#E6E9EC; --mist:#99A2AB; --dim:#7F8892; --faint:#5F676F;
  --steel:#8FB3C7; --gold:#D2B36A; --gold-hi:#F2E6C4; --limb:#F4E2AE; --sage:#7FAF99; --rose:#CFA09B;
  --line:rgba(255,255,255,.08);
  --serif:Baskerville,'Libre Baskerville','Times New Roman',serif;
  --sans:Optima,'Helvetica Neue',Helvetica,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--sky)}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink);background:linear-gradient(180deg,var(--sky-hi) 0,var(--sky) 640px) var(--sky);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit}
p{margin:0}
.lb{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:500}
.rule{height:.5px;background:linear-gradient(90deg,rgba(210,179,106,.45),rgba(210,179,106,0))}
.wrap{max-width:620px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
main.wrap{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.g{font-family:inherit;font-size:13px;color:var(--steel);background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.17);border-radius:999px;padding:10px 20px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
.g:hover{background:rgba(255,255,255,.1)}
.g.muted{color:var(--mist)}
.g.primary{color:var(--sky);background:rgba(143,179,199,.95);border-color:transparent;font-weight:500}
.g.primary:hover{background:#9DBFD1}
.g:disabled{opacity:.35;cursor:default}
.g:focus-visible,.opt:focus-visible,.bmark:focus-visible,.send:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Masthead */
.mast{display:flex;align-items:center;justify-content:space-between;padding-block:22px 0}
.lock{display:flex;align-items:center;gap:11px;text-decoration:none}
.lock svg{width:60px;height:60px;margin:-18px}
.wm{white-space:nowrap;font-family:var(--serif);font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);line-height:1}
@media (max-width:360px){.wm{font-size:13px;letter-spacing:.22em}.mast .g{padding:8px 14px;font-size:12px}}

/* Intro */
.intro{margin-top:44px}
.intro h1{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.2;margin-top:12px;text-wrap:balance}
.intro .sub{margin-top:12px;color:var(--mist);font-size:15.5px;max-width:48ch}
.intro ol{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:8px}
.intro li{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035);font-size:14.5px;color:var(--mist)}
.intro li b{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1;color:var(--gold);min-width:22px;text-align:center}
.intro .go{margin-top:28px;font-size:15px;padding:13px 28px}
.intro .fine{margin-top:12px;font-size:12.5px;color:var(--faint)}

/* The sample itself, with the app's own class names */
.tryapp .rulerow{display:flex;align-items:center;gap:12px;margin-top:18px}
.tryapp .rulerow .rule{flex:1}
.tryapp .dots{display:flex;gap:6px;margin-top:14px}
.tryapp .dot{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.08)}
.tryapp .dot.done{background:rgba(143,179,199,.45)}.tryapp .dot.now{background:var(--steel)}
.tryapp .kind{margin-top:22px;display:flex;align-items:center;gap:11px}
.tryapp .kind .lb{color:var(--steel)}.tryapp .kind .n{font-size:10px;color:var(--faint);letter-spacing:.12em}
.tryapp h1{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.3;margin-top:4px;text-wrap:balance}
.tryapp .prose{margin-top:11px;font-size:15px;color:var(--mist);line-height:1.7;max-width:52ch}
.tryapp .prose b,.tryapp .why b,.tryapp .card p b{color:var(--ink);font-weight:500}
.tryapp .card{margin-top:16px;border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.03)}
.tryapp .card.mnemo{background:linear-gradient(180deg,rgba(210,179,106,.10),rgba(210,179,106,.03));border:.5px solid rgba(210,179,106,.25)}
.tryapp .card.mnemo .big{font-family:var(--serif);font-size:30px;line-height:1.2;background-image:linear-gradient(180deg,#8C6F35 0%,#D9BE7C 28%,#F2E6C4 47%,#C9A863 63%,#8A6B32 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tryapp .card.trap{background:rgba(207,160,155,.08);border:.5px solid rgba(207,160,155,.25)}
.tryapp .card.trap .lb{color:var(--rose)}
.tryapp .card .lb{display:block;margin-bottom:6px}
.tryapp .card .h{font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:4px}
.tryapp .card p{font-size:14px;color:var(--mist);line-height:1.7}
.tryapp .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.tryapp .two .card{margin-top:0;min-width:0}
.tryapp .lchips{display:grid;gap:8px;margin-top:18px}
.tryapp .lchip{display:flex;gap:14px;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.035)}
.tryapp .lchip .num{font-family:var(--serif);font-size:30px;line-height:1;color:var(--gold);min-width:22px;text-align:center}
.tryapp .lchip span:last-child{font-size:14px;color:var(--mist)}
.tryapp .bul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.tryapp .bul li{display:flex;gap:12px;font-size:15px;color:var(--ink);line-height:1.5;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.035)}
.tryapp .bul li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--steel);margin-top:8px}
.tryapp .bul li b{font-weight:500}
.tryapp .vs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.tryapp .vs>div{border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45;min-width:0}
.tryapp .vs .x{background:rgba(207,160,155,.07);color:var(--mist)}.tryapp .vs .x s{text-decoration-color:rgba(207,160,155,.6)}
.tryapp .vs .y{background:rgba(127,175,153,.10);color:var(--ink)}.tryapp .vs .lb{display:block;margin-bottom:4px}
.tryapp .tfacts{margin-top:14px;border-left:1px solid rgba(143,179,199,.35);padding-left:14px}
.tryapp .tfacts p{font-size:15px;color:var(--ink);padding:5px 0;line-height:1.55}
.tryapp .ask{font-family:var(--serif);font-size:18px;margin-top:18px;line-height:1.4}
.tryapp .choices{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}
.tryapp .choices .g:disabled{opacity:.4}
.tryapp .choices .g.hit{opacity:1;background:rgba(127,175,153,.2);color:var(--sage);border-color:rgba(127,175,153,.5)}
.tryapp .choices .g.miss{opacity:1;background:rgba(207,160,155,.14);color:var(--rose);border-color:rgba(207,160,155,.5)}
.tryapp .verdict{font-family:var(--serif);font-style:italic;font-size:17px;margin-top:14px}
.tryapp .verdict.hit{color:var(--sage)}.tryapp .verdict.miss{color:var(--rose)}
.tryapp .why{margin-top:6px;font-size:14px;color:var(--mist);line-height:1.7;max-width:52ch}
.tryapp .wink{font-family:var(--serif);font-style:italic;color:var(--gold);margin-top:10px;font-size:15px}
.tryapp .stem{font-family:var(--serif);font-size:20px;line-height:1.45;margin:12px 0 15px}
.tryapp .opt{display:flex;gap:13px;align-items:baseline;width:100%;text-align:left;font:inherit;font-size:14.5px;line-height:1.5;color:var(--ink);background:rgba(255,255,255,.03);border:0;border-radius:10px;padding:12px 14px;margin-bottom:7px;cursor:pointer;transition:background-color .25s,color .25s}
.tryapp .opt:hover:not(:disabled){background:rgba(255,255,255,.06)}.tryapp .opt:disabled{cursor:default}
.tryapp .opt .l{color:var(--steel);font-weight:500;min-width:12px}
.tryapp .opt.correct{background:rgba(127,175,153,.13)}.tryapp .opt.correct .l{color:var(--sage)}
.tryapp .opt.wrong{background:rgba(207,160,155,.13)}.tryapp .opt.wrong .l{color:var(--rose)}
.tryapp .opt.dim{color:var(--dim)}.tryapp .opt.dim .l{color:var(--faint)}
.tryapp .stepnav{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:26px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tryapp .fin{margin-top:18px}
.tryapp .score{display:flex;align-items:baseline;gap:8px}
.tryapp .score b{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1;background-image:linear-gradient(180deg,#8C6F35 0%,#D9BE7C 28%,#F2E6C4 47%,#C9A863 63%,#8A6B32 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tryapp .score span{color:var(--dim);font-size:15px}
.tryapp .fin h1{margin-top:12px}
.tryapp .tcall{margin-top:22px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim);background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.tryapp .tcall .dotg{flex:0 0 7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.tryapp .tcall b{color:var(--steel);font-weight:500}
@media (max-width:420px){.tryapp .vs,.tryapp .two{grid-template-columns:1fr}}

/* Bottom bar: just the Eclipse mark, raised like the app's. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(56px + env(safe-area-inset-bottom,0px));background:rgba(10,12,16,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:.5px solid rgba(255,255,255,.08)}
.bmark{position:absolute;left:50%;top:-26px;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;background:var(--sky);border:.5px solid rgba(255,255,255,.16);box-shadow:0 8px 22px rgba(0,0,0,.55);display:grid;place-items:center;padding:0;cursor:pointer}
.bmark svg{width:140px;height:140px;margin:-37px;pointer-events:none}
.bmark .orb{transform-box:fill-box;transform-origin:center}
.bmark.spin .orb{animation:orb 1.8s linear infinite}
.bmark .badge{position:absolute;top:7px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);opacity:0;transition:opacity .2s}
.bmark.unread .badge{opacity:1}
.bmark.fresh::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold);opacity:0;animation:pulse 2.4s ease-out infinite}
.coach{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--gold);color:#1A1407;font-size:12px;line-height:1.3;padding:8px 12px;border-radius:10px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s}
.coach::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--gold)}
.bmark.fresh .coach{opacity:1}
@keyframes pulse{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
@keyframes orb{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Tutor sheet: slides over the lower part of the screen, so the step or question stays visible above it. */
.scrim{position:fixed;inset:0;z-index:25;background:rgba(10,12,16,.35);opacity:0;pointer-events:none;transition:opacity .25s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
body.open .scrim{opacity:1;pointer-events:auto}
body.open .sheet{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet .in{height:min(66vh,560px);height:min(66dvh,560px);max-width:620px;margin:0 auto;display:flex;flex-direction:column;background:#121923;border:.5px solid rgba(255,255,255,.12);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5);padding:0 max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px))}
.grab{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:10px auto 0}
.shead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:.5px solid var(--line)}
.shead .ctx{min-width:0;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shead .ctx b{color:var(--mist);font-weight:500}
.thread{flex:1;overflow-y:auto;padding:14px 4px 12px;overscroll-behavior:contain;display:grid;align-content:start;gap:12px;font-size:14.5px;color:var(--mist);line-height:1.7}
.thread .intro-line{color:var(--dim)}
.thread .you{color:var(--ink);font-style:italic}.thread .you::before{content:"You: ";color:var(--steel);font-style:normal}
.thread .ans{display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035);animation:rise .4s ease-out}
.thread .ans p{margin:0}
.thread .ans b{color:var(--ink);font-weight:500}.thread .ans ul{margin:0;padding-left:18px}
.thread .sugg{display:flex;flex-wrap:wrap;gap:8px}
.thread .sugg .g{font-size:12.5px;padding:8px 15px}
.thread .think{display:flex;align-items:center;gap:12px;min-height:30px}
.orbmark{width:22px;height:22px;border-radius:50%;background:var(--moon);box-shadow:0 0 0 1.3px var(--steel);position:relative;flex:0 0 auto}
.orbmark::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,rgba(226,196,126,0),rgba(226,196,126,.85) 25%,rgba(226,196,126,0) 45%);-webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px);animation:orb 1.8s linear infinite}
.thread .ph{font-size:13px;letter-spacing:.02em;background:linear-gradient(90deg,#7F8892 0%,#7F8892 40%,#E2C47E 50%,#7F8892 60%,#7F8892 100%) 100% 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2.2s linear infinite}
.note{font-size:12.5px;color:var(--faint)}.note.err{color:var(--rose)}
.note a{color:var(--steel)}
.compose{display:flex;gap:8px;align-items:flex-end;padding:10px 0 12px;border-top:.5px solid var(--line)}
.compose textarea{flex:1;min-width:0;margin:0;font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.05);border:.5px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 14px;min-height:44px;max-height:120px;resize:none;line-height:1.4;outline:none}
.compose textarea::placeholder{color:var(--faint)}
.compose textarea:focus{border-color:rgba(143,179,199,.7)}
.compose textarea:disabled{opacity:.5}
.send{width:44px;height:44px;border-radius:50%;border:0;background:rgba(143,179,199,.95);color:var(--sky);display:grid;place-items:center;flex:0 0 auto;cursor:pointer}
.send:disabled{opacity:.4;cursor:default}
.send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}