@property --pins { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --form { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --inspect { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --turn { syntax: '<angle>'; inherits: true; initial-value: -120deg; }

.mini-label {
    display: block;
    color: var(--seal-burgundy);
    font-size: 12px;
}

/* ── The dial: Direct → Build → Audit ─────────────────────────── */

.loop {
    --key-silver: linear-gradient(135deg,#fbfbfc 0%,#9aa0a9 21%,#eef0f2 44%,#757a84 68%,#dfe2e6 100%);
    position: relative;
    overflow-x: clip;
    background: #18171c;
}

.loop__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(250px,29%) 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 28px 4vw;
    min-height: 100svh;
    padding: clamp(56px,9svh,96px) var(--page-edge) clamp(36px,6svh,64px);
}

.loop__heading {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
}

.loop__heading h2 {
    margin-top: 22px;
    max-width: 13ch;
    font: 600 clamp(26px,2.3vw,40px)/1.04 var(--reading-face);
    letter-spacing: -.035em;
}

.loop__brief {
    max-width: 30ch;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid #f4f1ee2b;
    color: var(--sen-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.loop__scene {
    position: absolute;
    top: clamp(56px,9svh,96px);
    right: var(--page-edge);
    color: var(--sen-secondary);
    font-size: 12px;
}

.dial {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: center;
    position: relative;
    width: min(86svh,58vw);
    aspect-ratio: 1;
    container-type: inline-size;
}

.dial__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(var(--turn));
}

.dial__ticks {
    fill: none;
    stroke: #f4f1ee30;
    stroke-width: 12;
    stroke-dasharray: 1.6 13;
}

.dial__track,.dial__progress {
    fill: none;
    stroke-width: 2;
}

.dial__track {
    stroke: #f4f1ee14;
}

.dial__progress {
    stroke: var(--seal-lit);
    stroke-width: 3;
    stroke-dasharray: 0 1;
    transform: rotate(-90deg);
    transform-origin: 500px 500px;
}

.dial__word {
    font: 400 116px var(--poster-face);
    letter-spacing: 4px;
    fill: transparent;
    stroke: #f4f1ee52;
    stroke-width: 1.4;
    transition: fill 380ms ease-out, stroke 380ms ease-out;
}

.loop[data-phase="0"] .dial__word[data-word="0"],.loop[data-phase="1"] .dial__word[data-word="1"],.loop[data-phase="2"] .dial__word[data-word="2"] {
    fill: var(--sen-letter);
    stroke: transparent;
}

.dial__seal {
    fill: url(#dial-seal);
}

.loop-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74%;
    aspect-ratio: 4 / 3;
    padding: 1.5cqw;
    border-radius: 2.4cqw;
    background: var(--key-silver);
    box-shadow: inset 0 0 0 1px #ffffffb0, inset 0 -4px 7px #0007, 0 44px 70px -34px #000;
    translate: -50% -50%;
}

.loop-frame__screw {
    position: absolute;
    width: 1cqw;
    height: 1cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,#fff,#8d929b 55%,#4c5058);
    translate: -50% -50%;
}

.loop-frame__screw:nth-of-type(1) { left: .75cqw; top: .75cqw; }
.loop-frame__screw:nth-of-type(2) { right: .75cqw; top: .75cqw; translate: 50% -50%; }
.loop-frame__screw:nth-of-type(3) { right: .75cqw; bottom: .75cqw; translate: 50% 50%; }
.loop-frame__screw:nth-of-type(4) { left: .75cqw; bottom: .75cqw; translate: -50% 50%; }

.loop-window {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1cqw;
    background: #0d0c0f;
    color: #2c1a1d;
    container-type: size;
}

.loop-window::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #121216;
    opacity: calc(var(--inspect) * .16);
    pointer-events: none;
}

.lw-photo {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 calc(var(--form) * 48%));
}

.lw-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
    transform: translateX(calc(var(--form) * 14%)) scale(calc(1 + var(--form) * .05));
}

.lw-pin {
    --show: calc(clamp(0, var(--pins) * 4.4 - var(--i), 1) * clamp(0, 1 - var(--form) * 3, 1));
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: 3.1cqw;
    height: 3.1cqw;
    border: .35cqw solid #fff;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 .2cqw #0004, 0 .8cqw 1.8cqw #0008;
    opacity: var(--show);
    transform: translate(-50%,-50%) scale(calc(.3 + var(--show) * .7));
}

.lw-pin b {
    position: absolute;
    left: calc(100% + 1.4cqw);
    top: 50%;
    padding: .5cqw 1.1cqw .55cqw;
    border-radius: 99px;
    background: #f4f1eef2;
    color: #1d1a1c;
    font-size: 1.9cqw;
    font-weight: 600;
    white-space: nowrap;
    translate: 0 -50%;
}

.lw-pin b::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: 1.2cqw;
    border-top: 1px solid #f4f1eed0;
}

.lw-pin--left b {
    left: auto;
    right: calc(100% + 1.4cqw);
}

.lw-pin--left b::before {
    right: auto;
    left: 100%;
}

.lw-contract {
    --show: clamp(0, var(--pins) * 2.6 - 1.5, 1);
    position: absolute;
    left: 3.4cqw;
    top: 4.6cqh;
    z-index: 2;
    width: 38cqw;
    padding: 2.3cqw 2.4cqw 2.5cqw;
    border-radius: .9cqw;
    background: var(--gallery-light);
    opacity: calc(var(--show) * clamp(0, 1 - var(--form) * 2.6, 1));
    transform: translateY(calc((1 - var(--show) + var(--form)) * 5cqh));
}

.lw-contract .mini-label {
    font-size: 1.8cqw;
}

.lw-contract h3 {
    margin-top: .9cqw;
    font: 600 3.4cqw/1 var(--reading-face);
    letter-spacing: -.04em;
}

.lw-contract p {
    margin-top: .9cqw;
    font-size: 1.9cqw;
    line-height: 1.35;
}

.lw-swatches {
    display: flex;
    gap: .8cqw;
    margin-top: 1.6cqw;
}

