:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#071f27;color:#eef9f5;font:17px/1.6 system-ui,sans-serif}header{max-width:1100px;margin:auto;padding:36px 24px 20px}.eyebrow{color:#9ce8ca;letter-spacing:.16em;font-size:13px}h1{font-size:clamp(32px,4vw,54px);line-height:1.12;margin:12px 0}p{color:#b5cacb}nav{display:flex;gap:18px;flex-wrap:wrap}a{color:#a5e9cd}main{max-width:1100px;display:grid;grid-template-columns:minmax(280px,540px) 1fr;gap:28px;margin:auto;padding:24px}.stage-wrap{border:1px solid #31565c;border-radius:22px;overflow:hidden;align-self:start}canvas{width:100%;height:auto;display:block}aside{padding:18px 10px}h2,h3{line-height:1.2}label{display:block;margin:18px 0}button{width:100%;font:inherit;border-radius:12px;padding:12px;background:#a5e9cd;border:1px solid #a5e9cd;color:#092b30;font-weight:750;cursor:pointer}input[type=range]{display:block;width:100%;margin:14px 0}output{float:right}input[type=checkbox]{accent-color:#a5e9cd}.toggle{display:flex;gap:10px}#chapter{border-left:3px solid #a5e9cd;padding-left:14px}#status{font-size:13px}.capture header,.capture aside{display:none}.capture main{display:block;width:1080px;max-width:none;margin:0;padding:0}.capture .stage-wrap{border:0;border-radius:0}.capture canvas{width:1080px;height:1920px}@media(max-width:750px){main{grid-template-columns:1fr;padding:16px}header{padding:24px 18px}aside{padding:0}}
