@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Courier New");
  size-adjust: 93%;
  ascent-override: 90%;
  descent-override: 22%;
}

:root {
  --bg: #fff;
  --fg: #000;
  --ink-2: #343434;
  --ink-3: #6e6e6e;
  --ink-4: #9a9a9a;
  --line: #e6e6e6;
  --dot: oklch(0.869 0.005 56);
  --dot-on: oklch(0.216 0.006 56);
  --skeleton: #eeeeee;
  --plate: transparent;
  --scrim: rgba(255, 255, 255, .55);
  --shade: 0, 0, 0;
  --dock-bg: #0b0b0b;
  --dock-fg: #fff;
  --dock-mute: rgba(255, 255, 255, .55);
  --dock-hover: rgba(255, 255, 255, .08);
  --ink-filter: none;
  --font: "IBM Plex Mono", "Plex Mono Fallback", monospace;
  --std: cubic-bezier(0.4, 0, 0.2, 1);
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 64px;
  --pad: 16px;
  color-scheme: light;
}



* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/24px var(--font);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
}
#view { flex: 1 0 auto; }
body.locked { overflow: hidden; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

svg.icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hit { display: grid; place-items: center; min-width: 48px; min-height: 48px; }
@media (hover: hover) { .hit:hover { opacity: .7; } }
.hit { transition: opacity .15s; }

/* ── header ───────────────────────────────────────── */
u0-header {
  position: fixed; inset: 0 0 auto; z-index: 99; height: var(--nav-h);
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
  padding: 0 calc(var(--pad) - 12px);
  background: var(--bg);
}
u0-header nav { display: flex; justify-content: center; gap: 16px; color: var(--ink-2); }
u0-header nav button { opacity: .2; transition: opacity .3s var(--std); padding: 12px 0; }
u0-header nav button[aria-pressed="true"] { opacity: 1; }
@media (hover: hover) { u0-header nav button:hover { opacity: 1; } }
u0-header nav[hidden] { display: flex; visibility: hidden; }

.morph { position: relative; width: 16px; height: 16px; }
.morph i {
  position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 9px; background: currentColor;
  transition: transform .3s var(--std), width .3s var(--std);
  transform-origin: center;
}
[data-state="menu"] .morph i:first-child { transform: rotate(90deg); }
[data-state="back"] .morph i { width: 10px; transform-origin: left center; }
[data-state="back"] .morph i:first-child { transform: translate(2px, 0) rotate(-45deg); }
[data-state="back"] .morph i:last-child { transform: translate(2px, 0) rotate(45deg); }
[data-state="close"] .morph i:first-child { transform: rotate(45deg); }
[data-state="close"] .morph i:last-child { transform: rotate(-45deg); }

u0-header .bag { position: relative; justify-self: end; }
u0-header .count {
  position: absolute; top: 9px; right: 6px; min-width: 14px; height: 14px; padding: 0 3px;
  font-size: 9px; line-height: 14px; font-weight: 500; text-align: center;
  background: var(--fg); color: var(--bg); border-radius: 7px;
  transform: scale(0); transition: transform .35s var(--out);
}
u0-header .count:not(:empty) { transform: scale(1); }
u0-header .bag.bump svg { animation: bump .45s var(--out); }
@keyframes bump { 35% { transform: translateY(-3px) scale(1.08); } }

/* ── pop-up strip ─────────────────────────────────── */
u0-strip { display: block; overflow: hidden; height: 0; transition: height .4s var(--out); }
u0-strip[data-on] { height: 28px; }
u0-strip a { display: flex; width: max-content; height: 28px; align-items: center; font-size: 11px; letter-spacing: .02em; background: var(--fg); color: var(--bg); }
u0-strip .run { display: flex; gap: 48px; padding-right: 48px; animation: run 32s linear infinite; }
u0-strip .live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--bg); vertical-align: 1px; animation: pulse 1.6s var(--std) infinite; }
@keyframes run { to { transform: translateX(-100%); } }
@keyframes pulse { 50% { opacity: .2; } }
@media (hover: hover) { u0-strip a:hover .run { animation-play-state: paused; } }

