/* ==========================================================================
   KUTAY OS — Studio desktop (desktop 01)
   See js/home/studio.js for the layout model. All photo-locked geometry
   derives from five custom properties so the shelf, the folders and the
   desk hotspots can never drift apart:
     --st-sw / --st-sh   the photo stage, sized like background-size:cover
                         (+24px so the parallax drift never shows an edge)
     --st-top            where the stage starts vertically
     --st-shelf          the line the folder boxes stand on (66% of photo)
     --st-fw / --st-fh   one folder's width and height
   ========================================================================== */

body.studio-v2[data-realm="play"] {
  --st-sw: max(calc(100vw + 24px), calc(177.68vh + 43px));
  --st-sh: calc(var(--st-sw) * .5628);
  --st-top: calc(50vh - var(--st-sh) / 2);
  --st-shelf: calc(var(--st-top) + var(--st-sh) * .662);
  /* the icon column sits just left of the photographed desk lamp, so the
     lamp stays clickable; the shelf and the wall end before the column */
  --st-icons-right: 12px;
  --st-right: calc(var(--st-icons-right) + var(--icons-w, 96px) + 32px);
  --st-fw: min(calc((100vw - 40px - var(--st-right) - 8 * 14px) / 9), calc(var(--st-sw) * .09), 190px);
  --st-fh: calc(var(--st-fw) * .9375);
  --st-folder-top: calc(var(--st-shelf) - var(--st-fh));
  --st-cream: #fff4df; --st-yellow: #ffcf3e; --st-ink: #10130f;
  background: #0b2a1d;
}
@media (min-width: 1600px) { body.studio-v2[data-realm="play"] { --st-icons-right: max(12px, calc(50vw - var(--st-sw) * .425 + 8px)); } }
body.studio-v2[data-realm="play"] .wallpaper { display: none; }
body.studio-v2[data-realm="play"] .menu { --menu-bg: rgba(6, 22, 15, .5); }
body.studio-v2[data-realm="play"] .realm-room > .room-heading { display: none; }

.st { position: relative; color: var(--st-cream); font-family: var(--font-sans); --px: 0; --py: 0; }
.st :is(h1, h2, p, dl, dd, ul) { margin: 0; }
.st ul { list-style: none; padding: 0; }
.st button { font: inherit; color: inherit; cursor: pointer; }
.st :is(button, a):focus-visible { outline: 2px solid var(--st-yellow); outline-offset: 3px; }

/* ---------------------------------------------------------------------- */
/* The photo stage                                                         */
/* ---------------------------------------------------------------------- */
.st-scene, .st-shelf { transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -7px), 0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.st-scene { position: fixed; z-index: 0; left: calc(50vw - var(--st-sw) / 2); top: var(--st-top); width: var(--st-sw); height: var(--st-sh); }
.st-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 18, 11, .62), rgba(4, 18, 11, .34) 24%, transparent 46%), linear-gradient(rgba(4, 18, 11, .35), transparent 30%); }
.st-spot { z-index: 2; }
.st-photo { position: absolute; inset: 0; background: url('../assets/home/studio-scene-v61.webp') center / 100% 100% no-repeat; transition: filter 1s ease; }
.st-light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .9;
  background: radial-gradient(ellipse at 96% 40%, rgba(255, 190, 110, .09), transparent 48%); }
.st-lamp-glow { position: absolute; left: 95%; top: 37%; width: 46%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 1s ease;
  background: radial-gradient(circle, rgba(255, 196, 120, .6), rgba(255, 160, 70, .2) 32%, transparent 64%); }
/* ---- After hours (desk lamp) ---- */
.st-night .st-photo { filter: brightness(.3) saturate(.7) hue-rotate(-8deg); }
.st-night .st-light { opacity: 0; }
.st-night .st-lamp-glow { opacity: 1; }
/* Blackout (js/home/studio.js › stTorch). Both layers live inside the
   desktop, above the room and its icons, below the windows. */
