/* Kirara, "Atelier" look: square corners, hairlines, Fraunces serif + mono labels.
   The canvas never scrolls: only the settings column (or the panel under the canvas on phones) scrolls,
   with no visible scrollbar. Light and dark share one set of tokens. */
:root {
  --bg: #131316; --pan: #18181c; --ink: #f2ecee; --mu: #8f8890; --hair: #f2ecee1f; --hair2: #f2ecee38;
  --rose: #ff6f9f; --on-rose: #1a0d13; --sel: #f2ecee; --on-sel: #131316; --tile: #222227; --track: #f2ecee24;
  --serif: "Fraunces", Georgia, serif; --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "DM Mono", ui-monospace, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5f0e8; --pan: #fbf8f3; --ink: #1c1820; --mu: #7d7378; --hair: #1c182021; --hair2: #1c182040;
  --rose: #d6336c; --on-rose: #ffffff; --sel: #1c1820; --on-sel: #f5f0e8; --tile: #ebe4d9; --track: #1c18201f;
  color-scheme: light;
}
* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font: 500 16.5px/1.45 var(--sans); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden; height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: background-color .25s ease, color .25s ease;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
svg { display: block; fill: currentColor; flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------- */
.top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 12px max(24px, env(safe-area-inset-right, 0px)) 12px max(24px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; margin-right: auto; min-width: 0; }
.brand .mark { width: 30px; height: 30px; color: var(--rose); }
.wm { font: italic 600 29px/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.ib { width: 40px; height: 40px; display: grid; place-items: center; color: var(--mu); }
.ib:hover { color: var(--ink); }
.ib svg { width: 19px; height: 19px; }
.ib[disabled] { opacity: .3; pointer-events: none; }
#theme svg { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
:root[data-theme="dark"] #theme .moon, :root[data-theme="light"] #theme .sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; cursor: pointer; user-select: none;
  font: 500 13px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, transform .08s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--sel); color: var(--on-sel); }
.btn.solid:hover { background: var(--rose); color: var(--on-rose); }
.btn.line { box-shadow: inset 0 0 0 1px var(--hair2); }
.btn.line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn.small { height: 36px; padding: 0 13px; font-size: 12px; }
.btn.danger { color: var(--rose); }

/* ---------- main layout ---------- */
.app {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 44px;
  padding: 26px max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  width: 100%; max-width: 1480px; margin: 0 auto;
}
.stage-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding-bottom: 22px; }
.stage-wrap { flex: 1; min-height: 0; width: 100%; container-type: size; display: grid; place-items: center; padding: 10px; }
.stage {
  position: relative; width: min(100cqw - 20px, 100cqh - 20px); aspect-ratio: 1;
  background: repeating-conic-gradient(var(--tile) 0 25%, var(--pan) 0 50%) 0 0 / 24px 24px; box-shadow: 0 0 0 1px var(--hair);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ui { touch-action: none; cursor: default; }
.cm { position: absolute; width: 15px; height: 15px; border: 0 solid var(--ink); pointer-events: none; }
.cm.tl { left: -10px; top: -10px; border-left-width: 1px; border-top-width: 1px; }
.cm.tr { right: -10px; top: -10px; border-right-width: 1px; border-top-width: 1px; }
.cm.bl { left: -10px; bottom: -10px; border-left-width: 1px; border-bottom-width: 1px; }
.cm.br { right: -10px; bottom: -10px; border-right-width: 1px; border-bottom-width: 1px; }
.drop-veil { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent); outline: 1px dashed var(--rose); outline-offset: -10px; }
.drop-veil span { font: italic 600 28px var(--serif); color: var(--rose); }

