/* The chameleon room (spec docs/superpowers/specs/2026-10-06-chameleon-sculpted-room-design.md).
   build-chameleon.mjs appends the scene's numbers (crop, openings, lettering, page colours) and replaces
   the two media aliases: --room (the openings are the links) and --portrait (the portrait picture). */
@font-face { font-family: Fraunces; src: url('/fonts/Fraunces-Soft.e493af1a0b.woff2') format('woff2'); font-weight: 300 400; font-display: swap; }
@font-face { font-family: Geist; src: url('/fonts/Geist.4041c5764f.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --daylight: #FCFBF8; --bone: #EDE9E2; --plaster: #D7CFC1; --sand: #B9AA96; --glow: #D1A772; --umber: #8F7153; --ink: #2B231D;
  --accent: var(--ink);
  --serif: Fraunces, ui-serif, Georgia, serif;
  --sans: Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --rise: cubic-bezier(.22, 1, .36, 1); --portal: cubic-bezier(.65, 0, .35, 1); --goo: cubic-bezier(.34, 1.2, .64, 1);
  /* Five steps of type: the lettering is sized by its wall. */
  --t-s: 13px; --t-b: 15px; --t-m: 18px; --t-l: clamp(30px, 1.6vw + 18px, 44px);
  --legal-h: 34px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bone); }
body {
  margin: 0; overflow: hidden; background: var(--bone); color: var(--ink);
  font: 400 var(--t-b)/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}

/* ---- The room: one picture, cover-cropped at the scene's focus ---------------------------------- */
.room { height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-bottom: var(--legal-h); }
.stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 0; overflow: hidden; container-type: size; background: var(--plaster); }
.still img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
}
.stage canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; transition: opacity .3s; }
.stage canvas.is-loading { opacity: 0; }
/* The picture's own box after the cover crop: everything placed on the wall is placed in it, in
   percent of the picture, so it stays on its spot at any window size, with or without JavaScript. */
.cover {
  position: absolute; z-index: 2; container-type: size; pointer-events: none;
  width: max(100cqw, 100cqh * var(--ar)); height: max(100cqh, 100cqw / var(--ar));
  left: calc((100cqw - max(100cqw, 100cqh * var(--ar))) * var(--fx));
  top: calc((100cqh - max(100cqh, 100cqw / var(--ar))) * var(--fy));
}

/* The lettering, pressed into the plaster: shade above-left, daylight below-right. It is pinned to the
   screen's top left, over the calm upper wall, so it never decides the crop. One line on the pebble
   layout, two in the room (the size there is generated with the room's media query). */
.lettering {
  position: absolute; z-index: 2; left: var(--pad); top: var(--pad); margin: 0;
  font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 10.5vw, 72px); line-height: .98; letter-spacing: -.01em;
  color: color-mix(in oklab, var(--ink) 86%, var(--accent));
  text-shadow: .018em .022em .012em rgb(252 251 248 / .62), -.01em -.014em .02em rgb(143 113 83 / .30);
  transition: color 1.1s var(--rise) .6s; pointer-events: none;
}
@media (min-width: 600px) and (min-height: 536px) and (min-aspect-ratio: 1109/1000) and (max-aspect-ratio: 2708/1000) { .lettering .lt span { display: block; } }
body:not([data-page="home"]) .lettering,
body:has([data-chameleon-targets] a:is(:hover, :focus-visible)) .lettering { transition-delay: .2s; }

/* ---- The openings: the five pages, real links on the wall ---------------------------------------- */
.openings { position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none; }
.opening { position: absolute; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* The link's box is the rotated ellipse's bounding box; the ellipse itself (the lit aperture) and the
   label are what take the pointer, and the focus ring is drawn on the ellipse. */
.hole {
  position: absolute; left: 50%; top: 50%; width: var(--hw); height: var(--hh); border-radius: 50%; pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
.opening:focus-visible { outline: none; }
.opening:focus-visible .hole { outline: 2px solid var(--ink); outline-offset: 5px; }
/* Without WebGL the light is CSS: a soft glow in the page's colour. */
.hole::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; mix-blend-mode: multiply;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--page) 55%, transparent), color-mix(in oklab, var(--page) 18%, transparent) 75%, transparent);
  box-shadow: 0 0 7vmin 2vmin color-mix(in oklab, var(--page) 22%, transparent);
  transition: opacity 1.1s var(--rise);
}
html:not(.gl) .opening:is(:hover, :focus-visible) .hole::before { opacity: 1; transition-duration: .7s; }
.label {
  position: absolute; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 999px; white-space: nowrap;
  font: 500 var(--t-s)/1 var(--sans); letter-spacing: .01em; color: var(--ink);
  background: rgb(252 251 248 / .8); box-shadow: 0 6px 18px -10px rgb(143 113 83 / .55);
  transition: background .5s var(--rise), box-shadow .5s var(--rise);
}
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--page); flex: none; }
.opening:is(:hover, :focus-visible) .label { background: var(--daylight); box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--page) 70%, transparent); }

