/* Hallmark · shape: Split Studio · genre: modern-minimal · theme: Cobalt (deal 2/3, seed explain-deck-cli-agent-skill-6fcf·f88a2ca0·2026-11-10·r0) · job: try · draw: de536e
 * hero: Counter · nav: search-led bar · footer: statement · imagery: the product (real player screenshot) · signature: the install command as a working copy key beside the real player
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a before/after could suit any tool; used the real skill prompt and the real file it produces */
@import url("./tokens.css");
@import url("./base.css");

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--color-paper) 92%, transparent); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav .container { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.wordmark { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); margin-right: auto; }
.nav a:not(.wordmark):not(.key) { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); text-decoration: underline transparent; transition: color var(--dur-micro) var(--ease-out); padding-block: var(--space-sm); }
.nav a:not(.wordmark):not(.key):hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

/* ---- keys ---- */
.key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); padding: 0 var(--space-lg); min-height: 48px; background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--primary:hover { background: var(--color-accent-deep); }
.key--sm { min-height: 36px; padding-inline: var(--space-md); font-size: var(--text-sm); }
.keycap { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); box-shadow: var(--shadow-key); font: 500 var(--text-sm)/1 var(--font-outlier); }

/* ---- cut surfaces ---- */
.cut { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
@supports (corner-shape: bevel) { .cut { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.graphite { background: var(--color-graphite); color: var(--color-graphite-ink); border-color: var(--color-graphite-2); }
.graphite code, .graphite pre { font-family: var(--font-outlier); }
.token { color: var(--color-accent-2); }
.muted-g { color: var(--color-graphite-muted); }

/* command chip */
.command { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); max-width: 640px; background: var(--color-graphite); border-color: var(--color-graphite-2); color: var(--color-graphite-ink); }
.command code { font: 400 var(--text-md)/1.4 var(--font-outlier); overflow-x: auto; white-space: nowrap; scrollbar-width: none; min-width: 0; }
.command .prompt { color: var(--color-graphite-muted); user-select: none; }
.command .key { flex: none; }

/* ---- hero ---- */
.hero { position: relative; isolation: isolate; border-bottom: var(--rule-hair) solid var(--color-rule); }
.field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; background-image: radial-gradient(var(--color-glyph-2) 1px, transparent 1.2px); background-size: var(--cell-w) var(--cell-h); opacity: 0.55; }
.field.live { background-image: none; opacity: 0.6; }
.field { -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 75%); mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 75%); }
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-3xl); min-height: min(calc(100svh - 65px), 760px); }
.hero h1 { max-width: 11ch; margin-bottom: var(--space-lg); }
.hero .lead { margin-bottom: var(--space-xl); color: var(--color-ink-2); }
.hero .actions { display: grid; gap: var(--space-md); justify-items: start; }
.hero .actions .alt { font: 500 var(--text-sm)/1.4 var(--font-display); color: var(--color-muted); }
.hero .actions .alt a { color: var(--color-ink); }
.shot { padding: var(--space-xs); background: var(--color-paper); }
.shot iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; background: var(--color-paper-2); }

.byline { display: inline-flex; align-items: center; gap: var(--space-sm); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink); text-decoration: underline transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.byline:hover { text-decoration-color: var(--color-accent); }
.byline img { border-radius: var(--radius-pill); }

/* ---- sections ---- */
section.band { padding-block: var(--section-gap-s); }
section.band + section.band { border-top: var(--rule-hair) solid var(--color-rule); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 46ch; }

/* before / after */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: stretch; }
.pane { padding: var(--space-xl); display: grid; gap: var(--space-md); align-content: start; }
.pane h3 { font-size: var(--text-title); }
.pane .label { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); }
.graphite .label { color: var(--color-graphite-muted); }
.pane pre { margin: 0; font-size: var(--text-sm); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.pane ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }

/* table */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { text-align: left; padding: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.ledger thead th { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); border-top: 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.ledger td:first-child { font: 500 var(--text-lg)/1.2 var(--font-display); width: 22%; }
.ledger td.mono { font: 400 var(--text-sm)/1.5 var(--font-outlier); color: var(--color-ink-2); width: 32%; }
.ledger tr.on { background: var(--color-accent-wash); }

/* engines */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
.big { font: 600 clamp(3.75rem, 7vw, 6rem)/0.95 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.engine { padding: var(--space-xl); display: grid; gap: var(--space-sm); }
.engine + .engine { margin-top: var(--gap-columns); }
.engine .label { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-muted); }
.meter { display: flex; gap: var(--space-3xs); height: 16px; margin-top: var(--space-xs); }
.meter i { flex: 1; background: var(--color-glyph-1); }
.meter i.f { background: var(--color-accent); }
.agents { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.agents li { padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper-2); font: 500 var(--text-sm)/1.2 var(--font-display); }

/* terminal UI */
.inline { font: 400 0.9em/1 var(--font-outlier); padding: var(--space-3xs) var(--space-2xs); background: var(--color-paper-3); border-radius: 4px; }
.uikeys { margin: var(--space-xl) 0 0; display: grid; gap: var(--space-md); }
.uikeys dt { font: 600 var(--text-lg)/1.2 var(--font-display); }
.uikeys dd { margin: var(--space-3xs) 0 0; color: var(--color-ink-2); max-width: 46ch; }
.tui { padding: var(--space-md) var(--space-lg) var(--space-lg); overflow: hidden; }
.tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); }
.tab { min-height: 36px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-graphite-2); border-radius: var(--radius-input); background: transparent; color: var(--color-graphite-muted); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tab:hover { color: var(--color-graphite-ink); }
.tab[aria-selected="true"] { background: var(--color-graphite-ink); color: var(--color-graphite); border-color: var(--color-graphite-ink); }
.tui:not(.js) .tabs { display: none; }
.tui:not(.js) .panel + .panel { margin-top: var(--space-lg); }
.split--ui { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hint { margin-top: var(--space-md); font: 400 var(--text-xs)/1.5 var(--font-body); max-width: none; }
.screen { margin: 0; overflow-x: auto; font: 400 var(--text-xs)/1.75 var(--font-outlier); white-space: pre; scrollbar-width: thin; }
.screen .sel { background: var(--color-graphite-ink); color: var(--color-graphite); }
.screen b { font-weight: 500; color: var(--color-graphite-ink); }

.say { padding: var(--space-md) var(--space-lg); margin-top: var(--space-xl); max-width: 640px; }
.say code { font: 400 var(--text-md)/1.4 var(--font-outlier); }
.note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
#share .ledger td:first-child { width: 22%; }
#share .ledger td:last-child { color: var(--color-ink-2); }

/* close */
.close .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.close h2 { margin-bottom: var(--space-xl); }
.keys { display: grid; gap: var(--space-md); padding: var(--space-xl); }
.keys div { display: flex; align-items: center; gap: var(--space-md); }
.keys .keycap { flex: none; }
.keys span.t { color: var(--color-ink-2); }

/* footer */
footer { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl) var(--space-xl); background: var(--color-paper-2); }
footer .mast { font: 600 clamp(3rem, 12vw, 10rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
footer .row { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); font: 500 var(--text-sm)/1.4 var(--font-display); color: var(--color-muted); }
footer .row a { color: var(--color-ink); text-underline-offset: 0.2em; text-decoration-color: var(--color-rule-2); }
footer .row a:hover { text-decoration-color: var(--color-accent); }
footer .row .byline { margin-right: auto; }

@media (max-width: 60rem) {
  .hero .container, .split, .split--ui, .close .container, .ba { grid-template-columns: minmax(0, 1fr); }
  .hero .container { min-height: 0; padding-block: var(--space-2xl); }
  .ledger td.mono { display: none; }
  .ledger th:nth-child(2) { display: none; }
}
@media (max-width: 40rem) {
  .nav .links { display: none; }
  .command { padding-left: var(--space-md); }
  .pane, .engine, .keys { padding: var(--space-lg); }
}