/* IBM Plex, self-hosted from fonts/ — no external requests. */
/* latin-ext */ @font-face {font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* greek */ @font-face {font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-400-italic-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-400-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-400-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* greek */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-400-normal-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* greek */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-500-normal-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-500-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-500-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* greek */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-600-normal-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-600-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(fonts/ibm-plex-sans-600-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-serif-500-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-serif-500-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */ @font-face {font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-serif-600-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */ @font-face {font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-serif-600-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* RedFox AI palette — accent #e63946, ink #17203a (redfoxaitech.com) */
  --bg:#eceef3; --panel:#ffffff; --panel-2:#f7f8fa; --sunken:#e9ecf1;
  --ink:#17203a; --ink-soft:#39415c; --muted:#68708a; --faint:#98a0b4;
  --line:#d7dae3; --line-soft:#e6e9ef;
  --accent:#e63946; --accent-ink:#ffffff; --accent-wash:#fde8ea;
  --label:#c62a38; --label-soft:#e0656e; --label-wash:#fdf0f1;
  --coral:#ff6b57;
  --danger:#c1121f;
  --shadow:0 1px 2px rgba(23,32,58,.07), 0 8px 24px rgba(23,32,58,.12);
  --shadow-sm:0 1px 2px rgba(23,32,58,.09);
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --serif:"IBM Plex Serif",Georgia,serif;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px; --fs-lg:19px;
  --r:7px; --r-sm:5px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1526; --panel:#17203a; --panel-2:#141c33; --sunken:#111829;
    --ink:#eef1f7; --ink-soft:#c6ccdb; --muted:#8e97ad; --faint:#727b93;
    --line:#2b3555; --line-soft:#222b47;
    --accent:#ff5c6a; --accent-ink:#2a0a10; --accent-wash:#3a1a22;
    --label:#ff8a93; --label-soft:#ffb2b8; --label-wash:#26161f;
    --coral:#ff6b57;
    --danger:#ff6b6b;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1526; --panel:#17203a; --panel-2:#141c33; --sunken:#111829;
  --ink:#eef1f7; --ink-soft:#c6ccdb; --muted:#8e97ad; --faint:#727b93;
  --line:#2b3555; --line-soft:#222b47;
  --accent:#ff5c6a; --accent-ink:#2a0a10; --accent-wash:#3a1a22;
  --label:#ff8a93; --label-soft:#ffb2b8; --label-wash:#26161f;
  --coral:#ff6b57;
  --danger:#ff6b6b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-base); line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font-family:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
::selection{background:var(--accent-wash)}

/* ---------- shell ---------- */
.app{
  display:grid; height:100vh; height:100dvh;
  grid-template-columns:272px minmax(0,1fr) 304px;
  grid-template-rows:52px 40px 32px minmax(0,1fr) 28px;
  grid-template-areas:"head head head" "ribbon ribbon ribbon" "tabs tabs tabs" "lib stage layers" "foot foot foot";
}
header{
  grid-area:head; position:relative; display:flex; align-items:center; gap:14px;
  padding:0 16px; border-bottom:1px solid var(--line);
  background:var(--panel); z-index:20;
}
.brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  white-space:nowrap; pointer-events:none; z-index:1;
}
.brand .tag{margin-top:-2px}
.brand .mark{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:var(--fs-lg); letter-spacing:.2px;
}
.brand .mark b{color:var(--accent); font-weight:600}
.brand .tag{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--faint);
  text-transform:uppercase; letter-spacing:.14em;
}
.head-actions{margin-left:auto; display:flex; align-items:center; gap:6px; z-index:2}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px; border:1px solid var(--line);
  background:var(--panel); border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-soft);
  transition:background .12s, border-color .12s, color .12s;
}
.btn:hover{background:var(--panel-2); border-color:var(--muted); color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn.icon{width:30px; padding:0; justify-content:center}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06); color:var(--accent-ink)}
.btn:disabled{opacity:.4; pointer-events:none}
.btn svg{width:15px; height:15px; flex:none}

/* ---------- tab bar ---------- */
.tabbar{
  grid-area:tabs; display:flex; align-items:stretch; gap:0;
  background:var(--panel-2); border-bottom:1px solid var(--line);
  padding:0 8px; overflow:hidden;
}
.tabs{display:flex; align-items:stretch; gap:3px; overflow-x:auto; overflow-y:hidden; flex:1; min-width:0}
.tabs::-webkit-scrollbar{height:0}
.tab{
  display:flex; align-items:center; gap:7px; padding:0 8px 0 11px; min-width:96px; max-width:210px;
  border:1px solid transparent; border-bottom:0; border-radius:7px 7px 0 0;
  background:transparent; color:var(--muted); cursor:pointer; align-self:flex-end; height:28px;
  font-size:var(--fs-sm); white-space:nowrap; flex:none;
}
.tab:hover{background:var(--label-wash); color:var(--label)}
.tab.active{
  background:var(--panel); border-color:var(--line); color:var(--ink); font-weight:500;
  height:34px; box-shadow:0 1px 0 var(--panel);
}
.tab .tname{overflow:hidden; text-overflow:ellipsis; min-width:0}
.tab .tname[contenteditable]{outline:none; border-bottom:1px solid var(--accent)}
.tab .dot{width:6px; height:6px; border-radius:50%; background:var(--coral); flex:none; display:none}
.tab.dirty .dot{display:block}
.tab .x{
  width:17px; height:17px; border:0; background:transparent; border-radius:4px; flex:none;
  display:grid; place-items:center; color:var(--faint); font-size:14px; line-height:1; padding:0;
}
.tab .x:hover{background:var(--line); color:var(--ink)}
.tab-new{
  align-self:center; width:26px; height:26px; margin-left:6px; flex:none;
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--ink-soft);
}
.tab-new:hover{border-color:var(--accent); color:var(--accent)}
.tab-new svg{width:14px; height:14px}
.tab-new{position:relative}
.tab-new::after{
  content:attr(data-hint); position:absolute; top:calc(100% + 7px); right:0;
  background:var(--ink); color:var(--panel); font-family:var(--sans);
  font-size:var(--fs-xs); font-weight:500; padding:4px 9px; border-radius:5px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s .25s;
  box-shadow:var(--shadow-sm); z-index:60;
}
.tab-new:hover::after{opacity:1}

