/* ═══════════════════════════════════════════════════════════════════════
   GOJA — a dark theme of the PRIZM system, for a piece that lives at night.
   Proposed 2026-09-27 for daemn.co/ai-slop/ (see THEME.md). Merge target:
   the end of studio.css.

   THE IDEA: the Goja gallery's neon. The page is the dark around the sign —
   a deep purple-black ground, bone ink, one violet-magenta glow behind the
   work. Same three faces, same spine, same radii; only the light changes.
   Put class="theme-goja" on <body>; every token below is redefined for
   everything inside it, so the shared primitives (.eyebrow, .btn, .label,
   nav.bar, footer.bot) come out dark with no page CSS.

   The spectrum keeps its jobs, lifted so each reads on the dark. The glow is
   the only decoration, and only the piece and a floating object get it.
   ═══════════════════════════════════════════════════════════════════════ */
.theme-goja{
  color-scheme:dark;
  /* the ground and the ink */
  --bone:#0E0C14;          /* the ground — purple-black, never #000   */
  --paper:#151120;         /* a panel on the ground                  */
  --card:#1B1628;          /* a card, a frame's backing              */
  --ink:#F3EEFB;           /* bone ink, never #fff                   */
  --ink-2:#CFC6DF;
  --ink-3:#A9A0BB;
  --line:rgba(243,238,251,.12);
  --line-2:rgba(243,238,251,.24);
  /* the spectrum, lifted for the dark; jobs unchanged */
  --violet:#B264FF;
  --indigo:#7B61FF;
  --cyan:#3CD2F0;
  --green:#3DD68C;
  --amber:#FFB02E;
  --coral:#FF6A4D;
  --magenta:#FF5CC8;
  --prism:linear-gradient(96deg,#6D3BF5,#B264FF,#FF5CC8);
  /* new: the Goja light itself */
  --goja:#B264FF;
  --glow:rgba(178,100,255,.28);
  --glow-2:rgba(255,92,200,.14);
  --float:0 0 0 1px rgba(243,238,251,.08),0 30px 120px rgba(178,100,255,.28);
  /* the four stems, for the sound map and its legend */
  --stem-drums:#FF6A4D;
  --stem-bass:#B264FF;
  --stem-vocals:#3CD2F0;
  --stem-other:#FFB02E;
  /* ── neon system v1 (THEME.md): the light as tube, glass and motion ── */
  --neon-spectrum:conic-gradient(from 0deg,#B264FF,#FF5CC8,#3CD2F0,#7B61FF,#B264FF);  /* the ring: violet → magenta → cyan → indigo */
  --neon-line:linear-gradient(90deg,#B264FF,#FF5CC8 55%,#3CD2F0);                     /* a lit line, a filled segment */
  --neon-wordmark:linear-gradient(90deg,#F3EEFB,#B264FF 20%,#FF5CC8 42%,#3CD2F0 64%,#F3EEFB 84%,#F3EEFB);  /* the wordmark, flowing */
  --neon-text:0 0 1px rgba(243,238,251,.55),0 0 10px rgba(178,100,255,.5),0 0 28px rgba(255,92,200,.22);   /* a heading, lit */
  --neon-soft:0 0 6px rgba(178,100,255,.55),0 0 16px rgba(255,92,200,.2);                                   /* a small thing, lit */
  --neon-drop:drop-shadow(0 0 8px rgba(178,100,255,.5));                                                    /* glow for clipped text / tiny marks */
  --neon-edge:0 0 0 1px rgba(178,100,255,.6),0 0 18px rgba(178,100,255,.34),inset 0 0 14px rgba(178,100,255,.16);  /* a control, hovered */
  --neon-press:0 0 0 1px rgba(255,92,200,.75),0 0 26px rgba(255,92,200,.42),inset 0 0 18px rgba(255,92,200,.22);   /* a control, pressed */
  --neon-hot:rgba(255,92,200,.55);           /* the ripple's core */
  --glass:rgba(27,22,40,.62);                /* a control's body: card, see-through */
  --glass-line:rgba(243,238,251,.18);        /* a control's rim at rest */
  --scrim:rgba(14,12,20,.78);                /* legibility wash over media */
  --pattern-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cdefs%3E%3Cg id='s'%3E%3Ccircle r='19' fill='%230E0C14' stroke='%23B264FF'/%3E%3Ccircle r='14' fill='none' stroke='%23B264FF'/%3E%3Ccircle r='9' fill='none' stroke='%23B264FF'/%3E%3Ccircle r='4' fill='none' stroke='%23B264FF'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' x='20' y='-10'/%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='40' y='0'/%3E%3Cuse href='%23s' x='20' y='10'/%3E%3Cuse href='%23s' x='0' y='20'/%3E%3Cuse href='%23s' x='40' y='20'/%3E%3Cuse href='%23s' x='20' y='30'/%3E%3C/svg%3E");  /* seigaiha, the wave */
  --ease-portal:cubic-bezier(.7,0,.2,1);     /* stepping through */
  --ease-settle:cubic-bezier(.16,1,.3,1);    /* landing */
  --t-fast:.18s; --t-mid:.42s; --t-slow:.7s;
  --ring-spin:6.5s; --ring-breathe:3.4s;
}
body.theme-goja{
  background:
    radial-gradient(60% 40% at 50% 0%, var(--glow) 0%, transparent 62%),
    radial-gradient(50% 40% at 100% 60%, var(--glow-2) 0%, transparent 60%),
    var(--bone);
  background-attachment:fixed;
}
.theme-goja ::selection{background:var(--goja);color:var(--bone)}
body.theme-goja::after{opacity:.06}

/* ── the piece: frames either side, the video in the middle, glowing ──── */
.gj-hero{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s6);align-items:center;
  padding-block:var(--s5) var(--s7)}
.gj-piece{display:grid;justify-items:center;gap:var(--s4);text-align:center}
.gj-piece h1{font-size:clamp(44px,6.4vw,72px);letter-spacing:-.02em}
.gj-piece .eyebrow{justify-content:center}
.gj-quote{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.3;
  letter-spacing:-.01em;text-wrap:balance;max-width:24ch;margin-inline:auto}
.gj-video{width:min(420px,86vw,calc(80svh * 9 / 16));aspect-ratio:9/16;display:block;border-radius:var(--r3);background:var(--card);
  box-shadow:var(--float)}
.gj-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.gj-side figure,.gj-strip figure{margin:0;display:grid;gap:6px}
.gj-side img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r2);opacity:.94}
.gj-side figcaption,.gj-strip figcaption,.gj-cards figcaption,.gj-fig figcaption{font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.35}
.gj-strip figcaption{text-transform:none;letter-spacing:.02em;font-size:11px}
.gj-strip figcaption b,.gj-cards figcaption b{color:var(--goja);font-weight:500;margin-right:4px}

/* ── a making-of section: eyebrow, one plain line, the visuals ──────── */
.gj-sec{padding-block:clamp(var(--s7),9vw,120px) 0}
.gj-sec > .eyebrow{margin-bottom:var(--s3)}
.gj-sec > h2{margin-bottom:var(--s2)}
.gj-sec > .lede{margin-bottom:var(--s5)}
.gj-sec h3{margin:var(--s6) 0 var(--s3)}
.gj-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--goja);margin-right:var(--s2)}

