:root {
  --bg: #161616;
  --panel: #1b1b1a;
  --raise: #232322;
  --line: #2c2c2a;
  --line-2: #3a3a37;
  --text: #f2f2f0;
  --muted: #8f8f8a;
  --dim: #70706e;
  --red: #dc143c;
  --radius: 10px;
  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.5 var(--font); }
body { -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.app { display: grid; grid-template-columns: 340px 1fr; height: 100dvh; }

/* ---------- panel ---------- */
.panel { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.brand { padding: 22px 22px 6px; }
.brand h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; }
.brand h1::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--text); box-shadow: 14px 0 0 -2.5px var(--dim), 26px 0 0 -1px var(--red); margin-right: 26px; }
.brand p { margin: 4px 0 0; color: var(--muted); }

form { flex: 1; }
.group { padding: 16px 22px; border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; }
.group h2, details.group summary { margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.drop { display: grid; gap: 2px; place-items: center; text-align: center; padding: 22px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s;
  background-image: radial-gradient(circle, #2e2e2c 1.2px, transparent 1.6px); background-size: 12px 22px; background-position: center; }
.drop:hover, .drop.is-over { border-color: var(--text); background-color: #1f1f1e; }
.drop-title { font-weight: 600; }
.drop-sub { color: var(--muted); font-size: 12px; }
.drop.has-file .drop-title { word-break: break-all; }
.link { margin-top: 10px; padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link:hover { color: var(--text); }

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); }
.field output { color: var(--text); font-variant-numeric: tabular-nums; }

/* range: a thin rule with a bright dot */
input[type="range"] { width: 100%; height: 18px; margin: 0; background: transparent; appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-2); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; margin-top: -5.5px; border-radius: 50%; background: var(--text); border: 0; transition: transform .1s; }
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--text); border: 0; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }

/* segmented radios */
.seg { display: flex; margin: 0 0 12px; padding: 3px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg); min-width: 0; position: relative; }
.seg legend { position: absolute; top: -20px; left: 0; padding: 0; color: var(--muted); font-size: 12px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { flex: 1; text-align: center; padding: 6px 4px; border-radius: 6px; cursor: pointer; color: var(--muted); white-space: nowrap; transition: background .12s, color .12s; }
.seg label:hover { color: var(--text); }
.seg input:checked + label { background: var(--raise); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg input:focus-visible + label { outline: 2px solid var(--text); outline-offset: -2px; }
.seg-5 label { font-size: 12px; padding-inline: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 30px; }
.row2 + .seg { margin-top: 20px; }
.seg-top { margin-top: 22px; }
h2 + .seg-top { margin-top: 30px; }
.hint { margin: -4px 0 14px; color: var(--muted); font-size: 12px; min-height: 18px; }

.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); }
.toggle input { appearance: none; width: 30px; height: 16px; border-radius: 9px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.toggle input:checked { background: #3b1019; }
.toggle input:checked::after { transform: translateX(14px); background: var(--red); }
.toggle:hover span { color: var(--text); }

details.group summary { cursor: pointer; margin: 0; list-style: none; display: flex; justify-content: space-between; }
details.group summary::after { content: "+"; }
details[open].group summary::after { content: "−"; }
details[open].group summary { margin-bottom: 12px; }
textarea { width: 100%; height: 220px; resize: vertical; padding: 10px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; font-size: 7px; line-height: 1.15; white-space: pre; overflow: auto; }
.map-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.note { color: var(--muted); font-size: 11px; }
.note b { color: var(--text); font-weight: 500; }

.map-btns { display: flex; gap: 6px; }

/* ink swatches: one dot per colour */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.swatches[hidden] { display: none; }
.swatches > input { position: absolute; opacity: 0; pointer-events: none; }
.swatches > label { width: 28px; height: 28px; border-radius: 50%; background: var(--c); cursor: pointer; position: relative; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); transition: transform .12s; }
.swatches > label:hover { transform: scale(1.08); }
.swatches > input:checked + label { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
.swatches > input:focus-visible + label { outline: 2px solid var(--text); outline-offset: 4px; }
.swatches > label.custom { background: conic-gradient(#ff6b6b, #ffd36b, #6bff95, #6bd8ff, #a66bff, #ff6bd0, #ff6b6b); }
.swatches > input:checked + label.custom { background: var(--c); }
.swatches > label.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.field[data-color][hidden] { display: none; }

/* GIF and video sources: dots only, no photo effects */
.media-note { display: none; }
body.media .media-note { display: block; margin: 0 0 4px; }
body.media .photo-only { display: none !important; }
body.media #motion .seg-top { margin-top: 26px; }
#live { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#live[hidden], #view[hidden] { display: none; }

/* ---------- full-screen map editor ---------- */
dialog#editor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); }
dialog#editor::backdrop { background: rgb(0 0 0 / .6); }
.ed { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.ed-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ed-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-bar .seg { margin: 0; }
.ed-mode label { padding-inline: 12px; }
.ed-brush label { display: flex; align-items: center; gap: 7px; padding-inline: 10px; }
.ed-size label { min-width: 30px; }
.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.sw-b { background: #f2f2f0; } .sw-d { background: #70706e; width: 6px; height: 6px; } .sw-w { background: #fff; box-shadow: 0 0 0 2px #444; }
.sw-e { border: 1px dashed var(--muted); }
.btn.icon { padding-inline: 10px; }
.zoom { display: flex; align-items: center; gap: 2px; }
.zoom output { min-width: 48px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-body { position: relative; min-height: 0; }
.ed-scroll { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: 24px; scrollbar-color: var(--line-2) transparent; }
.ed-scroll canvas { display: block; cursor: crosshair; touch-action: none; box-shadow: 0 0 0 1px var(--line); }
#ed-text { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 24px; resize: none; font-size: 14px; line-height: 1.2; background: var(--bg); }
.ed-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; background: var(--panel); }
.ed[data-mode="paint"] .text-only, .ed[data-mode="text"] .paint-only { display: none !important; }

.field[hidden] { display: none; }

/* ---------- stage ---------- */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage-inner { flex: 1; min-height: 0; display: grid; place-items: center; padding: 28px; }
.frame { --ar: 1.7778; aspect-ratio: var(--ar); width: min(100%, calc((100dvh - 140px) * var(--ar))); background: var(--bg); box-shadow: 0 0 0 1px var(--line); border-radius: 4px; overflow: hidden; position: relative; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.frame.busy::after { content: ""; position: absolute; inset: 0; background: rgb(22 22 22 / .55); }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px 18px; flex-wrap: wrap; }
#status { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; }
#status.err { color: #ff7a8f; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { padding: 8px 14px; background: var(--raise); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.btn.primary:hover { background: #fff; }
.btn:disabled { opacity: .5; cursor: progress; }

.dropover { position: fixed; inset: 0; display: none; place-items: center; background: rgb(22 22 22 / .86); z-index: 10; pointer-events: none; }
.dropover span { padding: 28px 40px; border: 1px dashed var(--text); border-radius: 14px; font-weight: 600; font-size: 15px; }
body.dragging .dropover { display: grid; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; height: auto; }
  .panel { order: 2; border-right: 0; border-top: 1px solid var(--line); overflow: visible; }
  .stage { order: 1; position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
  .stage-inner { padding: 16px 16px 8px; }
  .frame { width: min(100%, calc(52dvh * var(--ar))); }
  .bar { padding: 4px 16px 12px; gap: 8px; }
  .brand, .group { padding-inline: 16px; }
  .ed-bar { padding: 10px; }
  .ed-brush label { padding-inline: 6px; font-size: 12px; }
  .btn { padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }