:root{color:#dce8e7;background:#07091d;font-family:Courier New,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-synthesis:none;text-rendering:geometricPrecision}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}button,input,select{font:inherit}button,select,input{color:inherit}.app-shell{position:fixed;inset:0;width:100%;height:100%;overflow:clip;contain:strict;background:#07091d;isolation:isolate}.render-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;outline:none;border:0;touch-action:none}.app-shell:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,22,.18),transparent 18%,transparent 76%,rgba(5,5,18,.32)),radial-gradient(circle at 50% 48%,transparent 42%,rgba(2,3,12,.2) 100%)}.glass-panel{position:absolute;z-index:2;border:1px solid rgba(113,221,197,.22);background:linear-gradient(145deg,#070d1ce0,#070916ad);box-shadow:0 10px 36px #00000040,inset 0 1px #ffffff06;backdrop-filter:blur(7px)}.brand-panel{top:14px;left:14px;display:flex;align-items:flex-end;gap:18px;padding:9px 12px 8px}.eyebrow{color:#64dfbd;font-size:7px;letter-spacing:.2em;text-transform:uppercase}.brand-panel h1{margin:3px 0 0;color:#f0f7f5;font-size:17px;line-height:1;letter-spacing:.045em}.brand-panel h1 span{color:#869697;font-weight:400}.brand-panel p{margin:0;color:#758887;font-size:8px;letter-spacing:.05em}.metrics-panel{top:14px;right:14px;display:flex;align-items:stretch;padding:3px;max-width:calc(100vw - 430px);flex-wrap:wrap;justify-content:flex-end}.metric{min-width:48px;padding:6px 9px 5px;border-left:1px solid rgba(255,255,255,.055)}.metric:first-child{border-left:0}.metric.wide{min-width:86px}.metric span{display:block;color:#657c7a;font-size:6px;letter-spacing:.13em}.metric strong{display:block;margin-top:2px;color:#bacbc8;font-size:9px;font-weight:500}.metric.primary strong{color:#61e6bd}.metric.connection{min-width:72px}.metric.connection.connected strong{color:#61e6bd}.metric.connection.reconnecting strong,.metric.connection.connecting strong{color:#f1c96b}.metric.connection.error strong{color:#ff718e}.panel-toggle{position:absolute;z-index:4;top:70px;left:14px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(121,220,196,.28);background:#070c19d6;padding:5px 9px;cursor:pointer;color:#a8bab7;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.toggle-key{display:inline-grid;width:15px;height:15px;place-items:center;border:1px solid rgba(100,223,189,.38);color:#68e3be;font-size:7px}.panel-toggle:hover,.panel-toggle:focus-visible{border-color:#66d3b6;color:#e8f6f2;outline:none}.controls-panel{top:102px;left:14px;width:318px;max-width:calc(100vw - 28px);max-height:calc(100vh - 120px);overflow-x:hidden;overflow-y:auto;padding:13px;scrollbar-color:#3a7569 #0a1020;scrollbar-width:thin}.controls-panel::-webkit-scrollbar{width:7px}.controls-panel::-webkit-scrollbar-track{background:#0a1020}.controls-panel::-webkit-scrollbar-thumb{border:2px solid #0a1020;background:#3a7569}.control-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;color:#d0dedb;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.control-heading small{display:block;margin-top:3px;color:#5d7772;font-size:6px;letter-spacing:.15em}.live-indicator{color:#61dbb8;font-size:7px}.live-indicator:before{content:"●";margin-right:4px}.control-section{margin:0 -3px 12px;padding:0 3px 10px;border-bottom:1px solid rgba(123,199,181,.1)}.control-section h2{margin:0 0 8px;color:#6ebda9;font-size:7px;font-weight:400;letter-spacing:.17em;text-transform:uppercase}.palette-description{margin:-4px 0 4px;color:#657976;font-size:7px;line-height:1.45}.control{display:block;margin:8px 0}.control>span{display:flex;justify-content:space-between;margin-bottom:4px;color:#8ea09d;font-size:8px}.control output{color:#d6e8e3}.control select,.ramp-input{width:100%;border:1px solid rgba(139,176,165,.2);border-radius:0;background:#091020;padding:6px 7px;font-size:8px;outline:none}.control select:focus,.ramp-input:focus{border-color:#58c9aa}input[type=range]{width:100%;height:2px;margin:6px 0;appearance:none;background:#293e43;accent-color:#65d2b3}input[type=range]::-webkit-slider-thumb{width:10px;height:10px;appearance:none;border:1px solid #c0ede0;border-radius:50%;background:#54bfa1;cursor:pointer}.ramp-input{color:#e5fff6;letter-spacing:.08em}.ramp-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:-3px}.ramp-presets button,.reset-button{border:1px solid rgba(139,176,165,.18);background:#091020;padding:5px 3px;cursor:pointer;color:#758985;font-size:6px;text-transform:uppercase}.ramp-presets button:hover,.reset-button:hover{color:#d8eee8;border-color:#58c9aa}.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 2px}.color-row label{display:flex;align-items:center;justify-content:space-between;color:#81948f;font-size:7px}.color-row input{width:30px;height:20px;padding:0;border:1px solid #344b50;background:transparent}.reset-button{width:100%;padding:7px}.scene-legend{right:14px;bottom:14px;display:flex;gap:12px;padding:7px 9px;color:#718481;font-size:6px;letter-spacing:.09em}.scene-legend span{display:flex;align-items:center;gap:4px}.swatch{width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}.swatch.player{color:#f1ad4e}.swatch.stone{color:#8d91bd}.swatch.grove{color:#35c89b}.swatch.crystal{color:#3aeadc}.palette-badge{position:absolute;z-index:2;bottom:17px;left:15px;color:#93bdb394;font-size:6px;letter-spacing:.18em;text-transform:uppercase}.error-panel{position:absolute;z-index:5;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:min(520px,calc(100vw - 40px));border:1px solid #db556f;background:#1a0b18;padding:20px;color:#ffb4c1}.gateway-panel{z-index:6;top:50%;left:50%;width:min(430px,calc(100vw - 32px));max-height:calc(100vh - 130px);overflow-y:auto;transform:translate(-50%,-50%);padding:18px;border-color:#64dfbd73}.gateway-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;color:#d8ece7;font-size:12px;letter-spacing:.1em}.gateway-heading small{display:block;margin-top:4px;color:#61dbb8;font-size:7px}.gateway-heading button,.gateway-form button,.character-create button,.character-list button,.network-lab button{border:1px solid rgba(100,223,189,.3);background:#091020;padding:8px 10px;cursor:pointer;color:#c9e0da;font-size:8px;text-transform:uppercase}.gateway-heading button:disabled,.gateway-form button:disabled,.character-create button:disabled,.character-list button:disabled{cursor:wait;opacity:.55}.gateway-form{display:grid;gap:11px}.gateway-form label{display:grid;gap:5px;color:#829995;font-size:8px}.gateway-form input,.character-create input{min-width:0;border:1px solid rgba(139,176,165,.25);background:#080e1d;padding:9px;outline:none;color:#e3f1ed}.gateway-form input:focus,.character-create input:focus{border-color:#58c9aa}.gateway-form .gateway-link{border:0;background:transparent;padding:3px;color:#6f9d92;text-transform:none}.gateway-error{margin-top:12px;border:1px solid rgba(255,113,142,.35);padding:8px;color:#ff9caf;font-size:8px;line-height:1.5}.character-gateway>p{margin:0 0 12px;color:#758c87;font-size:8px;line-height:1.5}.character-list{display:grid;gap:6px}.character-list button{display:flex;align-items:center;justify-content:space-between;text-align:left}.character-list button strong{color:#f0ca7d;font-size:10px}.character-list button span{color:#718984;font-size:7px}.character-list small{color:#718984;font-size:8px}.character-create{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:13px}.network-lab{left:14px;bottom:35px;width:260px;padding:10px}.network-lab>div:first-child{display:flex;justify-content:space-between;color:#65d2b3;font-size:7px}.network-lab>div:first-child strong{color:#f0ca7d;font-weight:400}.network-lab .control{margin:6px 0}.network-lab button{width:100%;margin-top:5px}@media(max-width:760px){.brand-panel p{display:none}.metrics-panel{top:auto;right:10px;bottom:10px}.metric:nth-child(n+4){display:none}.scene-legend,.palette-badge{display:none}.controls-panel{top:98px;left:10px;max-height:calc(100vh - 112px)}.panel-toggle{left:10px}.network-lab{left:10px;bottom:10px;width:220px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}