/* the frames, in running order, scrolled sideways */
.gj-strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(128px,14vw,170px);gap:var(--s3);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
.gj-strip figure{scroll-snap-align:start}
.gj-strip img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r2);border:1px solid var(--line)}

/* cards of tall media — clips, stills */
.gj-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s3)}
.gj-cards figure{margin:0;display:grid;gap:6px;align-content:start}
.gj-cards img,.gj-cards video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--card)}
.gj-cards.real figure:first-child img{outline:2px solid var(--goja);outline-offset:2px}

/* one wide piece of media: a comparison clip, a grid still, a sheet */
.gj-fig{margin:0;display:grid;gap:var(--s2)}
.gj-fig img,.gj-fig video{width:100%;height:auto;border-radius:var(--r2);border:1px solid var(--line);background:var(--card)}
.gj-labels{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gj-labels span:first-child{color:var(--goja)}

/* the character sheets: one look per row */
.gj-look{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:var(--s4);align-items:start;
  padding-block:var(--s5);border-top:1px solid var(--line)}
.gj-look > figure{margin:0;display:grid;gap:6px}
.gj-look > figure img{width:100%;height:auto;border-radius:var(--r2);border:1px solid var(--line)}
.gj-look h3{margin:0 0 var(--s1)}
.gj-look .gj-sheets + h3{margin-top:var(--s5)}
.gj-sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s2)}
.gj-sheets img{width:100%;height:auto;border-radius:var(--r1);border:1px solid var(--line);background:var(--card)}

/* the objects: the 3D carousel on the dark, with its glow */
.gj-carousel{position:relative;width:100%;height:600px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  background:radial-gradient(46% 42% at 50% 58%, var(--glow) 0%, transparent 70%)}
.gj-carousel.grabbing{cursor:grabbing}
.gj-carousel canvas{display:block;width:100%;height:100%;touch-action:pan-y}

/* the sound: the stem map, the moves, the excerpts */
.gj-map{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--paper);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.gj-map svg{display:block;width:100%;min-width:760px;height:auto}
.gj-map text{font-family:var(--mono);fill:var(--ink-3);font-size:11px;letter-spacing:.06em}
.gj-map .t-bar{fill:var(--ink-2)}
.gj-map .t-lane{fill:var(--ink);text-transform:uppercase;font-size:10.5px;letter-spacing:.12em}
.gj-map .t-move{fill:var(--goja);font-size:10.5px}
.gj-map .grid{stroke:var(--line);stroke-width:1}
.gj-map .grid.bar1{stroke:var(--line-2)}
.gj-map .band{fill:var(--goja);opacity:.1}
.gj-map .band.drums{fill:var(--stem-drums)}
.gj-map .kick{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.gj-map .note{fill:var(--stem-bass);opacity:.9}
.gj-map .keyline{stroke:var(--line);stroke-dasharray:2 4}
.gj-map .env{opacity:.85}
.gj-map .env.drums{fill:var(--stem-drums)} .gj-map .env.bass{fill:var(--stem-bass)}
.gj-map .env.vocals{fill:var(--stem-vocals)} .gj-map .env.other{fill:var(--stem-other)}
.gj-map .head{stroke:var(--ink);stroke-width:1.5;opacity:0;transition:opacity .3s}
.gj-map .head.on{opacity:.9}
.gj-moves{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s2);margin-top:var(--s4);
  padding:0;list-style:none;max-width:none}
.gj-moves li{margin:0;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r2);background:var(--paper);font-size:14px}
.gj-moves b{display:block;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--goja);margin-bottom:2px}
.gj-stems{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s2);margin-top:var(--s5)}
.gj-stem{display:grid;gap:var(--s2);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r2);background:var(--paper);
  --hue:var(--goja);border-top:3px solid var(--hue)}
.gj-stem .label{color:var(--ink)}
.gj-stem audio{width:100%;height:36px}
.gj-loop{margin-top:var(--s4);border-top-width:4px}
.gj-loop + .gj-stems{margin-top:var(--s2)}
.gj-stem.drums{--hue:var(--stem-drums)} .gj-stem.bass{--hue:var(--stem-bass)}
.gj-stem.vocals{--hue:var(--stem-vocals)} .gj-stem.other{--hue:var(--stem-other)}

