:root { color-scheme: light; --line:#d7dce2; --ink:#101114; --muted:#5f6670; --soft:#f6f7f9; --accent:#0f62fe; --warn:#8a5a00; --err:#a40000; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #fff; }
button, input, select, textarea { font: inherit; }
button { border: 1px solid #aeb6c1; background: #fff; border-radius: 8px; padding: 5px 8px; cursor: pointer; line-height: 1.2; }
button:hover, button:focus-visible { border-color: var(--accent); outline: 2px solid transparent; box-shadow: 0 0 0 2px #dbe8ff; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.topbar { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding:10px 14px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:5; }
.top-title { min-width:0; }
.back { color: var(--muted); text-decoration:none; font-size:12px; }
h1 { margin:1px 0 2px; font-size:24px; line-height:1.05; letter-spacing:-0.03em; }
h1 span { color:var(--muted); font-size:.72em; font-weight:700; letter-spacing:0; }
h2 { margin:0 0 8px; font-size:18px; line-height:1.15; }
h3 { margin:10px 0 6px; font-size:13px; line-height:1.2; }
p { margin:0; color:var(--muted); }
.topbar p { font-size:14px; }
.top-actions, .control-row, .workspace-actions, .exports { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.top-actions { justify-content:flex-end; }
.top-actions button { min-width:0; padding:5px 9px; }
.composer-shell { display:grid; grid-template-columns:minmax(250px, 28fr) minmax(360px, 42fr) minmax(300px, 30fr); gap:12px; padding:12px; height:calc(100dvh - 78px); }
.panel { border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff; min-height:0; overflow:hidden; }
.palette, .workspace, .preview { display:flex; flex-direction:column; min-height:0; }
.workspace { border-color:#c5d5eb; box-shadow:0 0 0 1px #edf4ff inset; }
label { display:grid; gap:4px; font-size:13px; color:var(--muted); margin-bottom:7px; }
input, select, textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:7px 8px; background:#fff; color:var(--ink); }
textarea { resize:vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
.palette-controls { flex:0 0 auto; }
.contexts { border:1px solid var(--line); border-radius:8px; padding:7px; margin:0 0 7px; }
.contexts legend { color:var(--muted); font-size:13px; padding:0 4px; }
.contexts label { display:flex; flex-direction:row; align-items:center; gap:6px; margin:2px 0; color:var(--ink); }
.contexts input { width:auto; }
.context-name { font-weight:650; }
.context-id { color:var(--muted); font-size:11px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.quick-add { display:flex; align-items:center; gap:8px; margin:3px 0 7px; color:var(--muted); font-size:13px; }
.quick-add button { padding:4px 10px; font-weight:700; }
.palette-scroll { flex:1 1 auto; min-height:220px; overflow:auto; padding-right:3px; border-top:1px solid var(--line); }
.palette-items { display:grid; gap:6px; }
.palette-card { display:grid; grid-template-columns:42px minmax(0, 1fr) auto; align-items:center; gap:8px; width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; padding:5px 6px; background:#fff; }
.palette-card.context { border-color:#88b7ff; background:#f5f9ff; }
.palette-card img, .palette-card svg { width:38px; height:38px; display:block; }
.palette-title { display:block; font-weight:700; font-size:13px; }
.palette-gloss { display:block; color:var(--muted); font-size:12px; line-height:1.25; }
.palette-id { color:var(--muted); font-size:10px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.workspace-actions { margin-bottom:8px; }
.frames { display:grid; gap:10px; margin-top:0; flex:1 1 auto; min-height:150px; overflow:auto; align-content:start; }
.frame { border:1px solid var(--line); border-radius:10px; padding:8px; background:var(--soft); }
.frame.active { outline:2px solid #bed6ff; }
.frame-head { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:8px; }
.tokens { display:flex; gap:8px; flex-wrap:wrap; min-height:98px; padding:8px; border:1px dashed #c6ccd4; border-radius:8px; background:#fff; align-content:flex-start; }
.token { display:grid; gap:4px; justify-items:center; border:1px solid var(--line); border-radius:8px; padding:5px; background:#fff; width:82px; }
.token.selected { border-color:var(--accent); box-shadow:0 0 0 2px #dbe8ff; }
.token svg { width:46px; height:46px; }
.token-name { font-size:11px; text-align:center; min-height:24px; }
.token-actions { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; }
.token-actions button, .frame-actions button { padding:2px 5px; font-size:11px; border-radius:6px; }
.inspector { margin-top:10px; border-top:1px solid var(--line); padding-top:8px; flex:0 0 auto; }
.import-panel, .export-panel { margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
.import-panel summary, .export-panel summary { cursor:pointer; font-weight:700; color:var(--ink); }
.import-panel textarea { margin-top:8px; }
.diagnostics { display:grid; gap:6px; margin-bottom:8px; flex:0 0 auto; }
.diag { border-radius:8px; padding:7px 8px; font-size:12px; border:1px solid var(--line); }
.diag.warning { background:#fff7e6; color:var(--warn); border-color:#f1cf81; }
.diag.error { background:#fff0f0; color:var(--err); border-color:#e7aaaa; }
.diag.ok { background:#effaf1; color:#126321; border-color:#bde2c2; }
.preview-box { flex:1 1 auto; min-height:240px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; padding:12px; overflow:auto; background:#fff; }
.preview-box > svg { display:block; width:min(100%, 520px); max-height:100%; height:auto; }
pre { white-space:pre-wrap; overflow:auto; max-height:180px; background:#101114; color:#f7f7f7; border-radius:10px; padding:10px; font-size:12px; }
.exports { margin:8px 0; }
@media (max-width: 1100px) {
  .topbar { position:static; align-items:flex-start; }
  .composer-shell { grid-template-columns:1fr; height:auto; min-height:0; }
  .panel { min-height:260px; }
  .palette-scroll { max-height:420px; min-height:220px; }
  .frames { max-height:none; overflow:visible; }
  .preview-box { min-height:180px; }
}
@media (max-width: 560px) {
  .topbar { flex-direction:column; gap:8px; }
  h1 { font-size:22px; }
  .topbar p { font-size:13px; }
  .palette-card { grid-template-columns:38px minmax(0,1fr); }
  .palette-id { grid-column:2; }
}
.preview-box [fill="currentColor"] { fill:#000000; }
.preview-box [stroke="currentColor"] { stroke:#000000; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width: 900px) {
  .topbar { align-items:center; padding:7px 14px; }
  .top-title { display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap; }
  .title-separator { color:var(--line); }
  .top-title h1 { white-space:nowrap; }
  .top-title p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
.tokens { min-height:80px; }
.token { width:62px; padding:5px; align-content:center; }
.token > button[data-select-token] { border:0; padding:0; background:transparent; box-shadow:none; border-radius:6px; }
.token svg { width:48px; height:48px; display:block; }
.token-actions { gap:2px; }
.token-actions button { padding:1px 5px; font-size:11px; line-height:1.2; }
.color-editor { margin-top:8px; }
.color-editor summary { cursor:pointer; font-weight:700; display:flex; gap:7px; align-items:center; }
.color-tools { display:grid; gap:8px; margin-top:8px; }
.color-swatches { display:flex; gap:5px; flex-wrap:wrap; }
.color-swatch, .color-chip { background:var(--swatch); border:1px solid #aeb6c1; }
.color-swatch { width:24px; height:24px; border-radius:999px; padding:0; }
.color-chip { display:inline-block; width:14px; height:14px; border-radius:999px; }
.color-actions { margin-top:0; }
@media (max-width: 560px) {
  .top-title { display:grid; gap:2px; }
  .title-separator, .top-title p { display:none; }
  .token { width:60px; }
}
/* Acceptance Fix Pass 3: direct manipulation workspace. */
.workspace-actions { display:none; }
.frames { gap:12px; }
.frame { position:relative; transition:background-color .12s ease, outline-color .12s ease; }
.frame-head { cursor:grab; font-weight:700; color:var(--muted); }
.frame-head:active, .frame.dragging .frame-head { cursor:grabbing; }
.frame-delete { width:24px; height:24px; padding:0; border-radius:999px; line-height:1; opacity:.75; }
.frame-delete:hover, .frame-delete:focus-visible { opacity:1; }
.frame.dragging { opacity:.45; }
.frame-drop-before { box-shadow:0 -4px 0 var(--accent); }
.frame-drop-after { box-shadow:0 4px 0 var(--accent); }
.add-frame-button { align-self:center; width:34px; height:34px; padding:0; border-radius:999px; font-size:22px; font-weight:700; line-height:1; margin:0 0 10px; }
.token { position:relative; min-height:58px; touch-action:manipulation; }
.token.dragging { opacity:.45; }
.token-select { width:50px; height:50px; display:grid; place-items:center; cursor:grab; }
.token-select:active, .token.dragging .token-select { cursor:grabbing; }
.token-delete { position:absolute; top:-7px; left:-7px; width:20px; height:20px; padding:0; border-radius:999px; line-height:1; opacity:0; transform:scale(.96); background:#fff; }
.token:hover .token-delete, .token:focus-within .token-delete, .token.selected .token-delete { opacity:1; transform:scale(1); }
.token.drop-before { box-shadow:-4px 0 0 var(--accent), 0 0 0 2px #dbe8ff; }
.token.drop-after { box-shadow:4px 0 0 var(--accent), 0 0 0 2px #dbe8ff; }
.tokens.drop-after { outline:2px dashed #9cc3ff; outline-offset:-5px; }
.empty-frame-note { min-height:48px; display:grid; place-items:center; width:100%; }
@media (hover: none) {
  .token.selected .token-delete, .token:focus-within .token-delete { opacity:1; transform:scale(1); }
}