/* Cyberpunk Themes for Claude Code: the landing page.
   A keynote stage: black ground, the system display face set big and tight, the themes as the product shots.
   One page script (site.js) drives the theme picker, the copy buttons and the live previews. */

:root {
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.08);
  --plate: #111113;
  --plate-2: #1c1c1f;
  --link: #2997ff;
  --accent: #b48cff;
  --glass: rgba(17, 13, 36, 0.62);
  --glass-ink: #ece8f6;
  --glass-ink-2: #b8b2cf;
  --wrap: min(1180px, calc(100% - 48px));
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #000; color: var(--ink); scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.47 var(--text); letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.9em; }
::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); color: #fff; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: #3a3a3c #000; }

.skip { position: absolute; left: 16px; top: -48px; z-index: 30; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #000; }
.skip:focus { top: 10px; }

/* The bar: a translucent strip the page scrolls under. */
.bar { position: sticky; top: 0; z-index: 20; height: 52px; background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line-2); }
.bar__in { width: var(--wrap); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.bar__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 600 15px/1 var(--text); }
.bar__brand img { border-radius: 5px; }
.bar__brand:hover { text-decoration: none; }
.bar__links { display: flex; gap: 26px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.bar__links a { color: var(--ink-2); font-size: 14px; }
.bar__links a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 760px) { .bar__links { display: none; } .bar__in { justify-content: space-between; } }

/* Buttons: a white pill, pressed on pointer-down. */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--ink); color: #000; font: 500 17px/1 var(--text); transition: transform 120ms ease-out, background 200ms ease; }
.pill:hover { background: #fff; text-decoration: none; }
.pill:active { transform: scale(0.97); }
.pill--small { min-height: 30px; padding: 0 14px; font-size: 13px; }
@media (max-width: 760px) { .pill--small { min-height: 36px; } }

/* The install line, copyable. */
.cmd { display: flex; align-items: center; gap: 12px; width: min(760px, 100%); margin: 0 auto; padding: 8px 8px 8px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--plate); }
.cmd__text { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--ink); font-size: 14px; scrollbar-width: none; }
.cmd__text::-webkit-scrollbar { display: none; }
.cmd__copy { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ink); color: #000;
  font: 500 15px/1 var(--text); cursor: pointer; transition: transform 120ms ease-out; }
.cmd__copy:active { transform: scale(0.96); }
.cmd__copy.is-done { background: #30d158; }
.cmd--big { width: min(900px, 100%); padding: 10px 10px 10px 24px; border-radius: 20px; }
.cmd--big .cmd__text { font-size: 16px; }

/* Hero: the product line, the headline, the action, then the window. */
.hero { padding: 56px 0 40px; text-align: center; }
.hero__words { width: var(--wrap); margin: 0 auto; }
.hero__line { margin: 0; font: 600 clamp(52px, 8.4vw, 112px)/1.02 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.hero__sub { max-width: 46ch; margin: 22px auto 30px; color: var(--ink-2); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; text-wrap: balance; }

.hero__pill { margin-top: 20px; }
.stage { width: min(1180px, calc(100% - 32px)); margin: 40px auto 0; }
.win { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--plate);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.5); }
.win__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line-2); background: #0b0b0d; font-size: 13px; }
.win__dots { display: flex; gap: 7px; }
.win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3c; }
.win__title { color: var(--ink-2); }
.win__theme { margin-left: auto; color: var(--accent); font-weight: 500; transition: color 900ms var(--ease); }
.win__cmd { margin-left: 8px; color: var(--ink-2); font-size: 12px; font-weight: 400; }
.win__view { position: relative; aspect-ratio: 16 / 9; }
.win__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease); }
.win__scene.is-on { opacity: 1; }

/* The frosted conversation: real chat over a real scene, so the glass has a job. */
.glass { position: absolute; left: 4%; top: 7%; bottom: 0; width: min(46%, 500px); display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 0; border-radius: 16px 16px 0 0;
  background: var(--glass); color: var(--glass-ink); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  text-align: left; font-size: 15px; line-height: 1.5; transition: background 900ms var(--ease), color 900ms var(--ease); }
