@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:Space Grotesk,sans-serif;color:#263238;background:#e7e4db}*{box-sizing:border-box}body{margin:0;min-width:900px}#app{max-width:1500px;margin:auto;padding:28px 38px}header{display:flex;align-items:end;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid #c3c0b6}.eyebrow,.label,.panel-title,footer,.stage-caption,.status,.live{font:500 11px DM Mono,monospace;letter-spacing:.12em}.eyebrow{color:#bd6040}h1{font-size:38px;line-height:1;margin:9px 0 0;letter-spacing:-.06em}.status{display:flex;align-items:center;gap:8px}.status i{width:8px;height:8px;border-radius:50%;background:#8ca9a4;box-shadow:0 0 0 4px #d6ded8}main{display:grid;grid-template-columns:minmax(600px,1fr) 315px;gap:20px;padding-top:20px}.stage{position:relative;background:#f3f0e8;border-radius:3px;overflow:hidden;height:calc(100vh - 150px);min-height:600px}.stage canvas{width:100%;height:100%;display:block}.stage-caption{position:absolute;bottom:18px;left:22px;right:22px;display:flex;justify-content:space-between;color:#7a817e}aside{background:#f3f0e8;padding:22px 20px;display:flex;flex-direction:column;gap:17px}.panel-title{display:flex;justify-content:space-between;color:#59605e}.panel-title em{font-style:normal;color:#bd6040;font-size:9px}.metric{border-top:1px solid #d5d1c6;padding-top:16px}.metric>div:first-child{display:flex;justify-content:space-between;align-items:baseline}.metric strong{font-size:35px;letter-spacing:-.07em}.meter{height:5px;background:#d9d5ca;margin:10px 0 8px}.meter i{display:block;height:100%;width:0;background:#6b9994;transition:width .2s}.metric p{font-size:12px;color:#777d79;margin:0}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.actions button,select,.speed button{border:1px solid #c6c3b9;background:#ebe8df;color:#344044;padding:10px 8px;font:500 10px DM Mono,monospace;letter-spacing:.03em;cursor:pointer}.actions .primary{grid-column:1/-1;background:#344044;color:#f5f1e7;border-color:#344044}.actions button:disabled{opacity:.4;cursor:default}.control{border-top:1px solid #d5d1c6;padding-top:12px}.control label{display:flex;justify-content:space-between;margin-bottom:8px;color:#59605e;font:500 10px DM Mono,monospace;letter-spacing:.08em}.control output{color:#bd6040}select{width:100%}input{width:100%;accent-color:#bd6040}.speed{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.speed button.selected{background:#bd6040;color:#fff;border-color:#bd6040}footer{margin-top:auto;display:flex;justify-content:space-between;color:#969b95;font-size:9px;padding-top:10px}@media(max-width:1050px){#app{padding:20px}main{grid-template-columns:1fr 290px}.stage{min-height:560px}}.compare-link{margin-left:12px;color:#bd6040;font:500 10px DM Mono,monospace;text-decoration:none}@media(max-width:760px){body{min-width:320px}#app{padding:16px}header{align-items:flex-start;gap:12px}h1{font-size:32px}.status{font-size:9px;text-align:right}.compare-link{display:block;margin:6px 0 0;white-space:nowrap}main{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:12px}.stage{height:54vh;min-height:360px}aside{padding:16px}}@media(max-width:380px){#app{padding:12px}.stage{min-height:320px}.panel-title{font-size:9px}}