:root{
  /* FSCLN brand values already defined by the shared design system (/shared/_ds/v1/, linked in
     index.html before this file). --ink, --accent, --accent-dark and --divider are NOT
     re-declared here at all: their values were already byte-identical to the DS's own tokens of
     the same name, so this file simply stopped shadowing them and now inherits them straight
     from the DS stylesheet loaded ahead of this one. (Re-declaring e.g. --divider: var(--divider)
     here would be a self-reference — CSS treats that as invalid, not "fall through to the
     earlier stylesheet" — which is why deleting the shadow, not aliasing it, is the fix.)
     The remaining four keep this file's own names as aliases, since ~100 call sites below
     already use them — only the declaration changes, not every var(--bg)/var(--beige)/etc. use. */
  --bg: var(--bg-dark);
  --beige: var(--text-primary);
  --sec: var(--text-secondary);
  --ter: var(--text-tertiary);
  --mono: var(--font-mono);
  --display: var(--font-display);

  /* Beige-rail borders. The design system is dark-first and has no light-surface border ramp,
     so these stay app-specific — exactly the "no DS token" case PLATFORM.md phase 04 expected
     to find (contract point 4). */
  --line:#d6d4cd; --line2:#c2bfb6;

  /* Tones with no exact match anywhere in the shared system, previously inlined directly into
     the rules that use them (mostly the #gate/#pro block below, added after this :root existed
     and never wired up to it) — named here instead so every color in this file is a token now,
     even the ones the design system doesn't define. */
  --rail-label:#7a776f;      /* muted mono labels on the beige rail — between --sec and --ter */
  --rail-faint:#9d9a92;      /* the version chip, one shade lighter still */
  --ink-press:#000;          /* button.pri's hover state, deliberately past --ink into pure black */
  --scrim:rgba(10,10,10,.7); /* #pro modal backdrop */
  --err:#d1372f;             /* canvas error toast */
  --err-soft:#e0685c;        /* Pro-modal validation text — a different, lighter shade of the
                                same role as --err; kept distinct rather than unified since
                                changing either would be a visual change this port isn't making */

  --rail:300px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--beige);font-family:var(--display)}
a{color:var(--accent)} a:hover{color:var(--accent-dark)}
canvas{touch-action:none}
#app{display:flex;height:100%;width:100%}

/* ---------- rail ---------- */
#rail{width:var(--rail);flex:0 0 var(--rail);height:100%;background:var(--beige);color:var(--ink);border-right:1px solid var(--line2);display:flex;flex-direction:column;overflow-y:auto}
#head{display:flex;align-items:center;gap:12px;padding:22px 20px 18px}
#head img{height:30px;width:auto;display:block}
#name{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.02em;line-height:1.1}
#sub{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-label);margin-top:3px}
#ver{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--rail-faint)}
section{padding:16px 20px;border-top:1px solid var(--line)}
h2{margin:0 0 14px;font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.row+.row{margin-top:10px}
.spread{justify-content:space-between}
.meta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--rail-label)}

/* ---------- controls on beige ---------- */
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border-radius:4px;border:1px solid var(--line2);background:transparent;color:var(--ink);height:30px;padding:0 10px;cursor:pointer;transition:border-color .16s,color .16s,background .16s,transform .16s}
button:hover{border-color:var(--ink)}
button:active{transform:scale(.98)}
button.on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
button.on:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
button.pri{background:var(--ink);border-color:var(--ink);color:var(--beige)}
button.pri:hover{background:var(--ink-press);border-color:var(--ink-press)}
button.wide{flex:1 1 calc(50% - 4px)}
button.full{flex:1 1 100%}
button.ic{width:34px;padding:0}
.palrow{display:flex;gap:8px}
.palrow>button{flex:1 1 0;min-width:0;padding:0}
#gridlayer{flex:0 0 calc(25% - 6px);padding:0;gap:5px}
#gridlayer svg{width:12px;height:12px}
#export{flex:1 1 0}
#swrow{display:flex;gap:8px}
#swrow .sw{flex:1 1 0;width:auto}
#shaperow{display:flex;gap:8px}
#shaperow>button{flex:1 1 0;width:auto;min-width:0;padding:0}
#shaperow #rotate{padding:0}
button.ic svg{width:15px;height:15px}
.sw{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--line2);border-radius:4px;color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1}
.sw.sel{border-color:var(--ink);box-shadow:0 0 0 3px rgba(32,30,31,.12)}
#erase{color:var(--rail-label);font-size:13px}
#rail button svg{width:13px;height:13px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#rotate{padding:0 8px 0 3px;gap:6px}
#brush{width:22px;height:22px;border:1px solid var(--line2);border-radius:2px;display:block;background:var(--white);flex:0 0 auto}
#rotLabel{font-family:var(--mono);font-size:10px;letter-spacing:.06em;min-width:30px;text-align:left;font-variant-numeric:tabular-nums}
input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--ink)}
.sws{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rail-label);cursor:pointer;user-select:none}
.track{width:36px;height:19px;border-radius:999px;background:var(--line2);position:relative;transition:background .16s;flex:0 0 auto}
.track i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--white);transition:transform .16s}
.sws.on{color:var(--ink)}
.sws.on .track{background:var(--accent)}
.sws.on .track i{transform:translateX(17px)}
#file{display:none}
#foot{margin-top:auto;padding:14px 20px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--rail-label)}

