@font-face{font-family:MosvitaBE;src:url(fonts/Mosvita-BoldExpanded.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:MosvitaSBE;src:url(fonts/Mosvita-SemiBoldExpanded.otf) format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:MosvitaR;src:url(fonts/Mosvita-Regular.otf) format("opentype");font-weight:400;font-display:swap}
:root{
  --blue:#1a5cff; --bluebg:#eef3ff;
  --ink:#0a0a0a; --ink2:#1f2430; --mute:#6a7180;
  --line:#d8dbe2; --line2:#eceff4; --wash:#f6f7f9; --bg:#fff;
  --crit:#c0392b; --high:#b06000; --med:#6a7180;
  --mono:"SF Mono",Menlo,ui-monospace,monospace;
}
/* Light is the default. Dark is an explicit choice, never inferred from the OS,
   because this page is a demo people are sent a link to and it should look the
   same for everyone on first load. */
:root[data-t=dark]{--ink:#eef1f6;--ink2:#c9cedb;--mute:#8f98a8;--line:#24242a;--line2:#191920;--wash:#101014;--bg:#0a0a0a;--bluebg:#101a33;--crit:#ff6b5a;--high:#ffa83d}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:MosvitaR,ui-sans-serif,system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:MosvitaBE,ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;line-height:1.15}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* header */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:40}
.hd{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap}
.mark{font-family:MosvitaBE;font-size:19px;letter-spacing:-.02em}
.mark .tld{color:var(--blue)}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:6px 13px;border:1px solid var(--line);font-size:13px;color:var(--ink2);letter-spacing:.01em}
.nav a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.nav a:hover{text-decoration:none;border-color:var(--ink)}
.sp{flex:1}
.btn{font-family:inherit;font-size:13px;padding:8px 15px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer;letter-spacing:.01em}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{filter:brightness(1.08)}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
footer{border-top:1px solid var(--line);margin-top:72px;padding:28px 0 56px;color:var(--mute);font-size:13.5px}

/* theme toggle */
.tt{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink2);cursor:pointer;padding:0}
.tt:hover{border-color:var(--ink);color:var(--ink)}
.tt svg{width:17px;height:17px;fill:currentColor}
.tt .mo{display:none}
:root[data-t=dark] .tt .su{display:none}
:root[data-t=dark] .tt .mo{display:block}