:root {
  --bg:#f6f7f9; --bg-2:#eef0f4; --surface:#ffffff; --text:#0f172a; --muted:#5b6475; --faint:#8a93a3;
  --border:#e3e6ec; --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --accent:#e0661f; --accent-ink:#ffffff; --accent-soft:rgba(224,102,31,.12);
  --seg-track:#e1e4ea; --seg-edge:#c8cdd6; --seg-ink:#374151; --seg-on:#0f172a; --seg-on-ink:#ffffff; --seg-on-shadow:none;
  --warn:#b45309; --warn-soft:rgba(180,83,9,.10); --bad:#b91c1c; --bad-soft:rgba(185,28,28,.08); --info:#3b6ea8;
  --board-bg:#e9ecf2;
  --shadow-lg:0 2px 4px rgba(15,23,42,.06), 0 24px 60px -12px rgba(15,23,42,.28);
  --case:#1d2130; --case-edge:#2a2f40; --stage-a:#e9ecf2; --stage-b:#f8f9fb;
  --case-light:#d5d9e2; --case-light-edge:#c3c8d3;
  --radius:14px; --radius-sm:10px;
  --sans:system-ui, "Segoe UI", sans-serif;
  --mono:'JetBrains Mono', Consolas, monospace;
  color-scheme:light;
}
html[data-mode="dark"] {
  --bg:#0b0d12; --bg-2:#12151c; --surface:#151922; --text:#e8ebf1; --muted:#9aa3b2; --faint:#6b7483;
  --border:#252a35; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --seg-track:var(--bg-2); --seg-edge:var(--border); --seg-ink:var(--muted); --seg-on:var(--surface); --seg-on-ink:var(--text); --seg-on-shadow:0 1px 3px rgba(15,23,42,.12);
  --warn:#f59e0b; --warn-soft:rgba(245,158,11,.12); --bad:#f87171; --bad-soft:rgba(248,113,113,.10); --info:#7aa7d9;
  --board-bg:#161a23;
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 30px 70px -10px rgba(0,0,0,.7);
  --case:#0e1017; --case-edge:#232735; --stage-a:#161a23; --stage-b:#0f1218;
  --case-light:#9aa1b0; --case-light-edge:#aeb5c3;
  color-scheme:dark;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
[hidden] { display:none !important; }
.wrap { max-width:1240px; margin:0 auto; padding:0 24px; }
@media (max-width:600px) { .wrap { padding:0 16px; } }
p { margin:0 0 .8em; max-width:70ch; }
button, select, input, textarea { font:inherit; color:inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.topbar.titled .wrap { height:70px; }
.topbar.titled .nav { flex:none; }
.bartitle { display:flex; align-items:center; gap:24px; min-width:0; }
.wordmark { margin:0; line-height:0; }
.bartitle .wordmark svg { width:auto; height:46px; overflow:visible; }
.topbar.titled .brand { gap:10px; font-size:13px; font-weight:500; line-height:1.3; color:var(--muted); text-align:left; }
.topbar.titled .brand svg { flex:none; height:50px; width:39px; color:var(--text); }
.topbar.titled .brand .lines { display:flex; flex-direction:column; white-space:nowrap; }
.topbar.titled .brand s { text-decoration-color:var(--accent); text-decoration-thickness:1.5px; }
.topbar.titled .brand ins { display:inline-block; text-decoration:none; color:var(--accent); font-weight:700; transform:rotate(-4deg); }
@media (max-width:1100px) { .bartitle { gap:14px; } .bartitle .wordmark svg { height:38px; } }
@media (max-width:900px) { .topbar.titled .brand .lines { display:none; } .topbar.titled .brand svg { height:40px; width:31px; } }
@media (max-width:760px) { .bartitle .wordmark svg { height:32px; } }
@media (max-width:520px) { .topbar.titled .brand { display:none; } .bartitle .wordmark svg { height:26px; } }

.intro { padding:28px 0 8px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 460px); gap:16px 32px; align-items:center; }
@media (max-width:860px) { .intro { grid-template-columns:minmax(0, 1fr); } }
.intro-sample { margin:0; }
.intro-sample .board { padding:10px; border-radius:12px; }
.intro-sample img { display:block; width:100%; height:auto; }
.intro-sample figcaption { margin-top:6px; font-size:12.5px; color:var(--faint); text-align:right; }
.intro-sample img.render { border-radius:12px; }
.intro-sample .enlarge img.render { grid-area:1 / 1; opacity:0; transition:opacity 1.2s ease; }
.intro-sample .enlarge img.render.shown { opacity:1; }
.intro-sample figcaption { display:grid; }
.intro-sample figcaption .words { grid-row:1; visibility:hidden; opacity:0; transition:opacity 1.2s ease, visibility 1.2s; }
.intro-sample figcaption .words.shown { visibility:visible; opacity:1; }
.intro-sample .pics { position:relative; }
.intro-sample .arr { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:color-mix(in srgb, var(--surface) 90%, transparent); color:var(--text); cursor:pointer; display:grid; place-items:center; padding:0; box-shadow:var(--shadow); opacity:0; transition:opacity .15s; }
.intro-sample .arr svg { width:16px; height:16px; }
.intro-sample .arr.prev { left:6px; }
.intro-sample .arr.next { right:6px; }
.intro-sample .pics:hover .arr, .intro-sample .pics:focus-within .arr { opacity:1; }
@media (hover:none) { .intro-sample .arr { opacity:1; } }
.intro-sample figcaption { grid-template-columns:auto minmax(0, 1fr); column-gap:12px; }
.intro-sample figcaption .words { grid-column:2; }
.intro-sample .pips { grid-area:1 / 1; align-self:start; margin-top:6px; display:flex; gap:5px; }
.intro-sample .pips i { width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.35; transition:opacity .2s; }
.intro-sample .pips i.on { opacity:1; }
.intro-sample[data-manual] .enlarge img.render, .intro-sample[data-manual] figcaption .words { transition-duration:.25s; }
.intro-sample .credit { display:block; font-size:11.5px; }
.intro-sample .enlarge { display:grid; border-radius:12px; cursor:zoom-in; }
.intro-sample .enlarge:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
dialog.lightbox { border:0; padding:0; background:transparent; max-width:min(1500px, 96vw); width:100%; color:#e8ebf1; }
dialog.lightbox::backdrop { background:rgba(6,7,10,.9); }
dialog.lightbox img { display:block; max-width:100%; max-height:78vh; width:auto; height:auto; margin:0 auto; border-radius:12px; }
.lb-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 4px 0; }
.lb-bar .cap { font-size:15px; font-weight:500; }
.lb-bar .credit { font-size:12.5px; color:#9aa3b2; }
.lb-bar .spacer { flex:1; }
.lb-bar .btn { background:transparent; color:#fff; border-color:rgba(255,255,255,.25); box-shadow:none; padding:8px 16px; }
.intro h1 { font-size:clamp(24px, 3vw, 30px); letter-spacing:-.02em; line-height:1.2; margin:0 0 6px; font-weight:600; }
.intro .lede { color:var(--muted); font-size:16px; margin:0; }

.howto { margin:16px 0 0; }
.howto-top { display:flex; align-items:flex-end; gap:16px; }
.howto-words { flex:1; min-width:0; display:grid; }
.hw { grid-area:1 / 1; align-self:end; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease, visibility .45s; }
.hw.shown { opacity:1; visibility:visible; transform:none; }
.hw-step { display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.hw-title { display:block; font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.3; margin:1px 0 2px; }
.hw-line { display:block; color:var(--muted); font-size:15px; max-width:62ch; }
.howto-start { flex:none; }
.howto-line { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:10px; margin-top:12px; }
.dotline { position:relative; min-width:0; }
.dots { position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); }
.dotline .track { position:absolute; left:calc(100% / 12); right:calc(100% / 12); top:13px; height:3px; margin-top:-1.5px; border-radius:3px; background:var(--seg-edge); }
.dotline .fill { position:absolute; left:0; top:0; bottom:0; width:calc(100% * var(--fill, 0)); border-radius:3px; background:var(--accent); }
.dots li { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.dot { position:relative; width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; border-radius:999px; }
.dot i { display:grid; place-items:center; width:22px; height:22px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 2px var(--seg-edge); font-style:normal; font-size:12px; font-weight:700; color:var(--muted); transition:width .3s ease, height .3s ease, background .3s ease, box-shadow .3s ease, color .3s ease; }
.dot:hover i { box-shadow:inset 0 0 0 2px var(--muted); }
.dot.past i { background:var(--accent); box-shadow:none; color:var(--accent-ink); }
.dot.now i { width:26px; height:26px; font-size:13px; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); color:var(--accent-ink); }
.howto.playing .dot.now i { animation:howto-glow 2s ease-in-out infinite; }
@keyframes howto-glow { 50% { box-shadow:0 0 0 8px var(--accent-soft); } }
.nm { font-size:12.5px; font-weight:500; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; transition:color .3s; }
.dots li.on .nm { color:var(--text); font-weight:600; }
.howto-pause { width:26px; height:26px; padding:0; display:grid; place-items:center; border-radius:999px; border:1px solid var(--seg-edge); background:var(--surface); color:var(--muted); cursor:pointer; }
.howto-pause:hover { color:var(--text); border-color:var(--muted); }
.howto-pause svg { width:12px; height:12px; }
.howto-pause .play, .howto:not(.playing) .howto-pause .pause { display:none; }
.howto:not(.playing) .howto-pause .play { display:block; }
@media (max-width:600px) {
  .howto-top { flex-direction:column; align-items:stretch; }
  .howto-start { align-self:flex-start; }
  .hw-title { font-size:17px; }
  .nm { font-size:11px; }
}
@media (prefers-reduced-motion: reduce) { .hw { transform:none; } .howto.playing .dot.now i { animation:none; } }

.steps { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.step { background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
.step-head { margin:0; font-size:20px; letter-spacing:-.015em; font-weight:600; }
.step-head button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; padding:16px 24px; cursor:pointer; border-radius:20px; font-weight:inherit; letter-spacing:inherit; }
.step-head button:disabled { cursor:default; color:var(--faint); }
.step-head .num { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--bg-2); color:var(--muted); font-size:14px; font-weight:700; }
html:not([data-mode="dark"]) .step { border-color:var(--seg-edge); box-shadow:0 1px 2px rgba(15,23,42,.08), 0 6px 18px rgba(15,23,42,.08); }
html:not([data-mode="dark"]) .step-head button:disabled { color:var(--muted); }
html:not([data-mode="dark"]) .step:not(.done) .step-head button:disabled .num { color:var(--seg-ink); box-shadow:inset 0 0 0 1.5px var(--seg-edge); }
.step.done:not(.open) .step-head .num { font-size:0; }
.step.done:not(.open) .step-head .num::after { content:""; width:11px; height:6px; border-left:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:translateY(-3px) rotate(-45deg); }
.step.done .step-head button:disabled { color:var(--text); }
.step.skipped:not(.done) .step-head .summary { display:none; }
.step.open .step-head .num { background:var(--text); color:var(--bg); }
.step.done .step-head .num { background:var(--accent); color:var(--accent-ink); }
.step-head .summary { margin-left:auto; font-size:13.5px; font-weight:500; color:var(--muted); text-align:right; }
.step-body { padding:0 24px 20px; }
@media (max-width:600px) { .step-head button { padding:14px 18px; } .step-body { padding:0 18px 18px; } }
.help { color:var(--muted); margin:0 0 12px; }
.controls { display:flex; flex-direction:column; gap:12px; }
.controls:empty { display:none; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.next-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:14px; }
.layers-check { margin:6px 0 0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--bg-2); max-width:none; }
html:not([data-mode="dark"]) #layers-no { border-color:var(--seg-edge); }
#layers-no:hover { border-color:var(--accent); }

.btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:600; text-decoration:none; border-radius:999px; padding:11px 20px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:0 6px 20px -6px var(--accent); }
.btn.dark { background:var(--seg-on); color:var(--seg-on-ink); border-color:transparent; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.controls > .btn { align-self:flex-start; }

.seg { display:inline-flex; gap:2px; padding:3px; background:var(--seg-track); border:1px solid var(--seg-edge); border-radius:999px; flex-wrap:wrap; }
.seg button { font-size:13px; font-weight:500; color:var(--seg-ink); background:transparent; border:0; border-radius:999px; padding:6px 14px; cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--seg-on); color:var(--seg-on-ink); box-shadow:var(--seg-on-shadow); }
select, input[type="text"], input[type="search"], textarea { font-size:14px; padding:7px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); max-width:100%; }
label.field { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
label.field select, label.field input, label.field textarea { text-transform:none; letter-spacing:0; font-weight:400; color:var(--text); }
.label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.tag { display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; line-height:1; padding:4px 7px; border-radius:999px; color:var(--muted); border:1px dashed var(--faint); white-space:nowrap; }
.step-head .tag { margin-left:2px; }

html:not([data-mode="dark"]) .btn:not(.primary):not(.dark) { border-color:var(--seg-edge); }
html:not([data-mode="dark"]) .btn:not(.primary):not(.dark):hover:not(:disabled) { border-color:var(--muted); }
html:not([data-mode="dark"]) select,
html:not([data-mode="dark"]) input[type="text"],
html:not([data-mode="dark"]) input[type="search"],
html:not([data-mode="dark"]) textarea { background-color:var(--surface); border-color:#aeb5c1; box-shadow:0 1px 2px rgba(15,23,42,.07); }
html:not([data-mode="dark"]) select:hover, html:not([data-mode="dark"]) input:hover, html:not([data-mode="dark"]) textarea:hover { border-color:var(--muted); }
html:not([data-mode="dark"]) select { appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px; }
html:not([data-mode="dark"]) .drop { background:var(--bg-2); border:2px dashed #aeb5c1; padding:20px; }
html:not([data-mode="dark"]) .drop.over { border-color:var(--accent); background:var(--accent-soft); }
html:not([data-mode="dark"]) .drop-words { color:var(--seg-ink); }
html:not([data-mode="dark"]) label.field, html:not([data-mode="dark"]) .label { color:var(--muted); }
.corner-picks { padding:14px 16px 16px; border-radius:12px; background:var(--bg-2); border:1px solid var(--border); }
html:not([data-mode="dark"]) .corner-picks { border-color:var(--seg-edge); }
.corner-picks select.empty { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.note { font-size:13.5px; color:var(--muted); }
details.fold > summary { cursor:pointer; color:var(--muted); font-size:13.5px; }

.warnings { display:flex; flex-direction:column; gap:6px; margin:0 0 10px; }
.warnings:empty { display:none; }
.warning { font-size:13.5px; padding:7px 12px; border-radius:8px; background:var(--warn-soft); border-left:3px solid var(--warn); }
.warning.stop { background:var(--bad-soft); border-left-color:var(--bad); }
.warning.note { background:var(--bg-2); border-left-color:var(--faint); color:var(--muted); }
.warning > .info, .warning > .linkbtn { margin-left:6px; }
.warnings { gap:12px; }
.warn-group, .warn-group details.more-warnings { display:flex; flex-direction:column; gap:6px; }
.warn-head { font-size:13px; font-weight:600; color:var(--muted); text-align:left; }
.warnings .warning { position:relative; padding:7px 12px 7px 36px; background:var(--bg-2); border:1px solid var(--border); color:var(--text); }
.warnings .warning.stop { background:var(--bad-soft); border-color:var(--bad-soft); }
.warnings .warning.note { color:var(--muted); }
.warn-icon { position:absolute; left:12px; top:9px; width:16px; height:16px; }
.warning.stop .warn-icon { color:var(--bad); }
.warning.warn .warn-icon { color:var(--warn); }
.warning.note .warn-icon { color:var(--info); }
.warn-fold > summary, .warn-none { min-height:24px; line-height:24px; margin:0; font-size:13.5px; }
.warn-fold > .warn-body { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.warn-kind { display:inline-flex; align-items:center; gap:5px; margin-right:14px; vertical-align:middle; }
.warn-kind .warn-icon { position:static; width:15px; height:15px; }
.warn-kind.stop { color:var(--bad); font-weight:600; }
.warn-kind.warn .warn-icon { color:var(--warn); }
.warn-kind.note .warn-icon { color:var(--info); }

.board-area { margin:16px 0 0; }
.stage { background:radial-gradient(120% 90% at 50% 0%, var(--stage-b), var(--stage-a)); padding:24px 32px 32px; margin:0 -24px -20px; border-top:1px solid var(--border); border-radius:0 0 19px 19px; }
@media (max-width:600px) { .stage { padding:18px 12px 24px; margin:0 -18px -18px; } }
.board-area.in-step-1 { margin:4px 0 0; }
.board-area.in-step-1 .warnings { display:none; }
.board-area.in-step-1 .stage { margin:0 -24px; border-bottom:1px solid var(--border); border-radius:0; padding-top:16px; padding-bottom:20px; }
@media (max-width:600px) { .board-area.in-step-1 .stage { margin:0 -18px; } }
.board-area.next-below .stage { margin-bottom:0; border-bottom:1px solid var(--border); border-radius:0; }
.board-area.next-below .warnings { margin:16px 0 0; }
.board { background:var(--case); border:1px solid var(--case-edge); border-radius:16px; padding:14px; margin:0 auto; max-width:1100px; box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06); }
.board.light { background:var(--case-light); border-color:var(--case-light-edge); }
.board svg { display:block; width:100%; height:auto; max-height:70vh; }

footer { margin:48px 0 0; padding:28px 0 40px; border-top:1px solid var(--border); color:var(--faint); font-size:12.5px; }
footer .meta { font-family:var(--mono); font-size:11.5px; margin-top:8px; overflow-wrap:anywhere; }
footer .meta a { color:var(--muted); }
footer div + div { margin-top:6px; }

.drop { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:18px; border:1.5px dashed var(--border); border-radius:var(--radius-sm); background:var(--bg); }
.drop.over { border-color:var(--accent); background:var(--accent-soft); }
.drop-words { color:var(--muted); }
.drop-icon { flex:none; width:24px; height:24px; color:var(--muted); }
.drop.over .drop-icon { color:var(--accent); }
.bring { display:flex; flex-direction:column; gap:12px; }
.bring.compact { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.bring.compact .or::before, .bring.compact .or::after { display:none; }
.bring.compact .drop { flex:1 1 420px; padding:6px 6px 6px 14px; gap:8px; }
.bring.compact .btn { padding:8px 16px; }
.bring.compact .drop-icon { width:20px; height:20px; }
.under-board { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.under-board:not(:has(> :not([hidden]):not(:empty))) { display:none; }
.board-note { margin:0 0 0 auto; align-self:center; max-width:none; flex:1 1 320px; text-align:right; }
.or { display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; font-weight:600; letter-spacing:.08em; }
.or::before, .or::after { content:""; flex:1; border-top:1px solid var(--border); }
.examples { gap:8px; }
.read-status:empty { display:none; }
.read-status { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg-2); }
.read-what { font-weight:600; }
.linkbtn { background:none; border:0; padding:0; color:var(--accent); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.busy { opacity:.6; pointer-events:none; }
.search { display:flex; flex-direction:column; gap:6px; }
.results { list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:8px; }
.results:empty { display:none; }
.results li { padding:7px 10px; border-bottom:1px solid var(--border); cursor:pointer; overflow-wrap:anywhere; }
.results li:last-child { border-bottom:0; }
.results li:hover, .results li:focus-visible { background:var(--bg-2); }
.results li.note { cursor:default; }

.size-row { gap:8px 12px; }
.size-row > span { flex:1 1 220px; }
#layout-options:empty { display:none; }
.board [data-cap] { cursor:default; }

.layer-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.layer-list li { overflow-wrap:anywhere; }
.corner-picks { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; max-width:520px; }
label.field::first-letter { text-transform:uppercase; }

h3.sub { margin:8px 0 0; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.btn.toggle { font-size:13px; padding:6px 12px; }
.btn.toggle[aria-pressed="true"] { background:var(--text); color:var(--bg); border-color:var(--text); }
.marks-row { gap:6px; }

svg.caps .corner { fill:transparent; cursor:pointer; }
svg.caps .corner:hover { fill:rgba(255,255,255,.06); stroke:var(--accent); stroke-width:0.35; }
svg.caps .homing { fill:rgba(128,128,128,.55); }
svg.caps .face { fill:rgba(255,255,255,.07); stroke:rgba(0,0,0,.28); stroke-width:0.25; }
.board-area.homing-mode svg.caps .corner:hover, .board-area.homing-mode svg.caps .corner.selected { fill:transparent; stroke:none; }
.board-area.homing-mode svg.caps g[data-cap]:hover > .cap { stroke:var(--accent); stroke-width:0.6; }
.board-area.homing-mode svg.caps .homing { fill:var(--accent); }
.board-area.shape-mode svg.caps .corner:hover, .board-area.shape-mode svg.caps .corner.selected { fill:transparent; stroke:none; }
.board-area.shape-mode svg.caps g[data-cap]:hover > .cap, .board-area.shape-mode svg.caps g.picked > .cap { stroke:var(--accent); stroke-width:0.6; }
.shape-panel { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border-radius:12px; background:var(--bg-2); border:1px solid var(--border); }
html:not([data-mode="dark"]) .shape-panel { border-color:var(--seg-edge); }
.shape-for { display:inline-block; font-weight:600; }
.shape-panel .shape-hit { flex:1 1 100%; max-width:none; margin:0; position:relative; padding:7px 12px 7px 36px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:13.5px; }
.shape-panel .shape-hit .warn-icon { color:var(--info); }
.shape-for::first-letter { text-transform:uppercase; }
.shape-sides { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
.shape-side { font:inherit; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; padding:8px 10px 6px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--faint); cursor:pointer; transition:border-color .15s, color .15s; }
html:not([data-mode="dark"]) .shape-side { border-color:var(--seg-edge); }
.shape-side:hover { border-color:var(--muted); color:var(--muted); }
.shape-side svg { display:block; height:auto; max-width:100%; }
.shape-side path { fill:currentColor; fill-opacity:.14; }
.shape-side .shape-name { font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap; }
.shape-side[aria-pressed="true"], html:not([data-mode="dark"]) .shape-side[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.shape-side[aria-pressed="true"] path { fill-opacity:.28; }
.shape-side[aria-pressed="true"] .shape-name { color:var(--text); font-weight:600; }
svg.caps .unsized { fill:none; stroke:var(--warn); stroke-width:0.8; }
svg.caps .label.toolong { stroke:#e11d48; stroke-width:0.18; }

.edit-panel { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); max-width:560px; }
.edit-panel textarea { width:100%; font-size:16px; resize:vertical; }
.signs-field { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
html:not([data-mode="dark"]) .signs-field { color:var(--muted); }
.signs { display:flex; flex-wrap:wrap; gap:4px; }
.signs .sign { min-width:34px; height:34px; padding:0 6px; font-size:18px; line-height:1; text-transform:none; letter-spacing:0; font-weight:400; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:6px; cursor:pointer; }
.signs .sign:hover:not(:disabled) { border-color:var(--text); }
.signs .sign:disabled { opacity:.3; cursor:not-allowed; }
.signs .sign:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#edit-live.bad { color:var(--bad); }
.change-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13.5px; }
.edit-row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.edit-row > .edit-panel { flex:0 1 560px; min-width:0; }
.edit-row > #changes { flex:1 1 280px; min-width:0; max-height:420px; overflow-y:auto; padding-right:4px; }
.edit-row > #changes h3.sub { margin-top:0; position:sticky; top:0; background:var(--surface); padding-bottom:6px; }
svg.caps:focus { outline:2px solid var(--accent); outline-offset:4px; }
svg.caps .corner.selected { fill:rgba(255,255,255,.10); stroke:var(--accent); stroke-width:0.6; }
details.more-warnings { display:flex; flex-direction:column; gap:6px; }
details.more-warnings > .warning { margin-top:6px; }

.return { margin:16px 0 0; padding:14px 18px; border-radius:var(--radius); background:var(--accent-soft); border:1px solid var(--border); }
.return p { margin:0 0 10px; }

.names { align-items:flex-start; }
.names .field { flex:1 1 220px; }
.names input { width:100%; }
.design-row { gap:8px 12px; }
#send-form { display:inline-flex; margin:0; }

.controls > .seg, .controls > .row > .seg { align-self:flex-start; }
.kc-col-h { font-size:12px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.06em; color:var(--faint) !important; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color:var(--accent); }

.info { position:relative; display:inline-flex; vertical-align:middle; }
.info-btn { display:inline-grid; place-items:center; width:20px; height:20px; padding:0; border-radius:999px; border:1.5px solid var(--seg-edge); background:var(--surface); color:var(--muted); font:italic 700 12px/1 Georgia, "Times New Roman", serif; text-transform:none; letter-spacing:0; cursor:pointer; }
.info-btn:hover, .info-btn[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.info-box { position:absolute; top:calc(100% + 8px); left:-8px; z-index:30; width:max-content; max-width:min(360px, calc(100vw - 32px)); padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--seg-edge); box-shadow:var(--shadow-lg); color:var(--text); font-size:13.5px; font-weight:400; line-height:1.5; text-transform:none; letter-spacing:0; text-align:left; white-space:normal; }
.info-box p { margin:0 0 .6em; }
.info-box p:last-child { margin:0; }
h3.sub .info, .kc-col-h .info { margin-left:6px; }
.help .info { margin-left:2px; }
label.row.check { gap:8px; cursor:pointer; }

.legend { display:flex; align-items:center; gap:14px; margin:14px 0 0; }
.board-note-3 { margin:10px 0 0 auto; text-align:right; max-width:none; }
.capside { display:inline-flex; align-items:center; color:var(--muted); }
.capside svg { display:block; height:34px; width:auto; }
.legend-cap { flex:none; filter:drop-shadow(0 1px 2px rgba(15,23,42,.25)); }
.legend-num { font:700 11px/1 system-ui, "Segoe UI", sans-serif; }
.legend-title { margin:0 0 4px; font-size:13.5px; color:var(--muted); }
.legend-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13.5px; }
.legend-list li { display:flex; align-items:center; gap:6px; }
.legend-dot { width:12px; height:12px; border-radius:999px; border:2px solid; flex:none; }
.legend-words { display:inline-block; }
.legend-words::first-letter { text-transform:uppercase; }

label.look-check { gap:10px; align-items:center; }
.look-pic { display:inline-flex; flex:none; }
.look-pic svg { display:block; filter:drop-shadow(0 1px 1.5px rgba(15,23,42,.25)); }

.font-pick { position:relative; }
.font-now { display:flex; align-items:center; gap:12px; min-width:340px; max-width:100%; padding:7px 12px; border-radius:10px; border:1px solid var(--seg-edge); background:var(--surface); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.font-now:hover, .font-now[aria-expanded="true"] { border-color:var(--accent); }
.font-now .font-name { font-size:13.5px; color:var(--muted); white-space:nowrap; }
.font-now .font-sample { flex:1; min-width:0; font-size:19px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.font-arrow { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--muted); }
.font-list { position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:max(100%, 420px); max-width:calc(100vw - 32px); max-height:360px; overflow:auto; margin:0; padding:6px; list-style:none; background:var(--surface); border:1px solid var(--seg-edge); border-radius:12px; box-shadow:var(--shadow-lg); }
.font-list:focus { outline:none; }
.font-list li { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.font-list li:hover, .font-list li.active { background:var(--bg-2); }
.font-list li[aria-selected="true"] { box-shadow:inset 3px 0 0 var(--accent); }
.font-list .font-name { font-size:12.5px; color:var(--muted); }
.font-list .font-sample { font-size:21px; line-height:1.25; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:480px) { .font-now { min-width:0; width:100%; } }
#font-controls > .field { display:flex; flex-direction:column; gap:6px; min-width:0; max-width:100%; }
.font-pick { min-width:0; max-width:100%; }
#font-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
html:not([data-mode="dark"]) #font-label { color:var(--muted); }