.st-dark, .st-torch { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease; --lx: 62vw; --ly: 55vh; --bx: 96vw; --by: 30vh; }
.st-dark {
  z-index: 10; background: rgba(2, 4, 3, .96);
  -webkit-mask-image: radial-gradient(circle 250px at var(--lx) var(--ly), transparent 0, transparent 22%, rgba(0, 0, 0, .6) 55%, #000 100%), radial-gradient(circle 170px at var(--bx) var(--by), transparent 0, transparent 20%, rgba(0, 0, 0, .7) 60%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle 250px at var(--lx) var(--ly), transparent 0, transparent 22%, rgba(0, 0, 0, .6) 55%, #000 100%), radial-gradient(circle 170px at var(--bx) var(--by), transparent 0, transparent 20%, rgba(0, 0, 0, .7) 60%, #000 100%);
  mask-composite: intersect;
}
.st-torch { z-index: 11; mix-blend-mode: screen; background: radial-gradient(circle 240px at var(--lx) var(--ly), rgba(255, 205, 140, .22), rgba(255, 170, 90, .06) 50%, transparent 72%); }
@media (min-width: 1100px) and (min-height: 640px) {
  body.st-night[data-realm="play"] .st-dark, body.st-night[data-realm="play"] .st-torch { opacity: 1; }
  body.st-night[data-realm="play"] :is(.menu, .dock) { filter: brightness(.34) saturate(.5); transition: filter .5s ease; }
  body.st-night[data-realm="play"] :is(.menu, .dock):is(:hover, :focus-within) { filter: none; }
}
/* Glow-ink notes on the desk: there all along, visible only in the dark,
   and only where the torch falls. */
.st-secret { position: absolute; z-index: 1; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); margin: 0; transform: rotate(var(--r)); white-space: nowrap; pointer-events: none;
  font: 600 calc(var(--st-sw, 1440px) * .0118)/1.1 "Marker Felt", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: #dcff8f; text-shadow: 0 0 6px rgba(205, 255, 120, .85), 0 0 20px rgba(170, 255, 90, .45); opacity: 0; transition: opacity 1.2s ease; }
body.st-night .st-secret { opacity: .95; }
body.st-night[data-realm="play"] { --menu-bg: rgba(3, 9, 6, .78); --dock-bg: rgba(8, 12, 10, .78); }
.st-night .st-hero h1 em { text-shadow: 0 0 34px rgba(255, 207, 62, .45); }
.st-night .st-card { box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 210, 140, .08); }
.st-night .st-pantone, .st-night .st-facts { filter: brightness(.82) sepia(.18); }
.st-night .st-folder img { filter: brightness(.55) saturate(.8); transition: filter .8s; }
.st-night .st-folder:hover img { filter: brightness(.9); }
.st-night .st-folder-label { border-color: rgba(255, 220, 150, .35); box-shadow: 0 0 18px rgba(255, 200, 120, .18); }
.st-night .st-folder-label > i { box-shadow: 0 0 10px 2px var(--dot); }
.st-night .st-spot-dot { width: 10px; height: 10px; background: #ffd97a; box-shadow: 0 0 14px 4px rgba(255, 210, 120, .55); }
.st-night .st-live { color: #ffb86b; } .st-night .st-live i { background: #ff9a3c; }
.st-spot-lamp.is-calling .st-spot-dot { width: 12px; height: 12px; animation-duration: 1.4s; }
.st-radio-offer { position: fixed; z-index: var(--z-toast); left: 24px; bottom: calc(var(--dock-reserve) + 84px); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 16px; background: rgba(12, 18, 14, .94); color: #fff4df; border: 1px solid rgba(255, 220, 150, .25); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(12px); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .35s var(--ease-out); }
.st-radio-offer.show { opacity: 1; transform: none; }
.st-radio-offer b { display: block; font-size: 13px; } .st-radio-offer small { font-size: 11.5px; color: #c9cfc2; }
.st-radio-eq { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.st-radio-eq i { width: 3px; background: #ffcf3e; border-radius: 2px; animation: stEq 1s ease-in-out infinite; }
.st-radio-eq i:nth-child(2) { animation-delay: -.3s; } .st-radio-eq i:nth-child(3) { animation-delay: -.6s; } .st-radio-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes stEq { 0%, 100% { height: 5px; } 50% { height: 18px; } }
.st-radio-play { border: 0; border-radius: 999px; padding: 8px 14px; background: #ffcf3e; color: #111; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.st-radio-x { border: 0; background: none; color: #c9cfc2; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; }

/* Safe area while dragging */
.safe-area { position: fixed; z-index: calc(var(--z-dock) - 1); inset: calc(var(--menu-h) + 20px) 20px 20px; border: 1.5px dashed rgba(0, 174, 239, .6); border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .2s, border-color .2s; }
.safe-area.show { opacity: 1; }
.safe-area span { position: absolute; top: 6px; left: 8px; padding: 3px 8px; border-radius: 4px; background: rgba(0, 174, 239, .9); color: #fff; font: 700 10px var(--font-mono); letter-spacing: .1em; }
.safe-area.warn { border-color: rgba(236, 0, 140, .9); animation: stWarn .5s ease-in-out infinite alternate; }
.safe-area.warn span { background: rgba(236, 0, 140, .95); }
@keyframes stWarn { to { border-color: rgba(236, 0, 140, .35); } }

/* Desk objects you can click */
.st-spot { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); padding: 0; border: 0; border-radius: 16px; background: transparent; transition: background .3s, box-shadow .3s; }
.st-spot:hover, .st-spot:focus-visible { background: rgba(255, 236, 196, .07); box-shadow: 0 0 0 2px rgba(255, 234, 190, .6), 0 0 46px rgba(255, 206, 130, .28); outline: 0; }
.st-spot-dot { position: absolute; right: 10%; top: 8%; width: 7px; height: 7px; opacity: .85; border-radius: 50%; background: var(--st-yellow); box-shadow: 0 0 0 0 rgba(255, 207, 62, .6); animation: stPulse 2.6s ease-out infinite; animation-delay: calc(var(--x) * 3s); transition: opacity .2s; }
.st-spot:hover .st-spot-dot { opacity: 0; }
@keyframes stPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 207, 62, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 207, 62, 0); } }
/* One floating label for every desk object, above icons and dock, placed
   where it fits (above, or beside when the object is at a screen edge). */
.st-tip { position: fixed; z-index: var(--z-toast); left: 0; top: 0; padding: 8px 13px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(8, 20, 14, .92); color: #fff4df; font: 600 12.5px/1.2 var(--font-sans); border: 1px solid rgba(255, 240, 210, .22); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px); opacity: 0; transform: translate(var(--tx, 0), calc(var(--ty, 0px) + 6px)); transition: opacity .18s, transform .25s var(--ease-out); }
.st-tip.show { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0px)); }
.st-tip small { display: block; margin-top: 3px; font-weight: 400; color: #cfd6c8; font-size: 11px; }

/* ---------------------------------------------------------------------- */
/* The wall: hero + widgets, ending where the folders begin                */
/* ---------------------------------------------------------------------- */
.st-wall {
  position: fixed; z-index: 2; top: calc(var(--menu-h) + 22px); left: 40px; right: var(--st-right);
  height: calc(var(--st-folder-top) - var(--menu-h) - 46px);
  display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.5fr); gap: clamp(18px, 2vw, 36px);
  container: wall / size;
  transform: translate3d(calc(var(--px) * 5px), calc(var(--py) * 3px), 0); transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.st-hero { display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 3cqh, 18px); min-width: 0; min-height: 0; }
.st-kicker { font: 600 11px/1.3 var(--font-mono); letter-spacing: .26em; color: #e9e4d1; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.st-kicker span { color: #b9c9b8; }
.st-hero h1 { font-size: clamp(30px, min(4.3cqw, 16cqh), 84px); line-height: .9; letter-spacing: -.048em; font-weight: 800; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.st-hero h1 span { display: block; }
.st-hero h1 em { display: block; font-style: normal; color: var(--st-yellow); }
.st-lede { font-size: clamp(12px, 1.15cqw, 15px); color: #dfe1d4; letter-spacing: .005em; }
.st-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.st-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 650; white-space: nowrap; color: var(--st-cream); border: 1px solid rgba(255, 244, 223, .35); background: rgba(8, 24, 16, .35); backdrop-filter: blur(10px); overflow: hidden; transition: transform .2s var(--ease-out), background .25s, border-color .25s, color .25s, box-shadow .3s; }
.st-btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.st-btn:hover { transform: translateY(-2px); border-color: var(--st-cream); background: rgba(255, 244, 223, .12); }
.st-btn:hover svg { transform: translateX(4px); }
.st-btn:active { transform: translateY(0) scale(.97); }
.st-btn-primary { background: var(--st-cream); color: var(--st-ink); border-color: var(--st-cream); }
.st-btn-primary:hover { background: var(--st-yellow); border-color: var(--st-yellow); color: var(--st-ink); box-shadow: 0 10px 30px rgba(255, 207, 62, .35); }
.st-stats { display: flex; gap: clamp(16px, 2.6cqw, 34px); }
.st-stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding-left: 14px; border-left: 1px solid rgba(255, 244, 223, .25); }
.st-stats dd { font-size: clamp(18px, 2.1cqw, 26px); font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.st-stats dt { font-size: 11px; color: #c6cebf; letter-spacing: .04em; }

.st-widgets { --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(10px, 1.2cqw, 18px); min-height: 0; max-height: 390px; align-self: center; height: 100%; }
.st-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 10px; overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .35s; box-shadow: 0 18px 40px rgba(0, 0, 0, .32); }
.st-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 26px 50px rgba(0, 0, 0, .42); }
.st-card.is-swapping > :not(header) { opacity: .15; transition: opacity .22s; }
.st-card > * { transition: opacity .3s; }

/* Pantone mood */
.st-pantone, .st-facts { background: linear-gradient(118deg, #fff2da, #efe1c8); color: var(--st-ink); border: 1px solid rgba(255, 255, 255, .45); }
.st-pantone { padding: clamp(12px, 6%, 18px); gap: 10px; }
.st-pantone header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.st-pantone header b { font-size: clamp(11px, 1.05cqw, 14px); line-height: 1.05; letter-spacing: .01em; }
.st-ring { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(16, 19, 15, .06); display: grid; place-items: center; flex-shrink: 0; transition: background .2s, transform .3s var(--ease-out); }
.st-ring:hover { background: rgba(16, 19, 15, .12); transform: rotate(90deg); }
.st-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; fill: none; stroke-width: 2.5; }
.st-ring circle { stroke: rgba(16, 19, 15, .12); }
.st-ring .st-ring-run { stroke: #10130f; stroke-dasharray: 94.3; stroke-dashoffset: 94.3; animation: stRing 8s linear infinite; }
.st-pantone:hover .st-ring-run { animation-play-state: paused; }
@keyframes stRing { to { stroke-dashoffset: 0; } }
.st-ring span { font-size: 15px; line-height: 1; }
.st-swatch { position: relative; flex: 1; min-height: 40px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--spot, #ffcf3e); transition: background-color .7s ease, transform .3s var(--ease-out); cursor: copy !important; isolation: isolate; }
.st-swatch::before { content: ""; position: absolute; inset: 0; background: url('../assets/home/paper-v128.png') center / cover; filter: grayscale(1) contrast(1.25) brightness(1.25); mix-blend-mode: multiply; opacity: .75; z-index: -1; }
.st-swatch:hover { transform: scale(1.02); }
.st-swatch-hex { position: absolute; left: 8px; bottom: 8px; font: 600 11px var(--font-mono); letter-spacing: .04em; color: rgba(16, 19, 15, .7); }
.st-swatch-tip { position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(16, 19, 15, .72); color: #fff; opacity: 0; translate: 0 4px; transition: opacity .2s, translate .2s; }
.st-swatch:hover .st-swatch-tip, .st-swatch:focus-visible .st-swatch-tip { opacity: 1; translate: 0 0; }
.st-pantone footer b span { display: block; font-size: .78em; font-weight: 700; letter-spacing: -.01em; }
.st-pantone footer b { display: block; font-size: clamp(13px, 1.35cqw, 19px); line-height: 1; letter-spacing: -.01em; }
.st-pantone footer strong { display: block; font: 700 1em var(--font-mono); letter-spacing: -.02em; margin-top: 2px; }
.st-pantone footer p { margin-top: 5px; font-size: 11px; line-height: 1.3; color: #5f5c52; font-style: italic; }

/* Formula ticker under the hero */
.st-formula-line { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px dashed rgba(255, 244, 223, .35); border-radius: 6px; background: rgba(8, 24, 16, .25); font: 600 12px var(--font-mono); letter-spacing: .12em; color: #f1e8d2; cursor: pointer; transition: border-color .2s, background .2s; }
.st-formula-line::before { content: "ƒ"; font-style: italic; color: var(--st-yellow); letter-spacing: 0; }
.st-formula-line span { display: inline-block; min-width: 24ch; text-align: left; }
.st-formula-line:hover { border-color: var(--st-yellow); background: rgba(255, 207, 62, .08); }

/* Designer facts */
.st-facts { padding: clamp(12px, 6%, 18px); }
.st-facts h2 { font-size: clamp(17px, 1.9cqw, 26px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.st-facts header p { font-size: 10.5px; margin-top: 4px; color: #3d3d35; }
.st-facts-top { display: flex; justify-content: space-between; padding: 6px 0; margin-top: 7px; border-top: 5px solid var(--st-ink); border-bottom: 1px solid rgba(16, 19, 15, .2); font-size: 12.5px; }
.st-facts ul { display: flex; flex-direction: column; flex: 1; justify-content: space-evenly; min-height: 0; }
.st-facts li { position: relative; display: flex; justify-content: space-between; gap: 6px; padding: 4px 0 6px; font-size: 12px; border-bottom: 1px solid rgba(16, 19, 15, .14); }
.st-facts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-facts li b { font-variant-numeric: tabular-nums; }
.st-facts li i { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--v, 0) * 1%); background: var(--st-ink); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.st-facts footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.st-link { white-space: nowrap; padding: 5px 0; border: 0; background: none; font-size: 12px; font-weight: 700; border-bottom: 1.5px solid currentColor !important; line-height: 1; transition: color .2s; }
.st-link:hover { color: #9a6a00; }
.st-barcode { width: 42%; height: 26px; padding: 0; border: 0; background: repeating-linear-gradient(90deg, #10130f 0 2px, transparent 2px 4px, #10130f 4px 5px, transparent 5px 8px, #10130f 8px 11px, transparent 11px 12px); opacity: .9; transition: opacity .2s, transform .2s; }
.st-barcode:hover { opacity: 1; transform: scaleY(1.12); }

/* Studio now */
.st-now { padding: clamp(12px, 6%, 18px); background: linear-gradient(160deg, rgba(20, 44, 32, .88), rgba(8, 22, 15, .9)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); gap: 10px; }
.st-now header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-now h2 { font-size: clamp(14px, 1.45cqw, 19px); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-live { flex: none; }
.st-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9fe07a; }
.st-live i { width: 7px; height: 7px; border-radius: 50%; background: #72e33c; box-shadow: 0 0 0 0 rgba(114, 227, 60, .6); animation: stLive 2s infinite; }
@keyframes stLive { 70%, 100% { box-shadow: 0 0 0 7px rgba(114, 227, 60, 0); } }
.st-file { display: flex; align-items: center; gap: 8px; margin: -2px 0 2px; padding: 6px 8px; border-radius: 7px; background: rgba(255, 255, 255, .05); font: 11px var(--font-mono); overflow: hidden; }
.st-file span { color: #93a699; letter-spacing: .1em; flex: none; }
.st-file b { font-weight: 600; color: #f6e9c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.st-file b::before { content: "◆ "; color: #ff9a3c; }
.st-stage { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; cursor: pointer; border-radius: 8px; transition: opacity .24s; }
.st-stage.is-swapping { opacity: .1; }
.st-stage > span { font-size: 10px; letter-spacing: .12em; color: #93a699; margin-top: 4px; }
.st-stage p { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.st-stage p b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-stage .st-later { color: #b8c3b9; font-size: 12px; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.st-dot.yellow { background: #ffcf22; } .st-dot.blue { background: #4c9bf0; } .st-dot.empty { border: 1.5px solid #9fb0a3; }
.st-progress { display: flex; align-items: center; gap: 10px; margin: 2px 0 2px 18px; }
.st-progress > span { flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.st-progress > span i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, #ffb800, #ffd84a); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.st-progress b { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: #d9dfd6; }
.st-weather { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -4px -4px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; background: rgba(255, 255, 255, .05); text-align: left; transition: background .2s, border-color .2s; }
.st-weather:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
.st-weather svg { width: 28px; height: 28px; color: #ffcc22; flex-shrink: 0; animation: stSpin 24s linear infinite; }
@keyframes stSpin { to { rotate: 360deg; } }
.st-weather span { display: flex; flex-direction: column; min-width: 0; }
.st-weather strong { font-size: 18px; font-weight: 500; line-height: 1.1; }
.st-weather small { font-size: 11px; color: #c4cabf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* How much of the wall is shown, by the room available */
@container wall (max-width: 1180px) { .st-widgets { --n: 3; } .st-now { display: none; } }
@container wall (max-width: 900px) { .st-widgets { --n: 2; } .st-facts { display: none; } }
@container wall (max-width: 680px) { .st { --x: 0; } .st-widgets { --n: 1; } .st-cotd { display: none; } }
@container wall (max-width: 520px) { .st-widgets { display: none; } }
@container wall (max-height: 360px) { .st-formula-line { display: none; } }
@container wall (max-height: 320px) { .st-stats { display: none; } }
@container wall (max-height: 240px) { .st-widgets { display: none; } .st-lede { display: none; } }

/* ---------------------------------------------------------------------- */
/* The shelf: folder boxes standing on the photographed ledge             */
/* ---------------------------------------------------------------------- */
.st-shelf { position: fixed; z-index: 3; left: 40px; right: var(--st-right); top: var(--st-folder-top); height: var(--st-fh); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.st-folder { position: relative; width: var(--st-fw); height: 100%; display: block; pointer-events: auto; border-radius: 10px; container-type: inline-size; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), filter .3s; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .35)); }
.st-folder img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; user-select: none; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); transform-origin: 50% 100%; }
.st-folder:hover, .st-folder.is-selected { transform: translateY(-10px); filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .45)) brightness(1.06); z-index: 2; }
.st-folder:hover img { transform: scale(1.03) rotate(-.8deg); }
.st-folder:active { transform: translateY(-4px) scale(.98); }
.st-folder:focus-visible { outline: 2px solid var(--st-yellow); outline-offset: 4px; }
.st-folder-label { position: absolute; left: 7%; right: 7%; bottom: 8%; display: flex; align-items: center; gap: 6cqi; padding: 5cqi 6cqi; border-radius: 6cqi; background: rgba(9, 14, 11, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .12); transition: background .25s, border-color .25s; }
.st-folder-label > i { width: max(7px, 6cqi); height: max(7px, 6cqi); border-radius: 50%; background: var(--dot); flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.st-folder-label > span { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.st-folder-label b { font-size: clamp(10px, 7.9cqi, 16px); font-weight: 650; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-folder-label small { font-size: clamp(9px, 6.6cqi, 13px); line-height: 1.15; color: #d7dccf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 132px) {
  .st-folder-label { gap: 5px; padding: 6px 7px; }
  .st-folder-label b { white-space: normal; font-size: 10px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .st-folder-label small { display: none; }
}
.st-folder:hover .st-folder-label { background: rgba(9, 14, 11, .8); border-color: rgba(255, 255, 255, .28); }
.st-folder.is-selected .st-folder-label { background: var(--st-yellow); border-color: var(--st-yellow); }
.st-folder.is-selected .st-folder-label :is(b, small) { color: var(--st-ink); }

/* ---------------------------------------------------------------------- */
/* Small screens: one scrolling column over the photo                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 1099px), (max-height: 639px) {
  .st-scene { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; transform: none; }
  .st-photo { background-size: cover; background-position: 38% 0; }
  .st-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(6, 26, 17, .35), rgba(4, 20, 12, .78) 70%); }
  .st-spot, .st-secret { display: none; }
  .st-wall { position: relative; top: auto; left: auto; right: auto; height: auto; display: flex; flex-direction: column; gap: 26px; padding: 18px 20px 8px; transform: none; container: none; }
  .st-hero { gap: 14px; }
  .st-hero h1 { font-size: clamp(44px, 10.5vw, 84px); }
  .st-lede { font-size: 15px; }
  .st-stats dd { font-size: 24px; }
  .st-widgets { --n: 3; display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 290px; justify-content: start; max-height: none; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 20px 20px; margin: 0 -20px; scrollbar-width: none; }
  .st-widgets::-webkit-scrollbar { display: none; }
  .st-card { height: 300px; scroll-snap-align: start; }
  .st-now, .st-facts { display: flex; }
  .st-shelf { position: relative; top: auto; left: auto; right: auto; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 14px; padding: 18px 20px 30px; transform: none; }
  .st-folder { width: 100%; height: auto; aspect-ratio: 384 / 360; }
  .st-folder::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -10px; height: 10px; border-radius: 2px; background: linear-gradient(#5b4633, #2d2218); box-shadow: 0 8px 14px rgba(0, 0, 0, .45); z-index: -1; }
}
@media (max-width: 600px) {
  .st-wall { padding: 26px 16px 4px; gap: 22px; }
  .st-kicker { font-size: 10px; letter-spacing: .2em; }
  .st-btn { height: 44px; padding: 0 16px; font-size: 13.5px; }
  .st-widgets { grid-auto-columns: 78%; padding: 4px 16px 16px; margin: 0 -16px; }
  .st-shelf { gap: 26px 10px; padding: 14px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-scene, .st-shelf, .st-wall { transform: none !important; }
}

/* Brand formula dialog */
.st-formula { display: flex; flex-direction: column; gap: 14px; }
.st-formula-eq { margin: 0; font: 700 clamp(22px, 3.2vw, 32px)/1.1 var(--font-sans); letter-spacing: -.02em; }
.st-formula-eq b { color: var(--room-accent); }
.st-formula-rules { margin: 0; font: 600 11px var(--font-mono); letter-spacing: .1em; color: var(--room-muted); }
.st-formula ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-formula li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--room-line); background: var(--room-soft); }
.st-formula li > span { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--room-accent); color: var(--room-bg); font: 800 16px var(--font-sans); }
.st-formula li div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-formula li b { font-size: 14px; }
.st-formula li small { font-size: 12px; line-height: 1.4; color: var(--room-muted); }
@media (max-width: 560px) { .st-formula ul { grid-template-columns: 1fr; } }

/* Daily inspiration (Pinterest) */
.st-insp { background: #0c1a12; border: 1px solid rgba(255, 255, 255, .14); color: #fff4df; }
.pin-stage { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--pin-color, #0c1a12); }
.pin-bg { position: absolute; inset: -18%; background: var(--pin-still) center / cover no-repeat; filter: blur(22px) saturate(1.15) brightness(.62); transform: scale(1.05); transition: opacity .4s; }
.pin-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.st-insp .pin-media { inset: 54px 10px 10px; width: calc(100% - 20px); height: calc(100% - 64px); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)); }
.st-insp:hover .pin-media { transform: scale(1.03); }
.st-insp.is-swapping .pin-media { opacity: .15; }
.st-insp header, .st-insp footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: clamp(10px, 6%, 16px); pointer-events: none; }
.st-insp header { align-items: start; background: linear-gradient(rgba(6, 14, 10, .62), transparent); }
.st-insp footer { margin-top: auto; background: linear-gradient(transparent, rgba(6, 14, 10, .78)); padding-top: 28px; }
.st-insp :is(button, a) { pointer-events: auto; }
.st-card header b { font-size: clamp(11px, .95cqw, 13px); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; max-width: 12ch; }
.st-insp .st-ring { background: rgba(255, 255, 255, .14); color: #fff; }
.st-insp .st-ring circle { stroke: rgba(255, 255, 255, .25); }
.st-insp [data-pin-title] { font-size: 11px; line-height: 1.25; color: #e8e2d2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; }
/* Colour of the day */
.st-cotd .st-swatch .pin-stage { display: none; }
.st-cotd .st-swatch.has-img .pin-stage { display: block; border-radius: inherit; }
.st-cotd .st-swatch.has-img .pin-media { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.st-cotd .st-swatch.has-img::before { display: none; }
.st-cotd .st-swatch-hex, .st-cotd .st-swatch-tip { z-index: 1; }
.st-cotd .st-swatch.has-img .st-swatch-hex:empty { display: none; }
.st-cotd .st-swatch.has-img .st-swatch-hex { color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 6px; border-radius: 4px; }
.st-cotd-strip { display: flex; gap: 4px; min-height: 0; }
.st-cotd-strip:empty { display: none; }
.st-cotd-strip button { position: relative; flex: 1; height: 26px; padding: 0; border: 0; border-radius: 3px; background: var(--c); cursor: copy !important; transition: transform .2s var(--ease-out), flex .3s; }
.st-cotd-strip button span { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 4px; padding: 3px 6px; border-radius: 4px; background: #10130f; color: #fff; font: 600 10px var(--font-mono); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; }
.st-cotd-strip button:hover { flex: 1.6; }
.st-cotd-strip button:hover span { opacity: 1; translate: -50% 0; }
.st-cotd footer { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.st-cotd footer b { min-width: 0; }
.st-cotd footer b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-cotd .st-ring circle { stroke: rgba(16, 19, 15, .12); }
.st-night .st-insp, .st-night .st-cotd { filter: brightness(.82) sepia(.18); }