:root {
  --paper: #efeee6;
  --panel: #fffdf5;
  --ink: #111510;
  --muted: #687069;
  --line: #ced2c9;
  --soft-line: #e4e6de;
  --green: #b9ff3e;
  --green-dark: #356a00;
  --orange: #ff6b3d;
  --orange-soft: #ffe0d5;
  --blue: #5c7cff;
  --blue-soft: #e4e9ff;
  --cyan: #55e5d0;
  --yellow: #ffd55c;
  --purple: #9b68ff;
  --shadow: 0 24px 70px rgb(26 31 24 / 12%);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 1%, rgb(185 255 62 / 20%), transparent 25%),
    radial-gradient(circle at 98% 4%, rgb(92 124 255 / 16%), transparent 25%),
    var(--paper);
  font-family: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
button, select, input, a { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible {
  outline: 4px solid rgb(92 124 255 / 26%);
  outline-offset: 3px;
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.page { width: min(1580px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 48px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: 0 5px 24px;
}
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #315f05; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.eyebrow i { position: relative; display: block; width: 34px; height: 24px; }
.eyebrow i::before, .eyebrow i::after { position: absolute; right: 0; left: 0; height: 4px; background: var(--ink); border-radius: 99px; content: ""; }
.eyebrow i::before { top: 3px; box-shadow: 0 14px 0 var(--ink); }
.eyebrow i::after { top: 10px; left: 9px; width: 15px; background: var(--orange); }
h1 { margin: 0; font-family: "Arial Black", Inter, sans-serif; font-size: clamp(48px, 6vw, 90px); letter-spacing: normal; }
h1 span { color: var(--blue); }
.lead { margin: 15px 0 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 22px); font-weight: 800; line-height: 1.5; }
.lead strong { color: var(--ink); }
.hero-actions { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; padding-bottom: 4px; }
.button, .docs-button { display: grid; min-height: 47px; place-items: center; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; font-size: 10px; font-weight: 900; text-decoration: none; }
.button--quiet, .docs-button { background: var(--panel); }
.button--dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.button--green { color: var(--ink); background: var(--green); border-color: var(--green); }

.preset-board, .controls-card, .preview-card, .output-card {
  min-width: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 25px;
  box-shadow: var(--shadow);
}
.section-head { display: flex; min-height: 80px; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.section-head--compact { min-height: 72px; }
.section-head > div:not(.mode-switch, .preview-actions) { min-width: 0; }
.section-head p { margin: 0 0 3px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.section-head h2 { margin: 0; font-size: clamp(19px, 1.45vw, 25px); line-height: 1.12; }
.section-mark { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; color: var(--ink); background: var(--green); border-radius: 14px; font-size: 11px; font-weight: 900; }
.section-mark--orange { color: #fff; background: var(--orange); }
.section-mark--blue { color: #fff; background: var(--blue); }
.section-mark--green { background: var(--green); }
.section-note { max-width: 500px; margin: 0 0 0 auto !important; color: var(--muted) !important; font-size: 10px !important; line-height: 1.55; letter-spacing: 0 !important; text-align: right; }

.preset-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 15px; background-image: linear-gradient(var(--soft-line) 1px, transparent 1px), linear-gradient(90deg, var(--soft-line) 1px, transparent 1px); background-size: 24px 24px; }
.preset-grid > button { display: grid; min-width: 0; grid-template-columns: 82px 1fr; align-items: center; gap: 12px; min-height: 104px; padding: 10px; text-align: left; background: rgb(255 253 245 / 93%); border: 1px solid var(--line); border-radius: 16px; transition: border-color .25s, box-shadow .25s, translate .25s; }
.preset-grid > button:hover, .preset-grid > button[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 10px 25px rgb(68 88 166 / 14%); translate: 0 -2px; }
.preset-grid > button[aria-pressed="true"] { background: #f2f5ff; }
.preset-grid > button > span { display: grid; min-width: 0; gap: 3px; }
.preset-grid small { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.preset-grid strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.preset-grid em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700; }
.preset-art { position: relative; display: block; width: 82px; height: 76px; overflow: hidden; background: #eceee7; border: 2px solid var(--ink); border-radius: 12px; }
.preset-art * { position: absolute; }
.preset-art--reveal { background: var(--orange-soft); }
.preset-art--reveal b { top: 24px; left: 8px; font-family: "Arial Black", sans-serif; font-size: 18px; }
.preset-art--reveal span { right: 6px; bottom: 7px; width: 28px; height: 28px; background: var(--orange); border: 2px solid var(--ink); border-radius: 50%; }
.preset-art--scrub { background: var(--blue-soft); }
.preset-art--scrub b { top: 24px; left: -5px; color: var(--blue); font-family: "Arial Black", sans-serif; font-size: 20px; transform: rotate(-8deg); }
.preset-art--scrub span { top: 11px; bottom: 11px; left: 38px; width: 3px; background: var(--ink); }
.preset-art--pin { color: #fff; background: var(--ink); }
.preset-art--pin b { top: 13px; left: 10px; font-family: "Arial Black", sans-serif; font-size: 31px; }
.preset-art--pin span { right: -9px; bottom: -8px; width: 50px; height: 50px; background: var(--green); border-radius: 50%; }
.preset-art--horizontal { background: var(--green); }
.preset-art--horizontal b { z-index: 3; top: 18px; left: 22px; font-family: "Arial Black", sans-serif; font-size: 34px; }
.preset-art--horizontal span, .preset-art--horizontal em { top: 8px; bottom: 8px; width: 27px; background: var(--orange); border: 2px solid var(--ink); border-radius: 8px; }
.preset-art--horizontal span { left: 7px; }
.preset-art--horizontal em { right: 7px; background: var(--purple); }
.preset-art--parallax { background: #c8f6ec; }
.preset-art--parallax b, .preset-art--parallax span, .preset-art--parallax em { width: 43px; height: 43px; border: 2px solid var(--ink); border-radius: 50%; }
.preset-art--parallax b { top: 8px; left: 7px; background: var(--yellow); }
.preset-art--parallax span { top: 19px; left: 23px; background: var(--blue); border-radius: 8px; transform: rotate(18deg); }
.preset-art--parallax em { top: 34px; left: 40px; width: 32px; height: 32px; background: var(--orange); }
.preset-art--mask { color: #fff; background: var(--purple); }
.preset-art--mask b { z-index: 2; top: 27px; left: 8px; font-family: "Arial Black", sans-serif; font-size: 14px; }
.preset-art--mask span { top: -10px; left: 19px; width: 23px; height: 100px; background: var(--green); transform: rotate(19deg); }

.studio { display: grid; grid-template-columns: minmax(355px, .38fr) minmax(690px, .62fr); align-items: start; gap: 16px; margin-top: 16px; }
.controls-card { position: sticky; top: 12px; }
.mode-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 138px; min-height: 41px; margin-left: auto; padding: 4px; background: #eceee7; border: 1px solid var(--line); border-radius: 12px; }
.mode-switch button { position: relative; z-index: 2; background: transparent; border: 0; font-size: 10px; font-weight: 900; }
.mode-switch i { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; border-radius: 9px; box-shadow: 0 3px 9px rgb(17 21 16 / 10%); transition: translate .3s var(--ease); }
.mode-switch:has(button:nth-child(2)[aria-pressed="true"]) i { translate: 100% 0; }
.control-stack { max-height: calc(100vh - 125px); overflow: auto; scrollbar-width: thin; }
.control-group { display: grid; gap: 11px; padding: 16px 17px 18px; border-bottom: 1px solid var(--line); }
.control-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.control-group > header span, .advanced-drawer summary span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.control-group > header strong { color: var(--muted); font-size: 10px; }
.position-card { display: grid; grid-template-columns: 120px 1fr 1.2fr; align-items: center; gap: 9px; padding: 10px; background: #f2f3ed; border: 1px solid var(--line); border-radius: 14px; }
.position-card--start { box-shadow: inset 4px 0 0 var(--green); }
.position-card--end { box-shadow: inset 4px 0 0 var(--orange); }
.position-title { display: grid; gap: 4px; padding-left: 6px; }
.position-title i { width: max-content; padding: 4px 7px; color: var(--ink); background: var(--green); border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 900; }
.position-card--end .position-title i { color: #fff; background: var(--orange); }
.position-title b { font-size: 11px; }
.select-field, .action-grid label { display: grid; gap: 5px; }
.select-field > span, .action-grid span { color: var(--muted); font-size: 10px; font-weight: 800; }
select { min-width: 0; min-height: 39px; padding: 0 32px 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; font-weight: 800; }
.range-field, .distance-control { display: grid; gap: 8px; min-width: 0; }
.range-field > span, .distance-control > span { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 800; }
.range-field output, .distance-control output { color: var(--ink); font-weight: 900; }
input[type="range"] { width: 100%; height: 4px; margin: 6px 0; appearance: none; background: linear-gradient(90deg, var(--blue) 0 var(--fill, 50%), #d6d9d2 var(--fill, 50%) 100%); border-radius: 99px; }
input[type="range"]::-webkit-slider-thumb { width: 17px; height: 17px; appearance: none; background: #fff; border: 4px solid var(--blue); border-radius: 50%; box-shadow: 0 2px 6px rgb(17 21 16 / 20%); }
.end-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.end-mode button { min-height: 36px; background: #f2f3ed; border: 1px solid var(--line); border-radius: 10px; font-size: 10px; font-weight: 900; }
.end-mode button[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
.distance-control { padding: 13px; background: var(--orange-soft); border: 1px solid #f0ae97; border-radius: 13px; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.choice-row button { display: grid; gap: 3px; min-height: 60px; place-content: center; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.choice-row button[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); }
.choice-row b { font-size: 11px; }
.choice-row small { color: var(--muted); font-size: 10px; font-weight: 700; }
.toggle-grid, .advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.toggle-field { display: flex; min-height: 54px; align-items: center; gap: 10px; padding: 9px 10px; background: #f2f3ed; border: 1px solid var(--line); border-radius: 12px; }
.toggle-field > span { display: grid; gap: 2px; margin-right: auto; }
.toggle-field b { font-size: 10px; }
.toggle-field small { color: var(--muted); font-size: 10px; font-weight: 700; }
.toggle-field input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-field > i { position: relative; flex: 0 0 38px; width: 38px; height: 22px; background: #c9cec6; border-radius: 99px; transition: background .2s; }
.toggle-field > i::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 5px rgb(0 0 0 / 15%); content: ""; transition: translate .25s var(--ease); }
.toggle-field input:checked + i { background: var(--blue); }
.toggle-field input:checked + i::after { translate: 16px 0; }
.help-text { margin: -2px 0 2px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.55; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.advanced-drawer { border-bottom: 1px solid var(--line); }
.advanced-drawer summary { display: flex; align-items: center; gap: 12px; min-height: 55px; padding: 0 17px; cursor: pointer; list-style: none; }
.advanced-drawer summary::-webkit-details-marker { display: none; }
.advanced-drawer summary b { font-size: 11px; }
.advanced-drawer summary::after { margin-left: auto; color: var(--blue); content: "+"; font-size: 20px; font-weight: 900; }
.advanced-drawer[open] summary::after { content: "−"; }
.advanced-grid { padding: 0 17px 18px; }
.advanced-grid > .range-field { grid-column: 1 / -1; padding: 12px; background: #f2f3ed; border: 1px solid var(--line); border-radius: 12px; }
.controls-card[data-mode="simple"] .advanced-only { display: none !important; }

.workspace { display: grid; min-width: 0; gap: 16px; }
.preview-head { flex-wrap: wrap; }
.preview-actions { display: flex; gap: 7px; margin-left: auto; }
.preview-actions button { min-height: 40px; padding: 0 12px; background: #eff1eb; border: 1px solid var(--line); border-radius: 11px; font-size: 10px; font-weight: 900; }
.preview-actions button:nth-child(2) { color: #fff; background: var(--ink); border-color: var(--ink); }
.preview-actions button[aria-pressed="true"] { color: #fff; background: var(--blue); border-color: var(--blue); }
.preview-shell { position: relative; padding: 15px 122px 15px 15px; background: #e9ebe5; }
.browser-bar { display: flex; height: 36px; align-items: center; gap: 6px; padding: 0 11px; background: #d6d9d1; border: 1px solid #bfc4ba; border-bottom: 0; border-radius: 14px 14px 0 0; }
.browser-bar i { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; }
.browser-bar i:nth-child(2) { background: var(--yellow); }
.browser-bar i:nth-child(3) { background: #45c997; }
.browser-bar span { margin-left: 7px; color: #727970; font-size: 10px; font-weight: 800; }
.browser-bar b { margin-left: auto; font-size: 10px; }
.preview-canvas { position: relative; height: min(60vh, 620px); min-height: 490px; overflow: hidden; border-radius: 0 0 14px 14px; contain: layout paint; }
.preview-scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #151b17; border: 1px solid #bfc4ba; border-radius: inherit; scrollbar-color: var(--green) #2f3631; scrollbar-width: thin; }
.scroll-content { min-height: 2550px; overflow: hidden; background: #151b17; }
.intro-block, .outro-block { position: relative; display: grid; min-height: 690px; align-content: center; padding: 70px clamp(30px, 7vw, 110px); color: #f8f8ef; }
.intro-block { background:
  linear-gradient(90deg, transparent 49.7%, rgb(255 255 255 / 10%) 50%, transparent 50.3%),
  radial-gradient(circle at 70% 40%, rgb(92 124 255 / 34%), transparent 26%),
  #151b17; }
.intro-block > span, .outro-block > span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.intro-block h3, .outro-block h3 { margin: 13px 0; font-family: "Arial Black", Inter, sans-serif; font-size: clamp(47px, 6vw, 86px); line-height: .9; letter-spacing: normal; }
.intro-block p, .outro-block p { max-width: 470px; margin: 0; color: #aeb8b0; font-size: 11px; font-weight: 700; line-height: 1.7; }
.intro-block > i { position: absolute; right: 35px; bottom: 34px; display: grid; width: 55px; height: 55px; place-items: center; color: var(--ink); background: var(--green); border-radius: 50%; font-size: 23px; font-style: normal; }
.outro-block { min-height: 750px; color: var(--ink); background: #f3f0e5; }
.outro-block > span { color: var(--orange); }
.outro-block p { color: var(--muted); }
.demo-scene { position: relative; min-height: 610px; padding: 34px; color: var(--ink); background: #f3f0e5; }
.scene-frame { position: relative; display: grid; height: 542px; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); overflow: hidden; background: #f9f6ec; border: 2px solid var(--ink); border-radius: 24px; }
.scene-copy { position: relative; z-index: 2; display: grid; align-content: center; padding: clamp(28px, 5vw, 70px); }
.scene-kicker { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.scene-title { display: grid; margin: 17px 0; font-family: "Arial Black", Inter, sans-serif; font-size: clamp(37px, 4.3vw, 65px); line-height: .87; letter-spacing: normal; }
.scene-title i { font-style: normal; }
.scene-body { max-width: 380px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.7; }
.scene-meta { display: flex; align-items: center; gap: 18px; margin-top: 34px; font-size: 10px; }
.scene-meta span { color: var(--muted); }
.scene-meta b { padding: 7px 9px; color: #fff; background: var(--ink); border-radius: 99px; }
.scene-art { position: relative; overflow: hidden; background: var(--blue); }
.art-orbit { position: absolute; display: block; border: 3px solid var(--ink); border-radius: 50%; }
.art-orbit--one { top: 9%; left: 11%; width: 76%; aspect-ratio: 1; background: var(--green); }
.art-orbit--two { top: 23%; left: 28%; width: 57%; aspect-ratio: 1; background: var(--orange); }
.art-disc { position: absolute; top: 36%; left: 42%; width: 38%; aspect-ratio: 1; background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%; }
.art-card { position: absolute; display: grid; place-items: center; color: #fff; background: var(--ink); border: 2px solid #fff; font-size: 10px; font-weight: 900; }
.art-card--one { top: 13%; right: 8%; width: 70px; height: 90px; rotate: 8deg; }
.art-card--two { bottom: 9%; left: 8%; width: 120px; height: 48px; rotate: -8deg; }
.art-line { position: absolute; right: -20%; bottom: 12%; width: 105%; height: 16px; background: #fff; rotate: -16deg; }
.horizontal-track { display: none; width: 400%; height: 100%; will-change: transform; }
.horizontal-panel { position: relative; display: grid; flex: 0 0 25%; width: 25%; height: 100%; align-content: space-between; padding: clamp(28px, 5vw, 72px); border-right: 2px solid var(--ink); }
.horizontal-panel small { font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.horizontal-panel strong { align-self: center; font-family: "Arial Black", Inter, sans-serif; font-size: clamp(70px, 10vw, 160px); line-height: .8; }
.horizontal-panel span { width: max-content; padding: 8px 12px; color: #fff; background: var(--ink); border-radius: 999px; font-size: 10px; font-weight: 900; }
.horizontal-panel--one { background: var(--green); }
.horizontal-panel--two { color: #fff; background: var(--blue); }
.horizontal-panel--three { background: var(--orange); }
.horizontal-panel--four { color: #fff; background: var(--purple); border-right: 0; }

/* The same DOM becomes five polished scene types. */
.demo-scene[data-scene="scrub"] .scene-frame { color: #fff; background: var(--ink); }
.demo-scene[data-scene="scrub"] .scene-art { background: #201f26; }
.demo-scene[data-scene="scrub"] .scene-title { font-size: clamp(48px, 6vw, 92px); }
.demo-scene[data-scene="scrub"] .scene-title i:nth-child(1) { color: var(--green); }
.demo-scene[data-scene="scrub"] .scene-title i:nth-child(2) { color: var(--orange); }
.demo-scene[data-scene="scrub"] .scene-title i:nth-child(3) { color: var(--blue); }
.demo-scene[data-scene="scrub"] .scene-body { color: #aeb8b0; }
.demo-scene[data-scene="scrub"] .art-orbit--one { background: transparent; border-color: var(--green); }
.demo-scene[data-scene="scrub"] .art-orbit--two { background: transparent; border-color: var(--orange); }
.demo-scene[data-scene="pin"] .scene-frame { grid-template-columns: 1fr; color: #fff; background: var(--ink); }
.demo-scene[data-scene="pin"] .scene-copy { position: absolute; z-index: 4; inset: 0; align-content: center; text-align: center; }
.demo-scene[data-scene="pin"] .scene-title { font-size: clamp(55px, 8vw, 120px); }
.demo-scene[data-scene="pin"] .scene-art { position: absolute; inset: 0; background: var(--orange); clip-path: inset(48% 0 0); }
.demo-scene[data-scene="pin"] .scene-body { margin-inline: auto; color: #e7d4cc; }
.demo-scene[data-scene="pin"] .scene-meta { justify-content: center; }
.demo-scene[data-scene="horizontal"] .scene-frame { display: block; background: var(--green); }
.demo-scene[data-scene="horizontal"] .scene-copy,
.demo-scene[data-scene="horizontal"] .scene-art { display: none; }
.demo-scene[data-scene="horizontal"] .horizontal-track { display: flex; }
.demo-scene[data-scene="parallax"] .scene-frame { background: #dffaf4; }
.demo-scene[data-scene="parallax"] .scene-art { background: #c7f5eb; }
.demo-scene[data-scene="parallax"] .art-orbit--one { top: -9%; left: 8%; background: var(--yellow); }
.demo-scene[data-scene="parallax"] .art-orbit--two { top: 31%; left: 40%; background: var(--blue); }
.demo-scene[data-scene="parallax"] .art-disc { top: 58%; left: 11%; background: var(--orange); }
.demo-scene[data-scene="mask"] .scene-frame { color: #fff; background: var(--purple); }
.demo-scene[data-scene="mask"] .scene-copy { z-index: 3; grid-column: 1 / -1; }
.demo-scene[data-scene="mask"] .scene-title { font-size: clamp(48px, 7vw, 108px); mix-blend-mode: screen; }
.demo-scene[data-scene="mask"] .scene-body { color: #eee6ff; }
.demo-scene[data-scene="mask"] .scene-art { position: absolute; inset: 0; background: var(--green); clip-path: inset(0 100% 0 0); }

.progress-dock { position: absolute; top: 15px; right: 14px; bottom: 15px; display: grid; width: 98px; align-content: start; gap: 8px; padding: 11px; color: #fff; background: var(--ink); border-radius: 14px; }
.progress-ring { display: flex; height: 76px; align-items: baseline; justify-content: center; padding-top: 21px; background: conic-gradient(var(--green) var(--progress, 0%), #303832 0); border-radius: 50%; box-shadow: inset 0 0 0 9px var(--ink); }
.progress-ring strong { font-size: 23px; }
.progress-ring span { color: var(--green); font-size: 10px; font-weight: 900; }
.progress-dock > div:not(.progress-ring) { display: grid; gap: 3px; padding-top: 9px; border-top: 1px solid #39413b; }
.progress-dock > div > span { color: #89938c; font-size: 10px; font-weight: 900; }
.progress-dock > div > strong { overflow: hidden; color: var(--green); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.progress-dock small { color: #89938c; font-size: 10px; }

.preview-scroll .gsap-marker-start, .preview-scroll .gsap-marker-end,
.preview-scroll .gsap-marker-scroller-start, .preview-scroll .gsap-marker-scroller-end {
  z-index: 20 !important;
  padding: 4px 7px !important;
  color: var(--ink) !important;
  background: var(--green) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  font-family: Inter, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  backface-visibility: hidden !important;
}
.preview-scroll .gsap-marker-end, .preview-scroll .gsap-marker-scroller-end { color: #fff !important; background: var(--orange) !important; }
.preview-scroll .gsap-marker-scroller-start, .preview-scroll .gsap-marker-scroller-end { visibility: hidden !important; }
.preview-scroll .gsap-marker-start, .preview-scroll .gsap-marker-end {
  right: 10px !important;
  left: auto !important;
  font-size: 0 !important;
}
.preview-scroll .gsap-marker-start::after, .preview-scroll .gsap-marker-end::after { font-size: 10px; }
.preview-scroll .gsap-marker-start::after { content: "TRIGGER START"; }
.preview-scroll .gsap-marker-end::after { content: "TRIGGER END"; }
.stable-marker {
  position: absolute;
  z-index: 22;
  right: 1px;
  left: 1px;
  height: 2px;
  color: var(--ink);
  background: var(--green);
  translate: 0 -1px;
  pointer-events: none;
  contain: layout style;
}
.stable-marker span {
  position: absolute;
  top: 50%;
  left: 8px;
  padding: 5px 8px;
  background: var(--green);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  translate: 0 -50%;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
.stable-marker--end { color: #fff; background: var(--orange); }
.stable-marker--end span { color: #fff; background: var(--orange); }

.output-head .button { margin-left: auto; }
.output-body { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(250px, .52fr); gap: 13px; padding: 14px; color: #fff; background: var(--ink); }
.code-panel { min-width: 0; overflow: hidden; background: #090c09; border: 1px solid #39413b; border-radius: 15px; }
.code-tabs { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 45px; padding: 4px; background: #1d241f; border-bottom: 1px solid #39413b; }
.code-tabs button { color: #9ba59e; background: transparent; border: 0; border-radius: 9px; font-size: 10px; font-weight: 900; }
.code-tabs button[aria-selected="true"] { color: var(--ink); background: var(--green); }
.code-panel pre { height: 330px; margin: 0; padding: 17px; overflow: auto; color: #e7eee8; font-size: 11px; line-height: 1.65; tab-size: 2; white-space: pre; }
.recipe-panel { display: grid; align-content: start; gap: 13px; padding: 16px; background: #1b221d; border: 1px solid #39413b; border-radius: 15px; }
.recipe-panel > span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.recipe-panel dl { display: grid; gap: 7px; margin: 0; }
.recipe-panel dl div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 9px 10px; background: #0f1411; border-radius: 9px; }
.recipe-panel dt { color: #849087; font-size: 10px; font-weight: 900; }
.recipe-panel dd { margin: 0; color: var(--green); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 800; }
.recipe-panel p { margin: 0; padding: 12px; color: #aab4ad; background: #111713; border-left: 3px solid var(--orange); border-radius: 0 9px 9px 0; font-size: 10px; font-weight: 700; line-height: 1.55; }
.recipe-panel p b { display: block; margin-bottom: 4px; color: var(--orange); }
.recipe-panel a { color: #fff; font-size: 10px; font-weight: 900; }

.toast { position: fixed; z-index: 100; right: 20px; bottom: 20px; padding: 12px 16px; color: var(--ink); background: var(--green); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow); font-size: 11px; font-weight: 900; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .2s, translate .3s var(--ease); }
.toast.is-visible { opacity: 1; translate: 0 0; }
[hidden] { display: none !important; }

@media (max-width: 1260px) {
  .preset-grid { grid-template-columns: repeat(3, 1fr); }
  .studio { grid-template-columns: 1fr; }
  .controls-card { position: static; }
  .control-stack { display: grid; max-height: none; grid-template-columns: repeat(2, 1fr); }
  .control-group, .advanced-drawer { border-right: 1px solid var(--line); }
  .control-group:first-child { grid-row: span 2; }
}

@media (max-width: 900px) {
  .page { width: min(100% - 22px, 760px); padding-top: 18px; }
  .hero { grid-template-columns: 1fr; }
  .hero-actions { grid-template-columns: repeat(3, 1fr); }
  .preset-grid { grid-template-columns: repeat(2, 1fr); }
  .control-stack { display: block; }
  .position-card { grid-template-columns: 110px 1fr; }
  .position-card > .range-field { grid-column: 1 / -1; }
  .preview-shell { padding-right: 15px; padding-bottom: 116px; }
  .progress-dock { top: auto; right: 15px; bottom: 15px; left: 15px; width: auto; grid-template-columns: 76px repeat(3, 1fr); align-items: center; }
  .progress-dock > div:not(.progress-ring) { padding: 0 0 0 10px; border-top: 0; border-left: 1px solid #39413b; }
  .output-body { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .page { width: calc(100% - 14px); }
  h1 { line-height: 1; }
  .hero-actions { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-wrap: wrap; padding: 13px; }
  .section-note { width: 100%; margin-left: 58px !important; text-align: left; }
  .section-mark { flex-basis: 42px; width: 42px; height: 42px; }
  .preset-grid { grid-template-columns: 1fr; padding: 10px; }
  .preset-grid > button { grid-template-columns: 86px 1fr; }
  .mode-switch { width: 100%; margin: 2px 0 0; }
  .position-card { grid-template-columns: 1fr; }
  .position-card > .range-field { grid-column: auto; }
  .choice-row { grid-template-columns: 1fr; }
  .choice-row button { min-height: 51px; padding-left: 14px; }
  .toggle-grid, .advanced-grid, .action-grid { grid-template-columns: 1fr; }
  .preview-actions { width: 100%; margin-left: 58px; }
  .preview-actions button { flex: 1; }
  .preview-shell { padding: 8px 8px 121px; }
  .browser-bar span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preview-canvas { min-height: 440px; height: 60vh; }
  .demo-scene { min-height: 600px; padding: 16px; }
  .scene-frame { height: 565px; grid-template-columns: 1fr; }
  .scene-copy { align-content: end; padding: 25px; background: linear-gradient(0deg, rgb(249 246 236 / 96%) 0 48%, transparent 72%); }
  .demo-scene[data-scene="scrub"] .scene-copy, .demo-scene[data-scene="pin"] .scene-copy, .demo-scene[data-scene="mask"] .scene-copy { background: linear-gradient(0deg, rgb(17 21 16 / 95%) 0 48%, transparent 72%); }
  .scene-art { position: absolute; inset: 0; }
  .scene-title { font-size: 42px; }
  .progress-dock { grid-template-columns: 62px repeat(3, 1fr); padding: 8px; }
  .progress-ring { height: 62px; padding-top: 17px; }
  .progress-ring strong { font-size: 19px; }
  .progress-dock > div > strong { font-size: 10px; }
  .output-head .button { width: 100%; margin: 2px 0 0 58px; }
  .output-body { padding: 8px; }
  .code-panel pre { height: 290px; font-size: 10px; }
}

.preview-card.is-canvas-mode {
  position: fixed;
  z-index: 200;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #151b17;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.preview-card.is-canvas-mode .preview-head {
  position: absolute;
  z-index: 60;
  top: 16px;
  right: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.preview-card.is-canvas-mode .preview-head > .section-mark,
.preview-card.is-canvas-mode .preview-head > div:not(.preview-actions) { display: none; }
.preview-card.is-canvas-mode .preview-actions {
  width: auto;
  margin: 0;
  padding: 6px;
  background: rgb(255 253 245 / 78%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 15px;
  box-shadow: 0 14px 38px rgb(0 0 0 / 24%);
  backdrop-filter: blur(18px);
}
.preview-card.is-canvas-mode .preview-actions button { min-height: 42px; background: rgb(255 255 255 / 82%); }
.preview-card.is-canvas-mode .preview-actions button:nth-child(2) { color: #fff; background: var(--ink); }
.preview-card.is-canvas-mode .preview-actions button[aria-pressed="true"] { color: #fff; background: var(--blue); }
.preview-card.is-canvas-mode .preview-shell { height: 100%; padding: 0; background: #151b17; }
.preview-card.is-canvas-mode .browser-bar { display: none; }
.preview-card.is-canvas-mode .preview-canvas { width: 100%; height: 100%; min-height: 0; border-radius: 0; }
.preview-card.is-canvas-mode .preview-scroll { border: 0; border-radius: 0; }
.preview-card.is-canvas-mode .preview-scroll .gsap-marker-start,
.preview-card.is-canvas-mode .preview-scroll .gsap-marker-end { right: 132px !important; }
.preview-card.is-canvas-mode .intro-block {
  min-height: 120dvh;
  padding-inline: max(36px, calc((100vw - 1120px) / 2));
}
.preview-card.is-canvas-mode .demo-scene {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 48px 36px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 78%) 0 24%, transparent 62%),
    #e7e4d9;
}
.preview-card.is-canvas-mode .scene-frame {
  width: min(1180px, calc(100vw - 72px));
  height: min(720px, calc(100dvh - 96px));
  min-height: min(620px, calc(100dvh - 96px));
  margin-inline: auto;
  border-radius: 30px;
  box-shadow: 0 30px 90px rgb(17 21 16 / 22%);
}
.preview-card.is-canvas-mode .outro-block {
  min-height: calc(120dvh + var(--canvas-end-distance, 0px));
  padding-inline: max(36px, calc((100vw - 1120px) / 2));
}
.preview-card.is-canvas-mode .progress-dock {
  position: absolute;
  z-index: 55;
  top: 76px;
  right: 16px;
  bottom: auto;
  width: 104px;
  padding: 10px;
  background: rgb(17 21 16 / 84%);
  border: 1px solid rgb(255 255 255 / 16%);
  box-shadow: 0 14px 38px rgb(0 0 0 / 22%);
  backdrop-filter: blur(18px);
}
body.has-canvas-mode { overflow: hidden; }

@media (max-width: 600px) {
  .preview-card.is-canvas-mode .preview-head { top: 8px; right: 8px; left: 8px; }
  .preview-card.is-canvas-mode .preview-actions { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); }
  .preview-card.is-canvas-mode .preview-actions button { min-width: 0; padding-inline: 7px; }
  .preview-card.is-canvas-mode .preview-scroll .gsap-marker-start,
  .preview-card.is-canvas-mode .preview-scroll .gsap-marker-end { right: 10px !important; }
  .preview-card.is-canvas-mode .demo-scene { padding: 72px 16px 104px; }
  .preview-card.is-canvas-mode .scene-frame {
    width: calc(100vw - 32px);
    height: min(660px, calc(100dvh - 190px));
    min-height: min(530px, calc(100dvh - 190px));
    border-radius: 22px;
  }
  .preview-card.is-canvas-mode .progress-dock {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    grid-template-columns: 62px repeat(3, 1fr);
  }
}

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