:root { --bg:#14142a; --card:#1f1f3a; --fg:#f2f2f7; --mut:#a5a5c0; --acc:#ffcc33; --acc2:#5ad1a7; }
* { box-sizing: border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif; }
header { padding: max(14px, env(safe-area-inset-top)) 16px 4px; }
h1 { margin:0; font-size:22px; display:flex; align-items:center; gap:8px; }
h1 img { image-rendering: pixelated; border-radius:6px; }
.sub { margin:4px 0 0; color:var(--mut); font-size:13px; }
main { padding: 8px 12px 16px; max-width: 560px; margin: 0 auto; }
.card { background:var(--card); border-radius:16px; padding:16px; margin-bottom:14px; }
.big-btn { display:block; text-align:center; background:var(--acc); color:#222; font-weight:700; font-size:20px; padding:22px; border-radius:14px; cursor:pointer; }
.hint { color:var(--mut); font-size:13px; }
.link { background:none; border:0; color:var(--acc2); text-decoration:underline; font-size:14px; padding:0; }
h2 { margin:0; font-size:18px; } h3 { font-size:15px; margin:16px 0 8px; }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.small { font-size:13px; color:var(--mut); }
.seg { display:flex; background:#2b2b4d; border-radius:10px; padding:3px; }
.seg button { border:0; background:none; color:var(--mut); padding:6px 12px; border-radius:8px; font-size:14px; }
.seg button.on { background:var(--acc); color:#222; font-weight:700; }
.stage { margin:12px 0 8px; border-radius:12px; overflow:hidden; display:flex; justify-content:flex-start; align-items:flex-start; min-height:200px; }
.stage canvas { max-width:100%; height:auto; image-rendering: pixelated; display:block; flex:none; } /* JS sets an integer-device-pixel width for the snapped view */
.checker { background-color:#fff; background-image: linear-gradient(45deg,#d9d9e3 25%,transparent 25%,transparent 75%,#d9d9e3 75%), linear-gradient(45deg,#d9d9e3 25%,transparent 25%,transparent 75%,#d9d9e3 75%); background-size:16px 16px; background-position:0 0,8px 8px; }
.one { image-rendering: pixelated; vertical-align: middle; border-radius:2px; }
.info { font-size:14px; margin:4px 0; }
.info b { color:var(--acc); }
.warn { color:#ff9f7a; }
.dl { display:flex; gap:8px; }
.btn { background:#33335a; color:var(--fg); border:0; border-radius:10px; padding:12px 14px; font-size:15px; }
.btn.primary { background:var(--acc2); color:#10251d; font-weight:700; flex:1; }
.btn.wide { width:100%; margin-top:10px; }
select, input[type=number] { background:#2b2b4d; color:var(--fg); border:1px solid #44446e; border-radius:10px; padding:10px; font-size:15px; }
details { margin-top:14px; border-top:1px solid #33335a; padding-top:10px; }
summary { font-weight:700; cursor:pointer; padding:4px 0; }
details label { display:block; margin:10px 0; font-size:14px; }
details select { width:100%; margin-top:4px; }
input[type=range] { width:100%; accent-color: var(--acc); }
.sw input { transform: scale(1.3); margin-right:8px; accent-color: var(--acc2); }
.stepper { display:flex; gap:6px; margin-top:4px; } .stepper input { flex:1; min-width:0; text-align:center; }
footer { color:var(--mut); font-size:12px; text-align:center; padding: 0 16px max(16px, env(safe-area-inset-bottom)); }