/* the edit: the whole piece as layers on one clock (page.js §3) */
.gj-edit-top{display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:var(--s4);align-items:end;margin-bottom:var(--s3)}
.gj-edit-video{width:100%;height:auto;aspect-ratio:9/16;border-radius:var(--r2);background:var(--card);box-shadow:var(--float);display:block}
.gj-edit-key{display:grid;gap:var(--s3)}
.gj-now{color:var(--ink);font-size:12px;min-height:3em;font-variant-numeric:tabular-nums}
.gj-key{list-style:none;padding:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px var(--s3)}
.gj-key li{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-2)}
.gj-key i{width:18px;height:10px;border-radius:3px;flex:none;background:var(--hue)}
.k-real{--hue:var(--cyan)} .k-ai{--hue:var(--magenta)} .k-3d{--hue:var(--violet)} .k-open{--hue:var(--green)}
.k-fit{--hue:var(--amber)} .k-flash{--hue:var(--coral)} .k-obj{--hue:var(--indigo)} .k-cam{--hue:var(--line-2)}
.gj-edit{display:grid;grid-template-columns:92px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r2);background:var(--paper);overflow:hidden}
.gj-edit-labels{display:grid;align-content:start;border-right:1px solid var(--line);padding-bottom:6px}
.gj-edit-labels span{display:flex;align-items:center;padding-left:var(--s3);font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line);box-sizing:border-box}
.gj-edit-labels span:first-child{border-top:0}
.gj-edit-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;cursor:pointer}
.gj-edit-scroll > .label{padding:var(--s4)}
.gj-edit svg{display:block}
.gj-edit text{font-family:var(--mono);fill:var(--ink-3);font-size:10.5px;letter-spacing:.04em;pointer-events:none}
.gj-edit .t-bar{fill:var(--ink-2)}
.gj-edit .t-in{fill:var(--bone);font-weight:500}
.gj-edit .t-flash{fill:var(--coral)}
.gj-edit .grid{stroke:var(--line);stroke-width:1}
.gj-edit .grid.bar1{stroke:var(--line-2)}
.gj-edit .e-pre{fill:var(--green);opacity:.06}
.gj-edit .e-scene{fill:var(--cyan)} .gj-edit .e-scene.ai{fill:var(--magenta)} .gj-edit .e-scene.d3{fill:var(--violet)}
.gj-edit .e-scene.mix{fill:var(--indigo)} .gj-edit .e-scene.open{fill:var(--green)}
.gj-edit .e-cam{fill:var(--line-2)} .gj-edit .e-cam + .t-in{fill:var(--ink)}
.gj-edit .e-turn{fill:var(--cyan)}
.gj-edit .e-hat{fill:var(--ink)}
.gj-edit .e-jump{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.gj-edit .e-fit{fill:var(--amber)}
.gj-edit .e-flash{fill:var(--coral)}
.gj-edit .e-obj{fill:var(--indigo)} .gj-edit .e-obj + .t-in{fill:var(--ink)}
.gj-edit .e-lens{fill:var(--ink);stroke:var(--bone);stroke-width:1.5}
.gj-edit .e-fin{fill:var(--goja);opacity:.55} .gj-edit .e-fin.frz{fill:var(--cyan);opacity:.8}
.gj-edit .e-fin + .t-in{fill:var(--ink)}
.gj-edit .e-lead{fill:var(--green);opacity:.5}
.gj-edit .e-barl{stroke:var(--line-2)}
.gj-edit .kick{stroke:var(--stem-drums);stroke-width:2;stroke-linecap:round}
.gj-edit .e-ref{stroke:var(--line);stroke-dasharray:2 4}
.gj-edit .t-ref{font-size:9px;fill:var(--ink-3)}
.gj-edit .e-curve{fill:none;stroke-width:1.75;stroke-linejoin:round}
.gj-edit .c-speed{stroke:var(--cyan)} .gj-edit .c-zoom{stroke:var(--goja)} .gj-edit .c-turn{stroke:var(--magenta)}
.gj-edit .c-ref{stroke:var(--green)} .gj-edit .c-osize{stroke:var(--indigo)} .gj-edit .c-ospeed{stroke:var(--amber)}
.gj-edit .e-pic{fill:var(--ink-3);opacity:.55} .gj-edit .e-pic.r1{fill:var(--cyan);opacity:.45}
.gj-edit .e-pic + .t-in{fill:var(--ink)}
.gj-edit .head{stroke:var(--ink);stroke-width:1.5;opacity:.95}
.gj-edit rect:hover{filter:brightness(1.25)}
@media (max-width:620px){
  .gj-edit-top{grid-template-columns:120px 1fr;gap:var(--s3)}
  .gj-edit{grid-template-columns:72px minmax(0,1fr)}
  .gj-edit-labels span{padding-left:8px;font-size:9px;letter-spacing:.08em}
  .gj-key{grid-template-columns:1fr}
}

/* live 3D objects, one per tile (objects-grid.js draws them all through one click-through canvas) */
.gj-objs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3);margin-top:var(--s3)}
.gj-obj{margin:0;display:grid;gap:6px;align-content:start}
.gj-obj-view{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r2);touch-action:pan-y;cursor:grab;
  background:radial-gradient(70% 70% at 50% 40%,var(--glow) 0%,transparent 70%),var(--card)}
.gj-obj-view:active{cursor:grabbing}
.gj-obj:not(.ready) .gj-obj-view{animation:gj-pulse 1.6s ease-in-out infinite}
@keyframes gj-pulse{50%{opacity:.6}}
.gj-obj figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}
.gj-obj figcaption b{display:block;color:var(--ink);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.gj-objs{position:relative}
.gj-objs-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
@media (max-width:620px){.gj-objs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* bonus: the memes, two up */
.gj-memes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);max-width:760px}
.gj-memes figure{margin:0;display:grid;gap:var(--s2)}
.gj-memes video{width:100%;height:auto;aspect-ratio:9/16;border-radius:var(--r2);background:var(--card);box-shadow:var(--float);display:block}
.gj-memes figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
.gj-memes figcaption b{display:block;color:var(--goja);font-weight:500;letter-spacing:.1em;text-transform:uppercase}

/* the quality picker under the piece (stream.js): Auto, or a fixed quality up to the 1080p master */
.gj-quality{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.gj-quality select{appearance:none;-webkit-appearance:none;font:inherit;letter-spacing:.06em;color:var(--ink);background:var(--card);
  border:1px solid var(--line-2);border-radius:999px;padding:8px 30px 8px 14px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.gj-quality select:focus-visible{outline:2px solid var(--goja);outline-offset:2px}
.gj-piece .btns{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;align-items:center}
.gj-edit-top .gj-quality{margin-top:var(--s2)}

/* the piece: a muted preview under a Play button; Play starts it from the top with sound and the player's controls */
.gj-player{position:relative;display:block;width:fit-content;max-width:100%;margin-inline:auto}
.gj-play{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px 14px 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--bone);color:var(--ink);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;box-shadow:var(--float);transition:transform .2s ease,opacity .25s ease}
.gj-play:hover{transform:scale(1.04)}
.gj-play:focus-visible{outline:2px solid var(--goja);outline-offset:3px}
.gj-play-icon{width:0;height:0;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--goja)}
.gj-preview-tag{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;background:var(--bone);color:var(--ink-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;pointer-events:none}
.gj-player.is-playing .gj-play,.gj-player.is-playing .gj-preview-tag{opacity:0;pointer-events:none}

/* how it was made: a pipeline, left to right (top to bottom on a phone) */
.gj-pipe{list-style:none;padding:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2);
  counter-reset:gp}
