*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#eceef0;background:#0d0e10;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}.viewer{width:100vw;height:100vh;position:relative}.viewer canvas{touch-action:none;display:block}.hud{z-index:10;pointer-events:none;background:linear-gradient(#0d0e10d9 0%,#0d0e1000 100%);padding:18px 22px 12px;position:absolute;top:0;left:0;right:0}.hud-kicker{text-transform:uppercase;letter-spacing:.14em;color:#3fd8c4;margin-bottom:4px;font-family:Bahnschrift,Arial Narrow,system-ui,sans-serif;font-size:12px;font-weight:600}.hud h1{text-transform:uppercase;letter-spacing:-.01em;color:#eceef0;margin:0;font-family:Bahnschrift,Arial Narrow,system-ui,sans-serif;font-size:clamp(16px,2.6vw,22px);font-weight:700}.hud-legend{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1c1f24b8;border:1px solid #ffffff1a;border-radius:6px;flex-direction:column;gap:7px;max-width:320px;padding:12px 14px;display:flex;position:absolute;top:76px;left:22px}.layout-tabs{gap:6px;display:flex}.layout-tab{color:#9aa1ab;cursor:pointer;pointer-events:auto;background:#ffffff0a;border:1px solid #ffffff26;border-radius:4px;flex:1;padding:6px 0;font-family:Bahnschrift,Arial Narrow,system-ui,sans-serif;font-size:13px;font-weight:700}.layout-tab:hover{background:#ffffff17}.show-mode{text-transform:uppercase;letter-spacing:.03em;margin-top:4px;padding:8px 10px;font-size:11px}.save-btn{color:#f2a93b;background:#f2a93a1f;border-color:#f2a93a66}.save-btn:hover{background:#f2a93a38}.save-btn:disabled{opacity:.6;cursor:default}.layout-tab.active{color:#3fd8c4;background:#3fd8c426;border-color:#3fd8c480}.layout-label{color:#eceef0;margin-bottom:2px;font-family:Bahnschrift,Arial Narrow,system-ui,sans-serif;font-size:12.5px;font-weight:600}.legend-row{color:#eceef0;align-items:baseline;gap:8px;font-size:12px;line-height:1.4;display:flex}.legend-row .dot{margin-top:3px}.legend-row .dim{color:#9aa1ab}.dot{border:1px solid #fff3;border-radius:3px;flex:none;width:10px;height:10px}.hud-materials{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1c1f24b8;border:1px solid #ffffff1a;border-radius:6px;width:220px;padding:12px 14px;position:absolute;top:76px;right:22px}.materials-title{color:#eceef0;margin-bottom:6px;font-family:Bahnschrift,Arial Narrow,system-ui,sans-serif;font-size:12.5px;font-weight:600}.materials-title .dim{color:#9aa1ab;font-size:11px;font-weight:400}.materials-box{resize:vertical;color:#eceef0;pointer-events:auto;background:#00000040;border:1px solid #ffffff1a;border-radius:4px;width:100%;height:190px;padding:8px;font-family:Consolas,ui-monospace,monospace;font-size:11.5px;line-height:1.5}.materials-box:focus{outline:1px solid #3fd8c480}.hud-hint{z-index:10;letter-spacing:.04em;color:#9aa1ab;pointer-events:none;background:#1c1f2499;border:1px solid #ffffff14;border-radius:4px;padding:5px 12px;font-family:Consolas,ui-monospace,monospace;font-size:11.5px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}