/* Cryptathon Learn. Loaded after /assets/site.css (the home page's sheet): same header, footer, lilac hero,
   buttons and colours as the home page. Inside the pages: order slips, race-track laps, drawings and labs.
   Violet means "you" or something you can press. Green and red mean money. Amber marks risk and the sticker. */
:root{
  --indigo:var(--violet); --indigo-hover:#4432d0; --indigo-tint:#f0edff; --indigo-line:#d9d0fc;
  --hairline:var(--line); --hairline-deep:#ddd7ee; --surface:#f8f7fc; --ground:#fff;
  --gain:var(--green); --loss:var(--red); --risk-ink:#8a5300;
  --gutter:20px; --col-narrow:680px; --header-h:85px; --r-sm:10px; --r-md:16px;
}
@media (max-width:850px){:root{--header-h:74px}}
/* site.css draws every <svg> as an outline icon (stroke: currentColor). Learn drawings set their own strokes. */
.learn svg{fill:initial;stroke:none;stroke-width:initial;stroke-linecap:butt;stroke-linejoin:miter}
.learn svg text{stroke:none}
/* site.css has no list reset; Learn lists are styled one by one. */
.learn ol,.learn ul{list-style:none;margin:0;padding:0}
.wrap-narrow{width:min(100% - (var(--gutter) * 2), var(--col-narrow));margin-inline:auto}
.main-nav a[aria-current="page"]{color:var(--violet)}

/* ---------------------------------------------------------------- frame */
.learn{padding:0 0 80px}
.learn a{color:var(--indigo);text-underline-offset:3px}
.learn h2{font-size:clamp(28px,3.4vw,38px);line-height:1.12;max-width:none;letter-spacing:-1.4px;font-weight:800}
.learn h3{font-weight:800}
.learn p,.learn li{line-height:1.65}
.learn .lesson p,.learn-index p{max-width:66ch}
.wrap-wide{width:min(100% - (var(--gutter) * 2), 1040px);margin-inline:auto}

