:root {
    --studio-bg: #faf9f6;
    --studio-ink: #2d2926;
    --studio-muted: #625d59;
    --studio-line: rgba(45, 41, 38, 0.16);
    --studio-pink: #ffb7c5;
    --studio-cyan: #00f5ff;
    --civil: #8a334d;
    --civil-soft: #f9e8ed;
    --hci: #077780;
    --hci-soft: #e5f5f3;
    --chirabi-sage: #758b78;
    --chirabi-brass: #ad7c43;
    --chirabi-paper: #fffaf0;
    --folio-celadon: #c7d7cf;
    --folio-cyan: #b9dfe3;
    --folio-sakura: #dfb9b2;
    --folio-gold: #b78845;
    --dot-scroll-y: 0px;
    --scan-scroll-y: 0px;
    --font-display: "Dela Gothic One", sans-serif;
    --font-reading: "Noto Serif JP", serif;
    --font-mono: "Space Mono", monospace;
    --z-content: 10;
    --z-room: 40;
    --z-frame: 80;
    --z-scanlines: 90;
    --z-skip: 100;
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
    background-color: var(--studio-bg);
    color: var(--studio-ink);
    font-family: var(--font-reading);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.room-open {
    overflow: hidden;
}

/* Exact visual ingredients from the live Studio, detached from its old viewport lock. */
.grid-bg {
    position: fixed;
    inset: -40px 0;
    opacity: 0.1;
    pointer-events: none;
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 40px 40px;
    transform: translate3d(0, var(--dot-scroll-y), 0);
    will-change: transform;
    z-index: 1;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.02) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.01), rgba(0, 255, 0, 0.005), rgba(0, 0, 255, 0.01));
    z-index: var(--z-scanlines);
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    transform: translate3d(0, var(--scan-scroll-y), 0);
    will-change: transform;
}

.terminal-frame {
    position: fixed;
    inset: 20px;
    border: 1px solid rgba(45, 41, 38, 0.05);
    pointer-events: none;
    z-index: var(--z-frame);
    border-radius: 12px;
}

.frame-label {
    position: absolute;
    color: rgba(45, 41, 38, 0.58);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: opacity 180ms ease-out;
}

body.room-open .frame-label {
    opacity: 0;
}

.frame-label span {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    letter-spacing: 0.1em;
    opacity: 0.72;
}

.label-tl {
    top: 22px;
    left: 12px;
    max-height: calc(100dvh - 84px);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.label-br {
    right: 12px;
    bottom: 22px;
    max-height: calc(100dvh - 84px);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--studio-ink);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: var(--z-skip);
    padding: 10px 16px;
    border: 1px solid var(--studio-ink);
    border-radius: 999px;
    background: var(--studio-bg);
    font: 700 12px/1 var(--font-mono);
    text-decoration: none;
    transform: translate(-50%, -160%);
    transition: transform 180ms ease-out;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

.eyebrow {
    margin: 0;
    color: var(--studio-muted);
    font: 700 11px/1.5 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.studio-landing {
    position: relative;
    z-index: var(--z-content);
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    padding: clamp(38px, 4.5vw, 68px) clamp(38px, 6.5vw, 108px) clamp(46px, 5vw, 72px);
    isolation: isolate;
}

.studio-landing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: none;
    filter: saturate(0.84) contrast(0.985);
    opacity: 0.72;
    pointer-events: none;
}

.studio-masthead,
.studio-main,
.studio-footer {
    width: min(100%, 1480px);
    margin-inline: auto;
}

.studio-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand-anchor {
    position: relative;
    display: inline-flex;
    min-width: min(520px, 56vw);
    min-height: 86px;
    align-items: center;
    gap: 15px;
    padding: 14px 42px 14px 16px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(250, 249, 246, 0.12), rgba(250, 249, 246, 0.42)),
        url("../_assets/studio-signal-folio/studio-logotype-plate-v1.webp") center / cover no-repeat;
    color: var(--studio-ink);
    text-decoration: none;
    filter: drop-shadow(0 12px 20px rgba(84, 67, 49, 0.07));
    transition: filter 260ms ease-out, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-anchor:hover,
.brand-anchor:focus-visible {
    filter: drop-shadow(0 16px 26px rgba(84, 67, 49, 0.12));
    transform: translateY(-2px);
}

.brand-anchor__image {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(45, 41, 38, 0.12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 13px 30px rgba(45, 41, 38, 0.08);
}

.brand-anchor__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 47%;
}

.brand-anchor__copy {
    display: grid;
    gap: 5px;
}

.brand-anchor__copy strong {
    font: 400 18px/1.2 var(--font-display);
    letter-spacing: -0.02em;
}

.brand-anchor__copy span {
    color: var(--studio-muted);
    font: 400 10px/1.5 var(--font-mono);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.portal-link,
.room-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid currentColor;
    font: 700 11px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease-out, gap 180ms ease-out;
}

.portal-link:hover,
.room-back:hover {
    color: var(--hci);
    gap: 13px;
}

.studio-main {
    min-width: 0;
    flex: 1;
    padding-top: clamp(24px, 3vw, 44px);
}

.studio-opening {
    display: grid;
    grid-template-columns: minmax(390px, 0.95fr) minmax(540px, 1.05fr);
    gap: clamp(18px, 2.2vw, 34px);
    align-items: stretch;
}

/* Chirabi's room is a literal doorway, not another project card. */
.chirabi-portal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 1.35fr) minmax(220px, 0.65fr);
    grid-template-areas: "room copy";
    gap: 0;
    min-height: 310px;
    margin-bottom: 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(117, 139, 120, 0.5);
    border-radius: 24px 24px 14px 14px;
    background: rgba(255, 250, 240, 0.78);
    box-shadow: 0 28px 78px rgba(99, 78, 58, 0.14), inset 0 1px rgba(255, 255, 255, 0.9);
    color: var(--studio-ink);
    text-decoration: none;
    isolation: isolate;
    transition: border-color 240ms ease-out, box-shadow 360ms ease-out, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chirabi-portal::before,
.chirabi-portal::after {
    content: "";
    position: absolute;
    z-index: 8;
    width: 36px;
    height: 36px;
    pointer-events: none;
}

.chirabi-portal::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--chirabi-brass);
    border-left: 2px solid var(--chirabi-brass);
}

.chirabi-portal::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--chirabi-brass);
    border-bottom: 2px solid var(--chirabi-brass);
}

.chirabi-portal:hover,
.chirabi-portal:focus-visible {
    border-color: rgba(117, 139, 120, 0.82);
    box-shadow: 0 34px 92px rgba(99, 78, 58, 0.2), inset 0 1px rgba(255, 255, 255, 0.95);
    transform: translateY(-5px);
}

.chirabi-portal__room {
    position: relative;
    grid-area: room;
    min-width: 0;
    min-height: 294px;
    overflow: hidden;
    border-radius: 15px 7px 7px 7px;
    background: #efe3ce;
    isolation: isolate;
}

.chirabi-portal__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 400ms ease-out;
    user-select: none;
}

.chirabi-portal:hover .chirabi-portal__background,
.chirabi-portal:focus-visible .chirabi-portal__background {
    transform: scale(1.018);
    filter: saturate(1.04);
}

.chirabi-portal__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 2;
    box-shadow: inset 0 0 70px rgba(95, 68, 42, 0.09);
    pointer-events: none;
}

.chirabi-portal__walker {
    position: absolute;
    top: var(--portal-chirabi-y);
    left: var(--portal-chirabi-x);
    z-index: 5;
    width: clamp(130px, 12vw, 190px);
    aspect-ratio: 1;
    pointer-events: none;
    transform: translate(-50%, -100%);
    transition:
        left var(--portal-travel-duration) cubic-bezier(0.45, 0.05, 0.18, 1),
        top var(--portal-travel-duration) cubic-bezier(0.45, 0.05, 0.18, 1);
    will-change: left, top;
}

.chirabi-portal__sprite {
    position: absolute;
    inset: 0;
    background-image: url("../_assets/chirabi/chirabi-loop-breathe.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 400% 400%;
    filter: drop-shadow(0 10px 8px rgba(97, 77, 56, 0.2));
    image-rendering: pixelated;
    transform: scaleX(var(--portal-flip, 1));
    transform-origin: center bottom;
}

.chirabi-portal__walker.is-walking .chirabi-portal__sprite {
    animation: chirabi-portal-step 460ms ease-in-out infinite;
}

@keyframes chirabi-portal-step {
    0%, 100% { margin-top: 0; rotate: -0.35deg; }
    46% { margin-top: -6px; rotate: 0.5deg; }
    72% { margin-top: -2px; rotate: 0deg; }
}

.chirabi-portal__copy {
    position: relative;
    z-index: 3;
    grid-area: copy;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 1.8vw, 26px);
}

.chirabi-portal__copy strong {
    display: block;
    margin-top: 12px;
    font: 400 clamp(1.4rem, 1.8vw, 2.15rem)/1.03 var(--font-display);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.chirabi-portal__summary {
    display: block;
    max-width: 39ch;
    margin-top: 14px;
    color: #514c48;
    font-size: clamp(0.82rem, 0.82vw, 0.92rem);
    line-height: 1.48;
    text-wrap: pretty;
}

.chirabi-portal__enter {
    position: relative;
    display: grid;
    width: 72px;
    height: 72px;
    align-items: center;
    align-self: flex-start;
    justify-items: center;
    margin-top: 12px;
    padding: 15px;
    border-radius: 50%;
    background: url("../_assets/studio-signal-folio/studio-enter-seal-v1.webp") center / 168% no-repeat;
    color: #4e4a43;
    filter: drop-shadow(0 10px 16px rgba(99, 78, 58, 0.14));
    font: 700 7px/1.3 var(--font-mono);
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
    transition: filter 240ms ease-out, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chirabi-portal__enter-label {
    max-width: 8ch;
}

.chirabi-portal__enter-arrow {
    position: absolute;
    right: 11px;
    bottom: 9px;
    color: var(--chirabi-sage);
    font-size: 14px;
    transition: transform 220ms ease-out;
}

.chirabi-portal:hover .chirabi-portal__enter,
.chirabi-portal:focus-visible .chirabi-portal__enter {
    filter: drop-shadow(0 14px 21px rgba(99, 78, 58, 0.2));
    transform: rotate(1.5deg) scale(1.035);
}

.chirabi-portal:hover .chirabi-portal__enter-arrow,
.chirabi-portal:focus-visible .chirabi-portal__enter-arrow {
    transform: translateX(5px);
}

body.chirabi-portal-opening {
    overflow: hidden;
}

body.chirabi-portal-opening .studio-landing {
    opacity: 0.2;
    filter: blur(4px);
    transition: opacity 460ms ease-out, filter 460ms ease-out;
}

.chirabi-portal-flight {
    position: fixed !important;
    z-index: 120 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    box-shadow: 0 34px 120px rgba(58, 44, 32, 0.28) !important;
    pointer-events: none !important;
    transition:
        top 720ms cubic-bezier(0.16, 1, 0.3, 1),
        left 720ms cubic-bezier(0.16, 1, 0.3, 1),
        width 720ms cubic-bezier(0.16, 1, 0.3, 1),
        height 720ms cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 520ms ease-out !important;
    contain: layout paint;
}

.chirabi-portal-flight.is-expanded {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
}

.chirabi-portal-flight.is-expanded .chirabi-portal__background {
    transform: scale(1.035);
}

.chirabi-portal-flight::after {
    content: "";
    position: absolute;
    inset: -7%;
    z-index: 12;
    background:
        linear-gradient(rgba(255, 250, 240, 0.02), rgba(255, 250, 240, 0.14)),
        url("../_assets/studio-signal-folio/studio-transition-veil-v1.webp") center / cover no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.08) translateY(2%);
    transition:
        opacity 520ms ease-out 90ms,
        transform 620ms cubic-bezier(0.16, 1, 0.3, 1) 50ms;
}

.chirabi-portal-flight.is-expanded::after {
    opacity: 0.72;
    transform: scale(1) translateY(0);
}

.studio-intro {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px;
    margin-bottom: 0;
    padding: clamp(30px, 3vw, 40px);
    overflow: hidden;
    border-radius: 24px;
    background:
        linear-gradient(115deg, rgba(250, 249, 246, 0.08), rgba(250, 249, 246, 0.42)),
        url("../_assets/studio-signal-folio/studio-directory-band-v1.webp") center / cover no-repeat;
    box-shadow: 0 18px 46px rgba(84, 67, 49, 0.08);
    isolation: isolate;
}

.studio-intro h1 {
    max-width: 900px;
    margin: 14px 0 0;
    font: 400 clamp(2.3rem, 3.35vw, 3.9rem)/0.98 var(--font-display);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.studio-intro__lede {
    max-width: 52ch;
    margin: 0 0 5px;
    color: #514c48;
    font-size: clamp(0.94rem, 1.05vw, 1.06rem);
    line-height: 1.65;
    text-wrap: pretty;
}

.category-deck {
    display: grid;
    grid-template-columns: minmax(300px, 0.88fr) minmax(420px, 1.12fr);
    align-items: stretch;
    gap: clamp(14px, 1.7vw, 26px);
    min-height: clamp(360px, 42vh, 500px);
    margin-top: clamp(18px, 2vw, 30px);
}

.category-door {
    --door-y: 0px;
    --door-art-position: center;
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    overflow: hidden;
    padding: clamp(22px, 2.35vw, 36px);
    border: 1px solid var(--door-line);
    border-radius: 28px;
    background:
        linear-gradient(145deg, var(--door-wash), rgba(250, 249, 246, 0.76) 62%, rgba(255, 255, 255, 0.66)),
        url("../_assets/studio-signal-folio/studio-category-surface-v1.webp") var(--door-art-position) / cover no-repeat,
        var(--door-bg);
    box-shadow: 0 20px 55px rgba(45, 41, 38, 0.09);
    color: var(--studio-ink);
    text-decoration: none;
    transform: translateY(var(--door-y));
    transition:
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 300ms ease-out,
        border-color 240ms ease-out;
    contain: paint;
}

.category-door::before {
    content: "";
    position: absolute;
    top: 22px;
    right: 22px;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(111, 74, 30, 0.42);
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #fff4c9 0 8%, #d4a459 25%, #8f642e 68%, #6f4c27 100%);
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.72) inset, 0 3px 8px rgba(83, 57, 28, 0.2);
    transform: scale(0.82);
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.category-door:hover,
.category-door:focus-visible {
    border-color: color-mix(in srgb, var(--door-accent) 62%, var(--studio-ink));
    box-shadow: 0 28px 70px rgba(45, 41, 38, 0.14);
    transform: translateY(calc(var(--door-y) - 7px));
}

.category-door:hover::before,
.category-door:focus-visible::before {
    transform: scale(1.14) rotate(14deg);
}

.category-door--civil {
    --door-bg: var(--civil-soft);
    --door-wash: rgba(249, 232, 237, 0.78);
    --door-line: rgba(138, 51, 77, 0.25);
    --door-accent: var(--civil);
    --door-art-position: 42% center;
    --door-y: 0px;
}

.category-door--hci {
    --door-bg: var(--hci-soft);
    --door-wash: rgba(229, 245, 243, 0.76);
    --door-line: rgba(8, 123, 131, 0.25);
    --door-accent: var(--hci);
    --door-art-position: 52% center;
}

.category-door__topline,
.category-door__enter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font: 700 10px/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.category-door__topline {
    color: #554f4b;
}

.category-door__copy {
    display: grid;
    gap: 15px;
}

.category-door__title {
    font: 400 clamp(1.72rem, 2.65vw, 3.2rem)/1.04 var(--font-display);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.category-door__summary {
    max-width: 39ch;
    color: #4f4945;
    font-size: clamp(0.95rem, 1.15vw, 1.08rem);
    line-height: 1.62;
    text-wrap: pretty;
}

.category-door__enter {
    justify-content: flex-start;
    color: var(--door-accent);
}

.category-door__enter span {
    font-size: 17px;
    transition: transform 220ms ease-out;
}

.category-door:hover .category-door__enter span,
.category-door:focus-visible .category-door__enter span {
    transform: translate(3px, -3px);
}

.door-window {
    position: relative;
    display: block;
    min-height: 150px;
    overflow: hidden;
    border: 1px solid rgba(45, 41, 38, 0.16);
    border-radius: 17px;
    background: var(--studio-bg);
}

.door-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease-out;
}

.category-door:hover .door-window img,
.category-door:focus-visible .door-window img {
    transform: scale(1.035);
}

.door-window--civil {
    height: 156px;
}

.door-window--civil img {
    object-fit: contain;
    object-position: center;
    background: #232250;
}

.door-window--civil span {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 7px 9px;
    border: 1px solid rgba(45, 41, 38, 0.13);
    border-radius: 999px;
    background: rgba(250, 249, 246, 0.94);
    color: var(--studio-ink);
    font: 700 8px/1 var(--font-mono);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.door-window--duet {
    display: grid;
    height: 177px;
    grid-template-columns: 1.05fr 0.95fr;
    background: #101124;
}

.door-window--duet img:first-child {
    object-position: 52% center;
}

.door-window--duet img:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    object-position: center;
}

.studio-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-top: clamp(46px, 5vw, 76px);
    padding-top: 22px;
    border-top: 1px solid var(--studio-line);
}

.studio-footer p {
    max-width: 58ch;
    margin: 0;
    color: var(--studio-muted);
    font: 400 10px/1.7 var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tide-clue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #4f5273;
    font: 700 10px/1.4 var(--font-mono);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease-out;
}

.tide-clue:hover,
.tide-clue:focus-visible {
    color: #175a84;
}

.tide-clue__wave {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 18px;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tide-clue:hover .tide-clue__wave,
.tide-clue:focus-visible .tide-clue__wave {
    transform: translateY(-3px) rotate(-8deg);
}

/* Category rooms */
.studio-room {
    position: fixed;
    inset: 0;
    z-index: var(--z-room);
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(250, 249, 246, 0.965);
}

.studio-room.is-active,
.studio-room:target {
    display: block;
}

.room-surface {
    --room-accent: var(--studio-ink);
    position: relative;
    min-height: 100%;
    padding: clamp(42px, 5vw, 72px) clamp(38px, 6.5vw, 108px) clamp(64px, 7vw, 112px);
    background: rgba(250, 249, 246, 0.9);
}

.room-surface::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: var(--room-accent);
}

.studio-room--civil .room-surface {
    --room-accent: var(--civil);
}

.studio-room--hci .room-surface {
    --room-accent: var(--hci);
}

.room-masthead,
.room-main {
    width: min(100%, 1380px);
    margin-inline: auto;
}

.room-masthead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--studio-line);
}

