@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/pixelify-sans-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pixelify-sans-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2');}

/* Layout: header, the office (ticker, scene, key numbers and actions), About, How it works, then the dashboard with the hiring and activity rail. */
:root {
  /* one brand orange for every orange thing: text, fills, borders, icons, active states, progress, the office signs.
     Tints use the same orange at lower opacity. */
  --brand: #e07a2f;
  --brand-ink: #1a1206;  /* dark text on the orange */
  --paper: #f1efea;      /* page: light warm gray */
  --sheet: #fbfaf8;      /* surfaces */
  --sheet-2: #efede8;    /* insets, table heads */
  --tile: #e7e6e2;       /* avatar tile */
  --ink: #1a2233;        /* text */
  --ink-2: #505867;      /* secondary text */
  --rule: #d8d5ce;
  --rule-2: #e6e3dd;
  /* the dark side of the palette: secondary buttons, the ticker, the office's navy plaques */
  --btn: #1c212b;        /* quiet dark button */
  --btn-line: #3a4252;   /* its subtle border */
  --btn-ink: #eef0f3;
  --navy: #1f2d4d;       /* the office plaques and the "buy" data marks */
  --led-bg: #12151b;
  --gain: #2d7650;       /* profit and loss only */
  --loss: #b0402d;
  --focus: var(--ink);
  --shadow: 0 1px 0 rgba(26, 34, 51, .04), 0 10px 28px -20px rgba(26, 34, 51, .35);
  --lift-shadow: 0 6px 14px -8px rgba(10, 14, 24, .45);
  --hatch: rgba(224, 122, 47, .10); /* the brand orange as a light tint */
  --o-ceiling: #d8ceb8; --o-lamp: #fff8e2; --o-wall: #efe5cc; --o-wall2: #dccaa0; --o-trim: #b99d66; --o-floor: #b88b5a; --o-floor2: #a67a4b;
  --o-sky: #aad6ef; --o-sky2: #d9eef7; --o-city: #8ea6bd; --o-citylit: #a9bdd0; --o-frame: #5e4c38; --o-desk: #8b6039; --o-desktop: #a8784b; --o-deskedge: #5f4027;
  --o-chair: #4b505c; --o-monitor: #1c1e23; --o-screen: #0f1d16; --o-screenoff: #3a4048; --o-door: #7d5b3b; --o-doorway: #2a211a;
  --o-plaque: #1f2d4d; --o-plaquetext: #e07a2f; --o-plate: #e07a2f; --o-platetext: #1a1206; --o-nameplate: #1f2d4d; --o-nametext: #e07a2f;
  --o-knob: #c9a15a; --o-clock: #faf7ef; --o-hand: #1f1d19; --o-leaf: #3f8a4f; --o-pot: #b0643a; --o-up: #4fd18b; --o-down: #ff6b5a;
  --f-display: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101318; --sheet: #161a21; --sheet-2: #1d222b; --tile: #232833; --ink: #e8ebf0; --ink-2: #a4abb8; --rule: #2c323d; --rule-2: #232934;
    --btn: #1b2029; --btn-line: #363e4c; --btn-ink: #eef0f3; --navy: #8fa3d1; --led-bg: #0e1116; --gain: #5fc38b; --loss: #ef7d67;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 10px 28px -18px rgba(0,0,0,.8); --lift-shadow: 0 8px 16px -8px rgba(0,0,0,.7); --hatch: rgba(224, 122, 47, .12);
    --o-ceiling: #17181c; --o-lamp: #ffe7a3; --o-wall: #2a2c33; --o-wall2: #22242a; --o-trim: #3b3e47; --o-floor: #3b3029; --o-floor2: #312822;
    --o-sky: #0d1630; --o-sky2: #1a2750; --o-city: #1b2336; --o-citylit: #f3d27a; --o-frame: #111216; --o-desk: #4a3526; --o-desktop: #5d4330; --o-deskedge: #2e2117;
    --o-chair: #1a1c22; --o-monitor: #0a0b0d; --o-screen: #0c1812; --o-screenoff: #23272d; --o-door: #3d2d1f; --o-doorway: #0b0a09;
    --o-plaque: #1f2d4d; --o-nameplate: #1f2d4d; --o-knob: #a8864a; --o-clock: #d9d4c7; --o-hand: #16130f; --o-leaf: #2f6e3d; --o-pot: #7d4527; --o-up: #5fe39a; --o-down: #ff7b6a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #101318; --sheet: #161a21; --sheet-2: #1d222b; --tile: #232833; --ink: #e8ebf0; --ink-2: #a4abb8; --rule: #2c323d; --rule-2: #232934;
  --btn: #1b2029; --btn-line: #363e4c; --btn-ink: #eef0f3; --navy: #8fa3d1; --led-bg: #0e1116; --gain: #5fc38b; --loss: #ef7d67;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 10px 28px -18px rgba(0,0,0,.8); --lift-shadow: 0 8px 16px -8px rgba(0,0,0,.7); --hatch: rgba(224, 122, 47, .12);
  --o-ceiling: #17181c; --o-lamp: #ffe7a3; --o-wall: #2a2c33; --o-wall2: #22242a; --o-trim: #3b3e47; --o-floor: #3b3029; --o-floor2: #312822;
  --o-sky: #0d1630; --o-sky2: #1a2750; --o-city: #1b2336; --o-citylit: #f3d27a; --o-frame: #111216; --o-desk: #4a3526; --o-desktop: #5d4330; --o-deskedge: #2e2117;
  --o-chair: #1a1c22; --o-monitor: #0a0b0d; --o-screen: #0c1812; --o-screenoff: #23272d; --o-door: #3d2d1f; --o-doorway: #0b0a09;
  --o-plaque: #1f2d4d; --o-nameplate: #1f2d4d; --o-knob: #a8864a; --o-clock: #d9d4c7; --o-hand: #16130f; --o-leaf: #2f6e3d; --o-pot: #7d4527; --o-up: #5fe39a; --o-down: #ff7b6a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: var(--hdr, 0px); }
/* while a profile is open the page behind it stays put; the scrollbar's width is kept as padding so nothing shifts */
html.drawer-open { overflow: hidden; padding-right: var(--sbw, 0px); }
@media (max-width: 480px) { .drawer .tabs { padding-inline: 6px; } .drawer .tab { padding-inline: 10px; font-size: 14px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }
.muted { color: var(--ink-2); }
.px svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
button.px { border: 1px solid var(--rule); background: var(--tile); border-radius: 3px; padding: 2px; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; left: 12px; top: 12px; z-index: 70; width: auto; height: auto; clip: auto; padding: 10px 14px; background: var(--btn); color: var(--btn-ink); border-radius: 6px; }

.wrap { padding-inline: clamp(16px, 3vw, 64px); }
@media (min-width: 1100px) { .wrap { padding-inline: max(76px, 4vw); } } /* leaves a gutter for Back to top */
/* below the hero, narrower screens keep the left edge in line with the header and reserve a right gutter for
   Back to top (44 px button + margins) */
@media (max-width: 1099px) { main .wrap, .foot .wrap { padding-right: 64px; } }
@media (max-width: 640px) { main .wrap, .foot .wrap { padding-right: 60px; } }

/* header: the character and a big INUVEST wordmark on the left; the three section buttons, the X link and
   Buy $INUVEST together on the right. Wide screens: one sticky row. Tablets: brand + Buy, then the nav across the
   width (X as a compact button at the end). Phones: brand + Buy + a Menu button that opens the nav (2 x 2). */
.site-header { position: relative; z-index: 45; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.nav-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand . nav cta"; align-items: center; column-gap: 12px; row-gap: 12px; padding-block: 12px; }
.brand { grid-area: brand; display: flex; align-items: center; gap: 18px; min-width: 0; text-decoration: none; border-radius: 8px; }
/* the logo tile: the 24 px drawing at a whole multiple (3x, 2x on phones) plus a 1 px border, so every pixel is square */
.brand .px { position: relative; flex: none; width: 74px; height: 74px; background: var(--tile); border: 1px solid var(--rule); border-radius: 8px; padding: 0; overflow: hidden; }
.brand-name { display: block; font: 700 64px/.8 var(--f-display); letter-spacing: .01em; color: var(--ink); white-space: nowrap; transition: color .2s ease; padding-top: 4px; }
.brand:hover .brand-name, .brand:focus-visible .brand-name { color: var(--brand); }
/* idle life (the logo inu, and the Leaderboard and Staff portraits): a blink, a coffee sip or a head scratch now
   and then, scheduled in app.js. Every pose is a pixel layer inside that inu's own 24 px drawing (its own suit,
   shirt and fur colours), shown and hidden in steps, so nothing scales, moves or changes size. */
.px .lid, .px .sip, .px .scr { opacity: 0; }
.px.act-blink .lid { animation: idleOn .18s steps(1, end) 1; }
.px.act-sip .sip-low { animation: sipLow 1.7s steps(1, end) 1 both; }
.px.act-sip .sip-mid { animation: sipMid 1.7s steps(1, end) 1 both; }
.px.act-sip .sip-up, .px.act-sip .lid { animation: sipUp 1.7s steps(1, end) 1 both; }
.px.act-scratch .scr-m { animation: scrM 1.5s steps(1, end) 1 both; }
.px.act-scratch .scr-a { animation: scrA 1.5s steps(1, end) 1 both; }
.px.act-scratch .scr-b { animation: scrB 1.5s steps(1, end) 1 both; }
@keyframes idleOn { 0%, 100% { opacity: 1; } }
@keyframes sipLow { 0% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: 0; } 80% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sipMid { 0% { opacity: 0; } 22% { opacity: 1; } 32% { opacity: 0; } 70% { opacity: 1; } 80% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sipUp { 0% { opacity: 0; } 32% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes scrM { 0% { opacity: 1; } 10% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scrA { 0% { opacity: 0; } 10% { opacity: 1; } 20% { opacity: 0; } 30% { opacity: 1; } 40% { opacity: 0; } 50% { opacity: 1; } 60% { opacity: 0; } 70% { opacity: 1; } 80% { opacity: 0; } 100% { opacity: 0; } }
@keyframes scrB { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: 0; } 40% { opacity: 1; } 50% { opacity: 0; } 60% { opacity: 1; } 70% { opacity: 0; } 80% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } }
.site-nav { grid-area: nav; display: flex; justify-content: flex-end; gap: 8px; }
/* the X link: last in the nav, so it sits between Trades and Buy; opens x.com in a new tab */
.btn.nav-x { gap: 6px; padding-inline: 16px; font-weight: 700; }
.btn.nav-x svg { width: 11px; height: 11px; display: block; opacity: .75; }
.nav-cta { grid-area: cta; justify-self: end; margin-left: 4px; }
.btn.menu-btn { grid-area: menu; display: none; }
@media (min-width: 1240px) { .site-header { position: sticky; top: 0; } }
@media (max-width: 1239px) {
  .nav-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand cta" "nav nav"; }
  .site-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .brand-name { font-size: 56px; }
}
@media (max-width: 640px) {
  .nav-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand cta menu" "nav nav nav"; column-gap: 8px; padding-block: 10px; }
  .brand { gap: 10px; }
  .brand .px { width: 50px; height: 50px; border-radius: 6px; }
  .brand-name { font-size: 32px; padding-top: 2px; }
  .btn.menu-btn { display: inline-flex; }
  .site-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav .btn { padding-inline: 8px; font-size: 14px; }
  .site-nav:not(.open) { display: none; }
  .btn.nav-cta { padding-inline: 12px; font-size: 14px; gap: 6px; }
  .btn.nav-cta small { font-size: 9.5px; padding: 3px 5px; }
}
@media (max-width: 480px) { .brand .px { width: 38px; height: 38px; } .brand-name { font-size: 28px; } .btn.nav-cta { padding-inline: 10px; font-size: 13.5px; letter-spacing: 0; } }
@media (max-width: 400px) { .brand .px { width: 38px; height: 38px; } .brand-name { font-size: 24px; } }
@media (max-width: 389px) { .btn.nav-cta small { display: none; } }
@media (max-width: 360px) { .brand-name { font-size: 21px; } }
@media (max-width: 340px) { .brand .px { width: 34px; height: 34px; } .brand-name { font-size: 18px; } .btn.nav-cta { padding-inline: 8px; font-size: 13px; } }

/* stat bar under the office: three big orange numbers with neutral labels, spread across the width,
   and the two actions at the same scale on the right. Tablets: numbers, then the actions. Phones: the
   numbers side by side, then the actions. */
.statbar { background: var(--sheet); border-bottom: 1px solid var(--rule); }
.statbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 4vw, 72px); row-gap: 20px; padding-block: 26px 28px; }
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0; }
.stat { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; padding-inline: 16px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat dt { font: 500 17px/1.3 var(--f-body); color: var(--ink-2); text-wrap: balance; }
.stat dd { margin: 0; font: 700 clamp(44px, 4vw, 64px)/1 var(--f-data); font-variant-numeric: tabular-nums; color: var(--brand); letter-spacing: -.02em; }
.stat-actions { display: flex; gap: 14px; padding-left: clamp(32px, 4vw, 72px); border-left: 1px solid var(--rule); align-self: stretch; align-items: center; }
.stat-actions .btn { min-height: 58px; padding: 0 28px; font-size: 17px; }
/* while "Preview a day" runs: a small Preview label, and the button reads "Close preview" */
.preview-tag { display: inline-flex; align-items: center; gap: 7px; align-self: center; padding: 6px 10px; border: 1.5px dashed var(--brand); border-radius: 6px; font: 700 12px/1 var(--f-data); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.preview-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.stat-actions .preview-tag[hidden] + .btn { margin-left: 0; }
.stat-note { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14.5px; color: var(--ink-2); }
.stat-note b { color: var(--ink); font-weight: 600; }
@media (max-width: 1099px) {
  .statbar-row { grid-template-columns: minmax(0, 1fr); padding-block: 22px 24px; }
  .stat-actions { justify-content: center; padding-left: 0; border-left: 0; }
  .stat-actions .btn { min-width: 240px; }
}
@media (max-width: 640px) {
  .statbar-row { row-gap: 18px; padding-block: 20px 22px; }
  .stats[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .stats[data-count="4"] .stat:nth-child(3) { border-left: 0; }
  .stat { padding-inline: 8px; gap: 8px; }
  .stat dd { font-size: clamp(32px, 9vw, 40px); }
  .stat dt { font-size: 14.5px; }
  .stat-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-actions .btn { min-width: 0; width: 100%; min-height: 52px; padding: 0 10px; font-size: 15.5px; }
  .stat-actions .btn[hidden] + .btn { grid-column: 1 / -1; }
  .stat-actions .preview-tag { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 359px) { .stat-actions { grid-template-columns: minmax(0, 1fr); } .site-nav { grid-template-columns: minmax(0, 1fr); } }
.coin-link { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; transition: text-decoration-color .15s ease, color .15s ease; }
.coin-link:hover, .coin-link:focus-visible { text-decoration-color: currentColor; }

/* buttons: one system for every button on the site.
   .btn           secondary: a quiet dark fill with a subtle border and light text
   .btn.btn-hot   primary: the brand orange, dark text, a faint inset edge
   Hover (pointer devices): an orange fill rises from the bottom (a pseudo-element, so nothing reflows), the
   text turns dark, and the button lifts 2 px with a soft shadow. Primary buttons are already orange, so they get
   the same lift plus a darker inset ring. Press: back to rest in 80 ms. Leaving mid-way reverses from wherever
   the fill is, so rapid in/out stays smooth. Focus: a 2 px ring. Reduced motion: no lift, no rising. */
.btn { --ease: cubic-bezier(.2, .8, .2, 1); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--btn); color: var(--btn-ink); font: 600 15px/1 var(--f-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .22s var(--ease), border-color .22s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .24s var(--ease); }
.btn .arr { display: inline-block; transition: transform .18s var(--ease); }
@media (hover: hover) {
  .btn:hover { color: var(--brand-ink); border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--lift-shadow); }
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover .arr { transform: translateX(3px); }
}
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: .08s; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* the section you're in (header) or the option that's on (sort, tabs): filled orange, at rest */
.btn[aria-current="true"], .btn[aria-pressed="true"] { color: var(--brand-ink); border-color: var(--brand); }
.btn[aria-current="true"]::before, .btn[aria-pressed="true"]::before { transform: scaleY(1); }
.btn-hot { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: inset 0 -2px 0 rgba(26, 18, 6, .16); }
.btn-hot::before { display: none; }
@media (hover: hover) { .btn-hot:hover { box-shadow: inset 0 0 0 1px rgba(26, 18, 6, .45), inset 0 -2px 0 rgba(26, 18, 6, .16), var(--lift-shadow); } }
.btn-hot:active { box-shadow: inset 0 0 0 1px rgba(26, 18, 6, .45); }
.btn small { font: 600 10.5px/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 99px; background: color-mix(in srgb, currentColor 16%, transparent); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn-icon { min-height: 0; width: 44px; height: 44px; padding: 0; }
.btn-icon svg { width: 18px; height: 18px; display: block; }
/* unavailable: no motion, dimmed, and it says why in its label */
.btn:disabled, .btn.is-off { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled::before, .btn.is-off::before { transform: scaleY(0); }
.btn:disabled:hover, .btn.is-off:hover { color: var(--btn-ink); border-color: var(--btn-line); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }
.clock-chip { white-space: nowrap; }

/* the office */
.office { overflow: hidden; }
/* ticker: a seamless loop of identical message groups moved exactly one group per pass (see office.js),
   in its own clipped window next to the fixed clock area. Messages never wrap or shrink. */
.ticker { display: flex; align-items: stretch; background: var(--led-bg); color: var(--brand); white-space: nowrap; }
.ticker-window { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ticker-track { display: flex; width: max-content; padding: 11px 0; font: 600 14px/1.25 var(--f-data); letter-spacing: .12em; will-change: transform; }
.tk-group { display: flex; flex: none; }
.tk { flex: none; white-space: nowrap; padding-left: 1.2em; }
.tk::after { content: "·"; padding-left: 1.2em; opacity: .6; }
.ticker-meta { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 clamp(10px, 1.6vw, 20px); border-left: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); font: 600 12.5px/1.2 var(--f-data); letter-spacing: .1em; text-transform: uppercase; }
.ticker-meta .note { display: none; } /* the stat bar already says paper / sample / live */
/* the pause button is a small member of the button system (dark, orange rising on hover) */
.btn.ticker-pause { flex: none; width: 30px; height: 30px; border-radius: 5px; color: var(--brand); background: transparent; border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.btn.ticker-pause svg { width: 12px; height: 12px; }
.btn.ticker-pause:hover { box-shadow: none; transform: none; }
.btn.ticker-pause:focus-visible { outline-color: var(--brand); }
@media (max-width: 560px) { .ticker-meta { padding: 0 8px; } .clock-chip { display: none; } }
.stage { position: relative; background: var(--o-floor); line-height: 0; overflow: hidden; }
.stage canvas { display: block; margin: 0 auto; image-rendering: pixelated; image-rendering: crisp-edges; max-width: none; }
.bubbles { position: absolute; inset: 0; pointer-events: none; line-height: 1.2; }
.bubble { position: absolute; transform: translate(-50%, -100%); background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; padding: .36em .64em; font: 600 clamp(11px, calc(6px + var(--s, 3) * 1.6px), 17px)/1.2 var(--f-data); letter-spacing: .03em; white-space: nowrap; box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 25%, transparent); animation: pop .18s ease; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.bubble.first { background: var(--brand); color: var(--brand-ink); }
.bubble.down { color: var(--loss); }
@keyframes pop { from { transform: translate(-50%, -80%); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } }

/* sections */
.section { padding-block: clamp(44px, 5vw, 76px); }
.section.alt { background: var(--sheet); border-block: 1px solid var(--rule); }
.lede { margin: 0; max-width: 58ch; font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6; color: var(--ink); }
/* About and How it works share one heading layout: the section's name large on the left (pixel type), and on
   the right an orange headline, then (About only) the paragraph and the button. Phones and tablets: stacked. */
.sec-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 14px; align-items: baseline; }
.sec-title { margin: 0; font: 700 clamp(40px, 4.8vw, 72px)/.95 var(--f-display); letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
.sec-headline { margin: 6px 0 14px; font: 700 clamp(26px, 2.5vw, 36px)/1.12 var(--f-display); letter-spacing: .01em; color: var(--brand); text-wrap: balance; }
.sec-body > :last-child { margin-bottom: 0; }
.sec-grid.head { margin-bottom: clamp(24px, 2.8vw, 36px); }
@media (max-width: 900px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } .sec-headline { margin-top: 0; } }
/* The introduction (#about): a slim centered band, the orange headline with the paragraph under it. The block is
   as wide as the headline (the paragraph doesn't widen it, thanks to contain: inline-size, and then fills it), so on
   desktop the paragraph runs about the headline's width in two lines (never narrower than 760 px while there is room,
   so tablets keep two lines too); phones wrap it naturally. The side
   padding stays equal on every screen (Back to top only appears once this band is at the top of the screen). */
#about.section { padding-block: clamp(22px, 2.6vw, 40px); }
@media (max-width: 1099px) { #about .wrap { padding-right: clamp(16px, 3vw, 64px); } }
.intro { display: flex; flex-direction: column; width: fit-content; min-width: min(100%, 760px); max-width: 100%; margin-inline: auto; text-align: center; }
.about-headline { margin: 0 0 10px; font: 700 clamp(28px, 3.3vw, 56px)/1.1 var(--f-display); letter-spacing: .01em; color: var(--brand); text-wrap: balance; }
.intro .lede { contain: inline-size; max-width: none; font-size: clamp(18px, 1.45vw, 21px); text-wrap: pretty; }

/* information cards (an inu's first day, how it works): one neutral resting state; the hovered card gets an
   orange border and a light orange tint. They are not links, so no pointer cursor and no movement. */
.info-card { border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); transition: border-color .2s ease, background-color .2s ease; }
@media (hover: hover) { .info-card:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--sheet)); } }

.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
@media (max-width: 1024px) { .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .how-steps { grid-template-columns: minmax(0, 1fr); } }
.how-steps li { counter-increment: s; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; background: var(--paper); }
.how-steps li::before { content: counter(s, decimal-leading-zero); font: 700 18px/1 var(--f-data); color: var(--brand); margin-bottom: 4px; letter-spacing: .02em; }
.how-steps h3 { margin: 0; font: 700 18px/1.3 var(--f-body); color: var(--ink); }
.how-steps p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.how-steps .info-card { background: var(--paper); }
@media (hover: hover) { .how-steps .info-card:hover { background: color-mix(in srgb, var(--brand) 7%, var(--paper)); } }

/* secondary rules: compact disclosures (caret + label, the whole bar is the control) */
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
@media (max-width: 1024px) { .more-grid { grid-template-columns: minmax(0, 1fr); } }
.disclosure { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); overflow: hidden; }
/* the disclosure bars are primary-orange controls: the same inset ring on hover and the same timing as buttons,
   with a chevron (and Show/Hide) that says open or closed */
.disclosure summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 56px; font: 700 16.5px/1.2 var(--f-body); color: var(--brand-ink); background: var(--brand); box-shadow: inset 0 -2px 0 rgba(26, 18, 6, .16); cursor: pointer; list-style: none; transition: box-shadow .18s cubic-bezier(.2, .8, .2, 1); }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: ""; margin-left: 10px; flex: none; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.disclosure[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.disclosure summary small { font: 600 12px/1 var(--f-data); letter-spacing: .06em; padding: 3px 7px; border-radius: 99px; background: color-mix(in srgb, var(--brand-ink) 14%, transparent); }
.disclosure summary .state { margin-left: auto; font: 600 12.5px/1 var(--f-body); letter-spacing: .02em; opacity: .85; }
.disclosure .state::before { content: "Show"; }
.disclosure[open] .state::before { content: "Hide"; }
@media (hover: hover) { .disclosure summary:hover { box-shadow: inset 0 0 0 1px rgba(26, 18, 6, .45), inset 0 -2px 0 rgba(26, 18, 6, .16); } .disclosure:not([open]) summary:hover::after { transform: translateY(0) rotate(45deg); } }
.disclosure summary:active { box-shadow: inset 0 0 0 1px rgba(26, 18, 6, .45); }
.disclosure summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 6px; }
.disclosure[open] summary { border-bottom: 1px solid rgba(26, 18, 6, .25); }
.disclosure dl { margin: 0; padding: 4px 18px 10px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 16px; }
.disclosure dt, .disclosure dd { padding: 9px 0; border-top: 1px solid var(--rule-2); font-size: 14.5px; line-height: 1.5; }
.disclosure dt:first-of-type, .disclosure dt:first-of-type + dd { border-top: 0; }
.disclosure dt { font-weight: 600; color: var(--brand); } /* entry titles in the brand orange; their text stays neutral */
.disclosure dd { margin: 0; color: var(--ink-2); }
.disclosure.stack dl { grid-template-columns: minmax(0, 1fr); }
.disclosure.stack dd { border-top: 0; padding-top: 0; }
@media (max-width: 480px) { .disclosure dl { grid-template-columns: minmax(0, 1fr); } .disclosure dd { border-top: 0; padding-top: 0; } }

.first-chip { font: 600 10.5px/1 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand); border-radius: 4px; padding: 4px 7px; white-space: nowrap; }
/* main grid */
.floor-sec { padding-block: clamp(36px, 4.5vw, 64px) clamp(44px, 5vw, 76px); }
/* one grid row for the dashboard and the rail. Both start on the same line and end on the same line: the
   dashboard shows one page of about eight entries, and whichever side is shorter stretches (the dashboard's
   panel, or the rail's last card), so the bottoms always meet. Phones and tablets: stacked, natural heights. */
