/* The workspace and control language continue /metaball_next/. */
:root { color-scheme: dark; --ui-bg:#1a1a1c; --ui-panel:#111113; --ui-line:#303035; --ui-text:#f2f2f2; --ui-dim:#a1a1aa; --ui-input:#1b1b1e; --focus:#bdd9ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ui-bg); color:var(--ui-text); font:13px/1.45 "Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button,select,input[type=number] { border:1px solid var(--ui-line); border-radius:7px; background:var(--ui-input); color:var(--ui-text); }
button { min-height:36px; padding:7px 11px; cursor:pointer; font-weight:550; }
button:hover:not(:disabled) { border-color:#74747e; background:#252529; }
button:disabled { opacity:.38; cursor:default; }
button.primary,button[aria-pressed=true] { color:#111113; background:var(--ui-text); border-color:var(--ui-text); }
button.primary:hover,button[aria-pressed=true]:hover { background:#fff; }
button.full { width:100%; }
input,select { caret-color:var(--focus); }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
::selection { background:#bdd9ff; color:#111; }
a { color:inherit; text-underline-offset:3px; }
input[type=range],input[type=checkbox] { accent-color:#f2f2f2; cursor:pointer; }
input[type=range] { width:100%; height:20px; margin:0; }
select { min-height:36px; width:100%; padding:6px 8px; }
.app { height:100dvh; display:flex; overflow:hidden; }
.workspace { flex:1; min-width:0; display:flex; flex-direction:column; }
.toolbar { min-height:66px; padding:14px 24px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.identity,.toolbar-actions { display:flex; align-items:center; gap:8px; }
.identity { gap:12px; }
.identity a { font-size:11px; color:var(--ui-dim); text-decoration:none; border-right:1px solid var(--ui-line); padding-right:12px; }
h1 { font-size:16px; margin:0; font-weight:650; letter-spacing:-.02em; }
.identity span { color:var(--ui-dim); font-size:12px; }
.icon-button { width:36px; padding:8px; }
.icon-button svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:14px 32px 20px; }
#frameWrap { flex:none; position:relative; box-shadow:0 8px 40px #0004; background:#fff; }
#artboard { width:100%; height:100%; display:block; overflow:hidden; touch-action:none; user-select:none; }
#artboard:focus-visible { outline-offset:5px; }
#artboard .pin { cursor:crosshair; }
#artboard .pin:hover .pin-hit { fill:#538ff512; }
#artboard .pin:focus { outline:none; }
#artboard .pin:focus-visible .pin-hit { stroke:#2671bd; stroke-width:2; vector-effect:non-scaling-stroke; }
#artboard .pin-hit { fill:transparent; }
#artboard .pin-number { pointer-events:none; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:600; text-anchor:middle; dominant-baseline:central; }
.workspace-footer { min-height:48px; padding:0 24px 15px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; color:var(--ui-dim); font-size:11px; }
.workspace-footer p { margin:0; max-width:65ch; }
#frameInfo { white-space:nowrap; font-variant-numeric:tabular-nums; }
.panel { flex:none; width:300px; padding:24px 20px; background:var(--ui-panel); border-left:1px solid var(--ui-line); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#484850 var(--ui-panel); }
.control-section { display:flex; flex-direction:column; gap:10px; margin-bottom:25px; }
h2 { font-size:11px; text-transform:uppercase; color:var(--ui-dim); letter-spacing:.06em; font-weight:600; margin:0 0 1px; }
h2 span { color:var(--ui-text); margin-left:5px; }
.hint { font-size:12px; line-height:1.5; color:var(--ui-dim); margin:0; }
.shape-list { display:flex; flex-direction:column; gap:6px; }
.shape-row { display:flex; border:1px solid var(--ui-line); border-radius:7px; }
.shape-row.active { border-color:#e1e1e6; }
.shape-choice { display:flex; flex:1; gap:8px; align-items:center; min-width:0; border:0; background:transparent; text-align:left; }
.shape-choice span { flex:1; }
.shape-choice small { color:var(--ui-dim); font-size:10px; white-space:nowrap; }
.shape-choice i { width:13px; height:13px; border-radius:50%; border:1px solid #8888; flex:none; }
.delete-shape { padding:7px; border:0; background:transparent; min-width:32px; }
.delete-shape svg { display:block; width:14px; height:14px; stroke:var(--ui-dim); stroke-width:1.5; fill:none; }
.two-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.segments { display:flex; gap:4px; }
.segments button { flex:1; padding:7px 3px; min-width:0; }
/* Route numbers are editable positions, not fixed labels. */
.node-order-row { display:flex; gap:8px; align-items:center; font-size:12px; }
.node-order-row label { flex:1; }
.node-order-row input { width:55px; min-width:0; height:36px; padding:6px; text-align:center; font-variant-numeric:tabular-nums; }
.node-order-row input:disabled { opacity:.4; }
.node-order-row>span { color:var(--ui-dim); white-space:nowrap; font-size:11px; font-variant-numeric:tabular-nums; }
.range-control { display:grid; grid-template-columns:1fr auto; gap:5px 8px; font-size:12px; align-items:center; }
.range-control input { grid-column:1/-1; }
output { color:var(--ui-dim); font-size:11px; font-variant-numeric:tabular-nums; }
.number-pair { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:end; }
.number-pair label { display:flex; flex-direction:column; gap:5px; color:var(--ui-dim); font-size:11px; min-width:0; }
.number-pair input { width:100%; min-width:0; height:36px; padding:6px 8px; color:var(--ui-text); font-size:13px; font-variant-numeric:tabular-nums; }
.number-pair>span { align-self:end; margin-bottom:8px; color:var(--ui-dim); }
.select-row { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:12px; }
.select-row select { width:150px; }
.colors { display:flex; gap:14px; }
.colors label { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:11px; flex:1; }
input[type=color] { padding:0; border:0; background:transparent; width:25px; height:27px; flex:none; cursor:pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding:3px; }
input[type=color]::-webkit-color-swatch { border:1px solid #777; border-radius:50%; }
.check-row { display:flex; gap:7px; align-items:center; font-size:12px; cursor:pointer; }
.check-row input { margin:0; width:14px; height:14px; }
.examples { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.examples button { padding:7px; background:#eeeeeb; border-color:transparent; }
.examples button:hover:not(:disabled) { background:#fff; }
.examples svg { width:100%; display:block; }
.help { border-top:1px solid var(--ui-line); padding-top:15px; margin-top:5px; }
.help summary { cursor:pointer; font-size:12px; }
.help p { color:var(--ui-dim); font-size:12px; line-height:1.6; }
.credits { color:var(--ui-dim); font-size:12px; line-height:1.8; margin:22px 0 0; }
#toast { position:fixed; bottom:25px; left:calc((100% - 300px) / 2); transform:translate(-50%,15px); background:var(--ui-text); color:#111; padding:10px 16px; border-radius:8px; max-width:calc(100% - 32px); opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; z-index:10; box-shadow:0 4px 20px #0003; }
#toast.show { opacity:1; transform:translate(-50%,0); }
[hidden] { display:none!important; }
@media(max-width:1050px) { .identity span { display:none; } .stage { padding-inline:20px; } .toolbar { padding-inline:20px; } }
@media(max-width:720px) {
  .app { height:auto; min-height:100dvh; display:block; overflow:visible; }
  .workspace { height: min(78dvh, 680px); min-height:340px; }
  .toolbar { padding:12px 16px; min-height:62px; gap:8px; }
  .identity { gap:9px; } .identity a { padding-right:9px; }
  .toolbar-actions { gap:5px; }
  .stage { padding:8px 20px 18px; }
  .workspace-footer { padding:0 16px 12px; gap:12px; }
  .workspace-footer p { max-width:29ch; } #frameInfo { font-size:10px; }
  .panel { width:100%; border-left:0; border-top:1px solid var(--ui-line); overflow:visible; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; padding:22px 20px; }
  .control-section { min-width:0; }
  .help,.credits { grid-column:1/-1; }
  #toast { left:50%; font-size:12px; text-align:center; }
  button,select,input[type=number] { min-height:40px; }
  input[type=number],select { font-size:16px; }
}
@media(max-width:470px) { .panel { display:block; padding:22px 24px; } .toolbar-actions #preview { padding-inline:8px; } }
@media(prefers-reduced-motion:reduce) { #toast { transition:none; } }