/* fonts are served from this host; the files come from the Google Fonts releases of Syne and DM Mono (OFL) */
@font-face{font-family:"Syne";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/syne-latin.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-mono-latin-400.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/dm-mono-latin-500.woff2") format("woff2")}

/* Layout: a two-colour, 1-bit sky fills the screen. The name runs edge to edge across the planet
   and inverts where it crosses it; the transmission panel sits bottom left like a console. */
:root{
  color-scheme: dark;
  --void:#0E0A2B;
  --dust:#FFD3BA;
  --dust-dim:color-mix(in srgb,var(--dust) 60%,transparent);
  --title:#FFDDE5;            /* void + dust: in difference mode it reads as dust on the void and as void on lit pixels */
  --display:"Syne","Arial Black",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gutter:clamp(16px,2.4vw,34px);
}
*{box-sizing:border-box}
html{background:var(--void)}
/* body stays transparent: the canvas sits at z-index -1 and a body background would paint over it */
body{margin:0;background:transparent;color:var(--dust);font-family:var(--mono);overflow-x:hidden}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;display:block}
#sky.page{position:absolute;inset:0 0 auto 0}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:25;pointer-events:none;image-rendering:pixelated;display:none}
.riding #fx{display:block}
.no-gl #sky{display:none}
.no-gl body{background:radial-gradient(circle at 72% 34%,var(--dust) 0 16vmin,transparent 16.2vmin),var(--void)}

main{min-height:100svh;display:grid;grid-template-rows:auto minmax(34svh,1fr) auto auto;gap:clamp(12px,1.8vw,22px);padding-inline:var(--gutter);padding-block:clamp(14px,2vw,26px) clamp(18px,2.4vw,30px)}
.top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
#clock{margin-left:auto;font-variant-numeric:tabular-nums}
/* sound switch: three bars that dance while the loop plays */
.sound{display:inline-flex;align-items:center;gap:8px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dust-dim);background:none;border:0;padding:0;cursor:pointer}
.sound:hover,.sound:focus-visible,.sound[aria-pressed="true"]{color:var(--dust)}
.sound:focus-visible{outline:2px solid var(--dust);outline-offset:4px}
.sound .bars{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.sound .bars i{width:3px;height:3px;background:currentColor}
.sound[aria-pressed="true"] .bars i{animation:bar .56s steps(3,jump-none) infinite alternate}
.sound[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.2s;animation-duration:.4s}
.sound[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.33s;animation-duration:.7s}
@keyframes bar{to{height:10px}}

.title{grid-row:3;margin:0;font:800 15vw/.8 var(--display);letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;color:var(--title);mix-blend-mode:difference;overflow:hidden;padding-bottom:.04em}
.low{grid-row:4;display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(14px,2vw,22px);justify-self:end;min-width:0}
.legal{display:flex;gap:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:opacity .35s}
.legal a{color:var(--dust-dim);text-decoration:none}
.legal a:hover,.legal a:focus-visible{color:var(--dust);text-decoration:underline;outline:none}
.riding .claim,.riding .legal{opacity:0}
.claim{transition:opacity .35s;margin:0;justify-self:end;text-align:right;font:500 clamp(1.2rem,2.6vw,2.3rem)/1.1 var(--display);text-transform:lowercase;letter-spacing:-.01em;max-width:14ch}
.claim small{display:block;margin-top:1.1em;font:400 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust-dim);max-width:34ch;margin-left:auto}

.panel{background:var(--void);border:2px solid var(--dust);padding:16px;display:grid;gap:12px;box-shadow:6px 6px 0 var(--dust)}
.panel h2{margin:0;display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.meter{display:inline-flex;gap:3px;align-items:flex-end;height:12px}
.meter i{width:7px;height:12px;border:1px solid var(--dust);transform-origin:50% 100%}
.meter i.on{background:var(--dust)}
.panel.sending,.panel.checking{animation:pump .18s steps(2,jump-none) infinite}
.panel.asking{animation:none}
/* the moment Transmit is pressed, the button itself shows that something is running */
.panel.checking button,.panel.sending button{animation:working .5s steps(2,jump-none) infinite}
.panel.asking button{animation:none}
@keyframes working{50%{background:var(--dust);color:var(--void)}}
.panel.checking .status::after{content:"";animation:dots 1.2s steps(4,jump-none) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@keyframes pump{50%{box-shadow:10px 10px 0 var(--dust)}}
.row{display:grid;grid-template-columns:9.5em minmax(0,1fr);align-items:start;border-top:1px dashed var(--dust-dim);padding-top:10px}
.row label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding-top:.55em;color:var(--dust-dim)}
.row input,.row textarea{width:100%;font:400 15px/1.5 var(--mono);color:var(--dust);background:transparent;border:0;border-radius:0;padding:2px 0;resize:none;caret-color:var(--dust)}
.row input::placeholder,.row textarea::placeholder{color:var(--dust);opacity:.32}
.row input:focus,.row textarea:focus{outline:none;background:repeating-conic-gradient(color-mix(in srgb,var(--dust) 16%,transparent) 0 25%,transparent 0 50%) 0 0/4px 4px}
.row:focus-within label{color:var(--dust)}
.row:focus-within label::before{content:"> "}
.go{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px dashed var(--dust-dim);padding-top:12px}
.status{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;min-height:1.4em;min-width:0}
.panel button{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--void);background:var(--dust);border:2px solid var(--dust);padding:12px 16px;cursor:pointer;border-radius:0;white-space:nowrap}
.panel button:hover{background:var(--void);color:var(--dust)}
.panel button:active{transform:translate(2px,2px)}
.panel button:disabled{background:var(--void);color:var(--dust);cursor:default}
.panel.sending button{cursor:progress}
.panel button:focus-visible{outline:2px solid var(--dust);outline-offset:3px}
.panel.sent input,.panel.sent textarea{opacity:.5}
/* honeypot: off-screen for people, tempting for scripts */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Turnstile only takes up room when Cloudflare asks for an interaction; until then it runs collapsed */
.ts{height:0;overflow:hidden;min-width:0}
.ts.show{height:auto;overflow:visible;border-top:1px dashed var(--dust-dim);padding-top:12px}
.nojs{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase}


@media (max-width:760px){
  .sound{margin-left:auto}            /* wraps below the clock; auto margins count per flex line */
  main{grid-template-rows:auto 40svh auto auto}
  .side{display:contents}
  .legal{order:1}
  .low{grid-template-columns:minmax(0,1fr)}
  .claim{justify-self:start;text-align:left;order:-1;max-width:none}
  .claim small{margin-left:0}
  .row{grid-template-columns:minmax(0,1fr)}
  .row label{padding-top:0}
  .panel{box-shadow:4px 4px 0 var(--dust)}
}
/* upright screens: the planet is sized and placed by the width, so the room above the name must be too;
   a height-based gap shrinks under phone browser bars and the name slides into the ring */
@media (orientation:portrait){main{grid-template-rows:auto minmax(calc(87vw - 40px),1fr) auto auto}}
/* iOS zooms into any field under 16px on focus and stays zoomed: the page then scrolls sideways */
@media (max-width:760px),(pointer:coarse){.row input,.row textarea{font-size:16px}}
@media (prefers-reduced-motion:reduce){.sound[aria-pressed="true"] .bars i{animation:none;height:10px}.panel.sending,.panel.checking,.panel.checking button,.panel.sending button,.panel.checking .status::after{animation:none}}