:root{--bar:#2e7d6f;--bar-ink:#fff;--bg:#f6f4ef;--card:#fff;--ink:#2d2a26;--mute:#6b645c;--accent:#2e7d6f;--accent-ink:#fff;--line:#d9d3c8;--warn:#9a5b00;color-scheme:light}
:root[data-theme="dark"]{--bar:#1f5a50;--bg:#1d1f1e;--card:#262928;--ink:#ece8e0;--mute:#a8a298;--accent:#52b3a2;--accent-ink:#0f1f1c;--line:#3b403e;--warn:#e0a84e;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 -apple-system,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;padding:0 0 48px}
main{padding:0 max(16px,env(safe-area-inset-left))}
main{max-width:760px;margin:0 auto}
header{padding:16px 0 0}
.topbar{position:sticky;top:0;z-index:20;background:var(--bar);color:var(--bar-ink);box-shadow:0 1px 4px rgba(0,0,0,.25);padding:8px 0;padding-top:max(8px,env(safe-area-inset-top))}
.topbar-in{box-sizing:border-box;max-width:760px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right));display:flex;gap:12px;align-items:center;justify-content:space-between}
h1{font-size:1.2rem;margin:0;text-wrap:balance;letter-spacing:.02em;color:var(--bar-ink)}
.topbar button.small{color:var(--bar-ink);border-color:rgba(255,255,255,.8);background:transparent}
.topbar button.small:hover{background:rgba(255,255,255,.18)}
.topbar button.small:focus-visible{outline:2px solid #fff;outline-offset:2px}
.toggles{display:flex;gap:6px;flex-shrink:0}
button.small{margin:0;padding:4px 12px;font-size:.88rem;min-width:3.2em}
h2{font-size:1.15rem;margin:0 0 12px}
h3{font-size:1rem;margin:20px 0 6px}
section{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 18px 20px;margin:18px 0}
.lead{margin:0;color:var(--mute)}
.note{margin:8px 0 0;color:var(--warn);font-size:.92rem}
label{display:block;font-size:.92rem;color:var(--mute);margin:8px 0 4px}
.row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:flex-end}
.row label{margin:4px 0}
textarea,select,input[type=number],input[type=file]{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:100%}
textarea{width:100%;resize:vertical;min-height:3.2em}
input[type=number]{width:6.5em}
button{font:inherit;border:1.5px solid var(--accent);background:transparent;color:var(--ink);border-radius:999px;padding:8px 18px;cursor:pointer;margin:10px 8px 0 0}
button.primary{background:var(--accent);color:var(--accent-ink);font-weight:700}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,textarea:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tabs{display:flex;gap:6px;margin-bottom:8px}
.tabs button{margin:0;border-radius:10px 10px 0 0;border-color:var(--line)}
.tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.preview{overflow-x:auto;background:#fff;border:1px dashed var(--line);border-radius:8px;padding:12px}
canvas{display:block;image-rendering:pixelated;max-width:none}
.meta,.hint{font-size:.88rem;color:var(--mute);margin:8px 0 0}
pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:.85rem;white-space:pre-wrap;min-height:3em;margin:10px 0 0}
ol{padding-left:1.3em}
code{background:var(--bg);padding:0 .3em;border-radius:4px}
footer{text-align:center;color:var(--mute);font-size:.88rem;margin-top:24px}
a{color:var(--accent)}

fieldset.modes{border:1px solid var(--line);border-radius:10px;margin:14px 0 8px;padding:6px 14px 10px;display:flex;flex-wrap:wrap;gap:4px 18px}
fieldset.modes legend{color:var(--mute);font-size:.9rem;padding:0 6px}
fieldset.modes label{display:inline-flex;gap:6px;align-items:center;margin:4px 0;color:var(--ink)}
.preview{overflow:auto;background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 8px,var(--card) 8px,var(--card) 16px);border:1px solid var(--line);border-radius:8px;padding:14px}
.tape{position:relative;background:#fff;border:1px solid #bbb;box-shadow:0 1px 3px rgba(0,0,0,.25);display:block;width:max-content}
.tape::after{content:"";position:absolute;left:0;right:0;border-top:1px dashed #d46;border-bottom:1px dashed #d46;top:var(--g-top);height:var(--g-h);pointer-events:none}
.tape canvas{position:absolute;left:var(--pad-x);top:var(--c-top)}
legend{font-weight:600}

.seg-row{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
.seg-row input[type=text]{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;flex:1 1 8em;min-width:0}
.seg-row select{flex:1 1 12em;min-width:0}
.seg-row button{margin:0;padding:2px 10px}