/* SANDR iOS prototype: pilot shell (pager, top bar, dock, chat). */

.pager { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.pager-rail { display: flex; height: 100%; will-change: transform; }
.page { flex: none; width: 100%; height: 100%; position: relative; overflow: hidden; }
.main-pager { z-index: 1; }
.util-layer { position: absolute; inset: 0; z-index: 8; background: var(--bg); transform: translate3d(0, 6%, 0); opacity: 0; pointer-events: none; transition: transform var(--d-sheet) var(--e-sheet), opacity var(--d-fast) linear; }
.util-layer.open { transform: none; opacity: 1; pointer-events: auto; }
.util-pager { position: absolute; inset: 0; }
.chev-rot { transition: transform var(--d-ui) var(--e-ui); }
.chev-rot.open { transform: rotate(180deg); }

/* top bar */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-top: var(--safe-top); border-radius: var(--dev-r, 0px) var(--dev-r, 0px) 0 0; background: color-mix(in srgb, var(--bg) calc(var(--c, 0) * 92%), transparent); }
.topbar[data-blur="1"] { -webkit-backdrop-filter: blur(calc(var(--c, 0) * 24px)) saturate(1.6); backdrop-filter: blur(calc(var(--c, 0) * 24px)) saturate(1.6); }
.tb-in { position: relative; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.tb-titles { position: absolute; left: 64px; right: 104px; top: 0; bottom: 0; display: grid; place-items: center; pointer-events: none; }
.tb-t { grid-area: 1 / 1; font-weight: 600; font-size: var(--fs-hd); opacity: 0; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.tb-t.chat { opacity: 1; }
.tb-r { display: flex; }
.tb-r .ibtn[data-new] { will-change: transform, opacity; }
.tb-line { position: absolute; left: 0; right: 0; bottom: 0; height: .5px; background: var(--line2); opacity: var(--c, 0); }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .55; } }
.topbar[data-util="1"] .tb-r .ibtn[data-new] { opacity: 0 !important; pointer-events: none; }

/* dock (composer) */
.dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0 12px calc(var(--safe-bottom) - 10px); display: grid; background: linear-gradient(to bottom, transparent, var(--bg) 26px); transition: transform var(--d-kb) var(--e-kb); transform: translate3d(0, 0, 0); }
.dock.kb { transform: translate3d(0, calc(-1 * var(--kb) + var(--safe-bottom) - 18px), 0); }
.dock-grab { position: absolute; top: 4px; left: 0; right: 0; height: 12px; display: grid; place-items: center; pointer-events: none; opacity: .9; transition: opacity .2s; }
.dock-grab i { width: 34px; height: 4px; border-radius: 2px; background: var(--fill3); }
.dock.kb .dock-grab { opacity: 0; }
.dock-face { grid-area: 1 / 1; align-self: end; transition: transform var(--d-sheet) var(--e-sheet), opacity .22s; min-width: 0; padding-top: 18px; }
.dock-face.compose { transform: none; opacity: 1; }
.dock.util .dock-face.compose { transform: translateY(-18px) scale(.97); opacity: 0; pointer-events: none; }
.dock-face.utility { transform: translateY(24px) scale(.97); opacity: 0; pointer-events: none; }
.dock.util .dock-face.utility { transform: none; opacity: 1; pointer-events: auto; }
.dock-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; padding: 0 2px; }
.scope { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 10px; border-radius: 999px; background: var(--fill); font-size: var(--fs-foot); font-weight: 500; color: var(--ink2); max-width: 78%; transition: background-color .2s, transform var(--d-fast) var(--e-ui); }
.scope span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope:active { background: var(--fill2); transform: scale(.97); }
.dict-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-foot); color: var(--ink2); }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); animation: breathe 1.1s ease-in-out infinite; }
.dict-partial { font-size: var(--fs-sub); color: var(--ink2); margin: 0 4px 8px; font-style: italic; }
.composer { display: flex; align-items: flex-end; gap: 8px; }
.cplus { width: 44px; height: 44px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; flex: none; transition: background-color .2s, transform var(--d-fast) var(--e-ui); }
.cplus:active { transform: scale(.92); background: var(--fill2); }
.cpill { flex: 1; min-width: 0; min-height: 44px; border-radius: 24px; background: var(--fill); display: flex; align-items: flex-end; padding: 0 5px 0 16px; transition: box-shadow .2s, background-color .2s; }
.cpill:focus-within { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line2); }
.cpill.dict { box-shadow: inset 0 0 0 1px var(--ink3); }
.cfield { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none; padding: 11px 0; font-size: var(--fs-body); line-height: var(--lh-body); max-height: 112px; overflow-y: hidden; transition: height var(--d-fast) var(--e-ui); display: block; }
.cfield::placeholder { color: var(--ink3); }
.cright { display: flex; align-items: flex-end; gap: 0; padding-bottom: 4px; }
.cmic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); transition: background-color .2s, color .2s, transform var(--d-fast) var(--e-ui); }
.cmic:active { transform: scale(.9); }
.cmic.on { background: var(--ink); color: var(--on-ink); }
.cact { position: relative; width: 36px; height: 36px; margin-left: 2px; }
.cvoice, .csend, .cstop { position: absolute; inset: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; opacity: 0; transform: scale(.4) rotate(-40deg); pointer-events: none; transition: transform var(--d-pop) var(--e-pop), opacity .16s; }
.cvoice.show, .csend.show, .cstop.show { opacity: 1; transform: none; pointer-events: auto; }
.csend.blocked { opacity: .35 !important; }
.cvoice:active, .csend:active, .cstop:active { transform: scale(.9) !important; }
.dots { display: flex; justify-content: center; align-items: center; gap: 7px; height: 22px; padding-top: 10px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .32; will-change: transform; }
.udock { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.ubtn { width: 56px; height: 56px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; flex: none; transition: transform var(--d-fast) var(--e-ui), background-color .2s; }
.ubtn:active { transform: scale(.92); background: var(--fill2); }
.useg { flex: 1; display: flex; padding: 4px; border-radius: 32px; background: var(--fill); }
.useg button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 28px; font-size: var(--fs-cap2); font-weight: 600; color: var(--ink2); transition: background-color .25s, color .25s, transform var(--d-fast) var(--e-ui); }
.useg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.device[data-mode="dark"] .useg button.on { background: var(--card2); }
.useg button:active { transform: scale(.95); }
.txt-btn { font-size: var(--fs-body); padding: 8px 6px; }
.txt-btn.strong { font-weight: 600; }
.txt-btn.dis { opacity: .35; }

