/* ============================================================================
   AevenSpace hero simulation — v2

   A live replica of the real app, driven by assets/hero-sim.js. It reuses the
   landing page's Organic tokens (--color-accent-*, fonts, shadows) so it reads
   as the production UI running rather than a mock of it.

   Motion rules for this file:
     · Anything the engine animates frame-by-frame (bars, rings, the pointer,
       dragged blocks) has NO transition here — a CSS duration fighting a rAF
       loop is the classic source of stutter.
     · Anything toggled by a class uses a spring-shaped cubic-bezier, not a
       linear or ease. --sp is the standard settle; --sp-soft is for surfaces
       that come to rest under something else.
     · Everything animated is transform/opacity, so no frame costs layout.
   ============================================================================ */

:root {
  --sp: cubic-bezier(.22, 1, .3, 1);
  --sp-soft: cubic-bezier(.16, 1, .3, 1);
  --sp-back: cubic-bezier(.34, 1.42, .5, 1);
}

#hero-sim {
  position: relative;
  /* clears the hero buttons — without it the frame's top edge sits directly
     against them, and the shadow reads as if the two are stuck together */
  margin-top: 56px;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg);
  min-height: 624px;
  font-family: var(--font-body);
  color: var(--color-text);
  /* The frame leans toward a real pointer for depth. No transition: the tilt
     is driven by a spring in the rAF loop, and a CSS duration on top of it
     means the browser eases toward a target that moves sixty times a second —
     fighting the loop instead of smoothing it. will-change is applied by the
     script when the tilt is actually active. */
  transform: perspective(1800px) rotateX(0deg) rotateY(0deg);
}
#hero-sim * { box-sizing: border-box; }

/* ── the frame: rail · stage · aeven ─────────────────────────────────────── */
.hs-frame { display: flex; min-height: 624px; position: relative; }

.hs-rail {
  width: 64px; flex: none; background: var(--color-surface);
  display: flex; flex-direction: column; align-items: center; padding: 18px 0; gap: 8px;
}
.hs-rail-logo { display: inline-flex; flex: none; margin-bottom: 8px; }
.hs-rail-item {
  width: 40px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  color: rgba(32,30,29,.65); cursor: default; position: relative;
  transition: color 0.2s var(--sp), transform 0.267s var(--sp);
}
.hs-rail-item svg { width: 20px; height: 20px; stroke-width: 2.6; position: relative; }
/* The active pill is a scaled pseudo-element rather than a background colour
   swap, so switching screens has the pill grow into place instead of blinking
   from one icon to the next. */
.hs-rail-item::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: var(--color-accent);
  opacity: 0; transform: scale(.6);
  transition: opacity 0.213s var(--sp), transform 0.28s var(--sp-back);
}
.hs-rail-item.on { color: var(--color-bg); }
.hs-rail-item.on::before { opacity: 1; transform: none; }

/* main stage — screens exchange with depth */
.hs-stage { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.hs-screen {
  position: absolute; inset: 0; padding: 30px 40px; display: flex; flex-direction: column;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.985);
  transition: opacity 0.227s ease, transform 0.347s var(--sp), filter 0.227s ease;
  pointer-events: none; filter: blur(3px);
  will-change: transform, opacity;
}
.hs-screen.on { opacity: 1; transform: none; filter: none; }
/* The outgoing screen recedes rather than simply fading — depth, so the
   exchange reads as one surface passing behind another. */
.hs-screen.out { opacity: 0; transform: translate3d(0, -10px, 0) scale(1.015); filter: blur(5px); }
/* Only the screen actually in flight carries a layer. */
.hs-screen:not(.on):not(.out) { will-change: auto; }

/* right Aeven rail */
.hs-aeven {
  width: 280px; flex: none; background: var(--color-surface); padding: 22px;
  display: flex; flex-direction: column; overflow: hidden;
  transition: width 0.32s var(--sp), padding 0.32s var(--sp), opacity 0.2s ease;
}
/* Retired while the AI screen is open — see show() in hero-sim.js. */
.hs-frame.hs-no-side .hs-aeven { width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
.hs-aeven-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.hs-aeven-orb {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; flex: none;
}
.hs-aeven-orb svg { width: 24px; height: 24px; display: block; }
.hs-aeven-orb.thinking { animation: hsBreathe 1.5s ease-in-out infinite; }
.hs-aeven-name { font: 400 17px/1 var(--font-heading); }
.hs-aeven-kbd { margin-left: auto; font: 600 10px/1 var(--font-body); letter-spacing: .12em; color: rgba(32,30,29,.65); }
/* Reserve the tallest line this ever streams (~4 wrapped lines at 280px) so
   the card below never shifts as tokens arrive. */
.hs-aeven-stream {
  font: 400 14px/1.55 var(--font-body); color: rgba(32,30,29,.8);
  margin: 0 0 16px; min-height: 88px;
}
/* The caret lives on the streaming node itself, so it sits at the end of the
   text without needing an element the token loop has to keep re-appending. */
.hs-aeven-stream.streaming::after,
.hs-bubble--ai p.streaming::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  background: var(--color-accent-2-700); margin-left: 2px; vertical-align: -2px;
  animation: hsBlink 1.05s step-end infinite;
}
.hs-aeven-card {
  background: var(--color-bg); border-radius: 20px; padding: 15px 17px; margin-top: 4px;
  opacity: 0; transform: translate3d(0,10px,0) scale(.97);
  box-shadow: 0 0 0 rgba(46,43,37,0);
  transition: opacity 0.28s ease, transform 0.367s var(--sp), box-shadow 0.333s ease;
}
.hs-aeven-card.show { opacity: 1; transform: none; box-shadow: 0 6px 20px -12px rgba(46,43,37,.4); }
.hs-aeven-kicker { font: 600 10px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-2-700); }
.hs-aeven-card p { font: 400 13px/1.5 var(--font-body); margin: 9px 0 0; min-height: 2.6em; }
.hs-aeven-note {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  background: var(--color-bg); border-radius: 999px; padding: 9px 9px 9px 15px;
}
.hs-aeven-note span { flex: 1; font: 400 13px/1.4 var(--font-body); color: rgba(32,30,29,.65); }
.hs-aeven-note b {
  width: 28px; height: 28px; border-radius: 999px; background: var(--color-accent-2-600);
  display: grid; place-items: center; color: #f5ead8; flex: none;
}