/* ---------- panels ---------- */
.panel{background:var(--panel); display:flex; flex-direction:column; min-height:0}
.library{grid-area:lib; border-right:1px solid var(--line)}
.layers{grid-area:layers; border-left:1px solid var(--line)}

/* collapsible side panels — the stage takes the freed width */
.app.no-lib{grid-template-columns:0 minmax(0,1fr) 304px}
.app.no-lay{grid-template-columns:272px minmax(0,1fr) 0}
.app.no-lib.no-lay{grid-template-columns:0 minmax(0,1fr) 0}
.app.no-lib .library, .app.no-lay .layers{display:none}
.pcol{
  margin-left:auto; width:26px; height:24px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:6px; background:var(--sunken); color:var(--ink);
}
.pcol:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.pcol svg{width:15px; height:15px}
.rail{
  position:absolute; top:50%; transform:translateY(-50%); z-index:7;
  width:19px; height:56px; display:grid; place-items:center; padding:0;
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  box-shadow:0 1px 6px rgba(0,0,0,.07);
}
.rail[hidden]{display:none}
.rail:hover{color:var(--accent); background:var(--sunken)}
.rail svg{width:13px; height:13px}
.rail-l{left:0; border-left:0; border-radius:0 8px 8px 0}
.rail-r{right:0; border-right:0; border-radius:8px 0 0 8px}
.panel-head{
  display:flex; align-items:center; gap:8px; padding:11px 14px 10px;
  border-bottom:1px solid var(--line-soft);
}
.panel-head h2{
  margin:0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--label);
}
.panel-head .count{
  margin-left:auto; font-family:var(--mono); font-size:var(--fs-xs);
  color:var(--faint); background:var(--sunken); padding:1px 6px; border-radius:20px;
}
.panel-scroll{overflow-y:auto; overflow-x:hidden; flex:1; min-height:0}
.panel-scroll::-webkit-scrollbar{width:10px}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px; border:3px solid var(--panel)}

/* ---------- properties panel ---------- */
.props{display:flex; flex-direction:column; max-height:56%; border-bottom:2px solid var(--line)}
.props .panel-head .count{text-transform:none; letter-spacing:0}
.props-scroll{overflow-y:auto; overflow-x:hidden; padding:12px 14px 16px}
.props-scroll::-webkit-scrollbar{width:10px}
.props-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px; border:3px solid var(--panel)}
.pfield{margin-bottom:13px}
.pfield:last-child{margin-bottom:0}
.plabel{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--label); margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.plabel .val{margin-left:auto; font-family:var(--mono); font-weight:400; letter-spacing:0; color:var(--faint); text-transform:none}
.prow{display:flex; align-items:center; gap:8px}
.swatch{
  width:30px; height:30px; border-radius:var(--r-sm); border:1px solid var(--line);
  padding:0; overflow:hidden; flex:none; cursor:pointer; position:relative;
  background-image:linear-gradient(45deg,var(--line-soft) 25%,transparent 25%,transparent 75%,var(--line-soft) 75%),linear-gradient(45deg,var(--line-soft) 25%,transparent 25%,transparent 75%,var(--line-soft) 75%);
  background-size:10px 10px; background-position:0 0,5px 5px;
}
.swatch input[type=color]{position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:0; padding:0; cursor:pointer; background:transparent}
.swatch .fillview{position:absolute; inset:0}
.hexin{
  flex:1; min-width:0; height:30px; padding:0 9px; border:1px solid var(--line);
  background:var(--panel-2); border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--mono); font-size:var(--fs-sm); text-transform:uppercase;
}
.hexin:focus{outline:none; border-color:var(--accent); background:var(--panel)}
.pbtn{
  height:30px; padding:0 10px; border:1px solid var(--line); background:var(--panel-2);
  border-radius:var(--r-sm); font-size:var(--fs-xs); font-weight:500; color:var(--ink-soft); flex:none;
}
.pbtn:hover{border-color:var(--muted); color:var(--ink)}
.pbtn.on{background:var(--accent-wash); border-color:var(--accent); color:var(--accent)}
.pbtn.wide{width:100%; font-size:var(--fs-sm); font-weight:500}
.pbtn.cta{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  font-weight:600; height:32px;
}
.pbtn.cta:hover{filter:brightness(1.07); color:var(--accent-ink); border-color:var(--accent)}
input[type=range].prange{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px;
  background:var(--line); outline:none; margin:6px 0;
}
input[type=range].prange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:2px solid var(--panel);
}
.pchips{display:flex; flex-wrap:wrap; gap:5px}
.pchip{
  height:26px; padding:0 9px; border:1px solid var(--line); background:var(--panel-2);
  border-radius:20px; font-size:var(--fs-xs); color:var(--ink-soft);
}
.pchip:hover{border-color:var(--muted); color:var(--ink)}
.pchip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.pnote{font-size:var(--fs-xs); color:var(--faint); line-height:1.5}
.pdiv{height:1px; background:var(--line-soft); margin:14px 0}

