/* BiomeDrive · Studio page: the template gallery, the colour lab and the template viewer.
   Loaded after style.css and pages.css, so it shares their tokens and the black page. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st b { font-weight: 600; color: var(--text); }
kbd { font-family: var(--f-mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.12); margin-left: 4px; }

/* ---------- intro with a drifting wall of templates ---------- */
.st-hero { position: relative; min-height: min(100svh, 980px); padding-bottom: clamp(60px, 10vh, 120px); }
.st.pg { padding-top: 0; }
.st-head { position: relative; z-index: 2; padding-top: calc(var(--nav) + clamp(56px, 11vh, 130px)); max-width: min(760px, 58vw); box-sizing: content-box; }
.st-head .pg-h { max-width: 12ch; font-size: clamp(46px, 7.2vw, 140px); }
.st-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.st-facts { display: flex; flex-wrap: wrap; gap: 18px 44px; margin-top: clamp(40px, 7vh, 80px); }
.st-facts dt { font-family: var(--f-display); font-weight: 850; font-variation-settings: "wdth" 116; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; letter-spacing: -.04em; }
.st-facts dd { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.st-wall { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 56vw; overflow: hidden; perspective: 1600px; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%) intersect, linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent); }
.st-wall-in { position: absolute; inset: -30% -10% -30% 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; transform: rotateX(18deg) rotateZ(-14deg) translateZ(-40px); transform-origin: 50% 50%; }
.wcol { display: flex; flex-direction: column; gap: 18px; will-change: transform; }
.wcol .wt { flex: none; aspect-ratio: 3 / 5; border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.wcol .wt img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .82; }

