:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.52);
  --faint:rgba(255,255,255,.30);
  --dim:rgba(255,255,255,.22);
  --line:rgba(255,255,255,.10);
  --max:84rem;
  --pad:clamp(1.5rem,4vw,3.5rem);
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:dark;
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}

::selection{background:#fff;color:#000}

:where(a,button):focus-visible{
  outline:1px solid var(--fg);
  outline-offset:4px;
}

a,button{-webkit-tap-highlight-color:transparent}

.stage{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
  max-width:var(--max);
  margin-inline:auto;
  padding-top:max(var(--pad),env(safe-area-inset-top,0px));
  padding-right:max(var(--pad),env(safe-area-inset-right,0px));
  padding-bottom:max(var(--pad),env(safe-area-inset-bottom,0px));
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.home{display:block;color:inherit}

.mark{
  display:block;
  height:2.5rem;
  width:auto;
}

.back{color:var(--faint);text-decoration:none}

.identity{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(1.5rem,5vh,3.5rem);
  padding-bottom:clamp(5rem,16vh,9rem);
}

.identity h1{
  margin:0;
  font:600 clamp(2.75rem,8vw,6.5rem)/.95 var(--display);
  letter-spacing:-.05em;
}

.identity p{
  margin:clamp(1.25rem,2.2vw,1.75rem) 0 0;
  font-size:clamp(.9375rem,1.15vw,1.0625rem);
  line-height:1.6;
  color:var(--muted);
}

.identity a{color:var(--muted);text-decoration:none}

.foot{flex-shrink:0}

.foot-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.25rem 2.5rem;
}

.reach{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.5rem 1.25rem;
}

.tag{color:var(--faint)}

.handle{
  -webkit-appearance:none;
  appearance:none;
  margin:-.4rem 0;
  padding:.4rem 0;
  border:0;
  background:none;
  font:inherit;
  font-size:.9375rem;
  color:var(--muted);
  cursor:pointer;
  touch-action:manipulation;
}
.handle[data-state]{color:var(--fg)}

.copied{font-size:.75rem;color:var(--faint)}
.copied:empty{display:none}

.meta{
  display:flex;
  gap:1.5rem;
  font-size:.75rem;
  color:var(--faint);
}

.meta a{color:inherit;text-decoration:none}
.meta [aria-current]{color:var(--fg)}

.fine{
  margin:clamp(1.5rem,3vw,2rem) 0 0;
  max-width:64ch;
  font-size:.6875rem;
  line-height:1.6;
  color:var(--dim);
}

.prose{
  flex:1;
  max-width:62ch;
  padding-block:clamp(3.5rem,10vh,6rem);
}

.prose h1{
  margin:0;
  font:600 clamp(2.25rem,5.5vw,3.5rem)/1.02 var(--display);
  letter-spacing:-.045em;
}

.prose .stamp{
  margin:1rem 0 0;
  font-size:.75rem;
  color:var(--faint);
}

.prose h2{
  margin:2.5rem 0 .5rem;
  font-size:1rem;
  font-weight:600;
}

.prose p{
  margin:0 0 1rem;
  color:var(--muted);
  line-height:1.75;
}
.prose p:last-child{margin-bottom:0}

.prose .lede{
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}

.prose a{
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
}

.prose strong{color:var(--fg);font-weight:600}

@media (hover:hover){
  .back:hover,.identity a:hover,.handle:hover,.meta a:hover{color:var(--fg)}
  .prose a:hover{border-bottom-color:var(--fg)}
}

@media (max-width:38rem){
  .foot-row{flex-direction:column;align-items:flex-start;gap:1.5rem}
}