.floor { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 400px); gap: clamp(20px, 2vw, 28px); align-items: stretch; }
@media (max-width: 1180px) { .floor { grid-template-columns: minmax(0, 1fr); } }

/* the dashboard: the tab bar is the top edge of the panel it controls */
.folder { min-width: 0; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 8px 0; background: var(--sheet-2); border-bottom: 1px solid var(--rule); }
.tabs::-webkit-scrollbar { display: none; }
/* when the tabs don't fit, fade the edge that has more tabs behind it */
.tabs.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.tabs.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.tabs.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* tabs use the button system's orange and timing: hover raises a light orange tint, the selected tab is filled
   orange (dark text) and joins the panel below */
.tab { --ease: cubic-bezier(.2, .8, .2, 1); position: relative; isolation: isolate; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--ink-2); border: 0; border-radius: 6px 6px 0 0; padding: 13px 16px 14px; font: 600 15px/1 var(--f-body); cursor: pointer; transition: color .22s var(--ease); }
.tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--brand) 16%, transparent); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .24s var(--ease), background-color .22s var(--ease); }
@media (hover: hover) { .tab:hover { color: var(--ink); } .tab:hover::before { transform: scaleY(1); } }
.tab[aria-selected="true"] { color: var(--brand-ink); }
.tab[aria-selected="true"]::before { transform: scaleY(1); background: var(--brand); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.tab .count { font: 600 12px/1 var(--f-data); color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); border-radius: 99px; padding: 3px 7px; }
@media (max-width: 480px) { .tabs { padding: 6px 4px 0; gap: 2px; } .tab { padding-inline: 10px; font-size: 14px; } }
.panel { flex: 1 1 auto; display: flex; flex-direction: column; background: var(--sheet); container-type: inline-size; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 20px 14px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { margin: 0; font: 700 22px/1.15 var(--f-display); letter-spacing: .03em; text-wrap: balance; }
.panel-head p { margin: 5px 0 0; color: var(--ink-2); font-size: 15px; }
.panel-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.panel-head h2 .preview-chip { margin-left: 6px; position: relative; top: -2px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* pagination: a result count and Previous / Next, pinned to the bottom of the panel */
.pager { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 20px; border-top: 1px solid var(--rule); }
.pager .count { font: 500 14px/1.2 var(--f-data); color: var(--ink-2); }
.pager .count b { color: var(--ink); font-weight: 600; }
.pager .btns { display: flex; gap: 8px; }
.preview-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1.5px dashed var(--brand); border-radius: 5px; font: 700 11px/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); vertical-align: middle; }

/* ledger table */
.table-wrap { overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th { position: sticky; top: 0; background: var(--sheet-2); text-align: left; font: 600 11.5px/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 11px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ledger td { padding: 10px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
.ledger tr.row { cursor: pointer; }
.ledger tr.row td { transition: background-color .12s ease; }
.ledger tr.row:hover td { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.ledger tr.row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ledger .r { text-align: right; }
.ledger td.num, .ledger td .num { white-space: nowrap; }
.ledger td.big { font-weight: 700; font-size: 15px; }
.who { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.who .px { flex: none; width: 50px; height: 50px; background: var(--tile); border-radius: 5px; border: 1px solid var(--rule); padding: 0; }
.who b { display: block; font: 600 14px/1.2 var(--f-data); }
.who .sub { display: block; font-size: 13px; line-height: 1.35; color: var(--ink-2); margin-top: 3px; }
.who.mini { min-width: 0; }
.who.mini b { white-space: nowrap; }
.who .st-sm { display: none; }
.ledger td > .st { margin-top: 0; }
/* trades and positions on phones: each row folds into two lines (who and result, then the details and amount) */
.ledger .c-meta { display: none; }
.memo-cell { font: 500 12.5px/1.4 var(--f-data); color: var(--ink-2); letter-spacing: .02em; min-width: 200px; max-width: 420px; }
.side { font: 600 11px/1 var(--f-data); letter-spacing: .08em; padding: 4px 6px; border-radius: 3px; border: 1px solid currentColor; }
.side.buy { color: var(--navy); } .side.sell { color: var(--brand); } .side.burn { color: var(--brand); }
.rank { font: 700 15px/1 var(--f-data); color: var(--ink-2); width: 48px; }
.rank.top { color: var(--brand); }
.sm-only { display: none; }
@media (max-width: 1400px) { .opt-md { display: none; } }
@media (max-width: 720px) { .opt { display: none; } }
@media (max-width: 560px) {
  .pv-close { display: none; } /* phones: the stat bar's Close preview is enough */
  .seg { gap: 5px; }
  .seg .btn-sm { padding: 0 10px; font-size: 13px; min-height: 34px; }
  .panel-head { padding: 14px 14px 12px; }
  .pager { padding: 12px 14px; }
  .pager .count { font-size: 13px; }
  .ledger th, .ledger td { padding-inline: 8px; }
  .ledger th:first-child, .ledger td:first-child { padding-left: 14px; }
  .ledger th:last-child, .ledger td:last-child { padding-right: 14px; }
  .opt-sm { display: none; }
  .sm-only { display: inline; }
  .rank { width: 30px; }
  .who { min-width: 0; gap: 9px; }
  .who b { font-size: 13px; overflow-wrap: anywhere; }
  .who .sub { font-size: 12px; overflow-wrap: anywhere; }
  .who .st-sm { display: block; margin-top: 6px; }
  .who .st-sm .st { margin-top: 0; }
  .who.mini b { white-space: normal; }
  .ledger.fold thead { display: none; }
  .ledger.fold tr.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who res" "meta amt"; align-items: center; gap: 8px 14px; padding: 12px 14px; border-bottom: 1px solid var(--rule-2); }
  .ledger.fold tr.row > td { display: none; padding: 0; border: 0; }
  .ledger.fold tr.row > td.c-who { display: block; grid-area: who; }
  .ledger.fold tr.row > td.c-res { display: block; grid-area: res; font-weight: 700; }
  .ledger.fold tr.row > td.c-amt { display: block; grid-area: amt; }
  .ledger.fold tr.row > td.c-meta { display: block; grid-area: meta; font: 500 12.5px/1.4 var(--f-data); min-width: 0; }
  .ledger.fold tr.row:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
  .ledger.fold tr.row:hover td { background: transparent; }
}

/* empty states: the picture, the heading and one sentence, scaled to the panel and centered in it.
   Pixel art sits at whole multiples of its 24 px grid so every pixel stays square. */
.empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: clamp(32px, 4vw, 56px) 24px; }
.empty h3 { margin: 10px 0 0; font: 700 clamp(24px, 2.2vw, 30px)/1.15 var(--f-display); letter-spacing: .03em; }
.empty p { margin: 0; max-width: 44ch; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.5; }
.panel { container-type: inline-size; }
.lineup { --lu: 82px; display: grid; grid-template-columns: repeat(3, var(--lu)); gap: 12px; justify-content: center; margin-bottom: 8px; }
.lineup .px { width: var(--lu); height: var(--lu); padding: 4px; background: var(--tile); border: 1px dashed var(--rule); border-radius: 8px; cursor: pointer; transition: border-color .15s ease; }
@media (hover: hover) { .lineup .px:hover { border-color: var(--brand); border-style: solid; } }
/* tile = the 24 px art at 3, 4, 5 or 6x (+ padding and border), chosen from the panel's own width */
@container (min-width: 420px) { .lineup { --lu: 106px; gap: 16px; } }
@container (min-width: 820px) { .lineup { grid-template-columns: repeat(6, var(--lu)); gap: clamp(16px, 3cqi, 40px); } }
@container (min-width: 950px) { .lineup { --lu: 130px; gap: clamp(16px, 2.4cqi, 40px); } }
@container (min-width: 1120px) { .lineup { --lu: 154px; } }
.desk-art { display: block; width: 232px; height: 184px; image-rendering: pixelated; image-rendering: crisp-edges; margin-bottom: 4px; }
@media (max-width: 480px) { .desk-art { width: 174px; height: 138px; } }
.empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 10px; }
.empty-actions .btn { min-height: 48px; padding-inline: 22px; font-size: 15.5px; }

/* staff: a compact grid of same-size cards (eight to a page); a card opens the Inu's profile */
.staff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px 20px; }
@container (max-width: 640px) { .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; } .staff-grid .staff-card .px { width: 74px; height: 74px; } }
.staff-card { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 18px 10px 16px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; text-align: center; cursor: pointer; transition: border-color .22s ease, background-color .22s ease, transform .18s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .staff-card:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--sheet)); transform: translateY(-2px); } }
.staff-card:active { transform: none; }
.staff-card .px { width: 98px; height: 98px; background: var(--tile); border-radius: 6px; border: 1px solid var(--rule); padding: 0; margin-bottom: 4px; }
.staff-card b { font: 600 14px/1.2 var(--f-data); color: var(--ink); }
.staff-card .t { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
/* status chips: trading (brand), waiting (neutral), retired (struck) */
.st { display: inline-block; margin-top: 4px; font: 600 11px/1 var(--f-data); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; white-space: nowrap; }
.st-floor { color: var(--brand-ink); background: var(--brand); }
.st-wait { color: var(--ink-2); background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--rule); }
.st-retired { color: var(--ink-2); background: var(--sheet-2); text-decoration: line-through; }

