*,:before,:after{box-sizing:border-box}html,body{color:#ccc;background:#111;height:100%;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;overflow:hidden}a{color:#8cc}#app{flex-direction:column;height:100dvh;display:flex}.app-header{z-index:20;background:#0d0d0d;border-bottom:1px solid #2a2a2a;flex-shrink:0;align-items:center;gap:12px;min-height:44px;padding:6px 14px;display:flex}.app-title{color:#aaa;white-space:nowrap;flex-shrink:0;font-size:13px;font-weight:700}@media (width<=480px){.app-title{display:none}}.orientation-toggle{color:#aaa;cursor:pointer;background:#1e1e1e;border:1px solid #383838;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:28px;padding:0;font-size:16px;line-height:1;display:flex}.orientation-toggle:hover{color:#ddd;background:#2a2a2a;border-color:#555}.app-main{flex:1;position:relative;overflow:hidden}.app-footer{z-index:20;background:#0d0d0d;border-top:1px solid #2a2a2a;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:5px 14px;display:flex}.app-credit{color:#555;margin-left:auto;font-size:10px}.legend{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.legend-swatch{opacity:.85;white-space:nowrap;border:1px solid;border-radius:3px;padding:2px 6px;font-size:9px}.viewport{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:100%;overflow:hidden}.viewport:active{cursor:grabbing}.canvas{will-change:transform;position:relative}.tech-node{cursor:pointer;text-align:center;border:2px solid;border-radius:4px;padding-bottom:2px;transition:opacity .12s;position:absolute;box-shadow:0 2px 6px #00000080}.tech-node:hover{filter:brightness(1.25);z-index:2}.tech-node.is-selected{outline-offset:1px;z-index:3;outline:2px solid #fff}.tech-node.is-trigger{border-style:dashed}.tech-icon{width:48px;height:48px;image-rendering:pixelated;pointer-events:none;margin:4px auto 2px;display:block}.tech-effects{flex-wrap:wrap;justify-content:center;gap:2px;padding:0 3px 2px;display:flex}.effect-icon{width:20px;height:20px;image-rendering:pixelated;background:#0000004d;border-radius:2px;display:block}.effect-bonus{color:#ffd;background:#ffdc0026;border-radius:2px;justify-content:center;align-items:center;width:20px;height:20px;font-size:11px;font-weight:700;display:inline-flex}.search-panel{flex:1;max-width:320px;position:relative}.search-input{color:#ddd;background:#1e1e1e;border:1px solid #383838;border-radius:4px;outline:none;width:100%;padding:5px 10px;font-size:13px}.search-input:focus{background:#252525;border-color:#666}.search-results{z-index:100;background:#1a1a1a;border:1px solid #333;border-radius:4px;max-height:340px;margin:0;padding:2px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 4px 20px #0009}.search-result{cursor:pointer;border-left:3px solid #0000;align-items:center;gap:8px;padding:5px 10px;font-size:12px;display:flex}.search-result:hover,.search-result.is-focused{background:#2a2a2a}.search-result img{image-rendering:pixelated;opacity:.85;flex-shrink:0}.tooltip{z-index:200;pointer-events:none;background:#1a1a1a;border:1px solid;border-radius:5px;min-width:180px;max-width:260px;padding:10px 12px;font-size:12px;position:fixed;box-shadow:0 4px 24px #000000b3}.tooltip-title{align-items:center;gap:6px;margin-bottom:6px;font-size:13px;font-weight:700;display:flex}.tooltip-trigger-badge{color:#aaa;text-transform:uppercase;letter-spacing:.04em;background:#ffffff1a;border-radius:3px;padding:1px 5px;font-size:9px;font-weight:400}.tooltip-planet{color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:10px}.tooltip-section{margin-top:6px}.tooltip-label{color:#777;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;font-size:10px}.tooltip-value{color:#bbb;font-size:11px}.tooltip-packs{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.tooltip-pack{color:#bbb;align-items:center;gap:2px;font-size:11px;display:inline-flex}.tooltip-pack img{image-rendering:pixelated}.tooltip-time{color:#888;font-size:11px}.tooltip-effects{flex-wrap:wrap;gap:3px;display:flex}.tooltip-effect-item{color:#ccc;background:#ffffff12;border-radius:3px;padding:1px 5px;font-size:11px}.tooltip-effect-bonus{color:#ffd677;background:#ffd2001a;border-radius:3px;padding:1px 5px;font-size:11px}