@property --transition{syntax:"<time>";initial-value:.45s;inherits:true}
@property --base-l{syntax:"<number>";initial-value:.17;inherits:true}
@property --base-c{syntax:"<number>";initial-value:.012;inherits:true}
@property --base-h{syntax:"<number>";initial-value:265;inherits:true}
@property --contrast-l{syntax:"<number>";initial-value:.86;inherits:true}
@property --contrast-c{syntax:"<number>";initial-value:.015;inherits:true}
@property --contrast-h{syntax:"<number>";initial-value:265;inherits:true}
@property --accent-l{syntax:"<number>";initial-value:.8;inherits:true}
@property --accent-c{syntax:"<number>";initial-value:.16;inherits:true}
@property --accent-h{syntax:"<number>";initial-value:158;inherits:true}

:root{
  --base:oklch(var(--base-l) var(--base-c) var(--base-h));
  --contrast:oklch(var(--contrast-l) var(--contrast-c) var(--contrast-h));
  --accent:oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --dim:color-mix(in oklab,var(--contrast) 58%,var(--base));
  --hair:color-mix(in oklab,var(--contrast) 42%,var(--base));
  --sheet:color-mix(in oklab,var(--base) 86%,transparent);
  --hatch:repeating-linear-gradient(-45deg,var(--contrast) 0 1px,#0000 0 10px);
  --focus:conic-gradient(from 90deg at top 1px left 1px,#0000 90deg,var(--accent) 0) 0 0/7px 7px border-box no-repeat,
          conic-gradient(from 180deg at top 1px right 1px,#0000 90deg,var(--accent) 0) 100% 0/7px 7px border-box no-repeat,
          conic-gradient(from 0deg at bottom 1px left 1px,#0000 90deg,var(--accent) 0) 0 100%/7px 7px border-box no-repeat,
          conic-gradient(from -90deg at bottom 1px right 1px,#0000 90deg,var(--accent) 0) 100% 100%/7px 7px border-box no-repeat;
  transition:--base-l var(--transition),--base-c var(--transition),--base-h var(--transition),
             --contrast-l var(--transition),--contrast-c var(--transition),--contrast-h var(--transition),
             --accent-l var(--transition),--accent-c var(--transition),--accent-h var(--transition);
  scrollbar-color:var(--hair) var(--base);
}

@media (prefers-color-scheme:light){
  :root{
    --base-l:.97;--base-c:.006;--base-h:95;
    --contrast-l:.26;--contrast-c:.012;--contrast-h:95;
    --accent-l:.52;--accent-c:.14;--accent-h:155;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--base);
  color:var(--contrast);
  font:15px/1.6 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  letter-spacing:-.02em;
  min-height:100dvh;
}
::selection{background:var(--accent);color:var(--base)}

#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}

.topbar{
  position:sticky;top:0;z-index:20;
  display:grid;grid-template-columns:1fr max-content;align-items:center;gap:20px;
  height:56px;padding:0 20px;
  background:var(--sheet);backdrop-filter:blur(6px);
  border-bottom:1px dashed var(--hair);
}
.topbar .pr{color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .pr b{color:var(--contrast);font-weight:400}
.bar-nav{display:flex;align-items:center;gap:18px;font-size:13px}
.bar-nav a,.bar-nav button{
  color:var(--contrast);text-decoration:none;text-transform:uppercase;letter-spacing:0;
  background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;
  transition:color var(--transition);outline:none;white-space:nowrap;
}
.bar-nav a:hover,.bar-nav button:hover{color:var(--accent);transition:none}
.bar-nav a:focus-visible,.bar-nav button:focus-visible{background:var(--focus)}
.bar-nav a[aria-current]{color:var(--accent)}
.key{color:var(--dim);margin-right:.35em}
.bar-nav a:hover .key,.bar-nav button:hover .key{color:inherit}

.wrap{position:relative;z-index:1;max-width:47rem;margin:0 auto;padding:0 20px 40px}

.hero{
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(340px,58vh,520px);padding:40px 0;
}
.hero.short{min-height:0;padding:54px 0 26px}
.hero .pr{color:var(--dim);font-size:13.5px;margin-bottom:1.1rem}
.hero .pr b{color:var(--contrast);font-weight:400}
.cur{display:inline-block;width:.55em;height:1em;background:var(--accent);vertical-align:-.15em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

h1{
  font-size:clamp(1.9rem,6.4vw,3rem);line-height:1.02;margin:0;
  letter-spacing:-.045em;text-transform:uppercase;font-weight:700;
}
.sub{color:var(--dim);font-size:13.5px;margin:.9rem 0 0;max-width:34rem}

.heading{
  display:grid;grid-template-columns:min-content 1fr;align-items:stretch;
  border:1px solid var(--contrast);margin:0 0 18px;
  font-size:1.1rem;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;
  transition:border-color var(--transition);
}
.heading span{
  background:var(--contrast);color:var(--base);border:3px solid var(--base);
  padding:5px 9px;white-space:nowrap;line-height:1.2;
  transition:background-color var(--transition),color var(--transition);
}
.heading::after{content:"";border-left:1px solid var(--contrast);background:var(--hatch);transition:border-color var(--transition)}

.sheet{
  border:1px dashed var(--hair);background:var(--sheet);backdrop-filter:blur(3px);
  padding:20px;margin:0 0 28px;
  transition:border-color var(--transition);
}
.sheet > .heading{margin:-20px -20px 18px;border-width:0 0 1px;border-style:solid}
.sheet > .heading span{border-width:3px}

p{margin:.7rem 0;cursor:text}
p:first-child{margin-top:0}
p:last-child{margin-bottom:0}
ul{margin:.6rem 0;padding-left:1.2rem}
li{margin:.3rem 0}
li::marker{color:var(--accent)}
h3{font-size:.98rem;font-weight:700;margin:1.6rem 0 .15rem;letter-spacing:-.025em}
h3:first-of-type{margin-top:.2rem}
.when{color:var(--dim);font-size:12.5px;margin:.15rem 0 .5rem}
hr{border:0;border-top:1px dashed var(--hair);margin:1.4rem 0;transition:border-color var(--transition)}

a{
  color:var(--accent);text-decoration:none;
  border-inline:5px solid #0000;margin-inline:-5px;
  transition:color var(--transition);outline:none;
}
a:hover{color:var(--contrast);transition:none}
a:focus-visible{background:var(--focus)}

mark{background:color-mix(in oklab,var(--accent) 26%,var(--base));color:var(--contrast);padding:0 .3em}
.k{color:var(--dim)}

.cta{
  display:inline-block;background:var(--accent);color:var(--base);
  padding:1px 9px;margin-inline:0;border:0;white-space:nowrap;
  transition:background-color var(--transition),color var(--transition);
}
.cta:hover{background:var(--contrast);color:var(--base);transition:none}

.grid{display:grid;grid-template-columns:repeat(2,1fr);padding:.5px;margin:0}
.grid > *{border:1px dashed var(--hair);margin:-.5px;padding:14px 16px;display:block;transition:border-color var(--transition)}
.grid .lbl{display:block;color:var(--dim);font-size:12px;text-transform:uppercase;margin-bottom:.25rem}
a.grid-item{color:var(--contrast);border-inline:1px dashed var(--hair);margin-inline:-.5px}
a.grid-item:hover{border-color:var(--accent);color:var(--accent);transition:none}

.banner{
  -webkit-mask-image:linear-gradient(to right,#0000,#000 12% 88%,#0000);
  mask-image:linear-gradient(to right,#0000,#000 12% 88%,#0000);
  overflow:hidden;margin:0 0 28px;
}
.banner ul{display:flex;gap:40px;padding:0;margin:0;list-style:none;width:max-content;animation:marquee 32s linear infinite}
.banner li{color:var(--dim);font-size:13px;text-transform:uppercase;white-space:nowrap;margin:0}
@keyframes marquee{to{transform:translateX(-50%)}}

footer{position:relative;z-index:1;border-top:1px dashed var(--hair);transition:border-color var(--transition)}
.footer-grid{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:47rem;margin:0 auto;padding:32px 20px;
  color:var(--dim);font-size:12.5px;
}
.footer-grid .col{display:grid;gap:5px;align-content:start}
.footer-grid .routes{display:flex;gap:16px;flex-wrap:wrap}
.footer-grid a{color:var(--dim)}
.footer-grid a:hover{color:var(--accent)}

.panel{
  position:fixed;top:57px;right:20px;z-index:30;width:340px;max-width:calc(100vw - 40px);
  background:var(--base);
}
.panel[hidden]{display:none}
.panel-bar{
  display:flex;align-items:center;justify-content:flex-end;height:44px;padding:0 14px;
  border:1px dashed var(--hair);background:var(--hatch);
}
.panel-close{
  background:var(--contrast);color:var(--base);border:3px solid var(--base);outline:1px solid var(--contrast);
  font:inherit;font-size:12px;text-transform:uppercase;padding:0 5px;cursor:pointer;
}
.panel-body{border:1px dashed var(--hair);border-top:0;padding:16px;display:grid;gap:14px}
.panel-title{font-size:12px;text-transform:uppercase;color:var(--dim)}
.rows{display:grid;gap:2px}
.row{
  display:grid;grid-template-columns:max-content 1fr repeat(3,16px);align-items:center;gap:6px;
  padding:3px 0;font-size:13px;cursor:pointer;color:var(--contrast);
  background:none;border:0;font-family:inherit;text-align:left;outline:none;
  transition:color var(--transition);
}
.row hr{margin:0;width:100%}
.row .sw{height:16px;border:1px solid var(--hair);padding:2px;transition:border-color var(--transition)}
.row .sw i{display:block;height:100%;width:100%}
.row:hover,.row.active{color:var(--accent);transition:none}
.row:hover .sw,.row.active .sw,.row:hover hr,.row.active hr{border-color:var(--accent);transition:none}
.row:focus-visible{background:var(--focus)}
.sliders{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:10px 12px;font-size:12px;text-transform:uppercase;color:var(--dim)}
.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:10px;
  background:var(--hatch);border:1px solid var(--hair);cursor:pointer;outline:none;margin:0;border-radius:0;
}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:0;background:var(--contrast);border:1px solid var(--base)}
.slider::-moz-range-thumb{width:16px;height:16px;border-radius:0;background:var(--contrast);border:1px solid var(--base);box-sizing:border-box}
.slider:focus-visible{background:var(--focus),var(--hatch)}

@media (max-width:700px){
  .topbar{padding:0 14px;gap:12px}
  .topbar .pr{display:none}
  .topbar{grid-template-columns:1fr}
  .bar-nav{justify-content:space-between;gap:10px;width:100%}
  .shortcut{display:none}
  .wrap{padding:0 14px 32px}
  .grid{grid-template-columns:1fr}
  .panel{top:0;right:0;left:0;width:100%;max-width:none;height:100dvh;overflow:auto}
  .panel-bar{border-inline:0;border-top:0}
  .panel-body{border-inline:0}
}
@media (prefers-reduced-motion:reduce){
  :root{--transition:0s}
  .cur{animation:none}
  .banner ul{animation:none}
  html{scroll-behavior:auto}
}
@media print{
  #bg,.topbar,.panel,.banner{display:none!important}
  body{background:#fff;color:#000}
  .sheet{border:0;background:none;padding:0;backdrop-filter:none}
  .heading{border-color:#000}
  .heading span{background:#000;color:#fff;border-color:#fff}
}