.glass p { margin: 0; }
.glass__ask { align-self: flex-end; max-width: 85%; padding: 9px 14px; border-radius: 14px; background: color-mix(in oklab, var(--accent) 22%, transparent); }
.glass__reply { display: flex; gap: 12px; }
.glass__reply > div { min-width: 0; }
.glass__dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.glass__diff { margin: 12px 0 0; padding: 10px 12px; overflow: hidden; border-radius: 10px; background: rgba(0, 0, 0, 0.35); font-size: 13px; line-height: 1.6; }
.glass__diff span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-del { color: var(--del, #f0718a); }
.d-add { color: var(--add, #7fe0a8); }
.glass__file { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.glass__meta { margin-top: 10px !important; color: var(--glass-ink-2); font-size: 13px; }
.glass__input { margin-top: auto !important; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; color: var(--glass-ink-2); font-size: 14px; }
.stage[data-light] .win__theme { color: #ff8a9d; }
.stage[data-light] .glass__diff { background: rgba(0, 0, 0, 0.06); }
.stage[data-light] .glass__input { border-color: rgba(0, 0, 0, 0.14); }
.stage[data-light] .glass { border-color: rgba(0, 0, 0, 0.1); }
@media (max-width: 760px) {
  .win__view { aspect-ratio: 9 / 16; }
  .glass { left: 12px; right: 12px; top: 12px; bottom: auto; width: auto; height: auto; gap: 12px; padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; font-size: 14px; }
  .glass__meta, .glass__input { display: none; }
  .win__scene { object-position: var(--focus, 74%) 50%; }
  .win__cmd { display: none; }
  .stage[data-high] .glass { top: auto; bottom: 12px; }
}

.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.picker__btn, .picker__pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2);
  border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 14px/1 var(--text); cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 120ms ease-out; }
.picker__btn span { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.picker__btn:hover, .picker__pause:hover { color: var(--ink); background: var(--line-2); }
.picker__btn[aria-pressed="true"] { color: var(--ink); background: rgba(255, 255, 255, 0.14); border-color: transparent; }
.picker__btn:active, .picker__pause:active { transform: scale(0.96); }
.picker__pause { width: 44px; padding: 0; justify-content: center; }
.picker__pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.picker__pause .i-play { display: none; fill: currentColor; }
.picker__pause[data-paused] .i-play { display: block; }
.picker__pause[data-paused] .i-pause { display: none; }

/* Section voice: big statements, grey second lines, generous space above every heading. */
section { scroll-margin-top: 52px; }
.sec-h { margin: 0; font: 600 clamp(40px, 5.6vw, 72px)/1.05 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.sec-h span, .say__big span { color: var(--ink-2); }
.sec-sub { margin: 16px 0 0; color: var(--ink-2); font-size: clamp(19px, 1.6vw, 22px); }

.say { width: var(--wrap); margin: 0 auto; padding: 200px 0 40px; text-align: center; }
.say__big { margin: 0; font: 600 clamp(44px, 6.6vw, 88px)/1.04 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.say__sub { max-width: 40ch; margin: 28px auto 0; color: var(--ink-2); font-size: clamp(19px, 1.6vw, 22px); text-wrap: pretty; }

/* The seven themes: one mosaic, two wide frames and five standard ones, captions on black under the art. */
.worlds { width: var(--wrap); margin: 0 auto; padding: 200px 0 0; }
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 1080px); gap: 24px; margin-top: 56px; padding-bottom: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.world { margin: 0; scroll-snap-align: start; }
.reel__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.reel__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--plate-2); color: var(--ink); cursor: pointer; transition: background 200ms ease, transform 120ms ease-out, opacity 200ms ease; }
.reel__btn:hover { background: #2c2c2e; }
.reel__btn:active { transform: scale(0.94); }
.reel__btn:disabled { opacity: 0.35; cursor: default; }
.reel__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.world img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line-2); border-radius: 18px; background: var(--plate);
  transition: transform 700ms var(--ease), border-color 300ms ease; }
.world:hover img { transform: scale(1.012); border-color: var(--line); }
.world__cap { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; padding: 18px 4px 0; }
.world__cap h3 { margin: 0; font: 600 24px/1.2 var(--display); letter-spacing: -0.02em; }
.world__cap p { grid-column: 1; margin: 0; color: var(--ink-2); }
.world__cap code { grid-row: 1; grid-column: 2; color: var(--ink-2); font-size: 14px; }
@media (max-width: 760px) {
  .reel { grid-auto-columns: 86%; gap: 14px; }
  .world__cap { grid-template-columns: 1fr; }
  .world__cap code { grid-row: auto; grid-column: 1; }
}

/* Install: the line, big, then three plain steps. */
.install { width: var(--wrap); margin: 0 auto; padding: 200px 0 0; text-align: center; }
.install .cmd { margin-top: 48px; text-align: left; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 980px; margin: 56px auto 0; padding: 0; list-style: none; text-align: left; counter-reset: s; }
.steps li { color: var(--ink-2); counter-increment: s; }
.steps li::before { content: counter(s); display: block; margin-bottom: 14px; color: var(--ink); font: 600 40px/1 var(--display); letter-spacing: -0.03em; }
.steps strong { color: var(--ink); font-weight: 600; }
.steps code { color: var(--ink); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

/* Trust and customise: words beside the proof. */
.trust, .make { width: var(--wrap); margin: 0 auto; padding: 200px 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.trust p, .make p { color: var(--ink-2); font-size: 19px; max-width: 46ch; }
.trust__words p:first-of-type, .make__words p { margin-top: 24px; }
.trust__note { font-size: 17px !important; }
.term { margin: 0; padding: 26px 28px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 18px; background: var(--plate);
  color: var(--ink); font: 14px/1.75 var(--mono); }
.t-dim { color: #8e8e93; }
.t-ok { color: #30d158; }
.more { display: inline-block; margin-top: 18px; font-size: 19px; }
.more .chev { width: 8px; height: 12px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; }
.make__show { display: grid; gap: 20px; }
.map { margin: 0; padding: 26px 28px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--plate); font: 600 22px/1.25 var(--mono); letter-spacing: 0.12em; }
.m-k { color: #5cc8ff; } .m-h { color: #9a9ac0; } .m-b { color: #d97757; } .m-e { color: #f5f5f7; }
.ask { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--plate); }
.ask p { margin: 0; max-width: none; font-size: 16px; }
.ask__me { justify-self: end; max-width: 85% !important; padding: 10px 14px; border-radius: 14px; background: var(--plate-2); color: var(--ink) !important; }
.ask__claude { color: var(--ink) !important; }
@media (max-width: 900px) { .trust, .make { grid-template-columns: 1fr; gap: 36px; } .map { font-size: 17px; } }

/* FAQ: every answer open, so search engines and people read the same thing. */
.faq { width: var(--wrap); margin: 0 auto; padding: 200px 0 0; }
.qa { max-width: 860px; margin: 48px 0 0; }
.qa > div { padding: 26px 0; border-top: 1px solid var(--line-2); }
.qa dt { font: 600 21px/1.3 var(--display); letter-spacing: -0.015em; }
.qa dd { margin: 10px 0 0; color: var(--ink-2); max-width: 66ch; }
.qa code { color: var(--ink); }

/* The close and the footer. */
.close { width: var(--wrap); margin: 0 auto; padding: 220px 0 160px; text-align: center; }
.close__h { margin: 0 0 40px; font: 600 clamp(44px, 6.6vw, 88px)/1.04 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.close__sub { margin: 22px 0 0; color: var(--ink-2); }
.foot { width: var(--wrap); margin: 0 auto; padding: 24px 0 48px; border-top: 1px solid var(--line-2); color: #8e8e93; font-size: 13px; }
.foot p { margin: 6px 0; }
.foot a { color: #a1a1a6; }

@media (max-width: 760px) {
  .hero { padding-top: 40px; }
  .hero__line { font-size: 11.2vw; }
  .cmd { flex-wrap: wrap; }
  .cmd__text { white-space: normal; }
  .cmd__text .nb { white-space: nowrap; }
  .cmd__copy { flex: 1 1 100%; }
  .say, .worlds, .install, .trust, .make, .faq { padding-top: 140px; }
  .close { padding: 160px 0 120px; }
}

/* Reduced motion: nothing slides or fades; scenes hold still (site.js swaps in the stills). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #d1d1d6; --line-2: rgba(255, 255, 255, 0.3); }
}