/* ---- About the picture: a badge over the animal, a faint mark in the corner ----------------------- */
.ai-spot { position: absolute; z-index: 1; pointer-events: auto; border: 0; padding: 0; background: transparent; cursor: pointer; }
.ai-spot:focus { outline: none; }
.ai-badge {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -40%) scale(.96); opacity: 0; pointer-events: none;
  padding: 8px 13px; border-radius: 999px; white-space: nowrap;
  font: 500 var(--t-s)/1 var(--sans); letter-spacing: .01em; color: var(--daylight); background: var(--ink);
  box-shadow: 0 12px 30px -12px rgb(43 35 29 / .5); transition: opacity .25s var(--rise), transform .25s var(--rise);
}
.ai-spot:hover .ai-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ai-mark {
  position: absolute; top: 10px; right: 10px; z-index: 3; padding: 5px 7px; border: 0; border-radius: 7px; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .08em; color: rgb(43 35 29 / .72); background: rgb(252 251 248 / .5);
}
.ai-mark:hover, .ai-mark:focus-visible { color: var(--ink); background: var(--daylight); }
.ai-info {
  max-width: min(460px, calc(100vw - 32px)); border: 0; border-radius: 22px 26px 24px 22px; padding: 28px 28px 22px;
  color: var(--ink); background: var(--bone); box-shadow: 0 30px 80px -30px rgb(143 113 83 / .6);
}
.ai-info::backdrop { background: rgb(237 233 226 / .7); }
.ai-info h2 { margin: 0 0 10px; font: 300 var(--t-l)/1.1 var(--serif); }
.ai-info p { margin: 0 0 10px; font-size: var(--t-s); }
.ai-info a { color: inherit; }
.ai-info form { margin-top: 16px; }

/* ---- Phones and windows the openings do not fit: pebbles under the picture ------------------------ */
.pebbles { flex: none; display: grid; padding: 14px 16px 2px; background: var(--bone); }
.pebbles > * { grid-area: 1 / 1; width: 100%; max-width: 520px; justify-self: center; }
.goo { display: block; height: auto; align-self: start; overflow: visible; }
.pebble-g circle { fill: var(--plaster); }
.pebble-g .blob {
  fill: var(--accent); transform-box: fill-box; transform-origin: center;
  transform: translateX(var(--bx, 0px)) scale(var(--bs, 0));
  transition: transform .6s var(--goo), fill .6s var(--rise);
}
.pebbles ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pebbles a {
  display: block; height: 100%; padding: 80% 2px 6px; border-radius: 16px; text-align: center; text-decoration: none;
  font: 500 var(--t-s)/1.2 var(--sans); color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.pebbles a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---- Legal links, on every page and above every sheet ---------------------------------------------- */
.legal {
  position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; height: var(--legal-h);
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px env(safe-area-inset-bottom);
  font-size: var(--t-s); background: var(--bone);
}
.legal a { padding: 5px 9px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.legal a:hover, .legal a:focus-visible { background: var(--daylight); }

@media (min-width: 600px) and (min-height: 536px) and (min-aspect-ratio: 1109/1000) and (max-aspect-ratio: 2708/1000) {
  .room { padding-bottom: 0; }
  .openings { display: block; }
  .pebbles { display: none; }
  .legal { right: auto; left: 12px; bottom: 12px; height: auto; padding: 0; background: none; }
  .legal a { background: rgb(252 251 248 / .72); }
}

/* ---- A page: a plaster sheet that grows out of its opening --------------------------------------- */
.sheets { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.page {
  position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; pointer-events: auto;
  color: var(--ink); background: radial-gradient(120% 90% at 50% 28%, var(--sheet-hi), var(--sheet) 72%);
  clip-path: ellipse(150vmax 150vmax at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .95s var(--portal);
}
.page[hidden] { display: none; }
.page.is-shut { clip-path: ellipse(var(--orx, 0px) var(--ory, 0px) at var(--ox, 50%) var(--oy, 50%)); }
.page.is-closing { transition-duration: .7s; }
.sheet-in {
  max-width: 840px; min-height: 100%; margin: 0 auto; padding: clamp(28px, 7vh, 80px) clamp(16px, 4vw, 40px) calc(var(--legal-h) + 40px);
  display: flex; flex-direction: column; justify-content: safe center; gap: 20px;
}
.back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
  font: 500 var(--t-s)/1 var(--sans); letter-spacing: .02em; color: var(--page-ink); text-decoration: none;
}
.back::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, var(--page), transparent); }
.page h2 { margin: 0; font: 300 var(--t-l)/1.08 var(--serif); letter-spacing: -.015em; color: var(--page-ink); text-wrap: balance; }
.page h2:focus { outline: none; }
.lede { margin: 0; max-width: 36em; color: var(--muted); }
.fine { margin: 0; font-size: var(--t-s); color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px;
  border: 1px solid var(--page-ink, var(--ink)); border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 500 var(--t-s)/1 var(--sans); color: var(--daylight); background: var(--page-ink, var(--ink));
  transition: background .3s var(--rise), color .3s var(--rise);
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--page-ink, var(--ink)); }
.btn--ghost { background: transparent; color: var(--page-ink, var(--ink)); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--page-ink, var(--ink)); color: var(--daylight); }
:focus-visible { outline: 2px solid var(--page-ink, var(--ink)); outline-offset: 3px; }

