/* /start: connect your accounts, and the team starts (Nov 13 2026).
   ==================================================================================
   THE ROOM A CLIENT WORKS IN. The page wears the look of the chat a client signs in to (room-theme.css):
   a header with the Careful Machine's photograph pinned to it, the ground, paper notes with the photograph
   pinned to the corner, coral for the one thing to press. A stranger who signs in a week later should be
   somewhere they have already been.

   WHAT IS HERE is four things in order: hello, the account, the nine connections, and the close. No quiz,
   no job cards, no picker.

   NOTHING ON THIS PAGE MOVES UNLESS SOMETHING HAPPENED. The photographs stand still. Nothing pulses. With
   motion reduced, nothing moves at all.
   ================================================================================== */
:root{
  --t-entrance:520ms;
  --bg:var(--ground);--bg-deep:var(--sunk);
  --line:rgba(255, 205, 145, 0.18);--line-soft:rgba(255, 205, 145, 0.10);
  --cream:var(--ink);--cream-soft:rgba(248, 236, 217, 0.82);--cream-faint:rgba(248, 236, 217, 0.62);
  --coral:var(--beam);--coral-deep:#e8483c;--amber:var(--signal);--gold:#ffc978;
  --rust-ink:#9a4a22;--paper:#f6e7cd;--paper-2:#efdcba;--paper-ink:#3a2412;
  --paper-ink-soft:rgba(58, 36, 18, 0.78);--field-ink:var(--paper-ink);--label-ink:#4a2d13;
  --font-display:var(--sans);--font-body:var(--sans);
  --gutter:46px;       /* the room's: the margin a pinned photograph hangs in */
  --room-line:color-mix(in srgb,var(--signal) 22%,transparent);
  --rust:color-mix(in srgb,var(--rust-ink) 72%,var(--paper-ink));
  --corner:92px;       /* his photograph in the corner of the paper: its width... */
  --pin-right:20px;    /* ...and how far from the paper's edge, so every heading can keep clear of exactly that much */
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;font-family:var(--font-body);
background:
  radial-gradient(900px 420px at 82% -140px,color-mix(in srgb,var(--signal) 13%,transparent),transparent 62%),
  radial-gradient(700px 380px at -100px 40%,color-mix(in srgb,var(--beam) 7%,transparent),transparent 62%),
  var(--sunk);
color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
.world{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.6;
background:url("/world.svg") center / cover no-repeat}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.paper :focus-visible,.note :focus-visible{outline-color:var(--paper-ink)}
[tabindex="-1"]:focus{outline:none}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,106,85,.22)}
button{font:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 20px;border-radius:var(--r-pill);
background:var(--cream);color:var(--bg);font-weight:700;text-decoration:none;transition:top .2s ease}
.skip:focus{top:14px}
[hidden]{display:none !important}


/* ---- the paper: the sign-in page's card --------------------------------------------------- */
.paper{position:relative;color:var(--paper-ink);
background:linear-gradient(165deg,var(--paper) 0%,var(--paper-2) 100%);
border-radius:var(--r-card);
box-shadow:0 30px 60px rgba(8,3,0,.5),inset 0 1px 0 rgba(255,255,255,.65)}
.paper::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-2deg);
width:64px;height:18px;border-radius:0;background:rgba(255,214,150,.55);
box-shadow:0 2px 5px rgba(60,30,5,.18)}
.paper p{color:var(--paper-ink-soft)}
.kicker{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--rust-ink);margin:0 0 12px}
.lead{font-size:.98rem;font-weight:500;line-height:1.55;margin:0 0 18px;max-width:46ch}
.lead b{color:var(--paper-ink);font-weight:700}
.sub{font-size:.95rem;font-weight:500;line-height:1.5;margin:0 0 16px;max-width:52ch}
.nojs{margin:0 0 16px;padding:11px 14px;border-radius:var(--r-ctl);
background:rgba(163,38,27,.09);border:1px solid rgba(163,38,27,.4);font-weight:600;font-size:.95rem;line-height:1.5}
.note p.nojs{color:#8a1f15}

/* the little labels: which door a connection comes through */
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
font-family:var(--font-display);font-weight:700;font-size:.78rem;line-height:1.3;color:var(--field-ink);
background:rgba(58,36,18,.08);border:1px solid rgba(58,36,18,.32)}

