:root{--font-display:'Newsreader',Georgia,serif;--font-body:'Space Grotesk',sans-serif;--font-mono:'IBM Plex Mono',monospace;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}body{margin:0;padding:0 0 48px;background:var(--pink);color:var(--wine);font:400 14px/1.5 var(--font-body);overflow-x:clip}button,input,select{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}p,h1,h2{margin:0}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--violet);outline-offset:4px}.mono{font:400 10px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.025em}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.page-outline{position:fixed;pointer-events:none}.skip{position:fixed;transform:translateY(-200%);z-index:1002;background:var(--paper);padding:10px 16px}.skip:focus{transform:none}
.wall-section{padding-top:30px}.wall-heading{display:flex;gap:32px;align-items:end;justify-content:space-between;margin-bottom:26px}.eyebrow{margin-bottom:12px}h1,h2{font:var(--display-weight,500) clamp(45px,5.7vw,88px)/1.08 var(--font-display);letter-spacing:var(--display-tracking,-.045em);text-transform:var(--display-case,none);font-optical-sizing:auto;padding-top:.08em}h1 em,h2 em{font-style:var(--display-em,italic);font-weight:inherit}.wall-intro{flex-shrink:0;font-size:12px;padding-bottom:8px}.wall-toolbar{display:flex;align-items:center;gap:20px;padding:14px 0;border-block:1px solid var(--line)}.view-switch{display:flex;border:1px solid var(--line);border-radius:28px;padding:4px;gap:2px;flex-shrink:0}.view-switch button{min-height:36px;min-width:64px;border-radius:24px;background:transparent;font-size:11px;padding:8px 14px}.view-switch button[aria-pressed=true]{background:var(--wine);color:var(--pink)}.view-switch button:disabled{opacity:.4;cursor:default}.interaction-hint{font-size:11px;line-height:1.5}.playback-controls{margin-left:auto;display:flex;align-items:center;gap:8px}.pill-button,.wall-settings summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;padding:9px 14px;border:1px solid var(--line);border-radius:24px;background:transparent;font-size:11px;white-space:nowrap;transition:background 180ms,color 180ms}.pill-button:hover,.wall-settings summary:hover{background:var(--paper)}.pill-button.primary{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}.pill-button.primary:hover{filter:brightness(1.06)}.wall-settings{position:relative}.wall-settings summary{list-style:none}.wall-settings summary::-webkit-details-marker{display:none}.wall-settings[open]{z-index:80}.wall-settings[open] summary>span{transform:rotate(45deg)}.settings-panel{position:absolute;right:0;top:calc(100% + 10px);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px;width:260px;box-shadow:0 12px 32px var(--palette-shadow)}.settings-panel label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}.settings-panel label:not(:first-child){margin-top:18px}.settings-panel output{font:400 10px var(--font-mono)}.settings-panel input{display:block;width:100%;accent-color:var(--violet);min-height:28px;margin:0}.settings-panel input:disabled{opacity:.4}.project-rail{display:flex;gap:6px;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:12px 0 14px}.project-rail button{background:transparent;padding:8px 10px;min-height:38px;border-radius:6px;font-size:11px;white-space:nowrap;border:1px solid transparent}.project-rail button span{font:400 8px var(--font-mono);opacity:.58;margin-left:6px}.project-rail button[aria-pressed=true]{border-color:var(--line);color:var(--violet);background:color-mix(in srgb,var(--paper) 50%,transparent)}.project-rail button:hover{background:var(--paper)}
.wall-viewport{position:relative;width:100%;height:clamp(440px,calc(100svh - 320px),740px);overflow:clip;perspective:1600px;perspective-origin:50% 50%;touch-action:pan-y;cursor:grab;outline-offset:-2px;-webkit-user-select:none;user-select:none}.wall-viewport:focus-visible{outline:1px solid var(--violet)}.wall-viewport.is-dragging{cursor:grabbing}.spatial-layer{position:relative;width:100%;height:100%;transform-style:preserve-3d}.sample{position:absolute;left:50%;top:50%;transform-origin:center;backface-visibility:hidden;visibility:hidden}.sample-play{width:100%;height:100%;padding:0;background:transparent;display:flex;flex-direction:column;cursor:inherit;text-align:left;border-radius:calc(7px * var(--surface-resolution,1));overflow:hidden;border:calc(1px * var(--surface-resolution,1)) solid #ffffff13;box-shadow:0 calc(3px * var(--surface-resolution,1)) calc(7px * var(--surface-resolution,1)) #00000012}.sample-art{position:relative;display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0;padding:calc(12px * var(--surface-resolution,1));background:#15191e;color:#e9edf0;pointer-events:none}.sample[data-ground=light] .sample-art{background:#f3f1eb;color:#22282e}.sample-art svg{display:block;width:100%!important;height:100%!important}.sample-art:empty::before{content:'';display:block;width:calc(18px * var(--surface-resolution,1));height:calc(18px * var(--surface-resolution,1));border:calc(1px * var(--surface-resolution,1)) solid currentColor;border-radius:50%;opacity:.2}.sample-caption{display:flex;align-items:center;justify-content:space-between;gap:calc(4px * var(--surface-resolution,1));min-height:calc(28px * var(--surface-resolution,1));padding:calc(4px * var(--surface-resolution,1)) calc(7px * var(--surface-resolution,1));background:color-mix(in srgb,var(--paper) 58%,var(--pink));color:var(--wine);font:400 calc(9px * var(--surface-resolution,1))/1.25 var(--font-body);width:100%;pointer-events:none}.sample-caption>span:first-child{min-width:0;overflow-wrap:anywhere}.sample-caption>span:last-child{font-size:calc(13px * var(--surface-resolution,1));opacity:0;transition:opacity 180ms}.sample-play:hover .sample-caption>span:last-child,.sample-play:focus-visible .sample-caption>span:last-child{opacity:1}.sample-play:focus-visible{outline:calc(2px * var(--surface-resolution,1)) solid var(--violet);outline-offset:calc(3px * var(--surface-resolution,1));overflow:visible}.sample-ground{position:absolute;right:calc(7px * var(--surface-resolution,1));top:calc(6px * var(--surface-resolution,1));width:calc(32px * var(--surface-resolution,1));height:calc(32px * var(--surface-resolution,1));border:0;border-radius:50%;background:#00000036;color:white;font-size:calc(15px * var(--surface-resolution,1));opacity:0;transition:opacity 180ms;cursor:pointer}.sample[data-ground=light] .sample-ground{background:#ffffffb0;color:#222}.sample:hover .sample-ground,.sample:focus-within .sample-ground{opacity:1}.sample-ground:focus-visible{opacity:1}.sample.has-error .sample-art{font-size:calc(10px * var(--surface-resolution,1));line-height:1.5;padding:calc(20px * var(--surface-resolution,1))}.wall-foot{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-block:16px}.load-error{font-size:12px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.load-error[hidden]{display:none}
/* Flat uses the same mixed collection in ordinary document flow. */
.wall-viewport.is-flat{height:auto;min-height:300px;overflow:visible;perspective:none;cursor:auto;touch-action:pan-y;user-select:auto;-webkit-user-select:auto}
.is-flat .spatial-layer{display:grid;grid-template-columns:repeat(var(--flat-columns,6),minmax(0,1fr));gap:18px;height:auto;transform-style:flat;padding:16px 0 28px;align-items:start}
.is-flat .sample{position:relative;inset:auto;transform:none!important;visibility:visible!important;margin:0!important;width:auto!important;height:auto!important;min-width:0}
.is-flat .sample[data-span="2"]{grid-column:span 2}
.is-flat .sample-play{height:auto;min-height:128px}
.is-flat .sample-art{height:calc(var(--art-height,120px) * var(--flat-zoom,1));flex:none}
.is-flat .sample-ground{opacity:.7}
.tool-section{border-top:1px solid var(--line);padding-top:36px;margin-top:40px}.hero-tool{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--paper) 40%,transparent);overflow:hidden}.hero-tool>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;min-height:64px;font-size:13px;list-style:none}.hero-tool>summary::-webkit-details-marker{display:none}.tool-window{height:680px;min-height:420px;max-height:1000px;resize:vertical;overflow:auto;border-top:1px solid var(--line);background:#111}.tool-window iframe{display:block;width:100%;height:100%;border:0}.study-footer{display:flex;justify-content:space-between;gap:20px;padding-top:28px;margin-top:40px;border-top:1px solid var(--line)}.study-footer a{border-bottom:1px solid var(--line);padding-bottom:4px}
@media(min-width:1700px){body{padding-inline:64px}.wall-heading{margin-block:8px 30px}}
@media(max-width:1150px){.interaction-hint{max-width:170px}.playback-controls{gap:6px}.pill-button,.wall-settings summary{padding:9px 11px;gap:10px}.wall-intro{max-width:240px}.is-flat .spatial-layer{gap:16px;grid-template-columns:repeat(var(--flat-columns,5),minmax(0,1fr))}}
@media(max-width:900px){body{padding:32px 36px 40px}.wall-heading{gap:16px}.wall-toolbar{flex-wrap:wrap;gap:12px}.playback-controls{margin-left:auto}.interaction-hint{display:none}.wall-intro{font-size:11px;max-width:220px}h1{font-size:clamp(42px,6vw,60px)}.is-flat .spatial-layer{grid-template-columns:repeat(var(--flat-columns,4),minmax(0,1fr))}.wall-viewport{height:clamp(440px,calc(100svh - 320px),700px)}}
@media(max-width:700px){body{padding:0 0 36px}main,.study-footer{margin-inline:28px}.wall-section{padding-top:24px}.wall-heading{display:block;margin-bottom:20px}h1{font-size:clamp(39px,9.5vw,62px);line-height:1.06;max-width:100%}.wall-intro{font-size:12px;max-width:none;margin-top:14px;padding:0}.eyebrow{margin-bottom:8px}.wall-toolbar{gap:10px;padding-block:12px}.playback-controls{flex:1;justify-content:flex-end;gap:6px}.view-switch button{min-width:52px;padding:8px 10px}.pill-button{font-size:10px;min-height:40px;padding:8px 10px;gap:6px}#reset-wall{display:none}.wall-settings summary{font-size:0;min-height:40px;width:40px;padding:8px;justify-content:center}.wall-settings summary>span{font-size:18px}.settings-panel{width:240px}.project-rail{gap:2px;padding-block:8px 12px}.project-rail button{font-size:11px;min-height:42px;padding:8px}.is-flat .spatial-layer{display:grid;grid-template-columns:repeat(var(--flat-columns,2),minmax(0,1fr));gap:12px;padding:12px 0 24px}.is-flat .sample[data-span="2"]{grid-column:1/-1}.is-flat .sample-art{height:calc(clamp(88px,var(--art-height,120px),150px) * var(--flat-zoom,1))}.is-flat .sample-caption{font-size:10px;min-height:36px}.sample-ground{width:32px;height:32px;opacity:.7}.wall-foot{font-size:9px;line-height:1.6;flex-wrap:wrap;gap:6px}.wall-foot>span:last-child{display:none}.tool-section{padding-top:28px;margin-top:20px}.hero-tool>summary{padding:14px 16px;min-height:58px}.tool-window{height:580px;resize:none}.study-footer{font-size:9px;gap:18px;flex-wrap:wrap;padding-top:24px;margin-top:28px}.study-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.sample-caption>span:last-child,.sample-ground,.pill-button{transition:none}}

/* Lottie and the Hero Tool share the same disclosure language. */
.lottie-wall{overflow:visible}
.lottie-wall>summary{gap:16px}
.lottie-wall[open]>summary{border-bottom:1px solid var(--line)}
.lottie-content{padding:0 20px}
.lottie-content .wall-toolbar{border-top:0;gap:12px;flex-wrap:wrap}
.lottie-content .wall-foot{margin-top:0;border-bottom:0}
.is-flat .spatial-layer[data-columns="1"] .sample{grid-column:1/-1}
@media(max-width:1150px){.lottie-content .interaction-hint{display:none}}
@media(max-width:700px){.lottie-wall>summary{padding:14px 12px;gap:10px}.lottie-content{padding:0 12px}.lottie-content .wall-toolbar{gap:10px}.lottie-content .playback-controls{flex-basis:100%}}

/* SVG paths and HTML captions share a larger local layout before compositing. */
.sample-ground:focus-visible{outline-width:calc(2px * var(--surface-resolution,1));outline-offset:calc(4px * var(--surface-resolution,1))}

/* Measure the actual content height for both directions. Resting sections stay
   at auto height, including Flat view, responsive type and the resizable tool. */
.hero-tool[data-disclosure-animating=true]{overflow:hidden;overflow-anchor:none}
.lottie-wall[data-disclosure-open=false]>summary{border-bottom:0}


/* A persistent frame distinguishes the draggable dome from page content. */
.wall-viewport:not(.is-flat){border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.wall-viewport:not(.is-flat)::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--line);border-radius:inherit;pointer-events:none}
/* The shared masthead and floating nav sit on the page edge like every other
   page; the wall's own content keeps its side margins. */
main,.study-footer{margin-inline:48px}
.wall-page .study-footer{padding-bottom:120px}

/* Lottie and the Hero Tool are the same kind of panel: a toggle that reads as
   a control, the name, a short note, and the action on the right. */
.tool-section{border-top:0;padding-top:0;margin-top:24px}
.hero-tool>summary{gap:16px;justify-content:flex-start}
.hero-tool>summary h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1;padding-top:.06em}
.disclosure-toggle{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--violet);color:var(--on-accent);transition:background-color .18s,color .18s}
.disclosure-toggle::before,.disclosure-toggle::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1.5px;border-radius:1px;background:currentColor;translate:-50% -50%}
.disclosure-toggle::after{rotate:90deg;transition:rotate 320ms cubic-bezier(.22,1,.36,1)}
.hero-tool[open]:not([data-disclosure-open=false]) .disclosure-toggle::after,.hero-tool[data-disclosure-open=true] .disclosure-toggle::after{rotate:0deg}
.hero-tool>summary:hover .disclosure-toggle,.hero-tool>summary:focus-visible .disclosure-toggle{background:var(--wine);color:var(--paper)}
.disclosure-note{font:400 11px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.025em;opacity:.7}
.disclosure-action{font-size:11px;margin-left:auto;white-space:nowrap}
@media(max-width:700px){
 main,.study-footer{margin-inline:28px}
 .hero-tool>summary{padding:14px 12px;gap:10px}
 .disclosure-toggle{width:36px;height:36px}
 .disclosure-note{display:none}
 .hero-tool>summary h2{font-size:26px;white-space:nowrap}
 .disclosure-action{display:none}
}
@media(prefers-reduced-motion:reduce){.disclosure-toggle,.disclosure-toggle::after{transition:none}}