.gj-pipe li{counter-increment:gp;margin:0;position:relative;padding:var(--s4) var(--s3);border:1px solid var(--line);
  border-radius:var(--r2);background:var(--paper);font-size:13.5px;color:var(--ink-2)}
.gj-pipe li::before{content:counter(gp,decimal-leading-zero);display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--goja);margin-bottom:var(--s2)}
.gj-pipe li:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);color:var(--goja);z-index:1}
.gj-pipe b{display:block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}

/* credits */
.gj-credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4) var(--s5);margin:0}
.gj-credits dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.gj-credits dd{margin:2px 0 0;color:var(--ink)}

@media (max-width:980px){
  .gj-hero{grid-template-columns:1fr;gap:var(--s5)}
  .gj-piece{order:1}
  .gj-side{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gj-side.left{order:2} .gj-side.right{order:3}
  .gj-pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gj-pipe li:nth-child(3)::after{content:none}
}
@media (max-width:620px){
  .gj-pipe{grid-template-columns:1fr}
  .gj-pipe li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%) rotate(90deg)}
  .gj-pipe li:nth-child(3):not(:last-child)::after{content:"→"}
  .gj-pipe li:not(:last-child){margin-bottom:var(--s2)}
  .gj-look{grid-template-columns:1fr}
  .gj-look > figure{max-width:180px}
  .gj-sheets{grid-template-columns:1fr 1fr}
  .gj-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gj-labels{font-size:9px;letter-spacing:.06em}
  /* the carousel on a phone: square, so the whole ride fits the width with room round it */
  .gj-carousel{height:auto;aspect-ratio:1/1.08}
}

/* ═══ the feed: a profile, the pinned piece, then one post per part of the making-of ═══
   feed.js puts .gj-app on <html>. Without it (no script) every section simply shows in a
   column, and the posts work as a contents list. With it, the landing is the feed and a
   post opens its part as a full-screen view (.gj-sec.on), deep-linked by a bare hash. */
.gj-profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s5);align-items:center;
  padding-block:var(--s3) var(--s4)}
.gj-avatar{width:clamp(76px,18vw,120px);aspect-ratio:1;border-radius:var(--r4);padding:3px;background:var(--prism)}
button.gj-avatar{display:block;border:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gj-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:var(--r4);border:3px solid var(--bone)}
.gj-who h1{font-size:clamp(24px,4vw,34px);letter-spacing:-.02em}
.gj-who .label{margin-top:2px}
.gj-stats{display:flex;gap:var(--s5);margin:var(--s3) 0 0;padding:0;list-style:none;max-width:none}
.gj-stats li{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.gj-stats b{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);text-transform:none}
.gj-bio{grid-column:1/-1;color:var(--ink-2);font-size:14.5px;max-width:60ch}
.gj-pin{display:inline-flex;align-items:center;gap:6px;color:var(--goja)}
.gj-app .gj-hero{padding-block:var(--s4) var(--s6)}

.gj-feed{padding-block:0 var(--s8)}
.gj-feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.gj-feed-head{max-width:520px;margin-inline:auto}
.gj-posts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);max-width:520px;margin-inline:auto}
.gj-post-top{display:flex;align-items:center;gap:var(--s2)}
.gj-post-top b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:-.01em}
.gj-post-av{width:30px;height:30px;border-radius:var(--r4);padding:2px;background:var(--prism);flex:none}
.gj-post-av img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:var(--r4);border:2px solid var(--bone)}
.gj-open{display:inline-block;margin-top:var(--s2);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--goja)}
.gj-post{display:grid;gap:var(--s2);align-content:start;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.gj-post-media{position:relative;aspect-ratio:4/5;border-radius:var(--r2);overflow:hidden;background:var(--card);
  border:1px solid var(--line);transition:transform .25s ease,border-color .25s ease}
.gj-post:hover .gj-post-media,.gj-post:focus-visible .gj-post-media{border-color:var(--goja);transform:translateY(-2px)}
.gj-post:active .gj-post-media{transform:scale(.985)}
.gj-post-media > img,.gj-post-media > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gj-post-media::after{content:"";position:absolute;inset:auto 0 0;height:45%;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--bone) 80%,transparent),transparent)}
.gj-post-n,.gj-post-count{position:absolute;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.gj-post-n{top:var(--s2);left:var(--s2);padding:3px 7px;border-radius:var(--r4);color:var(--ink);
  background:color-mix(in srgb,var(--bone) 62%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gj-post-count{bottom:var(--s2);left:var(--s3);color:var(--ink)}
.gj-post-cap b{display:block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.gj-post-cap span{display:block;font-size:13px;color:var(--ink-3);line-height:1.35;margin-top:2px}
/* post covers that are built, not filmed */
.gj-mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.gj-mosaic img{width:100%;height:100%;object-fit:cover}
.gj-reel{position:absolute;inset:0;display:grid;grid-template-rows:repeat(5,1fr);gap:3px;padding:var(--s2) 0}
.gj-reel img{width:100%;height:100%;object-fit:cover;object-position:var(--at,0) 50%;opacity:.85}
.gj-reel div{display:flex;gap:3px;padding-inline:3px}
.gj-reel i{flex:var(--w,1);border-radius:var(--r1);background:var(--hue);opacity:.9}
.gj-bars{position:absolute;inset:18% 10% 22%;display:flex;align-items:center;gap:4px}
.gj-bars i{flex:1;height:var(--h);border-radius:var(--r4);background:var(--hue);animation:gj-eq 1.1s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);transform-origin:50% 50%}
@keyframes gj-eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.gj-type{position:absolute;inset:0;display:grid;align-content:center;gap:var(--s2);padding:var(--s5);
  background:radial-gradient(80% 60% at 50% 30%,var(--glow) 0%,transparent 70%)}
.gj-type b{font-family:var(--display);font-weight:800;font-size:clamp(20px,3vw,28px);letter-spacing:-.02em;line-height:1.05}
.gj-type span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}
@media (max-width:620px){ .gj-stats{gap:var(--s4)} }
.gj-bars i{animation-play-state:paused} .is-focus .gj-bars i,.gj-bars.is-focus i{animation-play-state:running}

/* one focus at a time: a grid of clips, stills or 3D objects becomes a row you swipe, one item on screen,
   with a count (3 / 12) and small arrows (feed.js adds .gj-snap and the nav; page.js plays only the focused clip) */
.gj-app .gj-snap{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;gap:var(--s4);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:0;max-width:none}
.gj-app .gj-snap::-webkit-scrollbar{display:none}
.gj-app .gj-snap > *{scroll-snap-align:center;scroll-snap-stop:always;justify-self:center;width:min(100%,calc(60svh * 9 / 16))}
.gj-app .gj-snap > figure.wide{grid-column:auto;width:min(100%,calc(60svh * 9 / 8))}
.gj-app .gj-sheets.gj-snap > img{width:100%;max-height:60svh;object-fit:contain;border:0;background:none}
.gj-app .gj-objs{display:block}
.gj-app .gj-objs-track > .gj-obj{width:min(100%,56svh)}
.gj-app .gj-snap .gj-obj-view{touch-action:pan-x pan-y}
.gj-app .gj-memes{max-width:none}
.gj-snapnav{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s3)}
.gj-snapnav button{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r4);
  width:38px;height:38px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px}