.learn .breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 18px;font-size:14px;font-weight:600;color:var(--muted)}
.learn .breadcrumb li+li::before{content:"\203A";margin-right:8px}
.learn .breadcrumb a{color:var(--muted);text-decoration:none}
.learn .breadcrumb a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- hero */
.learn > .hero{padding:0;border-bottom:1px solid #dcd5f0}
.hero-inner{width:min(1180px, calc(100% - 48px));margin-inline:auto;padding:32px 0 40px;display:grid;gap:28px;align-items:center}
.hero h1{font-size:clamp(50px,7vw,84px);line-height:1;letter-spacing:-3.6px;margin-top:6px;max-width:none}
.hero .deck{margin-top:16px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--muted);max-width:36ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px !important}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border:1px solid #d9d0fc;border-radius:7px;background:#e4defe;font-size:13px;font-weight:650}
@media (min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;padding:56px 0}
  .hero-text{order:2}
  .hero-module .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-module .hero-text{order:0}
}
.hero-hub:not(.hero-start) .hero-inner{grid-template-columns:minmax(0,1fr)}
.hero-hub .deck{max-width:46ch}
@media (min-width:900px){.hero-start .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.hero-start h1{font-size:clamp(46px,6vw,76px)}

/* Hero art: orbit rings, the violet star and a yellow sticker (the home page's language) around a flat drawing of
   the page's idea. No phone frames: the drawing can be any shape. */
.lx-art{position:relative;isolation:isolate;max-width:580px;width:100%;margin-inline:auto;padding:36px 12px 24px}
.lx-orbit{position:absolute;border:1px solid #d6cef3;border-radius:50%;z-index:-1;pointer-events:none}
.lx-orbit-a{width:520px;height:520px;left:50%;top:50%;margin:-260px 0 0 -260px}
.lx-orbit-b{width:380px;height:380px;left:50%;top:50%;margin:-190px 0 0 -190px}
.lx-idea{margin:0}
.lx-idea svg{display:block;width:100%;height:auto}
.lx-spark{position:absolute;right:0;top:-6px;font-size:72px;line-height:1;color:var(--violet);transform:rotate(10deg)}
.lx-sticker{position:relative;width:fit-content;max-width:300px;margin:18px 0 0 4px !important;padding:12px 18px;background:var(--amber);border:1px solid #e9b349;border-radius:12px;box-shadow:3px 5px 0 #d7cbec;transform:rotate(-4deg);font-size:15px;font-weight:700;line-height:1.35}
/* On a phone the title comes first; the art follows. */
@media (max-width:899px){.hero-text{order:-1}}
@media (max-width:600px){
  .lx-art{padding:28px 0 16px}
  .lx-orbit-a{width:340px;height:340px;margin:-170px 0 0 -170px}
  .lx-orbit-b{width:240px;height:240px;margin:-120px 0 0 -120px}
  .lx-spark{font-size:52px;top:-4px}
  .lx-sticker{font-size:14px;max-width:260px;padding:10px 14px}
}
.learn-screen a:hover .lc rect,.learn-screen a:focus-visible .lc rect{fill:var(--violet)}
.lc line{stroke-width:1.5}
.lc.lit line{stroke:var(--green)}.lc.lit rect{fill:var(--green)}
.lc.soon line{stroke:#d9d0fc}.lc.soon rect{fill:#fff;stroke:#c9c0ec;stroke-width:1.2;stroke-dasharray:2.5 2.5}

/* ---------------------------------------------------------------- lap (one module = one lap of a running track) */
.lap{width:100%;height:auto;display:block}
.lap-lane{fill:#fbfaff;stroke:#e9e4fb;stroke-width:28}
.lap-lane-in{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:6 8}
.lap-line{fill:none;stroke:#d6cef3;stroke-width:1.5}
.lap-start{stroke:var(--ink);stroke-width:3}
.cp circle{fill:var(--ground);stroke:var(--hairline-deep);stroke-width:2}
.cp-hit{fill:#fff;fill-opacity:0}
.cp text{font:800 13px Archivo,Arial,sans-serif;fill:var(--muted)}
.cp.on circle{stroke:var(--ink)}
.cp.on text{fill:var(--ink)}
.cp.now circle{fill:var(--indigo);stroke:var(--indigo)}
.cp.now text{fill:#fff}
.lap a:hover .cp circle,.lap a:focus-visible .cp circle{stroke:var(--indigo);stroke-width:3}

/* ---------------------------------------------------------------- lesson grid */
.learn-grid{width:min(100% - (var(--gutter) * 2), 1040px);margin-inline:auto;display:grid;gap:24px;padding-top:28px}
.lesson{max-width:var(--col-narrow);width:100%;min-width:0}
.rail{order:-1}
.rail-box{border:1px solid var(--hairline);border-radius:var(--r-md);padding:12px 14px;background:var(--ground)}
.rail-box summary{cursor:pointer;font-weight:800;font-size:15px;line-height:24px;padding:10px 0}
.rail-box .lap{margin:10px 0 4px}
@media (min-width:1024px){
  .learn-grid{grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start;padding-top:40px}
  .rail{order:0;position:sticky;top:calc(var(--header-h) + 20px)}
  .rail-box summary{pointer-events:none;list-style:none}
  .rail-box summary::-webkit-details-marker{display:none}
}

/* Lesson lists: a lane, the number in a checkpoint. */
.lesson-list{margin-top:14px;display:grid;gap:0;position:relative}
.ll{position:relative}
.ll a,.ll.soon{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;padding:10px 8px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.ll a:hover{background:var(--indigo-tint)}
.ll a[aria-current="page"]{background:var(--indigo-tint)}
.ll-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);font-size:13px;font-weight:800;align-self:start}
.ll.soon .ll-n{border-color:var(--hairline-deep);color:var(--muted)}
.ll a[aria-current="page"] .ll-n{background:var(--indigo);border-color:var(--indigo);color:#fff}
.ll-t{font-weight:700}
.ll-s{grid-column:2;color:var(--muted);font-size:14px;line-height:1.45}
.ll-m{color:var(--muted);font-size:13px;white-space:nowrap}
.ll.soon{color:var(--muted)}
.ll.opened .ll-t::after{content:" \2713";color:var(--muted);font-weight:600}
.rail .ll-s{display:none}
.rail .ll a,.rail .ll.soon{grid-template-columns:28px minmax(0,1fr) auto;align-items:center;min-height:44px;padding:6px 4px;font-size:15px}
.rail .ll-n{width:24px;height:24px;font-size:12px}

/* ---------------------------------------------------------------- goals and parts */
.goals h2{font-size:20px}
.goals ol{margin-top:12px;display:grid;gap:8px}
.goals a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--hairline-deep);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-weight:600;line-height:1.4}
.goals a:hover{border-color:var(--indigo);background:var(--indigo-tint)}
.goal-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);font-weight:800;font-size:13px}

.part{margin-top:56px;padding-top:0}
.part > p,.part > ul,.part > ol{margin-top:14px}
.part > ul,.part > ol{padding-left:22px}
.part > ul{list-style:disc}
.part > ol{list-style:decimal}
.part-n{margin:0 0 6px !important;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:700}
.part-n span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:800}

/* ---------------------------------------------------------------- worked example: an order slip */
.slip{
  --tear:8px;
  margin-top:24px;padding:26px 20px 24px;background:var(--surface);position:relative;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(var(--tear) * 2) var(--tear) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(var(--tear) * 2) var(--tear) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - var(--tear) * 2) no-repeat;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(var(--tear) * 2) var(--tear) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(var(--tear) * 2) var(--tear) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - var(--tear) * 2) no-repeat;
}
.slip-head{padding-bottom:12px;border-bottom:2px dashed var(--hairline-deep)}
.slip-kicker{display:block;color:var(--muted);font-size:13px;font-weight:700}
.slip h3{margin-top:2px;font-size:22px}
.slip-problem{margin-top:14px !important}
.slip-steps{margin-top:14px;display:grid}
.slip-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;padding:14px 0;border-top:1px dashed var(--hairline-deep)}
.slip-n{grid-row:span 2;color:var(--muted);font-weight:800;font-size:15px;line-height:1.5}
.slip-do{display:grid;gap:2px}
.slip-do span{color:var(--muted);font-size:15px;line-height:1.5}
.slip-math{grid-column:2;font-size:clamp(19px,2.4vw,23px);font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
@media (min-width:640px){
  .slip{padding:30px 28px 26px}
  .slip-steps li{grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline}
  .slip-n{grid-row:auto}
  .slip-math{grid-column:3;text-align:right;white-space:nowrap}
  /* A long sum goes on its own row under the step, so the explanation keeps its width. */
  .slip-stack .slip-steps li .slip-math{grid-column:2 / 4;text-align:left;white-space:normal}
}
.slip-total{display:grid;gap:6px;margin-top:4px !important;padding-top:16px;border-top:3px double var(--ink);max-width:none !important}
.slip-total span{font-size:13px;font-weight:700;color:var(--muted)}
.slip-total strong{font-size:18px;line-height:1.45}

/* ---------------------------------------------------------------- figures */
.fig{margin:24px 0 0;padding:22px 20px 16px;background:var(--lilac);border-radius:var(--r-md)}
.fig svg{width:100%;max-width:560px;height:auto;margin-inline:auto}
.fig-phone{display:none}
@media (max-width:600px){
  .fig-wide{display:none}
  .fig-phone{display:block}
  .fig{padding:16px 14px 14px}
}
.fig figcaption{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.5}
.fig-n{font-weight:800;color:var(--ink)}

/* ---------------------------------------------------------------- term tag: a price-tag shape with a punched hole */
.termtag{position:relative;margin-top:24px;padding:16px 18px 16px 44px;background:var(--indigo-tint);border:1px solid var(--indigo-line);border-radius:6px 16px 16px 6px}
.termtag::before{content:"";position:absolute;left:16px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--ground);border:2px solid var(--indigo-line)}
.termtag p{margin:0 !important}
.termtag-term{font-size:18px;font-weight:800;letter-spacing:-.01em}
.termtag-def{margin-top:4px !important}
.termtag-formula{margin-top:10px !important;display:inline-block;padding:6px 12px;border-radius:8px;background:var(--ground);border:1px solid var(--indigo-line);font-weight:800}