/* shared small headings and notes */
.h3 { font: 700 17px/1.2 var(--f-display); letter-spacing: .04em; margin: 0 0 10px; }
.draft { font: 500 12px/1.4 var(--f-data); color: var(--ink-2); border-left: 3px solid var(--rule); padding: 6px 10px; background: var(--sheet-2); }

/* the hire split in a profile's Payroll */
.split { display: grid; grid-template-columns: 1fr 2fr; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.split > div { padding: 14px 14px 12px; }
.split .a { background: color-mix(in srgb, var(--brand) 16%, var(--sheet)); border-right: 1px solid var(--rule); }
.split .b { background: color-mix(in srgb, var(--btn) 12%, var(--sheet)); }
.split .amt { font: 700 22px/1 var(--f-data); }
.split .lbl { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.split .lbl b { color: var(--ink); font-weight: 600; }

/* rail */
.rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rail > .card:last-child { flex: 1 1 auto; }
@media (max-width: 1180px) and (min-width: 700px) { .rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--rule); }
.card-h h2 { margin: 0; font: 700 19px/1.1 var(--f-display); letter-spacing: .04em; }
.card-h span { font: 500 12px/1 var(--f-data); color: var(--ink-2); letter-spacing: .06em; }
/* next hire: the candidate, then the creator-fee progress. Hiring your own inu sits apart, below. */
.hiring { padding: 18px 18px 20px; display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 16px; align-items: center; }
.hiring .px { width: 122px; height: 122px; background: var(--tile); border-radius: 6px; border: 1px solid var(--rule); padding: 0; cursor: pointer; transition: border-color .22s ease; }
@media (hover: hover) { .hiring .px:hover { border-color: var(--brand); } }
.hiring .pos { font: 700 17px/1.2 var(--f-data); color: var(--ink); }
.hiring .quote { font: 500 13.5px/1.45 var(--f-body); font-style: italic; margin-top: 6px; color: var(--ink-2); }
.meter { grid-column: 1 / -1; }
.meter-top { display: grid; gap: 6px; margin-bottom: 10px; font: 500 14px/1.3 var(--f-body); color: var(--ink-2); }
.meter-top b { font: 700 20px/1 var(--f-data); color: var(--ink); white-space: nowrap; }
.meter-top b span { color: var(--ink-2); font-weight: 500; }
.bar { height: 12px; border-radius: 99px; background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; min-width: 0; border-radius: 99px; background: var(--brand); transition: width .8s ease; }
.meter p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.own { padding: 16px 18px 18px; border-top: 1px dashed var(--rule); background: var(--sheet-2); display: grid; gap: 10px; }
.own p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.own p b { color: var(--ink); font-weight: 600; }
.own .btn { justify-self: stretch; }
.wire { list-style: none; margin: 0; padding: 4px 0; }
.wire li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 9px 18px; font: 500 13px/1.45 var(--f-data); border-bottom: 1px solid var(--rule-2); }
.wire li:last-child { border-bottom: 0; }
.wire time { color: var(--ink-2); }
.wire li.empty-w { display: block; padding: 14px 18px 16px; font: 400 14.5px/1.5 var(--f-body); color: var(--ink-2); }
.wire li.fresh { animation: drop .5s ease; }
@keyframes drop { from { background: color-mix(in srgb, var(--brand) 18%, transparent); } to { background: transparent; } }