.gj-snapnav button:hover{border-color:var(--goja)}
.gj-snapnav button:disabled{opacity:.3;cursor:default}
.gj-count{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-2);min-width:7ch;text-align:center;font-variant-numeric:tabular-nums}
.gj-count b{color:var(--goja);font-weight:500}
.gj-app .gj-look{grid-template-columns:1fr}
.gj-app .gj-look > figure{max-width:200px}
/* the page settles on one thing at a time as you scroll */
html.gj-app:not(.xp-open){scroll-snap-type:y proximity}
.gj-app .gj-piece .gj-video,.gj-app .gj-post-media{scroll-snap-align:center}

/* the view: one part, full screen, with a sticky bar (back · title · prev/next) and story segments */
.gj-xpbar{display:none}
.gj-app .gj-sec{display:none}
.gj-app .gj-sec.on{display:block;padding-top:var(--s5)}
.gj-app.xp-open .gj-profile,.gj-app.xp-open .gj-hero,.gj-app.xp-open .gj-feed,.gj-app.xp-open main > hr.prism{display:none}
.gj-app.xp-open .gj-xpbar{display:block;position:sticky;top:0;z-index:20;margin-inline:calc(-1 * var(--gutter));
  padding:calc(var(--s2) + env(safe-area-inset-top,0px)) var(--gutter) var(--s2);
  background:color-mix(in srgb,var(--bone) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.gj-xpbar-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3)}
.gj-xpbar button{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r4);
  min-width:40px;height:40px;padding:0 var(--s3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.gj-xpbar button:hover{border-color:var(--goja)}
.gj-xpbar button:disabled{opacity:.35;cursor:default}
.gj-xp-title{margin:0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em}
.gj-xp-title b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;color:var(--goja);margin-right:6px}
.gj-xp-nav{display:flex;gap:6px}
.gj-xp-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin-top:var(--s2)}
.gj-xp-seg button{height:14px;min-width:0;padding:0;border:0;background:none;border-radius:0;position:relative}
.gj-xp-seg button::before{content:"";position:absolute;inset:5px 0;border-radius:var(--r4);background:var(--line-2)}
.gj-xp-seg button.done::before{background:var(--ink-3)}
.gj-xp-seg button[aria-current]::before{background:var(--goja)}
.gj-upnext{display:none}
.gj-app.xp-open .gj-upnext{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:var(--s4);
  margin-top:var(--s8);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r3);background:var(--paper);
  text-decoration:none;color:inherit}
.gj-upnext:hover{border-color:var(--goja)}
.gj-upnext .gj-post-media{aspect-ratio:1;border-radius:var(--r2)}
.gj-upnext .gj-post-media::after,.gj-upnext .gj-post-n,.gj-upnext .gj-post-count{display:none}
.gj-upnext b{display:block;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.gj-upnext .arrow{font-family:var(--mono);color:var(--goja);font-size:18px;padding-right:var(--s2)}
.gj-in{animation:gj-rise .32s ease both} .gj-in-r{animation:gj-from-r .32s ease both} .gj-in-l{animation:gj-from-l .32s ease both}
@keyframes gj-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes gj-from-r{from{opacity:0;transform:translateX(28px)}}
@keyframes gj-from-l{from{opacity:0;transform:translateX(-28px)}}
@media (max-width:620px){ .gj-xpbar button .t{display:none} }
/* on a phone the piece stands alone; its side frames are all in the Frames post */
@media (max-width:980px){ .gj-app .gj-side{display:none} }
.gj-app .gj-sec{scroll-margin-top:140px}

/* ═══════════════════════════════════════════════════════════════════════
   NEON SYSTEM v1 (2026-09-27) — the Goja light as tube, glass and motion.
   Tokens live in .theme-goja above; THEME.md lists the rules. Motion is
   transform + opacity only; a blur appears only on small things or inside a
   short transition; every effect switches off under reduced motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* N1 · the ring — a neon tube round the avatar: colour travels round it, the bloom breathes.
   The gradient never repaints: the whole disc turns (compositor only). */
.gj-avatar{position:relative;isolation:isolate;background:none;transition:transform var(--t-mid) var(--ease-settle)}
.gj-avatar::before,.gj-avatar::after{content:"";position:absolute;inset:0;border-radius:var(--r4);background:var(--neon-spectrum);
  z-index:-1;animation:gj-spin var(--ring-spin) linear infinite}
.gj-avatar::after{inset:-3px;z-index:-2;filter:blur(9px);opacity:.55;
  animation:gj-spin var(--ring-spin) linear infinite,gj-breathe var(--ring-breathe) ease-in-out infinite}
@media (hover:hover){ button.gj-avatar:hover{transform:scale(1.04)} }
button.gj-avatar:active{transform:scale(.96)}
button.gj-avatar:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
@keyframes gj-spin{to{transform:rotate(1turn)}}
@keyframes gj-breathe{0%,100%{opacity:.3}50%{opacity:.85}}
.gj-story-open .gj-avatar::before,.gj-story-open .gj-avatar::after,.gj-reels-open .gj-avatar::before,.gj-reels-open .gj-avatar::after{animation-play-state:paused}

/* N2 · lit type — headings glow; each flickers on once when it first comes into view (neon.js adds .is-lit) */
.gj-sec > h2,.gj-piece h1,.gj-lit{text-shadow:var(--neon-text)}
.gj-flick.is-lit{animation:gj-flicker .95s both;animation-timing-function:steps(1,end)}
@keyframes gj-flicker{0%{opacity:.12}7%{opacity:.85}10%{opacity:.2}16%{opacity:1}21%{opacity:.4}27%,100%{opacity:1}}
/* the wordmark: the spectrum flows through the wordmark (a small box, so the repaint is cheap) */
.gj-wordmark,.theme-goja nav.bar .mark{background:var(--neon-wordmark) 0 0/6em 100% repeat-x;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;filter:var(--neon-drop);animation:gj-flow 10s linear infinite}
@keyframes gj-flow{to{background-position:6em 0}}
/* eyebrows: the leading rule becomes a lit line ending in a dot */
.theme-goja .eyebrow::before{width:28px;height:5px;border-radius:0;filter:var(--neon-drop);
  background:radial-gradient(circle,var(--magenta) 0 2px,transparent 2.6px) right center/5px 5px no-repeat,
             linear-gradient(90deg,transparent,var(--goja)) left center/24px 1.5px no-repeat}
/* a live dot before a label */
.gj-live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:1px;border-radius:var(--r4);
  background:var(--magenta);box-shadow:var(--neon-soft)}