/* ---------------------------------------------------------------- questions: rounded choice buttons, home-page style */
.lq{margin:26px 0 0;padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.lq legend{padding:0;font-weight:800;font-size:18px;line-height:1.45;float:left;width:100%;letter-spacing:-.2px}
.lq-kicker{display:flex;width:fit-content;align-items:center;gap:6px;margin:0 0 10px;padding:3px 9px;border-radius:7px;background:#e4defe;border:1px solid #d9d0fc;color:var(--ink);font-size:12px;font-weight:650}
.lq-kicker::before{content:"\2733";color:var(--violet);font-size:14px}
.lq-choices{clear:both;list-style:upper-alpha;padding-left:24px;margin-top:12px}
.lq-choices li{margin-top:6px}
.lq-why{margin-top:2px !important;color:var(--muted);font-size:15px}
.lq-answer{margin-top:12px}
.lq-answer summary{cursor:pointer;color:var(--violet);font-weight:700}
.lq-result{margin-top:12px !important;font-weight:800;font-size:16px}
.lq-result:empty{display:none}
.lq.js .lq-choices{list-style:none;padding:0;display:grid;gap:10px}
.lq.js .lq-why,.lq.js .lq-answer{display:none}
.lq.js .lq-choices button{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;width:100%;
  min-height:52px;padding:10px 14px;text-align:left;cursor:pointer;font-weight:650;line-height:1.4;
  background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;
  transition:background .18s,border-color .18s,transform .18s;
}
.lq.js .lq-choices button:hover:not(:disabled){border-color:var(--violet);background:var(--lilac);transform:translateY(-1px)}
.lq.js .lq-choices button:disabled{cursor:default;color:var(--muted)}
.lq-letter{width:30px;height:30px;border-radius:9px;background:var(--lilac);border:1px solid #d9d0fc;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--violet)}
.lq.js li.picked button:disabled{border-color:var(--ink);color:var(--ink)}
.lq.js li.right button:disabled{border-color:var(--green);color:var(--ink);background:#eef8f2}
.lq.js li.right .lq-letter{background:var(--green);border-color:var(--green);color:#fff}
.lq.js li.picked:not(.right) .lq-letter{background:var(--ink);border-color:var(--ink);color:#fff}
.lq.js li.shown .lq-why{display:block;padding:8px 2px 0 44px}
@media (prefers-reduced-motion:reduce){.lq.js .lq-choices button{transition:none}}
.check > p{color:var(--muted)}

/* ---------------------------------------------------------------- lab: a light app panel */
.lab{margin-top:28px;padding:20px;border-radius:20px;background:#fff;border:1px solid #d9d0fc;box-shadow:6px 19px 20px #32205b0d,15px 38px 58px #32205b0d}
.lab-kicker{display:inline-flex;align-items:center;gap:6px;margin:0 !important;padding:3px 9px;border-radius:7px;background:var(--amber);border:1px solid #e9b349;font-size:12px;font-weight:700}
.lab-caption{margin-top:10px !important;color:var(--muted)}
.lab-stage{margin-top:12px}
.lab:not(.ready) .lab-stage{display:none}
.lab-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.lab-label{width:100%;font-size:14px;font-weight:700;color:var(--muted)}
.lab .seg{min-height:44px;min-width:58px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:750;cursor:pointer;transition:background .18s,border-color .18s}
.lab .seg:hover{border-color:var(--violet)}
.lab .seg[aria-pressed="true"]{background:var(--violet);color:#fff;border-color:var(--violet)}
.lab .seg:focus-visible,.lab input:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.lab input[type=range]{width:100%;accent-color:var(--violet);height:44px;margin:0}
.lab-move{font-size:22px;font-weight:850}
.lab-read{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.lab-read div{padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.lab-read dt{font-size:13px;line-height:1.3;color:var(--muted);font-weight:650}
.lab-read dd{margin:6px 0 0;line-height:1.15;font-size:19px;font-weight:850;letter-spacing:-.3px}
.lab .up{color:var(--green)} .lab .down{color:var(--red)} .lab .risk{color:var(--risk-ink)}
.lab-meter{position:relative;height:36px;margin-top:16px;border-radius:10px;background:var(--lilac);border:1px solid #d9d0fc;overflow:hidden}
.lab-meter-fill{position:absolute;left:0;top:0;bottom:0;background:#c9bffa;transition:width 160ms ease-out}
.lab-meter-text{position:relative;line-height:36px;padding:0 12px;font-weight:750;font-size:14px}
.lab-say{margin-top:14px !important;min-height:3.2em}
.lab-liq{display:inline-block;padding:8px 12px;border-radius:10px;background:#fff6dc;border:1px solid #e9b349;color:var(--ink);font-weight:700}
@media (min-width:640px){.lab{padding:26px}.lab-read{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.lab-meter-fill{transition:none}}

/* ---------------------------------------------------------------- practise: a lilac panel like the home hero */
.practise{position:relative;overflow:hidden;isolation:isolate;margin-top:56px;padding:28px 24px;border-radius:20px;background:var(--lilac);border:1px solid #dcd5f0;display:grid;gap:18px}
.practise::before,.practise::after{content:"";position:absolute;border:1px solid #d6cef3;border-radius:50%;z-index:-1}
.practise::before{width:340px;height:340px;right:-90px;top:-120px}
.practise::after{width:220px;height:220px;right:-30px;top:-60px}
.practise .practise-title{margin:0 !important;font-size:clamp(26px,3.4vw,34px);font-weight:850;letter-spacing:-1.4px}
.practise p{color:var(--muted)}
.practise-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.practise .button{color:#fff}
.practise .browser-link{text-decoration:none}
@media (min-width:760px){.practise{padding:36px 38px}}

/* ---------------------------------------------------------------- recap, related, next */
.remember{margin-top:56px;padding:24px;border-radius:var(--r-md);background:var(--surface)}
.remember ol{margin-top:14px;display:grid;gap:12px;counter-reset:r}
.remember li{display:grid;gap:2px;padding-left:40px;position:relative;counter-increment:r}
.remember li::before{content:counter(r);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:800}
.remember li a{font-weight:800;color:var(--ink)}
.related{margin-top:24px !important;color:var(--muted)}
.next-card{display:grid;gap:2px;margin-top:20px;padding:18px 20px;border:1.5px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink) !important;transition:border-color .18s,transform .18s}
.next-card span{color:var(--muted);font-size:14px;font-weight:700}
.next-card strong{font-size:22px;letter-spacing:-.02em}
.next-card:hover{border-color:var(--violet);transform:translateY(-2px)}

/* ---------------------------------------------------------------- hub and module */
.learn-index{padding-top:32px}
.hub-module{display:grid;gap:20px;margin-top:40px;padding-bottom:40px;border-bottom:1px solid var(--hairline)}
.hub-module h2 a{color:var(--ink);text-decoration:none}
.hub-module h2 a:hover{color:var(--indigo)}
.hub-lap{max-width:520px}
@media (min-width:900px){.hub-module{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}.hub-lap{position:sticky;top:calc(var(--header-h) + 24px)}}
.hero-lap{max-width:560px}
.hub-glossary{margin-top:36px !important;font-weight:600}

/* ---------------------------------------------------------------- glossary */
.az{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.az a{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #d9d0fc;border-radius:9px;text-decoration:none;font-weight:800;color:var(--ink);background:var(--ground)}
.az a:hover{border-color:var(--violet);color:var(--violet)}
.gl-letter{margin-top:36px}
.gl-letter h2{font-size:42px;letter-spacing:-.04em}
.gl-term{padding:16px 0;border-top:1px solid var(--hairline)}
.gl-term dt{font-weight:800;font-size:19px;letter-spacing:-.01em}
.gl-term dd{margin:4px 0 0;line-height:1.6}
.gl-link{display:inline-block;margin:2px 0 0;font-size:14px;font-weight:700}
.gl-term:target{background:var(--indigo-tint);margin-inline:-12px;padding-inline:12px;border-radius:var(--r-sm)}

/* Text inside a lap */
.lap-title{font:800 22px Archivo,Arial,sans-serif;fill:var(--ink);letter-spacing:-.6px}
.lap-sub{font:600 14px Archivo,Arial,sans-serif;fill:var(--muted)}

/* AEO: the direct answer under the title, the updated line and Common questions */
.lx-answer{margin:0 0 28px !important;padding:16px 20px;border-left:4px solid var(--violet);background:var(--lilac);border-radius:0 var(--r-md) var(--r-md) 0;font-size:18px;line-height:1.6;font-weight:550;max-width:none !important}
.lesson-updated{margin-top:14px !important;color:var(--muted);font-size:13px;font-weight:600}
.faq-item{margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md)}
.faq-item h3{font-size:18px;letter-spacing:-.2px}
.faq-item p{margin-top:6px !important}

/* ---------------------------------------------------------------- calculator lab and tool pages */
.lab-fields{display:grid;gap:12px;margin-top:16px}
.lab-field{display:grid;gap:6px}
.lab-field input{min-height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:18px;font-weight:750;width:100%}
.lab-field input:hover{border-color:var(--violet)}
.lab-field input[aria-invalid="true"]{border-color:var(--red)}
.lab-read .lab-wide{grid-column:1 / -1}
.lab-read .lab-main{grid-column:1 / -1;background:#fff6dc;border-color:#e9b349}
.lab-read .lab-main dd{font-size:28px}
@media (min-width:640px){.lab-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.learn-tool .lab-read{grid-template-columns:repeat(2,minmax(0,1fr))}}
.learn-tool{padding-top:28px}
.tool-related,.hub-tools{margin-top:48px}
.tool-related ul,.hub-tools ul{display:grid;gap:10px;margin-top:14px}
.tool-related .next-card,.hub-tools .next-card{margin-top:0}
.hub-tools .next-card em{font-style:normal;color:var(--muted);font-size:15px;line-height:1.5}