/* ---------- library ---------- */
.search{padding:10px 12px 4px}
.search input{
  width:100%; height:30px; padding:0 10px; border:1px solid var(--line);
  background:var(--panel-2); border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-sm);
}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none; border-color:var(--accent); background:var(--panel)}

.cat{border-bottom:1px solid var(--line-soft)}
.cat > summary{
  list-style:none; cursor:pointer; padding:9px 14px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--label); display:flex; align-items:center; gap:7px; user-select:none;
}
.cat > summary::-webkit-details-marker{display:none}
.cat > summary .chev{transition:transform .15s; color:var(--label-soft)}
.cat[open] > summary .chev{transform:rotate(90deg)}
.cat > summary:hover{color:var(--accent)}
.cat[open] > summary{background:var(--label-wash)}

.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:4px 12px 14px;
}
.tile{
  position:relative;
  border:1px solid var(--line); background:var(--panel-2); border-radius:var(--r);
  padding:8px 6px 7px; display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:grab; transition:border-color .12s, background .12s, transform .1s, box-shadow .12s;
  content-visibility:auto; contain-intrinsic-size:auto 96px;
}
.tile:hover{border-color:var(--accent); background:var(--panel); box-shadow:var(--shadow-sm)}
.tile:active{cursor:grabbing}
.tile.dragging{opacity:.45}
.tile .thumb{width:100%; height:46px; display:grid; place-items:center; pointer-events:none}
.tile .thumb svg{width:44px; height:44px; overflow:visible}
.tile .thumb img{max-width:44px; max-height:46px; object-fit:contain}
.tile .name{
  font-size:var(--fs-xs); color:var(--ink-soft); text-align:center; line-height:1.25;
  pointer-events:none; word-break:break-word;
}
.tile .lic{
  position:absolute; top:3px; right:5px; font-family:var(--mono); font-size:9px;
  color:var(--faint); opacity:0; transition:opacity .1s; pointer-events:none;
}
.tile:hover .lic{opacity:.8}
.heavy-dot{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--coral); margin-left:4px; vertical-align:middle}
.vec-badge{
  position:absolute; top:3px; left:5px; font-size:9px; color:var(--accent);
  opacity:.75; pointer-events:none; line-height:1;
}
/* always visible on linked tiles — these are the primary action, not a hover extra */
.tile-acts{display:flex; gap:4px; width:100%; margin-top:1px}
.tile-acts button{
  flex:1; min-width:0; height:21px; padding:0 2px; border:1px solid var(--line);
  background:var(--panel); border-radius:4px; font-family:var(--sans);
  font-size:9.5px; font-weight:600; color:var(--muted); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:clip; letter-spacing:0;
}
.tile-acts button:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tile-acts button.primary{color:var(--accent); border-color:var(--accent); background:var(--accent-wash)}
.tile-acts button.primary:hover{background:var(--accent); color:var(--accent-ink)}
.tile.wide{grid-column:span 2; flex-direction:row; justify-content:flex-start; gap:10px; padding:9px 11px; content-visibility:visible}
.tile.wide .thumb{width:34px; height:34px}
.tile.wide .thumb svg{width:30px; height:30px}
.tile.wide .name{text-align:left}
.cat-body{padding-bottom:2px}
.cat-loading{padding:14px; text-align:center; color:var(--faint); font-size:var(--fs-xs)}
.lib-src{
  padding:12px 14px 5px; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); border-top:1px solid var(--line-soft);
}
.lib-src:first-child{border-top:0}
.cat > summary .cnt{
  margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint);
  background:var(--sunken); padding:1px 6px; border-radius:20px; flex:none;
}
.cat-label{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:400; color:var(--label-soft); text-transform:none; letter-spacing:.02em;
}
.cat-label b{font-weight:700; color:var(--label); text-transform:uppercase; letter-spacing:.1em}
.lib-msg{padding:16px 14px; font-size:var(--fs-sm); color:var(--muted); line-height:1.55}
.lib-msg code{font-family:var(--mono); font-size:var(--fs-xs); background:var(--sunken); padding:1px 5px; border-radius:4px; word-break:break-all}
.credits{margin-top:12px; border-top:1px solid var(--line-soft); padding-top:10px}
.credits h4{margin:0 0 6px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.credits ul{margin:0; padding-left:16px; font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.55}
.toast{
  position:fixed; left:50%; bottom:44px; transform:translate(-50%, 12px);
  background:var(--ink); color:var(--panel); font-size:var(--fs-sm); font-weight:500;
  padding:9px 16px; border-radius:8px; box-shadow:var(--shadow); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}

/* ---------- stage ---------- */
.stage{
  grid-area:stage; position:relative; overflow:hidden;
  background:
    linear-gradient(var(--bg),var(--bg));
}
.toolbar{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:12; display:flex; align-items:center; gap:4px;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:5px; box-shadow:var(--shadow);
}
.toolbar .sep{width:1px; align-self:stretch; background:var(--line-soft); margin:2px 3px}
.tbtn{
  width:30px; height:30px; border:0; background:transparent; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--ink-soft);
}
.tbtn[hidden], .toolbar .sep[hidden]{display:none!important}
.tbtn:hover{background:var(--sunken); color:var(--ink)}
.tbtn:disabled{opacity:.35; pointer-events:none}
.tbtn svg{width:16px; height:16px}
.zoom-label{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted);
  min-width:44px; text-align:center; user-select:none;
}

