/* Fidget Lab shell pass: shared cabinet + room chrome */
:root {
  --lab-bg: #08080a;
  --lab-ink: rgba(237, 228, 218, .9);
  --lab-muted: rgba(237, 228, 218, .48);
  --lab-faint: rgba(237, 228, 218, .18);
  --lab-line: rgba(237, 228, 218, .1);
  --lab-panel: rgba(18, 18, 22, .72);
  --lab-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* Paper Shaders pass: quiet tactile surface, off in low-power mode. */
.paper-shader-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .12;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(circle at 22% 18%, rgba(237,228,218,.045), transparent 0 24%, transparent 25%),
    radial-gradient(circle at 72% 56%, rgba(237,228,218,.032), transparent 0 28%, transparent 29%),
    repeating-linear-gradient(96deg, rgba(237,228,218,.035) 0 1px, transparent 1px 17px);
}
.paper-shader-layer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.paper-shader-layer--ambient {
  opacity: .18;
}
.paper-shader-layer--font-paper {
  opacity: .26;
  mix-blend-mode: multiply;
  background:
    linear-gradient(105deg, rgba(116,82,48,.05) 0 1px, transparent 1px 58px),
    radial-gradient(circle at 18% 22%, rgba(116,82,48,.08), transparent 0 22%, transparent 23%),
    radial-gradient(circle at 78% 64%, rgba(116,82,48,.055), transparent 0 30%, transparent 31%);
}
.paper-shader-layer--squeeze-flute {
  position: absolute;
  z-index: 3;
  opacity: .1;
  mix-blend-mode: screen;
  transform: translateZ(0) scaleX(1);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.25,1,.5,1);
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(237,228,218,.06) 16px 17px, transparent 17px 33px),
    linear-gradient(90deg, transparent, rgba(237,228,218,.035), transparent);
}
html[data-squeeze-drag="true"] .paper-shader-layer--squeeze-flute {
  opacity: .28;
  transform: translateZ(0) scaleX(.985);
}
html[data-paper-shaders="off"] .paper-shader-layer,
html[data-low-power="true"] .paper-shader-layer {
  display: none;
}
body > :not(.paper-shader-layer),
.page,
.shell {
  position: relative;
}
.page,
.shell,
#root {
  z-index: 1;
}

/* homepage */
.tile[data-toy="pop"] .tile__frame,
.tile[data-toy="pluck"] .tile__frame {
  position: relative;
  background:
    radial-gradient(circle at 28% 34%, rgba(244,179,110,.16), transparent 0 14px, transparent 15px),
    radial-gradient(circle at 62% 58%, rgba(237,228,218,.13), transparent 0 18px, transparent 19px),
    linear-gradient(135deg, rgba(237,228,218,.045), rgba(237,228,218,.012));
}
.tile[data-toy="pluck"] .tile__frame::before {
  content: "";
  position: absolute;
  inset: 26px 22px;
  background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(203,184,255,.16) 21px 22px, transparent 23px 42px);
  opacity: .7;
  pointer-events: none;
}
.tile[data-accent="paper"] .tile__frame,
.tile[data-accent="copper"] .tile__frame {
  background:
    radial-gradient(circle at 28% 22%, rgba(237,228,218,.12), transparent 0 22%, transparent 23%),
    radial-gradient(circle at 74% 68%, rgba(138,102,73,.11), transparent 0 28%, transparent 29%),
    repeating-linear-gradient(104deg, rgba(237,228,218,.035) 0 1px, transparent 1px 15px),
    linear-gradient(135deg, rgba(237,228,218,.055), rgba(237,228,218,.014));
}
.tile[data-toy="font-of-intent"] .tile__frame::after,
.tile[data-toy="squeeze"] .tile__frame::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%, transparent 72%, rgba(255,255,255,.06)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(237,228,218,.035) 18px 19px, transparent 19px 36px);
}
.tile:focus-visible,
.hero__cta:focus-visible,
.bench-note__link:focus-visible,
.back-link:focus-visible,
.info-btn:focus-visible,
.icon-button:focus-visible,
.pill:focus-visible {
  outline: 1px solid rgba(237,228,218,.55);
  outline-offset: 4px;
}

