:root{
  --ink:#1d2b4f; --sky:#e4f3ff; --sun:#ffc928; --coral:#ff6b57; --paper:#fff; --line:#b9d6ee;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); background:var(--sky);
  font-family:"Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
  line-height:1.6;
}
header{padding:24px clamp(16px,4vw,48px) 8px}
h1{margin:0; font-size:clamp(28px,4vw,40px); font-weight:900; letter-spacing:.04em}
header p{margin:4px 0 0; max-width:40em}
main{display:grid; gap:24px; padding:16px clamp(16px,4vw,48px) 48px; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); align-items:start}
@media (max-width:860px){main{grid-template-columns:1fr}}

.stage canvas{width:100%; height:auto; aspect-ratio:16/9; display:block; border-radius:16px; border:4px solid var(--ink); background:#000}
.stage-actions{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
button,.download{font:inherit; cursor:pointer}
.primary,.ghost,.download{border:3px solid var(--ink); border-radius:999px; padding:10px 24px; font-weight:800; color:var(--ink); text-decoration:none; display:inline-block}
.primary{background:var(--sun); box-shadow:0 4px 0 var(--ink)}
.primary:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink)}
.ghost{background:var(--paper)}
.download{background:var(--coral); color:#fff; margin-top:12px}
button:disabled{opacity:.5; cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,.download:focus-visible{outline:4px solid var(--coral); outline-offset:2px}

.progress{height:12px; border:2px solid var(--ink); border-radius:99px; margin-top:16px; background:var(--paper); overflow:hidden}
#bar{height:100%; width:0; background:var(--coral)}
#status{min-height:1.6em; margin:8px 0 0; font-weight:700}

.panel{display:grid; gap:16px}
fieldset{margin:0; padding:12px 16px 16px; background:var(--paper); border:2px solid var(--line); border-radius:16px}
legend{padding:0 8px; font-weight:900}
.row{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.row label{display:flex; align-items:center; gap:8px; font-weight:700}
input[type=number]{width:5.5em; font:inherit; font-size:1.5rem; font-weight:800; text-align:center; padding:4px; border:2px solid var(--ink); border-radius:10px; color:var(--ink)}
input[type=color]{width:56px; height:40px; padding:0; border:2px solid var(--ink); border-radius:10px; background:none; cursor:pointer}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chips button{border:2px solid var(--ink); border-radius:999px; background:var(--sky); padding:4px 14px; font-weight:700; color:var(--ink)}
#presets button{background:var(--b); color:var(--f)}
.range,.select,.check{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-weight:700}
.range input{flex:1; min-width:120px; accent-color:var(--coral)}
select{font:inherit; padding:4px 8px; border:2px solid var(--ink); border-radius:10px; color:var(--ink)}
.check input{width:20px; height:20px; accent-color:var(--coral)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@font-face{font-family:"KachiMono";src:url("timer-font.woff2") format("woff2");font-weight:700;font-display:block}
.stage canvas.checker{background:conic-gradient(#d0d0d0 25%,#fff 0 50%,#d0d0d0 0 75%,#fff 0) 0 0/32px 32px}
select:disabled{opacity:.5}
.hint{margin:4px 0 8px; font-size:.85rem}
.check input[type=color]{width:40px; height:28px}