.viewport{
  position:absolute; inset:0; overflow:auto;
}
.viewport::-webkit-scrollbar{width:12px; height:12px}
.viewport::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px; border:3px solid var(--bg)}
.canvas-pad{display:inline-block; padding:110px 150px; min-width:min-content}
.canvas-sizer{position:relative}
.surface{
  position:absolute; top:0; left:0; width:1280px; height:860px;
  transform-origin:0 0; background:#ffffff;
  box-shadow:0 2px 6px rgba(20,40,36,.10), 0 26px 70px rgba(20,40,36,.16);
  outline:1px solid var(--line);
}
/* Warm paper only in real dark mode. The guarded ":root:not([data-theme=light])"
   form belongs INSIDE the prefers-color-scheme block — unguarded it also matched
   the default "system" theme on a light system, greying the canvas everywhere. */
:root[data-theme="dark"] .surface{background:#f7f5f4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .surface{background:#f7f5f4}}

.el{position:absolute; top:0; left:0; transform-origin:center center; will-change:transform}
.el .paint{width:100%; height:100%; display:block; pointer-events:none}
.el svg{width:100%; height:100%; display:block; overflow:visible}
.el.locked{cursor:default}
.el .txt{
  width:100%; height:100%; display:flex; align-items:center; padding:3px 5px;
  font-family:var(--sans); color:#17203a; overflow:hidden; white-space:pre-wrap;
  outline:none; word-break:break-word; cursor:default;
}
.el .txt-bg{position:absolute; inset:0; pointer-events:none}
.el .txt-bg svg{width:100%; height:100%; display:block; overflow:visible}
.el .txt{position:relative; z-index:1}
.el.editing{cursor:text}
.el.editing .txt{
  cursor:text; user-select:text; -webkit-user-select:text; overflow:auto;
  box-shadow:0 0 0 calc(1.6px * var(--iz)) var(--accent);
}
.el.editing .txt::selection{background:#fbccd0}
.el img{width:100%; height:100%; object-fit:fill; display:block; pointer-events:none}
.el.dim{opacity:.32}

.overlay{
  position:absolute; top:0; left:0; transform-origin:center center;
  border:calc(1.4px * var(--iz)) solid var(--accent);
  pointer-events:none; z-index:9998;
}
.handle{
  position:absolute; width:calc(11px * var(--iz)); height:calc(11px * var(--iz));
  background:var(--panel); border:calc(1.4px * var(--iz)) solid var(--accent);
  border-radius:2px; pointer-events:auto; z-index:9999;
}
.handle::before{content:""; position:absolute; inset:calc(-9px * var(--iz))}
.handle.nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}
.handle.n{left:50%;top:0;transform:translate(-50%,-50%);cursor:ns-resize}
.handle.ne{left:100%;top:0;transform:translate(-50%,-50%);cursor:nesw-resize}
.handle.e{left:100%;top:50%;transform:translate(-50%,-50%);cursor:ew-resize}
.handle.se{left:100%;top:100%;transform:translate(-50%,-50%);cursor:nwse-resize}
.handle.s{left:50%;top:100%;transform:translate(-50%,-50%);cursor:ns-resize}
.handle.sw{left:0;top:100%;transform:translate(-50%,-50%);cursor:nesw-resize}
.handle.w{left:0;top:50%;transform:translate(-50%,-50%);cursor:ew-resize}
.rot{
  position:absolute; left:50%; top:0; width:calc(13px * var(--iz)); height:calc(13px * var(--iz));
  transform:translate(-50%, calc(-26px * var(--iz)));
  background:var(--panel); border:calc(1.4px * var(--iz)) solid var(--accent);
  border-radius:50%; pointer-events:auto; z-index:9999; cursor:grab;
}
.rot::after{
  content:""; position:absolute; left:50%; top:100%;
  width:calc(1.4px * var(--iz)); height:calc(15px * var(--iz));
  background:var(--accent); transform:translateX(-50%);
}
.drop-hint{
  position:absolute; inset:0; z-index:40; display:none; place-items:center;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:2px dashed var(--accent); margin:8px; border-radius:12px;
}
.stage.drop .drop-hint{display:grid}
.drop-hint span{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; font-size:var(--fs-sm); font-weight:500; box-shadow:var(--shadow);
}
.empty-note{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; color:var(--faint); font-size:var(--fs-sm); pointer-events:none;
  max-width:260px;
}
.empty-note b{display:block; color:var(--muted); font-weight:600; margin-bottom:3px}

/* ---------- footer ---------- */
footer{
  grid-area:foot; display:flex; align-items:center; gap:16px; padding:0 14px;
  border-top:1px solid var(--line); background:var(--panel);
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted);
}
footer .field{display:flex; gap:5px; align-items:center}
footer .field b{color:var(--faint); font-weight:400}
footer .field span{color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:34px}
footer .spacer{margin-left:auto}
footer .legal{display:flex; align-items:center; gap:6px; white-space:nowrap; color:var(--faint)}
footer .legal button{
  background:none; border:0; padding:0; font:inherit; color:var(--faint);
  cursor:pointer; text-decoration:none;
}
footer .legal a{
  color:var(--faint); text-decoration:none; border-bottom:1px solid transparent;
}
footer .legal button:hover{color:var(--accent); text-decoration:underline}
footer .legal a:hover{color:var(--accent); border-bottom-color:currentColor}
footer .legal .bar{opacity:.5}
@media (max-width:1240px){ footer .legal{display:none} }