.lw-swatches i {
    width: 3.2cqw;
    height: 3.2cqw;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px #0002;
}

.lw-page {
    position: absolute;
    inset: 0 52% 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 4.2cqh 3.6cqw;
    background: #e8d8c9;
    clip-path: circle(calc(var(--form) * 135%) at 10% 12%);
}

.lw-page__nav {
    display: flex;
    justify-content: space-between;
    gap: 2cqw;
    font-size: 1.8cqw;
    white-space: pre;
}

.lw-page h3 {
    margin-top: auto;
    font: 600 6.6cqw/.94 var(--reading-face);
    letter-spacing: -.055em;
    color: #3d1a20;
}

.lw-page h3 span {
    display: block;
    transform: translateY(calc((1 - var(--form)) * 70%));
}

.lw-page h3 span + span {
    transform: translateY(calc((1 - var(--form)) * 120%));
}

.lw-page p {
    max-width: 24ch;
    margin-top: 2.6cqh;
    font-size: 2cqw;
    line-height: 1.4;
}

.lw-page__link {
    align-self: flex-start;
    margin: 3cqh 0 6cqh;
    padding-bottom: .3cqw;
    border-bottom: 1px solid currentColor;
    font-size: 1.8cqw;
}

.lw-marks {
    position: absolute;
    inset: 0;
    z-index: 4;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.lw-mark {
    --m: clamp(0, var(--inspect) * 3.4 - var(--k), 1);
    position: absolute;
}

.lw-mark svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lw-mark path {
    fill: none;
    stroke: var(--seal-lit);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: calc((1 - var(--m)) * 1400);
    opacity: calc(var(--m) * 8);
    vector-effect: non-scaling-stroke;
}

.lw-mark > span {
    position: absolute;
    display: flex;
    align-items: baseline;
    gap: .9cqw;
    width: max-content;
    max-width: 34cqw;
    padding: .7cqw 1.2cqw .8cqw .8cqw;
    border-radius: .7cqw;
    background: #121216;
    color: var(--sen-letter);
    font-size: 1.85cqw;
    line-height: 1.3;
    opacity: var(--m);
    transform: translateY(calc((1 - var(--m)) * 1.5cqw));
}

.lw-mark em {
    flex: none;
    padding: .25cqw .8cqw .3cqw;
    border-radius: 99px;
    background: var(--seal-lit);
    color: #2a0a12;
    font-style: normal;
    font-weight: 600;
}

.lw-mark--0 { --k: 0; left: 1.5cqw; top: 46cqh; width: 46cqw; height: 34cqh; }
.lw-mark--0 > span { left: 3cqw; bottom: calc(100% + 1cqh); }
.lw-mark--0 em { background: var(--gallery-light); }
.lw-mark--1 { --k: 1; left: 49.5cqw; top: 9cqh; width: 3.5cqw; height: 82cqh; }
.lw-mark--1 > span { left: calc(100% + 1cqw); top: 0; }
.lw-mark--2 { --k: 2; left: 60cqw; top: 66cqh; width: 26cqw; height: 18cqh; }
.lw-mark--2 > span { right: 0; bottom: calc(100% + 1.4cqh); }

.lw-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 5;
    height: 2px;
    background: var(--seal-lit);
    box-shadow: 0 0 22px 2px #e36d8c99;
    opacity: calc(var(--inspect) * (1 - var(--inspect)) * 4);
    transform: translateY(calc(var(--inspect) * 100cqh));
}

.loop__thinking {
    grid-column: 1;
    grid-row: 3;
    z-index: 2;
}

.loop__count {
    color: var(--sen-secondary);
    font-size: 13px;
}

.loop__count span {
    margin-right: 6px;
    color: var(--sen-letter);
    font: 400 44px/1 var(--poster-face);
}

.workflow__description {
    max-width: 34ch;
    min-height: 6.4em;
    margin-top: 16px;
    color: var(--sen-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.workflow__description strong {
    color: var(--sen-letter);
    font-weight: 600;
}

.workflow__description > p + p {
    margin-top: 12px;
}

.mode-controls {
    display: grid;
    margin-top: 18px;
    border-top: 1px solid #f4f1ee26;
}

.mode-control {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #f4f1ee26;
    background: none;
    color: var(--sen-secondary);
    font-size: 13px;
    text-align: left;
    transition: color 200ms ease-out;
}

.mode-control strong {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
}

.mode-control strong::before {
    content: '';
    width: 9px;
    height: 9px;
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

.mode-control:hover {
    color: var(--sen-letter);
}

.mode-control[aria-pressed="true"] {
    color: var(--sen-letter);
}

.mode-control[aria-pressed="true"] strong::before {
    border-color: var(--seal-lit);
    background: var(--seal-lit);
}

.loop__hint {
    margin-top: 12px;
    color: #8f8a90;
    font-size: 11px;
}

.loop:not(.is-cinema) {
    transition: --pins 700ms cubic-bezier(.6,0,.2,1), --form 900ms cubic-bezier(.6,0,.2,1), --inspect 1100ms cubic-bezier(.45,0,.2,1), --turn 900ms cubic-bezier(.65,0,.15,1);
}

html.js:not(.reduce-motion) .loop.is-cinema {
    height: 330svh;
}

.loop.is-cinema .loop__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
}

/* ── The direction map ────────────────────────────────────────── */

.playground {
    --map: min(34svh,25vw);
    --lab-ink: #19171a;
    position: relative;
    background: var(--gallery-light);
    color: var(--lab-ink);
}

.playground__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas: "intro picker" "study console" "note console";
    gap: 22px clamp(28px,4vw,64px);
    min-height: 100svh;
    padding: clamp(40px,6.5svh,72px) var(--page-edge) clamp(24px,4svh,44px);
}

.playground__intro {
    grid-area: intro;
    display: grid;
    grid-template-columns: auto minmax(0,34ch);
    align-items: end;
    gap: 6px 3.5vw;
}

.playground__intro .section-label {
    grid-column: 1 / -1;
    margin-bottom: 10px;
    color: var(--seal-burgundy);
}

.playground h2 {
    font: 400 clamp(32px,3.5vw,58px)/.98 var(--poster-face);
    letter-spacing: -.035em;
}

.playground__intro > p:last-child {
    padding-bottom: 4px;
    color: #4c474b;
    font-size: 14px;
    line-height: 1.5;
}

.brief-picker {
    grid-area: picker;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.brief-picker button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #19171a33;
    border-radius: 99px;
    background: none;
    color: var(--lab-ink);
    font-size: 13px;
    transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.brief-picker button:hover {
    border-color: var(--seal-burgundy);
}

.brief-picker button[aria-pressed="true"] {
    border-color: var(--lab-ink);
    background: var(--lab-ink);
    color: var(--gallery-light);
}

.study {
    --study-base: var(--brief-base);
    --study-ink: #2a2426;
    --study-accent: var(--brief-color);
    --move: 820ms cubic-bezier(.76,0,.22,1);
    grid-area: study;
    position: relative;
    min-height: 380px;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    background: var(--study-base);
    color: var(--study-ink);
    container-type: size;
    transition: background-color 500ms ease-out, color 500ms ease-out;
}

.study > * {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--w);
    margin: 0;
    transition: left var(--move), top var(--move), width var(--move), height var(--move), font-size var(--move), transform var(--move), opacity 380ms ease-out, color 500ms ease-out;
}

.study__panel {
    z-index: 1;
    height: var(--h);
    background: var(--study-base);
    opacity: 0;
    transition-property: left, top, width, height, opacity, background-color;
}

.study__media {
    z-index: 0;
    height: var(--h);
    overflow: hidden;
    background: var(--study-accent);
    border: 0 solid var(--study-accent);
    transition: left var(--move), top var(--move), width var(--move), height var(--move), transform var(--move), border-width var(--move);
}

.study__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 500ms ease-out;
}

