:root{
  --ground:#0B0D10; --panel:#15181D; --key:#1E222A; --key-edge:#2C323C;
  --amber:#FF8A1F; --amber-dim:#8A4A10; --cyan:#57D6E6; --cyan-dim:#1F5A63;
  --ink:#E8EAED; --muted:#7E8691; --faint:#454B55;
  --danger:#E5533D; --ok:#4FBF7B;
  --u:64px; --gap:5px;
  --display:"Bahnschrift","DIN Alternate","Oswald","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono","Consolas","SF Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: light){
  :root{
    --ground:#F1EEE9; --panel:#FFFFFF; --key:#FBFAF8; --key-edge:#D9D4CC;
    --amber:#A85400; --amber-dim:#E8C9A6; --cyan:#0D6E7D; --cyan-dim:#B6DDE3;
    --ink:#191C21; --muted:#6B7280; --faint:#B8BCC3;
    --danger:#B3311D; --ok:#1E7A46;
  }
}
:root[data-theme="light"]{
  --ground:#F1EEE9; --panel:#FFFFFF; --key:#FBFAF8; --key-edge:#D9D4CC;
  --amber:#A85400; --amber-dim:#E8C9A6; --cyan:#0D6E7D; --cyan-dim:#B6DDE3;
  --ink:#191C21; --muted:#6B7280; --faint:#B8BCC3;
  --danger:#B3311D; --ok:#1E7A46;
}
:root[data-theme="dark"]{
  --ground:#0B0D10; --panel:#15181D; --key:#1E222A; --key-edge:#2C323C;
  --amber:#FF8A1F; --amber-dim:#8A4A10; --cyan:#57D6E6; --cyan-dim:#1F5A63;
  --ink:#E8EAED; --muted:#7E8691; --faint:#454B55;
  --danger:#E5533D; --ok:#4FBF7B;
}

*{box-sizing:border-box}
html,body{max-width:100%; overflow-x:hidden}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--display); font-size:15px; line-height:1.5;
  padding:24px 20px 60px;
}
.wrap{max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
a{color:var(--amber)}
a:focus-visible,button:focus-visible,input:focus-visible,.key:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

/* ---- masthead ---- */
.masthead{display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  flex-wrap:wrap; border-bottom:1px solid var(--key-edge); padding-bottom:14px}
.brand{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit}
.brand b{font-size:clamp(20px,3vw,30px); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.brand b span{color:var(--amber)}
.brand small{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em}
nav.top{display:flex; gap:16px; align-items:center; font-size:13px; letter-spacing:.03em}
nav.top a{color:var(--muted); text-decoration:none}
nav.top a:hover,nav.top a[aria-current="page"]{color:var(--amber)}

/* ---- controls / buttons ---- */
.controls{display:flex; flex-direction:column; gap:12px}
.row-ctl{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.bar{display:flex; flex-wrap:wrap; gap:8px}
.ctl-label{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); min-width:64px}
button.seg,.btn{
  font-family:var(--display); font-size:13px; letter-spacing:.04em;
  background:var(--panel); color:var(--muted);
  border:1px solid var(--key-edge); border-radius:2px;
  padding:6px 13px; cursor:pointer; text-decoration:none; display:inline-block;
  transition:color .12s, border-color .12s, background .12s;
}
button.seg:hover,.btn:hover{color:var(--ink); border-color:var(--muted)}
button.seg[aria-pressed="true"]{background:var(--amber); color:var(--ground); border-color:var(--amber); font-weight:600}
button.seg.layer[aria-pressed="true"]{background:var(--cyan); color:var(--ground); border-color:var(--cyan)}
button.seg.clear{padding:4px 10px; font-size:12px}
button.seg.clear:hover{color:var(--amber); border-color:var(--amber)}
.btn.primary{background:var(--amber); color:var(--ground); border-color:var(--amber); font-weight:600}
.btn.primary:hover{color:var(--ground); filter:brightness(1.1)}
.btn.danger:hover{color:var(--danger); border-color:var(--danger)}
.btn[disabled],button[disabled]{opacity:.45; cursor:not-allowed}
.count{font-family:var(--mono); font-size:11px; opacity:.75; margin-left:5px}

/* ---- keyboard ---- */
.board-scroll{overflow-x:auto; padding-bottom:8px}
.board{display:flex; gap:26px; width:max-content; padding:18px;
  background:var(--panel); border:1px solid var(--key-edge); border-radius:4px}
.block{display:flex; flex-direction:column; gap:var(--gap)}
.krow{display:flex; gap:var(--gap)}
.key{
  position:relative; height:var(--u); flex:0 0 auto;
  background:var(--key); border:1px solid var(--key-edge); border-radius:3px;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:3px 4px; overflow:hidden; cursor:default;
  transition:border-color .12s, background .12s;
}
.key .glyph{font-family:var(--mono); font-size:9.5px; color:var(--muted); letter-spacing:.02em; line-height:1.1; flex:0 0 auto}
.key .acts{font-size:9.5px; line-height:1.2; color:var(--ink); overflow:hidden;
  margin-top:2px; display:flex; flex-direction:column; gap:2px}
.key .acts span{white-space:normal; overflow-wrap:anywhere; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.key.bound{border-color:var(--amber); background:color-mix(in srgb, var(--amber) 12%, var(--key))}
.key.bound .glyph{color:var(--amber)}
.key.layerbound{border-color:var(--cyan); background:color-mix(in srgb, var(--cyan) 14%, var(--key))}
.key.layerbound .glyph{color:var(--cyan)}
.key.ismod{border-color:var(--cyan); border-style:dashed}
.key.unbound .glyph{color:var(--faint)}
.key:hover{border-color:var(--ink)}
.key.pinned{outline:2px solid var(--ink); outline-offset:1px}
.marker{position:absolute; top:0; right:0; width:0; height:0;
  border-left:7px solid transparent; border-top:7px solid var(--cyan)}

.legend{display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--muted)}
.legend i{display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:6px; vertical-align:-1px}
.sw-amber{background:color-mix(in srgb, var(--amber) 40%, var(--key)); border:1px solid var(--amber)}
.sw-cyan{background:color-mix(in srgb, var(--cyan) 40%, var(--key)); border:1px solid var(--cyan)}
.sw-none{background:var(--key); border:1px solid var(--key-edge)}

/* ---- cards ---- */
.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--key-edge); border-radius:4px; padding:16px 18px}
.card h2{margin:0 0 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px}
.card-head h2{margin:0}
.layer-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.layer-list li{display:flex; gap:10px; align-items:baseline; font-size:13px}
kbd{font-family:var(--mono); font-size:11px; background:var(--key); color:var(--cyan);
  border:1px solid var(--cyan-dim); border-radius:3px; padding:1px 6px; white-space:nowrap}
