/* Copied from design/build/src/wr.css by tools/build-assets.mjs. Do not edit; override in app.css. */
/* ---------- Moss & Root tokens (DESIGN-KIT §4-5, §7) ---------- */
.wr{
  color-scheme:light;
  --bg:oklch(98.2% .006 95);--surface:oklch(99.6% .003 95);--sunken:oklch(95.6% .008 95);
  --line:oklch(90.5% .010 100);--line-strong:oklch(83% .012 100);
  --text:oklch(24% .018 145);--text-2:oklch(44% .018 140);--text-3:oklch(51% .016 135);
  --accent:oklch(49% .10 145);--accent-hover:oklch(43% .10 145);--accent-soft:oklch(94.5% .035 140);--on-accent:oklch(99% .005 95);
  --root:oklch(52% .09 55);
  --like:oklch(55% .17 22);--repost:oklch(52% .11 160);
  --warn:oklch(48% .09 75);--warn-soft:oklch(94% .05 85);--danger:oklch(52% .17 28);--focus:oklch(55% .13 145);
  --ok:oklch(52% .11 150);
  --net-bsky:oklch(55% .10 245);--net-fedi:oklch(52% .10 305);
  --bsky-soft:oklch(95.5% .02 245);--fedi-soft:oklch(95.5% .02 305);
  --shadow-1:0 1px 2px oklch(30% .02 95 / .06),0 1px 1px oklch(30% .02 95 / .04);
  --shadow-2:0 8px 24px -8px oklch(30% .02 95 / .18);
  --shadow-3:0 16px 40px -12px oklch(30% .02 95 / .28);
  --bar:oklch(98.2% .006 95 / .96);
  --glass:oklch(98.2% .006 95 / .78);
  --scrim:oklch(0% 0 0 / .4);
  --img-edge:oklch(0% 0 0 / .06);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  font-family:Figtree,system-ui,-apple-system,Roboto,sans-serif;
  font-size:16px;line-height:1.5;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;position:relative;overflow:hidden;box-sizing:border-box;
  font-feature-settings:"ss01" off;
}
.wr[data-theme="dark"]{
  color-scheme:dark;
  --bg:oklch(18.5% .011 145);--surface:oklch(22% .013 145);--sunken:oklch(16% .010 145);
  --line:oklch(31% .013 140);--line-strong:oklch(38% .015 140);
  --text:oklch(93.5% .010 100);--text-2:oklch(78% .015 120);--text-3:oklch(70% .015 125);
  --accent:oklch(78% .12 140);--accent-hover:oklch(84% .11 140);--accent-soft:oklch(30% .045 145);--on-accent:oklch(20% .03 145);
  --root:oklch(74% .09 60);
  --like:oklch(72% .15 20);--repost:oklch(76% .11 160);
  --warn:oklch(84% .10 85);--warn-soft:oklch(31% .045 85);--danger:oklch(72% .15 25);--focus:oklch(80% .13 140);
  --ok:oklch(78% .12 150);
  --net-bsky:oklch(74% .10 240);--net-fedi:oklch(74% .10 305);
  --bsky-soft:oklch(27% .03 245);--fedi-soft:oklch(27% .03 305);
  --shadow-1:0 0 0 1px oklch(100% 0 0 / .04);
  --shadow-2:0 12px 32px -8px oklch(0% 0 0 / .5);
  --shadow-3:0 16px 48px -8px oklch(0% 0 0 / .6),0 0 0 1px oklch(100% 0 0 / .05);
  --bar:oklch(18.5% .011 145 / .96);
  --glass:oklch(18.5% .011 145 / .72);
  --scrim:oklch(0% 0 0 / .55);
  --img-edge:oklch(100% 0 0 / .06);
}
.wr *,.wr *::before,.wr *::after{box-sizing:border-box}
:where(.wr) :where(button,input,textarea,select){font:inherit;color:inherit}
:where(.wr) :where(button){background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
:where(.wr) :where(a){color:var(--accent);text-decoration:none}
:where(.wr) :where(p){margin:0}
:where(.wr) :where(h1,h2,h3,h4){margin:0;font-weight:600;text-wrap:balance}
.wr :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wr .focus-demo{outline:2px solid var(--focus);outline-offset:2px}
.serif{font-family:Newsreader,Georgia,serif;font-optical-sizing:auto}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grow{flex:1 1 auto;min-width:0}
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}