/* toast */
.toast { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: min(380px, calc(100vw - 32px)); background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 20%, transparent); display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; padding: 12px; animation: rise .35s ease; }
.toast .px { width: 50px; height: 50px; background: var(--tile); border: 1px solid var(--rule); border-radius: 4px; }
.toast .from { font: 600 11px/1.2 var(--f-data); letter-spacing: .08em; color: var(--brand); text-transform: uppercase; }
.toast .msg { font: 600 13px/1.35 var(--f-data); margin-top: 4px; }
.toast .sub { font: 500 11px/1.2 var(--f-data); color: var(--ink-2); margin-top: 5px; }
.toast button { align-self: start; background: none; border: 0; font: 600 16px/1 var(--f-data); color: var(--ink-2); cursor: pointer; padding: 2px 4px; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* modal */
.scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, #0b0a08 55%, transparent); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.sheet { width: min(760px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); max-height: calc(100vh - 32px); overflow-y: auto; }
.sheet-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--sheet-2); position: sticky; top: 0; z-index: 1; }
.sheet-h h2 { margin: 0; font: 700 18px/1 var(--f-display); letter-spacing: .06em; }
.btn-close { width: 40px; height: 40px; flex: none; }
.btn-close svg { width: 16px; height: 16px; }
.idcard { background: var(--sheet-2); color: var(--ink); border-radius: 8px; padding: 14px 14px 16px; display: grid; gap: 8px; justify-items: center; text-align: center; align-self: start; border: 1px solid var(--rule); }
.idcard .org { font: 700 12px/1 var(--f-display); letter-spacing: .2em; }
.idcard .px { width: 154px; height: 154px; max-width: 100%; background: var(--tile); border-radius: 4px; padding: 4px; border: 1px solid var(--rule); }
.idcard .id { font: 700 20px/1 var(--f-data); color: var(--ink); }
.idcard .role { font: 500 12.5px/1.3 var(--f-body); }