/* attachments */
.atts { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 8px; scrollbar-width: none; touch-action: pan-x; }
.att { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 30px 6px 6px; border-radius: 16px; background: var(--fill); max-width: 220px; animation: att-in var(--d-pop) var(--e-pop); }
@keyframes att-in { from { opacity: 0; transform: scale(.85) translateY(8px); } }
.att-thumb { position: relative; width: 44px; height: 44px; border-radius: 11px; background: var(--fill2); display: grid; place-items: center; color: var(--ink2); overflow: hidden; flex: none; }
.att-thumb .ic { color: rgba(255, 255, 255, .85); }
.att-ring, .att-err { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .38); color: #fff; }
.att-ring .spinner i { background: #fff; }
.att-meta { display: flex; flex-direction: column; min-width: 0; }
.att-meta strong { font-size: var(--fs-foot); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.att-meta small { font-size: var(--fs-cap); color: var(--ink2); }
.att.error .att-meta small { color: var(--bad); }
.att-retry { font-size: var(--fs-foot); font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); }
.att-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); }
.att-x:active { background: var(--fill2); }

/* add context sheet */
.ctx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 16px 18px; }
.ctx-tiles button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; border-radius: 20px; background: var(--card); font-size: var(--fs-foot); font-weight: 500; transition: transform var(--d-fast) var(--e-ui), background-color .2s; }
.ctx-tiles button:active { transform: scale(.96); background: var(--card2); }
.grp-wrap.tight .grp { padding: 4px 0; }
.perf { padding: 14px 16px 12px; }
.perf-head small { display: block; font-size: var(--fs-foot); color: var(--ink2); }
.perf-head strong { font-size: var(--fs-t3); font-weight: 650; letter-spacing: -.02em; }
.perf .sslider { margin: 6px -6px 0; }
.perf-stops { display: flex; justify-content: space-between; margin: -2px 6px 8px; font-size: var(--fs-cap); color: var(--ink3); }
.perf-stops .on { color: var(--ink); font-weight: 600; }
.perf-cap { font-size: var(--fs-sub); line-height: var(--lh-sub); }
.perf-tools { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-foot); color: var(--ink2); }
.sheet-note { margin: -8px 32px 8px; font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--ink2); }
.scope-menu { padding: 2px 0; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 2px; }
.ph { position: relative; aspect-ratio: 1; display: block; }
.ph-badge { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .18); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; transition: background-color .15s, transform var(--d-pop) var(--e-pop); }
.ph.sel .ph-badge { background: var(--ink); border-color: var(--bg); transform: scale(1.1); }
.ph.sel { outline: 3px solid var(--ink); outline-offset: -3px; }
.cam { position: absolute; inset: 0; background: #000; color: #fff; }
.cam-view { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(170deg, #55524b, #1d1c1a); }
.cam-g { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; }
.cam-g.a { width: 260px; height: 260px; left: -40px; top: 120px; background: #9a8f7c; }
.cam-g.b { width: 220px; height: 220px; right: -60px; bottom: 200px; background: #6f7d86; }
.cam-frame { position: absolute; left: 16%; right: 16%; top: 30%; bottom: 34%; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 12px; }
.cam-shot { position: absolute; inset: 0; background: linear-gradient(170deg, #6d6a60, #26251f); animation: cam-in .35s var(--e-sheet); }
@keyframes cam-in { from { transform: scale(1.06); opacity: .6; } }
.cam-top { position: absolute; top: calc(var(--safe-top) - 6px); left: 12px; right: 12px; display: flex; }
.cam-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; color: #fff; }
.cam-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 150px; padding-bottom: 20px; display: flex; align-items: center; justify-content: space-around; background: rgba(0, 0, 0, .5); }
.cam-txt { font-size: var(--fs-body); color: #fff; padding: 10px 14px; }
.cam-txt.strong { font-weight: 600; }
.shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; transition: transform var(--d-fast) var(--e-ui); }
.shutter i { width: 60px; height: 60px; border-radius: 50%; background: #fff; transition: transform var(--d-fast) var(--e-ui); }
.shutter:active i { transform: scale(.88); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.on { opacity: .95; transition: opacity 60ms; }
.sheet.cover { border-radius: 0; box-shadow: none; }

/* ---------- chat ---------- */
.chat { position: absolute; inset: 0; }
.chat-scroll { position: absolute; inset: 0; padding: 0 16px; }
.chat-top { height: calc(var(--safe-top) + 58px); }
.chat-bottom { height: calc(var(--dock-h) + 24px + var(--kb, 0px)); transition: height var(--d-kb) var(--e-kb); }
.chat-msgs { display: flex; flex-direction: column; gap: 22px; }
.day-sep { text-align: center; font-size: var(--fs-foot); color: var(--ink2); }
.msg { min-width: 0; }
.msg.user { align-self: flex-end; max-width: 86%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; animation: msg-in var(--d-ui) var(--e-ui); }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.bubble { position: relative; background: var(--fill); border-radius: 22px; padding: 10px 16px; font-size: var(--fs-body); line-height: var(--lh-body); user-select: text; -webkit-user-select: text; -webkit-touch-callout: none; white-space: pre-wrap; word-break: break-word; }
.bubble .pinned { position: absolute; left: -18px; top: 12px; color: var(--ink3); }
.msg-atts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mat { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--fill2); font-size: var(--fs-foot); color: var(--ink); max-width: 200px; }
.mat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts { font-size: var(--fs-cap); color: var(--ink2); height: 0; opacity: 0; overflow: hidden; transition: height .22s var(--e-ui), opacity .22s; }
.ts.on { height: 16px; opacity: 1; }
.asst-ts { height: auto; opacity: .9; margin-top: -4px; }
.msg.asst { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; animation: msg-in var(--d-ui) var(--e-ui); }
.asst-body { width: 100%; font-size: var(--fs-body); line-height: 25px; letter-spacing: -.018em; user-select: text; -webkit-user-select: text; -webkit-touch-callout: none; }
.asst-body .md b { font-weight: 650; }
.pinned-tag { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--ink2); font-size: var(--fs-cap); }
.caret { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-left: 3px; vertical-align: -1px; animation: breathe 1s ease-in-out infinite; }
.thinking { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); }
.think-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); animation: breathe 1.3s ease-in-out infinite; }
.workcard { width: 100%; border-radius: 18px; background: var(--fill); overflow: hidden; }
.wc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; font-weight: 600; font-size: var(--fs-sub); }
.wc-head small { margin-left: auto; font-weight: 400; color: var(--ink2); font-size: var(--fs-foot); }
.wc-steps { list-style: none; margin: 0; padding: 0 14px 6px; display: flex; flex-direction: column; gap: 8px; }
.wc-steps li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sub); color: var(--ink2); }
.wc-steps li.completed, .wc-steps li.in_progress { color: var(--ink); }
.wc-mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink3); display: grid; place-items: center; flex: none; }
.wc-steps li.completed .wc-mark { background: var(--ink); border-color: var(--ink); color: var(--on-ink); animation: pop .4s var(--e-pop); }
.wc-steps li.in_progress .wc-mark { border-color: transparent; }
.wc-foot { padding: 4px 14px 12px; }
.outcome { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: var(--fill); font-size: var(--fs-foot); line-height: var(--lh-foot); flex-wrap: wrap; }
.outcome button { margin-left: auto; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); }
.srcrow { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--fill); font-size: var(--fs-foot); font-weight: 500; color: var(--ink2); transition: transform var(--d-fast) var(--e-ui), background-color .2s; }
.srcrow:active { transform: scale(.97); background: var(--fill2); }
.srcrow em { font-style: normal; font-weight: 600; color: var(--ink); }
.src-stack { display: inline-flex; }
.src-stack i { width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1.5px var(--fill2); display: grid; place-items: center; color: var(--ink2); }
.src-stack i:first-child { margin-left: 0; }
.activity { width: 100%; }
.activity > button { display: flex; align-items: center; gap: 8px; font-size: var(--fs-foot); color: var(--ink2); padding: 2px 0; }
.activity ul { list-style: none; margin: 8px 0 0; padding: 0; border-radius: 16px; background: var(--fill); overflow: hidden; }
.activity li { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: baseline; padding: 9px 14px; font-size: var(--fs-foot); }
.activity li + li { border-top: .5px solid var(--line2); }
.activity li strong { font-weight: 600; }
.activity li small { color: var(--ink2); }
.confirm { width: 100%; border-radius: 20px; padding: 14px; background: var(--card); animation: msg-in var(--d-ui) var(--e-ui); }
.confirm.busy { opacity: .8; }
.cf-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-call); }
.confirm p { margin: 6px 0 12px; font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.cf-btns { display: flex; gap: 8px; }
.cf-btns .btn { flex: 1; }
.receipt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 20px; background: var(--card); animation: msg-in var(--d-ui) var(--e-ui); }
.receipt.undone { opacity: .6; }
.rc-badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); flex: none; animation: pop .45s var(--e-pop); }
.receipt.undone .rc-badge { background: var(--fill2); color: var(--ink2); }
.rc-main { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; }
.rc-main strong { font-size: var(--fs-call); }
.rc-main small { font-size: var(--fs-foot); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-undo { font-size: var(--fs-sub); font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--fill2); }
.rc-chev { color: var(--ink3); }
.errcard { display: flex; gap: 12px; width: 100%; padding: 14px; border-radius: 20px; background: color-mix(in srgb, var(--bad) 9%, var(--bg)); color: var(--ink); }
.errcard .ic { color: var(--bad); margin-top: 2px; }
.errcard div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.errcard strong { font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub); }
.acts-row { display: flex; align-items: center; gap: 2px; margin-left: -8px; color: var(--ink2); }
.acts-row button { width: 38px; height: 34px; display: grid; place-items: center; border-radius: 10px; transition: background-color .3s, transform var(--d-fast) var(--e-ui), color .2s; }
.acts-row button:active { background: var(--fill2); transform: scale(.9); transition-duration: 0s; }
.acts-row button.on { color: var(--ink); }
.playing { display: inline-flex; align-items: center; gap: 3px; height: 20px; margin-left: 8px; }
.playing i { width: 3px; border-radius: 2px; background: var(--ink); animation: eq 0.9s ease-in-out infinite; height: 6px; }
.playing i:nth-child(2) { animation-delay: -.2s; } .playing i:nth-child(3) { animation-delay: -.45s; } .playing i:nth-child(4) { animation-delay: -.1s; } .playing i:nth-child(5) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 5px; } 50% { height: 16px; } }
.sigrev { width: 100%; border-radius: 20px; padding: 14px; background: var(--card); display: flex; flex-direction: column; gap: 10px; animation: msg-in var(--d-ui) var(--e-ui); }
.sr-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-call); }
.sr-row { display: flex; align-items: center; gap: 12px; }
.sr-row span { display: flex; flex-direction: column; }
.sr-row small { color: var(--ink2); font-size: var(--fs-foot); }
.sr-done { display: flex; gap: 8px; font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.jump { position: absolute; left: 50%; bottom: calc(var(--dock-h) + 20px + var(--kb, 0px)); width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: var(--bg); box-shadow: 0 2px 14px rgba(0, 0, 0, .18), 0 0 0 .5px var(--line2); display: grid; place-items: center; opacity: 0; transform: translateY(12px) scale(.8); pointer-events: none; transition: transform var(--d-pop) var(--e-pop), opacity .2s, bottom var(--d-kb) var(--e-kb); z-index: 4; }
.jump.on { opacity: 1; transform: none; pointer-events: auto; }
.chat-empty { min-height: calc(100% - var(--safe-top) - var(--dock-h) - 60px); display: flex; flex-direction: column; justify-content: center; gap: 30px; padding-top: 12px; }
.cold { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cold-grape { color: var(--ink); margin-bottom: 4px; }
.cold h2 { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 650; letter-spacing: -.02em; max-width: 280px; }
.cold p { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); max-width: 290px; }
.starters { display: flex; flex-direction: column; gap: 8px; }
.starters button { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 18px; background: var(--fill); font-size: var(--fs-sub); text-align: left; transition: transform var(--d-fast) var(--e-ui), background-color .2s; }
.starters button:active { transform: scale(.98); background: var(--fill2); }
.starters .ic { color: var(--ink2); }