/* ── grid ─────────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  padding: 24px var(--pad) 120px;
}
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; } }

.tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.tile .frame { width: 100%; aspect-ratio: 1; overflow: hidden; transition: transform .3s var(--std); }
@media (hover: hover) { .tile:hover .frame { transform: scale(1.02); } }
.tile .frame img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tile .sku { position: relative; }

.shimmer { position: relative; overflow: hidden; background: var(--skeleton); }
.shimmer::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background-image: linear-gradient(90deg, #fff0 0, #fff6 20%, #fff9 60%, #fff0);
  animation: shimmer 1.2s ease infinite;
}
.shimmer.sku { width: 5ch; height: 16px; margin-top: 4px; }
@keyframes shimmer { to { transform: translateX(100%); } }

img.fade { opacity: 0; transition: opacity .4s var(--std); }
img.fade.in { opacity: 1; }

.empty { min-height: 60dvh; display: grid; place-content: center; gap: 8px; text-align: center; padding: var(--pad); }
.empty small { color: var(--ink-3); font-size: 12px; }

/* ── product ──────────────────────────────────────── */
.pdp { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--pad) 96px; }
.stage { position: relative; width: min(1100px, 100%); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.slides::-webkit-scrollbar { display: none; }
.slides img { flex: 0 0 100%; scroll-snap-align: center; height: min(60dvh, 620px); object-fit: contain; mix-blend-mode: multiply; }
.stage .arrow { position: absolute; top: 50%; translate: 0 -50%; }
.stage .prev { left: 12%; }
.stage .next { right: 12%; }
@media (max-width: 767px) { .stage .arrow { display: none; } .pdp { padding-inline: 0; } }

.dots { display: flex; gap: 6px; justify-content: center; margin: 20px 0 12px; }
.dots button { width: 16px; height: 16px; display: grid; place-items: center; }
.dots button::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--dot); transition: background .2s; }
.dots button[aria-current="true"]::before { background: var(--dot-on); }

.meta { display: grid; justify-items: center; gap: 20px; width: min(560px, 100% - 2 * var(--pad)); font-weight: 500; }
.titlebar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; width: 100%; }
.titlebar .side { opacity: 0; pointer-events: none; transition: opacity .3s var(--std); }
.pdp[data-mode] .titlebar .side { opacity: 1; pointer-events: auto; }
.note { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: -12px; }

.actions { position: relative; height: 48px; width: 100%; display: grid; place-items: center; }
.actions .add { transition: opacity .25s var(--std), transform .3s var(--std); }
.pdp[data-mode] .actions .add { opacity: 0; transform: scale(.6); pointer-events: none; }
.sizes { position: absolute; inset: 0; display: flex; justify-content: center; gap: 24px; pointer-events: none; }
.sizes button {
  min-width: 48px; height: 48px; opacity: 0; transform: translateX(var(--tx));
  transition: transform .3s var(--std), opacity .3s var(--std);
}
.pdp[data-mode="buy"] .sizes { pointer-events: auto; }
.pdp[data-mode="buy"] .sizes button { opacity: 1; transform: none; }
.sizes button[data-state="adding"] { animation: pulse 1s var(--std) infinite; }

.info-toggle { height: 48px; padding: 0 12px; }
.desc { overflow: hidden; }
.desc > div { transform: translateY(100%); opacity: 0; transition: transform .3s linear, opacity .3s linear; text-wrap: balance; }
.desc p { line-height: 24px; }
.pdp[data-mode="info"] .desc > div { transform: none; opacity: 1; }
.pdp[data-mode="info"] .info-toggle { display: none; }
.pdp:not([data-mode="info"]) .desc { height: 0; }

/* ── bag / menu contents ─────────────────────────── */
u0-bag ul { list-style: none; display: grid; gap: 16px; }
u0-bag li { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; align-items: center; }
u0-bag li img { width: 80px; height: 80px; object-fit: contain; mix-blend-mode: multiply; }
u0-bag li small { display: block; color: var(--ink-3); font-size: 12px; }
u0-bag .qty { display: flex; align-items: center; }
u0-bag .qty button { width: 32px; height: 32px; }
u0-bag .rows { display: grid; gap: 4px; border-top: 1px solid var(--fg); padding-top: 16px; }
u0-bag .row { display: flex; justify-content: space-between; }
u0-bag .row.total { font-weight: 500; }
u0-bag .row.discount { color: var(--ink-3); }
u0-bag .code-link { justify-self: center; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-3); }
u0-bag .code { display: none; grid-template-columns: 1fr auto; }
u0-bag .code.show { display: grid; }
u0-bag .code .btn { width: auto; padding: 0 20px; }
u0-bag .fine { font-size: 10px; line-height: 15px; color: var(--ink-3); text-align: center; }
u0-bag .empty-bag { text-align: center; color: var(--ink-3); padding: 40px 0; }

.field { height: 48px; padding: 12px; border: 1px solid var(--fg); border-radius: 0; font: inherit; text-transform: uppercase; background: var(--bg); color: var(--fg); outline: 0; width: 100%; }
.field::placeholder { color: var(--ink-4); }
.field:focus { box-shadow: inset 0 0 0 1px var(--fg); }

.btn {
  display: grid; place-items: center; width: 100%; height: 48px; padding: 0 16px;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg); transition: background .15s, color .15s, opacity .15s;
}
@media (hover: hover) { .btn:not(:disabled):hover { background: var(--bg); color: var(--fg); } }
.btn.ghost { background: var(--bg); color: var(--fg); }
@media (hover: hover) { .btn.ghost:not(:disabled):hover { background: var(--fg); color: var(--bg); } }

