*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#0b0b0d;color:#d8d4c8;font:14px/1.4 ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;display:flex;flex-direction:column;min-height:100vh}
a{color:#7fe3d0}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #222;background:#111114;flex-wrap:wrap}
h1{margin:0;font-size:18px;letter-spacing:2px;color:#f2efe6}
h1 small{font-size:11px;color:#8a877f;letter-spacing:1px;margin-left:6px;font-weight:normal}
.rec{color:#e5363b;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.top-actions{display:flex;gap:8px}
.btn,button{background:#1c1c21;color:#e8e4d8;border:1px solid #34343c;border-radius:4px;padding:7px 11px;font:inherit;cursor:pointer;white-space:nowrap}
.btn:hover,button:hover{border-color:#7fe3d0}
.btn.primary{background:#7fe3d0;color:#0b0b0d;border-color:#7fe3d0;font-weight:bold}
button:disabled{opacity:.5;cursor:wait}
main{flex:1;display:flex;min-height:0}
#stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:14px;min-width:0;background:repeating-linear-gradient(0deg,#0d0d10 0 2px,#0b0b0d 2px 4px)}
#stage.drag{outline:2px dashed #7fe3d0;outline-offset:-8px}
#view{max-width:100%;max-height:100%;background:#000;box-shadow:0 0 0 1px #222,0 10px 40px #000}
#hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:#000c;padding:4px 10px;border-radius:3px;font-size:12px;color:#aaa;pointer-events:none}
#busy{position:absolute;top:20px;right:24px;background:#e5363b;color:#fff;padding:3px 8px;font-size:12px;border-radius:3px}
#panel{width:290px;flex:none;overflow-y:auto;padding:12px;border-left:1px solid #222;background:#111114}
.row{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.presets button{flex:1 1 45%;font-size:12px;padding:6px}
.presets button.on{border-color:#e5363b;color:#fff}
.wide{flex:1}
.ctl{margin:9px 0}
.ctl label{display:flex;justify-content:space-between;font-size:12px;color:#b8b4a8}
.ctl output{color:#7fe3d0}
input[type=range]{width:100%;accent-color:#7fe3d0;margin:3px 0 0}
fieldset{border:1px solid #2a2a30;border-radius:4px;margin:12px 0 0;padding:8px}
legend{font-size:12px;padding:0 4px}
input[type=text]{width:100%;margin:4px 0;background:#0b0b0d;color:#f2efe6;border:1px solid #34343c;border-radius:3px;padding:6px;font:inherit}
footer{border-top:1px solid #222;padding:8px 14px;background:#111114;font-size:12px;text-align:center}
footer p{margin:2px 0}
.promo{color:#f2efe6}
.fine{color:#77746c;font-size:11px}
@media (max-width:760px){
  main{flex-direction:column}
  #panel{width:auto;border-left:0;border-top:1px solid #222;overflow:visible}
  #stage{min-height:56vw}
}

footer .promo{font-size:14px;margin:4px 0}footer .links{font-size:11px;margin:2px 0;color:#8a877f}footer .fine{font-size:10px;color:#6a675f}

.ck-promo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 2px;padding:8px 14px;border-bottom:1px solid #222;background:#0f0f12;font-size:12px;text-align:center}
.ck-promo-strip a{color:#7fe3d0;text-decoration:none}
.ck-promo-strip a:hover{text-decoration:underline}
.ck-promo-note{color:#8a877f}
footer .ck-funnel{font-size:13px;margin:6px 0;color:#f2efe6}
footer .ck-funnel a{color:#7fe3d0}