/* Shotmark editor — PostHog-flavoured chrome.
   Their real tokens: cream #EEEFE9 ground, near-white panels, ink #222320, and
   the signature move — every control gets a 1.5px border in a darker tint of
   its own fill, at 6-8px radius. Single-look on purpose: the canvas is the
   content, so the UI around it stays one deliberate palette on any host. */
@font-face{
  font-family:Nunito;
  src:url('fonts/nunito-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
:root{
  --cream:#EEEFE9;
  --panel:#FDFDF8;
  --stage:#E5E7E0;
  --ink:#222320;
  --ink-2:#65675E;
  --muted:#73756B;
  --hair:#D2D3CC;
  --edge:#4D4F46;

  --amber:#CD8407;      --amber-edge:#B17816;   /* primary action */
  --blue:#1D4AFF;       --blue-edge:#1636CC;    /* selection, on canvas and off */
  --danger:#DB3707;     --danger-edge:#A62905;
  --yellow:#F7A501;

  --font:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:400 13.5px/1.45 var(--font);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
#app{height:100%; display:flex; flex-direction:column}

/* ---------- toolbars ---------- */
.bar{
  display:flex; align-items:center; gap:10px; padding:9px 12px; flex:0 0 auto; flex-wrap:wrap;
  background:var(--cream); border-bottom:1.5px solid var(--edge);
}
.grp{display:flex; align-items:center; gap:4px}
.sep{width:1.5px; align-self:stretch; background:var(--hair); margin:2px 6px}
.spacer{flex:1 1 auto}

.tbtn{
  width:31px; height:29px; border-radius:6px; border:1.5px solid transparent; background:transparent;
  color:var(--ink-2); display:grid; place-items:center; position:relative; padding:0;
  cursor:pointer; font:inherit;
}
.tbtn svg{width:16px; height:16px; display:block; pointer-events:none}
.tbtn:hover{background:var(--panel); border-color:var(--hair); color:var(--ink)}
.tbtn.on{background:var(--ink); border-color:#000; color:var(--cream)}
.tbtn.on:hover{background:var(--ink); border-color:#000; color:var(--cream)}
.tbtn:disabled{opacity:.3; cursor:default}
.tbtn:disabled:hover{background:transparent; border-color:transparent; color:var(--ink-2)}
.tbtn .k{
  position:absolute; right:2.5px; bottom:1px; font:600 8.5px/1 var(--mono);
  color:currentColor; opacity:.55; pointer-events:none;
}

.sw{
  width:18px; height:18px; border-radius:5px; padding:0; cursor:pointer;
  border:1.5px solid rgba(34,35,32,.35);
}
.sw.on{box-shadow:0 0 0 2px var(--cream),0 0 0 3.5px var(--ink)}

.stroke{
  display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:6px;
  background:var(--panel); border:1.5px solid var(--hair);
  font:600 11px/1 var(--mono); color:var(--ink); white-space:nowrap;
}
.stroke input[type=range]{width:74px; accent-color:var(--ink); height:14px; cursor:pointer}
#strokeVal{min-width:34px; text-align:right; font-variant-numeric:tabular-nums}

.bar.sub{background:var(--panel); border-bottom:1.5px solid var(--hair)}
.barlabel{font-weight:800; font-size:12.5px; letter-spacing:-.01em; color:var(--ink); padding-right:2px}
.barnote{font:500 11px/1 var(--mono); color:var(--muted); font-variant-numeric:tabular-nums}
.sw.bg{width:22px; height:22px; border-radius:6px}
.sw.bg.none{
  background-image:
    linear-gradient(45deg,#C9CAC2 25%,transparent 25%,transparent 75%,#C9CAC2 75%),
    linear-gradient(45deg,#C9CAC2 25%,transparent 25%,transparent 75%,#C9CAC2 75%);
  background-size:8px 8px; background-position:0 0,4px 4px; background-color:#FDFDF8;
}
.seg-wrap{display:flex; border:1.5px solid var(--hair); border-radius:6px; overflow:hidden; background:var(--panel)}
.seg{padding:6px 11px; border:0; background:transparent; font:600 11.5px/1 var(--font); color:var(--ink-2); cursor:pointer}
.seg + .seg{border-left:1.5px solid var(--hair)}
.seg:hover{background:#fff; color:var(--ink)}
.seg.on{background:var(--ink); color:var(--cream)}
.seg.on:hover{background:var(--ink); color:var(--cream)}

.zoomsel{
  background:var(--panel); color:var(--ink); border:1.5px solid var(--hair);
  border-radius:6px; padding:5px 6px; font:600 11.5px/1 var(--mono); cursor:pointer;
}
.pill{
  padding:6px 13px; border-radius:6px; font:600 12.5px/1.2 var(--font); cursor:pointer;
  background:var(--panel); color:var(--ink); border:1.5px solid var(--hair); white-space:nowrap;
}
.pill:hover{background:#fff; border-color:var(--ink-2)}
.pill.on{background:var(--ink); border-color:#000; color:var(--cream)}
.pill.on:hover{background:var(--ink); border-color:#000; color:var(--cream)}
.pill.go{background:var(--amber); border-color:var(--amber-edge); color:#fff}
.pill.go:hover{background:#b87507; border-color:var(--amber-edge)}
.pill.danger{background:var(--danger); border-color:var(--danger-edge); color:#fff}
.pill.danger:hover{background:#c23106; border-color:var(--danger-edge)}
.pill:disabled{opacity:.35; cursor:default}
.pill:disabled:hover{background:var(--panel); border-color:var(--hair)}
.pill.go:disabled:hover{background:var(--amber); border-color:var(--amber-edge)}
.pill em{font-style:normal; opacity:.7; margin-left:4px; font-family:var(--mono); font-size:11px}

/* ---------- stage ---------- */
.stage{
  flex:1 1 auto; min-height:0; overflow:auto; padding:26px; position:relative; display:flex;
  background:
    repeating-conic-gradient(rgba(34,35,32,.045) 0% 25%, transparent 0% 50%) 0 0/16px 16px,
    var(--stage);
}
/* outline, not border: a border would grow the box and shift every pointer
   coordinate the canvas reports by 1.5px. */
#cv{
  display:block; margin:auto; flex:0 0 auto; touch-action:none;
  outline:1.5px solid var(--edge);
  box-shadow:0 8px 26px -10px rgba(34,35,32,.45);
}

.drop{
  margin:auto; max-width:560px; width:100%;
  background:var(--panel); border:1.5px dashed #B9BBB2; border-radius:10px; padding:44px 28px;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  color:var(--muted);
}
.drop .big{font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.015em}
.drop .sub{font-size:13px; max-width:46ch; color:var(--ink-2)}
.dropways{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:4px}
.dropway{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2)}
.dropway.asbtn{background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--ink-2)}
.dropway.asbtn:hover{color:var(--ink)}
.kbd{
  font:600 11px/1 var(--mono); padding:3px 7px; border-radius:5px;
  background:var(--cream); border:1.5px solid var(--hair); color:var(--ink);
}

.dropveil{
  position:absolute; inset:0; background:rgba(238,239,233,.86); border:2.5px dashed var(--blue);
  display:grid; place-items:center; font-size:16px; font-weight:800; color:var(--ink);
  pointer-events:none; z-index:5;
}

/* ---------- status ---------- */
.status{
  flex:0 0 auto; display:flex; gap:10px; align-items:center; padding:6px 12px;
  border-top:1.5px solid var(--edge); background:var(--cream);
  font:500 11px/1.4 var(--mono); color:var(--muted);
}
.status .dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--yellow); border:1.5px solid #C98604;
}
#statusRight{color:var(--ink-2)}

/* ---------- confirm dialog ---------- */
.modal{
  position:fixed; inset:0; z-index:30; display:grid; place-items:center;
  background:rgba(34,35,32,.42); padding:24px;
}
.sheet{
  width:min(420px,100%); background:var(--panel); border:1.5px solid var(--edge);
  border-radius:10px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 24px 60px -24px rgba(34,35,32,.6);
}
.sheet h2{margin:0; font-size:17px; font-weight:800; letter-spacing:-.015em; color:var(--ink)}
.sheet p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.sheet .acts{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:46px; transform:translateX(-50%);
  background:var(--ink); border:1.5px solid #000; color:var(--cream);
  padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; z-index:20;
  box-shadow:0 12px 30px -12px rgba(34,35,32,.7);
}

:where(button,select,input,[tabindex]):focus-visible{outline:2.5px solid var(--blue); outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:pop .18s ease-out}
  @keyframes pop{from{opacity:0; transform:translate(-50%,6px)}}
}