/* ── shared type ─────────────────────────────────────────────────────────── */
.hs-eyebrow { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 12px; }
.hs-greet { font: 400 44px/1.02 var(--font-heading); letter-spacing: -.03em; margin: 0 0 6px; }
.hs-lede { font: 400 18px/1.45 var(--font-body); color: rgba(32,30,29,.68); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════════════════ */
.hs-today-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.hs-today-head > div:first-child { flex: 1; min-width: 0; }

/* progress ring — the fill is driven by stroke-dashoffset from a spring, so
   no transition here or the two would fight. */
.hs-ring-wrap { position: relative; width: 96px; height: 96px; flex: none; }
.hs-ring { width: 96px; height: 96px; transform: rotate(-90deg); display: block; }
.hs-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.hs-ring-track { stroke: rgba(32,30,29,.1); }
.hs-ring-fill { stroke: var(--color-accent); }
.hs-ring-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.hs-ring-n { font: 400 26px/1 var(--font-heading); letter-spacing: -.02em; }
.hs-ring-l { font: 600 9px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(32,30,29,.55); }

.hs-prios { border-top: 1px solid rgba(32,30,29,.14); }
.hs-prio {
  display: flex; align-items: center; gap: 16px; padding: 16px 8px;
  border-bottom: 1px solid rgba(32,30,29,.1); position: relative;
  transition: background 0.267s ease, opacity 0.333s ease, transform 0.367s var(--sp);
}
/* Hover is a lift plus a hairline of light down the leading edge — the row
   responds to being pointed at rather than just changing colour. */
.hs-prio::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 999px; background: var(--color-accent);
  opacity: 0; transform: scaleY(.3); transform-origin: center;
  transition: opacity 0.2s var(--sp), transform 0.28s var(--sp);
}
.hs-prio.hover { background: rgba(32,30,29,.028); }
.hs-prio.hover::before { opacity: .8; transform: none; }
.hs-prio.now { background: var(--color-accent-100); }
.hs-prio.done { opacity: .5; }
.hs-prio.leaving { opacity: 0; transform: translate3d(28px,0,0); }
.hs-check {
  width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(32,30,29,.3);
  flex: none; display: grid; place-items: center; position: relative;
  transition: background 0.187s var(--sp), border-color 0.187s var(--sp), transform 0.267s var(--sp-back);
}
.hs-prio.hover .hs-check { transform: scale(1.08); }
.hs-prio.now .hs-check { border-color: var(--color-accent); }
.hs-check.checked { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1); }
/* The tick draws itself in with a back-eased scale — a completion should feel
   like a small reward, not a colour swap. */
.hs-check svg { opacity: 0; transform: scale(.3) rotate(-12deg); transition: opacity 0.16s, transform 0.28s var(--sp-back); }
.hs-check.checked svg { opacity: 1; transform: none; }
/* A ring pulses out of the checkbox on completion. Scoped to a live frame:
   the server-rendered poster ships with the first row already ticked, and an
   unscoped rule would fire this celebration at every visitor on page load. */
.hs-live .hs-check.checked::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid var(--color-accent);
  animation: hsCheckRing 0.413s var(--sp) forwards;
}
.hs-prio-n { font: 400 14px/1 var(--font-heading); color: rgba(32,30,29,.65); width: 16px; flex: none; }
.hs-prio-body { flex: 1; min-width: 0; }
.hs-prio-body .t { font: 600 16px/1.25 var(--font-body); margin: 0 0 3px; }
.hs-prio.done .t { text-decoration: line-through; text-decoration-color: rgba(32,30,29,.4); }
.hs-prio-body .m { font: 400 12px/1.3 var(--font-body); color: rgba(32,30,29,.65); margin: 0; }
.hs-tag { flex: none; font: 400 11px/1.6 var(--font-body); border-radius: 999px; padding: 3px 10px; }
.hs-tag.acc { background: var(--color-accent-100); color: var(--color-accent-800); }
.hs-tag.sage { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.hs-tag.neutral { background: var(--color-neutral-100); color: #474238; }

/* Stats sit under the list, not pinned to the floor of the frame: margin-top
   auto pushed them to the bottom edge and left a band of nothing between,
   which reads as a screen that failed to load rather than a quiet day. */
.hs-stats { display: flex; align-items: center; gap: 34px; padding-top: 28px; }
.hs-stat { display: flex; flex-direction: column; gap: 5px; }
.hs-stat-n {
  font: 400 24px/1 var(--font-heading); letter-spacing: -.02em;
  display: flex; align-items: center; gap: 5px;
}
.hs-stat-n em { font: 400 14px/1 var(--font-heading); color: rgba(32,30,29,.5); font-style: normal; }
.hs-stat-l { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(32,30,29,.55); }
.hs-flame { display: inline-flex; color: var(--color-accent); transform-origin: 50% 80%; }
.hs-flame.pop { animation: hsFlame 0.48s var(--sp-back); }
/* The strip warms very slightly when the day's first task lands — the kind of
   response you feel rather than notice. */
.hs-stats.lit .hs-stat-n { color: var(--color-accent-800); transition: color 0.467s ease; }

/* Ring + week, stacked at the top right of the screen. The week used to live
   in the stats strip along the bottom, where the toast stack landed on it. */
.hs-today-aside { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: none; }
.hs-mini-cal { display: flex; gap: 5px; }
.hs-mini-day {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font: 600 10px/1 var(--font-body); color: rgba(32,30,29,.5);
  background: var(--color-neutral-100); position: relative;
  transition: color 0.233s ease, background 0.233s ease;
}
.hs-mini-past { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.hs-mini-today { box-shadow: inset 0 0 0 1.5px var(--color-accent); color: var(--color-accent-800); }
.hs-mini-day.hs-mini-hit { background: var(--color-accent); color: var(--color-bg); box-shadow: none; }
.hs-live .hs-mini-day.hs-mini-hit::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--color-accent);
  animation: hsCheckRing 0.467s var(--sp) forwards;
}

/* ══════════════════════════════════════════════════════════════════════════
   PLANNER
   ══════════════════════════════════════════════════════════════════════════ */
.hs-plan-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.hs-plan-title { font: 400 38px/1 var(--font-heading); letter-spacing: -.03em; margin: 0; }
.hs-plan-load { margin-left: auto; display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.hs-plan-load-l { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(32,30,29,.55); }
.hs-plan-load-bar { height: 6px; border-radius: 999px; background: rgba(32,30,29,.1); overflow: hidden; }
/* Driven by a spring writing scaleX — no transition, and the origin is left so
   it grows from the start of the track. */
.hs-plan-load-bar i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); transform-origin: left center; transform: scaleX(.86); }
.hs-plan-load-v { font: 600 11px/1 var(--font-body); transition: color 0.333s ease; }
.hs-plan-load-v.heavy { color: var(--color-accent-700); }
.hs-plan-load-v.ok { color: var(--color-accent-2-700); }

/* The columns take the height they need plus room to drop into, not every
   pixel the frame has — a week view that is four fifths empty track reads as
   a layout with nothing in it rather than a light week. */
.hs-plan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 0; }
.hs-plan-col { display: flex; flex-direction: column; min-width: 0; }
.hs-plan-dh { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; }
.hs-plan-dh .dw { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(32,30,29,.5); }
.hs-plan-dh .dn {
  font: 600 11px/1 var(--font-body); color: rgba(32,30,29,.55);
  width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
}
.hs-plan-dh .dn.today { background: var(--color-accent-cta); color: var(--color-bg); }
.hs-plan-drop {
  /* Tall enough to read as a droppable day and to hold the block that lands
     in it, short enough that four empty ones are not the whole screen. */
  min-height: 168px; border-radius: 16px; padding: 7px; display: flex; flex-direction: column; gap: 7px;
  background: rgba(32,30,29,.022); position: relative;
  transition: background 0.2s ease, box-shadow 0.233s var(--sp);
}
/* Armed = a drag is in progress and this column is a legal target. */
.hs-plan-drop.armed { background: rgba(32,30,29,.045); }
.hs-plan-drop.over {
  background: var(--color-accent-100);
  box-shadow: inset 0 0 0 1.5px rgba(198,113,57,.45);
}
.hs-plan-block {
  border-left: 3px solid var(--c); border-radius: 10px; padding: 8px 9px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  box-shadow: 0 1px 2px rgba(46,43,37,.05);
  transition: transform 0.3s var(--sp), box-shadow 0.2s ease, opacity 0.2s ease;
  will-change: auto;
}
.hs-plan-block .bt { font: 600 11.5px/1.25 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-plan-block .bd { font: 400 10px/1 var(--font-body); color: rgba(32,30,29,.55); }
.hs-plan-block.hover { transform: translate3d(0,-2px,0); box-shadow: 0 6px 14px -8px rgba(46,43,37,.45); }
/* Lifted / settling: the transform is written every frame by the follow loop,
   so a CSS transition on `transform` MUST NOT apply here. The base rule above
   carries `transition: transform 0.3s`, and leaving that live during the drag
   makes the browser ease toward a target that moves sixty times a second —
   the block visibly trails the cursor and never catches up. `transition` is
   redeclared (not extended) so the transform component is dropped outright. */
.hs-plan-block.lift {
  transition: box-shadow 0.147s ease;
  box-shadow: 0 22px 38px -16px rgba(46,43,37,.5), 0 3px 8px rgba(46,43,37,.12);
  will-change: transform;
  pointer-events: none;
}
.hs-plan-block.settling { transition: box-shadow 0.267s ease; will-change: transform; }
/* No transform animation here either: land() is still writing the property
   frame by frame as this class goes on, and hsLand animated the same channel.
   The landing squash is carried by the spring's own scale instead. */
.hs-plan-block.landed { animation: hsLandShadow 0.367s var(--sp); }
/* Blocks already in the destination column make room for the incoming one. */
.hs-plan-block.shift { transform: translate3d(0,6px,0); }

.hs-plan-tl { margin-top: 18px; }
.hs-plan-tl-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.hs-plan-tl-h span:first-child { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(32,30,29,.55); }
.hs-plan-tl-tot { font: 600 13px/1 var(--font-body); color: var(--color-accent-700); }
.hs-plan-tl-track { display: flex; gap: 3px; height: 10px; }
/* flex-grow is written by a spring; the transition here would double-animate. */
.hs-plan-seg { display: block; background: var(--c); border-radius: 999px; flex-basis: 0; min-width: 4px; }
.hs-plan-tl-keys { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.hs-plan-tl-keys span {
  display: flex; align-items: center; gap: 6px;
  font: 400 11px/1.3 var(--font-body); color: rgba(32,30,29,.62);
  transition: opacity 0.333s ease;
}
.hs-plan-tl-keys span i { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.hs-plan-tl-keys span.dim { opacity: .45; }

/* ══════════════════════════════════════════════════════════════════════════
   AEVEN AI
   ══════════════════════════════════════════════════════════════════════════ */
.hs-ai { padding-bottom: 22px; }
.hs-ai-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(32,30,29,.1); margin-bottom: 4px; }
.hs-ai-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.hs-ai-mark svg { width: 28px; height: 28px; }
.hs-ai-name { font: 400 20px/1 var(--font-heading); margin: 0 0 4px; }
.hs-ai-ctx { font: 400 11.5px/1 var(--font-body); color: rgba(32,30,29,.55); margin: 0; }

.hs-ai-thread {
  flex: 1; min-height: 0; overflow: hidden; padding: 18px 2px 6px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.hs-bubble {
  max-width: 84%; border-radius: 18px; padding: 12px 15px;
  opacity: 0; transform: translate3d(0,12px,0) scale(.97);
  transition: opacity 0.227s ease, transform 0.333s var(--sp);
  will-change: transform, opacity;
}
.hs-bubble.in, .hs-bubble:first-child { opacity: 1; transform: none; }
.hs-bubble p { margin: 0; font: 400 14px/1.55 var(--font-body); }
.hs-bubble--ai { background: var(--color-surface); border-bottom-left-radius: 7px; }
.hs-bubble--me {
  align-self: flex-end; background: var(--color-accent); color: var(--color-bg);
  border-bottom-right-radius: 7px;
}

/* thinking dots */
.hs-dots {
  display: flex; gap: 5px; padding: 13px 16px; background: var(--color-surface);
  border-radius: 18px; border-bottom-left-radius: 7px;
  opacity: 0; transform: translate3d(0,8px,0);
  transition: opacity 0.187s ease, transform 0.267s var(--sp);
}
.hs-dots.in { opacity: 1; transform: none; }
.hs-dots i {
  width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent-2-600);
  animation: hsDot 1.25s ease-in-out infinite;
}
.hs-dots i:nth-child(2) { animation-delay: 0.107s; }
.hs-dots i:nth-child(3) { animation-delay: 0.213s; }

/* sources */
.hs-src {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.hs-src.in { opacity: 1; }
.hs-src-k { font: 600 9.5px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: rgba(32,30,29,.45); }
.hs-src-row {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-bg); border: 1px solid rgba(32,30,29,.1);
  border-radius: 12px; padding: 8px 12px;
  opacity: 0; transform: translate3d(0,8px,0) scale(.96);
}
/* Each source resolves on its own beat — a citation pass finishing, not a
   block appearing. */
.hs-src.in .hs-src-row { animation: hsRise 0.333s var(--sp) forwards; animation-delay: calc(var(--i) * 0.073s); }
.hs-src-row b { font: 600 11.5px/1.2 var(--font-body); }
.hs-src-row em { font: 400 10px/1 var(--font-body); font-style: normal; color: rgba(32,30,29,.55); }

/* suggested follow-ups */
.hs-fu { display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transition: opacity 0.2s ease; }
.hs-fu.in { opacity: 1; }
.hs-fu-chip {
  font: 400 12px/1 var(--font-body); border-radius: 999px; padding: 9px 14px;
  background: var(--color-bg); border: 1px solid rgba(32,30,29,.14);
  color: var(--color-accent-700);
  opacity: 0; transform: translate3d(0,10px,0) scale(.94);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hs-fu.in .hs-fu-chip { animation: hsRise 0.32s var(--sp-back) forwards; animation-delay: calc(var(--i) * 0.053s); }
.hs-fu-chip.hover {
  border-color: rgba(198,113,57,.45); background: var(--color-accent-100);
  box-shadow: 0 6px 16px -10px rgba(46,43,37,.5);
}

/* composer */
.hs-ai-composer { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.hs-ai-input {
  flex: 1; min-width: 0; background: var(--color-surface);
  border: 1px solid rgba(32,30,29,.12); border-radius: 999px;
  padding: 13px 20px; font: 400 14px/1.3 var(--font-body);
  min-height: 46px; display: flex; align-items: center;
  transition: border-color 0.187s var(--sp), box-shadow 0.187s var(--sp), background 0.187s ease;
}
.hs-ai-input.focus {
  border-color: var(--color-accent); background: var(--color-bg);
  box-shadow: 0 0 0 3px rgba(198,113,57,.14);
}
.hs-ai-text { white-space: pre-wrap; word-break: break-word; }
.hs-caret {
  display: inline-block; width: 1.8px; height: 1.1em; background: var(--color-accent);
  margin-left: 1px; vertical-align: -2px; opacity: 0;
  transition: opacity 0.133s ease;
}
.hs-ai-input.focus .hs-caret { opacity: 1; animation: hsBlink 1.05s step-end infinite; }
.hs-ai-send {
  width: 42px; height: 42px; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--color-neutral-200); color: rgba(32,30,29,.4);
  transition: background 0.2s var(--sp), color 0.2s var(--sp), transform 0.28s var(--sp-back), box-shadow 0.2s ease;
}
/* Armed once there is something to send — the button earning its colour is a
   small honesty the eye reads instantly. */
.hs-ai-send.armed { background: var(--color-accent); color: var(--color-bg); }
.hs-ai-send.hover { transform: scale(1.07); box-shadow: 0 8px 18px -10px rgba(198,113,57,.8); }

/* ══════════════════════════════════════════════════════════════════════════
   WORKSPACE / NOTES
   ══════════════════════════════════════════════════════════════════════════ */
.hs-note { padding: 22px 32px 26px; }
.hs-note-bar { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(32,30,29,.1); }
.hs-note-crumbs { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--font-body); color: rgba(32,30,29,.5); min-width: 0; }
.hs-note-crumbs i { font-style: normal; opacity: .5; }
.hs-note-crumbs b { font: 600 12px/1 var(--font-body); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* autosave indicator: one element, four states, each a class */
.hs-save {
  margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none;
  font: 600 10.5px/1 var(--font-body); color: rgba(32,30,29,.42);
  transition: color 0.233s ease;
}
.hs-save-l { transition: opacity 0.167s ease; }
.hs-save-spin, .hs-save-tick {
  width: 13px; height: 13px; display: grid; place-items: center; flex: none;
  opacity: 0; transform: scale(.5);
  transition: opacity 0.167s ease, transform 0.253s var(--sp-back);
}
.hs-save-spin {
  position: absolute; border-radius: 999px;
  border: 1.6px solid rgba(32,30,29,.16); border-top-color: var(--color-accent);
}
.hs-save { position: relative; padding-left: 19px; }
.hs-save-spin { left: 0; }
.hs-save-tick { position: absolute; left: 0; color: var(--color-accent-2-700); }
.hs-save.dirty { color: rgba(32,30,29,.42); }
.hs-save.dirty::before {
  content: ""; position: absolute; left: 3px; width: 7px; height: 7px; border-radius: 999px;
  background: var(--color-accent); opacity: .6;
  animation: hsPulseDot 1.6s ease-in-out infinite;
}
.hs-save.saving .hs-save-spin { opacity: 1; transform: none; animation: hsSpin 0.7s linear infinite; }
.hs-save.saved .hs-save-tick { opacity: 1; transform: none; }
.hs-save.saved { color: var(--color-accent-2-700); }

/* The sheet is a page, so it takes the height its content needs and the rest
   of the frame stays empty paper below it — the same way a document looks in
   the real editor. flex:1 stretched it and left a band of nothing. */
.hs-note-sheet { position: relative; min-height: 0; padding-top: 22px; }

/* loading skeleton — shimmer travels rather than pulsing, and it leaves by
   lifting away instead of switching off */
.hs-note-open {
  position: absolute; inset: 22px 0 0; display: flex; flex-direction: column; gap: 14px;
  transition: opacity 0.227s ease, transform 0.333s var(--sp);
}
.hs-note-open.gone { opacity: 0; transform: translate3d(0,-8px,0); pointer-events: none; }
.hs-sk {
  height: 13px; border-radius: 7px; position: relative; overflow: hidden;
  background: rgba(32,30,29,.07);
}
.hs-sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
  transform: translate3d(-100%,0,0);
  animation: hsShimmer 1.35s cubic-bezier(.4,0,.2,1) infinite;
}
.hs-sk-t { height: 30px; width: 54%; border-radius: 10px; }
.hs-sk-a { width: 92%; }
.hs-sk-b { width: 86%; }
.hs-sk-c { width: 62%; }

.hs-note-doc {
  opacity: 0; transform: translate3d(0,10px,0);
  transition: opacity 0.28s ease, transform 0.387s var(--sp);
}
.hs-note-doc.in { opacity: 1; transform: none; }
.hs-note-h { font: 400 32px/1.1 var(--font-heading); letter-spacing: -.025em; margin: 0 0 6px; }
.hs-note-meta { font: 400 11.5px/1 var(--font-body); color: rgba(32,30,29,.5); margin: 0 0 22px; }
.hs-note-p { font: 400 15.5px/1.7 var(--font-body); margin: 0 0 14px; max-width: 62ch; }
.hs-note-live { position: relative; display: inline; }
/* Selection and highlight are both painted with a box-shadow spread so they
   can animate — a real ::selection cannot. */
.hs-note-live .hs-note-typed {
  border-radius: 3px; box-shadow: 0 0 0 0 rgba(122,138,94,0);
  background-image: linear-gradient(rgba(198,113,57,.24), rgba(198,113,57,.24));
  background-size: 0% 100%; background-repeat: no-repeat;
  transition: background-size 0.227s var(--sp), background-image 0.2s ease;
}
.hs-note-live.sel .hs-note-typed { background-size: 100% 100%; }
.hs-note-live.hl .hs-note-typed {
  background-image: linear-gradient(rgba(214,143,82,.42), rgba(214,143,82,.42));
  background-size: 100% 100%;
}
.hs-caret--doc {
  background: var(--color-text); opacity: 1;
  animation: hsBlink 1.05s step-end infinite;
}

/* floating formatting toolbar */
.hs-fmt {
  position: absolute; z-index: 12; display: flex; align-items: center; gap: 2px;
  background: var(--color-text); border-radius: 12px; padding: 5px;
  box-shadow: 0 16px 34px -14px rgba(46,43,37,.7), 0 2px 6px rgba(46,43,37,.2);
  opacity: 0; transform: translate3d(0,8px,0) scale(.9); transform-origin: 20% 100%;
  transition: opacity 0.147s ease, transform 0.28s var(--sp-back);
  pointer-events: none;
}
.hs-fmt.show { opacity: 1; transform: none; }
.hs-fmt-b {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: rgba(245,234,216,.72);
  transition: background 0.147s ease, color 0.147s ease, transform 0.227s var(--sp-back);
}
.hs-fmt-b.hover { background: rgba(245,234,216,.14); color: #f5ead8; transform: scale(1.06); }
.hs-fmt-b.on { background: var(--color-accent); color: var(--color-bg); }
.hs-fmt-sep { width: 1px; height: 16px; background: rgba(245,234,216,.2); margin: 0 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   WELLNESS — the daily check-in
   ══════════════════════════════════════════════════════════════════════════ */
.hs-well-moods { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; margin: 18px 0 20px; }
.hs-well-mood {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 15px 6px 12px; border-radius: 20px; border: 1px solid rgba(32,30,29,.13);
  background: var(--color-surface);
  transition: transform 0.12s var(--sp), border-color 0.12s, background 0.12s, box-shadow 0.2s ease;
}
.hs-well-mood.hover {
  transform: translate3d(0,-3px,0); border-color: rgba(32,30,29,.26);
  box-shadow: 0 8px 18px -12px rgba(46,43,37,.5);
}
.hs-well-mood.on { border-color: transparent; background: var(--color-accent); }
.hs-well-dot { width: 26px; height: 26px; border-radius: 999px; display: block; transition: transform 0.133s var(--sp-back); }
.hs-well-mood.on .hs-well-dot { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(245,234,216,.5); }
.hs-well-lab { font: 600 12px/1 var(--font-body); color: rgba(32,30,29,.65); }
.hs-well-mood.on .hs-well-lab { color: var(--color-bg); }

.hs-well-resp {
  background: var(--color-accent-2-100); border: 1.5px dashed var(--color-accent-2-400);
  border-radius: 18px; padding: 14px 16px;
  opacity: 0; transform: translate3d(0,8px,0);
  transition: opacity 0.28s ease, transform 0.333s var(--sp);
}
.hs-well-resp.show { opacity: 1; transform: none; }
.hs-well-kicker { font: 600 10px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-2-700); }
.hs-well-line { font: 400 14px/1.5 var(--font-body); margin: 8px 0 0; color: var(--color-text); }
/* The two things that actually moved, arriving one after the other — the
   feature's claim made concrete rather than described. */
.hs-well-moved { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hs-well-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-bg); border-radius: 999px; padding: 7px 13px;
  font: 600 11.5px/1 var(--font-body);
  opacity: 0; transform: translate3d(0,6px,0) scale(.94);
  transition: opacity 0.2s ease, transform 0.28s var(--sp-back);
}
.hs-well-chip.in { opacity: 1; transform: none; }
.hs-well-chip i { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.hs-well-chip em { font: 400 10.5px/1 var(--font-body); font-style: normal; color: rgba(32,30,29,.55); }
.hs-well-chip.out em { color: var(--color-accent-700); }

.hs-well-bal { margin-top: auto; padding-top: 22px; opacity: 0; transition: opacity 0.28s ease; }
.hs-well-bal.show { opacity: 1; }
.hs-well-bal-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.hs-well-bal-h span:first-child { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(32,30,29,.55); }
.hs-well-bal-v { font: 600 12px/1 var(--font-body); color: var(--color-accent-2-700); }
.hs-well-bars { display: flex; align-items: flex-end; gap: 10px; height: 76px; }
.hs-well-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
/* scaleY written by a spring — no transition, and the origin is the base so
   the bars grow up out of the axis. */
.hs-well-bar i {
  display: block; width: 100%; flex: 1; border-radius: 7px;
  background: var(--color-accent-2-400); transform-origin: bottom center; transform: scaleY(0);
}
.hs-well-bar b { font: 600 10px/1 var(--font-body); color: rgba(32,30,29,.5); }

/* ══════════════════════════════════════════════════════════════════════════
   CATALOG
   ══════════════════════════════════════════════════════════════════════════ */
.hs-cat-title { font: 400 32px/1.04 var(--font-heading); letter-spacing: -.03em; margin: 0 0 4px; }
.hs-cat-sub { font: 400 14px/1.5 var(--font-body); color: rgba(32,30,29,.65); margin: 0 0 18px; }
.hs-cat-scroll {
  flex: 1; min-height: 0; overflow: hidden; position: relative;
  /* The shelf fades at both ends so a momentum scroll runs off the edge
     rather than being cut by a hard line. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
}
.hs-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 4px 2px 20px; }
.hs-cat-card {
  background: var(--color-bg); border: 1px solid rgba(32,30,29,.08); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.253s var(--sp), box-shadow 0.253s ease, border-color 0.253s ease, opacity 0.2s ease;
}
.hs-cat-card.hover {
  transform: translate3d(0,-4px,0) scale(1.012);
  box-shadow: 0 18px 32px -20px rgba(46,43,37,.55), 0 2px 6px -3px rgba(46,43,37,.14);
  border-color: rgba(198,113,57,.32);
}
/* The card you opened stays lit while you are away from it. */
.hs-cat-card.opening { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(198,113,57,.22); }
.hs-cat-cover { height: 74px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 0 16px 8px; }
.hs-cat-cover .glyph { font: 400 24px/1 var(--font-heading); letter-spacing: -.02em; position: relative; }
.hs-cat-cover .blob {
  position: absolute; border-radius: 999px;
  transition: transform 0.367s var(--sp);
}
/* Parallax: the blob drifts against the card on hover, so the cover has depth
   rather than being a flat swatch. */
.hs-cat-card.hover .blob { transform: translate3d(-8px, 6px, 0) scale(1.14); }
.hs-cat-peek {
  position: absolute; left: 14px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10px/1 var(--font-body); letter-spacing: .04em;
  background: rgba(32,30,29,.82); color: var(--color-bg);
  border-radius: 999px; padding: 6px 11px 6px 9px;
  opacity: 0; transform: translate3d(0,6px,0) scale(.92);
  transition: opacity 0.173s ease, transform 0.267s var(--sp-back);
}
.hs-cat-card.hover .hs-cat-peek { opacity: 1; transform: none; }
.hs-cat-card.hover .glyph { opacity: 0; transition: opacity 0.173s ease; }
.hs-cat-body { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hs-cat-name { font: 600 15px/1.3 var(--font-body); margin: 0; }
.hs-cat-units { font: 400 11px/1 var(--font-body); color: rgba(32,30,29,.5); margin: 0; }
.hs-cat-prog { height: 4px; border-radius: 999px; background: rgba(32,30,29,.09); overflow: hidden; }
/* scaleX written by a spring — no transition. */
.hs-cat-prog i { display: block; height: 100%; border-radius: 999px; transform-origin: left center; transform: scaleX(0); }
.hs-cat-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.hs-cat-add {
  flex: 1; border: 0; border-radius: 999px; padding: 9px 12px;
  font: 600 12px/1 var(--font-body); background: var(--color-accent-100); color: var(--color-accent-800);
  cursor: default; transition: background 0.2s ease;
}
.hs-cat-card.hover .hs-cat-add { background: var(--color-accent); color: var(--color-bg); }
.hs-cat-khan {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(32,30,29,.14);
  display: grid; place-items: center; color: var(--color-accent-700); flex: none;
  transition: border-color 0.2s ease, transform 0.253s var(--sp-back);
}
.hs-cat-card.hover .hs-cat-khan { border-color: rgba(198,113,57,.4); transform: rotate(8deg); }

/* the lesson that opens over the shelf */
.hs-lesson {
  position: absolute; inset: 0; background: var(--color-bg); z-index: 6;
  display: flex; flex-direction: column; padding: 30px 40px;
  opacity: 0; transform: scale(.965) translate3d(0,10px,0);
  transition: opacity 0.213s ease, transform 0.333s var(--sp);
  pointer-events: none;
}
.hs-lesson.show { opacity: 1; transform: none; }
.hs-lesson-frame { background: #402310; border-radius: 22px; padding: 14px; box-shadow: var(--shadow-lg); }
.hs-lesson-video {
  position: relative; border-radius: 16px; overflow: hidden; background: #1a120c;
  aspect-ratio: 16/9; display: grid; place-items: center;
}
/* The thumbnail is genuinely absent, shimmers, and then resolves — the load
   is the point, so the shimmer is a real placeholder rather than an overlay. */
.hs-lesson-shimmer { position: absolute; inset: 0; overflow: hidden; transition: opacity 0.3s ease; }
.hs-lesson-shimmer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(245,234,216,.11) 50%, transparent 75%);
  transform: translate3d(-100%,0,0);
  animation: hsShimmer 1.5s cubic-bezier(.4,0,.2,1) infinite;
}
.hs-lesson-video::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(214,143,82,.5), transparent 60%),
    radial-gradient(100% 80% at 78% 82%, rgba(122,138,94,.42), transparent 62%),
    linear-gradient(140deg, #24160d, #120c08);
  transition: opacity 0.4s ease;
}
.hs-lesson-video.loaded::before { opacity: 1; }
.hs-lesson-video.loaded .hs-lesson-shimmer { opacity: 0; }
.hs-lesson-play {
  width: 62px; height: 62px; border-radius: 999px; background: rgba(245,234,216,.16);
  display: grid; place-items: center; color: rgba(245,234,216,.9);
  position: relative; z-index: 2; opacity: 0; transform: scale(.8);
  transition: opacity 0.267s ease, transform 0.333s var(--sp-back);
}
.hs-lesson-play svg { width: 22px; height: 22px; margin-left: 3px; }
.hs-lesson-video.loaded .hs-lesson-play { opacity: 1; transform: none; }
/* A soft ring breathes off the play button once the video is ready. */
.hs-lesson-video.loaded .hs-lesson-play::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 1.5px solid rgba(245,234,216,.28);
  animation: hsHalo 2.6s ease-out infinite;
}
.hs-lesson-bar { height: 4px; border-radius: 999px; background: rgba(245,234,216,.18); margin-top: 12px; overflow: hidden; }
/* scaleX written by a spring — no transition. */
.hs-lesson-bar i { display: block; height: 100%; background: var(--color-accent-2-400); border-radius: 999px; transform-origin: left center; transform: scaleX(0); }
.hs-lesson-title { font: 400 26px/1.1 var(--font-heading); letter-spacing: -.02em; margin: 20px 0 6px; }
.hs-lesson-meta { font: 400 14px/1.5 var(--font-body); color: rgba(32,30,29,.65); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   COURSES
   ══════════════════════════════════════════════════════════════════════════ */
.hs-crs-head { display: flex; align-items: flex-end; gap: 30px; margin-bottom: 22px; }
.hs-crs-title { font: 400 38px/1 var(--font-heading); letter-spacing: -.03em; margin: 0; }
.hs-crs-gpa { margin-left: auto; text-align: left; }
.hs-crs-gpa .n { display: block; font: 400 34px/.9 var(--font-heading); letter-spacing: -.03em; color: var(--color-accent-700); }
.hs-crs-gpa .l { display: block; font: 600 11px/1 var(--font-body); color: rgba(32,30,29,.65); margin-top: 8px; }
.hs-crs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hs-crs-card {
  position: relative; background: var(--color-bg); border: 1px solid rgba(32,30,29,.08);
  border-radius: 20px; overflow: hidden;
  transition: transform 0.24s var(--sp), box-shadow 0.24s ease, border-color 0.24s ease;
}
.hs-crs-card.hover {
  transform: translate3d(0,-4px,0);
  box-shadow: 0 18px 32px -20px rgba(46,43,37,.5), 0 2px 6px -3px rgba(46,43,37,.12);
  border-color: rgba(198,113,57,.3);
}
.hs-crs-band { display: block; height: 6px; }
.hs-crs-top { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 0; }
.hs-crs-kicker { font: 600 10px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(32,30,29,.65); margin: 0 0 8px; }
.hs-crs-name { font: 400 24px/1.05 var(--font-heading); letter-spacing: -.02em; margin: 0; }
.hs-crs-disc {
  width: 48px; height: 48px; flex: none; border-radius: 999px; display: grid; place-items: center;
  font: 400 18px/1 var(--font-heading); color: #f9f4ed; margin-left: auto;
  transition: transform 0.28s var(--sp-back);
}
.hs-crs-card.hover .hs-crs-disc { transform: scale(1.07); }
.hs-crs-prog { padding: 16px 20px 0; }
.hs-crs-proghead { display: flex; justify-content: space-between; font: 600 11px/1 var(--font-body); color: rgba(32,30,29,.65); margin-bottom: 8px; }
.hs-crs-bar { height: 6px; border-radius: 999px; background: rgba(32,30,29,.1); overflow: hidden; }
/* scaleX written by a spring — no transition. */
.hs-crs-bar i { display: block; height: 100%; border-radius: 999px; transform-origin: left center; transform: scaleX(0); }
.hs-crs-foot { padding: 16px 20px 18px; margin-top: 14px; border-top: 1px solid rgba(32,30,29,.09); background: rgba(32,30,29,.02); }
.hs-crs-foot .k { font: 600 10px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(32,30,29,.65); margin: 0 0 6px; }
.hs-crs-foot .nt { font: 600 14px/1.3 var(--font-body); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   POINTER
   ══════════════════════════════════════════════════════════════════════════ */
.hs-cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 50; pointer-events: none;
  will-change: transform; transform: translate3d(-100px,-100px,0);
  filter: drop-shadow(0 2px 4px rgba(46,43,37,.28));
  transition: filter 0.12s ease;
}
.hs-cursor svg { display: block; position: relative; z-index: 2; transition: transform 0.08s var(--sp); }
/* Motion blur, earned rather than decorative: the class is only on while the
   pointer is genuinely travelling fast, so it never smears a slow correction. */
.hs-cursor.fast { filter: drop-shadow(0 2px 4px rgba(46,43,37,.28)) blur(.7px); }
.hs-cursor-ring {
  position: absolute; left: -8px; top: -8px; width: 34px; height: 34px; border-radius: 999px;
  border: 2px solid var(--color-accent); opacity: 0; transform: scale(.5);
}
.hs-cursor.press .hs-cursor-ring { animation: hsClick 0.367s var(--sp); }
.hs-cursor.press svg { transform: scale(.86); }
/* Grabbing: a soft disc under the arrow, so a drag is visibly a held button
   rather than a hover that happens to move things. */
.hs-cursor-drag {
  position: absolute; left: -5px; top: -5px; width: 28px; height: 28px; border-radius: 999px;
  background: rgba(198,113,57,.22); opacity: 0; transform: scale(.4);
  transition: opacity 0.133s ease, transform 0.253s var(--sp-back);
}
.hs-cursor.grab .hs-cursor-drag { opacity: 1; transform: none; }
.hs-cursor.grab svg { transform: scale(.92); }

/* ══════════════════════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════════════════════ */
/* Bottom-right, not top-right: every screen puts a heading, a meter or a
   segmented control along its top edge, and a toast landing there covered
   whichever one it was. Down here it has the stage to itself. */
.hs-toasts {
  position: absolute; right: 18px; bottom: 18px; z-index: 40;
  /* column-reverse so the newest toast sits at the bottom and older ones ride
     upward as the stack grows — the direction a bottom-anchored stack reads. */
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.hs-toast {
  background: var(--color-text); color: var(--color-bg); border-radius: 999px;
  padding: 9px 16px; font: 600 12px/1.3 var(--font-body);
  box-shadow: 0 14px 28px -14px rgba(46,43,37,.8), 0 2px 5px rgba(46,43,37,.16);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  opacity: 0; transform: translate3d(14px,-6px,0) scale(.94);
  transition: opacity 0.2s ease, transform 0.333s var(--sp);
  will-change: transform, opacity;
}
.hs-toast.in { opacity: 1; transform: none; }
/* Leaving is not entering in reverse: it slides out the way it came and
   shrinks, which reads as dismissal rather than a rewind. */
.hs-toast.out { opacity: 0; transform: translate3d(20px,0,0) scale(.92); }
.hs-toast-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-accent-2-400); flex: none; }
.hs-toast.good .hs-toast-dot { background: var(--color-accent-2-400); animation: hsPulseDot 1.4s ease-in-out infinite; }

/* fade the stage bottom into the page like the old mockup */
.hs-fade { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes hsBreathe { 0%,100% { box-shadow: 0 0 0 0 rgba(122,138,94,0); } 50% { box-shadow: 0 0 0 7px rgba(122,138,94,.16); } }
@keyframes hsBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@keyframes hsClick { 0% { opacity: .55; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes hsCheckRing { 0% { opacity: .7; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes hsFlame {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.35) rotate(-7deg); }
  65% { transform: scale(.96) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
/* Shadow only — the block's transform belongs to the landing spring while
   this plays, and animating the same channel from two places fought it. */
@keyframes hsLandShadow {
  0% { box-shadow: 0 10px 20px -12px rgba(46,43,37,.5); }
  100% { box-shadow: 0 1px 2px rgba(46,43,37,.05); }
}
@keyframes hsDot { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes hsRise { to { opacity: 1; transform: none; } }
@keyframes hsShimmer { 0% { transform: translate3d(-100%,0,0); } 100% { transform: translate3d(100%,0,0); } }
@keyframes hsSpin { to { transform: rotate(360deg); } }
@keyframes hsPulseDot { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes hsHalo {
  0% { opacity: .5; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   The frame is a window onto a wide application, so it narrows by dropping
   columns rather than by scaling: a phone gets one screen at full size and
   readable type, not the desktop layout shrunk to 40% and squinted at.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .hs-aeven { display: none; }          /* tablet: drop the AI rail column */
}
@media (max-width: 820px) {
  #hero-sim, .hs-frame { min-height: 520px; }
  .hs-rail { display: none; }
  .hs-screen { padding: 22px 22px; }
  .hs-greet { font-size: 34px; }
  .hs-today-head { gap: 16px; }
  .hs-ring-wrap, .hs-ring { width: 76px; height: 76px; }
  .hs-ring-n { font-size: 21px; }
  .hs-stats { gap: 22px; padding-top: 18px; }
  .hs-mini-cal { display: none; }
  .hs-crs-grid { grid-template-columns: 1fr; }
  .hs-cat-grid { grid-template-columns: repeat(2,1fr); }
  .hs-cat-title { font-size: 26px; }
  .hs-cat-sub { margin-bottom: 14px; }
  .hs-lesson { padding: 22px; }
  .hs-note { padding: 20px 22px 22px; }
  .hs-bubble { max-width: 92%; }
}
/* The planner's five columns stop being readable well before the frame does.
   Below this it shows the three days the story actually uses — the block's
   origin, the day it lands on, and the one that gets lighter. */
@media (max-width: 700px) {
  .hs-plan-grid { grid-template-columns: repeat(3,1fr); }
  .hs-plan-col:nth-child(4), .hs-plan-col:nth-child(5) { display: none; }
  .hs-plan-tl-keys { gap: 12px; }
}
@media (max-width: 560px) {
  #hero-sim { border-radius: 20px 20px 0 0; min-height: 452px; }
  .hs-frame { min-height: 452px; }
  .hs-screen { padding: 18px 16px; }
  .hs-eyebrow { font-size: 10px; letter-spacing: .1em; margin-bottom: 8px; }
  .hs-greet { font-size: 27px; }
  .hs-lede { font-size: 15px; }
  .hs-today-head { margin-bottom: 16px; }
  .hs-ring-wrap, .hs-ring { width: 62px; height: 62px; }
  .hs-ring circle { stroke-width: 6; }
  .hs-ring-n { font-size: 17px; }
  .hs-ring-l { font-size: 8px; }
  .hs-prio { gap: 11px; padding: 13px 2px; }
  .hs-prio-n { display: none; }               /* the order is the order it is in */
  .hs-prio-body .t { font-size: 14px; }
  .hs-prio-body .m { font-size: 11px; }
  .hs-tag { font-size: 10px; padding: 3px 8px; }
  .hs-check { width: 20px; height: 20px; }
  .hs-stats { gap: 18px; padding-top: 14px; }
  .hs-stat-n { font-size: 19px; }
  .hs-stat-l { font-size: 9px; }

  .hs-plan-title { font-size: 26px; }
  .hs-plan-load { min-width: 92px; }
  .hs-plan-block { padding: 7px; }
  .hs-plan-block .bt { font-size: 10.5px; }
  .hs-plan-tl { margin-top: 12px; }
  .hs-plan-tl-keys span { font-size: 10px; }

  .hs-ai-name { font-size: 17px; }
  .hs-ai-ctx { font-size: 10.5px; }
  .hs-bubble { max-width: 96%; padding: 10px 13px; }
  .hs-bubble p { font-size: 13px; }
  .hs-ai-input { padding: 11px 16px; font-size: 13px; min-height: 42px; }
  .hs-ai-send { width: 38px; height: 38px; }
  .hs-fu-chip { font-size: 11px; padding: 8px 11px; }

  .hs-note-h { font-size: 24px; }
  .hs-note-p { font-size: 14px; line-height: 1.62; }
  .hs-note-meta { margin-bottom: 16px; }

  .hs-cat-title { font-size: 22px; margin-bottom: 2px; }
  .hs-cat-sub { font-size: 12.5px; margin-bottom: 12px; }
  .hs-cat-grid { gap: 10px; }
  .hs-cat-cover { height: 52px; padding: 0 12px 6px; }
  .hs-cat-cover .glyph { font-size: 19px; }
  .hs-cat-body { padding: 10px 12px 12px; gap: 7px; }
  .hs-cat-name { font-size: 13px; }
  .hs-cat-units { font-size: 10px; }
  .hs-cat-add { padding: 8px 8px; font-size: 11px; }
  .hs-cat-khan { width: 28px; height: 28px; }
  .hs-lesson { padding: 18px 16px; }
  .hs-lesson-frame { padding: 10px; border-radius: 18px; }
  .hs-lesson-play { width: 48px; height: 48px; }
  .hs-lesson-title { font-size: 21px; margin: 15px 0 5px; }
  .hs-lesson-meta { font-size: 12.5px; }

  .hs-crs-title { font-size: 26px; }
  .hs-crs-head { margin-bottom: 16px; gap: 16px; }
  .hs-crs-name { font-size: 20px; }
  .hs-crs-disc { width: 40px; height: 40px; font-size: 15px; }
  .hs-crs-top { padding: 14px 15px 0; }
  .hs-crs-prog { padding: 12px 15px 0; }
  .hs-crs-foot { padding: 12px 15px 14px; margin-top: 10px; }

  .hs-toasts { right: 12px; top: 12px; }
  .hs-toast { font-size: 11px; padding: 8px 13px; }
  .hs-fade { height: 60px; margin-top: -60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STATIC TIER
   A device that cannot hold a frame budget never downloads hero-sim.js, so
   what it renders is the first frame written into the page as HTML.
   Everything the engine would have driven is switched off, and the pieces the
   engine would have revealed are simply shown.
   ══════════════════════════════════════════════════════════════════════════ */
.perf-static #hero-sim { transform: none; transition: none; will-change: auto; }
.perf-static .hs-screen, .perf-static .hs-prio, .perf-static .hs-cat-card,
.perf-static .hs-plan-block, .perf-static .hs-aeven-card, .perf-static .hs-toast,
.perf-static .hs-lesson, .perf-static .hs-crs-card, .perf-static .hs-bubble,
.perf-static .hs-aeven-slot, .perf-static .hs-note-doc, .perf-static .hs-note-open {
  transition: none !important; animation: none !important;
}
.perf-static .hs-cursor, .perf-static .hs-caret,
.perf-static .hs-aeven-orb.thinking, .perf-static .hs-sk::after,
.perf-static .hs-lesson-shimmer::after { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — freeze into a calm, complete state
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #hero-sim *, #hero-sim *::before, #hero-sim *::after {
    transition: none !important; animation: none !important;
  }
  .hs-cursor, .hs-caret { display: none !important; }
  .hs-screen { filter: none !important; }
}

/* Legacy first-frame markup written into index.njk still uses these two
   classes; keeping them means a cached HTML page paired with a fresh
   stylesheet renders a complete Today screen rather than a broken one. */
.hs-split { display: flex; gap: 44px; margin-top: 28px; }
.hs-col-h { font: 400 20px/1 var(--font-heading); margin: 0 0 16px; }
.hs-spine { position: relative; padding-left: 62px; flex: 1.2; }
.hs-spine::before { content: ""; position: absolute; left: 46px; top: 4px; bottom: 4px; width: 2px; background: rgba(32,30,29,.12); }
.hs-slot { position: relative; margin-bottom: 14px; }
.hs-slot.past { opacity: .5; }
.hs-slot .time { position: absolute; left: -62px; top: 1px; font: 600 11px/1 var(--font-body); color: rgba(32,30,29,.65); }
.hs-slot .dot { position: absolute; left: -19px; top: 3px; width: 8px; height: 8px; border-radius: 999px; background: var(--color-neutral-400); }
.hs-slot .st { font: 600 14px/1.3 var(--font-body); margin: 0; }
.hs-aeven-slot {
  position: relative; padding: 14px 16px; margin-left: -8px;
  background: var(--color-accent-2-100); border: 1.5px dashed var(--color-accent-2-400); border-radius: 18px;
}
.hs-aeven-slot .time { position: absolute; left: -54px; top: 16px; font: 600 11px/1 var(--font-body); color: var(--color-accent-2-700); }
.hs-aeven-slot .k { font: 600 9px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-2-700); }
.hs-aeven-slot .st { margin-top: 6px; }
.hs-coming { flex: 1; }
.hs-coming-row { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(32,30,29,.1); }
.hs-coming-row .d { font: 600 11px/1.4 var(--font-body); color: rgba(32,30,29,.65); width: 46px; flex: none; }
.hs-coming-row .cd { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.hs-coming-row .ct { font: 400 13px/1.4 var(--font-body); flex: 1; }
@media (max-width: 820px) { .hs-split { display: none; } }