/* Nova Helix  the orb and the theme deck (2026-09-30).
   The orb is the app's own mark, drawn as nova_orb.dart draws it: a shaded sphere, a 3 px ring
   with a sweep gradient turning once every 9 s, a 6 % breath every 6 s, and an accent glow.
   The deck lets a visitor wear any of the app's themes on the whole site: every colour on the
   site is a --nh-* token, so wearing a theme is rewriting those tokens (nh-deck.js). */
:root{--nh-orb-accent:#3B8EF0;--nh-orb-hi:#F7F7FA;--nh-orb-mid:#B2B2BC;--nh-orb-edge:#3F3F45}
html{transition:background-color .45s ease,color .45s ease}
.nh-orb{--s:30px;position:relative;width:calc(var(--s) + 6px);height:calc(var(--s) + 6px);display:inline-block;flex:0 0 auto;vertical-align:middle}
.nh-orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--nh-orb-accent);opacity:.35;filter:blur(calc(var(--s) * .3));animation:nh-breathe 6s ease-in-out infinite}
.nh-orb__ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,var(--nh-orb-accent) 180deg,transparent 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));animation:nh-ring 9s linear infinite}
.nh-orb__sphere{position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 36% 30%,var(--nh-orb-hi) 0%,var(--nh-orb-mid) 48%,var(--nh-orb-edge) 100%);box-shadow:inset -2px -3px 8px rgba(0,0,0,.35);animation:nh-breathe 6s ease-in-out infinite}
@keyframes nh-ring{to{transform:rotate(360deg)}}
@keyframes nh-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.nh-brand .nh-orb{--s:26px}
.nh-brand--mark-only .nh-orb{--s:30px}
.nh-foot .nh-brand .nh-orb{--s:20px}
.nh-hero__orb{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.nh-hero__orb .nh-orb{--s:56px}
.nh-hero__status{color:var(--nh-muted);font-size:.9rem;line-height:1.4}
.nh-hero__status strong{color:var(--nh-ink);font-weight:600}

/* ---- the deck ---- */
.nh-themes__intro{align-items:center}
.nh-deck-wrap{display:grid;gap:18px;justify-items:center;padding-left:52px}
.nh-deck{position:relative;width:224px;height:352px;touch-action:pan-y;outline:none}
.nh-card{position:absolute;inset:0;border-radius:18px;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-text);cursor:pointer;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;box-shadow:0 24px 50px -22px rgba(0,0,0,.8);display:grid;grid-template-rows:1fr auto;overflow:hidden;will-change:transform}
.nh-card.is-leaving{transition:transform .45s ease-in,opacity .3s}
.nh-card__pv{margin:12px 12px 0;border-radius:12px;background:var(--c-surface);border:1px solid var(--c-line);position:relative;overflow:hidden;display:grid;grid-template-rows:24px 1fr;background-size:cover;background-position:center}
.nh-card__bar{border-bottom:1px solid var(--c-line);display:flex;align-items:center;gap:5px;padding:0 10px}
.nh-card__bar i{width:7px;height:7px;border-radius:50%;background:var(--c-dim);opacity:.5}
.nh-card__body{padding:12px;display:grid;gap:8px;align-content:start}
.nh-card__l{height:8px;border-radius:4px;background:var(--c-dim);opacity:.45}
.nh-card__l--a{background:var(--c-accent);opacity:1;width:60%}
.nh-card__l--b{width:85%}
.nh-card__l--c{width:45%}
.nh-card__aa{position:absolute;right:12px;bottom:10px;font-family:var(--nh-display);font-weight:700;font-size:32px;line-height:1;color:var(--c-text)}
.nh-card__aa span{color:var(--c-accent)}
.nh-card--live .nh-card__bar,.nh-card--live .nh-card__body{background:color-mix(in srgb,var(--c-surface) 62%,transparent);backdrop-filter:blur(6px)}
.nh-card--live .nh-card__pv{background-image:var(--c-art)}
.nh-card__meta{padding:12px 14px 14px;display:grid;gap:3px}
.nh-card__name{font-family:var(--nh-display);font-weight:700;font-size:17px;line-height:1.2;color:var(--c-text)}
.nh-card__tier{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-dim);display:flex;gap:9px;align-items:center}
.nh-card__tier .is-live{color:var(--c-accent)}
.nh-card__tier .is-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-accent);margin-right:5px;animation:nh-blink 1.4s infinite}
@keyframes nh-blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.nh-card__on{position:absolute;top:10px;left:10px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--c-accent);color:var(--c-on);opacity:0;transition:opacity .3s}
.nh-card.is-worn .nh-card__on{opacity:1}
.nh-deck-ctl{display:flex;align-items:center;gap:12px}
.nh-deck-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--nh-line);background:var(--nh-surface);color:var(--nh-ink);cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center;padding:0}
.nh-deck-btn:hover{border-color:var(--nh-accent)}
.nh-deck-btn:focus-visible,.nh-card:focus-visible{outline:2px solid var(--nh-accent);outline-offset:3px}
.nh-deck-count{color:var(--nh-muted);font-size:.9rem;min-width:9ch;text-align:center;font-variant-numeric:tabular-nums}
.nh-deck-hint{color:var(--nh-muted);font-size:.85rem;text-align:center;max-width:34ch}
.nh-wearing{margin-top:14px;padding:12px 14px;border:1px solid var(--nh-line);border-radius:var(--nh-r-md);background:var(--nh-surface);display:flex;gap:12px;align-items:center;font-size:.95rem;flex-wrap:wrap}
.nh-wearing__sw{display:flex;gap:4px}
.nh-wearing__sw i{width:14px;height:14px;border-radius:4px;display:block;border:1px solid var(--nh-line)}
.nh-wearing strong{font-weight:600}
.nh-wearing button{margin-left:auto;font:inherit;font-size:.85rem;color:var(--nh-muted);background:none;border:1px solid var(--nh-line);border-radius:999px;padding:5px 12px;cursor:pointer}
.nh-wearing button:hover{color:var(--nh-ink);border-color:var(--nh-line-hi)}
@media (max-width:760px){.nh-deck-wrap{padding-left:36px}.nh-deck{width:200px;height:320px}}
@media (prefers-reduced-motion:reduce){.nh-orb::before,.nh-orb__ring,.nh-orb__sphere,.nh-card__tier .is-live::before{animation:none}.nh-card,html{transition:none}}

