/* Visual directions — the material & type layer for each look in js/directions.js.
   Set on <html data-dir="…">. Shared structure lives in site.css. */

#fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: var(--fx-opacity, 0.42); mix-blend-mode: multiply; }
#fx[hidden] { display: none; }
#shade, #glass, #light, #cast { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#shade { mix-blend-mode: overlay; }
#light { mix-blend-mode: screen; }
#cast { mix-blend-mode: multiply; }
#shade[hidden], #glass[hidden], #light[hidden], #cast[hidden] { display: none; }
/* 3D models: #models-back (under the cards: a folder's back sheet, the shadows) and #models (above them) */
#models, #models-back { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#models[hidden], #models-back[hidden] { display: none; }
html { transition: background-color 0.4s; }

/* ---------- Liquid Light (caustics) ---------- */
[data-dir='caustics'] {
  --font: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --radius: 34px;
  --core-bg: rgba(255, 255, 255, 0.9);
  --title-weight: 650;
  --title-tracking: -0.03em;
  --group-weight: 700;
  --shadow: 0 30px 70px rgba(40, 90, 140, 0.14), 0 2px 8px rgba(40, 90, 140, 0.06);
}
[data-dir='caustics'] .card {
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 1.5px 0 0 rgba(120, 220, 255, 0.35),
    inset -1.5px 0 0 rgba(255, 140, 220, 0.3),
    inset 0 -2px 6px rgba(255, 255, 255, 0.5);
}
[data-dir='caustics'] .card::before {
  padding: 1.5px;
  background: linear-gradient(160deg, #fff 0%, rgba(160, 230, 255, 0.8) 30%, rgba(255, 255, 255, 0.4) 55%, rgba(215, 190, 255, 0.8) 80%, #fff 100%);
}
[data-dir='caustics'] .card-core { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[data-dir='caustics'] .group { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.8); }

/* ---------- Pearl (thin-film iridescence) ---------- */
[data-dir='pearl'] {
  --font-title: 'Unbounded', ui-sans-serif, sans-serif;
  --radius: 26px;
  --core-bg: linear-gradient(165deg, #ffffff 0%, #fdfbff 60%, #f9fbff 100%);
  --title-size: 21px;
  --title-weight: 500;
  --title-tracking: -0.01em;
  --hero-size: 38px;
  --hero-tracking: -0.03em;
  --group-size: 52px;
  --group-weight: 500;
  --group-tracking: -0.03em;
  --shadow: 0 24px 60px rgba(120, 90, 160, 0.13), 0 2px 6px rgba(120, 90, 160, 0.05);
}
[data-dir='pearl'] .card::before {
  padding: 1.6px;
  background: conic-gradient(from var(--spin, 0deg), #ffd6ef, #c7f3ff, #fff3c4, #d7c9ff, #b9ffe6, #ffd6ef);
  animation: spin 14s linear infinite;
  opacity: 1;
}
[data-dir='pearl'] .meta-dot { background: conic-gradient(#ff9ad5, #8fe3f0, #ffe38f, #b9a8ff, #ff9ad5); box-shadow: none; }
[data-dir='pearl'] .group {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), rgba(255, 240, 250, 0.15));
  border: 1.5px solid transparent;
  background-clip: padding-box;
}

/* ---------- Atmosphere (mist + beams, editorial serif) ---------- */
[data-dir='atmosphere'] {
  --font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-title: 'Instrument Serif', ui-serif, Georgia, serif;
  --radius: 24px;
  --core-bg: rgba(255, 255, 255, 0.84);
  --title-size: 34px;
  --title-weight: 400;
  --title-tracking: -0.01em;
  --hero-size: 64px;
  --hero-tracking: -0.02em;
  --group-size: 88px;
  --group-weight: 400;
  --group-tracking: -0.02em;
  --shadow: 0 40px 90px rgba(40, 60, 90, 0.10), 0 1px 3px rgba(40, 60, 90, 0.05);
}
[data-dir='atmosphere'] .card::before { opacity: 0.35; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.2)); }
[data-dir='atmosphere'] .card-core { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-dir='atmosphere'] .group-title { font-style: italic; color: rgba(29, 36, 51, 0.8); }
[data-dir='atmosphere'] .group { background: none; border: 0; box-shadow: none; }
[data-dir='atmosphere'] .card-body { font-weight: 350; }

/* ---------- Instrument (drafting table) ---------- */
[data-dir='instrument'] {
  --font: 'Space Grotesk', ui-sans-serif, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 12px;
  --core-bg: #ffffff;
  --title-size: 24px;
  --title-weight: 500;
  --title-tracking: -0.02em;
  --hero-size: 44px;
  --group-size: 30px;
  --group-weight: 500;
  --group-tracking: 0.02em;
  --active: #0a84ff;
  --shadow: 0 16px 40px rgba(20, 50, 90, 0.10), 0 1px 2px rgba(20, 50, 90, 0.08);
}
[data-dir='instrument'] .card::before { opacity: 0; }
[data-dir='instrument'] .card-core {
  background:
    linear-gradient(#0a84ff, #0a84ff) left top / 12px 1.5px no-repeat,
    linear-gradient(#0a84ff, #0a84ff) left top / 1.5px 12px no-repeat,
    linear-gradient(#0a84ff, #0a84ff) right top / 12px 1.5px no-repeat,
    linear-gradient(#0a84ff, #0a84ff) right top / 1.5px 12px no-repeat,
    linear-gradient(#0a84ff, #0a84ff) left bottom / 12px 1.5px no-repeat,
    linear-gradient(#0a84ff, #0a84ff) left bottom / 1.5px 12px no-repeat,
    linear-gradient(#0a84ff, #0a84ff) right bottom / 12px 1.5px no-repeat,
    linear-gradient(#0a84ff, #0a84ff) right bottom / 1.5px 12px no-repeat,
    #fff;
}
[data-dir='instrument'] .card-meta { color: #4d6a85; }
[data-dir='instrument'] .card-meta::before { content: attr(data-coord); order: 3; margin-left: auto; opacity: 0.6; }
[data-dir='instrument'] .meta-dot { border-radius: 1px; box-shadow: none; }
[data-dir='instrument'] .card.selected { outline: 1.5px dashed #0a84ff; outline-offset: 6px; }
[data-dir='instrument'] .group {
  background: rgba(255, 255, 255, 0.25);
  border: 1px dashed rgba(10, 132, 255, 0.4);
  border-radius: 8px;
  box-shadow: none;
}
[data-dir='instrument'] .group-title { font-family: var(--mono); text-transform: uppercase; color: #0a84ff; }
[data-dir='instrument'] .group-title::before { content: '§ '; opacity: 0.6; }
[data-dir='instrument'] .glass-pill,
[data-dir='instrument'] .chip { border-radius: 10px; }
[data-dir='instrument'] .nav a,
[data-dir='instrument'] .bullet { border-radius: 7px; }
[data-dir='instrument'] .nav a.active { background: #0a84ff; }
[data-dir='instrument'] .send { border-radius: 8px; background: #0a84ff; }

/* ---------- Nebula M (particle backdrop) ---------- */
[data-dir='nebula'] .group { background: rgba(255, 255, 255, 0.12); }

/* ---------- direction switcher (lab) ---------- */
.dir-switch {
  position: fixed;
  z-index: 35;
  top: max(22px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  height: 56px;
}
.dir-switch button {
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 21px;
  background: transparent;
  font: 500 12px var(--mono);
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.dir-switch button span { opacity: 0.45; margin-right: 6px; }
.dir-switch button:hover { background: rgba(255, 255, 255, 0.8); }
.dir-switch button.on { background: var(--ink); color: #fff; }
.dir-note {
  position: fixed;
  z-index: 35;
  top: calc(max(22px, env(safe-area-inset-top)) + 64px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, 90vw);
  text-align: center;
  font: 500 11.5px/1.4 var(--mono);
  color: var(--ink-2);
  pointer-events: none;
}
@media (max-width: 1100px) {
  .dir-switch { top: auto; bottom: 214px; }
  .dir-switch button { padding: 0 8px; }
  .dir-switch button b { display: none; }
  .dir-note { display: none; }
}

/* ---------- Tabletop (physical materials; shadows, glass & caustics come from WebGL) ---------- */
[data-dir='tabletop'] {
  --font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --hand: 'Gochi Hand', 'Comic Sans MS', cursive;
  --deck: #b3bfbd;
  --ink: #111413;
  --ink-2: #4b5452;
  --ink-3: #7c8784;
  --radius: 18px;
  --core-pad: 0px;
  --thick: 0.5px;           /* material depth: the visible side of the card stock (paper is thin) */
  --side: #d3cfc6;
  --side-hi: #e2dfd8;
  --title-size: 27px;
  --title-weight: 600;
  --title-tracking: -0.025em;
  --hero-size: 46px;
  --group-size: 46px;
  --group-weight: 500;
  --group-tracking: -0.035em;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.28  0 0 0 0 0.25  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-dir='tabletop'] body { background: #b3bfbd; }

/* cardstock: opaque paper, stacked sheet edges, no CSS shadow (the table draws real ones) */
[data-dir='tabletop'] .card {
  background: var(--paper-grain), linear-gradient(180deg, #f3f2ef 0%, #ecebe7 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 var(--thick) 0 0 var(--side);
}
[data-dir='tabletop'] .card::before,
[data-dir='tabletop'] .card::after,
[data-dir='tabletop'] .card.ephemeral::before,
[data-dir='tabletop'] .card.materializing .card-core::after { display: none; }
[data-dir='tabletop'] .card-core,
[data-dir='tabletop'] .card.ephemeral .card-core,
[data-dir='tabletop'] .kind-stack .card-core { background: transparent; box-shadow: none; padding: 30px 30px 28px; }
[data-dir='tabletop'] .card-meta {
  font: 500 15px/1 var(--font);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: 16px;
}
[data-dir='tabletop'] .meta-dot { display: none; }
[data-dir='tabletop'] .card-body { color: var(--ink-2); font-size: 15.5px; }
[data-dir='tabletop'] .card-title { position: relative; }
[data-dir='tabletop'] .card-tags { font-family: var(--font); }
[data-dir='tabletop'] .pill-link { background: #e4e2dd; }
[data-dir='tabletop'] .kind-contact .card-links a:first-child { background: #1b1e1d; }
[data-dir='tabletop'] .card.selected { outline: none; }
[data-dir='tabletop'] .chrome-btn { background: #1b1e1d; color: #fff; }

/* checkbox lists */
[data-dir='tabletop'] .card-list li { border-top: 0; padding: 9px 0 9px 32px; cursor: pointer; }
[data-dir='tabletop'] .card-list li::before {
  left: 0;
  top: 10px;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: #f6f5f2;
  box-shadow: inset 0 0 0 1.5px #8e9894;
}
[data-dir='tabletop'] .card-list li.done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: #a3aca9; }
[data-dir='tabletop'] .card-list li.done::before {
  background: #1b1e1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: none;
}

/* the glass folder: WebGL draws the fluted glass; the DOM only carries its label */
[data-dir='tabletop'] .card.glass-folder { background: transparent; box-shadow: none; }
[data-dir='tabletop'] .card.glass-folder .card-core {
  min-height: 466px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 34px 38px;
}
[data-dir='tabletop'] .card.glass-folder .card-meta { color: rgba(60, 76, 70, 0.7); }
[data-dir='tabletop'] .card.glass-folder .card-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  color: rgba(52, 66, 61, 0.78);
  mix-blend-mode: multiply;
}
[data-dir='tabletop'] .card.glass-folder .card-body,
[data-dir='tabletop'] .card.glass-folder .stack-count { color: rgba(60, 76, 70, 0.62); }
[data-dir='tabletop'] .card.glass-folder .stack-count span { color: rgba(40, 52, 48, 0.8); }
[data-dir='tabletop'] .card.in-glass { visibility: hidden; pointer-events: none; }
[data-dir='tabletop'] .card.glass-folder .card-core > * { opacity: 0; }

/* ephemeral thoughts are coloured paper: a tint of the same stock, minimal type */
[data-dir='tabletop'] .card.ephemeral:not(.kind-prompt) {
  --tint: #f2e7c7;
  background: var(--paper-grain), linear-gradient(180deg, color-mix(in srgb, var(--tint) 88%, white) 0%, var(--tint) 100%);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 var(--thick) 0 0 color-mix(in srgb, var(--tint) 80%, #6f6a58);
}
[data-dir='tabletop'] .card.ephemeral.accent-mint:not(.kind-prompt), [data-dir='tabletop'] .card.kind-sticky.accent-mint { --tint: #dce9df; }
[data-dir='tabletop'] .card.ephemeral.accent-rose:not(.kind-prompt), [data-dir='tabletop'] .card.kind-sticky.accent-rose { --tint: #f0dfe2; }
[data-dir='tabletop'] .card.ephemeral.accent-sky:not(.kind-prompt), [data-dir='tabletop'] .card.kind-sticky.accent-sky { --tint: #dfe6ee; }
[data-dir='tabletop'] .card.ephemeral.accent-iris:not(.kind-prompt), [data-dir='tabletop'] .card.kind-sticky.accent-iris { --tint: #e5e1f1; }
[data-dir='tabletop'] .card.ephemeral:not(.kind-prompt) .card-title { font-family: var(--font); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
[data-dir='tabletop'] .card.ephemeral:not(.kind-prompt) .card-meta { font-size: 12px; color: rgba(40, 44, 40, 0.5); }
[data-dir='tabletop'] .card.ephemeral:not(.kind-prompt) .card-meta::after { background: rgba(255, 255, 255, 0.55); color: rgba(40, 44, 40, 0.65); }
[data-dir='tabletop'] .card.ephemeral:not(.kind-prompt) .card-body,
[data-dir='tabletop'] .card.ephemeral:not(.kind-prompt) .card-list li { color: rgba(30, 34, 32, 0.78); }
[data-dir='tabletop'] .card.ephemeral .card-list li::before { background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1.5px rgba(60, 64, 56, 0.4); }
/* a single loose sheet: one clean edge, no stacked sheets (they read as corner artifacts at this size) */

/* paper formats: fixed proportions; text that doesn't fit fades out (it opens in full when expanded) */
[data-dir='tabletop'] .card[class*='fmt-'] .card-core { height: 100%; overflow: hidden; }
[data-dir='tabletop'] .card.fmt-wide .card-core { padding: 24px 28px 20px; }
[data-dir='tabletop'] .card.fmt-wide .card-title { font-size: 24px; margin-bottom: 6px; }
[data-dir='tabletop'] .card.fmt-letter .card-core { padding: 38px 36px 34px; }
/* apps on a 2:1 note: icon beside the text */
[data-dir='tabletop'] .card.fmt-wide.kind-app .card-core { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; align-content: start; }
[data-dir='tabletop'] .card.fmt-wide.kind-app .app-icon { grid-row: span 4; margin: 2px 0 0; }
[data-dir='tabletop'] .card.fmt-wide.kind-app .card-meta { margin-bottom: 8px; }
[data-dir='tabletop'] .card.fmt-wide .card-links { margin-top: 10px; }
[data-dir='tabletop'] .card.fmt-letter .card-body { font-size: 15px; line-height: 1.62; }
[data-dir='tabletop'] .card.fmt-overflow .card-core {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent calc(100% - 16px));
  mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent calc(100% - 16px));
}

/* the visitor's prompt: a dark tile like the toolbar */
[data-dir='tabletop'] .card.kind-prompt { background: #1b1e1d; border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 0 #2a2e2c, 0 var(--thick) 0 0 #0d0f0e; }
[data-dir='tabletop'] .card.kind-prompt .card-core { background: transparent; box-shadow: none; }

/* groups: no frames, just labels printed on the table */
[data-dir='tabletop'] .group { background: none; border: 0; box-shadow: none; }
[data-dir='tabletop'] .group-title { color: rgba(40, 52, 48, 0.55); }

/* HUD: dark toolbar pills, paper prompt */
[data-dir='tabletop'] .glass-pill {
  background: #1b1e1d;
  color: #f1f2f0;
  border: 0;
  box-shadow: 0 12px 30px rgba(30, 42, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-dir='tabletop'] .brand-text small, [data-dir='tabletop'] .zoom-level { color: #9aa4a1; }
[data-dir='tabletop'] .brand-mark { background: #f1f2f0; color: #1b1e1d; }
[data-dir='tabletop'] .nav a:hover, [data-dir='tabletop'] .bullet:hover { background: rgba(255, 255, 255, 0.1); }
[data-dir='tabletop'] .nav a.active { background: #f1f2f0; color: #1b1e1d; }
[data-dir='tabletop'] .hud-tray { color: #9aa4a1; }
[data-dir='tabletop'] .hud-tray.has { color: #f1f2f0; }
[data-dir='tabletop'] .prompt.glass-pill {
  background: var(--paper-grain), #f1f0ec;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 18px 40px rgba(30, 42, 38, 0.22);
}
[data-dir='tabletop'] .send { background: #1b1e1d; }
[data-dir='tabletop'] .chip {
  background: #eeede9;
  border: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 6px 16px rgba(30, 42, 38, 0.14);
  backdrop-filter: none;
}
[data-dir='tabletop'] .chip:hover { background: #1b1e1d; color: #fff; }
[data-dir='tabletop'] .prompt-status { color: rgba(30, 40, 37, 0.6); }
[data-dir='tabletop'] .toast { background: #f1f0ec; }
[data-dir='tabletop'] .dir-switch button.on { background: #f1f2f0; color: #1b1e1d; }
[data-dir='tabletop'] .dir-switch button:hover { background: rgba(255, 255, 255, 0.1); }
[data-dir='tabletop'] .dir-note { color: rgba(30, 40, 37, 0.7); }
[data-dir='tabletop'] .expanded-core { background: var(--paper-grain), #f3f2ef; }


/* Tabletop: printed image card (thick matte stock, single edge) */
[data-dir='tabletop'] .card.kind-photo {
  --radius: 16px;
  background: #d8d2bd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 0 #d2cbb6, 0 var(--thick) 0 0 #bdb59d;
}
[data-dir='tabletop'] .card.kind-photo .card-core { padding: 0; }


/* ---------- light gimbal ---------- */
.gimbal {
  position: fixed;
  z-index: 32;
  right: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #1b1e1d;
  box-shadow: 0 12px 30px rgba(30, 42, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: grab;
  touch-action: none;
  outline: none;
}
.gimbal[hidden] { display: none; }
.gimbal.dragging { cursor: grabbing; }
.gimbal:focus-visible { box-shadow: 0 0 0 2px #f1f2f0, 0 12px 30px rgba(30, 42, 38, 0.28); }
.gimbal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gimbal .g-dome { fill: rgba(255, 255, 255, 0.04); stroke: rgba(241, 242, 240, 0.28); stroke-width: 1; }
.gimbal .g-ring { fill: none; stroke: rgba(241, 242, 240, 0.12); stroke-width: 0.8; }
.gimbal .g-cross { stroke: rgba(241, 242, 240, 0.1); stroke-width: 0.8; }
.gimbal .g-meridian ellipse { fill: none; stroke: rgba(241, 242, 240, 0.35); stroke-width: 1; stroke-dasharray: 2 2.5; }
.gimbal .g-beam { stroke: rgba(247, 222, 150, 0.55); stroke-width: 1.2; }
.gimbal .g-shadow { stroke: rgba(0, 0, 0, 0.6); stroke-width: 5; stroke-linecap: round; }
.gimbal .g-card { fill: #efedea; }
.gimbal .g-halo { fill: rgba(247, 222, 150, 0.22); }
.gimbal .g-core { fill: #f7de96; stroke: #fff; stroke-width: 1.2; }
.gimbal .g-read {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 5px 9px;
  border-radius: 8px;
  background: #1b1e1d;
  color: #f1f2f0;
  font: 500 10.5px var(--mono);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.gimbal:hover .g-read, .gimbal.dragging .g-read, .gimbal:focus-visible .g-read { opacity: 1; transform: none; }
@media (max-width: 760px) { .gimbal { display: none; } }
@media (min-width: 761px) { [data-dir='tabletop'] .prompt-wrap { width: min(640px, calc(100vw - 440px)); } }

/* Tabletop: polaroid stock — grainy white frame, thin card */
[data-dir='tabletop'] .card.kind-polaroid {
  --radius: 6px;
  --thick: 2px;
  background: var(--paper-grain), linear-gradient(180deg, #f8f7f3, #f1f0eb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 0 #e0ddd5, 0 var(--thick) 0 0 #cfcbc1;
}
[data-dir='tabletop'] .card.kind-polaroid .card-core { padding: 11px 11px 0; }

[data-dir='tabletop'] .card.fmt-letter-l .card-core { padding: 42px 42px 36px; }
[data-dir='tabletop'] .card.fmt-letter-l .card-title { font-size: 40px; letter-spacing: -0.035em; line-height: 1.05; }
[data-dir='tabletop'] .card.fmt-letter-l .card-body { font-size: 15.5px; line-height: 1.62; }
[data-dir='tabletop'] .card.fmt-letter-l .card-body p { margin-bottom: 14px; }

/* ---------- Studio (tabletop materials in cool daylight) ---------- */
[data-theme='studio'] {
  --deck: #c3cdd6;
  --ink: #101418;
  --ink-2: #48515b;
  --ink-3: #7a8591;
  --radius: 24px;
  --thick: 0.5px;
  --side: #d3dae1;
  --side-hi: #e7ebef;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.28  0 0 0 0 0.32  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme='studio'] body { background: #bcc7d1; }
[data-theme='studio'] .card {
  background: var(--paper-grain), linear-gradient(180deg, #fcfcfd 0%, #f5f6f8 100%);
}
/* pages read as a short stack of sheets, like a pad */
[data-theme='studio'] .card.fmt-letter {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0.5px 0 0 var(--side),
    0 1px 0 0 #eef1f4,
    0 1.5px 0 0 #cfd6dd;
}
[data-theme='studio'] .card-title { font-weight: 600; letter-spacing: -0.03em; }
[data-theme='studio'] .pill-link { background: #e8ecf0; }
[data-theme='studio'] .kind-contact .card-links a:first-child { background: #1d2227; }
[data-theme='studio'] .card.glass-folder .card-meta,
[data-theme='studio'] .card.glass-folder .card-title { color: rgba(44, 54, 64, 0.8); }
[data-theme='studio'] .group-title { color: rgba(40, 50, 62, 0.55); }
[data-theme='studio'] .glass-pill { background: #1f2429; box-shadow: 0 12px 30px rgba(30, 40, 52, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
[data-theme='studio'] .prompt.glass-pill { background: var(--paper-grain), #f6f7f9; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 18px 40px rgba(30, 40, 52, 0.2); }
[data-theme='studio'] .send, [data-theme='studio'] .chip:hover { background: #1f2429; }
[data-theme='studio'] .chip { background: #f1f3f5; }
[data-theme='studio'] .toast { background: #f6f7f9; }
[data-theme='studio'] .prompt-status { color: rgba(30, 40, 52, 0.6); }
[data-theme='studio'] .gimbal { background: #1f2429; }
[data-theme='studio'] .expanded-core { background: var(--paper-grain), #f7f8fa; }

/* ---------- theme switch (visitor-facing): swatches above the light gimbal ---------- */
.theme-switch {
  position: fixed;
  z-index: 32;
  right: 22px;
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 108px);
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #1b1e1d;
  box-shadow: 0 12px 30px rgba(30, 42, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.theme-switch[hidden] { display: none; }
[data-theme='studio'] .theme-switch { background: #1f2429; }
.theme-switch button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.theme-switch button:hover { transform: scale(1.1); }
.theme-switch button[aria-pressed='true'] { box-shadow: 0 0 0 2px #1b1e1d, 0 0 0 3.5px rgba(255, 255, 255, 0.85); }
.theme-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.is-expanded .theme-switch, html.is-expanded .gimbal { opacity: 0; pointer-events: none; }

/* ---------- Window (white stock in window light, a clear glass corner) ---------- */
[data-theme='window'] {
  --deck: #c3cfd9;
  --ink: #0f1317;
  --ink-2: #454e57;
  --ink-3: #7d8792;
  --radius: 26px;
  --thick: 0.5px;
  --side: #d9dfe5;
  --side-hi: #eceff2;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.28  0 0 0 0 0.32  0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme='window'] body { background: #c1cdd7; }
[data-theme='window'] .card { background: var(--paper-grain), linear-gradient(180deg, #ffffff 0%, #fafbfc 100%); }
[data-theme='window'] .card.fmt-letter,
[data-theme='window'] .card.corner-folder {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0.5px 0 0 var(--side),
    0 1px 0 0 #f2f4f6,
    0 1.5px 0 0 #d3dae0;
}
[data-theme='window'] .card-title { font-weight: 600; letter-spacing: -0.03em; }
[data-theme='window'] .pill-link { background: #eef1f4; }
[data-theme='window'] .kind-contact .card-links a:first-child { background: #15191d; }
[data-theme='window'] .group-title { color: rgba(40, 50, 62, 0.5); }
[data-theme='window'] .expanded-core { background: var(--paper-grain), #fff; }

/* the photo deck's cover: a plain white card carrying the label */
.card.corner-folder .card-core {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 26px 22px 20px 90px;      /* clear of the glass corner's upright */
}
.card.corner-folder .card-meta { font: 500 16px/1.1 var(--font); letter-spacing: -0.02em; color: var(--theme-tint, var(--ink-3)); margin-bottom: 4px; text-transform: none; }
.card.corner-folder .card-meta .meta-dot { display: none; }
.card.corner-folder .card-title { font-size: 28px; line-height: 1.02; letter-spacing: -0.04em; color: #3a3f44; }
.card.corner-folder .card-chrome { display: none; }
/* prints behind the cover read as sheets of the same deck */
.card.in-deck { cursor: pointer; }
.card.deck-hidden { visibility: hidden; pointer-events: none; }
.card.in-pile.in-deck .card-core > * { opacity: 1; }

/* 3D model cards: an invisible footprint; the object itself is drawn by the models layer */
html .card.kind-model { aspect-ratio: 1; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html .card.kind-model::before, html .card.kind-model::after { display: none; }
html .card.kind-model .card-core { background: transparent; box-shadow: none; padding: 0; height: 100%; }
html .card.kind-model .card-chrome { display: none; }

/* the glass pocket's cover: the label lives low on the glass (drawn by WebGL); the DOM keeps its size and text */
.card.pocket-cover { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.pocket-cover::before, .card.pocket-cover::after { display: none; }
.card.pocket-cover .card-core {
  min-height: 362px;                /* the prints sit deep in the pocket; the glass fills its lower 240px */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 112px 78px;            /* on the post-it standing in the pocket (170px square, low in the glass) */
  background: transparent;
  box-shadow: none;
}
.card.pocket-cover .card-core > * { opacity: 0; }
.card.pocket-cover .card-meta { font: 500 21px/1 'Caveat', 'Bradley Hand', cursive; letter-spacing: 0; color: rgba(43, 42, 38, 0.66); margin-bottom: 0; text-transform: none; }
.card.pocket-cover .card-meta .meta-dot { display: none; }
.card.pocket-cover .card-title { font: 600 36px/0.95 'Caveat', 'Bradley Hand', cursive; letter-spacing: 0; color: #2b2a26; }
.card.pocket-cover .card-chrome { display: none; }

/* each theme's tint (used for small accents such as the folder's "Last 5 years") */
[data-theme='tabletop'] { --theme-tint: #5b8a72; }
[data-theme='studio'] { --theme-tint: #4f7396; }
[data-theme='window'] { --theme-tint: #4d7a98; }