u0-menu nav { display: grid; gap: 4px; text-align: center; }
u0-menu nav a { padding: 8px; }
u0-menu .event { display: grid; gap: 4px; text-align: center; }
u0-menu .event small { color: var(--ink-3); font-size: 12px; }

/* ── signup sheet ─────────────────────────────────── */
u0-signup .sheet {
  position: fixed; left: 0; bottom: 0; z-index: 97; width: 100%; padding: var(--pad);
  transform: translateY(110%); transition: transform .5s var(--out);
}
u0-signup[open] .sheet { transform: none; }
u0-signup form {
  width: min(760px, 100%); margin: 0 auto; padding: 16px; display: grid; gap: 12px;
  border: 2px solid var(--fg); background: color-mix(in srgb, var(--bg) 10%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
u0-signup .head { display: flex; justify-content: space-between; align-items: center; margin: -12px -12px -4px 0; }
u0-signup .field { height: 50px; }
u0-signup .consent { font-size: 10px; line-height: 14px; color: var(--ink-2); }
u0-signup .consent a { text-decoration: underline; }
u0-signup[data-done] form > :not(.head) { display: none; }

/* ── chrome shader ────────────────────────────────── */
u0-chrome { display: block; position: relative; overflow: hidden; background: var(--fg); touch-action: pan-y; }
u0-chrome canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
u0-chrome.fallback { background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 4px); }

/* ── pop-up / waitlist / info pages ───────────────── */
.page { display: grid; justify-items: center; text-align: center; }
.hero { position: relative; width: 100%; height: calc(100dvh - var(--nav-h)); }
.hero u0-chrome { position: absolute; inset: 0; }
.hero .over {
  position: absolute; left: 50%; bottom: 24px; translate: -50% 0; width: min(560px, 100% - 32px);
  display: grid; gap: 12px; padding: 16px; background: var(--bg); border: 2px solid var(--fg);
}
.hero .state { font-weight: 500; }
.hero .clock { font-size: 28px; line-height: 36px; font-variant-numeric: tabular-nums; }
.hero small { color: var(--ink-3); font-size: 12px; }

.doc { width: min(640px, 100%); padding: 24px var(--pad) 120px; display: grid; gap: 40px; text-align: left; }
.doc section { display: grid; gap: 8px; }
.doc h2 { font: inherit; font-weight: 500; }
.doc p, .doc li { text-transform: none; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.doc ul { padding-left: 18px; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }

.waitlist { width: min(560px, 100%); padding: 0 var(--pad); display: grid; gap: 12px; margin-top: -1px; }
.waitlist .done { padding: 24px 0; }

/* ── footer ───────────────────────────────────────── */
u0-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; padding: 0 var(--pad) 24px; font-size: 8px; color: var(--ink-3); }
u0-footer a { padding: 8px 4px; transition: opacity .15s; }
@media (min-width: 768px) { u0-footer { font-size: 14px; } u0-footer a { padding: 8px 12px; } }
@media (hover: hover) { u0-footer a:hover { opacity: .7; } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--std); }
::view-transition-group(*) { animation-duration: .35s; animation-timing-function: var(--out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ── fx ───────────────────────────────────────────── */
.led {
  display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%;
  background: currentColor; vertical-align: 2px; animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .25; } }

.pimg { transition: transform .18s var(--out); }
.pimg:active { transform: translateY(1px) scale(.985); transition-duration: 50ms; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pimg { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}

.btn:active:not(:disabled) { transform: translateY(1px); transition-duration: 50ms; }
u0-footer[hidden] { display: none; }
.pdp[data-mode="info"] .actions { display: none; }

/* ── dock ─────────────────────────────────────────── */
u0-dock {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 96;
  translate: -50% 0; transition: translate .45s var(--out), opacity .3s var(--std);
}
u0-dock[data-tucked] { translate: -50% calc(100% + 24px); opacity: 0; }
u0-dock nav {
  display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: var(--dock-bg); color: var(--dock-fg);
  box-shadow: inset 0 1px 0 rgba(var(--shade), .1), 0 10px 30px -10px rgba(0,0,0,.45);
}
u0-dock a, u0-dock button {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  color: var(--dock-mute); transition: color .2s var(--std), background .2s var(--std), transform .18s var(--out);
}
u0-dock svg.icon { width: 20px; height: 20px; stroke-width: 1.8; }
u0-dock [aria-current], u0-dock [aria-expanded] { color: var(--dock-fg); }
u0-dock [aria-current]::after {
  content: ""; position: absolute; bottom: 5px; width: 3px; height: 3px; border-radius: 50%; background: var(--dock-fg);
}
u0-dock a:active, u0-dock button:active { transform: scale(.92); transition-duration: 60ms; }
@media (hover: hover) {
  u0-dock a:hover, u0-dock button:hover { color: var(--dock-fg); background: var(--dock-hover); }
  u0-dock [data-label]::before {
    content: attr(data-label); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px;
    padding: 4px 8px; font-size: 10px; line-height: 14px; white-space: nowrap; background: var(--dock-bg); color: var(--dock-fg);
    opacity: 0; pointer-events: none; transition: opacity .15s, translate .2s var(--out);
  }
  u0-dock [data-label]:hover::before { opacity: 1; translate: -50% 0; }
}
body:has(u0-signup[open]) u0-dock { translate: -50% calc(100% + 24px); opacity: 0; }
.grid, .pdp, .doc { padding-bottom: 120px; }

/* ── agent sheet ──────────────────────────────────── */
u0-agent .lede { font-size: 12px; line-height: 18px; color: var(--ink-2); }
u0-agent .endpoints { display: grid; gap: 8px; }
u0-agent .endpoint { display: grid; grid-template-columns: 88px 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--fg); }
u0-agent .endpoint .k { font-size: 11px; color: var(--ink-3); }
u0-agent .endpoint code { font: inherit; font-size: 13px; text-transform: none; overflow-wrap: anywhere; }
u0-agent .endpoint small { grid-column: 2 / -1; font-size: 10px; color: var(--ink-3); }
u0-agent .copy { font-size: 11px; min-width: 64px; height: 32px; text-decoration: underline; text-underline-offset: 3px; }
u0-agent .tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; }
u0-agent .tabs button { opacity: .3; transition: opacity .2s; padding: 4px 0; }
u0-agent .tabs [aria-selected="true"] { opacity: 1; }
u0-agent .snippet { position: relative; margin: 0; padding: 14px 72px 14px 14px; background: var(--dock-bg); color: var(--dock-fg); font: 12px/18px var(--font); text-transform: none; white-space: pre-wrap; overflow-wrap: anywhere; }
u0-agent .snippet .copy { position: absolute; top: 8px; right: 8px; color: var(--dock-fg); }
u0-agent .also { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; color: var(--ink-3); }
u0-agent .also a { text-decoration: underline; text-underline-offset: 3px; }

