/* UI lab styles scoped to the integrated case-study section. Source order matches ui-lab.html. */
@scope (.interface-studies) {
/* visual-lab.css */
:scope{color-scheme:dark;--bg:#101113;--panel:#181a1e;--line:#32353c;--text:#f1f0ec;--muted:#a3a6af;--pink:#ff397e;--cyan:#20d9ee}*{box-sizing:border-box}:scope{scroll-behavior:smooth;scroll-padding-top:85px}:scope{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer}a:hover{color:var(--pink)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}button:disabled{cursor:default}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2{font-weight:500;letter-spacing:-2px;line-height:1.1}h2{font-size:38px;margin:0}.mono,.eyebrow,.pill,.collage-label,.module-label,.option-caption{font-family:Consolas,'Courier New',monospace;letter-spacing:1px;font-size:10px}.eyebrow{color:var(--pink);margin-bottom:15px}.pink{color:var(--pink)}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 4%;border-bottom:1px solid var(--line)}header>a:last-child,footer>a:last-child{font-size:12px}.wordmark{font-size:28px;font-weight:900;letter-spacing:-1.8px}.wordmark span{color:var(--pink);margin-left:7px}header>.mono{color:var(--muted)}.hero,.collection{max-width:1440px;width:92%;margin:auto}.hero-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:55px 0 30px}.hero-heading h1{font-size:clamp(45px,5.2vw,78px);margin:0}.hero-heading h1 i{font-family:Georgia,serif;color:var(--pink);font-weight:400}.hero-heading>p{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 5px}.hero-collage{height:510px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #41404b;background:radial-gradient(ellipse at 80% 40%,#3b142a66,transparent 65%),#17191d}.hero-gridlines{position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(#000,transparent)}.hero-collage>img{position:absolute;border:1px solid #69718077;box-shadow:0 20px 55px #0009}.hero-hud{width:49%;left:2%;top:30px;transform:rotate(-5deg)}.hero-inventory{width:60%;left:35%;top:75px;transform:rotate(3deg);z-index:2}.hero-menu{width:37%;left:8%;top:255px;transform:rotate(-3deg);z-index:3}.hero-chip{position:absolute;right:4%;bottom:22px;width:140px;height:140px;display:grid;place-items:center;border:1px solid var(--pink);background:#17121dd9;z-index:4;transform:rotate(7deg)}.hero-chip img{height:110px;object-fit:contain}.hero-chip span{font-size:8px;color:#ffb3ce}.collage-label{position:absolute;z-index:4;background:var(--pink);color:#15080f;padding:7px 12px;font-size:9px}.label-one{left:3%;top:23px;transform:rotate(-5deg)}.label-two{right:6%;top:62px;transform:rotate(3deg)}.hero-palette{position:absolute;left:49%;bottom:21px;display:flex;align-items:center;gap:7px;z-index:5}.hero-palette i{width:27px;height:27px;background:#020305;border:1px solid #ffffff55}.hero-palette i:nth-child(2){background:#ff176c}.hero-palette i:nth-child(3){background:#20d9ee}.hero-palette i:nth-child(4){background:#eef2f5}.hero-palette span{font:8px Consolas,monospace;color:var(--muted);margin-left:8px}.hero-bottom{display:flex;gap:32px;padding:23px 0 30px;color:var(--muted)}.hero-bottom b{color:var(--text);font-size:15px;margin-right:8px}.hero-bottom a{margin-left:auto;color:var(--pink)}.study-nav{position:sticky;top:0;z-index:20;display:flex;justify-content:center;gap:35px;border-block:1px solid var(--line);padding:19px 4%;background:#101113f5;backdrop-filter:blur(12px);overflow-x:auto}.study-nav a{font:10px Consolas,monospace;white-space:nowrap;color:var(--muted)}.study-nav a:hover{color:var(--pink)}.study{padding-top:75px}.study-heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:25px}.pill{border:1px solid #4d4147;padding:8px 10px;font-size:8px;color:#d6b8c3;white-space:nowrap}.board{border:1px solid var(--line);background:var(--panel);overflow:hidden}.caption{display:flex;justify-content:space-between;gap:25px;font-size:11px;color:var(--muted);padding-top:13px}.caption>span:last-child:not(:first-child){white-space:nowrap;font:9px Consolas,monospace}.caption a{color:var(--cyan);white-space:nowrap}.journey-scene{position:relative;height:410px;overflow:hidden}.journey-scene>img{width:100%;height:100%;object-fit:cover;object-position:center 55%;transition:filter .3s}.scene-shade{position:absolute;inset:0;background:linear-gradient(#0005,transparent 40%,#000c)}.scene-vitals{position:absolute;top:35px;left:35px;display:flex;gap:4px;align-items:center}.scene-vitals span,.scene-vitals small{font:10px Consolas,monospace;margin-right:7px}.scene-vitals small{margin-left:8px;color:#ffbad1}.scene-vitals i{height:13px;width:12px;transform:skewX(-12deg);background:#ff176c}.scene-heading{position:absolute;top:32px;right:30px;text-align:right;font-size:12px;text-shadow:0 2px 8px #000}.scene-heading span{display:block;color:var(--cyan);font-size:9px;margin-top:5px}.target-reticle{position:absolute;left:65%;top:48%;width:58px;height:58px;border:1px solid var(--cyan);transform:rotate(45deg);display:grid;place-items:center;opacity:0;transition:opacity .2s}.target-reticle span{transform:rotate(-45deg);font-size:26px;color:var(--cyan)}.scene-prompt{position:absolute;left:69%;top:66%;display:flex;align-items:center;gap:13px;font-size:18px;font-weight:700;letter-spacing:3px;opacity:0;text-shadow:0 2px 12px #000}.scene-prompt kbd,kbd{font:11px Arial,sans-serif;padding:6px 9px;border:1px solid #ccd0d4;border-radius:2px;background:#090b0cc7;box-shadow:0 2px 0 #555}.scene-caption{position:absolute;bottom:30px;left:35px;display:flex;flex-direction:column;gap:8px}.scene-caption .mono{color:var(--cyan)}.scene-caption strong{font-size:30px;font-weight:400;letter-spacing:-.7px}.scene-next{position:absolute;bottom:30px;right:30px;border:1px solid #ffffff60;background:#111a;color:white;width:48px;height:48px;font-size:25px}.scan-line{position:absolute;top:0;bottom:0;width:3px;left:30%;background:var(--cyan);box-shadow:0 0 55px 20px #20d9ee44;opacity:0}.evidence-panel{position:absolute;top:75px;right:5%;width:340px;background:#090c13eb;border:1px solid #ff397e66;padding:26px;opacity:0;transform:translateX(15px);transition:opacity .3s,transform .3s}.evidence-panel h3{font-size:30px;letter-spacing:3px;margin:8px 0 12px}.evidence-rule{height:1px;background:#ff397e66;margin-bottom:18px}.evidence-panel p{font:10px/1.8 Consolas,monospace;color:var(--cyan)}.evidence-panel>.mono:last-child{display:block;margin-top:20px;font-size:9px}.journey-scene[data-step="1"] .target-reticle,.journey-scene[data-step="1"] .scene-prompt{opacity:1}.journey-scene[data-step="2"] .scan-line{opacity:1;animation:scan 1.5s ease-in-out infinite alternate}.journey-scene[data-step="2"]>img{filter:brightness(.65) saturate(.7)}.journey-scene[data-step="3"]>img{filter:blur(3px) brightness(.6)}.journey-scene[data-step="3"] .evidence-panel{opacity:1;transform:none}.journey-track{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}.journey-track button{position:relative;border:0;border-right:1px solid var(--line);background:transparent;padding:23px 20px;text-align:left;display:flex;flex-direction:column}.journey-track button:last-child{border:0}.journey-track button[aria-pressed=true]{background:#ff397e0d;box-shadow:inset 0 3px var(--pink)}.journey-track button>span{font:10px Consolas,monospace;color:var(--pink);margin-bottom:12px}.journey-track strong{font-size:20px;font-weight:400}.journey-track small{color:var(--muted);margin-top:3px}.journey-track i{font:10px Consolas,monospace;color:#d2c3cc;margin-top:20px}.journey-curve{position:relative;display:flex;align-items:center;gap:45px;padding:15px 35px 28px;border-top:1px solid var(--line)}.journey-curve>span:first-child{font-size:9px;min-width:150px;line-height:1.8}.journey-curve small{color:var(--muted);letter-spacing:0;font-size:9px}.journey-curve svg{width:100%;height:85px}.curve-note{position:absolute;right:30px;bottom:10px;color:var(--cyan);font-size:8px}.flow-board{padding:25px 35px;background-color:#17191e;background-image:radial-gradient(#ffffff13 .7px,transparent .7px);background-size:16px 16px}.flow-legend{display:flex;gap:25px;font-size:8px;color:var(--muted)}.flow-legend span{display:flex;gap:8px;align-items:center}.flow-legend i{width:20px;height:1px;background:#5a7a83}.flow-legend .line-pink{background:var(--pink)}.flow-legend span:last-child{margin-left:auto}.screen-map{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:45px 80px;padding:35px 0 5px}.map-wires{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#58747e;stroke-width:1;stroke-dasharray:4 5}.map-wires .main-wire{stroke:var(--pink);stroke-width:2;stroke-dasharray:none}.map-wires circle{fill:var(--pink);stroke:none}.map-screen{position:relative;z-index:1;border:1px solid #4b4d58;background:#0d0f12;padding:6px;text-align:left;transition:transform .2s,border-color .2s;min-width:0}.map-screen:hover{transform:translateY(-4px);border-color:var(--pink)}.map-screen img{width:100%;aspect-ratio:824/464;object-fit:cover}.map-screen>span{display:flex;gap:12px;padding:10px 6px 5px;font-size:12px}.map-screen b{font:10px Consolas,monospace;color:var(--pink)}.map-screen i{margin-left:auto;color:var(--muted)}.map-main{grid-area:1/1}.map-hud{grid-area:1/2;border-color:#c63467}.map-paused{grid-area:1/3}.map-inventory{grid-area:2/1}.map-journey{grid-area:2/3}.map-load{grid-area:3/1}.map-appearance{grid-area:3/2}.map-settings{grid-area:3/3}.map-center{grid-area:2/2;place-self:center;position:relative;z-index:1;width:110px;height:110px;border:1px solid var(--pink);border-radius:50%;background:#20151d;display:grid;place-content:center;text-align:center;color:#ffb1cc;font-size:9px}.map-center span{font-size:24px;color:var(--pink)}.wire-options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.wire-option{background:#171b21;border:1px solid #434b55;padding:18px;text-align:left}.wire-option[aria-pressed=true]{border-color:var(--cyan);box-shadow:inset 0 3px var(--cyan)}.option-name{display:flex;align-items:center;gap:10px;font-size:15px}.option-name b{font:12px Consolas,monospace;color:var(--cyan)}.option-name i{margin-left:auto;font:9px Consolas,monospace;color:var(--muted)}.option-caption{font-size:8px;color:var(--muted);display:block;margin-top:16px}.mini-wire{position:relative;height:165px;margin-top:18px;background:#202730;border:1px solid #66778244;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:12px 12px}.mini-title{position:absolute;width:32%;height:5px;top:14px;left:13px;background:#728b98}.mini-cells{position:absolute;left:13px;top:35px;width:44%;bottom:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mini-cells i{border:1px solid #708b9b}.mini-cells i:nth-child(3){background:#20d9ee22;border-color:var(--cyan)}.mini-preview{position:absolute;left:60%;top:35px;width:29%;height:70px;display:grid;place-items:center;font-size:40px;color:#8aa5b5;border:1px dashed #708b9b}.mini-copy{position:absolute;left:57%;right:10%;height:25px;bottom:16px;border-top:0;background:repeating-linear-gradient(transparent 0 6px,#66818f 6px 8px)}.mini-rows{position:absolute;left:13px;top:35px;width:43%;bottom:15px;display:grid;gap:6px}.mini-rows i{border:1px solid #708b9b;background:linear-gradient(90deg,#708b9b44 20%,transparent 20%)}.mini-rows i:nth-child(2){border-color:var(--cyan)}.mini-wheel{position:absolute;width:110px;height:110px;left:50%;top:35px;transform:translateX(-50%);border:1px dashed #708b9b;border-radius:50%}.mini-wheel i{position:absolute;width:23px;height:23px;background:#202730;border:1px solid #708b9b;left:42px;top:-12px;transform-origin:12px 66px}.mini-wheel i:nth-child(2){transform:rotate(60deg)}.mini-wheel i:nth-child(3){transform:rotate(120deg)}.mini-wheel i:nth-child(4){transform:rotate(180deg)}.mini-wheel i:nth-child(5){transform:rotate(240deg)}.mini-wheel i:nth-child(6){transform:rotate(300deg);border-color:var(--cyan);background:#20d9ee33}.mini-wheel>span{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:#9db8c8}.wire-workbench{background:#1b222b;color:#b6c9d4}.workbench-top{padding:17px 25px;border-bottom:1px solid #ffffff18;display:flex;justify-content:space-between;gap:15px;font-size:9px}.workbench-top>span:last-child{color:var(--cyan)}.wire-canvas{padding:32px 40px 23px;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:25px 25px}.wire-screen-title{font-size:29px;letter-spacing:5px;display:flex;justify-content:space-between;margin-bottom:25px}.wire-screen-title>span{font:10px Consolas,monospace;align-self:center}.wire-content{display:grid;grid-template-columns:1fr 1fr;gap:45px;min-height:320px}.wire-item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.wire-item{background:#1c2630;border:1px solid #657c8e;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative;color:#c4d0d8;padding:12px 8px;gap:8px}.wire-item img{height:70px;width:80%;object-fit:contain;filter:grayscale(1);opacity:.7}.wire-item span{font:9px Consolas,monospace;letter-spacing:1px}.wire-item[aria-pressed=true]{background:#20d9ee13;border-color:var(--cyan);color:var(--cyan);box-shadow:inset 3px 0 var(--cyan)}.wire-item[aria-pressed=true] img{opacity:1}.wire-item.locked{border-style:dashed;opacity:.4}.wire-item.locked strong{font-size:32px;font-weight:400}.wire-detail{position:relative;display:flex;flex-direction:column;justify-content:end;align-items:center}.wire-detail>img{height:220px;width:70%;object-fit:contain;filter:grayscale(1);z-index:1}.wire-crosshair{position:absolute;top:5%;left:50%;width:210px;height:210px;border:1px dashed #6e879b88;transform:translateX(-50%);border-radius:50%}.wire-crosshair:after,.wire-crosshair:before{content:'';position:absolute;background:#6e879b44}.wire-crosshair:after{height:1px;left:-25px;right:-25px;top:50%}.wire-crosshair:before{width:1px;top:-25px;bottom:-25px;left:50%}.wire-detail-copy{width:100%;border:1px solid #657c8e;padding:18px 22px;z-index:1;background:#1b222baa}.wire-detail-copy .mono{font-size:8px;color:var(--cyan)}.wire-detail-copy h3{font-size:23px;letter-spacing:3px;margin:9px 0}.wire-detail-copy p{font-size:12px;margin:0;color:#a0b4c2}.wire-bottom{display:flex;gap:15px;justify-content:space-between;margin-top:27px;font-size:8px}.wire-bottom>span:nth-child(2){color:#a0b4c2;letter-spacing:0}.wire-workbench[data-layout=list] .wire-item-grid{grid-template-columns:1fr;gap:8px}.wire-workbench[data-layout=list] .wire-item{flex-direction:row;justify-content:start;padding:5px 15px;min-height:48px}.wire-workbench[data-layout=list] .wire-item img{height:35px;width:45px;margin-right:15px}.wire-workbench[data-layout=list] .wire-item.locked{display:none}.wire-workbench[data-layout=radial] .wire-content{grid-template-columns:1.15fr 1fr}.wire-workbench[data-layout=radial] .wire-item-grid{position:relative;display:block;min-height:370px;width:370px;max-width:100%;justify-self:center;background:radial-gradient(circle,transparent 39%,#657c8e44 39.5%,transparent 40%,transparent 64%,#657c8e44 64.5%,transparent 65%)}.wire-workbench[data-layout=radial] .wire-item{position:absolute;width:100px;height:100px;left:calc(50% - 50px);top:calc(50% - 50px);transform:rotate(var(--angle)) translateY(-125px) rotate(calc(-1 * var(--angle)));border-radius:8px}.wire-workbench[data-layout=radial] .wire-item img{height:55px}.wire-workbench[data-layout=radial] .wire-item span{font-size:8px}.wire-workbench[data-layout=radial] .wire-item.locked{display:none}.compare-heading{display:flex;justify-content:space-between;align-items:center;margin:35px 0 15px;gap:20px}.compare-heading h3{font-size:16px;font-weight:400;margin:0}.compare-heading label{color:var(--muted);font-size:9px}.compare-heading label span{color:var(--cyan);margin-left:13px}.compare-board{position:relative;aspect-ratio:1648/928}.compare-board>img{width:100%;height:100%;object-fit:contain}.compare-wire{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--reveal)) 0 0);background-color:#202a35;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:25px 25px;color:#bcd1e0}.compare-wire-title{position:absolute;left:6.2%;top:8.7%;font-size:clamp(13px,3vw,43px);letter-spacing:.22em;font-weight:700}.compare-wire-grid{position:absolute;left:6.2%;top:20.3%;width:44.2%;height:70%;display:grid;grid-template-columns:repeat(3,1fr);gap:3.2%}.compare-wire-grid i{border:1px solid #7893a6;display:grid;place-items:center;font:12px Consolas,monospace;background:linear-gradient(135deg,transparent 49.7%,#7893a622 50%,transparent 50.3%)}.compare-wire-grid i.selected{border-color:var(--cyan);background-color:#20d9ee12}.compare-wire-art{position:absolute;left:60%;top:17%;width:29%;height:43%;border:1px dashed #7893a6;border-radius:50%;display:grid;place-items:center;font-size:clamp(40px,8vw,100px)}.compare-wire-text{position:absolute;left:52.8%;top:72%;width:42.6%;height:18.3%;padding:2%;border:1px solid #7893a6;font-size:clamp(8px,1.8vw,25px);letter-spacing:2px}.compare-wire-text span{display:block;font:clamp(6px,.8vw,12px) Consolas,monospace;margin-top:10px;letter-spacing:1px}.compare-divider{position:absolute;top:0;bottom:0;left:var(--reveal);width:2px;background:var(--cyan);pointer-events:none}.compare-divider>span{position:absolute;top:48%;left:-20px;width:40px;height:40px;border-radius:50%;background:var(--cyan);color:#132831;display:grid;place-items:center;font-size:23px}.compare-label{position:absolute;top:12px;padding:5px 8px;background:#101113cc;font-size:8px}.compare-label.left{left:12px;color:#bcd1e0}.compare-label.right{right:12px;color:var(--pink)}.compare-board input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.compare-board:focus-within{outline:2px solid var(--cyan);outline-offset:3px}.outline-button{border:1px solid #60626b;background:transparent;padding:10px 15px;font:10px Consolas,monospace}.outline-button:hover{border-color:var(--cyan);color:var(--cyan)}.anatomy-board{position:relative}.anatomy-board>img{width:100%;height:auto}.layout-guides{position:absolute;inset:5% 5.5% 5%;border:1px dashed #20d9ee66;pointer-events:none}.layout-guides i{position:absolute;top:0;bottom:0;border-left:1px dashed #20d9ee66;left:50%}.layout-guides i:nth-child(2){left:53%}.layout-guides i:nth-child(3){top:73%;left:0;right:0;bottom:auto;border-left:0;border-top:1px dashed #20d9ee66}.dimension{position:absolute;background:#08262c;color:#92eef8;padding:3px 7px;font-size:8px}.dim-top{top:-10px;left:35%}.dim-gap{top:13%;left:16%}.hotspot{position:absolute;border:1px solid #fff8;background:var(--pink);color:white;width:32px;height:32px;border-radius:50%;font:12px Consolas,monospace;box-shadow:0 0 0 6px #ff397e25;transform:translate(-50%,-50%)}.hotspot[aria-pressed=true]{background:var(--cyan);color:#092029;box-shadow:0 0 0 8px #20d9ee25}.h1{left:32%;top:12%}.h2{left:6%;top:53%}.h3{left:49%;top:24%}.h4{left:80%;top:48%}.h5{left:94%;top:82%}.annotation-strip{display:flex;align-items:center;gap:22px;background:#20232a;border:1px solid var(--line);padding:22px 26px}.annotation-strip>span{font:26px Consolas,monospace;color:var(--cyan)}.annotation-strip h3{font-size:17px;font-weight:400;margin:0;min-width:155px}.annotation-strip p{margin:0;font-size:12px;color:var(--muted);max-width:530px}.annotation-bars{margin-left:auto;display:flex;gap:5px}.annotation-bars i{width:6px;height:22px;background:#4b515d}.annotation-bars i:first-child{background:var(--cyan)}.system-board{display:grid;grid-template-columns:1fr 1fr;background:#0c0e11}.system-board article{padding:28px 32px;border-bottom:1px solid var(--line);min-width:0}.system-board article:nth-child(odd){border-right:1px solid var(--line)}.module-label{font-size:9px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}.module-label>span{font-size:8px}.large-swatches{display:grid;grid-template-columns:repeat(4,1fr);min-height:170px}.large-swatches>div{background:var(--swatch);padding:14px 9px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #ffffff18;min-width:0}.large-swatches>div:nth-child(n+2){color:#110b13}.large-swatches span{font:9px Consolas,monospace;letter-spacing:1px}.large-swatches code{font-size:10px}.type-display{display:block;font-size:clamp(24px,3.5vw,50px);letter-spacing:.16em;text-shadow:-2px 0 #20d9ee66,2px 0 #ff176c66;line-height:1.25;margin-bottom:17px}.type-item{display:block;font-size:22px;letter-spacing:3px;margin-bottom:8px}.type-body{color:#c8d0d7;font-size:16px;letter-spacing:.5px}.type-scale{display:flex;gap:25px;color:var(--muted);font-size:8px;border-top:1px solid var(--line);padding-top:16px}.states-module{grid-column:1/-1;border-right:0!important}.component-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;padding:8px 10px 28px}.item-component{border:1px solid #77838c55;position:relative;background:#070a0e;padding:10px 10px 0;transition:transform .2s,box-shadow .2s}.item-component:before,.item-component:after{content:'';position:absolute;width:14px;height:14px;border-color:#9ba6b6;border-style:solid}.item-component:before{top:-1px;left:-1px;border-width:1px 0 0 1px}.item-component:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}.item-component img{height:145px;width:100%;object-fit:contain;filter:drop-shadow(0 8px 16px #000)}.item-component>span{display:block;padding:12px 4px;border-top:1px solid #ffffff19;font-size:10px;letter-spacing:2px}.item-component>small{position:absolute;top:calc(100% + 13px);left:0;right:0;font:8px Consolas,monospace;color:var(--muted);letter-spacing:1px}.item-component.selected{border-color:#ff176c99;background:linear-gradient(100deg,#ff176c1c,transparent);box-shadow:inset 3px 0 var(--pink),-4px 0 12px #ff176c33}.item-component.selected>span{color:var(--pink)}.item-component.focus-state{outline:1px dashed var(--cyan);outline-offset:5px}.item-component:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 25px #ff176c22}.item-component.locked>strong{height:145px;display:grid;place-items:center;font-size:50px;font-weight:400;color:#637181}.item-component.locked>span{color:#7e8998}.vital-readout{display:flex;gap:12px;align-items:center;margin:25px 0;font:11px Consolas,monospace;color:#ff90b7}.segments{display:flex;gap:4px;flex:1}.segments i{flex:1;height:24px;background:#ff176c;transform:skewX(-10deg);box-shadow:0 0 6px #ff176c22}.segments i.empty{background:#222832;box-shadow:none}.vital-readout.stamina{color:var(--cyan)}.stamina .segments i{background:var(--cyan);height:13px}.stamina .segments i:nth-last-child(-n+2){background:#222832}.slider-label{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:var(--muted);gap:20px}input[type=range]{accent-color:var(--cyan);cursor:pointer}.slider-label input{width:55%}.key-row{display:flex;align-items:center;gap:14px;margin:27px 0;font-size:11px;letter-spacing:1px}.key-row kbd{min-width:37px;text-align:center;padding:8px;font-size:13px}.key-row span{margin-right:10px}.key-row.controller kbd{border-radius:50%;width:33px;min-width:33px;height:33px;padding:6px;border-color:var(--cyan);color:var(--cyan)}.tiny{font-size:8px;color:var(--muted)}.motion-module{grid-column:1/-1;border-right:0!important;border-bottom:0!important}.module-label button{border:0;background:none;color:var(--cyan);font:10px Consolas,monospace}.motion-preview{display:flex;gap:60px;align-items:center}.motion-card{position:relative;flex:0 0 180px;height:140px;background:#ff176c0a;border:1px solid #ff176c66;border-left:3px solid var(--pink);text-align:center;overflow:hidden}.motion-card img{width:100%;height:105px;object-fit:contain}.motion-card span{font:9px Consolas,monospace;color:var(--pink)}.motion-card.replaying:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ff93bc66 50%,transparent 75%);animation:sweep .8s ease-out both}.motion-card.replaying{animation:select-pop .32s ease-out both}.motion-timeline{display:flex;justify-content:space-between;flex:1;position:relative}.motion-timeline:before{content:'';position:absolute;top:36px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--pink),#ff397e33)}.motion-timeline>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}.motion-timeline span{font:9px Consolas,monospace;color:var(--muted)}.motion-timeline i{width:10px;height:10px;border:1px solid var(--pink);background:#2b1520;z-index:1;transform:rotate(45deg)}.motion-timeline b{font-size:11px;font-weight:400}.behavior-board{display:grid;grid-template-columns:1.6fr 1fr;background:#090b10}.behavior-preview{border-right:1px solid var(--line);min-width:0}.live-dot{color:var(--cyan)!important}.live-dot:before{content:'●';margin-right:8px}.behavior-items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:25px}.behavior-item{position:relative;border:1px solid #4f596666;background:#11141a;padding:10px 5px;color:#bcc6d1}.behavior-item>img{height:87px;width:100%;object-fit:contain}.behavior-item>span{display:block;font:9px Consolas,monospace;letter-spacing:1px;margin-top:7px}.behavior-item[aria-pressed=true]{background:#ff176c10;border-color:var(--pink);box-shadow:inset 3px 0 var(--pink);color:var(--pink)}.behavior-selected{margin:0 25px 20px;padding:15px;display:flex;align-items:center;gap:25px;background:#ff176c06;border:1px solid #ff176c44;min-height:160px}.behavior-selected>img{width:140px;height:135px;object-fit:contain}.behavior-selected h3{font-size:23px;letter-spacing:2px;margin:10px 0;line-height:1.2}.behavior-selected .mono{font-size:8px}.behavior-hint{text-align:center;padding:0 15px 22px;color:var(--muted);font-size:8px}.state-inspector{padding:25px;background:#171b21}.state-inspector .module-label{margin-bottom:20px}.state-inspector .module-label span{color:var(--cyan)}.state-node{border:1px solid #4b535f;padding:13px 18px;transition:border-color .2s,background .2s}.state-node small{display:block;font:8px Consolas,monospace;color:var(--muted);letter-spacing:1px}.state-node strong{font:18px Consolas,monospace;display:block;margin-top:5px;color:#d4dce6}.state-node.state-active{background:#20d9ee08;border-color:#20d9ee88}.state-node.state-active strong{color:var(--cyan)}.state-arrow{display:block;text-align:center;color:var(--cyan);line-height:1.7}.event-log{font-size:9px;min-height:100px;margin:22px 0 17px;padding:12px;background:#0e1117;line-height:2;color:#b2bdca;letter-spacing:0}.event-log div{overflow-wrap:anywhere}.event-log span{color:#60758a;margin-right:12px}.event-log div:last-child{color:var(--cyan)}.state-inspector .outline-button{width:100%}.adapt-controls{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;gap:20px}.adapt-controls label{display:flex;gap:20px;align-items:center;flex:1;font-size:9px}.adapt-controls label output{color:var(--cyan)}.adapt-controls input{width:150px}.adapt-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.adapt-screen{position:relative;height:295px;overflow:hidden}.adapt-screen>img{width:100%;height:100%;object-fit:cover;object-position:73% center}.adapt-label{position:absolute;top:20px;left:20px;padding:5px 8px;background:#111a;font-size:8px}.adapt-prompt{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);display:flex;gap:12px;align-items:center;white-space:nowrap;padding:18px 23px;--prompt-scale:1}.adapt-prompt strong{font-size:calc(18px * var(--prompt-scale));letter-spacing:3px;text-shadow:0 2px 8px #000}.adapt-prompt kbd{font-size:calc(11px * var(--prompt-scale))}.variant .adapt-prompt.backdrop{background:#030609e6;box-shadow:0 0 22px 12px #03060966;border-radius:4px}.adapt-metrics{display:flex;justify-content:space-around;gap:20px;padding:27px;font-size:8px;color:var(--muted)}.adapt-metrics b{color:var(--cyan);font-size:26px;font-weight:400;display:inline-block;margin-right:12px}.contact-sheet{padding:90px 0 50px}.contact-sheet h2{font-size:48px;margin:20px 0 35px}.route-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.route-cards>a{border:1px solid var(--line);padding:22px;background:#17191e;transition:border-color .2s}.route-cards>a:hover{border-color:var(--pink);color:var(--text)}.route-cards>a>span{font:9px Consolas,monospace;letter-spacing:1px;color:var(--pink)}.route-cards strong{font-size:12px;font-weight:400}.route-art{display:flex;align-items:center;justify-content:center;gap:15px;height:120px}.route-ux i{width:44px;height:36px;border:1px solid var(--cyan);background:#20d9ee0a}.route-ux b{font-weight:400;color:var(--muted)}.route-ui b{font:50px Georgia,serif;margin-right:10px}.route-ui i{width:23px;height:45px;background:var(--pink)}.route-ui i:nth-last-child(2){background:var(--cyan)}.route-ui i:last-child{background:#eef2f5}.route-code b{font:65px Consolas,monospace;color:var(--cyan);font-weight:400}.route-code span{font:12px/1.5 Consolas,monospace;color:var(--muted)}.export-row{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:30px}.export-row p{font-size:11px;color:var(--muted);margin:0}footer{border-top:1px solid var(--line);border-bottom:0}footer>.mono{color:var(--muted)}dialog{padding:0;border:1px solid #616671;background:#090b10;color:var(--text);width:min(1300px,96vw);max-width:96vw;max-height:94vh}dialog::backdrop{background:#03050bef;backdrop-filter:blur(10px)}.dialog-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;gap:20px}.dialog-toolbar>div{display:flex;align-items:center;gap:25px}.dialog-toolbar a{font-size:11px;color:var(--cyan)}.dialog-toolbar button{width:34px;height:34px;border:1px solid #535961;background:transparent;font-size:25px;line-height:1}.dialog-toolbar .mono{font-size:10px}dialog iframe{display:block;width:100%;height:min(72vh,calc(96vw * .563));min-height:180px;border:0}.dialog-hint{font-size:8px;color:var(--muted);text-align:center;margin:12px}.skip{position:fixed;top:-100px;left:20px;z-index:99;padding:12px;background:var(--cyan);color:#111}.skip:focus{top:10px}.no-script{padding:30px;color:var(--cyan)}[hidden]{display:none!important}@keyframes scan{from{left:5%}to{left:95%}}@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes select-pop{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}}
@media(min-width:1550px){.hero-collage{height:570px}.hero-menu{top:290px}}@media(max-width:1050px){.hero-collage{height:390px}.hero-menu{top:210px}.hero-inventory{top:65px}.hero-chip{width:110px;height:110px}.hero-chip img{height:85px}.hero-palette{left:48%;bottom:18px}.hero-palette span{display:none}.study-nav{gap:23px}.study-heading h2{font-size:31px}.pill{font-size:7px}.journey-track button{padding:20px 13px}.journey-track strong{font-size:17px}.journey-track i{font-size:8px}.screen-map{gap:35px 50px}.flow-board{padding:25px}.type-item{font-size:18px}.type-body{font-size:14px}.system-board article{padding:25px}.component-cards{gap:23px}.item-component img,.item-component.locked>strong{height:110px}.wire-canvas{padding:27px}.wire-content{gap:25px}.wire-workbench[data-layout=radial] .wire-item-grid{width:290px;min-height:320px}.wire-workbench[data-layout=radial] .wire-item{width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);transform:rotate(var(--angle)) translateY(-100px) rotate(calc(-1 * var(--angle)))}.wire-workbench[data-layout=radial] .wire-item img{height:40px}.wire-workbench[data-layout=radial] .wire-item span{font-size:6px}.behavior-board{grid-template-columns:1.3fr 1fr}.behavior-items{padding:18px;gap:10px}.behavior-item img{height:74px}.behavior-selected{margin-inline:18px;gap:13px}.behavior-selected img{width:95px;height:110px}.behavior-selected h3{font-size:19px}.behavior-item>span{font-size:8px}.adapt-controls{gap:13px}.adapt-controls label{gap:10px}.adapt-controls input{width:90px}.hero-bottom{gap:20px}.hero-bottom span{font-size:8px}.hero-bottom a{font-size:8px}.annotation-strip h3{min-width:135px}.annotation-bars{display:none}.large-swatches{min-height:150px}.key-row{gap:10px;font-size:9px}.key-row span{margin-right:0}.type-scale{gap:14px}}
@media(max-width:700px){:scope{scroll-padding-top:65px}header,footer{padding:18px 5%}header>.mono{display:none}.wordmark{font-size:24px}.hero,.collection{width:90%}.hero-heading{padding-top:35px;display:block}.hero-heading h1{font-size:44px;letter-spacing:-2px}.hero-heading>p{margin-top:15px;font-size:12px}.hero-heading>p br{display:none}.hero-collage{height:340px}.hero-hud{width:74%;top:20px;left:1%}.hero-inventory{width:90%;left:8%;top:105px;transform:rotate(3deg)}.hero-menu{width:52%;left:3%;top:230px}.hero-chip{right:6%;bottom:15px;width:78px;height:78px}.hero-chip img{height:57px}.hero-chip .mono{font-size:5px}.collage-label{font-size:6px;padding:5px 7px}.label-one{top:12px}.label-two{top:98px;right:6%}.hero-palette{display:none}.hero-bottom{gap:15px;flex-wrap:wrap;padding:18px 0 22px}.hero-bottom>span{font-size:7px;letter-spacing:.5px}.hero-bottom b{font-size:13px;margin-right:4px}.hero-bottom a{display:none}.study-nav{justify-content:start;padding:17px 5%;gap:24px}.study-nav a{font-size:9px}.study{padding-top:48px}.study-heading{display:block;margin-bottom:20px}.study-heading h2{font-size:29px;letter-spacing:-1px}.eyebrow{font-size:9px;margin-bottom:12px}.pill{display:inline-block;margin-top:14px;font-size:7px}.study-heading>.outline-button{margin-top:15px}.journey-scene{height:335px}.scene-vitals{top:20px;left:17px;gap:3px}.scene-vitals i{width:7px;height:10px}.scene-vitals span,.scene-vitals small{font-size:8px}.scene-heading{top:19px;right:15px;font-size:8px}.scene-heading span{font-size:7px}.scene-caption{bottom:20px;left:17px;right:60px}.scene-caption strong{font-size:23px;line-height:1.2}.scene-caption .mono{font-size:8px}.scene-next{bottom:20px;right:15px;width:34px;height:34px;font-size:20px}.target-reticle{left:60%;top:40%;width:40px;height:40px}.scene-prompt{left:auto;right:20px;top:60%;font-size:12px;letter-spacing:2px;gap:9px}.scene-prompt kbd{font-size:10px}.evidence-panel{top:58px;right:5%;width:90%;padding:18px}.evidence-panel h3{font-size:24px;margin-bottom:10px}.evidence-panel p{font-size:8px;margin-bottom:9px}.evidence-panel>.mono:last-child{margin-top:14px}.journey-track{grid-template-columns:repeat(5,minmax(112px,1fr));overflow-x:auto}.journey-track button{padding:16px 12px}.journey-track strong{font-size:17px}.journey-track small{font-size:10px}.journey-track i{font-size:8px;margin-top:13px}.journey-track button>span{font-size:8px;margin-bottom:7px}.journey-curve{gap:15px;padding:17px 15px 25px}.journey-curve>span:first-child{min-width:80px;font-size:7px}.journey-curve small{font-size:7px}.journey-curve svg{height:60px}.curve-note{font-size:6px;right:15px;bottom:7px}.caption{font-size:10px;gap:15px}.caption>span:last-child:not(:first-child){display:none}.caption a{font-size:9px}.flow-board{padding:18px 12px}.flow-legend{font-size:6px;gap:10px}.flow-legend i{width:12px}.flow-legend span:last-child{display:none}.screen-map{gap:22px 13px;padding-top:24px}.map-screen{padding:3px}.map-screen>span{font-size:7px;gap:4px;padding:7px 1px 3px;white-space:nowrap}.map-screen b{display:none}.map-screen i{font-size:8px}.map-center{width:65px;height:65px;font-size:6px}.map-center span{font-size:18px}.wire-options{gap:9px}.wire-option{padding:9px}.option-name{font-size:10px;line-height:1.3;gap:5px;align-items:start}.option-name b{font-size:10px}.option-name i{display:none}.option-caption{font-size:6px;letter-spacing:.5px;min-height:18px}.mini-wire{height:90px;margin-top:12px}.mini-title{height:3px;top:8px;left:7px}.mini-cells{left:7px;top:22px;bottom:8px;gap:3px}.mini-preview{top:22px;height:36px;font-size:23px}.mini-copy{height:12px;bottom:9px;border-top-width:2px;background:repeating-linear-gradient(transparent 0 4px,#66818f 4px 5px)}.mini-rows{left:7px;top:22px;bottom:8px;gap:4px}.mini-wheel{width:50px;height:50px;top:27px}.mini-wheel i{width:12px;height:12px;left:18px;top:-6px;transform-origin:6px 31px}.mini-wheel>span{font-size:22px}.workbench-top{padding:13px 15px;font-size:7px}.workbench-top>span:last-child{font-size:6px}.wire-canvas{padding:20px 15px}.wire-screen-title{font-size:22px;letter-spacing:3px;margin-bottom:18px}.wire-screen-title>span{font-size:8px}.wire-content{grid-template-columns:1fr;gap:22px}.wire-item-grid{gap:9px}.wire-item{padding:9px 4px}.wire-item img{height:55px}.wire-item span{font-size:7px;letter-spacing:.5px}.wire-item.locked strong{font-size:22px}.wire-detail{display:grid;grid-template-columns:.7fr 1fr;gap:13px;align-items:center}.wire-detail>img{width:100%;height:140px}.wire-crosshair{width:100px;height:100px;top:12%;left:20%}.wire-detail-copy{padding:13px}.wire-detail-copy h3{font-size:16px;letter-spacing:1px}.wire-detail-copy p{font-size:10px}.wire-detail-copy .mono{font-size:6px}.wire-bottom{font-size:6px;flex-wrap:wrap;margin-top:20px}.wire-bottom>span:nth-child(2){order:3;width:100%;font-size:9px}.wire-workbench[data-layout=radial] .wire-content{grid-template-columns:1fr}.wire-workbench[data-layout=radial] .wire-item-grid{width:290px;min-height:290px}.compare-heading{display:block;margin-top:25px}.compare-heading h3{font-size:14px;margin-bottom:8px}.compare-heading label{font-size:8px}.compare-wire-grid i{font-size:7px}.compare-wire-title{letter-spacing:.15em}.compare-wire-text{letter-spacing:.8px;padding:2% 1.5%}.compare-wire-text span{letter-spacing:0;margin-top:5px}.compare-label{font-size:5px;top:5px;padding:3px 5px}.compare-label.left{left:5px}.compare-label.right{right:5px}.compare-divider>span{width:28px;height:28px;left:-13px;font-size:18px}.hotspot{width:26px;height:26px;font-size:10px;box-shadow:0 0 0 3px #ff397e25}.hotspot[aria-pressed=true]{box-shadow:0 0 0 4px #20d9ee25}.dimension{font-size:5px;padding:2px 4px}.dim-top{top:-7px}.annotation-strip{display:grid;grid-template-columns:30px 1fr;gap:8px 12px;padding:17px}.annotation-strip>span{font-size:23px;grid-row:span 2;align-self:start}.annotation-strip h3{font-size:15px}.annotation-strip p{font-size:11px}.system-board{grid-template-columns:1fr}.system-board article{padding:22px;border-right:0!important}.large-swatches{min-height:135px}.large-swatches span{font-size:7px}.large-swatches code{font-size:8px}.type-display{font-size:32px}.type-item{font-size:19px}.type-body{font-size:14px}.type-scale{font-size:7px;gap:20px}.component-cards{grid-template-columns:1fr 1fr;gap:45px 22px;padding:5px 0 25px}.item-component img,.item-component.locked>strong{height:105px}.item-component>span{font-size:9px}.item-component>small{font-size:7px}.module-label{font-size:8px;margin-bottom:22px}.module-label>span{font-size:6px}.key-row{gap:13px;font-size:10px}.key-row span{margin-right:6px}.motion-preview{gap:25px}.motion-card{flex-basis:105px;height:110px}.motion-card img{height:80px}.motion-card span{font-size:7px}.motion-timeline{gap:10px}.motion-timeline b,.motion-timeline span{font-size:8px}.motion-timeline>div{gap:18px}.motion-timeline:before{top:34px}.behavior-board{grid-template-columns:1fr}.behavior-preview{border-right:0;border-bottom:1px solid var(--line)}.behavior-items{padding:18px;gap:9px}.behavior-item img{height:66px}.behavior-item span{font-size:7px}.behavior-selected{margin-inline:18px;padding:12px;gap:15px;min-height:135px}.behavior-selected img{width:95px;height:100px}.behavior-selected h3{font-size:19px;letter-spacing:1px}.behavior-selected .mono{font-size:7px}.state-inspector{padding:22px}.adapt-controls{padding:17px;flex-wrap:wrap;gap:12px}.adapt-controls label{flex-basis:100%;font-size:8px;margin-bottom:5px}.adapt-controls input{margin-left:auto;width:40%}.adapt-controls button{font-size:8px;padding:8px 12px}.adapt-pair{grid-template-columns:1fr}.adapt-screen{height:245px}.adapt-prompt{padding:15px;gap:9px}.adapt-prompt strong{font-size:calc(15px * var(--prompt-scale));letter-spacing:2px}.adapt-metrics{padding:20px 12px;gap:12px;font-size:6px;text-align:center}.adapt-metrics b{display:block;font-size:23px;margin:0 0 5px}.contact-sheet{padding-top:55px}.contact-sheet h2{font-size:36px;letter-spacing:-1px;margin-bottom:25px}.route-cards{grid-template-columns:1fr;gap:15px}.route-cards>a{padding:19px;display:grid;grid-template-columns:1fr 100px;align-items:center}.route-cards>a>span{font-size:8px;grid-column:1}.route-art{height:75px;grid-column:2;grid-row:1/3;gap:5px}.route-ux i{width:22px;height:22px}.route-ux b{font-size:10px}.route-ui b{font-size:33px;margin-right:0}.route-ui i{width:12px;height:27px}.route-code b{font-size:40px}.route-code span{font-size:8px}.route-cards strong{font-size:11px;margin-top:14px;grid-column:1}.export-row{display:block;margin-top:22px}.export-row p{font-size:10px}.export-row button{margin-top:17px}footer>.mono{display:none}.dialog-toolbar{padding:10px 12px;gap:10px}.dialog-toolbar .mono{font-size:8px}.dialog-toolbar>div{gap:10px}.dialog-toolbar a{font-size:8px}.dialog-hint{font-size:6px;letter-spacing:.4px}dialog iframe{min-height:180px}.dialog-toolbar button{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){:scope{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.journey-scene[data-step="2"] .scan-line{left:50%}}@media print{:scope{scroll-behavior:auto}header,.hero,.study-nav,footer,.contact-sheet,.caption a,.outline-button,.scene-next,.compare-heading,.compare-board,.dialog,.skip{display:none!important}:scope{print-color-adjust:exact;-webkit-print-color-adjust:exact}.collection{width:100%}.study{padding-top:20px;break-before:page;break-inside:avoid}.study-heading{margin-bottom:15px}.study-heading h2{font-size:26px}.study .board{break-inside:avoid}.journey-scene{height:270px}.study-heading .pill{font-size:7px}.screen-map{gap:20px 45px}.system-board article{padding:15px}.module-label{margin-bottom:12px}.item-component img,.item-component.locked>strong{height:95px}.large-swatches{min-height:110px}.type-display{font-size:35px}.motion-card{height:100px}.motion-card img{height:75px}.wire-item img{height:50px}.wire-detail>img{height:150px}.wire-content{min-height:250px}.hero-heading h1{font-size:40px}.wire-workbench[data-layout=radial] .wire-item-grid{min-height:300px}.adapt-controls{display:none}.no-script{display:none}}
.caption .board-download{margin-left:auto;white-space:nowrap;color:var(--cyan)}.download-strip{display:flex;align-items:center;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);padding:25px 0 40px}.download-strip>span{color:var(--muted);font-size:9px;margin-right:auto}.download-strip>a{font-size:11px;color:var(--cyan)}@media(max-width:700px){.caption{flex-wrap:wrap;gap:10px}.caption>span:first-child{flex-basis:100%}.download-strip{gap:18px}.download-strip>span{width:100%}.download-strip>a{font-size:10px}.scene-vitals{gap:2px}.scene-vitals i{width:5px}}@media print{.download-strip,.board-download{display:none!important}}

/* case-study-options.css */
.case-intro{padding-top:100px;margin-top:70px;border-top:1px solid #574051}.case-intro h2{font-size:52px;margin-bottom:35px}.case-sequence{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.case-sequence>a{display:flex;flex-direction:column;border:1px solid #514451;background:#201820;padding:12px;min-width:0}.case-sequence>a:hover{border-color:var(--pink);color:var(--text)}.case-sequence a>span{font:8px Consolas,monospace;letter-spacing:1px;color:#ff94bd;margin-bottom:15px}.case-sequence img,.sequence-flow,.sequence-tree,.sequence-code{height:95px;width:100%;object-fit:cover;background:#15171e}.case-sequence strong{font-size:10px;font-weight:400;margin-top:13px}.sequence-flow,.sequence-code{display:grid;place-items:center;font:17px Consolas,monospace;color:var(--cyan)}.sequence-tree{padding:17px;font:12px/1.6 Consolas,monospace;color:#c3acff}.sequence-code{font-size:13px}.case-note{font-size:11px;color:var(--muted);margin:17px 0 0}.option-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.option-tabs button{border:1px solid #454650;background:#1a1c23;padding:11px 17px;font:10px Consolas,monospace}.option-tabs button[aria-pressed=true]{color:#ffacd0;background:#ff397e14;border-color:var(--pink)}.decision-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.decision-scene{position:relative;background:#090c11;height:300px;overflow:hidden}.decision-scene>img{width:100%;height:100%;object-fit:cover;object-position:70% center}.decision-label{position:absolute;top:18px;left:18px;font:8px Consolas,monospace;letter-spacing:1px;padding:6px 9px;background:#090c11dd;color:#f5a1be}.decision-scene.solution .decision-label{color:var(--cyan)}.decision-prompt{position:absolute;top:59%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:13px;letter-spacing:2px;color:#b1b1b1}.decision-scene.solution .decision-prompt{font-size:18px;font-weight:700;color:white;background:#04070ce6;box-shadow:0 0 24px 15px #04070c99;padding:15px}.decision-slot-row{display:flex;gap:20px;justify-content:center;align-items:center;height:100%;padding:45px 30px 25px}.decision-slot{border:1px solid #59657455;width:42%;max-width:160px;background:#0d1016;position:relative}.decision-slot img{height:150px;width:100%;object-fit:contain}.decision-slot>span{font:9px Consolas,monospace;display:block;text-align:center;border-top:1px solid #ffffff15;padding:10px;color:#b4c2d1}.decision-slot.chosen{border-color:#ff176c88;box-shadow:inset 4px 0 var(--pink);background:#ff176c0c}.decision-slot.chosen:after{content:'✓ SELECTED';font:8px Consolas,monospace;position:absolute;bottom:-25px;left:0;color:var(--pink)}.decision-item-copy{position:absolute;inset:75px 10% 35px;border:1px solid #ff397e55;display:flex;gap:20px;align-items:center;padding:20px;overflow:hidden}.decision-item-copy img{width:30%;height:130px;object-fit:contain}.decision-item-copy>div{min-width:0}.decision-item-copy h3{font-size:22px;letter-spacing:2px;white-space:nowrap;margin-bottom:14px}.decision-item-copy p{font-size:11px;color:var(--muted);margin:0}.decision-scene.solution .decision-item-copy h3{white-space:normal;overflow-wrap:anywhere;font-size:19px;line-height:1.4;letter-spacing:1px}.rationale-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding:25px 30px;gap:30px}.rationale-row span{font:8px Consolas,monospace;letter-spacing:1px;color:var(--pink)}.rationale-row p{font-size:12px;color:#c0c3cd;margin:10px 0 0;line-height:1.7}.flow-scenarios,.flow-player{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 25px;border-bottom:1px solid var(--line)}.flow-scenarios>.mono{font-size:9px;color:var(--muted)}.flow-scenarios .option-tabs{margin:0}.branch-map{padding:35px 40px 20px;background-color:#171b23;background-image:radial-gradient(#ffffff16 .8px,transparent .8px);background-size:17px 17px}.branch-main{display:grid;grid-template-columns:1fr 45px 1fr 45px 1fr;align-items:center;gap:15px}.branch-main>b{text-align:center;color:#7b8293;font-size:23px;font-weight:400}.branch-node{border:1px solid #596675;background:#1c212be6;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:23px 15px;min-height:125px;transition:border-color .2s,background .2s}.branch-node>span:not(.big-lock){font:10px Consolas,monospace;color:var(--muted);margin-bottom:12px}.branch-node strong{font-size:17px;font-weight:400;text-align:center}.branch-node small{font-size:10px;color:var(--muted);margin-top:7px;text-align:center}.branch-node.current{background:#20d9ee0e;border-color:var(--cyan);box-shadow:0 0 25px #20d9ee0a}.branch-node.current strong{color:var(--cyan)}.diamond-node{border-color:#a58b60;border-radius:25px 0}.branch-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:75px;margin-top:23px}.branch-route{display:block;text-align:center;font:9px Consolas,monospace;color:#6e8b96;margin:0 0 15px}.branch-path .branch-node{min-height:170px}.branch-path img{height:80px;object-fit:contain;margin-bottom:10px}.big-lock{font:42px Consolas,monospace;color:#6d7a91;height:80px;display:grid;place-items:center}.return-path{border:1px dashed #5d6774;border-top:0;text-align:center;padding:20px;margin-top:25px;font-size:9px;color:#9cabbe}.flow-player{border-bottom:0;border-top:1px solid var(--line);justify-content:end}.flow-player>span{margin-right:auto;font-size:12px;color:var(--cyan)}.spec-board{display:grid;grid-template-columns:1fr 1fr;background:#0e1117}.spec-board article{padding:30px;min-width:0}.button-spec{grid-column:1/-1;border-bottom:1px solid var(--line)}.button-matrix{display:grid;grid-template-columns:90px repeat(3,1fr);align-items:center;gap:23px 35px;padding:10px 0}.button-matrix>span{font:9px Consolas,monospace;color:var(--muted);letter-spacing:1px}.button-matrix>span:nth-child(-n+4){text-align:center}.spec-btn{border:1px solid #7e8b9a;background:transparent;padding:17px 15px;font:11px Consolas,monospace;letter-spacing:2px;transition:transform .1s,background .1s}.spec-btn.filled{background:#ff176c;border-color:#ff176c;color:#140a0f;font-weight:700}.spec-btn.forced-focus{outline:1px dashed var(--cyan);outline-offset:5px}.spec-btn:disabled{opacity:.3}.spec-btn:active{transform:scale(.97)}.button-feedback{font-size:9px;color:var(--cyan);margin-top:20px;padding-top:17px;border-top:1px solid #ffffff10}.font-spec{border-right:1px solid var(--line)}.font-controls{display:flex;gap:15px}.font-controls label{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1;color:var(--muted);font:9px Consolas,monospace}.font-controls select{width:100%;min-width:0;background:#1c222c;border:1px solid #515b6b;color:#d1d7e2;padding:8px;font-size:10px}.font-specimen{margin-top:25px;border:1px dashed #38465a;padding:22px;overflow-wrap:anywhere}.font-specimen>.mono{font-size:7px;color:#7994b0}.font-specimen>strong{display:block;font-size:36px;letter-spacing:4px;line-height:1.2;margin:8px 0 24px}.font-specimen h3{font-size:25px;letter-spacing:2px;line-height:1.3;margin:10px 0 16px}.font-specimen p{font-size:14px;color:#c8d0d7;line-height:1.6;margin:0}.spacing-preview{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--spec-gap,22px);height:310px;padding:20px 0 45px}.spacing-card{width:calc((100% - var(--spec-gap,22px))/2);max-width:185px;border:1px solid #77899c;background:#141c26;min-width:0}.spacing-card img{height:170px;width:100%;object-fit:contain}.spacing-card>span{font:9px Consolas,monospace;letter-spacing:1px;display:block;border-top:1px solid #ffffff19;text-align:center;padding:14px 5px}.gap-bracket{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:var(--cyan);font-size:22px;width:var(--spec-gap,22px);border-inline:1px solid var(--cyan);line-height:1}.gap-bracket output{position:absolute;top:30px;font:9px Consolas,monospace;white-space:nowrap}.spacing-ruler{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:space-between;border-bottom:1px solid #62728477}.spacing-ruler i{height:8px;border-left:1px solid #62728477}.spacing-spec>.slider-label{margin-top:25px}.handoff-pipeline{display:grid;grid-template-columns:1fr 30px 1fr 30px 1.2fr;align-items:center;gap:25px;padding:30px;border-bottom:1px solid var(--line);background:#13151c}.handoff-pipeline>div{min-width:0}.handoff-pipeline .mono{font-size:8px;color:#c5b5ef;display:block;margin-bottom:20px}.figma-component{display:flex;align-items:center;flex-direction:column;padding:15px}.figma-bound{position:relative;border:1px solid #bca0ff;width:165px;max-width:100%;background:#ff176c0b}.figma-bound>img{height:145px;width:100%;object-fit:contain}.figma-bound>span{display:block;text-align:center;padding:12px;font:9px Consolas,monospace;letter-spacing:1px;color:var(--pink);border-top:1px solid #ff176c55}.figma-bound>i{position:absolute;width:6px;height:6px;border:1px solid #bca0ff;background:#171320;left:-3px;top:-3px}.figma-bound>i:nth-of-type(2){left:auto;right:-3px}.figma-bound>i:nth-of-type(3){top:auto;bottom:-3px}.figma-bound>i:nth-of-type(4){top:auto;left:auto;bottom:-3px;right:-3px}.figma-component small{font:9px Consolas,monospace;color:#c5b5ef;margin-top:13px}.pipeline-arrow{font-size:24px;color:#c5b5ef;text-align:center}.handoff-contract>div{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #38303d;font-size:10px}.handoff-contract>div>span{color:#88869b}.handoff-contract code{font-size:10px;color:#c5b5ef;text-align:right}.tree-row{padding:7px 7px 7px calc(10px + var(--indent)*16px);font:10px Consolas,monospace;color:#acb8cb;border-left:1px solid #59637755;white-space:nowrap}.tree-row:first-child{color:var(--cyan);background:#20d9ee08}.tree-row.tree-highlight{color:#ffd1e2;background:#ff397e10;border-left-color:var(--pink)}.runtime-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 25px}.runtime-tools>.mono{font-size:8px;color:var(--muted)}.runtime-tools .option-tabs{margin:0}.runtime-tools .option-tabs button{padding:7px 13px;font-size:9px}.runtime-stage{background:#080a0f;padding:25px;display:grid;place-items:center;min-height:300px}.runtime-canvas{position:relative;width:88%;aspect-ratio:16/9;border:1px solid #4a5260;overflow:hidden;container-type:inline-size;transition:width .25s,aspect-ratio .25s}.runtime-canvas>img{height:100%;width:100%;object-fit:cover;filter:brightness(.65)}.runtime-stage[data-aspect=ultrawide] .runtime-canvas{width:100%;aspect-ratio:21/9}.runtime-stage[data-aspect=compact] .runtime-canvas{width:66%;aspect-ratio:4/3}.safe-frame{position:absolute;inset:7%;border:1px dashed #20d9ee88;pointer-events:none}.anchor-point{position:absolute;color:var(--cyan);font-size:22px}.anchor-tl{left:6%;top:4%}.anchor-tr{right:6%;top:4%}.anchor-bl{left:6%;bottom:4%}.runtime-health{position:absolute;left:9%;top:10%;display:flex;gap:4px;align-items:center}.runtime-health span{font:10px Consolas,monospace;margin-right:7px}.runtime-health i{width:14px;height:10px;background:var(--pink);transform:skewX(-10deg)}.runtime-objective{position:absolute;right:9%;top:10%;text-align:right;text-shadow:0 2px 5px #000}.runtime-objective small{font:8px Consolas,monospace;letter-spacing:1px;color:var(--cyan)}.runtime-objective strong{display:block;font-size:13px;font-weight:400;margin-top:5px}.runtime-card{position:absolute;right:9%;bottom:13%;display:flex;align-items:center;background:#080b12e8;border:1px solid #ff397e77;padding:12px 20px;gap:17px;width:48%;box-shadow:inset 3px 0 var(--pink)}.runtime-card>img{width:70px;height:70px;object-fit:contain}.runtime-card small{font:7px Consolas,monospace;letter-spacing:1px;color:var(--pink)}.runtime-card strong{display:block;font-size:17px;letter-spacing:1px;margin-top:5px;line-height:1.3}.runtime-back{position:absolute;left:9%;bottom:11%;font-size:9px}.runtime-card.opening{animation:runtime-open .45s ease-out both}.runtime-properties{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:23px 30px;border-top:1px solid var(--line)}.runtime-properties span{font:8px Consolas,monospace;color:#9484b8;display:block;margin-bottom:8px}.runtime-properties strong{font-size:11px;font-weight:400;color:#d4ccdf;line-height:1.5;display:block}.debug-toolbar,.perf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 30px;border-bottom:1px solid var(--line)}.debug-toolbar>.mono,.perf-toolbar>.mono{font-size:9px;color:var(--muted)}.race-timeline{padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:35px;background:#121720}.race-timeline>div{display:grid;grid-template-columns:65px 1fr;gap:12px 15px;align-items:center}.race-timeline span{font:10px Consolas,monospace;color:#849ab6}.race-timeline b{font-size:12px;font-weight:400}.race-timeline i{height:5px;grid-column:1/-1;background:linear-gradient(90deg,#ff397e,#ff397e44);position:relative}.race-timeline i:after{content:'';position:absolute;right:0;top:-3px;width:11px;height:11px;background:var(--pink);border-radius:50%}.race-timeline .fast-request{width:40%;background:var(--cyan)}.race-timeline .fast-request:after{background:var(--cyan)}.race-timeline small{grid-column:1/-1;font:8px Consolas,monospace;color:var(--muted)}.debug-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.debug-version{padding:25px 30px;background:#10141a}.debug-version .module-label{margin-bottom:20px}.bug-version .module-label>span{color:var(--pink)}.fix-version .module-label>span{color:var(--cyan)}.debug-selection{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #586377;padding:12px 17px;background:#1b202a}.debug-selection>span{font:9px Consolas,monospace;color:var(--muted)}.debug-selection strong{font:14px Consolas,monospace;color:#e5e9f0}.debug-item{display:flex;align-items:center;justify-content:center;gap:20px;min-height:185px}.debug-item img{width:120px;height:140px;object-fit:contain}.debug-item h3{font-size:22px;letter-spacing:2px;margin:0;line-height:1.3;max-width:210px}.debug-state{font-size:9px;color:var(--muted);margin:0;min-height:30px}.debug-version.mismatch{background:#25131c}.debug-version.mismatch .debug-state{color:#ff93b9}.debug-version.matched{background:#0e2025}.debug-version.matched .debug-state{color:var(--cyan)}.debug-bottom{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding:27px 30px;border-top:1px solid var(--line)}.debug-bottom pre{margin:0;padding:19px;background:#0b0d13;font:11px/1.9 Consolas,monospace;color:#a3cee0;overflow:auto}.debug-bottom>div{align-self:center}.debug-bottom .mono{font-size:9px;color:var(--cyan)}.debug-bottom p{font-size:18px;max-width:340px;margin:12px 0 10px;line-height:1.4}.debug-bottom small{font-size:11px;color:var(--muted)}.race-log{font-size:9px;letter-spacing:0;padding:18px 30px;background:#0d1016;color:#a2bdd0;min-height:50px}.race-log div{margin-bottom:5px}.perf-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.perf-pair>article{padding:27px 30px;background:#12161c}.perf-cards{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}.perf-cards>span{aspect-ratio:1/1.2;background:#202731;border:1px solid #404c5e;display:grid;place-items:center;font:8px Consolas,monospace;color:#8190a5;transition:background .15s}.perf-cards>span[data-selected=true]{background:#ff397e33;border-color:var(--pink);color:#ffb8d3}.perf-cards>span.touched{background:#ff397e28;border-color:#ac426a}.perf-pair>article:last-child .perf-cards>span.touched{background:#20d9ee22;border-color:var(--cyan)}.perf-meter{height:6px;background:#29303c;margin-top:25px}.perf-meter i{display:block;width:0;height:100%;background:var(--pink);transition:width .4s}.perf-pair>article:last-child .perf-meter i{background:var(--cyan)}.perf-number{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 15px;margin-top:20px}.perf-number strong{font:46px Consolas,monospace;font-weight:400;letter-spacing:-2px;color:var(--pink)}.perf-pair>article:last-child .perf-number strong{color:var(--cyan)}.perf-number>span{font:8px Consolas,monospace;color:var(--muted);letter-spacing:1px}.perf-number>small{width:100%;font:9px Consolas,monospace;color:#97a7bc}.reuse-diagram{display:flex;justify-content:space-around;align-items:center;gap:20px;padding:27px 30px;border-top:1px solid var(--line)}.reuse-diagram>div{padding:15px 20px;border:1px solid #506175;flex:1}.reuse-diagram .mono{display:block;font-size:8px;color:var(--muted);margin-bottom:9px}.reuse-diagram strong{font:12px Consolas,monospace;color:#b6d5e8}.reuse-diagram>b{color:var(--cyan);font-size:20px;font-weight:400}.perf-note{font-size:10px;color:var(--muted);padding:0 30px 22px;line-height:1.7}.result-tabs{padding:18px 22px;margin:0;border-bottom:1px solid var(--line)}.result-image{display:block;position:relative;width:100%;padding:0;border:0;background:#020305}.result-image>img{width:100%;aspect-ratio:1648/928;object-fit:contain}.result-image>span{position:absolute;bottom:22px;right:25px;border:1px solid var(--pink);background:#0a0d13ee;padding:15px 20px;font:10px Consolas,monospace;letter-spacing:1px;color:#ffb8d3}.result-image:hover>span{background:var(--pink);color:#110910}.result-strip{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px 30px}.result-strip .mono{font-size:8px;color:var(--muted);display:block;margin-bottom:8px}.result-strip strong{font-size:14px;font-weight:400}.result-strip>b{font-weight:400;font-size:20px;color:var(--pink)}@keyframes runtime-open{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.study-nav{justify-content:start;gap:22px}.case-sequence{grid-template-columns:repeat(3,1fr)}.case-sequence img,.sequence-flow,.sequence-tree,.sequence-code{height:120px}.branch-paths{gap:35px}.handoff-pipeline{gap:15px;padding:25px}.tree-row{font-size:8px;padding-left:calc(7px + var(--indent)*10px)}.figma-component{padding:10px}.handoff-contract code{font-size:8px}.handoff-contract>div{font-size:9px}.runtime-card{width:50%;padding:10px;gap:10px}.runtime-card strong{font-size:13px}.runtime-card>img{width:50px;height:60px}.font-specimen>strong{font-size:29px;letter-spacing:3px}.font-specimen h3{font-size:22px}.button-matrix{grid-template-columns:65px repeat(3,1fr);gap:20px}.spec-btn{font-size:9px}.debug-item{gap:15px}.debug-item img{width:95px;height:115px}.debug-item h3{font-size:18px}.reuse-diagram{gap:13px}.reuse-diagram>div{padding:12px}.reuse-diagram strong{font-size:10px}.decision-slot img{height:120px}.decision-item-copy{inset:70px 7% 40px;padding:16px;gap:13px}.decision-item-copy h3{font-size:18px}.decision-scene.solution .decision-item-copy h3{font-size:16px}}
@media(max-width:700px){.case-intro{padding-top:50px;margin-top:50px}.case-intro h2{font-size:35px;letter-spacing:-1px;margin-bottom:25px}.case-sequence{grid-template-columns:repeat(2,1fr);gap:10px}.case-sequence>a{padding:10px}.case-sequence a>span{font-size:7px;letter-spacing:.5px;margin-bottom:10px}.case-sequence strong{font-size:9px}.case-sequence img,.sequence-flow,.sequence-tree,.sequence-code{height:80px}.sequence-tree{font-size:10px;padding:12px}.sequence-flow{font-size:16px}.sequence-code{font-size:10px}.case-note{font-size:10px}.option-tabs{gap:6px}.option-tabs button{font-size:8px;padding:9px 10px}.decision-pair{grid-template-columns:1fr}.decision-scene{height:250px}.decision-label{font-size:7px;top:14px;left:14px}.decision-scene.solution .decision-prompt{font-size:16px}.decision-slot-row{padding:45px 20px 30px;gap:20px}.decision-slot img{height:115px}.decision-slot>span{font-size:8px}.decision-item-copy{inset:60px 6% 30px;gap:12px;padding:17px}.decision-item-copy img{height:110px}.rationale-row{grid-template-columns:1fr;padding:20px;gap:20px}.rationale-row p{font-size:11px;margin-top:7px}.rationale-row span{font-size:7px}.flow-scenarios{display:block;padding:17px}.flow-scenarios>.mono{display:block;margin-bottom:12px;font-size:8px}.branch-map{padding:20px 14px}.branch-main{grid-template-columns:1fr 15px 1fr 15px 1fr;gap:5px}.branch-node{padding:15px 7px;min-height:115px}.branch-node strong{font-size:12px}.branch-node small{font-size:8px;line-height:1.5}.branch-node>span:not(.big-lock){font-size:8px}.branch-main>b{font-size:15px}.branch-paths{gap:9px;margin-top:20px}.branch-route{font-size:7px;margin-bottom:10px}.branch-path .branch-node{min-height:160px}.branch-path img{height:53px;margin-bottom:13px}.big-lock{font-size:26px;height:65px}.return-path{font-size:7px;line-height:1.8;padding:15px 7px}.flow-player{padding:15px;gap:10px;flex-wrap:wrap}.flow-player>span{flex-basis:100%;font-size:10px;margin-bottom:4px}.flow-player button{font-size:9px;padding:8px 12px}.spec-board{grid-template-columns:1fr}.spec-board article{padding:20px}.button-matrix{grid-template-columns:42px repeat(3,minmax(0,1fr));gap:17px 9px}.button-matrix>span{font-size:6px;letter-spacing:.3px}.spec-btn{font-size:6px;letter-spacing:.3px;padding:12px 4px;min-width:0}.spec-btn.forced-focus{outline-offset:3px}.button-feedback{font-size:8px;line-height:1.7}.font-spec{border-right:0;border-bottom:1px solid var(--line)}.font-controls{gap:10px}.font-controls select{font-size:9px;padding:7px}.font-controls label{font-size:8px}.font-specimen{padding:17px}.font-specimen>strong{font-size:28px;letter-spacing:2px}.font-specimen h3{font-size:22px;letter-spacing:1px}.font-specimen p{font-size:13px}.spacing-preview{height:260px}.spacing-card img{height:130px}.spacing-card>span{font-size:8px;padding:12px 4px}.handoff-pipeline{grid-template-columns:1fr;gap:13px;padding:22px}.handoff-pipeline .mono{font-size:8px;margin-bottom:16px}.figma-component{padding:5px}.figma-bound{width:145px}.figma-bound>img{height:115px}.pipeline-arrow{transform:rotate(90deg);font-size:20px;justify-self:center}.handoff-contract{width:100%;max-width:320px;margin:auto}.handoff-contract>div{padding:9px 0;font-size:10px}.handoff-contract code{font-size:10px}.engine-tree{width:100%;max-width:320px;margin:auto}.tree-row{font-size:10px;padding-left:calc(10px + var(--indent)*16px)}.runtime-tools{padding:17px;flex-wrap:wrap;gap:13px}.runtime-tools>.mono{flex-basis:100%}.runtime-tools .option-tabs button{font-size:8px;padding:7px 10px}.runtime-tools>.outline-button{font-size:8px;padding:8px 10px}.runtime-stage{padding:12px;min-height:190px}.runtime-canvas{width:100%}.runtime-stage[data-aspect=compact] .runtime-canvas{width:85%}.runtime-health{gap:2px}.runtime-health span{font-size:5px;margin-right:2px}.runtime-health i{width:5px;height:5px}.runtime-objective small{font-size:4px;letter-spacing:.5px}.runtime-objective strong{font-size:6px;margin-top:2px}.anchor-point{font-size:11px}.runtime-card{padding:5px;gap:6px;width:54%;bottom:18%}.runtime-card>img{width:27px;height:35px}.runtime-card small{font-size:4px;letter-spacing:0}.runtime-card strong{font-size:7px;letter-spacing:.3px;margin-top:2px}.runtime-back{font-size:5px}.runtime-back kbd{font-size:5px;padding:3px}.runtime-properties{grid-template-columns:1fr 1fr;padding:20px;gap:20px}.runtime-properties span{font-size:7px}.runtime-properties strong{font-size:10px}.debug-toolbar,.perf-toolbar{display:block;padding:20px}.debug-toolbar>.mono,.perf-toolbar>.mono{font-size:8px;line-height:1.7;display:block;margin-bottom:15px}.race-timeline{padding:20px;gap:20px}.race-timeline>div{grid-template-columns:1fr;gap:9px}.race-timeline span{font-size:9px}.race-timeline b{font-size:10px}.race-timeline small{font-size:6px;line-height:1.6}.debug-pair{grid-template-columns:1fr}.debug-version{padding:20px}.debug-item{min-height:155px}.debug-item h3{font-size:20px}.debug-item img{width:110px;height:125px}.debug-state{font-size:8px;min-height:25px}.debug-bottom{grid-template-columns:1fr;padding:20px;gap:20px}.debug-bottom pre{font-size:9px;padding:14px}.debug-bottom p{font-size:17px}.debug-bottom small{font-size:10px}.race-log{padding:17px 20px;font-size:8px;line-height:1.7}.perf-pair{grid-template-columns:1fr}.perf-pair>article{padding:22px}.perf-cards{gap:5px}.perf-cards>span{font-size:6px}.perf-number strong{font-size:40px}.perf-number>span{font-size:7px}.perf-number>small{font-size:8px}.reuse-diagram{flex-direction:column;gap:12px;padding:22px}.reuse-diagram>div{width:100%;padding:13px 17px}.reuse-diagram strong{font-size:12px}.reuse-diagram>b{transform:rotate(90deg);font-size:17px}.reuse-diagram .mono{font-size:7px;margin-bottom:6px}.perf-note{font-size:9px;padding:0 22px 20px}.result-tabs{padding:14px}.result-tabs button{font-size:7px;padding:8px}.result-image>span{right:10px;bottom:10px;padding:9px 10px;font-size:7px}.result-strip{padding:20px;gap:13px;flex-wrap:wrap}.result-strip>div{width:100%}.result-strip>b{transform:rotate(90deg);font-size:15px;margin-left:15px}.result-strip strong{font-size:13px}.result-strip .mono{font-size:7px;margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){.runtime-card.opening{animation:none}}@media print{.case-intro{break-before:page;margin:0;padding-top:20px}.case-sequence{grid-template-columns:repeat(3,1fr)}.option-tabs{display:none}.rationale-row{padding:15px}.decision-scene{height:250px}.branch-map{padding:20px}.flow-player{display:none}.button-spec{padding:15px!important}.runtime-tools,.debug-toolbar button,.perf-toolbar button{display:none}.runtime-canvas{width:70%}.runtime-stage{padding:15px}.handoff-pipeline{padding:20px}.debug-version{padding:20px}.race-timeline{padding:20px}.spec-board article{padding:20px}.font-specimen{padding:15px}.perf-cards>span{aspect-ratio:1.2}.result-image>span{display:none}.download-strip{display:none}}

/* motion-engineering.css */
.source-hud-board>img{width:100%;aspect-ratio:1648/928;object-fit:contain;background:#020305}.source-hud-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:22px;border-top:1px solid var(--line)}.source-hud-tabs button{padding:8px;background:#101318;border:1px solid #444c59;text-align:left;min-width:0}.source-hud-tabs button[aria-pressed=true]{border-color:var(--pink);background:#ff397e08}.source-hud-tabs img{width:100%;aspect-ratio:1648/928;object-fit:cover}.source-hud-tabs span{display:block;font:9px Consolas,monospace;letter-spacing:1px;color:var(--pink);margin:13px 8px 7px}.source-hud-tabs strong{display:block;font-size:12px;font-weight:400;margin:0 8px 8px}.unreal-widget{display:flex;flex-direction:column;align-items:center;position:relative}.unreal-widget>.mono{align-self:start;color:#e0e4eb!important}.unreal-widget .figma-bound{border-color:#718197;margin-top:12px}.unreal-widget small{font:10px Consolas,monospace;color:#96acc6;margin-top:17px}.unreal-emblem{position:absolute;left:0;top:35px;width:36px;height:36px;border:1px solid #778294;border-radius:50%;display:grid;place-items:center;font:25px Georgia,serif;color:#d9e0ea}.unreal-pipeline{background:linear-gradient(120deg,#131820,#13151c)!important}.unreal-pipeline .handoff-contract .mono,.unreal-pipeline .engine-tree>.mono{color:#a9c7e4}.motion-lab{display:grid;grid-template-columns:.85fr 1.3fr;gap:0;background:#11151c}.motion-source{padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#020305;border-right:1px solid var(--line);gap:20px}.motion-source iframe{display:block;width:100%;max-width:360px;height:330px;border:0;pointer-events:none}.motion-source>.mono{color:#758399;font-size:8px}.motion-score{padding:30px}.motion-actions{display:flex;align-items:center;gap:12px;margin-bottom:30px;flex-wrap:wrap}.motion-actions label{margin-left:auto;color:#a1aec0;font-size:8px;display:flex;gap:8px;align-items:center}.motion-actions select{background:#202938;border:1px solid #5a6880;color:#d7e2ed;padding:6px;font:10px Consolas,monospace}.score-axis{display:flex;justify-content:space-between;margin-left:78px;margin-bottom:18px;color:#7b91ad;font-size:8px}.score-track{position:relative;height:38px;margin-left:78px;margin-bottom:10px;background:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 25%)}.score-track>span{position:absolute;right:calc(100% + 15px);top:11px;font:9px Consolas,monospace;color:#bbc6d6}.score-track>i{position:absolute;left:var(--start);width:var(--length);height:29px;top:4px;background:linear-gradient(90deg,#ff397e44,#ff397e18);border-left:2px solid var(--pink);display:flex;align-items:center;padding:0 10px;font:8px Consolas,monospace;color:#ffb7d1;white-space:nowrap}.scrub-label{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:9px;color:#95aac5;margin-top:27px}.scrub-label output{margin-left:auto;color:var(--cyan)}.scrub-label input{width:100%;margin:0}.motion-source-note{font-size:11px;color:var(--muted);line-height:1.7;margin:20px 0 13px;max-width:430px}.motion-ready{font-size:8px;color:#86a3bc;letter-spacing:.6px}.entrance-actions{padding:20px 25px;border-bottom:1px solid var(--line);margin:0}.entrance-actions>.mono{color:var(--muted);font-size:9px;margin-right:auto}.entrance-actions label{margin-left:0}.entrance-board>iframe{width:100%;aspect-ratio:1648/928;border:0;display:block;background:#020305;pointer-events:none}.entrance-score{padding:28px 30px;border-top:1px solid var(--line)}.stagger-cards{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}.stagger-cards>span{display:flex;flex-direction:column;font:10px Consolas,monospace;color:#bfd0e0;gap:12px}.stagger-cards i{position:relative;width:calc(100% - var(--delay));margin-left:var(--delay);height:18px;background:#20d9ee1a;border-left:2px solid var(--cyan)}.stagger-cards small{font:8px Consolas,monospace;color:#7f94ad}.entrance-score .motion-ready{display:block;margin-top:16px}.shared-board{display:grid;grid-template-columns:1fr 40px 1.2fr;align-items:center;gap:20px;padding:30px;background:#13171e}.frame-source>.mono{display:block;color:#aac5df;font-size:9px;margin-bottom:18px}.frame-source iframe{display:block;width:100%;height:290px;background:#020305;border:1px solid #48576a;pointer-events:none}.frame-contract{display:flex;gap:14px;flex-wrap:wrap;font:8px Consolas,monospace;color:#879bb4;margin-top:18px}.frame-contract code{color:var(--cyan);width:100%;font-size:10px}.shared-arrow{text-align:center;color:var(--cyan);font-size:27px}.shared-screens{display:grid;grid-template-columns:1fr 1fr;gap:18px}.shared-screens button{padding:6px;border:1px solid #475365;background:#0c1017;min-width:0;text-align:left}.shared-screens button:hover{border-color:var(--cyan)}.shared-screens img{width:100%;aspect-ratio:824/464;object-fit:cover}.shared-screens span{font:9px Consolas,monospace;display:block;margin:11px 6px 5px;color:#bacadb}.source-unreal-map{display:flex;align-items:center;gap:30px;justify-content:space-between;padding:25px;border:1px solid var(--line);border-top:0;background:#1a2029}.source-unreal-map>div{flex:1}.source-unreal-map span{display:block;font:8px Consolas,monospace;color:var(--muted);margin-bottom:9px}.source-unreal-map strong{font:12px Consolas,monospace;color:#b7d1e7;line-height:1.5;display:block}.source-unreal-map>b{font-size:20px;font-weight:400;color:var(--cyan)}.input-preview{position:relative;background:#020305;aspect-ratio:1648/928;overflow:hidden}.input-game{width:100%;height:100%;object-fit:contain}.input-preview>#open-routing{position:absolute;bottom:25px;right:25px;background:#0b101beb;border-color:var(--cyan);color:#9cf4ff;padding:15px 22px}.input-owner{position:absolute;left:25px;bottom:25px;background:#101722de;padding:10px;font-size:9px;color:var(--cyan)}.input-overlay{position:absolute;inset:0;background:#05070c;z-index:2}.input-overlay>img{height:100%;width:100%;object-fit:contain}.input-overlay button{position:absolute;bottom:25px;right:25px;background:#080d17ef;color:#ffc5dd;border-color:var(--pink);padding:14px 20px}.input-preview.routing-open .input-owner{z-index:3;left:25px;bottom:auto;top:20px;color:#ffaccf}.blueprint-plan{display:grid;grid-template-columns:1fr 1fr;gap:40px;background-image:radial-gradient(#ffffff16 .7px,transparent .7px);background-size:16px 16px;padding:30px;background-color:#13171f}.blueprint-route{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:12px}.blueprint-route>span{grid-column:1/-1;font:9px Consolas,monospace;color:#7e9fbe;margin-bottom:10px}.blueprint-route>div{border:1px solid #4e5f77;background:#202a39;padding:14px 12px;font:9px/1.6 Consolas,monospace;color:#c0d4e8;min-height:65px;display:flex;flex-direction:column;justify-content:center}.blueprint-route>div small{font-size:7px;color:#889fb7}.blueprint-route>b{text-align:center;color:#687c95;font-weight:400}.blueprint-route>b:nth-of-type(2){grid-column:1/-1;font-size:18px;line-height:.7}.blueprint-route.active>div{border-color:var(--cyan);background:#20d9ee0a}.blueprint-route.active>span{color:var(--cyan)}.focus-proof{border-top:1px solid var(--line);padding:20px 25px;display:flex;justify-content:space-between;gap:25px;font-size:8px;line-height:1.6;color:#b4c9db}.focus-proof>span:last-child{color:#7d91a8;white-space:nowrap}
@media(max-width:1050px){.motion-score{padding:25px}.motion-source{padding:22px}.motion-source iframe{height:280px}.motion-actions .outline-button{font-size:9px;padding:9px 12px}.score-track{margin-left:65px}.score-axis{margin-left:65px}.shared-board{padding:25px;gap:15px;grid-template-columns:1fr 25px 1.2fr}.frame-source iframe{height:250px}.shared-screens{gap:12px}.blueprint-plan{padding:25px;gap:25px}.blueprint-route{gap:9px;grid-template-columns:1fr 15px 1fr}.blueprint-route>div{font-size:8px;padding:11px}.focus-proof>span:last-child{font-size:7px}}
@media(max-width:700px){.source-hud-tabs{gap:8px;padding:12px}.source-hud-tabs button{padding:4px}.source-hud-tabs span{font-size:6px;letter-spacing:.5px;margin:9px 4px 5px}.source-hud-tabs strong{font-size:8px;margin:0 4px 6px;line-height:1.4}.unreal-emblem{left:5px;top:40px;width:30px;height:30px;font-size:21px}.unreal-widget>.mono{font-size:8px}.unreal-widget small{font-size:9px}.motion-lab{grid-template-columns:1fr}.motion-source{padding:20px;border-right:0;border-bottom:1px solid var(--line)}.motion-source iframe{height:265px;max-width:300px}.motion-source>.mono{font-size:7px}.motion-score{padding:22px}.motion-actions{gap:9px;margin-bottom:25px}.motion-actions .outline-button{font-size:8px;padding:9px 11px}.motion-actions label{font-size:7px;gap:5px}.motion-actions select{font-size:9px;padding:5px}.score-axis{font-size:6px;margin-left:58px}.score-track{margin-left:58px;height:31px;margin-bottom:9px}.score-track>span{font-size:8px;right:calc(100% + 10px)}.score-track>i{height:24px;font-size:6px;padding:0 5px}.scrub-label{font-size:8px}.motion-source-note{font-size:10px}.motion-ready{font-size:7px}.entrance-actions{padding:17px;gap:10px;margin:0}.entrance-actions>.mono{font-size:7px;width:100%}.entrance-score{padding:20px}.stagger-cards{gap:6px}.stagger-cards>span{font-size:8px;gap:9px}.stagger-cards small{font-size:5px}.stagger-cards i{height:13px}.shared-board{grid-template-columns:1fr;padding:20px;gap:20px}.frame-source>.mono{font-size:8px}.frame-source iframe{height:235px}.shared-arrow{transform:rotate(90deg);font-size:22px;justify-self:center}.shared-screens{gap:12px}.shared-screens span{font-size:8px}.source-unreal-map{padding:20px;gap:18px;flex-direction:column;align-items:start}.source-unreal-map>b{transform:rotate(90deg);margin-left:10px}.source-unreal-map strong{font-size:11px}.source-unreal-map span{font-size:7px}.input-preview>#open-routing{right:12px;bottom:12px;padding:9px 11px;font-size:7px}.input-owner{left:10px;bottom:12px;padding:6px;font-size:5px;letter-spacing:.4px}.input-overlay button{right:10px;bottom:12px;font-size:7px;padding:8px 10px}.input-preview.routing-open .input-owner{left:10px;top:8px;font-size:5px}.blueprint-plan{grid-template-columns:1fr;gap:25px;padding:20px}.blueprint-route{grid-template-columns:1fr 20px 1fr;gap:10px}.blueprint-route>span{font-size:8px}.blueprint-route>div{font-size:9px;min-height:70px}.focus-proof{padding:17px;display:block;font-size:8px}.focus-proof>span:last-child{display:block;margin-top:10px;font-size:6px}}
@media print{.motion-actions,.motion-ready,.focus-proof>span:last-child{display:none}.source-hud-tabs{padding:12px}.source-hud-tabs img{max-height:90px}.motion-source iframe{height:290px}.motion-score{padding:20px}.entrance-score{padding:20px}.shared-board{padding:20px}.input-preview{max-height:470px}.source-hud-board>img{max-height:550px}.blueprint-plan{padding:20px;gap:20px}.motion-source-note{font-size:10px}}

/* identity-components.css */
.identity-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#0a0d12}.identity-component{padding:25px;min-width:0;border-bottom:0;border-right:0;display:flex;flex-direction:column}.identity-component .module-label{font-size:8px;margin-bottom:20px}.identity-component .module-label>span{font-size:7px}.identity-type,.identity-items{grid-column:span 2}.identity-type,.identity-vitals,.identity-frame{border-right:0}.identity-prompts,.identity-settings,.identity-frame{border-bottom:0}.identity-sample{display:grid;place-items:center;width:100%;padding:0;border:0;background:#020305;flex:1;min-height:145px}.identity-sample:hover{outline:1px solid #20d9ee66;outline-offset:4px}.identity-sample>img{height:165px;width:100%;object-fit:contain}.identity-navigation .identity-sample>img{height:175px}.identity-meta{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:19px;font:8px/1.6 Consolas,monospace;color:#899db6}.identity-meta button{padding:5px 0;border:0;background:none;font:9px Consolas,monospace;color:var(--cyan);white-space:nowrap}.identity-meta button:hover{color:var(--pink)}.identity-type-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:15px 25px;flex:1;align-items:center}.identity-type-grid figure{margin:0;min-width:0}.identity-type-grid figure:first-child{grid-row:span 2;border-right:1px solid var(--line);padding-right:22px}.identity-type-grid img{width:100%;height:65px;object-fit:contain;object-position:left center}.identity-type-grid figure:first-child img{height:90px}.identity-type-grid figcaption,.identity-card-states figcaption{font:8px Consolas,monospace;color:#8da2b8;margin-top:10px}.identity-card-states{display:grid;grid-template-columns:repeat(3,1fr);gap:27px;max-width:620px;width:100%;margin:0 auto;flex:1}.identity-card-states figure{margin:0;min-width:0}.identity-card-states img{height:165px;width:100%;object-fit:contain}.identity-card-states figcaption{text-align:center;color:#c1cfdf}.identity-vitals .identity-sample img{height:130px}.identity-prompt-pair{display:grid;align-content:center;gap:17px;flex:1;min-height:145px;background:#020305;padding:12px}.identity-prompt-pair img{height:48px;object-fit:contain;width:100%}.identity-prompt-pair img:last-child{height:40px}.identity-settings .identity-sample img{height:135px}.identity-frame iframe{display:block;width:100%;height:145px;border:0;background:#020305;pointer-events:none;flex:1}.identity-connector{display:flex;align-items:center;justify-content:center;gap:25px;padding:25px;color:#859db8;font-size:8px}.identity-connector>b{font-size:21px;color:var(--cyan);font-weight:400}.identity-screen-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:22px;background:#141922;border:1px solid var(--line)}.identity-screen-row button span{font-size:9px}.identity-library+.identity-connector{border-inline:1px solid var(--line);background:#11161e}
@media(max-width:1050px){.identity-component{padding:20px}.identity-component .module-label{flex-wrap:wrap;gap:5px}.identity-meta{flex-wrap:wrap;gap:8px;font-size:7px}.identity-card-states{gap:17px}.identity-card-states img{height:140px}.identity-sample>img,.identity-navigation .identity-sample>img{height:155px}.identity-type-grid{gap:15px}.identity-type-grid figure:first-child{padding-right:15px}.identity-type-grid figure:first-child img{height:75px}.identity-meta button{font-size:8px}.identity-screen-row{gap:12px;padding:18px}}
@media(max-width:700px){.identity-library{grid-template-columns:1fr}.identity-type,.identity-items{grid-column:auto}.identity-component{padding:20px;border-right:0!important;border-bottom:0}.identity-component:last-child{border-bottom:0!important}.identity-component .module-label{font-size:8px;flex-wrap:nowrap}.identity-component .module-label>span{font-size:6px}.identity-navigation .identity-sample>img{height:185px}.identity-meta{font-size:8px;gap:12px}.identity-meta button{font-size:8px}.identity-type-grid{grid-template-columns:1fr 1.2fr;gap:15px}.identity-type-grid figure:first-child img{height:55px}.identity-type-grid img{height:43px}.identity-type-grid figcaption{font-size:7px;line-height:1.5}.identity-card-states{gap:12px}.identity-card-states img{height:100px}.identity-card-states figcaption{font-size:7px}.identity-vitals .identity-sample img{height:115px}.identity-settings .identity-sample img{height:120px}.identity-frame iframe{height:180px}.identity-connector{gap:10px;padding:20px 12px;font-size:6px;letter-spacing:.4px;text-align:center;line-height:1.8}.identity-connector>b{font-size:17px}.identity-screen-row{grid-template-columns:1fr 1fr;padding:15px;gap:12px}.identity-screen-row button span{font-size:8px}}
@media print{#shared-frame .identity-component{padding:14px}#shared-frame .identity-component .module-label{margin-bottom:12px}#shared-frame .identity-sample,#shared-frame .identity-prompt-pair{min-height:90px}#shared-frame .identity-sample img,#shared-frame .identity-card-states img{height:100px}#shared-frame .identity-frame iframe{height:100px}#shared-frame .identity-type-grid img{height:40px}#shared-frame .identity-type-grid figure:first-child img{height:55px}#shared-frame .identity-prompt-pair img{height:30px}#shared-frame .identity-meta{margin-top:12px;font-size:7px}#shared-frame .identity-meta button{display:none}#shared-frame .identity-connector{padding:14px}#shared-frame .identity-screen-row{padding:14px}#shared-frame .identity-screen-row img{max-height:100px}#shared-frame .source-unreal-map{padding:15px}}

/* hud-discovery.css */
.hud-playback-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 22px;border-bottom:1px solid var(--line)}.hud-playback-toolbar .mono{font-size:9px;color:var(--cyan)}.hud-live-stage{position:relative;width:100%;aspect-ratio:1648/928;overflow:hidden;background:#020305}.hud-live-stage iframe{position:absolute;left:0;top:0;width:1648px;height:928px;border:0;transform:scale(var(--hud-scale,1));transform-origin:top left}.hud-print-image{display:none;width:100%}.source-hud-tabs button:disabled,#hud-replay:disabled{opacity:.6;cursor:wait}@media(max-width:700px){.hud-playback-toolbar{padding:12px;gap:12px}.hud-playback-toolbar .mono{font-size:7px;line-height:1.6;letter-spacing:.5px}.hud-playback-toolbar button{font-size:8px;padding:9px 10px;white-space:nowrap}}@media print{.hud-playback-toolbar,.hud-live-stage{display:none}.hud-print-image{display:block;max-height:550px;object-fit:contain}}

/* study-refinements.css */
/* Neutral wireframe placeholders. */
.wf-slot,.wf-detail-placeholder{background-color:#202a34;background-image:linear-gradient(to top right,transparent calc(50% - .6px),#73869888 50%,transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),#73869888 50%,transparent calc(50% + .6px));border:1px solid #728b9e;display:grid;place-items:center}.wire-item>.wf-slot{width:65px;height:60px;max-width:80%;display:block}.wire-item[aria-pressed=true]>.wf-slot{border-color:#bbd0dd}.wf-detail-placeholder{height:205px;width:75%;margin:0 auto 20px;position:relative;z-index:1}.wf-detail-placeholder>span{font:11px Consolas,monospace;letter-spacing:1px;background:#202a34;padding:7px 12px;color:#adc0ce}.wire-workbench[data-layout=list] .wire-item>.wf-slot{height:34px;width:43px;margin-right:12px;flex-shrink:0}.wire-workbench[data-layout=radial] .wire-item>.wf-slot{height:45px;width:50px}.wire-workbench .wire-item{min-height:95px}.wire-workbench[data-layout=list] .wire-item{min-height:48px}
/* Permanent dimensional drawing, not clickable annotations. */
.layout-board{background:#0b1119}.layout-drawing{width:100%;height:auto;display:block}.layout-spec-row{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);background:#151e29}.layout-spec-row>div{padding:23px;border-right:1px solid var(--line)}.layout-spec-row>div:last-child{border:0}.layout-spec-row span,.layout-spec-row small{display:block;font:8px/1.6 Consolas,monospace;color:#8ca5bf}.layout-spec-row span{letter-spacing:1px}.layout-spec-row strong{display:block;font:24px Consolas,monospace;color:#bceff8;margin:9px 0}.padding-breakdown{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:45px;padding:28px}.padding-breakdown>div>.mono{font-size:8px;color:#95a9c2;display:block;margin-bottom:15px}.padding-diagram{position:relative;border:1px solid #7598b1;background:#182432;padding:38px 40px 26px 90px}.pad-top{position:absolute;top:10px;left:50%;font:9px Consolas,monospace;color:var(--cyan)}.pad-left{position:absolute;top:56%;left:12px;font:9px Consolas,monospace;color:var(--cyan)}.padding-content{border:1px dashed #7296b188;padding:12px 15px;background:#121a25}.padding-content>strong{font:18px Consolas,monospace;letter-spacing:2px;color:#d2deea}.pad-between{display:block;font:8px Consolas,monospace;color:var(--cyan);margin:8px 0}.padding-content p{font-size:11px;color:#94adc5;margin:0}.padding-breakdown>p{font-size:13px;line-height:1.8;color:var(--muted);max-width:430px;margin:0}
/* Source-based design-system documentation. */
.accurate-system{background:#0b0f15}.source-token-bar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;padding:27px;border-bottom:0}.source-token-bar i{display:block;height:62px;background:var(--token);border:1px solid #ffffff26;margin-bottom:12px}.source-token-bar strong{display:block;font-size:10px;font-weight:400;min-height:30px;color:#d6dce5;line-height:1.4}.source-token-bar code{font-size:9px;color:#7e95ae}.system-foundations{display:grid;grid-template-columns:1.15fr 1fr;border-bottom:0}.system-foundations>article{padding:28px;min-width:0}.system-foundations>article:first-child{border-right:0}.system-foundations .module-label{font-size:8px}.source-type-row{padding:0 0 17px;margin-bottom:18px;border-bottom:0;font-family:'Arial Narrow','Roboto Condensed','Helvetica Neue',Arial,sans-serif}.source-type-row strong,.source-type-row p{display:block;margin:0 0 10px;line-height:1.15}.source-type-row>span{display:block;font:8px Consolas,monospace;color:#839bb6;letter-spacing:.3px}.type-screen>strong{font-size:clamp(28px,3.2vw,50px);letter-spacing:.22em;color:#eef2f5;font-weight:700}.type-item-source>strong{font-size:clamp(19px,2.15vw,34px);letter-spacing:.2em;color:#f2f5f7;font-weight:700}.type-description>p{font-size:19px;line-height:1.55;letter-spacing:.03em;color:#c8d0d7}.type-caption-source>strong{font-size:14px;letter-spacing:.16em;color:#ff2f7f;font-weight:400}.system-footnote{font-size:10px;color:#7f93ac;line-height:1.7;margin:0}.geometry-card{position:relative;width:228px;height:202px;background:#121a25;border:1px solid #748da8;display:grid;grid-template-rows:1fr 40px;margin:40px auto 30px}.geometry-object{margin:10px 10px 0;border:1px solid #69839e55;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#131d28 0 8px,#172331 8px 9px)}.geometry-object span{font:9px Consolas,monospace;color:#859eba;letter-spacing:1px}.geometry-label{display:grid;place-items:center;margin:0 10px;border-top:0;font:9px Consolas,monospace;color:#c0d3e7}.geo-width{position:absolute;top:-24px;left:0;right:0;text-align:center;font:9px Consolas,monospace;color:var(--cyan)}.geo-height{position:absolute;right:-48px;top:45%;writing-mode:vertical-rl;font:9px Consolas,monospace;color:var(--cyan)}.geo-corner{position:absolute;bottom:-27px;left:0;right:0;text-align:center;font:9px Consolas,monospace;color:#df94b5}.geometry-card:before,.geometry-card:after{content:'';position:absolute;width:14px;height:14px;border-color:var(--pink);border-style:solid}.geometry-card:before{left:-1px;top:-1px;border-width:2px 0 0 2px}.geometry-card:after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}.geometry-details{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:45px;text-align:center}.geometry-details strong{display:block;font:23px Consolas,monospace;color:#a7d9ea}.geometry-details span{display:block;font:8px/1.6 Consolas,monospace;color:#8aa0ba;margin-top:8px}.source-state-spec{padding:28px;border-bottom:0}.source-state-spec .module-label{font-size:8px}.state-spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.state-spec-grid article{min-width:0}.state-spec-grid img{width:100%;height:150px;object-fit:contain;margin-bottom:15px}.state-spec-grid h3{font-size:15px;font-weight:400;margin:0 0 15px;color:#d1dce8}.state-spec-grid dl{display:grid;grid-template-columns:65px 1fr;gap:8px 10px;font:9px/1.5 Consolas,monospace;margin:0}.state-spec-grid dt{color:#708ba7}.state-spec-grid dd{margin:0;color:#bdccdd;overflow-wrap:anywhere}.system-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:25px 28px}.system-rules span{font:8px Consolas,monospace;color:#758eaa;letter-spacing:1px}.system-rules strong{display:block;font-size:15px;font-weight:400;color:#c5d9ed;margin:9px 0}.system-rules p{font-size:11px;color:#899eb8;line-height:1.6;margin:0}
/* Clear Unreal implementation sequence and visibly interactive viewports. */
.ue-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:28px;background:#131922}.ue-explainer>article{min-width:0}.ue-step{font:8px Consolas,monospace;color:#9bb9d8;letter-spacing:1px}.ue-explainer h3{font-size:19px;font-weight:400;line-height:1.3;margin:12px 0 20px}.ue-explainer p{font-size:11px;color:#92a7bf;line-height:1.7;margin:18px 0 0}.ue-widget-mini{display:flex;align-items:center;gap:14px;min-height:155px;border:1px solid #475b73;background:#0c121c;padding:15px}.ue-widget-mini img{width:90px;height:120px;object-fit:contain}.ue-widget-mini>div{min-width:0}.ue-widget-mini code{font-size:11px;display:block;color:var(--cyan);margin-bottom:14px}.ue-widget-mini span{display:block;font:9px/1.8 Consolas,monospace;color:#8ea9c3;overflow-wrap:anywhere}.ue-event-stack{border:1px solid #475b73;background:#0c121c;padding:13px;display:flex;flex-direction:column;align-items:center;min-height:155px}.ue-event-stack span{font:10px Consolas,monospace;color:#a2c5e5;border:1px solid #536981;padding:7px 12px;width:100%;text-align:center}.ue-event-stack>b{color:var(--cyan);line-height:1.1;font-weight:400;font-size:15px}.ue-layout-mini{position:relative;min-height:155px;background:#0c121c;border:1px solid #475b73;padding:35px 20px 20px;text-align:center}.ue-layout-mini>div{border:1px dashed #54778d;color:#a2c5e5;font:11px Consolas,monospace;padding:20px 6px}.ue-layout-mini>span{display:block;font:8px Consolas,monospace;color:#738fa9;margin-top:12px}.ue-anchor{position:absolute;width:8px;height:8px;border:1px solid var(--cyan);top:13px;left:13px}.ue-anchor.a2{left:auto;right:13px}.ue-anchor.a3{top:auto;bottom:13px}.ue-implementation-note{display:flex;align-items:center;gap:25px;padding:19px 28px;border-block:1px solid var(--line);background:#101720}.ue-implementation-note>span{font:8px/1.6 Consolas,monospace;letter-spacing:1px;color:#d5a4be;min-width:145px}.ue-implementation-note p{font-size:11px;color:#8da3bd;margin:0;line-height:1.7}.ue-implementation-note a{font-size:9px;white-space:nowrap;color:var(--cyan)}.viewport-picker{padding:28px;background:#191e27}.viewport-picker>.eyebrow,.viewport-picker .eyebrow{font-size:8px;margin-bottom:8px;color:var(--cyan)}.viewport-picker h3{font-size:20px;font-weight:400;margin:0 0 22px}.viewport-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.viewport-options button{position:relative;display:grid;grid-template-columns:75px 1fr;align-items:center;gap:5px 18px;border:1px solid #596678;background:#111721;padding:19px 22px;text-align:left;transition:background .15s,border-color .15s,transform .15s}.viewport-options button:hover{transform:translateY(-3px);background:#223244;border-color:var(--cyan)}.viewport-options button[aria-pressed=true]{border:2px solid var(--cyan);background:#20d9ee12;box-shadow:0 0 22px #20d9ee09;padding:18px 21px}.viewport-options button strong{font:26px Consolas,monospace;color:#d7eaf6}.viewport-options button span{font:9px Consolas,monospace;color:#93adc7}.viewport-options button small{grid-column:1/-1;font:9px Consolas,monospace;color:var(--cyan);margin-top:10px}.ratio-icon{grid-row:span 2;display:block;border:2px solid #8ea8be;border-bottom-width:4px;width:60px;height:34px;justify-self:center}.ratio-ultra{width:70px;height:30px}.ratio-compact{width:48px;height:36px}.viewport-options button[aria-pressed=true] .ratio-icon{border-color:var(--cyan);background:#20d9ee12}.viewport-status{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;gap:20px;border-top:1px solid var(--line)}.viewport-status .mono{font-size:9px;color:var(--cyan)}.viewport-status button{font-size:9px}
/* Two compact motion examples, one section. */
.compact-motion-board{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#10151d}.compact-motion-card{padding:22px;min-width:0}.compact-motion-card:first-child{border-right:0}.compact-motion-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.compact-motion-title h3{font-size:16px;font-weight:400;margin:0}.compact-motion-title>span{font:8px Consolas,monospace;color:#7894ad}.compact-motion-preview{height:185px;display:flex;justify-content:center;align-items:center;background:#020305;border:1px solid #263648;overflow:hidden;margin-bottom:16px}.compact-motion-preview iframe{display:block;border:0;height:100%;width:100%;pointer-events:none}.selection-preview iframe{width:210px}.compact-motion-card .motion-actions{margin-bottom:0;gap:9px}.compact-motion-card .motion-actions button{font-size:8px;padding:8px 11px}.compact-motion-card .motion-actions label{font-size:7px}.compact-motion-card .motion-actions select{font-size:9px;padding:4px}.compact-motion-card .scrub-label{font-size:8px;margin-top:14px;gap:9px}.compact-motion-card .motion-ready{font-size:7px;display:block;margin-top:10px}.compact-motion-card .motion-actions{padding:0}
@media(max-width:1050px){.source-token-bar{gap:10px;padding:22px}.source-token-bar strong{font-size:9px;min-height:32px}.source-token-bar code{font-size:8px}.layout-spec-row>div{padding:18px}.layout-spec-row strong{font-size:22px}.layout-spec-row span{font-size:7px}.padding-breakdown{gap:25px;padding:23px}.system-foundations>article{padding:22px}.type-screen>strong{font-size:32px}.type-item-source>strong{font-size:22px}.geometry-card{margin-top:35px}.geo-height{right:-30px}.state-spec-grid{gap:20px}.state-spec-grid dl{grid-template-columns:55px 1fr;font-size:8px}.ue-explainer{gap:18px;padding:22px}.ue-explainer h3{font-size:17px}.ue-widget-mini{padding:10px;gap:10px}.ue-widget-mini img{width:65px}.ue-widget-mini code{font-size:9px}.ue-widget-mini span{font-size:8px}.ue-event-stack span{font-size:8px}.viewport-options button{grid-template-columns:55px 1fr;padding:16px;gap:5px 14px}.viewport-options button[aria-pressed=true]{padding:15px}.ratio-icon{width:48px;height:27px}.ratio-ultra{width:55px;height:24px}.ratio-compact{width:36px;height:27px}.viewport-options button strong{font-size:24px}.viewport-options button span{font-size:8px}.compact-motion-title{display:block}.compact-motion-title h3{margin-bottom:5px}.compact-motion-preview{height:165px}.layout-drawing{min-width:0}}
@media(max-width:700px){.wire-item>.wf-slot{width:45px;height:42px}.wire-workbench .wire-item{min-height:77px}.wf-detail-placeholder{width:100%;height:130px;margin:0}.wf-detail-placeholder>span{font-size:8px;padding:5px}.wire-workbench[data-layout=radial] .wire-item>.wf-slot{width:34px;height:32px}.layout-spec-row{grid-template-columns:1fr 1fr}.layout-spec-row>div{padding:16px;border-bottom:1px solid var(--line)}.layout-spec-row>div:nth-child(2){border-right:0}.layout-spec-row>div:last-child{border-bottom:1px solid var(--line)}.layout-spec-row strong{font-size:21px}.layout-spec-row small{font-size:7px}.padding-breakdown{grid-template-columns:1fr;gap:20px;padding:20px}.padding-diagram{padding:35px 15px 20px 65px}.pad-left{font-size:7px;left:8px}.padding-content{padding:10px}.padding-content>strong{font-size:14px;letter-spacing:1px}.padding-content p{font-size:9px}.padding-breakdown>p{font-size:11px}.source-token-bar{grid-template-columns:repeat(4,minmax(0,1fr));padding:18px;gap:16px 12px}.source-token-bar i{height:47px;margin-bottom:8px}.source-token-bar strong{font-size:8px;min-height:26px}.source-token-bar code{font-size:7px}.system-foundations{grid-template-columns:1fr}.system-foundations>article{padding:20px}.system-foundations>article:first-child{border-right:0;border-bottom:0}.type-screen>strong{font-size:29px;letter-spacing:.16em}.type-item-source>strong{font-size:21px;letter-spacing:.15em}.type-description>p{font-size:17px}.source-type-row>span{font-size:7px}.geometry-card{width:210px;height:187px;margin-top:35px}.geo-height{right:-28px}.geometry-details{margin-top:44px;gap:10px}.geometry-details strong{font-size:21px}.geometry-details span{font-size:7px}.source-state-spec{padding:20px}.state-spec-grid{gap:12px}.state-spec-grid img{height:88px}.state-spec-grid h3{font-size:12px}.state-spec-grid dl{display:block;font-size:7px}.state-spec-grid dt{margin-top:10px}.state-spec-grid dd{margin-top:3px;line-height:1.6}.system-rules{grid-template-columns:1fr;padding:20px;gap:22px}.system-rules p{font-size:10px}.ue-explainer{grid-template-columns:1fr;padding:20px;gap:25px}.ue-step{font-size:8px}.ue-explainer h3{font-size:19px;margin-bottom:15px}.ue-widget-mini{padding:15px;gap:22px;min-height:130px}.ue-widget-mini img{width:90px;height:100px}.ue-widget-mini code{font-size:11px}.ue-widget-mini span{font-size:10px}.ue-event-stack span{font-size:10px}.ue-implementation-note{padding:20px;gap:12px;display:block}.ue-implementation-note>span{font-size:7px}.ue-implementation-note p{font-size:10px;margin:10px 0}.ue-implementation-note a{font-size:9px}.viewport-picker{padding:20px 15px}.viewport-picker h3{font-size:17px;line-height:1.4;margin-bottom:17px}.viewport-options{gap:9px}.viewport-options button,.viewport-options button[aria-pressed=true]{display:flex;flex-direction:column;gap:7px;padding:13px 5px;text-align:center;min-width:0}.viewport-options button[aria-pressed=true]{padding:12px 4px}.viewport-options button strong{font-size:23px}.viewport-options button span{font-size:7px}.viewport-options button small{font-size:6px;line-height:1.6;margin-top:3px}.ratio-icon{width:37px;height:23px;margin-bottom:4px}.ratio-ultra{width:43px;height:19px;margin-top:4px}.ratio-compact{width:29px;height:23px}.viewport-status{padding:13px 15px;gap:10px;flex-wrap:wrap}.viewport-status .mono{font-size:7px}.viewport-status button{font-size:7px;padding:8px 10px}.compact-motion-board{grid-template-columns:1fr}.compact-motion-card{padding:18px}.compact-motion-card:first-child{border-right:0;border-bottom:0}.compact-motion-title{display:flex;gap:12px}.compact-motion-title h3{font-size:14px;margin:0}.compact-motion-title>span{font-size:6px;line-height:1.6;max-width:130px;text-align:right}.compact-motion-preview{height:160px}.selection-preview iframe{width:178px}.compact-motion-card .motion-actions button{font-size:8px}.compact-motion-card .motion-actions label{font-size:7px}.compact-motion-card .scrub-label{font-size:7px}}
@media print{.layout-drawing{max-height:650px}.layout-spec-row>div{padding:15px}.padding-breakdown{padding:20px}.source-token-bar{padding:15px}.source-token-bar i{height:40px}.system-foundations>article{padding:20px}.source-type-row{padding-bottom:10px;margin-bottom:10px}.type-screen>strong{font-size:34px}.type-item-source>strong{font-size:24px}.geometry-card{margin-top:25px;margin-bottom:20px;height:160px;width:180px}.geometry-details{margin-top:25px}.state-spec-grid img{height:95px}.source-state-spec{padding:20px}.system-rules{padding:20px}.viewport-picker{padding:20px}.viewport-picker h3{font-size:17px;margin-bottom:15px}.viewport-options button{padding:10px}.viewport-options button[aria-pressed=true]{padding:9px}.viewport-status{display:none}.viewport-options button small{display:none}.ue-explainer{padding:20px}.ue-explainer p{font-size:10px}.compact-motion-card .motion-actions{display:none}.compact-motion-card{padding:20px}.compact-motion-preview{height:190px}.identity-screen-row{display:none}}

@media print{#handoff .runtime-canvas{width:54%}#system .accurate-system{zoom:.88}}

/* study-interactions.css */
.layout-choice-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.layout-choice-heading strong{font-size:18px;font-weight:400}.layout-choice-heading span{color:var(--cyan);font:12px Consolas,monospace}.wire-option{border-radius:8px;border:1px solid #607283;box-shadow:0 5px 0 #05080c;transition:transform .15s,border-color .15s;cursor:pointer}.wire-option:hover{transform:translateY(-3px);border-color:var(--cyan)}.wire-option:focus-visible,.viewport-options button:focus-visible{outline:3px solid white;outline-offset:4px}.choice-action{display:block;background:#20d9ee;color:#02151d;padding:10px 14px;font:12px Consolas,monospace;text-align:center;margin:16px 0 12px;border-radius:3px}.wire-option[aria-pressed=true] .choice-action{background:#cfedf1}.wire-option[aria-pressed=true] .choice-action:before{content:'✓ ';}.viewport-options button{border-radius:8px;box-shadow:0 5px 0 #05080c;cursor:pointer}.viewport-options button small{background:#20d9ee;color:#02151d;padding:8px 12px;border-radius:3px;font-size:11px}.comparison-heading{margin:32px 0 16px;display:flex;justify-content:space-between;gap:20px;align-items:center}.comparison-heading h3{font-size:22px;font-weight:400;margin:0}.comparison-heading p{font-size:12px;color:var(--cyan);margin:0}.restored-compare{position:relative;aspect-ratio:1648/928;overflow:hidden;border:1px solid #596b7b;background:#18232d;touch-action:pan-y}.restored-compare>svg,.restored-compare>.comparison-final{position:absolute;inset:0;width:100%;height:100%;display:block}.comparison-final{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}.compare-label{position:absolute;top:16px;padding:8px 12px;background:#081119df;color:#c8e8f2;font:10px Consolas,monospace;letter-spacing:1px;pointer-events:none}.compare-label.left{left:16px}.compare-label.right{right:16px}.compare-divider{position:absolute;top:0;bottom:0;left:var(--reveal);width:2px;background:#20d9ee;pointer-events:none}.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid #bdfaff;background:#07333b;color:white;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:27px;box-shadow:0 0 24px #20d9ee55}.restored-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.restored-compare:focus-within{outline:3px solid #20d9ee;outline-offset:4px}.merged-heading{margin:35px 0 20px}.merged-heading h3{font-size:25px;font-weight:400;margin:10px 0}.hud-input-plan{display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;border:1px solid var(--line);background:#101720;padding:25px;margin-top:25px}.hud-input-plan h3{font-size:20px;line-height:1.3;margin:10px 0;font-weight:400}.hud-input-plan p{font-size:11px;color:var(--muted);line-height:1.6}.hud-event{border-left:2px solid var(--cyan);padding:12px 0 12px 20px;display:flex;flex-direction:column;justify-content:center;gap:12px}.hud-event b{font:11px Consolas,monospace;color:var(--cyan)}.hud-event span{font-size:14px;line-height:1.6}.hud-event small{font-size:10px;color:var(--muted);line-height:1.7}.source-hud-tabs img{display:none}.source-hud-tabs button{padding:13px;cursor:pointer}.source-hud-tabs button:after{content:'Show state →';display:block;margin:12px 8px 3px;color:var(--cyan);font:10px Consolas,monospace}.source-hud-tabs button[aria-pressed=true]:after{content:'✓ Current state'}.source-hud-tabs{gap:12px;padding:16px}.source-hud-tabs strong{font-size:12px}.source-hud-tabs span{margin-top:0}
@media(max-width:700px){.hud-input-plan{grid-template-columns:1fr;padding:20px;gap:15px}.hud-event span{font-size:12px}.layout-choice-heading,.comparison-heading{align-items:start;flex-direction:column;gap:10px}.choice-action{font-size:10px;padding:9px}.comparison-heading h3{font-size:20px}.compare-label{top:8px;padding:5px;font-size:7px}.compare-label.left{left:8px}.compare-label.right{right:8px}.compare-divider span{width:34px;height:34px;font-size:21px}.source-hud-tabs{gap:7px;padding:10px}.source-hud-tabs button{padding:6px}.source-hud-tabs strong{font-size:9px}.source-hud-tabs button:after{font-size:7px;margin:9px 4px 3px}.viewport-options button small{font-size:8px;padding:6px 4px}.merged-heading h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.wire-option{transition:none}}@media print{.hud-input-plan{break-inside:avoid}.restored-compare input{display:none}.merged-heading{break-before:page}}

/* wireframe-layout.css */
/* Low-fidelity layout studies in muted neutral gray. */
.wire-workbench{background:#303236;border-color:#68717c;color:#c3c5c8}.wire-workbench .workbench-top{background:#27292d;color:#b7bbc0;border-color:#5e6773}.wire-canvas{background:#303236;background-image:none;color:#c0c3c7}.wire-screen-title{font-family:Consolas,monospace;font-size:25px;font-weight:400;letter-spacing:2px;color:#d0d2d5}.wire-screen-title span{color:#999fa7}.wire-workbench .wire-item{background:transparent;border:1px solid #777f89;border-radius:2px;box-shadow:none;color:#b9bec5}.wire-workbench .wire-item[aria-pressed=true]{background:#45494e;border:2px solid #bbc0c7;box-shadow:none;color:#e1e3e6}.wire-workbench .wire-item[aria-pressed=true]:before,.wire-workbench .wire-item[aria-pressed=true]:after{display:none}.wire-workbench .wire-item:hover:not(:disabled){background:#3c4045;border-color:#a1a8b1}.wire-workbench .wire-item:focus-visible{outline:2px dashed #c3c8ce;outline-offset:4px}.wire-workbench .wire-item span{color:inherit;font-family:Consolas,monospace}.wire-workbench .wire-item.locked{border-style:dashed;color:#8a9098;background:transparent;opacity:.7}.wire-workbench .wf-slot,.wire-workbench .wf-detail-placeholder{background-color:transparent;border-color:#737d89;background-image:linear-gradient(to top right,transparent calc(50% - .6px),#747b85 50%,transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),#747b85 50%,transparent calc(50% + .6px));box-shadow:none}.wire-workbench .wire-item[aria-pressed=true]>.wf-slot{border-color:#b1b7bf}.wf-detail-placeholder>span{background:#303236;color:#bbc0c7}.wire-detail-copy{border:1px solid #737d89;background:transparent;color:#b6bcc4}.wire-detail-copy .mono{color:#a2a9b3}.wire-detail-copy h3{font-family:Consolas,monospace;font-size:20px;color:#c8cdd3;letter-spacing:1px;font-weight:400}.wire-detail-copy p{color:transparent!important;font-size:0;position:relative;height:28px;background:linear-gradient(#858d97,#858d97) left top/83% 5px no-repeat,linear-gradient(#646d77,#646d77) left 13px/62% 5px no-repeat}.wire-bottom,.wire-bottom span{color:#a4acb6!important}.wire-workbench[data-layout=radial] .wire-item-grid:before,.wire-workbench[data-layout=radial] .wire-item-grid:after{border-color:#737d89;color:#a2a9b3}.mini-wire{background:#303236;background-image:none;border:1px solid #69727e}.mini-title,.mini-copy:before,.mini-copy:after{background:#8c939e}.mini-cells i,.mini-rows i,.mini-wheel i{background:transparent!important;border-color:#8b94a0!important}.mini-cells i:nth-child(3),.mini-rows i:nth-child(2),.mini-wheel i:first-child{background:#51575f!important;border-color:#b2b9c2!important}.mini-preview{border-color:#8994a2;color:#a5aeb9}.mini-copy{border-color:#838e9b}.mini-wheel{border-color:#8c97a5;color:#a5aeb9}.mini-wheel span{color:#a5aeb9}
.measured-compare{aspect-ratio:1648/1018;background:#111b25}.comparison-viewport{position:absolute;left:0;right:0;top:8.840864%;bottom:0;overflow:hidden}.comparison-viewport>svg,.comparison-viewport>.comparison-final{position:absolute;inset:0;width:100%;height:100%;display:block}.measured-compare>.compare-measurements{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.comparison-viewport .compare-label{top:auto;bottom:12px;z-index:2}.comparison-viewport .compare-divider{z-index:3}.comparison-viewport input{z-index:4}.comparison-specs{border:1px solid var(--line);border-top:0}.comparison-specs .layout-spec-row{border-top:0}.comparison-heading{margin-top:40px}.comparison-heading p{max-width:320px;line-height:1.6}.comparison-specs .padding-breakdown{background:#0b1119}
.wire-workbench .workbench-top span{color:#b8bec6}.compare-measurements text{paint-order:stroke;stroke:#0b1520;stroke-width:2px;stroke-linejoin:round}
@media(max-width:700px){.wire-screen-title{font-size:19px}.wire-detail-copy h3{font-size:16px}.comparison-viewport .compare-label{bottom:5px}.comparison-specs .padding-breakdown{gap:20px}}

.measured-compare>.compare-measurements{clip-path:inset(0 0 0 var(--reveal))}

.wire-option.static-wire-option,.wire-option.static-wire-option:hover{cursor:default;transform:none;box-shadow:none;border:1px solid #48515d;border-radius:2px;transition:none}.static-wire-option .option-caption{display:block;margin-top:16px}.static-wire-option .option-name{color:#d0d5dc}

}
.interface-studies { margin: 0; padding-top: 35px; padding-bottom: 70px; }
.interface-studies > .section-heading { max-width: 1440px; width: 92%; margin: 0 auto 30px; }
.interface-studies .collection { padding-bottom: 0; }
.interface-studies .study { scroll-margin-top: 85px; }
@media (max-width: 700px) { .interface-studies .study-nav { justify-content: flex-start; } }

/* The single design system combines live specimens with source specifications. */
.unified-design-system .study { padding-top: 25px; }
.unified-design-system .state-spec-grid iframe { display: block; width: 100%; max-width: 260px; height: 234px; margin: auto; border: 0; pointer-events: none; }
.unified-design-system .identity-component { border-right:0; border-bottom:0; }
.unified-design-system .identity-component:nth-child(3n) { border-right: 0; }
.unified-design-system .identity-component:nth-last-child(-n+3) { border-bottom: 0; }
.unified-design-system .identity-brand img { max-width: 300px; }
@media (max-width: 900px) {
  .unified-design-system .identity-library { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unified-design-system .identity-component { border-right:0; border-bottom:0; }
  .unified-design-system .identity-component:nth-child(3n) { border-right:0; }
  .unified-design-system .identity-component:nth-child(2n) { border-right: 0; }
  .unified-design-system .identity-component:nth-last-child(3) { border-bottom:0; }
}
@media (max-width: 600px) {
  .unified-design-system .identity-library { grid-template-columns: 1fr; }
  .unified-design-system .identity-component:nth-child(n) { border-right: 0; border-bottom:0; }
  .unified-design-system .identity-component:last-child { border-bottom: 0; }
}

/* Give the animations the space; keep playback in one quiet row. */
#selection-motion .compact-motion-board { grid-template-columns: minmax(0,1fr) minmax(0,2.2fr); gap: 20px; border: 0; background: transparent; }
#selection-motion .compact-motion-card { padding: 0; border: 0; }
#selection-motion .compact-motion-title { margin-bottom: 12px; }
#selection-motion .compact-motion-title h3 { margin: 0; font-size: 14px; }
#selection-motion .compact-motion-preview { height: clamp(280px,30vw,460px); margin: 0; border-color: #263648; }
#selection-motion .compact-motion-preview iframe { width: 100%; height: 100%; }
#selection-motion .motion-controls { display: flex; align-items: center; gap: 4px; padding-top: 8px; }
#selection-motion .motion-icon-button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; background: transparent; color: #b5c7d4; border-radius: 4px; }
#selection-motion .motion-icon-button:hover { color: #20d9ee; background: #20d9ee0d; }
#selection-motion .motion-controls input { min-width: 0; width: 100%; height: 32px; margin: 0 4px 0 10px; accent-color: #20d9ee; cursor: pointer; }
@media(max-width: 700px) {
  #selection-motion .compact-motion-board { grid-template-columns: 1fr; gap: 28px; }
  #selection-motion .selection-preview { height: 300px; }
  #selection-motion .entrance-preview { height: auto; aspect-ratio: 1648 / 928; }
}

/* Live source components, isolated in their own documents. */
#design-system .live-component-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#design-system .live-component{min-width:0;padding:20px;border:1px solid #32353c;background:#020305}
#design-system .component-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
#design-system .component-heading h4{font-size:16px;font-weight:400;margin:0}
#design-system .component-heading button{border:0;padding:8px 0;background:none;color:#8ea4b4;font-size:11px;cursor:pointer;text-align:right}
#design-system .component-heading button:hover{color:#20d9ee}
#design-system .live-component iframe{display:block;width:100%;height:300px;border:0;background:#020305}
#design-system .live-component-2 iframe{height:350px}
#design-system .live-component-5{grid-column:1/-1}
#design-system .live-component-5 iframe{height:210px;pointer-events:none}
#wireframes .layout-wireframes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#wireframes .layout-wireframes figure{margin:0;min-width:0}
#wireframes .layout-wireframes figcaption{font-size:14px;color:#c8d0d7;margin-bottom:12px}
#wireframes .layout-wireframes svg{display:block;width:100%;height:auto;border:1px solid #999a98}
#wireframes .live-wire-compare{aspect-ratio:1648/928;background:#f1f0ec;border-color:#999a98}
#wireframes .comparison-final{border:0;pointer-events:none}
#wireframes .layout-note{color:#8ea4b4;font-size:11px;margin:14px 0 0}
@media(max-width:700px){
 #design-system .live-component-library,#wireframes .layout-wireframes{grid-template-columns:1fr}
 #design-system .live-component{padding:12px}
 #design-system .component-heading{gap:10px}
 #design-system .component-heading h4{font-size:14px}
 #design-system .component-heading button{font-size:10px}
 #design-system .live-component iframe{height:250px}
 #design-system .live-component-2 iframe{height:240px}
 #design-system .live-component-4 iframe{height:290px}
 #design-system .live-component-5 iframe{height:160px}
}

/* Decision notes keep the exploration grounded without adding another text block. */
#wireframes .layout-wireframes figure { display: flex; flex-direction: column; }
#wireframes .layout-wireframes figure figcaption { order: 1; }
#wireframes .layout-wireframes figure svg { order: 2; }
#wireframes .layout-wireframes figure::after { order: 3; display: block; margin-top: 10px; color: #8996a3; font-size: 11px; line-height: 1.45; }
#wireframes .layout-wireframes figure:nth-child(1)::after { content: "Chosen: keeps several items visible at once and preserves a steady scan path for quick browsing and comparison."; }
#wireframes .layout-wireframes figure:nth-child(2)::after { content: "Not chosen: gives each item more room for text, but hides more of the inventory and slows visual comparison."; }
#wireframes .layout-wireframes figure:nth-child(3)::after { content: "Not chosen: feels expressive, but adds travel between items and makes order, details, and keyboard navigation less clear."; }
#wireframes .layout-wireframes figure::before { order: 4; }

#selection-motion .motion-play-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; min-height: 44px; padding: 0 13px; border: 1px solid #20d9ee66; border-radius: 4px; background: #20d9ee12; color: #bdfaff; font-size: 12px; cursor: pointer; }
#selection-motion .motion-play-button:hover { background: #20d9ee25; border-color: #20d9ee; }

/* Compact foundations and live component overview. */
#design-system{padding-top:24px;padding-bottom:36px}
#design-system .study{padding-top:0}
#design-system .study-heading{margin-bottom:22px}
#design-system .compact-foundations{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:20px;border:1px solid #32353c;background:#11151a}
#design-system .compact-foundations h3{margin:0 0 15px;font-size:13px;font-weight:400;color:#9ba6b2}
#design-system .compact-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
#design-system .compact-palette i{display:block;height:35px;border:1px solid #ffffff15;margin-bottom:10px}
#design-system .compact-palette span,#design-system .compact-palette code{display:block;font-size:10px;line-height:1.7;color:#c8d0d7}
#design-system .compact-palette code{font-size:9px;color:#82909f}
#design-system .foundation-type .chromatic-heading{display:block;font-size:27px;line-height:1.2;letter-spacing:.16em;margin-bottom:12px}
#design-system .compact-item-type{display:block;font-size:15px;letter-spacing:.12em;font-weight:700;margin-bottom:9px}
#design-system .foundation-type p{font-size:12px;color:#c8d0d7;margin:0}
#design-system .merged-heading{margin:24px 0 14px}
#design-system .merged-heading h3{font-size:19px;margin:0}
#design-system .live-component-library{gap:14px}
#design-system .live-component{padding:12px}
#design-system .component-heading{margin-bottom:8px;gap:12px}
#design-system .component-heading h4{font-size:13px}
#design-system .component-heading button{font-size:10px;padding:4px 0}
#design-system .live-component iframe{height:220px}
#design-system .live-component-4 iframe{height:280px}
#wireframes .layout-wireframes svg,#wireframes .live-wire-compare{background:#20242a;border-color:#454e59}
@media(max-width:700px){
 #design-system .compact-foundations{grid-template-columns:1fr;gap:22px;padding:16px}
 #design-system .compact-palette{gap:8px}
 #design-system .compact-palette span{font-size:9px}
 #design-system .compact-palette code{font-size:8px}
 #design-system .foundation-type .chromatic-heading{font-size:24px}
 #design-system .live-component iframe{height:185px}
 #design-system .live-component-4 iframe{height:280px}
}

.handoff-intro { max-width: 520px; margin: 12px 0 0; color: #aeb8c2; font-size: 14px; line-height: 1.6; }
#handoff .ue-explainer h3 { font-size: 20px; }
#handoff .ue-step { color: var(--cyan); }
#handoff .ue-implementation-note p { max-width: 620px; font-size: 13px; line-height: 1.6; }
@media (max-width: 700px) { .handoff-intro { font-size: 13px; } }

/* Dense design-system presentation: all source details remain, with less empty space. */
#design-system .accurate-system { font-size: 12px; }
#design-system .source-token-bar { gap: 9px; padding: 16px 18px; }
#design-system .source-token-bar i { height: 42px; margin-bottom: 7px; }
#design-system .source-token-bar strong { min-height: 22px; font-size: 9px; }
#design-system .source-token-bar code { font-size: 8px; }
#design-system .system-foundations>article { padding: 18px; }
#design-system .system-foundations .source-type-row { padding-bottom: 10px; margin-bottom: 11px; }
#design-system .system-foundations .system-footnote { font-size: 9px; line-height: 1.4; }
#design-system .source-state-spec { padding: 18px; }
#design-system .state-spec-grid { gap: 18px; }
#design-system .state-spec-grid article { display: grid; grid-template-columns: 110px 1fr; column-gap: 14px; align-items: start; }
#design-system .state-spec-grid article img { grid-row: span 2; width: 110px; height: 92px; margin: 0; }
#design-system .state-spec-grid article h3 { margin: 0 0 8px; font-size: 13px; }
#design-system .state-spec-grid article dl { margin: 0; font-size: 9px; }
#design-system .state-spec-grid article dt,#design-system .state-spec-grid article dd { display: inline; }
#design-system .state-spec-grid article dt::after { content: ': '; }
#design-system .state-spec-grid article dd { margin: 0 8px 0 0; color: #8799aa; }
#design-system .system-rules { gap: 18px; padding: 16px 18px; }
#design-system .system-rules strong { font-size: 13px; margin: 5px 0; }
#design-system .system-rules p { font-size: 9px; line-height: 1.45; }
#design-system .caption { padding-top: 8px; font-size: 10px; }

/* Reusable components as a specimen sheet, rather than screen panels. */
#design-system .merged-heading { margin: 22px 0 12px; }
#design-system .merged-heading h3 { font-size: 18px; }
#design-system .live-component-library { counter-reset: specimen; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 10px; border: 1px solid #32353c; background: #0b0f15; }
#design-system .live-component { counter-increment: specimen; display: flex; flex-direction: column; min-width: 0; padding: 10px; border: 1px solid #303944; background: #111820; }
#design-system .live-component::before { content: '0' counter(specimen) ' / LIVE COMPONENT'; display: block; margin-bottom: 8px; color: #20d9ee; font: 8px Consolas,monospace; letter-spacing: .7px; }
#design-system .component-heading { margin: 0 0 8px; align-items: baseline; }
#design-system .component-heading h4 { font-size: 12px; }
#design-system .component-heading button { font-size: 8px; }
#design-system .live-component iframe { height: 160px; border: 1px solid #273441; }
#design-system .live-component-2 iframe { height: 190px; }
#design-system .live-component-4 iframe { height: 210px; }
@media(max-width: 980px) { #design-system .live-component-library { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 700px) {
 #design-system .source-token-bar { grid-template-columns: repeat(5,minmax(0,1fr)); }
 #design-system .system-foundations { grid-template-columns: 1fr; }
 #design-system .system-foundations>article:first-child { border-right: 0; border-bottom:0; }
 #design-system .state-spec-grid article { grid-template-columns: 85px 1fr; }
 #design-system .state-spec-grid article img { width: 85px; height: 76px; }
 #design-system .live-component-library { grid-template-columns: 1fr; padding: 8px; }
 #design-system .live-component iframe,#design-system .live-component-2 iframe,#design-system .live-component-4 iframe { height: 190px; }
}

/* Component inventory sheet: each tile isolates one live reusable source component. */
#design-system .component-sheet { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 10px; border: 1px solid #32353c; background: #0b0f15; counter-reset: component; }
#design-system .component-tile { counter-increment: component; min-width: 0; padding: 10px; border: 1px solid #303944; background: #111820; }
#design-system .component-tile-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; margin-bottom: 8px; }
#design-system .component-tile-head>span { color: #20d9ee; font: 8px Consolas,monospace; }
#design-system .component-tile-head h4 { margin: 0; font-size: 11px; font-weight: 400; color: #e4e9ed; }
#design-system .component-tile-head button { border: 0; padding: 0; background: none; color: #8ea4b4; font: 8px Consolas,monospace; cursor: pointer; }
#design-system .component-tile-head button:hover { color: #20d9ee; }
#design-system .component-tile iframe { display: block; width: 100%; height: 150px; border: 1px solid #273441; background: #020305; pointer-events: none; }
#design-system .component-tile:nth-child(5) iframe { height: 185px; }
#design-system .component-tile:nth-child(8) iframe { height: 130px; }
#design-system .component-tile:nth-child(9) iframe { height: 190px; }
@media(max-width:980px) { #design-system .component-sheet { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) {
 #design-system .component-sheet { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; }
 #design-system .component-tile { padding: 8px; }
 #design-system .component-tile iframe,#design-system .component-tile:nth-child(5) iframe,#design-system .component-tile:nth-child(8) iframe,#design-system .component-tile:nth-child(9) iframe { height: 150px; }
}
@media(max-width:430px) { #design-system .component-sheet { grid-template-columns: 1fr; } }

/* Layout decisions stay readable below each wireframe. */
#wireframes .wire-options { align-items: start; }
#wireframes .wire-option { display: flex; flex-direction: column; }
#wireframes .wire-option .option-caption { font-size: 10px; line-height: 1.4; margin-top: 12px; }
#wireframes .wire-option::after { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #48515d; color: #c8d0d7; font-size: 13px; line-height: 1.55; }



@media(max-width:700px) { #wireframes .wire-option::after { font-size: 12px; } }

/* Native component specimens: individual parts, without screen captures or iframes. */
#design-system .native-component-sheet { grid-template-columns: repeat(4,minmax(0,1fr)); }
#design-system .native-component { display:flex; flex-direction:column; min-height:220px; }
#design-system .native-component>small { display:block; margin-top:auto; padding-top:10px; color:#8395a6; font:8px/1.45 Consolas,monospace; }
#design-system .component-nav-sample { display:flex; flex-direction:column; gap:5px; padding:14px 8px; }
#design-system .component-nav-sample button { position:relative; border:0; background:transparent; padding:9px 12px; color:#bfc9d1; text-align:left; font-size:11px; letter-spacing:.14em; }
#design-system .component-nav-sample button.is-active { color:#fff; background:linear-gradient(90deg,#8d0034aa,transparent); }
#design-system .component-nav-sample button.is-active::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#ff176c; box-shadow:0 0 12px #ff176c; }
#design-system .component-card-states { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:12px 0; }
#design-system .item-card { min-width:0; height:104px; display:flex; flex-direction:column; justify-content:space-between; padding:6px; border:1px solid #55616d55; background:#080b0f; text-align:center; }
#design-system .item-card img { width:100%; height:70px; object-fit:contain; }
#design-system .item-card b { font:7px Consolas,monospace; color:#c8d0d7; }
#design-system .item-card.is-selected { border-color:#d9155d; box-shadow:inset 4px 0 #ff176c,0 0 15px #ff176c22; }
#design-system .item-card.is-selected b { color:#ff2f7f; }
#design-system .item-card.is-locked { color:#58636d; justify-content:center; gap:12px; }
#design-system .item-card.is-locked i { font-size:26px; font-style:normal; }
#design-system .component-detail-sample { margin:12px 0; padding:18px 14px; border:1px solid #d9155d99; background:#190913; }
#design-system .component-detail-sample small { color:#20d9ee; font:8px Consolas,monospace; }
#design-system .component-detail-sample strong { display:block; margin:8px 0; font-size:15px; letter-spacing:.12em; }
#design-system .component-detail-sample p { margin:0; color:#b9c3cc; font-size:10px; line-height:1.5; }
#design-system .component-vitals { display:flex; align-items:center; gap:8px; padding:28px 8px 20px; }
#design-system .component-vitals>strong { font-size:28px; }
#design-system .component-vitals i { display:inline-block; width:10px; height:5px; margin:1px; background:#252b31; transform:skewX(-12deg); }
#design-system .component-vitals i.health:nth-child(-n+8) { background:#ff176c; }
#design-system .component-vitals i.stamina:nth-of-type(n+13):nth-of-type(-n+18) { background:#20d9ee; }
#design-system .component-prompt { display:flex; align-items:center; gap:10px; padding:36px 8px; }
#design-system .component-prompt kbd { min-width:28px; text-align:center; }
#design-system .component-prompt strong { font-size:16px; letter-spacing:.12em; }
#design-system .component-prompt i { margin-left:auto; color:#ff176c; font-size:22px; font-style:normal; }
#design-system .component-type-sample { display:flex; flex-direction:column; gap:9px; padding:22px 8px; }
#design-system .component-type-sample strong { font-size:23px; letter-spacing:.16em; }
#design-system .component-type-sample b { font-size:12px; letter-spacing:.12em; }
#design-system .component-type-sample span { color:#b9c3cc; font-size:10px; }
#design-system .component-setting { display:flex; align-items:center; gap:5px; padding:10px 0; border-bottom:1px solid #ffffff14; color:#c8d0d7; font-size:9px; }
#design-system .component-setting span { margin-right:auto; }
#design-system .component-setting button { border:1px solid #ffffff25; background:transparent; padding:5px 7px; color:#87939e; font-size:8px; }
#design-system .component-setting button:first-of-type { border-color:#ff176c; color:#fff; background:#8d003455; }
#design-system .component-setting input { width:90px; accent-color:#ff176c; }
#design-system .component-frame-sample { position:relative; min-height:110px; margin:8px 0; border:1px solid #ffffff35; display:grid; place-items:center; color:#20d9ee; font:8px Consolas,monospace; }
#design-system .component-frame-sample i { position:absolute; width:14px; height:14px; border-color:#20d9ee; border-style:solid; }
#design-system .component-frame-sample i:nth-child(1){top:-1px;left:-1px;border-width:2px 0 0 2px}.component-frame-sample i:nth-child(2){top:-1px;right:-1px;border-width:2px 2px 0 0}.component-frame-sample i:nth-child(3){bottom:-1px;left:-1px;border-width:0 0 2px 2px}.component-frame-sample i:nth-child(4){bottom:-1px;right:-1px;border-width:0 2px 2px 0}
@media(max-width:980px){#design-system .native-component-sheet{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#design-system .native-component-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}#design-system .native-component{min-height:205px}}
@media(max-width:430px){#design-system .native-component-sheet{grid-template-columns:1fr}}

/* Shared page frame for the three adjacent study sections. */
main > #design-system,
main > #wireframes,
main > #ui-explorations { width: 100%; max-width: none; margin: 0; }
main > #design-system > .collection,
main > #ui-explorations > .collection { width: 92%; max-width: 1440px; margin: 0 auto; }
main > #wireframes { width: 92%; max-width: 1440px; margin: 0 auto; padding-top: 75px; padding-bottom: 70px; }
main > #wireframes > .study-heading { margin-bottom: 25px; }
main > #design-system > .collection > #system { padding-top: 0; }
main > #design-system > .collection > #selection-motion { padding-top: 55px; }
main > #ui-explorations > .section-heading { width: 92%; max-width: 1440px; margin: 0 auto 30px; }
@media(max-width:700px) {
 main > #wireframes { padding-top: 45px; padding-bottom: 45px; }
 main > #design-system > .collection > #selection-motion { padding-top: 40px; }
}

/* Aspect controls resize the live HUD stage itself. */
#journey .hud-aspect-controls { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:#101720; }
#journey .hud-aspect-controls span { margin-right:auto; color:#8295a7; font:9px Consolas,monospace; letter-spacing:1px; }
#journey .hud-aspect-controls button { border:1px solid #465462; background:#18232d; color:#aebbc6; padding:7px 10px; font:10px Consolas,monospace; }
#journey .hud-aspect-controls button[aria-pressed=true] { border-color:var(--cyan); color:var(--cyan); background:#20d9ee12; }
#journey .hud-live-stage { aspect-ratio:16/9; height:auto; min-height:0; }
#journey .hud-live-stage[data-aspect=ultrawide] { aspect-ratio:21/9; }
#journey .hud-live-stage[data-aspect=compact] { aspect-ratio:4/3; }
#journey .hud-live-stage iframe { width:100%; height:100%; }
@media(max-width:700px) { #journey .hud-aspect-controls { padding:9px; } #journey .hud-aspect-controls button { padding:6px 8px; } }

#journey .hud-playback-toolbar { display:flex; align-items:center; gap:16px; }
#journey .hud-toolbar-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
#journey .hud-aspect-controls { display:flex; align-items:center; gap:4px; padding:0; border:0; background:transparent; }
#journey .hud-aspect-controls span { margin-right:4px; font-size:8px; }
#journey .hud-aspect-controls button { padding:5px 7px; font-size:9px; }
#journey .hud-live-stage { max-height:620px; }
@media(max-width:700px) { #journey .hud-playback-toolbar { align-items:flex-start; flex-direction:column; gap:10px; } #journey .hud-toolbar-actions { width:100%; justify-content:space-between; margin-left:0; } }

/* Restore the original HUD artboard fill from ui-lab.html. */
#journey .hud-live-stage { width:100%; height:auto; max-height:none; aspect-ratio:1648/928; overflow:hidden; }
#journey .hud-live-stage iframe { position:absolute; left:0; top:0; width:1648px; height:928px; border:0; transform:scale(var(--hud-scale,1)); transform-origin:top left; }


/* The HUD board owns its responsive preview controls. */
#journey .hud-toolbar-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
#journey .hud-aspect-controls{display:flex;align-items:center;gap:5px}
#journey .hud-aspect-controls>span{margin-right:4px;color:#8295a7;font:8px Consolas,monospace;letter-spacing:1px}
#journey .hud-aspect-controls button{border:1px solid #465462;background:#18232d;color:#aebbc6;padding:5px 8px;font:9px Consolas,monospace;cursor:pointer}
#journey .hud-aspect-controls button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);background:#20d9ee12}
#journey .hud-live-stage[data-aspect=ultrawide]{aspect-ratio:21/9}
#journey .hud-live-stage[data-aspect=compact]{aspect-ratio:4/3}
@media(max-width:700px){#journey .hud-toolbar-actions{width:100%;margin-left:0;justify-content:space-between;gap:8px}#journey .hud-aspect-controls>span{display:none}}

/* Responsive composition guides stay visible on the original HUD preview. */
#journey .hud-live-stage{position:relative}
#journey .hud-layout-overlay{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border:0;z-index:2;pointer-events:none;overflow:hidden}
#journey .hud-layout-overlay .safe-frame{position:absolute;inset:7%;border:1px dashed #20d9eeaa}
#journey .hud-layout-overlay .anchor-point{position:absolute;color:var(--cyan);font-size:22px;text-shadow:0 0 8px #000}
#journey .hud-layout-overlay .runtime-health{position:absolute;left:9%;top:10%;display:flex;gap:4px;align-items:center}
#journey .hud-layout-overlay .runtime-health span{font:10px Consolas,monospace;margin-right:7px;color:#fff}
#journey .hud-layout-overlay .runtime-health i{display:block;width:14px;height:10px;background:var(--pink);transform:skewX(-10deg)}
#journey .hud-layout-overlay .runtime-objective{position:absolute;right:9%;top:10%;text-align:right;text-shadow:0 2px 5px #000}
#journey .hud-layout-overlay .runtime-objective small{font:8px Consolas,monospace;letter-spacing:1px;color:var(--cyan)}
#journey .hud-layout-overlay .runtime-objective strong{display:block;font-size:13px;font-weight:400;margin-top:5px;color:#fff}
#journey .hud-layout-overlay .runtime-card{position:absolute;right:9%;bottom:13%;display:flex;align-items:center;background:#080b12e8;border:1px solid #ff397e77;padding:12px 20px;gap:17px;width:48%;box-shadow:inset 3px 0 var(--pink);color:#fff}
#journey .hud-layout-overlay .runtime-card>img{width:70px;height:70px;object-fit:contain}
#journey .hud-layout-overlay .runtime-card small{font:7px Consolas,monospace;letter-spacing:1px;color:var(--pink)}
#journey .hud-layout-overlay .runtime-card strong{display:block;font-size:17px;letter-spacing:1px;margin-top:5px;line-height:1.3}
#journey .hud-layout-overlay .runtime-back{position:absolute;left:9%;bottom:11%;font-size:9px;color:#fff}
@media(max-width:700px){#journey .hud-layout-overlay .runtime-card{padding:8px;gap:8px;width:50%}#journey .hud-layout-overlay .runtime-card>img{width:45px;height:50px}#journey .hud-layout-overlay .runtime-card strong{font-size:11px}}

/* Keep the source HUD artboard fixed while the responsive composition frame changes inside it. */
#journey .hud-live-stage[data-aspect=ultrawide],#journey .hud-live-stage[data-aspect=compact]{aspect-ratio:1648/928}
#journey .hud-layout-overlay{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:88%;height:auto;aspect-ratio:16/9;border:1px solid #4a5260}
#journey .hud-layout-overlay[data-aspect=ultrawide]{width:100%;aspect-ratio:21/9}
#journey .hud-layout-overlay[data-aspect=compact]{width:66%;aspect-ratio:4/3}

#journey .hud-layout-overlay>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65);z-index:0}
#journey .hud-layout-overlay>.safe-frame,#journey .hud-layout-overlay>.anchor-point,#journey .hud-layout-overlay>.runtime-health,#journey .hud-layout-overlay>.runtime-objective,#journey .hud-layout-overlay>.runtime-card,#journey .hud-layout-overlay>.runtime-back{z-index:1}

/* Resize the original HUD iframe viewport itself; its own scene and UI reflow together. */
#journey .hud-live-stage{position:relative;aspect-ratio:1648/928;display:grid;place-items:center}
#journey .hud-live-stage[data-aspect=wide] iframe{width:88%;height:auto;aspect-ratio:16/9;transform:none;left:auto;top:auto;position:relative}
#journey .hud-live-stage[data-aspect=ultrawide] iframe{width:100%;height:auto;aspect-ratio:21/9;transform:none;left:auto;top:auto;position:relative}
#journey .hud-live-stage[data-aspect=compact] iframe{width:66%;height:auto;aspect-ratio:4/3;transform:none;left:auto;top:auto;position:relative}

/* The original HUD fills the selected frame; its own scene, scan, and evidence UI scale together. */
#journey .hud-live-stage[data-aspect=wide]{aspect-ratio:1648/928}
#journey .hud-live-stage[data-aspect=ultrawide]{aspect-ratio:21/9}
#journey .hud-live-stage[data-aspect=compact]{aspect-ratio:4/3}
#journey .hud-live-stage iframe,#journey .hud-live-stage[data-aspect=wide] iframe,#journey .hud-live-stage[data-aspect=ultrawide] iframe,#journey .hud-live-stage[data-aspect=compact] iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transform:none}

/* Restore the original responsive preview motion and spacing guides. */
#journey .hud-live-stage{padding:24px;background:#080a0f;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:24px 24px}
#journey .hud-live-stage iframe,#journey .hud-live-stage[data-aspect=wide] iframe,#journey .hud-live-stage[data-aspect=ultrawide] iframe,#journey .hud-live-stage[data-aspect=compact] iframe{transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;outline:1px dashed #20d9ee66;outline-offset:12px;box-shadow:0 0 0 1px #394858,0 0 0 13px #0c121a}

/* Original responsive-preview frame: fixed board, animated inner viewport. */
#journey .hud-live-stage{padding:25px;display:grid;place-items:center;min-height:300px;background:#080a0f;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:17px 17px}
#journey .hud-responsive-frame{position:relative;width:88%;aspect-ratio:16/9;border:1px solid #4a5260;box-shadow:0 0 0 1px #394858;overflow:hidden;transition:width .25s ease,aspect-ratio .25s ease}
#journey .hud-responsive-frame[data-aspect=ultrawide]{width:100%;aspect-ratio:21/9}
#journey .hud-responsive-frame[data-aspect=compact]{width:66%;aspect-ratio:4/3}
#journey .hud-responsive-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transform:none}

#journey .hud-live-stage,#journey .hud-live-stage[data-aspect=wide],#journey .hud-live-stage[data-aspect=ultrawide],#journey .hud-live-stage[data-aspect=compact]{aspect-ratio:1648/928}

#journey .hud-responsive-frame{position:relative}

#journey .hud-frame-cap{position:absolute;width:14px;height:14px;z-index:4;pointer-events:none;border-color:#20d9ee}
#journey .hud-frame-cap.cap-tl{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}
#journey .hud-frame-cap.cap-tr{right:-1px;top:-1px;border-right:1px solid;border-top:1px solid;border-color:#ff2f7f}
#journey .hud-frame-cap.cap-bl{left:-1px;bottom:-1px;border-left:1px solid;border-bottom:1px solid;border-color:#20d9ee}
#journey .hud-frame-cap.cap-br{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid;border-color:#ff2f7f}