@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: dark light;
  --ink: #101416;
  --ivory: #f3f1ea;
  --paper-text: #555953;
  --dim: #bac2c5;
  --line: #d0d0c7;
  --gutter: clamp(24px, 5.5vw, 96px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  font-family: 'Manrope', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  font-synthesis: none;
  background: var(--ink);
  color: var(--ivory);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 26px; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; width: 100%; height: auto; }
figure, p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(36px, 4.3vw, 66px); line-height: 1.11; }
p { line-height: 1.65; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #59c8ff; outline-offset: 6px; }
.section-shell { padding-inline: var(--gutter); }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 14px 20px; background: var(--ivory); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.header { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px var(--gutter); color: white; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.brand-mark { width: 29px; height: 29px; flex: none; }
nav { display: flex; gap: 34px; font-size: 14px; }
nav a { padding-block: 9px; }
.hero { min-height: 760px; height: 100svh; max-height: 1150px; position: relative; overflow: hidden; isolation: isolate; background: #06101a; }
.hero-scene { position: absolute; inset: 0; z-index: -2; }
.hero-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3, 10, 16, .64), transparent 68%), linear-gradient(0deg, rgba(3, 10, 16, .7), transparent 24%); pointer-events: none; }
.hero-content { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-44%); max-width: 660px; }
.hero-kicker { font-size: 14px; margin-bottom: 25px; color: #e3edf3; }
h1 { font-size: clamp(64px, 6.5vw, 96px); line-height: 1.03; color: white; }
.hero-lead { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.55; margin-top: 28px; color: #e6edf1; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 38px; }
.button { min-height: 54px; padding: 16px 24px; display: inline-flex; gap: 30px; align-items: center; justify-content: space-between; border-radius: 3px; font-size: 14px; font-weight: 500; transition: background-color 180ms ease-out, transform 180ms ease-out; }
.button-light { color: var(--ink); background: var(--ivory); }
.button span, .text-link span, .underlined-link span { font-size: 21px; font-weight: 400; line-height: 1; }
.text-link { display: inline-flex; align-items: center; gap: 16px; padding-block: 14px; font-size: 14px; }
.hero-bottom { position: absolute; bottom: 30px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; color: #e0e9ee; }
.disclosure { font-size: 12px; line-height: 1.55; }
.atmospheric { transform: scale(1); animation: atmosphere-drift 24s ease-in-out infinite alternate; animation-play-state: paused; }
.atmospheric.is-visible { animation-play-state: running; }
body.is-hidden .atmospheric { animation-play-state: paused; }
@keyframes atmosphere-drift { to { transform: scale(1.035); } }
.object { padding-block: 120px; background: var(--ivory); color: var(--ink); display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(50px, 7vw, 120px); }
.object-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
figcaption { color: var(--paper-text); font-size: 11px; line-height: 1.6; margin-top: 12px; }
.section-label { font-size: 13px; font-weight: 500; margin-bottom: 26px; }
.object-copy h2 { font-size: clamp(34px, 3.25vw, 52px); }
.object-copy > p:not(.section-label) { max-width: 43ch; font-size: 16px; margin-top: 26px; }
.muted { color: var(--paper-text); }
.underlined-link { display: inline-flex; justify-content: space-between; gap: 50px; border-bottom: 1px solid currentColor; padding: 0 0 12px; margin-top: 32px; font-size: 14px; }
.experience { padding-top: 110px; background: var(--ink); }
.experience-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-bottom: 60px; }
.experience-heading p { color: var(--dim); font-size: 17px; padding-bottom: 5px; }
.scene-frame { position: relative; aspect-ratio: 1672 / 941; background: #07131c; overflow: hidden; }
.scene-layer { position: absolute; inset: 0; transition: opacity 1100ms cubic-bezier(.4, 0, .2, 1); }
.scene-layer img { width: 100%; height: 100%; object-fit: cover; }
.scene-amber { opacity: 0; }
.scene-frame[data-mode='amber'] .scene-amber { opacity: 1; }
.scene-frame.is-instant .scene-layer { transition: none; }
.scene-caption { position: absolute; bottom: 35px; left: var(--gutter); padding: 9px 14px; background: rgba(5, 12, 16, .88); font-size: 14px; color: #fff; }
.experience-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 25px; padding-block: 30px 40px; }
.mode-controls { display: flex; gap: 12px; }
.cube-color-controls { align-items: flex-end; }
.color-picker { display: grid; gap: 16px; min-width: 0; }
.color-picker-label { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
.mode-button { display: inline-flex; gap: 10px; align-items: center; min-height: 48px; border: 1px solid #677177; padding: 10px 20px; border-radius: 3px; background: transparent; color: var(--ivory); font-size: 14px; }
.mode-button[aria-pressed='true'] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0, 0, 0, .3); }
.swatch-blue { background: #128cd4; }
.swatch-amber { background: #d29b4b; }
.play-button { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; color: var(--ivory); font-size: 14px; padding: 14px 0; }
.icon { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: middle; }
.play-symbol { display: inline-flex; width: 18px; height: 18px; }
.play-button[aria-pressed='true'] .icon-play, .play-button[aria-pressed='false'] .icon-pause { display: none; }
.play-button:disabled { opacity: .65; cursor: default; }
.experience-controls .disclosure { flex-basis: 100%; color: var(--dim); max-width: 75ch; }
.no-script { padding-block: 20px; color: var(--dim); }
.ritual { display: grid; grid-template-columns: 1.3fr 1fr; padding-block: 110px 120px; background: var(--ivory); color: var(--ink); }
.ritual .section-label { grid-column: 1 / -1; }
.ritual h2 { font-size: clamp(44px, 5.7vw, 86px); }
.ritual-copy { align-self: end; max-width: 36ch; font-size: 17px; padding-bottom: 3px; }
.ritual-copy p + p { margin-top: 26px; color: var(--paper-text); }
.ritual .underlined-link { justify-self: start; margin-top: 42px; }
.faq { display: grid; grid-template-columns: 1fr 1.35fr; gap: 70px; padding-block: 110px; background: var(--ivory); color: var(--ink); border-top: 1px solid var(--line); }
.faq h2 { font-size: clamp(36px, 3.7vw, 55px); margin-bottom: 24px; }
.faq > div > p:last-child { color: var(--paper-text); font-size: 15px; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-block: 24px; cursor: pointer; font-size: 16px; line-height: 1.45; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary .faq-icon { width: 20px; height: 20px; flex: none; }
details[open] .faq-vertical { display: none; }
details p { padding: 0 35px 25px 0; color: var(--paper-text); font-size: 15px; max-width: 65ch; }
.closing { padding-block: 100px; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.closing h2 { font-size: clamp(50px, 6vw, 90px); }
.closing-info { max-width: 370px; padding-bottom: 5px; }
.availability { font-size: 20px; margin-bottom: 12px; }
.closing-info > p + p { font-size: 14px; color: var(--dim); }
.closing .button { margin-top: 30px; }
.footer { padding-block: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #3a4144; }
.footer .wordmark { font-size: 17px; gap: 30px; }
.footer p, .footer > span { font-size: 11px; color: var(--dim); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #fff; transform: translateY(-2px); }
  nav a:hover, .text-link:hover, .play-button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 5px; }
  .underlined-link:hover { opacity: .7; }
}
@media (min-width: 1700px) {
  .hero-scene img { object-position: center; }
}
@media (max-width: 1000px) {
  .hero { min-height: 680px; }
  .hero-content { max-width: 540px; }
  h1 { font-size: 76px; }
  .hero-actions { align-items: start; flex-direction: column; gap: 5px; }
  .object { gap: 40px; padding-block: 80px; }
  .object-copy h2 { font-size: 34px; }
  .experience, .faq { padding-top: 80px; }
  .ritual { gap: 30px; padding-block: 85px; }
  .faq { grid-template-columns: 1fr 1.4fr; gap: 40px; padding-bottom: 80px; }
}
@media (max-width: 700px) {
  .header { position: relative; padding-block: 22px; gap: 16px; background: #071019; }
  .wordmark { font-size: 19px; gap: 7px; }
  .brand-mark { width: 24px; height: 24px; }
  nav { gap: 18px; font-size: 12px; }
  nav a:last-child { display: inline; }
  .hero { min-height: 0; height: auto; max-height: none; display: flex; flex-direction: column; background: #071019; }
  .hero-content { position: relative; inset: auto; transform: none; order: -1; padding: 47px var(--gutter) 32px; max-width: none; }
  .hero-kicker { margin-bottom: 20px; font-size: 12px; }
  h1 { font-size: clamp(54px, 12vw, 80px); }
  .hero-lead { margin-top: 22px; font-size: 17px; }
  .hero-actions { margin-top: 26px; gap: 8px; flex-direction: row; align-items: center; }
  .button { padding: 15px 19px; font-size: 13px; gap: 24px; min-height: 50px; }
  .text-link { font-size: 12px; gap: 9px; }
  .hero-scene { position: relative; inset: auto; z-index: auto; aspect-ratio: 1100 / 619; }
  .hero-scene img { object-fit: contain; }
  .hero::after { display: none; }
  .hero-bottom { position: relative; inset: auto; padding: 16px var(--gutter) 24px; font-size: 10px; gap: 10px; }
  .hero-bottom .disclosure { font-size: 10px; }
  .object { grid-template-columns: 1fr; gap: 42px; padding-block: 65px; }
  .object-copy { padding-bottom: 5px; }
  .section-label { margin-bottom: 20px; }
  .object-copy h2 { font-size: clamp(34px, 8.3vw, 48px); }
  .object-copy > p:not(.section-label) { font-size: 15px; margin-top: 22px; }
  .experience { padding-top: 64px; }
  .experience-heading { display: block; padding-bottom: 35px; }
  .experience-heading h2 { font-size: clamp(36px, 8.5vw, 52px); }
  .experience-heading p { margin-top: 24px; font-size: 15px; }
  .scene-caption { left: 15px; bottom: 14px; font-size: 11px; padding: 7px 10px; }
  .experience-controls { gap: 18px; padding-block: 22px 32px; }
  .mode-button { padding: 10px 15px; font-size: 13px; }
  .play-button { font-size: 12px; gap: 6px; }
  .experience-controls .disclosure { font-size: 11px; }
  .ritual { display: block; padding-block: 66px; }
  .ritual h2 { font-size: clamp(44px, 10vw, 64px); }
  .ritual-copy { margin-top: 30px; max-width: 37ch; font-size: 16px; }
  .ritual .underlined-link { margin-top: 28px; }
  .faq { grid-template-columns: 1fr; gap: 36px; padding-block: 65px; }
  .faq h2 { font-size: 38px; margin-bottom: 18px; }
  summary { font-size: 15px; padding-block: 21px; }
  details p { font-size: 14px; }
  .closing { display: block; padding-block: 65px; }
  .closing h2 { font-size: clamp(48px, 11vw, 72px); }
  .closing-info { margin-top: 40px; }
  .footer { flex-wrap: wrap; padding-block: 26px; row-gap: 20px; }
  .footer p { order: 3; flex-basis: 100%; }
}
@media (max-width: 360px) {
  nav { gap: 12px; font-size: 11px; }
  .wordmark { font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: start; }
  .experience-controls { align-items: start; flex-direction: column; }
  .hero-bottom { flex-direction: column; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .atmospheric { animation: none; transform: none; }
  .scene-layer, .button { transition: none; }
}
/* Shared world extension: photographic entry, warm editorial counterpart. */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.portal { background: #101416; padding-top: 130px; }
.portal-intro { padding: 30px var(--gutter) 56px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 20px; }
.portal-intro .section-label { grid-column: 1 / -1; margin: 0; color: #bac2c5; }
.portal-intro h1 { font-size: clamp(44px, 4.7vw, 72px); }
.portal-intro > p:last-child { justify-self: end; color: #bac2c5; padding-bottom: 5px; }
.portal-worlds { display: grid; grid-template-columns: 1fr 1fr; }
.world { min-height: 650px; height: 75svh; max-height: 1000px; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: end; padding: 50px clamp(24px, 4vw, 64px); }
.world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 77% center; z-index: -2; transition: transform 650ms var(--ease); }
.world-warm img { object-position: 79% center; }
.world::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 10, 16, .94), transparent 65%); }
.world-warm::after { background: linear-gradient(0deg, rgba(29, 15, 8, .95), transparent 65%); }
.world-tag { display: block; font-size: 13px; margin-bottom: 15px; }
.world h2 { font-size: clamp(40px, 4.1vw, 64px); }
.world-copy > p { margin-top: 14px; font-size: 17px; }
.world-action { display: flex; gap: 40px; justify-content: space-between; border-bottom: 1px solid currentColor; padding-block: 24px 12px; margin-top: 6px; font-size: 14px; }
.portal-note { padding: 24px var(--gutter) 32px; display: flex; justify-content: space-between; gap: 24px; color: var(--dim); font-size: 11px; }
.scene-layer { opacity: 0; transition: opacity 700ms cubic-bezier(.4, 0, .2, 1); }
.scene-frame[data-mode='blue'] .scene-blue, .scene-frame[data-mode='amber'] .scene-amber, .scene-frame[data-mode='violet'] .scene-violet, .scene-frame[data-mode='white'] .scene-white { opacity: 1; }
.swatch-violet { background: #ab70da; }
.swatch-white { background: #f1eee9; }
.mode-controls { flex-wrap: wrap; }
.film { padding-block: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.film h2 { margin-bottom: 28px; }
.film > div > p:last-child { max-width: 42ch; color: var(--dim); }
.film figure { justify-self: center; width: min(100%, 360px); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #07131c; }
.film figcaption { color: var(--dim); }
.trazo-page { --ink: #211610; --ivory: #f4eee3; --paper-text: #685749; --dim: #d8c2ad; --line: #d6c7b6; background: var(--ink); }
.trazo-hero { background: #211610; }
.trazo-hero::after { background: linear-gradient(90deg, rgba(22, 12, 7, .55), transparent 65%), linear-gradient(0deg, rgba(22, 12, 7, .7), transparent 22%); }
.trazo-hero .hero-scene img { object-position: 65% 50%; }
.creation { padding-block: 110px; background: #302019; color: #f4eee3; }
.creation-heading { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 60px; align-items: end; }
.creation-heading .section-label { grid-column: 1 / -1; color: #d8c2ad; }
.creation-heading > p:last-child { color: #d8c2ad; }
.creation-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 64px; border-top: 1px solid #765b48; }
.creation-flow > div { padding-top: 30px; }
.creation-flow h3 { margin: 0 0 15px; font-size: clamp(27px, 2.7vw, 40px); font-weight: 400; letter-spacing: -.025em; }
.creation-flow p { color: #dfcbb9; max-width: 30ch; }
.creation-note { max-width: 90ch; margin-top: 48px; color: #d8c2ad; font-size: 12px; }
.experience-tools { display: flex; background: #101416; }
.experience-tools button { min-width: 44px; min-height: 44px; padding: 10px 14px; color: #f3f1ea; border: 0; background: transparent; font-size: 12px; }
.experience-tools button:disabled { opacity: .65; cursor: default; }
body.motion-paused .atmospheric, body.is-hidden .atmospheric { animation-play-state: paused; }
body[data-route='trazo'] .header { background: transparent; }
body[data-route='trazo'] .experience-tools, body[data-route='trazo'] .footer { background: #211610; }
@media (hover: hover) and (pointer: fine) { .world:hover img { transform: scale(1.025); } .world:hover .world-action { color: white; } }
@media (max-width: 1000px) { .world { min-height: 580px; } .portal-intro { grid-template-columns: 1.3fr 1fr; } .film { gap: 35px; } }
@media (max-width: 700px) {
  .portal { padding-top: 0; }
  .portal-intro { display: block; padding-block: 38px; }
  .portal-intro .section-label { margin-bottom: 18px; font-size: 12px; }
  .portal-intro h1 { font-size: clamp(40px, 10vw, 58px); }
  .portal-intro > p:last-child { margin-top: 22px; font-size: 14px; }
  .portal-worlds { grid-template-columns: 1fr; }
  .world { height: auto; min-height: 520px; padding: 32px var(--gutter); }
  .world img { object-position: 76% center; }
  .world-copy { width: 100%; }
  .world h2 { font-size: 42px; }
  .world-tag { font-size: 12px; }
  .world-copy > p { font-size: 15px; }
  .world-action { max-width: 280px; }
  .portal-note { display: block; padding-block: 22px; }
  .portal-note p + p { margin-top: 10px; }
  .film { grid-template-columns: 1fr; padding-block: 65px; gap: 35px; }
  .film h2 { font-size: 42px; }
  .film > div > p:last-child { font-size: 15px; }
  .creation { padding-block: 65px; }
  .creation-heading { display: block; }
  .creation-heading > p:last-child { margin-top: 26px; font-size: 15px; }
  .creation-flow { grid-template-columns: 1fr; gap: 0; margin-top: 38px; }
  .creation-flow > div { padding-block: 25px; border-bottom: 1px solid #765b48; }
  .creation-flow h3 { font-size: 30px; }
  .creation-flow p { font-size: 15px; max-width: 40ch; }
  .creation-note { margin-top: 30px; }
  .trazo-hero, body[data-route='trazo'] .header { background: #211610; }
  .mode-controls { gap: 8px; }
  .mode-button { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .world img, .scene-layer { transition: none; } }
.experience-tools { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; width: max-content; max-width: calc(100% - 24px); border: 1px solid #596166; border-radius: 3px; }
.experience-tools button:focus-visible { outline-offset: 3px; }
body[data-route='cubo'], body[data-route='trazo'] { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* Bounded finish corrections: first-viewport choices, visible audio expectations and whole objects. */
.entry-sound-note { display: block; margin-top: 18px; font-size: 11px; line-height: 1.55; color: #e0e9ee; }
.world-warm .entry-sound-note { color: #ead5c0; }
.world-action { padding-top: 12px; }
.hero-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 5px; max-width: calc(100% - 550px); }
html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

button, a, summary, video { scroll-margin-block-end: calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 701px) {
  .portal { padding-top: 100px; }
  .portal-intro { grid-template-columns: 1.7fr .8fr; padding-block: 12px 28px; gap: 12px 28px; }
  .portal-intro h1 { font-size: clamp(38px, 3.6vw, 52px); }
  .portal-intro > p:last-child { max-width: 29ch; font-size: 14px; }
  .world { height: calc(100svh - 300px); min-height: 400px; max-height: 760px; padding-block: 30px; }
  .world h2 { font-size: clamp(36px, 3.5vw, 52px); }
  .world-tag { margin-bottom: 10px; }
  .world-copy > p { margin-top: 10px; }
}
@media (max-width: 700px) {
  .header { flex-wrap: wrap; gap: 8px 14px; }
  .header nav { gap: 14px; font-size: 11px; }
  .header nav a { display: inline; white-space: nowrap; }
  .world { display: block; min-height: 0; height: auto; padding: 0; }
  .world img { position: relative; inset: auto; z-index: auto; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
  .world-blue img { object-position: 68% center; }
  .world-warm img { object-position: 72% center; }
  .world::after { display: none; }
  .world-copy { padding: 25px var(--gutter) 30px; background: #07131c; }
  .world-warm .world-copy { background: #211610; }
  .world h2 { font-size: 38px; }
  .hero-bottom { max-width: none; padding-bottom: 115px; }
  .entry-sound-note { font-size: 11px; }
}
/* Trazo refinement: photographic detail, aligned original ideas, existing warm world. */
.trazo-hero { min-height: 710px; height: min(100svh, 900px); }
.trazo-hero .hero-content { max-width: min(46vw, 650px); }
.trazo-hero h1 { font-size: clamp(58px, 5.6vw, 86px); }
.trazo-hero .hero-scene img { object-position: 70% center; }
.trazo-page .object-figure img { aspect-ratio: 1672 / 941; object-fit: contain; }
.design-experience { padding-top: 100px; background: var(--ink); }
.design-experience .experience-heading { padding-bottom: 48px; }
.design-experience .experience-heading .section-label { color: var(--dim); margin-bottom: 24px; font-size: 13px; }
.design-frame { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; background: #302019; max-width: 1672px; margin-inline: auto; }
.design-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 650ms cubic-bezier(.4, 0, .2, 1); }
.design-layer img { width: 100%; height: 100%; object-fit: contain; }
.design-frame[data-design='starry'] .design-starry,
.design-frame[data-design='mona'] .design-mona,
.design-frame[data-design='rocket'] .design-rocket,
.design-frame[data-design='dinosaur'] .design-dinosaur,
.design-frame[data-design='cosmos'] .design-cosmos,
.design-frame[data-design='message'] .design-message { opacity: 1; }
.design-frame.is-instant .design-layer { transition: none; }
.design-caption { position: absolute; left: var(--gutter); bottom: 24px; padding: 8px 12px; background: #211610; color: var(--ivory); font-size: 12px; }
.design-experience .mode-button { border-color: #8f7763; }
.design-experience .experience-controls { padding-bottom: 46px; }
.trazo-page .creation { padding-block: 90px; background: var(--ivory); color: var(--ink); }
.trazo-page .creation-heading .section-label, .trazo-page .creation-heading > p:last-child, .trazo-page .creation-flow p, .trazo-page .creation-note { color: var(--paper-text); }
.trazo-page .creation-flow { border-color: var(--line); margin-top: 48px; }
.step-number { display: block; margin-bottom: 24px; font-size: 12px; color: var(--paper-text); }
.trazo-page .creation-flow h3 { font-size: clamp(26px, 2.3vw, 36px); }
.trazo-hero .hero-scene { width: 100%; max-width: none; animation: none; transform: none; }
@media (max-width: 1000px) {
  .trazo-hero { min-height: 0; height: auto; max-height: none; display: flex; flex-direction: column; padding-top: 105px; }
  .trazo-hero .hero-content { position: relative; inset: auto; transform: none; max-width: none; order: -1; padding: 30px var(--gutter); }
  .trazo-hero .hero-scene { position: relative; inset: auto; z-index: auto; aspect-ratio: 1672 / 941; }
  .trazo-hero .hero-scene img { object-fit: contain; }
  .trazo-hero::after { display: none; }
  .trazo-hero .hero-bottom { position: relative; inset: auto; max-width: none; padding: 20px var(--gutter) 32px; }
  .trazo-hero .hero-actions { flex-direction: row; align-items: center; }
}
@media (max-width: 700px) {
  .trazo-hero { padding-top: 0; }
  .trazo-hero h1 { font-size: clamp(46px, 10.8vw, 72px); }
  .trazo-hero .hero-content { padding-block: 42px 30px; }
  .trazo-hero .hero-bottom { padding-bottom: 32px; }
  .design-experience { padding-top: 64px; }
  .design-experience .experience-heading { padding-bottom: 30px; }
  .design-caption { left: 14px; bottom: 12px; font-size: 10px; padding: 6px 8px; }
  .design-experience .experience-controls { padding-block: 20px 30px; gap: 14px; }
  .design-experience .mode-controls { gap: 7px; }
  .design-experience .mode-button { padding: 10px 12px; font-size: 12px; }
  .trazo-page .creation { padding-block: 65px; }
  .trazo-page .creation-flow { margin-top: 34px; }
  .trazo-page .creation-flow > div { border-color: var(--line); }
  .step-number { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .design-layer { transition: none; } }
/* Compact supplier facts and visual use examples, inside the existing chapters. */
.brightness-frame { position: relative; aspect-ratio: 1672 / 941; background: #07131c; overflow: hidden; }
.brightness-layer { position: absolute; inset: 0; opacity: 0; }
.brightness-layer img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1672 / 941; }
.brightness-frame[data-brightness='soft'] .brightness-soft,
.brightness-frame[data-brightness='medium'] .brightness-medium,
.brightness-frame[data-brightness='bright'] .brightness-bright { opacity: 1; }
.brightness-controls { display: flex; gap: 8px; margin-top: 16px; }
.brightness-controls .mode-button { color: var(--ink); border-color: var(--paper-text); min-height: 44px; padding: 8px 18px; }
.brightness-controls .mode-button[aria-pressed='true'] { color: var(--ivory); background: var(--ink); border-color: var(--ink); }
.product-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.product-facts dt { color: var(--paper-text); font-size: 11px; line-height: 1.5; }
.product-facts dd { margin: 6px 0 0; font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -.025em; }
.object-copy > p.fact-note { margin-top: 14px; font-size: 11px; line-height: 1.6; color: var(--paper-text); }
.object-copy > p.connection-note { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 12px; margin-top: 24px; }
.photo-steps { gap: 30px; }
.photo-steps > div > picture { display: block; margin-bottom: 22px; }
.photo-steps img { aspect-ratio: 1672 / 941; width: 100%; object-fit: contain; }
.photo-steps .step-number { margin-bottom: 12px; }
.trazo-page .photo-steps h3 { font-size: clamp(24px, 2vw, 30px); margin-bottom: 10px; }
.photo-steps .step-copy p { font-size: 14px; }
.trazo-page .creation-note { margin-top: 28px; }
@media (max-width: 700px) {
  .product-facts { gap: 12px; margin-top: 22px; }
  .product-facts dd { font-size: 21px; }
  .brightness-controls .mode-button { padding-inline: 16px; font-size: 12px; }
  .trazo-page .photo-steps { gap: 0; }
  .trazo-page .photo-steps > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; align-items: center; padding-block: 22px; }
  .photo-steps > div > picture { margin: 0; }
  .photo-steps .step-copy p { font-size: 13px; line-height: 1.55; }
  .trazo-page .photo-steps h3 { font-size: 23px; line-height: 1.14; }
  .photo-steps .step-number { margin-bottom: 8px; }
}

.experience-tools #sound-status:not(.visually-hidden) { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(240px, calc(100vw - 32px)); margin: 0; padding: 10px 12px; background: var(--ink); color: var(--ivory); border: 1px solid var(--dim); font-size: 12px; line-height: 1.5; }