/* ---------- icons + network marks ---------- */
.i{width:20px;height:20px;fill:currentColor;flex:none;display:block}
.i.s14{width:14px;height:14px}.i.s16{width:16px;height:16px}.i.s18{width:18px;height:18px}.i.s24{width:24px;height:24px}.i.s28{width:28px;height:28px}.i.s48{width:48px;height:48px}
.f-sky{fill:var(--net-bsky)}.f-web{fill:var(--net-fedi)}.f-root{fill:var(--accent)}
.nm{width:16px;height:16px;flex:none;display:block}
.nm.both{width:24px}
.nm.s12{width:12px;height:12px}.nm.both.s12{width:18px}
.nm.s20{width:20px;height:20px}.nm.both.s20{width:30px}
.nm.ring{border-radius:50%;box-shadow:0 0 0 2px var(--bg)}

/* ---------- avatars (abstract, no photos) ---------- */
.av{width:44px;height:44px;border-radius:50%;flex:none;display:block;position:relative;box-shadow:inset 0 0 0 1px var(--img-edge)}
.av.sm{width:32px;height:32px}.av.xs{width:20px;height:20px}.av.md{width:36px;height:36px}.av.lg{width:64px;height:64px}.av.xl{width:88px;height:88px}
.a1{background:radial-gradient(circle at 30% 30%,oklch(85% .09 140),transparent 60%),radial-gradient(circle at 75% 80%,oklch(55% .11 150),transparent 65%),oklch(70% .08 120)}
.a2{background:radial-gradient(circle at 70% 25%,oklch(88% .08 70),transparent 55%),radial-gradient(circle at 25% 80%,oklch(58% .12 40),transparent 65%),oklch(72% .1 55)}
.a3{background:radial-gradient(circle at 35% 35%,oklch(86% .06 240),transparent 55%),linear-gradient(160deg,oklch(62% .09 250),oklch(45% .08 265))}
.a4{background:radial-gradient(circle at 60% 30%,oklch(84% .07 320),transparent 55%),linear-gradient(200deg,oklch(62% .1 310),oklch(42% .08 290))}
.a5{background:radial-gradient(circle at 30% 70%,oklch(80% .1 95),transparent 60%),linear-gradient(135deg,oklch(66% .12 85),oklch(50% .1 60))}
.a6{background:radial-gradient(circle at 70% 70%,oklch(78% .08 190),transparent 55%),linear-gradient(20deg,oklch(45% .07 200),oklch(68% .08 170))}
.a7{background:radial-gradient(circle at 40% 30%,oklch(90% .04 30),transparent 50%),linear-gradient(180deg,oklch(62% .13 25),oklch(45% .1 15))}
.a8{background:conic-gradient(from 200deg at 60% 60%,oklch(58% .06 140),oklch(78% .05 100),oklch(52% .05 160),oklch(58% .06 140))}
.a9{background:radial-gradient(circle at 50% 110%,oklch(40% .06 260),transparent 70%),linear-gradient(180deg,oklch(82% .06 80),oklch(70% .09 50))}
.a10{background:linear-gradient(135deg,oklch(35% .03 145) 0 50%,oklch(60% .09 140) 50% 100%)}
.stack{display:flex}
.stack>.av{box-shadow:0 0 0 2px var(--bg)}
.stack>.av+.av{margin-left:-6px}

