:root{
 --ink:#13171c; --panel:#0e1216; --paper:#f5f2ea; --line:#dcd5c6; --hair:#cfc7b5;
 --amber:#c0703a; --gold:#d4af45; --gold2:#b8932f; --obra:#9a9a9a;
 --txt:#272c33; --mut:#7c8590; --inv:#eee8db; --ok:#3f9b6e; --okbg:#173a2a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--paper);color:var(--txt);-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

header{position:sticky;top:0;z-index:50;color:var(--inv);
 background:linear-gradient(180deg,#171d24,#11161b);border-bottom:1px solid #2a323b;box-shadow:0 6px 18px -10px #000}
.hbar{display:flex;align-items:center;gap:18px;padding:10px 16px 4px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .tick{width:26px;height:26px;flex:0 0 auto;border:1px solid #3a434d;border-radius:4px;opacity:.9;
 background:linear-gradient(var(--gold),var(--gold)) 0 50%/100% 1.5px no-repeat,
 linear-gradient(var(--gold),var(--gold)) 50% 0/1.5px 100% no-repeat,
 radial-gradient(circle at 50% 50%,var(--gold) 0 3px,transparent 4px)}
.brand h1{font-size:15px;font-weight:700;margin:0;line-height:1.1;white-space:nowrap}
.brand h1 b{color:var(--gold)}
.brand .meta{font-size:11px;color:#9aa4af;margin:0}
.spacer{flex:1 1 auto}
.legend{display:flex;gap:14px;align-items:center;font-size:11px;color:#aeb6bf}
.legend i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.legend .sw{width:16px;height:8px;border-radius:2px;display:inline-block}
.sw.topo{background:var(--amber)}.sw.obra{background:var(--obra)}.sw.prog{background:var(--gold)}
.howto{font-size:11px;color:#828c96}
.navrow{display:flex;align-items:center;gap:8px;padding:6px 12px 10px;flex-wrap:wrap}
.arrow{flex:0 0 auto;width:32px;height:34px;border-radius:8px;border:1px solid #313a44;background:#1a212899;
 color:#cdd4dc;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.arrow:hover{background:#222b34;color:#fff;border-color:var(--gold2)}
.combo{flex:1 1 auto;min-width:150px;max-width:320px;height:34px;border-radius:8px;border:1px solid #313a44;
 background:#181f26;color:#dfe5ec;font-size:12.5px;padding:0 30px 0 12px;cursor:pointer;font-family:inherit;
 appearance:none;-webkit-appearance:none;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23c9a23a' stroke-width='1.6'/></svg>");
 background-repeat:no-repeat;background-position:right 10px center}
.combo:hover{border-color:var(--gold2)}
.combo:focus{outline:2px solid var(--gold2);outline-offset:1px}
.combo.has-sel{border-color:var(--gold);background:#20262c;color:#fff}
.combo.data{max-width:230px}
.combo option{background:#11161b;color:#e6ebf1}
.combo option:disabled{color:#7c858f}
.frame{display:block;width:100%;border:0;background:var(--paper)}
@media (max-width:820px){.legend,.howto{display:none}.brand h1{font-size:13px}.combo{min-width:120px}}