:root{--fg:#1b1f24;--mut:#59606a;--bg:#fff;--line:#dfe3e8;--acc:#1457e6;--acc-fg:#fff;--soft:#f4f6f9;--ok:#157347;--warn:#b42318;--sh:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
@media(prefers-color-scheme:dark){:root{--fg:#eceff3;--mut:#a3abb6;--bg:#14161a;--line:#2e333b;--acc:#7aa7ff;--acc-fg:#0b1220;--soft:#1c2026;--ok:#5fd08f;--warn:#ff8a80;--sh:none}}
*{box-sizing:border-box}
body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;margin:0;color:var(--fg);background:var(--bg);-webkit-text-size-adjust:100%}
a{color:var(--acc)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.sh,.sf,.crumbs{max-width:760px;margin:0 auto;padding:12px 16px}
.sh{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;border-bottom:1px solid var(--line)}
.sh a.brand{font-weight:700;font-size:18px;color:var(--fg);text-decoration:none}
.sh nav{display:flex;flex-wrap:wrap;gap:0 16px}
.sh nav a{text-decoration:none;padding:10px 0;font-size:14px;color:var(--mut)}
.sh nav a:hover{color:var(--acc)}
.crumbs{padding-top:12px;padding-bottom:0;font-size:14px;color:var(--mut)}
.sf{border-top:1px solid var(--line);margin-top:48px;color:var(--mut);font-size:14px}
.sf a{margin-right:16px;display:inline-block;padding:8px 0}
body>h1,body>h2,body>h3,body>p,body>label,body>div,body>ul,body>ol,body>input,body>select,body>table,body>small,body>section,body>details{max-width:760px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
h1{font-size:24px;line-height:1.25;margin:20px auto 8px;font-weight:750}
h2{font-size:20px;line-height:1.3;margin:32px auto 8px}
h3{font-size:16px}
@media(min-width:640px){h1{font-size:28px}}
p,ul,ol{margin-top:8px;margin-bottom:8px}
label{display:block;margin:16px auto 4px;font-weight:600;font-size:14px}
input,select{font:inherit;min-height:44px;max-width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
input[type=file]{width:100%;padding:10px;background:var(--soft);border:2px dashed var(--line)}
input[type=range]{width:100%;padding:0}
button,.btn{font:inherit;font-weight:600;min-height:44px;padding:8px 20px;border-radius:8px;border:1px solid var(--line);background:var(--soft);color:var(--fg);cursor:pointer;margin:8px 8px 0 0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
button#go,button.primary,.btn.primary{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>div{flex:1 1 140px}
.row input,.row select{width:100%}
#out,.result{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--soft);box-shadow:var(--sh)}
img,canvas{max-width:100%;height:auto}
table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--line);padding:8px 12px;text-align:left}
details{border-top:1px solid var(--line);padding:8px 16px}summary{cursor:pointer;font-weight:600;padding:8px 0}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:0 16px;max-width:760px;margin:0 auto}
.card{display:block;border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--soft);text-decoration:none;color:var(--fg);box-shadow:var(--sh)}
.card:hover{border-color:var(--acc)}
.card strong{display:block;color:var(--acc);margin-bottom:4px}.card span{font-size:14px;color:var(--mut)}
.note{background:var(--soft);border-left:4px solid var(--acc);padding:12px 16px;margin:16px auto;border-radius:0 8px 8px 0}
.warn{color:var(--warn)}.ok{color:var(--ok)}small{color:var(--mut)}
.stage{position:relative;margin:12px auto 0;touch-action:none;line-height:0;border-radius:8px;overflow:hidden;background:var(--soft)}
.stage canvas{display:block;width:100%;cursor:grab}
body>ul,body>ol{padding-left:40px}
#out:empty{display:none}
body>.box,body>.warnbox,body>.note{max-width:728px;margin-left:auto;margin-right:auto}
@media(max-width:775px){body>.box,body>.warnbox,body>.note{margin-left:16px;margin-right:16px}}
.note{border-radius:8px}
body>input,body>select,body>button,body>.btn{margin-left:max(16px,calc((100% - 728px)/2));padding-left:12px;padding-right:12px;max-width:calc(100% - 32px)}
body>button,body>.btn{padding-left:20px;padding-right:20px}
body>input[type=file]{width:calc(100% - 32px)}