/* ── home intro + docs ────────────────────────────── */
.intro { width: min(640px, 100%); margin: 0 auto; padding: 24px var(--pad) 140px; display: grid; gap: 8px; color: var(--ink-3); font-size: 12px; line-height: 19px; }
.intro h2, .intro h3 { font: inherit; color: var(--fg); margin-top: 12px; }
.intro p { text-transform: none; }
.intro a { text-decoration: underline; text-underline-offset: 3px; }
.doc h1 { font: inherit; font-weight: 500; }
.grid { list-style: none; } .grid > li { display: contents; }

/* ── share sheet (shares the agent sheet chrome) ──── */
u0-share figure { display: grid; gap: 8px; justify-items: center; text-align: center; }
u0-share figure img { width: 240px; height: 240px; image-rendering: pixelated; }
u0-share figcaption small { color: var(--ink-3); font-size: 11px; }
u0-share .row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--fg); }
u0-share code { font: inherit; font-size: 12px; text-transform: none; overflow-wrap: anywhere; }
u0-share .copy { font-size: 11px; text-decoration: underline; text-underline-offset: 3px; min-width: 64px; }
.links { display: flex; gap: 24px; justify-content: center; }
.links button { height: 48px; padding: 0 4px; }
.links .share-toggle { color: var(--ink-3); }
.pdp[data-mode="info"] .links .info-toggle { display: none; }

/* ── depth: contact shadows that respond to lift and tilt ── */
.tile .frame { position: relative; isolation: isolate; overflow: visible; }
.tile .frame::before, .stage::after {
  content: ""; position: absolute; z-index: -1; left: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--shade), .2), rgba(var(--shade), .07) 55%, transparent);
  transition: transform .45s var(--out), opacity .45s var(--out);
}
.tile .frame::before { bottom: 4%; width: 62%; height: 9%; translate: -50% 0; }
.tile .frame img { transition: transform .45s var(--out); will-change: transform; }
@media (hover: hover) {
  .tile:hover .frame { transform: none; }
  .tile:hover .frame img { transform: translateY(-6px) scale(1.025); }
  .tile:hover .frame::before { transform: scale(.82); opacity: .55; }
}
.tile:active .frame img { transform: translateY(1px) scale(.99); transition-duration: 80ms; }
.tile:active .frame::before { transform: scale(1.05); opacity: 1; transition-duration: 80ms; }

.stage { isolation: isolate; }
.stage::after {
  bottom: 2%; width: min(420px, 50%); height: 7%;
  translate: calc(-50% + var(--sx, 0px)) 0;
}
.stage:has(.pimg:hover)::after { transform: scale(.9); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .tile:hover .frame img { transform: none; } }