/* legal / policy modals */
.legal-body{line-height:1.7; font-size:var(--fs-sm); color:var(--ink-soft)}
.legal-body p{margin:0 0 14px}
.legal-body p:last-child{margin-bottom:0}
.legal-body .lead{
  font-size:var(--fs-md); color:var(--ink); font-weight:500;
  padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.legal-body .lead a{color:var(--accent); text-decoration:none; font-weight:600}
.legal-body .lead a:hover{text-decoration:underline}
.legal-body .lead a::after{content:" \2197"; font-weight:400; opacity:.7}

/* ---------- layers ---------- */
.layer-tools{
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
  padding:9px 12px; border-bottom:1px solid var(--line-soft);
}
.layer-tools button{
  height:28px; border:1px solid var(--line); background:var(--panel-2);
  border-radius:var(--r-sm); display:grid; place-items:center; color:var(--ink-soft);
}
.layer-tools button:hover:not(:disabled){background:var(--panel); border-color:var(--muted); color:var(--ink)}
.layer-tools button:disabled{opacity:.3; pointer-events:none}
.layer-tools button svg{width:15px; height:15px}

.lyr-list{padding:7px 8px; display:flex; flex-direction:column; gap:3px}
.lyr{
  display:grid; grid-template-columns:16px 34px 1fr auto; align-items:center; gap:8px;
  padding:6px 7px; border:1px solid transparent; border-radius:var(--r);
  background:var(--panel-2); transition:background .1s, border-color .1s;
}
.lyr:hover{background:var(--panel); border-color:var(--line)}
.lyr.sel{background:var(--accent-wash); border-color:var(--accent)}
.lyr.bg{background:repeating-linear-gradient(45deg,var(--sunken),var(--sunken) 6px,var(--panel-2) 6px,var(--panel-2) 12px)}
.lyr.bg.sel{background:var(--accent-wash)}
.lyr.hidden .lyr-name,.lyr.hidden .lyr-thumb{opacity:.4}
.lyr.drag-ghost{opacity:.4}
.lyr.drop-above{box-shadow:inset 0 2px 0 var(--accent)}
.lyr.drop-below{box-shadow:inset 0 -2px 0 var(--accent)}
.lyr-grip{color:var(--faint); cursor:grab; display:grid; place-items:center; height:100%}
.lyr-grip:active{cursor:grabbing}
.lyr-grip svg{width:13px;height:13px}
.lyr-thumb{
  width:34px; height:26px; border-radius:4px; background:#f4f6f5;
  border:1px solid var(--line-soft); display:grid; place-items:center; overflow:hidden;
}
.lyr-thumb svg{width:22px; height:22px; overflow:visible}
.lyr-thumb img{width:100%;height:100%;object-fit:cover}
.lyr-main{min-width:0}
.lyr-name{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lyr-name[contenteditable]{outline:none}
.lyr-name[contenteditable]:focus{color:var(--ink); border-bottom:1px solid var(--accent)}
.lyr-sub{
  font-family:var(--mono); font-size:10px; color:var(--faint);
  display:flex; gap:6px; margin-top:1px;
}
.lyr-sub .z{color:var(--accent); font-weight:500}
.lyr-acts{display:flex; gap:1px}
.lyr-acts button{
  width:22px; height:22px; border:0; background:transparent; border-radius:4px;
  display:grid; place-items:center; color:var(--faint);
}
.lyr-acts button:hover{background:var(--sunken); color:var(--ink)}
.lyr-acts button.on{color:var(--accent)}
.lyr-acts button.warn:hover{color:var(--danger)}
.lyr-acts button svg{width:13px; height:13px}
.lyr-empty{padding:22px 16px; text-align:center; color:var(--faint); font-size:var(--fs-sm)}

/* ---------- modal ---------- */
.modal-bg{
  position:fixed; inset:0; background:rgba(12,20,18,.55); z-index:100;
  display:none; place-items:center; padding:24px; backdrop-filter:blur(2px);
}
.modal-bg.open{display:grid}
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); width:min(560px,100%); max-height:88vh; overflow:auto;
}
.modal h3{margin:0; padding:16px 18px 12px; font-size:var(--fs-md); border-bottom:1px solid var(--line-soft)}
.modal .body{padding:16px 18px}
.modal .preview{
  border:1px solid var(--line); border-radius:var(--r); background:#f4f6f5;
  padding:14px; display:grid; place-items:center; margin-bottom:12px;
}
.modal .preview img{max-width:100%; max-height:300px; display:block}
.modal .hint{font-size:var(--fs-sm); color:var(--muted); margin:0 0 12px}
.modal textarea{
  width:100%; height:120px; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px; font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink);
  background:var(--panel-2); resize:vertical;
}
.modal .row{display:flex; gap:8px; justify-content:flex-end; padding:12px 18px 16px}

