/* t1-heroes.css · written by components/tau/t1-extract.mjs from components/reference/tau/heroes/: the stylesheet the proposals 01, 02, 03, 04, 05, 06, 07, 08, 09 share */
/* Three proposals for the Tau hero, one at a time, on Tau's own tokens. */
:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --page: #fcfcfb; --ground: #f1f0ed; --raised: #ffffff; --ink: #0b0b0b; --ink2: #52514e; --ink3: #6c6b69; --faded: #97958d;
  --line: rgb(11 11 11 / 10%); --line-strong: rgb(11 11 11 / 20%);
  --glass: rgb(255 255 255 / 78%); --accent: #6250d6;
  --e1: 0 3px 6px -2px rgb(0 0 0 / .02), 0 1px 1px rgb(0 0 0 / .04);
  --e2: 0 0 0 .5px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .05), 0 3px 9px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  --e3: 0 0 0 .5px rgb(0 0 0 / .06), 0 24px 64px rgb(0 0 0 / .16), 0 8px 24px rgb(0 0 0 / .10), 0 1px 1px rgb(0 0 0 / .04);
  --m: clamp(16px, 2.8vw, 40px);
  --statement: clamp(38px, 6.4vw, 96px);
  --tau-ease: linear(0, 0.0234 0.39%, 0.0740 1.28%, 0.1420 2.54%, 0.2210 4.15%, 0.3058 6.06%, 0.3921 8.27%, 0.4764 10.75%, 0.5561 13.48%, 0.6294 16.47%, 0.6951 19.70%, 0.7528 23.17%, 0.8025 26.86%, 0.8443 30.78%, 0.8791 34.91%, 0.9074 39.26%, 0.9301 43.81%, 0.9481 48.56%, 0.9621 53.52%, 0.9728 58.67%, 0.9810 64.02%, 0.9870 69.55%, 0.9915 75.28%, 0.9948 81.19%, 0.9972 87.28%, 0.9988 93.55%, 1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark; --page: #0d0d0d; --ground: #161615; --raised: #1f1f1e; --ink: #f0efec; --ink2: #c3c2b7; --ink3: #8f8e89; --faded: #5f5e5a;
  --line: rgb(255 255 255 / 10%); --line-strong: rgb(255 255 255 / 20%); --glass: rgb(40 40 40 / 75%);
  --e2: 0 0 0 .5px rgb(255 255 255 / 8%), 0 6px 18px rgb(0 0 0 / .4), 0 1px 1px rgb(0 0 0 / .3);
  --e3: 0 0 0 .5px rgb(255 255 255 / 9%), 0 24px 64px rgb(0 0 0 / .6), 0 8px 24px rgb(0 0 0 / .4); } }
:root[data-theme="dark"] {
  color-scheme: dark; --page: #0d0d0d; --ground: #161615; --raised: #1f1f1e; --ink: #f0efec; --ink2: #c3c2b7; --ink3: #8f8e89; --faded: #5f5e5a;
  --line: rgb(255 255 255 / 10%); --line-strong: rgb(255 255 255 / 20%); --glass: rgb(40 40 40 / 75%);
  --e2: 0 0 0 .5px rgb(255 255 255 / 8%), 0 6px 18px rgb(0 0 0 / .4), 0 1px 1px rgb(0 0 0 / .3);
  --e3: 0 0 0 .5px rgb(255 255 255 / 9%), 0 24px 64px rgb(0 0 0 / .6), 0 8px 24px rgb(0 0 0 / .4); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body { font: 400 15px/24px var(--font); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv01", "cv11"; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* the bar, as on the site */
.bar { position: fixed; z-index: 50; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 4px 0 14px;
  border-radius: 9999px; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 .5px var(--line), var(--e2); font-size: 13px; white-space: nowrap; }
.bar b { font-weight: 550; font-size: 14px; margin-right: 12px; }
.bar span { padding: 0 10px; color: var(--ink2); }
.bar i { font-style: normal; margin-left: 8px; height: 36px; padding: 0 16px; display: flex; align-items: center; border-radius: 9999px; background: var(--ink); color: var(--page); }
@media (max-width: 720px) { .bar span { display: none; } }

/* the switcher between the proposals */
.pick { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(560px, calc(100% - 32px)); }
.pick-note { margin: 0; padding: 8px 14px; border-radius: 10px; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 .5px var(--line), var(--e2);
  font-size: 13px; line-height: 19px; color: var(--ink2); text-align: center; }
.pick-dock { display: flex; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 .5px var(--line), var(--e2); }
.pick-dock button { height: 36px; padding: 0 14px; border: 0; border-radius: 9999px; background: none; font: 500 13px/1 var(--font); color: var(--ink3); cursor: pointer; }
.pick-dock button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.pick-dock button:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }

.next { padding: 120px var(--m) 200px; }
.next h2 { margin: 0 0 24px; font: 450 clamp(28px, 3.1vw, 48px)/1.06 var(--font); letter-spacing: -0.026em; }
.next p { margin: 0; max-width: 40em; color: var(--ink2); }
.small { font-size: 13px; line-height: 20px; color: var(--ink3); }

/* ---------------------------------------------------------------- shared: a hero you can pick things up in */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero.is-ground { background: var(--ground); }
.title { margin: 0; font: 450 var(--statement)/1 var(--font); letter-spacing: -0.032em; text-wrap: balance; }
.hint { position: absolute; left: var(--m); bottom: 104px; margin: 0; }
.thing { position: absolute; left: 0; top: 0; touch-action: none; cursor: grab; will-change: transform; outline: none; }
.thing.is-held { cursor: grabbing; }
.paper { padding: clamp(5px, .5vw, 8px); background: var(--raised); border-radius: 3px; box-shadow: var(--e2); transition: box-shadow 200ms linear, transform 300ms var(--tau-ease); }
.thing.is-held .paper { box-shadow: var(--e3); transform: scale(1.035); }
.thing:focus-visible .paper { box-shadow: 0 0 0 1.5px var(--accent), var(--e2); }
.paper img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; pointer-events: none; }
.tag { position: absolute; left: 0; top: calc(100% + 8px); padding: 2px 8px; border-radius: 6px; background: var(--ink); color: var(--page); font-size: 12px; line-height: 18px; white-space: nowrap; opacity: 0; transition: opacity 120ms linear; pointer-events: none; }
.thing:is(:hover, [data-hover]) .tag, .thing.is-held .tag, .thing:focus-visible .tag { opacity: 1; transition-duration: 40ms; }
.drop-in { animation: drop 900ms var(--tau-ease) both; animation-delay: calc(var(--k, 0) * 70ms + 200ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-40px) scale(1.25); } }
.reset { position: absolute; right: var(--m); bottom: 104px; padding: 0; border: 0; background: none; font: 500 13px/20px var(--font); color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 120ms linear; }
.reset.is-on { opacity: 1; pointer-events: auto; }
.reset::after { content: ""; display: inline-block; width: 18px; height: 1px; margin-left: 8px; vertical-align: middle; background: currentColor; }

