/* tabby website. Harbor ground, Foam text, Marmalade (the cat) as the one accent.
   Session colors appear only inside imagery, product renders and theme data. */
:root {
  --harbor: #0f3a3c;
  --harbor-deep: #0a2b2d;
  --harbor-raised: #16494b;
  --harbor-hero: #0f363a; /* the hero art's own ground */
  --foam: #eef6f2;
  --foam-soft: #b9ccc6; /* 7.3:1 on Harbor */
  --marmalade: #f4913e;
  --line: rgb(238 246 242 / 0.14);
  --display: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 6vw;
  --ease: cubic-bezier(0.3, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--harbor); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--harbor); color: var(--foam); font: 400 17px/1.5 var(--display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
code, kbd, pre { font-family: var(--mono); }
h1, h2, h3, p, figure, dl, dd, ul, pre, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgb(244 145 62 / 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--marmalade); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--marmalade); color: #1b1206; font-weight: 600; }
.skip:focus { top: 12px; }

.section { padding: clamp(72px, 9vw, 112px) var(--gutter); }
.center { text-align: center; }
.h2 { font: 600 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -0.035em; }
.lede { margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--foam-soft); }
.lede.narrow { max-width: 52ch; margin-left: auto; margin-right: auto; }
.lede a { color: var(--foam); text-decoration: underline; text-decoration-color: rgb(238 246 242 / 0.4); text-underline-offset: 4px; }
.lede a:hover { text-decoration-color: var(--marmalade); }
.eyebrow { font: 500 13px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--marmalade); }
.kbd { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--harbor-raised); font-size: 14px; line-height: 1.1; color: var(--foam); }

/* Nav: a terminal tab bar. The section on screen is the selected tab. */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 40px); height: 64px; padding: 0 var(--gutter); background: rgb(15 54 58 / 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgb(238 246 242 / 0.08); }
.nav-brand { display: flex; align-items: center; gap: 10px; align-self: center; font: 700 22px/1 var(--display); letter-spacing: -0.02em; }
.nav-tabs { display: flex; gap: 4px; }
.nav-tab { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 10px 10px 0 0; background: rgb(238 246 242 / 0.04); color: var(--foam-soft); font: 500 15px/1 var(--display); transition: transform 0.25s var(--ease), background 0.2s, color 0.2s; }
.nav-tab:hover { transform: translateY(-3px); background: rgb(238 246 242 / 0.08); color: var(--foam); }
.nav-tab[aria-current="true"] { transform: none; background: var(--harbor); color: var(--foam); box-shadow: inset 0 2px 0 var(--marmalade); }
.nav-gh { margin-left: auto; align-self: center; color: var(--foam-soft); font: 500 15px/1 var(--display); }
.nav-gh:hover { color: var(--foam); }
@media (max-width: 767px) { .nav { padding: 0 20px; } .nav-tab:not([data-keep]) { display: none; } }

/* Hero: image-as-canvas. The dormant art sits under the lit art (and its animated loop);
   a spotlight mask that follows the cursor reveals tabby's colors. */
/* The art is 16:9 and anchored right, so the hero never grows taller than half the width: it stays clear of the headline. */
.hero { position: relative; overflow: hidden; height: clamp(520px, min(82dvh, 50vw), 880px); background: var(--harbor-hero); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 16%; background: linear-gradient(to bottom, transparent, var(--harbor)); pointer-events: none; }
.hero-art { position: absolute; inset: 0; --rx: 86.6%; --ry: 16%; --rr: 300px; }
.hero-art img, .hero-art video { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.hero-lit { -webkit-mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), #000 52%, transparent 100%); mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), #000 52%, transparent 100%); }
.hero-video { opacity: 0; transition: opacity 0.6s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-art[data-mode="full"] .hero-lit { -webkit-mask-image: none; mask-image: none; }
.hero-copy { position: relative; z-index: 2; padding: clamp(40px, 11dvh, 120px) var(--gutter) 0; }
.hero-copy-inner { max-width: 620px; }
.hero-title { font: 650 clamp(44px, 5vw, 76px)/0.98 var(--display); letter-spacing: -0.035em; }
.hero-sub { max-width: 30ch; margin-top: 24px; font-size: 19px; line-height: 1.5; color: var(--foam-soft); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 36px; }
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column-reverse; height: auto; }
  .hero-art { position: relative; aspect-ratio: 16 / 9; }
  .hero-art img, .hero-art video { width: 100%; height: 100%; }
  .hero-copy { max-width: none; padding: 48px 20px 8px; }
}

