@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root { --navy:#123b6d; --navy-deep:#082847; --blue:#2b72a8; --cyan:#55c4dd; --ink:#0d1720; --muted:#657381; --paper:#f4f7f8; --line:rgba(13,23,32,.14); --glass:rgba(248,251,252,.82); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--paper); color:var(--ink); }
body { font-family:"IBM Plex Mono",monospace; }
button,select { font:inherit; }
.edge-shell { position:relative; width:100%; height:100%; min-height:690px; overflow:hidden; background:radial-gradient(circle at 64% 40%,#fff 0,#edf2f5 49%,#dce5ea 100%); }
#rackScene { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; }
#rackScene:active { cursor:grabbing; }
.edge-header { position:absolute; top:20px; left:24px; right:24px; height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 22px; border-top:4px solid var(--navy); border-bottom:1px solid var(--line); background:rgba(255,255,255,.76); backdrop-filter:blur(20px); box-shadow:0 18px 60px rgba(20,49,72,.08); }
.edge-brand { display:flex; width:265px; height:50px; align-items:center; overflow:hidden; }
.edge-brand img { width:255px; height:auto; display:block; }
.product-nav { display:flex; gap:28px; align-items:center; }
.product-nav a { position:relative; color:#65717c; font-size:9px; letter-spacing:.13em; text-decoration:none; font-weight:600; }
.product-nav a.active { color:var(--navy); }
.product-nav a.active:after { content:""; position:absolute; left:0; right:0; bottom:-15px; height:2px; background:var(--navy); }
.edge-status { justify-self:end; display:grid; grid-template-columns:auto auto; gap:2px 9px; align-items:center; font-size:7px; letter-spacing:.12em; color:var(--muted); }
.edge-status i { grid-row:1/3; width:8px; height:8px; border-radius:50%; background:#45b99d; box-shadow:0 0 0 5px rgba(69,185,157,.1); }
.edge-status strong { color:var(--navy); font-size:10px; }
.rack-copy { position:absolute; top:19vh; left:5.8vw; width:440px; pointer-events:none; }
.kicker { margin:0 0 20px; color:var(--navy); font-size:9px; letter-spacing:.2em; font-weight:600; }
h1 { margin:0; color:#0a1721; font-family:"Barlow Condensed",sans-serif; font-size:clamp(64px,6.5vw,105px); line-height:.78; letter-spacing:-.045em; font-weight:700; }
h1 em { color:transparent; -webkit-text-stroke:1.5px var(--navy); font-style:italic; }
.intro { width:390px; margin:28px 0 25px; color:#52616e; font-family:"Barlow Condensed",sans-serif; font-size:19px; line-height:1.42; }
.copy-actions { display:flex; gap:9px; pointer-events:auto; }
.copy-actions button { height:48px; padding:0 18px; border:0; cursor:pointer; font-size:9px; letter-spacing:.12em; font-weight:600; }
.navy-button { color:#fff; background:var(--navy); box-shadow:0 12px 28px rgba(18,59,109,.18); }
.navy-button span { margin-left:25px; font-size:15px; }
.outline-button { color:var(--navy); border:1px solid rgba(18,59,109,.28)!important; background:rgba(255,255,255,.55); }
.trust-row { display:flex; gap:22px; margin-top:30px; color:#75828d; font-size:7px; letter-spacing:.1em; }
.trust-row b { color:var(--navy); margin-right:5px; }
.rack-specs { position:absolute; top:120px; right:24px; width:285px; padding:20px; border:1px solid var(--line); border-top:3px solid var(--navy); background:var(--glass); backdrop-filter:blur(20px); box-shadow:0 22px 70px rgba(34,61,83,.1); }
.spec-title { display:flex; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid var(--line); font-size:9px; letter-spacing:.12em; font-weight:600; }
.spec-title b { color:var(--blue); font-size:8px; }
.rack-specs dl { margin:7px 0 12px; }
.rack-specs dl div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid rgba(13,23,32,.08); }
.rack-specs dt { color:#71808c; font-size:7px; letter-spacing:.09em; }
.rack-specs dd { margin:0; text-align:right; color:var(--navy-deep); font-family:"Barlow Condensed",sans-serif; font-size:16px; font-weight:600; }
.concept-note { margin:11px 0 14px; color:#788692; font-size:6.5px; line-height:1.5; }
.capacity-line { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; color:var(--navy); font-size:7px; font-weight:600; }
.capacity-line i { height:1px; background:var(--navy); position:relative; }
.capacity-line i:before,.capacity-line i:after { content:""; position:absolute; top:-2px; width:1px; height:5px; background:var(--navy); }
.capacity-line i:after { right:0; }
.capacity-line small { grid-column:1/-1; color:#7a8893; font-size:6px; letter-spacing:.12em; }
.rack-controls { position:absolute; left:50%; bottom:25px; transform:translateX(-50%); min-height:62px; display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--line); background:rgba(255,255,255,.82); backdrop-filter:blur(20px); box-shadow:0 18px 50px rgba(24,50,71,.11); white-space:nowrap; }
.view-buttons { display:flex; align-items:center; gap:3px; }
.view-buttons small { margin:0 7px; color:#7c8993; font-size:6px; letter-spacing:.13em; }
.view-buttons button,.control-toggle { height:38px; padding:0 11px; color:#485662; background:none; border:1px solid transparent; cursor:pointer; font-size:7.5px; letter-spacing:.09em; }
.view-buttons button.active { color:var(--navy); border-color:rgba(18,59,109,.28); background:rgba(18,59,109,.06); }
.control-rule { width:1px; height:31px; background:var(--line); }
.control-toggle i { display:inline-block; width:7px; height:7px; margin-right:7px; border:1px solid #87939d; }
.control-toggle.active { color:var(--navy); }
.control-toggle.active i { border-color:var(--navy); background:var(--navy); box-shadow:0 0 0 3px rgba(18,59,109,.1); }
.rack-controls label { display:flex; flex-direction:column; gap:3px; padding:0 4px; color:#82909a; font-size:6px; letter-spacing:.1em; }
.rack-controls select { padding:2px 0; color:var(--navy-deep); border:0; outline:0; background:#eef3f6; font-size:7.5px; }
.rack-metrics,.rack-hint { position:absolute; bottom:27px; color:#7b8993; font-size:6.5px; letter-spacing:.11em; }
.rack-metrics { left:24px; }
.rack-hint { right:24px; }
.rack-hint span { color:var(--blue); }
.rack-annotation { position:absolute; pointer-events:none; transform:translate(-50%,-50%); transition:opacity .18s; }
.rack-annotation .dot { display:block; width:9px; height:9px; border:2px solid var(--navy); border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(18,59,109,.09); }
.rack-annotation .tag { position:absolute; left:15px; top:-14px; width:max-content; padding:7px 9px; color:#fff; background:rgba(8,40,71,.9); border-left:2px solid var(--cyan); font-size:7px; letter-spacing:.1em; box-shadow:0 8px 24px rgba(7,36,62,.18); }
@media(max-width:1050px){.rack-specs{display:none}.rack-copy{left:28px;width:385px}.product-nav{display:none}.edge-header{grid-template-columns:1fr auto}.rack-controls{max-width:calc(100vw - 24px);overflow:auto;justify-content:flex-start}.rack-hint{display:none}.rack-metrics{bottom:96px}}
@media(max-width:620px){.edge-header{left:12px;right:12px;padding:0 12px}.edge-brand{width:220px}.edge-brand img{width:215px}.edge-status{display:none}.rack-copy{top:135px;left:20px;width:300px}.rack-copy h1{font-size:62px}.intro{width:285px;font-size:16px}.trust-row{display:none}.rack-controls{bottom:12px}.rack-metrics{left:14px}.outline-button{display:none}}
@media(max-height:760px){.rack-copy{top:17vh}.intro{margin:20px 0}.trust-row{margin-top:20px}.rack-specs{top:106px}.rack-specs dl div{padding:7px 0}.rack-controls{bottom:12px}.rack-metrics,.rack-hint{bottom:14px}}