.tiers, .works { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tier, .work {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px 28px 24px 22px;
  background: rgb(252 251 248 / .5); box-shadow: inset 0 0 0 1px rgb(143 113 83 / .16);
}
.tier--lead { background: rgb(252 251 248 / .85); }
.tier h3 { margin: 0; font: 600 var(--t-m)/1.2 var(--sans); }
.price { font: 400 var(--t-l)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--page-ink); }
.price small { font-size: var(--t-s); letter-spacing: 0; color: var(--muted); }
.tier ul { margin: 0; padding: 0; list-style: none; line-height: 1.45; }
.tier li { position: relative; padding: 4px 0 4px 16px; }
.tier li::before { content: ""; position: absolute; left: 0; top: .9em; width: 6px; height: 6px; border-radius: 50%; background: var(--page); }
.tier .btn { margin-top: auto; }
.work { color: inherit; text-decoration: none; transition: background .3s var(--rise); }
.work:hover, .work:focus-visible { background: rgb(252 251 248 / .9); }
.work strong, .steps strong { font: 600 var(--t-m)/1.25 var(--sans); }
.work span, .steps span { color: var(--muted); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: baseline; }
.steps li::before { counter-increment: s; content: "0" counter(s); grid-row: span 2; font: 600 var(--t-s)/1 var(--sans); letter-spacing: .06em; color: var(--page-ink); }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.book input, .book select {
  height: 46px; padding: 0 14px; border: 1px solid rgb(143 113 83 / .38); border-radius: 14px;
  font: 400 var(--t-b) var(--sans); color: var(--ink); background: var(--daylight);
}
.book .hint { font-size: var(--t-s); font-weight: 400; color: var(--muted); }
.book .row, .sent { grid-column: 1 / -1; }
.sent { margin: 0; }