/* 1. the table */
.table-title { position: absolute; left: var(--m); top: 50%; transform: translateY(-46%); max-width: 11.5em; pointer-events: none; }
.table .thing { width: clamp(150px, 16vw, 300px); }
.table .hint { bottom: auto; top: calc(50% + 2.1 * var(--statement)); }
@media (max-width: 720px) { .table .thing { width: 38vw; } .table-title { top: 120px; transform: none; } }

/* 2. the stack */
.stack-title { position: absolute; left: var(--m); top: 22%; max-width: min(9em, calc(50vw - var(--m))); pointer-events: none; }
.stack .thing { width: clamp(220px, 30vw, 520px); }
.stack-count { position: absolute; margin: 0; font-variant-numeric: tabular-nums; pointer-events: none; }
@media (max-width: 720px) { .stack .thing { width: 72vw; } .stack-title { top: 112px; } }

/* 3. the words */
.words-wrap { position: absolute; left: var(--m); right: var(--m); top: 50%; transform: translateY(-60%); }
.words { max-width: 11.5em; }
.word { position: relative; display: inline-block; cursor: grab; touch-action: none; will-change: transform; outline: none; }
.word.is-held { cursor: grabbing; z-index: 5; }
.word:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; text-decoration-color: var(--accent); }
.word.is-noun { color: var(--ink); }
.word-print { position: absolute; left: 0; top: calc(100% + 10px); width: clamp(160px, 15vw, 260px); pointer-events: none; opacity: 0; transform: translateY(-12px) scale(.94); transform-origin: 0 0;
  transition: opacity 120ms linear, transform 300ms var(--tau-ease); }
.word.is-out .word-print, .word.is-held .word-print { opacity: 1; transform: none; transition-duration: 40ms, 300ms; }
.word-print { font-size: 12px; line-height: 16px; letter-spacing: 0; }
.word-print .paper { display: block; }
.word-print .paper img { aspect-ratio: 16 / 10; }
.word-print .name { display: block; margin-top: 6px; font: 400 12px/16px var(--font); letter-spacing: 0; color: var(--ink3); }
.words-hint { margin: 28px 0 0; }

/* 4. the window */
.win-title { position: absolute; left: var(--m); top: 22%; max-width: 11.5em; pointer-events: none; }
.win-layer { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; will-change: clip-path, transform; }
.win-layer img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.win-frame { border-radius: 12px; box-shadow: 0 0 0 .5px var(--line-strong), var(--e3); }
.win-frame.is-held { box-shadow: 0 0 0 .5px var(--line-strong), 0 32px 80px rgb(0 0 0 / .2), 0 8px 24px rgb(0 0 0 / .1); }
.win-frame:focus-visible { box-shadow: 0 0 0 1.5px var(--accent), var(--e3); }
.win-frame .tag { opacity: 1; left: 0; top: calc(100% + 10px); }

