*{box-sizing:border-box}body{margin:0;background:#f1f3f5;color:#182b38;font-family:Arial,Helvetica,sans-serif}main{max-width:1440px;margin:auto;padding:22px 32px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 20px}h1{font-size:24px;letter-spacing:-.045em;line-height:1.1;margin:0;font-weight:650}a{color:inherit;text-underline-offset:4px}header a{font-size:13px;white-space:nowrap}.back{text-decoration:none}.back:hover{text-decoration:underline}p{line-height:1.5;margin:0}.instruction{font-size:14px;color:#536673;margin:0 0 16px}.stage{position:relative;border-radius:16px;overflow:hidden;background:var(--stage)}canvas{width:100%;height:clamp(360px,60vh,600px);display:block;touch-action:none;outline-offset:-5px}.controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:20px 0}.control-break{height:32px;width:1px;background:#ccd5db;align-self:center;margin:0 3px}label{display:grid;gap:8px;font-size:12px;color:#475b68}input,select,button{font:inherit}input[type=text],select{padding:11px 12px;border:1px solid #bfcbd2;border-radius:7px;background:white;color:#182b38;width:148px;height:42px}input[type=range]{width:138px;accent-color:#234bd0;height:26px;margin:0 0 8px}button,.download{padding:11px 15px;min-height:42px;border:1px solid #bac8d1;border-radius:7px;background:#fff;color:#182b38;font-weight:500;cursor:pointer;text-decoration:none;font-size:13px}button:hover,.download:hover{background:#e4eaf0}button:disabled{opacity:.6;cursor:wait}:focus-visible{outline:3px solid #f5914c;outline-offset:3px}button[aria-pressed=true]{background:#e0e7f8;border-color:#7087c1}.stage-action{position:absolute;right:20px;top:20px;display:grid;justify-items:center;gap:12px}.stage-action p{display:none;color:#f4f7ff;font-size:17px}.stage-action button{background:#fff7dd;border:0;color:#1536a4;box-shadow:0 4px 16px #071b6726}.stage.released .stage-action{right:50%;top:43%;transform:translate(50%,-50%)}.stage.released .stage-action p{display:block;white-space:nowrap}#status{font-size:12px;color:#586d7b}#status:empty{display:none}#recordStatus{font-size:12px;color:#586d7b;margin-top:8px}#recordStatus:empty{display:none}details{font-size:12px;color:#5b6e7b;border-top:1px solid #cbd5dc;padding-top:16px;margin-top:6px;max-width:850px;line-height:1.6}summary{cursor:pointer;width:fit-content}details p{margin:10px 0;max-width:760px}#capture{margin:22px 0}video{width:100%;max-height:420px;background:#13202b;border-radius:12px}#capture p{margin-top:12px}.zoom-label{display:flex;justify-content:space-between;gap:14px}output{font-variant-numeric:tabular-nums;color:#182b38}@media(max-width:650px){main{padding:18px 16px}header{flex-wrap:wrap;gap:18px;padding-bottom:17px}header h1{order:3;width:100%;font-size:26px}header a{font-size:12px}.instruction{font-size:13px;margin-bottom:13px;max-width:330px}canvas{height:340px}.controls{gap:12px;padding:16px 0;align-items:end}.controls label{flex:1;min-width:130px}input[type=text],select{width:100%;min-width:130px}input[type=range]{width:100%}.control-break{display:none}.stage-action{right:14px;top:14px}.stage-action button{font-size:12px;min-height:38px;padding:9px 12px}.stage.released .stage-action{top:42%}.stage-action p{font-size:15px}details{margin-top:10px}.controls button{flex:1;white-space:nowrap}#record{flex:1.25}}