:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#13151a;color:#e7e4db}*{box-sizing:border-box}body{margin:0;min-height:180vh;background:radial-gradient(ellipse at 50% 30%,#2a2d32,#111318 80%)}main{position:sticky;top:0;min-height:100svh;display:grid;place-items:center;padding:28px}.studio{width:min(1120px,92vw)}.panel{width:100%;aspect-ratio:16/9;position:relative;background:#f3ead3;border:1px solid #7776;box-shadow:0 12px 50px #0005}.scene{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none}.scene.dragging{cursor:grabbing}canvas{width:100%;height:100%;display:block;user-select:none}.controls{margin-top:20px;background:#1c1f24;border:1px solid #ffffff18;border-radius:8px;padding:16px 20px}summary{cursor:pointer;font-size:13px;letter-spacing:.5px}summary span{float:right;font-size:10px;color:#96999e;text-transform:uppercase;letter-spacing:1.6px}.toolbar{display:flex;align-items:end;gap:12px;margin:18px 0}.toolbar label{flex:1}label{font-size:11px;color:#b4b7bb;display:flex;flex-direction:column;gap:8px}select,button{border:1px solid #ffffff20;border-radius:4px;background:#272b32;color:#edeae3;padding:9px 10px;font:12px Arial;min-height:35px}button{cursor:pointer;white-space:nowrap}button:hover{background:#39404b}.sliders{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px}.sliders label>span{display:flex;justify-content:space-between}.sliders output{color:#e8dcc4;font-variant-numeric:tabular-nums}input[type=range]{width:100%;margin:0;accent-color:#ddac7b;cursor:ew-resize}.swatches{display:flex;gap:20px;margin-top:18px;border-top:1px solid #ffffff10;padding-top:15px}.swatches label{flex-direction:row;align-items:center;gap:10px}input[type=color]{width:30px;height:24px;border:0;background:transparent;padding:0;cursor:pointer}:focus-visible{outline:2px solid #ddac7b;outline-offset:4px}@media(min-width:1000px){.studio{width:min(1120px,calc(100svh * 1.15))}}@media(max-width:650px){main{padding:20px 0}.studio{width:94vw}.controls{padding:14px}.toolbar{flex-wrap:wrap}.toolbar label{flex-basis:40%}.sliders{grid-template-columns:repeat(2,1fr);gap:16px}.swatches{gap:14px}.swatches label{gap:5px;font-size:10px}summary span{font-size:9px}}
.controls[data-mode='2'] [data-setting='dither'],.controls[data-mode='2'] [data-setting='levels'],.controls[data-mode='2'] [data-setting='pixelate']{display:none}.controls:not([data-mode='2']) [data-setting='grain'],.controls:not([data-mode='2']) [data-setting='dots'],.controls:not([data-mode='2']) [data-setting='scale'],.controls:not([data-mode='2']) [data-setting='register'],.controls:not([data-mode='2']) [data-setting='density'],.controls:not([data-mode='2']) .swatches,.controls:not([data-mode='2']) .toolbar label:has(#palette){display:none}.controls[data-mode='0'] [data-setting='dither'],.controls[data-mode='0'] [data-setting='levels'],.controls[data-mode='0'] [data-setting='pixelate']{display:none}


/* The artwork is a floating silhouette; the rectangle is only a render surface. */
.panel{border:0;background:transparent;box-shadow:none;overflow:visible;filter:drop-shadow(0 12px 18px #0005)}.scene{overflow:visible;background:transparent}canvas{clip-path:polygon(4.6% 0,1.7% 42%,2.2% 46%,3.9% 45%,4.1% 61%,1.6% 60%,0 83%,0 100%,91.8% 100%,98.3% 74%,100% 43%,92.1% 0)}


:root{--scene-bg:#23223c;--scene-border:#f3ead3;background:var(--scene-bg)}body{background:var(--scene-bg);transition:background-color .5s ease}.controls{background:color-mix(in srgb,var(--scene-bg) 84%,#ffffff 5%);border-color:#ffffff24}.cutout-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.cutout-outline polygon{fill:none;stroke:var(--scene-border);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}.panel{filter:drop-shadow(0 10px 16px #0003)}


.studio{width:min(1280px,94vw)}.panel{aspect-ratio:16/9}.spatial-controls{margin-top:14px}.cutout-outline defs polygon{stroke:none;fill:white}@media(max-width:650px){main{place-items:start center;padding-top:32px}.studio{align-self:start}}

.cutout-outline>polygon{stroke-width:1;opacity:.55}.scene{filter:drop-shadow(0 12px 14px #0003)}

.scene{isolation:isolate;filter:none}.depth-backdrop{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}.scene>canvas{position:relative;z-index:1}.cutout-outline{z-index:2}.composition-text-panel{position:absolute;inset:0;background:#fffdfa;z-index:3;pointer-events:none;filter:drop-shadow(-5px 8px 9px #0002)}.composition-copy{position:absolute;right:4%;top:20%;width:14%;height:65%;overflow:auto;color:#30203f;line-height:1.5;font-size:clamp(10px,1.35vw,18px);font-family:Arial,sans-serif;outline:none;pointer-events:auto;cursor:text;white-space:pre-wrap}.composition-copy:empty:before{content:'Your text here';color:#8b8490;font-size:clamp(8px,1vw,13px)}.composition-copy:focus{outline:1px dashed #30203f33;outline-offset:6px}

.composition-text-panel{transform-origin:0 0;will-change:transform}.cutout-outline>polygon{stroke-width:1.6;opacity:.8;stroke-linejoin:round;stroke-linecap:round}.scene{will-change:transform}.panel{overflow:visible}

.cutout-outline mask polygon{fill:#000;stroke:none}.cutout-outline mask rect{fill:#fff;stroke:none}


/* Spatial experience: viewport furniture stays outside the illustrated world. */
body{min-height:320svh;overflow-x:hidden}main{height:100svh;padding:70px 32px;min-height:0}.studio{width:min(1240px,91vw)}.panel{filter:none}.controls{display:none}.editing .controls{display:block}.editing main{position:relative;height:auto;padding-top:110px}.editing{min-height:100svh}.experience-header{position:fixed;z-index:10;inset:24px 30px auto;display:flex;justify-content:space-between;align-items:center;color:var(--scene-border);font-size:11px;letter-spacing:2px}.experience-header small{display:block;opacity:.5;margin-top:7px;font-size:9px}.experience-header button{background:transparent;border-color:color-mix(in srgb,var(--scene-border) 35%,transparent);color:var(--scene-border);margin-left:8px;border-radius:0}.chapter-nav{position:fixed;left:30px;bottom:28px;z-index:10;display:flex;gap:18px}.chapter-nav button{background:none;border:0;border-radius:0;color:var(--scene-border);opacity:.4;padding:8px 0;min-height:44px;font-size:11px}.chapter-nav button[aria-current="step"]{opacity:1;border-bottom:1px solid var(--scene-border)}.chapter-nav span{margin-left:5px}.gesture-hint{position:fixed;right:30px;bottom:40px;z-index:9;color:var(--scene-border);font-size:9px;letter-spacing:1.4px;opacity:.65}.gesture-hint span{display:block;margin-top:7px;font-size:8px;opacity:.65}.progress-track{position:fixed;z-index:9;right:22px;top:30%;height:36%;width:1px;background:#ffffff20}.progress-track i{display:block;background:var(--scene-border);width:2px;height:100%;transform-origin:top;transform:scaleY(var(--progress,0))}.composition-copy:empty:before{content:'Your story, in perspective.';font-family:Georgia,serif;font-size:clamp(12px,1.6vw,24px);line-height:1.15}.composition-copy{font-family:Georgia,serif}.cutout-outline>polygon{opacity:.85;stroke-width:1.2}@media(max-width:650px){main{padding:90px 0}.studio{width:130vw;max-width:none;transform:rotate(-3deg)}.panel{margin-left:-20vw}.experience-header{inset:20px 18px auto;font-size:9px;letter-spacing:1px}.chapter-nav{left:18px;bottom:25px;gap:14px}.chapter-nav span{display:none}.gesture-hint{right:18px;bottom:38px;font-size:8px}.gesture-hint span{max-width:160px;line-height:1.6;font-size:7px}.progress-track{right:10px}.composition-copy{font-size:12px}.editing .studio{width:94vw;transform:none}.editing .panel{margin-left:0}.editing .controls{transform:none}}
.studio{width:min(1160px,91vw,calc((100svh - 170px)*16/9))}@media(max-width:650px){.studio{width:110vw;align-self:center}.panel{margin-left:-8vw}.gesture-hint{display:none}}

/* Dominant scene, secondary inset, and a caption share one compact silhouette. */
.cutout-outline>polygon{stroke:#211c32;stroke-width:2.2;opacity:1}.cutout-outline>.ink-echo{stroke-width:.65;opacity:.6;transform:translate(.9px,.65px)}.composition-text-panel{background-color:#f3ead3;background-image:url("./paper-grain.svg");filter:drop-shadow(2px 3px 0 #211c3240)}.composition-copy{top:65%;right:9%;width:24%;height:16%;font-size:clamp(12px,1.55vw,20px);line-height:1.25;padding:4px 9px}.composition-copy:empty:before{content:'Space, structure, and the stories between.';color:#30203f;font-size:inherit}.depth-backdrop polygon{opacity:.65}.experience-header,.chapter-nav,.gesture-hint{color:#f3ead3}.panel{filter:drop-shadow(0 16px 25px #0002)}.studio{width:min(1240px,94vw,calc((100svh - 145px)*16/9))}@media(max-width:650px){.studio{width:110vw}.composition-copy{font-size:11px}}
.cutout-outline{z-index:4}.cutout-outline>.caption-stroke{stroke:#211c32;stroke-width:2.1;fill:none}.experience-header button{color:#f3ead3}.composition-copy{overflow:hidden}.chapter-nav button{color:#f3ead3}

/* Hero framing: centered stage with generous artwork scale. */
main{padding:65px 12px;place-items:center}.studio{width:min(1500px,98vw,calc((100svh - 95px)*16/9));align-self:center}.panel{margin:0}.scene{transform-origin:center}.editing .studio{width:min(1200px,94vw)}@media(max-width:650px){main{padding:80px 0;place-items:center}.studio{width:98vw;transform:none;align-self:center}.panel{margin:0}.composition-copy{font-size:10px}}

/* Taller caption and close-up fragments complete the hero silhouette. */
.composition-copy{top:21%;right:5%;width:15%;height:57%;font-size:clamp(15px,1.8vw,27px);line-height:1.2;padding:10px 2px}.composition-copy:empty:before{content:'Space, structure, and the stories between.'}.studio{width:min(1640px,99vw,calc((100svh - 58px)*16/9))}.panel{transform:translateY(-8px)}.detail-flake{position:absolute;z-index:5;pointer-events:none;transform-origin:center;filter:drop-shadow(2px 4px 0 #211c3270);will-change:transform}.detail-flake canvas{position:absolute;inset:0;clip-path:none!important;width:100%;height:100%;border:2px solid #211c32}.flake-upper{clip-path:polygon(0 0,100% 9%,9% 100%)}.flake-lower{clip-path:polygon(0 12%,62% 0,100% 83%,24% 100%)}.detail-flake:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 2px #211c32;pointer-events:none}@media(max-width:650px){.studio{width:99vw}.composition-copy{font-size:12px;padding:3px}.detail-flake canvas{border-width:1px}.panel{transform:none}}
.studio{transform:translateX(-2.5vw)}@media(max-width:650px){.studio{transform:none}}

.detail-flake{clip-path:none}.detail-flake canvas{border:0}.flake-upper canvas{clip-path:polygon(0 0,100% 9%,9% 100%)!important}.flake-lower canvas{clip-path:polygon(0 12%,62% 0,100% 83%,24% 100%)!important}.detail-flake:after{display:none}.detail-flake svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.detail-flake svg polygon{fill:none;stroke:#211c32;stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.composition-copy{right:5%;width:19%}

html.map-embedded,html.map-embedded body{background:transparent!important;min-height:100svh;overflow:hidden}.map-embedded .experience-header,.map-embedded .chapter-nav,.map-embedded .progress-track,.map-embedded .gesture-hint,.map-embedded .controls{display:none!important}.map-embedded main{position:fixed;inset:0;height:100svh}.map-embedded .composition-text-panel{background-color:#ffe0ef;color:var(--map-paper,#1a1d4a)}.map-embedded .composition-copy,.map-embedded .composition-copy:empty:before{color:#1a1d4a}.map-embedded .cutout-outline>polygon,.map-embedded .detail-flake svg polygon{stroke:var(--map-ink,#2939c2);stroke-width:1.2}.map-embedded .depth-backdrop polygon{opacity:.48}

html.map-embedded{color-scheme:light}

.map-embedded .panel{filter:none}