/* ---------- images: thumbhash-like blooms / scenes ---------- */
.img{position:relative;overflow:hidden;background:var(--sunken)}
.sc-hills{background:radial-gradient(120% 70% at 30% 105%,oklch(52% .09 140) 40%,transparent 41%),radial-gradient(130% 80% at 85% 115%,oklch(42% .08 150) 45%,transparent 46%),radial-gradient(60% 40% at 72% 30%,oklch(94% .05 85),transparent 70%),linear-gradient(180deg,oklch(84% .06 230),oklch(92% .04 90))}
.sc-dusk{background:radial-gradient(40% 25% at 50% 62%,oklch(88% .12 70),transparent 70%),linear-gradient(180deg,oklch(42% .08 280) 0%,oklch(62% .12 30) 55%,oklch(38% .05 250) 62%,oklch(30% .05 250) 100%)}
.sc-moss{background:radial-gradient(35% 30% at 30% 40%,oklch(80% .14 130),transparent 70%),radial-gradient(40% 35% at 70% 65%,oklch(62% .13 140),transparent 70%),radial-gradient(30% 25% at 80% 20%,oklch(72% .1 110),transparent 70%),oklch(40% .07 150)}
.sc-clay{background:radial-gradient(38% 46% at 50% 58%,oklch(62% .11 50) 60%,transparent 61%),radial-gradient(22% 8% at 50% 22%,oklch(55% .1 50) 70%,transparent 71%),linear-gradient(180deg,oklch(90% .02 80),oklch(84% .03 70))}
.sc-sea{background:linear-gradient(180deg,oklch(88% .04 220) 0 45%,oklch(62% .08 225) 45% 60%,oklch(50% .08 230) 60% 78%,oklch(82% .05 85) 78%)}
.sc-fern{background:radial-gradient(60% 50% at 30% 30%,oklch(72% .12 135 / .8),transparent 70%),radial-gradient(50% 60% at 75% 75%,oklch(38% .08 155),transparent 70%),repeating-linear-gradient(115deg,oklch(55% .1 145) 0 3px,oklch(50% .09 148) 3px 9px)}
.sc-city{background:linear-gradient(180deg,transparent 55%,oklch(30% .03 260) 55%),linear-gradient(90deg,oklch(40% .04 260) 0 12%,transparent 12% 18%,oklch(35% .04 260) 18% 30%,transparent 30% 36%,oklch(45% .04 260) 36% 52%,transparent 52% 58%,oklch(38% .04 260) 58% 76%,transparent 76% 80%,oklch(42% .04 260) 80%),linear-gradient(180deg,oklch(70% .1 40),oklch(80% .08 70))}
.sc-seed{background:radial-gradient(6% 8% at 25% 30%,oklch(40% .06 60) 60%,transparent 61%),radial-gradient(5% 7% at 60% 45%,oklch(35% .05 50) 60%,transparent 61%),radial-gradient(6% 8% at 40% 70%,oklch(45% .07 70) 60%,transparent 61%),radial-gradient(5% 7% at 78% 72%,oklch(38% .05 55) 60%,transparent 61%),radial-gradient(5% 7% at 70% 20%,oklch(42% .06 65) 60%,transparent 61%),oklch(88% .04 85)}
.sc-bloom{background:radial-gradient(50% 60% at 30% 40%,oklch(78% .08 20),transparent 70%),radial-gradient(50% 60% at 70% 70%,oklch(70% .07 330),transparent 70%),oklch(84% .04 60)}
.sc-page{background:linear-gradient(180deg,oklch(96% .01 90),oklch(92% .02 90))}
.sc-map{background:repeating-linear-gradient(0deg,transparent 0 23px,oklch(80% .02 140 / .5) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,oklch(80% .02 140 / .5) 23px 24px),radial-gradient(30% 20% at 60% 50%,oklch(75% .08 145),transparent 70%),oklch(93% .02 110)}

/* ---------- top bar + nav (solid 96%, hairline; no blur) ---------- */
.topbar{position:relative;z-index:3;height:56px;display:flex;align-items:center;gap:4px;padding:0 8px;background:var(--bar);border-bottom:1px solid var(--line)}
.topbar.clear{border-bottom-color:transparent}
.ibtn{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);flex:none}
.ibtn.acc{color:var(--accent)}
.feedpick{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px;border-radius:12px;font-size:20px;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.feedpick .i{color:var(--text-3)}
.bar-title{font-size:18px;font-weight:600;line-height:24px}
.bar-sub{font-size:13px;line-height:16px;color:var(--text-3);font-weight:400}
.nav{position:absolute;z-index:4;left:0;right:0;bottom:0;height:64px;background:var(--bar);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-3);font-size:12px;font-weight:500;line-height:16px}
.nav .pill{width:56px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;position:relative}
.nav a.on{color:var(--text)}
.nav a.on .pill{background:var(--accent-soft);color:var(--accent)}
.nav .dot{position:absolute;top:3px;right:14px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--like);color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bar)}
.wr[data-theme="dark"] .nav .dot{color:oklch(20% .03 20)}
.fab{position:absolute;z-index:5;right:16px;bottom:80px;width:56px;height:56px;border-radius:18px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2)}
.scroll{position:absolute;left:0;right:0;top:56px;bottom:0;overflow:hidden}

/* ---------- post (flat list, recommended) ---------- */
.post{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:12px 16px 0;position:relative;background:var(--bg)}
.post::after{content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--line)}
.post.full::after{left:0}
.post.nodiv::after,.post.down::after{display:none}
.post>*{grid-column:2}
.post .gut{grid-column:1;grid-row:1 / span 20;display:flex;flex-direction:column;align-items:center}
.post:has(>.ctx.lead) .gut{grid-row:2 / span 20}
.post .ctx{grid-column:2;display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--text-3);margin:-2px 0 4px;font-weight:500}
.post .ctx.lead{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:44px 1fr;column-gap:12px}
.post .ctx.lead .i{justify-self:end}
.tl-down{position:absolute;left:37px;top:60px;bottom:0;width:2px;border-radius:2px;background:var(--line-strong)}
.tl-up{position:absolute;left:37px;top:0;height:8px;width:2px;border-radius:0 0 2px 2px;background:var(--line-strong)}
.meta{display:flex;align-items:center;gap:4px;min-width:0;font-size:14px;line-height:20px;color:var(--text-3);height:20px}
.meta .name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;max-width:62%}
.meta .handle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:24px}
.meta .time{flex:none}
.meta .nm{margin-left:4px}
.replying{font-size:13px;line-height:18px;color:var(--text-3);margin-top:1px}
.replying b{font-weight:500;color:var(--text-2)}
.body{margin-top:2px;font-size:16px;line-height:24px;text-wrap:pretty;overflow-wrap:anywhere}
.body p+p{margin-top:8px}
.body a,.lnk{color:var(--accent)}
.body a.url{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,var(--accent) 40%,transparent)}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{font-size:14px;font-weight:600;color:var(--accent);margin-top:2px;display:inline-block}
.also{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;line-height:18px;color:var(--text-3)}
.also a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.rk{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500;line-height:16px}
.tb{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-2);font-size:12px;font-weight:600;line-height:16px}
.tag-edit{font-size:13px;color:var(--text-3)}

