/* vNext prototype (legacy, to be reduced page by page). Not a source of truth for core. */
/* ===== Skins page ===== */
.phero .photo { aspect-ratio: 4 / 3; overflow: hidden; }
.phero .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act code { font: 12px var(--font-mono); text-transform: none; letter-spacing: 0; }
.ow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ow-b { padding: 20px 18px; display: grid; gap: 6px; align-content: start; min-height: 220px; }
.ow-b b { font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
.ow-b p { font-size: 1.05rem; }
.tile-bar span:first-child { font-weight: 700; }
/* preview */
.sk { display: grid; gap: 14px; }
.sk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sk-tabs label { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); cursor: pointer; }
.sk-tabs label b { font: 700 1.2rem var(--font-display); }
.sk-tabs label small { color: var(--muted); font-size: 11.5px; }
.sk-tabs input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.sk-tabs input:checked + label small { color: color-mix(in oklab, var(--bg) 82%, transparent); }
.sk-tabs input:focus-visible + label { outline: 2px solid var(--fg); outline-offset: 2px; }
.skp { --p-bg: #FFFFFF; --p-surface: #F4F4F4; --p-fg: #1A1A1A; --p-muted: #5A5A5A; --p-accent: #1A1A1A; --p-on: #FFFFFF; --p-hi: #1A1A1A;
  --p-display: system-ui, sans-serif; --p-body: system-ui, sans-serif; --p-dw: 700; --p-track: 0; --p-r: 4px; --p-card-r: 4px; --p-pad: 20px; --p-gap: 14px;
  --p-shadow: none; --p-border: 1px solid #D8D8D8; --p-card-bg: #FFFFFF; --p-dur: 200ms; --p-ease: ease; --p-ratio: 16 / 9; --p-filter: none; --p-cut: 0px;
  --p-read: "200ms · ease (host default)";
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--p-gap); padding: clamp(14px, 3vw, 36px); background: var(--p-bg); color: var(--p-fg); font-family: var(--p-body); border: 1px solid var(--line); transition: background-color var(--p-dur) var(--p-ease), color var(--p-dur) var(--p-ease); }
.sk:has(#sk-velora:checked) .skp { --p-bg: #E3E3CD; --p-surface: #ECECDA; --p-fg: #0C0C0B; --p-muted: #4C4F3F; --p-accent: #5C604C; --p-on: #EDEDDC; --p-hi: #5C604C;
  --p-display: var(--font-display); --p-body: var(--font-body, system-ui, sans-serif); --p-dw: 800; --p-track: -.035em; --p-r: 0px; --p-card-r: 0px; --p-pad: 24px; --p-gap: 22px;
  --p-border: 1.5px solid #5C604C; --p-card-bg: #ECECDA; --p-dur: 300ms; --p-ease: cubic-bezier(.2, .7, .2, 1); --p-ratio: 4 / 3; --p-cut: 28px;
  --p-read: "300ms · cubic-bezier(.2,.7,.2,1)"; }
.sk:has(#sk-noir:checked) .skp { --p-bg: #0D0F0C; --p-surface: #11150F; --p-fg: #E8EFE2; --p-muted: #BBCBB1; --p-accent: #BBCBB1; --p-on: #364430; --p-hi: #9DD08C;
  --p-display: 'Space Grotesk', system-ui, sans-serif; --p-body: 'Manrope', system-ui, sans-serif; --p-dw: 700; --p-track: -.03em; --p-r: 2px; --p-card-r: 12px; --p-pad: 24px; --p-gap: 24px;
  --p-shadow: 0 20px 50px -14px rgba(0,0,0,.45); --p-border: 1px solid rgba(232,239,226,.14); --p-card-bg: rgba(17,21,15,.82); --p-dur: 420ms; --p-ease: cubic-bezier(.22, 1, .36, 1);
  --p-ratio: 21 / 9; --p-filter: brightness(.78) contrast(1.05) saturate(.9); --p-read: "420ms · cubic-bezier(.22,1,.36,1)"; }
.sk:has(#sk-earth:checked) .skp { --p-bg: #FBF9F4; --p-surface: #F0EEE9; --p-fg: #1B1C19; --p-muted: #556252; --p-accent: #182317; --p-on: #F5F3EE; --p-hi: #6A7D57;
  --p-display: 'Space Grotesk', system-ui, sans-serif; --p-body: 'Manrope', system-ui, sans-serif; --p-dw: 600; --p-track: -.02em; --p-r: 4px; --p-card-r: 14px; --p-pad: 24px; --p-gap: 24px;
  --p-shadow: 0 20px 40px rgba(27,28,25,.06); --p-border: 1px solid rgba(85,98,82,.18); --p-card-bg: #FFFFFF; --p-dur: 320ms; --p-ease: cubic-bezier(.4, 0, .2, 1);
  --p-ratio: 4 / 3; --p-filter: none; --p-read: "320ms · cubic-bezier(.4,0,.2,1)"; }
.skp-card { background: var(--p-card-bg); border: var(--p-border); border-radius: var(--p-card-r); box-shadow: var(--p-shadow); overflow: hidden; display: grid; align-content: start; min-width: 0;
  clip-path: polygon(0 0, calc(100% - var(--p-cut)) 0, 100% calc(var(--p-cut) * 3), 100% 100%, 0 100%); transition: all var(--p-dur) var(--p-ease); }