/* shared room chrome */
.top-bar,
header.top-bar,
.page > .top-bar,
.page > header,
body > .page > header,
body > div > header {
  min-height: 62px;
  display: grid !important;
  grid-template-columns: minmax(116px, 1fr) auto minmax(116px, 1fr);
  align-items: center;
  gap: 14px;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px !important;
  border-bottom: 1px solid var(--lab-line);
  background: linear-gradient(to bottom, rgba(8,8,10,.82), rgba(8,8,10,.42));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.back-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--lab-muted) !important;
  font-family: var(--lab-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
.back-link:hover { border-color: var(--lab-line); background: rgba(237,228,218,.035); color: var(--lab-ink) !important; }
.lab-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.back-link .lab-icon { width: 14px; height: 14px; }
.audio-icon--on { display: none; }
.audio-btn.active .audio-icon--off { display: none; }
.audio-btn.active .audio-icon--on { display: block; }
.back-link { grid-column: 1; }
.title,
.title-wrap,
.top-bar h1,
.top-bar .title {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}
.top-right,
.top-actions,
.top-bar > :last-child {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.title,
.top-bar h1 {
  color: var(--lab-ink) !important;
  font-family: 'Syne', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
.top-right,
.top-actions,
.top-bar > :last-child {
  justify-self: end;
}
.info-btn,
.icon-button,
.pill,
.top-actions button,
.top-right button {
  border: 1px solid var(--lab-line) !important;
  background: rgba(237,228,218,.035) !important;
  color: var(--lab-muted) !important;
  min-height: 34px;
  border-radius: 999px !important;
}
.info-btn:hover,
.icon-button:hover,
.pill:hover,
.top-actions button:hover,
.top-right button:hover {
  background: rgba(237,228,218,.075) !important;
  color: var(--lab-ink) !important;
}
.info-overlay,
.info-modal {
  z-index: 1000 !important;
}
.info-modal {
  border: 1px solid var(--lab-line) !important;
  border-radius: 28px !important;
  background: radial-gradient(circle at top, rgba(237,228,218,.06), transparent 55%), rgba(14,15,18,.92) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.48) !important;
}
@media (max-width: 720px) {
  .top-bar, header.top-bar, .page > header {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .back-link { font-size: 10px !important; padding: 0 8px; }
  .title, .top-bar h1 { font-size: 11px !important; letter-spacing: .13em !important; }
}


/* route DOM normalization: some toys order title/actions differently */
.top-bar > .title,
.top-bar > .title-wrap,
.top-bar > h1 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.top-bar > .top-right,
.top-bar > .top-actions,
.top-bar > .controls,
.top-bar > nav,
.top-bar > button,
.top-bar > .info-btn,
.top-bar > .icon-button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
.top-bar > .back-link,
.top-bar > a:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}
/* Squeeze has .top-right before .title; force title center anyway. */
.top-bar > .title:last-child {
  grid-column: 2 !important;
  justify-self: center !important;
}


html[data-lab-toy="font-of-intent"] body {
  overflow-y: auto;
}
html[data-lab-toy="font-of-intent"] #root > .min-h-screen {
  min-height: 100dvh !important;
  padding-bottom: env(safe-area-inset-bottom);
}
html[data-lab-toy="font-of-intent"] main {
  justify-content: flex-start !important;
  min-height: auto !important;
  padding-top: clamp(32px, 7vh, 72px) !important;
  padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
  transform: translateY(-48px);
}
html[data-lab-toy="font-of-intent"] main > div[class*="mb-12"] {
  margin-bottom: 0 !important;
}