.room-masthead__label,
.room-masthead__status {
    color: var(--studio-muted);
    font: 700 10px/1.4 var(--font-mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.room-masthead__label {
    text-align: center;
}

.room-masthead__status {
    justify-self: end;
}

.room-main {
    padding-top: clamp(58px, 7vw, 112px);
}

.room-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.7fr);
    align-items: end;
    gap: clamp(26px, 5vw, 88px);
    margin-bottom: clamp(66px, 8vw, 126px);
}

.room-hero .eyebrow {
    grid-column: 1 / -1;
    color: var(--room-accent);
}

.room-hero h2 {
    margin: 0;
    font: 400 clamp(3.2rem, 7.2vw, 6rem)/0.94 var(--font-display);
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.room-hero > p:not(.eyebrow) {
    max-width: 48ch;
    margin: 0;
    color: #514c48;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.76;
    text-wrap: pretty;
}

.room-rule {
    grid-column: 1 / -1;
    display: block;
    height: 2px;
    background: var(--room-accent);
    transform-origin: left;
}

.project-feature {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: clamp(34px, 6vw, 96px);
    padding-block: clamp(42px, 6vw, 84px);
    border-top: 1px solid var(--studio-line);
    content-visibility: auto;
    contain-intrinsic-size: 720px;
}

.project-feature:last-child {
    border-bottom: 1px solid var(--studio-line);
}

.project-media {
    grid-column: span 7;
    overflow: hidden;
    border: 1px solid rgba(45, 41, 38, 0.16);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(45, 41, 38, 0.1);
}

.project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-copy {
    grid-column: span 5;
}

.project-copy h3,
.section-heading h3 {
    margin: 14px 0 20px;
    font: 400 clamp(1.8rem, 3vw, 3.35rem)/1.05 var(--font-display);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.project-copy > p:not(.project-status),
.section-heading > p:not(.eyebrow) {
    max-width: 56ch;
    margin: 0;
    color: #514c48;
    font-size: 1rem;
    line-height: 1.76;
    text-wrap: pretty;
}

.project-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--studio-muted);
    font: 700 10px/1.5 var(--font-mono);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.project-status span {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--room-accent);
}

.project-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    padding: 13px 17px;
    border: 1px solid var(--studio-ink);
    border-radius: 999px;
    background: var(--studio-ink);
    color: #fff;
    font: 700 11px/1 var(--font-mono);
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    transition: gap 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
}

.project-action:hover,
.project-action:focus-visible {
    gap: 13px;
    background: transparent;
    color: var(--studio-ink);
}

.project-media--rights {
    aspect-ratio: 16 / 10;
    background: #ffe7f0;
}

.project-media--rights img {
    object-position: center 40%;
}

.country-tools {
    margin-top: clamp(82px, 10vw, 150px);
    padding-top: clamp(44px, 6vw, 78px);
    border-top: 2px solid var(--civil);
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    gap: 8px clamp(28px, 5vw, 88px);
    align-items: end;
    margin-bottom: clamp(44px, 6vw, 80px);
}

.section-heading .eyebrow {
    grid-column: 1 / -1;
    color: var(--civil);
}

.section-heading h3 {
    margin-bottom: 0;
}

.country-tools__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 76px);
}

.country-tools__grid--unified {
    grid-template-columns: minmax(0, 1fr);
}

.country-preview {
    display: grid;
    gap: 28px;
    align-content: start;
}

.country-preview--unified {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    align-items: center;
    gap: clamp(34px, 5vw, 76px);
    padding: clamp(18px, 2.5vw, 34px);
    border: 1px solid rgba(138, 51, 77, 0.22);
    border-radius: 30px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.86), rgba(255, 242, 246, 0.7)),
        var(--civil-soft);
    box-shadow: 0 28px 80px rgba(70, 42, 53, 0.08);
    content-visibility: auto;
    contain-intrinsic-size: 760px;
}

.country-preview--unified .country-preview__media {
    height: auto;
    aspect-ratio: 5 / 3;
}

.country-preview--unified .country-preview__copy {
    padding: clamp(8px, 1.5vw, 22px);
}

.country-preview__media {
    height: clamp(350px, 43vw, 560px);
    overflow: hidden;
    border: 1px solid rgba(45, 41, 38, 0.16);
    border-radius: 24px;
    background: #edf3fa;
    box-shadow: 0 22px 60px rgba(45, 41, 38, 0.09);
}