/* ---------- cut tool ---------- */
.stage.cutting .viewport, .stage.drawing .viewport{cursor:crosshair}
.stage.drawing .el{pointer-events:none}
.stage.cutting.lasso .viewport{cursor:cell}
.stage.cutting .el{pointer-events:none}
.cut-preview{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; z-index:9996; overflow:visible;
}
.marquee{
  position:absolute; border:calc(1.4px * var(--iz)) dashed var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  pointer-events:none; z-index:9996;
}
.cut-bar{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  z-index:14; display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--accent); border-radius:9px;
  padding:6px 8px; box-shadow:var(--shadow);
}
.cut-bar[hidden]{display:none}
.cut-info{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); margin-right:2px}
.cut-bar .btn{height:26px; font-size:var(--fs-xs)}
.cut-bar #cutKeep{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.cut-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:13;
  background:var(--ink); color:var(--panel); font-size:var(--fs-xs);
  padding:6px 13px; border-radius:20px; box-shadow:var(--shadow); pointer-events:none;
}
.cut-hint[hidden]{display:none}
/* ---------- multi-selection ---------- */
.overlay.group{
  border-style:solid; border-width:calc(1.8px * var(--iz));
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.member{
  position:absolute; top:0; left:0; transform-origin:center center;
  border:calc(1px * var(--iz)) dashed color-mix(in srgb, var(--accent) 65%, transparent);
  pointer-events:none;
}
.sel-count{
  position:absolute; left:0; top:0; transform:translateY(calc(-100% - 6px * var(--iz)));
  background:var(--accent); color:var(--accent-ink); font-family:var(--sans);
  font-size:calc(11px * var(--iz)); font-weight:600; line-height:1;
  padding:calc(3px * var(--iz)) calc(7px * var(--iz)); border-radius:calc(4px * var(--iz));
  white-space:nowrap; pointer-events:none;
}
.band{
  position:absolute; border:calc(1.2px * var(--iz)) dashed var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  pointer-events:none; z-index:9995;
}
.lyr.sel.primary{box-shadow:inset 2px 0 0 var(--accent)}
.tbtn.on{background:var(--accent); color:var(--accent-ink)}
.tbtn.on:hover{background:var(--accent); color:var(--accent-ink); filter:brightness(1.07)}

/* ---------- text formatting controls ---------- */
.psel{
  width:100%; height:30px; padding:0 8px; border:1px solid var(--line);
  background:var(--panel-2); border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-sm);
}
.psel:focus{outline:none; border-color:var(--accent)}
.pgroup{display:flex; gap:4px}
.pgroup button{
  flex:1; height:30px; border:1px solid var(--line); background:var(--panel-2);
  border-radius:var(--r-sm); color:var(--ink-soft); font-size:var(--fs-sm);
  display:grid; place-items:center;
}
.pgroup button:hover{border-color:var(--muted); color:var(--ink)}
.pgroup button.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.pgroup button svg{width:15px; height:15px}
.pnum{
  width:64px; height:30px; padding:0 8px; border:1px solid var(--line);
  background:var(--panel-2); border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--mono); font-size:var(--fs-sm);
}
.pnum:focus{outline:none; border-color:var(--accent)}

/* ---------- drafts ---------- */
.modal.narrow{width:min(420px,100%)}
.draft-list{display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow:auto}
.draft{
  display:flex; align-items:center; gap:11px; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
}
.draft:hover{border-color:var(--accent)}
.draft .dthumb{
  width:52px; height:38px; border-radius:4px; background:#f4f6f5; flex:none;
  border:1px solid var(--line-soft); object-fit:contain;
}
.draft .dmain{flex:1; min-width:0}
.draft .dname{font-size:var(--fs-sm); font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.draft .dmeta{font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:2px}
.draft .dacts{display:flex; gap:5px; flex:none}
.draft .dacts button{
  height:26px; padding:0 9px; border:1px solid var(--line); background:var(--panel);
  border-radius:var(--r-sm); font-size:var(--fs-xs); color:var(--ink-soft);
}
.draft .dacts button:hover{border-color:var(--accent); color:var(--accent)}
.draft .dacts button.warn:hover{border-color:var(--danger); color:var(--danger)}
.draft-empty{padding:26px; text-align:center; color:var(--faint); font-size:var(--fs-sm)}

/* ---------- profile menu ---------- */
.profile-wrap{position:relative; margin-left:4px}
.avatar{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:var(--accent); color:var(--accent-ink); font-family:var(--sans);
  font-size:11px; font-weight:700; letter-spacing:.03em; display:grid;
  place-items:center; cursor:pointer; padding:0;
}
.avatar:hover{filter:brightness(1.08)}
.avatar[aria-expanded="true"]{box-shadow:0 0 0 3px var(--accent-wash)}
.menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:150; width:246px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px;
}
.menu[hidden]{display:none}
.menu-head{display:flex; align-items:center; gap:10px; padding:9px 9px 11px}
.menu-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--accent);
  color:var(--accent-ink); font-size:12px; font-weight:700; display:grid;
  place-items:center; flex:none;
}
.menu-id{min-width:0; display:flex; flex-direction:column; gap:1px}
.menu-id b{font-size:var(--fs-sm); color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu-id small{font-size:var(--fs-xs); color:var(--label-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu > button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 9px; border:0; background:transparent; border-radius:6px;
  font-family:var(--sans); font-size:var(--fs-sm); color:var(--label); font-weight:500;
}
.menu > button:hover{background:var(--label-wash); color:var(--accent)}
.menu > button svg{width:16px; height:16px; flex:none; color:var(--label-soft)}
.menu > button:hover svg{color:var(--accent)}
.menu > button.credits-item{color:var(--accent); font-weight:500}
.menu > button.credits-item svg{color:var(--accent)}
.menu-sep{height:1px; background:var(--line-soft); margin:4px 6px}

/* ---------- modal form bits ---------- */
.modal.wide{width:min(720px,100%)}
.fld{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.fld > span{font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--label)}
.fld input{
  height:34px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel-2); color:var(--ink); font-family:var(--sans); font-size:var(--fs-sm);
}
.fld input:focus{outline:none; border-color:var(--accent); background:var(--panel)}
.fld input:disabled{opacity:.5; cursor:not-allowed}
.chk{display:flex; gap:9px; align-items:flex-start; margin-bottom:11px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.45}
.chk input{margin-top:2px; accent-color:var(--accent); flex:none}
.notice{
  border:1px solid var(--line); border-left:3px solid var(--coral);
  background:var(--panel-2); border-radius:var(--r-sm); padding:11px 13px;
  font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.55; margin-bottom:16px;
}
.notice b{display:block; color:var(--ink); margin-bottom:3px}
.ws-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:4px 0 12px;
}
.ws-stats div{
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--panel-2); padding:9px 10px;
}
.ws-stats b{display:block; font-family:var(--mono); font-size:var(--fs-md); color:var(--accent)}
.ws-stats span{font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.09em}

