.ascii-section{position:relative;background:#101b17;color:#e4ebda;--ascii-progress:0}
.ascii-stage{height:100svh;min-height:630px;max-height:1200px;display:flex;flex-direction:column;position:relative;background:#101b17}
.ascii-is-pinned{height:230svh;min-height:1450px}
.ascii-is-pinned .ascii-stage{position:sticky;top:0}
.ascii-topline{display:flex;justify-content:space-between;align-items:center;gap:35px;min-height:88px;flex-shrink:0;border-bottom:1px solid #30433a}
.ascii-topline .label{font-size:10px;color:#b4c5b7}
.ascii-topline>span{font:9px/1.6 var(--mono);color:#a0b5a5}
.ascii-topline>a{display:flex;align-items:center;gap:26px;font-size:11px}
.ascii-topline>a span{font-size:20px}
.ascii-canvas-wrap{position:relative;flex:1;min-height:0;overflow:hidden;margin:20px 25px 0}
.ascii-canvas-wrap canvas,.ascii-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ascii-poster{object-fit:fill}
.ascii-canvas-wrap picture{display:contents}
.ascii-canvas-wrap canvas{opacity:0;cursor:crosshair;touch-action:pan-y;outline-offset:-5px}
.ascii-ready .ascii-canvas-wrap canvas{opacity:1}
.ascii-ready .ascii-poster{opacity:0}
.ascii-section:not(.ascii-ready) .ascii-poster{opacity:.85}
.ascii-bottomline{padding-block:24px 26px;flex-shrink:0}
.ascii-status-row{display:flex;justify-content:space-between;align-items:baseline;gap:30px}
.ascii-status-row h2{font-size:25px;letter-spacing:-.035em;line-height:1.15;font-weight:400}
.ascii-status-row p{font:9px/1.8 var(--mono);color:#a6bba9}
.ascii-status-row p>span+span:before{content:' / ';padding-inline:7px;color:#536f5b}
.ascii-navigation-row{display:flex;justify-content:space-between;align-items:center;gap:35px;margin-top:30px;border-top:1px solid #30433a;padding-top:20px}
.ascii-phases{display:flex;gap:30px;position:relative;font:8px/1.7 var(--mono);color:#769180;padding-top:13px;min-width:310px}
.ascii-phases:before,.ascii-phases:after{content:'';position:absolute;left:0;top:0;width:100%;height:1px;background:#30483a}
.ascii-phases:after{width:calc(var(--ascii-progress)*100%);background:#c9d6bd}
.ascii-phases>[data-active='true']{color:#e4ebda}
.ascii-controls{display:flex;gap:29px;align-items:center;font-size:10px}
.ascii-controls button{min-height:38px;color:#c4d3bd}
.ascii-controls button:disabled{opacity:.4}
.ascii-controls a{font-size:19px;min-width:25px;text-align:right}
.ascii-controls button:hover{color:#fff}
.ascii-lab-controls{display:flex;align-items:center;gap:40px;margin-top:24px;padding-top:20px;border-top:1px solid #30433a}
.ascii-lab-controls>div{display:flex;gap:25px}
.ascii-lab-controls button{font:10px/1.5 var(--mono);padding-block:8px;border-bottom:1px solid transparent}
.ascii-lab-controls button[aria-pressed='true']{border-color:#d3dfc6}
.ascii-lab-controls label{display:flex;gap:20px;align-items:center;font:9px var(--mono);margin-left:auto;color:#b7c8b6}
.ascii-lab-controls input{width:170px;accent-color:#c9d6bd;margin:0;cursor:ew-resize}
.ascii-section a:focus-visible,.ascii-section button:focus-visible{outline-color:#d3dfc6}
.ascii-note-links{display:flex;flex-wrap:wrap;gap:25px;margin-top:26px;font:11px/1.8 var(--mono)}
.ascii-note-links a{text-decoration:underline;text-underline-offset:4px}
.lab-field-preview .ascii-lab-poster{object-fit:cover;object-position:center;image-rendering:auto}
.lab-field-preview picture{display:block;height:100%}
@media(min-width:1800px){.ascii-canvas-wrap{margin-inline:60px}}
@media(max-width:900px){.ascii-topline>span{display:none}.ascii-topline{min-height:75px}.ascii-status-row h2{font-size:22px}.ascii-status-row p{font-size:8px}.ascii-phases{min-width:280px;gap:24px}.ascii-canvas-wrap{margin-inline:17px}.ascii-controls{gap:23px}.ascii-lab-controls{gap:25px}.ascii-lab-controls label{gap:13px}.ascii-lab-controls input{width:120px}}
@media(max-width:600px){.ascii-stage{min-height:650px;max-height:1000px}.ascii-is-pinned{height:225svh;min-height:1470px}.ascii-topline{min-height:67px;gap:20px}.ascii-topline .label{font-size:8px}.ascii-topline>a{font-size:9px;gap:15px}.ascii-topline>a span{font-size:16px}.ascii-canvas-wrap{margin:8px 8px 0}.ascii-bottomline{padding-block:18px 22px}.ascii-status-row{display:block}.ascii-status-row h2{font-size:23px}.ascii-status-row p{font-size:8px;margin-top:12px}.ascii-status-row p>span+span:before{padding-inline:4px}.ascii-navigation-row{gap:20px;margin-top:22px;padding-top:14px;align-items:flex-end}.ascii-phases{font-size:7px;min-width:0;gap:13px;padding-top:12px}.ascii-controls{gap:18px;font-size:9px;flex-shrink:0}.ascii-controls button{min-height:32px}.ascii-controls a{font-size:17px;min-width:15px}.ascii-lab-controls{flex-wrap:wrap;gap:17px;margin-top:18px;padding-top:15px}.ascii-lab-controls>div{gap:20px}.ascii-lab-controls button{font-size:9px}.ascii-lab-controls label{width:100%;justify-content:space-between;font-size:8px}.ascii-lab-controls input{width:58%}.ascii-note-links{font-size:10px;gap:15px}}
@media(max-width:360px){.ascii-phases{gap:10px;font-size:6px}.ascii-controls{gap:12px;font-size:8px}.ascii-status-row h2{font-size:21px}.ascii-status-row p{font-size:7px}}
@media(prefers-reduced-motion:reduce){.ascii-poster{object-fit:contain}.ascii-is-pinned{height:auto;min-height:0}.ascii-is-pinned .ascii-stage{position:relative}}