/* The page is an evening room: the only warm colour is the light of the lamp. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/vendor/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
/* The fonts of the four pattern themes (D67): a face only loads when the page uses it. */
@font-face { font-family: Orbitron; src: url("/vendor/fonts/orbitron-wght.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Rajdhani; src: url("/vendor/fonts/rajdhani-600.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Rajdhani; src: url("/vendor/fonts/rajdhani-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: Syne; src: url("/vendor/fonts/syne-wght.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/vendor/fonts/inter-tight-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Quicksand; src: url("/vendor/fonts/quicksand-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Nunito; src: url("/vendor/fonts/nunito-wght.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: Fraunces; src: url("/vendor/fonts/fraunces-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Manrope; src: url("/vendor/fonts/manrope-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --dusk: #262c4d;
  --wall: #323a63;
  --ink: #14182b;
  --line: #4a5383;
  --text: #f0f1fa;
  --quiet: #b4bbdb;
  --light: #ffcf7a;
  --light-deep: #f2a93b;
  --alert: #ffb3a1;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Bricolage Grotesque", system-ui, sans-serif;
  --display-case: none;
  --display-track: -.02em;
  /* behind the 3D lamp: much lighter than the page, so a dark sleeve stays readable (D67) */
  --haze: color-mix(in srgb, var(--wall) 45%, #c8ccd8);
  color-scheme: dark;
}

/* The pattern themes, from each listing's style.py (D67): the page follows the chosen pattern. */
[data-theme="pcb"] {
  --dusk: #07070d; --wall: #0e1020; --ink: #05050a; --line: #24305a; --text: #e8f7ff; --quiet: #8c97b8;
  --light: #00f0ff; --light-deep: #ff2bd6;
  --display: Orbitron, sans-serif; --body: Rajdhani, sans-serif; --display-case: uppercase; --display-track: .06em;
}
[data-theme="rain"] {
  --dusk: #141b24; --wall: #1e2833; --ink: #0f151c; --line: #34465a; --text: #e4ecf2; --quiet: #9aaab8;
  --light: #8fdceb; --light-deep: #c9d3dc;
  --display: Syne, sans-serif; --body: "Inter Tight", sans-serif; --display-case: none; --display-track: -.01em;
}
[data-theme="starfield"] {
  --dusk: #100e2a; --wall: #1f1b48; --ink: #0b0a1f; --line: #3a3378; --text: #f6f2ff; --quiet: #a59dd0;
  --light: #beaaff; --light-deep: #ffd68c;
  --display: Quicksand, sans-serif; --body: Nunito, sans-serif; --display-case: none; --display-track: 0;
}
[data-theme="voronoi"] {
  --dusk: #141a14; --wall: #222e22; --ink: #0f140f; --line: #3a4a36; --text: #f0e8d6; --quiet: #a3ad95;
  --light: #f0b040; --light-deep: #7a9c68;
  --display: Fraunces, serif; --body: Manrope, sans-serif; --display-case: none; --display-track: -.01em;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--dusk);
  color: var(--text);
  font: 400 1rem/1.5 var(--body);
  transition: background-color .5s ease, color .5s ease;
}

a { color: var(--light); }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; text-transform: var(--display-case); letter-spacing: var(--display-track); }
h2 { font-size: 1.3rem; }
p { margin: 0; }
.quiet { color: var(--quiet); font-size: .9rem; }

:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }

.top {
  display: flex;
  align-items: center;
  gap: .8rem 1.5rem;
  flex-wrap: wrap;
  padding: .9rem clamp(1rem, 3vw, 2rem);
}
.word { display: block; line-height: 0; }
.word img { height: 1.9rem; width: auto; }
/* pages as tabs, styled like the pattern buttons (David) */
.tabs { display: flex; gap: .4rem; margin-right: auto; }
.tab { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.tab:hover { border-color: var(--light); }
.tab[aria-current] { background: var(--light); border-color: var(--light); color: var(--ink); }

/* the account menu: a user icon opening who, credits, history, sign out */
.user { position: relative; margin-left: auto; }
.tabs + .user { margin-left: 0; }
.user-button { appearance: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--wall); color: var(--text); cursor: pointer; }
.user-button svg { width: 1.4rem; height: 1.4rem; }
.user-button[aria-expanded="true"], .user-button:hover { border-color: var(--light); color: var(--light); }
.user-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20; display: grid; gap: .8rem; justify-items: start; min-width: 16rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--wall); box-shadow: 0 12px 32px #0008; }
.user-menu > a { color: var(--text); }
.who-email { color: var(--quiet); font-size: .9rem; overflow-wrap: anywhere; }
.menu-credits { display: flex; align-items: center; gap: .6rem; }
.coin { position: relative; display: inline-grid; place-items: center; width: 2.6rem; height: 2.85rem; color: #1c1c1e; text-decoration: none; font-weight: 800; }
.coin svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin span { position: relative; font-variant-numeric: tabular-nums; }
.coin.big { width: 3.6rem; height: 3.95rem; font-size: 1.35rem; vertical-align: middle; }
.menu-credits .plus { display: inline-grid; width: 1.8rem; height: 1.8rem; }
.menu-credits .plus:hover { transform: scale(1.1); }

/* the closed beta (D102): one thin line above everything, in the page's flow so nothing sticky moves */
.beta-banner { margin: 0; padding: .3rem clamp(1rem, 3vw, 2rem); font-size: .8rem; line-height: 1.35; text-align: center; color: var(--ink); background: var(--light); }
.beta-note { border-left: 2px solid var(--light); padding-left: .6rem; }
.closed { max-width: 26rem; margin: 0 auto; padding: 12vh 1rem 3rem; text-align: center; }
.closed .word img { height: auto; width: 12rem; margin: 0 auto 2rem; display: block; }
.closed-card { display: grid; gap: .8rem; padding: 1.8rem 1.4rem; border-radius: 16px; background: var(--wall); border: 1px solid var(--line); box-shadow: 0 18px 40px #0007; }
.closed-card p { color: var(--quiet); }

/* messages float and leave (David) */
.toasts { position: fixed; left: 0; right: 0; margin: 0 auto; top: 4.6rem; z-index: 50; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .6rem .7rem .9rem; border-left: 3px solid var(--light); border-radius: 8px; background: var(--wall); box-shadow: 0 10px 28px #0009; pointer-events: auto; animation: toast-in .25s ease; }
.toast.bad { border-color: var(--alert); }
.toast p { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-close { appearance: none; border: 0; background: none; color: var(--quiet); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-.5rem); } }


/* controls */
.button {
  appearance: none;
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { border-color: var(--light); }
.button.primary { background: var(--light); border-color: var(--light); color: var(--ink); }
.button.primary:hover { background: color-mix(in srgb, var(--light) 75%, #fff); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.wide { width: 100%; }
.link { appearance: none; padding: 0; border: 0; background: none; color: var(--light); font: inherit; text-decoration: underline; cursor: pointer; }
.row { display: flex; gap: .5rem; }
.row input { flex: 1; min-width: 0; }

input[type="email"], input[type="number"] {
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  color: var(--text);
  font: inherit;
}
input[type="range"] { width: 100%; margin: .35rem 0 0; accent-color: var(--light); }

/* visitor */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
}
.intro h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.intro-text > p { max-width: 34rem; margin-top: 1.2rem; font-size: 1.1rem; }
/* the first page shows a real lamp turning (D68); the drawing stays until it is loaded, or without 3D */
.intro-stage { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1; justify-self: center; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--light) 22%, var(--haze)), color-mix(in srgb, var(--wall) 55%, var(--haze)) 85%); }
.intro-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.intro-stage.live canvas { opacity: 1; }
.intro-stage.live .intro-lamp { display: none; }
.intro-lamp { position: absolute; inset: 8%; width: 84%; height: 84%; }
.steps { display: grid; gap: .6rem; max-width: 34rem; margin: 1.2rem 0 0; padding-left: 1.4rem; font-size: 1.08rem; }
.steps li::marker { color: var(--light); font-weight: 800; }
.stage-example { position: absolute; left: 1.1rem; top: .9rem; margin: 0; padding: .2rem .7rem; border-radius: 999px; background: var(--ink); color: var(--text); font-size: .9rem; pointer-events: none; }
.shared { margin-top: 1.5rem; padding-left: .9rem; border-left: 3px solid var(--light); }
.shared p { margin-top: .3rem; }
.sign-in { display: grid; gap: 1rem; max-width: 26rem; margin-top: 1.8rem; }
.sign-in label { display: block; margin-bottom: .35rem; }

.gallery { max-width: 72rem; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2rem) 4rem; }
.gallery > .quiet { margin-top: .3rem; }
/* published lamps (D68): photo, name in its font, where it is listed, Make one like this */
.published { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.published li { display: grid; gap: .35rem; align-content: start; padding: .8rem; border-radius: 14px; background: var(--wall); }
.published-picture { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--ink); color: var(--quiet); margin-bottom: .4rem; }
.published-picture img { width: 100%; height: 100%; object-fit: cover; }
.published h3 { margin: 0; font-size: 1.35rem; line-height: 1.1; }
.published [data-p="pcb"] h3 { font-family: Orbitron, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 1.15rem; }
.published [data-p="rain"] h3 { font-family: Syne, sans-serif; font-weight: 800; }
.published [data-p="starfield"] h3 { font-family: Quicksand, sans-serif; }
.published [data-p="voronoi"] h3 { font-family: Fraunces, serif; }
.published-box { margin-top: 3rem; }

/* generator */
#studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: 0 clamp(1rem, 2vw, 2rem);
  align-items: start;
  padding: 0 clamp(1rem, 3vw, 2rem) 2rem;
}
.stage {
  position: sticky;
  top: 1rem;
  height: calc(100vh - 5.5rem);
  min-height: 24rem;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 45%, var(--haze), color-mix(in srgb, var(--wall) 70%, var(--haze)) 85%);
  transition: background .5s ease;
}
.stage.lit { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--light) 22%, var(--haze)), color-mix(in srgb, var(--wall) 55%, var(--haze)) 85%); }
.stage-name { position: absolute; left: 1.1rem; top: .9rem; margin: 0; font: 700 1.5rem/1.1 var(--display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--ink); pointer-events: none; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.stage-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; color: var(--ink); }
.stage-empty p { max-width: 22rem; }
/* what the preview is doing, where the eye is (UX review C6, C7) */
.stage-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(22rem, 80%); margin: 0; padding: .6rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--text); text-align: center; pointer-events: none; }
.stage.stale .stage-status { top: auto; bottom: 3.6rem; transform: translateX(-50%); }
.stage.stale #view { opacity: .55; transition: opacity .3s ease; }
.stage-bar { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; pointer-events: none; }
.stage-bar > * { pointer-events: auto; }
.stage-bar .quiet { color: var(--ink); }
.light { appearance: none; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ink); color: var(--text); font: inherit; cursor: pointer; }
.light[aria-pressed="true"] { border-color: var(--light); color: var(--light); }

.panel { display: grid; gap: 1.6rem; padding-top: .2rem; }
#lamp-form { display: grid; gap: 1.05rem; }
.choice { margin: 0; padding: 0; border: 0; }
.choice legend { padding: 0; margin-bottom: .4rem; }
.patterns { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.patterns label { position: relative; display: block; cursor: pointer; }
.patterns input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.patterns span { display: block; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; }
.patterns strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.patterns small { display: block; font-size: .8rem; opacity: .8; }
/* each lamp's name in its own theme font, whatever the page's theme */
.patterns [data-p="pcb"] strong { font-family: Orbitron, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
.patterns [data-p="rain"] strong { font-family: Syne, sans-serif; font-weight: 800; }
.patterns [data-p="starfield"] strong { font-family: Quicksand, sans-serif; }
.patterns [data-p="voronoi"] strong { font-family: Fraunces, serif; }
.patterns input:checked + span { background: var(--light); border-color: var(--light); color: var(--ink); font-weight: 700; }
.patterns input:focus-visible + span { outline: 2px solid var(--light); outline-offset: 2px; }
.field label { display: block; }
.field-head { display: flex; justify-content: space-between; gap: 1rem; }
.field output { color: var(--light); font-variant-numeric: tabular-nums; white-space: nowrap; }
#settings { display: grid; gap: 1.05rem; margin-top: .8rem; }
/* Help on the Advanced settings (D97): a small "i" after the name opens a sentence and a sketch of one
   side, lit from inside. Beside the form on a computer (over the preview), under the slider on a phone. */
#settings .field { position: relative; }
.field-name { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.help-button {
  appearance: none; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 1px solid color-mix(in srgb, var(--quiet) 80%, var(--dusk)); border-radius: 50%; background: none; color: var(--quiet);
  font: italic 700 .8rem/1 Georgia, "Times New Roman", serif; cursor: pointer;
}
.help-button:hover, .help-button[aria-expanded="true"] { border-color: var(--light); color: var(--light); }
.help-button[aria-expanded="true"] { background: color-mix(in srgb, var(--light) 14%, transparent); }
/* kept open by a click, Enter or Space: filled, so the press shows */
.help-button.pinned, .help-button.pinned:hover { background: var(--light); border-color: var(--light); color: var(--ink); }
.help {
  margin-top: .7rem; padding: .85rem .9rem .75rem; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 55%, var(--wall)); animation: help-in .18s ease;
}
.help-text { font-size: .92rem; line-height: 1.45; }
.help-sketch { margin-top: .8rem; }
.help-sketch canvas { display: block; width: 100%; }
.help-track { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .1rem .5rem; margin-top: .55rem; font-size: .8rem; color: var(--quiet); font-variant-numeric: tabular-nums; }
.help-bar { grid-column: 1 / -1; position: relative; height: 2px; margin: .35rem .3rem .25rem; border-radius: 1px; background: var(--line); }
.help-bar i { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.help-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--light); box-shadow: 0 0 6px var(--light); }
.help-yours { width: 2px; height: .8rem; background: var(--quiet); }
.help-now { justify-self: center; color: var(--light); font-weight: 600; }
.help-hi { justify-self: end; }
.help-yours-label { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; }
.help-yours-label::before { content: ""; width: 2px; height: .8rem; background: var(--quiet); }
.help-note { margin-top: .45rem; font-size: .8rem; line-height: 1.4; color: var(--text); }
.help-caption { margin-top: .45rem; font-size: .78rem; color: var(--quiet); }
/* on a phone with little room: the sketch beside its scale and caption */
.help-sketch.compact { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); column-gap: .8rem; align-items: end; }
.help-sketch.compact canvas { grid-row: 1 / span 3; align-self: center; }
.help-sketch.compact > :not(canvas) { grid-column: 2; }
.help-sketch.compact .help-track { margin-top: 0; }
.help-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.help-frames figure { margin: 0; }
.help-frames figcaption { display: grid; margin-top: .3rem; font-size: .75rem; line-height: 1.3; color: var(--quiet); text-align: center; }
.help-frames figcaption b { color: var(--light); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes help-in { from { opacity: 0; transform: translateY(-.25rem); } }
@media (hover: hover) and (min-width: 56.0625rem) {
  #settings .help {
    position: absolute; z-index: 6; top: -.6rem; right: calc(100% + 1.25rem); width: 18rem; margin: 0;
    background: var(--wall); box-shadow: 0 12px 32px #0008;
  }
  #settings .help:has(.still) { width: 22rem; }
}
@media (hover: none) { .help-button { width: 2rem; height: 2rem; font-size: .95rem; } }
.seed-hint { margin-top: .35rem; }
/* colours (D66): one row per filament, its swatches folded away */
/* shape and size (D84) */
.shapes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.shapes label { position: relative; display: block; cursor: pointer; }
.shapes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.shapes span { display: block; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; }
.shapes small { font-size: .8rem; opacity: .8; }
.shapes input:checked + span { background: var(--light); border-color: var(--light); color: var(--ink); font-weight: 700; }
.shapes input:focus-visible + span { outline: 2px solid var(--light); outline-offset: 2px; }
.shapes input:disabled, .shapes input:disabled + span { cursor: not-allowed; opacity: .55; }
.dims { margin: 0; padding: 0; border: 0; display: grid; gap: .5rem; }
.dims legend { padding: 0; margin-bottom: .4rem; display: flex; gap: .5rem; width: 100%; justify-content: space-between; }
.dims [hidden] { display: none; }
.check { display: flex; gap: .4rem; align-items: center; }
.check input:disabled { cursor: not-allowed; }
.dims-note { margin: .25rem 0 0; font-size: .85rem; opacity: .8; }
.size-warning { margin: 0; padding: .5rem .7rem; border-left: 3px solid var(--light); background: rgba(255, 255, 255, .06); border-radius: 4px; font-size: .9rem; }
.colours { margin: 0; padding: 0; border: 0; display: grid; gap: .5rem; }
.colours legend { padding: 0; margin-bottom: .4rem; }
#colour-slots { display: grid; gap: .4rem; }
.colour-slot { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; }
.colour-slot summary { position: relative; display: flex; align-items: center; gap: .2rem .6rem; flex-wrap: wrap; padding-right: 1.6rem; font-weight: 400; list-style: none; }
.colour-slot summary::-webkit-details-marker { display: none; }
/* a small V says it opens (David) */
.colour-slot summary::after { content: ""; position: absolute; right: .3rem; top: 50%; width: .5rem; height: .5rem; border-right: 2px solid var(--quiet); border-bottom: 2px solid var(--quiet); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.colour-slot[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.colour-slot .chip { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid #fff6; flex: none; }
.colour-slot .slot-name { font-weight: 600; }
.colour-slot .material { margin-top: .7rem; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.9rem, 1fr)); gap: .35rem; margin-top: .35rem; }
.swatch { appearance: none; aspect-ratio: 1; min-height: 1.9rem; padding: 0; border: 1px solid #fff5; border-radius: 50%; cursor: pointer; }
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { outline: 2px solid var(--light); outline-offset: 2px; }
.dock { display: none; }

.status { min-height: 1.5em; color: var(--quiet); }
.status.bad { color: var(--alert); }

.buy { display: grid; gap: .8rem; padding: 1rem; border-radius: 12px; background: var(--wall); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.consent input { margin-top: .25rem; accent-color: var(--light); }

.more { display: grid; gap: .7rem; justify-items: start; }
details { width: 100%; border-top: 1px solid var(--line); padding-top: .6rem; }
summary { cursor: pointer; font-weight: 600; }
details > p, details > div, details > ul { margin-top: .5rem; }
.packs { display: flex; gap: .5rem; flex-wrap: wrap; }
.email-sent { padding: .7rem .9rem; border-left: 3px solid var(--light); border-radius: 8px; background: var(--wall); }
.confirm { max-width: min(28rem, calc(100vw - 2rem)); padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--wall); color: var(--text); }
.confirm::backdrop { background: #000a; }
.confirm .row { justify-content: flex-end; margin-top: 1rem; }
#bought { padding: 0; list-style: none; display: grid; gap: .5rem; }

/* Your lamps (D65): large pictures, 3 per row on a desktop, 1 on a phone */
.lamps-view { max-width: 76rem; margin: 0 auto; padding: .5rem clamp(1rem, 3vw, 2rem) 4rem; }
.lamps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.lamps-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.lamps-tools { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0; }
.lamps-tools label { display: flex; align-items: center; gap: .5rem; }
.lamps-tools select { font: inherit; color: var(--text); background: var(--wall); border: 1px solid var(--line); border-radius: 8px; padding: .35rem .5rem; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.tile { display: grid; gap: .35rem; align-content: start; padding: .8rem; border-radius: 14px; background: var(--wall); }
.tile-picture { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #d3d6de, #8e94a3); margin-bottom: .4rem; }
.tile-picture img { width: 100%; height: 100%; object-fit: cover; }
.tile-picture .quiet { color: #23283a; }
.tile h2 { font-size: 1.35rem; }
.tile[data-p="pcb"] h2 { font-family: Orbitron, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 1.15rem; }
.tile[data-p="rain"] h2 { font-family: Syne, sans-serif; font-weight: 800; }
.tile[data-p="starfield"] h2 { font-family: Quicksand, sans-serif; }
.tile[data-p="voronoi"] h2 { font-family: Fraunces, serif; }
.tile-status { font-size: .92rem; color: var(--light); }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .4rem; }
.icon-button { appearance: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--quiet); cursor: pointer; }
.icon-button svg { width: 1.25rem; height: 1.25rem; }
.icon-button:hover { color: var(--alert); border-color: var(--alert); }

/* Your account (D65) */
.account-view { max-width: 52rem; margin: 0 auto; padding: .5rem clamp(1rem, 3vw, 2rem) 4rem; display: grid; gap: 1.2rem; }
.account-view h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.account-box { display: grid; gap: .8rem; padding: 1.2rem; border-radius: 14px; background: var(--wall); }
.balance { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; }
.history { width: 100%; border-collapse: collapse; font-size: .95rem; }
.history th { text-align: left; color: var(--quiet); font-weight: 600; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.history td { padding: .45rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.history .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.history .plus { color: #6fd39a; }
.danger h2 { color: var(--alert); }
.delete-form label { display: block; margin-bottom: .35rem; }
.button.danger { border-color: var(--alert); color: var(--alert); }
.button.danger:not(:disabled):hover { background: var(--alert); color: var(--ink); }
#save { margin-top: -.3rem; }
#save[aria-pressed="true"] { border-color: var(--light); color: var(--light); }
@media (max-width: 64rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tiles { grid-template-columns: 1fr; } }

@media (max-width: 56rem) {
  .intro { grid-template-columns: 1fr; }
  .intro-stage { max-width: 22rem; order: -1; }
  #studio { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 0 1rem 6rem; }
  /* phone (D68): the lamp stays in sight while the settings scroll under it */
  .stage { position: sticky; top: 0; z-index: 2; height: 40vh; height: 40svh; min-height: 15rem; margin: 0 -1rem; border-radius: 0 0 14px 14px; }
  .stage-name { font-size: 1.15rem; }
  .dock {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--dusk) 92%, transparent);
    border-top: 1px solid var(--line);
  }
  .dock .button { flex: 1; }
  #generate { display: none; }     /* the bar's button does it (UX review P5) */
  .toasts { top: .8rem; bottom: auto; left: 1rem; right: 1rem; width: auto; }     /* the bar holds the bottom */
  .history { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage, body { transition: none; }
  .help { animation: none; }
}
[tabindex="-1"]:focus { outline: none; }     /* a page heading that took the focus (UX review C13) */
/* Contact us (David) */
.contact-form { display: grid; gap: .5rem; justify-items: start; }
.contact-form textarea { width: 100%; font: inherit; color: var(--text); background: var(--dusk); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; resize: vertical; }
.contact-form textarea:focus-visible { outline: 2px solid var(--light); outline-offset: 1px; }