/* picture line + tools */
.cap { flex: 0 0 auto; width: min(100%, 720px); display: flex; align-items: center; gap: 14px; padding-top: 14px; }
.pick { display: flex; align-items: center; gap: 11px; text-align: left; min-width: 0; padding: 2px 6px 2px 2px; }
.pick i { width: 46px; height: 46px; background: var(--tile) center / cover; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--hair); }
.pick span { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: baseline; min-width: 0; }
.pick small { grid-column: 1 / -1; font: 400 12px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mu); }
.pick b { font: italic 600 23px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick em { font-style: normal; font-size: 15px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick svg { width: 14px; height: 14px; color: var(--mu); transition: transform .2s ease; }
.pick[aria-expanded="true"] svg { transform: rotate(180deg); }
.pick:hover b { color: var(--rose); }
.tools { margin-left: auto; display: flex; box-shadow: inset 0 0 0 1px var(--hair2); }
.tools button { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; color: var(--mu); font: 500 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.tools button:hover { color: var(--ink); }
.tools button[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); }
.tools svg { width: 16px; height: 16px; }
.brushrow { flex: 0 0 auto; width: min(100%, 720px); display: flex; align-items: center; gap: 16px; padding-top: 12px; }
.brushrow .rg { flex: 1; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.brushrow .rg span { font: 400 12px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu); }

/* docked picture strip (computer) */
.dock { flex: 0 0 auto; width: min(100%, 720px); margin-top: 14px; border-top: 1px solid var(--hair); padding-top: 12px; }
.dock-row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior: contain; }
.tile { position: relative; flex: 0 0 auto; width: 84px; aspect-ratio: 1; background: var(--tile); overflow: hidden; display: block; padding: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.tile:hover img { transform: scale(1.05); }
.tile em { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; color: #fff; font: italic 500 14.5px/1.1 var(--serif); background: linear-gradient(transparent, #000b); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.add, .tile.all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--hair2); color: var(--mu); font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tile.add svg, .tile.all svg { width: 18px; height: 18px; }
.tile.add:hover, .tile.all:hover { color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.tile.on { outline: 2px solid var(--rose); outline-offset: -2px; }
.tile-wrap { position: relative; flex: 0 0 auto; }
.del {
  position: absolute; top: 0; right: 0; width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--sel); color: var(--on-sel);
}
.del::after { content: ""; position: absolute; inset: -6px -6px auto auto; width: 42px; height: 42px; }
.del svg { width: 11px; height: 11px; }
.del:hover { background: var(--rose); color: var(--on-rose); }

/* ---------- settings column ---------- */
.side { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--hair); padding-left: 34px; }
.tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 0; color: var(--mu); font: 500 15.5px var(--sans); min-width: 0; }
.tabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs svg { width: 17px; height: 17px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"] svg { color: var(--rose); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 3px; background: var(--rose); }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; }
.panel { display: flex; flex-direction: column; }
.h { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 8px; font: italic 600 26px/1.05 var(--serif); }
.h b { font: 400 12px var(--mono); color: var(--rose); letter-spacing: .08em; font-style: normal; }
.h .h-act { margin-left: auto; align-self: center; }

/* ---------- controls ---------- */
.ctl { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 14px; min-width: 0; }
.ctl > .lab { font: 400 12px/1.25 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu); }
.ctl > output { font: 400 13.5px var(--mono); color: var(--ink); text-align: right; min-width: 46px; font-variant-numeric: tabular-nums; }
.ctl-full { grid-template-columns: 96px minmax(0, 1fr); }
.ctl input[type="text"], .ctl textarea, .ctl select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hair2); padding: 8px 0; font: 500 16.5px var(--sans); border-radius: 0;
}
.ctl select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--mu) 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--mu) 50%) right 0 center / 6px 6px no-repeat; padding-right: 18px; }
.ctl select option { background: var(--pan); color: var(--ink); }
.ctl input[type="text"]:focus, .ctl textarea:focus, .ctl select:focus { outline: 0; border-bottom-color: var(--rose); }
.ctl textarea { resize: vertical; min-height: 64px; line-height: 1.35; }
/* range: hairline track, square-diamond knob */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; --p: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--ink) var(--p), var(--track) var(--p)); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--track); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: var(--ink); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--bg); border: 0; border-radius: 0; }
input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--bg); border: 0; border-radius: 0; }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--rose); }
input[type="range"]:focus-visible { outline: 0; }

/* option chips: text with an underline */
.chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.chips button { padding: 6px 0; font: 500 16px var(--sans); color: var(--mu); position: relative; }
.chips button:hover { color: var(--ink); }
.chips button[aria-pressed="true"] { color: var(--ink); }
.chips button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rose); }

