:root { --ink:#03120e; --turquoise:#66b3ba; --yellow:#e9d758; --paper:#f8f4f9; --brown:#6b4b3e; --line:#e7e1e5; --muted:#756d72; --white:#fffdfd; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--paper); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:264px; background:var(--ink); color:#edf6f1; padding:28px 18px 20px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:2; }
.brand-block { display:flex; align-items:center; gap:10px; padding:0 14px 28px; }
.brand { width:178px; height:98px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; overflow:hidden; }.brand img { width:100%; height:100%; object-fit:contain; }.logo-highlight { color:#E9D758; }
.brand-mark { width:25px; height:25px; display:flex; align-items:flex-end; gap:3px; flex:none; }.brand-mark span { display:block; width:5px; background:var(--yellow); border-radius:1px; }.brand-mark span:nth-child(1){height:11px}.brand-mark span:nth-child(2){height:20px}.brand-mark span:nth-child(3){height:15px}
.version-tag { color:var(--yellow); font-size:9px; letter-spacing:1.4px; border:1px solid #e9d75855; padding:4px 6px; border-radius:4px; }
.workspace-switcher { border:1px solid #ffffff15; background:#ffffff08; padding:12px 11px; border-radius:8px; display:flex; align-items:center; gap:9px; }.workspace-icon,.avatar,.top-avatar { display:grid; place-items:center; background:var(--turquoise); color:var(--ink); font-weight:700; border-radius:6px; font-size:10px; }.workspace-icon{width:30px;height:30px}.eyebrow,.nav-label,.panel-kicker { text-transform:uppercase; letter-spacing:1.15px; font-size:9px; font-weight:700; }.eyebrow{color:#89a39a;margin:0 0 3px}.workspace-name{margin:0;font-size:12px;font-weight:600}.chevron{margin-left:auto;color:#89a39a}.side-nav{margin-top:30px}.nav-label{color:#789088;padding:0 13px;margin:0 0 9px}.tools-label{margin-top:28px}.nav-item{display:flex;align-items:center;gap:12px;color:#a7bbb2;font-size:12px;padding:11px 13px;border-radius:7px;margin:3px 0;transition:.2s}.nav-item:hover,.nav-item.active{background:#66b3ba1c;color:#f8ffff}.nav-item.active{box-shadow:inset 3px 0 var(--turquoise);color:var(--turquoise)}.nav-icon{width:14px;height:14px;display:inline-block;position:relative;opacity:.9}.grid-icon{border:1.5px solid currentColor;border-radius:2px;background:linear-gradient(90deg,transparent 42%,currentColor 44%,currentColor 54%,transparent 56%),linear-gradient(0deg,transparent 42%,currentColor 44%,currentColor 54%,transparent 56%)}.target-icon{border:1.5px solid currentColor;border-radius:50%}.target-icon:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;inset:4px}.nodes-icon:before,.nodes-icon:after{content:'';position:absolute;border:1px solid currentColor;border-radius:50%;width:5px;height:5px}.nodes-icon:before{left:0;top:5px}.nodes-icon:after{right:0;top:0}.layers-icon{border:1px solid currentColor;transform:skewY(-15deg)}.terminal-icon{border:1px solid currentColor;border-radius:2px}.terminal-icon:after{content:'>';font-size:9px;position:absolute;left:2px;top:-3px}.link-icon{border:1px solid currentColor;border-radius:7px;transform:rotate(-30deg)}.disabled{opacity:.5}.soon{margin-left:auto;font-size:8px;color:#73837e}.sidebar-bottom{margin-top:auto}.tip-card{background:#e9d758; color:var(--ink); padding:14px 12px; border-radius:8px; display:flex; align-items:flex-start; gap:9px}.tip-spark{font-size:18px}.tip-title{font-size:11px;font-weight:700;margin:0 0 3px}.tip-text{font-size:10px;line-height:1.35;margin:0;max-width:140px}.tip-arrow{margin-left:auto;font-size:17px}.profile{display:flex;align-items:center;gap:9px;border-top:1px solid #ffffff15;margin-top:18px;padding:17px 5px 0}.avatar{width:29px;height:29px;border-radius:50%;font-size:9px;background:var(--brown);color:white}.profile-name{font-size:11px;font-weight:600;margin:0}.profile-role{font-size:9px;color:#80948c;margin:2px 0 0}.more{margin-left:auto;color:#70857c;letter-spacing:2px;font-size:10px}
.main-content { margin-left:264px; width:calc(100% - 264px); }.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 6%;justify-content:space-between;background:#f8f4f9dd;backdrop-filter:blur(12px);position:sticky;top:0;z-index:1}.breadcrumbs{display:flex;gap:11px;font-size:11px;color:#948c90}.breadcrumbs strong{color:var(--ink)}.top-actions{display:flex;align-items:center;gap:10px}.icon-button,.top-avatar{border:1px solid var(--line);width:30px;height:30px;border-radius:50%;background:transparent;color:var(--brown);font-size:13px;position:relative}.notification span{width:5px;height:5px;background:var(--yellow);border:1px solid var(--paper);border-radius:50%;position:absolute;right:1px;top:1px}.top-avatar{background:var(--turquoise);border:0;font-size:9px}.mobile-brand{display:none}.page-section{padding:52px 6%;max-width:1500px;margin:auto}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px}.kicker{color:var(--brown);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:1.3px;display:flex;align-items:center;gap:9px;margin:0 0 12px}.kicker-line{height:1px;width:24px;background:var(--yellow)}h1,h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-1.4px;margin:0}h1{font-size:43px;line-height:1.1}h1 em{font-style:normal;color:var(--turquoise)}.yellow-dot{color:var(--yellow)}.lead{font-size:13px;color:var(--muted);margin:10px 0 0}.button{border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:6px;font-size:12px;font-weight:700;padding:13px 17px;cursor:pointer}.button-primary{background:var(--turquoise);color:var(--ink);box-shadow:0 5px 14px #66b3ba36}.button-primary:hover{background:#7bc2c8}.button-plus{font-size:18px;line-height:10px;font-weight:400}.overview-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px}.stat-card,.panel{background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 7px 24px #2c152408}.stat-card{padding:20px 21px;min-height:166px;position:relative;overflow:hidden}.stat-top{display:flex;align-items:center;gap:9px}.stat-icon{width:25px;height:25px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:16px}.mint-icon{background:#d9f0ee;color:#38848b}.yellow-icon{background:#fcf4c2;color:#8e7b00}.brown-icon{background:#eee4df;color:var(--brown)}.stat-label{font-size:11px;color:var(--muted);font-weight:600}.stat-trend{margin-left:auto;font-size:10px;color:#52929a}.stat-trend small{font-size:13px}.stat-value{font:600 30px 'Space Grotesk',sans-serif;margin-top:21px;letter-spacing:-1.5px}.stat-value.compact{font-size:21px;margin-top:25px}.stat-foot{font-size:10px;color:#a09a9d;margin:3px 0}.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#65b876;margin-left:4px}.sparkline{display:flex;gap:3px;align-items:flex-end;position:absolute;right:20px;bottom:25px;height:32px}.sparkline i{display:block;width:5px;background:var(--turquoise);opacity:.55;border-radius:4px}.sparkline i:nth-child(1){height:11px}.sparkline i:nth-child(2){height:16px}.sparkline i:nth-child(3){height:13px}.sparkline i:nth-child(4){height:22px}.sparkline i:nth-child(5){height:17px}.sparkline i:nth-child(6){height:25px}.sparkline i:nth-child(7){height:20px}.sparkline i:nth-child(8){height:28px}.sparkline i:nth-child(9){height:23px}.sparkline i:nth-child(10){height:31px;background:var(--yellow)}.mini-bars{display:flex;gap:5px;align-items:flex-end;height:32px;position:absolute;bottom:22px;right:22px}.mini-bars i{width:8px;background:#d8eeed;border-radius:3px}.mini-bars i:nth-child(1){height:12px}.mini-bars i:nth-child(2){height:20px}.mini-bars i:nth-child(3){height:16px}.mini-bars i:nth-child(4){height:26px;background:var(--turquoise)}.mini-bars i:nth-child(5){height:21px}.mini-bars i:nth-child(6){height:30px}.mini-bars i:nth-child(7){height:25px}.cidr-chip{position:absolute;bottom:20px;right:22px;background:#f1e4de;color:var(--brown);font:600 13px 'Space Grotesk';padding:6px 9px;border-radius:4px}.content-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;margin-top:14px}.panel{padding:24px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:21px}.panel-kicker{color:var(--brown);margin:0 0 7px}.panel h2{font-size:19px;letter-spacing:-.6px}.text-link{color:var(--brown);font-size:11px;font-weight:700}.text-link span{font-size:16px;margin-left:5px}.activity-row{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid #eee9eb}.activity-row:first-child{border-top:0;padding-top:2px}.row-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:6px;font-size:17px}.cyan-row{background:#dff1ef;color:#428e94}.yellow-row{background:#fcf4c2;color:#867200}.brown-row{background:#eee3de;color:var(--brown)}.row-main{display:flex;flex-direction:column;gap:4px;flex:1}.row-main strong{font-size:12px}.row-main small{color:#9a9397;font-size:10px}.row-network{font:600 10px 'Space Grotesk';color:var(--brown)}.row-arrow{font-size:17px;color:#b1a7ab}.tool-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:7px;padding:16px 13px;margin-top:10px;transition:.2s}.tool-card:hover{border-color:var(--turquoise);transform:translateY(-1px)}.tool-primary{background:#f1fbfa;border-color:#c6e5e3}.tool-icon{width:31px;height:31px;display:grid;place-items:center;background:var(--turquoise);border-radius:6px;font-size:18px}.tool-card strong,.tool-card small{display:block}.tool-card strong{font-size:12px}.tool-card small{color:var(--muted);font-size:10px;margin-top:4px}.tool-arrow{margin-left:auto;color:var(--brown)}
.tool-section{border-top:1px solid var(--line);padding-top:76px}.compact-heading{align-items:flex-start}.mock-badge{color:#70938c;font-size:9px;letter-spacing:1px;border:1px solid #bad7d2;border-radius:20px;padding:8px 12px}.tool-layout{display:grid;grid-template-columns:315px 1fr;gap:15px}.form-panel{padding:26px}.step-badge,.result-count{font-size:9px;color:#9c9197;letter-spacing:1px}.form-panel label{font-size:10px;color:var(--muted);font-weight:700;display:block;margin-bottom:18px}.form-panel input,.base-network-inputs input,.requirement-row input{display:block;width:100%;border:1px solid var(--line);background:#fcfafb;color:var(--ink);border-radius:5px;padding:11px 12px;margin-top:7px;font-size:12px;outline:0}.form-panel input:focus,.requirement-row input:focus{border-color:var(--turquoise)}.form-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-with-suffix{position:relative}.input-with-suffix span{position:absolute;left:12px;top:18px;color:var(--brown);font-weight:700}.input-with-suffix input{padding-left:24px}.form-note{display:flex;gap:8px;align-items:flex-start;color:#93898e;font-size:10px;line-height:1.4;margin:2px 0 24px}.form-note span{display:grid;place-items:center;border:1px solid #cabfc3;border-radius:50%;width:14px;height:14px;flex:none}.full-button{width:100%}.full-button span,.calculate-vlsm span{margin-left:auto;font-size:17px}.results-column{min-width:0}.result-cards{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px;margin-bottom:14px}.result-card{background:var(--white);border:1px solid var(--line);border-radius:7px;padding:18px 16px;min-height:106px}.result-card span,.result-card small{display:block;color:var(--muted);font-size:10px}.result-card strong{display:block;font:600 16px 'Space Grotesk';margin-top:13px}.result-card.main-result{border-top:3px solid var(--turquoise)}.result-card.main-result strong{font-size:20px}.result-card.main-result b{font:600 12px 'Space Grotesk';color:var(--turquoise)}.result-card small{margin-top:6px;color:#a49b9f}.terminal-panel{background:var(--ink);border:0;color:#d8ece5;border-radius:7px;padding:0;overflow:hidden}.terminal-head{display:flex;align-items:center;justify-content:space-between;background:#0b1f19;padding:12px 15px;border-bottom:1px solid #ffffff12}.terminal-head div{display:flex;align-items:center;gap:5px}.terminal-head strong{font:500 10px 'Space Grotesk';color:#8faea4;margin-left:8px}.terminal-dot{width:7px;height:7px;background:#456159;border-radius:50%}.terminal-dot:first-child{background:var(--yellow)}.copy-button{border:1px solid #ffffff22;background:transparent;color:#a5bcb4;border-radius:4px;font-size:10px;padding:5px 8px}.terminal-panel pre{font:12px/1.8 'Space Grotesk',monospace;padding:18px 20px;margin:0;color:#b7d5ca}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.detail-grid div{background:var(--white);border:1px solid var(--line);padding:14px 15px;border-radius:6px}.detail-grid span{display:block;color:var(--muted);font-size:10px;margin-bottom:7px}.detail-grid strong{font:600 12px 'Space Grotesk'}.vlsm-section{padding-bottom:80px}.vlsm-input-panel{padding:24px}.base-network-inputs{display:flex;align-items:center;gap:6px;width:270px}.base-network-inputs input:first-child{flex:1}.base-network-inputs input:last-child{width:52px}.base-network-inputs input{margin:0}.requirements-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:23px;margin-top:4px}.button-outline{border:1px solid #b9d9d5;background:#f4fbfa;color:#448d92;padding:9px 12px}.requirements-table{margin-top:15px}.requirement-header,.requirement-row{display:grid;grid-template-columns:1fr 180px 30px;align-items:center;gap:13px}.requirement-header{color:#9a9095;text-transform:uppercase;font-size:9px;letter-spacing:1px;padding:0 12px 8px}.requirement-row{padding:5px 0}.requirement-row input{margin:0}.remove-button{background:transparent;border:0;color:#b5a9ad;font-size:21px;cursor:pointer}.remove-button:hover{color:var(--brown)}.calculate-vlsm{margin-top:22px}.table-panel{margin-top:14px;padding:24px 0 0;overflow:hidden}.table-panel .panel-heading{padding:0 24px}.data-table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:960px;font-size:10px}th{text-align:left;background:#f8f4f5;color:#8d8388;text-transform:uppercase;letter-spacing:1px;font-size:8px;padding:11px 12px;font-weight:700}td{padding:14px 12px;border-bottom:1px solid #eee9eb;color:#6d666a;white-space:nowrap}td:first-child,th:first-child{padding-left:24px}td:last-child,th:last-child{padding-right:24px}.table-network{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:11px}.table-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.cyan-dot{background:var(--turquoise)}.yellow-dot-small{background:var(--yellow)}.brown-dot{background:var(--brown)}.green-dot{background:#82ac82}td b{color:#448d92}.compact-terminal{margin:19px 24px 24px}.compact-terminal pre{padding:14px 17px;font-size:10px;line-height:1.6}.reveal-one,.reveal-two,.reveal-three{animation:rise .55s both}.reveal-two{animation-delay:.08s}.reveal-three{animation-delay:.16s}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.sidebar{width:220px}.main-content{margin-left:220px;width:calc(100% - 220px)}.content-grid,.tool-layout{grid-template-columns:1fr}.overview-grid{grid-template-columns:1fr 1fr}.featured-stat{grid-column:span 2}.quick-panel{display:none}.result-cards{grid-template-columns:1fr 1fr}.result-card.main-result{grid-column:span 2}}
@media(max-width:700px){.sidebar{display:none}.main-content{margin-left:0;width:100%}.topbar{height:62px;padding:0 20px}.breadcrumbs{display:none}.mobile-brand{display:flex;align-items:center;gap:7px;font:700 18px 'Space Grotesk';letter-spacing:-.7px;white-space:nowrap}.mobile-brand > span:last-child span{color:var(--turquoise)}.mobile-brand > span:last-child .logo-highlight{color:#E9D758}.mobile-logo-crop{display:block;width:27px;height:24px;background:#fff;border-radius:4px;overflow:hidden;position:relative;flex:none}.mobile-logo-crop img{position:absolute;width:52px;height:52px;max-width:none;left:-12px;top:-8px}.top-actions{margin-left:auto}.page-section{padding:38px 20px}.section-heading{display:block;margin-bottom:27px}.section-heading .button{margin-top:20px;width:100%}h1{font-size:35px}.overview-grid{grid-template-columns:1fr;gap:10px}.featured-stat{grid-column:auto}.stat-card{min-height:145px}.content-grid{margin-top:10px}.panel{padding:19px}.activity-row{gap:9px}.row-network{display:none}.compact-heading .mock-badge{display:inline-block;margin-top:18px}.tool-section{padding-top:46px}.tool-layout{gap:12px}.result-cards{grid-template-columns:1fr 1fr}.result-card.main-result{grid-column:span 2}.result-card{padding:14px 12px}.result-card strong{font-size:13px}.detail-grid{grid-template-columns:1fr 1fr}.base-network-inputs{width:100%;margin-top:16px}.vlsm-input-panel .panel-heading{display:block}.requirements-heading{display:block}.requirements-heading .button{margin-top:13px}.requirement-header,.requirement-row{grid-template-columns:1fr 92px 24px;gap:7px}.requirement-header{font-size:8px}.requirement-row input{padding:10px 8px}.table-panel{padding-top:19px}.table-panel .panel-heading{padding:0 19px}.compact-terminal{margin:16px 19px 19px}.form-split{gap:7px}}