.study__brand {
    z-index: 2;
    font-size: max(12px,2cqw);
    font-weight: 700;
    letter-spacing: -.02em;
}

.study__mark {
    z-index: 3;
    left: 88%;
    top: 4%;
    color: var(--study-accent);
    font-size: 6cqw;
    line-height: 1;
    opacity: 0;
}

.study__echo {
    z-index: 0;
    left: -4%;
    top: 30%;
    width: auto;
    color: transparent;
    font: 400 24cqh/1 var(--poster-face);
    white-space: nowrap;
    -webkit-text-stroke: 1px var(--study-accent);
    opacity: 0;
}

.study__sub {
    z-index: 2;
    font-size: max(11px,1.45cqw);
}

.study__title {
    z-index: 2;
    font: 500 var(--fs,7cqw)/.92 var(--reading-face);
    letter-spacing: -.045em;
    transition: left var(--move), top var(--move), width var(--move), font-size var(--move), transform var(--move), color 500ms ease-out;
}

.study__detail {
    z-index: 2;
    font-size: max(11px,1.35cqw);
    line-height: 1.45;
}

.study__foot {
    z-index: 2;
    left: auto;
    right: 2.4cqw;
    top: auto;
    bottom: 2.2cqh;
    width: auto;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--study-base);
    font-size: 11px;
}

.study[data-layout="1"] { --fs: 6cqw; }
.study[data-layout="1"] .study__brand { --l: 0%; --t: 5%; --w: 100%; text-align: center; }
.study[data-layout="1"] .study__media { --l: 12%; --t: 14%; --w: 76%; --h: 46%; }
.study[data-layout="1"] .study__sub { --l: 10%; --t: 65%; --w: 80%; text-align: center; }
.study[data-layout="1"] .study__title { --l: 10%; --t: 70%; --w: 80%; text-align: center; }
.study[data-layout="1"] .study__title br { display: none; }
.study[data-layout="1"] .study__detail { --l: 20%; --t: 84%; --w: 60%; text-align: center; }

.study[data-layout="2"] { --fs: 8cqw; }
.study[data-layout="2"] .study__brand { --l: 5%; --t: 6%; --w: 40%; }
.study[data-layout="2"] .study__media { --l: 52%; --t: 0%; --w: 48%; --h: 100%; }
.study[data-layout="2"] .study__sub { --l: 5%; --t: 30%; --w: 40%; }
.study[data-layout="2"] .study__title { --l: 5%; --t: 36%; --w: 44%; }
.study[data-layout="2"] .study__detail { --l: 5%; --t: 76%; --w: 32%; }

.study[data-layout="3"] { --fs: 12.5cqw; }
.study[data-layout="3"] .study__brand { --l: 5%; --t: 6%; --w: 30%; }
.study[data-layout="3"] .study__media { --l: 40%; --t: 9%; --w: 54%; --h: 62%; }
.study[data-layout="3"] .study__sub { --l: 5%; --t: 26%; --w: 30%; }
.study[data-layout="3"] .study__title { --l: 4%; --t: 46%; --w: 80%; }
.study[data-layout="3"] .study__detail { --l: 60%; --t: 78%; --w: 30%; }

.study[data-layout="4"] { --fs: 9.5cqw; }
.study[data-layout="4"] .study__media { --l: 0%; --t: 0%; --w: 100%; --h: 100%; }
.study[data-layout="4"] .study__panel { --l: 0%; --t: 44%; --w: 58%; --h: 56%; opacity: 1; }
.study[data-layout="4"] .study__brand { --l: 3.5%; --t: 49%; --w: 40%; }
.study[data-layout="4"] .study__sub { --l: 3.5%; --t: 49%; --w: 40%; opacity: 0; }
.study[data-layout="4"] .study__title { --l: 3.5%; --t: 56%; --w: 54%; }
.study[data-layout="4"] .study__detail { --l: 3.5%; --t: 88%; --w: 44%; }