/* colour strip: square chips, last one is your own colour */
.sws { display: flex; flex-wrap: wrap; gap: 4px; }
.sw { position: relative; width: 26px; height: 26px; display: grid; place-items: center; }
.sw i { position: absolute; inset: 3px; background: var(--c); box-shadow: inset 0 0 0 1px #00000024; }
.sw[aria-pressed="true"] i { inset: 1px; }
.sw[aria-pressed="true"]::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -5px; height: 2px; background: var(--rose); }
.sw.k-rainbow i { background: conic-gradient(from 45deg, #ff5c8a, #ffd36b, #6ff2a6, #5ad1ff, #c77dff, #ff5c8a); }
.sw.k-mix i { background: linear-gradient(135deg, #ff8fc4 50%, #ff4d6d 50%); }
.sw.k-pastel i { background: conic-gradient(#ffd1e8, #d8f5ff, #fff4c2, #e6d9ff, #ffd1e8); }
.sw.k-image i { background: linear-gradient(135deg, #d9b38c, #6b4f7d); }
.sw.k-emoji i { background: #fff4d1; }
.sw.k-emoji svg { position: relative; width: 17px; height: 17px; }
.sw.cu i { background: repeating-linear-gradient(-45deg, var(--mu) 0 1.5px, transparent 1.5px 5px); }
.sw.cu svg { position: relative; width: 14px; height: 14px; color: var(--ink); }
.sw.cu[aria-pressed="true"] i { background: var(--c); }
.sw.cu[aria-pressed="true"] svg { color: #fff; filter: drop-shadow(0 0 1px #0008); }
.sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* on/off tag */
.tog { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; box-shadow: inset 0 0 0 1px var(--hair2); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.tog i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.tog[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); box-shadow: none; }
.tog[aria-pressed="true"] i { background: var(--rose); }
.tog:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.tog[aria-pressed="true"]:hover { box-shadow: none; background: var(--rose); color: var(--on-rose); }
.ctl .tog { justify-self: start; }

/* effect rows */
.fx { border-bottom: 1px solid var(--hair); padding: 12px 0 14px; }
.fx-h { display: flex; align-items: center; gap: 10px; }
.fx-h b { flex: 1; font: 500 18px var(--sans); }
.fx:not(.on) .fx-h b { color: var(--mu); }
.fx-h .mini { width: 10px; height: 10px; box-shadow: 0 0 0 1px var(--hair2); }
.fx:not(.on) .fx-body { display: none; }
.fx .ctl:first-child { margin-top: 10px; }
.sub-tog { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font: 400 12px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu); }
.ctl-btn { margin-top: 14px; }

/* looks */
.looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; margin-top: 4px; }
.look { display: flex; flex-direction: column; gap: 7px; text-align: left; font: 500 14px var(--sans); color: var(--mu); }
.look i { display: block; height: 34px; }
.look:hover { color: var(--ink); }
.look[aria-pressed="true"] { color: var(--rose); }
.look[aria-pressed="true"] i { box-shadow: inset 0 0 0 2px var(--rose), inset 0 0 0 4px var(--bg); }

/* one-tap styles */
.recipes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin-top: 6px; }
.recipe { display: flex; flex-direction: column; gap: 7px; text-align: left; min-width: 0; }
.recipe canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--tile); transition: outline-color .15s ease; outline: 2px solid transparent; outline-offset: 2px; }
.recipe span { display: flex; gap: 6px; align-items: baseline; font: 500 15px/1.2 var(--sans); }
.recipe span b { font: 400 11.5px var(--mono); color: var(--mu); }
.recipe:hover canvas { outline-color: var(--hair2); }
.recipe[aria-pressed="true"] canvas { outline-color: var(--rose); }
.recipe[aria-pressed="true"] span { color: var(--rose); }
.reset { align-self: flex-start; margin-top: 18px; }

/* stickers */
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; margin-top: 4px; }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; font: 500 13.5px/1.15 var(--sans); color: var(--mu); text-align: center; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s ease, color .15s ease; }
.sticker:hover { box-shadow: inset 0 0 0 1px var(--hair2); color: var(--ink); }
.sticker canvas { width: 68px; height: 68px; display: block; }

/* in this edit */
.quick { display: flex; flex-direction: column; }
.qrow { border-bottom: 1px solid var(--hair); padding: 10px 0 12px; }
.qhead { display: flex; align-items: center; gap: 12px; font: 500 17px var(--sans); }
.qhead .link { margin-left: auto; font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.qhead .link:hover { color: var(--rose); }
.qbody .ctl { margin-top: 10px; }

/* selected sticker */
.inspector { padding: 18px 0 16px; border-bottom: 1px solid var(--ink); }
.insp-head { display: flex; align-items: baseline; gap: 10px; }
.insp-head b { font: 400 12px var(--mono); color: var(--rose); letter-spacing: .08em; text-transform: uppercase; }
.insp-head strong { font: italic 600 26px/1 var(--serif); flex: 1; }
.insp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.insp-more { margin-top: 14px; }
.insp-more summary { cursor: pointer; list-style: none; font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); padding: 6px 0; }
.insp-more summary::before { content: ""; display: inline-block; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); margin-right: 8px; vertical-align: 1px; }
.insp-more[open] summary::before { background: var(--rose); }
.insp-more summary::-webkit-details-marker { display: none; }

/* ---------- library ---------- */
.browser {
  width: min(980px, calc(100vw - 48px)); height: min(88dvh, 920px); max-height: none; padding: 0; border: 0;
  background: var(--bg); color: var(--ink); overflow: hidden; flex-direction: column; box-shadow: 0 0 0 1px var(--hair2), 0 40px 80px -30px #000c;
}
.browser[open] { display: flex; }
.browser::backdrop { background: color-mix(in srgb, #0b0a0d 72%, transparent); }
.browser-head { display: flex; align-items: center; gap: 8px; padding: 14px 22px 10px 12px; flex: 0 0 auto; }
.browser-head h2 { margin: 0; font: italic 600 28px/1 var(--serif); flex: 1; }
.count { font: 400 12px var(--mono); color: var(--mu); }
.browser-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 30px; }
.browser-search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ink); color: var(--mu); }
.browser-search svg { width: 16px; height: 16px; }
.browser-search input { flex: 1; background: transparent; border: 0; padding: 12px 0; font: italic 500 19px var(--serif); color: var(--ink); }
.browser-search input:focus { outline: 0; }
.browser-search input::placeholder { color: var(--mu); }
.yours { display: flex; gap: 8px; overflow-x: auto; }
.yours .tile { width: 92px; }
.browser-chips { flex-wrap: nowrap; overflow-x: auto; gap: 0 16px; margin-top: 26px; border-bottom: 1px solid var(--hair); }
.browser-chips button { flex: 0 0 auto; padding: 8px 0; }
.browser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 4px; }
.browser-grid h4 { grid-column: 1 / -1; }
.browser-grid .tile { width: 100%; }
.browser-grid .note { grid-column: 1 / -1; color: var(--mu); font: italic 500 18px var(--serif); margin: 24px 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px);
  background: var(--sel); color: var(--on-sel); padding: 12px 20px; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 30;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- phones and narrow windows ---------- */