/* action row: 4 buttons, 44px targets, quiet counts */
.actions{display:flex;align-items:center;justify-content:space-between;max-width:330px;height:44px;margin:2px 0 2px -11px}
.act{display:inline-flex;align-items:center;gap:6px;height:44px;min-width:44px;padding:0 11px;color:var(--text-3);font-size:13px;line-height:16px;font-variant-numeric:tabular-nums;border-radius:999px}
.act.liked{color:var(--like)}
.act.reposted{color:var(--repost)}
.act.off{opacity:.45}
.act .nmmini{display:inline-flex;margin-left:-2px}

/* media */
.media{margin-top:10px;border-radius:12px;overflow:hidden;display:grid;gap:2px;position:relative;isolation:isolate}
.media::after,.lc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--img-edge);pointer-events:none;z-index:2}
.m2{grid-template-columns:repeat(2,minmax(0,1fr));aspect-ratio:2/1}
.m3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:3/2}
.m3>:first-child{grid-row:span 2}
.m4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:3/2}
.badge{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:4px;background:oklch(0% 0 0 / .62);color:#fff;font-size:12px;font-weight:600;line-height:16px;letter-spacing:.02em}
.badge.bl{left:6px;bottom:6px}.badge.br{right:6px;bottom:6px}.badge.tl{left:6px;top:6px}
.play{position:absolute;z-index:1;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:oklch(0% 0 0 / .58);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px oklch(100% 0 0 / .15)}
.sens{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;padding:12px}
.sens .labels{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.sens .lab{height:22px;padding:0 8px;border-radius:999px;background:oklch(0% 0 0 / .45);font-size:12px;font-weight:600;line-height:22px}
.sens .show{height:36px;padding:0 16px;border-radius:999px;background:oklch(100% 0 0 / .92);color:oklch(24% .018 145);font-size:14px;font-weight:600}

/* link card */
.lc{margin-top:10px;border-radius:12px;overflow:hidden;background:var(--surface);position:relative;display:block;color:inherit}
.wr .lc{color:var(--text)}
.lc .img{aspect-ratio:1.91/1}
.lc .txt{padding:10px 12px 12px;display:grid;gap:2px;border-top:1px solid var(--line)}
.lc .dom{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--text-3)}
.fav{width:14px;height:14px;border-radius:3px;flex:none}
.lc .ttl{font-size:15px;line-height:20px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc .dsc{font-size:14px;line-height:20px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc.compact{display:grid;grid-template-columns:72px minmax(0,1fr)}
.lc.compact .img{aspect-ratio:auto;height:100%}
.lc.compact .txt{border-top:0;border-left:1px solid var(--line);align-content:center}

/* quote */
.qt{margin-top:10px;background:var(--sunken);border-radius:12px;padding:10px 12px 12px;box-shadow:inset 0 0 0 1px var(--line);display:block;color:var(--text)}
.qt .meta{font-size:13px;gap:6px}
.qt .meta .name{font-size:14px}
.qt .qb{font-size:15px;line-height:22px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.qt .strip{margin-top:8px;aspect-ratio:16/9;border-radius:8px}
.qt.gated{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--text-2);padding:12px}

/* content warning */
.cw{margin-top:6px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 12px;border-radius:8px;background:var(--warn-soft);font-size:14px;line-height:20px}
.cw .i{color:var(--warn)}
.cw .lbl{flex:1;min-width:0;font-weight:600;color:var(--text)}
.cw .lbl span{font-weight:400;color:var(--text-2)}
.cw .show{height:36px;padding:0 12px;border-radius:999px;font-weight:600;color:var(--text);background:oklch(100% 0 0 / .55)}
.wr[data-theme="dark"] .cw .show{background:oklch(100% 0 0 / .08)}

/* honest per-network notes: first-class, tinted, not error grey */
.only{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 5px;border-radius:999px;font-size:13px;line-height:18px;color:var(--text-2);margin-top:8px}
.only.fedi{background:var(--fedi-soft)}
.only.bsky{background:var(--bsky-soft)}
.only a{color:var(--text-2);font-weight:600}

/* filtered post */
.filtered{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:52px;padding:4px 8px 4px 16px;position:relative;font-size:14px;line-height:20px;color:var(--text-3)}
.filtered::after{content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--line)}
.filtered .i{justify-self:center}
.filtered b{font-weight:500;color:var(--text-2)}

/* repost carousel */
.carousel{padding:12px 0 14px;position:relative}
.carousel::after{content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--line)}
.carousel .hd{display:grid;grid-template-columns:44px 1fr auto;column-gap:12px;align-items:center;padding:0 16px 0 16px;font-size:13px;line-height:18px;color:var(--text-3);font-weight:500;height:24px}
.carousel .hd .i{justify-self:end}
.carousel .track{display:flex;gap:8px;padding:8px 16px 0 72px;overflow:hidden}
.cc{flex:none;width:236px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:10px 12px 8px;display:flex;flex-direction:column;gap:6px}
.cc .by{font-size:12px;line-height:16px;color:var(--text-3);display:flex;align-items:center;gap:4px}
.cc .meta{font-size:13px}
.cc .meta .name{font-size:14px}
.cc .t{font-size:14px;line-height:20px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cc .th{aspect-ratio:16/9;border-radius:8px}
.cc .ft{display:flex;gap:14px;font-size:12px;color:var(--text-3);align-items:center;margin-top:auto}

/* skeleton */
.sk{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:14px 16px;position:relative}
.sk::after{content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--line)}
.sk .c{width:44px;height:44px;border-radius:50%;background:var(--sunken)}
.sk .b{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--sunken) 0 40%,color-mix(in oklch,var(--sunken) 60%,var(--bg)) 50%,var(--sunken) 60%);background-size:300% 100%}
.sk .lines{display:flex;flex-direction:column;gap:10px;padding-top:4px}

