*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080a09;color:#f1f3ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.case-nav{height:66px;border-bottom:1px solid #242824;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,60px);position:sticky;top:0;background:rgba(8,10,9,.9);backdrop-filter:blur(16px);z-index:20;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.case-brand{text-align:center;display:grid;gap:3px}.case-brand span{color:#626a64;font-size:7px;letter-spacing:.12em}.case-brand b{font-size:9px}.back{color:#89918b}main{max-width:1440px;margin:auto;padding:12px clamp(12px,3vw,42px) 60px}.case-hero{min-height:570px;border:1px solid #292e2a;border-radius:22px;background:#151815;display:flex;align-items:center;justify-content:space-between;padding:clamp(32px,6vw,80px);overflow:hidden;position:relative}.hero-copy{max-width:830px;z-index:2}.eyebrow{font:9px ui-monospace,monospace;color:#777f79;letter-spacing:.1em;display:flex;align-items:center;gap:8px}.pulse{width:7px;height:7px;background:#67e98c;border-radius:50%;box-shadow:0 0 12px #67e98c}.hero-copy h1{font-size:clamp(55px,9vw,128px);line-height:.8;letter-spacing:-.07em;margin:30px 0}.hero-copy p{font-size:clamp(14px,1.5vw,20px);line-height:1.45;color:#969e98;max-width:700px}.hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}.hero-meta span{border:1px solid #333934;border-radius:999px;padding:8px 11px;font:8px ui-monospace,monospace;color:#6e766f}.hero-meta b{color:#dfe4df}.hero-orbit{width:330px;height:330px;position:relative;display:grid;place-items:center;flex:none}.orbit{position:absolute;border:1px solid #333a34;border-radius:50%}.o1{inset:0}.o2{inset:45px}.o3{inset:90px}.hero-orbit:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0 70%,rgba(99,232,140,.13));animation:rotate 5s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}.hero-orbit b{font-size:46px;z-index:2}.hero-orbit span{position:absolute;bottom:72px;font:7px ui-monospace,monospace;color:#606861;text-align:center;z-index:2}.topology-section,.validation,.result{margin-top:12px;border:1px solid #292e2a;border-radius:22px;background:#151815;padding:clamp(24px,4vw,52px)}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.section-head small,.story-card small,.result small{font:8px ui-monospace,monospace;letter-spacing:.12em;color:#69716b}.section-head h2,.story-card h2,.result h2{font-size:clamp(30px,4vw,58px);letter-spacing:-.055em;line-height:.9;margin:12px 0 0}.section-head p{max-width:420px;color:#767e78;font-size:11px;line-height:1.5}.topology{height:410px;margin-top:35px;background:#0d100e;border:1px solid #2b302c;border-radius:16px;position:relative;overflow:hidden}.topo-grid{position:absolute;inset:0;background-image:linear-gradient(#171b18 1px,transparent 1px),linear-gradient(90deg,#171b18 1px,transparent 1px);background-size:32px 32px}.route-line{position:absolute;left:10%;right:10%;top:50%;height:1px;background:#485149}.node{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:7px;z-index:3}.n1{left:10%}.n2{left:30%}.n3{left:50%}.n4{left:70%}.n5{left:90%}.node-icon{width:58px;height:58px;border:1px solid #485149;background:#161a17;border-radius:13px;display:grid;place-items:center;box-shadow:0 0 0 7px #0d100e}.node-icon span{width:25px;height:17px;border:1px solid #8c958e;border-radius:3px;position:relative}.switch span,.router span{border-radius:999px;height:10px}.firewall span{height:23px;background:repeating-linear-gradient(90deg,transparent 0 6px,#475049 7px 8px)}.server span{height:26px}.node b{font:9px ui-monospace,monospace}.node small{font:7px ui-monospace,monospace;color:#69716b}.packet{position:absolute;top:calc(50% - 3px);width:7px;height:7px;background:#6dec92;border-radius:50%;box-shadow:0 0 13px #6dec92;z-index:2;animation:packet 4s linear infinite}.p2{animation-delay:-2s}@keyframes packet{from{left:10%}to{left:90%}}.topo-status{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;font:8px ui-monospace,monospace;color:#737b75}.topo-status span i{display:inline-block;width:6px;height:6px;background:#6dec92;border-radius:50%;margin-right:5px}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.story-card{min-height:420px;border:1px solid #292e2a;border-radius:22px;background:#151815;padding:clamp(24px,4vw,52px);display:flex;flex-direction:column}.story-card p,.body-copy{color:#929a94;font-size:14px;line-height:1.65;margin-top:35px}.signal{margin-top:auto;display:flex;align-items:center;gap:10px;font:8px ui-monospace,monospace}.signal span{color:#6dec92}.signal i{height:1px;flex:1;background:#343a35}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.chips span{font:8px ui-monospace,monospace;border:1px solid #343a35;border-radius:999px;padding:7px 9px;color:#858d87}.sim-badge{font:8px ui-monospace,monospace;color:#68e88d;border:1px solid #31533b;border-radius:999px;padding:8px 10px}.terminal-wrap{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:35px}.terminal,.test-panel{background:#090b0a;border:1px solid #2b302c;border-radius:14px;overflow:hidden}.term-top{height:39px;border-bottom:1px solid #252a26;display:flex;align-items:center;gap:6px;padding:0 13px}.term-top span{width:7px;height:7px;border-radius:50%;background:#343a35}.term-top b{margin-left:7px;font:8px ui-monospace,monospace;color:#687069}.terminal pre{margin:0;padding:25px;min-height:330px;white-space:pre-wrap;color:#9da69f;font:11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}.test-panel{padding:10px;display:grid;gap:8px}.test-panel div{border:1px solid #262b27;border-radius:10px;padding:17px;position:relative}.test-panel span{display:block;font:7px ui-monospace,monospace;color:#626a64}.test-panel b{display:block;font:18px ui-monospace,monospace;margin-top:9px}.test-panel i{position:absolute;right:15px;top:50%;width:7px;height:7px;border-radius:50%}.ok{background:#67e98c;box-shadow:0 0 10px #67e98c}.result{min-height:370px;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:50px}.result-copy p{color:#8a928c;line-height:1.6}.result-metrics{display:flex;gap:8px;margin-top:35px}.result-metrics span{flex:1;border-top:1px solid #343a35;padding-top:12px;font:7px ui-monospace,monospace;color:#69716b}.result-metrics b{display:block;color:#f1f3ef;font-size:17px;margin-bottom:5px}.next-case{margin-top:12px;padding:25px 5px;display:flex;justify-content:space-between;font:8px ui-monospace,monospace;color:#69716b}.next-case a{color:#f0f2ef}
@media(max-width:900px){.hero-orbit{width:220px;height:220px}.story-grid,.terminal-wrap,.result{grid-template-columns:1fr}.topology{height:520px}.route-line{left:50%;right:auto;top:10%;bottom:10%;width:1px;height:auto}.node{left:50%!important;top:auto}.n1{top:10%}.n2{top:30%}.n3{top:50%}.n4{top:70%}.n5{top:90%}.packet{left:calc(50% - 3px);top:10%;animation:packetV 4s linear infinite}@keyframes packetV{from{top:10%}to{top:90%}}}
@media(max-width:650px){.case-brand{display:none}.case-hero{min-height:500px}.hero-orbit{position:absolute;right:-80px;opacity:.45}.section-head{align-items:flex-start;flex-direction:column}.topology-section,.validation,.result,.story-card{border-radius:16px}.result-metrics{flex-direction:column}.next-case{gap:20px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* v3.0 Project Data Engine */
.topology .node{left:var(--node-pos)!important}
.case-links{display:flex;gap:7px;margin-top:22px;flex-wrap:wrap}
.case-links a{font:8px ui-monospace,monospace;border:1px solid #384039;border-radius:999px;padding:8px 11px}
@media(min-width:901px){.case-hero{min-height:500px}.topology .node{top:50%!important}}
@media(max-width:900px){.topology .node{left:50%!important}.topology .node:nth-of-type(n+7){display:none}}

/* v3.5 mobile case-study polish */
@media(max-width:620px){
 .case-nav{height:58px;padding:0 14px}
 main{padding-left:8px;padding-right:8px}
 .case-hero{padding:28px 20px;min-height:430px}
 .hero-copy h1{font-size:clamp(46px,16vw,72px)}
 .hero-meta{gap:5px;margin-top:28px}
 .hero-meta span{padding:7px 8px}
 .topology-section,.validation,.result,.story-card{padding:22px 18px}
 .terminal pre{font-size:9px;padding:17px;overflow:auto}
 .test-panel div{padding:14px}
 .result{gap:25px}
}


/* v4.0.8 — REAL project cover fix
   project.php loads THIS stylesheet (project-pro.css). */
.project-cover-v405{
  width:620px !important;
  max-width:calc(100% - 32px) !important;
  margin:18px auto 28px !important;
  padding:9px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  background:var(--card) !important;
}
.project-cover-label-v405{
  margin:3px 4px 9px !important;
}
.project-cover-frame-v405{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16/9 !important;
  margin:0 auto !important;
  overflow:hidden !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
  background:#080d0a !important;
}
.project-cover-frame-v405 img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
@media(max-width:700px){
  .project-cover-v405{
    width:100% !important;
    max-width:100% !important;
    margin:12px auto 20px !important;
    padding:6px !important;
    border-radius:12px !important;
  }
  .project-cover-frame-v405{
    aspect-ratio:16/9 !important;
    border-radius:8px !important;
  }
}

/* v4.0.9 dynamic detail cleanup */
.project-cover-v405{margin-bottom:16px!important}
.project-cover-v405 + .topology-section{margin-top:0!important}
@media(max-width:700px){.project-cover-v405{margin-bottom:12px!important}}

/* v4.1.0 final technical polish */
#terminalText{white-space:pre-wrap;word-break:break-word;line-height:1.75}
.result-metrics span b{white-space:nowrap}