.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border-radius:var(--r-pill);
border:1px solid rgba(58,36,18,.5);background:transparent;color:var(--field-ink);text-decoration:none;cursor:pointer;
font-family:var(--font-display);font-weight:700;font-size:.9rem}
@media (hover:hover){.pill:hover{background:rgba(58,36,18,.08)}}
.pill.solid{border:0;color:var(--beamink);background:linear-gradient(120deg,#ff7d5c,var(--coral) 55%,var(--coral-deep));
box-shadow:0 10px 24px rgba(255,90,60,.3),inset 0 1px 0 rgba(255,255,255,.4)}

/* ---- the room: one screen, and the thread is the only thing that scrolls ----------------- */
.app{position:relative;z-index:2;max-width:880px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;
background:var(--ground);box-shadow:0 0 0 1px var(--hair),0 30px 80px -24px rgba(0,0,0,.75)}
@media (max-width:899px){.app{box-shadow:none}}

/* the header: the team's photograph pinned to it, and what is true of it beside */
.top{position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 16px;
padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
background:linear-gradient(180deg,color-mix(in srgb,var(--raised) 86%,var(--signal) 14%),color-mix(in srgb,var(--ground) 96%,var(--signal) 4%));
border-bottom:1px solid var(--room-line);box-shadow:0 10px 28px -14px rgba(0,0,0,.7),var(--edge)}
.brand{position:relative;flex:none;display:block;width:48px;height:56px;border-radius:var(--r-ctl)}
.brand .cp{left:5px;top:2px;width:38px;height:51px;--tilt:-3deg}
.who{min-width:0;flex:1 1 auto}
.rname{font-size:20px;font-weight:800;letter-spacing:-.005em;color:var(--ink);line-height:1.15}
.rsub{font-size:13px;margin-top:3px;color:var(--ink2);line-height:1.35}
.top-actions{flex:none;display:flex;gap:6px;align-items:center}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
border:1px solid color-mix(in srgb,var(--signal) 36%,transparent);background:transparent;color:var(--signal);text-decoration:none;white-space:nowrap;
font-family:var(--font-display);font-size:13.5px;font-weight:700}
@media (hover:hover){.ghost:hover{background:color-mix(in srgb,var(--signal) 10%,transparent)}}
@media (max-width:599px){
  .top{gap:10px;padding-block:8px}
  .rsub{font-size:12px}
  .ghost{padding:8px 11px;font-size:13px}
}
@media (max-width:379px){.rname{font-size:17px}}
@media (max-width:359px){.rname{font-size:16px}}

.room{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.thread{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
padding:12px 14px 22px;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--signal) 30%,transparent) transparent;background:var(--ground)}
.thread:focus-visible{outline-offset:-3px}

