.g-view-switch { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.g-view-switch a[aria-current="page"] { background:#d4b57b; color:#102824; }
.kg-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:24px; }
.kg-map { position:relative; width:100%; max-width:800px; margin:auto; aspect-ratio:1; }
.kg-glass { width:100%; height:100%; }
.kg-glass text { font:15px Georgia,serif; }
.kg-gem { position:absolute; width:40px; height:44px; transform:translate(-50%,-50%); display:grid; place-items:center; color:#fff2cf; text-decoration:none; border-radius:5px; }
.kg-gem svg { width:36px; height:40px; grid-area:1/1; animation:kg-drift var(--drift) ease-in-out var(--delay) infinite alternate; }
.kg-gem span { grid-area:1/1; z-index:1; font:600 10px system-ui,sans-serif; text-shadow:0 1px 3px #000; pointer-events:none; }
.kg-gem:hover,.kg-gem:focus-visible,.kg-gem[aria-current] { outline:2px solid #f1dab0; outline-offset:2px; background:#d4b57b22; }
.kg-gem:hover svg,.kg-gem:focus-visible svg,.kg-paused .kg-gem svg { animation-play-state:paused; }
.kg-preview { border:1px solid #bda57455; padding:20px; background:#102824; min-width:0; }
.kg-preview [data-kg-preview] { height:270px; overflow:auto; }
.kg-preview h2 { font:400 26px Georgia,serif; color:#f1dab0; margin:16px 0 10px; }
.kg-preview h3 { font:500 17px Georgia,serif; line-height:1.4; }
.kg-preview p,.kg-guide,.kg-selection-note { color:#bbc7ba; line-height:1.6; }
.kg-guide { font:13px/1.6 system-ui,sans-serif; border-top:1px solid #bda57433; padding-top:15px; }
.kg-affiliations { height:300px; overflow:auto; border-top:1px solid #bda57433; padding-top:15px; }
.kg-sample { float:right; width:48px; margin:0 0 8px 8px; }
.kg-sample svg { width:100%; display:block; }
.kg-affiliations dl { margin:0; font:13px/1.5 system-ui,sans-serif; }
.kg-affiliations dl>div { margin-bottom:12px; }
.kg-affiliations dt { color:#bbc7ba; }
.kg-affiliations dt small { display:block; font-size:11px; }
.kg-affiliations dd { margin:3px 0 0; color:#f1dab0; font-size:16px; }
.kg-swatch { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--locus-color); margin-right:8px; }
.kg-key { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:8px 0 24px; }
.kg-key span { display:flex; align-items:center; gap:6px; font:13px system-ui,sans-serif; }
.kg-key svg { width:24px; height:28px; }
.kg-directory { border-block:1px solid #bda57455; padding:16px 0; margin:20px 0; }
.kg-directory summary { cursor:pointer; color:#f1dab0; }
.kg-directory>div { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin-top:16px; }
.kg-directory a { color:#eadfc7; padding:12px; background:#17332b; text-decoration:none; }
.kg-directory small { display:block; color:#bbc7ba; }
.g-kaleidoscope + .g-character { margin-top:32px; }
@keyframes kg-drift { from { transform:translateY(-2px) rotate(-2deg); } to { transform:translateY(2px) rotate(2deg); } }
@media(prefers-reduced-motion:reduce) { .kg-gem svg { animation:none; } }
@media(max-width:1050px) { .kg-layout { grid-template-columns:1fr; gap:12px; } .kg-map { max-width:800px; margin:auto; } .kg-preview [data-kg-preview] { height:140px; } .kg-preview .medal { float:left; margin:0 20px 10px 0; } .kg-guide { display:inline-block; margin-right:20px; } }
@media(max-width:800px) { .kg-map { overflow:hidden; } .kg-gem { width:25px; height:28px; pointer-events:none; visibility:hidden; } .kg-gem svg { visibility:visible; width:20px; height:24px; animation:none; } .kg-glass text { font-size:20px; } .kg-directory>div { grid-template-columns:1fr; } }