/* bands, pills */
.band{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px 4px 16px;background:var(--warn-soft);font-size:14px;line-height:20px;color:var(--text);position:relative;z-index:2}
.band .i{color:var(--warn)}
.band.info{background:var(--sunken)}
.band.info .i{color:var(--text-2)}
.band .txt{flex:1;min-width:0}
.band .txt b{font-weight:600}
.tbtn{height:36px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;flex:none}
.newpill{position:absolute;z-index:6;top:64px;left:50%;transform:translateX(-50%);height:40px;padding:0 16px 0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;box-shadow:var(--shadow-2);white-space:nowrap}
.newpill .stack>.av{box-shadow:0 0 0 2px var(--accent)}

/* buttons */
.btn{height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;line-height:20px;white-space:nowrap}
.btn.pri{background:var(--accent);color:var(--on-accent)}
.btn.sec{background:var(--sunken);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.out{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.ghost{color:var(--accent);padding:0 12px}
.btn.dng{color:var(--danger);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--danger) 45%,transparent)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}
.btn.wide{width:100%}
.btn[disabled],.btn.dis{opacity:.45;cursor:default}
.split{display:inline-flex;border-radius:999px;overflow:hidden}
.split .btn{border-radius:0}
.split .btn:first-child{padding-right:14px}
.split .btn+.btn{padding:0 12px;box-shadow:inset 1px 0 0 color-mix(in oklch,var(--on-accent) 30%,transparent)}
.split.sec .btn+.btn{box-shadow:inset 1px 0 0 var(--line-strong),inset 0 0 0 1px var(--line)}

/* toggle 52x32, thumb 24 */
.tg{width:52px;height:32px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;display:inline-block}
.tg::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px oklch(0% 0 0 / .2)}
.tg.on{background:var(--accent)}
.tg.on::after{left:24px;background:var(--on-accent)}
.wr[data-theme="dark"] .tg:not(.on)::after{background:var(--text-3)}
.tg.dis{opacity:.45}

/* chips */
.chip{height:32px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-strong);white-space:nowrap;flex:none}
.chip.on{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 35%,transparent)}
.wr[data-theme="dark"] .chip.on{color:var(--text)}
/* compose network chips: 36px (44 hit) */
.nchip{height:36px;padding:0 12px 0 8px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft);position:relative;flex:none}
.nchip .ck{color:var(--accent)}
.nchip.off{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-3);font-weight:500}
.nchip.off .nm{opacity:.5}
.nchip.blocked{background:transparent;box-shadow:none;border:1.5px dashed var(--line-strong);color:var(--text-3);font-weight:500}
.nchip.blocked .nm{opacity:.45}