/* ---- the notes ---------------------------------------------------------------------------- */
.row{display:flex;margin:2px 0}
.row.first{margin-top:16px}
.row.cm{padding-left:var(--gutter)}
.note{position:relative;min-width:0;max-width:calc(100% - 26px);padding:10px 14px 11px;border-radius:18px;
background:linear-gradient(165deg,var(--paper) 0%,var(--paper-2) 100%);color:var(--paper-ink);
box-shadow:0 12px 22px -12px rgba(8,3,0,.8),inset 0 1px 0 rgba(255,255,255,.65)}
@media (min-width:640px){.note{max-width:min(36rem,82%)}.row.you .note{max-width:min(34rem,80%)}}
.row.cm.first .note{border-top-left-radius:6px}
.note .who-l{display:block;margin:0 0 3px;font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--rust)}
.note p{margin:0 0 7px;font-size:15.5px;font-weight:500;line-height:1.5;color:inherit;overflow-wrap:anywhere}
.note p:last-child{margin-bottom:0}
.note a{color:var(--rust);text-underline-offset:3px;overflow-wrap:anywhere}
.look{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border:0;border-radius:var(--r-pill);cursor:pointer;
font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--beamink);background:linear-gradient(120deg,#ff7d5c,var(--coral) 55%,var(--coral-deep));
box-shadow:0 12px 30px rgba(255,90,60,.35),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .25s ease,opacity .25s ease}
@media (hover:hover){.look:hover:not(:disabled){transform:translateY(-2px)}}
.look:disabled{cursor:not-allowed;opacity:.5;box-shadow:none;filter:saturate(.6)}

/* who is speaking hangs out in the margin: the team's photograph pinned to the corner of the note */
.cp{--tilt:-3deg;position:absolute;display:block;box-sizing:border-box;padding:3px;border-radius:7px;
background:linear-gradient(170deg,#fdf6e6,#f1e1c1);box-shadow:0 10px 16px -6px rgba(8,3,0,.7),inset 0 1px 0 rgba(255,255,255,.7);rotate:var(--tilt)}
.cp::before{content:"";position:absolute;top:-4px;left:50%;width:46%;height:7px;translate:-50% 0;rotate:-4deg;z-index:2;
background:rgba(255,214,150,.72);box-shadow:0 1px 2px rgba(60,30,5,.28)}
.cp > .cp-face{position:absolute;inset:3px;display:block;overflow:hidden}
.cp-face > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;
transform-origin:calc(var(--fx,.5) * 100%) calc(var(--fy,.5) * 100%);
transform:translate(calc((.5 - var(--fx,.5)) * 100% * var(--zk,1)),calc((.5 - var(--fy,.5)) * 100% * var(--zk,1))) scale(calc(1 + (var(--z,1) - 1) * var(--zk,1)))}
.cp[data-cp="cm"]{--fx:.34;--fy:.28;--z:1.8}
.note > .cp{left:-31px;top:-10px;width:36px;height:48px;z-index:2}
@media (min-width:640px){.note > .cp{left:-36px;width:42px;height:56px}}


/* ---- the four steps ------------------------------------------------------------------------ */
.step{margin:18px 0 0;padding:24px 20px 22px;max-width:100%}
.step h2{font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--paper-ink);margin:0 0 10px}
.step h3{font-size:1rem;font-weight:800;color:var(--paper-ink);margin:20px 0 8px}
.step > p,.step > .fold-body > p,.step .body p{font-size:.98rem;font-weight:500;line-height:1.55;margin:0 0 10px;max-width:60ch}
/* the connections and the close open from their headings: the heading's words are the button, and the chevron is the
   desk's (desk.html, its details rows), drawn with borders so it adds no word to what a screen reader hears */
.step h2:has(> .fold){margin:0}
.fold{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:4px 0;margin:0;border:0;background:transparent;
color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;cursor:pointer;border-radius:var(--r-ctl)}
.fold::after{content:"";width:10px;height:10px;flex:none;margin:0 6px 0 auto;border-right:2.5px solid currentColor;
border-bottom:2.5px solid currentColor;rotate:45deg;translate:0 -3px}
.fold[aria-expanded="true"]::after{rotate:-135deg;translate:0 3px}
.fold-body{margin:12px 0 0}
@media (prefers-reduced-motion:no-preference){.fold::after{transition:rotate .2s ease,translate .2s ease}}
.hello h2{font-size:clamp(1.35rem,3vw,1.85rem);color:var(--paper-ink);margin:0 0 8px}
.note.hello{max-width:100%;width:100%;padding:16px 18px 16px}
@media (min-width:640px){.note.hello{max-width:100%}}