.country-preview__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.country-preview__copy h4 {
    margin: 15px 0 16px;
    font: 700 clamp(1.35rem, 2.1vw, 2.1rem)/1.25 var(--font-reading);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.country-preview__copy > p:not(.project-status) {
    margin: 0;
    color: #514c48;
    font-size: 0.98rem;
    line-height: 1.75;
    text-wrap: pretty;
}

.country-preview__copy > p + p {
    margin-top: 13px;
}

.country-preview__lead {
    color: var(--studio-ink) !important;
    font-weight: 700;
}

.safety-note,
.preview-boundary {
    padding-top: 14px;
    border-top: 1px solid var(--studio-line);
    font-family: var(--font-mono);
    font-size: 0.75rem !important;
    letter-spacing: 0.025em;
}

.project-media--voice {
    aspect-ratio: 16 / 9;
    background: #f4efe6;
}

.project-media--voice img {
    object-fit: cover;
    object-position: left top;
}

.project-feature--duet .project-copy {
    grid-column: span 5;
}

.project-feature--duet .project-media {
    grid-column: span 7;
}

.project-media--duet {
    aspect-ratio: 16 / 9;
    background: #090a1a;
}

.project-media--duet img {
    object-fit: contain;
}

.project-media--roulette {
    aspect-ratio: 16 / 10;
    background: #0d0d1a;
}

.project-media--roulette img {
    object-position: center top;
}

.hci-note {
    display: grid;
    grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
    gap: 28px;
    margin-top: clamp(72px, 9vw, 132px);
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid rgba(8, 123, 131, 0.28);
    border-radius: 22px;
    background: var(--hci-soft);
}

.hci-note__label {
    color: var(--hci);
    font: 700 11px/1.5 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hci-note p {
    max-width: 70ch;
    margin: 0;
    color: #374d4d;
    font-size: clamp(1rem, 1.35vw, 1.17rem);
    line-height: 1.75;
}

.workbench-signal {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: clamp(34px, 6vw, 96px);
    margin-top: clamp(82px, 10vw, 150px);
    padding-block: clamp(52px, 7vw, 96px);
    border-top: 1px solid var(--studio-line);
    border-bottom: 1px solid var(--studio-line);
    content-visibility: auto;
    contain-intrinsic-size: 620px;
}

.workbench-signal--lag {
    padding: clamp(36px, 5vw, 68px);
    border: 1px solid rgba(102, 93, 137, 0.24);
    border-radius: 24px;
    background:
        linear-gradient(118deg, rgba(250, 249, 246, 0.5), rgba(250, 249, 246, 0.82)),
        url("../_assets/studio-signal-folio/studio-workbench-feed-v1.webp") center / cover no-repeat;
    box-shadow: 0 24px 64px rgba(67, 58, 84, 0.1);
}

.workbench-signal__copy {
    grid-column: span 5;
}

.workbench-signal__copy .preview-boundary {
    max-width: 56ch;
    margin: 24px 0 0;
    color: #514c48;
}

.project-media--lag {
    grid-column: span 7;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    background: #100b1c;
}

.project-media--lag img {
    object-position: center top;
}

.room-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: clamp(92px, 12vw, 174px);
    padding: 27px clamp(24px, 4vw, 52px);
    border: 1px solid rgba(86, 76, 66, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(rgba(250, 249, 246, 0.36), rgba(250, 249, 246, 0.54)),
        url("../_assets/studio-signal-folio/studio-category-switch-v1.webp") center / cover no-repeat;
    box-shadow: 0 16px 40px rgba(84, 67, 49, 0.08);
    font: 700 10px/1.4 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.room-switcher > span {
    margin-right: auto;
    color: var(--studio-muted);
}

.room-switcher a {
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: var(--room-accent);
    text-decoration: none;
}

/* Shared doorway-to-room transition. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    mix-blend-mode: normal;
}

::view-transition-group(studio-portal) {
    z-index: 60;
    animation-duration: 660ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(studio-portal),
::view-transition-new(studio-portal) {
    height: 100%;
    overflow: clip;
    border-radius: 28px;
    mix-blend-mode: normal;
}

.no-view-transitions .studio-room.is-active .room-surface {
    animation: room-reveal 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: opacity, transform;
}

@keyframes room-reveal {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 1120px) {
    .studio-opening {
        grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    }

    .chirabi-portal {
        grid-template-columns: minmax(280px, 1.25fr) minmax(190px, 0.75fr);
    }

    .chirabi-portal__room {
        min-height: 280px;
    }

    .category-deck {
        grid-template-columns: minmax(230px, 0.85fr) minmax(350px, 1.25fr);
    }

    .project-feature {
        gap: 38px;
    }
}

@media (max-width: 820px) {
    .terminal-frame {
        inset: 8px;
        border-radius: 8px;
    }

    .frame-label {
        display: none;
    }

    .studio-landing {
        padding: 32px 22px 46px;
    }

    .studio-landing::before {
        background-position: 58% top;
        background-size: auto 100%;
        opacity: 0.58;
    }

    .studio-masthead {
        align-items: flex-start;
    }

    .brand-anchor {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 74px;
        padding: 8px 22px 8px 9px;
        background-position: 40% center;
    }

    .brand-anchor__image {
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

    .brand-anchor__copy strong {
        font-size: 15px;
    }

    .brand-anchor__copy span {
        display: none;
    }

    .portal-link {
        font-size: 9px;
    }

    .studio-main {
        padding-top: 32px;
    }

    .studio-opening {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .chirabi-portal {
        grid-template-columns: 1fr;
        grid-template-areas:
            "room"
            "copy";
        min-height: 0;
        margin-bottom: 0;
        border-radius: 18px 18px 11px 11px;
    }

    .chirabi-portal__room {
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: 10px 10px 5px 5px;
    }

    .chirabi-portal__walker {
        width: clamp(118px, 30vw, 190px);
    }

    .chirabi-portal__copy {
        padding: 27px 22px 30px;
    }

    .chirabi-portal__copy strong {
        max-width: 12ch;
        font-size: clamp(1.9rem, 8vw, 3.2rem);
    }

    .chirabi-portal__summary {
        max-width: 48ch;
    }

    .chirabi-portal__enter {
        width: 86px;
        height: 86px;
        padding: 18px;
        font-size: 9px;
    }

    .chirabi-portal__enter-arrow {
        right: 18px;
        bottom: 15px;
    }

    .studio-intro {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 0;
        padding: 36px 26px;
        background-position: 54% center;
        background-size: auto 100%;
    }

    .studio-intro h1 {
        max-width: 12ch;
        font-size: clamp(2.35rem, 11vw, 4.3rem);
    }

    .studio-intro__lede {
        font-size: 0.98rem;
    }

    .category-deck {
        display: flex;
        min-height: 0;
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
    }

    .category-door {
        --door-y: 0px;
        min-height: 390px;
        padding: 25px;
        border-radius: 22px;
    }

    .category-door--civil {
        order: 1;
    }

    .category-door--hci {
        order: 2;
    }

    .category-door:hover,
    .category-door:focus-visible {
        transform: translateY(-4px);
    }

    .category-door__title {
        font-size: clamp(1.9rem, 8vw, 2.8rem);
    }

    .door-window {
        height: 148px;
        min-height: 148px;
    }

    .studio-footer {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 52px;
    }

    .room-surface {
        padding: 28px 22px 66px;
    }

    .room-masthead {
        grid-template-columns: 1fr auto;
    }

    .room-masthead__label {
        display: none;
    }

    .room-masthead__status {
        font-size: 8px;
    }

    .room-main {
        padding-top: 62px;
    }

    .room-hero {
        grid-template-columns: 1fr;
        gap: 23px;
        margin-bottom: 74px;
    }

    .room-hero .eyebrow,
    .room-rule {
        grid-column: auto;
    }

    .room-hero h2 {
        font-size: clamp(3rem, 14vw, 5.25rem);
    }

    .project-feature {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-block: 44px;
    }

    .project-media,
    .project-copy,
    .workbench-signal__copy,
    .project-media--lag,
    .project-feature--duet .project-copy,
    .project-feature--duet .project-media {
        grid-column: auto;
    }

    .workbench-signal {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .workbench-signal--lag {
        padding: 24px;
        background-position: 62% center;
    }

    .project-media--lag {
        grid-row: 1;
    }

    .project-feature--duet .project-media {
        grid-row: 1;
    }

    .section-heading,
    .country-tools__grid {
        grid-template-columns: 1fr;
    }

    .section-heading .eyebrow {
        grid-column: auto;
    }

    .country-preview__media {
        height: min(122vw, 560px);
    }

    .country-preview--unified {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .country-preview--unified .country-preview__media {
        height: auto;
    }

    .hci-note {
        grid-template-columns: 1fr;
    }

    .room-switcher {
        align-items: flex-start;
        flex-direction: column;
        background-position: 36% center;
        background-size: auto 100%;
    }

    .room-switcher > span {
        margin: 0 0 8px;
    }
}

@media (max-width: 470px) {
    .studio-masthead {
        gap: 10px;
    }

    .brand-anchor {
        max-width: calc(100% - 48px);
        padding-right: 14px;
    }

    .brand-anchor__copy strong {
        max-width: 10ch;
        line-height: 1.25;
    }

    .portal-link {
        flex: 0 0 38px;
        width: 38px;
        min-height: 38px;
        justify-content: center;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 50%;
        white-space: nowrap;
    }

    .portal-link__label {
        display: none;
    }

    .studio-intro h1 {
        max-width: none;
        font-size: clamp(2.05rem, 10.5vw, 3.15rem);
    }

    .chirabi-portal__copy strong {
        font-size: clamp(1.75rem, 9.5vw, 2.8rem);
    }

    .chirabi-portal__enter {
        width: 82px;
        height: 82px;
        padding: 17px;
    }

    .category-door {
        min-height: 370px;
    }

    .category-door__topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .door-window--duet {
        grid-template-columns: 1fr;
    }

    .door-window--duet img:last-child {
        display: none;
    }

    .room-hero h2 {
        font-size: clamp(2.7rem, 13vw, 4.1rem);
    }

    .project-copy h3,
    .section-heading h3 {
        font-size: clamp(1.65rem, 8vw, 2.35rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .category-door,
    .category-door:hover,
    .category-door:focus-visible {
        transform: none;
    }

    .chirabi-portal,
    .chirabi-portal:hover,
    .chirabi-portal:focus-visible {
        transform: none;
    }

    .chirabi-portal__walker,
    .chirabi-portal__sprite,
    .chirabi-portal-flight {
        animation: none !important;
        transition: none !important;
    }

    .chirabi-portal-flight::after {
        transition: none !important;
    }
}

/* DIRECT APP SHELF PORT FROM ATELIER: START */
@keyframes frame-slide {
      to { background-position: 0 0, 240% 0; }
    }

    @keyframes color-oscillate {
      0%, 100% { filter: hue-rotate(0deg) saturate(1); }
      50% { filter: hue-rotate(38deg) saturate(1.28); }
    }

    @keyframes signal-sweep {
      0%, 18% { transform: translateX(0); opacity: 0; }
      36%, 62% { opacity: .85; }
      100% { transform: translateX(360%); opacity: 0; }
    }

    @keyframes badge-wave {
      0%, 100% { transform: scaleY(.66); opacity: .62; }
      48% { transform: scaleY(1.18); opacity: 1; }
    }

    body.studio-design-live {
      --studio-bg: #faf9f6;
      --studio-ink: #2d2926;
      --studio-muted: #625d59;
      --studio-line: rgba(45, 41, 38, 0.16);
      --civil: #8a334d;
      --civil-soft: #f9e8ed;
      --hci: #077780;
      --hci-soft: #e5f5f3;
      --chirabi-sage: #758b78;
      --chirabi-brass: #ad7c43;
      --source-display: "Dela Gothic One", sans-serif;
      --source-reading: "Noto Serif JP", serif;
      --source-mono: "Space Mono", monospace;
      --z-content: 10;
      --z-frame: 80;
      --z-scanlines: 90;
      position: relative;
      min-height: 100dvh;
      overflow: hidden;
      isolation: isolate;
      background-color: var(--studio-bg);
      color: var(--studio-ink);
      font-family: var(--font-reading);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    body.studio-design-live * { box-sizing: border-box; }

    body.studio-design-live img {
      display: block;
      max-width: 100%;
    }

    body.studio-design-live a {
      color: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    body.studio-design-live::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: var(--z-scanlines);
      pointer-events: none;
      background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.02) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.01), rgba(0, 255, 0, 0.005), rgba(0, 0, 255, 0.01));
      background-size: 100% 4px, 3px 100%;
      transform: translate3d(0, var(--scan-scroll-y), 0);
      will-change: transform;
    }

    body.studio-design-live .grid-bg {
      position: absolute;
      inset: -40px 0;
      z-index: 1;
      opacity: 0.1;
      pointer-events: none;
      background-image: radial-gradient(#000 1px, transparent 1px);
      background-size: 40px 40px;
      transform: translate3d(0, var(--dot-scroll-y), 0);
      will-change: transform;
    }

    body.studio-design-live .terminal-frame {
      position: absolute;
      inset: 20px;
      z-index: var(--z-frame);
      border: 1px solid rgba(45, 41, 38, 0.05);
      border-radius: 12px;
      pointer-events: none;
    }

    body.studio-design-live .frame-label {
      position: absolute;
      color: rgba(45, 41, 38, 0.58);
      font-family: var(--font-mono);
      font-size: 10px;
      line-height: 1.4;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    body.studio-design-live .frame-label span {
      display: block;
      margin-top: 2px;
      font-size: 8px;
      letter-spacing: 0.1em;
      opacity: 0.72;
    }

    body.studio-design-live .label-tl {
      top: 22px;
      left: 12px;
      max-height: calc(100dvh - 84px);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    body.studio-design-live .label-br {
      right: 12px;
      bottom: 22px;
      max-height: calc(100dvh - 84px);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    body.studio-design-live .studio-landing {
      position: relative;
      z-index: var(--z-content);
      display: flex;
      min-height: 100dvh;
      flex-direction: column;
      padding: 65px 94px 72px;
      isolation: isolate;
    }

    body.studio-design-live .studio-landing::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 0.72;
      filter: saturate(0.84) contrast(0.985);
      background: none;
    }

    body.studio-design-live .studio-masthead,
    body.studio-design-live .studio-main,
    body.studio-design-live .studio-footer {
      width: min(100%, 1480px);
      margin-inline: auto;
    }

    body.studio-design-live .studio-masthead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    body.studio-design-live .brand-anchor {
      position: relative;
      display: inline-flex;
      min-width: min(520px, 56%);
      min-height: 86px;
      align-items: center;
      gap: 15px;
      padding: 14px 42px 14px 16px;
      border-radius: 18px;
      color: var(--studio-ink);
      text-decoration: none;
      filter: drop-shadow(0 12px 20px rgba(84, 67, 49, 0.07));
      background:
        linear-gradient(90deg, rgba(250, 249, 246, 0.12), rgba(250, 249, 246, 0.42)),
        url("../_assets/studio-signal-folio/studio-logotype-plate-v1.webp") center / cover no-repeat;
      transition: filter 260ms ease-out, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.studio-design-live .brand-anchor:hover,
    body.studio-design-live .brand-anchor:focus-visible {
      filter: drop-shadow(0 16px 26px rgba(84, 67, 49, 0.12));
      transform: translateY(-2px);
    }

    body.studio-design-live .brand-anchor__image {
      width: 62px;
      height: 62px;
      flex: 0 0 auto;
      overflow: hidden;
      border: 1px solid rgba(45, 41, 38, 0.12);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 13px 30px rgba(45, 41, 38, 0.08);
    }

    body.studio-design-live .brand-anchor__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 47%;
    }

    body.studio-design-live .brand-anchor__copy {
      display: grid;
      gap: 5px;
    }

    body.studio-design-live .brand-anchor__copy strong {
      font: 400 18px/1.2 var(--font-display);
      letter-spacing: 0;
    }

    body.studio-design-live .brand-anchor__copy span {
      color: var(--studio-muted);
      font: 400 10px/1.5 var(--font-mono);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    body.studio-design-live .portal-link {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 0;
      border-bottom: 1px solid currentColor;
      font: 700 11px/1 var(--font-mono);
      letter-spacing: 0.08em;
      text-decoration: none;
      text-transform: uppercase;
      transition: color 180ms ease-out, gap 180ms ease-out;
    }

    body.studio-design-live .portal-link:hover {
      color: var(--hci);
      gap: 13px;
    }

    body.studio-design-live .studio-main {
      display: flex;
      flex-direction: column;
      gap: 32px;
      min-width: 0;
      flex: 1;
      padding-top: 28px;
    }

    body.studio-design-live .studio-opening {
      display: grid;
      grid-template-columns: minmax(390px, 0.95fr) minmax(540px, 1.05fr);
      gap: 18px;
      align-items: stretch;
    }

    body.studio-design-live .eyebrow {
      margin: 0;
      color: var(--studio-muted);
      font: 700 11px/1.5 var(--font-mono);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    body.studio-design-live .studio-intro {
      position: relative;
      order: 1;
      display: grid;
      grid-template-columns: 1fr;
      align-content: center;
      gap: 12px;
      margin-bottom: 0;
      overflow: hidden;
      padding: 24px;
      border-radius: 24px;
      background:
        linear-gradient(115deg, rgba(250, 249, 246, 0.08), rgba(250, 249, 246, 0.42)),
        url("../_assets/studio-signal-folio/studio-directory-band-v1.webp") center / cover no-repeat;
      box-shadow: 0 18px 46px rgba(84, 67, 49, 0.08);
      isolation: isolate;
    }

    body.studio-design-live .studio-intro h1 {
      max-width: 900px;
      margin: 14px 0 0;
      font: 400 36px/.98 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .studio-intro__lede {
      max-width: 52ch;
      margin: 0 0 5px;
      color: #514c48;
      font-size: 13px;
      line-height: 1.45;
      text-wrap: pretty;
    }

    body.studio-design-live .chirabi-portal {
      position: relative;
      order: 2;
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(240px, 0.9fr);
      grid-template-areas: "room copy";
      gap: 0;
      min-height: 190px;
      margin-bottom: 0;
      padding: 8px;
      overflow: hidden;
      border: 1px solid rgba(117, 139, 120, 0.5);
      border-radius: 24px 24px 14px 14px;
      background: rgba(255, 250, 240, 0.78);
      box-shadow: 0 28px 78px rgba(99, 78, 58, 0.14), inset 0 1px rgba(255, 255, 255, 0.9);
      color: var(--studio-ink);
      text-decoration: none;
      isolation: isolate;
      transition: border-color 240ms ease-out, box-shadow 360ms ease-out, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.studio-design-live .chirabi-portal::before,
    body.studio-design-live .chirabi-portal::after {
      content: "";
      position: absolute;
      z-index: 8;
      width: 36px;
      height: 36px;
      pointer-events: none;
    }

    body.studio-design-live .chirabi-portal::before {
      top: -1px;
      left: -1px;
      border-top: 2px solid var(--chirabi-brass);
      border-left: 2px solid var(--chirabi-brass);
    }

    body.studio-design-live .chirabi-portal::after {
      right: -1px;
      bottom: -1px;
      border-right: 2px solid var(--chirabi-brass);
      border-bottom: 2px solid var(--chirabi-brass);
    }

    body.studio-design-live .chirabi-portal:hover,
    body.studio-design-live .chirabi-portal:focus-visible {
      border-color: rgba(117, 139, 120, 0.82);
      box-shadow: 0 34px 92px rgba(99, 78, 58, 0.2), inset 0 1px rgba(255, 255, 255, 0.95);
      transform: translateY(-5px);
    }

    body.studio-design-live .chirabi-portal__room {
      position: relative;
      grid-area: room;
      min-width: 0;
      min-height: 174px;
      overflow: hidden;
      border-radius: 15px 7px 7px 7px;
      background: #efe3ce;
      isolation: isolate;
    }

    body.studio-design-live .chirabi-portal__background {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      user-select: none;
      transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 400ms ease-out;
    }

    body.studio-design-live .chirabi-portal:hover .chirabi-portal__background,
    body.studio-design-live .chirabi-portal:focus-visible .chirabi-portal__background {
      transform: scale(1.018);
      filter: saturate(1.04);
    }

    body.studio-design-live .chirabi-portal__atmosphere {
      position: absolute;
      inset: 0;
      z-index: 2;
      box-shadow: inset 0 0 70px rgba(95, 68, 42, 0.09);
      pointer-events: none;
    }

    body.studio-design-live .chirabi-portal__walker {
      position: absolute;
      top: var(--portal-chirabi-y);
      left: var(--portal-chirabi-x);
      z-index: 5;
      width: 168px;
      aspect-ratio: 1;
      pointer-events: none;
      transform: translate(-50%, -100%);
      transition:
        left var(--portal-travel-duration) cubic-bezier(0.45, 0.05, 0.18, 1),
        top var(--portal-travel-duration) cubic-bezier(0.45, 0.05, 0.18, 1);
      will-change: left, top;
    }

    body.studio-design-live .chirabi-portal__sprite {
      position: absolute;
      inset: 0;
      background-image: url("../_assets/chirabi/chirabi-loop-breathe.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 400% 400%;
      filter: drop-shadow(0 10px 8px rgba(97, 77, 56, 0.2));
      image-rendering: pixelated;
      transform: scaleX(var(--portal-flip, 1));
      transform-origin: center bottom;
    }

    body.studio-design-live .chirabi-portal__walker.is-walking .chirabi-portal__sprite {
      animation: chirabi-portal-step 460ms ease-in-out infinite;
    }

    @keyframes chirabi-portal-step {
      0%, 100% { margin-top: 0; rotate: -0.35deg; }
      46% { margin-top: -6px; rotate: 0.5deg; }
      72% { margin-top: -2px; rotate: 0deg; }
    }

    body.studio-design-live .chirabi-portal__copy {
      position: relative;
      z-index: 3;
      grid-area: copy;
      display: flex;
      min-width: 0;
      flex-direction: column;
      justify-content: center;
      padding: 18px;
    }

    body.studio-design-live .chirabi-portal__copy strong {
      display: block;
      margin-top: 12px;
      font: 400 20px/1.03 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .chirabi-portal__summary {
      display: block;
      max-width: 39ch;
      padding-right: 58px;
      margin-top: 8px;
      color: #514c48;
      font-size: 11.5px;
      line-height: 1.35;
      text-wrap: pretty;
    }

    body.studio-design-live .chirabi-portal__enter {
      position: absolute;
      display: grid;
      width: 52px;
      height: 52px;
      align-items: center;
      align-self: flex-start;
      justify-items: center;
      right: 16px;
      bottom: 14px;
      margin-top: 0;
      padding: 10px;
      border-radius: 50%;
      background: url("../_assets/studio-signal-folio/studio-enter-seal-v1.webp") center / 168% no-repeat;
      color: #4e4a43;
      filter: drop-shadow(0 10px 16px rgba(99, 78, 58, 0.14));
      font: 700 7px/1.3 var(--font-mono);
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
      transform: rotate(-1.5deg);
      transition: filter 240ms ease-out, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.studio-design-live .chirabi-portal__enter-label { max-width: 8ch; }

    body.studio-design-live .chirabi-portal__enter-arrow {
      position: absolute;
      right: 11px;
      bottom: 9px;
      color: var(--chirabi-sage);
      font-size: 14px;
      transition: transform 220ms ease-out;
    }

    body.studio-design-live .chirabi-portal:hover .chirabi-portal__enter,
    body.studio-design-live .chirabi-portal:focus-visible .chirabi-portal__enter {
      filter: drop-shadow(0 14px 21px rgba(99, 78, 58, 0.2));
      transform: rotate(1.5deg) scale(1.035);
    }

    body.studio-design-live .chirabi-portal:hover .chirabi-portal__enter-arrow,
    body.studio-design-live .chirabi-portal:focus-visible .chirabi-portal__enter-arrow {
      transform: translateX(5px);
    }

    body.studio-design-live .category-deck {
      display: grid;
      grid-template-columns: minmax(300px, 0.88fr) minmax(420px, 1.12fr);
      align-items: stretch;
      gap: 24px;
      min-height: 430px;
      margin-top: 28px;
    }

    body.studio-design-live .category-door {
      --door-y: 0px;
      --door-art-position: center;
      position: relative;
      display: flex;
      min-width: 0;
      flex-direction: column;
      justify-content: space-between;
      gap: 26px;
      overflow: hidden;
      padding: 32px;
      border: 1px solid var(--door-line);
      border-radius: 28px;
      background:
        linear-gradient(145deg, var(--door-wash), rgba(250, 249, 246, 0.76) 62%, rgba(255, 255, 255, 0.66)),
        url("../_assets/studio-signal-folio/studio-category-surface-v1.webp") var(--door-art-position) / cover no-repeat,
        var(--door-bg);
      box-shadow: 0 20px 55px rgba(45, 41, 38, 0.09);
      color: var(--studio-ink);
      text-decoration: none;
      transform: translateY(var(--door-y));
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease-out, border-color 240ms ease-out;
      contain: paint;
    }

    body.studio-design-live .category-door::before {
      content: "";
      position: absolute;
      top: 22px;
      right: 22px;
      width: 13px;
      height: 13px;
      border: 1px solid rgba(111, 74, 30, 0.42);
      border-radius: 50%;
      background: radial-gradient(circle at 36% 30%, #fff4c9 0 8%, #d4a459 25%, #8f642e 68%, #6f4c27 100%);
      box-shadow: 0 2px 0 rgba(255, 255, 255, 0.72) inset, 0 3px 8px rgba(83, 57, 28, 0.2);
      transform: scale(0.82);
      transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.studio-design-live .category-door:hover,
    body.studio-design-live .category-door:focus-visible {
      border-color: color-mix(in srgb, var(--door-accent) 62%, var(--studio-ink));
      box-shadow: 0 28px 70px rgba(45, 41, 38, 0.14);
      transform: translateY(calc(var(--door-y) - 7px));
    }

    body.studio-design-live .category-door:hover::before,
    body.studio-design-live .category-door:focus-visible::before {
      transform: scale(1.14) rotate(14deg);
    }

    body.studio-design-live .category-door--civil {
      --door-bg: var(--civil-soft);
      --door-wash: rgba(249, 232, 237, 0.78);
      --door-line: rgba(138, 51, 77, 0.25);
      --door-accent: var(--civil);
      --door-art-position: 42% center;
    }

    body.studio-design-live .category-door--hci {
      --door-bg: var(--hci-soft);
      --door-wash: rgba(229, 245, 243, 0.76);
      --door-line: rgba(8, 123, 131, 0.25);
      --door-accent: var(--hci);
      --door-art-position: 52% center;
    }

    body.studio-design-live .category-door__topline,
    body.studio-design-live .category-door__enter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      font: 700 10px/1.4 var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    body.studio-design-live .category-door__topline { color: #554f4b; }
    body.studio-design-live .category-door__copy { display: grid; gap: 15px; }

    body.studio-design-live .category-door__title {
      font: 400 47px/1.04 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .category-door__summary {
      max-width: 39ch;
      color: #4f4945;
      font-size: 17px;
      line-height: 1.62;
      text-wrap: pretty;
    }

    body.studio-design-live .category-door__enter {
      justify-content: flex-start;
      color: var(--door-accent);
    }

    body.studio-design-live .category-door__enter span {
      font-size: 17px;
      transition: transform 220ms ease-out;
    }

    body.studio-design-live .category-door:hover .category-door__enter span,
    body.studio-design-live .category-door:focus-visible .category-door__enter span {
      transform: translate(3px, -3px);
    }

    body.studio-design-live .download-dock {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(300px, 1.15fr) auto;
      align-items: center;
      gap: 24px;
      min-height: 180px;
      margin-top: 30px;
      padding: 24px 30px;
      overflow: hidden;
      border: 1px solid rgba(8, 123, 131, 0.28);
      border-radius: 24px;
      background:
        linear-gradient(90deg, rgba(229, 245, 243, .9), rgba(255, 250, 240, .82)),
        url("../_assets/studio-signal-folio/studio-workbench-feed-v1.webp") center / cover no-repeat;
      box-shadow: 0 22px 60px rgba(45, 41, 38, 0.09);
      color: var(--studio-ink);
      text-decoration: none;
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease-out, box-shadow 300ms ease-out;
    }

    body.studio-design-live .download-dock::before {
      content: "";
      position: absolute;
      inset: auto 30px 24px 30px;
      height: 22px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, transparent 0 3%, rgba(8, 123, 131, .38) 3% 4%, transparent 4% 8%),
        linear-gradient(90deg, rgba(8, 123, 131, .22), rgba(166, 223, 75, .38), rgba(163, 32, 42, .16));
      background-size: 42px 100%, 100% 100%;
      opacity: .72;
      animation: dock-wave 4.8s linear infinite;
    }

    body.studio-design-live .download-dock:hover,
    body.studio-design-live .download-dock:focus-visible {
      border-color: rgba(8, 123, 131, 0.62);
      box-shadow: 0 32px 74px rgba(45, 41, 38, 0.14);
      transform: translateY(-6px);
    }

    body.studio-design-live .download-dock__kicker {
      display: grid;
      gap: 10px;
      align-content: center;
    }

    body.studio-design-live .download-dock__copy {
      display: grid;
      gap: 10px;
      min-width: 0;
      padding-bottom: 24px;
    }

    body.studio-design-live .download-dock__copy strong {
      font: 400 48px/.98 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .download-dock__copy span {
      max-width: 58ch;
      color: #514c48;
      font-size: 16px;
      line-height: 1.65;
    }

    body.studio-design-live .download-dock__action {
      position: relative;
      z-index: 2;
      display: grid;
      width: 108px;
      height: 108px;
      place-items: center;
      padding: 18px;
      border: 1px solid rgba(8, 123, 131, .36);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255,250,240,.92) 0 52%, rgba(229,245,243,.88) 53%),
        conic-gradient(from 0deg, rgba(8,123,131,.18), rgba(166,223,75,.35), rgba(8,123,131,.18));
      color: var(--hci);
      font: 800 9px/1.3 var(--font-mono);
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
    }

    @keyframes dock-wave {
      to { background-position: 42px 0, 0 0; }
    }

    body.studio-design-live .app-arcade {
      order: 3;
      display: grid;
      gap: 18px;
      margin-top: 0;
    }

    .unused-source-clone--studio-atlas {
      min-height: auto;
      overflow: hidden;
      border: 1px solid rgba(45, 41, 38, .14);
      border-radius: 24px;
      box-shadow: 0 24px 70px rgba(45, 41, 38, .08);
    }

    .unused-source-clone--studio-atlas .studio-landing {
      min-height: auto;
      padding: 44px;
    }

    .unused-source-clone--studio-atlas .studio-main {
      padding-top: 0;
    }

    .unused-source-clone--studio-atlas .app-arcade {
      order: initial;
    }

    .unused-source-clone--studio-atlas .terminal-frame {
      inset: 12px;
    }

    body.studio-design-live .app-arcade__head {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(280px, .42fr);
      gap: 22px;
      align-items: end;
      padding: 24px 28px;
      border: 1px solid rgba(45, 41, 38, .12);
      border-radius: 24px;
      background:
        linear-gradient(110deg, rgba(255,250,240,.76), rgba(229,245,243,.6)),
        url("../_assets/studio-signal-folio/studio-directory-band-v1.webp") center / cover no-repeat;
      box-shadow: 0 18px 46px rgba(84, 67, 49, 0.08);
    }

    body.studio-design-live .app-arcade__head h2 {
      margin: 0;
      font: 400 48px/.98 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .app-arcade__head p:not(.eyebrow) {
      margin: 0;
      color: #514c48;
      font-size: 16px;
      line-height: 1.65;
    }

    body.studio-design-live .app-arcade__grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 16px;
      align-items: stretch;
    }

    body.studio-design-live .landing-projects {
      display: grid;
      gap: 28px;
    }

    body.studio-design-live .landing-projects .project-feature {
      width: min(100%, 1100px);
      margin-inline: auto;
      gap: 48px;
      contain-intrinsic-size: 560px;
    }

    body.studio-design-live .genre-lenses {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      margin: 6px 0 2px;
      padding: 5px 2px 0;
      border-top: 1px solid rgba(45, 41, 38, .14);
      background:
        linear-gradient(90deg, transparent, rgba(229,245,243,.28) 58%, transparent);
      color: var(--studio-muted);
      font: 700 10px/1.4 var(--font-mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    body.studio-design-live .genre-lenses__controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
    }

    body.studio-design-live .genre-lenses button {
      --genre-button-accent: var(--studio-ink);
      appearance: none;
      position: relative;
      cursor: pointer;
      display: inline-flex;
      min-height: 27px;
      align-items: center;
      padding: 5px 9px;
      border: 1px solid color-mix(in srgb, var(--genre-button-accent) 34%, rgba(45, 41, 38, .18));
      border-radius: 8px 3px 8px 3px;
      background:
        linear-gradient(135deg, rgba(255,250,240,.92), color-mix(in srgb, var(--genre-button-accent) 8%, rgba(255,250,240,.88)));
      color: var(--studio-ink);
      box-shadow: 0 2px 0 color-mix(in srgb, var(--genre-button-accent) 24%, transparent), 0 5px 12px rgba(45,41,38,.08);
      font: 800 8px/1 var(--font-mono);
      letter-spacing: .09em;
      text-transform: uppercase;
      transition:
        background-color 180ms ease-out,
        border-color 180ms ease-out,
        color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 180ms ease-out;
    }

    body.studio-design-live .genre-lenses button::before {
      content: "";
      width: 4px;
      height: 4px;
      margin-right: 6px;
      border-radius: 50%;
      background: var(--genre-button-accent);
      box-shadow: 6px 0 0 -1px color-mix(in srgb, var(--genre-button-accent) 58%, transparent);
      transition: transform 180ms ease-out, box-shadow 180ms ease-out;
    }

    body.studio-design-live .genre-lenses button:hover,
    body.studio-design-live .genre-lenses button:focus-visible,
    body.studio-design-live .genre-lenses button[aria-pressed="true"] {
      border-color: var(--genre-button-accent);
      background: var(--studio-ink);
      color: var(--studio-bg);
      box-shadow: 3px 3px 0 var(--genre-button-accent), 0 9px 18px rgba(45,41,38,.14);
      transform: translate(-1px, -2px) rotate(-1deg);
    }

    body.studio-design-live .genre-lenses button:hover::before,
    body.studio-design-live .genre-lenses button:focus-visible::before,
    body.studio-design-live .genre-lenses button[aria-pressed="true"]::before {
      transform: scale(1.15);
      box-shadow: 6px 0 0 -1px var(--genre-button-accent), 0 0 8px var(--genre-button-accent);
    }

    body.studio-design-live .genre-lenses button:focus-visible {
      outline: 2px solid var(--genre-button-accent);
      outline-offset: 3px;
    }

    body.studio-design-live .genre-lenses button[data-genre-jump="#genre-hci"] { --genre-button-accent: var(--hci); }
    body.studio-design-live .genre-lenses button[data-genre-jump="#genre-civil"] { --genre-button-accent: var(--civil); }
    body.studio-design-live .genre-lenses button[data-genre-jump="#genre-games"] { --genre-button-accent: #175a84; }

    body.studio-design-live .genre-lenses button[data-genre-jump="all"] {
      --genre-button-accent: var(--chirabi-brass);
    }

    body.studio-design-live .genre-shelf {
      --genre-accent: var(--hci);
      display: grid;
      gap: 28px;
      padding: 40px 0 48px;
      border-top: 2px solid color-mix(in srgb, var(--genre-accent) 68%, rgba(45, 41, 38, .16));
      outline: none;
      scroll-margin-top: 120px;
    }

    body.studio-design-live .genre-shelf + .genre-shelf {
      margin-top: 18px;
    }

    body.studio-design-live .genre-shelf__head {
      display: grid;
      grid-template-columns: minmax(0, .58fr) minmax(260px, .42fr);
      gap: 22px;
      align-items: end;
      padding-inline: 6px;
    }

    body.studio-design-live .genre-shelf__head h3 {
      margin: 0;
      max-width: none;
      color: var(--studio-ink);
      font: 400 12px/1.3 var(--font-display);
      letter-spacing: 0;
      text-wrap: nowrap;
      white-space: nowrap;
    }

    body.studio-design-live .genre-shelf__head p:not(.eyebrow) {
      margin: 0;
      max-width: 54ch;
      color: #514c48;
      font-size: 16px;
      line-height: 1.65;
    }

    body.studio-design-live .genre-shelf--civil {
      --genre-accent: var(--civil);
    }

    body.studio-design-live .genre-shelf--games {
      --genre-accent: #175a84;
    }

    body.studio-design-live .genre-shelf.is-highlighted {
      animation: genre-shelf-highlight 1200ms ease-out;
    }

    body.studio-design-live .landing-feature {
      --room-accent: var(--hci);
      gap: 48px;
      padding: 44px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--room-accent) 25%, rgba(45, 41, 38, .14));
      border-radius: 30px;
      background:
        linear-gradient(115deg, rgba(255,250,240,.88), rgba(250,249,246,.92)),
        url("../_assets/studio-signal-folio/studio-category-surface-v1.webp") center / cover no-repeat;
      box-shadow: 0 28px 78px rgba(45, 41, 38, .1);
      transition:
        border-color 240ms ease-out,
        box-shadow 300ms ease-out,
        transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.studio-design-live .landing-feature:hover,
    body.studio-design-live .landing-feature:focus-within {
      border-color: color-mix(in srgb, var(--room-accent) 52%, var(--studio-ink));
      box-shadow: 0 34px 92px rgba(45, 41, 38, .14);
      transform: translateY(-4px);
    }

    body.studio-design-live .landing-feature--civil {
      --room-accent: var(--civil);
      background:
        linear-gradient(115deg, rgba(255,246,248,.9), rgba(250,249,246,.94)),
        url("../_assets/studio-signal-folio/studio-category-surface-v1.webp") center / cover no-repeat;
    }

    body.studio-design-live .landing-feature--game {
      --room-accent: #175a84;
      background:
        linear-gradient(115deg, rgba(229,239,247,.9), rgba(250,249,246,.92)),
        url("../_assets/studio-signal-folio/studio-workbench-feed-v1.webp") center / cover no-repeat;
    }

    body.studio-design-live .landing-feature--source {
      --room-accent: #7b9650;
      background:
        linear-gradient(115deg, rgba(244,250,225,.88), rgba(250,249,246,.94)),
        url("../_assets/studio-signal-folio/studio-directory-band-v1.webp") center / cover no-repeat;
    }

    body.studio-design-live .landing-feature .project-action {
      border-color: var(--room-accent);
      background: var(--room-accent);
    }

    body.studio-design-live .landing-feature .project-action:hover,
    body.studio-design-live .landing-feature .project-action:focus-visible {
      background: transparent;
      color: var(--room-accent);
    }

    body.studio-design-live .landing-feature .project-media {
      transition: box-shadow 280ms ease-out, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.studio-design-live .landing-feature:hover .project-media,
    body.studio-design-live .landing-feature:focus-within .project-media {
      box-shadow: 0 30px 76px color-mix(in srgb, var(--room-accent) 18%, transparent);
      transform: translateY(-4px);
    }

    body.studio-design-live .debate-stage,
    body.studio-design-live .marina-stage,
    body.studio-design-live .welfare-stage,
    body.studio-design-live .rights-stage,
    body.studio-design-live .gengo-stage,
    body.studio-design-live .roulette-stage {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
      isolation: isolate;
    }

    body.studio-design-live .debate-stage {
      background:
        linear-gradient(90deg, rgba(219, 250, 239, .9) 0 48%, rgba(255, 248, 214, .94) 52% 100%),
        radial-gradient(circle at 50% 52%, rgba(123, 150, 80, .2), transparent 30%);
    }

    body.studio-design-live .debate-stage::before {
      content: "";
      position: absolute;
      inset: 13px;
      z-index: 1;
      border: 1px solid rgba(45, 41, 38, .18);
      border-radius: 18px;
      background:
        linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(45,41,38,.26) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        repeating-linear-gradient(0deg, transparent 0 21px, rgba(45,41,38,.055) 21px 22px);
      pointer-events: none;
    }

    body.studio-design-live .debate-stage::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      width: 96px;
      height: 96px;
      border: 1px solid rgba(45, 41, 38, .18);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255,250,240,.96) 0 48%, rgba(123,150,80,.18) 49% 100%);
      box-shadow: 0 18px 38px rgba(68, 91, 70, .12);
      transform: translate(-50%, -50%);
    }

    body.studio-design-live .debate-stage__bar {
      position: absolute;
      top: 24px;
      left: 28px;
      right: 28px;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: #384341;
      font: 800 8px/1 var(--font-mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    body.studio-design-live .debate-stage__bar span {
      padding: 7px 9px;
      border: 1px solid rgba(45,41,38,.14);
      border-radius: 999px;
      background: rgba(255,250,240,.72);
    }

    body.studio-design-live .debate-stage__speaker {
      position: absolute;
      z-index: 4;
      bottom: 28px;
      width: min(35%, 170px);
      aspect-ratio: 1;
      background-repeat: no-repeat;
      background-size: 300% 300%;
      image-rendering: pixelated;
      filter: drop-shadow(0 16px 12px rgba(67, 62, 50, .18));
      animation: debate-breathe 3.6s ease-in-out infinite;
    }

    body.studio-design-live .debate-stage__speaker--tsuki {
      left: 9%;
      background-image: url("../_assets/chibi-mascots/gengo-classmates/tsuki_expr.png");
      background-position: 50% 0;
    }

    body.studio-design-live .debate-stage__speaker--selene {
      right: 9%;
      background-image: url("../_assets/chibi-mascots/gengo-classmates/selene_master.png");
      background-position: 50% 0;
      animation-delay: .55s;
    }

    body.studio-design-live .debate-stage__card {
      position: absolute;
      z-index: 5;
      top: 31%;
      width: min(34%, 220px);
      padding: 13px 14px;
      border: 1px solid rgba(45, 41, 38, .14);
      border-radius: 15px;
      background: rgba(255, 250, 240, .82);
      box-shadow: 0 15px 38px rgba(69, 73, 57, .11);
      color: #2d2926;
      font: 700 12px/1.35 var(--font-reading);
      text-wrap: balance;
    }

    body.studio-design-live .debate-stage__card--left { left: 8%; }
    body.studio-design-live .debate-stage__card--right { right: 8%; }

    body.studio-design-live .debate-stage__source {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 6;
      display: grid;
      width: 74px;
      height: 74px;
      place-items: center;
      border: 1px solid rgba(123, 150, 80, .32);
      border-radius: 50%;
      background: rgba(255, 250, 240, .94);
      color: #5c7036;
      font: 800 8px/1.25 var(--font-mono);
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
      transform: translate(-50%, -50%);
    }

    body.studio-design-live .debate-stage__pulse {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 3;
      width: 220px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(123,150,80,.8), transparent);
      transform: translate(-50%, -50%);
      animation: debate-pulse 2.6s ease-in-out infinite;
    }

    body.studio-design-live .marina-stage {
      background:
        radial-gradient(circle at 76% 16%, rgba(255, 120, 188, .36), transparent 22%),
        radial-gradient(circle at 20% 86%, rgba(52, 231, 220, .36), transparent 28%),
        linear-gradient(135deg, #100f29, #152b54 46%, #061522);
      color: #f9fbff;
    }

    body.studio-design-live .marina-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.1) 43% 45%, transparent 46%),
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(52,231,220,.12) 42px 44px),
        repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,120,188,.12) 34px 36px);
      transform: perspective(460px) rotateX(57deg) translateY(78px) scale(1.28);
      transform-origin: center bottom;
    }

    body.studio-design-live .marina-stage::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: 22%;
      z-index: 2;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, #34e7dc, #ff78bc, #fee66d);
      box-shadow: 0 0 22px rgba(52,231,220,.46), 0 0 28px rgba(255,120,188,.34);
      animation: marina-track 3.2s ease-in-out infinite;
    }

    body.studio-design-live .marina-stage__hud {
      position: absolute;
      top: 24px;
      left: 24px;
      right: 24px;
      z-index: 5;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #eafdff;
      font: 800 8px/1 var(--font-mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    body.studio-design-live .marina-stage__hud span {
      padding: 8px 10px;
      border: 1px solid rgba(234,253,255,.28);
      border-radius: 999px;
      background: rgba(6, 15, 34, .46);
      box-shadow: 0 0 18px rgba(52,231,220,.16);
    }

    body.studio-design-live .marina-stage__title {
      position: absolute;
      left: 8%;
      top: 27%;
      z-index: 4;
      max-width: 13ch;
      color: #fff;
      font: 400 42px/.92 var(--font-display);
      letter-spacing: 0;
      text-shadow: 0 0 24px rgba(52,231,220,.26);
      text-wrap: balance;
    }

    body.studio-design-live .marina-stage__sprite {
      position: absolute;
      right: 13%;
      bottom: 17%;
      z-index: 6;
      width: min(26%, 142px);
      aspect-ratio: 1;
      background: url("../_assets/chibi-mascots/gengo-classmates/marina_snap_anim_DESPILL.png") 50% 0 / 300% 300% no-repeat;
      image-rendering: pixelated;
      filter: drop-shadow(0 0 16px rgba(255,120,188,.46)) drop-shadow(0 18px 12px rgba(0,0,0,.28));
      animation: marina-hop 1.75s ease-in-out infinite;
    }

    body.studio-design-live .marina-stage__gate {
      position: absolute;
      right: 9%;
      top: 31%;
      z-index: 3;
      display: grid;
      gap: 8px;
    }

    body.studio-design-live .marina-stage__gate i {
      display: block;
      width: 86px;
      height: 9px;
      border-radius: 999px;
      background: rgba(52,231,220,.72);
      box-shadow: 0 0 16px rgba(52,231,220,.5);
      animation: marina-gate 2.4s ease-in-out infinite;
    }

    body.studio-design-live .marina-stage__gate i:nth-child(2) {
      width: 124px;
      background: rgba(255,120,188,.68);
      animation-delay: .34s;
    }

    body.studio-design-live .marina-stage__gate i:nth-child(3) {
      width: 70px;
      background: rgba(254,230,109,.72);
      animation-delay: .68s;
    }

    body.studio-design-live .welfare-stage {
      background:
        radial-gradient(circle at 18% 24%, rgba(89, 172, 177, .24), transparent 25%),
        radial-gradient(circle at 84% 72%, rgba(163, 32, 42, .16), transparent 28%),
        linear-gradient(135deg, #fff8e9, #edf7f5 52%, #fff3f7);
      color: #243b41;
    }

    body.studio-design-live .welfare-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(8,123,131,.07) 27px 28px),
        repeating-linear-gradient(0deg, transparent 0 25px, rgba(163,32,42,.045) 25px 26px);
    }

    body.studio-design-live .welfare-stage__bar,
    body.studio-design-live .rights-stage__bar,
    body.studio-design-live .gengo-stage__bar,
    body.studio-design-live .roulette-stage__bar {
      position: absolute;
      top: 22px;
      left: 24px;
      right: 24px;
      z-index: 5;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: currentColor;
      font: 800 8px/1 var(--font-mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    body.studio-design-live .welfare-stage__bar span,
    body.studio-design-live .rights-stage__bar span,
    body.studio-design-live .gengo-stage__bar span,
    body.studio-design-live .roulette-stage__bar span {
      padding: 7px 9px;
      border: 1px solid rgba(45,41,38,.15);
      border-radius: 999px;
      background: rgba(255,250,240,.72);
    }

    body.studio-design-live .welfare-stage__sentence {
      position: absolute;
      left: 8%;
      right: 8%;
      top: 25%;
      z-index: 4;
      padding: 17px 20px;
      border: 1px solid rgba(8,123,131,.22);
      border-radius: 18px;
      background: rgba(255,250,240,.88);
      box-shadow: 0 18px 40px rgba(67, 93, 95, .12);
      color: #1f3440;
      font: 400 30px/1.02 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .welfare-stage__route {
      position: absolute;
      left: 11%;
      right: 11%;
      bottom: 24%;
      z-index: 2;
      height: 3px;
      background: linear-gradient(90deg, rgba(8,123,131,.22), rgba(163,32,42,.28), rgba(123,150,80,.34));
    }

    body.studio-design-live .welfare-stage__route::after {
      content: "";
      position: absolute;
      inset: -4px auto -4px 0;
      width: 54px;
      background: linear-gradient(90deg, transparent, rgba(8,123,131,.82), transparent);
      animation: welfare-route 3.2s ease-in-out infinite;
    }

    body.studio-design-live .welfare-stage__node {
      position: absolute;
      bottom: 16%;
      z-index: 4;
      display: grid;
      min-width: 72px;
      gap: 5px;
      padding: 12px 13px;
      border: 1px solid rgba(45,41,38,.13);
      border-radius: 16px;
      background: rgba(255,250,240,.86);
      box-shadow: 0 14px 30px rgba(67, 93, 95, .1);
      color: #40504b;
      font: 800 8px/1.15 var(--font-mono);
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
      animation: welfare-card 4.2s ease-in-out infinite;
    }

    body.studio-design-live .welfare-stage__node strong {
      color: #087b83;
      font-size: 12px;
      letter-spacing: .04em;
    }

    body.studio-design-live .welfare-stage__node--need { left: 10%; }
    body.studio-design-live .welfare-stage__node--office { left: 39%; animation-delay: .48s; }
    body.studio-design-live .welfare-stage__node--paper { right: 10%; animation-delay: .96s; }

    body.studio-design-live .welfare-stage__stamp {
      position: absolute;
      right: 8%;
      top: 53%;
      z-index: 5;
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(163,32,42,.34);
      border-radius: 50%;
      color: #a3202a;
      font: 800 8px/1.25 var(--font-mono);
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
      transform: rotate(-9deg);
    }

    body.studio-design-live .rights-stage {
      background:
        radial-gradient(circle at 78% 18%, rgba(255, 227, 145, .34), transparent 25%),
        linear-gradient(135deg, #fff6f8, #fffaf0 52%, #eaf6f5);
      color: #3d2930;
    }

    body.studio-design-live .rights-stage::before {
      content: "";
      position: absolute;
      inset: 14px;
      z-index: 1;
      border: 1px solid rgba(163,32,42,.16);
      border-radius: 20px;
      background:
        linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(163,32,42,.18) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        repeating-linear-gradient(0deg, transparent 0 24px, rgba(45,41,38,.045) 24px 25px);
    }

    body.studio-design-live .rights-stage__source,
    body.studio-design-live .rights-stage__plain {
      position: absolute;
      top: 27%;
      z-index: 3;
      width: 35%;
      min-height: 42%;
      padding: 18px;
      border: 1px solid rgba(45,41,38,.14);
      border-radius: 18px;
      background: rgba(255,250,240,.86);
      box-shadow: 0 18px 42px rgba(91, 62, 69, .1);
    }

    body.studio-design-live .rights-stage__source { left: 8%; }
    body.studio-design-live .rights-stage__plain { right: 8%; }

    body.studio-design-live .rights-stage__source small,
    body.studio-design-live .rights-stage__plain small {
      display: block;
      margin-bottom: 12px;
      color: #a3202a;
      font: 800 8px/1 var(--font-mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    body.studio-design-live .rights-stage__source span,
    body.studio-design-live .rights-stage__plain span {
      display: block;
      color: #2d2926;
      font: 400 23px/1.03 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .rights-stage__source em,
    body.studio-design-live .rights-stage__plain em {
      display: block;
      margin-top: 13px;
      color: #675a56;
      font: 700 10px/1.5 var(--font-reading);
      font-style: normal;
    }

    body.studio-design-live .rights-stage__arrow {
      position: absolute;
      left: 50%;
      top: 51%;
      z-index: 4;
      width: 64px;
      height: 2px;
      background: #a3202a;
      transform: translate(-50%, -50%);
    }

    body.studio-design-live .rights-stage__arrow::after {
      content: "";
      position: absolute;
      right: -1px;
      top: 50%;
      width: 12px;
      height: 12px;
      border-top: 2px solid #a3202a;
      border-right: 2px solid #a3202a;
      transform: translateY(-50%) rotate(45deg);
    }

    body.studio-design-live .rights-stage__scan {
      position: absolute;
      left: 8%;
      top: 46%;
      z-index: 5;
      width: 35%;
      height: 16px;
      border-radius: 999px;
      background: rgba(255, 218, 90, .36);
      mix-blend-mode: multiply;
      animation: rights-scan 3s ease-in-out infinite;
    }

    body.studio-design-live .gengo-stage {
      background:
        radial-gradient(circle at 18% 82%, rgba(82, 208, 198, .22), transparent 28%),
        radial-gradient(circle at 82% 16%, rgba(255, 218, 103, .25), transparent 25%),
        linear-gradient(135deg, #f8fff8, #fff7df 50%, #eef8ff);
      color: #24343f;
    }

    body.studio-design-live .gengo-stage::before {
      content: "";
      position: absolute;
      left: 7%;
      right: 7%;
      top: 19%;
      height: 42%;
      z-index: 1;
      border: 1px solid rgba(45,41,38,.15);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,250,240,.88), rgba(241,250,237,.86)),
        repeating-linear-gradient(0deg, transparent 0 29px, rgba(45,41,38,.05) 29px 30px);
      box-shadow: 0 22px 48px rgba(67, 78, 54, .1);
    }

    body.studio-design-live .gengo-stage__board {
      position: absolute;
      left: 12%;
      right: 12%;
      top: 27%;
      z-index: 3;
      display: grid;
      gap: 10px;
      color: #263633;
      text-align: center;
    }

    body.studio-design-live .gengo-stage__board strong {
      font: 400 36px/1 var(--font-display);
      letter-spacing: 0;
    }

    body.studio-design-live .gengo-stage__board span {
      justify-self: center;
      padding: 8px 11px;
      border: 1px solid rgba(8,123,131,.18);
      border-radius: 999px;
      background: rgba(255,250,240,.7);
      color: #087b83;
      font: 800 8px/1 var(--font-mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    body.studio-design-live .gengo-stage__teacher {
      position: absolute;
      bottom: 6%;
      z-index: 5;
      width: min(29%, 142px);
      aspect-ratio: 1;
      background-repeat: no-repeat;
      background-size: 300% 300%;
      background-position: 50% 0;
      image-rendering: pixelated;
      filter: drop-shadow(0 16px 12px rgba(76, 69, 48, .18));
      animation: gengo-breathe 3.4s ease-in-out infinite;
    }

    body.studio-design-live .gengo-stage__teacher--tsuki {
      left: 13%;
      background-image: url("../_assets/chibi-mascots/gengo-classmates/tsuki_tea.png");
    }

    body.studio-design-live .gengo-stage__teacher--selene {
      right: 13%;
      background-image: url("../_assets/chibi-mascots/gengo-classmates/selene_master.png");
      animation-delay: .5s;
    }

    body.studio-design-live .gengo-stage__bubble {
      position: absolute;
      bottom: 28%;
      z-index: 6;
      max-width: 190px;
      padding: 10px 12px;
      border: 1px solid rgba(45,41,38,.12);
      border-radius: 16px;
      background: rgba(255,250,240,.86);
      color: #2d2926;
      font: 700 11px/1.32 var(--font-reading);
      text-align: center;
      text-wrap: balance;
    }

    body.studio-design-live .gengo-stage__bubble--left { left: 7%; }
    body.studio-design-live .gengo-stage__bubble--right { right: 7%; }

    body.studio-design-live .gengo-stage__pointer {
      position: absolute;
      left: 50%;
      top: 58%;
      z-index: 4;
      width: 92px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #087b83, transparent);
      transform-origin: left center;
      animation: gengo-pointer 3.8s ease-in-out infinite;
    }

    body.studio-design-live .roulette-stage {
      background:
        radial-gradient(circle at 24% 18%, rgba(255,120,188,.24), transparent 26%),
        radial-gradient(circle at 82% 78%, rgba(52,231,220,.2), transparent 28%),
        linear-gradient(135deg, #151022, #24173b 52%, #0d1928);
      color: #fffaf0;
    }

    body.studio-design-live .roulette-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.045) 25px 26px),
        repeating-linear-gradient(0deg, transparent 0 21px, rgba(52,231,220,.06) 21px 22px);
    }

    body.studio-design-live .roulette-stage__machine {
      position: absolute;
      left: 8%;
      right: 8%;
      top: 24%;
      z-index: 3;
      display: grid;
      gap: 12px;
      padding: 18px;
      border: 1px solid rgba(255,250,240,.18);
      border-radius: 20px;
      background: rgba(6, 6, 18, .62);
      box-shadow: 0 22px 52px rgba(0,0,0,.28), 0 0 24px rgba(52,231,220,.12);
    }

    body.studio-design-live .roulette-stage__reels {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    body.studio-design-live .roulette-stage__reels span {
      display: grid;
      min-height: 54px;
      place-items: center;
      border: 1px solid rgba(52,231,220,.24);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,250,240,.95), rgba(229,245,243,.84));
      color: #151022;
      font: 800 9px/1.25 var(--font-mono);
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
      animation: roulette-reel 3.6s steps(1, end) infinite;
    }

    body.studio-design-live .roulette-stage__reels span:nth-child(2) { animation-delay: .3s; }
    body.studio-design-live .roulette-stage__reels span:nth-child(3) { animation-delay: .6s; }

    body.studio-design-live .roulette-stage__readme {
      display: grid;
      gap: 5px;
      padding: 12px 14px;
      border-left: 3px solid #34e7dc;
      background: rgba(255,250,240,.08);
      color: #f8fff8;
      font: 700 11px/1.45 var(--font-mono);
      letter-spacing: .03em;
    }

    body.studio-design-live .roulette-stage__cursor {
      display: inline-block;
      width: 7px;
      height: 13px;
      margin-left: 4px;
      background: #34e7dc;
      vertical-align: -2px;
      animation: roulette-cursor 1s steps(1, end) infinite;
    }

    body.studio-design-live .debate-stage--tile,
    body.studio-design-live .marina-stage--tile,
    body.studio-design-live .welfare-stage--tile,
    body.studio-design-live .rights-stage--tile,
    body.studio-design-live .gengo-stage--tile,
    body.studio-design-live .roulette-stage--tile {
      min-height: 150px;
    }

    body.studio-design-live .debate-stage--tile .debate-stage__card {
      top: 37%;
      padding: 8px 9px;
      font-size: 9px;
    }

    body.studio-design-live .debate-stage--tile .debate-stage__speaker {
      bottom: 14px;
      width: min(31%, 92px);
    }

    body.studio-design-live .debate-stage--tile .debate-stage__source {
      width: 52px;
      height: 52px;
      font-size: 6px;
    }

    body.studio-design-live .marina-stage--tile .marina-stage__title {
      top: 30%;
      font-size: 25px;
    }

    body.studio-design-live .marina-stage--tile .marina-stage__sprite {
      width: min(29%, 92px);
    }

    body.studio-design-live .welfare-stage--tile .welfare-stage__bar,
    body.studio-design-live .rights-stage--tile .rights-stage__bar,
    body.studio-design-live .gengo-stage--tile .gengo-stage__bar,
    body.studio-design-live .roulette-stage--tile .roulette-stage__bar {
      left: 14px;
      right: 14px;
      top: 14px;
    }

    body.studio-design-live .welfare-stage--tile .welfare-stage__sentence {
      top: 30%;
      padding: 11px 12px;
      font-size: 21px;
    }

    body.studio-design-live .welfare-stage--tile .welfare-stage__node {
      min-width: 54px;
      padding: 8px 9px;
      font-size: 6px;
    }

    body.studio-design-live .welfare-stage--tile .welfare-stage__stamp {
      display: none;
    }

    body.studio-design-live .rights-stage--tile .rights-stage__source,
    body.studio-design-live .rights-stage--tile .rights-stage__plain {
      top: 32%;
      min-height: 35%;
      padding: 11px;
    }

    body.studio-design-live .rights-stage--tile .rights-stage__source span,
    body.studio-design-live .rights-stage--tile .rights-stage__plain span {
      font-size: 16px;
    }

    body.studio-design-live .rights-stage--tile .rights-stage__source em,
    body.studio-design-live .rights-stage--tile .rights-stage__plain em {
      display: none;
    }

    body.studio-design-live .gengo-stage--tile .gengo-stage__board strong { font-size: 25px; }
    body.studio-design-live .gengo-stage--tile .gengo-stage__bubble { display: none; }
    body.studio-design-live .gengo-stage--tile .gengo-stage__teacher { width: min(31%, 82px); }

    body.studio-design-live .roulette-stage--tile .roulette-stage__machine {
      left: 9%;
      right: 9%;
      top: 30%;
      gap: 8px;
      padding: 12px;
    }

    body.studio-design-live .roulette-stage--tile .roulette-stage__reels span {
      min-height: 38px;
      font-size: 7px;
    }

    body.studio-design-live .roulette-stage--tile .roulette-stage__readme {
      font-size: 8px;
    }

    @keyframes debate-breathe {
      0%, 100% { transform: translateY(0); }
      46% { transform: translateY(-5px); }
    }

    @keyframes debate-pulse {
      0%, 100% { opacity: .18; transform: translate(-50%, -50%) scaleX(.5); }
      48% { opacity: .72; transform: translate(-50%, -50%) scaleX(1.08); }
    }

    @keyframes marina-track {
      0%, 100% { transform: scaleX(.54); opacity: .58; }
      50% { transform: scaleX(1); opacity: .96; }
    }

    @keyframes marina-hop {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-12px) rotate(2deg); }
    }

    @keyframes marina-gate {
      0%, 100% { opacity: .38; transform: translateX(0); }
      50% { opacity: 1; transform: translateX(-12px); }
    }

    @keyframes welfare-route {
      0%, 100% { transform: translateX(0); opacity: .26; }
      50% { transform: translateX(560%); opacity: .9; }
    }

    @keyframes welfare-card {
      0%, 100% { transform: translateY(0); }
      45% { transform: translateY(-5px); }
    }

    @keyframes rights-scan {
      0%, 100% { transform: translateY(-18px); opacity: .26; }
      50% { transform: translateY(42px); opacity: .72; }
    }

    @keyframes gengo-breathe {
      0%, 100% { transform: translateY(0); }
      46% { transform: translateY(-6px); }
    }

    @keyframes gengo-pointer {
      0%, 100% { transform: rotate(-8deg) scaleX(.55); opacity: .3; }
      50% { transform: rotate(8deg) scaleX(1); opacity: .82; }
    }

    @keyframes roulette-reel {
      0%, 100% { filter: hue-rotate(0deg); transform: translateY(0); }
      33% { filter: hue-rotate(28deg); transform: translateY(-2px); }
      66% { filter: hue-rotate(-22deg); transform: translateY(2px); }
    }

    @keyframes roulette-cursor {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }

    body.studio-design-live .app-window {
      --app-accent: var(--hci);
      --app-wash: rgba(229,245,243,.82);
      position: relative;
      grid-column: span 4;
      display: grid;
      min-height: 330px;
      align-content: space-between;
      gap: 18px;
      overflow: hidden;
      padding: 18px;
      border: 1px solid color-mix(in srgb, var(--app-accent) 34%, rgba(45,41,38,.12));
      border-radius: 24px;
      background:
        linear-gradient(145deg, var(--app-wash), rgba(250,249,246,.84) 64%),
        url("../_assets/studio-signal-folio/studio-category-surface-v1.webp") center / cover no-repeat;
      box-shadow: 0 20px 58px rgba(45, 41, 38, .09);
      color: var(--studio-ink);
      text-decoration: none;
      transform: translateY(0);
      transition:
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 280ms ease-out,
        border-color 220ms ease-out;
    }

    body.studio-design-live .app-window::before {
      content: "";
      position: absolute;
      inset: auto 18px 16px;
      height: 13px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--app-accent), rgba(255,255,255,.12), var(--app-accent));
      opacity: .18;
      transform-origin: left;
      animation: app-signal 5s ease-in-out infinite;
    }

    body.studio-design-live .app-window::after {
      content: "";
      position: absolute;
      top: 18px;
      right: 18px;
      width: 12px;
      height: 12px;
      border: 1px solid color-mix(in srgb, var(--app-accent) 54%, #6f4c27);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #fff8d6 0 10%, var(--app-accent) 25%, #56422c 100%);
      box-shadow: 0 2px 0 rgba(255,255,255,.64) inset, 0 4px 12px rgba(45,41,38,.14);
    }

    body.studio-design-live .app-window:hover,
    body.studio-design-live .app-window:focus-visible {
      border-color: color-mix(in srgb, var(--app-accent) 62%, var(--studio-ink));
      box-shadow: 0 30px 76px rgba(45, 41, 38, .14);
      transform: translateY(-7px);
    }

    body.studio-design-live .app-window--wide {
      grid-column: span 6;
      min-height: 390px;
      grid-template-columns: minmax(0, 1.05fr) minmax(270px, .86fr);
      align-items: end;
    }

    body.studio-design-live .app-window--voice {
      --app-accent: var(--hci);
      --app-wash: rgba(229,245,243,.88);
    }

    body.studio-design-live .app-window--chirabi {
      --app-accent: var(--chirabi-sage);
      --app-wash: rgba(239,236,223,.9);
    }

    body.studio-design-live .app-window--civil {
      --app-accent: var(--civil);
      --app-wash: rgba(249,232,237,.88);
    }

    body.studio-design-live .app-window--game {
      --app-accent: #175a84;
      --app-wash: rgba(229,239,247,.88);
    }

    body.studio-design-live .app-window--source {
      --app-accent: #7b9650;
      --app-wash: rgba(242,248,224,.86);
    }

    body.studio-design-live .app-window__media {
      position: relative;
      z-index: 1;
      min-height: 150px;
      overflow: hidden;
      border: 1px solid rgba(45, 41, 38, .16);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 18px 45px rgba(45,41,38,.09);
    }

    body.studio-design-live .app-window--wide .app-window__media {
      min-height: 250px;
      align-self: stretch;
    }

    /* Looping product teasers. Sized identically to the <img> they replaced so
       the shelf's layout is unchanged whether a card shows a still or a loop. */
    body.studio-design-live .app-window__media .app-window__loop,
    body.studio-design-live .project-media .app-window__loop {
      display: block;
      width: 100%;
      /* aspect-ratio, NOT height:100%. A <video preload="none"> has no intrinsic
         size until something loads, and height:100% against an auto-height
         parent then resolves to zero — so the element laid out at 0x0, the
         IntersectionObserver never fired because nothing could intersect, and
         nothing ever loaded. Declaring the loops' own 960x600 gives the box a
         real height immediately and breaks that circle. */
      aspect-ratio: 960 / 600;
      height: auto;
      object-fit: cover;
      background: #fff;
    }

    body.studio-design-live .project-media .app-window__loop {
      aspect-ratio: auto;
      height: 100%;
      transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease-out;
    }

    body.studio-design-live .project-media--capture .gengo-stage,
    body.studio-design-live .project-media--capture .debate-stage,
    body.studio-design-live .project-media--capture .roulette-stage,
    body.studio-design-live .project-media--capture .rights-stage,
    body.studio-design-live .project-media--capture .welfare-stage,
    body.studio-design-live .app-window__media--capture .gengo-stage,
    body.studio-design-live .app-window__media--capture .debate-stage,
    body.studio-design-live .app-window__media--capture .roulette-stage,
    body.studio-design-live .app-window__media--capture .rights-stage,
    body.studio-design-live .app-window__media--capture .welfare-stage {
      display: none;
    }

    body.studio-design-live .landing-feature:hover .project-media .app-window__loop {
      transform: scale(1.012);
      filter: saturate(1.04) contrast(1.02);
    }

    /* Someone who has asked for less motion gets the poster frame and nothing
       moving. The videos are silent and carry no controls, so a still is a
       complete substitute rather than a degraded one. */
    @media (prefers-reduced-motion: reduce) {
      body.studio-design-live .app-window__media .app-window__loop,
      body.studio-design-live .project-media .app-window__loop {
        display: none;
      }
      body.studio-design-live .app-window__media .app-window__loop + .app-window__loop-still,
      body.studio-design-live .app-window__media[data-loop-poster]::after,
      body.studio-design-live .project-media[data-loop-poster]::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: var(--loop-poster);
        background-size: cover;
        background-position: center;
      }
    }

    body.studio-design-live .app-window__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease-out;
    }

    body.studio-design-live .app-window:hover .app-window__media img,
    body.studio-design-live .app-window:focus-visible .app-window__media img {
      transform: scale(1.035);
    }

    body.studio-design-live .app-window__media--contain img {
      object-fit: contain;
      background: #161535;
    }

    body.studio-design-live .app-window__copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    body.studio-design-live .app-window__labels {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    body.studio-design-live .app-label {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 6px 9px;
      border: 1px solid color-mix(in srgb, var(--app-accent) 45%, rgba(45,41,38,.16));
      border-radius: 999px;
      background: rgba(255,255,255,.58);
      color: var(--app-accent);
      font: 800 8px/1 var(--font-mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    body.studio-design-live .app-label--action {
      border-color: var(--studio-ink);
      background: var(--studio-ink);
      color: #fffaf0;
    }

    body.studio-design-live .app-window__copy strong {
      font: 400 34px/.98 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .app-window--wide .app-window__copy strong {
      font-size: 52px;
    }

    body.studio-design-live .app-window__summary {
      color: #514c48;
      font-size: 14px;
      line-height: 1.55;
    }

    body.studio-design-live .app-window__go {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      gap: 8px;
      padding-top: 4px;
      border-bottom: 1px solid currentColor;
      color: var(--app-accent);
      font: 800 9px/1.25 var(--font-mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    body.studio-design-live .app-window__go span {
      transition: transform 220ms ease-out;
    }

    body.studio-design-live .app-window:hover .app-window__go span,
    body.studio-design-live .app-window:focus-visible .app-window__go span {
      transform: translate(3px, -3px);
    }

    @keyframes app-signal {
      0%, 100% { transform: scaleX(.34); opacity: .14; }
      45% { transform: scaleX(.96); opacity: .28; }
    }

    @keyframes genre-shelf-highlight {
      0% {
        background: color-mix(in srgb, var(--genre-accent) 16%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--genre-accent) 36%, transparent);
      }
      45% {
        background: color-mix(in srgb, var(--genre-accent) 8%, transparent);
        box-shadow: 0 0 0 12px transparent;
      }
      100% {
        background: transparent;
        box-shadow: 0 0 0 0 transparent;
      }
    }

    body.studio-design-live .door-window {
      position: relative;
      display: block;
      min-height: 150px;
      overflow: hidden;
      border: 1px solid rgba(45, 41, 38, 0.16);
      border-radius: 17px;
      background: var(--studio-bg);
    }

    body.studio-design-live .door-window img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease-out;
    }

    body.studio-design-live .category-door:hover .door-window img,
    body.studio-design-live .category-door:focus-visible .door-window img {
      transform: scale(1.035);
    }

    body.studio-design-live .door-window--civil { height: 156px; }

    body.studio-design-live .door-window--civil img {
      object-fit: contain;
      object-position: center;
      background: #232250;
    }

    body.studio-design-live .door-window--civil span {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 7px 9px;
      border: 1px solid rgba(45, 41, 38, 0.13);
      border-radius: 999px;
      background: rgba(250, 249, 246, 0.94);
      color: var(--studio-ink);
      font: 700 8px/1 var(--font-mono);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    body.studio-design-live .door-window--duet {
      display: grid;
      height: 177px;
      grid-template-columns: 1.05fr 0.95fr;
      background: #101124;
    }

    body.studio-design-live .door-window--duet img:first-child { object-position: 52% center; }

    body.studio-design-live .door-window--duet img:last-child {
      border-left: 1px solid rgba(255, 255, 255, 0.18);
      object-position: center;
    }

    body.studio-design-live .studio-footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      margin-top: 62px;
      padding-top: 22px;
      border-top: 1px solid var(--studio-line);
    }

    body.studio-design-live .studio-footer p {
      max-width: 58ch;
      margin: 0;
      color: var(--studio-muted);
      font: 400 10px/1.7 var(--font-mono);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    body.studio-design-live .tide-clue {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #4f5273;
      font: 700 10px/1.4 var(--font-mono);
      letter-spacing: 0.06em;
      text-decoration: none;
      text-transform: uppercase;
      transition: color 180ms ease-out;
    }

    body.studio-design-live .tide-clue:hover,
    body.studio-design-live .tide-clue:focus-visible {
      color: #175a84;
    }

    body.studio-design-live .tide-clue__wave {
      display: grid;
      width: 29px;
      height: 29px;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 18px;
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.studio-design-live .tide-clue:hover .tide-clue__wave,
    body.studio-design-live .tide-clue:focus-visible .tide-clue__wave {
      transform: translateY(-3px) rotate(-8deg);
    }

    body.studio-design-live .studio-room {
      position: fixed;
      inset: 72px 0 0;
      z-index: 85;
      display: none;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: rgba(250, 249, 246, 0.965);
      color: var(--studio-ink);
      font-family: var(--font-reading);
    }

    body.studio-design-live .studio-room.is-active {
      display: block;
    }

    body.studio-design-live .room-surface {
      --room-accent: var(--studio-ink);
      position: relative;
      min-height: 100%;
      padding: 70px 94px 104px;
      background: rgba(250, 249, 246, 0.9);
    }

    body.studio-design-live .room-surface::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 8px;
      background: var(--room-accent);
    }

    body.studio-design-live .studio-room--civil .room-surface { --room-accent: var(--civil); }
    body.studio-design-live .studio-room--hci .room-surface { --room-accent: var(--hci); }

    body.studio-design-live .room-masthead,
    body.studio-design-live .room-main {
      width: min(100%, 1380px);
      margin-inline: auto;
    }

    body.studio-design-live .room-masthead {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
      padding-bottom: 26px;
      border-bottom: 1px solid var(--studio-line);
    }

    body.studio-design-live .room-masthead__label,
    body.studio-design-live .room-masthead__status {
      color: var(--studio-muted);
      font: 700 10px/1.4 var(--font-mono);
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    body.studio-design-live .room-masthead__label { text-align: center; }
    body.studio-design-live .room-masthead__status { justify-self: end; }

    body.studio-design-live .room-back {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 0;
      border-bottom: 1px solid currentColor;
      color: var(--studio-ink);
      font: 700 11px/1 var(--font-mono);
      letter-spacing: 0.08em;
      text-decoration: none;
      text-transform: uppercase;
      transition: color 180ms ease-out, gap 180ms ease-out;
    }

    body.studio-design-live .room-back:hover,
    body.studio-design-live .room-back:focus-visible {
      color: var(--room-accent);
      gap: 13px;
    }

    body.studio-design-live .room-main {
      padding-top: 96px;
    }

    body.studio-design-live .room-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.7fr);
      align-items: end;
      gap: 72px;
      margin-bottom: 112px;
    }

    body.studio-design-live .room-hero .eyebrow {
      grid-column: 1 / -1;
      color: var(--room-accent);
    }

    body.studio-design-live .room-hero h2 {
      margin: 0;
      font: 400 90px/.94 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .room-hero > p:not(.eyebrow) {
      max-width: 48ch;
      margin: 0;
      color: #514c48;
      font-size: 18px;
      line-height: 1.76;
      text-wrap: pretty;
    }

    body.studio-design-live .room-rule {
      grid-column: 1 / -1;
      display: block;
      height: 2px;
      background: var(--room-accent);
      transform-origin: left;
    }

    body.studio-design-live .project-feature,
    body.studio-design-live .workbench-signal {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: center;
      gap: 72px;
      padding-block: 72px;
      border-top: 1px solid var(--studio-line);
    }

    body.studio-design-live .project-feature:last-child { border-bottom: 1px solid var(--studio-line); }

    body.studio-design-live .project-media {
      grid-column: span 7;
      overflow: hidden;
      border: 1px solid rgba(45, 41, 38, 0.16);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(45, 41, 38, 0.1);
    }

    body.studio-design-live .project-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body.studio-design-live .project-copy {
      grid-column: span 5;
    }

    body.studio-design-live .project-copy h3,
    body.studio-design-live .section-heading h3 {
      margin: 14px 0 20px;
      font: 400 46px/1.05 var(--font-display);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .project-copy > p:not(.project-status),
    body.studio-design-live .section-heading > p:not(.eyebrow) {
      max-width: 56ch;
      margin: 0;
      color: #514c48;
      font-size: 16px;
      line-height: 1.76;
      text-wrap: pretty;
    }

    body.studio-design-live .project-status {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--studio-muted);
      font: 700 10px/1.5 var(--font-mono);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    body.studio-design-live .project-status span {
      display: inline-flex;
      padding: 6px 9px;
      border: 1px solid currentColor;
      border-radius: 999px;
      color: var(--room-accent);
    }

    body.studio-design-live .release-badge {
      --badge-bg: #171515;
      --badge-ink: #fffaf0;
      --badge-accent: var(--hci);
      display: inline-grid;
      width: max-content;
      max-width: 100%;
      grid-template-columns: auto auto auto;
      align-items: center;
      gap: 5px;
      min-height: 28px;
      padding: 4px 8px 4px 5px;
      border: 1px solid color-mix(in srgb, var(--badge-accent) 48%, #171515);
      border-radius: 999px 12px 12px 999px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.08), transparent 45%),
        var(--badge-bg);
      color: var(--badge-ink);
      box-shadow: 0 10px 20px rgba(23, 21, 21, .16);
      font: 800 7px/1.1 var(--font-mono);
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    body.studio-design-live .release-badge__mark {
      display: grid;
      width: 18px;
      height: 18px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 50%;
      background:
        radial-gradient(circle, var(--badge-accent) 0 20%, transparent 23%),
        conic-gradient(from 45deg, transparent 0 12%, rgba(255,255,255,.7) 12% 18%, transparent 18% 62%, rgba(255,255,255,.45) 62% 68%, transparent 68%);
      color: var(--badge-ink);
      font: 800 7px/1 var(--font-mono);
    }

    body.studio-design-live .release-badge__wave {
      display: inline-flex;
      align-items: center;
      gap: 1px;
      min-width: 14px;
    }

    body.studio-design-live .release-badge__wave i {
      display: block;
      width: 2px;
      height: 6px;
      border-radius: 999px;
      background: var(--badge-accent);
      opacity: .78;
      animation: badge-wave 1.5s ease-in-out infinite;
    }

    body.studio-design-live .release-badge__wave i:nth-child(2) { height: 11px; animation-delay: .12s; }
    body.studio-design-live .release-badge__wave i:nth-child(3) { height: 8px; animation-delay: .24s; }
    body.studio-design-live .release-badge__wave i:nth-child(4) { height: 13px; animation-delay: .36s; }

    body.studio-design-live .release-badge--source { --badge-accent: #a6df4b; }

    body.studio-design-live .release-badge--compact {
      min-height: 24px;
      padding-block: 3px;
      font-size: 6px;
    }

    body.studio-design-live .release-badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0 0;
    }

    body.studio-design-live .landing-projects .project-feature .project-copy,
    body.studio-design-live .hci-projects .project-feature .project-copy {
      position: relative;
    }

    body.studio-design-live .landing-projects .project-feature .release-badge-row,
    body.studio-design-live .hci-projects .project-feature .release-badge-row {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      margin: 0;
      transform: rotate(1deg) scale(.9);
      transform-origin: top right;
    }

    body.studio-design-live .landing-projects .project-feature .project-copy:has(> .release-badge-row) .project-status,
    body.studio-design-live .hci-projects .project-feature .project-copy:has(> .release-badge-row) .project-status {
      max-width: calc(100% - 116px);
    }

    body.studio-design-live .project-action {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 28px;
      padding: 13px 17px;
      border: 1px solid var(--studio-ink);
      border-radius: 999px;
      background: var(--studio-ink);
      color: #fff;
      font: 700 11px/1 var(--font-mono);
      letter-spacing: 0.05em;
      text-decoration: none;
      text-transform: uppercase;
      transition: gap 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
    }

    body.studio-design-live .project-action:hover,
    body.studio-design-live .project-action:focus-visible {
      gap: 13px;
      background: transparent;
      color: var(--studio-ink);
    }

    body.studio-design-live .project-media--rights,
    body.studio-design-live .project-media--welfare,
    body.studio-design-live .project-media--game,
    body.studio-design-live .project-media--lag,
    body.studio-design-live .project-media--roulette {
      aspect-ratio: 16 / 10;
    }

    body.studio-design-live .project-media--rights { background: #ffe7f0; }
    body.studio-design-live .project-media--welfare { background: #fbf2df; }
    body.studio-design-live .project-media--game { background: #101124; }
    body.studio-design-live .project-media--voice,
    body.studio-design-live .project-media--duet { aspect-ratio: 16 / 9; }
    body.studio-design-live .project-media--voice { background: #f4efe6; }
    body.studio-design-live .project-media--duet { background: #090a1a; }
    body.studio-design-live .project-media--roulette { background: #0d0d1a; }
    body.studio-design-live .project-media--lag { background: #100b1c; }

    body.studio-design-live .project-media--rights img,
    body.studio-design-live .project-media--welfare img,
    body.studio-design-live .project-media--game img,
    body.studio-design-live .project-media--lag img,
    body.studio-design-live .project-media--roulette img {
      object-position: center top;
    }

    body.studio-design-live .welfare-preview-notes {
      position: absolute;
      inset: auto 18px 18px 18px;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      pointer-events: none;
    }

    body.studio-design-live .welfare-preview-notes span {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid rgba(9, 121, 142, .34);
      border-radius: 8px;
      background: rgba(255, 255, 250, .86);
      box-shadow: 0 10px 22px rgba(31, 53, 69, .13);
      color: #243d53;
      font: 700 9px/1.35 var(--font-mono);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    body.studio-design-live .welfare-preview-notes strong {
      color: #087d92;
      font: 700 10px/1.2 var(--font-mono);
      letter-spacing: 0.08em;
    }

    body.studio-design-live .app-window__media .welfare-preview-notes {
      inset: auto 10px 10px 10px;
      grid-template-columns: 1fr;
      gap: 5px;
    }

    body.studio-design-live .app-window__media .welfare-preview-notes span {
      padding: 5px 7px;
      border-radius: 6px;
      font-size: 7px;
    }

    body.studio-design-live .app-window__media .welfare-preview-notes span:nth-child(n+3) {
      display: none;
    }

    body.studio-design-live .project-media--voice img {
      object-position: left top;
    }

    body.studio-design-live .voicegen-feature {
      position: relative;
      gap: 36px;
      margin-bottom: 18px;
      padding: 36px;
      overflow: hidden;
      border: 1px solid rgba(8, 123, 131, .25);
      border-radius: 30px;
      background:
        linear-gradient(115deg, rgba(229,245,243,.84), rgba(255,250,240,.86) 52%, rgba(246,238,251,.62)),
        radial-gradient(circle at 74% 18%, rgba(166,223,75,.22), transparent 30%),
        #eef8f7;
      box-shadow: 0 30px 84px rgba(21, 67, 72, .12);
    }

    body.studio-design-live .voicegen-feature .project-media,
    body.studio-design-live .voicegen-feature .project-copy {
      grid-column: span 6;
    }

    body.studio-design-live .voicegen-feature::before {
      content: "";
      position: absolute;
      inset: auto 36px 24px;
      height: 24px;
      border-radius: 0;
      background:
        linear-gradient(90deg, rgba(8,123,131,.2), rgba(166,223,75,.48), rgba(163,32,42,.16)),
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(8,123,131,.28) 10px 12px, transparent 12px 18px);
      background-blend-mode: screen;
      box-shadow: inset 0 0 0 1px rgba(8, 123, 131, .14);
      opacity: .78;
      animation: voicegen-meter 5.4s ease-in-out infinite;
    }

    body.studio-design-live .voicegen-feature .project-media {
      position: relative;
      z-index: 1;
      border-radius: 24px;
      transform: perspective(900px) rotateY(1.5deg) rotateX(.8deg);
      transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease-out;
    }

    body.studio-design-live .voicegen-feature:hover .project-media,
    body.studio-design-live .voicegen-feature:focus-within .project-media {
      box-shadow: 0 30px 76px rgba(8, 123, 131, .18);
      transform: perspective(900px) rotateY(0deg) rotateX(0deg) translateY(-4px);
    }

    body.studio-design-live .voicegen-feature .project-media::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.36) 46%, transparent 58%);
      transform: translateX(-72%);
      animation: voicegen-scan 4.6s ease-in-out infinite;
    }

    body.studio-design-live .voicegen-feature .project-copy {
      position: relative;
      z-index: 1;
    }

    body.studio-design-live .voicegen-feature .project-copy h3 {
      margin-top: 14px;
      font-size: 48px;
    }

    body.studio-design-live .voicegen-feature .project-copy > p:not(.project-status) {
      font-size: 14px;
      line-height: 1.5;
    }

    body.studio-design-live .voicegen-feature .project-action {
      background: #103b48;
      border-color: #103b48;
      margin-top: 18px;
      padding: 11px 14px;
      font-size: 10px;
    }

    body.studio-design-live .voicegen-steps {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }

    body.studio-design-live .voicegen-steps span {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 5px 8px;
      border: 1px solid rgba(8, 123, 131, .24);
      border-radius: 999px;
      background: rgba(255,255,255,.52);
      color: var(--hci);
      font: 800 7px/1 var(--font-mono);
      letter-spacing: .08em;
      text-transform: uppercase;
      animation: voicegen-step 4.8s ease-in-out infinite;
    }

    body.studio-design-live .voicegen-steps span:nth-child(2) { animation-delay: .7s; }
    body.studio-design-live .voicegen-steps span:nth-child(3) { animation-delay: 1.4s; }

    body.studio-design-live .download-note {
      margin-top: 12px !important;
      padding-left: 14px;
      border-left: 3px solid var(--hci);
      color: #374d4d !important;
      font-family: var(--font-mono);
      font-size: 10px !important;
      line-height: 1.4;
      letter-spacing: .03em;
    }

    body.studio-design-live .landing-projects .project-feature:not(.voicegen-feature),
    body.studio-design-live .hci-projects .project-feature:not(.voicegen-feature) {
      gap: 36px;
      padding: 36px;
    }

    body.studio-design-live .landing-projects .project-feature:not(.voicegen-feature) .project-copy h3,
    body.studio-design-live .hci-projects .project-feature:not(.voicegen-feature) .project-copy h3 {
      margin: 12px 0 14px;
    }

    body.studio-design-live .landing-projects .project-feature:not(.voicegen-feature) .project-copy > p:not(.project-status),
    body.studio-design-live .hci-projects .project-feature:not(.voicegen-feature) .project-copy > p:not(.project-status) {
      line-height: 1.58;
    }

    body.studio-design-live .landing-projects .project-feature:not(.voicegen-feature) .project-action,
    body.studio-design-live .hci-projects .project-feature:not(.voicegen-feature) .project-action {
      margin-top: 18px;
      padding: 11px 14px;
      font-size: 10px;
    }

    @keyframes voicegen-meter {
      0%, 100% { clip-path: inset(0 26% 0 0); opacity: .56; }
      50% { clip-path: inset(0 4% 0 0); opacity: .88; }
    }

    @keyframes voicegen-scan {
      0%, 35% { transform: translateX(-72%); opacity: 0; }
      52% { opacity: .8; }
      80%, 100% { transform: translateX(72%); opacity: 0; }
    }

    @keyframes voicegen-step {
      0%, 100% { border-color: rgba(8, 123, 131, .2); transform: translateY(0); }
      35% { border-color: rgba(8, 123, 131, .65); transform: translateY(-2px); }
    }

    body.studio-design-live .project-media--duet img {
      object-fit: contain;
    }

    body.studio-design-live .project-feature--duet .project-copy,
    body.studio-design-live .workbench-signal__copy {
      grid-column: span 5;
    }

    body.studio-design-live .project-feature--duet .project-media,
    body.studio-design-live .project-media--lag {
      grid-column: span 7;
    }

    body.studio-design-live .country-tools {
      margin-top: 130px;
      padding-top: 70px;
      border-top: 2px solid var(--civil);
    }

    body.studio-design-live .section-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
      gap: 8px 72px;
      align-items: end;
      margin-bottom: 72px;
    }

    body.studio-design-live .section-heading .eyebrow {
      grid-column: 1 / -1;
      color: var(--civil);
    }

    body.studio-design-live .section-heading h3 {
      margin-bottom: 0;
    }

    body.studio-design-live .country-tools__grid--unified {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    body.studio-design-live .country-preview--unified {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
      align-items: center;
      gap: 64px;
      padding: 32px;
      border: 1px solid rgba(138, 51, 77, 0.22);
      border-radius: 30px;
      background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.86), rgba(255, 242, 246, 0.7)),
        var(--civil-soft);
      box-shadow: 0 28px 80px rgba(70, 42, 53, 0.08);
    }

    body.studio-design-live .country-preview__media {
      aspect-ratio: 5 / 3;
      overflow: hidden;
      border: 1px solid rgba(45, 41, 38, 0.16);
      border-radius: 24px;
      background: #edf3fa;
      box-shadow: 0 22px 60px rgba(45, 41, 38, 0.09);
    }

    body.studio-design-live .country-preview__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
    }

    body.studio-design-live .country-preview__copy {
      padding: 20px;
    }

    body.studio-design-live .country-preview__copy h4 {
      margin: 15px 0 16px;
      font: 700 32px/1.25 var(--font-reading);
      letter-spacing: 0;
      text-wrap: balance;
    }

    body.studio-design-live .country-preview__copy > p:not(.project-status) {
      margin: 0;
      color: #514c48;
      font-size: 16px;
      line-height: 1.75;
      text-wrap: pretty;
    }

    body.studio-design-live .country-preview__copy > p + p { margin-top: 13px; }
    body.studio-design-live .country-preview__lead { color: var(--studio-ink) !important; font-weight: 700; }

    body.studio-design-live .safety-note,
    body.studio-design-live .preview-boundary {
      padding-top: 14px;
      border-top: 1px solid var(--studio-line);
      font-family: var(--font-mono);
      font-size: 12px !important;
      letter-spacing: 0.025em;
    }

    body.studio-design-live .workbench-signal {
      margin-top: 130px;
      border-bottom: 1px solid var(--studio-line);
    }

    body.studio-design-live .workbench-signal--lag {
      padding: 60px;
      border: 1px solid rgba(102, 93, 137, 0.24);
      border-radius: 24px;
      background:
        linear-gradient(118deg, rgba(250, 249, 246, 0.5), rgba(250, 249, 246, 0.82)),
        url("../_assets/studio-signal-folio/studio-workbench-feed-v1.webp") center / cover no-repeat;
      box-shadow: 0 24px 64px rgba(67, 58, 84, 0.1);
    }

    body.studio-design-live .workbench-signal__copy .preview-boundary {
      max-width: 56ch;
      margin: 24px 0 0;
      color: #514c48;
    }

    body.studio-design-live .hci-projects {
      display: grid;
      gap: 0;
    }

    body.studio-design-live .hci-note {
      display: grid;
      grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
      gap: 28px;
      margin-top: 118px;
      padding: 48px;
      border: 1px solid rgba(8, 123, 131, 0.28);
      border-radius: 22px;
      background: var(--hci-soft);
    }

    body.studio-design-live .hci-note__label {
      color: var(--hci);
      font: 700 11px/1.5 var(--font-mono);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    body.studio-design-live .hci-note p {
      max-width: 70ch;
      margin: 0;
      color: #374d4d;
      font-size: 17px;
      line-height: 1.75;
    }

    body.studio-design-live .room-switcher {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 24px;
      margin-top: 148px;
      padding: 27px 48px;
      border: 1px solid rgba(86, 76, 66, 0.14);
      border-radius: 18px;
      background:
        linear-gradient(rgba(250, 249, 246, 0.36), rgba(250, 249, 246, 0.54)),
        url("../_assets/studio-signal-folio/studio-category-switch-v1.webp") center / cover no-repeat;
      box-shadow: 0 16px 40px rgba(84, 67, 49, 0.08);
      font: 700 10px/1.4 var(--font-mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    body.studio-design-live .room-switcher > span {
      margin-right: auto;
      color: var(--studio-muted);
    }

    body.studio-design-live .room-switcher a {
      padding-bottom: 3px;
      border-bottom: 1px solid currentColor;
      color: var(--room-accent);
      text-decoration: none;
    }

    body.studio-design-live .atelier-room-reveal {
      animation: source-room-reveal 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes source-room-reveal {
      from { opacity: 0; transform: translate3d(0, 18px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .terminology-sheet {
      display: grid;
      gap: 15px;
    }

    .terminology-head h2 {
      margin: 0;
      font: 650 26px/1 var(--display);
      letter-spacing: 0;
    }

    .terminology-tree {
      padding: 12px;
      border-radius: 9px;
      background: #171515;
      color: rgba(255,250,240,.78);
      font: 700 10px/1.55 var(--mono);
      white-space: pre-wrap;
    }

    .terminology-key {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 0 12px;
      margin: 15px 0 0;
    }

    .terminology-key dt, .terminology-key dd {
      margin: 0;
      padding: 9px 0;
      border-top: 1px solid var(--line);
    }

    .terminology-key dt {
      color: var(--cyan);
      font: 800 8px/1.35 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .terminology-key dd {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .decision-summary {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 12px;
    }

    .decision-summary li {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 10px;
      padding-top: 7px;
      border-top: 1px solid var(--line);
    }

    .decision-summary strong {
      color: var(--cyan);
      font: 800 8px/1.3 var(--mono);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .reference-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .reference-card {
      display: grid;
      gap: 8px;
      min-height: 154px;
    }

    .reference-card strong {
      color: var(--cyan);
      font: 800 8px/1.4 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .reference-card code {
      width: max-content;
      max-width: 100%;
      padding: 5px 7px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255,255,255,.56);
      color: var(--red-deep);
      font: 800 9px/1.2 var(--mono);
    }

    .note {
      color: rgba(33,31,29,.46);
      text-align: center;
      font: 800 8px/1.45 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    @media (max-width: 980px) {
      body { padding-top: 118px; }
      h1 { font-size: 50px; }
      .review-strip { grid-template-columns: 1fr auto auto; align-items: start; }
      .review-tabs { grid-column: 1 / -1; }
      .atelier-head, .review-layout, .social-grid, .reference-grid { grid-template-columns: 1fr; }
      .annotation-grid, .tool-grid, .map-flow, .asset-shelf { grid-template-columns: 1fr; }
      .asset-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tool-surface { grid-template-columns: 1fr; }
      body.studio-design-live .studio-landing { padding: 32px 22px 46px; }
      body.studio-design-live .studio-landing::before { background: none; opacity: 0; }
      body.studio-design-live .studio-masthead { align-items: flex-start; }
      body.studio-design-live .brand-anchor { flex: 1 1 auto; min-width: 0; min-height: 74px; padding: 8px 22px 8px 9px; background-position: 40% center; }
      body.studio-design-live .brand-anchor__image { width: 58px; height: 58px; border-radius: 14px; }
      body.studio-design-live .brand-anchor__copy strong { font-size: 15px; }
      body.studio-design-live .brand-anchor__copy span { display: none; }
      body.studio-design-live .portal-link { font-size: 9px; }
      body.studio-design-live .studio-main { padding-top: 24px; }
      body.studio-design-live .studio-opening { grid-template-columns: 1fr; gap: 16px; }
      body.studio-design-live .chirabi-portal { grid-template-columns: 1fr; grid-template-areas: "room" "copy"; min-height: 0; border-radius: 18px 18px 11px 11px; }
      body.studio-design-live .chirabi-portal__room { min-height: 0; aspect-ratio: 16 / 9; border-radius: 10px 10px 5px 5px; }
      body.studio-design-live .chirabi-portal__walker { width: 150px; }
      body.studio-design-live .chirabi-portal__copy { padding: 20px 18px 22px; }
      body.studio-design-live .chirabi-portal__copy strong { max-width: 12ch; font-size: 24px; }
      body.studio-design-live .chirabi-portal__summary { max-width: 48ch; }
      body.studio-design-live .chirabi-portal__enter { right: 14px; bottom: 12px; width: 56px; height: 56px; padding: 11px; font-size: 8px; }
      body.studio-design-live .chirabi-portal__enter-arrow { right: 14px; bottom: 12px; }
      body.studio-design-live .studio-intro { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; background-position: 54% center; background-size: auto 100%; }
      body.studio-design-live .studio-intro h1 { max-width: 12ch; font-size: 38px; }
      body.studio-design-live .studio-intro__lede { font-size: 14px; }
      body.studio-design-live .category-deck { display: flex; min-height: 0; flex-direction: column; gap: 16px; margin-top: 24px; }
      body.studio-design-live .category-door { --door-y: 0px; min-height: 390px; padding: 25px; border-radius: 22px; }
      body.studio-design-live .category-door:hover, body.studio-design-live .category-door:focus-visible { transform: translateY(-4px); }
      body.studio-design-live .category-door__title { font-size: 38px; }
      body.studio-design-live .door-window { height: 148px; min-height: 148px; }
      body.studio-design-live .app-arcade__head {
        grid-template-columns: 1fr;
        padding: 22px;
      }
      body.studio-design-live .app-arcade__head h2 { font-size: 40px; }
      body.studio-design-live .app-arcade__grid { grid-template-columns: 1fr; }
      body.studio-design-live .app-window,
      body.studio-design-live .app-window--wide {
        grid-column: auto;
        grid-template-columns: 1fr;
        min-height: 0;
      }
      body.studio-design-live .app-window--wide .app-window__media,
      body.studio-design-live .app-window__media {
        min-height: 190px;
      }
      body.studio-design-live .app-window--wide .app-window__copy strong,
      body.studio-design-live .app-window__copy strong { font-size: 34px; }
      body.studio-design-live .genre-lenses {
        justify-content: flex-start;
      }
      body.studio-design-live .genre-lenses__controls { justify-content: flex-start; }
      body.studio-design-live .genre-shelf { padding: 34px 0 42px; }
      body.studio-design-live .genre-shelf__head {
        grid-template-columns: 1fr;
        padding-inline: 0;
      }
      body.studio-design-live .genre-shelf__head h3 { font-size: 12px; }
      body.studio-design-live .download-dock {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px;
      }
      body.studio-design-live .download-dock__copy strong { font-size: 38px; }
      body.studio-design-live .download-dock__action { width: 88px; height: 88px; }
      body.studio-design-live .studio-footer { align-items: flex-start; flex-direction: column; margin-top: 52px; }
      body.studio-design-live .studio-room { inset: 118px 0 0; }
      body.studio-design-live .room-surface { padding: 28px 22px 66px; }
      body.studio-design-live .room-masthead { grid-template-columns: 1fr auto; }
      body.studio-design-live .room-masthead__label { display: none; }
      body.studio-design-live .room-masthead__status { font-size: 8px; }
      body.studio-design-live .room-main { padding-top: 62px; }
      body.studio-design-live .room-hero { grid-template-columns: 1fr; gap: 23px; margin-bottom: 74px; }
      body.studio-design-live .room-hero .eyebrow, body.studio-design-live .room-rule { grid-column: auto; }
      body.studio-design-live .room-hero h2 { font-size: 72px; }
      body.studio-design-live .room-hero > p:not(.eyebrow) { font-size: 16px; }
      body.studio-design-live .project-feature,
      body.studio-design-live .workbench-signal {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-block: 44px;
      }
      body.studio-design-live .landing-projects .project-feature:not(.voicegen-feature),
      body.studio-design-live .hci-projects .project-feature:not(.voicegen-feature) {
        gap: 24px;
        padding: 28px;
      }
      body.studio-design-live .project-media,
      body.studio-design-live .project-copy,
      body.studio-design-live .workbench-signal__copy,
      body.studio-design-live .project-media--lag,
      body.studio-design-live .project-feature--duet .project-copy,
      body.studio-design-live .project-feature--duet .project-media {
        grid-column: auto;
      }
      body.studio-design-live .workbench-signal--lag { padding: 24px; background-position: 62% center; }
      body.studio-design-live .voicegen-feature { padding: 24px; }
      body.studio-design-live .voicegen-feature .project-copy h3 { font-size: 38px; }
      body.studio-design-live .voicegen-feature .project-media { transform: none; }
      body.studio-design-live .landing-projects .project-feature .release-badge-row,
      body.studio-design-live .hci-projects .project-feature .release-badge-row {
        position: static;
        margin: 10px 0 0;
        transform: none;
      }
      body.studio-design-live .landing-projects .project-feature .project-copy:has(> .release-badge-row) .project-status,
      body.studio-design-live .hci-projects .project-feature .project-copy:has(> .release-badge-row) .project-status {
        max-width: none;
      }
      body.studio-design-live .project-media--lag,
      body.studio-design-live .project-feature--duet .project-media { grid-row: 1; }
      body.studio-design-live .debate-stage__bar,
      body.studio-design-live .marina-stage__hud { left: 16px; right: 16px; }
      body.studio-design-live .debate-stage__card { width: min(36%, 180px); font-size: 10px; }
      body.studio-design-live .marina-stage__title { font-size: 34px; }
      body.studio-design-live .section-heading,
      body.studio-design-live .country-preview--unified { grid-template-columns: 1fr; }
      body.studio-design-live .section-heading .eyebrow { grid-column: auto; }
      body.studio-design-live .country-preview--unified { padding: 18px; }
      body.studio-design-live .hci-note { grid-template-columns: 1fr; padding: 28px; }
      body.studio-design-live .room-switcher {
        align-items: flex-start;
        flex-direction: column;
        background-position: 36% center;
        background-size: auto 100%;
      }
      body.studio-design-live .room-switcher > span { margin: 0 0 8px; }
    }

    @media (max-width: 620px) {
      body { padding: 126px 0 14px; }
      .review-strip {
        top: 6px;
        width: calc(100vw - 12px);
        grid-template-columns: 1fr 1fr;
      }
      .panel:not(#panel-layout),
      .atelier > .note {
        width: min(100%, calc(100% - 20px));
      }
      .review-brand { grid-column: 1 / -1; }
      .review-tabs { grid-column: 1 / -1; }
      .review-tab, .tool-button { min-height: 34px; padding: 0 8px; }
      .atelier-head { padding: 16px; }
      h1 { font-size: 38px; }
      .frame-effect-controls { grid-template-columns: 1fr; }
      .terminology-key, .decision-summary li { grid-template-columns: 1fr; }
      .compact-preview { grid-template-columns: 64px 1fr; }
      .compact-thumb { width: 64px; }
      body.studio-design-live .terminal-frame { inset: 8px; border-radius: 8px; }
      body.studio-design-live .frame-label { display: none; }
      body.studio-design-live .studio-masthead { gap: 10px; }
      body.studio-design-live .brand-anchor { max-width: calc(100% - 48px); padding-right: 14px; }
      body.studio-design-live .brand-anchor__copy strong { max-width: 10ch; line-height: 1.25; }
      body.studio-design-live .portal-link { flex: 0 0 38px; width: 38px; min-height: 38px; justify-content: center; padding: 0; border: 1px solid currentColor; border-radius: 50%; white-space: nowrap; }
      body.studio-design-live .portal-link__label { display: none; }
      body.studio-design-live .studio-intro { gap: 10px; padding: 22px 18px; }
      body.studio-design-live .studio-intro h1 { max-width: none; font-size: 30px; }
      body.studio-design-live .studio-intro__lede { font-size: 13px; line-height: 1.42; }
      body.studio-design-live .chirabi-portal__copy strong { font-size: 28px; }
      body.studio-design-live .studio-room { inset: 126px 0 0; }
      body.studio-design-live .room-hero h2 { font-size: 52px; }
      body.studio-design-live .project-copy h3,
      body.studio-design-live .section-heading h3 { font-size: 30px; }
      body.studio-design-live .app-arcade { gap: 12px; }
      body.studio-design-live .app-arcade__head { gap: 11px; padding: 18px; }
      body.studio-design-live .app-arcade__head h2 { font-size: 28px; }
      body.studio-design-live .app-arcade__head p:not(.eyebrow) { display: none; }
      body.studio-design-live .app-window { padding: 14px; border-radius: 18px; }
      body.studio-design-live .app-window__media { min-height: 160px; border-radius: 14px; }
      body.studio-design-live .app-window--wide .app-window__media { min-height: 170px; }
      body.studio-design-live .app-window__copy strong,
      body.studio-design-live .app-window--wide .app-window__copy strong { font-size: 28px; }
      body.studio-design-live .app-window__summary { font-size: 13px; }
      body.studio-design-live .app-window__labels { gap: 5px; }
      body.studio-design-live .debate-stage__bar,
      body.studio-design-live .marina-stage__hud { font-size: 6px; }
      body.studio-design-live .welfare-stage__bar,
      body.studio-design-live .rights-stage__bar,
      body.studio-design-live .gengo-stage__bar,
      body.studio-design-live .roulette-stage__bar {
        left: 14px;
        right: 14px;
        top: 14px;
        font-size: 6px;
      }
      body.studio-design-live .welfare-stage__bar span,
      body.studio-design-live .rights-stage__bar span,
      body.studio-design-live .gengo-stage__bar span,
      body.studio-design-live .roulette-stage__bar span {
        padding: 6px 7px;
      }
      body.studio-design-live .welfare-stage__sentence {
        top: 29%;
        padding: 12px 13px;
        font-size: 21px;
      }
      body.studio-design-live .welfare-stage__node {
        bottom: 12%;
        min-width: 54px;
        padding: 8px 9px;
        font-size: 6px;
      }
      body.studio-design-live .welfare-stage__node strong { font-size: 9px; }
      body.studio-design-live .welfare-stage__stamp { display: none; }
      body.studio-design-live .rights-stage__source,
      body.studio-design-live .rights-stage__plain {
        top: 32%;
        width: 37%;
        min-height: 38%;
        padding: 10px;
      }
      body.studio-design-live .rights-stage__source small,
      body.studio-design-live .rights-stage__plain small {
        margin-bottom: 7px;
        font-size: 6px;
      }
      body.studio-design-live .rights-stage__source span,
      body.studio-design-live .rights-stage__plain span {
        font-size: 16px;
      }
      body.studio-design-live .rights-stage__source em,
      body.studio-design-live .rights-stage__plain em {
        display: none;
      }
      body.studio-design-live .rights-stage__arrow { width: 40px; }
      body.studio-design-live .gengo-stage__board { top: 30%; }
      body.studio-design-live .gengo-stage__board strong { font-size: 24px; }
      body.studio-design-live .gengo-stage__board span { padding: 7px 8px; font-size: 6px; }
      body.studio-design-live .gengo-stage__bubble { display: none; }
      body.studio-design-live .gengo-stage__teacher {
        bottom: 8%;
        width: min(33%, 92px);
      }
      body.studio-design-live .roulette-stage__machine {
        left: 9%;
        right: 9%;
        top: 28%;
        gap: 8px;
        padding: 12px;
      }
      body.studio-design-live .roulette-stage__reels { gap: 6px; }
      body.studio-design-live .roulette-stage__reels span {
        min-height: 38px;
        border-radius: 9px;
        font-size: 7px;
      }
      body.studio-design-live .roulette-stage__readme {
        padding: 9px 10px;
        font-size: 8px;
      }
      body.studio-design-live .debate-stage__bar span:nth-child(2),
      body.studio-design-live .marina-stage__hud span:nth-child(2) { display: none; }
      body.studio-design-live .debate-stage__card { display: none; }
      body.studio-design-live .debate-stage__speaker { bottom: 18px; width: min(39%, 104px); }
      body.studio-design-live .debate-stage__speaker--tsuki { left: 8%; }
      body.studio-design-live .debate-stage__speaker--selene { right: 8%; }
      body.studio-design-live .debate-stage__source { width: 58px; height: 58px; font-size: 6px; }
      body.studio-design-live .marina-stage__title { font-size: 26px; }
      body.studio-design-live .marina-stage__sprite { width: min(35%, 108px); }
      .asset-card { padding: 14px; border-radius: 14px; }
      .asset-card strong,
      .asset-card--small strong { font-size: 25px; }
      .asset-section__head,
      .asset-section__grid { grid-template-columns: 1fr; }
      .asset-section__head h3 { font-size: 28px; }
      body.studio-design-live .country-preview__copy { padding: 8px; }
      body.studio-design-live .country-preview__copy h4 { font-size: 24px; }
      body.studio-design-live .room-switcher { padding: 24px; }
      .access-mode-grid { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }


body.studio-design-live { overflow-x: hidden; overflow-y: auto; }
body.studio-design-live::after,
body.studio-design-live .grid-bg,
body.studio-design-live .terminal-frame { position: fixed; }
body.studio-design-live .studio-landing { overflow: visible; }
/* DIRECT APP SHELF PORT FROM ATELIER: END */