.su [hidden]{display:none!important}
.su{position:relative;width:100%;height:100%;overflow:hidden;display:grid;font:400 16px/1.45 var(--sans);color:var(--ink-900);text-align:left;background:var(--paper-0)}
/* ---- the column: the whole screen is this ---- */
/* one height in every state, so the mark and the headline never move when a message comes or the form goes */
.su-col{width:384px;max-width:100%;min-height:604px}
.su-mark{display:block;width:max-content;margin:0 0 28px;font-size:40px;line-height:0}
.su-a .su-mark{font-size:24px}
.su .app-h1{font-size:42px;line-height:1.02;white-space:normal}
.su .app-h1 .ln{display:block;white-space:nowrap}
.su .app-h1 em{font-style:normal;color:var(--action)}
.su-a .app-h1 .light{background:var(--action)}
.su-sub{margin:12px 0 0;min-height:2.9em;font-size:16px;line-height:1.45;color:var(--ink-700);text-wrap:balance}
.su-sub b{display:block;font-weight:550;color:var(--ink-900);overflow-wrap:anywhere}
/* something went wrong before the form: said here, in the line's own place, with the warning mark. No box. */
.su-sub.is-notice{font-weight:550;color:var(--ink-900)}
.su-sub.is-notice svg{display:inline-block;width:15px;height:15px;margin:0 7px -2px 0}
.su-form,.su-sent{margin-top:30px}
/* every control: 52px high, the full width of the column */
.su .btn{width:100%}
.su-g{background:var(--paper-0);color:var(--ink-900);box-shadow:inset 0 0 0 1px #747775}
.su-g:hover{background:var(--field-50)}
.su-g svg{width:18px;height:18px}
.su-g i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--action);animation:ring-p 2.4s infinite}
.su-or{display:flex;align-items:center;gap:14px;margin:18px 0;font-size:13.5px;line-height:1;color:var(--ink-500)}
.su-or::before,.su-or::after{content:"";flex:1;height:1px;background:var(--line)}
.su-f{display:block;margin:0}
.su-lab{display:block;margin:0 0 7px;font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink-900)}
.su-in{display:block;width:100%;height:52px;padding:0 16px;border:0;border-radius:var(--r-md);background:var(--paper-0);box-shadow:inset 0 0 0 1px var(--ink-400);font:400 16px/1 var(--sans);color:var(--ink-900);outline:0;transition:box-shadow var(--t-quick) var(--ease-out)}
.su-in::placeholder{color:var(--ink-500)}
.su-in:focus{box-shadow:inset 0 0 0 1.5px var(--action)}
.su-f.bad .su-in{box-shadow:inset 0 0 0 2px var(--ink-900)}
.su-msg{display:flex;align-items:flex-start;gap:7px;margin:8px 0 0;font-size:13.5px;font-weight:550;line-height:1.4;color:var(--ink-900)}
.su-msg svg{flex:none;width:15px;height:15px;margin-top:2px}
.su-go{margin-top:14px}
.su-go i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;animation:ring-s 2.4s infinite}
.su-go.busy{cursor:progress}
.su-form.is-busy .su-g:not(.is-on),.su-form.is-busy .su-f,.su-form.is-busy .su-or{opacity:.5;pointer-events:none}
/* the keyboard's place is always shown: violet on paper, white on the field */
.su .btn:focus-visible{outline:3px solid var(--action);outline-offset:3px}
.su-b .btn:focus-visible{outline-color:var(--on-field)}
.su-note{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-500)}
.su-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0;font-size:14.5px;line-height:1.4;color:var(--ink-500)}
.su-lnk{position:relative;padding:0;border:0;background:none;font:inherit;font-weight:550;color:var(--ink-900);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.su-lnk::after{content:"";position:absolute;inset:-12px 0}
.su-lnk:focus-visible{outline:3px solid var(--action);outline-offset:4px;border-radius:4px}
.su-b .su-acts{justify-content:center;color:var(--on-field-2)}
.su-b .su-lnk{color:var(--on-field)}
.su-b .su-lnk:focus-visible{outline-color:var(--on-field)}
.su-wait{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-size:14.5px;color:var(--ink-700)}
.su-wait i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--action);animation:ring-p 2.4s infinite}
body.still .su-wait i,body.still .su-g i{animation:none}


/* ============================================================
   SIGN-UP IN TWO COLUMNS. New for this mockup.
   The first run's split: the field on the left, 540px, and paper on the right. 40px padding on both.
   Left: the mark, the headline, one line. Right: the locked screen's controls, in their paper colours.
   One row holds both, so the headline and the first button start on the same line and never move.
   ============================================================ */
/* less room under than over: with the column's spare room, the buttons sit about 12px above the middle, as on the locked screen */
/* 540px at 1280 wide, as the first run. On a narrower window the field gives way first (down to 360px), so the
   paper always has room for the 384px column and its 40px sides. Under 824px the two stack: see the foot. */
