.studio-home .hero.hero-prism{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,.85fr);align-items:center;gap:24px;min-height:560px;padding:64px 0 78px;isolation:isolate}
.hero-prism .hero-copy{min-width:0;position:relative;z-index:1}.hero-prism .hero-copy h1[data-hero-copy-heading]{font-size:var(--cycle-font-size,clamp(28px,3.3vw,52px));line-height:1.33;min-height:4em;margin:24px 0 0}.hero-prism .hero-copy h1{font-size:clamp(28px,3.3vw,52px)}
.hero-prism .hero-language-row{flex-wrap:wrap;gap:8px}.hero-prism .hero-copy>.eyebrow{font-size:9px}.hero-prism .hero-side{position:relative;z-index:1;min-width:0}.hero-prism .hero-side>p{font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 26px}.hero-prism .hero-side .row{display:flex;flex-wrap:wrap;gap:10px}.hero-prism .hero-side .button{padding:12px 15px;font-size:12px}.hero-prism .hero-footnote{margin-top:28px;font-size:8px;letter-spacing:.09em}
.hero-prism-art{width:100%;aspect-ratio:1;position:relative;pointer-events:none;color:#111;min-width:0}.hero-prism-art svg{width:100%;height:100%;overflow:visible}.prism-object{fill:#fafafa}.hero-prism-art .prism-rim{opacity:.7}
[data-theme=dark] .hero-prism-art{color:#fff}[data-theme=dark] .prism-object{fill:#111}
@media(min-width:1500px){.studio-home .hero.hero-prism{min-height:620px;gap:40px}}
@media(max-width:1000px){.studio-home .hero.hero-prism{gap:16px;min-height:480px;grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}.hero-prism-art{grid-column:2;grid-row:1/3;align-self:center}.hero-prism .hero-side{grid-column:1}.hero-prism .hero-copy h1[data-hero-copy-heading]{font-size:var(--cycle-font-size,clamp(30px,4.4vw,44px))}.hero-prism .hero-side>p{margin-bottom:20px}}
@media(max-width:600px){.studio-home .hero.hero-prism{grid-template-columns:minmax(0,1fr);gap:8px;padding:38px 0 44px;min-height:0}.hero-prism .hero-copy{grid-row:1}.hero-prism-art{grid-column:1;grid-row:2;width:min(100%,340px);justify-self:center;margin:-16px 0}.hero-prism .hero-side{grid-row:3}.hero-prism .hero-copy h1[data-hero-copy-heading]{font-size:var(--cycle-font-size,clamp(30px,9vw,46px));margin-top:18px}.hero-prism .hero-side>p{font-size:13px}.hero-prism .hero-footnote{margin-top:24px}}
/* Original Nellcodex emblem, with illumination confined to its silhouette edges. */
.hero-prism-art{display:grid;place-items:center}.prism-logo-shape{width:100%;height:100%;mask:url('/assets/NellCodex-svg-01.svg') center/contain no-repeat;-webkit-mask:url('/assets/NellCodex-svg-01.svg') center/contain no-repeat}.prism-logo-face,.prism-logo-glow{position:absolute;width:65%;height:65%;inset:17.5%}.prism-logo-glow{display:none}.prism-logo-glow .prism-logo-shape{background:#111}.prism-logo-face{background:#fafafa}[data-theme=dark] .prism-logo-glow .prism-logo-shape{background:#fff}[data-theme=dark] .prism-logo-face{background:#111}
/* Mirror the desktop hero copy around the central emblem. */
@media(min-width:1001px){.studio-home .hero.hero-prism{grid-template-columns:minmax(0,.85fr) minmax(0,1.12fr) minmax(0,1fr)}.hero-prism .hero-side{grid-column:1;grid-row:1}.hero-prism .hero-prism-art{grid-column:2;grid-row:1}.hero-prism .hero-copy{grid-column:3;grid-row:1}}

.prism-logo-outline{position:absolute;inset:17.5%;width:65%;height:65%;pointer-events:none;color:#111}.prism-logo-outline svg{display:block;width:100%;height:100%;overflow:visible}.prism-logo-outline :is(path,polygon,polyline,rect,circle){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.prism-logo-outline[hidden]{display:none}[data-theme=dark] .prism-logo-outline{color:#fff}
/* Draw the actual silhouette and its glow together, then reverse the complete sequence. */
.prism-drawing>.prism-logo-face{opacity:0}.prism-drawing .prism-logo-glow>.prism-logo-shape{display:none}.prism-logo-glow>.prism-drawn-glow{display:block;width:100%;height:100%;overflow:visible}.prism-logo-outline :is(path,polygon,polyline,rect,circle){fill:#fafafa;stroke-width:1.5}.prism-drawn-glow :is(path,polygon,polyline,rect,circle){fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}[data-theme=dark] .prism-logo-outline :is(path,polygon,polyline,rect,circle){fill:#111}
.prism-logo-face{background:#171717}.prism-logo-outline :is(path,polygon,polyline,rect,circle){fill:#171717}[data-theme=dark] .prism-logo-face{background:#fff}[data-theme=dark] .prism-logo-outline :is(path,polygon,polyline,rect,circle){fill:#fff}

.logo-three-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.prism-texture-surface{position:absolute;inset:17.5%;opacity:0;pointer-events:none}.intro-emblem>.logo-three-canvas{width:100%;height:100%}

.intro-water-ripples{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.intro-water-ripples circle{stroke:var(--intro-wave);stroke-width:1.2px;filter:drop-shadow(0 0 3px var(--intro-glow))}



.hero-prism-art{pointer-events:none}.hero-prism-art .prism-logo-glow{transform:none}.hero-prism-art.prism-solid>.prism-logo-outline,.hero-prism-art.prism-solid>.prism-logo-glow{visibility:hidden}

.brand-intro.intro-white-slide{--intro-bg:#fafafa;color:#171717;background:var(--intro-bg);will-change:transform}[data-theme=dark] .brand-intro.intro-white-slide{--intro-bg:#111;color:#f5f5f5}.intro-white-slide .intro-backdrop{background:var(--intro-bg)}.intro-white-slide .intro-emblem,.intro-white-slide .intro-copy{color:inherit}

.logo-hack-overlay{position:absolute;inset:0;pointer-events:none;color:#47faff;font-family:monospace;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:2px 0 #ff1768,-2px 0 #07dfff}.logo-hack-overlay[hidden]{display:none}.logo-hack-overlay svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b5ffff;stroke-width:2;filter:drop-shadow(0 0 3px #00eaff)}.logo-hack-overlay .hack-split{stroke:#ff267c;stroke-width:3}.logo-hack-code{font-size:clamp(16px,2vw,28px);font-weight:800;letter-spacing:.08em;background:#090f19d9;padding:3px 8px}.logo-hack-overlay small{font-size:8px;letter-spacing:.18em;background:#090f19dc;padding:3px 6px}

.logo-hack-overlay svg{filter:drop-shadow(0 0 4px #00eaff) drop-shadow(0 0 10px #fd198d)}.logo-hack-code{text-shadow:3px 0 #ff1768,-3px 0 #07dfff,0 0 12px #00eaff}

.logo-error-field{position:fixed;inset:0;z-index:89;pointer-events:none;overflow:hidden;perspective:850px;color:var(--text,#171717)}[data-theme=dark] .logo-error-field{color:#e6f6f9}.logo-error-word{position:absolute;white-space:nowrap;letter-spacing:.18em;font-family:monospace;transform-origin:left center;will-change:transform,opacity}.logo-error-grid{position:absolute;inset:-40%;background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:110px 110px;transform:rotateY(-30deg) rotateX(14deg);opacity:0;mask-image:radial-gradient(ellipse,#0003,transparent 68%)}

.logo-error-word>span{display:block;white-space:nowrap;line-height:1.55}.logo-error-word{letter-spacing:.1em}

.logo-liquid-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}.logo-liquid-glow[hidden]{display:none}


/* Mobile hero: emblem first, followed by three centered rotating lines. */
@media(max-width:600px){
 .studio-home .hero.hero-prism{grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 0 38px;justify-items:center}
 .hero-prism .hero-prism-art{grid-column:1;grid-row:1;width:min(78vw,290px);margin:0;justify-self:center}
 .hero-prism .hero-copy{grid-column:1;grid-row:2;width:100%;max-width:340px;text-align:center;justify-self:center}
 .hero-prism .hero-copy h1[data-hero-copy-heading]{font-size:var(--cycle-font-size,clamp(24px,7.4vw,32px));line-height:1.33;min-height:3.99em;margin:0 auto 18px;text-align:center}
 .hero-prism .hero-cycle-line{text-align:center}
 .hero-prism .hero-language-row{justify-content:center}
 .hero-prism .hero-side{grid-column:1;grid-row:3;width:100%;max-width:340px;text-align:center}
 .hero-prism .hero-side .row{justify-content:center}
 .hero-prism .hero-footnote{justify-content:center}
}
/* Reserve gestures started inside the logo for rotation; the rest of the page scrolls normally. */
.hero-prism .hero-prism-art{pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hero-prism .hero-prism-art.is-spinning{cursor:grabbing}
.hero-prism .hero-prism-art>.prism-logo-outline,.hero-prism .hero-prism-art>.prism-texture-surface,.hero-prism .hero-prism-art>.prism-logo-face,.hero-prism .hero-prism-art>.prism-logo-glow{scale:var(--logo-audio-scale,1)}
.hero-prism .hero-prism-art>.logo-audio-disconnect{position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);z-index:5;pointer-events:auto;display:flex;align-items:center;gap:14px;width:max-content;max-width:95%;min-height:58px;padding:11px 16px;border:1px solid color-mix(in srgb,var(--yellow) 28%,var(--line));border-radius:18px;background:var(--white);color:var(--ink);font:inherit;box-shadow:0 6px 20px #0001;cursor:pointer;transition:border-color .2s,background .2s}
.hero-prism .logo-audio-disconnect:hover{border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 7%,var(--white))}
.hero-prism .logo-audio-disconnect:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.logo-audio-control-copy{display:grid;gap:3px;text-align:left}.logo-audio-control-copy strong{font-size:12px;font-weight:600}.logo-audio-control-copy small{font-size:10px;color:var(--muted)}
.logo-audio-equalizer{display:flex;align-items:center;gap:3px;height:24px;color:var(--yellow)}.logo-audio-equalizer i{width:3px;height:9px;border-radius:3px;background:currentColor;animation:logo-audio-meter .75s ease-in-out infinite alternate}.logo-audio-equalizer i:nth-child(2){height:22px;animation-delay:-.3s}.logo-audio-equalizer i:nth-child(3){height:15px;animation-delay:-.6s}.logo-audio-equalizer i:nth-child(4){height:19px;animation-delay:-.15s}
.logo-audio-stop{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--ink) 6%,transparent);font-size:10px;color:var(--muted)}
@keyframes logo-audio-meter{to{transform:scaleY(.35)}}
@media(prefers-reduced-motion:reduce){.logo-audio-equalizer i{animation:none}}
.hero-prism .logo-audio-guidance{margin-top:16px;max-width:340px}
.hero-prism .hero-side:has(.logo-audio-guidance){width:100%;max-width:360px}
.hero-prism .hero-side:has(.logo-audio-guidance)>p{font-size:14px;line-height:1.95;margin-bottom:24px;color:var(--muted);text-wrap:pretty}
.hero-prism .hero-side:has(.logo-audio-guidance)>.row{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;margin:0}
.hero-prism .hero-side:has(.logo-audio-guidance)>.row>.button{width:100%;min-height:48px;padding:12px 10px;border-radius:13px;font-size:12px;white-space:nowrap}
.hero-prism .hero-side:has(.logo-audio-guidance)>.logo-audio-guidance{max-width:none;margin-top:12px}
.hero-prism .hero-side:has(.logo-audio-guidance)>.hero-footnote{margin-top:24px;opacity:.65}
.hero-prism .logo-audio-hint{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--yellow) 5%,var(--white));color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.hero-prism .logo-audio-hint:hover{border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 12%,var(--white))}
.logo-audio-hint-copy{display:grid;gap:3px;flex:1;min-width:0}.logo-audio-hint-copy strong{font-size:12px;font-weight:600}.logo-audio-hint-copy small{font-size:10px;line-height:1.65;color:var(--muted)}
.hero-prism .logo-audio-hint{padding:16px;gap:13px;background:color-mix(in srgb,var(--ink) 3%,var(--white));border-radius:15px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 3%,transparent)}
.hero-prism .logo-audio-hint-copy strong{font-size:13px}.hero-prism .logo-audio-hint-copy small{font-size:11px}
.logo-audio-icon{display:flex;align-items:center;justify-content:center;gap:3px;flex:0 0 34px;height:34px;border-radius:10px;background:var(--yellow);color:#202020}.logo-audio-icon i{width:3px;height:10px;border-radius:3px;background:currentColor}.logo-audio-icon i:nth-child(2){height:20px}.logo-audio-icon i:nth-child(3){height:15px}.logo-audio-hint-arrow{font-size:17px;color:var(--muted)}
.hero-prism .hero-prism-art>button[hidden]{display:none}
.hero-prism .hero-prism-art>*{pointer-events:none}

/* Give the interactive emblem more presence without changing its rotation. */
.hero-prism-art>.prism-logo-face,
.hero-prism-art>.prism-logo-glow,
.hero-prism-art>.prism-logo-outline{inset:8%;width:84%;height:84%}
.hero-prism-art>.prism-texture-surface{inset:8%;filter:drop-shadow(0 8px 12px #00000024)}
[data-theme=dark] .hero-prism-art>.prism-texture-surface{filter:drop-shadow(0 0 12px #d9efff24) drop-shadow(0 0 28px #8bcbff18)}
.hero-prism-art>.prism-logo-outline{filter:drop-shadow(0 0 6px #d8b73e30)}
@media(max-width:600px){.hero-prism .hero-prism-art{width:min(86vw,320px)}}
/* The renderer already pads its canvas for smoke and flames; do not crop that padding. */
.hero-prism .hero-prism-art{overflow:visible}

/* Monochrome glitch silhouette: no neon bloom or chromatic text shadows. */
.hero-prism-art>.prism-texture-surface:has(canvas[data-texture="digital-glitch"]){filter:none}
.logo-hack-overlay{color:#fff;text-shadow:none}
.logo-hack-overlay .logo-hack-code{background:#080808;color:#fff;text-shadow:2px 0 #777,-2px 0 #333;border:1px solid #aaa;letter-spacing:.12em}
.logo-hack-overlay small{background:#080808;color:#ddd;letter-spacing:.18em}

.logo-404-field{position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none;user-select:none;color:var(--ink,#171717)}
.logo-404-field>span{position:absolute;display:block;font-family:monospace;font-weight:700;letter-spacing:.12em;line-height:1;white-space:nowrap}
/* Keep the hero close to the header on short landscape phone screens. */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
 .studio-home .hero.hero-prism{margin-top:0;padding:16px 0 24px;min-height:0;gap:10px 22px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}
 .hero-prism .hero-copy{grid-column:1;grid-row:1;padding:0}
 .hero-prism .hero-copy h1[data-hero-copy-heading]{margin-top:0;min-height:0;font-size:clamp(24px,4vw,34px)}
 .hero-prism .hero-prism-art{grid-column:2;grid-row:1/3;align-self:start;justify-self:center;width:min(100%,240px);margin:0}
 .hero-prism .hero-side{grid-column:1;grid-row:2}
 .hero-prism .hero-side>p{font-size:12px;line-height:1.65;margin-bottom:10px}
 .hero-prism .hero-side .button{padding:9px 12px;font-size:11px}
 .hero-prism .hero-footnote{margin-top:12px}
}
/* Effects expand the renderer and camera together; do not clamp its padded canvas. */
#main .prism-texture-surface>.logo-three-canvas{max-width:none}

.hero-prism-art.prism-fault-active>svg,.hero-prism-art.prism-fault-active>.prism-logo-glow,.hero-prism-art.prism-fault-active>.prism-logo-face{visibility:hidden!important}

.hero-prism-art.prism-fault-active>.prism-logo-outline{visibility:hidden!important}


.hero-prism .logo-audio-hint.is-connected{border-radius:999px;border-color:color-mix(in srgb,var(--yellow) 40%,var(--line));background:color-mix(in srgb,var(--yellow) 6%,var(--white));gap:14px}
.logo-audio-hint.is-connected .logo-audio-hint-copy{flex:1}
.logo-audio-hint.is-connected .logo-audio-equalizer{width:34px;justify-content:center}
.logo-audio-hint.is-connected .logo-audio-stop{flex-shrink:0}

.logo-audio-count{display:block;margin:8px 4px 0;color:var(--muted);font-size:11px;line-height:1.6;text-align:center;font-variant-numeric:tabular-nums}.logo-audio-count[hidden]{display:none}