.study[data-layout="5"] { --fs: 15cqh; }
.study[data-layout="5"] .study__media { --l: 33%; --t: 12%; --w: 40%; --h: 72%; border-width: 1.3cqw; transform: rotate(-7deg); }
.study[data-layout="5"] .study__brand { --l: 79%; --t: 5%; --w: 19%; }
.study[data-layout="5"] .study__sub { --l: 79%; --t: 13%; --w: 18%; }
.study[data-layout="5"] .study__title { --l: 3%; --t: 5%; --w: auto; writing-mode: vertical-rl; transform: rotate(180deg); }
.study[data-layout="5"] .study__detail { --l: 79%; --t: 72%; --w: 18%; }
.study[data-layout="5"] .study__echo { opacity: .55; }
.study[data-layout="5"] .study__mark { left: 66%; top: 66%; font-size: 15cqw; }

.study[data-character="1"] { --study-base: #e7e4e0; --study-ink: #343032; --study-accent: #6f6a6c; }
.study[data-character="1"] .study__media img { filter: grayscale(.9) contrast(.92); }
.study[data-character="2"] .study__title { font-weight: 650; }
.study[data-character="3"] .study__title,.study[data-character="4"] .study__title,.study[data-character="5"] .study__title { font-family: var(--poster-face); font-weight: 400; letter-spacing: -.045em; color: var(--study-accent); }
.study[data-character="4"] .study__mark,.study[data-character="5"] .study__mark { opacity: 1; }
.study[data-character="4"] .study__sub { text-transform: uppercase; letter-spacing: .12em; font-size: max(10px,.75cqw); }
.study[data-character="5"] { --study-base: var(--brief-color); --study-ink: var(--brief-base); --study-accent: var(--brief-base); }
.study[data-character="5"] .study__media { background: var(--brief-color); }
.study[data-character="5"] .study__media img { mix-blend-mode: luminosity; filter: contrast(1.15); }
.study[data-character="5"] .study__panel { background: var(--brief-color); }
.study[data-character="5"] .study__echo { opacity: .4; }

html.js:not(.reduce-motion) .playground.is-visible .study[data-tempo="3"] .study__media img,html.js:not(.reduce-motion) .playground.is-visible .study[data-tempo="4"] .study__media img,html.js:not(.reduce-motion) .playground.is-visible .study[data-tempo="5"] .study__media img { animation: study-drift 9s ease-in-out infinite alternate; }
html.js:not(.reduce-motion) .playground.is-visible .study[data-tempo="4"] .study__title,html.js:not(.reduce-motion) .playground.is-visible .study[data-tempo="5"] .study__title { animation: study-float 4.6s ease-in-out infinite alternate; }
html.js:not(.reduce-motion) .playground.is-visible .study[data-tempo="5"] .study__mark { animation: study-spin 14s linear infinite; }
html.js:not(.reduce-motion) .playground.is-visible .study[data-tempo="5"] .study__echo { animation: study-pan 16s linear infinite alternate; }

@keyframes study-drift { to { transform: scale(1.08) translate(-2%,-1.5%); } }
@keyframes study-float { to { translate: 0 -1.6cqh; } }
@keyframes study-spin { to { rotate: 360deg; } }
@keyframes study-pan { to { translate: -22% 0; } }

.console {
    grid-area: console;
    align-self: center;
    display: grid;
    grid-template-columns: 34px repeat(3,calc(var(--map) / 3));
    grid-template-rows: auto auto var(--map) 34px auto auto auto auto;
    column-gap: 0;
}

.console__title {
    grid-column: 2 / -1;
    font-size: 13px;
    font-weight: 600;
}

.playground:not(.is-cinema) .lever-story {
    display: none;
}

.lever-story {
    grid-column: 2 / -1;
    margin: 3px 0 14px;
    color: var(--seal-burgundy);
    font-size: 13px;
}

.map {
    --brief-color: var(--seal-burgundy);
    grid-column: 2 / -1;
    grid-row: 3;
    position: relative;
    width: var(--map);
    height: var(--map);
    border: 1px solid #19171a2e;
    border-radius: 4px;
    background: #e8e4de;
    cursor: crosshair;
    touch-action: none;
}

.map__cells {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
}

.map__cells > span {
    position: relative;
    border-right: 1px solid #19171a14;
    border-bottom: 1px solid #19171a14;
    transition: background-color 240ms ease-out;
}

.map__cells > span[data-col="0"] { --tone: #aaa5a1; }
.map__cells > span[data-col="1"] { --tone: color-mix(in srgb,var(--brief-color) 30%,#aaa5a1); }
.map__cells > span[data-col="2"] { --tone: color-mix(in srgb,var(--brief-color) 55%,#aaa5a1); }
.map__cells > span[data-col="3"] { --tone: color-mix(in srgb,var(--brief-color) 80%,#aaa5a1); }
.map__cells > span[data-col="4"] { --tone: var(--brief-color); background: color-mix(in srgb,var(--brief-color) 9%,transparent); }
.map__cells > span:nth-child(5n) { border-right: 0; }
.map__cells > span:nth-last-child(-n+5) { border-bottom: 0; }

.map__cells i {
    position: absolute;
    background: var(--tone);
    opacity: .55;
    transition: opacity 240ms ease-out;
}

.map__cells i:last-child {
    background: #3a3437;
    opacity: .35;
}

.map__cells [data-row="0"] i:first-child { left: 22%; top: 18%; width: 56%; height: 36%; }
.map__cells [data-row="0"] i:last-child { left: 30%; top: 64%; width: 40%; height: 8%; }
.map__cells [data-row="1"] i:first-child { left: 54%; top: 16%; width: 30%; height: 68%; }
.map__cells [data-row="1"] i:last-child { left: 16%; top: 40%; width: 30%; height: 10%; }
.map__cells [data-row="2"] i:first-child { left: 40%; top: 16%; width: 46%; height: 50%; }
.map__cells [data-row="2"] i:last-child { left: 14%; top: 52%; width: 54%; height: 13%; }
.map__cells [data-row="3"] i:first-child { left: 12%; top: 12%; width: 76%; height: 76%; }
.map__cells [data-row="3"] i:last-child { left: 12%; top: 58%; width: 44%; height: 30%; background: #f1eee9; opacity: .8; }
.map__cells [data-row="4"] i:first-child { left: 36%; top: 22%; width: 32%; height: 52%; transform: rotate(-9deg); }
.map__cells [data-row="4"] i:last-child { left: 14%; top: 14%; width: 9%; height: 72%; }

.map__cells > span[data-active="true"] {
    background: #fbfaf8;
}

.map__cells > span[data-active="true"] i {
    opacity: 1;
}

.map__trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.map__trail polyline {
    fill: none;
    stroke: var(--seal-burgundy);
    stroke-width: 1.5;
    stroke-dasharray: 2 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: .55;
}

.map__cross {
    position: absolute;
    pointer-events: none;
    background: #6d323955;
}

.map__cross--x {
    top: 0;
    bottom: 0;
    left: calc(9px + (100% - 18px) * var(--cx,.72));
    width: 1px;
}

.map__cross--y {
    left: 0;
    right: 0;
    bottom: calc(9px + (100% - 18px) * var(--ly,.68));
    height: 1px;
}

.map__puck {
    position: absolute;
    left: calc(9px + (100% - 18px) * var(--cx,.72));
    bottom: calc(9px + (100% - 18px) * var(--ly,.68));
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%,#f8c1cd 0,#c04a65 30%,#6d3239 62%,#3a1218 100%);
    box-shadow: 0 10px 14px -7px #3a1218c0;
    pointer-events: none;
    translate: -50% 50%;
    transition: scale 160ms ease-out;
}

.map.is-dragging .map__puck {
    scale: 1.18;
}

.lever {
    display: contents;
}

.lever__head {
    grid-row: 5;
    display: grid;
    align-content: start;
    padding-top: 16px;
}

.lever--creativity .lever__head { grid-column: 2; }
.lever--layout .lever__head { grid-column: 3; }
.lever--motion .lever__head { grid-column: 4; }

.lever label {
    font-size: 12px;
    color: #4c474b;
}

.lever output {
    font: 400 38px/1.05 var(--poster-face);
    letter-spacing: -.03em;
}

.lever__band {
    color: var(--seal-burgundy);
    font-size: 11px;
}

.lever__rail {
    position: relative;
    display: block;
}

.lever--creativity .lever__rail { grid-column: 2 / -1; grid-row: 4; }
.lever--layout .lever__rail { grid-column: 1; grid-row: 3; }
.lever--motion .lever__rail { grid-column: 2 / -1; grid-row: 6; margin-top: 10px; }

.lever input {
    display: block;
    width: 100%;
    height: 34px;
    margin: 0;
    background: none;
    appearance: none;
    cursor: pointer;
}

.lever--layout input {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--map);
    transform: translate(-50%,-50%) rotate(-90deg);
}

.lever input::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(90deg,var(--seal-burgundy) var(--range-fill,70%),#19171a33 0);
}

.lever input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border: 2px solid var(--gallery-light);
    border-radius: 50%;
    background: var(--seal-burgundy);
    box-shadow: 0 0 0 1px var(--seal-burgundy);
    appearance: none;
}

.lever input::-moz-range-track {
    height: 2px;
    background: #19171a33;
}

.lever input::-moz-range-progress {
    height: 2px;
    background: var(--seal-burgundy);
}

.lever input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--gallery-light);
    border-radius: 50%;
    background: var(--seal-burgundy);
    box-shadow: 0 0 0 1px var(--seal-burgundy);
}

.lever input:focus-visible {
    outline: 2px solid var(--seal-burgundy);
    outline-offset: 2px;
}

.console__hint {
    grid-column: 2 / -1;
    grid-row: 7;
    margin-top: 6px;
    color: #6b656a;
    font-size: 11px;
}

.console__foot {
    grid-column: 2 / -1;
    grid-row: 8;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

#play-motion {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--lab-ink);
    border-radius: 4px;
    white-space: nowrap;
    background: none;
    color: var(--lab-ink);
    font-size: 12px;
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

#play-motion:hover {
    background: var(--lab-ink);
    color: var(--gallery-light);
}

#play-motion:disabled {
    opacity: .4;
    pointer-events: none;
}

.motion-note {
    color: #6b656a;
    font-size: 11px;
}

.lab-disclaimer {
    grid-area: note;
    color: #6b656a;
    font-size: 11px;
}

.no-js-note {
    grid-column: 1 / -1;
    font-size: 13px;
}

.lever-follow {
    display: none;
}

html.js:not(.reduce-motion) .playground.is-cinema {
    height: 260svh;
}

.playground.is-cinema .playground__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
}

.playground.is-cinema .lever-follow:not([hidden]) {
    position: absolute;
    right: var(--page-edge);
    bottom: clamp(18px,3svh,36px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 99px;
    background: var(--seal-burgundy);
    color: var(--gallery-light);
    font-size: 12px;
}

/* ── The loupe: four costumes, one skeleton ───────────────────── */

.closer {
    --card: min(18.5vw,38svh);
    --frame: 13px;
    position: relative;
    background: #101013;
}

.closer__stage {
    position: relative;
    min-height: 100svh;
    padding: clamp(56px,8svh,90px) var(--page-edge) clamp(40px,7svh,72px);
}

.closer__heading {
    position: relative;
    z-index: 3;
}

.closer__heading .section-label {
    color: var(--sen-secondary);
}

.closer h2 {
    margin-top: 18px;
    font: 400 clamp(36px,4.6vw,82px)/.95 var(--poster-face);
    letter-spacing: -.04em;
}

.closer__lede {
    max-width: 34ch;
    margin-top: 18px;
    color: var(--sen-secondary);
    font-size: 15px;
}

.lineup {
    position: relative;
    margin-top: clamp(36px,6svh,64px);
}

.lineup__row,.lineup__xray {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px clamp(16px,1.8vw,30px);
}

.lineup__xray {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.costume,.xray-card {
    width: var(--card);
    margin: 0;
}

.skel {
    position: relative;
    display: grid;
    grid-template-rows: 9% 46% 1fr 8%;
    gap: 3.5%;
    aspect-ratio: 3 / 4;
    padding: 6% 7%;
    overflow: hidden;
    border-radius: 6px;
    container-type: inline-size;
}

.sk-nav {
    display: flex;
    align-items: center;
    gap: 5cqw;
    min-width: 0;
}

.sk-nav b {
    margin-right: auto;
    font-size: 4.4cqw;
    white-space: nowrap;
}

.costume .sk-nav span {
    width: 7cqw;
    height: 1.2cqw;
    border-radius: 1px;
    background: currentColor;
    opacity: .45;
}

.sk-nav i {
    padding: 1.6cqw 3cqw;
    font-size: 3.4cqw;
    font-style: normal;
    white-space: nowrap;
}

.sk-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.4cqw;
    min-width: 0;
}

.sk-hero small {
    font-size: 3.3cqw;
}

.sk-hero strong {
    font-size: 9.4cqw;
    line-height: .98;
}

.sk-btns {
    display: flex;
    gap: 2.6cqw;
}

.sk-btns i {
    width: 22cqw;
    height: 7.4cqw;
}

.sk-cells {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4cqw;
}

.sk-foot {
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 3.2cqw;
    white-space: nowrap;
}

.costume figcaption {
    margin-top: 14px;
    color: var(--sen-secondary);
    font-size: 13px;
    transition: color 240ms ease-out;
}

.closer.is-cinema .costume figcaption {
    opacity: var(--captions,1);
}

.costume[data-active="true"] figcaption {
    color: var(--sen-letter);
}

.costume--0 .skel {
    background: radial-gradient(circle at 82% 12%,#8a5cff 0,#8a5cff00 52%),radial-gradient(circle at 10% 92%,#1fb7ff99 0,#1fb7ff00 48%),#0e0b25;
    color: #fff;
    font-family: var(--reading-face);
}

.costume--0 .sk-nav {
    margin: 0 -2cqw;
    padding: 0 3cqw;
    border: 1px solid #ffffff2a;
    border-radius: 99px;
    background: #ffffff14;
}

.costume--0 .sk-nav i,.costume--0 .sk-btns i:first-child {
    border-radius: 99px;
    background: linear-gradient(90deg,#8a5cff,#1fb7ff);
}

.costume--0 .sk-btns i:last-child {
    border: 1px solid #ffffff55;
    border-radius: 99px;
}

.costume--0 .sk-hero {
    align-items: center;
    text-align: center;
}

.costume--0 .sk-hero small {
    padding: 1cqw 3cqw;
    border: 1px solid #ffffff33;
    border-radius: 99px;
}

.costume--0 .sk-hero strong {
    font-weight: 700;
    letter-spacing: -.04em;
    background: linear-gradient(90deg,#fff,#b9a5ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.costume--0 .sk-cells i {
    border: 1px solid #ffffff1f;
    border-radius: 3cqw;
    background: #ffffff0f;
}

.costume--0 .sk-cells i:nth-child(2) {
    transform: translateY(-5%);
    box-shadow: 0 6cqw 10cqw -4cqw #8a5cff88;
}

.costume--0 .sk-foot {
    color: #ffffff70;
}

.costume--1 .skel {
    border-radius: 0;
    background: radial-gradient(#00000014 .6px,transparent .9px) 0 0 / 3px 3px,#f5f5f0;
    color: #000;
    font-family: "Courier New",ui-monospace,monospace;
}

.costume--1 .sk-nav {
    margin: 0 -7cqw;
    padding: 0 7cqw;
    border-bottom: 2px solid #000;
}

.costume--1 .sk-nav b {
    font-family: Impact,"Arial Narrow",sans-serif;
    font-weight: 400;
}

.costume--1 .sk-nav i {
    border: 2px solid #000;
}

.costume--1 .sk-hero strong {
    font: 400 15cqw/.86 Impact,"Arial Narrow",sans-serif;
    text-transform: uppercase;
}

.costume--1 .sk-btns i:first-child { background: #000; }
.costume--1 .sk-btns i:last-child { border: 2px solid #000; }

.costume--1 .sk-cells i {
    border: 2px solid #000;
    background: #fff;
    box-shadow: 1.6cqw 1.6cqw 0 #000;
}

.costume--2 .skel {
    border-radius: 2px;
    background: #e9e2d1;
    color: #1e3a2f;
    font-family: Georgia,"Times New Roman",serif;
}

.costume--2 .sk-nav {
    border-bottom: 1px solid #a9814a;
}

.costume--2 .sk-nav b { font-weight: 400; font-style: italic; }
.costume--2 .sk-nav i { border-bottom: 1px solid #a9814a; padding: 1cqw 0; }
.costume--2 .sk-hero small { color: #a9814a; letter-spacing: .14em; text-transform: uppercase; font-size: 2.8cqw; }
.costume--2 .sk-hero strong { font-weight: 400; font-style: italic; font-size: 12cqw; letter-spacing: -.02em; }
.costume--2 .sk-btns i:first-child { background: #1e3a2f; }
.costume--2 .sk-btns i:last-child { border: 1px solid #a9814a; }
.costume--2 .sk-cells i { border: 1px solid #a9814a; background: #efe9db; }

.costume--2 .sk-foot {
    margin: 0 -7cqw -7cqw;
    padding: 0 7cqw;
    background: #1e3a2f;
    color: #e9e2d1;
    font-size: 2.8cqw;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.costume--3 .skel {
    border-radius: 0;
    background: #ecebe5;
    color: #191a1c;
    font-family: Arial,Helvetica,sans-serif;
}

.costume--3 .sk-nav b { font-size: 3.6cqw; letter-spacing: .24em; }
.costume--3 .sk-nav i { font-size: 3cqw; letter-spacing: .2em; }
.costume--3 .sk-hero small { color: #6b2a2a; font-size: 2.8cqw; letter-spacing: .2em; }
.costume--3 .sk-hero strong { font-size: 10cqw; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; line-height: .92; }
.costume--3 .sk-btns i:first-child { background: #191a1c; }
.costume--3 .sk-btns i:last-child { border: 1px solid #191a1c55; }
.costume--3 .sk-cells { counter-reset: lot; }
.costume--3 .sk-cells i { position: relative; border-top: 1px solid #191a1c; counter-increment: lot; }
.costume--3 .sk-cells i::before { content: 'LOT 0' counter(lot); position: absolute; top: 2.4cqw; left: 0; font: 400 2.6cqw ui-monospace,monospace; font-style: normal; letter-spacing: .1em; }
.costume--3 .sk-foot { font-family: ui-monospace,monospace; color: #6b2a2a; font-size: 2.8cqw; letter-spacing: .08em; }

.skel--xray {
    background: linear-gradient(#e36d8c12 1px,transparent 1px) 0 0 / 100% 8cqw,linear-gradient(90deg,#e36d8c12 1px,transparent 1px) 0 0 / 8cqw 100%,#16151a;
    color: var(--seal-lit);
    font-family: var(--reading-face);
}

.skel--xray > div {
    position: relative;
    border: 1px dashed #e36d8cb0;
    border-radius: 3px;
}

.skel--xray > .sk-cells {
    border: 0;
}

.skel--xray .sk-cells i {
    border: 1px dashed #e36d8cb0;
    border-radius: 3px;
}

.xray-slot {
    position: absolute;
    left: 2.4cqw;
    top: 1.6cqw;
    font-size: 3.4cqw;
}

.xray-tag {
    position: absolute;
    right: 2.4cqw;
    bottom: 2.4cqw;
    z-index: 1;
    padding: 1cqw 2.6cqw 1.2cqw;
    border-radius: 99px;
    background: var(--seal-lit);
    color: #2a0a12;
    font-size: 3.6cqw;
    font-weight: 600;
    white-space: nowrap;
    opacity: var(--tags,1);
}

.sk-nav .xray-slot,.sk-foot .xray-slot {
    top: 50%;
    translate: 0 -50%;
}

.sk-nav .xray-tag,.sk-foot .xray-tag {
    bottom: 50%;
    translate: 0 50%;
}

.sk-cells .xray-slot {
    left: 0;
    top: -5.6cqw;
}

.sk-cells .xray-tag {
    right: -2cqw;
    bottom: -2.6cqw;
}

.lineup__xray .xray-card {
    clip-path: inset(0 0 0 50%);
}

.lineup__xray .xray-card .skel {
    box-shadow: inset 2px 0 0 var(--seal-lit);
}

.loupe {
    display: none;
}

.verdict {
    position: relative;
    z-index: 3;
    max-width: 46ch;
    margin-top: clamp(48px,8svh,90px);
}

.verdict h3 {
    font: 400 clamp(30px,3.3vw,56px)/.98 var(--poster-face);
    letter-spacing: -.035em;
}

.verdict > p {
    margin-top: 18px;
    color: var(--sen-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.tell-count {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: 28px;
}

.tell-count > span {
    color: var(--gallery-rose);
    font: 400 72px/.8 var(--poster-face);
    letter-spacing: -.05em;
}

.tell-count > p {
    max-width: 13ch;
    font-size: 13px;
    line-height: 1.3;
}

.verdict .tell-count__body {
    margin-top: 16px;
    font-size: 13px;
}

.verdict .text-link {
    margin-top: 16px;
}

html.js:not(.reduce-motion) .closer.is-cinema {
    height: 320svh;
}

.closer.is-cinema .closer__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
}

.closer.is-cinema .lineup {
    position: absolute;
    left: var(--page-edge);
    right: var(--page-edge);
    top: 40svh;
    margin: 0;
}

.closer.is-cinema .lineup__row,.closer.is-cinema .lineup__xray {
    flex-wrap: nowrap;
}

.closer.is-cinema .lineup__xray {
    clip-path: inset(var(--clip-t,0) var(--clip-r,0) var(--clip-b,0) var(--clip-l,0) round 6px);
}

.closer.is-cinema .lineup__xray .xray-card {
    clip-path: none;
}

.closer.is-cinema .lineup__xray .xray-card .skel {
    box-shadow: none;
}

.closer.is-cinema .costume,.closer.is-cinema .xray-card {
    flex: none;
}

.closer.is-cinema .loupe {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: block;
    width: calc(var(--card) + var(--frame) * 2);
    aspect-ratio: auto;
    height: calc(var(--card) * 4 / 3 + var(--frame) * 2);
    padding: var(--frame);
    border-radius: 14px;
    background: linear-gradient(135deg,#fbfbfc 0%,#9aa0a9 21%,#eef0f2 44%,#757a84 68%,#dfe2e6 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    filter: drop-shadow(0 18px 24px #000a);
    pointer-events: none;
}

.loupe span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,#fff,#8d929b 55%,#4c5058);
}

.loupe span:nth-child(1) { left: 3px; top: 3px; }
.loupe span:nth-child(2) { right: 3px; top: 3px; }
.loupe span:nth-child(3) { right: 3px; bottom: 3px; }
.loupe span:nth-child(4) { left: 3px; bottom: 3px; }

.closer.is-cinema .verdict {
    position: absolute;
    left: 54%;
    right: var(--page-edge);
    top: 38svh;
    max-width: 44ch;
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media(max-width:1100px) and (min-width:701px) {
    .loop__stage { grid-template-columns: minmax(230px,32%) 1fr; }
    .dial { width: min(80svh,56vw); }
    .playground { --map: min(30svh,26vw); }
    .playground__intro { grid-template-columns: auto; }
    .playground__intro > p:last-child { display: none; }
    .lever output { font-size: 30px; }
}

@media(max-width:999px) {
    .playground { --map: min(56vw,40svh); }
    .playground__stage {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "intro" "picker" "study" "console" "note";
    }
    .playground__intro { grid-template-columns: 1fr; }
    .playground__intro > p:last-child { display: block; }
    .brief-picker { justify-content: flex-start; }
    .study { min-height: 0; aspect-ratio: 4 / 3; }
    .console { justify-self: center; }
}

@media(max-height:760px) and (min-width:701px) {
    .loop__heading h2 { font-size: 24px; }
    .loop__brief { margin-top: 16px; padding-top: 12px; font-size: 13px; }
    .loop__hint { display: none; }
    .workflow__description { min-height: 0; font-size: 14px; }
    .playground { --map: min(30svh,24vw); }
    .console__hint { display: none; }
    .lever output { font-size: 30px; }
    .closer h2 { font-size: clamp(32px,3.8vw,64px); }
    .closer__lede { margin-top: 12px; font-size: 14px; }
    .closer.is-cinema .lineup { top: 37svh; }
    .closer { --card: min(18vw,36svh); }
    .verdict > p { font-size: 14px; }
    .tell-count { margin-top: 18px; }
    .tell-count > span { font-size: 56px; }
    .verdict .tell-count__body { display: none; }
}

@media(max-width:700px) {
    .loop__stage {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto auto;
        gap: 18px;
        padding: 40px var(--page-edge) 30px;
    }
    .loop__heading h2 { margin-top: 12px; font-size: 22px; max-width: none; }
    .loop__brief { display: none; }
    .loop__scene { display: none; }
    .loop__stage { grid-template-rows: auto 1fr auto; }
    .dial { grid-column: 1; grid-row: 2; justify-self: start; left: 50%; width: min(118vw,54svh); translate: -50% 0; }
    .loop__thinking { grid-row: 3; }
    .loop__count span { font-size: 30px; }
    .workflow__description { min-height: 0; margin-top: 8px; font-size: 13px; }
    .mode-controls { grid-template-columns: repeat(3,1fr); margin-top: 12px; border-top: 0; }
    .mode-control { grid-template-columns: 1fr; justify-items: start; border-bottom-width: 2px; }
    .mode-control[aria-pressed="true"] { border-bottom-color: var(--seal-lit); }
    .mode-control > span { display: none; }
    .loop__hint { display: none; }
    html.js:not(.reduce-motion) .loop.is-cinema { height: 300svh; }
    .loop-frame { width: 78%; }
    .lw-pin b { font-size: 2.6cqw; }
    .lw-mark > span { font-size: 2.4cqw; max-width: 42cqw; }
    .lw-contract { width: 52cqw; }
    .lw-contract p { font-size: 2.4cqw; }

    .playground { --map: min(76vw,40svh); }
    .playground__stage {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "picker" "study" "console" "note";
        gap: 18px;
        padding: 52px var(--page-edge) 40px;
    }
    .playground__intro { grid-template-columns: 1fr; }
    .playground h2 { font-size: 36px; }
    .brief-picker { justify-content: flex-start; }
    .brief-picker button { padding: 0 13px; font-size: 12px; }
    .study { min-height: 0; aspect-ratio: 4 / 5; }
    .study[data-layout="1"] .study__media { --t: 12%; --h: 40%; }
    .study[data-layout="1"] .study__sub { --t: 58%; }
    .study[data-layout="1"] .study__title { --t: 63%; --fs: 9cqw; }
    .study[data-layout="1"] .study__detail { --l: 10%; --w: 80%; --t: 80%; }
    .study[data-layout="2"] { --fs: 10cqw; }
    .study[data-layout="2"] .study__media { --l: 0%; --t: 0%; --w: 100%; --h: 46%; }
    .study[data-layout="2"] .study__brand { --t: 50%; }
    .study[data-layout="2"] .study__sub { --t: 57%; --w: 90%; }
    .study[data-layout="2"] .study__title { --t: 62%; --w: 90%; }
    .study[data-layout="2"] .study__detail { --t: 84%; --w: 80%; }
    .study[data-layout="3"] { --fs: 15cqw; }
    .study[data-layout="3"] .study__media { --l: 24%; --t: 8%; --w: 70%; --h: 54%; }
    .study[data-layout="3"] .study__sub { --t: 18%; --w: 22%; }
    .study[data-layout="3"] .study__title { --t: 50%; --w: 92%; }
    .study[data-layout="3"] .study__detail { --l: 5%; --t: 82%; --w: 70%; }
    .study[data-layout="4"] { --fs: 13cqw; }
    .study[data-layout="4"] .study__panel { --t: 50%; --w: 86%; --h: 50%; }
    .study[data-layout="4"] .study__brand { --t: 54%; }
    .study[data-layout="4"] .study__title { --t: 60%; --w: 82%; }
    .study[data-layout="4"] .study__detail { --t: 88%; --w: 76%; }
    .study[data-layout="5"] { --fs: 13cqh; }
    .study[data-layout="5"] .study__media { --l: 30%; --t: 16%; --w: 52%; --h: 58%; }
    .study[data-layout="5"] .study__brand { --l: 30%; --t: 4%; --w: 60%; }
    .study[data-layout="5"] .study__sub { display: none; }
    .study[data-layout="5"] .study__detail { --l: 30%; --t: 82%; --w: 64%; }
    .study__foot { display: none; }
    .console { justify-self: center; }
    .lever output { font-size: 28px; }
    .console__hint { display: none; }

    .closer { --card: 58vw; }
    .closer__stage { padding: 48px var(--page-edge) 40px; }
    .closer h2 { font-size: 10.6vw; }
    .closer h2 br { display: none; }
    .closer__lede { font-size: 13px; margin-top: 10px; }
    .lineup__row,.lineup__xray { gap: 28px 14px; }
    .closer:not(.is-cinema) { --card: calc((100vw - var(--page-edge) * 2 - 14px) / 2); }
    .closer.is-cinema .lineup { left: 0; right: 0; top: 30svh; }
    .closer.is-cinema .lineup__row,.closer.is-cinema .lineup__xray { justify-content: flex-start; padding-left: 21vw; }
    .closer.is-cinema .verdict { left: var(--page-edge); right: var(--page-edge); top: auto; bottom: 4svh; }
    .closer.is-cinema .verdict > p,.closer.is-cinema .verdict .tell-count__body { display: none; }
    .verdict h3 { font-size: 28px; }
    .tell-count { margin-top: 12px; }
    .tell-count > span { font-size: 44px; }
    .verdict .text-link { margin-top: 8px; }
}

html:not(.js) .mode-controls,html:not(.js) .loop__hint,html:not(.js) .brief-picker,html:not(.js) .lever input,html:not(.js) #play-motion {
    display: none;
}

.reduce-motion .loop,.reduce-motion .loop *,.reduce-motion .study,.reduce-motion .study > * {
    transition-duration: 1ms;
}