/* Optimize Studio, register Werkplek (optimize-design canon, section 2): night only, Moon Ink with its wash to teal,
   text in Pearl Mist at .86 / .58 / .38, opaque ink surfaces, Pearl lines, cards 14 and inner cards 12, one Pearl
   primary pill with night text, rims instead of shadows. */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/studio/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/studio/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/studio/fonts/Poppins-SemiBold.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --ink: #0a0f17;
  --wash: #132a38;
  --pearl: #f4f1ea;
  --text: rgba(244, 241, 234, 0.86);
  --text-2: rgba(244, 241, 234, 0.58);
  --text-3: rgba(244, 241, 234, 0.38);
  --card: #0e1520;
  --rim: rgba(244, 241, 234, 0.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: linear-gradient(180deg, var(--wash) 0, var(--ink) 480px) var(--ink);
  color: var(--text);
  font: 400 15px/1.5 "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: 1440px;
  margin: 0 auto;
  padding-block: 32px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand { display: block; margin: 0 0 8px; color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; }
h1 { margin: 0 0 24px; font-size: 28px; font-weight: 600; line-height: 1.2; text-wrap: balance; }
h2 { margin: 40px 0 12px; color: var(--text-2); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.lead, .note { color: var(--text-2); }
.note { min-height: 1.5em; }
.button { display: inline-block; padding: 12px 24px; border-radius: 999px; background: var(--pearl); color: var(--ink); font-weight: 600; text-decoration: none; }
.login { max-width: 420px; padding-top: 18vh; }
.slides { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.slide { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.frame {
  width: var(--slide-w, 320px);
  height: calc(var(--slide-w, 320px) * 1.25);
  overflow: hidden;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rim);
  transition: box-shadow 200ms ease;
}
.frame iframe { display: block; width: 1080px; height: 1350px; border: 0; transform: scale(var(--scale, 0.2963)); transform-origin: 0 0; pointer-events: none; }
.slide.busy .frame { box-shadow: 0 0 0 2px var(--text); }
.slide figcaption { margin-top: 8px; color: var(--text-3); font-size: 13px; }
.slide.busy figcaption { color: var(--text); }
.log, .boards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: 14px; }
.boards li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--rim); }
.boards a { min-width: 0; color: var(--text); font-weight: 500; text-decoration: none; }
.boards span { color: var(--text-3); white-space: nowrap; }