.skp-media { aspect-ratio: var(--p-ratio); overflow: hidden; transition: aspect-ratio var(--p-dur) var(--p-ease); }
.skp-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--p-filter); transition: filter var(--p-dur) var(--p-ease); }
.skp-body { padding: var(--p-pad); display: grid; gap: 12px; }
.skp-eyebrow { font: 600 12px var(--p-body); letter-spacing: .05em; text-transform: uppercase; color: var(--p-hi); }
.skp h3 { font: var(--p-dw) clamp(1.5rem, 3.4vw, 2.4rem)/1.05 var(--p-display); letter-spacing: var(--p-track); text-wrap: balance; }
.skp p { color: var(--p-muted); line-height: 1.55; max-width: 52ch; }
.skp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.skp-btn { font: 700 14px var(--p-body); padding: 12px 18px; border-radius: var(--p-r); background: var(--p-accent); color: var(--p-on); border: 1px solid var(--p-accent); cursor: pointer; transition: all var(--p-dur) var(--p-ease); }
.skp-btn--2 { background: transparent; color: var(--p-fg); border-color: color-mix(in oklab, var(--p-fg) 30%, transparent); }
.skp-btn:hover { translate: 0 -2px; }
.skp-in { display: grid; gap: 4px; font: 600 12px var(--p-body); color: var(--p-muted); }
.skp-in input { font: 400 15px var(--p-body); padding: 11px 12px; border-radius: var(--p-r); background: var(--p-surface); color: var(--p-fg); border: var(--p-border); }
.skp-in input:focus-visible, .skp-btn:focus-visible, .skp-box:focus-visible { outline: 2px solid var(--p-hi); outline-offset: 2px; }
.skp-motion { display: grid; gap: 12px; align-content: start; }
.skp-box { display: grid; place-items: center; min-height: 160px; background: var(--p-surface); border: var(--p-border); border-radius: var(--p-card-r); font: var(--p-dw) 1.3rem var(--p-display); letter-spacing: var(--p-track); text-align: center; padding: 12px; transition: translate var(--p-dur) var(--p-ease), scale var(--p-dur) var(--p-ease), background-color var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease); }
.skp-box:is(:hover, :focus-visible) { translate: 0 -10px; scale: 1.03; background: var(--p-accent); color: var(--p-on); box-shadow: var(--p-shadow); }
.skp-read { font: 12px var(--font-mono); color: var(--p-muted); }
.skp-read::before { content: 'Motion voice · '; }
.skp-read::after { content: var(--p-read); }
.sk-code { max-width: 640px; }
@media (prefers-reduced-motion: reduce) { .skp, .skp-card, .skp-media, .skp-media img, .skp-btn, .skp-box { transition: none; } .skp-box:is(:hover, :focus-visible) { translate: 0 0; scale: 1; } .skp-btn:hover { translate: 0 0; } }
@media (max-width: 820px) { .skp { grid-template-columns: minmax(0, 1fr); } .sk-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tokens table */
.tk-wrap { overflow-x: clip; border: 1px solid var(--line); background: var(--surface); }
.tk-t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tk-t th, .tk-t td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tk-t thead th { font: 700 1.05rem var(--font-display); }
.tk-t thead small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.tk-t tbody th { font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); width: 18%; }
.tk-t tr:last-child th, .tk-t tr:last-child td { border-bottom: 0; }
.swt { display: inline-block; width: 14px; height: 14px; background: var(--c); border: 1px solid var(--line); margin-left: 6px; vertical-align: -2px; }
/* models */
.md-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.md { padding: 18px 18px 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.md h3 { font-size: 1.7rem; }
.md p { color: var(--muted); font-size: .95rem; }
.md .st { justify-self: start; }
.md:not(.free) h3 { opacity: .8; }
@media (max-width: 900px) { .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .md-grid { grid-template-columns: minmax(0, 1fr); } }
.rules { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 860px; }
.rules li { counter-increment: r; position: relative; padding: 14px 0 14px 56px; border-bottom: 1px solid var(--line); font-size: 1.1rem; line-height: 1.35; }
.rules li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 700 14px var(--font-mono); color: var(--accent); }
@media (max-width: 900px) { .ow-grid { grid-template-columns: minmax(0, 1fr); } }

/* Depth tokens (Proposed) */
.dp { --depth-blur: 20px; --depth-alpha: 8; }
.dp:has(#dp-soft:checked) { --depth-blur: 14px; --depth-alpha: 5; }
.dp:has(#dp-deep:checked) { --depth-blur: 26px; --depth-alpha: 14; }
.dp-ctl { display: inline-flex; border: 1px solid var(--line); margin-bottom: 18px; }
.dp-ctl label { padding: 6px 14px; cursor: pointer; color: var(--muted); }
.dp-ctl input:checked + label { background: var(--fg); color: var(--bg); }
.dp-ctl input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); padding: 40px clamp(14px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); }
.dp-box { display: grid; gap: 4px; align-content: end; min-height: 150px; padding: 16px; background: var(--bg); transition: box-shadow .4s var(--ease); box-shadow: 0 0 calc(var(--depth-blur) * (1 + var(--n) * .35)) color-mix(in oklab, var(--fg) calc(var(--depth-alpha) * (1 + var(--n) * .5) * 1%), transparent); }
.dp-box b { font: 800 1.2rem var(--font-display); } .dp-box .mono { color: var(--muted); font-size: 11px; }
@media (max-width: 800px) { .dp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dp-box { transition: none; } }
.skp-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 760px) {
  .tk-t, .tk-t tbody, .tk-t tr, .tk-t th, .tk-t td { display: block; width: 100%; }
  .tk-t thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .tk-t tbody tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .tk-t tbody th { width: 100%; padding: 12px 14px 4px; border: 0; }
  .tk-t td { position: relative; padding: 6px 14px 6px calc(14px + 5.2rem); border: 0; }
  .tk-t td::before { content: attr(data-l); position: absolute; inset-inline-start: 14px; font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
}