/* Thai numerals beside the section numbers (๐๑ … ๐๘) — real digits, set small and lit */
.gj-th{font-family:var(--mono);font-size:.95em;letter-spacing:.06em;color:var(--magenta);text-shadow:var(--neon-soft);margin-left:.45em}
/* a vertical neon sign: 回転木馬 (merry-go-round) */
.gj-profile{position:relative;padding-right:28px}
.gj-sign{position:absolute;right:0;top:var(--s3);writing-mode:vertical-rl;font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.42em;color:var(--ink-2);text-shadow:var(--neon-soft);opacity:.8;pointer-events:none}
/* the room: a seigaiha wave under the grain, fading out down the page */
body.theme-goja::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background:var(--pattern-wave) 0 0/48px 24px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 70%);mask-image:linear-gradient(to bottom,black,transparent 70%)}

/* N3 · neon controls — glass body, a rim that lights on hover, a glow + ripple on press */
.theme-goja .btn,.gj-xpbar-in button,.gj-snapnav button,.gj-nb{position:relative}
.theme-goja .btn,.gj-xpbar-in button,.gj-snapnav button,.gj-play,.gj-nb{overflow:hidden;isolation:isolate;
  background-color:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-fast),box-shadow var(--t-mid),color var(--t-fast),transform var(--t-fast) var(--ease-settle),opacity var(--t-mid)}
.gj-quality select{background-color:var(--glass);border-color:var(--glass-line);transition:border-color var(--t-fast),box-shadow var(--t-mid)}
@media (hover:hover){
  .theme-goja .btn:hover,.gj-xpbar-in button:not(:disabled):hover,.gj-snapnav button:not(:disabled):hover,.gj-play:hover,.gj-nb:hover,
  .gj-quality select:hover{border-color:var(--goja);box-shadow:var(--neon-edge);color:var(--ink);background-color:var(--glass);text-shadow:var(--neon-soft)}
}
.theme-goja .btn:active,.gj-xpbar-in button:not(:disabled):active,.gj-snapnav button:not(:disabled):active,.gj-play:active,.gj-nb:active{
  box-shadow:var(--neon-press);border-color:var(--magenta);transform:scale(.96)}
.gj-quality select:focus-visible,.gj-quality select:active{box-shadow:var(--neon-edge);border-color:var(--goja)}
.theme-goja .btn::after,.gj-xpbar-in button::after,.gj-snapnav button::after,.gj-play::after,.gj-nb::after{content:"";position:absolute;
  left:var(--rx,50%);top:var(--ry,50%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--r4);pointer-events:none;z-index:-1;
  background:radial-gradient(circle,var(--neon-hot),transparent 70%);opacity:0;transform:scale(0)}
.is-rip::after{animation:gj-ripple .6s var(--ease-settle)}
@keyframes gj-ripple{from{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(16)}}
.gj-play{background-color:var(--glass)}
.gj-play-icon{filter:var(--neon-drop)}
/* the post's "Open →": a lit link */
.gj-open{transition:color var(--t-fast),text-shadow var(--t-mid)}
.gj-post:hover .gj-open,.gj-post:focus-visible .gj-open{color:var(--magenta);text-shadow:var(--neon-soft)}
.gj-post:hover .gj-post-media,.gj-post:focus-visible .gj-post-media{box-shadow:var(--neon-edge)}
.gj-post-n{border:1px solid var(--glass-line)}
.gj-upnext{transition:border-color var(--t-fast),box-shadow var(--t-mid)}
.gj-upnext:hover{box-shadow:var(--neon-edge)}
.gj-upnext .arrow{text-shadow:var(--neon-soft)}
/* story segments: the track dims, the fill slides in and the current one glows */
.gj-xp-seg button::before,.gj-xp-seg button.done::before,.gj-xp-seg button[aria-current]::before{background:var(--line-2)}
.gj-xp-seg button::after{content:"";position:absolute;inset:5px 0;border-radius:var(--r4);background:var(--neon-line);
  transform-origin:0 50%;transform:scaleX(0);transition:transform var(--t-slow) var(--ease-settle),opacity var(--t-mid)}
.gj-xp-seg button.done::after{transform:scaleX(1);opacity:.4}
.gj-xp-seg button[aria-current]::after{transform:scaleX(1);box-shadow:var(--neon-soft)}
@media (hover:hover){ .gj-xp-seg button:hover::before{background:var(--ink-3)} }
/* the part view's header: a torii line — the lit beam (kasagi) over a thin one (nuki) */
.gj-app.xp-open .gj-xpbar{border-bottom:0}
.gj-xpbar::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:6px;pointer-events:none;filter:var(--neon-drop);
  background:linear-gradient(90deg,transparent,var(--goja) 10%,var(--magenta) 50%,var(--goja) 90%,transparent) top/100% 2px no-repeat,
             linear-gradient(90deg,transparent 7%,var(--line-2) 13%,var(--line-2) 87%,transparent 93%) bottom/100% 1px no-repeat}
