/* ═══ Reset + Global Structure ═══ */ *{margin:0;padding:0;box-sizing:border-box;} img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} html{scroll-behavior:smooth;} html,body{overflow-x:hidden;} main{position:relative;z-index:2;} /* ═══ Top Navigation ═══ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:40; height:var(--nav-h); display:flex;align-items:center;justify-content:space-between; padding:0 var(--pad-x); border-bottom:1px solid var(--line); background:rgba(244,239,230,.82); backdrop-filter:blur(8px); } .nav__brand{ font-family:var(--serif); font-size:22px;font-weight:600;letter-spacing:-.01em; } .nav__brand span{color:var(--accent);} .nav__links{ display:flex;align-items:center;gap:12px; font-size:11px;font-weight:600;letter-spacing:.06em; } .nav__links a{color:var(--ink);transition:color .25s;} .nav__links a:hover{color:var(--accent);} .nav__links .sep{color:var(--line);font-weight:300;} .nav__links a.is-active{color:var(--ink);} .nav__links a.is-active::after{ content:"";display:block;height:1px;background:var(--accent);margin-top:3px; } .nav__stat{font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:600;letter-spacing:.08em;} /* ═══ Left rail (spine) + crosshairs ═══ */ .rail{position:fixed;top:0;bottom:0;left:var(--rail-x);z-index:3;pointer-events:none;} .rail i{position:absolute;top:calc(var(--nav-h) + 40px);bottom:48px;width:1px;background:var(--line);opacity:.7;} .rail i:nth-child(1){left:0;} .rail i:nth-child(2){left:7px;} .rail i:nth-child(3){left:14px;} .cross{position:fixed;z-index:3;width:18px;height:18px;pointer-events:none;opacity:.5;} .cross::before,.cross::after{content:"";position:absolute;background:var(--line);} .cross::before{left:8px;top:0;width:1px;height:18px;} .cross::after{top:8px;left:0;height:1px;width:18px;} .cross--tr{top:calc(var(--nav-h) + 22px);right:38px;} .cross--bl{bottom:34px;left:34px;} .cross--br{bottom:34px;right:38px;} /* ═══ Buttons ═══ */ .btn{ display:inline-flex;align-items:center;gap:12px; font-family:var(--sans-cjk);font-size:15px;font-weight:400; transition:all .3s var(--ease); } .btn .arr{transition:transform .3s var(--ease);} .btn:hover .arr{transform:translateX(5px);} .btn--ghost{ padding:16px 36px;border:1px solid var(--ink); background:transparent;color:var(--ink); } .btn--ghost:hover,.btn--ghost:active{background:var(--accent);border-color:var(--accent);color:var(--paper);} .btn--link{ padding:16px 36px;border:1px solid var(--ink); background:transparent;color:var(--ink); } .btn--link:hover,.btn--link:active{color:var(--accent);border-color:var(--accent);} /* ═══ Section spec labels ═══ */ .spec-label{ font-family:var(--mono);font-size:10px;letter-spacing:.14em; color:var(--muted);text-transform:uppercase; } .section-num{ font-family:var(--mono);font-size:11px;letter-spacing:.12em; color:var(--accent);font-weight:600; } /* ═══ Reveal animation — default visible, hide only when JS explicitly opts in ═══ */ /* Content is visible by default. JS adds .js-reveal to or to enable the hidden initial state, then IntersectionObserver adds .is-visible to reveal. */ [data-reveal]{opacity:1;transform:none;} .js-reveal [data-reveal], .js-reveal body[data-reveal], .js-reveal [data-reveal]:not(.is-visible){ opacity:0;transform:translateY(18px); } .js-reveal [data-reveal].is-visible{ opacity:1;transform:none; transition:opacity .8s var(--ease),transform .8s var(--ease); } .js-reveal [data-reveal][data-delay="1"]{transition-delay:.1s;} .js-reveal [data-reveal][data-delay="2"]{transition-delay:.2s;} .js-reveal [data-reveal][data-delay="3"]{transition-delay:.3s;} /* .is-ready is kept as an alias for backwards compatibility with pages that use it */ .is-ready [data-reveal]{opacity:1;transform:none;} .is-ready [data-reveal].is-visible{ opacity:1;transform:none; transition:opacity .8s var(--ease),transform .8s var(--ease); } /* ═══ reduced motion ═══ */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} [data-reveal]{opacity:1;transform:none;} } /* ═══ Responsive ═══ */ @media (max-width:860px){ :root{ --pad-x:20px; --rail-x:20px; --nav-h:72px; } .rail,.cross{display:none;} .nav{padding:0 var(--pad-x);} .nav__brand{font-size:18px;} .nav__links{gap:8px;font-size:9px;} .nav__links .sep{display:none;} .nav__links a:nth-of-type(n+5){display:none;} .nav__stat{display:none;} .btn{white-space:nowrap;font-size:13px;} .btn .arr{flex:none;} .hero__wordmark{font-size:clamp(56px,16vw,110px);} .hero__slogan{font-size:16px;line-height:1.55;} } @media (max-width:600px){ .nav__links a:nth-of-type(n+4){display:none;} .hero__cta{flex-direction:column;} .hero__cta .btn{width:100%;} } /* ═══ Scroll margin for anchor links under fixed nav ═══ */ section[id], [id]{ scroll-margin-top:calc(var(--nav-h) + 24px); } /* ═══ Focus styles ═══ */ a:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ═══ Overflow safety ═══ */ pre, code, .code-block__body, .code-block__code, .pipeline-diagram-wrap, .flow-steps, .pipeline-mini, .trace-chain, .trace{ overflow-x:auto; } pre,code{ overflow-wrap:anywhere; word-break:break-word; }