:root { --line:color-mix(in srgb,var(--ink) 12%,transparent); --r-sm:6px; --r-md:12px; --r-lg:16px; --pill:999px; }
:root, :root[data-theme="dark"] { color-scheme:dark; --bg:#0a1420; --panel:#112234; --panel2:#1a3248; --ink:#e6eef8; --ink2:#c9d6e6; --dim:#8fa6bd; --accent:#d9c98a; --good:#9be3b0; --bad:#ff8a8a; --gold:#f0e2a8;
  --track:#0a1420; --kbd:#243a52; --stripe1:#2b4a66; --stripe2:#233e56; --life1:#3f6a8a; --overlay:#000a; --toast:#08101cee; --toast-up:#2e2a14ee; --lvl-bg:#2e2a14; }
:root[data-theme="light"] { color-scheme:light; --bg:#e3e7e8; --panel:#eff2f2; --panel2:#dde3e5; --ink:#2c3340; --ink2:#46505e; --dim:#6a7581; --accent:#7d6d3c; --good:#3f7a68; --bad:#a84a4a; --gold:#8a7430;
  --track:#cfd8dc; --kbd:#d3dbdf; --stripe1:#b9c6cf; --stripe2:#aebcc6; --life1:#9fb4c4; --overlay:#2c334099; --toast:#eff2f2f2; --toast-up:#e8e6d2f2; --lvl-bg:#e6e3cc; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Courier New",ui-monospace,monospace; min-height:100vh; }
main { display:grid; grid-template-columns:minmax(360px,460px) 1fr; gap:24px; max-width:1100px; margin:0 auto; padding:24px; align-items:start; }
@media (max-width:800px) { main { grid-template-columns:1fr; } }
#panel { background:var(--panel); padding:18px; border-radius:var(--r-lg); border:1px solid var(--line); }
header { display:flex; justify-content:space-between; align-items:center; }
h1 { margin:0; font-size:20px; color:var(--accent); }
.hdr-right { display:flex; gap:8px; align-items:center; }
#theme, #sound, #share, #newgame, #coach button { display:inline-grid; place-items:center; background:var(--panel2); border:1px solid var(--line); color:var(--dim); border-radius:var(--pill); width:28px; height:28px; padding:0; font-size:16px; cursor:pointer; transition:color .15s, border-color .15s; }
#theme:hover, #sound:hover, #share:hover, #newgame:hover, #coach button:hover { color:var(--accent); border-color:var(--accent); }
#season { display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--pill); padding:3px 12px 3px 10px; font-size:13px; color:var(--dim); height:28px; }
#season .icon { color:var(--accent); font-size:15px; }
.label { color:var(--dim); margin-right:8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
kbd { display:inline-block; min-width:1.7em; text-align:center; background:var(--kbd); border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--r-sm); padding:0 6px; margin:0 2px; color:var(--ink); font:inherit; font-size:.92em; line-height:1.5; }
kbd .icon { vertical-align:-0.16em; }

/* life timeline */
#life { margin:14px 0 4px; }
#life .track { position:relative; height:8px; background:var(--track); border-radius:4px; }
#lifefill { height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--life1),var(--accent)); transition:width .6s ease; }
#avatar { position:absolute; top:-8px; left:0; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--bg); font-size:15px; transform:translateX(-50%); transition:left .6s ease; box-shadow:0 0 0 3px var(--panel); }
#avatar .icon .f { fill-opacity:.35; }
#life .ages { display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin-top:6px; }
#life .ages b { color:var(--ink); }

/* net worth */
#networth { margin:12px 0 4px; }
.nwtop { display:flex; justify-content:space-between; align-items:baseline; }
#nw { font-size:34px; font-weight:bold; color:var(--good); display:block; letter-spacing:-.02em; }
#delta { font-size:12px; border-radius:var(--pill); padding:1px 9px; }
#delta.up { background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); }
#delta.down { background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--bad); }
#stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 10px; }
.stat .srow { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); }
.stat .srow i[data-icon] { color:var(--accent); font-size:15px; }
.stat .slabel { text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.stat .srow b { margin-left:auto; color:var(--ink); font-size:14px; }
.stat .srow small { font-size:11px; margin-left:auto; }
.stat .srow small + b { margin-left:4px; }
.stat .srow small.up { color:var(--good); } .stat .srow small.down { color:var(--bad); }
.stat .srow small .icon { font-size:.7em; vertical-align:0; margin-right:1px; }
.smeter { height:6px; border-radius:3px; background:var(--track); margin-top:5px; overflow:hidden; }
.smeter i { display:block; height:100%; width:0; border-radius:3px; background:var(--good); transition:width .6s ease; }
#kr-bar { background:var(--accent); }
.sword { font-size:11px; color:var(--dim); margin-top:3px; }
#chart { width:100%; height:70px; background:var(--track); border-radius:var(--r-md); }

/* budget: income split into bill / allocated / free, plus 5 press pips */
#budget { margin:12px 0; }
#bar { display:flex; height:16px; background:var(--track); border-radius:8px; overflow:hidden; }
#bar i { display:block; height:100%; width:0; transition:width .3s ease; }
#seg-bill { background:repeating-linear-gradient(45deg,var(--stripe1),var(--stripe1) 6px,var(--stripe2) 6px,var(--stripe2) 12px); }
#seg-alloc { background:var(--accent); }
#seg-free { background:var(--good); }
#bar.short { outline:2px solid var(--bad); }
#budgethead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; font-size:12px; color:var(--dim); }
#budgethead .label { margin-right:6px; }
#budgethead #total { font-size:18px; color:var(--ink); }
#budgethead .pay { white-space:nowrap; }
#budgethead .pay b { color:var(--ink); }
#budgethead .pay i[data-icon] { color:var(--dim); }
#legend { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; font-size:13px; }
#legend .lg { display:grid; grid-template-columns:12px 1fr; column-gap:6px; align-items:center; }
#legend .lg em { font-style:normal; font-size:11px; color:var(--dim); white-space:nowrap; }
#legend .lg b { grid-column:2; font-size:15px; }
#legend .sw { width:12px; height:12px; border-radius:4px; border:1px solid var(--line); }
#legend .sw.bill { background:repeating-linear-gradient(45deg,var(--stripe1),var(--stripe1) 3px,var(--stripe2) 3px,var(--stripe2) 6px); }
#legend .sw.alloc { background:var(--accent); }
#legend .sw.free { background:var(--good); }
#legend b { font-weight:bold; }
#freewrap.short b { color:var(--bad); }
#pips { display:flex; gap:6px; margin-top:8px; }
#pips i { flex:1; height:8px; border-radius:4px; background:var(--track); transition:background .2s, box-shadow .2s; }
#pips i.on { background:var(--accent); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent); }

/* category rows */
#catwrap { position:relative; overflow-x:clip; }
#cats { list-style:none; margin:0; padding:0; transition:filter .25s, opacity .25s; }
#catwrap.busy #cats { filter:blur(2px) grayscale(.5); opacity:.45; }
#cats li { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:var(--r-md); border:2px solid transparent; transition:background .15s, border-color .15s; }
#cats li.sel { border-color:var(--accent); background:var(--panel2); }
#cats .ic { width:44px; height:44px; display:grid; place-items:center; font-size:26px; border-radius:var(--r-md); color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
#cats .top { display:flex; align-items:baseline; gap:8px; }
#cats .name { font-weight:bold; white-space:nowrap; }
#cats .lv { flex:1; font-size:12px; color:var(--accent); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cats .badges { margin:3px 0 5px; display:flex; flex-wrap:wrap; gap:5px; }
#cats .badge { display:inline-grid; font-size:15px; color:var(--dim); opacity:.4; transition:color .3s, opacity .3s; }
#cats .badge.got { color:var(--accent); opacity:1; }
#cats .badge.next { color:var(--ink); opacity:.85; animation:pulse 1.6s ease-in-out infinite; }
#cats .prog { position:relative; height:7px; background:var(--track); border-radius:4px; overflow:hidden; }
#cats .prog i { position:absolute; top:0; bottom:0; display:block; transition:width .35s ease, left .35s ease; }
#cats .prog .b { left:0; background:linear-gradient(90deg,color-mix(in srgb,var(--good) 70%,#000),var(--good)); }
#cats .prog .s { background:var(--accent); }
#cats li.full .prog .b { background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 55%,#fff)); }
#cats .hint { display:none; font-size:12px; color:var(--dim); margin-top:5px; line-height:1.5; }
#cats .hint .icon, #cats .amt small .icon { font-size:1.05em; margin:0 1px; }
#cats li.sel .hint { display:block; }
#cats .amt { text-align:right; min-width:64px; }
#cats .amt b { display:block; font-size:16px; }
#cats .amt small { display:block; color:var(--accent); font-size:12px; font-weight:bold; min-height:14px; }
#cats .amt small.chg { display:block; font-size:11px; font-weight:normal; color:var(--dim); min-height:14px; white-space:nowrap; }
#cats .amt small.chg.up { color:var(--good); }
#cats .amt small.chg.down { color:var(--bad); }
#legend small, #budgethead small { font-size:11px; margin-left:3px; }
.chg .icon, #delta .icon, #incchg .icon, .chip .icon, #extras small .icon, #legend small .icon, #budgethead small .icon { font-size:.7em; vertical-align:0; margin-right:2px; }
#legend small.up, #budgethead small.up { color:var(--good); }
#legend small.down, #budgethead small.down { color:var(--bad); }
#cats li.gain { animation:gain 1.2s ease-out; }
#cats li.loss { animation:loss 1.2s ease-out; }
#cats li.flash { animation:levelup 1.1s ease-out; }
#cats li.flash .ic { animation:bounce .8s ease-out; }
#cats li.bump .amt b { animation:bump .25s ease-out; }
#extras { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; min-height:0; }
#extras:empty { display:none; }
#extras span { display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--pill); padding:3px 11px 3px 9px; font-size:13px; }
#extras span > .icon { color:var(--accent); font-size:16px; }
#extras small { font-size:11px; }
#extras small.up { color:var(--good); }
#extras small.down { color:var(--bad); }
footer { color:var(--dim); font-size:12px; margin-top:12px; line-height:1.9; transition:opacity .2s; }
#panel.busy footer { opacity:.35; }

/* "quarter is closing" lock-out */
#advance { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:color-mix(in srgb,var(--panel) 80%,transparent); border-radius:var(--r-md); z-index:2; }
#advance[hidden] { display:none; }
#advance .spin { font-size:40px; color:var(--accent); animation:flip 1s ease-in-out infinite; }
#advance .advtxt { color:var(--ink); font-size:14px; }
#advance .advbar { width:70%; height:8px; background:var(--track); border-radius:4px; overflow:hidden; }
#advance .advbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:4px; }
#advance .advbar i.run { animation:fill linear forwards; }
#panel.busy #pips i.on { background:var(--gold); }

/* scene + toasts */
#scene { position:relative; }
#scene > svg { width:100%; max-height:92vh; border-radius:var(--r-lg); border:1px solid var(--line); background:#000; display:block; }
#toasts { position:absolute; left:12px; right:12px; bottom:12px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { align-self:flex-start; max-width:92%; display:flex; gap:8px; align-items:center; background:var(--toast); border:1px solid var(--line); border-radius:var(--r-md); padding:7px 12px; font-size:13px; line-height:1.35; animation:toastIn .35s ease-out both, toastOut .6s ease-in 7s forwards; }
.toast.stay { animation:toastIn .35s ease-out both; }
.toast .ti { display:inline-grid; font-size:20px; color:var(--accent); }
.toast .icon.inl { font-size:1.1em; color:var(--accent); vertical-align:-0.18em; }
.toast.up { border-color:var(--gold); background:var(--toast-up); }
.toast.up .ti { animation:bounce .8s ease-out; }

/* modal (life events, end card) */
#modal { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }
#modal[hidden] { display:none; }
#modal-card { background:var(--panel); border:2px solid var(--accent); border-radius:var(--r-lg); padding:22px; max-width:500px; width:100%; text-align:center; animation:pop .25s ease-out; }
#modal-card.good { border-color:var(--good); }
#modal-card.bad { border-color:var(--bad); }
#modal-card .hero { width:84px; height:84px; margin:-58px auto 8px; border-radius:50%; background:var(--panel2); border:2px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:42px; color:var(--accent); animation:bounce .8s ease-out; }
#modal-card.good .hero { color:var(--good); }
#modal-card.bad .hero { color:var(--bad); }
#modal-card h2 { margin:4px 0 6px; font-size:22px; }
#modal-card p { line-height:1.5; margin:6px 0 12px; color:var(--ink2); }
#modal-card ul { list-style:none; margin:14px 0 8px; padding:0; display:grid; gap:8px; text-align:left; }
#modal-card li { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--r-md); border:2px solid var(--line); background:var(--panel2); transition:transform .12s, border-color .12s; }
#modal-card li > span:last-child .icon { font-size:1.15em; margin-right:6px; color:var(--accent); vertical-align:-0.2em; }
#modal-card li .n { width:26px; height:26px; border-radius:50%; background:var(--track); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--dim); }
#modal-card li.sel { border-color:var(--accent); transform:scale(1.02); }
#modal-card li.sel .n { background:var(--accent); color:var(--bg); font-weight:bold; }
#modal-card li.no { opacity:.4; }
#modal-card .result { font-size:16px; color:var(--ink); }
#modal-card .chip { display:inline-block; border-radius:var(--pill); padding:4px 14px; font-size:15px; font-weight:bold; margin:2px 0 10px; }
#modal-card .chip.up { background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); }
#modal-card .chip.down { background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--bad); }
#modal-card .lvl .icon { font-size:1.2em; margin-right:6px; vertical-align:-0.22em; }
#modal-card .lvl { margin:8px auto; padding:6px 12px; border-radius:var(--r-md); background:var(--lvl-bg); border:1px solid var(--gold); color:var(--gold); font-size:14px; }
#modal-card .big { font-size:44px; font-weight:bold; color:var(--good); margin:6px 0; }
#modal-card .sharecard { display:block; width:100%; border-radius:var(--r-md); margin:10px 0; }
#modal-card .hint { color:var(--dim); font-size:12px; margin-top:10px; }

/* ambient animation layer of the scene (rebuilt only when the season / window changes) */
#fx .fall { animation:fall var(--d,2s) linear infinite; animation-delay:var(--dl,0s); }
#fx .sway { animation:sway 1.8s ease-in-out infinite alternate; }
#fx .tw { animation:twinkle var(--d,3s) ease-in-out infinite; animation-delay:var(--dl,0s); }
#fx .steam { animation:steam 2.6s ease-out infinite; animation-delay:var(--dl,0s); opacity:0; }
#fx .note { animation:note 5s ease-out infinite; animation-delay:var(--dl,0s); opacity:0; }
#fx .zzz { animation:note 4s ease-out infinite; animation-delay:var(--dl,0s); opacity:0; }
#fx .blink { transform-box:fill-box; transform-origin:center; transform:scaleY(0); animation:blink 5s infinite; }
#fx .tail { transform-origin:286px 354px; animation:wag 1.5s ease-in-out infinite alternate; }
#fx .tail2 { transform-origin:231px 369px; animation:wag 1.9s ease-in-out infinite alternate; }
@keyframes fall { from { transform:translateY(-14px); } to { transform:translateY(var(--h,120px)); } }
@keyframes sway { from { transform:translateX(-5px); } to { transform:translateX(5px); } }
@keyframes twinkle { 0%,100% { opacity:.15; } 50% { opacity:1; } }
@keyframes steam { 0% { transform:translateY(0); opacity:0; } 25% { opacity:.8; } 100% { transform:translateY(-14px); opacity:0; } }
@keyframes note { 0% { transform:translate(0,0); opacity:0; } 15% { opacity:1; } 100% { transform:translate(24px,-56px); opacity:0; } }
@keyframes blink { 0%,92%,100% { transform:scaleY(0); } 95%,97% { transform:scaleY(1); } }
@keyframes wag { from { transform:rotate(-14deg); } to { transform:rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { #fx * { animation:none !important; } #fx .tw { opacity:.7; } }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }
@keyframes levelup { 0% { background:color-mix(in srgb,var(--gold) 40%,transparent); box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 67%,transparent); } 60% { box-shadow:0 0 0 12px transparent; } 100% { background:transparent; } }
@keyframes gain { 0% { background:color-mix(in srgb,var(--good) 27%,transparent); } 100% { background:transparent; } }
@keyframes loss { 0% { background:color-mix(in srgb,var(--bad) 27%,transparent); } 100% { background:transparent; } }
@keyframes bounce { 0% { transform:scale(.4); } 55% { transform:scale(1.35); } 100% { transform:scale(1); } }
@keyframes bump { 0% { transform:scale(1.25); color:var(--accent); } 100% { transform:scale(1); } }
@keyframes flip { 0% { transform:rotate(0); } 50% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } }
@keyframes fill { from { width:0; } to { width:100%; } }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateY(-6px); } }
@keyframes pop { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---- shipping: loading state, first-run tip, touch controls, content section, ad slot ---- */
#boot { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--bg); color:var(--dim); font-size:14px; }
#boot .spin { font-size:36px; color:var(--accent); animation:flip 1s ease-in-out infinite; }
html.ready #boot { display:none; }
.nojs { max-width:520px; margin:40px auto; padding:16px; background:var(--panel); border-radius:var(--r-md); }

#coach { display:flex; align-items:flex-start; gap:10px; margin:0 0 10px; padding:10px 12px; border-radius:var(--r-md); background:var(--panel2); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); font-size:13px; line-height:1.5; }
#coach[hidden] { display:none; }
#coach span { flex:1; }
#coach button { flex:none; width:24px; height:24px; font-size:14px; }

button { touch-action:manipulation; }
#cats li { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:pan-y; user-select:none; -webkit-user-select:none; transition:transform .18s ease, background .15s, border-color .15s; }
#cats li.dragging { transition:background .15s, border-color .15s; }
#cats li.drag-add { background:color-mix(in srgb,var(--good) 16%,var(--panel2)); border-color:var(--good); }
#cats li.drag-sub { background:color-mix(in srgb,var(--bad) 14%,var(--panel2)); border-color:var(--bad); }
#modal-card li { cursor:pointer; }
.btn.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); margin-top:8px; }
#modal-card .snippet { text-align:left; font-size:12px; line-height:1.5; color:var(--ink2); background:var(--track); border-radius:var(--r-md); padding:9px 12px; margin:10px 0; white-space:pre-wrap; word-break:break-word; user-select:all; }
#modal-card .sharecard.small { max-width:360px; margin:8px auto 4px; }
#modal-card .meet h2 { margin-top:12px; }
#modal-card .meet .thumb { max-width:300px; margin:0 auto; }
#modal-card .meet .thumb svg { width:100%; display:block; border-radius:var(--r-lg); border:1px solid var(--line); }
#modal-card .meet .dots { display:flex; justify-content:center; gap:7px; margin:4px 0 10px; }
#modal-card .meet .dots i { width:8px; height:8px; border-radius:50%; background:var(--track); }
#modal-card .meet .dots i.on { background:var(--accent); }
#modal-card .chip + .chip { margin-left:6px; }
.btn { display:block; width:100%; margin:12px 0 4px; padding:13px 16px; border-radius:var(--r-md); border:0; background:var(--accent); color:var(--bg); font:inherit; font-weight:bold; font-size:15px; cursor:pointer; }
#touchbar { display:none; }