/* the account: three boxes and the one coral thing to press */
.fields{display:grid;gap:14px;margin:16px 0 0;max-width:30rem}
.field label{display:block;margin:0 0 6px;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--label-ink)}
.field input{display:block;width:100%;min-height:48px;padding:10px 16px;border-radius:var(--r-ctl);
border:1px solid rgba(120,75,35,.5);background:rgba(255,252,244,.92);color:var(--field-ink);font:inherit;font-size:16px}
.field input:focus-visible{outline:3px solid var(--paper-ink);outline-offset:2px}
.field input[aria-invalid="true"]{border-color:#8a1f15;box-shadow:inset 0 0 0 1px #8a1f15}
.problem{margin:6px 0 0;font-size:.88rem;font-weight:700;line-height:1.4;color:#8a1f15}
.problem:empty{display:none}
.paper p.problem{color:#8a1f15}
.send-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0}
.how{margin:14px 0 0;font-size:.9rem;max-width:60ch}
.ready{margin:16px 0 0;padding:14px 16px;border-radius:var(--r-ctl);background:rgba(255,184,77,.22);border:1px solid rgba(154,74,34,.45)}
.paper .ready p{color:var(--paper-ink);font-weight:600}
.paper .ready h3{margin:0 0 8px}
.paper .ready p{margin:0 0 8px}
.paper .ready p:last-child{margin-bottom:0}
.failed{margin:12px 0 0;font-size:.9rem;font-weight:700;line-height:1.45;max-width:60ch;color:#8a1f15}
.failed:empty{display:none}
.paper p.write{margin:10px 0 0;font-size:.9rem;max-width:60ch;color:var(--paper-ink-soft)}
/* the box nobody is meant to see: off the page, never displayed to a person or a screen reader */
.trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* the connections: said once, where it cannot be missed, and then the nine */
.promise{margin:14px 0 16px;padding:14px 16px;border-radius:var(--r-ctl);border:2px solid var(--paper-ink);background:rgba(255,252,244,.7)}
.paper p.promise{color:var(--paper-ink);font-weight:700;font-size:1rem;line-height:1.5}
.sources{list-style:none;display:grid;gap:10px;margin:14px 0 0}
@media (min-width:760px){.sources{grid-template-columns:repeat(2,minmax(0,1fr))}}
.source{padding:14px 16px;border-radius:var(--r-ctl);background:rgba(255,252,244,.72);border:1px solid rgba(120,75,35,.35);min-width:0}
.source h3{margin:0 0 4px;font-size:1rem}
.paper .source p{margin:0 0 8px;font-size:.92rem;line-height:1.45}
.paper .source p.door-how{margin:8px 0 0}
.doors{list-style:none;display:grid;gap:8px;margin:8px 0 0}
.paper .doors p{margin:0;font-size:.92rem;line-height:1.45}
.doors b{color:var(--paper-ink)}

/* the close */
.results,.agree{margin:6px 0 0;padding-left:20px;display:grid;gap:6px}
.paper .results li,.paper .agree li{font-size:.97rem;font-weight:500;line-height:1.5;color:var(--paper-ink-soft)}
.paper .agree li{color:var(--paper-ink);font-weight:600}
.guard{padding:12px 14px;border-radius:var(--r-ctl);background:rgba(58,36,18,.07);border-left:4px solid var(--paper-ink)}
.paper p.guard{color:var(--paper-ink);font-weight:700}
.person{margin:18px 0 0;font-size:.9rem}
.paper a{color:var(--rust);text-underline-offset:3px;overflow-wrap:anywhere}

@media (min-width:600px){.step{padding-left:30px;padding-right:30px}}

/* a note arrives when it is said: a short settle, and none at all with motion reduced */
@media (prefers-reduced-motion:no-preference){
  .ready:not([hidden]){animation:rise .24s var(--ease) both}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .look:hover{transform:none}
}