/* Landing: one still screen. The photon prism behind everything, the title, and a glass-prism sign-in button. No scroll. */
.tag,.ui,#next{display:none!important}
:root{--ink:#f3f1ec;--muted:#9a9ea6;--faint:#5d616b;--serif:"Instrument Serif",Georgia,serif;--sans:Manrope,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --spec:linear-gradient(90deg,#ff5a4e,#ff9f43,#ffe066,#5be08a,#4fa8ff,#a67cff)}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#000}
canvas{touch-action:none}

/* brand: the title, and very small beneath it, who makes it */
#brand{position:fixed;left:16px;right:16px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:3;text-align:center;pointer-events:none}
#brand h1{margin:0;font:400 clamp(2.3rem,6.6vw,4.4rem)/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
#brand h1 em{font-style:italic}
#brand .by{margin:10px 0 0;font:500 .6rem/1 var(--mono);letter-spacing:.22em;color:var(--faint);text-transform:lowercase}

/* the button: a horizontal glass prism drawn with the same thin lit edges as the wireframe */
#gsi{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;
  width:min(300px,82vw);height:60px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  opacity:0;animation:gIn 1.4s ease-out 1.6s forwards;-webkit-tap-highlight-color:transparent}
@keyframes gIn{to{opacity:1}}
#gsi .glass{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#gsi .face{fill:rgba(160,175,200,.09);transition:fill .3s}
#gsi .edge{fill:none;stroke:rgba(235,240,255,.78);stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(255,255,255,.45));transition:stroke .3s}
#gsi .edge.in{stroke:rgba(235,240,255,.28)}
#gsi .lbl{position:relative;font:400 21px/1 var(--serif);color:var(--ink);letter-spacing:.005em;white-space:nowrap}
#gsi .lbl b{font-weight:400;font-style:italic;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(255,200,150,.35));padding-right:.06em}
#gsi .disp{position:absolute;left:calc(100% - 2px);top:50%;width:46px;height:14px;transform:translateY(-50%);
  background:linear-gradient(180deg,#ff5a4e,#ff9f43,#ffe066,#5be08a,#4fa8ff,#a67cff);opacity:.55;filter:blur(1.5px);
  clip-path:polygon(0 46%,100% 0,100% 100%,0 54%);transition:opacity .3s,width .4s}
#gsi:hover .face,#gsi:focus-visible .face{fill:rgba(190,205,235,.16)}
#gsi:hover .edge,#gsi:focus-visible .edge{stroke:#fff}
#gsi:hover .disp,#gsi:focus-visible .disp{opacity:.9;width:70px}
#gsi:focus-visible{outline:none}
@media (max-width:420px){#gsi .disp{display:none}}

body::after{content:"";position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:7;transition:opacity .6s ease-in}
/* sign-in white-out (S1 2026-10-06): the scene blurs away while white rises to SOLID (fully opaque by ~1.4 s; Google opens at 1.75 s) */
#c{transition:filter 1.1s ease-in .35s}body.going #c{filter:blur(22px) brightness(1.35)}
body.going::after{opacity:1;transition:opacity .55s ease-in .85s}
.warn{position:fixed;left:0;right:0;bottom:calc(98px + env(safe-area-inset-bottom));text-align:center;color:#ffb4a8;font:500 13px var(--sans);z-index:6}

/* steady frame on phones: the canvas covers the largest viewport, so the address bar showing/hiding never resizes it */
canvas#c{height:100%;bottom:auto}
/* no font swap shift (S1 2026-10-06): text waits for its fonts, then fades in; prism runs meanwhile */
html:not(.fonts-in) #brand,html:not(.fonts-in) #gsi .lbl{opacity:0}
#brand,#gsi .lbl{transition:opacity .45s ease}
#gsi{transition:transform .12s cubic-bezier(.2,.8,.3,1)}#gsi.press{transform:translateX(-50%) scale(.94)}
#gsi.press .face{fill:rgba(220,230,255,.32)}#gsi.press .edge{stroke:#fff}
body.going #gsi .face{fill:rgba(255,255,255,.4)}