.landing { max-width:760px; margin:8px auto 0; padding:8px 24px; line-height:1.65; font-size:15px; }
.landing h2 { font-size:22px; color:var(--accent); margin:26px 0 8px; }
.landing h3 { font-size:17px; margin:22px 0 6px; }
.landing ul { padding-left:20px; }
.landing li { margin-bottom:8px; }
.landing details { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 14px; margin:8px 0; }
.icon.inl:is(i) { display:inline-block; }
.landing summary { cursor:pointer; font-weight:bold; }
.landing details p { margin:8px 0 2px; }
.landing .small, .sitefoot { color:var(--dim); font-size:13px; }
.landing a, .sitefoot a { color:var(--accent); }
.sitefoot { max-width:760px; margin:6px auto 32px; padding:0 24px; text-align:center; }
#ad-bottom { max-width:970px; margin:18px auto 0; min-height:100px; }
#ad-bottom[hidden] { display:none; }
html.paused *, html.paused svg * { animation-play-state:paused !important; }

/* phones and tablets: the scene on top, tap controls, and a sticky action bar (never next to an ad) */
@media (max-width:800px), (pointer:coarse) {
  main { grid-template-columns:1fr; padding:10px 10px 12px; gap:10px; }
  #scene { order:-1; }
  #scene > svg { height:34vh; max-height:none; background:transparent; }
  #panel { padding:12px; }
  #nw { font-size:28px; }
  #toasts { left:6px; right:6px; bottom:6px; }
  .toast { font-size:12px; padding:5px 9px; }
  .toast:nth-child(n+3) { display:none; }
  #keys, .keyhint { display:none; }
  #touchbar { display:flex; position:fixed; left:0; right:0; bottom:0; gap:8px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); z-index:5; }
  #touchbar button { flex:1; min-height:50px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel2); color:var(--ink); font:inherit; font-weight:bold; font-size:16px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
  #touchbar button .icon, #touchbar button [data-icon] { font-size:18px; }
  #touchbar button.primary { flex:1.4; background:var(--accent); border-color:var(--accent); color:var(--bg); }
  body { padding-bottom:76px; }
  #cats li { padding:10px; }
  #modal-card { padding:18px 16px; max-height:92vh; overflow:auto; }
  #modal-card .hero { margin:0 auto 8px; }   /* inside the card, so the scrolling card can't clip it */
}

/* icons (icons.js): inline svg that takes its size from font-size and its colour from currentColor */
.icon { width:1em; height:1em; flex:none; vertical-align:-0.14em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.icon .f { fill:currentColor; fill-opacity:.16; }
.icon .d { fill:currentColor; stroke:none; }
.icon.inl { margin:0 .15em; }
i[data-icon] { display:inline-grid; font-style:normal; vertical-align:-0.14em; }