/*
 * VirgileTec – ORIGAMI INTERFACE v0.3.3
 * Copyright (C) 2026 – Virgiletec.
 * Senior Development – Vincent V. Janssens <vincent@virgiletec.com>
 *
 * Visual design, paper shading, fold transitions and responsive layout.
 * Standards: CSS classes kebab-case; custom properties --kebab-case.
 */

:root{
    --ink:#252728;
    --muted:#96999a;
    --paper:#f7f5ef}

*{
    box-sizing:border-box}

body{
    margin:0;
    background:#fdfcf9;
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden}

header{
    position:absolute;
    top:36px;
    left:5vw;
    z-index:5}

.brand{
    font-size:17px;
    letter-spacing:.38em;
    font-weight:600}

.tag{
    font-size:9px;
    letter-spacing:.23em;
    color:#9b9b97;
    margin-top:10px;
    text-transform:uppercase}

main{
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:100px 20px 70px}

.stage{
    width:min(950px,100%);
    position:relative;
    text-align:center}

.eyebrow{
    letter-spacing:.42em;
    color:#aaa9a3;
    font-size:10px;
    text-transform:uppercase;
    margin:0 0 15px}

.stage h1{
    font-family:Georgia,serif;
    font-weight:400;
    font-size:clamp(30px,4.4vw,62px);
    letter-spacing:-.04em;
    margin:0}

.sub{
    font-size:12px;
    color:#9b9b98;
    letter-spacing:.1em;
    margin-top:14px}

.unicorn{
    display:block;
    width:100%;
    max-height:560px;
    overflow:visible;
    margin:8px auto 0;
    filter:drop-shadow(0 20px 15px rgba(70,65,55,.08))}

.piece{
    stroke:#d5d1c9;
    stroke-width:1.25;
    stroke-linejoin:round;
    cursor:pointer;
    transition:filter .25s,opacity .25s}

.piece:hover,.piece.active{
    filter:brightness(.96)}

.fold{
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .65s;
    pointer-events:none}

.piece.active .fold{
    transform:translate(var(--dx,0px),var(--dy,-12px)) rotate(var(--rot,-10deg)) scale(.94);
    opacity:.55}

.fold-label{
    pointer-events:none;
    opacity:0;
    transition:opacity .25s;
    font-size:13px;
    letter-spacing:.22em;
    font-weight:600;
    fill:#454641}

.piece.active .fold-label{
    opacity:1}

.hint{
    font-size:10px;
    letter-spacing:.28em;
    color:#a4a29e;
    text-transform:uppercase;
    margin-top:-18px}

footer{
    position:fixed;
    bottom:27px;
    left:5vw;
    right:5vw;
    display:flex;
    justify-content:space-between;
    color:#a6a6a1;
    font-size:10px;
    letter-spacing:.18em;
    z-index:5}

.panel{
    position:fixed;
    inset:0;
    background:rgba(247,246,241,.96);
    z-index:10;
    display:none;
    place-items:center;
    padding:25px}

.panel.open{
    display:grid}

.card{
    background:white;
    border:1px solid #e9e6df;
    padding:clamp(30px,6vw,75px);
    width:min(600px,100%);
    box-shadow:0 30px 80px #38352b12;
    position:relative}

.card small{
    letter-spacing:.35em;
    color:#a3a19a}

.card h2{
    font:400 clamp(36px,6vw,60px) Georgia,serif;
    margin:20px 0}

.card p{
    line-height:1.9;
    color:#777;
    max-width:430px}

.close{
    position:absolute;
    right:25px;
    top:20px;
    background:none;
    border:0;
    font-size:25px;
    cursor:pointer;
    color:#777}

.go{
    display:inline-block;
    margin-top:18px;
    color:#333;
    text-decoration:none;
    border-bottom:1px solid #aaa;
    padding-bottom:8px;
    font-size:12px;
    letter-spacing:.12em}

.mobile-menu{
    display:none}

@media(max-width:650px) {header{
    top:22px}

.brand{
    font-size:14px}

.tag{
    font-size:8px}

main{
    padding-top:120px}

.unicorn{
    margin:35px auto}

.hint{
    margin-top:8px}

.mobile-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin:20px auto 50px}

.mobile-menu button{
    border:1px solid #dedbd5;
    background:transparent;
    padding:10px 12px;
    font-size:10px;
    letter-spacing:.1em;
    color:#777}

footer{
    position:static;
    padding:0 5vw 20px;
    font-size:8px}}

/* Six hinge-driven origami interactions. */
.piece.hinged .fold{
    transition:none;
    transform:none!important;
    opacity:1!important}

.piece.hinged .fold path{
    transition:none;
    transform:none}

.piece.hinged.active .fold-label{
    opacity:1}

.piece.hinged:focus-visible{
    outline:2px solid #777;
    outline-offset:3px}

.fold-label{
    paint-order:stroke;
    stroke:#fdfcf9;
    stroke-width:5px;
    stroke-linejoin:round}

@media(prefers-reduced-motion:reduce) {.fold,.fold-label{
    transition:none!important}}

/* FIX v0.3.3: SVG shapes must receive pointer events to enable interaction.
 * Previously .fold { pointer-events:none } blocked the entire unicorn.
 */
.piece .fold{
    pointer-events:visiblePainted;
}
.piece .fold path{
    pointer-events:visiblePainted;
}
.piece{
    pointer-events:visiblePainted;
}
.piece:focus-visible .fold-label{
    opacity:1;
}

/* v0.3.3 — The selected paper itself becomes the content surface. */
.fold-label{font-size:11px;letter-spacing:.07em;stroke-width:3px}
.piece[data-menu="Development"] .fold-label{font-size:10px;letter-spacing:0;}
.piece[data-menu="Creative Lab"] .fold-label{font-size:11px;}
.piece[data-menu="Development"].active .fold-label{opacity:0;}
.paper-detail{pointer-events:none;opacity:0;transition:opacity .25s ease;filter:drop-shadow(0 15px 20px rgba(50,45,35,.13));}
.paper-detail.open{pointer-events:auto;opacity:1;}
.paper-content{font-family:Arial,Helvetica,sans-serif;color:#333;position:relative;width:100%;height:100%;padding:10px 10px 0 14px;text-align:left;overflow:hidden;}
.paper-kicker{font-size:10px;letter-spacing:.22em;color:#96938e;}
.paper-content h2{font:normal 38px/1.08 Georgia,serif;margin:17px 0 12px;letter-spacing:-.03em;}
.paper-content p{font-size:15px;line-height:1.55;color:#77736e;margin:0;max-width:355px;}
.paper-close{position:absolute;right:5px;top:0;border:0;background:transparent;font-size:29px;color:#777;cursor:pointer;min-width:40px;min-height:40px;}
.paper-link{position:absolute;left:14px;bottom:14px;font-size:11px;letter-spacing:.09em;text-decoration:none;color:#444;border-bottom:1px solid #aaa;padding-bottom:5px;}
.unicorn.detail-active .piece:not(.selected){opacity:.23;pointer-events:none;}
.unicorn.detail-active .piece.selected{filter:none;}
.unicorn.detail-active .piece .fold-label{opacity:0;}
@media(prefers-reduced-motion:reduce){.paper-detail{transition:none}}

/* v0.3.3 — Per-facet pastel hover and full-viewport origami expansion. */
.piece[data-menu="Vision"]{--pastel:#f3dfb3}
.piece[data-menu="About"]{--pastel:#e2d9ef}
.piece[data-menu="Innovation"]{--pastel:#d3e9dd}
.piece[data-menu="Creative Lab"]{--pastel:#f4d5df}
.piece[data-menu="Development"]{--pastel:#cfe4f3}
.piece[data-menu="Projects"]{--pastel:#e7e0bc}
.piece[data-menu="Arcade Games"]{--pastel:#f5d9c3}
.piece[data-menu="Contact"]{--pastel:#d9e7ea}
.piece[data-menu="Software"]{--pastel:#d6dbf1}
.piece[data-menu="Legacy"]{--pastel:#e9d9c9}
.piece[data-menu="Music Lab"]{--pastel:#d9e8cb}
.piece.active .fold path:first-child,
.piece:hover .fold path:first-child{fill:var(--pastel)!important;stroke:#aaa69e;stroke-width:2;transition:fill .22s ease}
.piece.active .fold-label{opacity:1!important;fill:#252728;stroke:#fdfcf9;stroke-width:4;paint-order:stroke}
.piece[data-menu="Development"].active .fold-label{opacity:1!important}
.piece[data-menu="Development"] .fold-label{font-size:12px;letter-spacing:.035em}
.piece[data-menu="Creative Lab"] .fold-label{font-size:11px}
.unfold-screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;background:var(--unfold-color,#f6f3ed);clip-path:circle(0px at var(--origin-x,50%) var(--origin-y,50%));visibility:hidden;pointer-events:none;transition:clip-path 2.4s cubic-bezier(.45,0,.22,1),visibility 0s linear 2.4s}
.unfold-screen.is-open{visibility:visible;pointer-events:auto;clip-path:circle(150vmax at var(--origin-x,50%) var(--origin-y,50%));transition:clip-path 2.4s cubic-bezier(.45,0,.22,1),visibility 0s}
.unfold-model{position:absolute;inset:0;width:100%;height:100%;opacity:.24;transform:translate(-18%,0) rotate(-8deg) scale(1.15);filter:drop-shadow(15px 22px 9px #6663);pointer-events:none}
.unfold-sheet{position:relative;width:min(780px,86vw);min-height:min(480px,75vh);padding:clamp(40px,8vw,95px);display:flex;flex-direction:column;justify-content:center;text-align:left;background:#faf9f4;clip-path:polygon(0 9%,9% 0,90% 2%,100% 13%,98% 88%,91% 100%,7% 97%,0 85%);filter:drop-shadow(0 20px 15px #5552);transform:translateY(18px) scale(.96);opacity:0;transition:transform 1.9s cubic-bezier(.35,0,.2,1) .65s,opacity 1.5s ease .75s}
.unfold-screen.is-open .unfold-sheet{transform:translateY(0) scale(1);opacity:1}
.unfold-sheet:before{content:"";position:absolute;top:0;left:0;width:15%;height:18%;background:linear-gradient(130deg,#ddd9d0,#fff);clip-path:polygon(0 0,100% 0,0 100%);opacity:.8;pointer-events:none}
.unfold-kicker{font-size:10px;letter-spacing:.24em;color:#8e8c86}
.unfold-sheet h2{font:normal clamp(36px,6vw,76px)/1.06 Georgia,serif;margin:28px 0 22px;overflow-wrap:anywhere}
.unfold-sheet p{font-size:clamp(15px,1.8vw,19px);line-height:1.8;color:#6b6862;max-width:520px}
.unfold-sheet a{align-self:flex-start;margin-top:24px;color:#34332f;text-decoration:none;border-bottom:1px solid #999;padding-bottom:7px;font-size:11px;letter-spacing:.15em}
.unfold-close{position:absolute;right:8%;top:9%;border:0;background:transparent;font-size:34px;color:#444;cursor:pointer;width:48px;height:48px;z-index:2}
body.unfolding{overflow:hidden}
@media(max-width:650px){.unfold-sheet{width:94vw;min-height:65vh;padding:60px 38px}.unfold-model{transform:translate(-25%,0) rotate(-8deg) scale(1.5)}}
@media(prefers-reduced-motion:reduce){.unfold-screen,.unfold-sheet{transition:none!important}}


/* v0.3.5 — Expand the actual selected paper silhouette, never a circle. */
.unfold-screen{
    background:var(--unfold-color,#f6f3ed);
    clip-path:var(--fold-start,polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%));
    transition:clip-path 2.8s cubic-bezier(.42,0,.16,1),visibility 0s linear 2.8s;
}
.unfold-screen.is-open{
    clip-path:polygon(0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%);
    transition:clip-path 2.8s cubic-bezier(.42,0,.16,1),visibility 0s;
}
.unfold-model{
    opacity:.88;
    transform:translate(13%,0) rotate(-5deg) scale(1.32);
    filter:drop-shadow(15px 22px 14px #5554);
}
.unfold-sheet{
    width:min(680px,80vw);
    margin-right:auto;
    margin-left:5vw;
    background:rgba(250,249,244,.84);
    backdrop-filter:none;
    clip-path:polygon(0 9%,9% 0,90% 2%,100% 13%,98% 88%,91% 100%,7% 97%,0 85%);
    transition:transform 1.7s cubic-bezier(.3,0,.2,1) 1.15s,opacity 1.4s ease 1.2s;
}
@media(max-width:650px){
    .unfold-model{opacity:.6;transform:translate(8%,0) rotate(-5deg) scale(1.65)}
    .unfold-sheet{margin:0 auto;width:94vw;background:rgba(250,249,244,.9)}
}

/* v0.3.6 — Continuous paper composition, based on the approved reference. */
.unfold-screen,
.unfold-screen.is-open {
    position:fixed;
    inset:0;
    display:block;
    overflow:hidden;
    z-index:30;
    clip-path:none;
    background:transparent;
    visibility:hidden;
    pointer-events:none;
    transition:none;
}
.unfold-screen.is-open { visibility:visible;pointer-events:auto; }
.unfold-scene { position:absolute;inset:0;transform-origin:center center; }
.unfold-model {
    position:absolute;inset:0;width:100%;height:100%;
    opacity:1;transform:none;filter:none;pointer-events:none;
    overflow:visible;
}
.unfold-paper-assembly { filter:drop-shadow(13px 17px 5px rgba(60,53,70,.17)); }
.paper-flap { stroke:#d7d3cf;stroke-width:2;stroke-linejoin:round; }
.flap-one { fill:#e6e2dc; }
.flap-two { fill:#f7f5f1; }
.flap-three { fill:#e4e0da; }
.flap-four { fill:#efede9; }
.flap-five { fill:#fcfaf7; }
.flap-six { fill:#e5e2dd; }
.flap-seven { fill:#eeebe6; }
.paper-crease { fill:none;stroke:#d4d0cc;stroke-width:1.2;opacity:.6; }
.unfold-screen::before {
    content:'';position:absolute;inset:0;
    background:var(--unfold-color,#e7e0ef);opacity:0;
    transition:opacity 2.6s cubic-bezier(.45,0,.16,1);
}
.unfold-screen.is-open::before { opacity:1; }
.unfold-sheet,
.unfold-screen.is-open .unfold-sheet {
    position:absolute;left:29%;top:29%;width:35%;min-height:0;
    padding:clamp(18px,2.7vw,45px);margin:0;
    display:flex;justify-content:center;
    background:#faf9f6;backdrop-filter:none;
    clip-path:polygon(0 7%,9% 0,96% 9%,100% 36%,88% 100%,7% 92%,0 80%);
    box-shadow:none;filter:drop-shadow(0 12px 10px #7772);
    transform:rotate(12deg);opacity:0;
    transition:opacity 1.4s ease 1.55s;
}
.unfold-screen.is-open:not(.is-closing) .unfold-sheet { opacity:1; }
.unfold-screen.is-closing .unfold-sheet { opacity:0;transition:opacity .35s ease; }
.unfold-sheet h2 { font-size:clamp(30px,4vw,65px);margin:16px 0; }
.unfold-sheet p { font-size:clamp(13px,1.2vw,18px);line-height:1.65; }
.unfold-sheet a { margin-top:22px; }
.unfold-close { right:6%;top:5%; }
@media (max-width:700px) {
    .unfold-model { width:150%;height:100%;left:-25%;transform:none; }
    .unfold-sheet,.unfold-screen.is-open .unfold-sheet {
        left:12%;top:31%;width:76%;padding:26px 24px;transform:rotate(5deg);
    }
}
@media (prefers-reduced-motion:reduce) {
    .unfold-screen::before,.unfold-sheet { transition:none!important; }
}


/* v0.3.7 — Content belongs to the paper, not to a rectangular card. */
.unfold-sheet { display:none!important; }
.unfold-model .facet-title,.unfold-model .facet-body { opacity:0; transition:opacity 1.3s ease 1.5s; overflow:visible; }
.unfold-screen.is-open:not(.is-closing) .facet-title,
.unfold-screen.is-open:not(.is-closing) .facet-body { opacity:1; }
.unfold-screen.is-closing .facet-title,.unfold-screen.is-closing .facet-body { opacity:0;transition:opacity .3s ease; }
.facet-title-inner,.facet-body-inner { width:100%;height:100%;box-sizing:border-box;color:#37342f;font-family:Arial,Helvetica,sans-serif; }
.facet-title-inner span { display:block;font-size:9px;letter-spacing:.2em;color:#79756f; }
.facet-title-inner h2 { font:normal 49px/1.04 Georgia,serif;margin:15px 0 0;overflow-wrap:anywhere; }
.facet-body-inner { display:flex;flex-direction:column;justify-content:center; }
.facet-body-inner p { margin:0 0 20px;font-size:19px;line-height:1.48;color:#56524e; }
.facet-body-inner a { align-self:flex-start;color:#34332f;text-decoration:none;border-bottom:1px solid #aaa;padding-bottom:5px;font-size:11px;letter-spacing:.1em; }
.unfold-close { position:absolute;top:5%;right:6%;z-index:5;background:rgba(250,249,246,.85);border:1px solid #d8d4ce;border-radius:50%;width:48px;height:48px; }
@media(max-width:700px) {
    .unfold-model { width:100%;height:100%;left:0; }
    .facet-title-inner h2 { font-size:43px; }
    .facet-body-inner p { font-size:20px; }
}
@media(prefers-reduced-motion:reduce){.unfold-model .facet-title,.unfold-model .facet-body{transition:none!important}}

/* v0.3.8 — Selected unicorn facet is the enlarged paper focus. */
.unfolded-original { filter:drop-shadow(8px 12px 5px rgba(67,60,54,.18)); }
.unfolded-original path { stroke-linejoin:round; }
.unfolded-title-wing,.unfolded-body-wing,.unfolded-side-wing { stroke:#d1ccc5;stroke-width:2; }
.facet-title-inner h2 { font-size:clamp(32px,4.5vw,56px); }
.facet-body-inner { align-items:flex-start; }
.unfold-return { display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    width:72px;height:56px;border:0;background:transparent;padding:4px;margin-top:12px;
    transition:transform .3s ease; }
.unfold-return svg { width:65px;height:46px; }
.unfold-return:hover,.unfold-return:focus-visible { transform:scale(1.12); }
.unfold-return:focus-visible { outline:2px solid #615d59;outline-offset:3px; }
@media(max-width:700px){ .facet-title-inner h2{font-size:42px}.facet-body-inner p{font-size:18px} }

/* v0.4.0 — Show only the selected original paper geometry. */
.unfold-paper-assembly > .paper-flap, .unfold-paper-assembly > .paper-crease { display:none; }
.unfolded-original { filter:drop-shadow(12px 18px 9px rgba(57,50,45,.2)); }
.unfold-return svg { width:78px;height:57px;overflow:visible; }
.unfold-return { width:90px;height:64px; }
.facet-title-inner h2 { font-size:clamp(28px,3.6vw,47px); }
.facet-body-inner p { font-size:clamp(15px,1.6vw,19px); }

/* v0.4.1 — Geometry-driven text placement and delayed content morph. */
.unfold-model .facet-title,
.unfold-model .facet-body {
    transition: opacity 1.2s ease 1.5s, transform 2.3s cubic-bezier(.38,0,.2,1);
    transform-box: view-box;
    overflow: visible;
}
.facet-title-inner,.facet-body-inner { padding: 5%; }
.facet-title-inner h2 { font-size: calc(46px * var(--facet-scale,1)); overflow-wrap:break-word; }
.facet-body-inner p { font-size: calc(19px * var(--facet-scale,1)); }
.unfold-screen.content-morphed .facet-title-inner,
.unfold-screen.content-morphed .facet-body-inner { filter:drop-shadow(0 1px 0 rgba(255,255,255,.25)); }
@media(prefers-reduced-motion:reduce) {
    .unfold-model .facet-title,.unfold-model .facet-body { transition:none!important; }
}

/* v0.4.2 — Keep text aligned to its polygon and preserve leg proportions. */
.unfold-model .facet-title,
.unfold-model .facet-body {
    transition: opacity 1.2s ease 1.5s, translate 2.3s cubic-bezier(.38,0,.2,1);
}

/* v0.4.3 — One fixed return icon and geometry-led content motion. */
.unfold-model .facet-title,.unfold-model .facet-body { transition:opacity 1.2s ease 1.5s; }
.return-facet { overflow:visible; }
.return-facet-inner { display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
.return-facet .unfold-return { margin:0; }
.unfold-screen.is-closing .return-facet { opacity:0; }

/* v0.4.4 — Reveal close control only when morph completes. */
.unfold-close { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease,visibility 0s linear .5s; }
.unfold-screen.close-ready .unfold-close { opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s ease; }
.unfolded-original { opacity:1;transition:opacity 2.3s ease; }
.unfold-screen.content-morphed .unfolded-original { opacity:.8; }
.unfold-screen.is-closing .unfolded-original { opacity:1;transition-duration:.35s; }
.facet-title-inner,.facet-body-inner { overflow:visible; }
.facet-body-inner { justify-content:flex-start; }
.facet-body-inner p { overflow-wrap:break-word; }

/* v0.5.0 — Settings and multilingual personal address */
.open-settings {position:absolute;z-index:20;bottom:8%;left:50%;transform:translateX(-50%);padding:12px 22px;border:1px solid #b6aba4;border-radius:3px;background:#fffdf9;color:#48423f;cursor:pointer;letter-spacing:.13em}
.open-settings[hidden],.settings-panel[hidden],#settings-review[hidden]{display:none!important}
.settings-panel{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(241,235,242,.86);padding:20px;overflow:auto}
.settings-card{position:relative;width:min(570px,100%);max-height:94vh;overflow:auto;background:#fffdfb;border:1px solid #e2dbdf;padding:clamp(22px,5vw,45px);box-shadow:0 20px 80px #5a4b5b22;font-family:inherit;color:#39343b}
.settings-card h2{font-size:2rem;letter-spacing:.12em;margin:0 0 18px}.settings-card h3{margin:22px 0 12px}.settings-card label{display:block;margin:12px 0 5px;font-size:.85rem}.settings-card input:not([type=checkbox]),.settings-card textarea,.settings-card select{box-sizing:border-box;width:100%;padding:10px;border:1px solid #ccc4cc;background:#fff;font:inherit;color:#292329}.settings-card textarea{resize:vertical;min-height:110px}.settings-card button{margin-top:14px;padding:10px 15px;background:#f1e8ef;border:1px solid #d2c3d0;cursor:pointer}.settings-card .settings-dismiss{position:absolute;right:18px;top:10px;background:transparent;border:0;font-size:30px}.settings-card #settings-message{font-size:.88rem;line-height:1.5}

/* v0.5.1 — second transition: subtle paper retreat and translucency. */
.unfolded-original {transform-box:fill-box;transform-origin:center;transition:transform var(--morph-duration,2300ms) cubic-bezier(.38,0,.2,1),opacity var(--morph-duration,2300ms) ease;}
.unfold-screen.content-morphed .unfolded-original {transform:scale(.91);opacity:.8;}
.unfold-screen.is-closing .unfolded-original {transform:scale(1);opacity:1;}
.settings-panel[hidden],.settings-card [hidden]{display:none!important}
.settings-panel{box-sizing:border-box;}
.settings-card{width:min(760px,100%);max-height:min(88vh,850px);box-sizing:border-box;}
.settings-card .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:10px 22px}
.settings-card .settings-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.settings-card .settings-tabs button{margin:0}
.settings-card .settings-tabs button[aria-selected=true]{background:#d9c6dc}
.settings-card .settings-tab[hidden]{display:none!important}
.settings-card .color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 0}
.settings-card .color-row input{width:64px;height:38px;padding:2px}
.settings-card input[type=range]{width:100%}
.settings-card .settings-actions{display:flex;gap:10px;flex-wrap:wrap}
.settings-card .settings-preview{font-size:.85rem;line-height:1.6;background:#f5f0f4;padding:12px;margin-top:12px}
/* The pastel backdrop becomes 80% opaque after the second transition. */
.unfold-screen::before { transition:opacity var(--morph-duration,2300ms) ease; }
.unfold-screen.content-morphed::before { opacity:.8; }
.open-settings {display:none!important}

/* v0.5.2 — Keep the SVG placement matrix throughout both stages.
   Only the inner paper visual shrinks; the outer geometry never changes. */
.unfolded-original-position { transform-box:view-box; }
.unfolded-original { transform-box:fill-box;transform-origin:center center;transform:scale(1);opacity:1;transition:transform var(--morph-duration,2300ms) cubic-bezier(.38,0,.2,1),opacity var(--morph-duration,2300ms) ease; }
.unfold-screen.content-morphed .unfolded-original { transform:scale(.91);opacity:var(--paper-opacity,.85); }
.unfold-screen.is-closing .unfolded-original { transform:scale(1);opacity:1;transition-duration:.25s; }
/* The backdrop remains visible at the requested opacity after stage two. */
.unfold-screen.content-morphed::before { opacity:var(--paper-opacity,.85); }

/* v0.5.3 — more pronounced retreat in stage two, without changing paper proportions. */
.unfold-screen.content-morphed .unfolded-original {transform:scale(.73);opacity:var(--paper-opacity,.85);}
/* Closing Settings is a two-part transition: panel withdraws, then origami folds. */
.settings-panel {transition:opacity .36s ease,background-color .36s ease;opacity:1;}
.settings-panel.settings-dismissing {opacity:0;pointer-events:none;}
@media (prefers-reduced-motion:reduce){.settings-panel{transition-duration:.01ms;}}

/* v0.5.5: Text follows individual genuine crease polygons. */
.paper-text-fragment { overflow:visible; pointer-events:none; opacity:1; transition:opacity var(--morph-duration,1500ms) ease; }
.paper-text-fragment.fragment-leaving { opacity:0; }
.paper-fragment-inner { box-sizing:border-box; width:100%; height:100%; padding:4px; color:#403b37; font-family:Arial,Helvetica,sans-serif; overflow:hidden; overflow-wrap:anywhere; }
.paper-fragment-title {font-family:Georgia,serif; font-weight:400; letter-spacing:-.025em;}
.paper-fragment-body {font-weight:400;}
.unfold-model .morph-anchor {transition:none!important;}
.unfold-screen.is-closing .paper-text-fragment {opacity:0;}

/* v0.5.6 — Center type inside each real crease facet with generous insets. */
.paper-fragment-inner {padding:11px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;overflow-wrap:normal;word-break:normal;hyphens:auto;}
.paper-fragment-title {font-weight:400;}
/* v0.5.7: scale the miniature to its assigned geometric facet. */
.return-facet .return-facet-inner,.return-facet .unfold-return {width:100%;height:100%;min-width:0;min-height:0;padding:0;}
.return-facet .unfold-return svg {width:100%;height:100%;max-width:100%;max-height:100%;}

/* v0.5.8: diagnostic overlay, never receives pointer events. */
.geometry-debug {pointer-events:none;}
.geometry-debug[hidden] {display:none!important;}

/* v0.6.1: Opaque pastel stage hides the homepage throughout unfolding. */
.unfold-screen.is-open::before { opacity:1; transition:none; }
.unfold-screen.is-closing::before { opacity:1; transition:none; }
.unfold-screen.content-morphed::before { opacity:1; }
.unfold-screen.is-open { isolation:isolate; }

/* v0.6.2: make measured and rendered text padding identical. */
.paper-fragment-inner { padding:15px; overflow:hidden; }
.unfold-model .morph-anchor {visibility:hidden!important;}

/* v0.6.4: fixed right-hand editorial body; 10.2 pt = 13.6 CSS px. */
.unfold-model .facet-body-inner p {font-size:13.6px!important;line-height:1.48;}
.paper-fragment-body {font-size:13.6px!important;line-height:1.45!important;text-align:left;justify-content:flex-start;}

/* v0.6.5: one paper body and an independent adjacent heading.
   During crossover, final text is stacked and remains visible. */
.unfold-model .morph-anchor {visibility:visible!important;}
.unfold-model .facet-title,.unfold-model .facet-body {pointer-events:none;}
.unfold-model .facet-title-inner h2 {font-size:42px;line-height:1.14;}
.unfold-model .facet-body-inner p {font-size:13.6px!important;line-height:1.5;}
.unfold-screen.content-morphed .facet-title,.unfold-screen.content-morphed .facet-body {opacity:1!important;}

/* Roaming debug Easter egg: independent of the origami SVG and overlays. */
.debug-bug{position:fixed;top:0;left:0;z-index:2147483000;width:38px;height:38px;border:0;background:transparent;color:#54534f;cursor:pointer;padding:4px;transform:translate(var(--bug-x),var(--bug-y)) rotate(var(--bug-angle,0deg));transition:transform 3.5s ease-in-out,color .2s;opacity:.68;touch-action:manipulation}
.debug-bug svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px #ffffffb0)}
.debug-bug:hover,.debug-bug:focus-visible{opacity:1;color:#292823}
.debug-bug.is-debugging{color:#bb5d1d;opacity:1}
@media(prefers-reduced-motion:reduce){.debug-bug{transition:none}}

/* v0.6.7: closing is a reverse fold only, with no floating editorial text. */
.unfold-screen.is-closing .facet-title,
.unfold-screen.is-closing .facet-body,
.unfold-screen.is-closing .paper-text-fragment,
.unfold-screen.is-closing .return-facet { opacity:0!important;visibility:hidden!important;transition:none!important; }
.unfold-screen:not(.is-open) .facet-title,
.unfold-screen:not(.is-open) .facet-body,
.unfold-screen:not(.is-open) .paper-text-fragment {visibility:hidden!important;}

/* v0.6.8: one authoritative text layer, above all fold geometry. */
.unfold-model .facet-title,.unfold-model .facet-body {
  visibility:visible!important;opacity:1!important;overflow:visible;
  pointer-events:none;transition:none!important;
}
.unfold-model .facet-title-inner h2 {overflow-wrap:normal;word-break:normal;}
.unfold-model .facet-body-inner {overflow:hidden;box-sizing:border-box;}
.unfold-model .facet-body-inner p {font-size:13.6px!important;line-height:1.5!important;
  overflow-wrap:normal;word-break:normal;hyphens:none;}
.unfold-screen.is-closing .facet-title,.unfold-screen.is-closing .facet-body,
.unfold-screen:not(.is-open) .facet-title,.unfold-screen:not(.is-open) .facet-body {
  visibility:hidden!important;opacity:0!important;
}

/* v0.6.9 — clearer origami hover lighting and optional text magnifier. */
.piece.active .fold path:first-child, .piece:hover .fold path:first-child {
  stroke-width:2.8;filter:brightness(1.06) saturate(1.14);
}
.piece.active .fold-label {font-size:15px;stroke-width:5px;}
.piece[data-menu="Development"].active .fold-label{font-size:14px;}
.piece[data-menu="Creative Lab"].active .fold-label{font-size:13px;}
body.hover-text-zoom .piece.active .fold-label{font-size:19px;}
body.hover-text-zoom .piece[data-menu="Development"].active .fold-label,
body.hover-text-zoom .piece[data-menu="Creative Lab"].active .fold-label{font-size:16px;}
.text-magnifier {position:absolute;top:100%;left:0;margin-top:20px;display:flex;align-items:center;gap:7px;
  padding:7px 9px;border:1px solid #d8d5cf;background:#fdfcf9e8;border-radius:22px;
  font:10px Arial,sans-serif;letter-spacing:.13em;color:#6d6b66;cursor:pointer;transition:background .2s,color .2s;}
.text-magnifier svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;}
.text-magnifier[aria-pressed="true"]{background:#eee9dd;color:#252728;}
.text-magnifier:focus-visible{outline:2px solid #70685e;outline-offset:3px;}
@media(max-width:650px){.text-magnifier{margin-top:13px;}}

/* v0.7.0 — permanently visible magnifier and continuous percentage slider. */
:root { --user-text-scale:1; }
.text-zoom-control {position:absolute;top:100%;left:0;margin-top:18px;display:flex;align-items:center;gap:9px;min-width:215px;padding:7px 10px;border:1px solid #d8d5cf;background:#fdfcf9f2;border-radius:24px;color:#676661;z-index:20;}
.text-zoom-control label{display:flex;align-items:center;flex:none;}
.text-zoom-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;}
.text-zoom-control input[type=range]{width:125px;min-width:0;accent-color:#79736b;cursor:pointer;}
.text-zoom-control output{font:11px Arial,sans-serif;min-width:36px;text-align:right;}
.text-zoom-control:focus-within{outline:1px solid #8c8378;outline-offset:2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* SVG labels are scaled through font-size, not transform, so their geometry remains fixed. */
.piece .fold-label{font-size:calc(11px * var(--user-text-scale))!important;}
.piece[data-menu="Development"] .fold-label{font-size:calc(10px * var(--user-text-scale))!important;}
.piece.active .fold-label{font-size:calc(15px * var(--user-text-scale))!important;}
.piece[data-menu="Development"].active .fold-label{font-size:calc(14px * var(--user-text-scale))!important;}
.piece[data-menu="Creative Lab"].active .fold-label{font-size:calc(13px * var(--user-text-scale))!important;}
/* Scale content text while preserving the paper itself. */
.unfold-model .facet-body-inner p{font-size:calc(13.6px * var(--user-text-scale))!important;}
.unfold-model .facet-title-inner h2{font-size:calc(42px * var(--user-text-scale))!important;}
.paper-fragment-body{font-size:calc(13.6px * var(--user-text-scale))!important;}
.paper-fragment-title{font-size:calc(30px * var(--user-text-scale))!important;}
@media(max-width:650px){.text-zoom-control{margin-top:13px;min-width:190px}.text-zoom-control input[type=range]{width:100px;}}

/* v0.7.1 — the introductory copy participates in the same text magnification. */
.stage .eyebrow{font-size:calc(10px * var(--user-text-scale))!important;}
.stage h1{font-size:clamp(calc(30px * var(--user-text-scale)),calc(4.4vw * var(--user-text-scale)),calc(62px * var(--user-text-scale)))!important;}
.stage .sub{font-size:calc(12px * var(--user-text-scale))!important;}

/* v0.7.3 — independent, accessible interaction guide. */
.interaction-guide{position:fixed;right:24px;bottom:22px;z-index:1200;font-family:Arial,Helvetica,sans-serif;color:#5f5d59;--guide-scale:var(--user-text-scale,1)}
.interaction-guide-toggle{display:flex;align-items:center;gap:9px;border:1px solid #d8d5cf;background:rgba(253,252,249,.96);border-radius:22px;padding:10px 15px;color:inherit;cursor:pointer;letter-spacing:.13em;font-size:calc(10px * var(--guide-scale));box-shadow:0 3px 14px #25231d12}
.interaction-guide-toggle span:first-child{font-size:calc(17px * var(--guide-scale));line-height:1}
.interaction-guide-toggle:hover,.interaction-guide-toggle[aria-expanded="true"]{background:#f1eee8}
.interaction-guide-toggle:focus-visible{outline:2px solid #7b7369;outline-offset:3px}
.interaction-guide-panel{position:absolute;bottom:calc(100% + 10px);right:0;width:min(320px,calc(100vw - 32px));box-sizing:border-box;background:#fdfcf9;border:1px solid #d8d5cf;border-radius:12px;padding:18px 20px;box-shadow:0 12px 34px #25231d24}
.interaction-guide-panel[hidden]{display:none!important}
.interaction-guide-heading{font-size:calc(10px * var(--guide-scale));font-weight:bold;letter-spacing:.18em;margin-bottom:14px}
.interaction-guide-panel dl{margin:0;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px 11px;align-items:start}
.interaction-guide-panel dt{font-size:calc(17px * var(--guide-scale));text-align:center;line-height:1.2}
.interaction-guide-panel dd{margin:0;font-size:calc(12px * var(--guide-scale));line-height:1.4}
@media(max-width:650px){.interaction-guide{right:12px;bottom:12px}.interaction-guide-toggle{padding:9px 12px}.interaction-guide-panel{padding:15px}}


/* v0.7.8 — Stable legs: highlight only, no hover translation/rotation.
   Clicking or keyboard activation still opens the corresponding menu. */
.unicorn .piece[data-anatomy*="-leg"] .fold,
.unicorn .piece[data-anatomy*="-leg"].active .fold,
.unicorn .piece[data-anatomy*="-leg"]:hover .fold,
.unicorn .piece[data-anatomy*="-leg"]:focus-visible .fold {
    transform:none!important;
    opacity:1!important;
    transition:opacity .2s ease!important;
}
.unicorn .piece[data-anatomy*="-leg"] .fold path:first-child {
    transition:fill .22s ease,filter .22s ease,stroke .22s ease;
}

/* v0.7.9 — Mobile reading uses viewport pixels, not scaled SVG viewBox units. */
.mobile-unfold-copy{display:none}
@media(max-width:700px){
  .unfold-screen .mobile-unfold-copy{display:block;position:absolute;z-index:4;
    left:clamp(18px,6vw,36px);right:clamp(18px,6vw,36px);
    top:50%;transform:translateY(-42%);max-height:64dvh;overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .45s ease,visibility 0s linear .45s;
    color:#37342f;text-align:left;box-sizing:border-box;}
  .unfold-screen.content-morphed:not(.is-closing) .mobile-unfold-copy{
    opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease;}
  .mobile-unfold-eyebrow{font:600 11px/1.5 Arial,sans-serif;letter-spacing:.19em;color:#77716c;}
  .mobile-unfold-copy h2{font:normal clamp(30px,9vw,44px)/1.08 Georgia,serif;
    margin:12px 0 20px;overflow-wrap:break-word;}
  .mobile-unfold-copy p{font:normal clamp(17px,4.5vw,21px)/1.6 Arial,sans-serif;
    margin:0;overflow-wrap:break-word;}
  .unfold-screen .unfold-model .facet-title,
  .unfold-screen .unfold-model .facet-body{visibility:hidden!important;opacity:0!important;}
  .unfold-screen .unfold-close{z-index:8;top:16px;right:16px;width:46px;height:46px;}
}
/* Keep all hover emphasis in the same palette; legs never transform. */
.unicorn .piece[data-anatomy*="-leg"].active .fold path:first-child,
.unicorn .piece[data-anatomy*="-leg"]:hover .fold path:first-child{
  filter:brightness(1.06) saturate(1.14);stroke-width:2.8;}

/* v0.8.0: manually driven SVG animal carousel */
.animal-carousel{position:relative;width:100%;margin:14px auto 0;user-select:none;touch-action:pan-y}
.carousel-intro{font-size:11px;letter-spacing:.13em;color:#92908d;margin:0 0 8px}
.carousel-viewport{height:clamp(330px,52vw,565px);position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;outline-offset:4px}
.carousel-viewport.is-dragging{cursor:grabbing}
.carousel-track{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.carousel-track ellipse{fill:none;stroke:#b5b0aa;stroke-width:2;opacity:.8}
.carousel-animals{position:absolute;inset:0}
.carousel-animal{position:absolute;left:0;top:0;width:180px;height:180px;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 90%;transition:left .55s cubic-bezier(.22,.75,.25,1),top .55s cubic-bezier(.22,.75,.25,1),transform .55s cubic-bezier(.22,.75,.25,1),opacity .4s;display:grid;place-items:center;touch-action:pan-y}
.carousel-viewport.is-dragging .carousel-animal{transition:none}
.carousel-animal img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 3px #00000010)}
.carousel-animal:focus-visible{outline:2px solid #756e68;outline-offset:5px;border-radius:10px}
.carousel-actions{display:flex;justify-content:center;align-items:center;gap:18px;margin:4px auto 12px;color:#4a4846;font-size:14px}
.carousel-actions button,.carousel-menu button{border:1px solid #d5d1c9;background:#fffdf9;color:#333;cursor:pointer;border-radius:30px;padding:8px 16px;min-width:44px;min-height:44px}
.carousel-actions span{min-width:120px;letter-spacing:.15em;text-transform:uppercase;font-size:12px}
.carousel-menu{max-width:680px;margin:0 auto 15px;padding:16px;border:1px solid #dedbd6;background:#fffefa;border-radius:12px;position:relative;z-index:2}
.carousel-menu[hidden]{display:none}
.carousel-menu p{margin:0 0 12px}
#carousel-menu-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
#carousel-menu-buttons button{font-size:12px;min-height:40px}
/* Preserve the original unicorn and its 11-piece interaction engine in the DOM. */
.stage > svg.unicorn{position:absolute;left:0;top:0;width:100%;height:550px;opacity:0;pointer-events:none;z-index:-1}
@media(max-width:600px){.carousel-viewport{height:360px}.carousel-intro{font-size:10px;letter-spacing:.04em}.carousel-animal{width:140px;height:140px}.carousel-track ellipse{stroke-width:3}.carousel-actions{margin-top:0}}
@media(prefers-reduced-motion:reduce){.carousel-animal{transition:none}}

/* v0.8.1 — carousel selection becomes the interactive origami, not a separate menu */
.stage{position:relative}
.stage > svg.unicorn{position:relative!important;left:auto!important;top:auto!important;display:none;width:min(100%,1050px)!important;height:auto!important;max-height:68vh;opacity:1!important;pointer-events:auto!important;z-index:3!important;margin:12px auto 0;overflow:visible}
body.animal-selected .stage > svg.unicorn{display:block}
body.animal-selected .animal-carousel{position:absolute;left:0;top:130px;width:min(29%,290px);transform:translateX(-15%) scale(.76);transform-origin:top left;opacity:.78;z-index:2;transition:transform .65s ease,opacity .65s ease,width .65s ease}
body.animal-selected .carousel-viewport{height:260px}
body.animal-selected .carousel-intro{font-size:10px;line-height:1.5}
body.animal-selected .carousel-track{opacity:.65}
body.animal-selected .stage > svg.unicorn{margin-left:clamp(100px,16%,200px);width:calc(100% - clamp(100px,16%,200px))!important}
body.animal-selected .carousel-actions{gap:4px}
body.animal-selected .carousel-actions span{min-width:70px;font-size:10px}
body.animal-selected .carousel-actions button{padding:4px;min-width:36px;min-height:36px}
.unicorn .piece[data-anatomy="static-limb"] .fold{transform:none!important;animation:none!important}
@media(max-width:700px){body.animal-selected .animal-carousel{position:relative;top:auto;left:auto;width:100%;transform:none;opacity:1}body.animal-selected .carousel-viewport{height:155px}body.animal-selected .carousel-intro{font-size:9px}body.animal-selected .stage > svg.unicorn{margin:8px auto;width:100%!important;max-height:none}body.animal-selected .carousel-animal{width:140px;height:140px}}
@media(prefers-reduced-motion:reduce){body.animal-selected .animal-carousel{transition:none}}

/* v0.8.3: restore stable v0.8.1 rendering and keep selected figure visible. */
body.animal-selected .stage > svg.unicorn{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;width:min(76%,850px)!important;height:clamp(370px,52vw,610px)!important;max-height:none!important;margin:8px 0 0 auto!important;overflow:visible!important}
body.animal-selected .animal-carousel{left:0;top:145px;width:min(30%,300px);transform:scale(.8);transform-origin:top left;cursor:pointer;opacity:.88}
body.animal-selected .carousel-viewport{height:245px;overflow:visible}
.unicorn .piece .fold,.unicorn .piece.active .fold,.unicorn .piece:hover .fold,.unicorn .piece:focus-visible .fold{transform:none!important;animation:none!important}
@media(max-width:700px){body.animal-selected .animal-carousel{position:relative;top:auto;left:auto;width:min(100%,350px);transform:none;margin:8px auto}body.animal-selected .carousel-viewport{height:165px;overflow:hidden}body.animal-selected .stage > svg.unicorn{width:100%!important;height:clamp(330px,90vw,510px)!important;margin:8px auto!important}}

/* v0.8.5: selected mode is persistent. The complete carousel shrinks, not its children. */
body.animal-selected .animal-carousel {
 position:absolute!important;left:0!important;top:150px!important;width:100%!important;
 transform:scale(.28)!important;transform-origin:top left!important;
 opacity:.92!important;z-index:5!important;pointer-events:auto!important;
}
body.animal-selected .carousel-viewport {height:clamp(330px,52vw,565px)!important;overflow:hidden!important;}
body.animal-selected .carousel-animal {pointer-events:auto!important;}
body.animal-selected .stage > svg.unicorn {
 display:block!important;position:relative!important;width:min(76%,850px)!important;
 height:clamp(420px,52vw,620px)!important;margin:12px 2% 0 auto!important;
 max-height:none!important;overflow:visible!important;visibility:visible!important;opacity:1!important;
 pointer-events:auto!important;z-index:3!important;
}
.unicorn .piece .fold,.unicorn .piece:hover .fold,.unicorn .piece.active .fold {transform:none!important;animation:none!important;}
@media(max-width:700px){
 body.animal-selected .animal-carousel{position:relative!important;top:auto!important;left:auto!important;width:100%!important;transform:scale(.48)!important;transform-origin:top left!important;margin:0 0 -150px!important;}
 body.animal-selected .stage > svg.unicorn{width:100%!important;height:clamp(340px,100vw,520px)!important;margin:0 auto!important;}
}

/* v0.8.6: stable carousel layout; scale entire orbit, never individual SVGs again. */
body.animal-selected .animal-carousel{position:absolute!important;left:2%!important;top:155px!important;width:100%!important;transform:scale(.28)!important;transform-origin:top left!important;opacity:1!important;z-index:6!important;}
body.animal-selected .carousel-viewport{overflow:hidden!important;touch-action:pan-y!important;}
body.animal-selected .carousel-animals{pointer-events:auto!important;}
body.animal-selected .stage > svg.unicorn{display:block!important;position:relative!important;width:min(73%,820px)!important;height:clamp(420px,52vw,620px)!important;margin:12px 3% 0 auto!important;overflow:visible!important;}
@media(max-width:700px){body.animal-selected .animal-carousel{position:relative!important;top:auto!important;left:auto!important;transform:scale(.46)!important;margin:0 0 -165px!important;}body.animal-selected .stage > svg.unicorn{width:100%!important;height:clamp(330px,100vw,510px)!important;margin:0 auto!important;}}

/* v0.8.7: one consistent mini-carousel scale; never alter its internal coordinate system. */
body.animal-selected .animal-carousel{position:absolute!important;left:1%!important;top:155px!important;width:min(100%,960px)!important;transform:scale(.29)!important;transform-origin:top left!important;opacity:1!important;z-index:6!important;}
body.animal-selected .carousel-viewport{height:clamp(330px,52vw,565px)!important;overflow:hidden!important;}
body.animal-selected .stage > svg.unicorn{display:block!important;visibility:visible!important;opacity:1!important;width:min(73%,820px)!important;height:clamp(420px,52vw,620px)!important;margin:12px 3% 0 auto!important;}
@media(max-width:700px){body.animal-selected .animal-carousel{position:relative!important;left:0!important;top:0!important;transform:scale(.46)!important;margin-bottom:-160px!important;}body.animal-selected .stage > svg.unicorn{width:100%!important;height:clamp(330px,100vw,510px)!important;margin:0 auto!important;}}

/* v0.9.0: stateful carousel reset, externally configurable layout */
body.animal-selected .animal-carousel{left:var(--carousel-small-left,1%)!important;top:var(--carousel-small-top,155px)!important;transform:scale(var(--carousel-small-scale,.29))!important}
.carousel-reset{display:none;position:absolute;top:0;right:0;z-index:15;min-width:44px;min-height:44px;border:1px solid #bcb5ae;border-radius:50%;background:#fffdf9;color:#38322e;font-size:24px;cursor:pointer;box-shadow:0 3px 12px #0002}
body.animal-selected .carousel-reset:not([hidden]){display:block}
@media(max-width:700px){body.animal-selected .animal-carousel{transform:scale(var(--carousel-small-scale,.29))!important}}

/* v0.9.1: reset control is independent of the scaled carousel. */
.stage > .carousel-reset {
  display:none!important;position:absolute!important;top:112px!important;left:18px!important;right:auto!important;
  z-index:50!important;min-width:52px!important;min-height:52px!important;
  padding:8px!important;transform:none!important;opacity:1!important;pointer-events:auto!important;
  background:#fffdf9!important;border:1px solid #bcb5ae!important;box-shadow:0 3px 12px #0002!important;
}
body.animal-selected .stage > .carousel-reset:not([hidden]) {display:flex!important;align-items:center;justify-content:center;}
@media(max-width:700px){.stage > .carousel-reset{top:72px!important;left:12px!important;}}

/* v0.9.2: accessible, unscaled reset control in the document body. */
#carousel-view-toggle.carousel-view-toggle{
  position:fixed!important;top:88px!important;left:22px!important;right:auto!important;bottom:auto!important;
  z-index:2147483000!important;display:flex!important;align-items:center!important;gap:10px!important;
  width:auto!important;min-width:54px!important;min-height:54px!important;padding:10px 16px!important;
  background:#fffdf9!important;color:#302d2b!important;border:2px solid #6d6258!important;border-radius:28px!important;
  font:600 13px/1.2 system-ui,sans-serif!important;letter-spacing:0!important;cursor:pointer!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
  box-shadow:0 5px 18px #0003!important;
}
#carousel-view-toggle.carousel-view-toggle[hidden]{display:none!important;}
#carousel-view-toggle.carousel-view-toggle span[aria-hidden]{font-size:25px;line-height:1;}
#carousel-view-toggle.carousel-view-toggle:focus-visible{outline:3px solid #2769a6;outline-offset:3px;}
@media(max-width:700px){#carousel-view-toggle.carousel-view-toggle{top:70px!important;left:10px!important;padding:8px 12px!important;min-height:48px!important;}#carousel-view-toggle .carousel-view-toggle-text{font-size:11px;}}

/* v0.9.3: reset directly beside the carousel arrows, with no dependence on JS hiding. */
.carousel-inline-reset{display:none!important;align-items:center;justify-content:center;gap:5px;border:2px solid #777!important;background:#fff!important;color:#333!important;font-weight:700!important;white-space:nowrap;cursor:pointer;}
body.animal-selected #carousel-inline-reset:not([hidden]){display:inline-flex!important;}
body.animal-selected .carousel-actions{overflow:visible!important;}
body.animal-selected .carousel-actions .carousel-inline-reset{font-size:15px!important;min-width:92px!important;min-height:40px!important;padding:6px 10px!important;}
body.animal-selected .carousel-actions .carousel-inline-reset span{font-size:10px!important;min-width:0!important;letter-spacing:.04em!important;}

/* v0.9.4: discreet icon-only carousel toggle. */
#carousel-view-toggle.carousel-view-toggle{
  top:84px!important;left:18px!important;
  width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  padding:0!important;gap:0!important;border:1px solid #d4d0cb!important;
  border-radius:50%!important;background:rgba(255,253,249,.88)!important;
  color:#77716c!important;box-shadow:none!important;
  justify-content:center!important;align-items:center!important;
}
#carousel-view-toggle.carousel-view-toggle span[aria-hidden]{font-size:19px!important;line-height:1!important;}
#carousel-view-toggle.carousel-view-toggle:hover{background:#fff!important;border-color:#9c948d!important;color:#393633!important;}
@media(max-width:700px){#carousel-view-toggle.carousel-view-toggle{top:72px!important;left:10px!important;}}

/* v0.9.5: single reset icon next to the carousel arrows, not in the page header. */
#carousel-view-toggle.carousel-view-toggle {
 position:static!important;inset:auto!important;transform:none!important;
 width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
 padding:0!important;flex:0 0 44px!important;z-index:auto!important;
}
#carousel-view-toggle.carousel-view-toggle[hidden]{display:none!important;}

/* v0.9.5.1 – scale the entire MINI control bar back up after its parent shrinks.
   The bar remains anchored beneath the carousel; no duplicated toggle button. */
body.animal-selected .animal-carousel .carousel-actions {
  width:max-content!important;
  max-width:none!important;
  gap:var(--mini-controls-gap,12px)!important;
  transform:scale(var(--mini-controls-scale,3))!important;
  transform-origin:top center!important;
  margin:12px auto 0!important;
  position:relative!important;
  z-index:20!important;
}
body.animal-selected .animal-carousel .carousel-actions button,
body.animal-selected .animal-carousel #carousel-view-toggle {
  width:var(--mini-controls-button-size,40px)!important;
  height:var(--mini-controls-button-size,40px)!important;
  min-width:var(--mini-controls-button-size,40px)!important;
  min-height:var(--mini-controls-button-size,40px)!important;
  flex:0 0 var(--mini-controls-button-size,40px)!important;
  padding:0!important;
  font-size:17px!important;
}
body.animal-selected .animal-carousel .carousel-actions #carousel-selected {
  min-width:70px!important;
  font-size:var(--mini-controls-label-size,11px)!important;
  text-align:center;
}

/* v0.9.5.2: independent offsets in desktop/mobile coordinates */
body.animal-selected .animal-carousel{
  margin-left:var(--mini-offset-x,0px)!important;
  margin-top:var(--mini-offset-y,0px)!important;
}
body.animal-selected .animal-carousel .carousel-actions{
  translate:var(--mini-controls-offset-x,0px) var(--mini-controls-offset-y,0px);
}
@media(max-width:700px){
  body.animal-selected .animal-carousel{
    transform:scale(var(--carousel-small-scale,.46))!important;
    transform-origin:top left!important;
  }
  body.animal-selected .stage > svg.unicorn{
    width:100%!important;max-width:100%!important;
    height:clamp(300px,105vw,520px)!important;
    margin:0 auto!important;
  }
}

/* v0.9.5.3: DETAIL paper-only configuration, independent of text and close button. */
.unfold-screen .unfold-model {
  transform: translate(var(--detail-offset-x, 0px), var(--detail-offset-y, 0px)) scale(var(--detail-scale, 1)) !important;
  transform-origin: center center !important;
}
@media (max-width:700px) {
  .unfold-screen .unfold-model {
    width:100% !important; height:100% !important; left:0 !important;
  }
}

/* v0.9.5.5: bug stays in the lower viewport band and travels horizontally. */
.debug-bug { transition-property: transform,color; transition-timing-function:linear,ease-in-out; }
.debug-bug[hidden] { display:none!important; }

/* v0.9.5.7 — unified draggable interaction panel */
.interaction-dock{position:fixed;left:74px;top:78px;z-index:2147483001;display:flex;flex-direction:column;gap:9px;width:226px;max-width:calc(100vw - 12px);padding:10px;background:rgba(253,252,249,.96);border:1px solid #dedbd5;border-radius:17px;box-shadow:0 4px 18px #28241b0b;box-sizing:border-box;font-family:Arial,sans-serif;color:#65635f}
.interaction-dock-handle{height:19px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;color:#898681;user-select:none;border-radius:7px;font-size:17px;letter-spacing:3px;line-height:1}
.interaction-dock-handle:active{cursor:grabbing;background:#f0ede8}
.interaction-dock-handle:focus-visible{outline:2px solid #777}
.interaction-dock-top{display:flex;align-items:center;gap:8px;min-width:0}
.interaction-dock .text-zoom-control{position:static;top:auto;left:auto;margin:0;min-width:0;flex:1;padding:5px 7px;gap:5px;z-index:auto}
.interaction-dock .text-zoom-control input[type=range]{width:100%;min-width:28px}
.interaction-dock .text-zoom-control output{min-width:31px;font-size:10px}
.interaction-dock .text-zoom-control svg{width:15px;height:15px}
.interaction-dock .debug-bug{position:static!important;top:auto!important;left:auto!important;transform:none!important;transition:color .2s!important;flex:0 0 30px;width:30px!important;height:30px!important;padding:3px;opacity:.7}
.interaction-dock .interaction-guide{position:relative;right:auto;bottom:auto;z-index:auto;width:100%;--guide-scale:var(--user-text-scale,1)}
.interaction-dock .interaction-guide-toggle{width:100%;justify-content:center;box-shadow:none;padding:8px 10px;font-size:calc(10px * var(--guide-scale))}
.interaction-dock .interaction-guide-panel{bottom:auto;top:calc(100% + 8px);left:0;right:auto;width:min(320px,calc(100vw - 24px));max-height:min(60vh,400px);overflow:auto}
@media(max-width:650px){.interaction-dock{left:10px;top:76px;width:205px;padding:7px;gap:6px}.interaction-dock .interaction-guide-toggle{padding:7px}}

/* v0.9.5.9: An origami-folded paper card with subtle layered offset panels. */
.settings-panel{background:rgba(226,232,235,.78);backdrop-filter:blur(5px)}
.settings-card{isolation:isolate;background:linear-gradient(145deg,#fffefa 0%,#f8f6f1 48%,#efede7 100%);border:1px solid #d8d3ca;box-shadow:12px 14px 0 -5px #d9d5cd,23px 26px 0 -12px #e8e5df,0 28px 75px #29261d28;clip-path:polygon(0 0,96% 0,100% 4%,100% 100%,4% 100%,0 96%)}
.settings-card::before{content:"";position:absolute;right:0;top:0;width:48px;height:48px;background:linear-gradient(135deg,#e5e1d8 0%,#f6f4ee 50%,transparent 51%);pointer-events:none;z-index:-1}
.settings-card .settings-bug-help{font-size:.88rem;line-height:1.5;color:#77736c}
.settings-card .settings-bug-tab{white-space:nowrap}
.interaction-dock-settings{flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;border:1px solid #dedbd5;border-radius:50%;background:#fdfcf9;color:#77736c;cursor:pointer;padding:6px}
.interaction-dock-settings svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.interaction-dock-settings:hover,.interaction-dock-settings:focus-visible{background:#eae7df;color:#37342e}
/* v0.9.6.1: menu captions in a screen-space layer above all SVG facets. */
#origami-menu-label-overlay {
  position:fixed; z-index:2147483000; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%); white-space:nowrap;
  font-family:Arial,sans-serif; font-size:calc(var(--menu-label-size,18px) * var(--menu-label-scale,1));
  font-weight:var(--menu-label-weight,600); color:var(--menu-label-color,#333);
  text-shadow:0 1px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff;
  transition:opacity .12s ease;
}
#origami-menu-label-overlay.visible{opacity:1}
/* The old SVG label remains for accessibility but must not show twice. */
.unicorn .piece .fold-label {opacity:0!important;}

/* v0.9.7: first-visit chooser, classic view and terminal mode. */
.mode-gate[hidden],.nerd-shell[hidden],.mode-switch[hidden]{display:none!important}
.mode-gate{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:18px;background:rgba(28,33,43,.62);backdrop-filter:blur(9px);overflow:auto}
.mode-gate-card{width:min(680px,100%);max-height:94dvh;overflow:auto;padding:clamp(22px,4vw,44px);background:linear-gradient(145deg,#fff 0%,#f6f7fa 70%,#e7ebf1 100%);color:#222936;box-shadow:14px 18px 0 rgba(215,222,234,.55),0 25px 80px #10192a55;clip-path:polygon(0 0,94% 0,100% 6%,100% 100%,0 100%)}
.mode-kicker{font-size:11px;letter-spacing:.25em;color:#6a7282}.mode-gate-card h2{font-size:clamp(24px,3vw,38px);margin:14px 0}.mode-gate-card p{line-height:1.55}.mode-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.mode-choices button{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 12px;min-height:130px;border:1px solid #cbd1dc;background:#fff;color:#242b38;cursor:pointer;text-align:left}.mode-choices button:hover,.mode-choices button:focus-visible{background:#e9f2fc;border-color:#718fae}.mode-choices strong{font-size:17px}.mode-choices span{font-size:12px;line-height:1.4}.mode-cookie-notice{padding:16px;background:#eef0f4;border-left:3px solid #8796ac;font-size:13px}.mode-cookie-notice p{margin:7px 0}.mode-cookie-notice input{accent-color:#526a8b}.mode-gate-foot{font-size:12px;color:#687182}.mode-switch{position:fixed;right:14px;bottom:14px;z-index:2147483000;width:44px;height:44px;border:1px solid #b4bdcb;border-radius:50%;background:#f8f9fbea;color:#303b50;font-size:24px;cursor:pointer;box-shadow:0 3px 12px #1d26331a}
body.mode-classic .animal-carousel{display:none!important}body.mode-classic .stage>svg.unicorn{opacity:1;visibility:visible}body.mode-classic .carousel-view-toggle{display:none!important}
body.mode-nerd>header,body.mode-nerd>main,body.mode-nerd>footer,body.mode-nerd>.interaction-guide,body.mode-nerd>.interaction-panel{display:none!important}
.nerd-shell{position:relative;z-index:100;min-height:calc(100dvh - 30px);margin:15px;padding:0;background:#0b1011;color:#b8e6ba;border:1px solid #344e43;font:15px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:flex;flex-direction:column}.nerd-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#1c2928;padding:12px 16px;font-size:12px}.nerd-bar button{color:#c7e8d3;border:1px solid #4d7561;background:transparent;padding:8px 12px;cursor:pointer}.nerd-output{padding:22px;white-space:pre-wrap;overflow-wrap:anywhere;flex:1;min-height:200px}.nerd-line{margin:0 0 8px}.nerd-form{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid #2a3e35}.nerd-form label{white-space:nowrap}.nerd-form input{flex:1;min-width:0;color:#e1ffe1;background:transparent;border:0;outline-offset:5px;font:inherit}.nerd-form button{color:inherit;background:#1d3428;border:1px solid #4d7561;min-width:44px;min-height:44px;cursor:pointer}
@media(max-width:650px){.mode-choices{grid-template-columns:1fr}.mode-choices button{min-height:65px;gap:5px}.nerd-shell{font-size:12px;margin:4px;min-height:calc(100dvh - 8px)}.nerd-bar{flex-wrap:wrap}.nerd-form{padding:12px 8px}.nerd-form label{font-size:11px}}

/* v0.9.7.1 — each mode has its own controls. */
.classic-navigation[hidden]{display:none!important}
.classic-navigation{position:fixed;z-index:120;top:110px;left:20px;width:min(235px,24vw);max-height:calc(100dvh - 135px);overflow:auto;padding:18px;background:#fffffff2;border:1px solid #d2d9e3;box-shadow:0 12px 35px #25304a18;display:flex;flex-direction:column;gap:4px}
.classic-navigation-title{font:700 12px/1.5 ui-monospace,monospace;letter-spacing:.14em;margin-bottom:12px;color:#53647d}
.classic-navigation button{display:block;width:100%;border:0;border-bottom:1px solid #e7e9ee;background:transparent;text-align:left;color:#253047;padding:10px 7px;cursor:pointer;font:500 14px/1.35 inherit}
.classic-navigation button:hover,.classic-navigation button:focus-visible{background:#eaf1fa}
.classic-navigation>#classic-interactive{margin-top:15px;background:#e7f1fc}.classic-navigation>#classic-nerd{background:#edf0f5}
body.mode-classic .interaction-panel,body.mode-classic .interaction-guide,body.mode-classic .mobile-menu,body.mode-classic .unicorn .piece{pointer-events:none!important}
body.mode-classic .interaction-panel,body.mode-classic .interaction-guide{display:none!important}
body.mode-classic .unicorn .piece{cursor:default!important}
body.mode-classic .unicorn .piece:hover{filter:none!important}
body.mode-nerd .classic-navigation{display:none!important}
@media(max-width:800px){.classic-navigation{position:relative;top:auto;left:auto;width:calc(100% - 24px);max-height:none;margin:12px;display:block}.classic-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.classic-navigation-title{margin-bottom:5px}}

/* v0.9.7.2 — Strict mode separation. The classic page is not the interactive stage. */
.classic-page[hidden]{display:none!important}
body.mode-classic>main,body.mode-classic>.interaction-guide,
body.mode-classic .interaction-dock,body.mode-classic .interaction-panel,
body.mode-classic .debug-bug,body.mode-classic #origami-menu-label-overlay,
body.mode-classic #unfold-screen,body.mode-classic .text-zoom-control{display:none!important}
body.mode-classic .classic-page{display:block;box-sizing:border-box;max-width:850px;
  margin:clamp(36px,7vw,100px) max(30px,6vw) 80px clamp(290px,30vw,420px);
  padding:clamp(24px,4vw,55px);background:#fff;color:#283246;
  border:1px solid #e4e8ed;box-shadow:0 16px 55px #26344910;min-height:330px}
.classic-page-kicker{font:600 12px/1.4 ui-monospace,monospace;letter-spacing:.17em;color:#71839a}
.classic-page h1{font:400 clamp(32px,4vw,54px)/1.15 Georgia,serif;margin:18px 0 24px}
.classic-page-content{font:17px/1.85 Arial,sans-serif;max-width:65ch}
.classic-settings-copy{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.5 ui-monospace,monospace;
  background:#f3f5f8;padding:15px}
.classic-links button.is-current{background:#eaf1fa;font-weight:700}
body.mode-nerd .classic-page{display:none!important}
@media(max-width:800px){body.mode-classic .classic-page{margin:20px 12px 50px;padding:24px}}

/* v0.9.7.3 — Classic-only static mascot aligned with the brand and navigation. */
body.mode-classic .classic-navigation{
    left:5vw;
    top:124px;
    width:clamp(195px,21vw,260px);
    padding:0 0 18px;
    border:0;
    background:transparent;
    box-shadow:none;
    max-height:calc(100dvh - 142px);
}
.classic-unicorn{
    display:block;
    width:min(100%,210px);
    height:auto;
    margin:0 0 12px;
    pointer-events:none;
    user-select:none;
}
body.mode-classic .classic-navigation-title,
body.mode-classic .classic-links,
body.mode-classic #classic-interactive,
body.mode-classic #classic-nerd{max-width:235px}
@media(max-width:800px){
    body.mode-classic .classic-navigation{
        position:relative;
        left:auto;
        top:auto;
        width:calc(100% - 10vw);
        max-height:none;
        margin:125px 5vw 15px;
    }
    body.mode-classic .classic-unicorn{width:145px;margin-bottom:8px}
    body.mode-classic .classic-page{margin-top:12px}
}

/* v0.9.7.4: Classic navigation belongs beside the VIRGILETEC masthead.
   Match the paper-like hover palette used by the Settings controls. */
body.mode-classic header{position:relative;top:auto;left:auto;margin:34px 5vw 0;width:max-content;max-width:90vw;z-index:130}
body.mode-classic .classic-navigation{position:relative;top:auto;left:auto;z-index:120;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 18px;width:auto;max-width:none;max-height:none;overflow:visible;margin:-56px 5vw 0 clamp(310px,32vw,470px);padding:0;background:transparent;border:0;box-shadow:none}
body.mode-classic .classic-unicorn{width:64px;max-width:64px;flex:0 0 64px;margin:0 4px 0 0;pointer-events:none}
body.mode-classic .classic-navigation-title{display:none}
body.mode-classic .classic-links{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;max-width:none}
body.mode-classic .classic-navigation button{width:auto;min-height:34px;border:1px solid transparent;border-radius:3px;padding:7px 9px;font:500 12px/1.25 Arial,Helvetica,sans-serif;letter-spacing:.025em;white-space:nowrap;background:transparent;color:#37342e;transition:background-color .15s,border-color .15s,color .15s}
body.mode-classic .classic-navigation button:hover,body.mode-classic .classic-navigation button:focus-visible{background:#eae7df;color:#37342e;border-color:#d8d3ca}
body.mode-classic .classic-links button.is-current{background:#eae7df;color:#37342e;border-color:#d8d3ca;font-weight:700}
body.mode-classic .classic-navigation>#classic-interactive,body.mode-classic .classic-navigation>#classic-nerd{max-width:none;margin:0;background:transparent}
body.mode-classic .classic-navigation>#classic-interactive:hover,body.mode-classic .classic-navigation>#classic-nerd:hover{background:#eae7df}
body.mode-classic .classic-page{margin:clamp(65px,9vw,125px) auto 80px;max-width:min(960px,90vw)}
@media(max-width:1050px){
 body.mode-classic .classic-navigation{margin:22px 5vw 0;gap:10px}
 body.mode-classic .classic-unicorn{width:58px;max-width:58px;flex-basis:58px}
 body.mode-classic .classic-page{margin:35px auto 60px}
}
@media(max-width:650px){
 body.mode-classic header{margin-top:22px}
 body.mode-classic .classic-navigation{width:90vw;margin:18px 5vw 0;gap:8px}
 body.mode-classic .classic-links{display:flex;gap:3px}
 body.mode-classic .classic-navigation button{font-size:12px;min-height:38px}
 body.mode-classic .classic-page{margin:24px 5vw 45px;max-width:90vw;padding:24px}
}

/* v0.9.7.5 — Classic masthead: mascot below brand, menu to its right. */
@media (min-width:1051px) {
  body.mode-classic .classic-navigation {
    position:relative;
    margin:-54px 5vw 0 clamp(310px,32vw,470px);
    min-height:56px;
    align-items:flex-start;
  }
  body.mode-classic .classic-unicorn {
    position:absolute;
    left:calc(5vw - clamp(310px,32vw,470px));
    top:calc(100% + 40px);
    width:clamp(150px,17vw,235px);
    max-width:none;
    height:auto;
    margin:0;
    pointer-events:none;
  }
  body.mode-classic .classic-page {margin-top:clamp(135px,15vw,220px)}
}
@media (min-width:651px) and (max-width:1050px) {
  body.mode-classic .classic-navigation {position:relative; margin:24px 5vw 0; padding-left:clamp(170px,24vw,240px); min-height:170px; align-items:flex-start}
  body.mode-classic .classic-unicorn {position:absolute;left:0;top:0;width:clamp(140px,20vw,200px);max-width:none;height:auto;margin:0}
  body.mode-classic .classic-page {margin-top:35px}
}
@media (max-width:650px) {
  body.mode-classic .classic-navigation {position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:18px 5vw 0;width:90vw}
  body.mode-classic .classic-unicorn {position:static;width:125px;max-width:125px;height:auto;margin:0 0 14px}
}

/* Phase A 1.0.5 — Studio landing page and shared home navigation. */
body.mode-classic .classic-navigation{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;width:min(900px,92vw)!important;max-width:900px!important;margin:22px auto 0!important;padding:0!important;min-height:0!important;}
body.mode-classic .studio-bar{order:0;width:100%;}
body.mode-classic .studio-home-link{border:0;background:transparent;font:700 14px Arial,sans-serif;letter-spacing:.09em;cursor:pointer;padding:8px 0;}
body.mode-classic .studio-home-link small{font-size:10px;font-weight:400;margin-left:9px;}
body.mode-classic .classic-unicorn{position:static!important;order:2;align-self:center;width:clamp(175px,31vw,310px)!important;max-width:80vw!important;height:auto!important;margin:40px auto 12px!important;flex:none!important;}
body.mode-classic .studio-welcome{order:1;text-align:center;font:14px Arial,sans-serif;margin:16px 0 0;color:#555;}
body.mode-classic .studio-intro{order:3;text-align:center;margin:14px auto 65px;max-width:95%;}
body.mode-classic .studio-intro-eyebrow{font:500 11px Arial,sans-serif;letter-spacing:.33em;color:#999;}
body.mode-classic .studio-intro h1{font:normal clamp(32px,6vw,64px) Georgia,serif;line-height:1.13;margin:18px 0;}
body.mode-classic .studio-intro>p:last-child{font:16px Arial,sans-serif;letter-spacing:.09em;color:#999;}
body.mode-classic .classic-page{margin:24px auto 70px!important;max-width:min(900px,92vw)!important;}
body.mode-classic:not(.studio-home) .studio-intro{display:none;}
body.mode-classic:not(.studio-home) .classic-unicorn{width:clamp(90px,15vw,150px)!important;margin:12px auto!important;}
body.mode-classic #classic-links{order:1;width:100%;}
body.mode-classic #studio-tools-panel{order:1;}
body.mode-classic [hidden]{display:none!important;}

/* Nerd mode is strictly terminal-only: no Studio/Interactive modal overlays. */
body.mode-nerd #identity-panel, body.mode-nerd .settings-panel, body.mode-nerd .preference-merge-overlay {display:none!important;}

/* v1.0.9.6: preserve fixed-width terminal Pong cells. */
.nerd-pong{white-space:pre;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.2;font-size:clamp(8px,1.2vw,14px)}

/* Clear: prompt must return to the top, not remain at the bottom of the flex shell. */
.nerd-shell.nerd-cleared .nerd-output{flex:0 0 auto;min-height:0;padding:0;}
.nerd-shell.nerd-cleared .nerd-form{border-top:0;}
.nerd-shell.nerd-cleared::after{content:"";flex:1 1 auto;pointer-events:none;}

/* v1.1: clear places the command prompt immediately below the terminal titlebar.
   Explicitly override the default flex-growing output region. */
.nerd-shell.nerd-cleared { justify-content: flex-start; }
.nerd-shell.nerd-cleared .nerd-output { flex: 0 0 0 !important; min-height: 0 !important; height: 0; padding: 0 !important; margin: 0; overflow: hidden; }
.nerd-shell.nerd-cleared .nerd-form { flex: 0 0 auto; order: 1; border-top: 0; align-self: stretch; }
.nerd-shell.nerd-cleared::after { order: 2; }

/* v1.1.1: terminal history and prompt are consecutive flow items, not flex spacers. */
.nerd-shell{height:calc(100dvh - 30px);min-height:0;overflow-y:auto;overscroll-behavior:contain;display:block;scroll-behavior:auto}
.nerd-bar{position:sticky;top:0;z-index:3}
.nerd-bar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nerd-output{flex:none;min-height:0;padding:20px 20px 0}
.nerd-output:empty{padding:0}
.nerd-form{flex:none;border-top:0;padding:8px 20px 16px}
.nerd-shell.nerd-cleared .nerd-output{height:auto!important;overflow:visible!important}
.nerd-shell.nerd-cleared::after{display:none!important}
.nerd-shell.nerd-maximized,.nerd-shell:fullscreen{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-height:none!important;margin:0!important;border:0!important;z-index:99999!important;background:#0b1011}
@media(max-width:650px){.nerd-shell{height:calc(100dvh - 8px)}.nerd-form{padding:8px 8px 14px}.nerd-output{padding:12px 8px 0}}

/* v1.1.2: gameplay occupies the visible terminal viewport without scrolling offscreen. */
.nerd-shell.nerd-playing{overflow-y:auto}
.nerd-shell.nerd-playing .nerd-output{padding-top:4px}
.nerd-shell.nerd-playing .nerd-line:not(.nerd-pong){display:none}
.nerd-shell.nerd-playing .nerd-form{display:none}
.nerd-shell.nerd-playing .nerd-pong{margin:0;font-size:12px;line-height:16px;white-space:pre;overflow-x:auto}

/* v1.1.6 – Breakout shares the game-only terminal viewport. */
.nerd-shell.nerd-breakout-playing .nerd-line:not(.nerd-breakout){display:none}
.nerd-shell.nerd-breakout-playing .nerd-breakout{display:block!important;white-space:pre;font:12px/15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;margin:0}
/* v1.1.9: temporary screensaver surface; never retained after exit. */
.nerd-shell.nerd-matrix-playing .nerd-line:not(.nerd-matrix){display:none}
.nerd-shell.nerd-matrix-playing .nerd-matrix{display:block!important;white-space:pre;overflow:hidden;margin:0;padding:0;color:#9cffac;text-shadow:0 0 6px #35c85a;font:15px/17px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* v1.1.10 — Matrix takes over the entire viewport, including the terminal toolbar. */
.nerd-shell.nerd-screensaver-active{overflow:hidden!important;scrollbar-width:none}
.nerd-shell.nerd-screensaver-active .nerd-bar,
.nerd-shell.nerd-screensaver-active .nerd-output,
.nerd-shell.nerd-screensaver-active .nerd-form{visibility:hidden!important}
.nerd-shell .nerd-matrix-overlay{position:fixed!important;inset:0!important;z-index:2147483647!important;box-sizing:border-box;width:100vw;height:100dvh;margin:0;padding:0;overflow:hidden;background:#000;color:#9cffac;text-shadow:0 0 6px #35c85a;font:15px/17px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;pointer-events:none}

/* Lynx 1992-inspired full terminal text view (no images or decorative UI). */
.nerd-shell.nerd-lynx-playing .nerd-line:not(.nerd-lynx){display:none!important}
.nerd-shell.nerd-lynx-playing .nerd-lynx{display:block!important;white-space:pre-wrap;font:14px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c8d4c8;padding:6px 12px 18px}
.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-row{min-height:1.45em;overflow-wrap:anywhere}
.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-head{font-weight:bold;color:#e5e5e5}
.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-address{color:#aabbaa}
.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-link{color:#7db8ff;text-decoration:underline;cursor:pointer}
.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-selected{background:#224b76;color:#fff}
.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-footer,.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-status{color:#b5b5b5}
.nerd-shell.nerd-lynx-playing .nerd-lynx .lynx-error{color:#ff9898}

/* LYNX 1.1.17: keyboard-operable HTML form controls, terminal style. */
.nerd-shell.nerd-lynx-playing .lynx-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:3px 0}
.nerd-shell.nerd-lynx-playing .lynx-control{font:inherit;color:#c8d4c8;background:#14201c;border:1px solid #6c8a78;padding:3px 7px;max-width:95%;min-width:120px}
.nerd-shell.nerd-lynx-playing .lynx-control:focus,.nerd-shell.nerd-lynx-playing .lynx-control.lynx-selected{outline:1px solid #a5c8ff;border-color:#a5c8ff}
.nerd-shell.nerd-lynx-playing button.lynx-control{cursor:pointer;min-width:0}

/* v1.1.18 — Nerd terminal portrait responsiveness. Keep fixed-cell games scrollable. */
body.mode-nerd { min-width:0; max-width:100%; overflow-x:hidden; }
body.mode-nerd .nerd-shell, body.mode-nerd .nerd-shell * { box-sizing:border-box; }
body.mode-nerd .nerd-shell { width:calc(100% - 30px); max-width:calc(100vw - 30px); min-width:0; overflow-x:hidden; }
body.mode-nerd .nerd-bar, body.mode-nerd .nerd-output, body.mode-nerd .nerd-form { min-width:0; max-width:100%; }
body.mode-nerd .nerd-line { min-width:0; overflow-wrap:anywhere; }
body.mode-nerd .nerd-form input { width:0; min-width:0; flex:1 1 0%; }
body.mode-nerd .nerd-pong, body.mode-nerd .nerd-breakout { max-width:100%; overflow-x:auto; white-space:pre; }
body.mode-nerd .nerd-lynx { max-width:100%; min-width:0; overflow-wrap:anywhere; }
body.mode-nerd .nerd-lynx .lynx-control { min-width:0; max-width:100%; }
@media (max-width:650px) and (orientation:portrait) {
  body.mode-nerd .nerd-shell { width:calc(100% - 8px); max-width:calc(100vw - 8px); margin:4px; height:calc(100dvh - 8px); font-size:clamp(11px,3vw,13px); }
  body.mode-nerd .nerd-shell.nerd-maximized, body.mode-nerd .nerd-shell:fullscreen { width:100%!important; max-width:100vw!important; margin:0!important; height:100dvh!important; }
  body.mode-nerd .nerd-bar { padding:8px; gap:6px; font-size:10px; }
  body.mode-nerd .nerd-bar > span { min-width:0; overflow-wrap:anywhere; }
  body.mode-nerd .nerd-bar-actions { gap:4px; }
  body.mode-nerd .nerd-bar button { padding:6px; font-size:11px; }
  body.mode-nerd .nerd-output { padding:10px 7px 0; }
  body.mode-nerd .nerd-form { padding:8px 7px 12px; gap:5px; }
  body.mode-nerd .nerd-form label { font-size:clamp(9px,2.7vw,11px); flex:0 1 auto; min-width:0; overflow-wrap:anywhere; }
  body.mode-nerd .nerd-form button { min-width:38px; min-height:40px; }
  body.mode-nerd .nerd-lynx-playing .nerd-lynx { font-size:clamp(11px,2.9vw,13px); padding:5px 2px 12px; }
}

/* v1.1.26 — all arcade engines must be visible while .nerd-playing is active.
   Previous .nerd-line:not(.nerd-pong) accidentally hid SPACE INVADERS. */
.nerd-shell.nerd-invaders-playing .nerd-space-invaders{
  display:block!important;
  white-space:pre;
  font:12px/15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-x:auto;
  margin:0;
}
.nerd-shell.nerd-invaders-playing .nerd-line:not(.nerd-space-invaders){display:none}
/* v1.1.26 — a shell prompt, not a browser text box. Preserve mobile submit. */
body.mode-nerd .nerd-form{align-items:baseline;gap:0;padding-top:0}
body.mode-nerd .nerd-form label{flex:none;margin-right:1ch}
body.mode-nerd .nerd-form input,
body.mode-nerd .nerd-form input:focus,
body.mode-nerd .nerd-form input:focus-visible{
  border:0!important;outline:0!important;box-shadow:none!important;
  background:transparent!important;border-radius:0!important;
  padding:0!important;margin:0!important;min-height:1.5em;
  caret-color:#b8e6ba;
}
@media(min-width:651px){body.mode-nerd .nerd-form button[type=submit]{display:none}}
@media(max-width:650px){body.mode-nerd .nerd-form{gap:5px}}

/* v1.1.28 — Frogger gets the same dedicated arcade viewport as Invaders. */
.nerd-shell.nerd-frogger-playing .nerd-frogger{display:block!important;white-space:pre;font:12px/15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;margin:0}
.nerd-shell.nerd-frogger-playing .nerd-line:not(.nerd-frogger){display:none}

/* v1.1.29: one shared viewport rule for every arcade engine. The original
   v1.1.2 :not(.nerd-pong) selector hid all later games by default. */
/* v1.1.54: do not hide the LYNX reader with the shared arcade viewport rule. */
.nerd-shell.nerd-playing:not(.nerd-lynx-playing) .nerd-line { display:none!important; }
.nerd-shell.nerd-lynx-playing .nerd-line.nerd-lynx { display:block!important; visibility:visible!important; }
.nerd-shell.nerd-playing .nerd-line:is(.nerd-pong,.nerd-breakout,.nerd-space-invaders,.nerd-frogger,.nerd-night-driver) {
  display:block!important;
  visibility:visible!important;
  white-space:pre!important;
  overflow-x:auto;
  overflow-wrap:normal;
  font:12px/15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  margin:0;
}
/* Maximized and native fullscreen must be immersive, without titlebar. */
body.mode-nerd .nerd-shell:is(.nerd-maximized,:fullscreen) .nerd-bar { display:none!important; }
body.mode-nerd .nerd-shell:is(.nerd-maximized,:fullscreen) .nerd-output { padding-top:8px; }

/* v1.1.31 — Night Driver uses the shared arcade viewport. */
.nerd-shell.nerd-night-driver-playing .nerd-night-driver { display:block!important; }

/* v1.1.41 — compact optional special keys in Nerd mode. */
.vt-keyboard[hidden]{display:none!important}
.vt-keyboard{position:sticky;bottom:0;z-index:300;display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));background:rgba(9,18,13,.96);border-top:1px solid #37513c;box-sizing:border-box;max-width:100%;font:10px/1 ui-monospace,monospace}
.vt-keyboard button{touch-action:none;user-select:none;min-width:31px;height:30px;padding:2px 5px;border:1px solid #55735a;border-radius:4px;color:#c8f3d0;background:#1a2b1e;font:inherit;cursor:pointer}
.vt-keyboard button:active{background:#446a4b}
.vt-keygroup{display:grid;gap:3px}.vt-keygroup>div{display:flex;gap:3px}.vt-keygroup .vt-space{width:100%}
.vt-arrows{display:grid;justify-items:center;gap:3px}.vt-arrows>div{display:flex;gap:3px}.vt-enter{align-self:end}
@media(max-width:370px){.vt-keyboard{gap:4px}.vt-keyboard button{min-width:27px;height:28px;padding:2px 3px;font-size:9px}}
/* v1.1.41 — interactive tools remain hidden until the edge tab is opened. */
.vt-tools-toggle{display:none;position:fixed;right:-9px;top:44%;width:40px;height:60px;z-index:2147483010;border:1px solid #bbb5a9;border-radius:13px 0 0 13px;background:#fdfcf9;color:#555;font-size:21px;cursor:pointer;box-shadow:0 2px 12px #0002}
body.mode-interactive .vt-tools-toggle{display:block}
body.mode-interactive:not(.vt-tools-open) .interaction-dock{display:none!important}
body.mode-interactive.animal-selected:not(.vt-tools-open) .animal-carousel{visibility:hidden!important;pointer-events:none!important}
body:not(.mode-interactive) .vt-tools-toggle{display:none!important}
.vt-carousel-grip{display:none;border:1px solid #c5bfb5;background:#fffdf9;color:#666;border-radius:7px;padding:5px 9px;font:11px Arial,sans-serif;cursor:grab;touch-action:none;position:absolute;top:0;left:0;z-index:100}
body.mode-interactive.animal-selected .vt-carousel-grip{display:block}
body.mode-interactive.animal-selected .animal-carousel{transform-origin:top left!important}
/* Full-size base carousel always remains visible on entry; only selected mini carousel is toggle-controlled. */
body.mode-interactive:not(.animal-selected) .animal-carousel{visibility:visible!important;pointer-events:auto!important}

/* v1.1.43 — the large selector is independent; focused mini is a boxed tool. */
body.mode-interactive.animal-selected .animal-carousel{
  box-sizing:border-box!important;
  padding:32px 12px 14px!important;
  background:rgba(253,252,249,.96)!important;
  border:1px solid #dedbd5!important;
  border-radius:17px!important;
  box-shadow:0 4px 18px #28241b0b!important;
  overflow:visible!important;
  touch-action:none;
}
body.mode-interactive.animal-selected .vt-carousel-grip{
  display:block;top:5px;left:12px;right:12px;width:calc(100% - 24px);
  box-sizing:border-box;border:0;background:transparent;color:#898681;
  text-align:center;cursor:grab;touch-action:none;
}
/* The right-side auxiliary controls follow the same edge tab. */
body.mode-interactive.animal-selected:not(.vt-tools-open) #carousel-view-toggle,
body.mode-interactive:not(.vt-tools-open) > .interaction-guide,
body.mode-interactive:not(.vt-tools-open) > .debug-bug {display:none!important}
/* The main selector must always remain visible before an animal is chosen. */
body.mode-interactive:not(.animal-selected) .animal-carousel{visibility:visible!important;pointer-events:auto!important}

/* v1.1.45 — mini carousel and zoom dock: matching rounded tool-box design.
   The miniature uses the legacy scale transform (~.29), so its box radius,
   border, grip dimensions and shadow are scaled up in local coordinates. */
body.mode-interactive.animal-selected .animal-carousel {
  border-radius:60px!important;
  border:3px solid #dedbd5!important;
  background:rgba(253,252,249,.96)!important;
  box-shadow:0 14px 62px #28241b0b!important;
  padding:110px 40px 46px!important;
  overflow:visible!important;
}
body.mode-interactive.animal-selected .vt-carousel-grip {
  position:absolute;top:14px;left:40px;right:40px;width:calc(100% - 80px);
  height:66px;min-height:66px;padding:0!important;
  display:flex;align-items:center;justify-content:center;
  border:0!important;border-radius:24px!important;background:transparent!important;
  color:#898681!important;font-size:0!important;letter-spacing:0!important;
  cursor:grab;touch-action:none;
}
body.mode-interactive.animal-selected .vt-carousel-grip::before {
  content:"";display:block;width:27px;height:42px;
  background-image:radial-gradient(circle,#898681 5px,transparent 5.6px);
  background-size:13px 13px;background-position:center;background-repeat:repeat;
  opacity:.92;
}
body.mode-interactive.animal-selected .vt-carousel-grip:active{cursor:grabbing!important;background:#f0ede8!important}
body.mode-interactive.animal-selected .vt-carousel-grip:focus-visible{outline:6px solid #777!important;outline-offset:3px}

/* v1.1.45 patch: playback/experience mode switch is always available at bottom right. */
body.mode-interactive #mode-switch:not([hidden]){display:flex!important;align-items:center;justify-content:center;position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:2147483000}

/* v1.1.46 — initial animal orbit is placed in the upper visible scene,
   without affecting the selected animal focus or the optional tool windows. */
body.mode-interactive:not(.animal-selected) main{
  display:block!important;
  padding-top:clamp(115px,16vh,190px)!important;
}
body.mode-interactive:not(.animal-selected) .stage{margin-inline:auto!important}
@media(max-width:650px){
  body.mode-interactive:not(.animal-selected) main{padding-top:115px!important}
}
/* v1.1.46 — opt-in terminal keys anchored to the visible viewport, not the
   scrolling terminal. Keep the bottom of terminal content accessible. */
body.mode-nerd .vt-keyboard:not([hidden]){
  position:fixed!important;
  left:50%;right:auto;
  bottom:var(--vt-keyboard-offset,0px)!important;
  transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 8px);
  border:1px solid #37513c;border-radius:7px 7px 0 0;
  z-index:2147483001;
}
body:not(.mode-nerd) .vt-keyboard{display:none!important}
body.mode-nerd .nerd-shell.vt-keyboard-on{padding-bottom:84px!important;scroll-padding-bottom:84px}
@media(max-width:370px){body.mode-nerd .nerd-shell.vt-keyboard-on{padding-bottom:78px!important}}

/* v1.1.47 — the focused mini selector is a viewport overlay, never a flow item.
   Transform scaling remains part of the carousel renderer; fixed coordinates
   refer to the untransformed top-left corner. */
body.mode-interactive.animal-selected .animal-carousel{
  position:fixed!important;
  left:var(--vt-mini-x,12px)!important;
  top:var(--vt-mini-y,370px)!important;
  margin:0!important;
  margin-left:0!important;
  margin-top:0!important;
  z-index:2147482995!important;
  transition:none!important;
}
body.mode-interactive.animal-selected .stage{position:relative!important}
body.mode-interactive .interaction-dock{position:fixed!important;z-index:2147482996!important}

/* v1.1.48 — edge-to-edge terminal keyboard: digits above, special keys left,
   arrow cluster immediately left of the full-height RETURN key. */
body.mode-nerd .vt-keyboard:not([hidden]){
 left:0!important;right:0!important;transform:none!important;width:100vw!important;
 max-width:100vw!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(65px,19%);
 align-items:stretch!important;gap:5px!important;padding:5px 5px calc(5px + env(safe-area-inset-bottom,0px))!important;
}
.vt-keyboard-main{min-width:0;display:grid;grid-template-rows:auto auto;gap:5px}
.vt-number-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;min-width:0}
.vt-keyboard .vt-number-row button{min-width:0!important;width:100%;padding:0!important}
.vt-keyboard-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,36%);gap:4px;min-width:0}
.vt-special-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,30px);gap:3px;min-width:0}
.vt-keyboard .vt-special-keys button{min-width:0!important;padding:0!important}
.vt-special-keys .vt-space{grid-column:1/-1;width:100%}
.vt-arrows{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,30px);gap:3px;min-width:0}
.vt-keyboard .vt-arrows button{min-width:0!important;padding:0!important;width:100%;height:30px}
.vt-arrows .vt-up{grid-column:2;grid-row:1}
.vt-arrows button[data-key="ArrowLeft"]{grid-column:1;grid-row:2}
.vt-arrows button[data-key="ArrowDown"]{grid-column:2;grid-row:2}
.vt-arrows button[data-key="ArrowRight"]{grid-column:3;grid-row:2}
.vt-keyboard .vt-enter{height:100%!important;min-width:0!important;align-self:stretch!important;font-size:clamp(9px,2.4vw,13px);padding:2px!important}
body.mode-nerd .nerd-shell.vt-keyboard-on{padding-bottom:135px!important;scroll-padding-bottom:135px}
@media(max-width:370px){.vt-keyboard-lower{grid-template-columns:minmax(0,1fr) minmax(78px,39%)}.vt-keyboard .vt-special-keys button{font-size:9px}}

/* v1.1.49: optional keys never visible without explicit terminal opt-in. */
.vt-keyboard[hidden], body.mode-nerd .vt-keyboard[hidden]{display:none!important;}

/* v1.1.50 fullscreen hotfix: keyboard belongs to fullscreen terminal's top layer. */
body.mode-nerd .nerd-shell:fullscreen > .vt-keyboard:not([hidden]),
body.mode-nerd .nerd-shell.nerd-maximized > .vt-keyboard:not([hidden]){
  position:fixed!important;left:0!important;right:0!important;bottom:var(--vt-keyboard-offset,0px)!important;
  width:100%!important;max-width:100%!important;transform:none!important;
  z-index:2147483001!important;
}

/* v1.1.51: collapsible terminal keyboard and dedicated Night Driver touch deck. */
.vt-keyboard{padding-top:23px!important}
.vt-keyboard .vt-keyboard-toggle{position:absolute;top:0;left:50%;transform:translateX(-50%);height:21px!important;width:66px!important;min-width:66px!important;border-radius:0 0 9px 9px;font-size:18px!important;line-height:17px!important;z-index:2}
.vt-keyboard.vt-collapsed{display:flex!important;height:29px!important;min-height:29px!important;padding:0!important;justify-content:center!important;align-items:flex-start!important}
.vt-keyboard.vt-collapsed .vt-keyboard-main,.vt-keyboard.vt-collapsed .vt-enter{display:none!important}
.vt-keyboard.vt-collapsed .vt-keyboard-toggle{top:0}
.vt-special-keys{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.vt-keyboard .vt-special-keys button{font-size:clamp(8px,2.2vw,11px)!important}
.vt-driver-controls[hidden]{display:none!important}
body.mode-nerd .vt-driver-controls:not([hidden]){position:fixed;left:0;right:0;bottom:calc(var(--vt-keyboard-offset,0px) + 0px);width:100%;z-index:2147482999;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:5px 8px calc(7px + env(safe-area-inset-bottom,0px));background:rgba(9,18,13,.97);border-top:1px solid #547456;box-sizing:border-box;touch-action:none}
.vt-driver-controls button{touch-action:none;user-select:none;border:1px solid #608768;background:#172d1f;color:#d5ffdb;border-radius:7px;min-height:40px;font:700 12px ui-monospace,monospace}
.vt-driver-controls button:active{background:#426f4a}
.vt-driver-steer{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,40px);gap:3px}
.vt-driver-steer button[data-key="ArrowUp"]{grid-column:2;grid-row:1}
.vt-driver-steer button[data-key="ArrowLeft"]{grid-column:1;grid-row:2}
.vt-driver-steer button[data-key="ArrowDown"]{grid-column:2;grid-row:2}
.vt-driver-steer button[data-key="ArrowRight"]{grid-column:3;grid-row:2}
.vt-driver-actions{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:40px 40px;gap:3px}
.vt-driver-actions .vt-driver-brake{grid-column:1/3}
.vt-driver-menu{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
body.mode-nerd .nerd-shell.vt-driver-on{padding-bottom:105px!important;scroll-padding-bottom:105px}
body.mode-nerd .nerd-shell.vt-driver-on.vt-keyboard-on{padding-bottom:250px!important}
body.mode-nerd .vt-driver-controls:not([hidden]):has(~ .vt-keyboard:not([hidden])){bottom:var(--vt-keyboard-offset,0px)}
body.mode-nerd:has(.vt-keyboard:not([hidden]):not(.vt-collapsed)) .vt-driver-controls:not([hidden]){bottom:calc(var(--vt-keyboard-offset,0px) + 139px)}
body.mode-nerd:has(.vt-keyboard.vt-collapsed:not([hidden])) .vt-driver-controls:not([hidden]){bottom:calc(var(--vt-keyboard-offset,0px) + 29px)}
body.mode-nerd .nerd-shell:fullscreen > .vt-driver-controls:not([hidden]){z-index:2147483002}
@media(max-width:650px){.nerd-shell.nerd-playing .nerd-output{overflow-x:hidden!important}.nerd-shell.nerd-playing .nerd-line{max-width:100%!important}}

/* v1.1.53: driver controls are only shown when JS detects coarse touch hardware. */
.vt-driver-controls[hidden],body.mode-nerd .vt-driver-controls[hidden]{display:none!important}

/* v1.1.55 — universal mobile SEGA-style controller for all arcade engines. */
body.mode-nerd .vt-arcade-controls:not([hidden]){
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:120px 40px;
 gap:7px 14px;align-items:center;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
 background:rgba(5,16,9,.97);border-top:1px solid #4b8a59;
}
.vt-arcade-controls .vt-driver-steer{width:min(100%,170px);height:116px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;justify-self:start}
.vt-arcade-controls .vt-driver-steer button[data-key="ArrowUp"]{grid-column:2;grid-row:1}
.vt-arcade-controls .vt-driver-steer button[data-key="ArrowLeft"]{grid-column:1;grid-row:2}
.vt-arcade-controls .vt-driver-steer button[data-key="ArrowRight"]{grid-column:3;grid-row:2}
.vt-arcade-controls .vt-driver-steer button[data-key="ArrowDown"]{grid-column:2;grid-row:3}
.vt-arcade-controls .vt-driver-actions{position:relative;display:block;width:min(100%,185px);height:116px;justify-self:end}
.vt-arcade-controls .vt-arcade-action{position:absolute;width:48px;height:48px;min-height:48px;border-radius:50%;font-size:17px;border:2px solid #78b284;box-shadow:inset 0 -3px 0 rgba(0,0,0,.6);padding:0}
.vt-arcade-controls .vt-arcade-a{left:0;bottom:0}
.vt-arcade-controls .vt-arcade-b{left:calc(50% - 24px);top:34px}
.vt-arcade-controls .vt-arcade-c{right:0;top:0}
.vt-arcade-controls .vt-driver-menu{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) repeat(2,minmax(0,1.3fr));gap:5px;min-width:0}
.vt-arcade-controls .vt-driver-menu button{border-radius:10px;min-height:38px;font-size:12px}
.vt-arcade-controls .vt-driver-menu .vt-arcade-system{border-radius:6px;font-size:11px}
.vt-arcade-controls button:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #030903;background:#386543}
body.mode-nerd .nerd-shell.vt-driver-on{padding-bottom:210px!important;scroll-padding-bottom:210px}
body.mode-nerd .nerd-shell.vt-driver-on.vt-keyboard-on{padding-bottom:210px!important}
@media(max-width:360px){.vt-arcade-controls .vt-arcade-action{width:44px;height:44px;min-height:44px}.vt-arcade-controls .vt-arcade-b{left:calc(50% - 22px)}}

/* v1.1.56 — fixed arcade controls must not consume a second full viewport
   through shell padding. Keep the whole game above the controller. */
@media (max-width:650px) and (pointer:coarse){
 body.mode-nerd .nerd-shell.vt-driver-on{padding-bottom:0!important;scroll-padding-bottom:0!important;overflow-x:hidden;}
 body.mode-nerd .nerd-shell.vt-driver-on .nerd-output{min-height:0!important;overflow-x:hidden!important;}
 body.mode-nerd .nerd-shell.vt-driver-on .nerd-line:is(.nerd-breakout,.nerd-frogger){overflow-x:hidden!important;}
}

/* v1.1.57 — Android block glyphs must occupy exactly one monospace cell. */
.nerd-shell .vt-ascii-cell{display:inline-block!important;width:1ch!important;min-width:1ch!important;max-width:1ch!important;box-sizing:border-box!important;vertical-align:baseline!important;overflow:hidden!important;white-space:nowrap!important;font:inherit!important;letter-spacing:0!important;text-align:left!important}
.nerd-shell .nerd-line:is(.nerd-breakout,.nerd-night-driver,.nerd-frogger,.nerd-space-invaders,.nerd-pong){word-break:normal!important;overflow-wrap:normal!important;white-space:pre!important;letter-spacing:0!important}

/* v1.1.59 – isolated canvas-based terminal sprite game */
.nerd-shell.nerd-donkeykong-playing .nerd-line:not(.nerd-donkeykong){display:none!important}
.nerd-shell.nerd-donkeykong-playing .nerd-donkeykong{display:flex!important;align-items:center;justify-content:center;margin:0!important;padding:0!important;overflow:hidden!important;width:100%}
.nerd-donkeykong canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;touch-action:none}

/* v1.1.60 — include Canvas game in shared arcade visibility whitelist. */
.nerd-shell.nerd-playing:not(.nerd-lynx-playing) .nerd-line.nerd-donkeykong {display:flex!important;visibility:visible!important;white-space:normal!important;overflow:hidden!important;}

/* v1.1.61: preserve the arcade canvas aspect ratio across mobile and desktop. */
.nerd-shell.nerd-donkeykong-playing .nerd-donkeykong canvas{aspect-ratio:224/256;object-fit:contain;flex:none;image-rendering:pixelated!important}

/* v1.1.60.1 — Unicode / ASCII Donkey Kong uses the same text viewport as Night Driver. */
.nerd-shell.nerd-donkeykong-playing .nerd-line.nerd-donkeykong{display:block!important;visibility:visible!important;white-space:pre!important;word-break:normal!important;overflow-wrap:normal!important;overflow:hidden!important;margin:0!important;padding:0!important;width:max-content;max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-variant-ligatures:none!important;letter-spacing:0!important;tab-size:1!important;line-height:1.23!important;}

/* v1.1.60.2 — ASCII KONG: dedicated fixed-cell arcade viewport.
   The parent output is NOT a text wrapping container during play. */
.nerd-shell.nerd-asciikong-playing .nerd-line:not(.nerd-asciikong){display:none!important}
.nerd-shell.nerd-playing:not(.nerd-lynx-playing) .nerd-line.nerd-asciikong{
 display:block!important;visibility:visible!important;
 white-space:pre!important;word-break:normal!important;overflow-wrap:normal!important;
 overflow:visible!important;margin:0 auto!important;padding:0!important;
 max-width:none!important;min-width:0!important;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
 font-variant-ligatures:none!important;font-kerning:none!important;
 letter-spacing:0!important;tab-size:1!important;
 text-align:left!important;flex:none!important;
}
.nerd-shell.nerd-asciikong-playing .nerd-output{
 display:flex!important;align-items:center!important;justify-content:center!important;
 flex:1 1 auto!important;min-height:0!important;
 padding:6px!important;overflow:hidden!important;white-space:normal!important;
}
.nerd-shell.nerd-asciikong-playing{overflow:hidden!important}
@media(max-width:650px){
 .nerd-shell.nerd-asciikong-playing .nerd-output{padding:3px!important}
}

/* v1.1.60.5 — ASCII KONG follows the shared left-aligned arcade viewport. */
.nerd-shell.nerd-asciikong-playing .nerd-output{
 justify-content:flex-start!important;align-items:flex-start!important;
}
.nerd-shell.nerd-asciikong-playing .nerd-line.nerd-asciikong{
 margin:0!important;text-align:left!important;
}

/* v1.1.60.6 — ASCII KONG: enforce the shared left-edge arcade alignment.
   Override the older centered flex viewport without changing other games. */
body.mode-nerd .nerd-shell.nerd-asciikong-playing .nerd-output{
  display:block!important; text-align:left!important;
  justify-content:initial!important; align-items:initial!important;
}
body.mode-nerd .nerd-shell.nerd-asciikong-playing pre.nerd-line.nerd-asciikong{
  display:block!important; margin-left:0!important; margin-right:0!important;
  position:relative!important; left:0!important; right:auto!important;
  transform:none!important; float:none!important;
}

/* v1.1.61.16: keep the collapse handle entirely above the number row.
   The collapsed handle stays inside the compact bar so it remains tappable. */
body.mode-nerd .vt-keyboard:not([hidden]):not(.vt-collapsed) .vt-keyboard-toggle {
  top: -25px !important;
  border-radius: 9px 9px 0 0;
}
body.mode-nerd .vt-keyboard.vt-collapsed:not([hidden]) .vt-keyboard-toggle {
  top: 0 !important;
  border-radius: 0 0 9px 9px;
}

/* VIRTUAL NANO EDITOR — independent overlay; mobile keyboard remains accessible. */
.vtec-nano { position:fixed; inset:5vh 5vw; z-index:99999; display:flex; flex-direction:column; gap:12px; padding:18px; background:#07130b; color:#a9ffad; border:2px solid #3da46a; font:16px/1.4 monospace; box-shadow:0 0 0 100vmax #0009; }
.vtec-nano textarea { flex:1; min-height:0; width:100%; box-sizing:border-box; background:#020903; color:inherit; border:1px solid #3da46a; font:inherit; padding:12px; resize:none; }
.vtec-nano button { color:inherit; background:#163020; border:1px solid #3da46a; padding:10px; margin-right:10px; cursor:pointer; }

/* v1.1.61.23 — Optional BREAKOUT collision instrumentation, overlay only.
   The panel is out of document flow: enabling it never resizes the court. */
.nerd-shell.nerd-breakout-playing{position:relative}
.nerd-shell.nerd-breakout-playing .nerd-breakout-debug-panel{
  position:absolute;right:8px;top:46px;z-index:15;box-sizing:border-box;
  width:min(350px,43%);max-height:calc(100% - 56px);overflow:auto;
  margin:0;padding:10px;border:1px solid #5b956b;background:rgba(5,18,11,.96);
  color:#b8e6ba;font:11px/15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:auto;
}
@media(max-width:650px){.nerd-shell.nerd-breakout-playing .nerd-breakout-debug-panel{width:45%;font-size:9px;line-height:12px;padding:5px;right:3px}}

/* v1.1.61.24 — Debug dock independent of terminal clipping and game geometry. */
/* v1.1.61.31 — BREAKOUT debugger is positioned by its JS layout engine.
   Do not force position:fixed!important: it overrides the measured court
   placement and can hide the panel outside the viewport. */
.vtec-breakout-debug-panel {
  position:absolute;z-index:2147483000;
  box-sizing:border-box;overflow:hidden;pointer-events:auto;
  box-shadow:0 8px 28px #000a;
}

/* v1.1.61.25 — BREAKOUT opening uses the NERD MODE terminal palette.
   The gameplay canvas retains its selected arcade graphics palette. */
body.mode-nerd .nerd-shell.nerd-breakout-menu .nerd-breakout,
body.mode-nerd .nerd-shell.nerd-breakout-menu .nerd-breakout * {
  color:#a9ffad!important; background-color:transparent!important;
  text-shadow:none!important;
}

/* v1.1.61.36: NANO and debugger share one viewport-sized application workspace.
   The editor itself remains full-width within its column; no floating 425px editor. */
.vtec-application-workspace--nano {
  position:fixed!important;inset:3.5vh 3vw!important;width:auto!important;
  max-width:none!important;height:93vh!important;z-index:99999!important;
  padding:0!important;background:#07130b!important;
  box-shadow:0 0 0 100vmax #0009!important;align-items:stretch!important;
  overflow:auto!important;
}
.vtec-application-workspace--nano > .vtec-nano {
  position:relative!important;inset:auto!important;z-index:auto!important;
  width:100%!important;height:100%!important;min-height:360px!important;
  box-shadow:none!important;box-sizing:border-box!important;
}
.vtec-application-workspace--nano > .vtec-universal-debug {min-width:0;min-height:0;}
@media(max-width:849px){
 .vtec-application-workspace--nano{height:93vh!important;grid-template-rows:minmax(360px,1fr) auto!important;}
 .vtec-application-workspace--nano > .vtec-nano{min-height:360px!important;}
}

/* v1.1.61.38 — NANO occupies 80%, debugger 20% of shared workspace. */
@media(min-width:900px){
 .vtec-application-workspace--nano{grid-template-columns:minmax(0,4fr) minmax(0,1fr)!important;overflow:hidden!important;}
 .vtec-application-workspace--nano > .vtec-universal-debug{min-width:0!important;max-width:100%!important;overflow:hidden!important;}
 .vtec-application-workspace--nano > .vtec-nano{min-width:0!important;}
}