@media (max-width: 720px) {
  .tiers, .works, .book { grid-template-columns: 1fr; }
  .sheet-in { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .pebble-g { filter: none; }
  .pebble-g .blob { transition: fill .15s linear; }
  .lettering, .label, .hole::before { transition-duration: .15s !important; transition-delay: 0s !important; }
  .page { clip-path: none !important; transition: opacity .15s linear; }
  .page.is-shut { opacity: 0; }
  .btn, .work, .ai-badge { transition: none; }
}

/* ---- Generated by build-chameleon.mjs from the scene files ---- */
:root { --ar: 1.77778; --fx: 0.992; --fy: 0.11; }
.ai-spot { left: 24.000%; top: 41.333%; width: 29.750%; height: 39.556%; }
.lettering { --pad: clamp(20px, 3.4vw, 64px); }
@media (min-width: 600px) and (min-height: 536px) and (min-aspect-ratio: 1109/1000) and (max-aspect-ratio: 2708/1000) { .lettering { font-size: clamp(44px, 6vw, 132px); } }
.opening[data-page="pricing"] { left: 65.370%; top: 12.415%; width: 14.286%; height: 36.874%; --hw: 96.938%; --hh: 101.420%; --rot: 12.8deg; } .opening[data-page="pricing"] .label { left: 50%; top: 100%; transform: translate(-50%, 12px); }
.opening[data-page="book-a-design"] { left: 86.342%; top: 12.221%; width: 11.545%; height: 27.179%; --hw: 97.892%; --hh: 101.182%; --rot: -12.9deg; } .opening[data-page="book-a-design"] .label { left: 50%; bottom: 100%; transform: translate(-50%, -12px); }
.opening[data-page="examples"] { left: 50.722%; top: 20.289%; width: 6.264%; height: 25.551%; --hw: 98.947%; --hh: 100.199%; --rot: 4deg; } .opening[data-page="examples"] .label { right: 100%; top: 50%; transform: translate(-12px, -50%); }
.opening[data-page="how-it-works"] { left: 82.938%; top: 43.606%; width: 4.817%; height: 17.621%; --hw: 99.802%; --hh: 100.047%; --rot: -2deg; } .opening[data-page="how-it-works"] .label { left: 50%; top: 100%; transform: translate(-50%, 12px); }
.opening[data-page="login"] { left: 59.400%; top: 4.996%; width: 5.680%; height: 10.323%; --hw: 81.430%; --hh: 114.994%; --rot: 43.2deg; } .opening[data-page="login"] .label { right: 100%; top: 50%; transform: translate(-12px, -50%); }
@media (max-width: 599px), (max-aspect-ratio: 4/5) {
:root { --ar: 0.56250; --fx: 0.15; --fy: 0.45; }
.ai-spot { left: 2.750%; top: 49.359%; width: 69.250%; height: 23.625%; }
}
[data-palette="sapphire"] { --page: #1F4F9E; --page-ink: #0F3467; --sheet: #C8C5BF; --sheet-hi: #E2E1DF; --muted: #4A433C; }
[data-palette="bordeaux"] { --page: #7B1E2B; --page-ink: #58131A; --sheet: #D1C1B4; --sheet-hi: #E8DFD8; --muted: #4C423A; }
[data-palette="emerald"] { --page: #0E7A55; --page-ink: #04402A; --sheet: #C9C8B8; --sheet-hi: #E3E3DA; --muted: #4A433B; }
[data-palette="persimmon"] { --page: #C9561C; --page-ink: #762E0D; --sheet: #D7C6B5; --sheet-hi: #ECE2D9; --muted: #4D433A; }
[data-palette="peacock"] { --page: #0B6470; --page-ink: #003B44; --sheet: #C8C6BA; --sheet-hi: #E2E2DC; --muted: #4A433B; }
body:has([data-chameleon-targets] a[data-page="pricing"]:focus-visible) { --accent: #1F4F9E; --bx: 0px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="book-a-design"]:focus-visible) { --accent: #7B1E2B; --bx: 100px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="examples"]:focus-visible) { --accent: #0E7A55; --bx: 200px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="how-it-works"]:focus-visible) { --accent: #C9561C; --bx: 300px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="login"]:focus-visible) { --accent: #0B6470; --bx: 400px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="pricing"]:hover) { --accent: #1F4F9E; --bx: 0px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="book-a-design"]:hover) { --accent: #7B1E2B; --bx: 100px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="examples"]:hover) { --accent: #0E7A55; --bx: 200px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="how-it-works"]:hover) { --accent: #C9561C; --bx: 300px; --bs: 1; }
body:has([data-chameleon-targets] a[data-page="login"]:hover) { --accent: #0B6470; --bx: 400px; --bs: 1; }
body[data-page="pricing"] { --accent: #1F4F9E; --bx: 0px; --bs: 1; }
body[data-page="book-a-design"] { --accent: #7B1E2B; --bx: 100px; --bs: 1; }
body[data-page="examples"] { --accent: #0E7A55; --bx: 200px; --bs: 1; }
body[data-page="how-it-works"] { --accent: #C9561C; --bx: 300px; --bs: 1; }
body[data-page="login"] { --accent: #0B6470; --bx: 400px; --bs: 1; }