/* Hero slider (owner 2026-10-22 15:00: "I want it more like a sliding carousel, like a sliding thing").
   The six app sheets sit in one row that slides sideways forever, edges fading into the page.
   slider.js turns the #wheel markup into .slider > .slider-track (the sheets twice, for a seamless loop).
   Hover pauses it; prefers-reduced-motion stops it and lets the row scroll by hand. Decorative: aria-hidden. */
.slider{position:relative;width:100vw;left:50%;margin:40px 0 0 -50vw;overflow:hidden;padding:28px 0 56px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.slider-track{display:flex;gap:28px;width:max-content;align-items:flex-start;
  animation:slider-move var(--slide-time,60s) linear infinite;will-change:transform}
.slider:hover .slider-track{animation-play-state:paused}
@keyframes slider-move{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 14px))}}
.slider .wheel-card{flex:0 0 auto;width:340px;margin:0;text-align:left;box-sizing:border-box;
  background:#fff;border:1px solid rgba(18,22,20,.08);border-radius:var(--radius-l,16px);
  box-shadow:0 1px 2px rgba(18,22,20,.06),0 14px 34px -14px rgba(18,22,20,.24);
  transition:transform .35s ease,translate .35s ease,scale .35s ease,rotate .35s ease,box-shadow .35s ease}
