:root {
  --paper: #f2eee7;
  --cream: #e8dfd1;
  --ink: #151515;
  --muted: #746f68;
  --line: rgba(21, 21, 21, 0.2);
  --red: #ff3b30;
  --cyan: #70e4ff;
  --serif: "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.masthead {
  position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; padding: 20px 28px; color: var(--ink); mix-blend-mode: difference; filter: invert(1);
  pointer-events: none; font-size: 10px; line-height: 1.35; letter-spacing: .13em; text-transform: uppercase;
}
.masthead > * { pointer-events: auto; }
.masthead p { margin: 0; text-align: center; }
.wordmark { font: 700 18px/1 var(--serif); text-decoration: none; justify-self: start; }
.wordmark span, .site-footer span { color: var(--red); }
.motion-toggle { justify-self: end; border: 0; padding: 0; background: none; text-transform: uppercase; letter-spacing: inherit; cursor: pointer; }

.study { min-height: 100svh; padding: 120px max(28px, 5vw) 72px; overflow: hidden; }
.study--dark, .study--ink, .study--energy { color: #f5f0e9; background: #111; }
.study--paper { background: var(--paper); }
.study--cream { background: var(--cream); }
.study--signal { background: #e0312b; color: #fff6ee; }
.study--energy { background: #071821; }
.study-head { display: grid; grid-template-columns: minmax(190px, .55fr) 1.3fr minmax(240px, .65fr); align-items: end; gap: 32px; margin-bottom: 50px; }
.study-head > div { display: flex; gap: 16px; align-items: baseline; }
.study-head span { font: 400 42px/1 var(--serif); }
.study-head p { margin: 0; max-width: 370px; font-size: 13px; line-height: 1.45; }
.study-head > div p { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; opacity: .65; }
.study-head h2 { margin: 0; font: 400 clamp(52px, 7vw, 108px)/.82 var(--serif); letter-spacing: -.045em; }
.study-foot { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding-top: 12px; border-top: 1px solid currentColor; opacity: .72; }
.study-foot p { margin: 0; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.study-foot p:nth-child(2) { text-align: center; }
.study-foot p:last-child { text-align: right; }

.stage { position: relative; width: 100%; overflow: hidden; background: #090909; }
.stage--square { aspect-ratio: 16 / 9; min-height: min(72vh, 820px); }
.stage--portrait { aspect-ratio: 4 / 5; }
.stage video { width: 100%; height: 100%; display: block; object-fit: cover; }
.alpha-motion { object-fit: contain !important; }
.candle-stage { background: #8d6f68; }
.stage-controls--floating { position: absolute; left: 50%; bottom: 44px; display: flex; gap: 10px; transform: translateX(-50%); }
.primary-control, .energy-button, .rewrite-button { min-height: 46px; padding: 0 21px; border-radius: 999px; cursor: pointer; transition: transform 160ms ease, background 160ms ease, color 160ms ease; }
.primary-control { border: 1px solid #fff; color: #111; background: #fff; }
.primary-control:active, .energy-button:active, .rewrite-button:active { transform: scale(.97); }
.stage-status { position: absolute; right: 24px; top: 20px; margin: 0; color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.gaze-stage { cursor: ew-resize; background: #b83240; }
.gaze-axis { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; color: #fff; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.motion-range { width: 100%; height: 36px; margin: 16px 0 0; accent-color: var(--red); }

.persona-scroll-track { position: relative; height: 340vh; }
.persona-layout { position: sticky; top: 28px; display: grid; grid-template-columns: minmax(300px, .75fr) 1fr; max-width: 1180px; min-height: calc(100svh - 56px); max-height: 920px; margin: 0 auto; border: 1px solid rgba(255,255,255,.2); overflow: hidden; }
.persona-stage { background: #e8dfd1; }
.persona-scan { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 43%, rgba(255,255,255,.16) 50%, transparent 57%); background-size: 240% 100%; animation: persona-scan 5s ease-in-out infinite; pointer-events: none; }
@keyframes persona-scan { 0%,15% { background-position: 120% 0; } 70%,100% { background-position: -120% 0; } }
.persona-panel { padding: clamp(32px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; }
.panel-kicker { margin: 0 0 52px; color: #aaa39a; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.persona-panel h3 { margin: 0; font: 400 clamp(48px, 6vw, 90px)/.9 var(--serif); letter-spacing: -.04em; }
.persona-panel > p:not(.panel-kicker,.honesty-note) { max-width: 380px; color: #b9b1a8; font-size: 16px; line-height: 1.5; }
.persona-marks { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 46px; }
.persona-marks span { min-height: 44px; border-top: 1px solid #57524c; padding: 12px 4px; color: #77716a; text-align: left; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; transition: color 180ms ease, border-color 180ms ease; }
.persona-marks span.is-active { color: #fff; border-color: #fff; }
.honesty-note { margin: 52px 0 0; max-width: 460px; color: #7e7770; font-size: 11px; line-height: 1.5; }
.scroll-cue { position: absolute; left: 20px; bottom: 18px; color: rgba(255,255,255,.85); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

.writing-stage { min-height: 520px; display: grid; place-items: center; background: transparent; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.writing-svg { width: min(100%, 1200px); overflow: visible; }
.script-text { fill: #171717; font-family: "Snell Roundhand", "Apple Chancery", cursive; font-size: 192px; }
#writing-mask-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-writing #writing-mask-path { animation: write-path 3.5s cubic-bezier(.33,.05,.16,1) forwards; }
#pen-point { fill: var(--red); opacity: 0; }
.is-writing #pen-point { opacity: 1; animation: pen-travel 3.5s cubic-bezier(.33,.05,.16,1) forwards; }
@keyframes write-path { to { stroke-dashoffset: 0; } }
@keyframes pen-travel { 0% { transform: translate(0,0); } 24% { transform: translate(265px,-40px); } 53% { transform: translate(590px,-45px); } 76% { transform: translate(860px,-49px); } 100% { transform: translate(1100px,-44px); opacity: 0; } }
.rewrite-button { position: absolute; bottom: 26px; right: 26px; border: 1px solid var(--ink); background: transparent; }

.pulse-stage { min-height: 520px; display: grid; place-items: center; background: transparent; border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); }
.pulse-svg { width: 100%; }
.pulse-ghost, #pulse-line { fill: none; vector-effect: non-scaling-stroke; }
.pulse-ghost { stroke: rgba(255,255,255,.15); stroke-width: 2; }
#pulse-line { stroke: #fff8ef; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; filter: url(#pulse-glow); stroke-dasharray: .14 .86; animation: pulse-run 2.2s linear infinite; }
@keyframes pulse-run { to { stroke-dashoffset: -1; } }
.pulse-stage[data-mode="focus"] #pulse-line { animation-duration: 1.45s; }
.pulse-stage[data-mode="rush"] #pulse-line { animation-duration: .72s; stroke-width: 7; }
.pulse-readout { position: absolute; left: 24px; top: 24px; display: flex; align-items: baseline; gap: 9px; }
.pulse-readout strong { font: 400 76px/.8 var(--serif); font-variant-numeric: tabular-nums; }
.pulse-readout span { font-size: 10px; letter-spacing: .14em; }
.pulse-controls { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 6px; }
.pulse-controls button { min-height: 44px; padding: 0 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; background: transparent; cursor: pointer; }
.pulse-controls button.is-active { color: var(--red); background: #fff; }

.ambient {
  --copy: #f7f0e6;
  --quiet: rgba(247, 240, 230, .68);
  --rule: rgba(247, 240, 230, .32);
  position: relative;
  z-index: 0;
  min-height: 100svh;
  padding: 120px max(24px, 5vw) 74px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--copy);
  background: #0c1017;
}
.ambient__media, .ambient__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.ambient__media { z-index: -3; display: block; object-fit: cover; object-position: var(--position, 58% center); background: #0c1017; }
.ambient__veil { z-index: -2; background: var(--veil); pointer-events: none; }
.ambient__chrome {
  position: absolute;
  top: 86px;
  right: max(24px, 5vw);
  left: max(24px, 5vw);
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--quiet);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prompt-copy {
  position: absolute;
  z-index: 2;
  top: 118px;
  right: max(24px, 5vw);
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  color: var(--copy);
  background: color-mix(in srgb, currentColor 7%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.prompt-copy:hover { color: #151515; background: var(--copy); border-color: var(--copy); }
.prompt-copy:active { transform: scale(.97); }
.prompt-copy span { font-size: 15px; font-weight: 400; line-height: 1; }
.asset-actions {
  position: absolute;
  z-index: 9;
  top: 118px;
  right: max(24px, 5vw);
  display: flex;
  gap: 8px;
}
.asset-actions .prompt-copy { position: static; }
.video-download {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  color: var(--copy);
  background: color-mix(in srgb, currentColor 7%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.video-download:hover { color: #151515; background: var(--copy); border-color: var(--copy); }
.video-download:active { transform: scale(.97); }
.video-download span { font-size: 15px; font-weight: 400; line-height: 1; }
.ambient__copy { width: min(760px, 58vw); }
.ambient__copy > p { margin: 0 0 24px; color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ambient__copy h2 { margin: 0; font-size: clamp(66px, 8.8vw, 148px); font-weight: 600; letter-spacing: -.075em; line-height: .84; }
.ambient__action { display: flex; align-items: center; gap: 30px; margin-top: 42px; }
.ambient__action a { display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-width: 226px; min-height: 58px; padding: 0 20px; color: #111; background: var(--copy); text-decoration: none; font-size: 12px; font-weight: 700; }
.ambient__action a span { font-size: 18px; font-weight: 400; }
.ambient__action small { color: var(--quiet); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

.ambient--billboard {
  --position: 58% center;
  --veil: linear-gradient(90deg, rgba(5, 11, 21, .94) 0%, rgba(5, 11, 21, .64) 34%, rgba(5, 11, 21, .05) 66%), linear-gradient(0deg, rgba(5, 11, 21, .62), transparent 42%);
}
.ambient--billboard .ambient__copy h2 { font-family: "Avenir Next Condensed", var(--sans); font-weight: 750; }

.ambient--glass {
  --position: 63% center;
  --veil: linear-gradient(90deg, rgba(2, 9, 17, .96) 0%, rgba(2, 9, 17, .64) 34%, rgba(2, 9, 17, .02) 66%), linear-gradient(0deg, rgba(2, 9, 17, .55), transparent 40%);
}
.ambient--glass .ambient__copy h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }

.ambient--paper {
  --copy: #1c1b19;
  --quiet: rgba(28, 27, 25, .65);
  --rule: rgba(28, 27, 25, .25);
  --position: 42% center;
  --veil: linear-gradient(270deg, rgba(244, 238, 228, .98) 0%, rgba(244, 238, 228, .83) 33%, rgba(244, 238, 228, .1) 66%), linear-gradient(0deg, rgba(244, 238, 228, .4), transparent 36%);
  background: #eee7da;
}
.ambient--paper .ambient__copy { width: min(700px, 47vw); margin-left: auto; }
.ambient--paper .ambient__copy h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }
.ambient--paper .ambient__action a { color: #f5efe5; background: #1c1b19; }

.ambient--silk {
  --position: 64% center;
  --veil: linear-gradient(90deg, rgba(12, 7, 12, .96) 0%, rgba(12, 7, 12, .7) 34%, rgba(12, 7, 12, .04) 68%), linear-gradient(0deg, rgba(12, 7, 12, .56), transparent 42%);
}
.ambient--silk .ambient__copy h2 { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.045em; }

.ambient--solar {
  --position: 61% center;
  --veil: linear-gradient(90deg, rgba(10, 15, 24, .91) 0%, rgba(10, 15, 24, .58) 34%, rgba(10, 15, 24, .02) 66%), linear-gradient(0deg, rgba(10, 15, 24, .7), transparent 45%);
}
.ambient--solar .ambient__copy h2 { font-family: "Avenir Next Condensed", var(--sans); font-weight: 680; }

.ambient--gravity {
  --copy: #151515;
  --quiet: rgba(21, 21, 21, .66);
  --rule: rgba(21, 21, 21, .24);
  --position: 60% center;
  --veil: linear-gradient(90deg, rgba(242, 238, 231, .97) 0%, rgba(242, 238, 231, .72) 33%, rgba(242, 238, 231, .04) 64%), linear-gradient(0deg, rgba(242, 238, 231, .42), transparent 38%);
  background: #eee9df;
}
.ambient--gravity .ambient__copy h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.058em; }
.ambient--gravity .ambient__action a { color: #f3eee6; background: #151515; }

.ambient--eclipse {
  --copy: #171717;
  --quiet: rgba(23, 23, 23, .64);
  --rule: rgba(23, 23, 23, .22);
  --position: 61% center;
  --veil: linear-gradient(90deg, rgba(248, 245, 239, .98) 0%, rgba(248, 245, 239, .72) 31%, rgba(248, 245, 239, .02) 61%), linear-gradient(0deg, rgba(248, 245, 239, .32), transparent 36%);
  background: #f6f2eb;
}
.ambient--eclipse .ambient__copy h2 { font-family: "Avenir Next Condensed", var(--sans); font-weight: 720; }
.ambient--eclipse .ambient__action a { color: #fff; background: #2143ff; }

.ambient--shards {
  --position: 64% center;
  --veil: linear-gradient(90deg, rgba(20, 11, 20, .98) 0%, rgba(20, 11, 20, .72) 35%, rgba(20, 11, 20, .03) 68%), linear-gradient(0deg, rgba(20, 11, 20, .55), transparent 42%);
  background: #160d17;
}
.ambient--shards .ambient__copy h2 { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.045em; }

.ambient--bloom {
  --position: 65% center;
  --veil: linear-gradient(90deg, rgba(0, 4, 8, .98) 0%, rgba(0, 4, 8, .72) 35%, rgba(0, 4, 8, .02) 69%), linear-gradient(0deg, rgba(0, 4, 8, .54), transparent 42%);
  background: #000408;
}
.ambient--bloom .ambient__copy h2 { font-family: "Avenir Next Condensed", var(--sans); font-weight: 620; }

.ambient--mobius {
  --copy: #171717;
  --quiet: rgba(23, 23, 23, .65);
  --rule: rgba(23, 23, 23, .22);
  --position: 58% center;
  --veil: linear-gradient(90deg, rgba(245, 239, 228, .98) 0%, rgba(245, 239, 228, .76) 32%, rgba(245, 239, 228, .02) 63%), linear-gradient(0deg, rgba(245, 239, 228, .35), transparent 38%);
  background: #f1e9dc;
}
.ambient--mobius .ambient__copy h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }
.ambient--mobius .ambient__action a { color: #f5efe5; background: #171717; }

.ambient--wind {
  --copy: #18334a;
  --quiet: rgba(24, 51, 74, .68);
  --rule: rgba(24, 51, 74, .25);
  --position: 62% center;
  --veil: linear-gradient(90deg, rgba(229, 242, 235, .95) 0%, rgba(229, 242, 235, .63) 33%, rgba(229, 242, 235, .02) 64%), linear-gradient(0deg, rgba(229, 242, 235, .34), transparent 38%);
  background: #dcefe8;
}
.ambient--wind .ambient__copy h2 { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.05em; }
.ambient--wind .ambient__action a { color: #f6f0e5; background: #18334a; }

.ambient--wireframe {
  --position: 64% center;
  --veil: linear-gradient(90deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .74) 35%, rgba(0, 0, 0, .02) 69%), linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 40%);
  background: #000;
}
.ambient--wireframe .ambient__copy h2 { font-family: "Avenir Next Condensed", var(--sans); font-weight: 650; }

.ambient--drawing {
  --copy: #171513;
  --quiet: rgba(23, 21, 19, .64);
  --rule: rgba(23, 21, 19, .24);
  --position: 64% center;
  --veil: linear-gradient(90deg, rgba(245, 239, 228, .98) 0%, rgba(245, 239, 228, .75) 34%, rgba(245, 239, 228, .03) 65%), linear-gradient(0deg, rgba(245, 239, 228, .38), transparent 40%);
  background: #f2ebdf;
}
.ambient--drawing .ambient__copy h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }
.ambient--drawing .ambient__action a { color: #f5efe5; background: #171513; }

.ambient--pacific {
  --position: 62% center;
  --veil: linear-gradient(90deg, rgba(8, 27, 42, .96) 0%, rgba(8, 27, 42, .68) 34%, rgba(8, 27, 42, .02) 67%), linear-gradient(0deg, rgba(8, 27, 42, .56), transparent 42%);
  background: #0a2235;
}
.ambient--pacific .ambient__copy h2 { font-family: "Avenir Next Condensed", var(--sans); font-weight: 680; }

/* Volume 05 — each study has one governing visual law. */
.graphic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #111; }
.graphic-grid > .graphic { min-height: 76svh; padding: 62px 2.5vw 38px; }
.graphic-grid .illusion-copy, .graphic-grid .ascii-copy, .graphic-grid .alpha-copy { left: 2.5vw; width: calc(100% - 5vw); }
.graphic-grid .illusion-copy h2, .graphic-grid .ascii-copy h2, .graphic-grid .alpha-copy h2 { font-size: clamp(46px, 5.4vw, 86px); }
.graphic-grid .graphic__hint { right: 2.5vw; }
.graphic-grid .pen-stage { min-height: 57vh; }
.graphic { position: relative; min-height: 100svh; padding: 92px max(24px, 5vw) 64px; overflow: hidden; isolation: isolate; }
.graphic__head { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 18px; padding-top: 13px; border-top: 1px solid currentColor; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.graphic__head p, .graphic__head span, .graphic__foot p { margin: 0; }
.graphic__head p:nth-child(2) { text-align: center; }
.graphic__hint { position: absolute; z-index: 6; right: max(24px, 5vw); bottom: 38px; margin: 0; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.graphic__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 12px; border-top: 1px solid currentColor; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.graphic__foot p:nth-child(2) { text-align: center; }
.graphic__foot p:last-child { text-align: right; }
.line-button { min-height: 38px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; color: inherit; background: transparent; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

.graphic--illusion { --ix: 0px; --iy: 0px; --ix-opposite: 0px; --iy-opposite: 0px; --dot-x: 0px; --dot-y: 0px; color: #f3efe8; background: #090909; }
.illusion-copy { position: absolute; z-index: 5; left: 5vw; bottom: 8vh; width: min(620px, 48vw); pointer-events: none; }
.illusion-copy p, .alpha-copy p, .brain-copy > p:first-child, .product-copy p { margin: 0 0 18px; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.illusion-copy h2, .alpha-copy h2, .brain-copy h2, .product-copy h2 { margin: 0; font: 400 clamp(62px, 8.4vw, 136px)/.84 var(--serif); letter-spacing: -.06em; }
.illusion-stage { position: absolute; inset: 0; overflow: hidden; outline: none; cursor: crosshair; }
.moire { position: absolute; width: min(78vw, 1050px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 7px, #f4efe6 8px 10px, transparent 11px 17px); will-change: transform; }
.moire--a { top: 48%; left: 64%; transform: translate(calc(-50% + var(--ix)), calc(-50% + var(--iy))); opacity: .92; }
.moire--b { top: 48%; left: 64%; transform: translate(calc(-50% + var(--ix-opposite)), calc(-50% + var(--iy-opposite))) scale(.982); opacity: .54; filter: invert(28%) sepia(97%) saturate(5000%) hue-rotate(231deg) brightness(95%); mix-blend-mode: screen; }
.illusion-stage i { position: absolute; left: calc(64% + var(--dot-x)); top: calc(48% + var(--dot-y)); width: 18px; aspect-ratio: 1; border-radius: 50%; background: #d8ff32; transform: translate(-50%, -50%); box-shadow: 0 0 0 16px rgba(216,255,50,.12); }

.graphic--pen { color: #151515; background: #f0e9dc; }
.pen-stage { position: relative; min-height: 72vh; margin: 42px 0 18px; overflow: hidden; border-top: 1px solid #151515; border-bottom: 1px solid #151515; background-image: repeating-linear-gradient(0deg, transparent 0 43px, rgba(34,66,190,.12) 44px 45px); }
.pen-kicker { position: absolute; top: 22px; left: 22px; margin: 0; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.pen-script { position: absolute; inset: 15% 2% auto; width: 96%; overflow: visible; }
.pen-script text { fill: #123ea5; font: 400 172px/1 "Snell Roundhand", "Apple Chancery", cursive; letter-spacing: -4px; }
#pen-reveal-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pen-stage.is-writing #pen-reveal-path { animation: write-path 4.2s cubic-bezier(.32,.06,.12,1) forwards; }
.pen-hand { position: absolute; z-index: 3; top: 9%; left: -35%; width: min(74vw, 1050px); height: auto; object-fit: contain; transform: translateX(0) rotate(-2deg); pointer-events: none; }
.pen-stage.is-writing .pen-hand { animation: physical-pen 4.2s cubic-bezier(.32,.06,.12,1) forwards; }
@keyframes physical-pen { 0% { transform: translateX(0) rotate(-2deg); } 28% { transform: translateX(32vw) translateY(-1vh) rotate(1deg); } 58% { transform: translateX(69vw) translateY(1vh) rotate(-1deg); } 100% { transform: translateX(110vw) translateY(-1vh) rotate(0); } }

.graphic--ascii { color: #e9f7ee; background: #00130e; }
.ascii-copy { position: absolute; z-index: 3; left: 5vw; bottom: 8vh; width: min(610px, 50vw); pointer-events: none; }
.ascii-copy p { margin: 0 0 18px; color: #7dff9e; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.ascii-copy h2 { margin: 0; font: 400 clamp(58px, 8vw, 130px)/.84 var(--serif); letter-spacing: -.06em; }
#ascii-canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; }
.ascii-fallback { position: absolute; right: 5vw; bottom: 36px; margin: 0; color: rgba(125,255,158,.58); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; }

.graphic--alpha { color: #171717; background: #d8ff32; }
.alpha-copy { position: absolute; z-index: 4; top: 22%; left: 5vw; width: min(640px, 50vw); pointer-events: none; }
.alpha-stage { position: absolute; inset: 0; pointer-events: none; }
.alpha-shape { position: absolute; overflow: hidden; will-change: transform; transition: transform 900ms cubic-bezier(.2,.7,.1,1), clip-path 900ms cubic-bezier(.2,.7,.1,1); }
.alpha-shape video { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.alpha-shape--one { top: 17%; right: 4%; width: 49vw; aspect-ratio: 1; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 88%, 0 25%); background: #ff623e; }
.alpha-shape--two { right: 19%; bottom: -8%; width: 36vw; aspect-ratio: 1; border-radius: 50%; background: #2143ff; mix-blend-mode: multiply; }
.alpha-shape--three { top: 11%; right: 28%; width: 26vw; aspect-ratio: 3/4; clip-path: polygon(18% 0, 100% 12%, 82% 100%, 0 80%); background: #f3eee7; }
.alpha-stage.is-decomposed .alpha-shape--one { transform: translate(-11vw, 5vh) rotate(-9deg); }
.alpha-stage.is-decomposed .alpha-shape--two { transform: translate(20vw, 5vh); }
.alpha-stage.is-decomposed .alpha-shape--three { transform: translate(-8vw, -11vh) rotate(13deg); }
.alpha-orbit { position: absolute; top: 21%; right: 7%; width: 53vw; aspect-ratio: 1; border: 1px solid rgba(21,21,21,.42); border-radius: 50%; transform: rotate(-12deg) scaleY(.42); }

.graphic--brain { --copy: #f3eee7; --rule: rgba(243,238,231,.34); color: #f3eee7; background: #020607; }
.brain-stage, .anatomy-stage { position: absolute; inset: 118px 2.5vw 38px; overflow: hidden; }
.neural-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.brain-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, transparent 48%), linear-gradient(90deg, rgba(0,0,0,.42), transparent 55%); pointer-events: none; }
.brain-copy, .anatomy-copy { position: absolute; z-index: 2; left: 28px; bottom: 28px; width: calc(100% - 56px); pointer-events: none; }
.brain-copy p, .anatomy-copy p { margin: 0 0 10px; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.brain-copy h2, .anatomy-copy h2 { margin: 0; font: 400 clamp(50px, 5.2vw, 84px)/.84 var(--serif); letter-spacing: -.055em; }

.graphic--anatomy { --copy: #171717; --rule: rgba(23,23,23,.28); color: #171717; background: #e7dfd2; }
.anatomy-stage { background: #eee5d5; }
.anatomy-stage img { width: 100%; height: 100%; object-fit: contain; object-position: 68% center; }
.anatomy-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,229,213,.96) 0%, rgba(238,229,213,.7) 28%, transparent 60%); pointer-events: none; }
.anatomy-copy { color: #171717; }
.graphic--anatomy .prompt-copy { color: #171717; background: rgba(238,229,213,.72); }

.graphic--anime { --copy: #f3eee7; --rule: rgba(243,238,231,.32); grid-column: 1 / -1; min-height: 78svh !important; color: #f3eee7; background: #0e1a2b; }
.anime-stage { position: absolute; inset: 118px 2.5vw 38px; display: grid; grid-template-columns: minmax(320px, .72fr) minmax(420px, 1.28fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(243,238,231,.24); background: #0a1320; }
.anime-video { grid-column: 2; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; background: #f6f3ef; }
.anime-copy { grid-column: 1; grid-row: 1; z-index: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 70px); }
.anime-copy > p:first-child { margin: 0 0 20px; color: #7bdcff; font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }
.anime-copy h2 { margin: 0; font: 400 clamp(52px, 5.7vw, 96px)/.84 var(--serif); letter-spacing: -.058em; }
.anime-copy h2 em { color: #d8ff32; font-weight: 400; }
#anime-explainer { max-width: 420px; margin: 34px 0 0; color: #aeb7c1; font-size: 13px; line-height: 1.55; }
.anime-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 42px; }
.anime-meter i { height: 2px; background: #405166; transition: background 180ms ease; }
.anime-meter i.is-active { background: #d8ff32; }
.graphic--anime .prompt-copy { background: rgba(10,19,32,.8); }

.graphic--creator { min-height: auto; padding: 38px 5vw; color: #f4eee6; background: #111; }
.creator-track { height: auto; }
.creator-sticky { position: relative; display: grid; grid-template-columns: minmax(360px, .95fr) 1.05fr; min-height: min(86svh, 900px); overflow: hidden; border: 1px solid #383633; }
.creator-frame { position: relative; min-height: 100%; background: #e4d8ca; }
.creator-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 800ms cubic-bezier(.2,.7,.1,1); }
.creator-layer.is-active { opacity: 1; }
.creator-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px 6vw; }
.creator-copy .graphic__head { position: absolute; top: 28px; right: 3vw; left: calc(47.5% + 3vw); grid-template-columns: 1fr 1fr auto; }
.creator-kicker { margin: 0 0 28px; color: #aaa39a; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.creator-copy h2 { margin: 0; font: 400 clamp(60px, 7vw, 118px)/.84 var(--serif); letter-spacing: -.06em; }
.creator-copy h2 em { color: #d8ff32; font-weight: 400; }
#creator-description { margin: 38px 0 20px; color: #bbb3a9; font-size: 13px; letter-spacing: .07em; }
.creator-progress { height: 2px; background: #383633; }
.creator-progress i { display: block; width: 25%; height: 100%; background: #d8ff32; transition: transform 700ms cubic-bezier(.2,.7,.1,1); transform-origin: left; }
.creator-toggle { min-height: 34px; }
.prompt-copy--inline { position: static; align-self: flex-start; margin-top: 36px; --copy: #f4eee6; --rule: rgba(244,238,230,.34); }

.graphic--icons { color: #171717; background: #f3eee7; }
.icons-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: end; margin: 14vh 0 10vh; }
.icons-intro h2 { margin: 0; font: 400 clamp(60px, 8vw, 128px)/.84 var(--serif); letter-spacing: -.06em; }
.icons-intro p { max-width: 430px; margin: 0; font-size: 15px; line-height: 1.5; }
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid #171717; border-bottom: 1px solid #171717; }
.kinetic-icon { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 18px 18px; border: 0; border-right: 1px solid #171717; color: #171717; background: transparent; cursor: pointer; }
.kinetic-icon:last-child { border-right: 0; }
.kinetic-icon svg { width: 88px; height: 88px; align-self: center; fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; overflow: visible; }
.kinetic-icon span { font-size: 9px; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.kinetic-icon .icon-accent { stroke: #ff3b30; transition: transform 500ms cubic-bezier(.2,.75,.1,1), stroke-dashoffset 500ms ease; transform-origin: center; }
.kinetic-icon:hover, .kinetic-icon:focus-visible { color: #f3eee7; background: #171717; }
.icon--search:hover .icon-accent, .icon--search:focus-visible .icon-accent { transform: rotate(90deg); }
.icon--send:hover .icon-accent, .icon--send:focus-visible .icon-accent { transform: translate(8px,-8px); }
.icon--sync:hover .icon-accent, .icon--sync:focus-visible .icon-accent { transform: rotate(180deg); }
.icon--expand:hover .icon-accent, .icon--expand:focus-visible .icon-accent { transform: scale(1.38); }
.icon--archive:hover .icon-accent, .icon--archive:focus-visible .icon-accent { transform: translateY(16px); }
.icon--focus:hover .icon-accent, .icon--focus:focus-visible .icon-accent { transform: scale(.58); }

.graphic--product { min-height: auto; padding-bottom: 5vw; color: #171717; background: #f3eee7; }
.product-film { --copy: #f3eee7; --rule: rgba(243,238,231,.36); position: relative; min-height: min(76svh, 860px); margin-top: 30px; overflow: hidden; color: var(--copy); background: #a7a49f; }
.product-video, .product-film__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-video { object-fit: cover; }
.product-film__veil { background: linear-gradient(90deg, rgba(9,10,11,.83) 0%, rgba(9,10,11,.4) 36%, transparent 68%), linear-gradient(0deg, rgba(9,10,11,.34), transparent 42%); pointer-events: none; }
.product-copy { position: absolute; z-index: 2; left: 4vw; bottom: 7vh; width: min(650px, 46vw); pointer-events: none; }
.product-copy h2 { font-size: clamp(66px, 8vw, 132px); }

.energy-stage { max-width: 1120px; margin: 0 auto; background: #071821; }
.energy-chrome { position: absolute; left: 22px; right: 22px; top: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .15em; font-size: 8px; }
.energy-chrome i { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.2), var(--cyan)); transform-origin: left; }
.energy-button { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); border: 1px solid rgba(112,228,255,.75); color: #dffaff; background: rgba(2,8,11,.68); backdrop-filter: blur(9px); }
.energy-button:active { transform: translateX(-50%) scale(.97); }

.archive { display: grid; grid-template-columns: 1fr 1fr; min-height: 75svh; padding: 100px 5vw; background: #d9d3ca; }
.archive-copy { display: flex; flex-direction: column; justify-content: center; max-width: 520px; }
.archive-copy h2 { margin: 30px 0; font: 400 clamp(58px, 7vw, 112px)/.85 var(--serif); letter-spacing: -.05em; }
.archive-copy > p:last-child { font-size: 17px; line-height: 1.55; }
.archive-stage { display: grid; place-items: center; min-height: 560px; background-color: #355b55; background-image: linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.08) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.08) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.08) 75%); background-size: 28px 28px; background-position: 0 0, 0 14px, 14px -14px, -14px 0; }
.archive-stage video { width: min(90%, 560px); height: auto; }
.site-footer { min-height: 54vh; padding: 80px 5vw; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; color: #f3eee7; background: #111; }
.site-footer p { margin: 0; font-size: 13px; line-height: 1.5; }
.site-footer p:first-child { font: 400 42px/1 var(--serif); }
.site-footer a { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (max-width: 760px) {
  .masthead { padding: 16px; grid-template-columns: 1fr 1fr; }
  .masthead p { display: none; }
  .study { padding: 92px 16px 54px; }
  .study-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
  .study-head > div { order: 0; }
  .study-head h2 { order: 1; font-size: clamp(52px, 16vw, 76px); }
  .study-head > p { order: 2; }
  .stage--square { aspect-ratio: 4 / 5; min-height: 0; }
  .study-foot { gap: 12px; }
  .study-foot p { font-size: 7px; }
  .persona-layout { grid-template-columns: 1fr; }
  .persona-scroll-track { height: 300vh; }
  .persona-layout { top: 14px; min-height: calc(100svh - 28px); }
  .persona-stage { aspect-ratio: 1 / 1; }
  .persona-panel { padding: 40px 24px; }
  .panel-kicker, .honesty-note { margin-top: 0; margin-bottom: 28px; }
  .script-text { font-size: 160px; }
  .writing-stage, .pulse-stage { min-height: 420px; }
  .pulse-readout strong { font-size: 54px; }
  .pulse-controls { left: 16px; right: 16px; justify-content: center; }
  .ambient { padding: 100px 16px 58px; min-height: 100svh; }
  .ambient__chrome { top: 70px; right: 16px; left: 16px; }
  .prompt-copy { top: 106px; right: 16px; min-height: 40px; }
  .asset-actions { top: 106px; right: 16px; left: 16px; justify-content: flex-end; }
  .asset-actions .prompt-copy, .video-download { min-height: 40px; gap: 12px; padding: 0 11px; font-size: 8px; }
  .ambient__copy, .ambient--paper .ambient__copy { width: 100%; margin-left: 0; }
  .ambient__copy h2 { font-size: clamp(62px, 18vw, 88px); }
  .ambient__action { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 32px; }
  .ambient__action a { min-width: 220px; }
  .ambient__action small { font-size: 8px; }
  .ambient--billboard { --position: 62% center; --veil: linear-gradient(0deg, rgba(5, 11, 21, .95) 0%, rgba(5, 11, 21, .34) 66%, rgba(5, 11, 21, .14)); }
  .ambient--glass { --position: 67% center; --veil: linear-gradient(0deg, rgba(2, 9, 17, .96) 0%, rgba(2, 9, 17, .33) 68%, rgba(2, 9, 17, .14)); }
  .ambient--paper { --position: 38% center; --veil: linear-gradient(0deg, rgba(244, 238, 228, .98) 0%, rgba(244, 238, 228, .42) 68%, rgba(244, 238, 228, .08)); }
  .ambient--silk { --position: 67% center; --veil: linear-gradient(0deg, rgba(12, 7, 12, .97) 0%, rgba(12, 7, 12, .3) 68%, rgba(12, 7, 12, .14)); }
  .ambient--solar { --position: 64% center; --veil: linear-gradient(0deg, rgba(10, 15, 24, .96) 0%, rgba(10, 15, 24, .26) 70%, rgba(10, 15, 24, .1)); }
  .ambient--gravity { --position: 68% center; --veil: linear-gradient(0deg, rgba(242, 238, 231, .98) 0%, rgba(242, 238, 231, .55) 66%, rgba(242, 238, 231, .04)); }
  .ambient--eclipse { --position: 67% center; --veil: linear-gradient(0deg, rgba(248, 245, 239, .98) 0%, rgba(248, 245, 239, .52) 66%, rgba(248, 245, 239, .03)); }
  .ambient--shards { --position: 69% center; --veil: linear-gradient(0deg, rgba(20, 11, 20, .97) 0%, rgba(20, 11, 20, .36) 68%, rgba(20, 11, 20, .12)); }
  .ambient--bloom { --position: 69% center; --veil: linear-gradient(0deg, rgba(0, 4, 8, .98) 0%, rgba(0, 4, 8, .34) 68%, rgba(0, 4, 8, .1)); }
  .ambient--mobius { --position: 66% center; --veil: linear-gradient(0deg, rgba(245, 239, 228, .98) 0%, rgba(245, 239, 228, .5) 66%, rgba(245, 239, 228, .03)); }
  .ambient--wind { --position: 69% center; --veil: linear-gradient(0deg, rgba(229, 242, 235, .98) 0%, rgba(229, 242, 235, .5) 68%, rgba(229, 242, 235, .04)); }
  .ambient--wireframe { --position: 70% center; --veil: linear-gradient(0deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .38) 68%, rgba(0, 0, 0, .1)); }
  .ambient--drawing { --position: 69% center; --veil: linear-gradient(0deg, rgba(245, 239, 228, .98) 0%, rgba(245, 239, 228, .52) 68%, rgba(245, 239, 228, .04)); }
  .ambient--pacific { --position: 68% center; --veil: linear-gradient(0deg, rgba(8, 27, 42, .97) 0%, rgba(8, 27, 42, .34) 68%, rgba(8, 27, 42, .1)); }
  .graphic-grid { grid-template-columns: 1fr; }
  .graphic-grid > .graphic { grid-column: auto; min-height: 74svh; padding: 58px 16px 34px; }
  .graphic-grid .illusion-copy, .graphic-grid .ascii-copy, .graphic-grid .alpha-copy { left: 16px; width: calc(100% - 32px); }
  .graphic-grid .illusion-copy h2, .graphic-grid .ascii-copy h2, .graphic-grid .alpha-copy h2 { font-size: clamp(52px, 15vw, 78px); }
  .graphic-grid .graphic__hint { right: 16px; }
  .graphic { padding: 76px 16px 42px; }
  .graphic__head { grid-template-columns: 1fr auto; }
  .graphic__head p:nth-child(2) { text-align: right; }
  .graphic__head > :nth-child(3):not(button):not(output) { display: none; }
  .graphic__hint { right: 16px; bottom: 20px; }
  .illusion-copy, .ascii-copy, .alpha-copy, .product-copy { left: 16px; width: calc(100% - 32px); }
  .illusion-copy { bottom: 11vh; }
  .illusion-copy h2, .ascii-copy h2, .alpha-copy h2, .product-copy h2 { font-size: clamp(56px, 17vw, 82px); }
  .moire { width: 148vw; }
  .moire--a, .moire--b { left: 72%; top: 39%; }
  .illusion-stage i { left: calc(72% + var(--dot-x)); top: calc(39% + var(--dot-y)); }
  .pen-stage { min-height: 70vh; margin-top: 28px; }
  .pen-script { top: 18%; width: 140%; }
  .pen-script text { font-size: 146px; }
  .pen-hand { top: 26%; left: -72%; width: 150vw; }
  @keyframes physical-pen { 0% { transform: translateX(0) rotate(-2deg); } 50% { transform: translateX(80vw) rotate(1deg); } 100% { transform: translateX(180vw) rotate(0); } }
  .ascii-copy { bottom: 12vh; }
  .alpha-copy { top: 22%; }
  .alpha-shape--one { top: 42%; right: -14%; width: 94vw; }
  .alpha-shape--two { right: 22%; bottom: 2%; width: 68vw; }
  .alpha-shape--three { top: 39%; right: 46%; width: 48vw; }
  .alpha-orbit { top: 43%; right: -14%; width: 105vw; }
  .brain-stage, .anatomy-stage { inset: 108px 16px 30px; }
  .brain-copy, .anatomy-copy { left: 18px; bottom: 20px; width: calc(100% - 36px); }
  .brain-copy h2, .anatomy-copy h2 { font-size: clamp(48px, 14vw, 68px); }
  .anatomy-stage img { object-position: 64% center; }
  .graphic--anime { grid-column: auto; min-height: 94svh !important; }
  .anime-stage { inset: 108px 16px 30px; grid-template-columns: 1fr; grid-template-rows: 57% 43%; }
  .anime-video { grid-column: 1; grid-row: 1; object-fit: cover; object-position: center 20%; }
  .anime-copy { grid-column: 1; grid-row: 2; padding: 22px 20px; }
  .anime-copy > p:first-child { margin-bottom: 10px; }
  .anime-copy h2 { font-size: clamp(42px, 12vw, 62px); }
  #anime-explainer { margin-top: 14px; font-size: 11px; }
  .anime-meter { margin-top: 18px; }
  .creator-sticky { grid-template-columns: 1fr; grid-template-rows: 56svh 44svh; }
  .creator-copy { padding: 28px 20px 38px; }
  .creator-copy .graphic__head { top: 18px; right: 16px; left: 16px; color: #171717; }
  .creator-copy h2 { font-size: clamp(44px, 13vw, 68px); }
  .creator-kicker { margin-bottom: 12px; }
  #creator-description { margin: 16px 0 12px; }
  .prompt-copy--inline { margin-top: 14px; min-height: 36px; }
  .icons-intro { grid-template-columns: 1fr; gap: 28px; margin: 11vh 0 8vh; }
  .icons-intro h2 { font-size: clamp(56px, 16vw, 82px); }
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .kinetic-icon { min-height: 180px; border-bottom: 1px solid #171717; }
  .kinetic-icon:nth-child(2n) { border-right: 0; }
  .kinetic-icon:nth-last-child(-n+2) { border-bottom: 0; }
  .graphic--product { padding-bottom: 16px; }
  .product-film { min-height: 72svh; margin-top: 20px; }
  .product-video { object-position: 57% center; }
  .product-film__veil { background: linear-gradient(0deg, rgba(9,10,11,.9) 0%, rgba(9,10,11,.18) 66%, transparent); }
  .product-copy { top: auto; bottom: 7vh; width: calc(100% - 32px); }
  .archive { grid-template-columns: 1fr; padding: 80px 16px 16px; }
  .archive-stage { min-height: 400px; }
  .site-footer { grid-template-columns: 1fr; gap: 48px; min-height: 70vh; }
}

.graphic--anime-world { grid-column: 1 / -1; min-height: 100svh !important; color: #eef2f4; background: #07101a; }
.graphic--anime-world .master-film { position: absolute; inset: 118px 2.5vw 38px; }
.masterwork { min-height: 100svh; padding: 78px 2.5vw 38px; overflow: hidden; }
.masterwork--dark { --copy: #f3eee7; --rule: rgba(243,238,231,.34); color: #f3eee7; background: #090b0d; }
.masterwork--paper { --copy: #171717; --rule: rgba(23,23,23,.28); color: #171717; background: #ece5d9; }
.masterwork--acid { --copy: #151515; --rule: rgba(21,21,21,.3); color: #151515; background: #d8ff32; }
.master-head { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: center; padding-top: 13px; border-top: 1px solid currentColor; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.master-head > * { margin: 0; }
.master-head p:nth-child(2) { text-align: center; }
.master-film { position: relative; min-height: calc(100svh - 150px); margin-top: 22px; overflow: hidden; background: #050607; }
.master-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.master-film > .master-video { position: absolute; inset: 0; }
.master-film__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,7,10,.86) 0%, rgba(4,7,10,.28) 46%, transparent 72%), linear-gradient(0deg, rgba(4,7,10,.52), transparent 48%); pointer-events: none; }
.master-copy { position: absolute; z-index: 3; left: 4vw; bottom: 7vh; width: min(700px, 50vw); pointer-events: none; }
.master-copy p, .atlas-copy p, .portrait-copy p, .orchestra-copy p, .organism-copy p { margin: 0 0 18px; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.master-copy h2, .atlas-copy h2, .portrait-copy h2, .orchestra-copy h2, .organism-copy h2 { margin: 0; font: 400 clamp(64px, 8vw, 132px)/.84 var(--serif); letter-spacing: -.06em; }
.master-copy small, .atlas-copy small, .portrait-copy small, .orchestra-copy small { display: block; margin-top: 28px; font-size: 9px; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.master-copy--ink { color: #171717; text-shadow: 0 1px 12px rgba(242,238,231,.55); }
.master-film--light { background: #ebe4d8; }
.master-film--light::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,231,220,.93), rgba(238,231,220,.16) 58%, transparent 76%); pointer-events: none; }
.master-film .prompt-copy, .atlas-lab .prompt-copy, .portrait-lab .prompt-copy, .orchestra-lab .prompt-copy, .organism-lab .prompt-copy, .type-lab .prompt-copy { z-index: 8; }
.master-film .asset-actions .prompt-copy,
.master-film .asset-actions .video-download { color: #f7f3ec; border-color: rgba(247,243,236,.48); background: rgba(5,7,9,.58); }
.master-film .asset-actions .prompt-copy:hover,
.master-film .asset-actions .video-download:hover { color: #151515; border-color: #f7f3ec; background: #f7f3ec; }

.atlas-lab { --lens-x: 72%; --lens-y: 42%; position: relative; min-height: calc(100svh - 150px); margin-top: 22px; overflow: hidden; background: #eee6d7; outline: none; cursor: crosshair; }
.atlas-lab > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 72% center; }
.atlas-lab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,230,215,.98) 0%, rgba(238,230,215,.74) 27%, transparent 55%); pointer-events: none; }
.atlas-lens { position: absolute; z-index: 4; left: var(--lens-x); top: var(--lens-y); width: min(30vw, 390px); aspect-ratio: 1; border: 1px solid rgba(38,31,25,.55); border-radius: 50%; background-image: url("assets/masterworks/living-atlas/plate.png"); background-repeat: no-repeat; background-size: auto 260%; background-position: var(--lens-x) var(--lens-y); box-shadow: 0 0 0 10px rgba(238,230,215,.45), 0 30px 70px rgba(60,42,27,.22); transform: translate(-50%, -50%); pointer-events: none; }
.atlas-copy { position: absolute; z-index: 3; left: 3vw; bottom: 7vh; width: min(580px, 38vw); }
.atlas-copy h2 { font-size: clamp(60px, 6.7vw, 110px); }

.masterwork--portrait { --copy: #f3eee7; --rule: rgba(243,238,231,.32); min-height: 100svh; color: #f3eee7; background: #000; }
.portrait-lab { --px: 0; --py: 0; position: relative; min-height: calc(100svh - 150px); margin-top: 22px; overflow: hidden; background: #000; outline: none; }
.portrait-video { position: absolute; inset: -4%; width: 108%; height: 108%; object-position: 66% center; transform: translate(calc(var(--px) * -12px), calc(var(--py) * -8px)) scale(1.03); transition: transform 120ms linear; }
.portrait-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(111,205,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(111,205,255,.45) 1px, transparent 1px); background-size: 42px 42px; transform: perspective(700px) rotateY(calc(var(--px) * 4deg)) translateX(calc(var(--px) * 18px)); mask-image: linear-gradient(90deg, transparent 33%, #000 72%); }
.portrait-copy { position: absolute; z-index: 3; left: 4vw; bottom: 8vh; width: min(650px, 46vw); }
.portrait-lab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.86), transparent 62%); pointer-events: none; }

.orchestra-lab { --ox: 0; --oy: 0; position: relative; min-height: calc(100svh - 150px); margin-top: 22px; overflow: hidden; background: radial-gradient(circle at 72% 46%, rgba(255,255,255,.72), transparent 34%); }
.orchestra-copy { position: absolute; z-index: 6; left: 3vw; bottom: 7vh; width: min(620px, 43vw); pointer-events: none; }
.orchestra-plate { position: absolute; transition: transform 850ms cubic-bezier(.16,.8,.16,1), filter 850ms ease; will-change: transform; }
.orchestra-plate img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; }
.orchestra-plate--a { top: 4%; right: 1%; width: 52vw; aspect-ratio: 1; transform: translate(calc(var(--ox) * -9px), calc(var(--oy) * -7px)) rotate(-8deg); filter: sepia(.3) saturate(.6); }
.orchestra-plate--b { top: 13%; right: 13%; width: 44vw; aspect-ratio: 1; opacity: .9; transform: translate(calc(var(--ox) * 15px), calc(var(--oy) * 12px)); }
.orchestra-plate--c { top: 4%; right: 25%; width: 31vw; aspect-ratio: 3/4; opacity: .88; transform: translate(calc(var(--ox) * -20px), calc(var(--oy) * -16px)); }
.orchestra-plate--d { right: 0; bottom: -10%; width: 48vw; aspect-ratio: 1; transform: translate(calc(var(--ox) * 27px), calc(var(--oy) * 21px)) rotate(14deg); mix-blend-mode: multiply; }
.orchestra-lab.is-decomposed .orchestra-plate--a { transform: translate(-31vw,-8vh) scale(.72) rotate(-14deg); }
.orchestra-lab.is-decomposed .orchestra-plate--b { transform: translate(-9vw,16vh) scale(.68); }
.orchestra-lab.is-decomposed .orchestra-plate--c { transform: translate(12vw,-15vh) scale(.72); }
.orchestra-lab.is-decomposed .orchestra-plate--d { transform: translate(24vw,15vh) scale(.72) rotate(18deg); }
.orchestra-plate--a img { animation: orchestra-breathe 7s ease-in-out infinite; }
.orchestra-plate--b img { animation: orchestra-glass 9s ease-in-out infinite; }
.orchestra-plate--c img { animation: orchestra-liquid 6s ease-in-out infinite; }
.orchestra-plate--d img { animation: orchestra-signal 8s linear infinite; }
@keyframes orchestra-breathe { 0%,100% { transform: scale(.92) rotate(-3deg); opacity: .74; } 50% { transform: scale(1.05) rotate(3deg); opacity: .96; } }
@keyframes orchestra-glass { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-2%); } }
@keyframes orchestra-liquid { 0%,100% { transform: scale(.94,1.02) rotate(0); } 50% { transform: scale(1.05,.95) rotate(-4deg); } }
@keyframes orchestra-signal { from { transform: rotate(0deg) translateY(2%); } to { transform: rotate(360deg) translateY(2%); } }

.masterwork--organism { --copy: #f1eee5; --rule: rgba(241,238,229,.28); color: #f1eee5; background: #06140f; }
.organism-lab { position: relative; min-height: calc(100svh - 150px); margin-top: 22px; overflow: hidden; background: radial-gradient(circle at 70% 52%, #12362a 0%, #06140f 58%); }
#organism-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.organism-copy { position: absolute; z-index: 3; left: 4vw; bottom: 7vh; width: min(650px, 45vw); pointer-events: none; }
.organism-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; pointer-events: auto; }
.organism-controls button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(241,238,229,.42); border-radius: 999px; color: inherit; background: transparent; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.organism-controls button.is-active { color: #06140f; background: #d8ff32; border-color: #d8ff32; }

.masterwork--type { --copy: #171717; --rule: rgba(23,23,23,.3); color: #171717; background: #f0e9dc; }
.type-lab { position: relative; display: grid; place-items: center; min-height: calc(100svh - 150px); margin-top: 22px; overflow: hidden; outline: none; background-color: #f0e9dc; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(25,63,155,.08) 32px 33px); }
#type-canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.type-lab h2 { position: relative; z-index: 2; margin: 0; max-width: 92%; font: 500 clamp(74px, 13.5vw, 220px)/.74 var(--serif); letter-spacing: -.075em; text-align: center; user-select: text; pointer-events: auto; }
.type-controls { position: absolute; z-index: 5; left: 28px; bottom: 28px; display: flex; gap: 8px; }
.type-controls button { min-height: 42px; padding: 0 16px; border: 1px solid #171717; background: #f0e9dc; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

@media (max-width: 760px) {
  .graphic--anime-world { min-height: 100svh !important; padding: 76px 16px 30px; }
  .graphic--anime-world .master-film { inset: 108px 16px 30px; }
  .masterwork { min-height: 90svh; padding: 72px 16px 28px; }
  .master-head { grid-template-columns: 1fr auto; }
  .master-head p:nth-child(2) { text-align: right; }
  .master-head > :nth-child(3):not(button):not(output) { display: none; }
  .master-film, .atlas-lab, .portrait-lab, .orchestra-lab, .organism-lab, .type-lab { min-height: 76svh; margin-top: 18px; }
  .master-video { object-position: 62% center; }
  .master-film--anime .master-video { object-position: 70% center; }
  .master-film__veil { background: linear-gradient(0deg, rgba(4,7,10,.9), transparent 70%); }
  .master-copy, .atlas-copy, .portrait-copy, .orchestra-copy, .organism-copy { left: 18px; bottom: 26px; width: calc(100% - 36px); }
  .master-copy h2, .atlas-copy h2, .portrait-copy h2, .orchestra-copy h2, .organism-copy h2 { font-size: clamp(54px, 16vw, 80px); }
  .master-copy small, .atlas-copy small, .portrait-copy small, .orchestra-copy small { max-width: 82%; margin-top: 18px; }
  .master-film--light::after { background: linear-gradient(0deg, rgba(238,231,220,.92), transparent 69%); }
  .atlas-lab > img { object-position: 64% center; }
  .atlas-lab::after { background: linear-gradient(0deg, rgba(238,230,215,.98), transparent 68%); }
  .atlas-lens { width: 48vw; }
  .portrait-video { object-position: 66% center; }
  .portrait-lab::after { background: linear-gradient(0deg, rgba(0,0,0,.88), transparent 70%); }
  .orchestra-copy { z-index: 8; }
  .orchestra-plate--a { top: 4%; right: -24%; width: 98vw; }
  .orchestra-plate--b { top: 15%; right: 3%; width: 80vw; }
  .orchestra-plate--c { top: 6%; right: 36%; width: 58vw; }
  .orchestra-plate--d { right: -6%; bottom: 20%; width: 54vw; }
  .organism-copy { pointer-events: auto; }
  .organism-copy h2 { font-size: clamp(50px, 15vw, 74px); }
  .type-lab h2 { font-size: clamp(64px, 21vw, 104px); }
  .type-controls { left: 16px; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .persona-scan, #pen-point, .atlas-lens { display: none; }
  #writing-mask-path { stroke-dashoffset: 0; }
  .master-video { display: block; }
  .orchestra-plate img { animation: none; }
}