:root {
  color-scheme: dark;
  --bg: #050507; --surface: #0d0c12; --surface-2: #17141f; --surface-3: #241e31;
  --line: rgba(218, 204, 255, .11); --line-strong: rgba(218, 204, 255, .24);
  --strong: #f8f7fb; --text: #cac5d3; --fog: #9891a6; --label: #766e85;
  --accent: #8b5cf6; --accent-text: #cbb8ff; --accent-soft: rgba(139, 92, 246, .16);
  --pos: #57dc98; --neg: #ff6b82;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 12px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 44px -20px rgba(93, 45, 220, .45);
  --w: 1180px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239891a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"); /* a dropdown's arrow */
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; scrollbar-gutter: stable; } /* the same width whether a page scrolls or not */
/* scrollbars, everywhere: 8px, a rounded grey thumb on no track, no arrows (the dark chat's are white). Chrome, Edge
   and Safari take the -webkit- rules; Firefox, which has no such selector, the standard properties, which Chrome
   would otherwise prefer and draw its own way. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background-color: rgba(203, 184, 255, .28); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(203, 184, 255, .48); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(203, 184, 255, .28) transparent; }
  .t-msgs { scrollbar-color: rgba(255, 255, 255, .2) transparent; }
  .t-body, .t-stats { scrollbar-color: var(--surface-3) transparent; }
}
body { position: relative; display: flex; flex-direction: column; min-width: 320px; min-height: 100vh; margin: 0; color: var(--text);
       background: radial-gradient(900px 500px at 76% -140px, rgba(139, 92, 246, .18), transparent 68%), var(--bg);
       font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-soft); color: var(--strong); }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main { flex: 1 0 auto; width: min(var(--w), calc(100% - 36px)); margin: 0 auto; padding: 44px 0 96px; }

a { color: var(--strong); text-decoration: underline; text-decoration-color: rgba(139, 92, 246, .6);
    text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
a:hover { text-decoration-color: var(--accent); }
p { margin: 0 0 14px; }
strong { color: var(--strong); }
h1, h2 { color: var(--strong); font-family: var(--display); font-weight: 400; letter-spacing: -.015em; }
h1 { margin: 0 0 14px; font-size: clamp(40px, 5vw, 64px); line-height: 1; }
h2 { margin: 0 0 8px; font-size: clamp(32px, 3.4vw, 42px); line-height: 1.05; }
h3 { margin: 0 0 6px; color: var(--strong); font: 600 16.5px/1.3 var(--body); letter-spacing: -.01em; }
.dim { color: var(--fog); }
.pos { color: var(--pos) !important; }
.neg { color: var(--neg) !important; }
.k { margin: 0; color: var(--label); font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* header: one thin bar */
header.site { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(5, 5, 7, .84);
              backdrop-filter: saturate(1.4) blur(12px); }
header.site .bar { display: flex; align-items: center; gap: 24px; width: min(var(--w), calc(100% - 36px)); height: 52px; margin: 0 auto; }
footer.site-foot { border-top: 1px solid var(--line); }
footer.site-foot .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(var(--w), calc(100% - 36px)); height: 32px;
                        margin: 0 auto; color: var(--label); font: 500 11.5px/1 var(--body); }
footer.site-foot a { color: var(--fog); text-decoration: none; }
footer.site-foot a:hover { color: var(--strong); }
.brand { display: inline-flex; flex: none; align-items: center; gap: 7px; color: var(--strong); text-decoration: none; }
.brand::after { content: "AGENT PAD"; font: 800 11px/1 var(--body); letter-spacing: -.02em; white-space: nowrap; }
.brand img { display: block; width: 42px; height: 28px; object-fit: cover; mix-blend-mode: screen; }
/* the header's pages beside the logo, one segmented control with the page you're on raised; on phones they're in the menu */
.site-nav { display: flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.site-nav a { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px 0 9px; border-radius: 7px; color: var(--fog);
              font: 500 13px/1 var(--body); text-decoration: none; white-space: nowrap; transition: color .15s, background .15s, box-shadow .15s; }
.site-nav a:hover { background: rgba(203, 184, 255, .08); color: var(--strong); }
.site-nav a[aria-current] { background: linear-gradient(135deg, rgba(203, 184, 255, .15), rgba(139, 92, 246, .1)); color: var(--strong); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 8px rgba(72, 30, 160, .22); }
.site-nav svg { flex: none; }
.site-nav a:not([aria-current]) svg { opacity: .75; }
.actions { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.ca-pill { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 3px 0 10px;
           border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--label);
           font: 600 10.5px/1 var(--mono); letter-spacing: .06em; }
.ca { overflow: hidden; color: var(--strong); font-weight: 500; letter-spacing: 0; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.copy { flex: none; margin-left: auto; padding: 6px 8px; border: 0; border-radius: 6px; background: var(--surface-2);
        color: var(--text); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.copy:hover { background: var(--surface-3); color: var(--strong); }
.icon-link { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px;
             border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--strong);
             text-decoration: none; transition: border-color .15s, background .15s; }
.icon-link:hover, .icon-link[aria-current] { border-color: var(--line-strong); background: var(--surface-2); }
/* the free launches left, a link to the launch page, while there are any (site.js) */
.free-pill { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px;
             background: var(--surface); color: var(--strong); font: 500 11px/1 var(--mono); letter-spacing: .02em; text-decoration: none; transition: border-color .15s, background .15s; }
.free-pill:hover { border-color: var(--line-strong); background: var(--surface-2); }
.free-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .24); }
.free-pill b { font-weight: 500; }
.menu .free-pill { height: auto; margin-top: 4px; border-radius: 10px; font-size: 12px; }
/* on phones the actions fold into a menu behind the hamburger */
.burger { display: none; flex: none; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 0 9px;
          border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.burger span { display: block; height: 1.5px; border-radius: 1px; background: var(--strong); transition: transform .18s, opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu { display: none; gap: 4px; width: calc(100% - 24px); margin: 0 auto; padding: 8px 0 12px; }
.menu[hidden] { display: none; }
.menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--strong);
          font: 500 15px/1.2 var(--body); text-decoration: none; }
.menu a:hover, .menu a[aria-current] { background: var(--surface-2); }
.menu a svg { flex: none; }