kbd.amber{color:var(--amber); border-color:var(--amber-dim)}
.detail{min-height:70px}
.detail .dk{font-family:var(--mono); color:var(--amber); font-size:16px; margin-bottom:8px; display:block}
.detail table{width:100%; border-collapse:collapse; font-size:12.5px}
.detail td{padding:3px 8px 3px 0; vertical-align:top; border-bottom:1px solid var(--key-edge)}
.detail td.c{font-family:var(--mono); font-size:10.5px; color:var(--muted); white-space:nowrap; letter-spacing:.04em}
.detail td.m{font-family:var(--mono); font-size:10.5px; color:var(--cyan); white-space:nowrap}
.hint{color:var(--muted); font-size:13px; margin:0}

/* ---- dropzone ---- */
.drop{
  border:2px dashed var(--key-edge); border-radius:6px; background:var(--panel);
  padding:44px 24px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:12px; transition:border-color .15s, background .15s;
}
.drop.over{border-color:var(--amber); background:color-mix(in srgb, var(--amber) 8%, var(--panel))}
.drop h1{margin:0; font-size:clamp(19px,2.6vw,26px); font-weight:600; letter-spacing:.03em; text-wrap:balance}
.drop p{margin:0; color:var(--muted); font-size:14px; max-width:62ch}
.drop code{font-family:var(--mono); font-size:12.5px; color:var(--ink);
  background:var(--key); border:1px solid var(--key-edge); border-radius:3px; padding:1px 6px}
.path{font-family:var(--mono); font-size:11.5px; color:var(--muted); overflow-wrap:anywhere}

/* ---- forms ---- */
.form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:4px}
.field label{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
input[type=text]{
  font-family:var(--display); font-size:14px; color:var(--ink);
  background:var(--key); border:1px solid var(--key-edge); border-radius:3px; padding:7px 10px; min-width:220px;
}
.msg{font-size:13px; padding:10px 12px; border-radius:3px; border:1px solid}
.msg.err{color:var(--danger); border-color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent)}
.msg.ok{color:var(--ok); border-color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent)}
.msg code{font-family:var(--mono); overflow-wrap:anywhere}

/* ---- gallery ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.tile{background:var(--panel); border:1px solid var(--key-edge); border-radius:4px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; transition:border-color .12s}
.tile:hover{border-color:var(--amber)}
.tile .t{font-size:15px; font-weight:600; overflow-wrap:anywhere}
.tile .by{font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.tile .stat{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.04em;
  display:flex; gap:10px; flex-wrap:wrap; font-variant-numeric:tabular-nums}

footer{color:var(--muted); font-size:12px; font-family:var(--mono);
  border-top:1px solid var(--key-edge); padding-top:14px; display:flex; gap:16px; flex-wrap:wrap}
footer a{color:var(--muted)}
.prose{max-width:70ch; display:flex; flex-direction:column; gap:14px}
.prose h2{font-size:15px; letter-spacing:.04em; text-transform:none; color:var(--ink); margin:10px 0 0}
.prose p,.prose li{font-size:14px; color:var(--ink)}
.prose ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}

@media (prefers-reduced-motion: reduce){*{transition:none !important}}