/* ---------- credits modal ---------- */
.credits-body{max-height:66vh; overflow:auto}
.credits-body h4{
  margin:0 0 8px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label);
}
.agreement{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
  padding:14px 16px; margin-bottom:18px;
}
.agreement p{margin:0 0 9px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6}
.agreement p:last-child{margin-bottom:0}
.agreement.note ul{margin:0; padding-left:18px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.65}
.agree-line{
  border-left:3px solid var(--accent); padding:9px 12px; background:var(--panel);
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-style:italic; color:var(--ink)!important;
}
.src-list{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.src{
  border:1px solid var(--line); border-radius:var(--r); padding:13px 15px;
  background:var(--panel);
}
.src-top{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:5px}
.src-top b{font-size:var(--fs-md); color:var(--ink)}
.src-lic{
  font-family:var(--mono); font-size:10px; color:var(--accent);
  background:var(--accent-wash); padding:2px 7px; border-radius:20px; white-space:nowrap;
}
.src-count{margin-left:auto; font-family:var(--mono); font-size:var(--fs-xs); color:var(--faint)}
.src p{margin:0 0 7px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.55}
.src .mod{color:var(--coral); font-weight:500}
.src a{
  display:inline-block; font-family:var(--mono); font-size:var(--fs-xs);
  color:var(--accent); text-decoration:none; word-break:break-all; margin-right:14px;
}
.src a:hover{text-decoration:underline}
.usage{
  border:1px dashed var(--line); border-radius:var(--r); padding:12px 15px;
  margin-bottom:18px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6;
}
.usage b{color:var(--ink)}

/* ---------- export formats ---------- */
.fmt-head{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--label); margin:16px 0 9px;
}
.fmt-row{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:13px}
.fmt{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel-2); cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s, transform .08s;
}
.fmt:hover{border-color:var(--accent); background:var(--label-wash); transform:translateY(-1px)}
.fmt b{font-family:var(--mono); font-size:var(--fs-md); color:var(--accent); font-weight:600}
.fmt span{font-size:10px; color:var(--muted); line-height:1.35}
.fmt.busy{opacity:.55; pointer-events:none}
.fmt-opts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px}
.fld.inline{margin-bottom:0}
.src-details{margin-top:8px; border-top:1px solid var(--line-soft); padding-top:10px}
.src-details > summary{
  cursor:pointer; font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--label); list-style:none; padding:3px 0;
}
.src-details > summary::-webkit-details-marker{display:none}
.src-details > summary::before{content:"▸ "; color:var(--label-soft)}
.src-details[open] > summary::before{content:"▾ "}

.fmt-toggles{
  border:1px solid var(--line-soft); border-radius:var(--r); padding:11px 13px 4px;
  background:var(--panel-2); margin-top:11px;
}
.fmt-toggles .chk{margin-bottom:9px; font-size:var(--fs-xs); line-height:1.5}
.fmt-toggles .chk b{color:var(--label); font-weight:600}
.exp-size{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted);
  border-top:1px solid var(--line-soft); padding:8px 0 9px; margin-top:2px;
}
.exp-size b{color:var(--accent)}
.preview.alpha{background:var(--panel-2)}
.preview.alpha img{
  background-image:linear-gradient(45deg,#dfe5e4 25%,transparent 25%,transparent 75%,#dfe5e4 75%),
                   linear-gradient(45deg,#dfe5e4 25%,transparent 25%,transparent 75%,#dfe5e4 75%);
  background-size:14px 14px; background-position:0 0,7px 7px; background-color:#fff;
  outline:1px solid var(--line); border-radius:2px;
}

/* ---------- menu bar ---------- */
.menubar{
  display:flex; align-items:center; gap:0; position:static; z-index:2;
  min-width:0; max-width:calc(50% - 118px); overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.menubar::-webkit-scrollbar{height:0}
.mtop{
  padding:5px 6px; border:0; background:transparent; border-radius:6px; flex:none;
  font-family:var(--sans); font-size:var(--fs-sm); font-weight:500; color:var(--label);
  cursor:pointer; white-space:nowrap;
}
.mtop:hover{background:var(--label-wash)}
.mtop.open{background:var(--accent); color:var(--accent-ink)}
.mpanel{
  position:fixed; z-index:200; min-width:236px; max-height:76vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:0 0 9px 9px;
  border-top:0; box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px;
}
.mpanel[hidden]{display:none}
.mitem{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 9px; border:0; background:transparent; border-radius:5px;
  font-family:var(--sans); font-size:var(--fs-sm); color:var(--ink-soft); cursor:pointer;
}
.mitem:hover:not(:disabled), .mitem.has-sub.open{background:var(--label-wash); color:var(--accent)}
.mitem:disabled{opacity:.38; cursor:default}
.mitem .mico{
  width:17px; height:17px; flex:none; display:grid; place-items:center; color:var(--label-soft);
}
.mitem .mico svg{width:17px; height:17px}
.mitem:hover:not(:disabled) .mico, .mitem.has-sub.open .mico{color:var(--accent)}
.mitem .mtext{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mitem .marrow{margin-left:auto; width:13px; height:13px; flex:none; color:var(--faint)}
.mitem .marrow svg{width:13px; height:13px}
.mitem:hover:not(:disabled) .marrow, .mitem.has-sub.open .marrow{color:var(--accent)}
.msub{min-width:246px}
.mitem .macc{
  margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint);
  padding-left:16px; white-space:nowrap;
}
.mitem:hover:not(:disabled) .macc{color:var(--label-soft)}
.msep{height:1px; background:var(--line-soft); margin:4px 7px}
.mlabel{
  padding:8px 10px 4px; font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label-soft);
}
.mempty{padding:8px 10px; font-size:var(--fs-xs); color:var(--faint); font-style:italic}

/* ---------- help / docs modals ---------- */
.doc-body{max-height:66vh; overflow:auto; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.65}
.doc-body h4{
  margin:18px 0 8px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label);
}
.doc-body h4:first-child{margin-top:0}
.doc-body p{margin:0 0 10px}
.doc-body ul{margin:0 0 12px; padding-left:19px}
.doc-body li{margin-bottom:5px}
.doc-body code, .kbd{
  font-family:var(--mono); font-size:11px; background:var(--sunken);
  border:1px solid var(--line-soft); border-radius:4px; padding:1px 6px; color:var(--label);
}
.keytable{width:100%; border-collapse:collapse; margin-bottom:14px}
.keytable td{padding:6px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.keytable td:first-child{width:132px; white-space:nowrap}
.keytable tr:last-child td{border-bottom:0}
.doc-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 26px}
@media (max-width:720px){ .doc-cols{grid-template-columns:1fr} }
.about-hero{
  display:flex; align-items:center; gap:14px; padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.about-hero .mark{font-family:var(--serif); font-style:italic; font-weight:600; font-size:24px}
.about-hero .mark b{color:var(--accent); font-weight:600}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:4px 0 14px}
.stat-grid div{border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--panel-2); padding:9px 10px}
.stat-grid b{display:block; font-family:var(--mono); font-size:var(--fs-md); color:var(--accent)}
.stat-grid span{font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em}

