/* Comic display faces for Graphic Novel Studio art + title treatments.
   Self-hosted latin subsets from Google Fonts, all SIL Open Font License 1.1. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/static/assets/fonts/gn/anton.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bangers';font-style:normal;font-weight:400;font-display:swap;src:url(/static/assets/fonts/gn/bangers.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Big Shoulders Stencil Display';font-style:normal;font-weight:800;font-display:swap;src:url(/static/assets/fonts/gn/big-shoulders-stencil-display.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Comic Neue';font-style:normal;font-weight:700;font-display:swap;src:url(/static/assets/fonts/gn/comic-neue.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(/static/assets/fonts/gn/dela-gothic-one.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;src:url(/static/assets/fonts/gn/luckiest-guy.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url(/static/assets/fonts/gn/orbitron.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url(/static/assets/fonts/gn/permanent-marker.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(/static/assets/fonts/gn/playfair-display.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   Graphic Novel Studio - Designer redesign (phase 2, 2026-09-24)
   Loaded by studio-pages/graphic-novel-studio.html AFTER studio-template.css.
   Palette: pink #ff2ea6 / cyan #06b6d4 / gold #f59e0b on #0a0a0f. No purple,
   no glassmorphism, no gradient orbs. Inter UI, JetBrains Mono numbers.
   Comic faces (above) are used only inside art and title treatments.
   ========================================================================== */