.slider .wheel-card:hover{translate:0 -6px;box-shadow:0 1px 2px rgba(18,22,20,.06),0 24px 48px -18px rgba(18,22,20,.3)}
.slider .wheel-card:nth-child(odd){margin-top:22px}
@media (max-width:720px){.slider .wheel-card{width:270px}.slider-track{gap:18px}.slider{padding-bottom:36px}}
@media (prefers-reduced-motion:reduce){.slider-track{animation:none}.slider{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
html.dark .slider .wheel-card{background:var(--card,#16201b);border-color:rgba(255,255,255,.08)}
/* card insides, carried over from the ring (carousel.css lines 54-75) */
.slider .wheel-card.hv-q,.slider .wheel-card.hv-nova{padding:20px}
.slider .hv-q .qtext{font-size:16px}
.slider .hv-q .opt{padding:10px 12px;font-size:14px}
.slider .hv-nova .bubble{font-size:13.5px}
.slider .hv-nova .composer{margin:auto -20px -20px;padding:12px 16px}
.slider .hv-nova .suggest{margin-bottom:16px}
.slider .hv-course .hv-path{padding:14px 16px 18px}
.slider .wc-app .app-bar,.slider .wc-app .exam-bar{padding:14px 18px}
.slider .wc-body{display:flex;flex-direction:column;flex:1;padding:14px 18px 18px}
.slider .wc-prompt{margin:0;font:500 13.5px/1.55 var(--font);color:var(--text)}
.slider .wc-app .math{font-size:15px}
.slider .wc-app .graph{display:block;width:100%;height:auto;margin-top:12px}
.slider .wc-app .actions{margin-top:auto;padding-top:14px}
.slider .amc .qtext{margin-top:0;font-size:13px;line-height:1.5}
.slider .amc-opts{gap:5px;margin-top:auto;padding-top:12px}
.slider .wc-src{margin:12px 0 0;font:500 12px/1.4 var(--font);color:var(--muted)}
.slider .exam-opts{grid-template-columns:1fr 1fr;gap:8px}
.slider .exam-opts .opt{padding:9px 10px}
.slider .exam-foot{margin-top:auto;padding-top:12px}
.slider .wc-check{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font:500 13px/1 var(--font)}
/* one even row: every sheet the same height, content from the top, no zig-zag */
.slider .wheel-card{height:440px;overflow:hidden;display:flex;flex-direction:column}
.slider .wheel-card:nth-child(odd){margin-top:0}
.slider-track{align-items:stretch}
.wheel-slider{margin-top:8px}
@media (max-width:720px){.slider .wheel-card{height:400px}}
/* the old hero rules offset some sheets (top:64px / 356px); in the row they all sit level */
.slider .wheel-card{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;height:470px}
@media (max-width:720px){.slider .wheel-card{height:420px}}
/* tilt (owner 15:00: "I want a tilt like a carousel"): the sliding row is seen a little from above and curves away
   at both ends like the inside of a carousel drum; slider.js turns each sheet by how far it is from the centre */
.slider{perspective:1500px;perspective-origin:50% 30%}
.slider-track{transform-style:preserve-3d}
.slider-tilt{transform:rotateX(7deg);transform-style:preserve-3d}
.slider .wheel-card{transform-origin:50% 50%;will-change:transform}
.slider .wheel-card:hover{transform:none;translate:none;scale:none;rotate:none}
/* owner 15:12: keep sliding while the cursor is on it */
.slider:hover .slider-track{animation-play-state:running!important}
/* owner 15:20: no flash of the raw cards on first load: until slider.js has built the row, keep the space and show
   nothing; then fade the row in */
#wheel:not(.wheel-slider){min-height:594px}
#wheel:not(.wheel-slider) .wheel-stage{display:none}
.wheel-slider .slider{animation:slider-in .6s ease both}
@keyframes slider-in{from{opacity:0}to{opacity:1}}
@media (max-width:720px){#wheel:not(.wheel-slider){min-height:524px}}
/* zoomed out / very wide screens (owner 17:05: "when I zoom out stuff breaks"): the strip used the full window width,
   so a dozen sheets showed and the outer ones were stretched by the perspective. It now stays at most 1680px wide,
   centred, with the same fades at both ends. */
.slider{width:min(100vw,1680px);left:50%;margin-left:calc(min(100vw,1680px) / -2)}
/* phones (owner 2026-10-25 13:40, Android screenshot: "cards huge, run off both edges, a card cut at left and right"):
   at 600px and below the sliding row becomes a calm deck. One sheet at a time, about 78% of the screen wide, centred,
   with the next sheet peeking out behind it. Every 4.5 s the front sheet fades and drifts left while the next one comes
   forward. Same sheets, same slight look from above. slider.js adds .is-deck and moves the .is-on / .is-next / .is-off
   classes. Desktop and tablets keep the sliding row. Reduced motion: the first sheet stays still. */
@media (max-width:600px){
  #wheel:not(.wheel-slider){min-height:520px}
  .slider.is-deck{width:100%;left:auto;margin:20px 0 0;padding:34px 0 0;overflow:visible;
    -webkit-mask-image:none;mask-image:none;perspective:1400px;perspective-origin:50% 20%}
  .slider.is-deck .slider-tilt{transform:rotateX(5deg)}
  .slider.is-deck .slider-track{position:relative;width:min(78vw,340px);height:420px;margin:0 auto;gap:0;
    animation:none;transform:none}
  .slider.is-deck .wheel-card{position:absolute!important;top:0!important;left:0!important;right:0!important;
    width:auto;height:420px;margin:0;opacity:0;z-index:0;visibility:hidden;
    transform:translateX(22px) scale(.96);
    transition:opacity .9s ease,transform 1.2s cubic-bezier(.22,.61,.36,1),visibility 0s linear 1.2s}
  .slider.is-deck .wheel-card.is-clone{display:none}
  .slider.is-deck .wheel-card.is-on{opacity:1;z-index:2;visibility:visible;transform:none;transition-delay:0s}
  .slider.is-deck .wheel-card.is-next{opacity:.9;z-index:1;visibility:visible;transform:translateY(-36px) scale(.9);transition-delay:0s}
  .slider.is-deck .wheel-card.is-off{opacity:0;z-index:3;visibility:hidden;transform:translateX(-26px) scale(.97);transition-duration:.7s,1.2s,0s;transition-delay:0s,0s,1.2s}
  .slider.is-deck .wheel-card:hover{translate:none}
  /* only the front sheet shows its contents: the sheet behind is blank paper, so two sheets' text never mix while
     they cross. The outgoing contents fade first, the incoming ones follow. */
  .slider.is-deck .wheel-card>*{transition:opacity .7s ease .4s}
  .slider.is-deck .wheel-card:not(.is-on)>*{opacity:0;transition-duration:.4s;transition-delay:0s}
  .slider-dots{display:none}
  .slider.is-deck+.slider-dots{display:flex;justify-content:center;gap:8px;margin:22px 0 0}
  .slider-dots i{width:6px;height:6px;border-radius:50%;background:rgba(18,22,20,.16);transition:background .6s ease,width .6s ease}
  .slider-dots i.on{width:18px;border-radius:3px;background:rgba(18,22,20,.55)}
  html.dark .slider-dots i{background:rgba(255,255,255,.16)}
  html.dark .slider-dots i.on{background:rgba(255,255,255,.6)}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .slider.is-deck{overflow:visible}
  .slider.is-deck .wheel-card,.slider.is-deck .wheel-card>*,.slider-dots i{transition:none}
}
/* owner 2026-10-26 19:40 (screenshots 42, 43: "Its cut off. Also shadow does some weird flickering when I scroll.
   When I switch between large and small, I get the white stuff").
   Cut off: the sheets had a fixed height (470px row, 420px deck) and the graph sheet is taller than that, so its
   Check / Give Up buttons were cut. Every sheet is now as tall as the tallest one, measured by the layout itself:
   the row stretches its sheets, and the deck stacks its sheets in one grid cell instead of absolute positions.
   Flicker and white stuff: the deck sat inside a 3D scene (perspective + rotateX), where z-index does not count and
   the browser sorts sheets in the same plane by depth, so the sheet behind and its shadow could be drawn over the
   front sheet, changing from frame to frame. The deck is now flat, so the front sheet is always in front.
   Switching size also faded all six sheets through each other for a second (opacity and transform transitions);
   slider.js now switches with transitions off for one frame (.is-snap). */
.slider .wheel-card{height:auto}
@media (max-width:600px){
  #wheel:not(.wheel-slider){min-height:548px}
  .slider.is-deck{perspective:none}
  .slider.is-deck .slider-tilt{transform:none;transform-style:flat}
  .slider.is-deck .slider-track{display:grid;height:auto;transform-style:flat}
  .slider.is-deck .wheel-card{position:relative!important;grid-area:1/1;height:auto}
}
.slider.is-snap .wheel-card,.slider.is-snap .wheel-card>*{transition:none!important}