/* fontombo lab — brand tokens (see BRAND.md) */
:root {
  --bg: #F7F4EE;
  --panel: #FFFDF9;
  --ink: #16141A;
  --ink-2: #2A2730;
  --muted: #6E6A73;
  --line: #E2DCD0;
  --soft: #EFEAE1;
  --accent: #2B4CFF;
  --accent-soft: #E3E8FF;
  --h: #FF4D2E; --a: #FFB01F; --b: #2B4CFF;
  --h-soft: #FFE4DD; --a-soft: #FFF0CF; --b-soft: #E3E8FF;
  --radius: 12px;
  --ui: 'Geist', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --display: 'Fraunces', Georgia, serif;
  --ease: cubic-bezier(.2, .9, .25, 1.15); --out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid;
  grid-template-columns: 340px 1fr;
  font: 13px/1.4 var(--ui);
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
kbd { font: 11px var(--ui); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: #fff; }

/* ---------- Library ---------- */
.library { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.lib-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.brand { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 12px Georgia, serif; }
.tool-nav { display: flex; gap: 2px; }
.tool-nav a { color: var(--muted); text-decoration: none; font-size: 12px; padding: 5px 8px; border-radius: 6px; }
.tool-nav a:hover { background: var(--soft); color: var(--ink); }
.lib-ad:empty { display: none; }
.lib-ad { border-top: 1px solid var(--line); padding: 10px 14px; }
.tool-ad-bar:empty { display: none; }
.tool-ad-bar { border-top: 1px solid var(--line); background: var(--panel); padding: 6px 16px; }
.tool-ad-bar .ad { margin: 0 auto; max-width: 970px; max-height: 110px; min-height: 90px; overflow: hidden; text-align: center; }
.tool-ad-bar .ad-label, .lib-ad .ad-label { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ad-placeholder { border: 2px dashed #d5d5cf; border-radius: 10px; display: grid; place-items: center; color: #9a9a92; font-size: 12px; min-height: 90px; background: repeating-linear-gradient(45deg, transparent 0 10px, #f4f4f0 10px 20px); }
.carbon-ph { min-height: 100px; }
@media (max-width: 860px) { .tool-ad-bar { display: none; } .tool-nav { display: none; } }
.lib-status { color: var(--muted); font-size: 12px; margin-top: -8px; display: flex; gap: 6px; align-items: center; }
.lib-status button { border: 0; background: none; color: var(--accent); padding: 0; }
.search { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); outline: none; }
.search:focus { border-color: var(--accent); background: #fff; }
.cats { display: flex; flex-wrap: wrap; gap: 4px; }
.cats button, .tags button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 9px; font-size: 12px;
}
.cats button .n { color: var(--muted); margin-left: 3px; font-size: 11px; }
.cats button.on, .tags button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cats button.on .n { color: #bbb; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags button { font-size: 11px; padding: 2px 8px; color: var(--muted); }
.lib-filters { display: grid; gap: 8px; }
.row { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; }
.row select { margin-left: 4px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.check { display: flex; align-items: center; gap: 4px; }
.target { font-size: 12px; background: var(--accent-soft); color: var(--accent); padding: 6px 9px; border-radius: 8px; }
.target b { font-weight: 600; }

.lib-list { flex: 1; overflow-y: auto; outline: none; }
.font-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px;
  padding: 9px 14px; border-bottom: 1px solid var(--soft); cursor: pointer;
}
.font-row:hover { background: #fafaf8; }
.font-row.cursor { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.font-row.inuse .fname::after { content: "in use"; font: 10px var(--ui); color: var(--accent); margin-left: 6px; vertical-align: middle; }
.fname { font-size: 21px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmeta { color: var(--muted); font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .1s; }
.font-row:hover .row-actions, .font-row.cursor .row-actions { opacity: 1; }
.row-actions button, .icon {
  border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; color: var(--muted); font-size: 14px; line-height: 1;
}
.row-actions button:hover, .icon:hover { background: var(--soft); color: var(--ink); }
.row-actions .fav.on { color: #e0a100; opacity: 1; }
.font-row .fav.on { opacity: 1; }
.font-row:not(:hover):not(.cursor) .row-actions:has(.fav.on) { opacity: 1; }
.empty { padding: 30px 16px; color: var(--muted); text-align: center; }

/* ---------- Main ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: 5px 10px; font-size: 12px; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: #fff; }
.btn { border: 1px solid var(--line); background: #fff; padding: 6px 12px; border-radius: 8px; font-size: 12px; }
.btn:hover { border-color: #c9c9c4; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn span { color: var(--muted); margin-left: 2px; }
.btn.primary span { color: #d8d6ff; }
.link { border: 0; background: none; color: var(--accent); padding: 0; text-decoration: underline; }
.hint { margin: 12px 16px 0; padding: 9px 12px; background: #fffbe8; border: 1px solid #f0e2a6; border-radius: 8px; color: #5b5233; font-size: 12px; line-height: 1.6; }
.hint.hidden { display: none; }

.textpanel { margin: 12px 16px 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; }
.textpanel.hidden { display: none; }
.tp-head { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.tp-head b { color: var(--ink); }
.tp-head .link { margin-left: auto; }
.tp-row { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.tp-row .role { margin-top: 5px; }
.tp-row textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; background: var(--soft); resize: vertical; line-height: 1.45; outline: none; }
.tp-row textarea:focus { border-color: var(--accent); background: #fff; }
.specimen .cust { white-space: pre-line; }
.specimen .cust-b p:last-child { margin-bottom: 0; }

.cards { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 16px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); grid-auto-rows: max-content; }
.cards[data-cols="1"] { grid-template-columns: 1fr; }
.cards[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { container-type: inline-size; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.card-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; }
.card-name { flex: 1 1 140px; min-width: 0; border: 0; background: none; font-weight: 600; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.card-name:hover, .card-name:focus { background: var(--soft); outline: none; }
.card-actions { display: flex; gap: 1px; align-items: center; }
.card-actions .third { font-size: 11px; color: var(--muted); display: flex; gap: 3px; align-items: center; margin-right: 6px; }

.slots { display: grid; gap: 3px; padding: 2px 10px 10px; }
.slot { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto auto; gap: 4px; align-items: center; padding: 3px 4px; border-radius: 8px; border: 1px solid transparent; }
.slot.active { background: var(--accent-soft); border-color: #d6d9ff; }
.slot.off { opacity: .45; }
.role { width: 22px; height: 22px; border-radius: 6px; background: var(--soft); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.slot.active .role { background: var(--accent); color: #fff; }
.slot-family { text-align: left; border: 0; background: none; font-size: 16px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; }
.slot-family:hover { background: rgba(0,0,0,.04); }
.slot-family small { font: 11px var(--ui); color: var(--muted); margin-left: 6px; }
.slot select, .slot input { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 2px 3px; font-size: 12px; }
.slot input { width: 50px; }
.slot .icon { width: 24px; height: 24px; font-size: 14px; }

/* ---------- Specimen ---------- */
.specimen {
  --paper: #ffffff; --text: #1d1d1f; --sub: #55555c; --rule: #e6e6e3; --tint: #f3f3f0; --brand: #3d3af0;
  background: var(--paper); color: var(--text); padding: 34px 36px 38px; border-top: 1px solid var(--line); flex: 1 0 auto;
}
.specimen.warm { --paper: #f7f1e6; --text: #2a2419; --sub: #6d6250; --rule: #e3d8c3; --tint: #efe6d5; --brand: #b4471f; }
.specimen.dark { --paper: #17171a; --text: #eeeef0; --sub: #a1a1aa; --rule: #2c2c31; --tint: #222227; --brand: #9b97ff; }
.specimen [contenteditable]:focus { outline: 1px dashed var(--brand); outline-offset: 3px; }
.specimen .h { font-family: var(--hf); font-weight: var(--hw); font-size: var(--hs); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 .45em; text-wrap: balance; }
.specimen .h2 { font-family: var(--hf); font-weight: var(--hw); font-size: calc(var(--hs) * .56); line-height: 1.2; margin: 1.3em 0 .5em; }
.specimen .a { font-family: var(--af); font-weight: var(--aw); font-size: var(--as); line-height: 1.45; color: var(--sub); margin: 0 0 1em; }
.specimen .eyebrow { font-family: var(--af); font-weight: var(--aw); font-size: calc(var(--as) * .7); text-transform: uppercase; letter-spacing: .12em; color: var(--brand); margin: 0 0 .9em; }
.specimen .b, .specimen p.b { font-family: var(--bf); font-weight: var(--bw); font-size: var(--bs); line-height: 1.65; margin: 0 0 1em; }
.specimen .quote { font-family: var(--hf); font-weight: var(--hw); font-size: calc(var(--hs) * .5); line-height: 1.3; border-left: 3px solid var(--brand); padding-left: .8em; margin: 1.2em 0; }
.specimen .caption { font-family: var(--af); font-weight: var(--aw); font-size: calc(var(--bs) * .8); color: var(--sub); }
.specimen .meta { display: flex; gap: 10px; align-items: center; margin: 0 0 1.6em; }
.specimen .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); border: 1px solid var(--rule); }

/* landing */
.specimen .hero { text-align: center; padding: 8px 0 26px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.specimen .hero .h { font-size: calc(var(--hs) * 1.15); }
.specimen .ctas { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.specimen .cta { font-family: var(--af); font-weight: var(--aw); font-size: calc(var(--bs) * .95); padding: .7em 1.3em; border-radius: 999px; background: var(--brand); color: var(--paper); }
.specimen .cta.ghost { background: none; color: var(--text); border: 1px solid var(--rule); }
.specimen .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
.specimen .features h4 { font-family: var(--hf); font-weight: var(--hw); font-size: calc(var(--hs) * .42); margin: 0 0 .4em; line-height: 1.2; }
.specimen .features .b { font-size: calc(var(--bs) * .92); }

/* ui */
.specimen .ui-nav { display: flex; gap: 18px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.specimen .ui-nav .logo { font-family: var(--hf); font-weight: var(--hw); font-size: calc(var(--hs) * .5); margin-right: auto; }
.specimen .ui-nav span { font-family: var(--af); font-weight: var(--aw); font-size: calc(var(--bs) * .9); color: var(--sub); }
.specimen .ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.specimen .ui-card { border: 1px solid var(--rule); border-radius: 12px; padding: 16px; background: var(--paper); }
.specimen .ui-card .label { font-family: var(--af); font-weight: var(--aw); font-size: calc(var(--bs) * .75); text-transform: uppercase; letter-spacing: .08em; color: var(--sub); }
.specimen .ui-card .num { font-family: var(--hf); font-weight: var(--hw); font-size: calc(var(--hs) * .8); line-height: 1.1; margin: 6px 0 4px; }
.specimen .field { margin-top: 18px; display: grid; gap: 6px; }
.specimen .input { font-family: var(--bf); font-weight: var(--bw); font-size: var(--bs); border: 1px solid var(--rule); border-radius: 8px; padding: .6em .8em; color: var(--sub); background: var(--tint); }
.specimen table { width: 100%; border-collapse: collapse; margin-top: 18px; font-family: var(--bf); font-weight: var(--bw); font-size: calc(var(--bs) * .92); }
.specimen th { font-family: var(--af); font-weight: var(--aw); text-align: left; color: var(--sub); font-size: .85em; border-bottom: 1px solid var(--rule); padding: 6px 4px; }
.specimen td { border-bottom: 1px solid var(--rule); padding: 8px 4px; }
.specimen td.n { font-variant-numeric: tabular-nums; text-align: right; }

/* glyphs */
.specimen .gl { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.specimen .gl:last-child { border-bottom: 0; margin-bottom: 0; }
.specimen .gl-label { font: 11px var(--ui); color: var(--sub); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.specimen .gl-big { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.specimen .gl-set { font-size: 20px; line-height: 1.5; word-break: break-all; }
.specimen .gl-w { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; line-height: 1.45; }
.specimen .gl-w small { font: 10px var(--ui); color: var(--sub); display: inline-block; width: 30px; }

/* ---------- Dialogs ---------- */
dialog { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(620px, 92vw); max-height: 80vh; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
dialog::backdrop { background: rgba(20,20,25,.35); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dlg-head h3 { margin: 0; font-size: 14px; }
.dlg-foot { padding: 10px 16px; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); }
#savedList { max-height: 60vh; overflow-y: auto; }
.saved-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--soft); align-items: center; }
.saved-item .sv-h { font-size: 22px; line-height: 1.2; }
.saved-item .sv-b { font-size: 14px; color: var(--muted); }
.saved-item .sv-n { font: 11px var(--ui); color: var(--muted); margin-top: 4px; }
.saved-item .acts { display: flex; gap: 6px; }
#cssOut { width: 100%; height: 300px; border: 0; padding: 14px 16px; font: 12px/1.5 ui-monospace, Menlo, monospace; resize: vertical; outline: none; background: var(--soft); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 12px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateX(-50%); }

@media (max-width: 860px) {
  body { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; }
  .library { border-right: 0; border-bottom: 1px solid var(--line); }
  .cards { grid-template-columns: 1fr !important; }
}

/* narrow cards: family name on its own line, controls below */
@container (max-width: 440px) {
  .slot { grid-template-columns: 22px minmax(0, 1fr) auto auto auto; row-gap: 2px; }
  .slot-family { grid-column: 2 / -1; }
  .slot select { grid-column: 2; justify-self: start; }
  .card-head { flex-wrap: wrap; }
  .specimen { padding: 24px 22px 28px; }
}

/* =================== fontombo brand layer =================== */
body.tool { background: var(--bg); }
.brand { gap: 9px; }
.brand svg { width: 28px; height: 28px; transition: transform .5s var(--ease); }
.brand:hover svg { transform: rotate(-12deg); }
.wordmark { font: 600 21px/1 var(--display); font-variation-settings: 'SOFT' 50, 'opsz' 144; letter-spacing: -0.035em; }
.wordmark i { font-style: normal; display: inline-block; }
.wordmark .o1 { font-style: italic; font-weight: 400; color: var(--h); }
.wordmark .o2 { font-family: var(--ui); font-weight: 600; font-size: .9em; color: var(--a); letter-spacing: 0; }
.wordmark .o3 { font-family: var(--mono); font-weight: 500; font-size: .86em; color: var(--b); letter-spacing: 0; }
.lib-status { font: 11px var(--mono); margin-top: -4px; }
.search { border-radius: 999px; padding: 9px 14px; background: var(--bg); border-width: 1.5px; }
.search:focus { border-color: var(--ink); background: #fff; }
.cats button, .tags button { font-family: var(--ui); transition: all .15s; }
.cats button:hover, .tags button:hover { border-color: var(--ink); }
.cats button .n { font-family: var(--mono); }
.row select { border-radius: 999px; padding: 3px 8px; }
.row input[type=checkbox], .third input { accent-color: var(--ink); }

/* target bar takes the colour of the active role */
.target { background: var(--soft); color: var(--ink); border-radius: 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.target::before { content: attr(data-letter); width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; font: 700 10px var(--mono); color: #fff; background: var(--role, var(--h)); flex: none; }
.target .link { color: var(--b); }

/* library rows */
.font-row { padding: 10px 14px; transition: background .15s; }
.font-row:hover { background: var(--bg); }
.font-row.cursor { background: var(--role-soft, var(--h-soft)); box-shadow: inset 3px 0 0 var(--role, var(--h)); }
.font-row.inuse .fname::after { font: 10px var(--mono); color: var(--h); }
.fmeta { font: 10.5px var(--mono); }
.row-actions .fav.on { color: var(--a); }

/* toolbar */
.toolbar { background: var(--panel); gap: 12px; padding: 10px 18px; }
.seg { border-radius: 999px; border-width: 1.5px; background: var(--bg); }
.seg button { padding: 6px 12px; font-weight: 500; transition: background .15s, color .15s; }
.seg button + button { border-left: 0; }
.seg button.on { background: var(--ink); color: #fff; border-radius: 999px; }
.btn { border-radius: 999px; padding: 7px 14px; font-weight: 600; border-width: 1.5px; transition: transform .2s var(--ease), background .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); }
.btn.primary:hover { background: var(--h); border-color: var(--h); }
.tool-nav a { border-radius: 999px; font-weight: 500; }
.hint { background: var(--a-soft); border: 0; color: #4A3A12; border-radius: 12px; }
.hint b { color: var(--h); }
kbd { background: rgba(255, 255, 255, .6); }

/* your-text panel */
.textpanel { background: var(--panel); border-radius: 14px; padding: 12px 14px; }
.tp-row textarea { background: var(--bg); border-radius: 10px; font-family: var(--ui); }
.tp-row textarea:focus { border-color: var(--ink); }

/* role colours everywhere: H vermilion, A marigold, B cobalt */
.role { font-family: var(--mono); color: #fff; }
.slot[data-role="heading"] .role, .tp-row:nth-of-type(1) .role { background: var(--h); color: #fff; }
.slot[data-role="accent"] .role, .tp-row:nth-of-type(2) .role { background: var(--a); color: var(--ink); }
.slot[data-role="body"] .role, .tp-row:nth-of-type(3) .role { background: var(--b); color: #fff; }
.slot[data-role="heading"] { --rc: var(--h); --rs: var(--h-soft); }
.slot[data-role="accent"] { --rc: var(--a); --rs: var(--a-soft); }
.slot[data-role="body"] { --rc: var(--b); --rs: var(--b-soft); }
.slot { border-radius: 10px; transition: background .2s, border-color .2s; }
.slot.active { background: var(--rs); border-color: var(--rc); }
.slot.active .role { box-shadow: 0 0 0 3px var(--panel), 0 0 0 4.5px var(--rc); }
.slot select, .slot input { border-radius: 8px; background: var(--panel); font-family: var(--mono); font-size: 11.5px; }

/* cards */
.cards { gap: 18px; padding: 18px; }
.card { border-radius: 18px; transition: box-shadow .3s var(--out), border-color .2s, transform .3s var(--ease); }
.card:hover { box-shadow: 0 14px 34px -18px rgba(22, 20, 26, .35); }
.card.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 18px 40px -22px rgba(22, 20, 26, .45); }
.card-name { font: 600 14px var(--ui); }
.card-actions .icon { border-radius: 8px; transition: background .15s, color .15s, transform .2s var(--ease); }
.card-actions .icon:hover { transform: scale(1.1); }
.card-actions [data-act="share"]:hover { background: var(--b-soft); color: var(--b); }
.card-actions [data-act="save"]:hover { background: var(--h-soft); color: var(--h); }
.card-actions [data-act="shuffleAll"]:hover { background: var(--a-soft); color: #8A5A00; }

/* new cards pop in; swapped fonts flash */
.card.enter { animation: cardIn .55s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.slot.flash .slot-family { animation: famIn .5s var(--out); }
@keyframes famIn { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }
.slot.flash { animation: slotGlow .9s var(--out); }
@keyframes slotGlow { 0% { box-shadow: 0 0 0 0 var(--rc); } 100% { box-shadow: 0 0 0 8px transparent; } }
.specimen.flash { animation: specIn .45s var(--out); }
@keyframes specIn { from { opacity: .35; filter: blur(2px); } }

/* specimen themes match the site palette */
.specimen { --paper: #FFFDF9; --text: #16141A; --sub: #4B4751; --rule: #E2DCD0; --tint: #EFEAE1; --brand: var(--h); }
.specimen.warm { --paper: #F4ECDD; --text: #2A2419; --sub: #6D6250; --rule: #E0D2B8; --tint: #EADFCB; --brand: #C2410C; }
.specimen.dark { --paper: #16141A; --text: #F4F1EC; --sub: #B9B4BF; --rule: #2E2B33; --tint: #2A2730; --brand: var(--a); }

/* dialogs + toast */
dialog { border-radius: 18px; }
.dlg-head h3 { font: 600 18px var(--display); }
#cssOut { font-family: var(--mono); }
.toast { border-radius: 999px; padding: 10px 16px; display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }

/* empty-ish state helper in library */
.lib-list::-webkit-scrollbar { width: 10px; }
.lib-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid var(--panel); }

@media (prefers-reduced-motion: reduce) { .card.enter, .slot.flash, .slot.flash .slot-family, .specimen.flash { animation: none; } }
.card.enter:nth-child(2) { animation-delay: .06s; } .card.enter:nth-child(3) { animation-delay: .12s; } .card.enter:nth-child(4) { animation-delay: .18s; } .card.enter:nth-child(n+5) { animation-delay: .24s; }

/* =================== mobile: library becomes a bottom sheet =================== */
.sheet-head, .tb-brand, .fab, .sheet-backdrop, .hint-mob, .filter-toggle, .tp-chev { display: none; }
.search-row { display: flex; gap: 6px; }
.search-row .search { flex: 1; min-width: 0; }
.tb-scroll { display: contents; }

@media (max-width: 860px) {
  html, body.tool { height: auto; }
  body.tool { display: block; overflow: auto; font-size: 14px; }
  .main { min-height: 100dvh; }

  /* toolbar: brand + actions, then a swipeable row of view options */
  .toolbar { position: sticky; top: 0; z-index: 30; flex-wrap: wrap; padding: 8px 12px 10px; gap: 8px; box-shadow: 0 1px 0 var(--line); }
  .tb-brand { display: flex; align-items: center; }
  .tb-brand .wordmark { font-size: 19px; }
  .tb-brand svg { width: 26px; height: 26px; }
  .toolbar > .btn { padding: 8px 12px; font-size: 13px; }
  .tb-scroll { display: flex; order: 10; width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .tb-scroll::-webkit-scrollbar { display: none; }
  .tb-scroll .seg { flex: none; }
  .seg button { padding: 8px 13px; font-size: 13px; }
  #colsSeg, .tool-nav { display: none; }

  .hint { margin: 10px 12px 0; font-size: 13px; }
  .hint-desk { display: none; } .hint-mob { display: inline; }

  /* "your text" collapses to a single line */
  .textpanel { margin: 10px 12px 0; }
  .tp-head { cursor: pointer; font-size: 14px; align-items: center; }
  .tp-desc { display: none; }
  .tp-chev { display: inline; margin-left: 4px; color: var(--muted); transition: transform .25s var(--ease); }
  .textpanel.collapsed .tp-chev { transform: rotate(-90deg); }
  .textpanel.collapsed .tp-row { display: none; }
  .tp-row textarea { font-size: 16px; }

  /* cards */
  .cards { padding: 12px 12px 96px; gap: 14px; overflow: visible; grid-template-columns: minmax(0, 1fr) !important; }
  .card { border-radius: 16px; }
  .card-head { padding: 8px 8px 4px 10px; }
  .card-actions { flex-wrap: wrap; justify-content: flex-end; }
  .card-actions .icon { width: 36px; height: 36px; font-size: 16px; }
  .card-actions .third { font-size: 12px; margin-right: 2px; }
  .card-actions .third input { width: 18px; height: 18px; }
  .slots { padding: 2px 8px 10px; gap: 6px; }
  .slot { padding: 6px; }
  .slot-family { font-size: 19px; padding: 6px 4px; }
  .slot select, .slot input { font-size: 16px; height: 36px; border-radius: 10px; }
  .slot input { width: 64px; }
  .slot .icon { width: 36px; height: 36px; font-size: 16px; }
  .specimen { padding: 24px 20px 28px; }

  /* the library sheet */
  .library { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: min(60dvh, 560px); border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -24px 60px -12px rgba(22, 20, 26, .4); transform: translateY(105%); transition: transform .45s var(--out); visibility: hidden; }
  body.sheet-open .library { transform: none; visibility: visible; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(22, 20, 26, .12); opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
  .sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 12px 10px 16px; position: relative; touch-action: none; }
  .grabber { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line); }
  .sheet-title { display: flex; align-items: center; gap: 8px; font: 600 16px var(--ui); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-title .role { width: 24px; height: 24px; }
  .sheet-step { display: flex; gap: 6px; align-items: center; }
  .step-btn { width: 44px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); font: 400 24px/1 var(--ui); color: var(--ink); cursor: pointer; }
  .step-btn:active { background: var(--role-soft, var(--h-soft)); border-color: var(--role, var(--h)); }
  #sheetDone { padding: 9px 14px; }
  .lib-head { padding: 0 12px 10px; gap: 8px; border-bottom: 1px solid var(--line); }
  .lib-brand, .lib-status, .target, .lib-ad { display: none !important; }
  .search { font-size: 16px; padding: 10px 14px; }
  .filter-toggle { display: block; border: 1.5px solid var(--line); background: var(--panel); border-radius: 999px; padding: 0 14px; font: 600 13px var(--ui); color: var(--ink); }
  .filter-toggle[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .cats::-webkit-scrollbar { display: none; }
  .cats button { flex: none; padding: 7px 12px; font-size: 13px; }
  .lib-filters { display: none; }
  .library.show-filters .lib-filters { display: grid; }
  .row select { font-size: 16px; }
  .font-row { padding: 12px 14px; }
  .fname { font-size: 24px; }
  .row-actions { opacity: 1; }
  .row-actions button { width: 38px; height: 38px; font-size: 17px; }
  .lib-list { padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; }

  /* floating "Fonts" button */
  .fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 12px 18px 12px 12px; font: 600 15px var(--ui); box-shadow: 0 14px 30px -10px rgba(22, 20, 26, .6); cursor: pointer; transition: transform .3s var(--ease), opacity .2s; }
  .fab .role { width: 26px; height: 26px; background: var(--role, var(--h)); color: #fff; }
  body.sheet-open .fab { transform: translateY(120px); opacity: 0; }
  dialog { width: 94vw; }
  .toast { bottom: 84px; }
}
@media (max-width: 860px) { body.sheet-open .cards { padding-bottom: 66dvh; } }
@media (max-width: 860px) { .sheet-title .role { flex: none; display: inline-grid; } #sheetTitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; } }

.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; }
.tool-about { margin: 8px 16px 28px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; max-width: 860px; color: #45414B; font-size: 14.5px; line-height: 1.65; }
.tool-about h2 { font: 600 20px var(--display); color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.tool-about p { margin: 0 0 10px; }
.tool-about a { color: var(--b); }
.tool-ad-bar .ad:has(ins.adsbygoogle[data-ad-status="unfilled"]), .lib-ad .ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
@media (max-width: 860px) { .tool-about { margin: 0 12px 100px; padding: 18px; } }

/* cards + about text scroll together on desktop */
.scroller { flex: 1; min-height: 0; overflow-y: auto; }
.scroller .cards { overflow: visible; flex: none; }
@media (max-width: 860px) { .scroller { overflow: visible; } }