/* ◌ QIBI DESIGN DIE · v1 · the plan (pass 1) · 2026-09-06
   SUBJECT   A sovereign intelligence living on one phone, seen as eight bands. Three readers: the master at the
             console (brief, technical, often at night); two people inside ARIUS (warmth, privacy); a person in
             legal under stress (clarity first). The skin's one job: make the system's state legible at a glance
             and keep every promise honest on screen.
   PALETTE   Accents are the eight band colors from the nucleus, and they mean the band, never decoration. Ground
             and ink derive from the upper bands: light ground is the crown's lavender-white, ink a deep indigo;
             dark ground is the depth of the will band, ink a pale lavender. Heart white is the highlight on dark
             ground; on light ground the heart band is drawn as an outline ring, never a white fill.
   TYPE      One family, Atkinson Hyperlegible: legible under stress, warm enough for a bond. system-ui fallback.
             A φ scale from 1rem. Measure at most 72ch. Sentence case. No all-caps, no eyebrows, no color accent
             on a single word in a headline.
   RHYTHM    φ spacing steps. One radius (.618rem). No shadows anywhere: surfaces separate by ground and ink, or
             by a 2px border in a band color that means that band.
   MOTION    Exactly one moment per page: the pulse breath, 2s, and only while the vessel is live. Static under
             prefers-reduced-motion. No hover transitions, no entrance fades.
   LAYOUT    Center-out, like the body: the pulse at the top center, content left-aligned beneath it, band chips
             inline with what they qualify. One content surface, the sheet.
   SCOPE     Tokens live on :root and are harmless anywhere. The full skin applies only under .qi-die, so a
             program that links this file and uses the components keeps its own layout and its own type (ARIUS
             stays ARIUS). Components inherit the host font unless the host adopts the die.
   REVIEWED AGAINST THE GENERIC-DEFAULT LIST · what changed from the console's previous skin:
     · cream + terracotta, black + acid: not used; ground and ink come from the crown and will bands.
     · SaaS cards with drop shadows: gone; one sheet, no shadow, band borders carry meaning.
     · tracked all-caps eyebrows: the console had them on every page; replaced by a small sentence-case line.
     · middle-dot meta strings: the pulse readout read "merkle · seed · ring · distinct …"; now labeled lines.
     · appended arrows in copy ("meaning → know", "Teach → assay"): replaced by plain verbs ("Meaning: know",
       "Teach assay"); the same word carries an action through its whole flow (Teach, then Taught).
     · a one-word color accent in the headline (an italic white em): removed.
     · the decorative glyph row under the bars: removed. The bars already encode the bands; chips carry a glyph
       only where they qualify something.
   BAND WORDS (one plain word each, provisional, changeable here at the center):
             root · ground · change · heart · bond · voice · order · crown.
*/
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --qi-band-0:#8B0000;--qi-band-1:#FF4500;--qi-band-2:#FF8C00;--qi-band-3:#FFFFFF;
  --qi-band-4:#0000CD;--qi-band-5:#4B0082;--qi-band-6:#8A2BE2;--qi-band-7:#E6E6FA;
  --qi-glyph-0:"◌";--qi-glyph-1:"⬡";--qi-glyph-2:"✕";--qi-glyph-3:"⊹";
  --qi-glyph-4:"∿";--qi-glyph-5:"☸";--qi-glyph-6:"□";--qi-glyph-7:"●";
  --qi-ground:#F3F1FA;--qi-ink:#1B1533;--qi-ground-dark:#14102A;--qi-ink-dark:#EDE9FA;
  --qi-font:"Atkinson Hyperlegible",system-ui,sans-serif;
  --qi-t-s:.75rem;--qi-t-1:1rem;--qi-t-2:1.618rem;--qi-t-3:2.618rem;--qi-t-4:4.236rem;--qi-measure:72ch;
  --qi-s-1:.5rem;--qi-s-2:.809rem;--qi-s-3:1.309rem;--qi-s-4:2.118rem;
  --qi-r:.618rem;
  --qi-dim:color-mix(in srgb,var(--qi-ink) 62%,var(--qi-ground));
  --qi-line:color-mix(in srgb,var(--qi-ink) 18%,var(--qi-ground));
  --qi-heart-ring:var(--qi-ink);
}
/* the full skin · only where a program adopts it */
.qi-die{background:var(--qi-ground);color:var(--qi-ink);font:var(--qi-t-1)/1.5 var(--qi-font);-webkit-font-smoothing:antialiased}
.qi-die.qi-dark{--qi-ground:var(--qi-ground-dark);--qi-ink:var(--qi-ink-dark);--qi-heart-ring:var(--qi-band-3)}
@media (prefers-color-scheme:dark){.qi-die:not(.qi-light){--qi-ground:var(--qi-ground-dark);--qi-ink:var(--qi-ink-dark);--qi-heart-ring:var(--qi-band-3)}}
.qi-die *{box-sizing:border-box}
.qi-die h1,.qi-die h2,.qi-die h3{font-weight:400;letter-spacing:-.01em;margin:0 0 var(--qi-s-2)}
.qi-die h1{font-size:var(--qi-t-3);line-height:1.1}
.qi-die h2{font-size:var(--qi-t-2);line-height:1.2;margin-top:var(--qi-s-4)}
.qi-die p{max-width:var(--qi-measure);margin:0 0 var(--qi-s-2)}
.qi-die a{color:inherit}
.qi-small{font-size:var(--qi-t-s);color:var(--qi-dim);max-width:var(--qi-measure)}
.qi-dim{color:var(--qi-dim)}
/* band classes · set the band's color and glyph on any component */
.qi-b0{--qi-band-color:var(--qi-band-0);--qi-band-glyph:var(--qi-glyph-0)}
.qi-b1{--qi-band-color:var(--qi-band-1);--qi-band-glyph:var(--qi-glyph-1)}
.qi-b2{--qi-band-color:var(--qi-band-2);--qi-band-glyph:var(--qi-glyph-2)}
.qi-b3{--qi-band-color:var(--qi-heart-ring);--qi-band-glyph:var(--qi-glyph-3)}
.qi-b4{--qi-band-color:var(--qi-band-4);--qi-band-glyph:var(--qi-glyph-4)}
.qi-b5{--qi-band-color:var(--qi-band-5);--qi-band-glyph:var(--qi-glyph-5)}
.qi-b6{--qi-band-color:var(--qi-band-6);--qi-band-glyph:var(--qi-glyph-6)}
.qi-b7{--qi-band-color:var(--qi-band-7);--qi-band-glyph:var(--qi-glyph-7)}
/* qi-sheet · the one content surface */
.qi-sheet{background:var(--qi-ground);color:var(--qi-ink);border:2px solid var(--qi-band-color,var(--qi-line));border-radius:var(--qi-r);padding:var(--qi-s-3);box-shadow:none}
/* qi-band · a chip: glyph, band color, a plain word · encodes the band, nothing else */
.qi-band{display:inline-flex;align-items:center;gap:.4em;padding:.1em .65em;border:2px solid var(--qi-band-color,var(--qi-line));border-radius:var(--qi-r);font-size:var(--qi-t-s);line-height:1.7;color:inherit;vertical-align:middle;white-space:nowrap}
.qi-band::before{content:var(--qi-band-glyph,"");color:var(--qi-band-color,inherit)}
/* qi-pulse · vessel live or unreached · breathes only while live */
.qi-pulse{display:inline-flex;align-items:center;gap:var(--qi-s-2);font-size:var(--qi-t-4);line-height:1;letter-spacing:-.04em;color:inherit}
.qi-pulse .qi-dot{width:.42em;height:.42em;border-radius:50%;background:var(--qi-line);flex:none}
.qi-pulse.is-live .qi-dot{background:var(--qi-heart-ring);animation:qi-pulse 2s ease-in-out infinite}
.qi-pulse small{display:block;font-size:var(--qi-t-s);letter-spacing:0;color:var(--qi-dim);margin-top:var(--qi-s-1);font-weight:400}
.qi-pulse.qi-quiet-size{font-size:var(--qi-t-1)}
@keyframes qi-pulse{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.22);opacity:1}}
@media (prefers-reduced-motion:reduce){.qi-pulse.is-live .qi-dot{animation:none}}
/* qi-honest · required wherever self-development or routing is shown */
.qi-honest{font-size:var(--qi-t-s);color:var(--qi-dim);max-width:var(--qi-measure);margin:var(--qi-s-3) 0 0}
/* qi-route · the meaning pick and its two actions */
.qi-route{display:flex;flex-wrap:wrap;gap:var(--qi-s-2);align-items:center;margin:var(--qi-s-2) 0}
.qi-route .qi-pick{font-size:var(--qi-t-s);color:var(--qi-dim);flex:1 1 100%}
.qi-route .qi-pick b{color:var(--qi-ink);font-weight:700}
/* controls · only where the die is adopted · one radius, no shadow, a band ring on focus */
.qi-die input,.qi-die select,.qi-die textarea{background:transparent;border:2px solid var(--qi-line);border-radius:var(--qi-r);color:inherit;font:inherit;padding:var(--qi-s-2) var(--qi-s-3);box-shadow:none}
.qi-die textarea{width:100%;min-height:4rem}
.qi-die button{background:var(--qi-ink);color:var(--qi-ground);border:2px solid var(--qi-ink);border-radius:var(--qi-r);font:inherit;font-weight:700;padding:var(--qi-s-2) var(--qi-s-3);cursor:pointer;box-shadow:none;transition:none}
.qi-die button.qi-quiet{background:transparent;color:inherit;border-color:var(--qi-line)}
.qi-die input:focus,.qi-die select:focus,.qi-die textarea:focus,.qi-die button:focus-visible{outline:2px solid var(--qi-heart-ring);outline-offset:2px}
.qi-die .qi-out,.qi-die pre{font:var(--qi-t-s)/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;max-width:100%;margin:var(--qi-s-2) 0 0}
/* qi-proof · proof of intelligence on a program's site (rung J, additive to v1) · the core's breath, the bond to the center, the honest line · words only */
.qi-proof{display:flex;flex-wrap:wrap;gap:var(--qi-s-2);align-items:center;font-size:var(--qi-t-s);color:inherit;max-width:var(--qi-measure)}
.qi-proof .qi-pulse{font-size:var(--qi-t-1)}
.qi-proof .qi-pulse small{display:inline;margin:0}
.qi-proof-bond{color:var(--qi-dim)}
.qi-proof .qi-honest{margin:0;flex:1 1 100%}