/* Ozeka — the shared world.

   Decided 1 Oct: the landing page's identity is Ozeka's identity, and every
   surface extends it rather than inventing its own. This file is that identity:
   tokens, the stage she stands on, the bar, the readout, the controls. A surface
   adds its own sheet after this one; it does not restate any of it.

   Deliberately NOT here: #live's opacity choreography. It belongs to the landing's
   scroll, and a surface that inherited it rendered correctly into an invisible
   canvas for an hour. Shared means shared by every surface, not merely copied. */

/* Nunito, self-hosted. The no-webfonts rule in DESIGN.md existed because the
   Claude artifact host's CSP blocked every external origin; we serve from our
   own nginx now, so a same-origin face costs one request and 39 KB. Futura was
   the problem: geometric, architectural, and read as cold to an audience whose
   own work is anything but. Latin subset, variable 400–800, SIL OFL — the
   licence travels with it in fonts/OFL.txt. */
@font-face{
  font-family:Nunito;
  src:url(/fonts/nunito.woff2) format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Shifted violet on 31 Oct so the page and the creator pages it depicts stop
     fighting each other: the mocks are violet-magenta and a blue-navy ground
     beside them read as two unrelated products. Same darkness, warmer hue. */
  --ground:#100A24; --raise:#1B1340; --deep:#0A0618; --veil:#2A1F4E; --veil-2:#3C2C6E;
  --bone:#F2EFFA; --muted:#AEA1CE;
  /* --dim was #5A648A, which is 3.25:1 on --ground: it fails WCAG AA for
     small text, and --dim is only ever used at small sizes — kickers, the
     credit bar, the mock's furniture. Raised to the darkest value that
     clears 4.5:1 (4.83:1) so it still reads as furniture next to --muted. */
  --dim:#8C7FB4;
  /* One highlight across the whole product. This was cyan while the depicted
     creator pages used pink for the same job — two accent colours meaning
     "act on this", which read as two different products side by side. The
     page now takes the pink; cyan survives only inside a creator's own
     palette, where it marks a fact rather than an action. */
  --signal:#FF6FB5; --signal-d:#D95E97; --warm:#FFC46B;
  --display:Nunito,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:Nunito,"Avenir Next","Segoe UI",-apple-system,system-ui,sans-serif;
  --mono:Menlo,Consolas,"SF Mono",ui-monospace,monospace;
  /* --s--1 is for MONO LABELS ONLY — kickers, timestamps, counts. It is 11–12px
     and prose set at it is simply too small to read; the landing had most of its
     body copy there until 30 Oct, which is both a legibility failure and the
     single loudest "generated dark-mode page" tell there is.
     --s-0's floor was .95rem (15.2px). Raised to 1rem: below 16px iOS Safari
     zooms the page when an input takes focus, which broke the invite form on
     every iPhone. */
  /* Spacing, on an 8px grid. Every margin, padding and gap on the landing comes
     from this ladder and nowhere else. Before 30 Oct the sheet used .85rem,
     .95rem, 1.1rem, 1.3rem, 1.6rem, 2.25rem… — values picked one at a time by
     eye, which is precisely what makes a page read as amateur: nothing lines up
     with anything because nothing was ever measured against anything.
     Internal spacing is always <= the spacing around the thing. */
  --sp-1:.5rem;  --sp-2:1rem;  --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;   --sp-6:4rem;  --sp-7:6rem;   --sp-8:8rem;

  /* The product, depicted. A light panel is the one place this dark page goes
     light on purpose — see DESIGN.md § Showing the product. */
  --panel:#F4F6FC; --panel-2:#E4E9F6; --ink:#111833; --ink-2:#4A5578;
  /* Cyan and amber are unreadable on the light panel (1.7:1 and 1.9:1).
     These are the same hues taken down until they clear AA on it. */
  --signal-ink:#0E6F8A; --warm-ink:#8A5311;

  --s--1:clamp(.7rem,.68rem + .1vw,.76rem);
  --s-0:clamp(1rem,.96rem + .18vw,1.08rem);
  --s-1:clamp(1.12rem,1rem + .45vw,1.35rem);
  --s-2:clamp(1.45rem,1.2rem + 1.1vw,2.15rem);
  --s-3:clamp(1.9rem,1.35rem + 2.5vw,3.5rem);
  --s-4:clamp(2.35rem,1.5rem + 3.4vw,4.3rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--bone);font-family:var(--body);
     font-size:var(--s-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ====== stage: she is fixed, the page moves past her ====== */
#stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#stage::after{content:"";position:absolute;inset:0;
  transition:background .8s ease;
  background:radial-gradient(64% 58% at 74% 38%, rgba(79,209,232,.10), transparent 60%),
             linear-gradient(90deg, var(--ground) 0%, var(--ground) 26%, rgba(16,10,36,.90) 44%, rgba(16,10,36,0) 66%),
             linear-gradient(180deg, rgba(16,10,36,.72) 0%, rgba(16,10,36,0) 18%);}
#stage.reading::after{
  background:radial-gradient(58% 55% at 82% 42%, rgba(79,209,232,.08), transparent 62%),
             linear-gradient(90deg, var(--ground) 0%, var(--ground) 50%, rgba(16,10,36,.80) 66%, rgba(16,10,36,.28) 88%, rgba(16,10,36,.18) 100%),
             linear-gradient(180deg, rgba(16,10,36,.80) 0%, rgba(16,10,36,0) 14%);}