/* ---- the app, drawn from the tokens (so it wears whatever the site wears) ---- */
.nh-app{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--nh-line);border-radius:var(--nh-r-md);background:var(--nh-surface);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);display:grid;grid-template-columns:150px minmax(0,1fr);min-height:380px;font-size:13px;line-height:1.45;color:var(--nh-ink);text-align:left;width:100%}
.nh-app--tall{min-height:460px}
.nh-app__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:0;opacity:0;transition:opacity .5s ease}
.nh-app.is-live .nh-app__bg{opacity:1}
.nh-app > :not(.nh-app__bg){position:relative;z-index:1}
.nh-app__side{background:var(--nh-bg);border-right:1px solid var(--nh-line);padding:14px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.nh-app.is-live .nh-app__side{background:color-mix(in srgb,var(--nh-bg) 72%,transparent);backdrop-filter:blur(10px)}
.nh-app__h{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--nh-muted);margin:8px 0 2px}
.nh-app__ch{padding:6px 8px;border-radius:8px;color:var(--nh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-app__ch.is-on{background:var(--nh-surface2);color:var(--nh-ink)}
.nh-app.is-live .nh-app__ch.is-on{background:color-mix(in srgb,var(--nh-surface2) 70%,transparent)}
.nh-app__main{display:flex;flex-direction:column;min-width:0}
.nh-app.is-live .nh-app__main{background:color-mix(in srgb,var(--nh-surface) 58%,transparent);backdrop-filter:blur(8px)}
.nh-app__bar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--nh-line);color:var(--nh-muted);font-size:12px}
.nh-app__bar .nh-orb{--s:16px}
.nh-app__chat{flex:1;padding:16px;display:flex;flex-direction:column;gap:11px}
.nh-app__split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);flex:1;min-height:0}
.nh-app__aside{border-left:1px solid var(--nh-line);padding:12px 14px;display:grid;gap:8px;align-content:start;color:var(--nh-muted);font-size:12px}
.nh-app__aside b{color:var(--nh-ink);font-weight:600}
.nh-app__aside p{margin:0}
.nh-msg{max-width:84%;padding:9px 12px;border-radius:12px}
.nh-msg--me{align-self:flex-end;background:var(--nh-accent);color:var(--nh-on-accent);border-bottom-right-radius:4px}
.nh-msg--nh{align-self:flex-start;background:var(--nh-surface2);border-bottom-left-radius:4px}
.nh-app.is-live .nh-msg--nh{background:color-mix(in srgb,var(--nh-surface2) 72%,transparent)}
.nh-msg__card{margin-top:8px;padding:7px 10px;border:1px solid var(--nh-line);border-radius:8px;font-size:11.5px;color:var(--nh-muted)}
.nh-msg__card b{color:var(--nh-ink);font-weight:600}
.nh-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 13px;background:var(--nh-surface2);border-radius:12px}
.nh-typing i{width:6px;height:6px;border-radius:50%;background:var(--nh-muted);animation:nh-blink 1.2s infinite}
.nh-typing i:nth-child(2){animation-delay:.2s}.nh-typing i:nth-child(3){animation-delay:.4s}
.nh-app__status{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--nh-line);color:var(--nh-muted);font-size:12px}
.nh-app__status i{width:7px;height:7px;border-radius:50%;background:var(--nh-accent);display:inline-block}
.nh-app__compose{margin:0 14px 14px;padding:9px 12px;border:1px solid var(--nh-line);border-radius:10px;color:var(--nh-muted);display:flex;justify-content:space-between;gap:8px}
.nh-app__compose span:last-child{color:var(--nh-accent)}
.nh-app__steps{display:grid;gap:6px;font-size:12px;color:var(--nh-muted)}
.nh-app__steps span{padding:6px 8px;border-left:2px solid var(--nh-accent);background:var(--nh-surface2);border-radius:0 8px 8px 0}
@media (max-width:760px){.nh-app{grid-template-columns:minmax(0,1fr);min-height:0}.nh-app__side{display:none}.nh-app__split{grid-template-columns:minmax(0,1fr)}.nh-app__aside{border-left:0;border-top:1px solid var(--nh-line)}}
@media (prefers-reduced-motion:reduce){.nh-typing i{animation:none}}

/* live loops inside the cards; the ready light under the orb in the app mock-ups */
.nh-card__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:0}
.nh-card__pv > :not(.nh-card__video){position:relative;z-index:1}
.nh-app__orb{display:inline-grid;justify-items:center;gap:3px}
.nh-app__light{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 6px #22C55E;display:block}
/* the conversation mock-up: give the chat column room, the reasoning aside reads at caption size */
.nh-app__split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.nh-app__aside{font-size:11.5px;padding:10px 12px}
.nh-app__aside .nh-app__steps span{padding:5px 7px}