/* Ping — shared tokens and chrome for the 5 homepage mockups. Each page adds its own skeleton. */
:root {
  --white: #FFFFFF; --mist: #F2F3F5; --mist-2: #E9EBEE; --ink: #0F1419; --ink-2: #536471; --line: #E1E4E8;
  --red: #FF3B30; --red-ink: #C4161C; --red-fill: #D70015; --vio: #5B5BD6; --vio-ink: #4646B8; --vio-wash: #EEEEFB;
  --f: 'Hanken Grotesk', system-ui, sans-serif; --m: 'Fira Code', ui-monospace, monospace;
  --r: 14px; --ease: cubic-bezier(.16, 1, .3, 1); --gut: clamp(16px, 4vw, 48px); --max: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.55 var(--f); font-feature-settings: "ss01"; overflow-x: clip; }
::selection { background: var(--vio); color: #fff; }
:focus-visible { outline: 2px solid var(--vio); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: #C9CDD3 var(--mist); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; font-weight: 800; }
p { margin: 0; text-wrap: pretty; }
.mono, .num { font-family: var(--m); font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.ico { flex: none; } .ico.red { color: var(--red-ink); }
.sim { display: inline-flex; gap: 6px; align-items: center; font: 600 12px/1 var(--f); color: var(--ink-2); padding: 6px 10px; border: 1px dashed #B7BEC6; border-radius: 99px; background: var(--white); }
.sim::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vio); }
.disclaim { font: 500 13px/1.4 var(--f); color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }

/* header */
.hd { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.hd .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 2px; font: 800 22px/1 var(--f); letter-spacing: -0.04em; text-decoration: none; }
.brand i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); transform: translateY(-9px); box-shadow: 0 0 0 2px #fff; }
.tabs { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tabs a { display: block; padding: 8px 12px; border-radius: 10px; font: 600 14.5px/1 var(--f); color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.tabs a:hover { background: var(--mist); color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); background: var(--mist); }
.hd-end { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: 700 15px/1 var(--f); text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background .2s, box-shadow .25s, border-color .2s; white-space: nowrap; }
.btn-p { background: var(--vio); color: #fff; box-shadow: 0 6px 14px -8px rgb(15 20 25 / .35); }
.btn-p:hover { background: var(--vio-ink); transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgb(15 20 25 / .4); }
.btn-p:active { transform: translateY(0); }
.btn-g { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-g:hover { border-color: var(--ink); }
.btn-x { width: 44px; padding: 0; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16.5px; border-radius: 14px; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .hd .wrap { gap: 12px; }
  .tabs { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--gut) 16px; }
  .hd.open .tabs { display: flex; }
  .tabs a { padding: 14px 8px; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .hd .btn { height: 40px; } .hd .btn-p { padding: 0 16px; } .hd .btn-x { width: 40px; }
}

/* paste a post link */
.paste { display: flex; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 10px 30px -18px rgb(15 20 25 / .25); }
.paste:focus-within { border-color: var(--vio); }
.paste label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding-left: 12px; color: var(--ink-2); }
.paste input { flex: 1; min-width: 0; border: 0; outline: 0; font: 500 15px/1 var(--m); color: var(--ink); background: transparent; height: 44px; }
.paste input::placeholder { color: #66727D; }
.paste-out { font: 500 14px/1.45 var(--f); color: var(--ink-2); min-height: 1.45em; margin-top: 10px; }
.paste-out.bad { color: var(--red-ink); } .paste-out.good { color: var(--vio-ink); }
@media (max-width: 520px) { .paste { flex-direction: column; } .paste .btn { width: 100%; } }

/* slices list (HTML) */
.slices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(24, 1fr); gap: 6px; }
.sl { grid-column: span calc(var(--w) * 2); grid-column: span var(--w); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 10px 9px; display: grid; gap: 2px; background: var(--white); transition: background .4s, border-color .4s; min-width: 0; }
.sl b { font: 600 12px/1 var(--m); color: var(--ink-2); } .sl span { font: 600 14px/1.2 var(--m); } .sl em { font: 700 11px/1 var(--f); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.sl-burned { background: var(--red-fill); border-color: var(--red-fill); } .sl-burned b, .sl-burned span, .sl-burned em { color: #fff; }
.sl-queued { border-color: var(--vio); background: repeating-linear-gradient(45deg, var(--vio-wash) 0 6px, #fff 6px 10px); } .sl-queued em { color: var(--vio-ink); }
.sl-cancelled { border-color: var(--red-ink); } .sl-cancelled em { color: var(--red-ink); }

/* journal */
.journal { list-style: none; margin: 0; padding: 0; }
.jr { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.jr-t { font: 500 13px/1 var(--m); color: var(--ink-2); } .jr-e { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.jr-l { font: 500 12.5px/1 var(--m); color: var(--vio-ink); text-decoration: none; padding: 6px 8px; border-radius: 8px; background: var(--vio-wash); }
.jr-l:hover { background: #E0E0F8; }
.jr-empty { display: block; color: var(--ink-2); }
@media (max-width: 700px) { .jr { grid-template-columns: 1fr auto; gap: 8px 12px; } .jr-t { grid-column: 1 / -1; } .jr-l:last-child { display: none; } }

/* faq */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 700 18px/1.3 var(--f); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--vio-ink); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 68ch; }

/* placeholders for assets Alex must provide */
.slot { display: grid; place-items: center; text-align: center; border: 1.5px dashed #B7BEC6; border-radius: var(--r); color: var(--ink-2); font: 600 13px/1.4 var(--f); background: repeating-linear-gradient(135deg, var(--mist) 0 10px, #fff 10px 20px); padding: 16px; }

/* code-drawn object motion: one authored moment (post arrives, slice burns) */
@keyframes ntIn { from { transform: translateY(-18px); opacity: 0; filter: blur(4px); } }
@keyframes slFresh { 0% { opacity: .2; } 40% { opacity: 1; } }
.nt-in { animation: ntIn .7s var(--ease) both; transform-box: fill-box; }
.sl-fresh, .row-fresh { animation: slFresh .9s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* footer shared bits */
.ft-legal { font-size: 13px; color: var(--ink-2); }
@media (max-width: 700px) { .slices { grid-template-columns: repeat(4, 1fr); } .sl { grid-column: auto; } }
/* slices: equal columns, weight read as height */
.slices { grid-template-columns: repeat(12, 1fr); align-items: end; }
.sl { grid-column: auto; min-height: calc(58px + var(--w) * 22px); align-content: end; }
@media (max-width: 700px) { .slices { grid-template-columns: repeat(4, 1fr); } }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 8px; }
.sl-hi { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Slices inside a narrow panel (coin page column, studio preview): 4 per row, like on a phone. */
.panel { container-type: inline-size; }
@container (max-width: 760px) { .slices { grid-template-columns: repeat(4, 1fr); } .sl { min-height: 0; } }