#live{position:absolute;inset:0;transition:opacity 1.2s ease,transform .8s cubic-bezier(.4,0,.2,1)}
#live canvas{width:100%;height:100%;display:block}
#fallback{position:absolute;right:6vw;bottom:8vh;max-width:34ch;color:var(--dim);
          font-family:var(--mono);font-size:var(--s--1);display:none}

/* ====== readout — proof, in the vernacular of the tool ====== */
#readout{position:fixed;left:0;right:0;bottom:0;z-index:12;display:flex;
  align-items:center;justify-content:space-between;gap:1.5rem;
  padding:var(--sp-1) clamp(1.5rem,4vw,4rem);
  background:var(--deep);border-top:1px solid var(--veil);
  font-family:var(--mono);font-size:var(--s--1);letter-spacing:.05em;color:var(--dim);
  pointer-events:none;transform:translateY(101%);transition:transform .45s ease}
#readout.on{transform:none}
#readout .rt{display:flex;gap:1.25rem;align-items:center;min-width:0}
#readout .rt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){#readout .drop{display:none}}
#readout b{color:var(--signal);font-weight:400}
#readout .fire{color:var(--bone)}

/* ====== credit — the model's author, fixed to the bottom ======
   2ex asks, on the nizima listing, that the model carry her name wherever it is
   used. A line in the footer would satisfy the letter of that and nothing else,
   so it rides with her instead: always on screen, never in the way. Shared
   because any surface that renders her owes her the same line. */
/* The dock is what is pinned to the foot of the window; the credit rides in
   it. On a phone the primary action rides in it too, because that is where a
   thumb can reach and the page is long enough that a CTA at the top is gone
   after one swipe. One fixed assembly rather than two stacked bars. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--deep)}
/* Scoped, because .btn is declared further down and would otherwise win:
   the phone's CTA was showing in the corner of every desktop page. */
.dock > .dock-cta{display:none}

.credit{display:flex;align-items:baseline;gap:.5rem;
  padding:var(--sp-1) clamp(1.5rem,4vw,4rem);
  border-top:1px solid var(--veil);
  font-family:var(--mono);font-size:var(--s--1);letter-spacing:.04em;line-height:1.5;color:var(--dim)}
.credit .hz{color:var(--warm);font-size:var(--s-0);line-height:1}
.credit p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.credit a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--veil-2)}
.credit a:hover{color:var(--bone);border-bottom-color:var(--signal)}
@media (max-width:640px){
  .credit p{white-space:normal}
  .credit .at{display:none}
}

/* ====== flow ====== */
.flow{position:relative;z-index:2;width:min(100%,1320px);margin:0 auto;
      padding:0 clamp(1.5rem,4vw,4rem)}

/* ====== bar ====== */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:var(--sp-2) clamp(1.5rem,4vw,4rem);
  background:var(--ground);border-bottom:1px solid transparent;
  transition:border-color .3s ease}
.bar.solid{border-bottom-color:var(--veil)}
.mark{font-family:var(--display);font-size:1rem;letter-spacing:.34em;text-transform:uppercase;
  color:inherit;text-decoration:none}
.mark i{font-style:normal;color:var(--signal)}
.bar nav{display:flex;gap:var(--sp-3);align-items:center}
/* No extra tracking: these are sentence case, not labels, and Menlo is
   already generously spaced. Wide tracking belongs to short uppercase runs
   like .lbl and .mark, where it reads as a label rather than as text. */
.bar a{font-size:var(--s-0);color:var(--muted);text-decoration:none}
.bar a:hover{color:var(--bone)}
.bar .go{color:var(--deep);background:var(--signal);padding:var(--sp-1) var(--sp-2);
  border-radius:999px;font-weight:600}
.bar .go:hover{background:#FF8CC5}
@media (max-width:760px){.bar .s{display:none}}

/* ====== generic block ====== */
.blk{padding:var(--sp-6) 0;scroll-margin-top:var(--sp-6)}
.blk h2{font-size:var(--s-3);max-width:24ch}
.blk .lede{margin-top:var(--sp-2);color:var(--muted);font-size:var(--s-1);line-height:1.5;max-width:48ch}
.kicker{margin-bottom:var(--sp-3)}

/* ====== controls ====== */
.btn{font-family:var(--body);font-weight:600;font-size:var(--s-0);letter-spacing:.04em;
  text-decoration:none;padding:var(--sp-2) var(--sp-4);display:inline-block;border:1px solid transparent;
  background:none;color:inherit;cursor:pointer}
.b1{background:var(--signal);color:var(--deep);border-radius:999px}
.b1:hover{background:#FF8CC5}
.b2{border-color:var(--veil-2);color:var(--bone);border-radius:999px}
.b2:hover{border-color:var(--signal);color:var(--signal)}
.btn[disabled]{opacity:.34;cursor:default}
.b1[disabled]:hover{background:var(--signal)}