.gj-xp-title b{text-shadow:var(--neon-soft)}

/* N4 · the portal — a lit disc opens from the tapped post, the part settles in behind it (neon.js + feed.js) */
.gj-portal{position:fixed;left:0;top:0;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:var(--r4);pointer-events:none;z-index:45;opacity:0;
  background:radial-gradient(circle,var(--bone) 0 55%,var(--magenta) 61%,var(--goja) 65%,var(--glow) 69%,transparent 72%)}
.gj-portal-in{animation:gj-settle .55s var(--ease-settle) backwards}
.gj-portal-in > .eyebrow,.gj-portal-in > h2,.gj-portal-in > .lede{animation:gj-unblur .6s var(--ease-settle) backwards}
.gj-portal-back{animation:gj-back .5s var(--ease-settle) backwards}
@keyframes gj-settle{from{opacity:0;transform:scale(1.06)}}
@keyframes gj-unblur{from{opacity:0;filter:blur(8px)}}
@keyframes gj-back{from{opacity:0;transform:scale(.965)}}

/* N5 · travelling through — posts rise out of depth as they enter and sink as they leave (scroll-driven; neon.js falls back to an observer) */
@supports (animation-timeline:view()){
  .gj-app .gj-post{animation:gj-depth linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes gj-depth{
  0%{opacity:.2;transform:perspective(900px) translate3d(0,64px,-90px) rotateX(9deg)}
  30%,74%{opacity:1;transform:none}
  100%{opacity:.5;transform:perspective(900px) translate3d(0,-22px,-60px) rotateX(-4deg)}}
.gj-depth-io .gj-post{transition:opacity .7s ease,transform .8s var(--ease-settle)}
.gj-depth-io .gj-post.gj-far{opacity:.2;transform:perspective(900px) translate3d(0,64px,-90px) rotateX(9deg)}

/* N6 · Play on every video — a muted preview under a glass pill; the pill opens the immersive viewer (reels.js) */
.gj-vwrap{position:relative;display:block}
.gj-play.sm{min-height:44px;padding:10px 18px 10px 13px;gap:9px;font-size:14px;box-shadow:none}
.gj-play.sm .gj-play-icon{border-width:7px 0 7px 12px}
.gj-post .gj-play.sm{inset:auto var(--s3) var(--s3) auto;margin:0;z-index:2}
.gj-vwrap.is-inline .gj-play{opacity:0;pointer-events:none}

/* N7 · the story — tap the ring: the story, full screen (story.js) */
.gj-story,.gj-reels{position:fixed;inset:0;z-index:60;height:100dvh;background:var(--bone);color:var(--ink);overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent}
.gj-story{display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.theme-goja [hidden]{display:none!important}   /* a component's own display never un-hides it */
.gj-story::before,.gj-reels::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%,var(--glow) 0%,transparent 62%),radial-gradient(50% 40% at 100% 70%,var(--glow-2) 0%,transparent 60%)}
.gj-story-frame{position:relative;width:100vw;height:100dvh;overflow:hidden;background:var(--card)}
@media (min-width:620px){ .gj-story-frame{height:calc(100dvh - 40px);width:auto;aspect-ratio:9/16;border-radius:var(--r3);box-shadow:var(--float)} }
.gj-story-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gj-story-frame::before,.gj-story-frame::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.gj-story-frame::before{top:0;height:130px;background:linear-gradient(var(--scrim),transparent)}
.gj-story-frame::after{bottom:0;height:160px;background:linear-gradient(transparent,var(--scrim))}
.gj-story-top{position:absolute;top:0;left:0;right:0;z-index:2;display:grid;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0;transition:opacity var(--t-mid)}
.gj-story-seg{display:flex;gap:3px}
.gj-story-seg i{flex:1;height:2.5px;border-radius:var(--r4);background:var(--line-2);overflow:hidden}
.gj-story-seg b{display:block;height:100%;background:var(--neon-line);transform-origin:0 50%;transform:scaleX(0)}
.gj-story-seg i.done b{transform:scaleX(1)}
.gj-story-seg i.on{box-shadow:var(--neon-soft)}
.gj-story-who{display:flex;align-items:center;gap:10px;min-width:0}
.gj-story-av{width:34px;height:34px;flex:none;border-radius:var(--r4);padding:2px;background:var(--neon-spectrum)}
.gj-story-av img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:var(--r4);border:2px solid var(--bone)}
.gj-story-who > b{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em}
.gj-story-who > span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gj-story-who > .sp{flex:1}
.gj-nb.round{width:44px;height:44px;flex:none;border-radius:var(--r4);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;line-height:1;cursor:pointer;padding:0}
.gj-nb.pill{height:44px;padding:0 14px;border-radius:var(--r4);display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.gj-story-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:4px;
  padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));transition:opacity var(--t-mid)}
.gj-story-cap b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.15;text-shadow:var(--neon-text)}
.gj-story-cap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.gj-story.is-held .gj-story-top,.gj-story.is-held .gj-story-cap{opacity:0}
.gj-story.is-loading .gj-story-frame{animation:gj-pulse 1.4s ease-in-out infinite}
.gj-burst{position:fixed;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:var(--r4);pointer-events:none;z-index:70;
  background:var(--neon-spectrum);-webkit-mask:radial-gradient(circle,transparent 58%,black 61% 68%,transparent 72%);
  mask:radial-gradient(circle,transparent 58%,black 61% 68%,transparent 72%);opacity:0}
.gj-story-open,.gj-story-open body,.gj-reels-open,.gj-reels-open body{overflow:hidden}

