/* Studio design system tokens. Source of truth: design/studio.html (approved 17 Oct 2026).
   Components read these names only, never raw values. Dark mode swaps values, not names.
   Theme: data-t="light" | "dark" on <html> (set from the OS preference, overridable). Reduce motion: data-rm="on" or the OS setting. */
:root{
  /* type */
  --f-ui:"Bricolage Grotesque Variable","Bricolage Grotesque",ui-rounded,system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
  --t-display:600 40px/1.05 var(--f-ui);  --tr-display:-.035em;
  --t-h1:600 30px/1.12 var(--f-ui);       --tr-h1:-.03em;
  --t-h2:600 22px/1.2 var(--f-ui);        --tr-h2:-.025em;
  --t-h3:600 17px/1.3 var(--f-ui);        --tr-h3:-.015em;
  --t-body:400 14px/1.55 var(--f-ui);
  --t-sm:400 13px/1.5 var(--f-ui);
  --t-cap:400 12px/1.45 var(--f-ui);
  --t-micro:500 10.5px/1.3 var(--f-mono); --tr-micro:.07em;
  /* space (4-pt) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;--s-9:56px;
  /* radii */
  --r-xs:6px;--r-sm:11px;--r-md:16px;--r-lg:22px;--r-pill:999px;
  /* control heights */
  --h-sm:28px;--h-md:34px;--h-lg:42px;
  /* motion */
  --d-1:120ms;--d-2:200ms;--d-3:320ms;--d-4:600ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --blur:18px;
}
:root,:root[data-t=light]{
  --bg:#f3eee7;
  --s1:rgba(255,255,255,.74);    /* glass card */
  --s1-solid:#fbf8f4;            /* when glass is not possible (menus over text) */
  --s2:rgba(255,255,255,.5);     /* inset, hover */
  --s3:rgba(60,35,10,.055);      /* pressed, track */
  --line:rgba(60,35,10,.085);--line2:rgba(60,35,10,.16);
  --tx:#1e1712;--tx2:#6e6155;--tx3:#8a7d70;           /* tx3 = meta only, never the only carrier of meaning */
  --ac:#ff5b37;                  /* accent: dots, meters, glows, focus */
  --ac-fill:#d23c18;--ac-fill-hi:#e4491f;--ac-ink:#fff;  /* primary button (white text 4.7:1) */
  --ac-tx:#b8321a;--ac-soft:rgba(255,91,55,.11);
  --ok:#1a7a50;--ok-soft:rgba(34,160,107,.12);
  --warn:#9a5c00;--warn-soft:rgba(217,138,0,.14);
  --bad:#c2343a;--bad-soft:rgba(229,72,77,.11);
  --ring:0 0 0 3px rgba(255,91,55,.28);
  --glow:inset 0 1px 0 rgba(255,255,255,.9);
  --e-1:0 1px 2px rgba(80,40,0,.05),0 24px 48px -28px rgba(120,60,10,.25);
  --e-2:0 2px 6px rgba(80,40,0,.08),0 24px 60px -20px rgba(120,60,10,.35);
  --e-3:0 4px 12px rgba(80,40,0,.1),0 40px 100px -30px rgba(80,40,0,.45);
  --scrim:rgba(40,25,10,.28);
  --og:rgba(251,248,244,.86);--og-line:rgba(60,35,10,.12);   /* glass over the 3D office: a bit more opaque than page cards */
  --app-bg:radial-gradient(700px 420px at 12% 0%,#ffd9c4 0,transparent 60%),radial-gradient(800px 500px at 95% 10%,#e4dcff 0,transparent 60%),radial-gradient(900px 600px at 50% 110%,#d8f0e4 0,transparent 60%),var(--bg);
  --floor:#e9d8c3;--wall:#f6ece0;
}
:root[data-t=dark]{
  --bg:#120f0d;
  --s1:rgba(40,32,27,.68);--s1-solid:#221c18;--s2:rgba(255,255,255,.045);--s3:rgba(255,255,255,.07);
  --line:rgba(255,235,215,.08);--line2:rgba(255,235,215,.15);
  --tx:#f6ede4;--tx2:#b3a596;--tx3:#8f8274;
  --ac:#ff7550;--ac-fill:#ff7550;--ac-fill-hi:#ff8a68;--ac-ink:#1c0904;--ac-tx:#ff8a68;--ac-soft:rgba(255,117,80,.14);
  --ok:#4fd197;--ok-soft:rgba(79,209,151,.13);--warn:#f2b54b;--warn-soft:rgba(242,181,75,.13);--bad:#ff7a7f;--bad-soft:rgba(255,122,127,.13);
  --ring:0 0 0 3px rgba(255,117,80,.35);
  --glow:inset 0 1px 0 rgba(255,255,255,.06);
  --e-1:0 24px 48px -28px rgba(0,0,0,.6);--e-2:0 24px 60px -20px rgba(0,0,0,.7);--e-3:0 40px 100px -30px rgba(0,0,0,.85);
  --scrim:rgba(0,0,0,.5);
  --og:rgba(30,24,20,.8);--og-line:rgba(255,235,215,.13);
  --app-bg:radial-gradient(700px 420px at 12% 0%,rgba(255,120,70,.16) 0,transparent 60%),radial-gradient(800px 500px at 95% 10%,rgba(140,110,255,.14) 0,transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(60,180,130,.08) 0,transparent 60%),var(--bg);
  --floor:#2a211a;--wall:#1d1814;
}
/* No explicit choice: follow the OS. */
@media (prefers-color-scheme:dark){:root:not([data-t=light]){
  --bg:#120f0d;
  --s1:rgba(40,32,27,.68);--s1-solid:#221c18;--s2:rgba(255,255,255,.045);--s3:rgba(255,255,255,.07);
  --line:rgba(255,235,215,.08);--line2:rgba(255,235,215,.15);
  --tx:#f6ede4;--tx2:#b3a596;--tx3:#8f8274;
  --ac:#ff7550;--ac-fill:#ff7550;--ac-fill-hi:#ff8a68;--ac-ink:#1c0904;--ac-tx:#ff8a68;--ac-soft:rgba(255,117,80,.14);
  --ok:#4fd197;--ok-soft:rgba(79,209,151,.13);--warn:#f2b54b;--warn-soft:rgba(242,181,75,.13);--bad:#ff7a7f;--bad-soft:rgba(255,122,127,.13);
  --ring:0 0 0 3px rgba(255,117,80,.35);
  --glow:inset 0 1px 0 rgba(255,255,255,.06);
  --e-1:0 24px 48px -28px rgba(0,0,0,.6);--e-2:0 24px 60px -20px rgba(0,0,0,.7);--e-3:0 40px 100px -30px rgba(0,0,0,.85);
  --scrim:rgba(0,0,0,.5);
  --og:rgba(30,24,20,.8);--og-line:rgba(255,235,215,.13);
  --app-bg:radial-gradient(700px 420px at 12% 0%,rgba(255,120,70,.16) 0,transparent 60%),radial-gradient(800px 500px at 95% 10%,rgba(140,110,255,.14) 0,transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(60,180,130,.08) 0,transparent 60%),var(--bg);
  --floor:#2a211a;--wall:#1d1814;
}}
:root[data-rm=on]{--d-1:0ms;--d-2:0ms;--d-3:0ms;--d-4:0ms}
@media (prefers-reduced-motion:reduce){:root{--d-1:0ms;--d-2:0ms;--d-3:0ms;--d-4:0ms}}

@font-face{font-family:"Bricolage Grotesque";src:url("/welcome/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
/* The sign-in page (board design/login.html). Plain HTML from the server, no JavaScript; the Studio tokens come first in this file. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none !important}
body{font:var(--t-body);color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.f-w{background:#8b5cf6}.f-s{background:#14b8a6}.f-d{background:#3b82f6}.dot-a{background:#f59e0b}.dot-g{background:#4ade80}
/* ---------- the sign-in page ---------- */
.si{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,1fr);background:var(--app-bg);overflow:auto}

/* the office side: a live-looking picture of the place you are about to enter */
.scene{position:relative;margin:14px 0 14px 14px;border-radius:26px;overflow:hidden;background:#1a1410;isolation:isolate}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%;transform:scale(1.02);animation:drift 40s var(--ease-io) infinite alternate}
.scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 70% 10%,transparent 40%,rgba(20,12,6,.35)),linear-gradient(180deg,rgba(20,12,6,.15),transparent 30%,transparent 55%,rgba(20,12,6,.72))}
@keyframes drift{to{transform:scale(1.09) translate(-1.5%,-1%)}}
.glass{position:absolute;z-index:2;display:flex;gap:10px;align-items:center;padding:10px 14px 10px 10px;border-radius:16px;color:#fff;
  background:rgba(30,22,16,.46);border:1px solid rgba(255,240,225,.16);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:float 7s var(--ease-io) infinite alternate}
.glass b{display:block;font:600 13px var(--f-ui);letter-spacing:-.01em}
.glass small{display:block;font:400 11.5px var(--f-ui);color:rgba(255,240,225,.72)}
.face{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font:600 13px var(--f-ui);flex:none;position:relative}
.face i{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid #2a1f18}
.g1{top:9%;left:7%}.g2{top:31%;right:7%;animation-delay:-2.5s}.g3{bottom:24%;left:9%;animation-delay:-4.5s}
@keyframes float{to{transform:translateY(-8px)}}
.ask{position:absolute;z-index:2;right:7%;bottom:24%;width:250px;padding:12px 14px;border-radius:18px;background:rgba(251,248,244,.94);color:#1e1712;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.55);animation:float 8s var(--ease-io) infinite alternate;animation-delay:-1s}
.ask .k{font:500 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#b8321a;display:flex;gap:6px;align-items:center}
.ask .k::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5b37;box-shadow:0 0 0 3px rgba(255,91,55,.2)}
.ask b{display:block;margin:7px 0 9px;font:600 13.5px/1.3 var(--f-ui)}
.ask .row{display:flex;gap:6px}
.chip{height:26px;padding:0 11px;border-radius:999px;display:inline-grid;place-items:center;font:600 12px var(--f-ui);background:rgba(60,35,10,.07);color:#1e1712}
.chip.yes{background:linear-gradient(180deg,#e4491f,#d23c18);color:#fff}
.cap{position:absolute;z-index:2;left:28px;right:28px;bottom:24px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cap p{margin:0;font:500 22px/1.25 var(--f-ui);letter-spacing:-.025em;max-width:24ch;text-wrap:balance}
.cap small{font:500 10.5px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,240,225,.7);white-space:nowrap;display:flex;gap:7px;align-items:center}
.cap small i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}

/* the door side */
.door{display:grid;grid-template-rows:auto 1fr auto;padding:28px clamp(24px,5vw,64px);min-width:0}
.top{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:9px;align-items:center;font:600 16px var(--f-ui);letter-spacing:-.02em;color:var(--tx);text-decoration:none}
.logo{display:block;width:auto;height:31px}
.top a.lk{font:500 13px var(--f-ui);color:var(--tx2);text-decoration:none}
.top a.lk:hover{color:var(--tx)}
.mid{align-self:center;display:grid;gap:22px;max-width:400px;width:100%;justify-self:center;padding:32px 0}
.eyebrow{font:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--tx3);display:flex;gap:8px;align-items:center}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--ac)}
h1.h2{margin:0;font:600 44px/1.02 var(--f-ui);letter-spacing:-.04em;text-wrap:balance}
h1.h2 span{color:var(--tx3)}
.lead{margin:0;font:400 15px/1.55 var(--f-ui);color:var(--tx2);text-wrap:pretty}
.gbtn{all:unset;box-sizing:border-box;cursor:pointer;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;
  font:600 15px var(--f-ui);color:#1f1f1f;background:#fff;border:1px solid rgba(60,35,10,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(80,40,0,.06),0 18px 36px -22px rgba(120,60,10,.45);transition:transform var(--d-2) var(--ease-out),box-shadow var(--d-2)}
.gbtn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 10px rgba(80,40,0,.08),0 24px 44px -22px rgba(120,60,10,.55)}
.gbtn:focus-visible{box-shadow:var(--ring)}
.gbtn svg{width:20px;height:20px}
.pbtn{all:unset;box-sizing:border-box;cursor:pointer;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:10px;font:600 15px var(--f-ui);
  color:var(--ac-ink);background:linear-gradient(180deg,var(--ac-fill-hi),var(--ac-fill));box-shadow:0 14px 30px -14px rgba(210,60,24,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.hint{margin:-10px 0 0;text-align:center;font:var(--t-cap);color:var(--tx3)}
.hint b{color:var(--tx2);font-weight:500}
.err{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--bad-soft);color:var(--bad);font:var(--t-sm)}
.err b{display:block;font-weight:600}
.err span{color:var(--tx2)}
.off{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--warn-soft);color:var(--warn);font:var(--t-sm)}
.off span{color:var(--tx2)}
.or{display:flex;align-items:center;gap:12px;font:var(--t-cap);color:var(--tx3)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
.req{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--s1);border:1px solid var(--line);box-shadow:var(--glow);
  text-decoration:none;color:var(--tx)}
.req b{display:block;font:600 14px var(--f-ui)}
.req small{font:var(--t-cap);color:var(--tx2)}
.req .arr{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--s3);flex:none;transition:transform var(--d-2) var(--ease-out)}
.req:hover .arr{transform:translateX(3px)}
.foot{display:flex;gap:10px;align-items:center;justify-content:center;font:var(--t-cap);color:var(--tx3);text-align:center}
.foot svg{flex:none}

/* dark: the picture stays, the door goes night */
@media (prefers-color-scheme:dark){:root:not([data-t=light]) .gbtn{background:#1f1915;color:#f3ebe3;border-color:rgba(255,240,225,.14);box-shadow:0 18px 36px -22px rgba(0,0,0,.8)}}
@media (prefers-color-scheme:dark){:root:not([data-t=light]) .ask{background:rgba(34,28,24,.94);color:#f3ebe3}}
@media (prefers-color-scheme:dark){:root:not([data-t=light]) .chip:not(.yes){background:rgba(255,255,255,.08);color:#f3ebe3}}

@media (prefers-reduced-motion:reduce){.scene img,.glass,.ask,.cap small i{animation:none}}

/* the phone shows the brand above the greeting (the top bar is hidden there) */
.brand.ph{display:none}
/* phone: the office becomes a window at the top, the door below */
@media (max-width:820px){
  h1.h2{font-size:34px}
  .si{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .scene{margin:10px 10px 0;height:300px;border-radius:30px}
  .g1{top:auto;bottom:86px;left:14px}.g2,.g3{display:none}
  .ask{right:14px;left:auto;bottom:auto;top:16px;width:200px;padding:10px 12px}
  .ask b{font-size:12.5px;margin:6px 0 7px}
  .cap{left:18px;right:18px;bottom:16px}
  .cap p{font-size:17px}
  .cap small{display:none}
  .door{padding:20px 22px 26px}
  .door .top{display:none}
  .mid{padding:6px 0 18px;gap:18px}
  .lead{font-size:14.5px}
  .door .brand.ph{display:flex}
}

/* the knock page (guests): a small form on the sign-in layout */
.kf{display:grid;gap:14px}
.kf label{display:grid;gap:6px;font:500 13px var(--f-ui)}
.kf small{color:var(--tx3);font:var(--t-cap)}
.kf input{width:100%;box-sizing:border-box;min-width:0;font:var(--t-body);font-size:16px;color:var(--tx);background:var(--s2);border:1px solid var(--line2);border-radius:14px;padding:12px 14px}
.kf input:focus-visible{outline:none;box-shadow:var(--ring);border-color:transparent}
.kf .pbtn{border:0}
.wait{display:grid;gap:10px;padding:16px 18px;border-radius:16px;background:var(--s2);border:1px solid var(--line2)}
.wait b{font:600 15px var(--f-ui)}
.wait span{font:var(--t-sm);color:var(--tx2)}