.gn-page { --gn-ink: #0d0d0d; --gn-paper: #f4f1ea; --gn-line: rgba(255,255,255,.08); }
.gn-mono { font-family: 'JetBrains Mono', monospace; }
.gn-muted { color: #71717a; }
/* Visually hidden but kept in the DOM (native selects stay the value store).
   Anchored top-left of the panel: an absolute box left at its static position
   inside a tall scrolled panel stretches the viewport-locked document. */
.gn-page .studio-panel { position: relative; }
.gn-sr { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; }

/* Buttons: primary CTA is the pink-to-cyan bar from the mockups */
.gn-page .btn-primary, #viewReader .btn-primary { background: linear-gradient(90deg, #ff2ea6, #06b6d4); color: #fff; }
.gn-page .btn-cyan { background: #fff; color: #0a0a0f; }
.gn-page .btn-secondary { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); color: #e4e4e7; }
.gn-actions .gn-go, .gn-actions .btn-primary { text-transform: uppercase; letter-spacing: .1em; font-weight: 800; border-radius: 10px; }
.gn-paperbtn { background: var(--gn-paper) !important; color: var(--gn-ink) !important; border: none !important; font-weight: 700 !important; }

/* ---------- Panel 1 header: GRAPHIC NOVEL / STUDIO ---------- */
.gn-p1 .sf-header { align-items: flex-end; }
.gn-p1 .sf-title { font: 400 1.75rem/.9 Anton, Inter, sans-serif; letter-spacing: .01em; flex-direction: row; gap: .3em; color: #fff; text-shadow: .06em .06em 0 #ff2ea6; }
.gn-p1 .sf-subtitle { font: 600 .66rem 'JetBrains Mono', monospace; letter-spacing: .55em; text-transform: uppercase; color: #f59e0b; }
.gn-hdr-right { margin-left: auto; align-self: flex-end; font-size: .78rem; color: #a1a1aa; white-space: nowrap; }
.gn-hdr-right a { color: #a1a1aa; text-decoration: none; cursor: pointer; }
.gn-hdr-right a:hover { color: #fff; }

/* ---------- Current project card ---------- */
.gn-page .gn-current { display: flex; gap: 12px; border: none; background: none; padding: .25rem 0 .9rem; margin: 0 0 .25rem; border-bottom: 1px solid var(--gn-line); border-radius: 0; }
.gn-current-cover { flex: none; width: 76px; }
.gn-current-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.gn-page .gn-current-t { font-size: 1.05rem; }
.gn-page .gn-current-m { font-family: Inter, sans-serif; font-size: .78rem; color: #a1a1aa; margin: 0; }
.gn-chiprow { display: flex; gap: 5px; flex-wrap: wrap; }
.gn-chip { font-size: .68rem; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: #d4d4d8; white-space: nowrap; }
.gn-chip.pink { border-color: #ff2ea6; color: #ff2ea6; }

/* status badge (shelf, list, current) */
.gn-status { display: inline-block; font: 600 .6rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; border: 1px solid currentColor; background: rgba(10,10,15,.85); white-space: nowrap; }
.gn-status.s-done { color: #06b6d4; }
.gn-status.s-art, .gn-status.s-pages { color: #ff2ea6; }
.gn-status.s-script, .gn-status.s-draft { color: #a1a1aa; }
.gn-status.s-error { color: #f59e0b; }
.gn-status.gn-sample { color: #06b6d4; }
.gn-samples { margin-top: 18px; }

/* ---------- Step rail (centre header) ---------- */
.gn-page .gn-p2head { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
.gn-page .gn-rail { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gn-page .gn-rail::-webkit-scrollbar { display: none; }
.gn-page .gn-rail .step-indicator { flex-direction: row !important; gap: 4px; flex-wrap: nowrap; }
.gn-page .gn-rail .step { flex: none; border: 1px solid transparent !important; border-radius: 8px !important; padding: 5px 10px !important; font-size: .82rem; color: #a1a1aa; gap: 6px; }
.gn-page .gn-rail .step[data-step="projects"] { display: none; }
.gn-page .gn-rail .step .step-num { width: auto; height: auto; background: none !important; font: 500 .66rem 'JetBrains Mono', monospace; color: #52525b !important; border-radius: 0; }
.gn-page .gn-rail .step .gn-stepcost { display: none; }
.gn-page .gn-rail .step.active { background: rgba(255,46,166,.1) !important; border-color: #ff2ea6 !important; color: #fff !important; font-weight: 700; }
.gn-page .gn-rail .step.active .step-num { color: #fff !important; }
.gn-page .gn-rail .step.completed:not(.active) { color: #d4d4d8; }
.gn-page .gn-rail .step.completed .step-num { color: #06b6d4 !important; }
.gn-grid.gn-wide .gn-rail .step { padding: 4px 7px !important; font-size: .76rem; gap: 4px; }
.gn-grid.gn-wide .gn-rail .step .step-num { display: none; }
.gn-steptitle { flex-basis: 100%; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.gn-page .gn-steptitle .gn-typeicon { display: none; }
.gn-page .gn-typename { font-size: .92rem; }
.gn-page .gn-typedesc { font-size: .74rem; }
.gn-p2[data-view="projects"] .gn-p2head { display: none; }

/* ---------- Comic "!" error card (replaces red banners) ---------- */
.gn-page .gn-error { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; margin: 14px 18px 22px 2px; padding: 22px 22px 18px; background: #111116; border: 1.5px solid var(--gn-paper); border-radius: 4px; box-shadow: 6px 6px 0 #ff2ea6; }
.gn-page .gn-error .gn-err-ic { position: absolute; right: -18px; top: -22px; width: auto; height: auto; background: none; }
.gn-page .gn-err-h { font: 400 1.45rem/1.05 Anton, Inter, sans-serif; text-transform: uppercase; letter-spacing: .01em; padding-right: 40px; }
.gn-page .gn-err-p { color: #a1a1aa; font-size: .82rem; }
.gn-page .gn-error .btn { background: var(--gn-paper); color: var(--gn-ink); border: none; font-weight: 700; }
.gn-errcard { position: relative; background: #111116; border: 1.5px solid var(--gn-paper); border-radius: 4px; box-shadow: 6px 6px 0 #ff2ea6; padding: 20px 20px 16px; margin: 16px 18px 20px 2px; display: flex; flex-direction: column; gap: 10px; }
.gn-errcard .gn-star { position: absolute !important; right: -18px; top: -22px; }
.gn-errcard h4 { font: 400 1.35rem/1.05 Anton, Inter, sans-serif; text-transform: uppercase; margin: 0; padding-right: 40px; }
.gn-errcard p { font-size: .82rem; color: #a1a1aa; line-height: 1.55; margin: 0; }

/* ---------- A. Projects home: hero + shelf ---------- */
.gn-hero { position: relative; overflow: hidden; margin: -.75rem -1rem 0; padding: 30px 28px 26px; border-bottom: 1px solid var(--gn-line); min-height: 360px; background: #0a0a0f; }
.gn-hero-bg { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 74% 46%, rgba(255,46,166,.2) 0 1.6deg, transparent 1.6deg 7deg); }
.gn-hero-dots { position: absolute; inset: 0; background: radial-gradient(circle, rgba(6,182,212,.55) 1.3px, transparent 1.8px) 0 0/10px 10px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 45%); mask-image: linear-gradient(200deg, #000, transparent 45%); }
.gn-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #0a0a0f 18%, rgba(10,10,15,.55) 55%, rgba(10,10,15,.1)); }
.gn-hero-copy { position: relative; z-index: 2; max-width: 310px; display: flex; flex-direction: column; gap: 18px; }
.gn-hero-copy p { font-size: .92rem; line-height: 1.6; color: #d4d4d8; margin: 0; }
.gn-hero-cta { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.gn-hero-cta .btn { padding: .8rem 1.1rem; font-size: .88rem; border-radius: 10px; }
.gn-hero-cta .btn-primary { background: linear-gradient(90deg, #ff2ea6, #ff2ea6 30%, #06b6d4); }
.gn-hero-fan { position: absolute; z-index: 1; right: -12px; top: 38px; width: 260px; height: 240px; }
.gn-hero-fan > div { position: absolute; }
.gn-hero-fan img.gn-hero-art { position: absolute; right: 12px; top: -10px; width: 200px; height: 300px; object-fit: cover; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }

/* animated app title: 01 outline wipe 0-350ms, 02 fill 350-750, 03 pink plate 750-1000, 04 halftone + stamp 1000-1600 */
.gn-apptitle { position: relative; display: inline-block; padding: .08em .2em .06em 0; animation: gnAtWipe 1.6s ease-out both; }
.gn-at-word { position: relative; font: 400 1em/.86 Anton, Inter, sans-serif; text-transform: uppercase; letter-spacing: .01em; -webkit-text-stroke: max(1px, .016em) #fff; color: #fff; text-shadow: .05em .05em 0 #ff2ea6; animation: gnAtInk 1.6s ease-out both; }
.gn-at-plate { position: absolute; right: 0; top: .3em; width: 1.8em; height: 1.5em; background: radial-gradient(circle, #06b6d4 28%, transparent 33%) 0 0/.085em .085em; -webkit-mask-image: linear-gradient(140deg, #000, transparent 70%); mask-image: linear-gradient(140deg, #000, transparent 70%); opacity: .55; animation: gnAtPlate 1.6s ease-out both; }
.gn-at-stamp { position: relative; margin-top: .18em; display: flex; align-items: center; gap: .12em; font: 600 max(9px, .16em) 'JetBrains Mono', monospace; letter-spacing: .55em; text-transform: uppercase; color: #f59e0b; animation: gnAtStamp 1.6s ease-out both; }
.gn-at-rule { width: 2.2em; height: 1px; background: currentColor; }
@keyframes gnAtWipe { 0% { clip-path: inset(0 100% 0 0); } 22%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes gnAtInk { 0%, 22% { color: transparent; text-shadow: 0 0 0 rgba(255,46,166,0); } 47% { color: #fff; text-shadow: 0 0 0 #ff2ea6; } 62%, 100% { color: #fff; text-shadow: .05em .05em 0 #ff2ea6; } }
@keyframes gnAtPlate { 0%, 62% { opacity: 0; transform: translate(-4%, 4%); } 100% { opacity: .55; transform: none; } }
@keyframes gnAtStamp { 0%, 62% { opacity: 0; letter-spacing: 1em; } 100% { opacity: 1; letter-spacing: .55em; } }
@media (prefers-reduced-motion: reduce) { .gn-apptitle, .gn-at-word, .gn-at-plate, .gn-at-stamp { animation: none !important; } }

.gn-shelf { padding: 18px 2px 8px; }
.gn-shelf-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gn-shelf-h b { font-size: 1rem; }
.gn-filters { margin-left: auto; display: flex; gap: 6px; }
.gn-filter { background: none; border: 1px solid rgba(255,255,255,.14); color: #a1a1aa; border-radius: 999px; padding: 3px 11px; font: inherit; font-size: .76rem; cursor: pointer; }
.gn-filter.on { border-color: #e4e4e7; color: #fff; }
.gn-shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; padding-bottom: 14px; border-bottom: 2px solid rgba(255,255,255,.12); }
.gn-book { cursor: pointer; min-width: 0; background: none; border: none; padding: 0; text-align: left; color: inherit; font: inherit; }
.gn-book-cover { position: relative; width: 100%; aspect-ratio: 2/3; overflow: hidden; border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.5); transition: transform .2s; }
.gn-book-cover > div { width: 100% !important; height: 100% !important; }
.gn-book:hover .gn-book-cover, .gn-book:focus-visible .gn-book-cover { transform: translateY(-4px); }
.gn-book-cover .gn-status { position: absolute; right: 6px; bottom: 6px; z-index: 3; }
.gn-book-t { font-size: .8rem; font-weight: 700; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-book-m { display: flex; justify-content: space-between; gap: 6px; font-size: .72rem; color: #71717a; margin-top: 2px; }
.gn-book-m span:last-child { font-family: 'JetBrains Mono', monospace; }

/* left project list */
.gn-p1 .projects-grid { gap: 4px !important; }
.gn-p1 .project-card { display: flex; gap: 12px; align-items: center; background: none; border: 1px solid transparent; }
.gn-p1 .project-card:hover, .gn-p1 .project-card.on { background: rgba(255,255,255,.04); border-color: transparent; }
.gn-p1 .project-card .gn-pc-cover { flex: none; width: 44px; aspect-ratio: 2/3; overflow: hidden; border-radius: 2px; }
.gn-p1 .project-card .gn-pc-cover > div { width: 100% !important; height: 100% !important; }
.gn-p1 .project-card .gn-pc-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gn-p1 .project-card h3 { margin: 0; }
.gn-p1 .project-card .stats { color: #71717a; }
.gn-p1 .new-project-card { background: linear-gradient(90deg, #ff2ea6, #06b6d4) !important; border: none !important; color: #fff !important; font-weight: 700; justify-content: center; padding: .75rem !important; border-radius: 10px !important; margin-bottom: 10px; }
.gn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 12px; }
.gn-empty h3 { font-size: 1rem; color: #fff; margin: 0; }
.gn-empty p { font-size: .82rem; color: #a1a1aa; line-height: 1.55; max-width: 300px; margin: 0; }
.gn-empty .gn-emptybtn { background: none; border: 1px solid #ff2ea6; color: #ff2ea6; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }

/* ---------- Right panel: head, pipeline, panes ---------- */
.gn-page .gn-p3title { font-size: 1rem; }
.gn-page .gn-p3title i { display: none; }
.gn-p3sub { font: 500 .7rem 'JetBrains Mono', monospace; color: #71717a; }
.gn-page .gn-tabs { border: none; gap: 4px; }
.gn-page .gn-tab { border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0; padding: 6px 10px; font-size: .85rem; background: none; }
.gn-page .gn-tab.on { background: none; border-bottom-color: #fff !important; color: #fff; }
.gn-page .gn-idle { border: none; padding: 0; gap: 14px; }
.gn-pipe { display: flex; flex-direction: column; }
.gn-pipe-row { position: relative; display: flex; gap: 14px; align-items: center; padding-bottom: 14px; }
.gn-pipe-line { position: absolute; left: 30px; top: 62px; bottom: 0; width: 1px; background: rgba(255,255,255,.12); }
.gn-pipe-line.done { background: #06b6d4; }
.gn-pipe-node { position: relative; border-radius: 10px; }
.gn-pipe-row.now .gn-pipe-node { box-shadow: 0 0 0 1.5px #ff2ea6; }
.gn-pipe-name { font-size: .85rem; font-weight: 600; color: #e4e4e7; }
.gn-pipe-row.done .gn-pipe-name { color: #a1a1aa; }
.gn-pipe-cost { margin-left: auto; font: 500 .66rem 'JetBrains Mono', monospace; color: #71717a; white-space: nowrap; }
.gn-pipe-sub { font-size: .75rem; color: #71717a; margin-top: 2px; }
.gn-ships { border-top: 1px solid var(--gn-line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.gn-ships-row { display: flex; gap: 18px; align-items: flex-end; }
.gn-ships p { font-size: .76rem; color: #a1a1aa; line-height: 1.5; margin: 0; }
.gn-kicker { font: 600 .66rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #71717a; }
.gn-pane { display: flex; flex-direction: column; gap: 12px; }
.gn-coverbox { display: grid; place-items: center; padding: 18px; border: 1px solid var(--gn-line); border-radius: 10px; background: #0e0e14; }
.gn-note-sm { font-size: .76rem; color: #71717a; line-height: 1.5; margin: 0; }

/* print run (running job) */
.gn-page .gn-working { border: 1px solid var(--gn-line); border-radius: 10px; background: #0e0e14; padding: 12px 14px; gap: 10px; }
.gn-pr-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.gn-pr-k { font: 600 .62rem 'JetBrains Mono', monospace; letter-spacing: .14em; color: #ff2ea6; flex: none; }
.gn-pr-sheet { font-size: .8rem; font-weight: 600; flex: none; }
.gn-page .gn-working-now { font-size: .72rem; font-weight: 400; color: #71717a; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.gn-page .gn-timer { font: 500 1.15rem 'JetBrains Mono', monospace; text-align: right; margin-left: auto; flex: none; }
.gn-sheets { display: flex; flex-wrap: wrap; gap: 4px; }
.gn-sheets i { position: relative; width: 14px; height: 20px; border-radius: 1.5px; overflow: hidden; border: 1px dashed rgba(255,255,255,.16); }
.gn-sheets i.d { border: 1px solid var(--gn-paper); background: linear-gradient(#0d0d0d, #0d0d0d) 50% 0/1px 100% no-repeat, linear-gradient(#0d0d0d, #0d0d0d) 0 42%/100% 1px no-repeat, var(--gn-paper); }
.gn-sheets i.a { border: 1px solid #06b6d4; }
.gn-sheets i.a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: rgba(6,182,212,.45); animation: gnSheet 2.4s ease-in-out infinite; }
@keyframes gnSheet { 0% { height: 0; } 100% { height: 100%; } }
.gn-page .gn-working .gn-stages { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.gn-page .gn-working .gn-stages li { font-size: .74rem; color: #52525b; gap: 5px; }
.gn-page .gn-working .gn-stages li::before { width: 7px; height: 7px; border: 1px solid #3f3f46; box-shadow: none; }
.gn-page .gn-working .gn-stages li.done { color: #a1a1aa; }
.gn-page .gn-working .gn-stages li.done::before { content: "\2713"; width: auto; height: auto; border: none; background: none; color: #06b6d4; font-size: .7rem; line-height: 1; }
.gn-page .gn-working .gn-stages li.now { color: #e4e4e7; }
.gn-page .gn-working .gn-stages li.now::before { background: #ff2ea6; border-color: #ff2ea6; }
.gn-page .gn-safe { font-size: .7rem; margin: 0; }
#artProgress, #assemblyProgress { display: none !important; }

/* ---------- B. Story setup pickers ---------- */
.gn-pick-h { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .55rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
.gn-pick-h .v { color: #ff2ea6; letter-spacing: 0; text-transform: none; font-size: .76rem; font-weight: 600; }
.gn-pick-h .gn-lock { color: #f59e0b; font: 500 .62rem 'JetBrains Mono', monospace; letter-spacing: .05em; }
.gn-stylefields .form-group > label, #gnQuickLook .form-group > label { display: none; }
.gn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.gn-tiles.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gn-tile { background: none; border: none; padding: 0; color: #a1a1aa; font: inherit; font-size: .72rem; text-align: left; cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gn-tile-art { border-radius: 8px; padding: 2px; border: 1px solid var(--gn-line); background: #0a0a0f; }
.gn-tile:hover .gn-tile-art { border-color: rgba(255,255,255,.3); }
.gn-tile.on { color: #fff; font-weight: 700; }
.gn-tile.on .gn-tile-art { border: 2px solid #ff2ea6; padding: 1px; box-shadow: 0 0 0 1px rgba(255,46,166,.25); }
.gn-tile-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gn-gchip { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #d4d4d8; font: inherit; font-size: .76rem; padding: 4px 11px; cursor: pointer; }
.gn-gchip.on { border-color: #ff2ea6; color: #fff; background: rgba(255,46,166,.1); }
.gn-seg { display: flex; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 3px; gap: 3px; }
.gn-seg button { flex: 1; background: none; border: none; color: #a1a1aa; font: inherit; font-size: .82rem; padding: 7px 4px; border-radius: 7px; cursor: pointer; }
.gn-seg button.on { background: rgba(255,46,166,.16); color: #fff; font-weight: 700; }
.gn-pages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.gn-pgchip { background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e4e4e7; font: inherit; padding: 8px 0 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.gn-pgchip .bk { width: 10px; height: 14px; background: #52525b; border-right: 3px solid #3f3f46; border-radius: 1px; }
.gn-pgchip b { font: 600 .8rem 'JetBrains Mono', monospace; }
.gn-pgchip small { font-size: .56rem; color: #71717a; white-space: nowrap; overflow: hidden; max-width: 100%; }
.gn-pgchip.on { border-color: #ff2ea6; background: rgba(255,46,166,.08); }
.gn-pgchip.on .bk { background: #ff2ea6; border-right-color: #b3126f; }
.gn-diagrams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gn-diagrams > label { display: flex !important; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #a1a1aa !important; font-size: .74rem !important; text-align: center; cursor: pointer; line-height: 1.3; margin: 0 !important; }
.gn-diagrams > label { position: relative; }
.gn-diagrams > label input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gn-diagrams > label .gn-dg { color: #71717a; display: grid; place-items: center; height: 64px; }
.gn-diagrams > label span { color: #71717a !important; font-size: .66rem; }
.gn-diagrams > label:has(input:checked) { border-color: #ff2ea6; background: rgba(255,46,166,.07); color: #fff !important; font-weight: 600; }
.gn-diagrams > label:has(input:checked) .gn-dg { color: #ff2ea6; }
.gn-diagrams > label:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.gn-diagrams > label:has(input:disabled:checked) { opacity: 1; }
.gn-diagrams > label:has(input:focus-visible) { outline: 2px solid #06b6d4; }
.gn-stylefields small { display: block; margin-top: .45rem; color: #71717a; font-size: .7rem; line-height: 1.45; }
.gn-stylefields select#inputImageModel { background-color: #101016; }

/* story form in the centre */
.gn-p2 #quickStartBlock { background: none !important; border: none !important; padding: 0 !important; }
.gn-p2 #quickStartBlock > h3 { font-size: 1.05rem !important; }
.gn-page #quickTitle, .gn-page #inputTitle { font: 400 1.9rem/1.1 Anton, Inter, sans-serif !important; text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: .06em .06em 0 #ff2ea6; padding: .7rem 1rem !important; border-color: rgba(6,182,212,.35) !important; background: #0b0b10 !important; }
.gn-page #quickTitle::placeholder, .gn-page #inputTitle::placeholder { color: #3f3f46; text-shadow: none; }
.gn-page #inputIdea, .gn-page #inputPremise { font-size: .95rem; line-height: 1.6; padding: .9rem 1rem; background: #0b0b10; }
.gn-page .form-group input, .gn-page .form-group textarea, .gn-page .form-group select { background: #0b0b10; border-color: rgba(255,255,255,.1); border-radius: 10px; }
.gn-titlehint { float: right; font-size: .7rem; font-weight: 400; color: #71717a; text-transform: none; letter-spacing: 0; }
.gn-page .character-entry { background: #0e0e14; border-radius: 10px; border-left: 3px solid #ff2ea6; }
.gn-page .character-entry:nth-child(n+2) { border-left-color: #f59e0b; }

/* ---------- C. Cast wall ---------- */
.gn-page #characterRefsGrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 14px !important; }
.gn-page .char-ref-card { padding: 0; overflow: hidden; border-radius: 10px; background: #111116; border: 1px solid var(--gn-line); cursor: pointer; display: flex; flex-direction: column; }
.gn-page .char-ref-card.gn-sel { border-color: #ff2ea6; box-shadow: 0 0 0 1px #ff2ea6; }
/* Portrait box (Andrew, 2026-09-24): the Designer drew a 16:9 turnaround SHEET, but
   the app makes ONE tall portrait per character, so 16:9 + top-anchored cover kept only
   the top of the head. 4:5 shows head to about the knees; 12% keeps the face in frame
   when the source is taller than 2:3. */
.gn-sheet-img { position: relative; aspect-ratio: 4/5; background: var(--gn-paper); overflow: hidden; }
.gn-sheet-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.gn-sheet-img img:not([src]) { display: none; }
.gn-sheet-img img[src] ~ .gn-sil { display: none; }
.gn-sil { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; gap: 14px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, rgba(255,255,255,.06) 6px 12px), #16161c; }
.gn-sil > div { position: relative; width: 22%; height: 78%; }
.gn-sheet-img.stale img { opacity: .55; }
.gn-cc-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gn-page .char-ref-card .char-ref-header { margin: 0; justify-content: flex-start; gap: 8px; }
.gn-page .char-ref-card .char-ref-name { color: #fff; font-size: .95rem; }
.gn-page .char-ref-card .char-ref-role { font: 600 .58rem 'JetBrains Mono', monospace; letter-spacing: .08em; border: 1px solid currentColor; background: none; padding: 1px 6px; border-radius: 3px; }
.gn-role-protagonist { color: #ff2ea6 !important; }
.gn-role-antagonist { color: #f59e0b !important; }
.gn-role-supporting, .gn-role-minor { color: #a1a1aa !important; }
.gn-page .char-ref-card .char-ref-prompt { font-family: Inter, sans-serif; font-size: .78rem; color: #a1a1aa; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gn-cc-state { font-size: .76rem; display: flex; align-items: center; gap: 5px; color: #71717a; }
.gn-cc-state.ok { color: #06b6d4; }
.gn-cc-state.warn { color: #f59e0b; }
.gn-page .char-ref-card .char-ref-options { grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 2px 0 0; }
.gn-page .char-ref-card .char-ref-option { border-radius: 4px; border-width: 1.5px; }
.gn-page .char-ref-card .char-ref-option.selected { border-color: #ff2ea6; box-shadow: none; }
.gn-page .char-ref-card .btn-group { margin-top: 4px !important; gap: 5px; }
.gn-page .char-ref-card .btn-group .btn { font-size: .7rem !important; padding: .32rem .6rem !important; }
.gn-page .char-ref-card .char-ref-approved { display: none; }
.gn-page .char-ref-card:has(button[id^="genRefBtn-"]:disabled) .gn-sheet-img::after { content: "Drawing sheet"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,10,15,.7); color: #ff2ea6; font-size: .8rem; font-weight: 600; }
.gn-castlist { display: flex; flex-direction: column; gap: 2px; }
.gn-castrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .85rem; background: none; border: none; color: #e4e4e7; font-family: inherit; text-align: left; width: 100%; }
.gn-castrow:hover, .gn-castrow.on { background: rgba(255,46,166,.08); }
.gn-castrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #52525b; flex: none; }
.gn-castrow .dot.ok { background: #06b6d4; }
.gn-castrow .dot.warn { background: #f59e0b; }
.gn-castrow .st { margin-left: auto; font-size: .7rem; color: #71717a; white-space: nowrap; }
/* Dark behind the portrait (Andrew, 2026-09-24): a tall portrait in this 4:3 box
   left paper-white bars down both sides. Same color as the panel. */
.gn-sheetpane-img { background: #0c0c12; border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; position: relative; }
.gn-sheetpane-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gn-sheet-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gn-sheet-opts img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--gn-paper); border: 1.5px solid transparent; }
.gn-sheet-opts img.on { border-color: #ff2ea6; }
.gn-desc { background: #0e0e14; border: 1px solid var(--gn-line); border-radius: 8px; padding: 10px 12px; font-size: .82rem; line-height: 1.55; color: #d4d4d8; }

/* ---------- D. Script as a manuscript ---------- */
.gn-page .chapter-nav { background: none !important; border: none !important; padding: 0 0 4px !important; gap: 8px !important; }
.gn-page .chapter-nav h4 { display: none; }
.gn-page .chapter-nav-item { display: flex !important; align-items: stretch; gap: 0; padding: 0 !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 4px !important; background: #111116; overflow: hidden; color: #d4d4d8 !important; }
.gn-page .chapter-nav-item .gn-iss { font: 400 1.35rem/1 Anton, Inter, sans-serif; padding: 6px 9px; background: #1c1c22; color: #71717a; display: grid; place-items: center; }
.gn-page .chapter-nav-item .gn-iss-t { padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; font-size: .78rem; font-weight: 600; max-width: 170px; }
.gn-page .chapter-nav-item .gn-iss-t small { font: 500 .62rem 'JetBrains Mono', monospace; color: #71717a; font-weight: 400; }
.gn-page .chapter-nav-item.active { border-color: #ff2ea6 !important; box-shadow: 0 2px 0 #ff2ea6; }
.gn-page .chapter-nav-item.active .gn-iss { background: var(--gn-paper); color: var(--gn-ink); }
.gn-page #scriptContent { gap: 14px; }
.gn-page #scriptContent .page-block { background: var(--gn-paper); color: var(--gn-ink); border: none; border-radius: 2px; padding: 22px 26px; box-shadow: 0 10px 30px rgba(0,0,0,.45); font-family: 'JetBrains Mono', monospace; }
.gn-page #scriptContent .page-header { border-bottom: 1.5px solid var(--gn-ink); }
.gn-page #scriptContent .page-header .page-num { font: 400 1.6rem/1 Anton, Inter, sans-serif; color: var(--gn-ink); text-transform: uppercase; }
.gn-page #scriptContent .layout-badge, .gn-page #scriptContent .layout-picker { background: transparent; color: #4b463c; border: 1px solid rgba(13,13,13,.25); font-family: 'JetBrains Mono', monospace; }
.gn-page #scriptContent .panel-block { background: transparent; border: 1px solid transparent; border-radius: 2px; padding: 8px 4px; margin: 0 0 4px; }
.gn-page #scriptContent .panel-block:focus-within { background: rgba(255,46,166,.08); border-color: #ff2ea6; }
.gn-page #scriptContent .panel-num { background: var(--gn-ink); color: var(--gn-paper); font: 700 .66rem 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; border-radius: 0; padding: 2px 6px; }
.gn-page #scriptContent .page-block .script-edit-label { color: #6b6558; font-family: 'JetBrains Mono', monospace; }
.gn-page #scriptContent .page-block .script-edit-input, .gn-page #scriptContent .page-block .script-edit-textarea { background: transparent; color: var(--gn-ink); border: 1px dashed rgba(13,13,13,.2); font-family: 'JetBrains Mono', monospace; font-size: .8rem; }
.gn-page #scriptContent .page-block .script-edit-input:focus, .gn-page #scriptContent .page-block .script-edit-textarea:focus { background: rgba(255,255,255,.6); border-color: #ff2ea6; border-style: solid; }
.gn-page #scriptContent > div[id^="chapter-"] .script-edit-input, .gn-page #scriptContent > div[id^="chapter-"] .script-edit-textarea { color: #e4e4e7; background: #0b0b10; }
.gn-page #scriptContent > div[id^="chapter-"] .script-edit-input { font: 400 1.05rem/1.2 Anton, Inter, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.gn-page #scriptContent .stale-art-badge { color: #92400e; border-color: #b45309; background: rgba(245,158,11,.18); }
.gn-page #scriptContent .stale-art-badge button { color: #92400e; }
.gn-page #scriptContent > div[id^="chapter-"] { background: #111116; border: 1px solid var(--gn-line); border-left: 3px solid #ff2ea6; border-radius: 6px; padding: 12px 14px 4px; }
.gn-page #scriptContent span[style*="--aetherwave-pink"] { color: #b3126f !important; }
.gn-page #scriptContent div[style*="--text-secondary"] { color: #4b463c !important; }
.gn-page #scriptLogline { color: #a1a1aa; }
.gn-page #scriptTitle { font: 400 1.5rem/1 Anton, Inter, sans-serif; text-transform: uppercase; }
.gn-pagelist { display: flex; flex-direction: column; gap: 1px; }
.gn-pagerow { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: .82rem; color: #e4e4e7; background: none; border: none; border-left: 2px solid transparent; font-family: inherit; text-align: left; width: 100%; }
.gn-pagerow:hover { background: rgba(255,255,255,.04); }
.gn-pagerow.on { background: rgba(255,46,166,.08); border-left-color: #ff2ea6; }
.gn-pagerow .n { font: 500 .7rem 'JetBrains Mono', monospace; color: #71717a; width: 26px; flex: none; }
.gn-pagerow .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-pagerow .s { font: 500 .66rem 'JetBrains Mono', monospace; color: #71717a; white-space: nowrap; }
.gn-pagerow .s.drawn { color: #06b6d4; }
.gn-pagerow .s.drawing { color: #ff2ea6; }
.gn-pagerow .s.redraw { color: #f59e0b; }
.gn-pagediagram { border: 1px solid var(--gn-line); border-radius: 6px; padding: 14px; background: #0e0e14; }
.gn-pagediagram-in { display: grid; gap: 5px; aspect-ratio: var(--page-aspect, 2/3); max-height: 400px; margin: 0 auto; }
.gn-pagediagram-in > div { border: 1px dashed rgba(255,255,255,.25); border-radius: 2px; padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; font-size: .68rem; color: #a1a1aa; min-height: 0; overflow: hidden; }
.gn-pagediagram-in > div b { font: 500 .62rem 'JetBrains Mono', monospace; color: #71717a; }

/* ---------- E. Generate art ---------- */
.gn-now { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.gn-now-h { display: flex; align-items: baseline; gap: 10px; font-size: .85rem; font-weight: 700; }
.gn-now-h .k { font: 600 .62rem 'JetBrains Mono', monospace; letter-spacing: .14em; color: #ff2ea6; }
.gn-now-h .t { margin-left: auto; font: 500 .7rem 'JetBrains Mono', monospace; color: #71717a; font-weight: 400; }
.gn-now-img { border: 1px solid var(--gn-line); background: var(--gn-paper); border-radius: 4px; padding: 4px; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; }
.gn-now-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gn-now-img.empty { background: #0e0e14; border-style: dashed; }
.gn-now-txt { font: 500 .78rem/1.6 'JetBrains Mono', monospace; color: #a1a1aa; white-space: pre-wrap; }
.gn-now-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gn-meta-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--gn-line); border-radius: 8px; min-width: 0; }
.gn-meta-card .ic { width: 34px; height: 34px; flex: none; border-radius: 6px; overflow: hidden; display: grid; place-items: center; color: #ff2ea6; background: rgba(255,46,166,.08); }
.gn-meta-card b { display: block; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-meta-card small { font-size: .68rem; color: #71717a; }
.gn-page .gn-p3 .panels-grid#artPanelsGrid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: 8px; }
.gn-artpage-h { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; margin-top: 8px; font: 600 .74rem 'JetBrains Mono', monospace; color: #e4e4e7; }
.gn-artpage-h span { color: #52525b; font-weight: 400; font-size: .64rem; }
.gn-page #artPanelsGrid .panel-art-card { position: relative; border-radius: 2px; background: #0e0e14; border: 1px solid rgba(255,255,255,.1); }
.gn-page #artPanelsGrid .panel-art-card.has-art { border-color: var(--gn-paper); background: var(--gn-paper); }
.gn-page #artPanelsGrid .art-preview { min-height: 0; aspect-ratio: var(--page-aspect); background: transparent; }
.gn-page #artPanelsGrid .art-preview img { width: 100%; height: 100%; object-fit: cover; }
.gn-page #artPanelsGrid .panel-art-card.pending { border: 1px dashed rgba(255,255,255,.16); }
.gn-page #artPanelsGrid .panel-art-card.drawing { border: 1px solid #06b6d4; }
.gn-page #artPanelsGrid .panel-art-card.drawing .art-preview { background: linear-gradient(0deg, rgba(6,182,212,.25), transparent) 0 100%/100% 0 no-repeat; animation: gnFill 2.4s ease-in-out infinite; }
@keyframes gnFill { to { background-size: 100% 100%; } }
.gn-page #artPanelsGrid .panel-art-card.failed { border: 1px dashed #f59e0b; }
.gn-pnum { position: absolute; left: 4px; bottom: 4px; z-index: 2; font: 600 .6rem 'JetBrains Mono', monospace; background: var(--gn-ink); color: var(--gn-paper); padding: 1px 4px; border: 1px solid rgba(255,255,255,.5); }
.pending .gn-pnum, .drawing .gn-pnum { background: none; border: none; color: #52525b; }
.gn-redraw { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #f59e0b; font-size: .72rem; font-weight: 600; }
.gn-page #artPanelsGrid .art-info { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: 4px; background: linear-gradient(180deg, rgba(10,10,15,.92), rgba(10,10,15,0)); opacity: 0; transition: opacity .15s; }
.gn-page #artPanelsGrid .art-info > span { display: none; }
.gn-page #artPanelsGrid .art-info > div { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.gn-page #artPanelsGrid .panel-art-card:hover .art-info, .gn-page #artPanelsGrid .panel-art-card:focus-within .art-info, .gn-page #artPanelsGrid .panel-art-card.failed .art-info { opacity: 1; }
.gn-page #artPanelsGrid .art-info .btn { padding: 2px 6px !important; font-size: .6rem !important; background: rgba(10,10,15,.9); }
.gn-dry { animation: gnDry 1.2s ease-out both; }
@keyframes gnDry { 0% { clip-path: inset(0 0 45% 0); filter: contrast(.45) brightness(1.5) blur(1px); } 45% { clip-path: inset(0 0 0 0); filter: contrast(.6) brightness(1.35) blur(1px); } 80%, 100% { clip-path: inset(0 0 0 0); filter: none; } }
@media (prefers-reduced-motion: reduce) { .gn-dry { animation: none; } }
.gn-page #artPanelsGrid > .empty-state, .gn-page #characterRefsGrid > .empty-state { grid-column: 1 / -1; }

/* ---------- F. Pages as spreads on a dark table + reader ---------- */
.gn-page .gn-p3[data-view="assembly"] .studio-panel-content, .gn-page .gn-p3[data-view="art"] .studio-panel-content { background: #08080c; margin: 0 -1rem -.75rem; padding: 0 1rem .75rem; }
.gn-page #assembledPagesGrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 22px 18px !important; }
.gn-page #assembledPagesGrid:empty::before { content: none; }
.gn-spread { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.gn-spread-pp { display: flex; justify-content: center; width: 100%; box-shadow: 0 12px 30px rgba(0,0,0,.6); position: relative; }
.gn-spread-pp.one { width: 50%; }
.gn-spread-pp.two::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.35) 45%, rgba(255,255,255,.12) 55%, rgba(0,0,0,0)); pointer-events: none; }
.gn-spread-lbl { font: 500 .68rem 'JetBrains Mono', monospace; color: #71717a; }
.gn-spread.on .gn-spread-lbl { color: #ff2ea6; }
.gn-spread.on .gn-spread-pp { outline: 2px solid #ff2ea6; outline-offset: 2px; }
.gn-page #assembledPagesGrid .panel-art-card { flex: 1; min-width: 0; border-radius: 0; border: none; background: var(--gn-paper); position: relative; }
.gn-page #assembledPagesGrid .art-preview { min-height: 0; background: #16161c; }
.gn-page #assembledPagesGrid .art-preview span { color: #71717a !important; font-size: .72rem; text-align: center; }
.gn-page #assembledPagesGrid .art-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; background: linear-gradient(0deg, rgba(10,10,15,.95), rgba(10,10,15,0)); opacity: 0; transition: opacity .15s; font-size: .62rem; }
.gn-page #assembledPagesGrid .panel-art-card:hover .art-info, .gn-page #assembledPagesGrid .panel-art-card:focus-within .art-info { opacity: 1; }
.gn-page #assembledPagesGrid .art-info .btn { padding: 2px 6px !important; font-size: .6rem !important; }
/* The hover bar on a spread card is about half a page wide: let both halves
   shrink and the button group wrap, so nothing is pushed off the card -
   including while a button reads "Reassembling..." (2026-09-24). */
.gn-page #assembledPagesGrid .art-info > span { min-width: 0; }
.gn-page #assembledPagesGrid .art-info > span:last-child { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.gn-page #assembledPagesGrid .panel-art-card[data-stale="1"] { outline: 2px solid #f59e0b; outline-offset: -2px; }
.gn-preview { background: #08080c; border: 1px solid var(--gn-line); border-radius: 10px; padding: 18px; display: grid; place-items: center; min-height: 240px; }
.gn-preview img { max-width: 100%; max-height: 460px; box-shadow: 0 12px 30px rgba(0,0,0,.6); display: block; }
.gn-lettering { display: flex; flex-direction: column; gap: 8px; }
.gn-lettering > div { display: flex; align-items: center; gap: 12px; border: 1px solid var(--gn-line); border-radius: 9px; padding: 10px 12px; }
.gn-lettering b { display: block; font-size: .82rem; }
.gn-lettering small { font-size: .68rem; color: #71717a; }
.gn-lettering .ic { width: 52px; height: 36px; display: grid; place-items: center; flex: none; overflow: hidden; }

#viewReader .studio-panel { background: #0a0a0f !important; }
#viewReader .sf-header { align-items: center; }
.gn-rd { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.gn-rd-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gn-rd-seg { display: flex; border: 1px solid var(--gn-line); border-radius: 8px; padding: 3px; margin-left: auto; }
.gn-rd-seg button { background: none; border: none; color: #a1a1aa; font: inherit; font-size: .8rem; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.gn-rd-seg button.on { background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }
.gn-rd-stage { position: relative; flex: 1; min-height: 320px; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 8px 0; }
.gn-rd-book { position: relative; display: flex; box-shadow: 0 24px 60px rgba(0,0,0,.7); background: var(--gn-paper); max-height: 100%; }
.gn-rd-book img { display: block; height: min(62vh, 640px, calc(100vh - 400px)); min-height: 220px; width: auto; max-width: 42vw; object-fit: contain; cursor: pointer; }
.gn-rd-book.single img { max-width: 80vw; }
.gn-rd-book.two::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 36px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.28) 45%, rgba(255,255,255,.18) 55%, rgba(0,0,0,0)); pointer-events: none; }
.gn-rd-curl { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; background: linear-gradient(135deg, rgba(10,10,15,0) 50%, #d8d2c4 50%, #f4f1ea 70%); box-shadow: -4px -4px 10px rgba(0,0,0,.25); cursor: pointer; }
.gn-rd-blank { display: grid; place-items: center; height: min(62vh, 640px, calc(100vh - 400px)); aspect-ratio: var(--page-aspect); background: #16161c; color: #52525b; font: 500 .75rem 'JetBrains Mono', monospace; }
.gn-rd-arrow { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: none; color: #e4e4e7; font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.gn-rd-arrow.next { border-color: #ff2ea6; color: #ff2ea6; }
.gn-rd-arrow:disabled { opacity: .3; cursor: default; }
.gn-rd-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--gn-line); padding-top: 10px; }
.gn-rd-count { font: 600 .8rem 'JetBrains Mono', monospace; white-space: nowrap; }
.gn-rd-thumbs { display: flex; gap: 4px; overflow-x: auto; flex: 1; padding: 4px 2px; }
.gn-rd-thumbs button { flex: none; width: 24px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.2); background: #16161c; cursor: pointer; overflow: hidden; }
.gn-rd-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gn-rd-thumbs button.on { border-color: #ff2ea6; outline: 1px solid #ff2ea6; }
.gn-rd-hint { font-size: .74rem; color: #71717a; white-space: nowrap; }

/* ---------- G. Export ---------- */
.gn-print-h { display: flex; gap: 22px; align-items: center; margin-bottom: 14px; }
.gn-print-h h3 { font: 400 2rem/.9 Anton, Inter, sans-serif; text-transform: uppercase; margin: 0; flex: none; }
.gn-print-h p { font-size: .82rem; color: #a1a1aa; line-height: 1.5; margin: 0; }
.gn-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gn-prod { border: 1px solid var(--gn-line); border-radius: 10px; background: #0e0e14; overflow: hidden; display: flex; flex-direction: column; }
.gn-prod.wide { grid-column: span 2; }
.gn-prod-obj { height: 150px; display: grid; place-items: center; overflow: hidden; background: #0b0b10; border-bottom: 1px solid var(--gn-line); }
.gn-prod-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.gn-prod-b b { font-size: .88rem; display: flex; justify-content: space-between; gap: 6px; }
.gn-prod-b b span { font: 500 .66rem 'JetBrains Mono', monospace; color: #71717a; font-weight: 400; }
.gn-prod-b p { font-size: .74rem; color: #a1a1aa; line-height: 1.45; margin: 0; flex: 1; }
.gn-prod-b .btn { margin-top: 6px; width: 100%; padding: .5rem .6rem; font-size: .78rem; border-radius: 8px; background: rgba(255,255,255,.04); color: #e4e4e7; border: 1px solid rgba(255,255,255,.14); }
.gn-prod-b .btn.gn-paperbtn { border: none; }
.gn-page #backMatterCard { background: #0e0e14 !important; border: 1px solid var(--gn-line) !important; border-radius: 10px !important; }
.gn-exp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .82rem; }
.gn-exp-list li { display: flex; gap: 8px; align-items: center; color: #71717a; }
.gn-exp-list li.ok { color: #e4e4e7; }
.gn-exp-list li i { color: #3f3f46; }
.gn-exp-list li.ok i { color: #06b6d4; }
.gn-bundle-obj { position: relative; height: 290px; margin: -.25rem -1rem 0; background: radial-gradient(90% 90% at 50% 20%, rgba(255,46,166,.12), transparent 60%), #0b0b10; border-bottom: 1px solid var(--gn-line); overflow: hidden; }
.gn-bundle-obj > div { position: absolute; }
.gn-exts { display: flex; flex-wrap: wrap; gap: 6px; }
.gn-exts span { font: 500 .7rem 'JetBrains Mono', monospace; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 3px 7px; color: #d4d4d8; }
.gn-bundle-btn { width: 100%; padding: .95rem !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 800 !important; border-radius: 10px !important; margin-top: auto; }

/* ---------- Panel visibility per view ---------- */
.gn-ctx { display: none; }
.gn-p1[data-view="projects"] .gn-ctx[data-ctx~="projects"],
.gn-p1[data-view="setup"][data-mode="quick"] .gn-ctx[data-ctx~="setup-quick"],
.gn-p1[data-view="characters"] .gn-ctx[data-ctx~="characters"],
.gn-p1[data-view="script"] .gn-ctx[data-ctx~="script"],
.gn-p1[data-view="art"] .gn-ctx[data-ctx~="art"],
.gn-p1[data-view="assembly"] .gn-ctx[data-ctx~="assembly"],
.gn-p1[data-view="export"] .gn-ctx[data-ctx~="export"] { display: block; }
.gn-p2[data-view="projects"] .gn-foot { display: none; }

/* ---------- Mobile: panels stack under 1025px ---------- */
@media (max-width: 1024px) {
  .gn-grid > .studio-col:nth-child(2) { order: -2; grid-column: 1 / -1; }
  .gn-grid[data-view="art"] > .studio-col:nth-child(3),
  .gn-grid[data-view="assembly"] > .studio-col:nth-child(3),
  .gn-grid[data-view="characters"] > .studio-col:nth-child(3) { order: -1; grid-column: 1 / -1; }
  .gn-grid[data-view="projects"] > .studio-col:first-child { display: none !important; }
  .gn-grid[data-view="projects"] > .studio-col:nth-child(3) { grid-column: 1 / -1; }
  .gn-page .gn-foot { position: sticky; bottom: 0; z-index: 5; background: #0a0a0f; }
  .gn-hero-fan { transform: scale(.75); transform-origin: top right; }
}
@media (max-width: 768px) {
  .gn-hero { padding: 22px 18px; min-height: 0; }
  .gn-hero-copy { max-width: 58%; }
  .gn-hero-copy p { font-size: .84rem; }
  .gn-hero-fan { right: -40px; top: 20px; transform: scale(.62); }
  .gn-hero-cta { margin-top: 18px; }
  .gn-hero-cta .btn { flex: 1 1 100%; }
  .gn-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .gn-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gn-tiles.t2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gn-print-h { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gn-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gn-prod.wide { grid-column: 1 / -1; }
  /* mobile-studio.css turns every .panels-grid into a flex column at this width */
  .gn-page #artPanelsGrid, .gn-page #assembledPagesGrid, .gn-page #characterRefsGrid { display: grid !important; gap: 10px !important; }
  .gn-page .gn-p3 .panels-grid#artPanelsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .gn-page #assembledPagesGrid { grid-template-columns: minmax(0, 1fr) !important; }
  .gn-rd-book img { height: auto; min-height: 0; width: calc((100vw - 150px) / 2); max-width: none; }
  .gn-rd-book.single img { width: min(calc(100vw - 150px), 520px); }
  .gn-rd-arrow { width: 36px; height: 36px; }
  .gn-rd-stage { gap: 8px; min-height: 0; }
  .gn-rd-hint { display: none; }
  .gn-page #scriptContent .page-block { padding: 16px 14px; }
}
@media (max-width: 600px) {
  .gn-rd-stage { flex-wrap: wrap; }
  .gn-rd-book { order: -1; flex-basis: auto; }
  .gn-rd-stage .gn-rd-book.single img { width: calc(100vw - 60px); }
  .gn-rd-stage .gn-rd-book.two img { width: calc((100vw - 60px) / 2); }
}
@media (max-width: 480px) {
  .gn-filters { margin-left: 0; }
  .gn-page .gn-p2head { padding: 8px 10px; }
  .gn-now-meta { grid-template-columns: 1fr; }
}