.su-c{grid-template-columns:minmax(360px,540px) minmax(464px,1fr);grid-template-rows:minmax(118px,1fr) auto minmax(40px,.8fr);background:var(--paper-50);overflow-y:auto;scrollbar-width:none}
.su-c::before{content:"";grid-column:1;grid-row:1/-1;background:var(--field-500)}
.su-head{grid-column:1;grid-row:2;align-self:start;position:relative;min-width:0;padding:0 40px;color:var(--on-field)}
/* the mark sits over the headline, as on the locked screen. No logo bar. */
.su-c .su-mark{position:absolute;left:40px;bottom:calc(100% + 28px);margin:0}
/* the first run's headline size. Pulled up 9px so the top of its letters, not of its line, meets the first button's top. */
.su-c .app-h1{margin-top:-9px;font-size:calc(clamp(46px,5.9cqw,76px)*var(--d-scale));line-height:.92;color:var(--on-field)}
.su-c .app-h1 em{color:var(--light-500)}
/* the line breaks evenly, so its last row is never two words alone ("Fix the four", 10 Oct) */
.su-c .su-sub{margin:18px 0 0;min-height:0;font:400 19px/1.42 var(--sans);letter-spacing:-.012em;color:var(--on-field-2);text-wrap:balance}
.su-c .su-sub b{color:var(--on-field)}
/* one height in every state, with room for the line under the field, so nothing moves when a message comes */
.su-c .su-col{grid-column:2;grid-row:2;align-self:start;justify-self:center;position:relative;min-height:320px;margin:0 40px}
.su-c .su-form,.su-c .su-sent{margin-top:0}
.su-c .su-note,.su-c .su-wait{text-align:center;justify-content:center}
.su-c .su-acts{justify-content:center}
/* something went wrong: said on paper, over the buttons, where the person is looking. It takes no room.
   It starts on the buttons' left edge, on a laptop and on a phone alike. */
.su-say{position:absolute;left:0;right:0;bottom:calc(100% + 20px);display:flex;align-items:flex-start;justify-content:flex-start;gap:7px;margin:0;font-size:14.5px;font-weight:550;line-height:1.4;color:var(--ink-900)}
/* too many tries, or offline: neither button can do anything, so both step back and say so, as they do while a link is sent */
.su-c .su-form.is-held .btn{opacity:.5;cursor:not-allowed}
/* too many tries today: only a link cannot be sent, so only that button steps back. Google sends none, and stays live */
.su-c .su-form.is-late .su-go{opacity:.5;cursor:not-allowed}
.su-say svg{flex:none;width:15px;height:15px;margin-top:3px}
.su-say span{text-wrap:balance}
/* The status dot's pulse on paper. First-run step 2's own rule, word for word. This screen asked for it without
   having it, so the dot beside "Waiting for you to open the link…" stood still. Fixed 10 Oct: "Fix yes". */
@keyframes ring-p{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--action) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--action) 0%,transparent)}}

/* ---- a phone, and any window too narrow for two columns: the field over the paper ----
   Both halves keep to one column, 384px at most and centred, with 24px at the sides on a phone. */
@container (max-width:823px){
  .su-c{display:block;--side:max(24px,calc(50% - 192px))}
  .su-c::before{display:none}
  /* 248px is its height at rest, to the pixel below (it is 248.5). It keeps that when the headline is one row or
     the line is gone, so the edge between the field and the paper does not jump from state to state. */
  .su-head{min-height:248px;padding:40px var(--side) 30px;background:var(--field-500)}
  .su-c .su-mark{position:static;margin:0 0 22px;font-size:34px}
  /* three rows are too tall here: the words run on and break into two */
  .su-c .app-h1{margin-top:0;font-size:32px;line-height:1.02;text-wrap:balance}
  .su-c .app-h1 .ln{display:inline;white-space:normal}
  .su-c .su-sub{margin-top:12px;min-height:2.9em;font-size:16px;line-height:1.45}
  /* 64px over the first button: room for a problem message of two rows, which sits 14px above the button and grows up */
  /* justify-self is undone here: a browser applies it to a plain block too, and it would shrink the column to its longest line */
  .su-c .su-col{width:auto;justify-self:stretch;min-height:0;margin:0;padding:64px var(--side) 28px}
  .su-say{left:var(--side);right:var(--side);bottom:calc(100% - 50px);font-size:13.5px}
}

/* ---- the app's own. WRITTEN FOR THE APP, not copied. ----
   In the picture the screen sits in a drawn frame. Here the window is the frame. */
.page{position:fixed;inset:0;container-type:inline-size;overflow:hidden}
/* Google's button needs its two keys. Without them it and the "or" are not drawn. */
[data-google="off"] .js-google,[data-google="off"] .su-or{display:none}