/* Primary CTA: a mono readout that decodes into the command. */
.readout { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 18px; overflow: hidden; border: 1.5px solid var(--marmalade); border-radius: 12px; background: rgb(244 145 62 / 0.08); color: var(--foam); font: 500 16px/1 var(--mono); transition: background 0.2s, transform 0.15s; }
.readout:hover { background: rgb(244 145 62 / 0.16); }
.readout:active { transform: translateY(1px) scale(0.99); }
.readout-prompt { color: var(--marmalade); }
.readout-slot { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.readout-label, .readout-cmd { display: block; white-space: nowrap; transition: transform 0.38s var(--ease); }
.readout-cmd { position: absolute; left: 0; top: 0; transform: translateY(120%); color: var(--marmalade); }
.readout:hover .readout-label, .readout:focus-visible .readout-label { transform: translateY(-120%); }
.readout:hover .readout-cmd, .readout:focus-visible .readout-cmd { transform: none; }

/* Secondary CTA: the underline is a tab outline that draws in on hover. */
.pathlink { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0 12px; font: 500 16px/1 var(--display); }
.pathlink svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 9px; overflow: visible; }
.pathlink path { fill: none; stroke: var(--foam-soft); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke 0.2s; }
.pathlink:hover path { stroke: var(--marmalade); animation: pathlink-draw 0.7s var(--ease); }
.pathlink-arrow { transition: transform 0.3s var(--ease); }
.pathlink:hover .pathlink-arrow { transform: translateX(5px); }
@keyframes pathlink-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Anatomy: one tab, annotated. Positions are measured from tab-macro.webp (2400 x 1029). */
.tabmacro { position: relative; max-width: 1200px; margin: 56px auto 0; container-type: inline-size; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }
.tabmacro > img { width: 100%; height: auto; }
.tabmacro-title { position: absolute; left: 21.6%; top: 76.1%; transform: translateY(-52%); white-space: nowrap; color: var(--foam); font: 500 clamp(11px, 2.35cqw, 30px)/1 var(--mono); }
.tabmacro-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tabmacro-lines line { stroke: rgb(238 246 242 / 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tabmacro-lines circle { fill: var(--foam); }
.callout { position: absolute; top: 5.9%; width: 25%; }
.callout-label { display: flex; align-items: center; gap: 8px; color: var(--marmalade); font: 500 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.callout-label img { width: 22px; height: 22px; }
.callout-body { display: block; margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--foam-soft); }
.callout-list { display: none; }
@media (max-width: 767px) {
  .callout, .tabmacro-lines { display: none; }
  .callout-list { display: grid; gap: 20px; max-width: 520px; margin: 32px auto 0; }
  .callout-list li { display: flex; gap: 16px; }
  .callout-list img { width: 36px; height: 36px; flex: none; }
  .callout-list b { display: block; font-weight: 600; }
  .callout-list span { color: var(--foam-soft); }
  .callout-list b { color: var(--foam); }
}

/* Island: real renders stacked like cards. */
.island-grid { display: grid; gap: 56px; align-items: end; max-width: 1240px; margin: 0 auto; }
.island-copy .h2 { margin-top: 16px; }
.island-copy .lede { max-width: 44ch; }
.shortcuts { margin: 40px 0 0; border-top: 1px solid var(--line); }
.shortcuts div { display: flex; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.shortcuts dt { flex: none; width: 7.5rem; }
.shortcuts dd { color: var(--foam-soft); }
.island-stack { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 10 / 9; }
.island-stack img { position: absolute; height: auto; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.45)); }
.island-detailed { right: 0; top: 10%; width: 52%; opacity: 0.9; transform: rotate(2deg); }
.island-standard { left: 0; top: 16%; width: 62%; transform: rotate(-1.5deg); }
.island-waiting { left: 6%; top: 0; width: 88%; }
@media (min-width: 1024px) { .island-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 1023px) { .island-copy { order: 2; } .island-stack { order: 1; } }

/* Tile: oversized numerals are the hit area. */
.tile { overflow: hidden; text-align: center; }
.numerals { display: flex; align-items: center; justify-content: center; gap: 1.5vw; max-width: 1240px; margin: 48px auto 0; }
.numeral { padding: 0 0.02em; border: 0; background: none; cursor: pointer; color: var(--harbor); font: 700 clamp(84px, 15vw, 232px)/0.9 var(--display); letter-spacing: -0.04em; -webkit-text-stroke: 4px rgb(238 246 242 / 0.85); paint-order: stroke fill; /* the fill hides the font's overlapping inner contours */ transition: color 0.25s, -webkit-text-stroke-color 0.25s, transform 0.3s var(--ease); }
.numeral:hover { -webkit-text-stroke-color: var(--foam); transform: translateY(-4px); }
.numeral[aria-checked="true"] { color: var(--marmalade); -webkit-text-stroke-color: var(--marmalade); transform: none; }
.tile-detail { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; }
.grid-diagram { width: 176px; height: auto; }
.tile-cmd { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.tile-cmd img, .tile-jump img { width: 28px; height: 28px; }
.tile-note { max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--foam-soft); }
.tile-jump { display: flex; align-items: center; gap: 12px; color: var(--foam-soft); }

/* Themes: swatch chips that flip to their contrast readout. */
.themes { padding: clamp(72px, 9vw, 112px) 0; }
.themes-head { padding: 0 var(--gutter); }
.themes-head .h2 { max-width: 16ch; }
.themes-head .lede { max-width: 56ch; }
.rail { display: flex; gap: 20px; margin-top: 48px; padding: 4px var(--gutter) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-color: rgb(238 246 242 / 0.25) transparent; }
.chip { flex: 0 0 auto; width: 196px; height: 300px; perspective: 900px; scroll-snap-align: start; }
.chip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s var(--ease); cursor: pointer; }
.chip:hover .chip-inner, .chip-inner:focus-visible, .chip[data-flipped="true"] .chip-inner { transform: rotateY(180deg); }
.chip-face { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgb(238 246 242 / 0.12); border-radius: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.chip-front { display: flex; flex-direction: column; }
.chip-term { flex: 1; padding: 16px; font: 400 13px/24px var(--mono); }
.chip-dots { display: flex; gap: 6px; margin-top: 20px; }
.chip-dots span { width: 12px; height: 12px; border-radius: 50%; }
.chip-meta { padding: 12px 16px; background: var(--foam); color: var(--harbor); }
.chip-meta strong { display: block; font-weight: 600; }
.chip-meta code { display: block; margin-top: 4px; font-size: 12px; line-height: 20px; opacity: 0.8; }
.chip-back { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; transform: rotateY(180deg); background: var(--foam); color: var(--harbor); }
.chip-back small { font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.chip-back dl div { display: flex; justify-content: space-between; font: 400 14px/28px var(--mono); }
.chip-back strong { font-weight: 600; }
.themes-cmds { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 16px; padding: 0 var(--gutter); color: var(--foam-soft); font: 400 14px/1.5 var(--mono); }
.themes-cmds > span { white-space: nowrap; }
.themes-cmds .sep { padding: 0 12px; color: rgb(238 246 242 / 0.3); }

/* Install: a band over the generated tab pattern. */
.install { position: relative; overflow: hidden; background: var(--harbor-deep); text-align: center; }
.install::before { content: ""; position: absolute; inset: 0; background: url(/assets/pattern.webp) 0 0 / 240px 240px; opacity: 0.5; pointer-events: none; }
.install-inner { position: relative; max-width: 980px; margin: 0 auto; }
.install-title { font-size: clamp(36px, 6vw, 72px); }
.install-note { display: flex; align-items: flex-start; gap: 12px; max-width: 54ch; margin: 24px auto 0; text-align: left; font-size: 18px; line-height: 1.6; color: var(--foam-soft); }
.install-note img { flex: none; width: 28px; height: 28px; margin-top: 2px; }
.install-note code { color: var(--foam); }
.cmd-frame { position: relative; margin-top: 64px; text-align: left; }
.cmd-cat { position: absolute; top: -58px; right: 32px; width: 64px; height: 64px; }
.cmd-box { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid rgb(238 246 242 / 0.25); border-radius: 14px; background: rgb(15 58 60 / 0.9); }
.cmd-box code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 14px; }
.cmd-prompt { padding-right: 12px; color: var(--marmalade); }
@media (min-width: 640px) { .cmd-box { flex-direction: row; align-items: center; padding: 20px; } }
@media (min-width: 768px) { .cmd-box code { font-size: 16px; } }
.stamp { align-self: flex-start; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--marmalade); color: #1b1206; font: 600 15px/1 var(--display); cursor: pointer; box-shadow: 0 3px 0 #b8631f; transition: transform 0.08s, box-shadow 0.08s; }
.stamp:active { transform: translateY(3px) skewX(-4deg); box-shadow: 0 0 0 #b8631f, inset 0 2px 4px rgb(0 0 0 / 0.25); }
@media (min-width: 640px) { .stamp { align-self: auto; } }
.cmd-box--prompt code { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.cmd-hl { color: var(--marmalade); }
.install-alt { display: grid; gap: 32px; margin-top: 48px; text-align: left; }
.install-alt > * { min-width: 0; }
.install-alt-title { font-weight: 500; }
.install-alt pre { margin-top: 12px; padding: 16px; overflow-x: auto; border-radius: 12px; background: rgb(15 58 60 / 0.7); font-size: 14px; line-height: 28px; }
.install-alt pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.install-alt-note { margin-top: 32px; text-align: left; color: var(--foam-soft); }
@media (min-width: 768px) { .install-alt { grid-template-columns: 1fr 1fr; } }

/* Questions: a vertical rail note and a ruled list of native details rows. */
.q-grid { display: grid; gap: 40px; max-width: 1240px; margin: 0 auto; }
.q-rail { display: none; }
.q-rail span { position: sticky; top: 112px; display: block; height: 260px; padding-right: 16px; border-right: 1px solid rgb(238 246 242 / 0.15); color: var(--foam-soft); font: 400 14px/1 var(--mono); letter-spacing: 0.2em; writing-mode: vertical-rl; transform: rotate(180deg); }
@media (min-width: 768px) { .q-grid { grid-template-columns: 72px minmax(0, 1fr); } .q-rail { display: block; } }
.qa-list { margin-top: 40px; border-top: 1px solid rgb(238 246 242 / 0.15); }
.qa { border-bottom: 1px solid rgb(238 246 242 / 0.15); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font: 500 clamp(20px, 2.2vw, 24px)/1.3 var(--display); }
.qa summary::-webkit-details-marker { display: none; }
.qa p { max-width: 62ch; margin-top: -4px; padding-bottom: 28px; font-size: 18px; line-height: 1.6; color: var(--foam-soft); }
.qa-toggle { position: relative; flex: none; width: 18px; height: 18px; }
.qa-toggle::before, .qa-toggle::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease); }
.qa-toggle::after { transform: rotate(90deg); }
.qa[open] .qa-toggle { color: var(--marmalade); }
.qa[open] .qa-toggle::after { transform: rotate(0deg); }

/* Footer */
.footer { padding: 48px var(--gutter); border-top: 1px solid rgb(238 246 242 / 0.1); }
.footer-inner { display: flex; flex-direction: column; gap: 32px; max-width: 1240px; margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 12px; font: 700 20px/1 var(--display); letter-spacing: -0.01em; }
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--foam-soft); }
.footer nav a:hover { color: var(--foam); text-decoration: underline; text-underline-offset: 4px; }
.footer small { font-size: 14px; color: var(--foam-soft); }
@media (min-width: 768px) { .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Terms and 404 */
.page-head { display: flex; align-items: center; height: 64px; padding: 0 var(--gutter); border-bottom: 1px solid rgb(238 246 242 / 0.1); }
.prose { max-width: 72ch; margin: 0 auto; padding: 64px 20px 96px; }
.prose h1 { font: 600 clamp(36px, 5vw, 60px)/1 var(--display); letter-spacing: -0.035em; }
.prose h2 { margin-top: 48px; font: 600 24px/1.25 var(--display); letter-spacing: -0.01em; }
.prose p, .prose li { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--foam-soft); }
.prose ul { margin-top: 8px; padding-left: 24px; list-style: disc; }
.prose li::marker { color: var(--marmalade); }
.prose strong { color: var(--foam); font-weight: 600; }
.prose code { padding: 2px 6px; border-radius: 5px; background: var(--harbor-raised); color: var(--foam); font-size: 0.9em; }
.prose blockquote { margin-top: 24px; padding-left: 20px; border-left: 2px solid rgb(244 145 62 / 0.7); color: var(--foam-soft); font-size: 18px; line-height: 1.65; }
.prose a { color: var(--foam); text-decoration: underline; text-underline-offset: 4px; }
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 100dvh; padding: 64px 20px; text-align: center; }
.notfound img { width: 100%; max-width: 560px; height: auto; }
.notfound p { max-width: 40ch; font-size: 18px; line-height: 1.6; color: var(--foam-soft); }
.notfound a { color: var(--marmalade); font-family: var(--mono); text-decoration: underline; text-underline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-tab, .readout, .readout-label, .readout-cmd, .pathlink-arrow, .numeral, .chip-inner, .stamp, .qa-toggle::before, .qa-toggle::after, .hero-video { transition: none; }
  .pathlink:hover path { animation: none; }
}