/* an Inu's profile: a drawer from the right with Overview, Trades, Open positions, Burns and Payroll. The drawer
   is the one scroll area; long histories page inside it. */
.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 14, .52); opacity: 0; transition: opacity .22s ease; }
.drawer-scrim.open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(600px, 100vw); display: flex; flex-direction: column; background: var(--sheet); border-left: 1px solid var(--rule); box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .6); transform: translateX(104%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.drawer-head .px { flex: none; width: 74px; height: 74px; background: var(--tile); border: 1px solid var(--rule); border-radius: 6px; padding: 0; }
.drawer-head h2 { margin: 0; font: 700 26px/1 var(--f-display); letter-spacing: .02em; }
.drawer-head p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.drawer-head .btn-icon { margin-left: auto; align-self: flex-start; }
.drawer .tabs { padding-inline: 12px; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: grid; grid-auto-rows: max-content; align-content: start; gap: 16px; }
.drawer-body .pager { padding-inline: 0; border-top: 0; }
.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 14.5px; }
.fields dt { font: 600 11.5px/1.7 var(--f-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fields dd { margin: 0; }
.fields a { color: var(--ink); text-decoration-color: var(--brand); text-underline-offset: 3px; }
.minigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.minigrid div { background: var(--sheet); padding: 11px 12px; }
.minigrid dt { font: 600 10.5px/1.2 var(--f-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.minigrid dd { margin: 6px 0 0; font: 700 16px/1 var(--f-data); font-variant-numeric: tabular-nums; }
.minigrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .linkish:hover { color: var(--brand); } }
.memo-sub { display: block; margin-top: 5px; font: 500 12px/1.4 var(--f-data); color: var(--ink-2); letter-spacing: .02em; }
.drawer .ledger td { vertical-align: top; }
.drawer .h3 { margin: 0; }
.drawer-head h2 .preview-chip { margin-left: 8px; font-size: 10.5px; }
.note-quote { margin: 0; font: 600 13.5px/1.45 var(--f-data); border-left: 3px solid var(--brand); padding: 8px 12px; background: var(--sheet-2); }
.drawer .empty { padding: 28px 10px; }
.drawer .empty h3 { font-size: 20px; }
@media (max-width: 480px) { .minigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fields { grid-template-columns: minmax(0, 1fr); gap: 2px; } .fields dd { margin-bottom: 8px; } }

/* hire form */
.hire { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; padding: 20px 18px 22px; }
@media (max-width: 640px) { .hire { grid-template-columns: minmax(0, 1fr); } }
.hire form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font: 600 11px/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select { background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; font: 500 14px/1.2 var(--f-data); width: 100%; }
.field .hint { font-size: 12px; color: var(--ink-2); }
.field input:focus-visible, .field select:focus-visible { outline-offset: 1px; }
.handle-prev { font: 600 14px/1.3 var(--f-data); word-break: break-all; }
.note { font-size: 14px; line-height: 1.5; border-left: 3px solid var(--brand); color: var(--ink); border-radius: 0 6px 6px 0; padding: 10px 14px; background: var(--hatch); }

footer.foot { border-top: 1px solid var(--rule); background: var(--sheet); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); font: 500 13px/1.5 var(--f-body); color: var(--ink-2); }
.foot-row b { font: 700 15px/1 var(--f-display); letter-spacing: .04em; color: var(--ink); margin-right: 8px; }

/* back to top: one small square orange button, bottom right, in the button system. It appears once the office
   is behind you and stays to the very bottom. Everything below the hero keeps a right gutter at least as wide as
   the button, so it never sits on text or controls. */
.to-top { position: fixed; right: 13px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 44; flex-direction: column; gap: 3px; width: 50px; height: 50px; min-height: 0; padding: 0; font: 700 10.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s, transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s cubic-bezier(.2, .8, .2, 1); }
.to-top .arr { font-size: 16px; line-height: 1; }
.to-top.show { opacity: 1; visibility: visible; }
@media (hover: hover) { .to-top:hover .arr { transform: translateY(-2px); } }
@media (max-width: 1099px) { .to-top { width: 44px; height: 44px; right: 9px; font-size: 9.5px; } .to-top .arr { font-size: 14px; } }

/* 404 */
.lost { min-height: 70vh; display: grid; place-items: center; padding-block: 48px; }
.lost-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); padding: 32px 28px; text-align: center; display: grid; justify-items: center; gap: 10px; max-width: 460px; }
.lost-inu { display: block; width: 152px; height: 152px; background: var(--tile); border-radius: 4px; padding: 4px; }
.lost-id { font: 600 12px/1 var(--f-data); letter-spacing: .14em; color: var(--ink-2); margin: 6px 0 0; }
.lost h1 { font: 700 26px/1.1 var(--f-display); margin: 0; text-wrap: balance; }
.lost p { margin: 0; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}