/* N8 · the immersive viewer — every video, one after another; swipe up for the next (reels.js) */
.gj-reels-track{position:relative;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.gj-reels-track::-webkit-scrollbar{display:none}
.gj-reel-slide{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;overflow:hidden}
.gj-reel-slide > img,.gj-reel-slide > video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.gj-reel-slide > video{background:var(--bone)}
.gj-reels-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:10px;pointer-events:none;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 28px;background:linear-gradient(var(--scrim),transparent)}
.gj-reels-top > *{pointer-events:auto}
.gj-reels-top .sp{flex:1;pointer-events:none}
.gj-reels-part{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gj-reels-part b{color:var(--goja);font-weight:500;text-shadow:var(--neon-soft);margin-right:6px}
.gj-reels-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;gap:8px;pointer-events:none;
  padding:36px 16px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--scrim))}
.gj-reels-cap b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.2;max-width:34ch;text-shadow:var(--neon-text)}
.gj-reels-cap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gj-reels-bar{height:2px;border-radius:var(--r4);background:var(--line-2);overflow:hidden}
.gj-reels-bar b{display:block;height:100%;max-width:none;background:var(--neon-line);transform-origin:0 50%;transform:scaleX(0)}
.gj-reels-tip{position:absolute;left:50%;top:50%;z-index:3;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:var(--r4);
  display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-line);pointer-events:none;opacity:0;transform:scale(.8);
  transition:opacity var(--t-mid),transform var(--t-mid) var(--ease-settle)}
.gj-reels.is-paused .gj-reels-tip{opacity:1;transform:none;box-shadow:var(--neon-edge)}
.gj-reels-tip i{width:0;height:0;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--goja);margin-left:5px;filter:var(--neon-drop)}
.gj-reels-hint{position:absolute;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:3;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);pointer-events:none;
  animation:gj-hint 2.6s ease-in-out 3 both}
@keyframes gj-hint{0%,100%{opacity:0;transform:translate(-50%,6px)}30%,70%{opacity:.9;transform:translate(-50%,0)}}

/* N9 · the edit post's cover: the real timeline, drawn from m/edit.json, with a playhead sweeping it (neon.js) */
.gj-ecover{position:absolute;inset:0;display:grid;align-content:center;padding:var(--s5) var(--s3);
  background:radial-gradient(80% 60% at 50% 40%,var(--glow) 0%,transparent 70%)}
.gj-ecover svg{display:block;width:100%;height:auto;overflow:visible}
.gj-ecover .l{fill:var(--line)} .gj-ecover .g{stroke:var(--line);stroke-width:1}
.gj-ecover .real{fill:var(--cyan)} .gj-ecover .ai{fill:var(--magenta)} .gj-ecover .d3{fill:var(--violet)}
.gj-ecover .mix{fill:var(--indigo)} .gj-ecover .open{fill:var(--green)} .gj-ecover .fit{fill:var(--amber)}
.gj-ecover .flash{fill:var(--coral)} .gj-ecover .obj{fill:var(--indigo)} .gj-ecover .kick{stroke:var(--stem-drums);stroke-width:2;stroke-linecap:round}
.gj-ecover .c{fill:none;stroke-width:1.6;stroke-linejoin:round} .gj-ecover .c.speed{stroke:var(--cyan)} .gj-ecover .c.zoom{stroke:var(--goja)}
.gj-ecover text{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;fill:var(--ink-3);text-transform:uppercase}
/* the playhead: a full-width box whose left edge is the line, so the sweep is a pure translate of its own width */
.gj-ecover .head{position:absolute;top:18%;bottom:18%;left:calc(var(--s3) + 1.3%);right:calc(var(--s3) + 1.3%);pointer-events:none;opacity:0}
.gj-ecover .head::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;border-radius:var(--r4);background:var(--ink);box-shadow:var(--neon-soft)}
.is-focus .gj-ecover .head{opacity:1;animation:gj-sweep 9s linear infinite}
@keyframes gj-sweep{from{transform:translateX(0)}to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  .gj-avatar::before,.gj-avatar::after,.gj-wordmark,.theme-goja nav.bar .mark,.gj-flick.is-lit,.gj-app .gj-post,.gj-portal-in,.gj-portal-in > *,
  .gj-portal-back,.gj-reels-hint,.gj-ecover .head{animation:none!important}
  .gj-depth-io .gj-post.gj-far{opacity:1;transform:none}
}

/* ═══ MOBILE HARDENING (2026-09-27): nothing may make the page wider than the screen ═══
   A grid or flex child's automatic minimum is its content's min-content width; a swipe row's is its whole
   run of cards. So every child that holds a scroller is allowed to shrink (min-width:0), every scroller
   scrolls inside its own box, and media never outgrows its column. */
.gj-sec > *,.gj-look > *,.gj-edit-top > *,.gj-edit-key > *,.gj-hero > *,.gj-piece > *,.gj-profile > *,.gj-posts > *,
.gj-snap,.gj-snap > *,.gj-fig,.gj-vwrap,.gj-objs,.gj-edit,.gj-edit > *,.gj-map,.gj-xpbar-in > *{min-width:0}
.gj-snap,.gj-map,.gj-edit-scroll,.gj-strip{max-width:100%}
.gj-app .gj-snap{position:relative}   /* its cards measure their place from it (feed.js) */
.gj-sec img,.gj-sec video,.gj-sec canvas{max-width:100%}
.gj-quality{flex-wrap:wrap;max-width:100%}
.gj-quality select{max-width:100%;min-height:44px}
/* swipe rows show a peek of the next card, so they read as swipeable */
@media (max-width:620px){
  .gj-app .gj-snap{grid-auto-columns:86%;gap:var(--s3)}
  .gj-app .gj-look > figure{max-width:min(220px,62%)}
  .gj-edit-top{grid-template-columns:minmax(0,120px) minmax(0,1fr)}
  .gj-snapnav button{width:44px;height:44px}
  .gj-snapnav button,.gj-xp-nav button{font-size:20px}
  .gj-xpbar-in button{min-width:44px;height:44px}
  .gj-bio{font-size:15px}
  .gj-post-cap span{font-size:14px}
}
/* a part sliding in from the side (feed.js .gj-in-r / .gj-in-l) must not leave the page wider for a frame:
   the main column clips sideways (clip, not hidden: it is not a scroller, so the sticky header still sticks) */
.gj-app main{overflow-x:clip}
/* the top of the page is a resting place too: without it, the scroll snap pulls a taller phone down onto the piece
   and the profile (and its story ring) can't be reached */
.gj-app nav.bar{scroll-snap-align:start}