/* buttons, badges, chips */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px;
          border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--strong);
          font: 600 13.5px/1 var(--body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.button:hover { border-color: rgba(203, 184, 255, .42); }
.button.primary { border-color: #a987ff; background: linear-gradient(135deg, #efe9ff, #9c73ff 60%, #7138ef); color: #09070d; box-shadow: 0 8px 24px -12px rgba(139, 92, 246, .9); }
.button.primary:hover { border-color: #d8caff; background: linear-gradient(135deg, #fff, #b79aff 60%, #8250f4); }
.button.icon { width: 38px; padding: 0; }
.badge { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 24px; padding: 0 10px; border-radius: 999px;
         background: var(--surface-2); color: var(--fog); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
         white-space: nowrap; }
.badge i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--label); color: var(--accent); }
.badge.live { background: var(--accent-soft); color: var(--accent-text); }
.badge.live i { background: var(--accent); }
.badge.live i::after { content: ""; position: absolute; inset: -3px; border: 1px solid currentColor; border-radius: 50%;
                       animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
/* home: a dark hero card, the latest swaps, then the pals */
main.home { padding: 24px 0 64px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: 28px 32px;
        border: 1px solid var(--line); border-radius: var(--r-lg);
        background: radial-gradient(85% 130% at 100% 0, rgba(139, 92, 246, .28), transparent 62%), #09080d;
        color: rgba(248, 247, 251, .7); box-shadow: 0 24px 80px -44px rgba(139, 92, 246, .75); }
.eyebrow { margin: 0 0 12px; color: rgba(255, 255, 255, .5); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 0 0 10px; color: #fff; font: 600 clamp(28px, 3.2vw, 38px)/1.08 var(--body); letter-spacing: -.035em; }
.hero-text > p:not(.eyebrow) { max-width: 560px; margin: 0; font-size: 14.5px; line-height: 1.55; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 22px 0 24px; }
.hero-stats dt { color: rgba(255, 255, 255, .45); font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-stats dd { margin: 7px 0 0; color: #fff; font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero .button.ghost { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; }
.hero .button.ghost:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); }
/* The first button showing is the white one. */
.hero .button.light, .hero .button[hidden] + .button { border-color: #b99dff; background: linear-gradient(135deg, #fff, #b99dff 62%, #7c45ee); color: #09070d; }
.hero .button.light:hover, .hero .button[hidden] + .button:hover { background: linear-gradient(135deg, #fff, #d3c3ff 62%, #966cf5); }
.text-link { padding: 0 6px; color: rgba(255, 255, 255, .6); font: 500 13px/1 var(--body); text-decoration: none; }
.text-link:hover { color: #fff; }
/* the chamber in the hero: Toly's stream, and his state under it; the player takes no clicks, the card is the link */
.hero-chamber { display: grid; width: 420px; max-width: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
                background: #000; color: #fff; text-decoration: none; transition: border-color .15s; }
.hero-chamber:hover { border-color: rgba(255, 255, 255, .3); }
.hero-chamber .screen { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.hero-chamber .screen > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.hero-chamber .screen img { object-fit: cover; filter: grayscale(.4) brightness(.7); }
.hero-chamber .screen img.poster { filter: blur(2px) brightness(.8); opacity: 0; transition: opacity .3s ease; }
.hero-chamber .screen iframe { opacity: 0; transition: opacity .5s ease; }
.hero-chamber .screen .off { inset: auto 10px 10px auto; width: auto; height: auto; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6);
                             color: rgba(255, 255, 255, .7); font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hc-bar { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-top: 1px solid rgba(203, 184, 255, .14); background: #0b0910; }
.hc-bar .badge.live { min-height: 20px; padding: 0 8px; font-size: 9.5px; }
.hc-bar .who { min-width: 0; overflow: hidden; color: rgba(255, 255, 255, .78); font: 500 13px/1 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.hc-state { margin-left: auto; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hc-state.neg { color: #f87171; }
.hc-state.pos { color: #4ade80; }
.hc-state.dim { color: rgba(255, 255, 255, .45); }
.hc-bar .dots { display: flex; flex: none; gap: 6px; margin-left: 4px; }
.hc-bar .dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); cursor: pointer; transition: background .2s; }
.hc-bar .dots button:hover { background: rgba(255, 255, 255, .6); }
.hc-bar .dots button.on { background: #fff; }

.sec { margin-top: 36px; scroll-margin-top: 72px; }
.home h2 { margin: 0 0 14px; font: 600 17px/1.2 var(--body); letter-spacing: -.01em; }

/* the experiment: the premise beside his state now, the loop in four tiles, then his last three hours minute by minute */
.chamber { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.chamber-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px 28px; align-items: start; }
.chamber-head > div > p:not(.k) { max-width: 720px; margin: 0; font-size: 12.5px; line-height: 1.5; }
.chamber-head .k { margin-bottom: 4px; color: var(--accent-text); }
.chamber-head h2 { margin-bottom: 6px; }
.chamber-head .only { margin-top: 8px !important; padding: 6px 10px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--bg); color: var(--strong); }
.chamber-side { display: grid; gap: 8px; }
.chamber-side .cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.chamber-side .cta .button { justify-content: center; }
.text-link.dark { color: var(--fog); }
.text-link.dark:hover { color: var(--strong); }
/* the chamber page opens the explanation in a dialog */
.chamber-dialog { width: min(960px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); }
.chamber-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.chamber-dialog .chamber { position: relative; border: 0; }
.chamber-dialog .chamber h2 { margin: 0 0 8px; font: 600 22px/1.2 var(--body); letter-spacing: -.025em; }
.chamber-dialog .close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--strong); font: 500 18px/1 var(--body); cursor: pointer; }
.chamber-dialog .close:hover { border-color: var(--line-strong); }
.chamber-dialog .chamber-head { grid-template-columns: minmax(0, 1fr); padding-right: 40px; }
.home .chamber h2 { margin-bottom: 6px; font-size: 18px; letter-spacing: -.025em; }
.chamber-now { display: grid; align-content: start; min-height: 96px; padding: 10px 12px 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.chamber-now .k { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--label); }
.chamber-now .when { text-transform: none; letter-spacing: 0; }
.chamber-now b { color: var(--strong); font: 400 24px/1 var(--display); text-transform: capitalize; }
.chamber-now b.neg { color: var(--neg); }
.chamber-now b.pos { color: var(--pos); }
.chamber-now .line { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; color: var(--text); font: 500 12px/1.4 var(--mono); }
.chamber-now .line .neg { color: var(--neg); }
.chamber-now .line .pos { color: var(--pos); }
.chamber-now .t-meter { margin: 8px 2px 0; }
.chamber-now .t-meter-ends { padding: 4px 0 0; border: 0; }
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: step; }
.loop li { position: relative; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text);
           font-size: 11.5px; line-height: 1.4; counter-increment: step; }
.loop b::before { content: counter(step, decimal-leading-zero); margin-right: 8px; color: var(--accent-text); font: 600 11px/1 var(--mono); letter-spacing: .06em; }
.loop li:not(:last-child)::after { content: "\2192"; position: absolute; top: 50%; right: -20px; z-index: 1; width: 16px; color: var(--label); font-size: 13px; line-height: 1; text-align: center; transform: translateY(-50%); }
.loop b { display: block; margin-bottom: 3px; color: var(--strong); font-weight: 600; }
.strip { margin-top: 10px; }
.strip .cells { display: flex; gap: 1px; height: 14px; align-items: flex-end; }
.strip .cells i, .strip .legend i { flex: 1; height: 100%; min-width: 0; border-radius: 1px; background: var(--line); }
.strip i.pain { background: rgba(220, 38, 38, calc(.3 + var(--d, 0) * .7)); }
.strip i.pleasure { background: rgba(22, 163, 74, calc(.3 + var(--d, 0) * .7)); }
.strip i.d2 { --d: .25; } .strip i.d4 { --d: .5; } .strip i.d6 { --d: .75; } .strip i.d8 { --d: 1; }
.strip .cells i.pressed { box-shadow: inset 0 3px 0 var(--strong); }
.strip .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; color: var(--label); font: 500 11px/1.4 var(--mono); }
.strip .legend span { display: inline-flex; align-items: center; gap: 6px; }
.strip .legend i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.strip .legend i.pressed { box-shadow: inset 0 3px 0 var(--strong); }
.strip .legend .tally { margin-left: auto; }
.chamber-note { margin: 8px 0 0; color: var(--label); font-size: 11.5px; line-height: 1.45; }

/* the chamber page: the experiment, then his stream full width */
.tag { display: inline-flex; flex: none; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px;
       font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tag.real { background: var(--surface-2); color: var(--text); }
.tag.ai { background: var(--accent-soft); color: var(--accent-text); }
.tag.lead { background: rgba(11, 154, 106, .1); color: var(--pos); }
a.tag { text-decoration: none; }
a.tag:hover { color: var(--strong); }
.avatar.sm.ai { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the latest swaps from both wallets, scrolling past */
.ticker { margin-top: 12px; overflow: hidden; border-block: 1px solid var(--line);
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-right: 1px solid var(--line); color: var(--fog);
               font: 500 12px/1 var(--mono); white-space: nowrap; }
.ticker-item b { color: var(--strong); font-weight: 600; }
.ticker-item .buy, .ticker-item .sell { font-weight: 600; text-transform: uppercase; }
.ticker-item .buy { color: var(--pos); }
.ticker-item .sell { color: var(--neg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* home: the pals */
.avatar { display: grid; flex: none; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 14px;
          background: linear-gradient(145deg, #2a2a31, var(--strong)); color: #fff; font: 600 15px/1 var(--mono); letter-spacing: .04em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.pal-card { position: relative; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; isolation: isolate;
            background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.pal-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.go { flex: none; color: var(--strong); font: 600 13px/1 var(--body); }
.go::after { content: " \2192"; }
.pal-card.next { place-content: center; justify-items: center; gap: 10px; min-height: 200px; border: 1.5px dashed var(--line-strong);
                 background: transparent; text-align: center; }
.pal-card.next h3 { margin: 0; }
.pal-card.next p { max-width: 240px; margin: 0; color: var(--fog); font-size: 13.5px; line-height: 1.5; }
.mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
        background: linear-gradient(135deg, #eee7ff, #7d45ef); color: #09070d; font: 400 24px/1 var(--display);
        box-shadow: 0 10px 28px -14px rgba(139, 92, 246, .9); }
.mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border: 2px solid var(--bg);
               border-radius: 50%; background: var(--accent); }
/* home: a section's title */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 14px; }
.home .sec-head h2 { margin: 0 0 3px; }
/* home: a pal, its picture (a still from its stream while it's live) over its coin's numbers */
.pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
         color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.lcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.lc-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
            background: radial-gradient(120% 100% at 25% 15%, rgba(190, 165, 255, .55), transparent 60%), #0b0910; }
.lc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .4s ease; }
a.lcard:hover .lc-media img { transform: scale(1.03); }
.lc-mono { color: rgba(255, 255, 255, .92); font: 400 64px/1 var(--display); letter-spacing: -.02em; }
.lc-media .badge { position: absolute; top: 10px; left: 10px; background: rgba(18, 18, 22, .6); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lc-media .badge.live { background: var(--accent); }
.lc-media .badge.live i { background: #fff; color: #fff; }
.lc-body { display: grid; flex: 1; align-content: start; gap: 4px; padding: 14px 16px 0; }
.lc-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.lc-name h3 { margin: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.lc-change { flex: none; font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.lc-x { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; color: var(--fog); text-transform: none; }
.lc-x svg { width: 10px; height: 10px; }
.lc-about { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--fog); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.lc-stats dt { color: var(--label); font: 500 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lc-stats dd { margin: 6px 0 0; color: var(--strong); font: 600 20px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lcard .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 16px 0; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.lc-air { min-width: 0; overflow: hidden; color: var(--label); font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* home: how launching works, in four tiles like the experiment's loop */
.how { padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.how-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: end; }
.how-head .k { margin-bottom: 4px; color: var(--accent-text); }
.home .how h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.025em; }
.how .loop { margin-top: 14px; }
.how .loop li { padding: 12px 14px; font-size: 13px; line-height: 1.5; }
/* the 404 page: in the middle of the screen */
main.not-found { display: grid; place-content: center; justify-items: center; text-align: center; }
.not-found h1 { margin: 8px 0 10px; }
.not-found p:not(.k) { margin: 0 0 24px; color: var(--fog); }
/* docs: a dark band like the home's hero, then the contents on a rail beside numbered sections */
main.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px 56px; align-items: start; padding: 24px 0 64px; }
.docs-hero { display: grid; grid-column: 1 / -1; gap: 22px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r-lg);
             background: radial-gradient(90% 150% at 100% 0, rgba(139, 92, 246, .28), transparent 62%), #09080d; color: rgba(248, 247, 251, .7); }
.docs-hero h1 { margin: 0 0 10px; color: #fff; font: 600 clamp(26px, 3vw, 34px)/1.1 var(--body); letter-spacing: -.03em; }
.docs-hero div > p:not(.eyebrow) { max-width: 640px; margin: 0; font-size: 14.5px; line-height: 1.55; }
.docs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.docs-facts li { padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.docs-facts .k { color: rgba(255, 255, 255, .45); }
.docs-facts b { display: block; margin-top: 7px; color: #fff; font: 600 13.5px/1.35 var(--body); }
.docs-nav { position: sticky; top: 76px; display: grid; gap: 20px; }
.docs-nav div { display: grid; gap: 1px; }
.docs-nav .k { margin-bottom: 7px; }
.docs-nav a { padding: 5px 0 5px 12px; border-left: 2px solid var(--line); color: var(--fog); font: 500 13.5px/1.35 var(--body); text-decoration: none;
              transition: color .15s, border-color .15s; }
.docs-nav a:hover { color: var(--strong); }
.docs-nav a[aria-current] { border-color: var(--strong); color: var(--strong); }
.docs-body { max-width: 740px; min-width: 0; counter-reset: doc; }
.doc { scroll-margin-top: 72px; }
.doc + .doc { margin-top: 52px; }
.doc h2 { margin: 0 0 14px; color: var(--strong); font: 600 24px/1.2 var(--body); letter-spacing: -.025em; }
.doc h2::before { content: counter(doc, decimal-leading-zero); display: block; margin-bottom: 10px; color: var(--accent-text);
                  font: 600 11px/1 var(--mono); letter-spacing: .08em; counter-increment: doc; }
.doc h3 { margin: 28px 0 8px; color: var(--strong); font: 600 15.5px/1.3 var(--body); letter-spacing: -.01em; }
.doc p { margin: 0 0 14px; color: var(--text); font-size: 15px; line-height: 1.7; }
.doc p:last-child { margin-bottom: 0; }
.doc p b, .doc li b { color: var(--strong); font-weight: 600; }
.doc p a { color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.doc p a:hover { text-decoration-color: var(--strong); }
.doc code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--strong); font: 500 12.5px/1 var(--mono); }
.doc ul { margin: 0 0 14px; padding-left: 20px; color: var(--text); font-size: 15px; line-height: 1.7; }
.doc ul li + li { margin-top: 6px; }
.doc ul a, .l-terms a:not(.button) { color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.doc .callout { margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--surface); font-size: 14.5px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 16px; }
.card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.card .k { margin-bottom: 9px; }
.card b { display: block; margin-bottom: 4px; color: var(--strong); font-size: 14.5px; font-weight: 600; }
.card p:not(.k) { margin: 0; font-size: 13.5px; line-height: 1.55; }
.steps { display: grid; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 18px 40px; color: var(--text); font-size: 14.5px; line-height: 1.6; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 4px; left: 0; color: var(--accent-text); font: 600 11px/1 var(--mono); letter-spacing: .06em; }
.steps li::after { content: ""; position: absolute; top: 22px; bottom: 6px; left: 8px; width: 1px; background: var(--line); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { content: none; }
.steps li b { display: block; margin-bottom: 1px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; color: var(--strong); font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--label); font: 400 22px/1 var(--display); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 14px; font-size: 14.5px; }
.doc-list { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.doc-list > * + * { border-top: 1px solid var(--line); }
.pal-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px;
           color: inherit; text-decoration: none; transition: background .15s; }
.pal-row:hover { background: var(--surface-2); }
.pal-row div { display: grid; gap: 2px; min-width: 0; }
.pal-row strong { font-size: 14px; }
.pal-row div span { color: var(--fog); font-size: 13px; }
.wallet-row { display: grid; grid-template-columns: 170px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; }
.wallet-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--strong); font-size: 14px; font-weight: 600; }
.wallet-row a { overflow: hidden; color: var(--strong); font: 500 12.5px/1.4 var(--mono); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.wallet-row a:hover { color: var(--accent-text); }

/* pal page: a full-screen trading terminal, where each panel scrolls on its own */
body.terminal { height: 100vh; height: 100dvh; overflow: hidden; }
main.term { display: grid; flex: 1 1 0; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.5fr) minmax(250px, 1fr);
            grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; width: min(1600px, calc(100% - 36px));
            min-height: 0; padding: 12px 0; }
.t-books { grid-column: 1 / -1; }
/* A pal that's being set up: its card, in the middle of the page, until it's listed */
.t-wait { display: flex; grid-column: 1 / -1; grid-row: 1 / -1; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.t-coming { align-items: center; gap: 18px; width: min(100%, 400px); padding: 30px 24px; }
.t-coming .t-who { flex-direction: column; gap: 12px; font-size: 18px; white-space: normal; }
.t-coming .avatar { width: 76px; height: 76px; border-radius: 20px; font-size: 22px; }
/* While live, the middle column is as wide as a 16:9 stream that still leaves room for the tables below (the side panels
   take the rest), and the stream sets the top row's height; the side panels (contained, so their own content can't make
   the row taller) stretch to it and scroll. */
@media (min-width: 1101px) and (min-height: 681px) {
  main.term:has(.t-live) { width: calc(100% - 36px); grid-template-rows: auto minmax(0, 1fr);
                           grid-template-columns: minmax(240px, 1fr) minmax(0, calc((100dvh - 400px) * 16 / 9 + 2px)) minmax(240px, 1fr); }
  main.term:has(.t-live) .t-side { contain: size; }
  .t-side .t-stats div { flex: 1 0 auto; max-height: 46px; }
  /* a streamer's page has one panel beside the stage, so it gets the room of two */
  main.term.streamer:has(.t-live) { grid-template-columns: minmax(300px, 1fr) minmax(0, calc((100dvh - 400px) * 16 / 9 + 2px)); }
  /* room to read: the stream a small player above the panel (as wide as it, without its chat), the book in the
     stage's place with the whole height */
  main.term.streamer.reading:has(.t-live) { grid-template-columns: minmax(300px, 1fr) minmax(0, 3fr); }
  main.term.reading .t-chart { grid-area: 1 / 1; }
  main.term.reading .t-side { grid-area: 2 / 1; }
  main.term.reading .t-books { grid-area: 1 / 2 / -1; }
  main.term.reading .t-live { --stream-w: 100%; }
  main.term.reading :is(.t-talk, .t-chart .t-head > .button, .t-ctl button[aria-pressed]) { display: none; }
  main.term.reading .t-live > .chart { padding-right: 4px; }
}
.t-book .t-head .seg { margin-left: auto; } /* stays right when the read button follows it */
.button.read { width: 30px; padding: 0; }
.button.read svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button.read[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
@media (max-width: 1100px), (max-height: 680px) { .button.read { display: none; } } /* stacked anyway */
.t-head .button { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.t-lead { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
          background: var(--surface); color: var(--text); font: 500 12px/1 var(--mono); white-space: nowrap; }
.t-lead.ai { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.t-lead.real { border-color: var(--line-strong); background: var(--surface-3); color: var(--strong); }
.t-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 14px;
           background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.t-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 6px 7px 6px 12px;
          border-bottom: 1px solid var(--line); }
.t-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--strong); font: 600 13.5px/1.2 var(--body); white-space: nowrap; }
.t-who strong { overflow: hidden; text-overflow: ellipsis; }
.t-wallets { position: relative; display: grid; flex: none; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.t-wallet { display: flex; align-items: center; gap: 6px; min-width: 0; height: 36px; padding: 0 4px 0 5px; border: 1px solid var(--line);
            border-radius: 10px; background: var(--surface-2); }
.chain { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 20px; border-radius: 5px;
         background: var(--surface-2); color: var(--text); font: 600 9.5px/1 var(--mono); letter-spacing: .06em; }
.t-wallet .chain { height: 24px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.t-addr { display: flex; flex: 1; min-width: 0; padding: 0 2px; color: var(--strong); font: 500 12px/1 var(--mono); text-decoration: none; white-space: nowrap; }
.t-addr span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-addr span:last-child { flex: none; }
.t-addr:hover { color: var(--accent-text); }
.t-wallet .copy { padding: 7px 8px; }
.t-more { position: absolute; right: 8px; bottom: calc(100% - 4px); left: 8px; z-index: 5; display: grid; gap: 6px; padding: 8px;
          border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 34px -14px rgba(18, 18, 22, .4);
          animation: t-in .15s ease-out; }
.t-more .k { padding: 2px 4px 2px; }
.t-more-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 8px;
                 border: 0; border-radius: 6px; background: var(--surface-2); color: var(--text); font: 600 10px/1 var(--mono); cursor: pointer; }
.t-more-toggle::after { content: ""; width: 4px; height: 4px; margin-top: -2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
                        transform: rotate(45deg); transition: transform .15s; }
.t-more-toggle[aria-expanded="true"]::after { margin-top: 2px; transform: rotate(-135deg); }
.t-more-toggle:hover { background: var(--surface-3); color: var(--strong); }
.t-big { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.t-big > div { display: grid; gap: 6px; min-width: 0; padding: 12px; }
.t-big > div + div { border-left: 1px solid var(--line); }
.t-big .k { display: flex; align-items: center; gap: 6px; }
.t-big b { overflow: hidden; color: var(--strong); font: 400 30px/1 var(--display); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
/* the chamber: Toly's valence, from agony to euphoria */
.t-meter { position: relative; flex: none; height: 8px; margin: 16px 14px 0; border-radius: 4px;
           background: linear-gradient(90deg, var(--neg), var(--surface-3) 50%, var(--pos)); }
.t-meter i { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--strong);
             box-shadow: 0 0 0 2px var(--surface); transition: left .8s ease; }
.t-meter-ends { display: flex; flex: none; justify-content: space-between; padding: 8px 12px 6px; border-bottom: 1px solid var(--line); }
.t-big b.neg, .t-big b.pos { text-transform: capitalize; }
.t-stats { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; padding: 4px 12px; overflow: auto; }
.t-stats div { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; }
.t-stats div + div { border-top: 1px solid var(--line); }
.t-stats dt { flex: none; color: var(--fog); font-size: 12.5px; line-height: 1.5; }
.t-stats dd { min-width: 0; margin: 0; overflow: hidden; color: var(--strong); font: 500 12px/1.6 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.t-chart .chart { flex: 1; min-height: 0; margin: 8px 4px 6px 12px; }
/* live: the stream exactly 16:9 so it never gets black bars, with the chat as frosted glass over its right edge. That's
   where the stream's own panel is (wallet, decisions and this chat, 500 of its 1920px), so the chat never covers the face. */
.t-live { --stream-w: min(100%, calc((100dvh - 400px) * 16 / 9)); --chat-w: max(240px, calc(var(--stream-w) * .2604));
          position: relative; display: flex; flex: 1; justify-content: center; min-height: 0; overflow: hidden; border-radius: 0 0 13px 13px; }
.t-stream, .t-live > :is(.chart, .t-frame, .t-trading, .t-coinview, .t-posts) { flex: none; width: var(--stream-w); min-width: 0; aspect-ratio: 16 / 9; }
/* a streamer's posts on X: who it posts as, then the newest first, scrolling */
.t-posts { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; overflow: auto; }
.t-posts-who { display: inline-flex; flex: none; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.t-posts-who img { width: 28px; height: 28px; border-radius: 50%; }
.t-posts-who span { color: var(--fog); font-size: 12.5px; }
.t-posts-list { display: grid; align-content: start; gap: 8px; }
.t-post { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.t-post-top { display: flex; align-items: center; gap: 8px; color: var(--fog); font-size: 12px; }
.t-post-kind { padding: 2px 7px; border-radius: 999px; background: var(--surface-2); }
.t-post p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-post-x { justify-self: start; font-size: 12.5px; }
.t-stream { position: relative; background: #000; }
.t-live > .chart { margin: 0; padding: 8px 4px 6px 12px; }
/* a streamer's coin on DexScreener (just the chart), and its trading: its return curve, or a word until it trades */
.t-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.t-trading { display: flex; flex-direction: column; padding: 10px 4px 6px 12px; }
.t-trading .legend { flex: none; padding: 0 8px 6px 0; }
.t-trading .chart { flex: 1; min-height: 0; }
.t-trading > .t-empty { flex: 1; }
/* a protocol pal's coin, its own tab in the stage: four numbers, its chart, and its links and addresses */
.t-coinview { display: flex; flex-direction: column; min-height: 0; }
.t-chart > .t-coinview { flex: 1; }
.t-coinview > .t-big { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-coinview > :is(.t-empty, .t-frame) { flex: 1; min-height: 0; }
/* a streamer's panel: its name and ticker (History in the head turns the whole panel into the ledger), its coin and
   its balance in two big blocks, the rows under them (the one part that scrolls), its skills as tags (hover one to
   read what it is), and at the bottom its links and addresses, two buttons side by side */
.t-ticker { flex: none; color: var(--fog); font: 500 12px/1 var(--mono); }
.t-now > div { gap: 5px; padding: 10px 12px; }
.t-now b { font-size: 26px; }
.t-now .sub { margin-top: -1px; color: var(--fog); font: 500 11.5px/1 var(--mono); }
.t-big b.long { font-size: 24px; } /* "−4.93 SOL", "+$105K": a long amount at the smaller size, so it isn't cut off */
.t-now b.long { font-size: 21px; }
.t-now > div.wide { grid-column: 1 / -1; } /* the one cell of a pal HIM keeps on air */
.t-side.ai .t-stats dt { display: inline-flex; align-items: center; gap: 6px; }
.t-side.ai .t-stats .info { width: 15px; height: 15px; font-size: 9px; }
.t-stats .pop { position: fixed; } /* placed by tip() when it shows; as an absolute box it would scroll the list sideways */
.t-skills { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 6px 12px;
            border-top: 1px solid var(--line); }
.t-skills > span { flex: none; color: var(--fog); font-size: 12.5px; }
.t-skills .tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.skill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--accent-soft);
         color: var(--accent-text); font: 600 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; cursor: help; }
.tip:hover .skill, .skill:focus-visible { box-shadow: 0 0 0 1px var(--accent); }
/* the footer: Links and Addresses, two buttons side by side; either one's menu pops up over the panel, as wide as the
   footer, with every row in full (an address wraps onto two lines) */
.t-foot { position: relative; display: grid; flex: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px 12px;
          border-top: 1px solid var(--line); border-radius: 0 0 13px 13px; background: var(--surface-2); }
.t-drop { display: flex; min-width: 0; }
.t-drop .t-more { right: 12px; bottom: calc(100% - 4px); left: 12px; gap: 2px; padding: 6px; }
.t-drop-toggle { flex: 1; justify-content: space-between; gap: 6px; min-width: 0; min-height: 32px; padding: 0 10px 0 12px; font-size: 12.5px; }
.t-drop-toggle .n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px;
                    border-radius: 999px; background: var(--surface-2); color: var(--text); font: 600 10px/1 var(--mono); }
.t-drop-toggle::after { content: ""; flex: none; width: 4px; height: 4px; margin-top: -2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
                        transform: rotate(45deg); transition: transform .15s; }
.t-drop-toggle[aria-expanded="true"]::after { margin-top: 2px; transform: rotate(-135deg); }
.t-addr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; border-radius: 8px; }
.t-addr-row + .t-addr-row { margin-top: 2px; }
.t-addr-row .chain { width: auto; height: 22px; padding: 0 7px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); text-transform: uppercase; }
.t-addr-row .t-addr { display: block; padding: 0; font: 500 11.5px/1.5 var(--mono); white-space: normal; overflow-wrap: anywhere; }
.t-addr-row .copy { padding: 7px 8px; }
/* a link row: its name, and its address in full (under the name when it's long) */
.t-link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; padding: 8px 10px; border-radius: 8px;
          color: var(--strong); font: 600 13px/1.2 var(--body); text-decoration: none; }
.t-link .k { min-width: 0; text-transform: none; letter-spacing: 0; font: 500 11.5px/1.4 var(--mono); overflow-wrap: anywhere; }
.t-link:hover { background: var(--surface-2); }
.t-live:has(> .t-talk:not([hidden])) > .chart { padding-right: calc(var(--chat-w) + 12px); }
.t-live:has(> .t-talk:not([hidden])) > .t-coinview { padding-right: var(--chat-w); }
.t-stream :is(video, iframe) { display: block; width: 100%; height: 100%; border: 0; }
/* the player's own word while the stream connects, buffers or is offline, centred on what the chat leaves showing */
.t-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px;
           color: rgba(255, 255, 255, .8); font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-align: center; pointer-events: none; }
.t-state::before { content: ""; width: 28px; height: 28px; border: 2px solid rgba(255, 255, 255, .18); border-top-color: #fff; border-radius: 50%;
                   animation: spin .8s linear infinite; }
.t-state.off::before { display: none; }
.t-live:has(> .t-talk:not([hidden])) .t-state { right: var(--chat-w); }
@keyframes spin { to { transform: rotate(360deg); } }
/* sound and full screen, bottom left (the chat covers the right), showing on hover except Unmute, which always shows */
.t-ctl { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; }
.t-ctl button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 34px; height: 34px; padding: 0 9px;
                border: 0; border-radius: 9px; background: rgba(12, 12, 16, .62); color: #fff; font: 600 12.5px/1 var(--body); cursor: pointer;
                -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s, background .15s; }
.t-ctl button:hover { background: rgba(12, 12, 16, .82); }
.t-ctl button.muted { padding-right: 12px; background: #efe9ff; color: #09070d; }
.t-ctl button.muted:hover { background: #d5c6ff; }
.t-stream:hover .t-ctl button, .t-ctl button:focus-visible, .t-ctl button.muted { opacity: 1; }
/* phones and tablets set the volume with their own buttons (iOS doesn't let a page change it) */
.t-vol { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 9px; background: rgba(12, 12, 16, .62);
         -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s; }
.t-vol input { width: 80px; margin: 0; accent-color: #fff; cursor: pointer; }
.t-stream:hover .t-vol, .t-vol:focus-within { opacity: 1; }
@media (hover: none) { .t-vol { display: none; } }
.t-state.off:not([hidden]) + .t-ctl { display: none; }
.t-ctl svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .t-ctl button { opacity: 1; } }
.t-chart .t-head .badge.live { margin-right: auto; }
.t-coin { max-width: 300px; }
.t-coin > a:first-child { flex: none; color: inherit; text-decoration: none; }
.t-coin > a:first-child:hover { color: var(--strong); }
.t-talk { position: absolute; top: 0; right: calc((100% - var(--stream-w)) / 2); bottom: 0; display: flex; flex-direction: column;
          width: var(--chat-w); border-left: 1px solid rgba(255, 255, 255, .08); background: rgba(12, 12, 16, .5); color: #f4f4f5;
          -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.t-live:has(> .t-stream[hidden]) > .t-talk { background: #09080d; }
/* full screen takes the chat along: the stream as big as the screen allows, the chat over its right edge as usual
   (on phones too, where the chat otherwise sits under the stream) */
.t-live:fullscreen { --stream-w: min(100vw, calc(100dvh * 16 / 9)); flex-direction: row; align-items: center; border-radius: 0; background: #000; }
.t-live:fullscreen > .t-talk { position: absolute; top: calc((100dvh - var(--stream-w) * 9 / 16) / 2); bottom: calc((100dvh - var(--stream-w) * 9 / 16) / 2);
                               width: var(--chat-w); height: auto; border-left: 1px solid rgba(255, 255, 255, .08);
                               background: rgba(12, 12, 16, .5); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.t-talk-head { display: flex; flex: none; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px;
               border-bottom: 1px solid rgba(255, 255, 255, .08); }
.t-talk-head b { flex: none; color: #fff; font: 600 13.5px/1.2 var(--body); }
.t-talk-head span { overflow: hidden; color: rgba(255, 255, 255, .5); font: 500 10.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase;
                    white-space: nowrap; text-overflow: ellipsis; }
.t-feed { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.t-msgs { display: flex; flex: 1; flex-direction: column; gap: 2px; min-height: 0; padding: 8px 6px; overflow-y: auto;
          -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.t-msgs::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .2); }
.t-msgs::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .35); }
.t-msgs > :first-child { margin-top: auto; }
.t-msg { margin: 0; padding: 5px 8px; border-radius: 8px; color: rgba(255, 255, 255, .92); font-size: 13.5px; line-height: 1.45;
         overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); animation: t-in .25s ease-out; }
.t-msg:hover { background: rgba(255, 255, 255, .06); }
.t-msg.mine { background: rgba(139, 92, 246, .24); }
.t-msg b { margin-right: 6px; font-weight: 600; }
.t-msgs .t-hint { margin: auto 0; padding: 24px 16px; color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.5; text-align: center; }
@keyframes t-in { from { opacity: 0; transform: translateY(6px); } }
.t-jump { position: absolute; bottom: 10px; left: 50%; padding: 7px 12px; border: 0; border-radius: 999px; background: #fff; color: #121216;
          font: 600 12px/1 var(--body); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transform: translateX(-50%); cursor: pointer; }
.t-say { display: grid; flex: none; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .08);
         background: rgba(0, 0, 0, .25); }
.t-row { display: flex; gap: 6px; }
.t-as { overflow: hidden; color: rgba(255, 255, 255, .55); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.t-as b { color: #fff; font-weight: 600; }
.t-change { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .55); font: inherit; text-decoration: underline; cursor: pointer; }
.t-change:hover { color: #fff; }
.t-say input { flex: 1; width: 100%; min-width: 0; height: 34px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px;
               background: rgba(255, 255, 255, .08); color: #fff; font: 13px/1 var(--body); }
.t-say input::placeholder { color: rgba(255, 255, 255, .45); }
.t-say input:focus { border-color: rgba(255, 255, 255, .4); outline: none; }
.t-say .button { min-width: 64px; min-height: 34px; padding: 0 14px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.t-say .button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.t-say .button.primary:hover { filter: brightness(1.08); }
.t-say .button:disabled { opacity: .55; filter: none; cursor: default; }
.t-note { color: #fb7185; font-size: 12px; }
.t-note:empty { display: none; }
.t-empty { display: grid; place-items: center; height: 100%; min-height: 120px; padding: 20px; color: var(--fog); font-size: 13.5px; text-align: center; }
.t-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; }
main.term.streamer .t-books { grid-template-columns: minmax(0, 1fr); } /* a streamer has one book, its own trading */
.t-book .t-head, .t-chart .t-head { flex-wrap: wrap; row-gap: 6px; }
.t-body { flex: 1; min-height: 0; overflow: auto; }
:is(.t-body, .t-stats)::-webkit-scrollbar-thumb { background-color: var(--surface-3); }
/* hover or focus the "i" to read more */
.tip { position: relative; display: inline-flex; }
.info { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
        background: var(--surface); color: var(--fog); font: 600 10px/1 var(--mono); text-transform: none; cursor: help; }
.tip:hover .info, .info:focus-visible { border-color: var(--strong); color: var(--strong); }
.onx { cursor: pointer; text-decoration: none; }
.onx svg { width: 9px; height: 9px; }
.onx:hover { border-color: var(--strong); color: var(--strong); }
.pop { position: absolute; top: calc(100% + 8px); left: -10px; z-index: 60; width: max-content; max-width: min(360px, 80vw); padding: 12px 14px;
       border-radius: 12px; background: var(--strong); color: rgba(255, 255, 255, .86); font: 400 13px/1.5 var(--body); letter-spacing: 0;
       text-transform: none; white-space: pre-line; box-shadow: 0 12px 32px -12px rgba(18, 18, 22, .5); opacity: 0; visibility: hidden; transform: translateY(-4px);
       transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.pop.end { right: -10px; left: auto; }
.tip:hover .pop, .tip:focus-within .pop { opacity: 1; visibility: visible; transform: none; }

table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
:is(th, td):first-child { padding-left: 12px; }
:is(th, td):last-child { padding-right: 12px; }
tr:last-child > * { border-bottom: 0; }
.t-body tbody:not(:last-child) > tr:last-child > * { border-bottom: 1px solid var(--line); }
.t-body tbody:hover > tr > td { background: var(--surface-2); }
th { position: sticky; top: 0; z-index: 1; border-bottom: 0; background: var(--surface-2); box-shadow: inset 0 -1px var(--line); color: var(--label);
     font: 500 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
td { color: var(--text); line-height: 1.5; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num, td.t { color: var(--strong); font: 500 12px/1.6 var(--mono); }
td.t, td.num.dim { color: var(--fog); }
td.t a { color: inherit; text-decoration: none; }
td.t a:hover { color: var(--strong); }
td a.tx { color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
td a.tx:hover { color: var(--accent-text); text-decoration-color: currentColor; }
/* the AI's own words on a position, tucked under its row and lined up with the coin's name */
tr.noted > td { border-bottom: 0; }
td.notes { padding: 0 12px 12px 40px; white-space: normal; }
.t-notes { display: grid; gap: 8px; max-width: 920px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.t-notes .note { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.t-notes .k { color: var(--label); font: 500 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.t-notes .note.lesson .k { color: var(--accent-text); }
.t-notes .text { color: var(--text); font: 400 13px/1.55 var(--body); }
/* the AI's decisions: a card per market check, trades bright and the many no-trade checks quiet */
.t-body:has(> .t-cards) { border-radius: 0 0 13px 13px; background: var(--surface-2); }
.t-cards { display: grid; gap: 8px; padding: 10px 12px 12px; }
.t-card { min-width: 0; padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
          box-shadow: 0 1px 2px rgba(18, 18, 22, .03); }
.t-card.flat { background: transparent; box-shadow: none; cursor: pointer; }
.t-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 22px; }
.t-card-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.t-card-what b { color: var(--strong); font: 600 13.5px/1.2 var(--body); }
.t-card .amt { color: var(--fog); font: 500 12px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.t-card .tx { color: var(--fog); font: 500 12px/1.2 var(--mono); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.t-card .tx:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.t-card-meta { display: flex; flex: none; align-items: center; gap: 8px; color: var(--label); font: 500 11.5px/1 var(--mono); white-space: nowrap; }
.t-trigger { padding: 4px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); }
.act { display: inline-flex; flex: none; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--surface-2);
       color: var(--fog); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.act.buy { background: rgba(11, 154, 106, .1); color: var(--pos); }
.act.sell { background: rgba(214, 58, 82, .1); color: var(--neg); }
.t-card-text { max-width: 920px; margin: 7px 0 0; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.t-card-text + .t-card-head { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.t-card.flat .t-card-text { display: -webkit-box; overflow: hidden; color: var(--fog); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.t-card.flat.open .t-card-text { display: block; }
/* lightweight-charts lays itself out with a table, which mustn't pick up the site's table styles */
.tv-lightweight-charts td { padding: 0; border: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
.legend .item { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font: 500 13px/1.2 var(--body); white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend b { color: var(--strong); font: 600 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--fog);
              font: 500 12.5px/1 var(--body); white-space: nowrap; cursor: pointer; transition: color .15s, background .15s; }
.seg button:hover { color: var(--strong); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--strong); box-shadow: 0 1px 8px rgba(0, 0, 0, .35), 0 0 0 1px var(--line); }
td.coin a { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); font-weight: 600; text-decoration: none; }
td.coin a:hover { color: var(--accent-text); }
td.coin .sym { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.logo { position: relative; display: grid; flex: none; place-items: center; width: 20px; height: 20px; overflow: hidden; border-radius: 50%;
        background: var(--surface-2); color: var(--fog); font: 600 9px/1 var(--mono); }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
td.side { font: 600 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
td.side.buy { color: var(--pos); }
td.side.sell { color: var(--neg); }
.button.more { display: flex; min-height: 34px; margin: 10px auto 12px; font-size: 12.5px; }

/* loading: until its data is in, a page shows its shape as grey bars with a sheen passing over them, and then the
   content rises into place. A panel fetching again keeps what it has, dimmed (only if it takes a moment), until the
   new data replaces it. */
.sk { display: block; border-radius: 6px; color: transparent;
      background: linear-gradient(105deg, transparent 30%, rgba(203, 184, 255, .12) 48%, transparent 66%) var(--surface-2);
      background-size: 240% 100%; animation: sk 1.45s linear infinite; }
.hero .sk { background-color: rgba(255, 255, 255, .07); background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .08) 48%, transparent 66%); }
@keyframes sk { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.enter { animation: t-in .26s cubic-bezier(.22, .61, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.t-body > * { transition: opacity .14s ease; }
.t-body[aria-busy="true"] > * { opacity: .45; pointer-events: none; transition: opacity .18s ease .08s; }
.hero-stats .sk { width: 64px; height: 10px; }
.hero-stats dd.sk { width: 52px; height: 15px; }
.hero-chamber .screen.sk { border-radius: 0; }
.hc-bar .sk { width: 120px; height: 10px; }
.hc-bar .sk + .sk { width: 56px; margin-left: auto; }
.chamber-now .sk { height: 10px; margin: 6px 0; }
.chamber-now .sk:nth-child(2) { width: 120px; height: 30px; }
.lc-media.sk { border-radius: 0; }
.lc-body > .sk { width: 140px; height: 14px; margin: 2px 0 6px; }
.lc-body > .sk + .sk { width: 60px; height: 10px; }
.lc-stats .sk { width: 80px; height: 20px; }
.lcard .foot .sk { width: 120px; height: 10px; }
.ticker .sk { flex: none; width: 190px; height: 12px; margin: 12px 22px; }
.t-who .sk:not(.avatar) { width: 120px; height: 12px; }
.t-head > .sk { width: 150px; height: 30px; border-radius: 999px; }
.t-big .sk { width: 52px; height: 10px; }
.t-big .sk + .sk { width: 104px; height: 30px; }
.t-stats .sk { height: 10px; }
.t-stats dt.sk { width: 76px; }
.t-stats dd.sk { width: 56px; }
.t-wallet.sk { border-color: transparent; }
.t-skills > .sk { width: 40px; height: 10px; }
.t-skills .tags .sk { width: 76px; height: 24px; border-radius: 999px; }
.t-head > .sk.btn { width: 68px; }
.t-foot > .sk { height: 32px; border-radius: 999px; }
.t-sk { display: grid; padding: 4px 12px; }
.t-sk .sk { height: 12px; margin: 13px 0; }
.t-sk .sk:nth-child(odd) { width: 86%; }
.t-sk .sk:nth-child(3n) { width: 62%; }


/* too small to fit the terminal on one screen: stack the panels and let the page scroll */
@media (max-width: 1100px), (max-height: 680px) {
  body.terminal { height: auto; overflow: visible; }
  main.term { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  main.term.streamer { grid-template-columns: minmax(0, 1fr); }
  .t-chart { grid-column: 1 / -1; order: 1; height: 360px; }
  .t-chart:has(.t-live) { order: -1; height: auto; }
  .t-live { --stream-w: min(100%, calc((100dvh - 140px) * 16 / 9)); }
  .t-books { order: 2; }
  .t-book { height: 520px; }
}
@media (max-width: 960px) {
  .hero-chamber { width: 340px; }
  .chamber-head { grid-template-columns: minmax(0, 1fr); }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop li:nth-child(2)::after { content: none; }
  main.docs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .docs-nav div { display: contents; }
  .docs-nav .k { display: none; }
  .docs-nav a { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
  .docs-nav a[aria-current] { border-color: var(--strong); }
}
@media (max-width: 760px) {
  header.site .bar { gap: 14px; }
  .site-nav svg { display: none; }
  .site-nav a { padding: 0 10px; }
  main { padding: 28px 0 64px; }
  .sec { margin-top: 28px; }
  main.docs { padding-top: 16px; }
  .docs-hero { padding: 22px 20px; }
  .wallet-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wallet-row .who { grid-column: 1 / -1; }
  main.term { grid-template-columns: minmax(0, 1fr); width: calc(100% - 24px); }
  .t-books { grid-template-columns: minmax(0, 1fr); }
  .t-chart { height: auto; }
  .t-chart .t-head > .seg { order: -1; }
  .t-chart .chart { flex: none; height: 220px; }
  .t-live { --stream-w: 100%; flex-direction: column; }
  .t-live:has(> .t-talk:not([hidden])) > .chart { padding-right: 4px; }
  .t-live > .t-coinview { aspect-ratio: auto; }
  .t-live:has(> .t-talk:not([hidden])) > .t-coinview { padding-right: 0; }
  .t-coinview > .t-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-coinview > .t-big > div:nth-child(3) { border-left: 0; }
  .t-coinview > .t-big > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .t-coinview > :is(.t-empty, .t-frame) { flex: none; height: 320px; }
  .t-talk { position: static; width: auto; height: 320px; border-left: 0; background: #09080d; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .t-say input { font-size: 16px; }
  .t-ctl { bottom: 8px; left: 8px; }
  .t-ctl button, .t-vol { min-width: 30px; height: 30px; font-size: 12px; }
  .t-book { height: 460px; }
  td.notes { padding-left: 12px; }
  .t-notes .note { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  main.home { padding-top: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .hero-chamber { width: 100%; }
  .chamber { padding: 14px; }
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop li::after { content: none !important; }
  .hero-stats { gap: 14px 28px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .how { padding: 14px; }
  .how-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  header.site .bar { gap: 12px; width: calc(100% - 24px); }
  footer.site-foot .bar { width: calc(100% - 24px); }
  .actions > .free-pill, .actions > .icon-link, .site-nav { display: none; }
  .burger { display: inline-flex; }
  .menu { display: grid; }
  /* tooltips open as a sheet at the bottom instead of hanging off the side of the screen */
  .pop, .pop.end { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-width: none; }
  .t-big b { font-size: 26px; }
  th, td { padding: 8px 6px; font-size: 12px; }
  .pals { grid-template-columns: minmax(0, 1fr); }
  .t-coin { order: 1; flex: 1 1 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* the launch page: the home page's dark hero card, a slim one; then the steps, and beside them the pal as it stands */
.launch { padding: 24px 0 64px; }
.l-hero { gap: 14px 32px; padding: 18px 24px; }
.l-hero .eyebrow { margin-bottom: 6px; }
.l-hero h1 { margin: 0 0 4px; font-size: clamp(20px, 2.2vw, 24px); }
.l-hero .hero-text > p:not(.eyebrow) { max-width: 640px; font-size: 13.5px; line-height: 1.5; }
/* slots open, in the hero: a dot that's green while there are some and red when there aren't */
.l-slots { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 38px; border: 1px solid rgba(255, 255, 255, .18);
           border-radius: 8px; color: rgba(255, 255, 255, .85); font: 500 12px/1 var(--mono); }
.l-slots i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 3px rgba(61, 220, 151, .2); }
.l-slots.full i { background: #ff6b7f; box-shadow: 0 0 0 3px rgba(255, 107, 127, .2); }
.l-slots b { font-weight: 500; }
.l-full { color: var(--neg); }
/* free launches: the count in the hero (an orange dot while there are some), the offer in the Pay step, its clock */
.l-slots.free i { background: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .28); }
.l-slots.free.full i { background: rgba(255, 255, 255, .35); box-shadow: none; }
a.l-slots { text-decoration: none; }
.l-free { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border: 1px solid rgba(139, 92, 246, .42);
          border-radius: var(--r-lg); background: var(--accent-soft); }
.l-free div { display: grid; flex: 1; gap: 3px; min-width: 220px; }
.l-free b { color: var(--strong); font-size: 14px; }
.l-free span { color: var(--text); font-size: 12.5px; line-height: 1.45; }
.l-free .button { flex: none; margin-left: auto; }
.l-free-clock { margin: 0; color: var(--accent-text); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
/* the receipt once paid */
.l-receipt { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.l-receipt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.l-receipt-head b { color: var(--strong); font-size: 14px; }
.l-receipt-head .button { margin-left: auto; }
.l-tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
          background: rgba(11, 154, 106, .12); color: var(--pos); font: 700 12px/1 var(--body); }
.l-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; margin: 0; }
.l-facts dt { color: var(--label); font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.l-facts dd { margin: 3px 0 0; color: var(--strong); font: 600 15px/1.3 var(--body); }
.l-receipt > .l-text { margin: 0; }
.button.small { min-height: 30px; padding: 0 11px; font-size: 12px; }
/* the budget as a balance in the side */
.l-balance { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); }
.l-balance b { color: var(--strong); font: 600 26px/1.1 var(--body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.l-balance small { color: var(--fog); font-size: 12px; }
.l-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.l-steps { display: grid; gap: 12px; min-width: 0; }
.l-step { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.l-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.l-n { color: var(--label); font: 500 11px/1 var(--mono); }
.l-head h2 { margin: 0; color: var(--strong); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.l-tag { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text);
         font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.l-body { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 16px 18px 18px; border: 0; }
/* Over a step looked at before paying. */
.l-preview-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 18px 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); }
.l-preview-note div { display: grid; flex: 1; gap: 2px; min-width: 200px; }
.l-preview-note b { color: var(--strong); font-size: 14px; }
.l-preview-note span { color: var(--text); font-size: 12.5px; line-height: 1.4; }
.l-preview-note .button { flex: none; margin-left: auto; }
/* A step looked at but not changeable: its controls fade (the words stay readable), but not the ones that only change
   what's shown (data-view). */
.l-body.locked :is(button, input, textarea, select):disabled:not([data-view] *, [data-view]) { opacity: .45; cursor: default; }
.l-body.locked :is(.l-drop, .l-voice) { cursor: default; }
.l-body.locked .l-drop { opacity: .55; pointer-events: none; }
.l-pane { display: grid; gap: 14px; min-width: 0; }
.l-text { margin: 0; font-size: 14px; }
.l-mono { color: var(--strong); font: 500 12.5px/1.4 var(--mono); }
.l-label { color: var(--label); font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.l-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.l-row .dim { font-size: 12.5px; }
.l-field { display: grid; gap: 6px; }
.l-field > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--strong); font: 600 13px/1.2 var(--body); }
.l-field > span small { color: var(--label); font-weight: 400; }
.l-input { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg);
           color: var(--strong); font: 400 14px/1.45 var(--body); }
.l-input:focus { border-color: var(--strong); outline: none; }
textarea.l-input { resize: vertical; }
/* a dropdown, the same everywhere: the box of an input with a chevron at its right (the chip-sized one is with the chips) */
select.l-input { padding-right: 32px; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; font: 500 13.5px/1.3 var(--body);
                 background-image: var(--chevron); background-repeat: no-repeat; background-position: right 11px center; background-size: 12px; }
select.l-input:hover { border-color: var(--line-strong); }
select.l-input:disabled { cursor: default; opacity: .55; }
.l-two { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; }
.l-group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; align-items: start; }
.l-group > span { padding-top: 8px; color: var(--label); font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.l-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.l-chip { min-height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text);
          font: 500 12.5px/1 var(--body); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.l-chip:hover { border-color: var(--line-strong); color: var(--strong); }
.l-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.l-tabs { display: inline-flex; gap: 3px; justify-self: start; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.l-tabs button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--fog); font: 600 12.5px/1 var(--body); cursor: pointer; }
.l-tabs button[aria-selected="true"] { background: var(--surface); color: var(--strong); box-shadow: var(--shadow); }
.l-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.l-pics:empty { display: none; }
.l-pic { position: relative; aspect-ratio: 3 / 2; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.l-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-pic:hover { border-color: var(--line-strong); }
.l-pic[aria-pressed="true"] { border-color: var(--accent); }
.l-pic span { position: absolute; bottom: 6px; left: 6px; max-width: calc(100% - 12px); overflow: hidden; padding: 3px 7px; border-radius: 6px;
              background: rgba(18, 18, 22, .72); color: #fff; font: 500 11px/1.2 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.l-faces { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: max-content; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.l-faces .l-pic { aspect-ratio: 1; }
/* Drawing its face: ideas, the builder's sections (what's picked in each, said on its line), what gets drawn, and the
   portraits, with their choices on them and a shimmer where a set is on its way */
.l-lookform { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.l-lookform:disabled { opacity: .5; pointer-events: none; }
.l-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.l-idea { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
          background: var(--surface); color: var(--strong); font: 500 12.5px/1 var(--body); cursor: pointer; transition: border-color .15s, background .15s; }
.l-idea:hover { border-color: var(--strong); }
.l-idea.dice { border-color: rgba(139, 92, 246, .48); background: var(--accent-soft); color: var(--accent-text); }
.l-idea.dice:hover { border-color: var(--accent); }
.l-idea.clear { border-color: transparent; background: none; color: var(--fog); }
.l-idea.clear:hover { color: var(--strong); }
.l-sections { display: grid; gap: 8px; }
.l-section { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.l-section > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; list-style: none; cursor: pointer; }
.l-section > summary::-webkit-details-marker { display: none; }
.l-section > summary b { flex: none; color: var(--strong); font: 600 13.5px/1.2 var(--body); }
.l-section > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin: -3px 2px 0 auto; border: solid var(--fog); border-width: 0 1.5px 1.5px 0;
                              transform: rotate(45deg); transition: transform .15s; }
.l-section[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.l-section-picked { min-width: 0; overflow: hidden; color: var(--fog); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.l-section-body { display: grid; gap: 12px; padding: 2px 14px 14px; }
.l-section-body .l-drop { max-width: 420px; }
.l-look { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.l-look p { margin: 0; color: var(--strong); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.l-look p.dim { color: var(--fog); }
.l-look small { justify-self: end; font: 500 11px/1 var(--mono); }
.l-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.l-shots:empty { display: none; }
.l-shot { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; background: var(--surface-2); }
.l-shot::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 12px; pointer-events: none; }
.l-shot.picked::after { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(139, 92, 246, .38); }
.l-shot-pick { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.l-shot-pick img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.l-shot:hover .l-shot-pick img { transform: scale(1.03); }
.l-shot-badge { position: absolute; top: 8px; left: 8px; padding: 5px 8px; border-radius: 6px; background: var(--accent); color: #fff; font: 600 11px/1 var(--body); pointer-events: none; }
.l-shot-acts { position: absolute; right: 8px; bottom: 8px; left: 8px; display: flex; justify-content: flex-end; gap: 6px; opacity: 0; transform: translateY(4px);
               transition: opacity .15s, transform .15s; }
.l-shot:hover .l-shot-acts, .l-shot:focus-within .l-shot-acts { opacity: 1; transform: none; }
.l-shot-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
              background: rgba(18, 18, 22, .72); color: #fff; font: 500 12px/1 var(--body); backdrop-filter: blur(6px); cursor: pointer; }
.l-shot-act:hover:not(:disabled) { background: rgba(18, 18, 22, .92); }
.l-shot-act.del:hover:not(:disabled) { border-color: var(--neg); background: var(--neg); }
.l-shot-act:disabled { opacity: .45; cursor: default; }
.l-shot.wait { display: grid; place-items: center; background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 250% 100%;
               animation: sk 1.4s linear infinite; }
.l-shot.wait span { color: var(--fog); font: 500 12px/1 var(--mono); }
.l-dialog.l-viewer { width: min(980px, calc(100% - 32px)); max-height: 94dvh; }
.l-viewer-body { display: grid; gap: 12px; padding: 0 20px 20px; }
.l-viewer-body img { display: block; width: 100%; max-height: 66dvh; object-fit: contain; border-radius: 10px; background: var(--surface-2); }
@media (hover: none) { .l-shot-acts { opacity: 1; transform: none; } }
.l-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.l-voice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line-strong);
           border-radius: 9px; background: var(--surface); cursor: pointer; }
.l-voice:hover { border-color: var(--line-strong); }
.l-voice[aria-pressed="true"] { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); }
.l-voice b { color: var(--strong); font: 600 13px/1.2 var(--body); text-transform: capitalize; }
.l-voice small { overflow: hidden; color: var(--label); font: 400 11px/1.3 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.l-play { display: grid; grid-row: span 2; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
          background: var(--surface-2); color: var(--strong); cursor: pointer; }
.l-play:hover { background: var(--surface-3); }
.l-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.l-options.stack { grid-template-columns: 1fr; }
.l-option { display: grid; gap: 4px; justify-items: start; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
            background: var(--surface); text-align: left; cursor: pointer; }
.l-option:hover { border-color: var(--line-strong); }
.l-option[aria-pressed="true"] { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); }
.l-option b { color: var(--strong); font: 600 13.5px/1.2 var(--body); }
.l-option span { color: var(--fog); font: 400 12px/1.3 var(--body); }
.l-option em { margin-top: 2px; color: var(--pos); font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.l-option em.extra { color: var(--accent-text); }
.l-switch { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 0; border: 0; background: none; color: var(--strong);
            font: 600 13.5px/1.2 var(--body); cursor: pointer; }
.l-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong);
           transition: background .15s; }
.l-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
                  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.l-switch[aria-pressed="true"] .l-track { background: var(--accent); box-shadow: none; }
.l-switch[aria-pressed="true"] .l-track::after { transform: translateX(14px); }
.l-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; }
.l-makers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; border-right: 1px solid var(--line); }
.l-makers button { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; border: 0;
                   border-bottom: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 12.5px/1 var(--body); cursor: pointer; }
.l-makers button:nth-child(odd) { border-right: 1px solid var(--line); }
.l-makers button small { color: var(--label); font: 500 10px/1 var(--mono); }
.l-makers button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.l-makers button[aria-pressed="true"] small { color: rgba(255, 255, 255, .6); }
.l-models { display: grid; align-content: start; }
.l-model { display: grid; gap: 3px; justify-items: start; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
           background: var(--surface); color: var(--strong); font: 500 13px/1.2 var(--body); text-align: left; cursor: pointer; }
.l-model small { color: var(--label); font: 400 10.5px/1.2 var(--mono); }
.l-model:hover { background: var(--bg); }
.l-model[aria-pressed="true"] { border-left-color: var(--accent); background: var(--bg); }
.l-range { display: grid; gap: 6px; padding-top: 4px; }
.l-range input { width: 100%; accent-color: var(--accent); }
.l-check { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.l-check li { display: flex; align-items: center; gap: 8px; color: var(--fog); font-size: 13.5px; }
.l-check li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.l-check li.ok { color: var(--strong); }
.l-check li.ok::before { border-color: var(--pos); background: var(--pos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / 10px no-repeat; }
.l-error { margin: 0; padding: 9px 12px; border-left: 2px solid var(--neg); border-radius: 0 8px 8px 0; background: rgba(214, 58, 82, .07); color: var(--strong); font-size: 13.5px; }
.l-side { position: sticky; top: 72px; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.l-face { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 10px; background: var(--surface-2) center / cover no-repeat;
          color: var(--label); font: 500 11px/1 var(--mono); }
.l-who { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.l-who > div { min-width: 0; }
.l-who b { display: block; overflow: hidden; color: var(--strong); font: 600 18px/1.25 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.l-who > div > span { color: var(--label); font: 500 12px/1 var(--mono); }
.l-status { flex: none; margin-top: 3px; padding: 5px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text); font: 600 10px/1 var(--mono);
            letter-spacing: .06em; text-transform: uppercase; }
.l-status.configuring, .l-status.building, .l-status.launching { background: var(--accent-soft); color: var(--accent-text); }
.l-status.live { background: rgba(11, 154, 106, .1); color: var(--pos); }
.l-status.stuck { background: rgba(214, 58, 82, .1); color: var(--neg); }
.l-bar { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.l-bar i { display: block; height: 100%; }
.l-bar .spent { background: var(--strong); }
.l-bar .free { background: var(--accent); }
.l-bar .keep { background: var(--surface-3); }
.l-lines { display: grid; gap: 6px; margin: 0; }
.l-lines div { display: flex; justify-content: space-between; gap: 12px; }
.l-lines dt { display: flex; align-items: center; gap: 7px; color: var(--fog); font-size: 12.5px; }
.l-lines dd { margin: 0; color: var(--strong); font: 500 12.5px/1.4 var(--mono); white-space: nowrap; }
.l-lines div.spent dt::before, .l-lines div.free dt::before, .l-lines div.keep dt::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.l-lines div.spent dt::before { background: var(--strong); }
.l-lines div.free dt::before { background: var(--accent); }
.l-lines div.keep dt::before { background: var(--surface-3); }
/* the pal's wallet, short, with its copy button beside it (the receipt and the side) */
.l-wallet { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.l-wallet a { color: var(--strong); text-decoration: none; }
.l-wallet a:hover { text-decoration: underline; }
.l-wallet .copy { margin-left: 0; padding: 3px 6px; font-size: 9px; }
.l-facts dd.l-wallet { font: 500 14px/1.3 var(--mono); }
.l-note { min-height: 1em; margin: 0; color: var(--label); font-size: 12px; }
.l-note.bad { color: var(--neg); }

/* the studio: the steps down the left, the open step in the middle, the pal as it stands and its budget on the right */
.l-studio { grid-template-columns: 210px minmax(0, 1fr) 300px; }
.l-nav { position: sticky; top: 72px; display: grid; gap: 4px; align-content: start; }
.l-nav-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1px 10px; align-items: center; padding: 9px 10px; border: 1px solid transparent;
              border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.l-nav-step:hover:not(:disabled) { background: var(--surface); }
.l-nav-step[aria-current="step"] { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow); }
.l-nav-step:disabled { cursor: default; opacity: .45; }
.l-nav-n { display: grid; grid-row: span 2; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 50%;
           color: var(--label); font: 500 11px/1 var(--mono); }
.l-nav-step[aria-current="step"] .l-nav-n { border-color: var(--accent); background: var(--accent); color: #fff; }
.l-nav-n.done { border-color: var(--pos); background: var(--pos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / 12px no-repeat; color: transparent; }
.l-nav-step b { color: var(--strong); font: 600 13.5px/1.2 var(--body); }
.l-nav-step small { color: var(--label); font: 400 11px/1.3 var(--body); }
.l-panel { min-width: 0; scroll-margin-top: 76px; }
.launch .button:disabled, .l-dialog .button:disabled { opacity: .45; cursor: default; }
.launch .button:disabled:hover, .l-dialog .button:disabled:hover { border-color: var(--line-strong); }
.launch .button.primary:disabled:hover, .l-dialog .button.primary:disabled:hover { border-color: var(--strong); background: var(--strong); }
.l-footbox:empty { display: none; }
.l-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.l-foot .primary { margin-left: auto; }
/* the budget is short for what's next: a red bar at the foot of the step, with the way to add */
.l-short { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 18px 18px; padding: 12px 14px; border: 1px solid rgba(214, 58, 82, .45);
           border-radius: 10px; background: rgba(214, 58, 82, .07); }
.l-body > .l-short { margin: 0; }
.l-short-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--neg); color: #fff; font: 700 13px/1 var(--body); }
.l-short-words { display: grid; flex: 1; gap: 2px; min-width: 200px; }
.l-short-words b { color: var(--neg); font-size: 14px; }
.l-short.wait { border-color: var(--line); background: var(--surface-2); }
.l-short.wait .l-short-words b { color: var(--strong); }
.l-short-words span { color: var(--text); font-size: 12.5px; line-height: 1.4; }
.l-short .button { flex: none; margin-left: auto; }
.l-short .l-busy { flex: none; }
/* an amount to pay: a few to pick, or one typed */
.l-amounts { display: grid; gap: 10px; }
.l-amount-own .l-input { width: 120px; font-variant-numeric: tabular-nums; }
.l-topup { display: grid; gap: 14px; padding-top: 10px; }
.l-topup p { margin: 0; }
.l-topup .l-error:empty { display: none; }
/* before removing a file something paid for was made from */
.l-confirm { display: grid; gap: 16px; padding-top: 8px; }
.l-confirm p { margin: 0; }
.l-dialog .button.danger { border-color: var(--neg); background: var(--neg); color: #fff; }
.l-dialog .button.danger:hover { border-color: #b82f47; background: #b82f47; }
/* its coin's address in full, to copy, once the coin is out; and the dialog the moment the pal goes live */
.l-ca { width: 100%; height: 38px; padding: 0 4px 0 12px; font-size: 11.5px; }
.l-ca .ca { flex: 1; font-size: 12.5px; }
.l-live { display: grid; gap: 16px; padding-top: 8px; }
.l-live .l-who { display: grid; justify-items: center; gap: 4px; text-align: center; }
.l-live .l-who img { width: 96px; height: 96px; margin-bottom: 8px; border-radius: 24px; object-fit: cover; }
.l-live .l-row { justify-content: center; }
.l-balance-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.l-balance-head .button { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
.l-coming { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--fog); font-size: 12px; }
.l-coming-link { color: var(--fog); text-decoration: underline; }
.l-how { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 999px;
         background: var(--surface); color: var(--fog); font: 500 11px/1 var(--body); cursor: pointer; }
.l-how:hover { border-color: var(--strong); color: var(--strong); }
.l-row > .l-how { align-self: flex-start; }
.l-row > .l-text { flex: 1 1 320px; }
.l-dialog { width: min(560px, calc(100% - 32px)); max-height: min(80dvh, 720px); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
            background: var(--surface); color: var(--strong); box-shadow: 0 24px 64px rgba(18, 18, 22, .24); }
.l-dialog[open] { display: flex; flex-direction: column; }
.l-dialog::backdrop { background: rgba(18, 18, 22, .4); backdrop-filter: blur(6px); }
.l-dialog-body { min-height: 0; padding: 4px 20px 20px; overflow-y: auto; color: var(--text); font-size: 14px; line-height: 1.55; }
.l-dialog-body p { margin: 12px 0 0; }
.l-dialog-body ul, .l-dialog-body ol { margin: 10px 0 0; padding-left: 20px; }
.l-dialog-body li { margin: 4px 0; }
.l-dialog-body ol li { margin: 8px 0; }
.l-dialog-body ol li::marker { color: var(--label); font: 500 12px/1 var(--mono); }
.l-dialog-body b { color: var(--strong); }
.l-busy { display: inline-flex; align-items: center; gap: 10px; color: var(--strong); font-size: 14px; }
.l-busy i { flex: none; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: l-spin .8s linear infinite; }
@keyframes l-spin { to { transform: rotate(360deg); } }
.l-check-grid { display: grid; gap: 12px; max-width: 640px; }
.l-check-grid:empty { display: none; }
/* a place for one file, always there: empty, a dashed target; filled, the file with a bin on it */
.l-drop { position: relative; max-width: 640px; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.l-drop.empty { border: 1.5px dashed var(--line-strong); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.l-drop.empty:hover, .l-drop.over { border-color: var(--strong); background: var(--surface-2); }
.l-drop-empty { display: grid; justify-items: center; gap: 4px; padding: 32px 20px; text-align: center; }
.l-drop-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; background: var(--surface-2); color: var(--strong); }
.l-drop.over .l-drop-icon, .l-drop.empty:hover .l-drop-icon { background: var(--surface); }
.l-drop-empty b { color: var(--strong); font-size: 14px; }
.l-drop-empty span { font-size: 12.5px; }
.l-drop:not(.empty) .l-drop-empty, .l-drop.busy .l-drop-empty, .l-drop.empty .l-drop-filled { display: none; }
.l-drop > .l-progress { padding: 24px 20px; max-width: none; }
.l-drop-filled { position: relative; display: grid; place-items: center; }
.l-drop-filled img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; }
.l-drop-filled video { display: block; width: 100%; max-height: 440px; background: #000; }
.l-drop-filled audio { display: block; width: 100%; padding: 14px 56px 14px 14px; box-sizing: border-box; }
.l-drop.in .l-drop-filled { animation: l-spread .5s cubic-bezier(.2, .7, .2, 1) both; }
.l-drop.out .l-drop-filled { animation: l-wipe-down .35s ease-in both; }
@keyframes l-spread { from { clip-path: inset(0 50% 0 50% round 10px); opacity: .5; } to { clip-path: inset(0 0 0 0 round 0); opacity: 1; } }
@keyframes l-wipe-down { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
/* the bin on a filled drop zone: a frosted dark tile with a shadow, so it reads on a light photo and a dark one */
.l-bin { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .35);
         border-radius: 8px; background: rgba(18, 18, 22, .7); color: #fff; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.l-bin:hover { background: var(--neg); border-color: var(--neg); }
.l-drop-filled audio + .l-bin { top: 50%; transform: translateY(-50%); border-color: var(--line-strong); background: var(--surface); color: var(--strong); backdrop-filter: none; box-shadow: none; }
.l-drop-filled audio + .l-bin:hover { background: var(--neg); border-color: var(--neg); color: #fff; }
/* the checks' verdict in a bar with what to do about it; what's off listed with its fix, what passed folded away */
.l-checkbar { max-width: 640px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.l-checkbar.ok { border-color: rgba(11, 154, 106, .45); background: rgba(11, 154, 106, .04); }
.l-checkbar.soft { border-color: rgba(214, 58, 82, .35); background: rgba(214, 58, 82, .035); }
.l-checkbar.bad { border-color: rgba(214, 58, 82, .5); background: rgba(214, 58, 82, .05); }
.l-checkbar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; }
.l-checkbar-text { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.l-checkbar-text b { color: var(--strong); font-size: 14px; }
.l-checkbar-text span { color: var(--fog); font-size: 12.5px; line-height: 1.4; }
.l-checkbar.ok .l-checkbar-text b { color: var(--pos); }
.l-checkbar.bad .l-checkbar-text b { color: var(--neg); }
.l-checkbar-acts { display: flex; flex: none; gap: 8px; margin-left: auto; }
.l-checkbar-acts .l-busy { padding: 0 4px; }
.l-check-fails { padding: 0 14px 12px; gap: 8px; }
.l-check-fails li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.l-checkbar .l-check-fails li small { grid-column: 3; color: var(--neg); font-size: 12.5px; text-align: right; }
.l-checkbar-passed { border-top: 1px solid var(--line); }
.l-checkbar-passed summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; list-style: none; cursor: pointer; }
.l-checkbar-passed summary::-webkit-details-marker { display: none; }
.l-checkbar-passed summary::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--pos); border-radius: 50%;
  background: var(--pos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / 10px no-repeat; }
.l-checkbar.wait .l-checkbar-passed summary::before { border-color: var(--line-strong); background: none; border-style: dashed; animation: l-spin 1.6s linear infinite; }
.l-checkbar-more { display: inline-flex; align-items: center; gap: 6px; color: var(--strong); font-size: 13px; }
.l-checkbar-more::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid var(--fog); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.l-checkbar-passed[open] .l-checkbar-more::after { margin-top: 3px; transform: rotate(-135deg); }
.l-checkbar-passed .l-check-list { padding: 0 14px 12px 36px; }
.l-checkbar-note { margin: 0; padding: 0 14px 12px; }
.l-done { display: flex; align-items: center; gap: 12px; max-width: 480px; padding: 12px 14px; }
.l-done .l-tick { flex: none; }
.l-check-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; }
.l-check-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; align-items: start; }
.l-check-list li::before { margin-top: 2px; }
.l-check li.no { color: var(--strong); }
.l-check li.no::before { border-color: var(--neg); background: var(--neg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / 9px no-repeat; }
.l-check li.wait::before { border-style: dashed; animation: l-spin 1.6s linear infinite; }
.l-check li small { grid-column: 2; color: var(--label); font-size: 12px; line-height: 1.35; }
.l-text.ok { color: var(--pos); }
/* an upload on its way, in place of the row with its button */
.l-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; max-width: 480px; }
.l-progress-bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.l-progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .2s; }
.l-progress span { color: var(--strong); font-size: 13.5px; }
.l-progress small { color: var(--label); font: 500 11.5px/1 var(--mono); }
/* what went wrong, at the foot of the window until dismissed or the next try */
/* Toasts (Him.toast): what just happened or went wrong, stacked at the foot of the window, newest last */
.toasts { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content;
          max-width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 11px 10px 11px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--fog);
         border-radius: 10px; background: var(--surface); color: var(--strong); font: 500 13.5px/1.4 var(--body); box-shadow: 0 10px 30px rgba(18, 18, 22, .14);
         pointer-events: auto; animation: toast-in .2s ease-out; }
.toast.error { border-color: rgba(214, 58, 82, .35); border-left-color: var(--neg); }
.toast.ok { border-color: rgba(11, 154, 106, .35); border-left-color: var(--pos); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast button { flex: none; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--fog); font-size: 18px; line-height: 1; cursor: pointer; }
.toast button:hover { background: var(--surface-2); color: var(--strong); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
.l-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line-strong);
             border-radius: 10px; background: var(--bg); color: var(--strong); font-size: 13px; line-height: 1.45; cursor: pointer; }
.l-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.l-make { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.l-make-head { display: grid; gap: 4px; }
.l-make-head h3 { margin: 0; color: var(--strong); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* the face's HD version on its way: how far, about how long, in the voice and launch steps and small in the side */
.l-hd { display: grid; gap: 8px; max-width: 480px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.l-hd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.l-hd-head b { color: var(--strong); font-size: 13px; }
.l-hd-head span { color: var(--fog); font: 500 12px/1.3 var(--mono); text-align: right; }
.l-hd-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.l-hd-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s ease; }
.l-hd p { margin: 0; font-size: 12.5px; line-height: 1.45; }
.l-hd.small { gap: 6px; max-width: none; padding: 10px 12px; }
.l-hd.small .l-hd-head b { font-size: 12.5px; }
.l-hd.small .l-hd-head span { font-size: 11.5px; }
.l-hd.small .l-hd-track { height: 4px; }
/* the test call before launch, and the rest of the launch step under it */
.l-test { display: grid; gap: 12px; }
.l-test:empty { display: none; }
.l-test + .l-stack { padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.l-test:empty + .l-stack { padding-top: 0; border-top: 0; }
.l-stack { display: grid; gap: 14px; }
/* The coin's settings at the top of the Launch step, then the dev buy, each under a small heading. */
.l-coin { display: grid; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--line-strong); }
.l-coin-names { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px 14px; }
.l-coin-names:has(input[type="url"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-ticker { display: flex; align-items: center; gap: 2px; padding-left: 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--label); font: 500 15px/1 var(--mono); }
.l-ticker .l-input { flex: 1; min-width: 0; padding-left: 2px; border: 0; background: transparent; font: 500 15px/1.2 var(--mono); }
.l-ticker:focus-within { border-color: var(--strong); }
.l-input[aria-invalid="true"] { border-color: var(--neg); }
/* The dev buy card: an amount with quarters of the budget and the unit beside it, then what it gets and the most it can be. */
.l-devbuy { display: grid; gap: 10px; padding-top: 4px; }
.l-devbuy-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.l-devbuy-head label { color: var(--strong); font: 600 13px/1.2 var(--body); }
.l-devbuy-head span { color: var(--fog); font-size: 12.5px; }
.l-devbuy-input { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; align-items: center; min-height: 52px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); }
.l-devbuy-input:focus-within { border-color: var(--strong); }
.l-devbuy-amount { width: 100%; min-width: 0; height: 50px; padding: 0 12px; border: 0; background: transparent; color: var(--strong); font: 500 19px/1 var(--body); outline: none; font-variant-numeric: tabular-nums; }
.l-devbuy-amount::placeholder { color: var(--label); }
.l-devbuy-presets { display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.l-devbuy-presets button { min-width: 42px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--fog); font: 600 12.5px/1 var(--body); cursor: pointer; }
.l-devbuy-presets button:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); color: var(--strong); }
.l-devbuy-presets button:disabled { cursor: default; opacity: .4; }
.l-devbuy-unit { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; height: 50px; min-width: 104px; padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--strong); cursor: pointer; }
.l-devbuy-unit:hover { background: var(--surface); }
.l-devbuy-unit svg { color: var(--fog); }
.l-devbuy-unit b { font: 600 13px/1 var(--body); white-space: nowrap; }
.l-devbuy-est { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding-top: 10px; border-top: 1px solid var(--line); }
.l-devbuy-est > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.l-devbuy-est > span:last-child { display: grid; gap: 3px; text-align: right; }
.l-devbuy-est small { color: var(--fog); font-size: 12.5px; white-space: nowrap; }
.l-devbuy-est strong { color: var(--strong); font-size: 14px; }
.l-devbuy-est em { color: var(--fog); font-size: 12.5px; font-style: normal; white-space: nowrap; }
/* Before the button: nothing changes after launch. */
.l-permanent { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); }
.l-permanent .l-short-mark { background: var(--strong); }
.l-permanent b { color: var(--strong); font-size: 14px; line-height: 1.4; }
.l-call { display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 10; border: 0; border-radius: 10px; background: #000; }
.l-clock { color: var(--fog); font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.l-preview { max-width: 480px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #000; }
.l-preview video, .l-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-switch { align-items: flex-start; text-align: left; }
.l-switch .l-track { flex: none; margin-top: 1px; }
.l-switch-words { display: grid; gap: 3px; }
.l-switch-words b { font: 600 13.5px/1.2 var(--body); }
.l-switch-words small { color: var(--fog); font: 400 12px/1.35 var(--body); }
.l-remove { flex: none; padding: 0; border: 0; background: none; color: var(--neg); font: 500 12px/1 var(--body); cursor: pointer; }
.l-remove:disabled { opacity: .4; cursor: default; }
/* the pal page: the pal at the top, then its sections, each with what's in it and an Add button */
.l-pal-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.l-pal-face { display: grid; place-items: center; width: 96px; height: 96px; padding: 0; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 12px;
              background: var(--surface-2) center / cover no-repeat; color: var(--label); font: 500 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.l-pal-face[data-src]:not([data-src=""]) { border-style: solid; }
.l-pal-face:hover { border-color: var(--strong); }
.l-pal-face video { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-pal-names { display: grid; gap: 8px; min-width: 0; }
.l-pal-name { min-height: 44px; padding: 6px 10px; border-color: transparent; background: transparent; color: var(--strong); font: 600 24px/1.2 var(--body); letter-spacing: -.02em; }
.l-pal-name::placeholder { color: var(--label); }
.l-pal-name:hover { border-color: var(--line); }
.l-pal-name:focus { border-color: var(--line-strong); }
.l-pal-line { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; padding: 2px 10px 0; }
.l-pal-set { display: grid; align-content: center; gap: 3px; min-width: 0; max-width: 100%; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 8px;
             background: var(--surface); color: var(--label); font: 500 9.5px/1.2 var(--mono); letter-spacing: .07em; text-align: left; text-transform: uppercase;
             cursor: pointer; transition: border-color .15s, background-color .15s; }
.l-pal-set b { overflow: hidden; color: var(--strong); font: 500 13px/1.25 var(--body); letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.l-pal-set:hover { border-color: var(--strong); }
.l-pal-set.more { display: inline-flex; align-items: center; gap: 7px; border-color: transparent; background: var(--surface-2); color: var(--strong);
                  font: 600 13px/1.2 var(--body); letter-spacing: 0; text-transform: none; }
.l-pal-set.more:hover { border-color: var(--strong); background: var(--surface-3); }
.l-pal-set.more svg { flex: none; }
.l-sec { display: grid; gap: 12px; min-width: 0; padding-top: 6px; }
.l-sec + .l-sec { padding-top: 18px; border-top: 1px solid var(--line); }
.l-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.l-sec-head > div { display: grid; gap: 3px; min-width: 0; }
.l-sec-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--strong); font: 600 16px/1.2 var(--body); letter-spacing: -.01em; }
.l-sec-head h3 svg { flex: none; color: var(--fog); }
.l-sec-head p { margin: 0; color: var(--fog); font-size: 13px; line-height: 1.45; }
.l-sec-head .button { flex: none; margin-top: 2px; }
.l-sec-body { display: grid; gap: 6px; }
.l-sec-body .l-label { padding: 6px 0 2px; }
.l-sec-body .l-label:first-child { padding-top: 0; }
.l-prompt { min-height: 150px; font-size: 14px; line-height: 1.55; resize: vertical; overflow-y: auto; }
/* under Identity & Role, one row: the start-from menu, the count, and writing it with AI */
.l-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.l-under .l-count { flex: 1 1 auto; min-width: 0; }
.l-under .l-start, .l-under .button { flex: none; }
.l-count { color: var(--label); font: 400 11.5px/1.3 var(--mono); }
.l-count.short { color: var(--neg); }
.l-empty { margin: 0; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--fog); font-size: 13px; line-height: 1.45; }
.l-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.l-item-words { display: grid; gap: 2px; min-width: 0; }
.l-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.l-item-top b { min-width: 0; overflow-wrap: anywhere; color: var(--strong); font: 500 13.5px/1.35 var(--body); }
.l-item-top .l-tag { padding: 2px 7px; font-size: 10px; }
.l-item-words small { color: var(--label); font-size: 12px; line-height: 1.4; }
.l-item-acts { display: flex; flex: none; align-items: center; gap: 12px; }
.l-kind { flex: none; padding: 2px 6px; border-radius: 5px; background: var(--surface-2); color: var(--fog); font: 500 10px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.l-tag.soft { background: var(--surface-2); color: var(--fog); }
.l-tag.warn { background: rgba(214, 58, 82, .1); color: var(--neg); }
/* the pal's dialogs: settings as rows that open, knowledge from a file, a link or the examples, capabilities as switches */
.l-dialog-title { display: grid; gap: 2px; min-width: 0; padding: 8px 0; }
.l-dialog-title p { margin: 0; color: var(--fog); font-size: 12.5px; line-height: 1.4; }
.l-settings { padding-top: 6px; }
.l-set { border-bottom: 1px solid var(--line); }
.l-set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 2px; border: 0;
             background: none; color: var(--strong); font: 500 14px/1.3 var(--body); text-align: left; cursor: pointer; }
.l-set-row:hover { color: var(--accent-text); }
.l-set-row b { overflow: hidden; color: var(--fog); font-weight: 400; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.l-set-row i { color: var(--label); font-style: normal; font-size: 18px; line-height: 1; transition: transform .15s; }
.l-set.open .l-set-row i { transform: rotate(90deg); }
.l-set-opts { display: grid; gap: 10px; padding: 2px 2px 16px; }
.l-set-opts > p { margin: 0; font-size: 12.5px; line-height: 1.45; }
.l-set-opts > .l-label { padding-top: 6px; }
.l-set-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.l-set-pair.one { grid-template-columns: minmax(0, 1fr); }
.l-dialog-note { margin: 14px 0 0; color: var(--label); font-size: 12px; line-height: 1.45; }
.l-add { display: grid; gap: 14px; padding-top: 12px; }
.l-add .l-pane[hidden] { display: none; }
/* the Knowledge dialog: a place for several files (always open for more), and what it has under it */
.l-drop-many { max-width: none; }
.l-drop-many .l-drop-empty { padding: 26px 20px; }
.l-drop-many .l-drop-empty span { max-width: 460px; }
.l-drop-many.full { border-style: solid; cursor: default; }
.l-drop-many.full:hover { border-color: var(--line-strong); background: var(--surface); }
.l-drop-many.full .l-drop-icon { opacity: .5; }
.l-have { display: grid; gap: 6px; }
.l-doc-edit { min-height: 220px; max-height: 50dvh; font: 400 13px/1.5 var(--mono); resize: vertical; }
.l-ex { display: grid; gap: 6px; }
.l-ex + .l-ex { padding-top: 8px; }
.l-ex-head { display: flex; align-items: center; gap: 9px; padding: 4px 0 2px; }
.l-ex-head img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.l-ex-head b { color: var(--strong); font: 600 13.5px/1.2 var(--body); }
.l-ex-head small { color: var(--label); font-size: 12px; }
.l-ex .l-item-acts { gap: 6px; }
.l-added { color: var(--pos); font: 600 12px/1 var(--body); white-space: nowrap; }
.l-read { display: grid; gap: 14px; padding-top: 10px; }
.l-doc { max-height: 50dvh; margin: 0; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text);
         font: 400 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.l-caps-dialog { display: grid; gap: 10px; padding-top: 12px; }
.l-cap-row { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.l-cap-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 44px; }
/* a capability that's coming: shown, grayed out, and its switch can't be turned on */
.l-cap-row.soon .l-switch { filter: grayscale(1); opacity: .45; cursor: not-allowed; }
.l-setup { display: grid; gap: 14px; padding-top: 12px; }
/* X posting, in the Trading dialog's frame (the .l-skill-* pieces below): the account it posts from */
.l-x-account { display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.l-x-account .button { margin-left: auto; }
.l-x-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.l-x-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.l-x-who > div { display: grid; min-width: 0; }
.l-x-who > div b { color: var(--strong); font: 600 15px/1.2 var(--body); }
.l-x-who > div span { color: var(--fog); font-size: 12.5px; }
.l-x-value { color: var(--strong); font: 600 13.5px/1.3 var(--body); text-align: right; }
/* not logged in yet: the launch holds here */
.l-x-login { display: grid; gap: 8px; max-width: 560px; padding: 12px 14px; border: 1px solid rgba(214, 58, 82, .45); border-radius: 10px; background: rgba(214, 58, 82, .05); }
.l-x-login b { color: var(--neg); font: 600 13.5px/1.3 var(--body); }
.l-x-login .dim { font-size: 12.5px; }
/* what it posts: a number a day under its row, dimmed while that kind is off; what it all comes to under the rows */
.l-x-count { display: grid; grid-column: 1 / -1; gap: 4px; max-width: 420px; }
.l-x-count.off { opacity: .45; }
.l-x-count input { width: 100%; margin: 0; accent-color: var(--accent); }
.l-x-count input:disabled { cursor: default; }
.l-x-count-pace { color: var(--fog); font: 400 12px/1.35 var(--body); }
.l-x-count-pace b { color: var(--strong); font-weight: 600; }
.l-x-total { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.l-x-rules { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.4; }
.l-x-rules li::marker { color: var(--pos); }
.l-x-edit { display: grid; gap: 8px; }
.l-x-edit textarea { font-size: 13.5px; }
/* Coin Analysis: each part a card with its switch; how much it talks about its coin under that part's switch, dimmed while the part is off */
.l-x-kind { display: grid; align-content: start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.l-x-kind.on { border-color: var(--strong); }
.l-coin-talk { margin-left: 44px; opacity: .45; }
.l-x-kind.on .l-coin-talk { opacity: 1; }
.l-x-kind > .l-tag { justify-self: start; margin-left: 44px; }
.l-x-kind .l-switch:disabled { cursor: not-allowed; opacity: .55; }
/* a wide dialog (X posting, Trading) */
.l-dialog.l-wide { width: min(1080px, calc(100% - 32px)); max-height: min(92dvh, 980px); }
/* the preview: before it's written, what it will be, as ghost cards; then what it would post, a card each; the mentions it answered and the ones it let go */
.l-x-empty { display: grid; gap: 8px; max-width: 680px; }
.l-x-ghost { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: 12.5px; }
.l-x-out { display: grid; gap: 8px; max-width: 680px; }
.l-x-out:empty { display: none; }
.l-x-out > p { margin: 0; font-size: 12.5px; }
.l-x-out > .l-label { padding-top: 8px; }
.l-x-post { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.l-x-post-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; }
.l-x-post-top .dim { font-size: 11.5px; }
.l-x-post-kind { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: 500 11px/1.4 var(--body); }
.l-x-post p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.l-x-post p.dim { font-size: 12.5px; }
.l-x-mention { border-color: var(--line); }
.l-x-mention.let-go, .l-x-post.off { opacity: .6; }
.l-x-said { color: var(--fog); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.l-x-said b { color: var(--strong); font-weight: 600; }
.l-x-said span { display: block; margin-top: 2px; color: var(--text); }
/* the Trading dialog: a fixed header (the three ways in, and what the skill is), the view under it, Done in a footer */
.l-dialog.l-skill-dialog { height: min(92dvh, 940px); }
.l-dialog-body.l-skill { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.l-skill-bar { display: flex; flex: none; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 4px 20px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.l-skill-tabs { display: flex; gap: 2px; margin-left: -12px; } /* the first tab's words start where the title does */
.l-skill-tabs button { display: grid; gap: 2px; justify-items: start; margin-bottom: -1px; padding: 12px 12px 10px; border: 0; border-bottom: 2px solid transparent; background: none; text-align: left; cursor: pointer; }
.l-skill-tabs button b { color: var(--fog); font: 600 14px/1.2 var(--body); }
.l-skill-tabs button small { color: var(--label); font: 400 11.5px/1.2 var(--body); }
.l-skill-tabs button:hover b { color: var(--strong); }
.l-skill-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); }
.l-skill-tabs button[aria-selected="true"] b { color: var(--strong); }
.l-skill-state { display: grid; align-content: center; gap: 2px; justify-items: end; padding: 8px 0; text-align: right; }
.l-skill-state b { color: var(--strong); font: 600 13px/1.2 var(--body); }
.l-skill-state small { color: var(--fog); font: 400 11.5px/1.2 var(--body); }
.l-skill-view { flex: 1 1 auto; min-height: 0; }
.l-skill-foot { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 20px; border-top: 1px solid var(--line); }
.l-skill-foot > .dim { flex: 1 1 200px; font-size: 12px; line-height: 1.4; }
.l-skill-saved { color: var(--pos); font: 500 11.5px/1.4 var(--mono); white-space: nowrap; }
.l-skill-saved.busy { color: var(--fog); }
.l-skill-saved.bad { color: var(--neg); }
.l-skill-problems { display: grid; gap: 4px; margin: 0; padding: 9px 12px; border-left: 2px solid var(--neg); border-radius: 0 8px 8px 0; background: rgba(214, 58, 82, .07); font-size: 12.5px; line-height: 1.4; list-style: none; overflow-wrap: anywhere; }
.l-skill-problems li.soft { color: var(--fog); }
/* Presets: what the skill is now, then a card each, with who trades on it */
/* eight cards in four columns on a desktop so the page needs no scroll there; fewer columns, and a scroll, on less */
.l-skill-presets { display: grid; align-content: start; gap: 12px; height: 100%; padding: 14px 20px 18px; overflow-y: auto; }
.l-skill-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 14px; border-radius: 10px; background: var(--surface-2); }
.l-skill-now b { color: var(--strong); font: 600 13px/1.4 var(--body); }
.l-skill-now span { color: var(--text); font-size: 12.5px; line-height: 1.4; }
.l-skill-grid-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.l-skill-preset { display: grid; align-content: start; gap: 6px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.l-skill-preset.current { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); }
.l-skill-preset.custom { border-style: dashed; background: var(--bg); }
.l-skill-preset > p { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.4; }
.l-skill-preset-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 28px; }
.l-skill-preset-head b { color: var(--strong); font: 600 14.5px/1.2 var(--body); }
.l-skill-preset-head .button { margin-left: auto; } /* a preset's Use or Edit, at the end of its title row */
.l-skill-badge { padding: 3px 6px; border-radius: 999px; background: var(--surface-2); color: var(--fog); font: 600 9.5px/1 var(--mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.l-skill-badge.on { background: var(--accent); color: #fff; }
.l-skill-pals { display: flex; align-items: center; gap: 8px; min-height: 20px; color: var(--fog); font-size: 12px; line-height: 1.3; }
.l-skill-faces { display: inline-flex; flex: none; }
.l-skill-faces img { width: 20px; height: 20px; border: 2px solid var(--surface); border-radius: 50%; object-fit: cover; }
.l-skill-faces img + img { margin-left: -7px; }
.l-skill-facts { color: var(--fog); font: 500 11px/1.5 var(--mono); }
.l-skill-preset-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 2px; }
/* On a laptop's screen the dialog takes nearly the whole height and its frame tightens, so the presets still fit. */
@media (max-height: 860px) {
  .l-dialog.l-skill-dialog { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  .l-skill-dialog .wc-head { min-height: 0; padding: 4px 10px 2px 20px; }
  .l-skill-dialog .l-dialog-title { padding: 6px 0; }
  .l-skill-dialog .l-skill-tabs button { padding: 9px 12px 7px; }
  .l-skill-dialog .l-skill-foot { padding: 7px 20px; }
  .l-skill-dialog .l-skill-presets { gap: 10px; padding: 10px 20px 12px; }
}
@media (max-height: 720px) { /* shorter still: the frame's second lines go */
  .l-skill-dialog .l-dialog-title p, .l-skill-dialog .l-skill-tabs button small, .l-skill-dialog .l-skill-state small { display: none; }
  .l-skill-dialog .l-skill-presets { padding: 8px 20px 10px; }
}
/* Settings: a nav with each section's values under its name, the one open as rows of fields */
.l-skill-settings { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100%; }
.l-skill-nav { display: grid; align-content: start; gap: 2px; padding: 10px; border-right: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
.l-skill-nav > .l-label { padding: 10px 10px 4px; }
.l-skill-nav button { display: grid; gap: 2px; justify-items: start; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.l-skill-nav button:hover { background: var(--surface-2); }
.l-skill-nav button b { color: var(--strong); font: 600 13px/1.2 var(--body); }
.l-skill-nav button small { max-width: 100%; overflow: hidden; color: var(--fog); font: 400 11.5px/1.3 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.l-skill-nav button[aria-current="true"] { background: var(--strong); }
.l-skill-nav button[aria-current="true"] b { color: #fff; }
.l-skill-nav button[aria-current="true"] small { color: rgba(255, 255, 255, .65); }
.l-skill-nav button small.bad { color: var(--neg); font-weight: 500; } /* a part that holds the launch up */
.l-skill-nav button[aria-current="true"] small.bad { color: #ffb3bf; }
.l-skill-main { display: grid; align-content: start; gap: 16px; min-width: 0; padding: 16px 24px 24px; overflow-y: auto; }
.l-skill-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12.5px; line-height: 1.4; }
.l-skill-head { display: grid; gap: 4px; }
.l-skill-head h3 { margin: 0; color: var(--strong); font: 600 18px/1.2 var(--body); letter-spacing: -.01em; }
.l-skill-head p { margin: 0; color: var(--fog); font-size: 13px; line-height: 1.45; }
.l-skill-rows { display: grid; border-top: 1px solid var(--line); }
.l-skill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.l-skill-row.stack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.l-skill-words { display: grid; gap: 3px; }
.l-skill-words b, .l-skill-words label { color: var(--strong); font: 600 13.5px/1.25 var(--body); }
.l-skill-words small { color: var(--fog); font-size: 12px; line-height: 1.4; }
.l-skill-words .l-tag { justify-self: start; margin-top: 3px; }
.l-skill-row.off > .l-skill-words > b, .l-skill-row.off > .l-skill-words > small { opacity: .55; } /* a kind that needs a skill the pal hasn't got */
.l-skill-row .l-switch:disabled { cursor: not-allowed; opacity: .55; }
.l-skill-row > .l-input, .l-skill-row > .l-skill-unit { width: 200px; }
.l-skill-row.stack > .l-input { width: 100%; }
.l-skill-row > .l-switch { position: relative; }
.l-skill-row > .l-switch .l-switch-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.l-skill select.l-input { font-size: 13px; }
/* a number with its unit inside the box, at the right ($ at the left), so every box is the same width */
.l-skill-unit { position: relative; }
.l-skill-unit .l-input { width: 100%; padding-right: 46px; }
.l-skill-unit small { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); color: var(--fog); font: 500 12px/1 var(--mono); pointer-events: none; }
.l-skill-unit[data-unit="$"] .l-input { padding-right: 10px; padding-left: 24px; }
.l-skill-unit[data-unit="$"] small { right: auto; left: 11px; }
/* a pick of several: a tick on each picked, the count and pick all / clear under them */
.l-skill .l-chip[aria-pressed="true"]::before { content: "\2713"; margin-right: 6px; font-size: 11px; }
.l-skill-pick { display: grid; gap: 8px; }
.l-skill-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--fog); font-size: 12px; }
.l-skill-link { padding: 0; border: 0; background: none; color: var(--accent-text); font: 500 12px/1.4 var(--body); cursor: pointer; }
.l-skill-link:hover { text-decoration: underline; }
/* a trending list's limits: each in words with its number, and a way to add one */
.l-skill-bounds { display: grid; gap: 8px; max-width: 520px; }
.l-skill-bound { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: center; gap: 10px; }
.l-skill-bound > span { color: var(--strong); font: 500 13px/1.3 var(--body); }
.l-skill-bound em { color: var(--fog); font-style: normal; font-weight: 400; }
.l-skill-addbound { max-width: 260px; }
.l-skill-money { display: grid; gap: 14px; max-width: 560px; }
.l-skill-money .l-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.l-skill-money .l-facts dd { font-size: 22px; letter-spacing: -.02em; }
.l-skill-money .l-range .dim { font-size: 12.5px; }
.l-skill-money > p { margin: 0; font-size: 12.5px; }
/* inside a lane or trending list card: a compact grid of fields */
.l-skill-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.l-skill-fields > .wide { grid-column: 1 / -1; }
.l-skill-fields > .l-field { grid-template-rows: minmax(0, 1fr) auto; } /* the inputs in a row line up, whatever their help says */
.l-skill-fields .l-field > span { align-content: start; font-size: 12.5px; }
.l-skill-fields .l-field > span small { display: block; font-size: 11px; line-height: 1.35; }
.l-skill-fields .l-input { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.l-skill-cards { display: grid; gap: 10px; }
.l-skill-card { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.l-skill-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.l-skill-card-head b { color: var(--strong); font: 600 13.5px/1.2 var(--body); }
/* Overview: every part in words, each a way to it */
.l-skill-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.l-skill-ov { display: grid; align-content: start; gap: 6px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); text-align: left; cursor: pointer; }
.l-skill-ov:hover { border-color: var(--strong); }
.l-skill-ov p { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.l-skill-ov em { color: var(--accent-text); font: 600 11px/1 var(--body); font-style: normal; }
.l-skill-mended { display: grid; gap: 8px; }
/* Code: the editor, with every field explained beside it */
.l-skill-codeview { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); height: 100%; }
.l-skill-codebox { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px 20px 20px; border-right: 1px solid var(--line); }
.l-skill-codehead { display: grid; gap: 3px; }
.l-skill-codehead b { color: var(--strong); font: 600 15px/1.2 var(--body); }
.l-skill-codehead small { color: var(--fog); font-size: 12px; line-height: 1.45; }
/* the toolbar over the code: what to load on the left; copy and apply on the right */
.l-skill-codebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 0 2px; }
.l-skill-codebar .l-row { gap: 6px; }
.l-skill-codebar .l-label { margin-right: 4px; }
.l-skill-code { flex: 1 1 auto; min-height: 200px; font: 500 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: break-word; overflow: auto; tab-size: 2; resize: none; } /* long briefs wrap rather than scroll sideways */
.l-skill-codefoot { display: grid; gap: 6px; font-size: 12.5px; }
.l-skill-dirty { color: var(--accent-text); font-weight: 600; }
.l-skill-ref { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 20px 20px; overflow-y: auto; background: var(--bg); font-size: 12px; line-height: 1.4; }
.l-skill-ref > b { color: var(--strong); font: 600 13.5px/1.2 var(--body); }
.l-skill-ref > .l-label { padding-top: 10px; }
.l-skill-ref > p { margin: 0 0 2px; color: var(--fog); font-size: 12px; }
.l-skill-ref ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.l-skill-ref li { display: grid; gap: 1px; margin: 0; overflow-wrap: anywhere; }
.l-skill-ref code { color: var(--strong); font: 500 11.5px/1.4 var(--mono); }
.l-skill-ref li > span { color: var(--label); font: 500 10.5px/1.4 var(--mono); }
.l-skill-ref small { color: var(--text); font-size: 11.5px; }
@media (max-width: 960px) {
  .l-skill-bar { flex-direction: column; gap: 0; }
  .l-skill-state { justify-items: start; padding: 0 0 10px; text-align: left; }
  .l-skill-settings { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .l-skill-nav { display: flex; gap: 4px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .l-skill-nav > .l-label { display: none; }
  .l-skill-nav button { flex: none; width: auto; max-width: 180px; }
  .l-skill-row { grid-template-columns: minmax(0, 1fr); }
  .l-skill-row > .l-input, .l-skill-row > .l-skill-unit { width: 100%; }
  .l-skill-bound { grid-template-columns: minmax(0, 1fr) 110px auto; }
  .l-skill-overview { grid-template-columns: 1fr; }
  .l-skill-codeview { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; overflow-y: auto; }
  .l-skill-codebox { border-right: 0; }
  .l-skill-ref { max-height: 40dvh; }
}
.l-row .l-end { margin-left: auto; }
/* a step's Continue held back, and why */
.l-hold { flex: 1 1 100%; margin: 0 0 4px; padding: 10px 12px; border: 1px solid rgba(214, 58, 82, .45); border-radius: 10px; background: rgba(214, 58, 82, .05); color: var(--neg); font-size: 12.5px; line-height: 1.4; }
.l-chip-select { max-width: 200px; padding: 0 22px 0 10px; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; font: 500 12.5px/1 var(--body);
                 background: var(--surface) var(--chevron) no-repeat right 7px center / 10px; }
.l-him { display: grid; gap: 6px; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.l-him ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.4; }
.l-him li::marker { color: var(--pos); }
.l-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; margin: 0; padding: 12px 14px; border: 1px solid var(--line);
             border-radius: 10px; background: var(--bg); }
.l-summary div { display: grid; gap: 2px; }
.l-summary dt { color: var(--label); font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.l-summary dd { margin: 0; color: var(--strong); font-size: 13.5px; }
.l-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.l-hero, .l-mine { margin-bottom: 16px; }
.l-mine .l-label { margin-right: 4px; }
.l-mine-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
               background: var(--surface); color: var(--strong); text-decoration: none; }
.l-mine-chip:has(img) { padding-left: 4px; }
.l-mine-chip:hover { border-color: var(--strong); }
.l-mine-chip[aria-current="page"] { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); }
.l-mine-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.l-mine-chip b { font: 600 13px/1 var(--body); }
.l-mine-chip small { color: var(--label); font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.l-mine-chip.new { border-style: dashed; color: var(--fog); }
.l-face { overflow: hidden; }
.l-face video { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-option:disabled { opacity: .5; cursor: default; }
.l-tabs { flex-wrap: wrap; }
@media (max-width: 1100px) {
  .l-studio { grid-template-columns: minmax(0, 1fr) 280px; }
  .l-nav { position: static; grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; padding-bottom: 2px; }
}
@media (max-width: 960px) {
  .l-grid { grid-template-columns: minmax(0, 1fr); }
  .l-side { position: static; order: -1; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .l-side > :not(.l-face):not(.l-who) { grid-column: 1 / -1; }
  .l-nav { order: -1; }
  .l-drop-filled img, .l-drop-filled video { max-height: 360px; }
}
@media (max-width: 560px) {
  .l-two, .l-group, .l-picker { grid-template-columns: minmax(0, 1fr); }
  .l-group > span { padding-top: 0; }
  .l-pal-head { grid-template-columns: minmax(0, 1fr); }
  .l-coin-names, .l-set-pair { grid-template-columns: minmax(0, 1fr); }
  .l-devbuy-input { grid-template-columns: minmax(0, 1fr) auto; }
  .l-devbuy-presets { display: grid; grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; border-top: 1px solid var(--line); }
  .l-devbuy-presets button { min-width: 0; }
  .l-devbuy-unit { grid-row: 1; grid-column: 2; }
  .l-devbuy-est { grid-template-columns: 1fr; gap: 8px; }
  .l-devbuy-est > span:last-child { text-align: left; }
  .l-makers { border-right: 0; border-bottom: 1px solid var(--line); }
  .l-nav { grid-auto-columns: minmax(120px, 1fr); }
  /* the Pal step's cards: the words take the width they need; the buttons drop under them when there isn't room */
  .l-item { flex-wrap: wrap; }
  .l-item-words { flex: 1 1 200px; }
  .l-item-acts { margin-left: auto; }
  .l-sec-head { flex-wrap: wrap; }
  .l-nav-step small { display: none; }
}

/* the header's wallet button, its picker and its menu (wallet.js) */
.wc { position: relative; flex: none; }
.wc-button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border: 1px solid var(--strong); border-radius: 8px;
             background: linear-gradient(135deg, #efe9ff, #9c73ff 62%, #7138ef); color: #09070d; font: 600 12.5px/1 var(--body); white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.wc-button:hover { border-color: #cbb8ff; background: linear-gradient(135deg, #fff, #b79aff 62%, #8250f4); }
.wc-button.on { padding: 0 11px; border-color: var(--line); background: var(--surface); color: var(--strong); font: 500 12px/1 var(--mono); }
.wc-button.on:hover, .wc-button.on[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-2); }
.wc-button i { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px rgba(11, 154, 106, .15); }
.wc-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: grid; gap: 2px; width: 248px; padding: 6px;
           border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.wc-menu[hidden] { display: none; }
.wc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px;
           background: none; color: var(--strong); font: 500 13.5px/1.2 var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.wc-item:hover, .wc-item[aria-current] { background: var(--surface-2); }
.wc-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-item small { flex: none; color: var(--label); font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.wc-item .wc-mono { font: 500 12.5px/1 var(--mono); }
.wc-label { padding: 10px 10px 4px; border-top: 1px solid var(--line); color: var(--label); font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.wc-out { color: var(--neg); }
.wc-dialog { width: min(400px, calc(100% - 32px)); max-height: min(560px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--line-strong);
             border-radius: var(--r-lg); background: var(--surface); color: var(--strong); box-shadow: 0 24px 64px rgba(18, 18, 22, .24); }
.wc-dialog[open] { display: flex; flex-direction: column; }
.wc-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.wc-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 8px 10px 8px 20px;
           border-bottom: 1px solid var(--line); }
.wc-head h2 { margin: 0; font: 600 16px/1.2 var(--body); letter-spacing: -.01em; }
.wc-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: none; color: var(--fog);
            font: 400 22px/1 var(--body); cursor: pointer; }
.wc-close:hover { background: var(--surface-2); color: var(--strong); }
.wc-list { display: grid; gap: 2px; min-height: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.wc-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 60px; padding: 10px 12px;
          border: 0; border-radius: 10px; background: none; color: var(--strong); text-align: left; text-decoration: none; cursor: pointer; }
.wc-row:hover:not(:disabled), .wc-row:focus-visible, .wc-row[aria-busy="true"] { background: var(--surface-2); }
.wc-row:disabled { cursor: default; }
.wc-row:disabled:not([aria-busy="true"]) { opacity: .45; }
.wc-logo { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px;
           background: var(--surface-2); color: var(--fog); font: 600 12px/1 var(--body); text-transform: uppercase; }
.wc-logo img { width: 100%; height: 100%; object-fit: cover; }
.wc-words b, .wc-words small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-words b { font: 600 15px/1.25 var(--body); }
.wc-words small { margin-top: 3px; color: var(--label); font: 13px/1.3 var(--body); }
.wc-row[aria-busy="true"] small { color: var(--accent-text); }
.wc-arrow { color: var(--label); }
.wc-problem { flex: none; margin: 0; padding: 0 20px 16px; color: var(--neg); font: 13px/1.45 var(--body); }
.wc-problem:empty { display: none; }