/* tabs / segmented */
.tabs{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--line);position:relative}
.tab{height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--text-3);position:relative}
.tab.on{color:var(--text);font-weight:600}
.tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.tab .n{font-size:12px;color:var(--text-3);font-weight:500}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:3px;border-radius:12px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);gap:2px}
.seg button{height:34px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-1),0 0 0 1px var(--line)}
.wr[data-theme="dark"] .seg button.on{background:var(--line)}

/* sheets / popovers (solid, no blur) */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:8}
.sheet{position:absolute;z-index:9;left:0;right:0;bottom:0;background:var(--surface);border-radius:24px 24px 0 0;box-shadow:var(--shadow-3);padding:8px 0 16px}
.grab{width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 8px}
.pop{position:absolute;z-index:9;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-3),0 0 0 1px var(--line);padding:6px}
.mi{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:10px;font-size:15px;line-height:20px;width:100%}
.mi.on{background:var(--accent-soft)}
.mi .sub{font-size:13px;color:var(--text-3);line-height:18px}
.sect{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);line-height:16px}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--text)}
.input{height:48px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:16px;color:var(--text)}
.input.focus{box-shadow:inset 0 0 0 2px var(--accent)}
.input input{border:0;background:transparent;outline:none;flex:1;min-width:0;font-size:16px;padding:0}
.hint{font-size:13px;line-height:18px;color:var(--text-3)}

/* list rows */
.lrow{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;position:relative}
.lrow.div::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:1px;background:var(--line)}
.lrow .tt{font-size:15px;line-height:20px;font-weight:500}
.lrow .st{font-size:13px;line-height:18px;color:var(--text-3)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:18px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status.ok{color:var(--ok)}.status.warn{color:var(--warn)}.status.bad{color:var(--danger)}
.card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}

/* soft card option */
.soft .post{margin:0 12px 8px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);padding:12px 12px 0}
.soft .post::after{display:none}
.soft .post .actions{margin-bottom:0}

/* thread */
.anc{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center;padding:8px 16px;position:relative;font-size:14px;line-height:20px;color:var(--text-3)}
.focus-post{padding:4px 16px 0}
.focus-post .body{font-size:18px;line-height:27px;margin-top:12px}
.stamp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;line-height:20px;color:var(--text-3);margin-top:12px}
.counts{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-top:12px}
.counts .tot{display:flex;gap:16px;font-size:14px;color:var(--text-2)}
.counts .tot b{color:var(--text);font-weight:600}
.counts .split-l{display:flex;gap:14px;font-size:13px;color:var(--text-3);align-items:center}
.counts .split-l span{display:inline-flex;align-items:center;gap:5px}
.nest{padding-left:28px}
.nest2{padding-left:56px}
.cont{display:flex;align-items:center;gap:6px;height:44px;padding-left:72px;font-size:14px;font-weight:600;color:var(--accent);position:relative}
.cont::after{content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--line)}
.replybar{position:absolute;z-index:4;left:0;right:0;bottom:0;background:var(--bar);border-top:1px solid var(--line);padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px}
.replybox{display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 6px;border-radius:999px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;color:var(--text-3)}

/* notifications */
.nt{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:12px 16px;position:relative}
.nt::after{content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--line)}
.nt .kind{width:44px;display:flex;justify-content:flex-end;padding-top:6px}
.nt .kind .i{width:24px;height:24px}
.nt .who{display:flex;align-items:center;gap:0}
.nt .who .av{box-shadow:0 0 0 2px var(--bg)}
.nt .who .w{position:relative;margin-right:-4px}
.nt .who .w .nm{position:absolute;right:-2px;bottom:-2px;box-shadow:0 0 0 2px var(--bg);border-radius:50%}
.nt .line{font-size:15px;line-height:22px;margin-top:6px}
.nt .line b{font-weight:600}
.nt .snip{margin-top:4px;font-size:14px;line-height:20px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt .when{font-size:13px;color:var(--text-3)}
.nt.unread{background:color-mix(in oklch,var(--accent-soft) 45%,var(--bg))}
.day{padding:16px 16px 6px;font-size:13px;font-weight:600;color:var(--text-3)}

/* profile */
.banner{height:120px}
.pchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 8px;border-radius:999px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--text-2);white-space:nowrap}
.stat b{font-weight:600;color:var(--text)}
.stat{font-size:14px;color:var(--text-2)}

