@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ui/dm-sans-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ui/dm-sans-500-normal.woff2') format('woff2')}
:root{--ink:#0b1a30;--river:#f6dc9c;--label:#ebe4d3;--muted:#a3b1c6;--wash:linear-gradient(rgba(11,26,48,.58),rgba(11,26,48,.72))}
*{box-sizing:border-box}
/* the homepage lotus pond, low-res and hazed behind a navy wash so the river and labels read on it */
html{background:var(--wash),url('bg/pond-haze.jpg') center/cover no-repeat fixed,var(--ink)}
@media (max-aspect-ratio:3/4){html{background:var(--wash),url('bg/pond-haze-phone.jpg') center/cover no-repeat fixed,var(--ink)}}
html,body{margin:0;height:100%;color:var(--label);font-family:'DM Sans',Arial,sans-serif;overflow:hidden}
button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.bar{position:fixed;top:0;left:0;right:0;height:64px;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;background:linear-gradient(rgba(11,26,48,.55),rgba(11,26,48,0))}
.brand{font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.toggle{display:flex;border:1px solid #f6dc9c55;border-radius:999px;padding:3px;max-width:calc(100vw - 340px);overflow-x:auto;scrollbar-width:none}
.toggle::-webkit-scrollbar{display:none}
.toggle button{flex:none;white-space:nowrap;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.toggle button[aria-selected=true]{background:var(--river);color:var(--ink)}
.links{justify-self:end;display:flex;gap:22px}
.link{font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}

.stage{position:fixed;inset:64px 0 96px 0;overflow-x:hidden;overflow-y:auto}
.stage svg{display:block}
.stage image{filter:brightness(1.12) saturate(1.12)}
.stage .frame{fill:none;stroke:var(--river);stroke-opacity:.35}
.stage .label{fill:var(--label);font-family:'DM Sans',Arial,sans-serif;font-weight:500;letter-spacing:.04em}
.stage .river-line{fill:none;stroke:var(--river);stroke-linecap:round;stroke-linejoin:round}
.stage .letter{cursor:default}

.writer{position:fixed;left:0;right:0;bottom:0;height:96px;background:linear-gradient(rgba(11,26,48,0),rgba(11,26,48,.55));display:flex;align-items:center;padding:0 28px;z-index:5}
.writer input{width:100%;border:0;border-bottom:1px solid #f6dc9c88;background:transparent;color:var(--river);font-size:28px;padding:8px 2px;outline:none;letter-spacing:-.2px;caret-color:var(--river)}
.writer input:focus{border-bottom-color:var(--river)}
.writer input::placeholder{color:var(--muted)}

dialog{max-width:620px;width:calc(100% - 32px);border:1px solid #f6dc9c44;padding:30px 32px;color:var(--label);background:#0e1f38;line-height:1.6;font-size:15px}
dialog::backdrop{background:#000a}
dialog h2{font-weight:400;font-size:26px;margin:0 0 12px;color:var(--river)}
dialog .close{position:absolute;top:14px;right:18px;font-size:26px}
dialog a{color:var(--river)}
#use-font .sample{font-family:var(--sample-font,serif);font-size:64px;line-height:1.25;color:var(--river);margin:6px 0 10px;outline:none;border-bottom:1px dashed #f6dc9c44;overflow-wrap:anywhere}
#use-font .hint{color:var(--muted);font-size:13px;margin:8px 0}
#use-font .steps{padding-left:20px;margin:14px 0}#use-font .steps li{margin:12px 0}#use-font .steps li::marker{color:var(--river)}
#use-font .snippet{display:flex;gap:8px;align-items:stretch;margin-top:6px}
#use-font .snippet code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:#06111f;border:1px solid #f6dc9c22;border-radius:6px;padding:9px 12px;font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#f3ead2}
#use-font .copy{flex:none;border:1px solid #f6dc9c66;border-radius:6px;padding:0 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
#use-font .copy:hover{background:#f6dc9c18}#use-font .copy.done{background:var(--river);color:var(--ink)}
#use-font .downloads{margin:16px 0 6px}

@media (max-width:600px){
  .bar{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:0 16px}.toggle{justify-self:center;max-width:100%}.toggle button{padding:6px 14px}
  .brand,.link,.toggle button{font-size:11px}.links{gap:12px}#use-font .sample{font-size:44px}
  .brand{display:none}.bar{grid-template-columns:minmax(0,1fr) auto}
  .writer{padding:0 16px;height:80px}.writer input{font-size:22px}
  .stage{bottom:80px;overflow-y:auto;overflow-x:hidden}
}