@media (max-width: 900px) {
  .wide-only { display: none; }
  .top { padding: 8px 12px 8px 16px; gap: 4px; }
  .wm { font-size: 23px; }
  .brand .mark { width: 26px; height: 26px; }
  .ib { width: 38px; height: 38px; }
  .btn.solid { padding: 0 13px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; padding: 0; }
  .stage-col { padding: 14px 18px 0; }
  .stage-wrap { flex: 0 0 auto; height: min(100vw - 36px, 44dvh); padding: 0; }
  .stage { width: min(100cqw, 100cqh); }
  .cap { padding-top: 12px; gap: 10px; }
  .pick i { width: 34px; height: 34px; }
  .pick b { font-size: 20px; }
  .tools button { padding: 0 11px; }
  .tools button span { display: none; }
  .dock { display: none !important; }
  .side { border-left: 0; padding: 0 18px; }
  .tabs { margin-top: 12px; }
  .tabs button { flex-direction: column; gap: 4px; padding: 9px 0 8px; font-size: 13px; }
  .tabs svg { width: 17px; height: 17px; }
  .h { margin-top: 22px; font-size: 23px; }
  .ctl { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 10px; }
  .ctl-full { grid-template-columns: 80px minmax(0, 1fr); }
  .ctl > .lab { font-size: 11.5px; }
  .sws { gap: 2px; }
  .sw { width: 23px; height: 23px; }
  .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .browser { width: 100vw; height: 100dvh; max-width: none; box-shadow: none; }
  .browser-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .browser-body { padding: 0 18px 30px; }
  .browser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* colour: one square showing the current colour, tap to open the strip */
.cpick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sw.cur { width: 34px; height: 34px; box-shadow: inset 0 0 0 1px var(--hair2); }
.sw.cur i { inset: 4px; }
.sw.cur:hover, .sw.cur[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink); }
.sw.cur[aria-expanded="true"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -5px; height: 2px; background: var(--rose); }
.cpick .sws { padding-left: 10px; border-left: 1px solid var(--hair2); }

/* "In this edit": a picture of each thing, then its words and colours */
.qrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.qpic { width: 64px; height: 64px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); padding: 0; }
.qpic canvas { width: 100%; height: 100%; display: block; }
button.qpic:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.qrow:hover .qpic { box-shadow: inset 0 0 0 2px var(--rose); }
.qmain { min-width: 0; }
.qbody .ctl:first-child { margin-top: 6px; }