:root{
  --paper:#FEFEFE;--ink:#1E1E1E;--ink-2:#4A4A4A;--ink-3:#6B6B6B;
  --pink:#F386A1;--magenta:#C2369A;--magenta-fill:#E551BA;--green:#03804A;--green-fill:#03AA5C;
  --well:#DEDEDE;--rule:#C4C4C4;--code:#EFEFEF;
  --sans:"Die Grotesk C","Helvetica Neue","Apple SD Gothic Neo","Pretendard","Malgun Gothic",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,"Apple SD Gothic Neo",monospace;
  --shadow:0 18px 40px -12px rgba(30,30,30,.45),0 2px 6px rgba(30,30,30,.18);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--pink);color:var(--ink);-webkit-font-smoothing:antialiased;scrollbar-color:var(--ink) var(--well)}
body{margin:0;min-height:100vh;font-family:var(--sans);font-size:15px;line-height:1.5}
::selection{background:var(--ink);color:var(--pink)}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 4px var(--paper)}
#dither{position:fixed;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;pointer-events:none}

/* Menu bar */
.menubar{position:sticky;top:0;z-index:5;display:flex;gap:6px;align-items:stretch;padding:0;font-size:15px}
.menubar>*{background:var(--paper);padding:5px 10px;text-decoration:none;white-space:nowrap}
.menubar .brand{font-weight:600}
.menubar .spacer{flex:1;background:none;padding:0}
.menubar .dark{background:var(--ink);color:var(--paper)}
.menubar a:hover{background:var(--ink);color:var(--paper)}
.menubar a.dark:hover{background:var(--paper);color:var(--ink)}

/* Windows */
.desktop{max-width:1360px;margin:0 auto;padding:clamp(16px,3vw,40px) clamp(12px,2.5vw,32px) 48px;display:grid;gap:clamp(16px,2vw,28px)}
.win{background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow);min-width:0}
.win-bar{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);font:500 12px/1 var(--mono);padding:6px 8px;letter-spacing:.02em}
.win-bar::before{content:"";width:11px;height:11px;border:1px solid var(--paper);flex:none}
.win-bar .meta{margin-left:auto;opacity:.75}
.win-body{padding:clamp(16px,2vw,24px)}

/* Controls */
button,select{font:inherit;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--ink);background:var(--paper);border-radius:0;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .12s,color .12s}
.btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.btn:disabled,.btn.primary:disabled{background:var(--paper);color:var(--ink-2);border-color:var(--rule);cursor:not-allowed}
.btn:disabled .tag{color:var(--ink)}
.btn[aria-busy=true]{cursor:progress;opacity:1}
.btn .tag{font:500 11px/1 var(--mono);padding:3px 5px;background:var(--pink);color:var(--ink)}
.btn.primary .tag{background:var(--pink)}
.btn svg{width:16px;height:16px;flex:none}
.field{display:inline-flex;align-items:stretch;border:1px solid var(--ink);min-height:40px}
.field label{display:flex;align-items:center;padding:0 10px;background:var(--ink);color:var(--paper);font:500 12px var(--mono)}
.field select{appearance:none;border:0;border-radius:0;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231E1E1E'/%3E%3C/svg%3E") no-repeat right 10px center;padding:0 30px 0 10px;min-width:140px;cursor:pointer}
.chip{display:inline-block;font:500 12px/1.2 var(--mono);padding:3px 6px;background:var(--ink);color:var(--paper)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Info box (bottom-left brand box) */
.about{max-width:560px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.about .win-body{padding:12px 14px}
.about p{margin:0}
.about p+p{margin-top:6px}

/* Tables */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font:500 11px/1 var(--mono);text-align:left;color:var(--ink-2);padding:8px;border-bottom:1px solid var(--ink);letter-spacing:.04em}
td{padding:7px 8px;border-bottom:1px solid var(--well)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important}}
@media (max-width:640px){.menubar{font-size:13px;background:var(--ink);gap:1px}.menubar .hide-sm{display:none}}