/* ---------- filters ---------- */
.st-tpl { padding: clamp(60px, 10vh, 120px) var(--gut) 0; }
.st-tpl-top, .st-lab-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 24px 60px; align-items: end; }
.st-tpl-top .pg-lede, .st-lab-top .pg-lede { margin: 0; }
.st-filters { position: sticky; top: var(--nav); z-index: 20; margin: clamp(36px, 6vh, 64px) calc(var(--gut) * -1) 0; padding: 14px var(--gut); background: rgba(11, 11, 11, .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); transition: color .25s, background-color .3s var(--ease), box-shadow .25s, transform .16s var(--ease); }
.chips button:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(241,240,236,.4); }
.chips button:active { transform: scale(.96); }
.chips button[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.chips button small { margin-left: 6px; font-family: var(--f-mono); font-size: 11px; opacity: .6; }
.chips.sm button { height: 34px; padding: 0 13px; font-size: 13.5px; }
.chips.xs button { height: 30px; padding: 0 11px; font-size: 12.5px; }
.st-f2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sel { position: relative; display: inline-block; }
.sel select { height: 34px; padding: 0 34px 0 14px; border-radius: 999px; border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sel.full, .sel.full select { width: 100%; }
.sel option { background: #151515; }
.st-count { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--text-2); }

/* ---------- template cards ---------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(26px, 3vw, 44px) clamp(16px, 2vw, 28px); padding: clamp(30px, 5vh, 56px) 0 0; }
.tc { display: grid; gap: 14px; text-align: left; color: var(--text); cursor: pointer; opacity: 0; transform: translateY(18px); animation: tcIn .7s var(--ease) forwards; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes tcIn { to { opacity: 1; transform: none; } }
.calm .tc { animation: none; opacity: 1; transform: none; }
.tc-shot { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--c-bg, var(--surface)); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .35s var(--ease), transform .5s var(--ease); }
.tc-shot img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: transform 1.1s cubic-bezier(.45, .05, .2, 1); }
.tc:hover .tc-shot img, .tc:focus-visible .tc-shot img { transform: translateY(calc(var(--scroll, 0px) * -1)); transition-duration: var(--sdur, 4s); }
.tc:hover .tc-shot { box-shadow: 0 0 0 1px rgba(241,240,236,.5); transform: translateY(-4px); }
.tc:active .tc-shot { transform: scale(.985); transition-duration: .16s; }
.tc-shot .ph-fill { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 34px; color: var(--c-ink); background: var(--c-bg); }
.tc-open { position: absolute; right: 12px; bottom: 12px; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.tc:hover .tc-open, .tc:focus-visible .tc-open { opacity: 1; transform: none; }
.tc-fx { position: absolute; left: 12px; top: 12px; z-index: 2; height: 26px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(11, 11, 11, .78); color: var(--text); font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tc-fx::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9dff6b; box-shadow: 0 0 0 0 rgba(157,255,107,.6); animation: fxPulse 2s ease-out infinite; }
@keyframes fxPulse { 70%, 100% { box-shadow: 0 0 0 7px rgba(157,255,107,0); } }
.chips .fx-chip { box-shadow: inset 0 0 0 1px rgba(157,255,107,.45); color: var(--text); }
.chips .fx-chip[aria-pressed="true"] { background: #9dff6b; color: #0b0b0b; box-shadow: none; }
.calm .tc-fx::before { animation: none; }
.tc-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tc-meta b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.tc-meta span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.tc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: -6px; }
.sw5 { display: inline-flex; border-radius: 99px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.sw5 i { width: 16px; height: 16px; }
.tc-moods { font-size: 12.5px; color: var(--text-2); }
.st-empty { padding: 60px 0; color: var(--text-2); }

/* ---------- colour lab ---------- */
.st-lab { padding: clamp(110px, 16vh, 190px) var(--gut) 0; }
.lab-sw { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(36px, 6vh, 60px); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.sw { position: relative; display: grid; align-content: space-between; gap: 30px; min-height: clamp(150px, 20vh, 220px); padding: 16px; background: var(--c); color: var(--on); text-align: left; transition: background-color .5s var(--ease), color .5s var(--ease); cursor: pointer; }
.sw .role { font-size: 13px; font-weight: 600; }
.sw .hex { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; }
.sw input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.sw .lock { position: relative; z-index: 2; justify-self: start; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px currentColor; opacity: .55; transition: opacity .25s, background-color .25s; }
.sw .lock:hover { opacity: 1; }
.sw .lock[aria-pressed="true"] { opacity: 1; background: var(--on); color: var(--c); box-shadow: none; }
.sw .lock svg { width: 15px; height: 15px; }
.sw .top { display: flex; justify-content: space-between; align-items: start; gap: 8px; position: relative; z-index: 2; pointer-events: none; }
.sw .top .lock { pointer-events: auto; }
.sw.flash { animation: flash .6s var(--ease); }
@keyframes flash { from { filter: brightness(1.25); } to { filter: none; } }
.lab-grid { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(28px, 4vh, 44px); align-items: start; }
.lab-ctrl { display: grid; gap: 14px; align-content: start; }
.lab-k { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.lab-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-btns .btn { flex: 1 1 auto; justify-content: center; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.full { width: 100%; justify-content: center; }
.lab-checks { display: grid; gap: 8px; font-size: 14px; }
.lab-checks li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--surface); }
.lab-checks b { font-family: var(--f-mono); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 99px; background: #1f3d2b; color: #b9f3cc; }
.lab-checks b.no { background: #4a1f1f; color: #ffc2c2; }
.lab-prev { position: sticky; top: calc(var(--nav) + 20px); }
.lab-frame, .vw-frame { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0,0,0,.9); }
.lab-frame { aspect-ratio: 16 / 10.4; }
.lab-frame iframe, .vw-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.lab-lib { margin-top: clamp(50px, 8vh, 90px); display: grid; gap: 14px; }
.pal-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; }

/* palette chips (lab library and viewer) */
.pal { display: grid; gap: 8px; text-align: left; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background-color .25s, transform .16s var(--ease); }
.pal:hover { box-shadow: inset 0 0 0 1px rgba(241,240,236,.45); }
.pal:active { transform: scale(.97); }
.pal[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text); background: var(--surface); }
.pal-sw { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; height: 38px; border-radius: 6px; overflow: hidden; }
.pal-sw i { display: block; }
.pal-n { font-size: 13px; line-height: 1.25; color: var(--text-2); }
.pal[aria-pressed="true"] .pal-n { color: var(--text); }

/* ---------- viewer ---------- */
.vw { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #070707; color: var(--text); overflow: hidden; }
.vw::backdrop { background: rgba(0,0,0,.6); }
.vw[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: vwIn .45s var(--ease); }
@keyframes vwIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.vw.out { animation: vwOut .28s var(--ease) forwards; }
@keyframes vwOut { to { opacity: 0; transform: scale(.985); } }
.vw-bar { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.vw-x { height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; transition: box-shadow .25s, transform .16s var(--ease); }
.vw-x:hover { box-shadow: inset 0 0 0 1px rgba(241,240,236,.5); }
.vw-x:active { transform: scale(.96); }
.vw-t { display: grid; line-height: 1.2; min-width: 0; }
.vw-t b { font-size: 16px; font-weight: 600; }
.vw-t span { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-2); transition: background-color .3s var(--ease), color .25s; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--text); color: var(--bg); }
#vwDev { margin-left: auto; }
.vw-step { display: flex; gap: 4px; }
.vw-step button { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, transform .16s var(--ease); }
.vw-step button:hover { box-shadow: inset 0 0 0 1px rgba(241,240,236,.5); }
.vw-step button:active { transform: scale(.92); }
.vw-open { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.vw-open:hover { color: var(--text); }
.vw-go { height: 42px; padding: 0 18px; font-size: 14.5px; }
.vw-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.vw-stage { position: relative; display: grid; place-items: center; padding: 22px; min-height: 0; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, #151515, #070707); }
.vw-frame { transition: width .55s var(--ease), height .55s var(--ease), border-radius .4s; }
.vw-frame.phone { border-radius: 30px; box-shadow: 0 0 0 10px #1b1b1b, 0 0 0 11px var(--line), 0 40px 80px -30px #000; }
.vw-frame.tab { border-radius: 18px; box-shadow: 0 0 0 10px #1b1b1b, 0 0 0 11px var(--line), 0 40px 80px -30px #000; }
.vw-frame .loading { position: absolute; inset: 0; display: grid; place-items: center; background: #111; color: var(--text-2); font-size: 14px; transition: opacity .4s; }
.vw-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--line); padding: 16px 16px 40px; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; }
.vw-side .tabs { width: 100%; }
.vw-side .tabs button { flex: 1; }
.vw-pane { display: grid; gap: 12px; }
.pal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.font-list { display: grid; gap: 8px; }
.fnt { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background-color .25s, transform .16s var(--ease); }
.fnt:hover { box-shadow: inset 0 0 0 1px rgba(241,240,236,.45); }
.fnt:active { transform: scale(.98); }
.fnt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text); background: var(--surface); }
.fnt .aa { font-size: 34px; line-height: 1; white-space: nowrap; overflow: hidden; }
.fnt b { display: block; font-size: 13.5px; font-weight: 600; }
.fnt small { font-size: 12px; color: var(--text-2); }
.st-credit { padding: 14px var(--gut) 0; font-size: 12.5px; color: var(--text-2); }
.st-credit a { text-decoration: underline; text-underline-offset: 3px; }
html.vw-on { overflow: hidden; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .vw-open { display: none; }
  .vw-main { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 900px) {
  .st-head { max-width: none; }
  .st-wall { width: 100%; opacity: .32; }
  .st-tpl-top, .st-lab-top { grid-template-columns: minmax(0, 1fr); }
  .lab-sw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-prev { position: relative; top: 0; order: -1; }
  .vw-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .vw-side { border-left: 0; border-top: 1px solid var(--line); max-height: 38vh; }
  #vwDev button[data-dev="desk"] { display: none; }
  .vw-t span { display: none; }
}
@media (max-width: 640px) {
  .st-filters { top: var(--nav); }
  .st-f2 .st-count { margin-left: 0; width: 100%; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-sw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw { min-height: 112px; gap: 14px; }
  .vw-bar { gap: 8px; padding: 0 10px; height: 58px; }
  .vw-x .lg, #vwDev, .vw-step { display: none; }
  .vw-go { margin-left: auto; padding: 0 14px; font-size: 13.5px; }
  .vw-stage { padding: 12px; }
  .pal-list { grid-template-columns: 1fr 1fr; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vw[open], .vw.out { animation: none; }
}