/* ── ink ──────────────────────────────────────────── */
.ink { padding: 24px 0 140px; gap: 40px; }
.ink-head { width: min(640px, 100% - 32px); display: grid; gap: 16px; justify-items: center; }
.ink-head h1 { font: inherit; font-weight: 500; }
.ink-head p { text-transform: none; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.ink-head a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.ink-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.ink .work { list-style: none; width: 100%; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 1024px) { .ink .work { grid-template-columns: repeat(4, 1fr); } }
.ink .work img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .45s var(--out), filter .45s var(--out); filter: grayscale(.15); }
@media (hover: hover) { .ink .work li { overflow: hidden; } .ink .work img:hover { transform: scale(1.03); filter: none; } }
.ink-form { width: min(560px, 100% - 32px); display: grid; gap: 12px; text-align: left; scroll-margin-top: calc(var(--nav-h) + 16px); }
.ink-form h2 { font: inherit; font-weight: 500; }
.ink-form .hint, .ink-form .done { text-transform: none; font-size: 13px; line-height: 20px; color: var(--ink-2); }
.ink-form form { display: grid; gap: 12px; }
.ink-form label { display: grid; gap: 6px; font-size: 12px; }
.ink-form label small { color: var(--ink-3); font-size: 10px; }
.ink-form textarea.field { height: auto; resize: vertical; text-transform: none; }
.ink-form input.field { text-transform: none; }
.ink-form select.field { appearance: none; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; padding-right: 36px; }
.ink-form input[type=file].field { height: auto; padding: 10px; font-size: 12px; }
.ink-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ink-form .check { display: flex; gap: 10px; align-items: center; text-transform: none; font-size: 12px; }
.ink-form .check input { width: 18px; height: 18px; accent-color: #000; }
.ink-form .status { min-height: 18px; font-size: 12px; text-transform: none; color: var(--fg); }

/* ── receipt printer ──────────────────────────────── */
.receipt-wrap { display: grid; gap: 16px; justify-items: center; }
.printer { width: 100%; max-width: 340px; height: 18px; background: #0b0b0b; outline: 1px solid var(--line); border-radius: 6px 6px 2px 2px; position: relative; z-index: 2; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.printer i { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: #333; }
.receipt {
  width: calc(100% - 28px); max-width: 312px; margin-top: -22px; padding: 22px 16px 26px;
  background: #fbfbf8; color: #111; font-size: 11px; line-height: 17px; display: grid; gap: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 12px 24px -16px rgba(0,0,0,.35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 97.5% 100%, 95% calc(100% - 6px), 92.5% 100%, 90% calc(100% - 6px), 87.5% 100%, 85% calc(100% - 6px), 82.5% 100%, 80% calc(100% - 6px), 77.5% 100%, 75% calc(100% - 6px), 72.5% 100%, 70% calc(100% - 6px), 67.5% 100%, 65% calc(100% - 6px), 62.5% 100%, 60% calc(100% - 6px), 57.5% 100%, 55% calc(100% - 6px), 52.5% 100%, 50% calc(100% - 6px), 47.5% 100%, 45% calc(100% - 6px), 42.5% 100%, 40% calc(100% - 6px), 37.5% 100%, 35% calc(100% - 6px), 32.5% 100%, 30% calc(100% - 6px), 27.5% 100%, 25% calc(100% - 6px), 22.5% 100%, 20% calc(100% - 6px), 17.5% 100%, 15% calc(100% - 6px), 12.5% 100%, 10% calc(100% - 6px), 7.5% 100%, 5% calc(100% - 6px), 2.5% 100%, 0 calc(100% - 6px));
  transform-origin: top; animation: feed 1.6s steps(14, end) both;
}
@keyframes feed { from { transform: translateY(-100%); clip-path: inset(0 0 100% 0); } }
.receipt header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.receipt header b { font-weight: 500; }
.receipt small { color: var(--ink-3); font-size: 10px; }
.r-line { display: flex; justify-content: space-between; gap: 12px; }
.r-line span:last-child { text-align: right; overflow-wrap: anywhere; }
.receipt hr { border: 0; border-top: 1px dashed #bbb; margin: 6px 0; }
.r-idea { text-transform: none; white-space: pre-wrap; }
.r-qr { justify-self: center; margin-top: 8px; image-rendering: pixelated; }
.receipt footer { text-align: center; color: var(--ink-3); font-size: 10px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .receipt { animation: none; } }
.ink-section { width: 100%; display: grid; gap: 8px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.ink-section > h2 { font: inherit; font-weight: 500; text-align: center; }
.ink-section .grid { padding-bottom: 24px; }
.sizes button[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; }


/* ── image plates ─────────────────────────────────── */
.tile .frame, .slides { background: var(--plate); }

/* ── carousel affordances ─────────────────────────── */
.count-badge { position: absolute; right: 16px; bottom: 12px; font-size: 10px; letter-spacing: .08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.thumbs { display: none; }
@media (min-width: 1024px) {
  .count-badge { display: none; }
  .thumbs {
    position: absolute; left: 0; top: 50%; translate: 0 -50%; display: grid; gap: 8px;
  }
  .thumbs button { width: 64px; height: 64px; padding: 0; opacity: .35; outline: 1px solid transparent; outline-offset: 3px; transition: opacity .25s var(--std), outline-color .25s var(--std); background: var(--plate); }
  .thumbs button:hover { opacity: .75; }
  .thumbs button[aria-selected="true"] { opacity: 1; outline-color: var(--fg); }
  .thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .pdp[data-cat="ink"] .thumbs button:first-child img { filter: var(--ink-filter); }
  .stage .prev { left: 120px; }
}


/* ── sheets (metalui sheet spec + ios detents) ───── */
:root { --sheet-ease: cubic-bezier(.32, .72, 0, 1); --sheet-dur: .5s; --sheet-r: 22px; }

/* the page recedes behind an open sheet, like iOS */
#view, u0-header, u0-strip, u0-footer { transition: transform var(--sheet-dur) var(--sheet-ease), border-radius var(--sheet-dur) var(--sheet-ease), filter var(--sheet-dur) var(--sheet-ease); transform-origin: 50% 0; }
@media (max-width: 767px) {
  body[data-sheet] #view, body[data-sheet] u0-strip { transform: scale(.94) translateY(14px); border-radius: 14px; overflow: hidden; filter: brightness(.96); }
  body[data-sheet] u0-header { transform: scale(.94) translateY(10px); }
}

.scrim {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .32);
  opacity: 0; pointer-events: none; transition: opacity var(--sheet-dur) var(--sheet-ease);
}
[open] > .scrim { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; z-index: 101; background: var(--bg); color: var(--fg);
  display: grid; grid-template-rows: auto 1fr; overscroll-behavior: contain;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 60px -12px rgba(0, 0, 0, .28);
  transition: transform var(--sheet-dur) var(--sheet-ease), opacity .2s, visibility 0s var(--sheet-dur);
  visibility: hidden; will-change: transform;
}
[open] > .sheet { visibility: visible; transition: transform var(--sheet-dur) var(--sheet-ease), opacity .2s; }
.sheet.dragging { transition: none !important; }
.sheet > .inner { overflow-y: auto; overscroll-behavior: contain; padding: 0 20px max(24px, env(safe-area-inset-bottom)); display: grid; gap: 14px; align-content: start; }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; background: var(--bg); touch-action: none; }
.sheet-head h2 { font: inherit; font-weight: 500; letter-spacing: .02em; }
.sheet-head .x { width: 32px; height: 32px; min-width: 0; min-height: 0; border-radius: 50%; background: rgba(0, 0, 0, .05); transition: background .15s, transform .15s var(--out); }
.sheet-head .x svg { width: 16px; height: 16px; stroke-width: 2.4; }
@media (hover: hover) { .sheet-head .x:hover { background: rgba(0, 0, 0, .1); opacity: 1; } }
.sheet-head .x:active { transform: scale(.92); }
.grabber { display: grid; place-items: center; height: 24px; touch-action: none; cursor: grab; }
.grabber i { width: 36px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .16); transition: background .2s, width .2s var(--out); }
.sheet.dragging .grabber i { background: rgba(0, 0, 0, .3); width: 44px; }

/* phones: bottom sheet */
@media (max-width: 767px) {
  .sheet { left: 0; right: 0; bottom: 0; max-height: 85dvh; border-radius: var(--sheet-r) var(--sheet-r) 0 0; transform: translateY(100%); }
  [open] > .sheet { transform: translateY(0); }
  u0-menu .sheet { max-height: 92dvh; }
}

/* wider: floating panels inset from the edge */
@media (min-width: 768px) {
  .grabber { display: none; }
  .sheet > .inner { padding-top: 4px; }
  .sheet[data-side="right"], .sheet[data-side="left"] { top: 10px; bottom: 10px; width: min(400px, calc(100vw - 20px)); border-radius: var(--sheet-r); }
  .sheet[data-side="right"] { right: 10px; transform: translateX(calc(100% + 24px)); }
  .sheet[data-side="left"] { left: 10px; transform: translateX(calc(-100% - 24px)); }
  .sheet[data-side="bottom"] {
    left: 50%; top: 50%; width: min(520px, calc(100% - 48px)); max-height: calc(100dvh - 64px); border-radius: var(--sheet-r);
    translate: -50% -50%; transform: translateY(-6px) scale(.985); opacity: 0;
  }
  [open] > .sheet[data-side="bottom"] { transform: none; opacity: 1; }
  [open] > .sheet[data-side="right"], [open] > .sheet[data-side="left"] { transform: none; }
}

u0-menu .inner { justify-items: stretch; }
u0-menu u0-chrome { height: 160px; border-radius: 12px; }
.share .inner { justify-items: center; }
@media (prefers-reduced-motion: reduce) {
  .sheet, .scrim, #view, u0-header, u0-strip { transition-duration: 1ms !important; }
  body[data-sheet] #view, body[data-sheet] u0-header, body[data-sheet] u0-strip { transform: none; filter: none; }
}

/* ── booking picker ───────────────────────────────── */
.booking { display: none; border: 0; padding: 0; margin: 0; width: 100%; min-width: 0; gap: 10px; }
.pdp[data-mode="buy"] .booking { display: grid; animation: rise .4s var(--out) both; }
.booking legend { font-size: 12px; padding: 0; margin-bottom: 10px; width: 100%; text-align: center; }
.booking legend small { display: block; font-size: 10px; color: var(--ink-3); }
.booking .days { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; mask: linear-gradient(90deg, #000 85%, transparent); }
.booking .days::-webkit-scrollbar { display: none; }
.booking .days button { flex: 0 0 auto; scroll-snap-align: start; display: grid; gap: 2px; min-width: 64px; padding: 8px 6px; border: 1px solid var(--line); font-size: 12px; transition: background .15s, color .15s, border-color .15s; }
.booking .days small { font-size: 9px; color: var(--ink-3); }
.booking .windows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.booking .windows button { height: 40px; border: 1px solid var(--line); font-size: 11px; transition: background .15s, color .15s, border-color .15s; }
.booking [aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.booking [aria-checked="true"] small { color: inherit; opacity: .6; }
@media (hover: hover) { .booking button:not([aria-checked="true"]):hover { border-color: var(--fg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.share .sheet-head { justify-self: stretch; }
u0-bag li .session { display: block; font-size: 11px; color: var(--fg); margin-top: 2px; }
.share .pitch { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: -6px; }

/* ── brand entrance ───────────────────────────────── */
.brand { display: grid; gap: clamp(48px, 8vw, 96px); padding-bottom: 120px; }
.brand .hero { position: relative; height: calc(100svh - var(--nav-h)); min-height: 520px; margin-top: calc(-1 * 0px); }
.brand .hero u0-chrome { position: absolute; inset: 0; }
.brand .hero-copy {
  position: absolute; left: var(--pad); bottom: 24px; display: grid; gap: 12px; justify-items: start;
  max-width: min(420px, calc(100% - 2 * var(--pad))); padding: 16px 18px; background: var(--bg); color: var(--fg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 40px -18px rgba(0, 0, 0, .4);
}
.brand .hero-copy p { font-size: clamp(14px, 1.6vw, 18px); line-height: 1.5; max-width: 30ch; }
.brand .now { font-size: 11px; letter-spacing: .06em; padding: 8px 12px; border: 1px solid currentColor; border-radius: 999px; }
.brand .scroll-cue { position: absolute; right: var(--pad); bottom: 24px; font-size: 11px; padding: 8px 12px; background: var(--bg); animation: bob 2.4s ease-in-out infinite; }
@media (max-width: 767px) { .brand .scroll-cue { display: none; } .brand .hero-copy { bottom: 96px; } }
@keyframes bob { 50% { transform: translateY(4px); } }

.doors { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 var(--pad); scroll-margin-top: calc(var(--nav-h) + 12px); }
@media (min-width: 768px) { .doors { grid-template-columns: repeat(3, 1fr); } }
.door { position: relative; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 4 / 5; background: var(--plate, #f4f4f2); background: #f4f4f2; overflow: hidden; isolation: isolate; }
.door-art { display: grid; place-items: center; padding: 12%; }
.door-art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--out); }
.door-label { display: grid; gap: 2px; padding: 16px 18px 18px; border-top: 1px solid rgba(0,0,0,.08); background: #f4f4f2; }
.door-label b { font-weight: 500; font-size: 18px; }
.door-label span { font-size: 12px; color: var(--ink-3); text-transform: none; }
.door-label small { font-size: 10px; margin-top: 6px; }
@media (hover: hover) {
  .door:hover .door-art img { transform: scale(1.05) translateY(-6px); }
  .door::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--fg); opacity: 0; transition: opacity .25s var(--std); pointer-events: none; }
  .door:hover::after { opacity: 1; }
}
.door:active .door-art img { transform: scale(.98); transition-duration: 80ms; }

.reel { overflow: hidden; mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reel-track { display: flex; gap: 10px; width: max-content; animation: reel 60s linear infinite; }
.reel-track:hover { animation-play-state: paused; }
.reel img { height: clamp(220px, 32vw, 380px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s var(--std); }
.reel a:hover img { filter: none; }
@keyframes reel { to { transform: translateX(-50%); } }

.manifesto { width: min(640px, 100% - 32px); margin: 0 auto; display: grid; gap: 18px; text-align: left; }
.manifesto p { text-transform: none; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.55; }
.manifesto .facts { display: flex; flex-wrap: wrap; gap: 8px; }
.manifesto .facts span { font-size: 10px; letter-spacing: .06em; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; }
.manifesto .ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .reel-track, .scroll-cue { animation: none; } }
.ink-head .area { font-size: 11px; letter-spacing: .06em; color: var(--fg); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }


/* ── ask ai ───────────────────────────────────────── */
u0-ask { position: relative; display: inline-flex; }
.ask-trigger { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; letter-spacing: .04em; transition: border-color .2s, transform .15s var(--out); }
.ask-trigger:hover { border-color: var(--fg); }
.ask-trigger:active { transform: scale(.97); }
.orb {
  width: 24px; height: 24px; border-radius: 50%; position: relative; overflow: hidden; flex: none;
  background: conic-gradient(from var(--a, 0deg), #111, #bdbdbd, #fff, #5a5a5a, #e8e8e8, #111);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset -3px -4px 6px rgba(0,0,0,.35), inset 3px 3px 5px rgba(255,255,255,.6);
  animation: orb-spin 6s linear infinite;
}
.orb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), transparent 38%); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orb-spin { to { --a: 360deg; } }
u0-ask[open] .orb, .ask-trigger:hover .orb { animation-duration: 1.6s; }
.ask-menu {
  position: absolute; z-index: 60; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; min-width: 240px;
  display: grid; padding: 6px; background: var(--bg); border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 18px 40px -12px rgba(0,0,0,.3);
  transform-origin: 50% 100%; animation: pop .22s var(--out);
}
.ask-menu[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.ask-menu [role=menuitem] { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 12px; text-align: left; }
.ask-menu [role=menuitem]:hover, .ask-menu [role=menuitem]:focus-visible { background: rgba(0,0,0,.05); outline: none; }
.ask-menu kbd, .ask-menu i { font: inherit; font-size: 10px; color: var(--ink-3); font-style: normal; }
.ask-hint { padding: 8px 10px 4px; font-size: 10px; line-height: 14px; color: var(--ink-3); text-transform: none; border-top: 1px solid var(--line); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }
.pdp u0-ask { margin-top: -6px; }
.ink-head u0-ask, .agent u0-ask { justify-self: center; }
.ask-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ask-row small { font-size: 11px; color: var(--ink-3); text-transform: none; }
.ask-row .ask-menu { left: 0; translate: 0 0; }

/* qa pass */
u0-header nav button { opacity: .38; }
.booking.needs legend small { color: var(--fg); }
.ink-form { padding-bottom: 96px; }
@media (min-width: 1024px) { .slides img { height: min(52dvh, 560px); } }
u0-bag .qty button[data-q="0"] { width: auto; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  u0-ask[open]::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.28); animation: fade .2s; }
  .ask-menu, .ask-row .ask-menu {
    position: fixed; z-index: 91; inset: auto 8px calc(8px + env(safe-area-inset-bottom)); translate: none; min-width: 0;
    padding: 8px; border-radius: 22px; transform-origin: 50% 100%; animation: rise .32s var(--out);
  }
  .ask-menu [role=menuitem] { height: 52px; padding: 0 16px; border-radius: 14px; font-size: 13px; }
  .ask-hint { padding: 12px 16px 6px; font-size: 11px; line-height: 16px; text-align: left; }
}
@keyframes rise { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 767px) { body:has(u0-ask[open]) u0-dock { opacity: 0; pointer-events: none; transition: opacity .15s; } }
@media (min-width: 768px) { .agent .ask-menu { bottom: auto; top: calc(100% + 8px); transform-origin: 50% 0; } }
.agent .ask-menu { position: absolute; inset: auto; top: calc(100% + 8px); left: 50%; translate: -50% 0; transform-origin: 50% 0; animation: pop .22s var(--out); }
.agent u0-ask[open]::before { content: none; }
.agent u0-ask { display: grid; justify-items: center; }
.agent .ask-menu, .agent .ask-row .ask-menu { position: static; inset: auto; translate: none; width: 100%; margin-top: 8px; border-radius: 14px; animation: pop .22s var(--out); }
.coll + .coll { margin-top: 28px; }
.coll h2 { display: flex; align-items: baseline; gap: 8px; padding: 0 16px 10px; font-size: 11px; letter-spacing: .06em; font-weight: 400; }
.coll h2 b { font-weight: 500; }
.coll h2 small { margin-left: auto; color: var(--ink-3); }
.coll .grid { padding-top: 0; padding-bottom: 0; }
.coll:first-child { padding-top: 24px; }
.coll:last-child { padding-bottom: 120px; }
.coll h2 { padding-inline: var(--pad); }