/* 5. four prints on a grid */
.grid-title { position: absolute; left: var(--m); top: 18%; max-width: 11.5em; pointer-events: none; }
.grid-lines { position: absolute; inset: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; pointer-events: none; opacity: 0; transition: opacity 120ms linear; }
.grid-lines i { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset .5px 0 0 color-mix(in srgb, var(--accent) 30%, transparent), inset -.5px 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
.grid.is-moving .grid-lines { opacity: 1; transition-duration: 40ms; }
.grid .thing .paper { border-radius: 2px; }

/* 6. the frame */
.frame-title { position: absolute; left: var(--m); top: 18%; max-width: min(9.5em, calc(50vw - var(--m))); pointer-events: none; }
.frame-box { position: absolute; padding: clamp(10px, 1.2vw, 18px); border-radius: 4px; box-shadow: 0 0 0 .5px var(--line-strong); transition: box-shadow 120ms linear, background-color 120ms linear; }
.frame-box.is-near { box-shadow: 0 0 0 1.5px var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); transition-duration: 40ms; }
.frame-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ground); }
.frame-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity 300ms var(--tau-ease), transform 600ms var(--tau-ease); }
.frame-pic img.is-old { opacity: 0; transform: scale(1.03); }
.frame-cap { position: absolute; left: 0; top: calc(100% + 12px); display: flex; gap: 10px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.frame-cap b { font-weight: 550; }
.frame-cap span { color: var(--ink3); }
.chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 9999px; background: var(--raised); box-shadow: 0 0 0 .5px var(--line), var(--e1); font-size: 13px; line-height: 20px; white-space: nowrap; transition: opacity 120ms linear, box-shadow 200ms linear; }
.chip img { width: 40px; height: 25px; border-radius: 9999px; object-fit: cover; object-position: top; pointer-events: none; }
.thing.is-held .chip { box-shadow: 0 0 0 .5px var(--line), var(--e3); }
.thing.is-in .chip { opacity: .35; }
.thing:focus-visible .chip { box-shadow: 0 0 0 1.5px var(--accent); }

/* 7. the hand */
.hand-title { position: absolute; left: var(--m); top: 16%; max-width: min(9.5em, calc(50vw - var(--m))); pointer-events: none; }
.hand .thing { width: clamp(170px, 17vw, 300px); }
.hand .thing .paper { transition: box-shadow 200ms linear, transform 300ms var(--tau-ease); }
.hand .thing.is-up .paper { transform: translateY(-28px); }
.hand .thing.is-played .paper { box-shadow: var(--e3); }
.hand-slot { position: absolute; border-radius: 4px; box-shadow: inset 0 0 0 .5px var(--line-strong); pointer-events: none; }
.hand-slot span { position: absolute; left: 0; top: calc(100% + 10px); }

/* 8. the column */
.col-wrap { position: absolute; left: var(--m); top: 50%; transform: translateY(-55%); right: var(--m); }
.col-text { position: relative; margin: 0; font: 450 var(--statement)/1 var(--font); letter-spacing: -0.032em; text-wrap: balance; font-variation-settings: "opsz" 32; }
.col-edge { position: absolute; top: -24px; bottom: -24px; width: 0; border-left: 1px solid var(--accent); }
.col-knob { position: absolute; left: -14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 9999px; background: var(--raised); box-shadow: 0 0 0 1px var(--accent), var(--e2); cursor: grab; touch-action: none; outline: none; display: grid; place-items: center; }
.col-knob::after { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); }
.col-knob:is(:active, [data-active]) { cursor: grabbing; }
.col-knob:focus-visible { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.col-read { position: absolute; left: 22px; top: 50%; margin-top: 18px; display: flex; flex-direction: column; font: 500 12px/16px var(--font); letter-spacing: 0; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.col-base { position: absolute; left: 0; right: 0; top: -24px; border-top: .5px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.col-hint { margin: 48px 0 0; }

/* 9. the layers */
.lay-title { position: absolute; left: var(--m); top: 18%; max-width: min(9.5em, calc(46vw - var(--m))); pointer-events: none; }
.lay-stage { position: absolute; right: 0; top: 8%; bottom: 6%; width: 54%; perspective: 1800px; cursor: grab; touch-action: none; outline: none; }
.lay-stage.is-held { cursor: grabbing; }
.lay-rig { position: absolute; left: 46%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.lay-plane { position: absolute; transform-style: preserve-3d; }
.lay-plane .paper { box-shadow: 0 0 0 .5px var(--line), 0 18px 48px rgb(0 0 0 / .10); }
.lay-plane img { aspect-ratio: 16 / 10; }
.lay-tag { position: absolute; left: 100%; top: 0; margin-left: 16px; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: var(--page); font: 400 12px/18px var(--font); white-space: nowrap; }
.lay-hint { position: absolute; left: var(--m); bottom: 104px; margin: 0; }
@media (max-width: 720px) { .lay-stage { left: 0; right: 0; width: auto; top: 44%; } }
.pick { width: min(880px, calc(100% - 32px)); }
@media (max-width: 720px) { .frame-title, .hand-title, .lay-title, .stack-title { max-width: 9.5em; } }
.pick-dock { max-width: 100%; flex-wrap: wrap; justify-content: center; border-radius: 22px; }
.pick-dock button { white-space: nowrap; }