/* compose */
.editor{font-size:17px;line-height:26px;color:var(--text);padding:4px 16px 0 60px;white-space:pre-wrap;text-wrap:pretty}
.editor .over{background:color-mix(in oklch,var(--net-bsky) 16%,transparent);border-radius:3px;box-shadow:0 0 0 1px color-mix(in oklch,var(--net-bsky) 16%,transparent)}
.cut{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--net-bsky);vertical-align:1px;margin:0 2px}
.ring{width:28px;height:28px;flex:none}
.ring .bg{stroke:var(--line)}
.ring .b{stroke:var(--net-bsky)}
.ring .f{stroke:var(--net-fedi)}
.tool{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);border-radius:12px;flex:none}
.splitcard{border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:10px 12px;font-size:14px;line-height:20px;color:var(--text)}
.splitcard .hdr{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-3);line-height:16px;margin-bottom:4px;letter-spacing:.02em}
.splitcard .hdr .n{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}
.altreq{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 6px 0 10px;border-radius:8px;background:var(--warn-soft);font-size:13px;line-height:18px;color:var(--text)}
.altreq .i{color:var(--warn)}

/* catch-up */
.cu-h{font-family:Newsreader,Georgia,serif;font-size:26px;line-height:32px;font-weight:500;letter-spacing:-.01em}
.grp{display:flex;align-items:center;gap:8px;padding:20px 16px 4px}
.grp h3{font-size:17px;line-height:24px;font-weight:650}
.grp .n{font-size:13px;color:var(--text-3)}
.cpost{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:10px;padding:10px 16px;position:relative}
.cpost::after{content:"";position:absolute;left:58px;right:0;bottom:0;height:1px;background:var(--line)}
.cpost .t{font-size:15px;line-height:22px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cpost .th{width:56px;height:56px;border-radius:8px;margin-top:4px}
.cpost .ft{display:flex;gap:12px;font-size:12px;color:var(--text-3);margin-top:4px;align-items:center}

/* notes boards */
.doc{font-size:15px;line-height:22px;color:var(--text-2)}
.doc h2{font-size:28px;line-height:34px;color:var(--text);font-family:Newsreader,Georgia,serif;font-weight:500}
.doc h3{font-size:13px;line-height:16px;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.doc code,.code{font-family:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;font-size:12.5px;color:var(--text)}
.spec{font-size:12px;line-height:16px;color:var(--text-3);font-family:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace}
.label{font-size:13px;font-weight:600;color:var(--text-2);line-height:18px}
.frame{background:var(--bg);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;position:relative}
.sw{height:56px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--img-edge)}
/* nested replies (depth 1-3 in DOM, then "Continue thread") */
.post.n1{padding-left:60px;grid-template-columns:32px minmax(0,1fr);column-gap:10px}
.post.n1::after{left:102px}
.post.n1 .av{width:32px;height:32px}
.tl-pass{position:absolute;left:37px;top:0;bottom:0;width:2px;background:var(--line-strong)}
.tl-elbow{position:absolute;left:37px;top:0;width:21px;height:29px;border-left:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);border-bottom-left-radius:14px}
.sorter{display:flex;align-items:center;gap:8px;padding:14px 16px 6px;border-top:1px solid var(--line)}
.sorter h3{font-size:15px;line-height:20px;font-weight:600;flex:1}
.post>.tl-down,.post>.tl-up,.post>.tl-pass,.post>.tl-elbow{grid-column:auto;grid-row:auto}

/* ---------- glass chrome: top bar + bottom nav ONLY (SPEC §10) ----------
   small radius + saturate, own layer, no nested blur, solid fallback */
