:root{
  --ink:#0b1f2a;
  --paper:#eaf2f5;
  --paper-2:#dfeaef;
  --cyan:#0a7ea6;
  --red:#c2410c;
  --grid:rgba(10,126,166,0.12);
  --grid-strong:rgba(10,126,166,0.22);
}
html,body{background:var(--paper);color:var(--ink);}
body{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.font-display{font-family:'Fraunces', serif; font-feature-settings:"ss01","ss02";}
.font-mono{font-family:'JetBrains Mono', monospace;}
.tick::before{content:""; display:inline-block; width:.6rem; height:1px; background:currentColor; margin-right:.5rem; vertical-align:middle;}
.stamp{
  border:1px solid var(--cyan);
  color:var(--cyan);
  transform:rotate(-3deg);
  font-family:'JetBrains Mono', monospace;
  letter-spacing:.15em;
}
.frame{ border:1px solid var(--ink); position:relative;}
.frame::before,.frame::after,.frame .c1,.frame .c2{
  content:""; position:absolute; width:8px; height:8px; border:1px solid var(--ink); background:var(--paper);
}
.frame::before{top:-5px; left:-5px;}
.frame::after{top:-5px; right:-5px;}
.frame .c1{bottom:-5px; left:-5px;}
.frame .c2{bottom:-5px; right:-5px;}
.dim{ color:#5b7682;}
.rev{ background:var(--ink); color:var(--paper);}
.hatch{
  background-image: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 8px);
}
.marquee-track{ animation: marq 40s linear infinite; }
@keyframes marq { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.reveal{ opacity:0; transform:translateY(8px); animation:rv .8s ease forwards;}
@keyframes rv { to{opacity:1; transform:none;} }
.r1{animation-delay:.05s} .r2{animation-delay:.15s} .r3{animation-delay:.25s} .r4{animation-delay:.35s} .r5{animation-delay:.45s}
.axis-x{ background:linear-gradient(90deg, var(--cyan) 50%, transparent 50%); background-size:8px 1px; height:1px;}
.axis-y{ background:linear-gradient(0deg, var(--cyan) 50%, transparent 50%); background-size:1px 8px; width:1px;}
.blueprint-shadow{ box-shadow: 6px 6px 0 var(--ink); }
details > summary { list-style:none; cursor:pointer;}
details > summary::-webkit-details-marker{ display:none;}
.arrow-r::after{ content:"→"; margin-left:.5rem;}
.arrow-l::before{ content:"←"; margin-right:.5rem;}
.crosshair{
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 100% 50%, 50% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.small-caps{ font-variant: all-small-caps; letter-spacing:.18em;}
.dropcap::first-letter{
  font-family:'Fraunces', serif; font-weight:700;
  font-size: 5.2rem; line-height:.85; float:left;
  padding: .3rem .6rem 0 0; color: var(--cyan);
}
.prose-blueprint h2, .prose-blueprint h3 { font-family:'Fraunces', serif; margin-top: 2.5rem; margin-bottom: .75rem;}
.prose-blueprint h2 { font-size: 1.85rem; line-height: 1.1;}
.prose-blueprint h3 { font-size: 1.45rem;}
.prose-blueprint p { margin-bottom: 1.25rem; line-height: 1.85;}
.prose-blueprint ul, .prose-blueprint ol { margin: 1rem 0 1.25rem 1.5rem; line-height: 1.85;}
.prose-blueprint a { color: var(--cyan); text-decoration: underline;}
.prose-blueprint code { background: rgba(10,126,166,0.1); padding: 1px 6px; border-radius: 3px; font-size: .9em;}
.prose-blueprint pre { background:#fff; border:1px solid var(--ink); padding: 1rem; overflow-x: auto; margin: 1rem 0; font-size: .85em;}
.prose-blueprint blockquote { border-left: 3px solid var(--cyan); padding-left: 1rem; color:#5b7682; margin: 1rem 0;}