*{box-sizing:border-box}body,html{margin:0;background:#0b0e13;color:#e6e9ef;font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:#8fb4ff}code{font-family:ui-monospace,monospace;font-size:.92em}.gate{min-height:100vh;display:grid;place-items:center;align-content:center;grid-gap:8px;gap:8px;padding:24px;text-align:center}.gate h1{margin:0}.card button,.composer button,.gbtn,.header-actions button,.row button{background:#2b6cff;color:#fff;border:0;border-radius:10px;padding:8px 14px}.text-btn{background:none;border:0;color:#8fb4ff;padding:6px 8px}.err{color:#ff8d8d}.meta{color:#8b95a7;font-size:13px}.empty{color:#6a7384;font-style:italic}.role{margin-top:0}.office{min-height:100vh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;padding:14px 16px 8px;flex-wrap:wrap;position:relative;z-index:6;background:#0b0e13}header h1{margin:0;font-size:20px;letter-spacing:.3px}header h1 small{color:#8b95a7;font-weight:500;font-size:14px;margin-left:8px}.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.stage{display:flex;align-items:stretch;gap:0;min-height:0}.map-col{flex:1 1;min-width:0;padding:0 12px 20px}.map-scroll{overflow:auto;max-height:72vh;border:1px solid #1f2632;border-radius:14px;background:#12151c}.map{width:960px;height:600px;display:block;image-rendering:pixelated;cursor:pointer}.roster{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.roster button{display:flex;align-items:center;gap:8px;background:#131821;border:1px solid #1f2632;border-radius:12px;padding:8px 10px;text-align:left}.roster button.on,.roster button:hover{border-color:#2b6cff}.roster i{width:10px;height:10px;border-radius:2px;display:block}.roster small{color:#8b95a7}.panel{width:min(420px,100%);background:#10141b;border-left:1px solid #1f2632;display:flex;flex-direction:column;max-height:100vh;position:-webkit-sticky;position:sticky;top:0}.panel-bar{display:flex;justify-content:flex-end;padding:8px 8px 0}.panel-body{overflow:auto;padding:4px 16px 24px}.panel h2{margin:0 0 6px;font-size:22px}.panel h3{margin:18px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8b95a7}.items{list-style:none;margin:0;padding:0;display:grid;grid-gap:8px;gap:8px}.card,.items li,.thread p{background:#171c26;border:1px solid #242b38;border-radius:10px;padding:8px 10px}.card,.row{margin-top:8px}.row{flex-wrap:wrap;gap:6px}.links,.row{display:flex}.links{gap:12px}.linkish{background:none;border:0;color:#8fb4ff;padding:0}.thread{display:grid;grid-gap:6px;gap:6px}.thread .me{border-color:#2b4a86}.composer{display:grid;grid-gap:8px;gap:8px;margin-top:10px}.composer textarea{width:100%;background:#0e131b;border:1px solid #2a3344;border-radius:10px;padding:8px;resize:vertical}.piano{position:relative;height:148px;margin:8px 0 4px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.whites{display:flex;height:100%;gap:2px}.white-key{flex:1 1;background:linear-gradient(#fff,#e7e2d8);color:#3a3a3a;border:0;border-radius:0 0 6px 6px;position:relative}.white-key span{position:absolute;bottom:6px;left:0;right:0;font-size:10px}.white-key:active{background:#d7ecff}.blacks{position:absolute;left:0;right:0;top:0;height:58%;pointer-events:none}.black-key{pointer-events:auto;position:absolute;width:3.2%;height:100%;background:linear-gradient(#333,#111);border:0;border-radius:0 0 4px 4px}.black-key:active{background:#3d6cff}@media (max-width:800px){.stage{flex-direction:column}.map{width:820px;height:512px}.map-scroll{max-height:58vh}.panel{position:fixed;left:0;right:0;top:168px;bottom:0;width:auto;height:auto;z-index:4;border-left:0;border-top:1px solid #2a3344;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.45);max-height:none}}