:root{--bg:#080e19;--shell:#0d1524;--panel:#111c2d;--plate:#172235;--stroke:#293348;--stroke2:#202e40;--text:#e7ecf4;--muted:#99a9bd;--dim:#687c92;--accent:#e6b67d;--blue:#86cfe1;--ok:#97e0c0}*{box-sizing:border-box}html,body{margin:0;min-width:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}body{scrollbar-color:#46546a #0c1420}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid var(--blue);outline-offset:3px}#application{min-height:100vh;display:flex;flex-direction:column}.masthead{height:57px;flex:0 0 57px;border-bottom:1px solid var(--stroke2);padding:0 clamp(17px,3vw,46px);display:flex;align-items:center;justify-content:space-between;letter-spacing:.17em;font-size:10px;font-weight:700}.mark-bullet{font-size:20px;vertical-align:middle;color:var(--accent);margin-right:14px}.sep{color:#596c7a}.mastaside{color:#9bacc0;display:flex;align-items:center;gap:11px}.header-line{height:1px;width:38px;background:#647385}.live-dot,.pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 12px #84d0ad}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:calc(100vh - 57px);max-width:2000px;width:100%;margin:auto}.showcase{min-width:0;padding:32px clamp(14px,3vw,48px) 20px}.intro{max-width:1100px;margin:auto}.intro-top,.intro-bottom,.metrics-head,.note-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.intro-top{font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:700}.design-tag{color:var(--dim)}h1{margin:16px 0 17px;font-size:clamp(33px,3.55vw,65px);line-height:1.05;letter-spacing:-.05em;font-weight:520}h1 em{color:var(--accent);font-family:Georgia,Times,serif;font-weight:400}.intro-bottom{margin:0 0 22px;color:#a9bacb;font-size:12px}.intro-bottom p{margin:0;color:#e0e9f3;font-weight:550}.thin{padding:0 7px;color:var(--dim)}.stage-shell{max-width:1100px;margin:auto;border:1px solid #2a394c;border-radius:2px;padding:6px;background:#0e1828}.stage{position:relative;min-width:0;aspect-ratio:1.65;min-height:345px;max-height:min(62vh,790px);overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 48% 48%,#273951 0,#101a2b 49%,#0a1220 95%)}.stage::before{position:absolute;content:'';inset:0;background:linear-gradient(90deg,transparent 49.9%,#a5cee60a 50%,transparent 50.1%),linear-gradient(transparent 49.9%,#a5cee60a 50%,transparent 50.1%);background-size:100px 100px;pointer-events:none;z-index:0}.stage-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 65%,transparent 10%,#0a13214f 83%);z-index:1}canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;z-index:1}canvas:active{cursor:grabbing}.stage-caption{position:absolute;z-index:3;left:22px;top:20px;display:flex;align-items:center;gap:13px;pointer-events:none;font-size:10px;letter-spacing:.14em;color:#cad8e4}.stage-caption-number{color:var(--accent);font-weight:700}.stage-action{position:absolute;top:13px;right:15px;z-index:5;display:flex;gap:6px}.square-button{border:1px solid #58647687;background:#0b1529c9;width:38px;height:36px;border-radius:3px;font-size:23px;display:grid;place-items:center;line-height:1}.square-button:hover{border-color:#9cd9ed;background:#182a3e}.corner{position:absolute;z-index:3;bottom:16px;font-size:10px;letter-spacing:.12em;color:#b1c2d3;pointer-events:none;display:flex;gap:9px;align-items:center}.bottom-left{left:20px}.bottom-right{right:20px}.slash{color:var(--accent)}#stage-gesture{position:absolute;z-index:3;bottom:45px;text-align:center;width:100%;font-size:9px;letter-spacing:.13em;color:#afc4d5;pointer-events:none}#stage-gesture span{color:var(--accent);padding:0 5px}#labels{position:absolute;inset:0;pointer-events:none;z-index:2}.point-label{position:absolute;white-space:nowrap;color:#d5eaf3;font-size:10px;letter-spacing:.06em;font-weight:600;transform:translate(-50%,-50%);padding:5px 8px;background:#091521d9;border-left:2px solid #83bed1;box-shadow:0 3px 18px #0007}.point-label:before{position:absolute;content:'';height:10px;width:1px;background:#9ad2e4;left:50%;top:100%}.science-strip{max-width:1100px;margin:20px auto 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding:15px 0 12px}.metrics-head{font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:750;margin-bottom:19px}.metrics-head>span:last-child{font-weight:500;color:var(--ok)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.metric{min-width:0;padding:2px 17px 8px;border-right:1px solid var(--stroke)}.metric:first-child{padding-left:0}.metric:last-child{border-right:none}.metric-label{display:flex;gap:9px;align-items:center;font-size:10px;color:var(--accent);font-weight:650;letter-spacing:.1em}.metric-label span{color:var(--muted)}.metric strong{display:block;margin:9px 0;font-size:clamp(22px,2.2vw,33px);font-weight:470;letter-spacing:-.04em;color:#e4f5fb}.metric small{font-size:11px;color:#819ab0}.crosscheck{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;border-top:1px solid var(--stroke2);padding-top:11px;margin-top:9px;font-size:11px;color:var(--ok)}.crosscheck span:first-child{letter-spacing:.13em;color:var(--dim);font-size:10px}.note-bar{max-width:1100px;margin:15px auto;font-size:10px;letter-spacing:.06em;color:var(--muted)}.note-bar span:first-child{color:var(--accent);letter-spacing:.14em}.workbench{min-width:0;border-left:1px solid var(--stroke2);background:linear-gradient(180deg,#121e30,#0b1524 65%);padding:25px 24px 30px;overflow:auto;max-height:calc(100vh - 57px);scrollbar-width:thin}.control-header .micro{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.15em}.control-header h2{font-size:23px;font-weight:550;line-height:1.15;margin:11px 0 7px;letter-spacing:-.035em}.control-header p{font-size:12px;line-height:1.55;color:var(--muted);margin:0 0 5px}.control-section{border-top:1px solid var(--stroke);padding:19px 0 18px}.control-header+.control-section{margin-top:18px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-heading h3{font-size:12px;margin:0;font-weight:650;letter-spacing:.02em}.section-heading>span{font-size:9px;color:var(--accent);letter-spacing:.11em}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.mode{background:#172337;border:1px solid #354257;padding:11px 10px;text-align:left;font-size:12px;border-radius:2px;transition:.15s}.mode>span{color:#8c9eb1;padding-right:9px;font-size:10px}.mode.wide{grid-column:span 2}.mode i{float:right;font-style:normal;color:var(--accent)}.mode.active{background:#294055;border-color:#c6b594;color:#fff;box-shadow:inset 0 0 0 1px #b7a9854d}.mode:hover,.camera-grid button:hover,.component-row button:hover{border-color:#85c5db}.range-label{display:flex;justify-content:space-between;align-items:baseline;gap:5px;margin:0 0 8px;font-size:11px;color:var(--muted)}.range-label output{color:var(--accent);font-size:12px;font-variant-numeric:tabular-nums}.range-label small{display:block;font-size:9px;letter-spacing:.02em;color:var(--dim);margin-top:3px}input[type=range]{display:block;width:100%;margin:0 0 18px;cursor:pointer;accent-color:#d5b484;height:16px}select{width:100%;padding:10px 8px;background:#152239;border:1px solid #35435a;color:#e4ecf5;font-size:11px;border-radius:2px}.select-title{font-size:9px;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:7px}.minor-actions{display:flex;gap:5px}.minor-actions button{flex:1;white-space:nowrap;background:#182638;border:1px solid #3a4960;padding:9px 5px;font-size:9px;letter-spacing:.06em}.minor-actions button span{display:block;color:var(--accent);font-size:9px;margin-top:3px}.inspector{margin-top:10px;min-height:115px;border:1px solid #344357;background:linear-gradient(135deg,#19273b,#101b2b);padding:15px}.inspector-hint{font-size:9px;color:var(--accent);letter-spacing:.13em}.inspector strong{display:block;font-size:13px;font-weight:600;margin:7px 0}.inspector p{margin:0;line-height:1.6;color:#94a8bd;font-size:11px}.component-row{display:flex;gap:6px;margin-top:9px}.component-row button{flex:1;border:1px solid #384962;background:#1b293d;padding:10px 4px;font-size:10px;letter-spacing:.04em}.assembly-track{background:#263449;height:5px;overflow:hidden}.assembly-track>div{width:0;height:100%;background:linear-gradient(90deg,#b58d65,#e0c59a);transition:width .2s}.assembly-caption{font-size:11px;color:var(--muted);line-height:1.45;min-height:34px}.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.camera-grid button{padding:10px 4px;font-size:11px;background:#17283d;border:1px solid #394b62}.camera-grid .reset-all{color:var(--accent)}.science-panel{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding:17px 0}.science-panel summary{cursor:pointer;list-style:none;font-size:12px;font-weight:700;letter-spacing:.08em;display:flex;justify-content:space-between;gap:10px}.science-panel summary::-webkit-details-marker{display:none}.science-panel summary small{display:block;color:var(--muted);font-weight:400;font-size:10px;letter-spacing:normal;margin-top:4px}.plus{color:var(--accent);font-size:20px;font-weight:400}.science-panel[open] .plus{transform:rotate(45deg)}.science-content{font-size:11px;line-height:1.65;color:#b9c8d8}.science-content b{color:#e4edf5}.disclaimer{border-left:2px solid var(--accent);padding:8px 10px;background:#222c38;color:#e8d7be}.footer-trace{padding:20px 0 0;color:#698097;display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.1em}.footer-trace span{color:var(--accent)}
@media(min-width:1500px){.layout{grid-template-columns:minmax(0,1fr) 388px}.workbench{padding:32px 30px}}
@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 305px}.showcase{padding:23px 18px}.workbench{padding:22px 17px}.stage{min-height:320px}.metric{padding:2px 9px}.metric strong{font-size:23px}}
@media(max-width:740px){.masthead{height:45px;flex-basis:45px;padding:0 14px}.mastaside{font-size:0}.mastaside .live-dot{width:6px}.header-line{display:none}.layout{display:flex;flex-direction:column}.showcase{padding:20px 11px 6px}.intro-top{font-size:9px}.design-tag{max-width:175px;text-align:right;line-height:1.4}h1{font-size:clamp(32px,8vw,52px);margin:12px 0}.intro-bottom{align-items:flex-start;font-size:10px;line-height:1.55;gap:3px;flex-direction:column}.stage-shell{padding:3px}.stage{min-height:315px;max-height:none;aspect-ratio:1.05}.stage-caption{top:13px;left:12px;font-size:8px;max-width:calc(100% - 108px);line-height:1.5;gap:7px}.stage-action{right:8px;top:8px}.square-button{width:33px;height:32px;font-size:18px}.corner{font-size:8px;bottom:11px;gap:5px}.bottom-left{left:9px}.bottom-right{right:9px}.stage-gesture{font-size:8px}#stage-gesture{bottom:34px;font-size:8px;letter-spacing:.06em}.science-strip{margin-top:12px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}.metric:nth-child(2){border-right:0}.metric:nth-child(3){padding-left:0}.metric strong{font-size:25px}.metrics-head{font-size:9px}.note-bar{line-height:1.6}.workbench{max-height:none;overflow:visible;border-top:1px solid var(--stroke);border-left:none;padding:22px 17px}.control-header h2{font-size:22px}}
@media(max-width:410px){h1{font-size:35px}.stage{min-height:310px;aspect-ratio:1.05}.note-bar{font-size:9px}.metric strong{font-size:24px}.intro-bottom{font-size:10px}}
body.embed-mode{height:100vh;height:100dvh;overflow:hidden}body.embed-mode #application{height:100vh;height:100dvh;min-height:0}body.embed-mode .masthead{display:none}body.embed-mode .layout{min-height:0;height:100%;overflow:hidden}body.embed-mode .showcase{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-top:12px;padding-bottom:6px}body.embed-mode .intro{flex:0 0 auto;margin:0 0 8px}body.embed-mode .intro h1{font-size:clamp(25px,3vw,35px);margin:5px 0}body.embed-mode .intro-bottom{margin:0}body.embed-mode .intro-top{display:none}body.embed-mode .stage-shell{flex:1 1 0;min-height:0;width:100%;margin:0 auto}body.embed-mode .stage{height:100%;min-height:0;max-height:none;aspect-ratio:auto}body.embed-mode .science-strip{margin:7px auto 0;flex:0 0 auto;width:100%;padding:7px 0}body.embed-mode .metric-grid{margin-top:4px}body.embed-mode .metric strong{font-size:19px;margin:2px 0}body.embed-mode .metrics-head{margin-bottom:3px;font-size:8px}body.embed-mode .metric small{font-size:9px}body.embed-mode .metric-label{font-size:8px}body.embed-mode .crosscheck{margin-top:2px;padding-top:4px;font-size:9px}body.embed-mode .note-bar{display:none}body.embed-mode .workbench{height:100%;max-height:none;overflow-y:auto}
@media(max-width:740px){body.embed-mode .layout{display:flex;flex-direction:column}body.embed-mode .showcase{height:58%;flex:0 0 58%;padding:6px 7px 0}body.embed-mode .intro{margin-bottom:5px}body.embed-mode .intro h1{font-size:24px;white-space:nowrap}body.embed-mode .intro-bottom{display:none}body.embed-mode .science-strip{margin-top:3px;padding:4px 0 0}body.embed-mode .metric strong{font-size:16px}body.embed-mode .metrics-head{font-size:8px}body.embed-mode .metric small{font-size:8px}body.embed-mode .crosscheck{font-size:8px;line-height:1.2}body.embed-mode .workbench{height:42%;max-height:none;flex:0 0 42%;padding:12px 16px;overflow-y:auto;overscroll-behavior:contain}.workbench{scrollbar-width:thin}body.embed-mode .control-header h2{margin:3px 0;font-size:16px}body.embed-mode .control-header p{display:none}body.embed-mode .control-header+.control-section{margin-top:8px}body.embed-mode .control-section{padding:10px 0}body.embed-mode .stage{aspect-ratio:auto}body.embed-mode .stage-gesture{display:none}body.embed-mode .metric{padding:0 9px}body.embed-mode .metric:nth-child(3){padding-left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

.section-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:9px;max-height:106px;overflow:auto;padding:2px 0 6px}.section-list label{font-size:10px;color:#aabed2;display:flex;align-items:center;gap:5px;min-width:0}.section-list input{accent-color:#c9aa7d;width:13px;height:13px;margin:0;flex:0 0 13px}.section-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:740px){.stage .bottom-right{bottom:27px;right:9px}.stage .bottom-left{bottom:9px;left:9px}#stage-gesture{bottom:46px}}