:root{
  --gold:#d2b462;
  --ink:#ececf1;
  --muted:#aeb3c1;
  --bg:#000;
  --panel:#0b0b0f;
  --panel-2:#101019;
  --line:#232331;
  --shadow:0 10px 30px rgba(0,0,0,.55);
  --cat:#d2b462;
  --pat:#79b8ff;
  --trg:#f39c12;
  --rsp:#e74c3c;
  --gui:#2ecc71;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Cormorant Garamond', serif}

.brand{position:sticky;top:0;z-index:10;padding:14px 18px;margin:0;font-family:'Cinzel', serif;font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:#d6d8e4;background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0))}
.brand .dot{color:var(--gold)}
.brand a{color:inherit;text-decoration:none}

.wrap{max-width:1200px;margin:24px auto;padding:0 18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
h1{font-family:'Cinzel', serif;font-size:26px;letter-spacing:.06em;margin:0}

.controls{display:flex;gap:8px;align-items:center}
.controls input[type="search"], .controls select{appearance:none;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:.5rem .7rem;border-radius:10px;box-shadow:var(--shadow)}
.controls button{background:transparent;border:1px solid var(--line);color:var(--ink);padding:.5rem .8rem;border-radius:10px;cursor:pointer}
.controls button:hover{border-color:var(--gold);color:#fff}

.grid{display:grid;grid-template-columns:280px 1fr 320px;gap:12px;min-height:70vh}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.legend h2,.details h2{font-family:'Cinzel', serif;font-size:16px;margin:0 0 8px}
.legend ul{list-style:none;padding:0;margin:0 0 8px 0}
.legend li{display:flex;align-items:center;gap:8px;color:#dcdfe8;font-size:14px;margin:6px 0}
.legend .swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line)}
.legend .swatch.category{background:var(--cat)}
.legend .swatch.pattern{background:var(--pat)}
.legend .swatch.trigger{background:var(--trg)}
.legend .swatch.response{background:var(--rsp)}
.legend .swatch.guidance{background:var(--gui)}
.legend .hint{color:var(--muted);font-size:12px}

#cy{border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.03), rgba(0,0,0,0));}
#cy{min-height:70vh}

.details p{margin:.4rem 0}
.details .kv{margin:.3rem 0}
.details .key{color:var(--muted)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width: 1024px){
  .grid{grid-template-columns:1fr;grid-auto-rows:auto}
  #cy{min-height:60vh}
}