@font-face { font-family: "Timeless Sans"; src: url("../../assets/fonts/TimelessSans-SansRegular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Timeless Sans"; src: url("../../assets/fonts/TimelessSans-SansMedium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@property --light { syntax: "<length>"; inherits: true; initial-value: 240px; }

:root {
  color-scheme: light dark;
  --bg: #fff; --surface: #fff; --dot: #e4e4e7; --p: #8e8e96; --hover: rgba(0, 0, 0, .2);
  --text: #18181b; --secondary: #8b8b93; --muted: #a2a2a9; --line: rgba(0, 0, 0, .08); --code: #f7f7f8;
  --amber: #c27200; --blue: #2f7fc1; --red: #c4452f; --green: #4f8a2f;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
/* Dark mode: neutral greys only, matching the v0 dashboard's dark palette. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111; --surface: #191919; --dot: #2a2a2a; --p: #777; --hover: rgba(255, 255, 255, .25);
    --text: #eee; --secondary: #999; --muted: #666; --line: rgba(255, 255, 255, .1); --code: #161616;
    --amber: #eee; --blue: #999; --red: #eee; --green: #999;
  }
  .toast { background: #eee; color: #111; } .toast b { color: inherit; font-weight: 500; }
  .demo::backdrop { background: rgba(0, 0, 0, .6); }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--secondary); font-family: "Timeless Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
main { display: flex; flex-direction: column; gap: 40px; max-width: 600px; margin: 0 auto; padding: 72px 24px; }
section { display: flex; flex-direction: column; gap: 15px; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--muted); }
h1, h2 { color: var(--text); font: inherit; font-weight: 500; }
b { color: var(--text); font-weight: 400; }
hr { border: 0; border-top: 1px solid var(--line); }
code, pre, kbd { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
code { font-size: .875em; color: var(--text); }

.hero { gap: 24px; }
.hero header p { color: var(--muted); }
.logo { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: default; }
.logo img { display: block; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 6px; transition: transform 160ms var(--ease); }
.logo:active img { transform: scale(.94); }
.spark { position: fixed; left: 0; top: 0; width: 4px; height: 4px; border-radius: 1px; pointer-events: none; z-index: 60; }
.links { display: flex; gap: 16px; }

figure { margin: 9px 0; display: flex; flex-direction: column; gap: 8px; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
figcaption { color: var(--muted); }
pre { padding: 16px 18px; overflow: hidden; background: var(--code); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font-size: 12px; line-height: 1.6; }
.p { color: var(--p); } .a { color: var(--amber); } .b { color: var(--blue); } .r { color: var(--red); } .g { color: var(--green); } .s { font-weight: 500; }

.shot { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; user-select: none; -webkit-user-select: none; }
.shot img { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.shot:hover img { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .06); }
.shot:focus-visible img { outline: 2px solid var(--blue); outline-offset: 2px; }
.demo { width: min(1280px, 94vw); height: min(820px, 90vh); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .18); }
.demo[open] { animation: rise 260ms var(--ease); }
.demo::backdrop { background: rgba(24, 24, 27, .35); }
.demo iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo .close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.92); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* The try-it terminal */
.term { background: var(--code); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font: 12px/1.6 var(--mono); }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.term-bar i { width: 10px; height: 10px; border-radius: 99px; background: var(--dot); }
.term-bar span { margin-left: auto; }
.term-log { padding: 14px 18px 0; }
.term-log pre { padding: 0; border: 0; background: none; overflow: hidden; white-space: pre; margin-bottom: 12px; }
.term-log .cmd { color: var(--text); margin-bottom: 4px; }
.term-line { display: flex; gap: 8px; padding: 0 18px 14px; }
.term-line label { color: var(--amber); }
.term-line input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--text); caret-color: var(--amber); }
.term-log a { color: inherit; }
.try { display: flex; flex-wrap: wrap; gap: 8px; }
.try button { padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--text); font: 12px/1.6 var(--mono); cursor: pointer; transition: border-color 160ms; }
.try button:hover { border-color: var(--hover); }

.rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.rows dt { color: var(--text); font-family: var(--mono); font-weight: 400; font-size: .875em; line-height: 1.71; }
.rows dd { color: var(--secondary); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0; list-style: none; }
.chips li { padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--text); user-select: none; -webkit-user-select: none; }
.chips .gone { color: var(--muted); text-decoration: line-through; }
.numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 9px 0; }
.numbers div { padding: 12px 14px; background: var(--code); border: 1px solid var(--line); border-radius: 4px; }
.numbers b { display: block; }
.numbers span { color: var(--muted); }
footer { display: flex; justify-content: space-between; color: var(--muted); }
footer a { color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; padding: 10px 16px; background: #18181b; color: #f4f4f5; border-radius: 6px; font: 12px/1.5 var(--mono); transform: translateX(-50%); transform-origin: 50% 100%; box-shadow: 0 12px 32px rgba(0, 0, 0, .2); animation: toast-in 320ms var(--ease); max-width: calc(100vw - 32px); }
.toast b { color: #ffb045; }

/* Torchlight: the page goes dark and the cursor carries the light. */
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 600ms ease;
  background: radial-gradient(circle var(--light) at var(--x, 50%) var(--y, 40%), rgba(255, 170, 70, .20), rgba(255, 140, 40, .10) 45%, rgba(14, 10, 6, .94) 100%); }
body.torchlight::after { opacity: 1; animation: flicker 2.4s infinite; }
body.torchlight .logo img { box-shadow: 0 0 24px rgba(255, 176, 69, .6); }
@keyframes flicker { 0%, 100% { --light: 240px; } 20% { --light: 228px; } 35% { --light: 250px; } 55% { --light: 232px; } 70% { --light: 246px; } 85% { --light: 236px; } }

@media (max-width: 560px) {
  html { font-size: 15px; } main { padding: 56px 20px; gap: 32px; }
  pre, .term { font-size: 10.5px; } pre { padding: 14px; }
  .term-log { padding: 12px 14px 0; } .term-line { padding: 0 14px 12px; }
  .rows { grid-template-columns: 1fr; gap: 0; } .rows dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { body.torchlight::after { animation: none; } * { transition-duration: 0ms !important; animation-duration: 0ms !important; } }
@media (pointer: coarse) { .term-line input { font-size: 16px; } }