.topbar,.nav{background:var(--glass);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);contain:paint}
.topbar.clear{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.solid .topbar,.solid .nav,.solid.topbar,.solid.nav{background:var(--bar);-webkit-backdrop-filter:none;backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar,.nav{background:var(--bar)}}
@media (prefers-reduced-transparency:reduce){.topbar,.nav{background:var(--bar);backdrop-filter:none}}
/* ranking surfaces */
.wtf{margin:0 12px 8px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);padding:12px}
.flat .wtf{margin:8px 16px 8px 72px}
.why li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;padding:10px 0}
.why li+li{border-top:1px solid var(--line)}
.why .k{font-size:15px;line-height:22px;color:var(--text)}
.why .d{font-size:13px;line-height:18px;color:var(--text-3)}
.mlt{display:flex;gap:8px;overflow:hidden;padding:0 16px 4px}
.mlt .cc{width:250px}
/* desktop */
.dk{display:grid;grid-template-columns:248px 600px minmax(0,1fr);height:100%}
.rail{border-right:1px solid var(--line);padding:16px 16px 16px 20px;display:flex;flex-direction:column;gap:4px;position:relative}
.rail a.ni{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;border-radius:999px;font-size:16px;color:var(--text-2);font-weight:500}
.rail a.ni.on{background:var(--accent-soft);color:var(--text);font-weight:600}
.rail a.ni.on .i{color:var(--accent)}
.rail .kbd,.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-strong),inset 0 -1px 0 var(--line-strong);font-size:12px;font-weight:600;color:var(--text-2);font-family:ui-monospace,Menlo,monospace}
.tl{border-right:1px solid var(--line);position:relative;overflow:hidden}
.side{padding:0;overflow:hidden;position:relative}
.post.sel{background:color-mix(in oklch,var(--accent-soft) 45%,var(--bg));box-shadow:inset 0 0 0 2px var(--focus)}
.ftabs{display:flex;gap:2px;padding:0 8px;height:52px;align-items:stretch}
.ftabs .tab{height:auto}
.tab{white-space:nowrap}
/* component + notes boards */
.sheetpage{padding:48px 56px;display:flex;flex-direction:column;gap:40px}
.cols{display:grid;grid-template-columns:repeat(3,400px);gap:40px 56px;align-items:start}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 40px;align-items:start}
.fig{display:flex;flex-direction:column;gap:8px;margin:0}
.fig .note{font-size:12px;line-height:16px;color:var(--text-3)}
.stackcol{display:flex;flex-direction:column;gap:32px}
.pagehead h1{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:40px;line-height:46px;letter-spacing:-.015em}
.pagehead p{font-size:16px;line-height:24px;color:var(--text-2);max-width:760px;margin-top:6px}
.frame .post:last-child::after{display:none}
/* intent features */
.topbar.tall{height:auto;flex-direction:column;align-items:stretch;padding:0;gap:0}
.topbar.tall .r1{height:56px;display:flex;align-items:center;gap:4px;padding:0 8px}
.moods{display:flex;gap:6px;padding:2px 12px 10px 16px;align-items:center;overflow:hidden}
.mood{height:34px;padding:0 12px 0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-strong);white-space:nowrap;flex:none}
.mood .i{width:16px;height:16px}
.mood.on{background:var(--text);color:var(--bg);box-shadow:none;font-weight:600}
.calm{height:34px;padding:0 6px 0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent);background:var(--accent-soft);flex:none;margin-left:auto}
.tg.mini{width:34px;height:20px}
.tg.mini::after{top:3px;left:3px;width:14px;height:14px}
.tg.mini.on::after{left:17px}
.helpful{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;line-height:16px}
.ans{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:600;line-height:16px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-2)}
.ans.zero{box-shadow:none;background:var(--warn-soft);color:var(--text)}
.qcard{padding:14px 16px;position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px}
.qcard::after{content:"";position:absolute;left:64px;right:0;bottom:0;height:1px;background:var(--line)}
.qcard .q{font-size:16px;line-height:24px;margin-top:2px}
.qcard .why{font-size:13px;line-height:18px;color:var(--text-3);margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--like)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in oklch,currentColor 25%,transparent)}
.cover{width:64px;height:96px;border-radius:4px 8px 8px 4px;flex:none;position:relative;overflow:hidden;box-shadow:var(--shadow-1),inset 3px 0 0 oklch(0% 0 0 / .12);display:flex;align-items:flex-end;padding:6px;color:#fff;font-family:Newsreader,Georgia,serif;font-size:11px;line-height:13px;font-weight:600}
.rec{display:flex;gap:14px;padding:14px 16px;position:relative}
.rec::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:1px;background:var(--line)}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 12px}
.work{border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.work .img{width:100%}
.work .by{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:13px;line-height:18px;min-width:0}
.work .by b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint-card{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;padding:12px;border-radius:12px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:20px;color:var(--text)}
.hint-card .i{color:var(--accent);margin-top:1px}
.hint-card .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pin{margin:8px 12px 4px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);padding:12px 14px 6px}
.pagehead h1{color:var(--text)}
.nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.nav a{font-size:11.5px;letter-spacing:-.01em}
.nav .pill{width:52px}
.nav .dot{right:10px}
.netchip{height:32px;margin:6px 4px 6px 0;padding:0 8px 0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-strong);flex:none}
.netchip .i{color:var(--text-3)}
.cnt{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cnt .ring{width:20px;height:20px}
.cnts{display:flex;align-items:center;gap:12px;padding-right:4px}
.qlink{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);font-size:14px;line-height:20px;color:var(--text)}
.qlink .i{color:var(--accent)}
.slider{position:relative;height:44px}
.slider .track{position:absolute;left:10px;right:10px;top:20px;height:4px;border-radius:2px;background:var(--line-strong)}
.slider .fill{position:absolute;left:10px;top:20px;height:4px;border-radius:2px;background:var(--accent)}
.slider .stop{position:absolute;top:18px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--line-strong)}
.slider .knob{position:absolute;top:10px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px oklch(0% 0 0 / .3),inset 0 0 0 2px var(--accent)}
.slider-l{display:flex;justify-content:space-between;font-size:13px;color:var(--text-3);padding:0 2px}
.slider-l b{color:var(--text);font-weight:600}