/* ---------- right-click menu ---------- */
.ctxmenu{
  position:fixed; z-index:220; min-width:212px; max-height:80vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px;
}
.ctxmenu .mitem .mico{display:none}
.ctxmenu .mitem{gap:0}
.ctx-head{
  padding:7px 10px 8px; margin-bottom:3px; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--label-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- ribbon ---------- */
.ribbon{
  grid-area:ribbon; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:4px 10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
}
.ribbon::-webkit-scrollbar{height:6px}
.ribbon::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px}
.rrow{display:flex; align-items:center; gap:0; min-width:max-content; height:33px}
.rgroup{display:flex; align-items:center; gap:2px; padding:0 7px; height:100%}
.rgroup:first-child{padding-left:0}
.rsep{width:1px; height:22px; background:var(--line); flex:none; margin:0 1px}

.rbtn{
  height:27px; min-width:27px; padding:0 5px; border:1px solid transparent;
  background:transparent; border-radius:5px; color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-family:var(--sans); font-size:var(--fs-sm); cursor:pointer; flex:none;
}
.rbtn:hover:not(:disabled){background:var(--label-wash); border-color:var(--line-soft); color:var(--accent)}
.rbtn:active:not(:disabled){transform:translateY(.5px)}
.rbtn.on{background:var(--accent-wash); border-color:var(--accent); color:var(--accent)}
.rbtn:disabled{opacity:.34; cursor:default}
.rbtn svg{width:16px; height:16px; flex:none}
.rbtn .cap{font-size:var(--fs-xs); font-weight:500; white-space:nowrap}
.rbtn.wtxt{padding:0 7px}

/* letter buttons: B / I / U / S / x² */
.rbtn.glyph{font-size:14px; font-weight:600; min-width:26px; font-family:var(--serif)}
.rbtn.glyph.b{font-weight:800}
.rbtn.glyph.i{font-style:italic}
.rbtn.glyph.u{text-decoration:underline}
.rbtn.glyph.s{text-decoration:line-through}
.rbtn.glyph sup, .rbtn.glyph sub{font-size:9px; font-family:var(--sans)}

/* split button: swatch + caret */
.rbtn.colr{flex-direction:column; gap:0; padding:0 4px; height:27px; justify-content:center}
.rbtn.colr .swatchbar{width:16px; height:3.5px; border-radius:1px; margin-top:1px}

.rsel{
  height:27px; border:1px solid var(--line); background:var(--panel-2);
  border-radius:5px; color:var(--ink); font-family:var(--sans);
  font-size:var(--fs-sm); padding:0 6px; cursor:pointer; flex:none;
}
.rsel:focus{outline:none; border-color:var(--accent)}
.rsel.font{width:158px}
.rsel.size{width:62px}
.rnum{
  width:52px; height:27px; border:1px solid var(--line); background:var(--panel-2);
  border-radius:5px; color:var(--ink); font-family:var(--mono);
  font-size:var(--fs-sm); padding:0 6px; text-align:center; flex:none;
}
.rnum:focus{outline:none; border-color:var(--accent)}
.rcaret{width:11px; height:11px; opacity:.6; margin-left:-1px}
.rlabel{
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); align-self:center; margin-right:5px; white-space:nowrap;
}

/* the little popovers a caret opens */
.rpop{
  position:fixed; z-index:210; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; box-shadow:var(--shadow); padding:8px;
}
.rpop[hidden]{display:none}
.swgrid{display:grid; grid-template-columns:repeat(8,20px); gap:5px}
.swgrid button{
  width:20px; height:20px; border-radius:4px; border:1px solid rgba(0,0,0,.14); cursor:pointer; padding:0;
}
.swgrid button:hover{outline:2px solid var(--accent); outline-offset:1px}
.rpop .prow{margin-top:8px}
.rpop-list{display:flex; flex-direction:column; gap:1px; min-width:172px}
.rpop-list button{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border:0;
  background:transparent; border-radius:5px; font-family:var(--sans);
  font-size:var(--fs-sm); color:var(--ink-soft); text-align:left; cursor:pointer;
}
.rpop-list button:hover{background:var(--label-wash); color:var(--accent)}
.rpop-list button svg{width:16px; height:16px; flex:none; color:var(--label-soft)}
.rpop-list button.on{color:var(--accent); font-weight:600}

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