/* ---------- stage ---------- */
#stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:crosshair;background:var(--bg)}
#zoomwrap{transform-origin:center center}
#cv{display:block;width:min(86vh,calc(100vw - var(--rail) - 96px));height:min(86vh,calc(100vw - var(--rail) - 96px));background:var(--beige);border:1px solid var(--divider)}
#err{position:fixed;bottom:8px;left:8px;z-index:99;font:11px monospace;color:var(--err);background:var(--ink);padding:6px 10px;border:1px solid var(--err)}
@media (max-width:820px){
  :root{--rail:250px}
  #head{padding:16px}
  section{padding:14px 16px}
}

/* ---------- gate + pro modal ---------- */
/* Added after the :root block above already existed, and every color and font-family here was
   inlined directly rather than using it — the actual source of most of this file's raw hex
   literals (PLATFORM.md DRIFT-2). Now uses the same tokens as the rest of the file. */
#gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--bg); }
#gate[hidden] { display: none; }
#gateBox { max-width: 420px; text-align: left; }
#gateMark img { height: 34px; width: auto; display: block; }
#gateEyebrow { margin-top: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
#gateTitle { margin: 14px 0 0; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; color: var(--beige); }
#gateBody { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--sec); text-wrap: pretty; }
#gateFoot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--divider); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ter); }

#pro { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); backdrop-filter: blur(6px); }
#pro[hidden] { display: none; }
#proBox { width: 100%; max-width: 400px; box-sizing: border-box; background: var(--bg-mid); border: 1px solid var(--divider); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
#proEyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
#proTitle { margin: 12px 0 0; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--beige); }
#proBody { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--sec); text-wrap: pretty; }
#proField { display: flex; flex-direction: column; gap: 6px; }
#proField label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ter); }
#proCode { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--beige); background: var(--bg); border: 1px solid var(--divider); border-radius: 4px; padding: 10px 12px; outline: none; }
#proCode:focus { border-color: var(--accent); }
#proErr { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--err-soft); }
#proErr[hidden] { display: none; }
#proActions { display: flex; gap: 8px; justify-content: flex-end; }
#proActions button { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 4px; height: 32px; cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
#proCancel { border: 1px solid var(--divider-strong); background: transparent; color: var(--sec); padding: 0 14px; }
#proCancel:hover { border-color: var(--accent); color: var(--accent); }
#proUnlock { border: none; background: var(--accent); color: var(--ink); padding: 0 16px; }
#proUnlock:hover { background: var(--accent-dark); }

/* Domain-block modal (PLATFORM.md D5) — same box treatment as #pro, no eyebrow/field since
   there's nothing to submit here, just an explanation and a close button. */
#blocked { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); backdrop-filter: blur(6px); }
#blocked[hidden] { display: none; }
#blockedBox { width: 100%; max-width: 400px; box-sizing: border-box; background: var(--bg-mid); border: 1px solid var(--divider); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
#blockedTitle { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--beige); }
#blockedBody { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--sec); text-wrap: pretty; }
#blockedActions { display: flex; gap: 8px; justify-content: flex-end; }
#blockedClose { border: 1px solid var(--divider-strong); background: transparent; color: var(--sec); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 4px; height: 32px; padding: 0 14px; cursor: pointer; transition: border-color .16s, color .16s; }
#blockedClose:hover { border-color: var(--accent); color: var(--accent); }