@font-face{font-family:Pixelify;src:url('/fonts/pixelify-sans.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--ink:#f4f4f4;--muted:#c3c3c3;--edge:#ffffff61;--glass:rgba(24,24,24,.52)}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:#050b14;color:var(--ink)}
body{font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,a{font:inherit}
button{color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:is(button,a):focus-visible{outline:2px solid #fff;outline-offset:3px}
img{display:block;max-width:100%;height:auto}
h1,h2,p{margin:0}
h1,h2,h3{font-family:Pixelify,monospace;line-height:1.15}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.landing{position:relative;isolation:isolate;min-height:100svh;padding:22px clamp(18px,3vw,48px) 18px;overflow:hidden}
.landing::before{content:"";position:fixed;z-index:-1;inset:0;background:linear-gradient(90deg,#030b1580,#030b1518 44%,#030b1550),linear-gradient(0deg,#030b1580,transparent 35%,#030b153b);pointer-events:none}
.expedition-art{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.story-background-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:0;transition:opacity 4s ease-in-out}
.story-background-frame.is-visible{opacity:1}
.topbar,.intro,.command-layout{width:min(100%,1500px);margin-left:auto;margin-right:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px}
.wordmark{width:clamp(156px,17vw,234px);filter:drop-shadow(0 4px 10px #0009)}
.topbar-right{display:flex;align-items:center;gap:24px;font:600 11px/1.3 system-ui,sans-serif;letter-spacing:.1em}
.top-guide{color:#eaf2f5;text-decoration:none;white-space:nowrap;border-bottom:1px solid #ffffff76;padding:8px 0}
.top-guide:hover{color:#fff;border-color:#fff}
.topbar-right>span{color:#e2ecf2;white-space:nowrap}
.topbar-right i{display:inline-block;width:4px;height:4px;margin:0 5px 4px;border-radius:50%;background:#cdebf6}
.top-entry,.deploy{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:44px;padding:11px 17px;border:1px solid #ffffff88;border-radius:9px;background:rgba(255,255,255,.19);color:#fff;box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.04em;text-shadow:none;transition:background .2s,border-color .2s}
.top-entry:hover,.deploy:hover{background:rgba(255,255,255,.27);border-color:#fff}
.intro{padding:10px 0 15px;text-shadow:0 1px 3px #0009}
.eyebrow,.panel-top,.operation-actions>span,.pack-footer{font-family:system-ui,sans-serif;font-size:11px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase}
.eyebrow{color:#eee}
.signal-pip{display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:#b1f0ff;box-shadow:0 0 12px #8bdffc}
.intro h1{margin:4px 0 2px;font-size:clamp(39px,4vw,58px)}
.intro p{font-size:16px;color:#f3f8fc}
.glass{border:1px solid var(--edge);border-radius:20px;background:var(--glass);box-shadow:0 12px 32px #0003,inset 0 1px #ffffff18;backdrop-filter:blur(24px) brightness(.75);-webkit-backdrop-filter:blur(24px) brightness(.75)}
.command-layout{display:grid;grid-template-columns:minmax(285px,340px) minmax(0,1fr);gap:18px;align-items:stretch}
.operation-panel,.pack-panel{height:min(59vh,495px);min-height:420px;overflow:hidden}
.operation-panel{display:flex;flex-direction:column;padding:15px}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;margin-bottom:12px;color:#eaf3f8}
.operation-star{color:#fff;font:19px system-ui;line-height:1;text-shadow:0 0 12px #e7faff}
.galaxy-art{position:relative;overflow:hidden;flex:0 0 148px;border:1px solid #ffffff71;border-radius:15px;background:#11202d}
.galaxy-art img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.galaxy-art::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#030a14be)}
.galaxy-art>span{position:absolute;z-index:1;bottom:9px;left:12px;font:23px Pixelify,monospace;text-shadow:0 2px 8px #000}
.operation-copy{padding:19px 2px 12px}
.operation-copy h2{font-size:clamp(30px,3vw,42px);margin:8px 0}
.operation-copy p{font-size:14px;line-height:1.5;color:#eef4f8}
.operation-actions{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.deploy{flex:1;white-space:nowrap}
.operation-actions>span{max-width:80px;color:#e4f1f6;font-size:10px;line-height:1.3}
.pack-panel{display:flex;flex-direction:column;padding:16px 18px 12px}
.pack-panel .panel-top{margin-bottom:11px}
.pack-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(235px,.8fr);gap:16px;flex:1;min-height:0}
.pack-grid-wrap{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff60 transparent}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;align-content:start;padding:2px}
.pack-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:7px;border:1px solid color-mix(in srgb,var(--rarity) 55%,transparent);border-radius:12px;background:#ffffff0b;box-shadow:inset 0 1px #ffffff21;transition:background .15s,border-color .15s,transform .15s}
.pack-cell:hover{background:#ffffff24;transform:translateY(-2px)}
.pack-cell[aria-pressed=true]{border-color:var(--rarity);background:#ffffff25;box-shadow:0 0 16px color-mix(in srgb,var(--rarity) 36%,transparent),inset 0 0 0 1px #ffffff5e}
.pack-cell img{width:100%;max-width:60px;max-height:60px;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
.upgrade-marks{position:absolute;right:5px;bottom:4px;display:flex;gap:2px}
.upgrade-marks i{width:6px;height:3px;border:1px solid var(--rarity);opacity:.45}
.upgrade-marks i.filled{background:var(--rarity);opacity:1}
.item-detail{display:flex;flex-direction:column;min-width:0;min-height:0;padding:18px;border:1px solid #ffffff68;border-radius:17px;background:#09182470;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.detail-type{font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--rarity)}
.item-detail h2{font-size:clamp(24px,2.6vw,36px);margin:10px 0 15px;overflow-wrap:anywhere}
.detail-stat{align-self:flex-start;padding:8px 11px;border:1px solid color-mix(in srgb,var(--rarity) 60%,transparent);border-radius:9px;background:color-mix(in srgb,var(--rarity) 17%,transparent);font:22px Pixelify,monospace}
.detail-meta{display:grid;gap:9px;margin-top:22px}
.detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid #ffffff25;font-size:13px}
.detail-row span{color:#cbd9e1}.detail-row strong{font-weight:600;text-align:right}
.detail-rank{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.detail-rank>span:last-child{display:flex;gap:5px}
.detail-rank i{width:23px;height:5px;border:1px solid var(--rarity);opacity:.55}
.detail-rank i.filled{background:var(--rarity);opacity:1}
.pack-footer{display:flex;justify-content:space-between;gap:16px;margin-top:10px;padding-top:9px;border-top:1px solid #ffffff2c;color:#d9e9f0}
.systems{width:min(100%,1500px);margin:clamp(85px,13vh,170px) auto 60px}
.systems-heading{max-width:740px;margin:0 0 26px;text-shadow:0 2px 10px #000d}
.systems-heading h2{font-size:clamp(35px,4vw,58px);margin:6px 0}
.systems-heading p{color:#edf4f7;font-size:16px}
.systems-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.system-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:300px;overflow:hidden;padding:20px}
.system-card h3{font-size:clamp(25px,2.5vw,36px);margin:8px 0 7px}
.system-card p{max-width:48ch;color:#ecf3f6;font-size:14px;line-height:1.45}
.system-index{font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.1em;color:#e4f2f8;text-transform:uppercase}
.system-story{grid-column:span 3;min-height:380px;padding:0}
.story-illustration{position:absolute;inset:0}
.story-illustration img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.story-illustration::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06121cdb 0%,#06121c96 50%,transparent 100%),linear-gradient(0deg,#06121c91,transparent 65%)}
.system-story .system-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;max-width:76%;height:100%;padding:24px}
.story-ledger{display:grid;gap:4px;min-width:min(100%,300px);margin-top:17px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.03em}
.story-ledger span{display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid #ffffff65;border-radius:7px;background:#15232bae;backdrop-filter:blur(12px)}
.story-ledger b{font-size:13px}.story-ledger i{margin-left:auto;font-style:normal;font-size:9px;color:#d8e4eb}
.system-build{grid-column:span 3}
.build-illustration{position:relative;flex:1;min-height:190px;width:min(100%,370px);margin:auto;isolation:isolate}
.build-illustration img{position:absolute;width:65px;height:65px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 8px #000a)}
.build-illustration .build-root{width:80px;height:80px;left:calc(50% - 40px);top:45px;z-index:2;padding:5px;border:1px solid #ffffffa1;border-radius:17px;background:#ffffff24;backdrop-filter:blur(16px)}
.build-node{z-index:2;padding:6px;border:1px solid #ffffff70;border-radius:12px;background:#dcefff26;backdrop-filter:blur(14px)}
.build-node-a{left:5%;top:8px}.build-node-b{right:5%;top:8px}.build-node-c{left:calc(50% - 32px);bottom:2px}
.build-branch{position:absolute;z-index:1;left:50%;top:80px;width:38%;height:1px;background:#d5eaf4b5;transform-origin:left center;box-shadow:0 0 10px #e3f8ff}
.build-branch-a{transform:rotate(207deg)}.build-branch-b{transform:rotate(-27deg)}.build-branch-c{width:23%;transform:rotate(90deg)}
.system-loot,.system-refit,.system-exchange{grid-column:span 2}
.loot-illustration{display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:130px;margin:9px 0 15px}
.loot-illustration>div{display:grid;place-items:center;gap:5px;min-width:0;flex:1}
.loot-illustration img{width:min(100%,82px);aspect-ratio:1;object-fit:contain;padding:7px;border:1px solid var(--loot);border-radius:11px;background:#ffffff15;box-shadow:0 0 17px color-mix(in srgb,var(--loot) 23%,transparent);image-rendering:pixelated}
.loot-illustration small{color:var(--loot);font:600 9px/1.3 system-ui,sans-serif;letter-spacing:.04em}
.refit-illustration{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;min-height:130px;margin:10px 0 15px}
.refit-illustration img{width:min(26%,90px);aspect-ratio:1;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 11px #0009)}
.refit-illustration img:last-child{border:1px solid #ffffff8f;border-radius:12px;background:#ffffff1c;box-shadow:0 0 18px #fff5}
.refit-illustration span{font:26px Pixelify,monospace;color:#eaf6fc}
.exchange-illustration{display:flex;align-items:center;gap:12px;min-height:130px;margin:10px 0 15px;padding:12px;border:1px solid #ffffff58;border-radius:12px;background:#ffffff13}
.exchange-illustration img{width:88px;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
.exchange-illustration div{display:flex;flex-direction:column;gap:4px;min-width:0;font:600 10px/1.4 system-ui,sans-serif;letter-spacing:.04em}
.exchange-illustration strong{font:17px/1.15 Pixelify,monospace}.exchange-illustration span{color:#d8e6ed}.exchange-illustration b{margin-top:5px;font-weight:600;color:#fff}
.system-copy{margin-top:auto}
.systems-end{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:23px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.1em}
.systems-end .deploy{flex:none;min-width:185px}
@media(max-width:1050px){.command-layout{grid-template-columns:290px 1fr}.pack-body{grid-template-columns:1fr 220px}.pack-grid{grid-template-columns:repeat(auto-fill,minmax(57px,1fr))}.pack-cell img{max-width:52px;max-height:52px}.operation-actions>span{display:none}}
@media(max-width:760px){.landing{padding:15px 14px 25px;overflow:visible}.landing::before{background:linear-gradient(0deg,#030b15a8,#030b153b)}.topbar{min-height:59px}.wordmark{width:145px}.topbar-right>span{display:none}.top-entry{padding:7px 10px;gap:8px}.intro{padding:28px 0 21px}.intro h1{font-size:44px}.intro p{font-size:14px;max-width:320px}.command-layout{display:flex;flex-direction:column;gap:12px}.operation-panel,.pack-panel{height:auto;min-height:0}.operation-panel{padding:13px}.galaxy-art{flex-basis:140px}.operation-copy{padding:12px 0 7px}.operation-copy h2{font-size:35px}.operation-actions{padding-top:8px}.deploy{flex:none;min-width:180px}.pack-panel{order:-1;padding:13px}.pack-body{display:flex;flex-direction:column;gap:12px}.pack-grid-wrap{max-height:210px}.pack-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.pack-cell{padding:4px}.pack-cell img{max-width:100%;max-height:100%}.item-detail{min-height:230px;padding:16px}.item-detail h2{font-size:30px}.detail-meta{margin-top:15px}.detail-rank{margin-top:10px}.pack-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.story-background-frame,.top-entry,.deploy,.pack-cell{transition:none}}
@media(max-width:1100px){.system-story,.system-build{grid-column:span 3}.system-loot,.system-refit,.system-exchange{grid-column:span 3}}
@media(max-width:760px){.systems{margin:70px auto 30px}.systems-heading{margin-bottom:16px}.systems-heading p{font-size:14px}.systems-grid{grid-template-columns:1fr;gap:12px}.system-card,.system-story,.system-build,.system-loot,.system-refit,.system-exchange{grid-column:1;min-height:0}.system-story{height:390px}.system-story .system-copy{max-width:90%;padding:18px}.system-build,.system-loot,.system-refit,.system-exchange{padding:17px}.build-illustration{min-height:190px}.loot-illustration,.refit-illustration,.exchange-illustration{min-height:120px}.systems-end{align-items:flex-start;flex-direction:column;gap:12px}.systems-end .deploy{width:100%}}
@media(max-width:480px){.topbar{gap:8px}.wordmark{width:105px}.topbar-right{gap:8px}.top-guide{font-size:9px;letter-spacing:.04em}.top-entry{min-height:38px;padding:6px 8px;gap:5px;font-size:9px;letter-spacing:0}}