@font-face{font-family:Pretendard;src:url('assets/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:#08090b;--panel:#0c0e11;--ink:#f1f2f3;--muted:#9b9da4;--faint:#747981;--line:#ffffff20;--accent:#1e7f45;--amber:#dfad58;--pad:clamp(22px,4.4vw,76px);--max:1440px;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Pretendard,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;word-break:keep-all}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;background:none;border:0}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:focus:not(:focus-visible){outline:none}::selection{background:#1e7f45;color:#08090b}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{line-height:1.2;letter-spacing:-.035em}img{max-width:100%;display:block}svg{display:block}ol{padding:0;margin:0}button,[role=tab]{touch-action:manipulation}[hidden]{display:none!important}.wrap{width:min(100% - var(--pad)*2,var(--max));margin-inline:auto}.mono{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.1em;line-height:1.5}.soft{color:#90939a}.note{font-size:12px;line-height:1.8;color:var(--muted)}.status-dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;vertical-align:middle;margin-right:10px;box-shadow:0 0 10px #1e7f4530}.skip{position:fixed;top:-70px;left:16px;z-index:1000;background:var(--accent);color:#08090b;padding:10px 20px}.skip:focus{top:10px}
/* Navigation */
.header{height:86px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid var(--line);position:relative;z-index:20;background:var(--bg)}.brand{display:inline-flex;gap:12px;align-items:center;flex-shrink:0;font-size:30px;font-weight:630;line-height:1;letter-spacing:-1px}.brand img{filter:grayscale(1);border-radius:0}.brand-small{display:block;font-size:9px;letter-spacing:0;font-weight:400;color:var(--muted);margin-top:7px}.nav{display:flex;gap:34px;font-size:13px}.nav a{color:#acafb5;transition:color .2s}.nav a:hover{color:#fff}.header-end{display:flex;gap:30px;align-items:center;font-size:12px}.language{font-size:10px}.language>span:last-child{color:var(--muted);font-size:9px}.slash{margin:0 5px;color:#4c5159}.contact-nav{border-left:1px solid var(--line);padding-left:26px;white-space:nowrap}.contact-nav>span{margin-left:24px}.menu-toggle{display:none}.mobile-nav{position:absolute;top:100%;left:0;right:0;background:#0e1013;padding:24px var(--pad);border-bottom:1px solid #333}.mobile-nav a{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:15px 0}.mobile-nav p{font-size:12px;color:var(--muted);margin-top:24px}
/* First impression */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 76% 42%,#171b202b,transparent 45%)}.hero-overline{display:flex;justify-content:space-between;margin-top:30px;color:var(--muted)}.hero-edition{font-size:9px;color:var(--faint)}.hero-grid{display:grid;grid-template-columns:46% 54%;align-items:center;min-height:650px;padding-top:10px;padding-bottom:20px}.hero-copy{position:relative;z-index:2;padding:30px 0 45px}.eyebrow{font-size:13px;color:var(--muted);margin-bottom:32px}.hero h1{font-size:clamp(40px,4.4vw,74px);line-height:1.17;font-weight:530;letter-spacing:-.052em}.hero-description{color:#b2b5bb;font-size:16px;line-height:1.85;margin-top:28px}.hero-ctas{display:flex;align-items:center;gap:27px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;font-size:13px;padding:15px 19px;border:1px solid #e8e9e9;min-height:50px;transition:background .2s}.button-white{background:#edeeef;color:#0c0d0e}.button-white:hover{background:var(--accent);border-color:var(--accent)}.text-link{display:inline-flex;justify-content:space-between;gap:22px;font-size:12px;align-items:center}.text-link:hover{color:var(--accent)}.hero-definition{margin-top:28px;font-size:11px;line-height:1.8;color:var(--muted)}.sphere-stage{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;margin-inline:auto;align-self:center;min-width:0}.sphere-stage::before,.sphere-stage::after{content:'';position:absolute;pointer-events:none;width:13px;height:13px;border-color:#69717b60;z-index:2}.sphere-stage::before{left:9%;top:9%;border-left:1px solid;border-top:1px solid}.sphere-stage::after{right:9%;bottom:12%;border-right:1px solid;border-bottom:1px solid}.sphere-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;cursor:grab;touch-action:pan-y}.sphere-stage canvas:active{cursor:grabbing}.sphere-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.9}.webgl-ready .sphere-fallback{visibility:hidden}.sphere-top{position:absolute;top:3%;left:10%;right:10%;display:flex;justify-content:space-between;color:#81858e;z-index:3;pointer-events:none}.sphere-top .mono{font-size:8px}.sphere-annotation{position:absolute;font-size:10px;color:#d6d8dd;z-index:3;pointer-events:none}.sphere-annotation .mono{display:block;color:#838990;font-size:7px;margin-top:5px}.sphere-annotation i{display:block;position:absolute;width:55px;height:1px;top:10px;background:linear-gradient(90deg,#eee6,transparent)}.annotation-a{top:29%;right:8%}.annotation-a i{right:calc(100% + 10px);transform:rotate(30deg);transform-origin:right}.annotation-b{bottom:24%;left:8%}.annotation-b i{left:calc(100% + 10px);transform:rotate(-25deg);transform-origin:left}.sphere-bottom{position:absolute;bottom:3%;left:10%;right:10%;display:flex;align-items:center;justify-content:space-between;z-index:4}.sphere-bottom .mono{font-size:8px;color:#bfc3ca}.sphere-bottom .mono span{margin-left:14px}.sphere-help-ko{font-size:9px;color:#7f8590;margin-top:3px}.sphere-controls{display:flex;gap:8px;align-items:center}.sphere-controls button{font-size:10px;color:#aaafb7;padding:8px}.sphere-controls button:hover{color:#fff}.sphere-controls button:first-child{display:flex;gap:8px;align-items:center}.sphere-controls #sphere-reset{font-size:20px}.visual-disclaimer{position:absolute;bottom:-3%;left:10%;font-size:9px;color:#81868f}.hero-foot{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr) auto;gap:35px;padding-block:26px 30px}.hero-foot p{font-size:12px;line-height:1.6;color:#aeb3bc}.hero-foot .mono{display:block;font-size:8px;color:#7f8490;margin-bottom:7px}.hero-foot .scroll-link{font-size:8px;align-self:center;margin:0;color:#9ca1aa}.scroll-link span{font-size:18px;margin-left:16px}
/* Section cadence */
.section{padding-block:112px}.section-meta{border-top:1px solid var(--line);padding-top:19px;display:flex;justify-content:space-between;align-items:center;color:#a2a7af;gap:24px}.section-meta>.mono:last-child{font-size:8px;color:#777f8b}.cross{color:#a1a7b0;font-size:18px;line-height:1}.section-heading{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:7%;margin-top:60px;margin-bottom:62px}.section-heading h2{font-size:clamp(30px,3.3vw,53px);font-weight:450;line-height:1.3;letter-spacing:-.045em}.section-heading>p{color:var(--muted);font-size:14px;line-height:1.85;padding-bottom:6px;justify-self:end;min-width:280px}.small-tag{font-size:10px;border:1px solid #ffffff38;display:inline-block;padding:4px 10px;color:#bdc2ca;letter-spacing:.03em}
/* Memory assembly */
.memory{padding-top:72px}.memory-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:8%;align-items:center}.memory-copy h3{font-size:31px;font-weight:480;line-height:1.35;margin-top:23px}.memory-copy>p{color:var(--muted);font-size:14px;line-height:1.9;margin-top:20px;max-width:34em}.memory-modes{margin-top:37px;display:flex;border-bottom:1px solid var(--line);gap:15px}.memory-modes button{font-size:13px;padding:12px 8px 14px 0;color:#838993;position:relative}.memory-modes button span{font-family:'Courier New',monospace;font-size:9px;margin-right:8px}.memory-modes button[aria-selected=true]{color:#fff}.memory-modes button[aria-selected=true]::after{content:'';height:1px;background:var(--accent);position:absolute;bottom:-1px;left:0;right:0}.memory-panel{padding-top:22px;min-height:138px}.memory-panel h4{font-size:16px;font-weight:500}.memory-panel p{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.85}.circuit-figure{min-width:0;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 55%,#171c2540,transparent 65%);position:relative}.figure-heading{display:flex;justify-content:space-between;font-size:8px;color:#8b939f;padding:20px;border-bottom:1px solid #ffffff10}.circuit-art{padding:20px 8px 0}.circuit-art svg,.circuit-art img{width:100%;height:auto}.circuit-figure figcaption{font-size:10px;color:#989fa9;padding:0 20px 25px}.context-pair{display:grid;grid-template-columns:1fr 50px 1.2fr;gap:25px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:66px;padding:28px 0}.context-pair .mono{font-size:8px;color:#8d949f}.context-pair p{font-size:14px;margin-top:10px}.context-pair strong{font-weight:500;color:#fff}.pair-equal{color:#89919b;font-size:22px;text-align:center}.context-pair .code-line{font-family:'Courier New',monospace;font-size:11px;color:#929aa7;word-break:normal;overflow-wrap:anywhere}.code-line b{color:#d7dce3;font-weight:400}.code-line span{color:#525c68;margin:0 4px}.context-pair+.note{margin-top:18px;max-width:930px;font-size:11px}
/* Spatial architecture */
.system{background:#0b0d10}.system-console{border:1px solid var(--line);background:radial-gradient(ellipse at 55% 28%,#17202b45,transparent 65%)}.console-top{display:flex;justify-content:space-between;padding:21px 28px;border-bottom:1px solid #ffffff0c;color:#929aa6;gap:20px}.console-top .mono{font-size:8px}.system-scene{position:relative;padding:10px 10px 0;overflow:hidden}.system-scene svg,.system-scene>img{width:100%;height:auto;display:block;max-height:640px}.system-scene .station{transition:opacity .3s}.system-scene[data-active] .station{opacity:.72}.system-scene[data-active="0"] .station-0,.system-scene[data-active="1"] .station-1,.system-scene[data-active="2"] .station-2,.system-scene[data-active="3"] .station-3,.system-scene[data-active="4"] .station-4{opacity:1}.system-scene .station.is-current .station-roof{stroke:#1e7f45;stroke-opacity:.75}.flow-dot{offset-rotate:0deg;animation:travel 5s linear infinite}.flow-dot.slow{animation-duration:7s}.flow-dot.fast{animation-duration:4s}.signal-scan{stroke-dasharray:30 330;animation:scan 5s linear infinite}.system-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.system-tabs button{padding:21px 20px;font-size:13px;display:flex;gap:20px;align-items:center;color:#949ba5;border-right:1px solid var(--line);position:relative}.system-tabs button:last-child{border-right:0}.system-tabs button span{font-family:'Courier New',monospace;font-size:9px;color:#757e8b}.system-tabs button[aria-selected=true]{color:#f6f6f6;background:#ffffff06}.system-tabs button[aria-selected=true]::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--accent)}.system-tabs button[aria-selected=true] span{color:var(--accent)}.step-panel{padding:30px;display:grid;grid-template-columns:1fr 1.15fr;gap:9px 50px;min-height:158px}.step-panel>.mono{grid-column:1/-1;font-size:8px;color:#7f8997}.step-panel h3{font-size:22px;font-weight:450}.step-panel p{font-size:13px;color:#a3abb7;line-height:1.8}.guardrails{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:42px}.guardrails .mono{font-size:8px;color:#7d8591}.guardrails h3{font-size:19px;font-weight:470;margin-top:15px}.guardrails p{font-size:12px;color:var(--muted);margin-top:10px}.guardrails+.note{border-top:1px solid var(--line);padding-top:24px;margin-top:35px;font-size:11px}
/* Distinct service directions */
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.service{border-top:1px solid #ffffff40;padding-top:25px;overflow:hidden}.service-meta{display:flex;align-items:center;justify-content:space-between}.service-meta .mono{font-size:9px;color:#a0a8b4}.service .small-tag{font-size:9px;padding:3px 8px}.service-art{position:relative;height:250px;overflow:hidden;margin:20px 0 25px}.service-art::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,#ffffff10,#ffffff30,#ffffff10)}.service-art>.mono{position:absolute;bottom:10px;left:0;font-size:8px;color:#757f8b}.art-cross{position:absolute;right:0;top:15px;font-size:20px;color:#7b8793}.amber-art{background:radial-gradient(ellipse at 50% 50%,#704a1820,transparent 60%)}.amber-orbit{position:absolute;left:50%;top:50%;width:185px;height:185px;border:1px solid #dfad5870;border-radius:50%;transform:translate(-50%,-50%) rotate(-25deg);box-shadow:inset 0 0 35px #dfad5805}.orbit-two{width:120px;height:220px;transform:translate(-50%,-50%) rotate(45deg)}.orbit-three{width:100px;height:225px;transform:translate(-50%,-50%) rotate(-45deg)}.orbit-one::after{content:'';position:absolute;top:6px;left:55px;width:4px;height:4px;background:var(--amber);border-radius:50%;box-shadow:0 0 18px var(--amber)}.day-art{background:radial-gradient(ellipse at 50% 50%,#39485b25,transparent 60%)}.day-plane{position:absolute;top:35%;left:50%;width:175px;height:135px;border:1px solid #9badc170;background:repeating-linear-gradient(0deg,transparent 0 22px,#a7bdcc15 23px 24px),repeating-linear-gradient(90deg,transparent 0 27px,#a7bdcc15 28px 29px);transform:translate(-50%,-50%) rotate(-30deg) skew(27deg);box-shadow:0 0 30px #7c9bac04}.plane-two{top:51%;opacity:.65}.plane-three{top:67%;opacity:.35}.service-korean{font-size:12px;color:#a6adb8;margin-bottom:10px}.service h3{font-size:clamp(40px,4.6vw,70px);letter-spacing:-.055em;font-weight:350;line-height:1}.service h3>span{color:#bac3cf}.service-amber h3>span{color:var(--amber)}.service-title{font-size:23px;font-weight:450;line-height:1.5;margin-top:32px;letter-spacing:-.025em}.service-description{font-size:13px;color:var(--muted);line-height:1.9;margin-top:17px;max-width:36em}.service>.text-link{margin-top:32px;border-bottom:1px solid #ffffff44;padding-bottom:11px;min-width:195px}.service-grid+.note{font-size:11px;margin-top:43px}
/* Adoption */
.process{padding-top:45px}.process-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:9%;margin-top:60px}.process-intro h2{font-size:clamp(28px,2.5vw,40px);font-weight:450;line-height:1.35}.process-intro>p{font-size:14px;color:var(--muted);line-height:1.9;margin-top:24px}.process-list{list-style:none}.process-list li{display:grid;grid-template-columns:30px 1fr 58px;gap:25px;padding:25px 0;border-bottom:1px solid var(--line);align-items:start}.process-list li:first-child{padding-top:0}.process-num{font-size:12px;color:#e3e6ea;padding-top:4px}.process-list li>span:last-child{font-size:8px;color:#858d99;padding-top:5px;text-align:right}.process-list h3{font-size:18px;font-weight:460}.process-list p{font-size:12px;color:#969eaa;margin-top:10px;line-height:1.7}.process-mark{position:relative;max-width:330px;aspect-ratio:1.3;margin-top:40px;border-top:1px solid #ffffff12}.process-mark>.mono{position:absolute;top:20px;left:0;color:#7b8592;font-size:8px}.orbit-line{position:absolute;left:20%;top:22%;width:55%;aspect-ratio:1;border:1px solid #ffffff29;border-radius:50%}.orbit-line::after{content:'';position:absolute;inset:20%;border:1px solid #ffffff18;border-radius:50%}.orbit-center{position:absolute;left:47.5%;top:55%;transform:translate(-50%,-50%);font-size:25px;letter-spacing:-.05em;font-weight:400}.process-mark i{position:absolute;left:21%;top:42%;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px #1e7f4588}.cost-line{border-block:1px solid var(--line);padding:26px 0;margin-top:56px}.cost-line>.mono{font-size:8px;color:#a2aab4}.cost-line>p:not(.note){font-size:14px;margin-top:14px}.cost-line>p>span{color:#65707e;margin:0 16px}.cost-line .note{font-size:11px;margin-top:12px}
/* Questions, contact & colophon */
.faq{padding-top:10px;display:grid;grid-template-columns:1fr 1.5fr;gap:7%}.faq-title>.mono{font-size:8px;color:#959daa}.faq-title h2{font-size:30px;font-weight:450;margin-top:20px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:25px;font-size:15px;padding:23px 0}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:18px;color:#989fa9;line-height:1.4}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details>p{color:#9ca5b1;font-size:13px;line-height:1.85;padding-bottom:25px;max-width:49em}.contact{padding-top:0;padding-bottom:80px}.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;margin-top:60px;align-items:end}.contact h2{font-size:clamp(32px,3.5vw,56px);font-weight:450;line-height:1.3}.contact-grid>div>p{font-size:14px;color:var(--muted);margin-top:25px;line-height:1.9}.contact-mail{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c3c7ce;padding-bottom:25px;gap:25px;font-size:20px;letter-spacing:-.03em}.contact-mail>span:last-child{font-size:48px;line-height:1;font-weight:200;color:var(--accent);transition:transform .25s}.contact-mail:hover>span:last-child{transform:translate(5px,-5px)}.email-row{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.email-row .mono{font-size:12px;letter-spacing:.02em;color:#a8b0bb}.email-row button{font-size:11px;border-bottom:1px solid #78828e;padding:3px 0;color:#c1c7d0}.contact-actions #copy-status{font-size:10px;margin-top:16px}.footer{border-top:1px solid var(--line);padding-top:35px;overflow:hidden}.footer-top{display:flex;align-items:center;gap:30px;justify-content:space-between}.footer-top p{font-size:12px;color:#9fa6b1}.footer-top>.mono{font-size:8px;color:#a0a8b3}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:40px;color:#7f8996;font-size:10px}.footer-bottom>.mono{font-size:8px}.footer-bottom>div{display:flex;gap:22px}.footer-word{font-family:Pretendard,sans-serif;font-size:clamp(140px,29vw,450px);letter-spacing:-.09em;line-height:1.03;font-weight:500;color:#fff;margin:32px 0 -32px -12px;position:relative}.footer-word span{font-size:25px;position:absolute;letter-spacing:0;font-weight:300;margin-left:35px;margin-top:55px;color:#76808d}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}@keyframes scan{to{stroke-dashoffset:-720}}.motion-paused *,.motion-paused svg *{animation-play-state:paused!important}.motion-paused .signal-scan{stroke-dasharray:none;opacity:.3}
@media(min-width:1650px){.hero-grid{min-height:760px}.hero h1{font-size:75px}.hero-copy{padding-top:55px}}
@media(max-width:1190px){.header{gap:22px;height:76px}.nav{gap:24px}.header-end{gap:20px}.language{display:none}.contact-nav{padding-left:20px}.hero-grid{min-height:590px;grid-template-columns:48% 52%;padding-bottom:26px}.hero h1{font-size:clamp(40px,4.5vw,57px)}.hero-description{font-size:14px}.hero-ctas{gap:20px}.button{font-size:12px;gap:22px;padding:14px 16px}.hero-ctas .text-link{font-size:11px;gap:12px}.sphere-stage{width:117%;margin-left:-8%}.sphere-annotation{font-size:9px}.annotation-a{right:3%}.annotation-b{left:4%}.sphere-annotation .mono{font-size:6px}.hero-foot{gap:24px;grid-template-columns:repeat(3,1fr)}.scroll-link{display:none!important}.section{padding-block:85px}.memory{padding-top:50px}.section-heading{gap:5%;margin-top:48px;margin-bottom:45px}.section-heading>p{font-size:13px;min-width:245px}.memory-grid{gap:5%}.memory-copy h3{font-size:28px}.memory-copy>p{font-size:13px}.context-pair{gap:20px;grid-template-columns:1fr 20px 1fr}.context-pair p{font-size:12px}.context-pair .code-line{font-size:10px}.service-grid{gap:45px}.service-art{height:220px}.service-title{font-size:21px}.process-grid{gap:6%;grid-template-columns:1fr 1.2fr}.process-list li{gap:16px}.process-list li>span:last-child{display:none}.process-list li{grid-template-columns:25px 1fr}.contact-mail{font-size:18px}.footer-bottom>span:nth-child(2){display:none}}
@media(max-width:820px){:root{--pad:28px}.header{height:72px}.brand{font-size:26px}.brand img{width:29px;height:29px}.brand-small{font-size:8px}.nav{display:none}.contact-nav{border:0;font-size:12px;padding:0}.contact-nav span{margin-left:10px}.menu-toggle{display:flex;font-size:12px;gap:15px;align-items:center;padding:8px}.header-end{gap:25px}.hero-overline{margin-top:22px}.hero-edition{display:none}.hero-grid{grid-template-columns:1fr;position:relative;padding-top:16px;padding-bottom:10px}.hero-copy{padding:32px 0 0}.eyebrow{font-size:12px;margin-bottom:25px}.hero h1{font-size:clamp(42px,7.5vw,62px);line-height:1.18}.hero-description{margin-top:26px;font-size:14px}.hero-ctas{margin-top:28px}.hero-definition{font-size:10px;margin-top:22px}.sphere-stage{width:min(100%,630px);margin:5px auto 30px;aspect-ratio:1/1}.sphere-top .mono{font-size:8px}.sphere-annotation{font-size:10px}.sphere-annotation .mono{font-size:7px}.annotation-a{right:7%}.annotation-b{left:5%}.hero-foot{padding-top:22px;gap:18px}.hero-foot p{font-size:11px}.hero-foot .mono{font-size:7px}.section{padding-block:68px}.section-meta>.mono:last-child{display:none}.section-meta>.mono:first-child{font-size:9px}.section-meta .cross{margin-left:auto}.section-heading{grid-template-columns:1fr;gap:25px;margin-top:40px}.section-heading h2{font-size:clamp(30px,4.8vw,40px)}.section-heading>p{justify-self:start;font-size:13px}.memory-grid{grid-template-columns:1fr;gap:35px}.memory-copy>p{max-width:47em}.memory-panel{min-height:95px}.circuit-figure{width:100%}.circuit-art{padding:15px 30px 0}.circuit-art svg{max-height:450px}.context-pair{grid-template-columns:1fr;gap:18px;margin-top:40px;padding:25px 0}.pair-equal{display:none}.context-pair p{font-size:13px}.context-pair .code-line{font-size:11px}.context-pair>div:last-child{padding-top:18px;border-top:1px solid #ffffff0d}.console-top{padding:16px}.console-top .mono{font-size:7px}.system-scene{padding:15px 0}.system-tabs button{padding:15px 13px;gap:11px;font-size:12px}.step-panel{padding:23px;grid-template-columns:1fr;min-height:180px;gap:13px}.step-panel h3{font-size:23px}.step-panel p{font-size:13px}.guardrails{gap:25px}.guardrails h3{font-size:17px}.guardrails p{font-size:11px}.service-grid{gap:35px}.service h3{font-size:44px}.service-title{font-size:20px}.service-art{height:190px}.amber-orbit{width:140px;height:140px}.orbit-two,.orbit-three{height:180px;width:85px}.day-plane{width:133px;height:100px}.service-description{font-size:12px}.process-grid{grid-template-columns:1fr;gap:45px;margin-top:40px}.process-intro h2{font-size:33px}.process-mark{display:none}.process-list li{grid-template-columns:30px 1fr 70px}.process-list li>span:last-child{display:block}.cost-line{margin-top:40px}.cost-line>p:not(.note){font-size:12px}.cost-line>p>span{margin:0 7px}.faq{grid-template-columns:1fr;gap:32px;padding-top:10px}.faq-title h2{font-size:28px}.contact{padding-top:15px}.contact-grid{grid-template-columns:1fr;gap:45px;margin-top:40px}.contact h2{font-size:38px}.contact-actions{max-width:500px}.footer-top p{font-size:11px}.footer-bottom>div{gap:16px}.footer-word{margin-top:35px;margin-bottom:-10px}.footer-word span{font-size:15px;margin-top:30px;margin-left:20px}}
@media(max-width:480px){:root{--pad:22px}.header{padding-inline:22px;gap:15px}.header-end{gap:13px}.contact-nav{font-size:11px}.menu-toggle{font-size:11px;gap:10px}.hero-overline .mono{font-size:7px;letter-spacing:.065em}.hero h1{font-size:42px}.hero-description{font-size:13px}.hero-copy{padding-top:29px}.hero-ctas{gap:23px;align-items:center}.hero-ctas .text-link{font-size:10px;gap:8px}.hero-ctas .button{font-size:11px;gap:22px;min-height:46px;padding:11px 14px}.hero-definition{margin-top:20px;font-size:10px}.sphere-stage{width:calc(100% + 32px);margin:18px -16px 32px}.sphere-top{left:9%;right:9%;top:4%}.sphere-top .mono{font-size:6px}.sphere-annotation{font-size:8px}.sphere-annotation .mono{font-size:5px}.sphere-annotation i{width:30px}.annotation-a{right:8%;top:27%}.annotation-b{left:8%;bottom:24%}.sphere-bottom{bottom:3%;left:9%;right:9%}.sphere-controls button{font-size:9px;padding:5px}.sphere-controls #sphere-reset{font-size:18px}.sphere-bottom .mono{font-size:6px}.sphere-help-ko{font-size:8px}.visual-disclaimer{font-size:7px;left:9%;bottom:-3%}.hero-foot{grid-template-columns:1fr;gap:14px;padding-block:20px}.hero-foot p{display:flex;align-items:center;gap:20px;font-size:10px}.hero-foot .mono{font-size:7px;min-width:102px;margin:0}.section{padding-block:57px}.section-meta>.mono:first-child{font-size:8px}.section-heading{margin-top:32px;margin-bottom:34px;gap:21px}.section-heading h2{font-size:30px}.section-heading>p{font-size:12px}.memory-copy h3{font-size:28px}.memory-copy>p{font-size:13px}.memory-modes{margin-top:27px}.memory-panel{min-height:130px}.circuit-art{padding:10px 0}.figure-heading{font-size:6px;padding:15px}.circuit-figure figcaption{font-size:9px;padding:0 15px 20px}.context-pair{margin-top:35px}.context-pair p{font-size:12px}.context-pair .code-line{font-size:10px;line-height:1.9}.note{font-size:11px}.console-top{padding:13px;gap:10px}.console-top .mono{font-size:6px;letter-spacing:.04em}.console-top>.mono:last-child{display:none}.system-scene{overflow-x:auto;padding:5px 0;scrollbar-width:thin;scrollbar-color:#6b7480 #11151a}.system-scene svg,.system-scene>img{width:650px;max-width:none;height:309px}.system-tabs button{font-size:11px;gap:4px;flex-direction:column;padding:13px 3px}.system-tabs button>span{font-size:8px}.step-panel{padding:21px 18px;min-height:210px}.step-panel h3{font-size:21px}.step-panel p{font-size:12px}.step-panel>.mono{font-size:7px}.guardrails{grid-template-columns:1fr;gap:23px;margin-top:30px}.guardrails>div{display:grid;grid-template-columns:1fr 1.1fr;gap:7px 12px;align-items:center}.guardrails .mono{grid-column:1/-1;font-size:7px}.guardrails h3{margin:0;font-size:17px}.guardrails p{margin:0;font-size:10px}.guardrails+.note{font-size:10px;padding-top:20px;margin-top:25px}.service-grid{grid-template-columns:1fr;gap:55px}.service-art{height:220px;margin-bottom:18px}.amber-orbit{width:170px;height:170px}.orbit-two,.orbit-three{width:100px;height:210px}.day-plane{width:160px;height:120px}.service h3{font-size:56px}.service-title{margin-top:24px;font-size:23px}.service-description{font-size:13px}.service>.text-link{margin-top:26px}.service-grid+.note{font-size:10px}.process-grid{margin-top:32px;gap:35px}.process-intro h2{font-size:28px}.process-intro>p{font-size:12px}.process-list li{grid-template-columns:22px 1fr;gap:17px;padding-block:21px}.process-list li>span:last-child{display:none}.process-list h3{font-size:17px}.process-list p{font-size:11px}.cost-line>p:not(.note){font-size:12px;line-height:2}.cost-line>p>span{display:block;margin:0;color:#87939f;line-height:1.5}.cost-line .note{font-size:10px}.faq{padding-top:10px;gap:26px}.faq-list summary{font-size:13px;padding-block:21px}.faq-list details>p{font-size:12px}.contact{padding-top:5px}.contact h2{font-size:32px}.contact-grid>div>p{font-size:12px;margin-top:20px}.contact-grid{gap:32px}.contact-mail{font-size:20px;padding-bottom:20px}.contact-mail>span:last-child{font-size:42px}.contact-actions #copy-status{font-size:9px}.footer{padding-top:27px}.footer-top p{display:none}.footer-bottom{align-items:start;flex-direction:column;gap:16px;margin-top:26px}.footer-bottom>div{font-size:9px;gap:18px}.footer-word{font-size:33vw;margin-left:-5px;margin-top:26px}.footer-word span{font-size:12px;margin-top:22px;margin-left:15px}}
@media(max-width:359px){.hero h1{font-size:36px}.hero-ctas{flex-wrap:wrap;gap:19px}.hero-foot p{gap:10px}.hero-foot .mono{min-width:93px}.section-heading h2{font-size:27px}.contact-nav{display:none}.service h3{font-size:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.signal-scan{stroke-dasharray:none!important;opacity:.3}}

.offscreen .signal-scan,.tab-hidden .signal-scan{animation-play-state:paused!important}.no-js .sphere-controls,.no-js .menu-toggle{display:none}.no-js .sphere-help-ko{visibility:hidden}.no-js .memory-panel,.no-js .step-panel{display:block;margin-bottom:20px}.no-js .step-panel>*{margin-bottom:12px}.no-js .memory-modes{display:none}.no-js .system-tabs{display:none}.system-scene:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@media(max-width:820px){.hero-copy{display:contents}.hero-copy .eyebrow{grid-row:1;margin-top:22px;margin-bottom:20px}.hero-copy h1{grid-row:2}.hero-grid>.sphere-stage{grid-row:3;margin-top:15px}.hero-copy .hero-description{grid-row:4;margin-top:4px}.hero-copy .hero-ctas{grid-row:5}.hero-copy .hero-definition{grid-row:6;margin-bottom:20px}}
@media(max-width:480px){.hero-grid>.sphere-stage{margin-top:10px;margin-bottom:32px}.hero-copy .eyebrow{font-size:11px}.hero-copy .hero-description{font-size:13px}}

.no-js .sphere-bottom,.no-js #copy-email,.no-js #memory-sphere{display:none}.sphere-controls button:disabled{opacity:.35;cursor:default}

/* 2026-10-04: fixed yellow header, dynamic type, six benefits, reference palettes. */
:root{--header-height:88px;--amber:#b06030;--amber-light:#eeaa7a;--day:#407090;--day-light:#70c0f0}
html{scroll-padding-top:calc(var(--header-height) + 22px)}body{padding-top:var(--header-height)}
.header{position:fixed;inset:0 0 auto;height:var(--header-height);padding:0;display:block;background:var(--accent);color:#10110c;border-bottom:1px solid #15160028;z-index:100;border-radius:0}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}.header .brand{font-size:34px;font-weight:780;gap:13px;color:#080a06;letter-spacing:-1.6px}.header .brand img{width:46px;height:40px;filter:none;border:0;border-radius:0;background:none}.header .brand-small{font-size:10px;letter-spacing:.01em;font-weight:500;margin-top:6px;color:#181a10}.header .nav a{color:#16170f;font-weight:540}.header .nav a:hover{text-decoration:underline;text-underline-offset:6px;color:#000}.header .language,.header .contact-nav,.header .menu-toggle{color:#10120a}.header .language>span:last-child{color:#4d4d18}.header .slash{color:#5d5c22}.header .contact-nav{border-color:#191b123d;font-weight:620}.header .contact-nav:hover{text-decoration:underline;text-underline-offset:6px}.header :focus-visible{outline-color:#141607}.header .mobile-nav{background:var(--accent);color:#10120a;border-bottom:1px solid #17191050;max-height:calc(100dvh - var(--header-height));overflow:auto;padding-inline:max(var(--pad),calc((100vw - var(--max))/2))}.header .mobile-nav a{border-color:#17191030}.header .mobile-nav p{color:#404315}.header .menu-toggle{font-weight:550}.brand img{border-radius:0}.footer .brand img{filter:invert(1);width:35px;height:31px}.button,button,.small-tag,.service,.system-console,.circuit-figure{border-radius:0}
.hero h1{font-size:clamp(42px,4.25vw,70px);line-height:1.21;letter-spacing:-.05em;font-weight:300}.title-light{font-weight:260;font-size:.76em;letter-spacing:-.035em;color:#d1d3d8}.hero-heavy{font-weight:850;font-size:1.22em;line-height:1.09;letter-spacing:-.055em}.title-heavy{font-weight:800;letter-spacing:-.047em;color:#f1f2f3}.title-inverse{display:inline-block;background:#eef0f2;color:#08090b;font-size:.86em;line-height:1.15;font-weight:740;letter-spacing:-.04em;padding:.08em .16em .13em;margin-top:.12em;white-space:nowrap}.inverse-yellow{background:var(--accent);color:#10120a;font-size:.95em}.section-heading h2{font-size:clamp(32px,3.55vw,56px);font-weight:300;line-height:1.27}.section-heading .title-light{font-size:.71em}.process-intro h2{font-size:clamp(30px,2.75vw,42px);line-height:1.29;font-weight:300}.process-intro .title-light{font-size:.71em}.contact h2{font-size:clamp(34px,3.6vw,57px);line-height:1.28;font-weight:300}.contact .title-light{font-size:.7em}.faq-title h2{font-weight:780}
.memory-copy h3{font-weight:300;font-size:30px}.memory-copy h3 strong{font-weight:770}.memory-copy>p strong{font-weight:560;color:#d2d6dc}.memory-modes.benefit-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #ffffff30;margin-top:30px}.benefit-tabs button{font-size:12px;white-space:nowrap;margin:0;padding:13px 8px;text-align:left;border-right:1px solid #ffffff20;border-bottom:1px solid #ffffff20;color:#b5bbc4;min-height:45px}.benefit-tabs button:nth-child(3n){border-right:0}.benefit-tabs button:nth-child(n+4){border-bottom:0}.benefit-tabs button span{font-size:9px;margin-right:7px;color:#818b98}.benefit-tabs button[aria-selected=true]{background:var(--accent);color:#11130b;font-weight:650}.benefit-tabs button[aria-selected=true] span{color:#303618}.benefit-tabs button[aria-selected=true]::after{display:none}.memory-panel{min-height:184px;padding-top:23px}.benefit-key{display:block;font-size:8px;letter-spacing:.11em;color:#a5afbd;margin-bottom:12px}.memory-panel h4{font-size:18px;line-height:1.4;font-weight:680}.memory-panel p{font-size:13px;line-height:1.85;margin-top:12px}.comparison-note{font-size:10px;line-height:1.75;color:#868f9e;border-top:1px solid var(--line);padding-top:14px}
.service-grid{gap:32px}.service{padding:28px;border:1px solid #ffffff25;position:relative}.service-amber{background:linear-gradient(145deg,#4e2b1b 0%,#241a14 53%,#140f0c 100%);border-color:#b060306b}.service-day{background:linear-gradient(145deg,#12374d 0%,#0c1f2f 53%,#080f18 100%);border-color:#4070909c}.service-amber .service-meta>.mono,.service-amber .service-korean{color:#dfa477}.service-day .service-meta>.mono,.service-day .service-korean{color:#84bfdf}.service-amber .small-tag{color:#edbd9b;border-color:#d7946260}.service-day .small-tag{color:#a5d7ee;border-color:#70c0f060}.service-amber h3,.service-amber h3>span{color:var(--amber-light)}.service-day h3,.service-day h3>span{color:var(--day-light)}.service-amber .service-title{color:#fff0e6}.service-day .service-title{color:#e4f3ff}.service-amber .service-description{color:#c8b3a4}.service-day .service-description{color:#a8bece}.service-amber>.text-link{color:#f0be99;border-color:#edac7888}.service-day>.text-link{color:#8ed1f2;border-color:#70c0f088}.amber-art{background:radial-gradient(ellipse at 50% 50%,#b0603045,transparent 66%)}.amber-orbit{border-color:#eeaa7a9c;box-shadow:inset 0 0 42px #c97a3820}.orbit-one::after{background:#ffcba2;box-shadow:0 0 22px #eea572}.service-amber .service-art::before{background:linear-gradient(90deg,#d8915520,#e9b28d70,#d8915520)}.service-amber .service-art>.mono,.service-amber .art-cross{color:#c69470}.day-art{background:radial-gradient(ellipse at 50% 50%,#317cac55,transparent 66%)}.day-plane{border-color:#70c0f0ac;background:repeating-linear-gradient(0deg,transparent 0 22px,#70c0f02e 23px 24px),repeating-linear-gradient(90deg,transparent 0 27px,#70c0f02e 28px 29px),linear-gradient(125deg,#397da755,#102b3e99);box-shadow:0 0 35px #5ab2e418}.service-day .service-art::before{background:linear-gradient(90deg,#70c0f014,#70c0f069,#70c0f014)}.service-day .service-art>.mono,.service-day .art-cross{color:#7ba9c3}
@media(max-width:1190px){.header-inner{gap:20px}.header .brand{font-size:32px}.hero h1{font-size:clamp(39px,4.45vw,55px)}.section-heading h2{font-size:clamp(31px,3.65vw,44px)}.memory-copy h3{font-size:26px}.benefit-tabs button{font-size:11px;padding:12px 6px}.benefit-tabs button span{font-size:8px;margin-right:5px}.memory-panel{min-height:219px}.service{padding:24px}.service-grid{gap:24px}.service h3{font-size:clamp(38px,4.2vw,55px)}}
@media(max-width:820px){:root{--header-height:76px}.header-inner{gap:17px}.header .brand{font-size:30px;gap:11px}.header .brand img{width:41px;height:36px}.header .brand-small{font-size:9px}.hero h1{font-size:clamp(43px,7vw,59px)}.section-heading h2{font-size:clamp(33px,5vw,42px)}.process-intro h2{font-size:37px}.contact h2{font-size:43px}.benefit-tabs button{font-size:13px;padding:15px 12px}.benefit-tabs button span{font-size:9px;margin-right:9px}.memory-panel{min-height:164px}.service-grid{gap:22px}.service{padding:23px}.service h3{font-size:39px}.service-title{font-size:19px}}
@media(max-width:600px){.service-grid{grid-template-columns:1fr;gap:26px}.service h3{font-size:56px}.service-title{font-size:23px}.service-description{font-size:13px}}
@media(max-width:480px){:root{--header-height:74px}.header .brand{font-size:28px;gap:10px}.header .brand img{width:38px;height:34px}.header .brand-small{font-size:8px;margin-top:5px}.header-inner{gap:12px}.header-end{gap:10px}.header .contact-nav{font-size:10px}.hero h1{font-size:40px;line-height:1.22}.hero-heavy{font-size:1.26em}.hero .title-light{font-size:.8em}.hero .title-inverse{font-size:.87em}.section-heading h2{font-size:33px}.section-heading .title-light{font-size:.7em}.memory-copy h3{font-size:25px}.benefit-tabs button{font-size:11px;padding:13px 7px}.benefit-tabs button span{font-size:8px;margin-right:5px}.memory-panel{min-height:214px}.memory-panel h4{font-size:18px}.memory-panel p{font-size:12px}.comparison-note{font-size:9px}.process-intro h2{font-size:30px}.contact h2{font-size:36px}.contact .title-light{font-size:.64em}.service{padding:23px}.service-grid{gap:26px}.service-art{margin-top:8px}.service h3{font-size:51px}.service-title{font-size:22px}.service-description{font-size:12px}}
@media(max-width:359px){.hero h1{font-size:35px}.section-heading h2{font-size:29px}.benefit-tabs button{font-size:10px;padding:12px 5px}.benefit-tabs button span{margin-right:4px}.memory-panel{min-height:242px}.process-intro h2{font-size:27px}.service h3{font-size:44px}.service-title{font-size:20px}.contact h2{font-size:32px}}

.no-js .benefit-tabs{display:none}

/* 2026-10-04 r4: LaB96 green glass, holographic side lockup, compact footer.
   Source: LaB96 public styles-v30-8271e474.css :root --accent #1E7F45. */
:root{--accent:#1e7f45;--accent-text:#9cdeb5;--on-accent:#f5faf7;--header-height:80px}
::selection{background:var(--accent);color:var(--on-accent)}
.skip,.inverse-yellow,.benefit-tabs button[aria-selected=true],.button-white:hover{color:var(--on-accent)}
.benefit-tabs button[aria-selected=true] span{color:var(--on-accent)}
.text-link:hover,.system-tabs button[aria-selected=true] span{color:var(--accent-text)}
.header{background:linear-gradient(112deg,rgba(30,127,69,.20),rgba(30,127,69,.035) 58%,rgba(30,127,69,.11)),rgba(10,16,13,.88);color:#eff6f1;border-bottom:1px solid rgba(156,222,181,.19);box-shadow:inset 0 1px 0 #ffffff0d,0 6px 28px #00000012;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%)}
.header-inner{gap:28px}
.header .brand{gap:11px;color:#f1f7f3;font-size:34px;font-weight:760;letter-spacing:-1.5px}
.header .brand-symbol{position:relative;display:block;flex:0 0 44px;width:44px;height:40px}
.header .brand-symbol img{width:100%;height:100%;object-fit:contain;filter:invert(1);opacity:.92}
.brand-symbol::after{content:'';position:absolute;inset:0;pointer-events:none;mask:url('assets/moai-mark.svg') center/contain no-repeat;-webkit-mask:url('assets/moai-mark.svg') center/contain no-repeat;background:linear-gradient(174deg,transparent 20%,rgba(156,222,181,.13) 40%,#bcf1cd 48%,#f3fff7 50%,#79d8a5 53%,transparent 68%);background-size:100% 330%;opacity:.8;animation:holo-symbol-scan 6.4s ease-in-out infinite}
.header .brand-word{display:block;line-height:1;white-space:nowrap}
.brand-tagline{position:relative;display:block;width:143px;height:23px;flex-shrink:0;margin-left:5px;padding-left:17px;border-left:1px solid #9cdeb53d;letter-spacing:.015em;font-size:13px;font-weight:430;line-height:23px;color:#d7ebdf}
.holo-line{position:absolute;left:17px;top:0;white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .38s ease,transform .38s ease}
.holo-line.is-active{opacity:1;transform:translateY(0)}
.holo-line::after{content:attr(data-copy);position:absolute;inset:0;pointer-events:none;color:#b3f3d4;opacity:0;transform:translateX(.6px);clip-path:inset(0 0 100%)}
.holo-line.is-active::after{animation:holo-text-scan 4.3s ease-in-out infinite}
.header .nav a{color:#d4e2da;font-weight:480}
.header .nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:#9cdeb5;text-underline-offset:7px}
.header .language,.header .contact-nav,.header .menu-toggle{color:#e8f1eb}
.header .language>span:last-child{color:#adc0b3}
.header .slash{color:#8fa496}
.header .contact-nav{border-color:#9cdeb533;font-weight:530}
.header :focus-visible{outline-color:var(--accent-text)}
.header .mobile-nav{background:linear-gradient(110deg,#1e7f451c,transparent),rgba(9,19,13,.98);color:#eaf5ee;border-bottom-color:#9cdeb53d;box-shadow:0 15px 30px #0005}
.header .mobile-nav a{border-color:#9cdeb526}
.header .mobile-nav p{color:#afc6b7}
@keyframes holo-symbol-scan{0%,12%{background-position:0 0;opacity:.25}46%,58%{opacity:.8}88%,100%{background-position:0 100%;opacity:.25}}
@keyframes holo-text-scan{0%,8%{opacity:0;clip-path:inset(0 0 100%)}18%{opacity:.48;clip-path:inset(15% 0 61%)}37%{opacity:.34;clip-path:inset(70% 0 12%)}48%,100%{opacity:0;clip-path:inset(100% 0 0)}}
.motion-paused .brand-symbol::after,.motion-paused .holo-line::after,.tab-hidden .brand-symbol::after,.tab-hidden .holo-line::after,.holo-held .brand-symbol::after,.holo-held .holo-line::after{animation-play-state:paused!important}
.motion-paused .holo-line{transition:none}
.footer.footer-clean{padding:0;border-top:1px solid #9cdeb526;background:#0a100d;overflow:visible}
.footer-inner{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:28px;min-height:80px;padding-block:19px}
.footer-copyright{font-size:11px;letter-spacing:.015em;color:#c3d0c8;white-space:nowrap}
.footer-copyright span{font-family:'Courier New',monospace;font-size:8px;letter-spacing:.06em;color:#94a49a;margin-left:17px}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:23px;font-size:10px;color:#b4c2b9}
.footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.footer-top-link{display:flex;gap:18px;align-items:center;font-family:'Courier New',monospace;font-size:9px;letter-spacing:.05em;color:#c0d1c7;padding-left:27px;border-left:1px solid #9cdeb526;white-space:nowrap}
.footer-top-link span{font-family:Pretendard,sans-serif;font-size:19px;line-height:1}
@supports not (backdrop-filter:blur(1px)){.header{background:#0e2116}}
@media(max-width:1190px){.header-inner{gap:18px}.header .brand{font-size:31px;gap:10px}.header .brand-symbol{flex-basis:40px;width:40px;height:36px}.brand-tagline{width:131px;font-size:12px;padding-left:14px;margin-left:3px}.holo-line{left:14px}.header .nav{gap:25px}.header-end{gap:20px}.header .language{display:none}}
@media(max-width:820px){:root{--header-height:76px}.header .brand{font-size:30px}.header .brand-symbol{flex-basis:38px;width:38px;height:34px}.brand-tagline{width:135px}.footer-inner{gap:20px}.footer-copyright span{display:none}.footer-links{gap:17px}.footer-top-link{padding-left:20px;gap:12px}}
@media(max-width:640px){.header .contact-nav{display:none}.footer-inner{grid-template-columns:1fr auto;gap:15px;padding-block:21px;min-height:96px}.footer-links{grid-column:1/-1;grid-row:2;gap:12px 21px;font-size:9px}.footer-top-link{grid-column:2;grid-row:1;border:0;padding-left:0}.footer-copyright span{display:inline;font-size:7px;margin-left:14px}}
@media(max-width:480px){:root{--header-height:72px}.header-inner{gap:10px}.header .brand{font-size:28px;gap:9px}.header .brand-symbol{flex-basis:34px;width:34px;height:30px}.brand-tagline{width:116px;font-size:11px;margin-left:2px;padding-left:12px;height:22px;line-height:22px}.holo-line{left:12px}.header .menu-toggle{font-size:11px}.header-end{gap:0}.footer-links{gap:12px 18px}}
@media(max-width:359px){.header .brand{font-size:26px;gap:7px}.header .brand-symbol{flex-basis:30px;width:30px;height:28px}.brand-tagline{width:96px;margin-left:1px;padding-left:10px;font-size:10px}.holo-line{left:10px}.header .menu-toggle{font-size:10px}.footer-copyright{font-size:10px}.footer-links{gap:12px 16px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.brand-symbol::after,.holo-line::after{animation:none!important;opacity:0}.holo-line{transition:none;transform:none}}
.no-js .brand-symbol::after,.no-js .holo-line::after{animation:none;opacity:0}

/* r5: light-green glass, BLACK canonical symbol, whole-lockup projection.
   #90D7A9 is a display/material tint of the LaB96 green direction, not a new CI value. */
.header{background:linear-gradient(108deg,rgba(240,255,245,.22),rgba(30,127,69,.07) 55%,rgba(235,255,241,.18)),rgba(144,215,169,.91);color:#12271a;border-bottom-color:#0d351b38;box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #0b351710,0 6px 25px #00000010;-webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%)}
.header .brand{color:#07180e}
.brand-holo{position:relative;isolation:isolate}
.brand-holo::after{content:'';position:absolute;left:10px;right:0;top:51%;height:1px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,#f7fff8d9 22%,#f7fff8b0 65%,transparent);transform:scaleX(0);transform-origin:left;opacity:0}
.header .brand-symbol{z-index:1;transform-origin:50% 55%;transform-style:preserve-3d}
.header .brand-symbol img{position:relative;z-index:2;filter:none;opacity:1}
.brand-symbol::before{content:'';position:absolute;inset:-9px -6px;z-index:0;pointer-events:none;background:radial-gradient(ellipse,#f5fff2e0 0%,#e8fff67a 35%,transparent 70%);filter:blur(3px);opacity:0;transform:scale(.5)}
.brand-symbol::after{z-index:0;inset:-6px -5px;mask:radial-gradient(ellipse,#000 28%,transparent 73%);-webkit-mask:radial-gradient(ellipse,#000 28%,transparent 73%);background:linear-gradient(166deg,transparent 33%,#f7fff270 43%,#fff 49%,#edfffaad 54%,transparent 65%);background-repeat:no-repeat;background-size:100% 290%;background-position:0 0;filter:blur(.7px);opacity:0;animation:none}
.header .brand-word{position:relative;z-index:1;display:inline-flex;align-items:baseline;transform-style:preserve-3d}
.word-char{display:inline-block;transform-origin:50% 80%;color:#07180e;line-height:1}
.brand-word::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:linear-gradient(90deg,transparent,#effff3 40%,transparent);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.brand-tagline{z-index:1;color:#173522;border-left-color:#17352242;font-weight:480}
.holo-line::after{color:#f3fff6}
.holo-line.is-active::after{animation:none}
.is-projecting .brand-symbol{animation:mark-project 1.6s cubic-bezier(.2,.65,.2,1) both}
.is-projecting .brand-symbol::before{animation:mark-light-well 1.8s ease-out both}
.is-projecting .brand-symbol::after{animation:mark-light-pass 1.6s ease-out both}
.is-projecting .word-char{animation:word-project 1.25s cubic-bezier(.2,.65,.2,1) both;animation-delay:calc(var(--char)*70ms)}
.is-projecting .brand-word::after{animation:word-light-trace 1.8s ease-out both}
.brand-holo.is-projecting::after{animation:lockup-light-trace 1.9s ease-out both}
.is-projecting .holo-line.is-active::after{animation:caption-light-pass 1.7s ease-out both}
.header .nav a,.header .contact-nav,.header .menu-toggle{color:#16321f;font-weight:570}
.header .nav a:hover,.header .contact-nav:hover{color:#06190c;text-decoration-color:#143c24}
.header .language{color:#1b3826}
.header .language>span:last-child{color:#24402d}
.header .slash{color:#294934}
.header .contact-nav{border-color:#173f253b}
.header :focus-visible{outline-color:#143820}
.header .mobile-nav{background:linear-gradient(110deg,#effff524,transparent),#a1d9b4fa;color:#102c1a;border-bottom-color:#174e3047;box-shadow:0 15px 30px #0003}
.header .mobile-nav a{border-color:#173f2536}
.header .mobile-nav p{color:#2a4c36}
@keyframes mark-project{0%{transform:perspective(160px) rotateY(-30deg) rotateX(12deg) translateY(3px)}38%{transform:perspective(160px) rotateY(8deg) rotateX(-3deg) translateY(-1px)}74%,100%{transform:perspective(160px) rotateY(0) rotateX(0) translateY(0)}}
@keyframes mark-light-well{0%{opacity:0;transform:scale(.55)}30%{opacity:.82;transform:scale(1.12)}65%{opacity:.24;transform:scale(.95)}100%{opacity:0;transform:scale(.9)}}
@keyframes mark-light-pass{0%{opacity:0;background-position:0 0}22%{opacity:.85}64%{opacity:.55}100%{opacity:0;background-position:0 100%}}
@keyframes word-project{0%{transform:perspective(120px) translateY(5px) rotateX(27deg)}43%{transform:perspective(120px) translateY(-2px) rotateX(-5deg)}80%,100%{transform:perspective(120px) translateY(0) rotateX(0)}}
@keyframes word-light-trace{0%,10%{opacity:0;transform:scaleX(0)}40%{opacity:.85;transform:scaleX(.9)}75%{opacity:.2;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes lockup-light-trace{0%{opacity:0;transform:scaleX(.04)}30%{opacity:.64;transform:scaleX(.7)}60%{opacity:.14;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes caption-light-pass{0%{opacity:0;clip-path:inset(0 0 100%)}25%{opacity:.08;clip-path:inset(12% 0 61%)}60%{opacity:.06;clip-path:inset(70% 0 12%)}100%{opacity:0;clip-path:inset(100% 0 0)}}
.motion-paused .brand-holo *,.motion-paused .brand-holo *::before,.motion-paused .brand-holo *::after,.motion-paused .brand-holo::after,.tab-hidden .brand-holo *,.tab-hidden .brand-holo *::before,.tab-hidden .brand-holo *::after,.tab-hidden .brand-holo::after,.holo-held *,.holo-held *::before,.holo-held *::after,.holo-held::after{animation-play-state:paused!important}
@supports not (backdrop-filter:blur(1px)){.header{background:#a0dcb4}}
@media(prefers-reduced-motion:reduce){.brand-holo *,.brand-holo *::before,.brand-holo *::after,.brand-holo::after{animation:none!important}.brand-symbol,.word-char{transform:none!important}.brand-symbol::before,.brand-symbol::after,.brand-word::after,.brand-holo::after,.holo-line::after{opacity:0!important}}
.no-js .brand-holo *,.no-js .brand-holo *::before,.no-js .brand-holo *::after,.no-js .brand-holo::after{animation:none!important}

/* r6: saturated medium green, two captions, NO flashing light/scan layers. */
.header{background:linear-gradient(108deg,rgba(255,255,255,.035),rgba(13,85,37,.04) 64%,rgba(255,255,255,.012)),rgba(43,183,101,.96);color:#0b2113;border-bottom-color:#073d203d;box-shadow:inset 0 1px 0 #ffffff26,0 5px 22px #0000000d}
.brand-holo::after,.brand-symbol::before,.brand-symbol::after,.brand-word::after,.holo-line::after{content:none!important;display:none!important;animation:none!important;filter:none!important;box-shadow:none!important}
.brand-tagline{color:#0a2613;border-left-color:#0a351d4a}
.header .nav a,.header .contact-nav,.header .menu-toggle{color:#0b2113}
.header .nav a:hover,.header .contact-nav:hover{color:#030e07;text-decoration-color:#10391e}
.header .language{color:#0b2413}
.header .language>span:last-child{color:#0b2514}
.header .slash{color:#12331d}
.header .contact-nav{border-color:#0a351d40}
.header :focus-visible{outline-color:#061b0d}
.header .mobile-nav{background:#2bb765fa;color:#092313;border-bottom-color:#0b442854}
.header .mobile-nav a{border-color:#0b44283d}
.header .mobile-nav p{color:#12321d}
@supports not (backdrop-filter:blur(1px)){.header{background:#2bb765}}

/* r7: original moAI logo background #95CC2C for the header (projects-mo-logo.svg rect fill),
   black symbol and text; 00 / WHY moAI section with sourced comparison. */
:root{--brand-lime:#95cc2c;--brand-ink:#050702}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.header{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),rgba(149,204,44,.97);color:var(--brand-ink);border-bottom-color:#1a26083d;box-shadow:inset 0 1px 0 #ffffff2e,0 6px 22px #00000014}
.header .brand,.header .word-char{color:var(--brand-ink)}
.brand-tagline{color:#0d1606;border-left-color:#0d16064d}
.header .nav a,.header .contact-nav,.header .menu-toggle{color:#0a1004}
.header .nav a:hover,.header .contact-nav:hover{color:#000;text-decoration-color:#000}
.header .language{color:#0a1004}
.header .language>span:last-child{color:#18240b}
.header .slash{color:#22320f}
.header .contact-nav{border-color:#0d16063d}
.header :focus-visible{outline-color:#000}
.header .mobile-nav{background:#95cc2cfa;color:#070b03;border-bottom-color:#1a26083d}
.header .mobile-nav a{border-color:#0d160633}
.header .mobile-nav p{color:#18240b}
@supports not (backdrop-filter:blur(1px)){.header{background:#95cc2c}}
.hero-description strong{color:#f1f2f3;font-weight:620}
.inverse-lime{background:var(--brand-lime);color:var(--brand-ink)}
.why{padding-top:84px}
.why-head{display:grid;grid-template-columns:1.1fr 1fr;gap:7%;align-items:end;margin-top:56px}
.why-head h2{font-size:clamp(34px,3.7vw,58px);font-weight:300;line-height:1.24;letter-spacing:-.045em}
.why-head .title-light{font-size:.7em}
.why-lead p{font-size:15px;line-height:1.9;color:#aeb4bc}
.why-lead p+p{margin-top:14px}
.why-lead strong{color:#f1f2f3;font-weight:620}
.why-lead .why-claim{margin-top:24px;border-left:2px solid var(--brand-lime);padding-left:16px;font-size:16px;line-height:1.65;color:#eef0f2;font-weight:600}
.why-map{margin-top:64px;border:1px solid var(--line);padding:30px 28px 22px;background:radial-gradient(ellipse at 50% 100%,#95cc2c14,transparent 62%)}
.why-tools{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0}
.why-tools li{position:relative;display:flex;flex-direction:column;gap:5px;min-height:118px;padding:16px 14px 14px;border:1px solid #ffffff2b;background:#0c0e11}
.why-tools b{font-size:17px;font-weight:680;letter-spacing:-.02em;color:#f1f2f3;line-height:1.2}
.why-tools span{font-family:'Courier New',monospace;font-size:9px;letter-spacing:.08em;color:#8a929d}
.why-tools em{margin-top:auto;padding-top:10px;border-top:1px dashed #ffffff24;font-style:normal;font-size:11.5px;color:#bcc3cb}
.why-tools li::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:46px;background:linear-gradient(#ffffff3d,#95cc2c)}
.why-tools li::before{content:'';position:absolute;left:calc(50% - 2px);top:100%;z-index:1;width:5px;height:5px;background:var(--brand-lime);opacity:0;animation:why-signal 3.2s linear infinite;animation-delay:calc(var(--i) * -.64s)}
@keyframes why-signal{0%{transform:translateY(0);opacity:0}15%,85%{opacity:1}100%{transform:translateY(41px);opacity:0}}
.why-layer{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:24px;margin-top:46px;padding:18px 22px;background:var(--brand-lime);color:var(--brand-ink)}
.why-layer .mono{font-size:9px;color:#16220a}
.why-layer strong{font-size:23px;font-weight:820;letter-spacing:-.035em;line-height:1}
.why-layer span:last-child{font-size:12px;color:#121c08;text-align:right}
.why-map figcaption{margin-top:14px;font-size:11px;color:#9098a3}
.why-edge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:64px;border-block:1px solid var(--line)}
.why-edge article{padding:28px 24px 30px 0;border-right:1px solid var(--line)}
.why-edge article+article{padding-left:24px}
.why-edge article:last-child{border-right:0;padding-right:0}
.why-edge .mono{font-size:9px;color:var(--brand-lime)}
.why-edge h3{margin-top:14px;font-size:21px;font-weight:740;line-height:1.35;letter-spacing:-.035em}
.why-edge p{margin-top:12px;font-size:12.5px;line-height:1.85;color:#a6aeb8}
.why-edge .why-proof{margin-top:14px;padding-top:10px;border-top:1px dashed #ffffff22;font-size:11px;color:#cfe7a6}
.fn{display:inline-block;margin-left:2px;padding:0 1px;font-family:'Courier New',monospace;font-size:9px;line-height:1;vertical-align:super;color:#cfe7a6;border-bottom:1px solid #95cc2c80}
.fn:hover{color:#fff;border-bottom-color:#fff}
.why-table-wrap{margin-top:60px}
.why-table-title{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.why-table-title h3{font-size:21px;font-weight:680;letter-spacing:-.03em}
.why-table-title .mono{font-size:9px;color:#8a929d}
.why-table{width:100%;margin-top:18px;border-collapse:collapse;font-size:12.5px;line-height:1.78}
.why-table th{padding:12px 18px 12px 0;border-bottom:1px solid #ffffff45;text-align:left;font-size:10px;font-weight:500;letter-spacing:.04em;color:#8f98a3}
.why-table td{padding:20px 18px 20px 0;border-bottom:1px solid var(--line);vertical-align:top;color:#abb3bd}
.why-table th:first-child,.why-table td:first-child{width:15%}
.why-table th:nth-child(2),.why-table td:nth-child(2){width:33%}
.why-table th:last-child,.why-table td:last-child{width:14%;padding-right:0}
.why-table td:first-child b{display:block;font-size:15px;font-weight:680;color:#f1f2f3}
.why-table td:first-child span{font-family:'Courier New',monospace;font-size:9px;letter-spacing:.06em;color:#86909c}
.why-status{display:inline-block;padding:3px 8px;border:1px solid #ffffff3d;font-size:10px;line-height:1.5;color:#c3c9d1}
.why-status.is-verified{border-color:var(--brand-lime);color:#d6eeae}
.why-sources{list-style:none;counter-reset:src;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 40px;margin:28px 0 0;padding:0;font-size:11px;line-height:1.6;color:#9098a3}
.why-sources li{display:grid;grid-template-columns:24px 1fr}
.why-sources li::before{counter-increment:src;content:counter(src);font-family:'Courier New',monospace;color:#cfe7a6}
.why-sources a{color:#bcc4cd;text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:3px;margin-right:10px}
.why-sources a:hover{color:#fff;text-decoration-color:#fff}
.why-sources li:target{outline:1px solid var(--brand-lime);outline-offset:4px}
.why>.note{margin-top:24px;max-width:1000px;font-size:11px}
.motion-paused .why-tools li::before,.tab-hidden .why-tools li::before,.why-map.offscreen .why-tools li::before{animation-play-state:paused!important}
@media(max-width:1190px){.why-tools{gap:10px}.why-tools li{padding:14px 11px 12px}.why-tools b{font-size:15px}.why-edge{grid-template-columns:repeat(2,minmax(0,1fr))}.why-edge article:nth-child(2){border-right:0;padding-right:0}.why-edge article:nth-child(3){padding-left:0}.why-edge article:nth-child(n+3){border-top:1px solid var(--line)}.why-table th:first-child,.why-table td:first-child{width:17%}}
@media(max-width:820px){.why{padding-top:60px}.why-head{grid-template-columns:1fr;gap:26px;margin-top:40px}.why-head h2{font-size:clamp(34px,6vw,44px)}.why-map{margin-top:44px;padding:20px 16px 16px}.why-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.why-tools li:last-child{grid-column:1/-1}.why-tools li{min-height:0}.why-tools li::before,.why-tools li::after{display:none}.why-layer{position:relative;grid-template-columns:1fr;gap:7px;margin-top:30px}.why-layer::before{content:'';position:absolute;left:50%;bottom:100%;width:1px;height:30px;background:linear-gradient(#ffffff3d,#95cc2c)}.why-layer span:last-child{text-align:left}.why-edge{margin-top:44px}.why-table-wrap{margin-top:46px}.why-table-title{flex-direction:column;gap:6px}.why-table,.why-table tbody,.why-table tr,.why-table td{display:block;width:100%!important}.why-table thead{display:none}.why-table tr{padding:18px 0;border-bottom:1px solid var(--line)}.why-table td{padding:5px 0;border:0}.why-table td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;font-family:'Courier New',monospace;font-size:9px;letter-spacing:.06em;color:#7f8893}.why-table td:first-child b{display:inline;margin-right:10px;font-size:17px}.why-sources{grid-template-columns:1fr}}
@media(max-width:560px){.why-edge{grid-template-columns:1fr}.why-edge article,.why-edge article+article,.why-edge article:nth-child(3){padding:24px 0;border-right:0}.why-edge article+article{border-top:1px solid var(--line)}.why-edge h3{font-size:20px}}
@media(max-width:480px){.why-head h2{font-size:34px}.why-head .title-light{font-size:.72em}.why-lead p{font-size:14px}.why-lead .why-claim{font-size:15px}.why-tools b{font-size:14px}.why-tools em{font-size:11px}.why-layer strong{font-size:21px}.why-table{font-size:12px}}
@media(max-width:359px){.why-head h2{font-size:30px}.why-tools{grid-template-columns:1fr}.why-tools li:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.why-tools li::before{animation:none;opacity:0}}

/* r7b: exact original logo background. Solid #95CC2C (projects-mo-logo.svg rect fill) with no
   translucency, white highlight, inset top line or backdrop filter, so the banner fill is
   pixel-identical to the logo square. The outer drop shadow sits below the bar only. */
.header{background:#95cc2c;box-shadow:0 6px 22px #00000014;-webkit-backdrop-filter:none;backdrop-filter:none}
.header .mobile-nav{background:#95cc2c}

/* r8: full-width LIGHT ONLY video. Logo, type, tagline and navigation never transform.
   The encoded background is hidden at rest, retaining pixel-exact #95CC2C. */
.header{isolation:isolate;background:#95cc2c}
.header-light{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#95cc2c;opacity:0}
.header-light.is-visible{opacity:1}
.header-light video{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.header-inner{position:relative;z-index:1}
.header .mobile-nav{z-index:2;background:#95cc2c}
.header .brand,.header .brand-symbol,.header .brand-symbol img,.header .brand-word,.header .word-char,.header .brand-tagline{animation:none!important;transform:none!important;transition:none!important}
.header .brand-word{display:block;white-space:nowrap;color:var(--brand-ink)}
.brand-static::before,.brand-static::after,.brand-symbol::before,.brand-symbol::after,.brand-word::after{display:none!important;content:none!important}
#banner-replay{white-space:nowrap}
#banner-replay:disabled{opacity:.5;cursor:default}
.no-js .header-light,.no-js #banner-replay{display:none}
@media(prefers-reduced-motion:reduce){.header-light{display:none!important}}

/* r9: larger nav, green glass only after scroll. Lighting never intercepts input. */
.header{transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease}
.header-light{transition:opacity .18s ease;pointer-events:none}
.header-light *{pointer-events:none!important}
.header.is-scrolled{background:rgba(149,204,44,.82);border-bottom-color:rgba(220,244,174,.4);box-shadow:0 8px 28px #0000002e;-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%)}
.header.is-scrolled .header-light{opacity:0!important}
.header .nav{font-size:15.5px;gap:30px}
.header .nav a{font-weight:620}
.header .contact-nav{font-size:14px;font-weight:630}
.header .menu-toggle{min-height:44px;min-width:44px;font-size:13px;gap:12px}
.header .mobile-nav a{font-size:16px;font-weight:560;min-height:50px}
@media(max-width:1190px){.header .nav{font-size:14px;gap:20px}.header .contact-nav{font-size:13px}}
@media(max-width:980px){.header .nav{display:none}.header .menu-toggle{display:flex;align-items:center}.header-end{gap:20px}}
@media(max-width:640px){.header-end{gap:0}}
@media(max-width:480px){.header .menu-toggle{font-size:12.5px;gap:0;padding:8px 6px}.header .menu-toggle span{display:none}}
@supports not (backdrop-filter:blur(1px)){.header.is-scrolled{background:#95cc2c}}
@media(prefers-reduced-motion:reduce){.header,.header-light{transition:none!important}}

/* r10: neutral glass reference from trinov.dev, square 2px light frames.
   A neutral smoke layer preserves text contrast over moAI's bright lime content. */
:root{--glass-gutter:16px;--glass-lift:24px;--fixed-footer-height:84px;--viewport-inline:100vw;--glass-frame:rgba(240,243,239,.48);--glass-fill:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.016) 45%,transparent 72%),linear-gradient(rgba(8,12,10,.62),rgba(8,12,10,.62)),rgba(210,213,205,.1)}
html{scroll-padding-top:calc(var(--header-height) + var(--glass-lift) + 22px);scroll-padding-bottom:calc(var(--fixed-footer-height) + 24px)}
body{padding-bottom:calc(var(--fixed-footer-height) + 32px)}
.header{border:0;outline:2px solid rgba(240,243,239,.32);outline-offset:-2px;transition:background-color .28s ease,outline-color .28s ease,box-shadow .28s ease}
.header-glass{position:absolute;inset:0 var(--glass-gutter);height:100%;max-width:calc(var(--max) + 48px);margin-inline:auto;z-index:0;pointer-events:none;background:var(--glass-fill);border:2px solid var(--glass-frame);border-radius:0;box-shadow:inset 0 1px 0 #ffffff11,inset 0 -1px 0 #00000014,0 12px 34px #00000024;-webkit-backdrop-filter:blur(20px) saturate(108%);backdrop-filter:blur(20px) saturate(108%);opacity:0;transform:translateY(0);transition:opacity .28s ease,transform .28s ease}
.header-inner{z-index:2;transition:transform .28s ease}
.header.is-scrolled{background:transparent;outline-color:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.header.is-scrolled .header-glass{opacity:1;transform:translateY(var(--glass-lift))}
.header.is-scrolled .header-inner{transform:translateY(var(--glass-lift))}
.header .brand-symbol{background:#95cc2c;box-shadow:0 0 0 3px #95cc2c}
.header .brand-word,.header .brand-tagline,.header .nav a,.header .contact-nav,.header .language,.header .menu-toggle{transition:color .24s ease,border-color .24s ease}
.header.is-scrolled .brand,.header.is-scrolled .brand-word,.header.is-scrolled .brand-tagline,.header.is-scrolled .nav a,.header.is-scrolled .contact-nav,.header.is-scrolled .language,.header.is-scrolled .language>span:last-child,.header.is-scrolled .slash,.header.is-scrolled .menu-toggle{color:#f2f5ef}
.header.is-scrolled .brand-tagline,.header.is-scrolled .contact-nav{border-color:#f0f3ef45}
.header.is-scrolled .nav a:hover,.header.is-scrolled .contact-nav:hover{color:#fff;text-decoration-color:#fff}
.header.is-scrolled :focus-visible{outline-color:#f4ffe9}
.header .mobile-nav{z-index:3}
.header.is-scrolled .mobile-nav{top:calc(100% + var(--glass-lift));left:var(--glass-gutter);right:var(--glass-gutter);max-height:calc(100dvh - var(--header-height) - var(--glass-lift) - var(--fixed-footer-height) - 24px);background:#111813f5;color:#f2f5ef;border:2px solid var(--glass-frame);border-top:0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.header.is-scrolled .mobile-nav a{color:#f2f5ef;border-color:#f0f3ef2b}
.header.is-scrolled .mobile-nav p{color:#e7eee2}
.footer.footer-clean{position:fixed;bottom:0;left:var(--glass-gutter);right:var(--glass-gutter);max-width:calc(var(--max) + 48px);margin-inline:auto;z-index:90;padding:0;border:2px solid var(--glass-frame);border-radius:0;background:var(--glass-fill);box-shadow:inset 0 1px 0 #ffffff11,inset 0 -1px 0 #00000014,0 -12px 34px #00000024;-webkit-backdrop-filter:blur(20px) saturate(108%);backdrop-filter:blur(20px) saturate(108%)}
.footer-inner{width:min(calc(var(--viewport-inline) - var(--pad)*2),var(--max));max-width:calc(100% - 24px);min-height:72px;padding-block:14px;gap:20px}
.footer-copyright,.footer-copyright span,.footer-links,.footer-top-link{color:#edf3e8}
.footer-links{font-size:11px;gap:22px}
.footer-copyright{font-size:11px}
.footer-top-link{min-height:40px;border-left-color:#f0f3ef45}
.footer-links a{padding-block:6px}
.footer-links a:hover,.footer-top-link:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer :focus-visible{outline:2px solid #f4ffe9;outline-offset:4px}
main a,main button,main summary{scroll-margin-bottom:calc(var(--fixed-footer-height) + 24px)}
@media(max-width:820px){:root{--glass-gutter:12px;--glass-lift:14px}.footer-inner{gap:16px}.footer-links{gap:16px;font-size:10.5px}.footer-top-link{padding-left:16px}}
@media(max-width:640px){:root{--fixed-footer-height:112px}.footer-inner{grid-template-columns:1fr auto;gap:4px 14px;padding-block:10px;min-height:92px}.footer-links{grid-column:1/-1;grid-row:2;gap:2px 16px;font-size:10px}.footer-top-link{grid-column:2;grid-row:1;padding-left:0;border-left:0;min-height:28px}.footer-copyright span{display:none}}
@media(max-width:480px){:root{--glass-gutter:8px;--glass-lift:8px}.footer-inner{max-width:calc(100% - 20px)}.footer-copyright{font-size:10px}.footer-links{gap:2px 13px;font-size:9.5px}.footer-top-link{font-size:9px}}
@supports not (backdrop-filter:blur(1px)){.header-glass,.footer.footer-clean{background:#18201b}.header.is-scrolled{background:transparent}}
@media(prefers-reduced-motion:reduce){.header,.header-glass,.header-inner{transition:none!important}}

/* r11: one continuous brand-green glass sheet, never an opaque logo badge.
   The storyboard light is cel-rendered separately; material contains no gradient. */
:root{--glass-frame:rgba(233,255,192,.68);--glass-fill:rgba(149,204,44,.72);--glass-ink:#071001}
.header,.header.is-scrolled{background:transparent;outline:0;border:0;box-shadow:none}
.header-glass{inset:0;max-width:100%;opacity:1;background:var(--glass-fill);border-color:var(--glass-frame);box-shadow:inset 0 1px 0 #edffbb80,inset 0 -1px 0 #20360b33,0 12px 34px #00000024;-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);transition:transform .28s ease,left .28s ease,right .28s ease,max-width .28s ease}
.header.is-scrolled .header-glass{left:var(--glass-gutter);right:var(--glass-gutter);max-width:calc(var(--max) + 48px)}
.header .brand-symbol{position:relative;background:transparent;box-shadow:none;border:0;overflow:visible}
.header .brand-symbol img{opacity:.72;filter:none}
#brand-reflection{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.header .brand,.header .brand-word,.header .brand-tagline,.header .nav a,.header .contact-nav,.header .language,.header .language>span:last-child,.header .slash,.header .menu-toggle,.header.is-scrolled .brand,.header.is-scrolled .brand-word,.header.is-scrolled .brand-tagline,.header.is-scrolled .nav a,.header.is-scrolled .contact-nav,.header.is-scrolled .language,.header.is-scrolled .language>span:last-child,.header.is-scrolled .slash,.header.is-scrolled .menu-toggle{color:var(--glass-ink)}
.header .brand-tagline,.header .contact-nav,.header.is-scrolled .brand-tagline,.header.is-scrolled .contact-nav{border-color:#26370e55}
.header .nav a:hover,.header .contact-nav:hover,.header.is-scrolled .nav a:hover,.header.is-scrolled .contact-nav:hover{color:#000;text-decoration-color:#102200}
.header :focus-visible,.header.is-scrolled :focus-visible{outline-color:#173003}
.header-light{z-index:1;mix-blend-mode:screen;pointer-events:none}
.header .header-light.is-visible{opacity:.48}
#banner-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.header-light.has-canvas video{opacity:0}
.header.is-scrolled .mobile-nav{background:rgba(149,204,44,.96);color:var(--glass-ink);border-color:var(--glass-frame)}
.header.is-scrolled .mobile-nav a,.header.is-scrolled .mobile-nav p{color:var(--glass-ink);border-color:#26370e45}
.footer.footer-clean{background:var(--glass-fill);border-color:var(--glass-frame);box-shadow:inset 0 1px 0 #edffbb80,inset 0 -1px 0 #20360b33,0 -12px 34px #00000024;-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%)}
.footer-copyright,.footer-copyright span,.footer-links,.footer-top-link{color:var(--glass-ink)}
.footer-top-link{border-left-color:#26370e55}
.footer-links a:hover,.footer-top-link:hover{color:#000}
.footer :focus-visible{outline-color:#173003}
@supports not (backdrop-filter:blur(1px)){.header-glass,.footer.footer-clean{background:#95cc2c}}
@media(prefers-reduced-motion:reduce){#brand-reflection,#banner-scene{visibility:hidden}.header-glass{transition:none!important}}

.header.is-scrolled #brand-reflection{visibility:hidden}

/* The fixed header itself is the glass surface; nested filtered children cannot
   reliably sample the page backdrop inside the banner's compositing group. */
.header,.header.is-scrolled{height:var(--header-height);background:var(--glass-fill);border:2px solid var(--glass-frame);border-radius:0;box-shadow:inset 0 1px 0 #edffbb80,inset 0 -1px 0 #20360b33,0 12px 34px #00000024;-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);isolation:isolate;margin-inline:auto}
.header{top:0;left:0;right:0;max-width:100%;transition:top .28s ease,left .28s ease,right .28s ease,max-width .28s ease}
.header.is-scrolled{top:var(--glass-lift);left:var(--glass-gutter);right:var(--glass-gutter);max-width:calc(var(--max) + 48px)}
.header .header-glass{display:none}
.header .header-inner,.header.is-scrolled .header-inner{transform:none;width:min(calc(var(--viewport-inline) - var(--pad)*2),var(--max));max-width:calc(100% - 24px);height:100%;min-height:0}
.header .mobile-nav,.header.is-scrolled .mobile-nav{top:100%;left:-2px;right:-2px}
@supports not (backdrop-filter:blur(1px)){.header,.header.is-scrolled{background:#95cc2c}}
@media(prefers-reduced-motion:reduce){.header{transition:none!important}}

/* User refinement: footer stays neutral TRiNOV-like glass, not brand green. */
.footer.footer-clean{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.016) 45%,transparent 72%),linear-gradient(rgba(8,12,10,.62),rgba(8,12,10,.62)),rgba(210,213,205,.1);border-color:rgba(240,243,239,.48);box-shadow:inset 0 1px 0 #ffffff11,inset 0 -1px 0 #00000014,0 -12px 34px #00000024;-webkit-backdrop-filter:blur(20px) saturate(108%);backdrop-filter:blur(20px) saturate(108%)}
.footer-copyright,.footer-copyright span,.footer-links,.footer-top-link{color:#edf3e8}
.footer-top-link{border-left-color:#f0f3ef45}
.footer-links a:hover,.footer-top-link:hover{color:#fff}
.footer :focus-visible{outline-color:#f4ffe9}
@supports not (backdrop-filter:blur(1px)){.footer.footer-clean{background:#18201b}}

/* r12: a real black stage, an opaque black MO, and one shared light boundary. */
:root{--glass-ink:#000}
.header,.header.is-scrolled{border-width:1px;outline:0;box-shadow:0 8px 24px #00000020}
.footer.footer-clean{border-width:1px;box-shadow:0 -8px 24px #00000020}
.header .mobile-nav,.header.is-scrolled .mobile-nav{left:-1px;right:-1px;border-width:1px;border-top:0}
.header .brand,.header .brand-symbol,.header .brand-symbol img{opacity:1;filter:none;mix-blend-mode:normal}
.header .language,.header .language>span:last-child,.header .slash{opacity:1}
.header-light{background:#000;mix-blend-mode:normal;transition:none}
.header .header-light.is-visible{opacity:var(--light-opacity,1)}
.header .header-inner .brand-word,.header .brand-tagline,.header .nav a,.header .contact-nav,.header .language,.header .menu-toggle{transition:none}
.header .header-ink-copy{position:absolute;inset:0;margin:auto;z-index:4;pointer-events:none!important;user-select:none;visibility:hidden}
.header.is-lighting .header-ink-copy{visibility:visible}
.header .header-ink-copy .brand,.header .header-ink-copy .brand-word,.header .header-ink-copy .brand-tagline,.header .header-ink-copy .nav a,.header .header-ink-copy .contact-nav,.header .header-ink-copy .language,.header .header-ink-copy .language>span,.header .header-ink-copy .slash,.header .header-ink-copy .menu-toggle{color:#fff!important;transition:none}
.header .header-ink-copy .brand-tagline,.header .header-ink-copy .contact-nav{border-color:#ffffff66}
.header .header-ink-copy .brand-symbol{visibility:hidden!important}
.header-ink-copy a,.header-ink-copy button{pointer-events:none!important}


/* r13: one button system. moAI actions use brand lime with black type; white fills and the
   legacy LaB96 #1E7F45 accent are retired from buttons, tabs and highlight blocks.
   Amberpage and Dayward keep their own theme colours in every state. */
:root{--accent:#95cc2c;--accent-hover:#c3ec6d;--accent-text:#c3ec6d;--on-accent:#050702}
::selection{background:var(--accent);color:var(--on-accent)}
.skip{background:var(--accent);color:var(--on-accent)}
.title-inverse,.inverse-lime,.inverse-yellow{background:var(--accent);color:var(--on-accent)}
.button-white{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transition:background-color .2s,border-color .2s}
.button-white:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.button-white:active{background:var(--accent);border-color:var(--accent)}
.benefit-tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent)}
.benefit-tabs button[aria-selected=true] span{color:var(--on-accent);opacity:.72}
.text-link:hover,.system-tabs button[aria-selected=true] span{color:var(--accent-text)}
.status-dot,.process-mark i{background:var(--accent);box-shadow:none}
.system-scene .station.is-current .station-roof{stroke:var(--accent)}
.service-amber{--svc:#f0be99;--svc-strong:#ffdcc2;--svc-line:#edac7888}
.service-day{--svc:#8ed1f2;--svc-strong:#c8ecff;--svc-line:#70c0f088}
.service-amber>.text-link,.service-day>.text-link{color:var(--svc);border-color:var(--svc-line);transition:color .2s,border-color .2s}
.service-amber>.text-link:hover,.service-day>.text-link:hover{color:var(--svc-strong);border-color:var(--svc)}
.service-amber :focus-visible,.service-day :focus-visible{outline-color:var(--svc)}

/* r14: the header and the fixed footer share the content column exactly
   (.wrap = min(100% - pad*2, max)); content inside the bars is padded, never the bars widened. */
:root{--bar-pad:clamp(14px,1.5vw,24px)}
.header,.header.is-scrolled,.footer.footer-clean{left:0;right:0;width:min(calc(100% - var(--pad)*2),var(--max));max-width:none;margin-inline:auto;box-sizing:border-box}
.header{transition:top .28s ease}
.header .header-inner,.header.is-scrolled .header-inner{width:auto;max-width:none;margin:0;padding-inline:var(--bar-pad);box-sizing:border-box}
.footer.footer-clean .footer-inner{width:auto;max-width:none;margin:0;padding-inline:var(--bar-pad);box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.header{transition:none!important}}

/* r15: green-on-green continuous wave until scrolling; deep green glass afterwards.
   Only the transparent MO glyph changes ink. Never add a logo tile or a backing box. */
.header{--glass-ink:#071001;background:#95cc2c;transition:top .28s ease,background-color .28s ease,border-color .28s ease}
.header .header-light{background:#95cc2c}
.header .header-ink-copy{display:none!important}
.header.is-scrolled{--glass-ink:#edf5e3;background:rgba(31,54,19,.86);border-color:rgba(195,236,109,.34);-webkit-backdrop-filter:blur(20px) saturate(115%);backdrop-filter:blur(20px) saturate(115%)}
.header .brand-symbol,.header.is-scrolled .brand-symbol{background:transparent;box-shadow:none;border:0}
.header .brand-symbol img{filter:none;opacity:1}
.header.is-scrolled .brand-symbol img{filter:brightness(0) invert(1);opacity:1}
.header.is-scrolled .brand-tagline,.header.is-scrolled .contact-nav{border-color:rgba(218,242,185,.32)}
.header.is-scrolled .nav a:hover,.header.is-scrolled .contact-nav:hover{color:#c3ec6d;text-decoration-color:#c3ec6d}
.header.is-scrolled :focus-visible{outline-color:#c3ec6d}
.header.is-scrolled .mobile-nav{background:rgba(26,44,17,.96);color:var(--glass-ink);border-color:rgba(195,236,109,.34);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.header.is-scrolled .mobile-nav a,.header.is-scrolled .mobile-nav p{color:var(--glass-ink);border-color:rgba(218,242,185,.22)}
.service h3{font-weight:600}
@supports not (backdrop-filter:blur(1px)){.header.is-scrolled{background:#1f3613}}
@media(prefers-reduced-motion:reduce){.header{transition:none!important}}
@media(max-width:360px){.service h3{font-size:clamp(36px,12.5vw,44px)}}

/* r16: service card motion (Amberpage stippled orbit, Dayward holographic voxel stack).
   Canvas replaces the CSS art only after it mounts; without JavaScript the CSS art stays. */
.service-art .service-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.service-art>.art-cross,.service-art>.mono{z-index:1}
.service-art.has-canvas{background:none}
.service-art.has-canvas>.amber-orbit,.service-art.has-canvas>.day-plane{display:none}
.service-art.has-canvas::before{opacity:.45}

/* r17: green wave at rest anywhere on the page; dark glass only while actively scrolling.
   .is-scrolled keeps the lifted position (scrollY > 0); .is-scrolling switches the material. */
:root{--dark-glass:rgba(31,54,19,.72)}
.header,.header.is-scrolled{--glass-ink:#071001;background:#95cc2c;border-color:var(--glass-frame);-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);transition:top .28s ease,background-color .3s ease,border-color .3s ease}
.header .header-light{transition:opacity .3s ease}
.header.is-scrolled .header-light.is-visible{opacity:var(--light-opacity,1)!important}
.header .brand-symbol img,.header.is-scrolled .brand-symbol img{filter:none}
.header.is-scrolled .brand-tagline,.header.is-scrolled .contact-nav{border-color:#26370e55}
.header.is-scrolled .nav a:hover,.header.is-scrolled .contact-nav:hover{color:#000;text-decoration-color:#102200}
.header.is-scrolled :focus-visible{outline-color:#173003}
.header.is-scrolled .mobile-nav{background:rgba(149,204,44,.96);color:var(--glass-ink);border-color:var(--glass-frame)}
.header.is-scrolled .mobile-nav a,.header.is-scrolled .mobile-nav p{color:var(--glass-ink);border-color:#26370e45}
.header.is-scrolling{--glass-ink:#edf5e3;background:var(--dark-glass);border-color:rgba(195,236,109,.34);-webkit-backdrop-filter:blur(20px) saturate(115%);backdrop-filter:blur(20px) saturate(115%)}
.header.is-scrolling .header-light,.header.is-scrolling .header-light.is-visible{opacity:0!important}
.header.is-scrolling .brand-symbol img{filter:brightness(0) invert(1)}
.header.is-scrolling .brand-tagline,.header.is-scrolling .contact-nav{border-color:rgba(218,242,185,.32)}
.header.is-scrolling .nav a:hover,.header.is-scrolling .contact-nav:hover{color:#c3ec6d;text-decoration-color:#c3ec6d}
.header.is-scrolling :focus-visible{outline-color:#c3ec6d}
.header.is-scrolling .mobile-nav{background:rgba(26,44,17,.92);border-color:rgba(195,236,109,.34)}
.header.is-scrolling .mobile-nav a,.header.is-scrolling .mobile-nav p{color:var(--glass-ink);border-color:rgba(218,242,185,.22)}
@supports not (backdrop-filter:blur(1px)){.header.is-scrolling{background:#1f3613}}
/* a little more transparent bottom glass */
.footer.footer-clean{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.016) 45%,transparent 72%),linear-gradient(rgba(8,12,10,.48),rgba(8,12,10,.48)),rgba(210,213,205,.08)}
/* hero primary action: black box, white bold type, line border */
.hero-ctas .button.button-white{background:#000;color:#fff;border:1px solid #fff;font-weight:700;transition:border-color .2s,color .2s,background-color .2s}
.hero-ctas .button.button-white:hover{background:#000;color:#c3ec6d;border-color:#c3ec6d}
.hero-ctas .button.button-white:active{background:#0b0d08}
.hero-ctas .button.button-white:focus-visible{outline:2px solid #c3ec6d;outline-offset:3px}
/* language switch: header (desktop), mobile menu, footer */
.header .language{display:flex;align-items:center;gap:0}
.header .language a{color:inherit;text-decoration:none;opacity:.6;padding:6px 2px}
.header .language a[aria-current]{opacity:1;font-weight:700}
.header .language a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.mobile-nav .mobile-language{display:flex;gap:18px;flex-wrap:wrap}
.mobile-nav .mobile-language a{display:inline;padding:0;border:0;opacity:.62;text-decoration:none}
.mobile-nav .mobile-language a[aria-current]{opacity:1;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.footer-links .footer-language{display:inline-flex;gap:10px;padding-left:16px;border-left:1px solid #f0f3ef45}
.footer-links .footer-language a{opacity:.6}
.footer-links .footer-language a[aria-current]{opacity:1;font-weight:700}
@media(max-width:640px){.footer-links .footer-language{padding-left:0;border-left:0}}
@media(max-width:1190px){.header .language{display:none}}
/* longer English/Vietnamese tab labels wrap instead of overflowing the 3-column tab grid */
html:not([lang=ko]) .benefit-tabs button{white-space:normal;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
html:not([lang=ko]) .benefit-tabs button span{display:block;margin:0 0 4px}
/* English/Vietnamese highlight boxes may wrap on narrow screens instead of widening the page */
html:not([lang=ko]) .title-inverse{white-space:normal;max-width:100%}

/* r18: bright green glass at all times with the wave on top; no dark scroll state (r17 flickered).
   rgba(184,253,52,.8) over the dark page composites to brand #95CC2C; over content it reads as blurred glass.
   .is-scrolling rules are neutralised so an older cached script cannot bring the flicker back. */
:root{--bright-glass:rgba(184,253,52,.8)}
.header,.header.is-scrolled,.header.is-scrolling{--glass-ink:#071001;background:var(--bright-glass);border-color:var(--glass-frame);-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%)}
.header .header-light,.header.is-scrolled .header-light,.header.is-scrolling .header-light{background:transparent}
.header.is-scrolling .header-light.is-visible{opacity:var(--light-opacity,1)!important}
.header.is-scrolling .brand-symbol img{filter:none}
.header.is-scrolling .brand-tagline,.header.is-scrolling .contact-nav{border-color:#26370e55}
.header.is-scrolling .nav a:hover,.header.is-scrolling .contact-nav:hover{color:#000;text-decoration-color:#102200}
.header.is-scrolling :focus-visible{outline-color:#173003}
.header .mobile-nav,.header.is-scrolled .mobile-nav,.header.is-scrolling .mobile-nav{background:rgba(149,204,44,.96);color:var(--glass-ink);border-color:var(--glass-frame)}
.header .mobile-nav a,.header .mobile-nav p,.header.is-scrolled .mobile-nav a,.header.is-scrolled .mobile-nav p,.header.is-scrolling .mobile-nav a,.header.is-scrolling .mobile-nav p{color:var(--glass-ink);border-color:#26370e45}
@supports not (backdrop-filter:blur(1px)){.header,.header.is-scrolled,.header.is-scrolling{background:#95cc2c}}

/* r19: TRiNOV shell-glass cues on the lime bar (Sean 2026-10-07: like trinov.dev, a slight bevel on the edge,
   floating a little below the top instead of touching it, and an unmistakable glass surface).
   The bar floats var(--glass-lift) below the viewport top in every state (24px; 14px at 820px and below) and the
   page starts that much lower, so .is-scrolled no longer moves it. Bevel: light frame on top and sides, a shaded
   bottom edge, plus an inset top highlight and bottom lowlight drawn above the wave canvas so voxels never hide
   the edge. Glass: the trinov.dev 135deg sheen over the same bright lime (alpha .8 still composites to #95CC2C on
   the dark page) and a deeper drop shadow. No scroll-driven colour change (r18 rule stands). */
:root{--lime-sheen:linear-gradient(135deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.065) 45%,rgba(255,255,255,0) 72%);--lime-frame-top:rgba(236,255,196,.72);--lime-frame-side:rgba(233,255,192,.5);--lime-frame-bottom:rgba(46,72,6,.6);--lime-highlight:rgba(255,255,255,.5);--lime-lowlight:rgba(28,46,0,.16);--lime-depth:rgba(0,0,0,.34)}
@media(max-width:480px){:root{--glass-lift:14px}}
body{padding-top:calc(var(--header-height) + var(--glass-lift))}
.header,.header.is-scrolled,.header.is-scrolling{top:var(--glass-lift);background-color:var(--bright-glass);background-image:var(--lime-sheen);border-color:var(--lime-frame-top) var(--lime-frame-side) var(--lime-frame-bottom);box-shadow:0 12px 34px var(--lime-depth)}
.header::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 1px 0 var(--lime-highlight),inset 0 -1px 0 var(--lime-lowlight)}
.header .mobile-nav,.header.is-scrolled .mobile-nav,.header.is-scrolling .mobile-nav{max-height:calc(100dvh - var(--header-height) - var(--glass-lift) - var(--fixed-footer-height) - 24px);border-color:var(--lime-frame-side) var(--lime-frame-side) var(--lime-frame-bottom);box-shadow:inset 0 -1px 0 var(--lime-lowlight),0 12px 34px var(--lime-depth)}
.header:has(#mobile-nav:not([hidden])){border-bottom-color:var(--lime-frame-side)}
.header:has(#mobile-nav:not([hidden]))::after{box-shadow:inset 0 1px 0 var(--lime-highlight)}
@supports not (backdrop-filter:blur(1px)){.header,.header.is-scrolled,.header.is-scrolling{background-color:#95cc2c}}

/* r20: split bar, English top bar, three-line menu, footer brand logos (Sean 2026-10-07/08).
   The black MO needs lime behind it (inverting it to white breaks the letters), so the original lime glass and the
   voxel wave stay only as a box that ends after the tagline with the brand's own inset (main.js sets --brand-edge;
   the CSS value is the no-script fallback). The rest of the bar is trinov.dev dark glass with light labels, framed
   by the same lime as the box and tinted with a very light lime (7%). The box is its own layer (::before), so it
   stays when the wave layer is hidden (menu open, motion paused, reduced motion). The MO itself is never touched.
   Every label in the bar is English like trinov.dev except the tagline. :root raises specificity over older blocks. */
:root{--r20-lime:rgba(184,253,52,.8);--r20-line:rgba(184,253,52,.8);--r20-tint:.07;--r20-glass:rgba(210,213,205,.1);--r20-ink:#edf3e8;--r20-sheen:linear-gradient(135deg,rgba(255,255,255,.052) 0%,rgba(255,255,255,.014) 45%,rgba(255,255,255,0) 72%);--r20-tint-layer:linear-gradient(rgba(149,204,44,var(--r20-tint)),rgba(149,204,44,var(--r20-tint)))}
:root .header,:root .header.is-scrolled,:root .header.is-scrolling{--brand-edge:258px;background-color:var(--r20-glass);background-image:var(--r20-sheen),var(--r20-tint-layer);border-color:var(--r20-line);-webkit-backdrop-filter:blur(20px) saturate(1.08);backdrop-filter:blur(20px) saturate(1.08);box-shadow:0 12px 34px rgba(0,0,0,.2)}
@media(max-width:1190px){:root .header,:root .header.is-scrolled,:root .header.is-scrolling{--brand-edge:228px}}
@media(max-width:820px){:root .header,:root .header.is-scrolled,:root .header.is-scrolling{--brand-edge:218px}}
@media(max-width:480px){:root .header,:root .header.is-scrolled,:root .header.is-scrolling{--brand-edge:200px}}
@media(max-width:359px){:root .header,:root .header.is-scrolled,:root .header.is-scrolling{--brand-edge:180px}}
:root:lang(vi) .header{--brand-edge:308px}
@media(max-width:1190px){:root:lang(vi) .header{--brand-edge:275px}}
@media(max-width:820px){:root:lang(vi) .header{--brand-edge:265px}}
@media(max-width:480px){:root:lang(vi) .header{--brand-edge:243px}}
@media(max-width:359px){:root:lang(vi) .header{--brand-edge:220px}}
:root .header::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:0;width:var(--brand-edge);background:var(--r20-lime);pointer-events:none}
:root .header::after,:root .header:has(#mobile-nav:not([hidden]))::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(0,0,0,.08)}
:root .header .header-light,:root .header.is-scrolled .header-light,:root .header.is-scrolling .header-light{right:auto;width:var(--brand-edge);background:transparent}
:root .header .brand,:root .header .brand-word,:root .header .brand-tagline{color:#071001}
:root .header .brand-tagline{border-color:#26370e55}
:root .header .nav a,:root .header .contact-nav,:root .header .language,:root .header .language>span:last-child,:root .header .slash,:root .header .menu-toggle{color:var(--r20-ink)}
:root .header .contact-nav{border-color:rgba(240,243,239,.27)}
:root .header .nav a:hover,:root .header .contact-nav:hover{color:#fff;text-decoration-color:#c3ec6d}
:root .header .nav :focus-visible,:root .header .header-end :focus-visible{outline-color:#c3ec6d}
:root .header:has(#mobile-nav:not([hidden])){border-bottom-color:var(--r20-line)}
:root .header .mobile-nav,:root .header.is-scrolled .mobile-nav,:root .header.is-scrolling .mobile-nav{background:var(--r20-tint-layer),rgba(15,20,17,.985);color:var(--r20-ink);border-color:var(--r20-line);box-shadow:0 12px 34px rgba(0,0,0,.3)}
:root .header .mobile-nav a,:root .header .mobile-nav p,:root .header.is-scrolled .mobile-nav a,:root .header.is-scrolled .mobile-nav p,:root .header.is-scrolling .mobile-nav a,:root .header.is-scrolling .mobile-nav p{color:var(--r20-ink);border-color:rgba(240,243,239,.12)}
@supports not (backdrop-filter:blur(1px)){:root .header,:root .header.is-scrolled,:root .header.is-scrolling{background-color:rgba(16,20,17,.94)}}
@supports (-webkit-backdrop-filter:blur(1px)) and (not (backdrop-filter:blur(1px))){:root .header,:root .header.is-scrolled,:root .header.is-scrolling{background-color:var(--r20-glass)}}
/* English labels, set like trinov.dev's bar: small capitals with open tracking. */
:root .header .nav a,:root .header .contact-nav{font-size:11px;font-weight:620;letter-spacing:.1em;white-space:nowrap}
:root .header .language{letter-spacing:.06em}
:root .header .mobile-nav a{font-size:13px;font-weight:620;letter-spacing:.1em;align-items:center}
:root .header .mobile-nav a span{letter-spacing:.04em}
/* Three-line menu button; the lines fold into a cross while the menu is open. */
:root .header .menu-toggle{justify-content:center;gap:0;padding:0;width:44px;min-width:44px;height:44px;min-height:44px;margin-right:-12px}
:root .header .menu-toggle .menu-lines{position:relative;display:block;width:20px;height:14px}
:root .header .menu-toggle .menu-lines span{position:absolute;left:0;display:block;width:100%;height:1.5px;border-radius:1px;background:currentColor;transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease}
:root .header .menu-toggle .menu-lines span:nth-child(1){top:0}
:root .header .menu-toggle .menu-lines span:nth-child(2){top:6.25px}
:root .header .menu-toggle .menu-lines span:nth-child(3){top:12.5px}
:root .header .menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
:root .header .menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(2){opacity:0}
:root .header .menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){:root .header .menu-toggle .menu-lines span{transition:none}}
/* Footer: TRiNOV and LaB: 96 as mark + name, like www.lab96.net's footer rail. Marks follow the link colour. */
.footer-links a.footer-brand{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.footer-links a.footer-brand:hover{color:#fff;text-decoration:none}
.footer-brand strong{font-size:11.5px;font-weight:700;letter-spacing:-.015em;line-height:1}
.footer-brand .footer-ext{font-size:10px;opacity:.75;margin-left:1px}
.footer-mark{display:block;flex:none;background-color:currentColor}
.footer-mark-trinov{width:15px;height:15px;-webkit-mask:url(assets/trinov-mark.svg) center/contain no-repeat;mask:url(assets/trinov-mark.svg) center/contain no-repeat}
.footer-mark-lab96{width:14px;height:15px;-webkit-mask:url(assets/lab96-mark.png) center/contain no-repeat;mask:url(assets/lab96-mark.png) center/contain no-repeat}
.footer-lab96-lockup{display:block;flex:none;width:34px;height:11px;overflow:hidden;white-space:nowrap;text-indent:110%;background-color:currentColor;-webkit-mask:url(assets/lab96-lockup.svg) center/contain no-repeat;mask:url(assets/lab96-lockup.svg) center/contain no-repeat}
@media(max-width:640px){.footer-links a.footer-brand{gap:5px}.footer-brand .footer-ext{display:none}.footer-mark-trinov{width:13px;height:13px}.footer-brand strong{font-size:10.5px}.footer-mark-lab96{width:12px;height:13px}.footer-lab96-lockup{width:31px;height:10px}}
@media(max-width:440px){:root .footer.footer-clean .footer-links{column-gap:10px}:root .footer-links a.footer-brand{gap:4px}}
@media(forced-colors:active){.footer-mark{display:none}.footer-lab96-lockup{width:auto;height:auto;text-indent:0;background:none;-webkit-mask:none;mask:none}}

/* r21 v2: moAI 자세히 살펴보기 (guide.html). Sean 2026-10-08: "애플·토스처럼 쉽고 간단하게". Each chapter is one big sentence,
   one short line and one moving picture; everything else sits behind a native <details> "자세히 보기".
   Same tokens as the home page: dark #08090b, 1px lines, square corners, lime #95CC2C / #C3EC6D, Pretendard + mono labels.
   Pictures are inline SVG (isometric voxels and line art). Their motion runs only while on screen and stops with the motion
   toggle (html.motion-paused), hidden tabs (html.tab-hidden) and reduced motion; the still frame shows the whole idea. */
:root{--g-line:rgba(255,255,255,.125);--g-line-strong:rgba(255,255,255,.22);--g-lime:#95cc2c;--g-lime-hi:#c3ec6d;--g-lime-soft:rgba(149,204,44,.07);--g-lime-edge:rgba(184,253,52,.55);--g-ink:#f1f2f3;--g-body:#c9cdd2;--g-muted:#9b9da4;--g-faint:#757b82;--g-panel:#0c0e11}
html:has(body.guide-page){scroll-padding-top:calc(var(--header-height) + var(--glass-lift) + 84px)}
.guide-page .mono{text-transform:none}
.guide-page main{overflow-x:clip}
/* hero */
.g-hero{padding-top:clamp(40px,5vw,84px);padding-bottom:clamp(8px,1.6vw,24px)}
.g-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.4vw,80px);align-items:center;margin-top:clamp(30px,4vw,64px)}
.g-hero h1{font-size:clamp(46px,5.8vw,100px);line-height:1.02;letter-spacing:-.058em;font-weight:300;color:#e6e8ea}
.g-hero h1 span{display:block}
html:not([lang="ko"]) .g-hero h1{font-size:clamp(42px,4.6vw,82px)}
.g-hero h1 .title-heavy{font-weight:800;color:var(--g-ink)}
.g-hero-sub{margin-top:clamp(20px,2.2vw,32px);max-width:23em;font-size:clamp(18px,1.5vw,23px);line-height:1.56;color:#d3d6da;letter-spacing:-.015em;word-break:keep-all}
.g-motion{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:9px 12px;border:1px solid var(--g-line-strong);background:transparent;color:#cfd3d7;font:500 11px/1 Pretendard,sans-serif;letter-spacing:.02em;cursor:pointer}
.g-motion:hover{border-color:var(--g-lime-hi);color:var(--g-lime-hi)}
.g-motion:focus-visible{outline:2px solid var(--g-lime-hi);outline-offset:3px}
/* local chapter bar (sticky under the floating header) */
.g-localnav{position:sticky;top:calc(var(--glass-lift) + var(--header-height) + 10px);z-index:40;display:flex;align-items:center;gap:18px;margin-top:clamp(36px,4vw,64px);padding:7px var(--bar-pad);background:rgba(11,14,12,.82);-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);border:1px solid var(--g-line);box-sizing:border-box}
.g-localnav-title{flex:none;display:inline-flex;align-items:center;color:var(--g-lime-hi);font-size:10px;letter-spacing:.12em}
.g-localnav-title .status-dot{margin-right:8px}
.g-localnav-list{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.g-localnav-list::-webkit-scrollbar{display:none}
.g-localnav-list a{flex:none;padding:9px 10px;font:500 10px/1 'Courier New',monospace;letter-spacing:.1em;color:#a7acb2;white-space:nowrap;transition:color .2s,box-shadow .2s}
.g-localnav-list a span{margin-right:6px;color:#686e75}
.g-localnav-list a:hover,.g-localnav-list a[aria-current]{color:#fff}
.g-localnav-list a[aria-current]{box-shadow:inset 0 -1px 0 var(--g-lime-hi)}
.g-localnav-list a[aria-current] span{color:var(--g-lime-hi)}
.g-localnav-list a:focus-visible{outline:2px solid var(--g-lime-hi);outline-offset:-2px}
/* a link from another page lands on its chapter at once; in-page moves keep the smooth scroll (main.js drops g-jump after load) */
html.g-jump{scroll-behavior:auto!important}
/* chapter frame */
.g-chapter{padding-top:clamp(96px,10vw,170px)}
.g-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,96px);align-items:end;margin-top:clamp(30px,4vw,56px)}
.g-head h2{font-size:clamp(36px,4.5vw,74px);line-height:1.08;letter-spacing:-.05em;font-weight:800;color:var(--g-ink);word-break:keep-all}
.g-head h2 .title-light{font-size:.72em;font-weight:300;color:#d9dcdf;letter-spacing:-.04em}
.g-key{display:block;margin-bottom:14px;font-size:10px;letter-spacing:.12em;color:var(--g-lime-hi)}
.g-note{margin-top:18px;max-width:62em;font-size:12px;line-height:1.7;color:var(--g-faint);word-break:keep-all}
/* stage: one big sentence, one line, one picture */
.g-stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,96px);align-items:center;margin-top:clamp(34px,4vw,64px)}
.g-stage.is-text{grid-template-columns:minmax(0,1fr)}
.g-chapter.is-flip .g-stage{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.g-chapter.is-flip .g-copy{order:2}
.g-copy h2{font-size:clamp(38px,4.4vw,74px);line-height:1.08;letter-spacing:-.05em;font-weight:800;color:var(--g-ink);word-break:keep-all}
.g-copy h2 .title-light{font-size:.7em;font-weight:300;color:#d9dcdf;letter-spacing:-.04em}
.g-one{margin-top:clamp(18px,2vw,28px);max-width:27em;font-size:clamp(17px,1.38vw,21px);line-height:1.62;color:#cfd3d7;letter-spacing:-.01em;word-break:keep-all}
.g-stage.is-text .g-one{max-width:40em}
.g-art{margin:0;min-width:0}
.g-art-frame{position:relative;padding:clamp(14px,2.2vw,34px);border:1px solid var(--g-line);background-color:#0a0c0f;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:32px 32px}
.g-art-frame::before,.g-art-frame::after{content:"";position:absolute;width:9px;height:9px;border:0 solid var(--g-lime-hi);pointer-events:none}
.g-art-frame::before{left:-1px;top:-1px;border-width:1px 0 0 1px}
.g-art-frame::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.g-art svg{display:block;width:100%;height:auto;max-height:min(520px,64vh);margin-inline:auto;overflow:visible}
.g-hero-art .g-art-frame{padding:clamp(10px,1.6vw,26px)}
.g-artnote{display:flex;align-items:center;margin-top:12px;font-size:12px;line-height:1.6;color:var(--g-faint);word-break:keep-all}
/* picture vocabulary: voxels (d dark, l light, g lime glass), lines, fills, labels */
.g-art polygon{stroke:none;stroke-width:1;stroke-linejoin:round}
.g-art .vdt{fill:#1c2025;stroke:rgba(255,255,255,.17)}.g-art .vdl{fill:#0d0f12;stroke:rgba(255,255,255,.12)}.g-art .vdr{fill:#15181c;stroke:rgba(255,255,255,.14)}
.g-art .vlt{fill:#eef0ec;stroke:rgba(8,9,11,.3)}.g-art .vll{fill:#a9aea8;stroke:rgba(8,9,11,.3)}.g-art .vlr{fill:#cbcfc9;stroke:rgba(8,9,11,.3)}
.g-art .vgt{fill:rgba(149,204,44,.34);stroke:rgba(195,236,109,.7)}.g-art .vgl{fill:rgba(149,204,44,.12);stroke:rgba(195,236,109,.5)}.g-art .vgr{fill:rgba(149,204,44,.2);stroke:rgba(195,236,109,.6)}
.g-art .s-wire{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1}
.g-art .s-flow{fill:none;stroke:var(--g-lime-hi);stroke-width:2;stroke-linecap:square;stroke-dasharray:8 120}
.g-art .s-flow-bold{stroke-width:3}
.g-art .s-ink{stroke:#3a3f45;stroke-width:2.2;stroke-linecap:square}
.g-art .s-ink-dark{stroke:#050702;stroke-width:2.4;stroke-linecap:square}
.g-art .s-lime{stroke:var(--g-lime);stroke-width:2.2;stroke-linecap:square}
.g-art .s-lime-bold{stroke:var(--g-lime-hi);stroke-width:3;stroke-linecap:square}
.g-art .s-head{stroke-width:3.6}
.g-art .s-soft{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:square}
.g-art .s-soft-thin{stroke:rgba(255,255,255,.24);stroke-width:1.2}
.g-art .s-dash{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:4 5}
.g-art .s-node{fill:var(--g-lime)}
.g-art .f-lime{fill:var(--g-lime)}.g-art .f-hi{fill:var(--g-lime-hi)}.g-art .f-hi-glow{fill:rgba(195,236,109,.2)}
.g-art .f-white-soft{fill:rgba(149,204,44,.45)}
.g-art .f-lime-band{fill:rgba(149,204,44,.2)}
.g-art .f-page{fill:#eef0ec;stroke:#08090b}
.g-art .f-hole{fill:#050608}
.g-art .f-zone{fill:rgba(149,204,44,.12);stroke:rgba(195,236,109,.55)}
.g-art .f-zone-private{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.45);stroke-dasharray:4 4}
.g-art .o-line{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.g-art .o-dash{fill:none;stroke:rgba(255,255,255,.16);stroke-dasharray:3 6}
.g-art .o-chev{fill:none;stroke:var(--g-lime-hi);stroke-width:1.6}
.g-art .o-node{fill:#08090b;stroke:var(--g-lime-hi);stroke-width:1.5}
.g-art .w-frame{fill:#0e1114;stroke:rgba(255,255,255,.3)}
.g-art .w-dot{fill:rgba(255,255,255,.26)}
.g-art .w-url{fill:rgba(255,255,255,.07)}
.g-art .w-app{fill:#f1f2f3}
.g-art .w-bubble-q{fill:#23282d}
.g-art .w-bubble-a{fill:#0a0c0f;stroke:rgba(255,255,255,.26)}
.g-art .w-chip{fill:rgba(149,204,44,.1);stroke:rgba(195,236,109,.6)}
.g-art .w-stop{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.42);stroke-dasharray:4 4}
.g-art .w-slot{fill:none;stroke:rgba(195,236,109,.55);stroke-dasharray:4 4}
.g-art .d-page{fill:#eef0ec}
.g-art .d-fold{fill:none;stroke:#08090b}
.g-art .c-box{fill:#0e1114;stroke:var(--g-lime-hi);stroke-width:1.2}
.g-art .t-tile{fill:#12151a;stroke:rgba(255,255,255,.2)}
.g-art .t-tile-dim{opacity:.45}
.g-art .t-card{fill:#0d1012;stroke:var(--g-lime)}
.g-art .t-check{fill:none;stroke:rgba(255,255,255,.5)}
.g-art .t-check.is-done{fill:var(--g-lime);stroke:var(--g-lime)}
.g-art .m-ghost{fill:rgba(255,255,255,.07)}
.g-art .l-body{fill:#f1f2f3}
.g-art .l-arc{fill:none;stroke:#f1f2f3;stroke-width:2}
.g-art text{font-family:Pretendard,Arial,sans-serif;fill:#e9ecef}
.g-art .t-name{font-size:16px;font-weight:650;letter-spacing:-.01em;fill:#f1f2f3}
.g-art .t-small{font-size:14px}
.g-art .t-big{font-size:22px;font-weight:750;letter-spacing:-.03em;fill:#f1f2f3}
.g-art .t-mono{font-family:'Courier New',monospace;font-size:12px;letter-spacing:.1em;fill:#a2a8af}
.g-art .t-node{font-family:'Courier New',monospace;font-size:17px;font-weight:700;fill:#050702}
.g-art .c-glyph{font-family:'Courier New',monospace;font-size:36px;font-weight:700;fill:var(--g-lime-hi)}
.g-art .t-plus{font-family:'Courier New',monospace;font-size:22px;fill:var(--g-lime-hi)}
.g-art .t-diff-old{font-size:16px;fill:#8a9096;text-decoration:line-through}
.g-art .t-diff-new{font-size:16px;font-weight:650;fill:var(--g-lime-hi)}
.g-art .t-arrow{font-size:17px}
.g-art .t-lime{fill:var(--g-lime-hi)}.g-art .t-white{fill:#f1f2f3}.g-art .t-ink{fill:#050702}.g-art .t-dim{fill:#555b62}
/* picture motion: each loop starts from somewhere else and settles on the still frame */
.g-art .s-flow{animation:g-flow 2.4s linear infinite}
.g-art .a-blink{animation:g-blink 2.8s ease-in-out infinite}
.g-art .a-blink-soft{animation:g-blink-soft 3.2s ease-in-out infinite}
.g-art .a-float{animation:g-float 4.2s ease-in-out infinite}
.g-art .a-glow{animation:g-glow 3.6s ease-in-out infinite both}
.g-art .a-orbit{animation:g-orbit 9s linear infinite}
.g-art .a-file{animation:g-file 4.4s ease-in-out infinite both}
.g-art .a-pop{animation:g-pop 6s ease-out infinite both}
.g-art .a-pop-late{animation:g-pop-late 6s ease-out infinite both}
.g-art .a-pop-slot{animation:g-slot 7s ease-out infinite both}
.g-art .a-scan{animation:g-scan 6s cubic-bezier(.6,0,.3,1) infinite both}
.g-art .a-meter{animation:g-meter 6s cubic-bezier(.5,0,.2,1) infinite both}
.g-art .a-old{opacity:.45;animation:g-old 6s ease infinite both}
.g-art .a-new{animation:g-new 6s ease infinite both}
.g-art .a-progress{animation:g-progress 6s linear infinite both}
.g-art .a-step{animation:g-step 6s ease infinite both}
.g-art .a-travel{animation:g-travel 9s cubic-bezier(.6,0,.3,1) infinite both}
.g-art .a-fill{animation:g-fill 9s cubic-bezier(.6,0,.3,1) infinite both}
.g-art .a-drop{animation:g-drop 7.5s cubic-bezier(.3,.7,.3,1) infinite both}
.g-art .a-hop{animation:g-hop 7s ease-in-out infinite both}
.g-art .a-attach{animation:g-attach 7.5s cubic-bezier(.3,.7,.3,1) infinite both}
@keyframes g-flow{from{stroke-dashoffset:128}to{stroke-dashoffset:0}}
@keyframes g-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes g-blink-soft{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes g-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes g-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes g-orbit{to{transform:rotate(360deg)}}
@keyframes g-file{0%{transform:translate(0,0);opacity:0}12%{opacity:1}62%{transform:translate(var(--dx),var(--dy));opacity:1}78%,100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes g-pop{0%{opacity:0;transform:translateY(8px)}10%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes g-pop-late{0%,42%{opacity:0;transform:translateX(-8px)}52%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes g-slot{0%{opacity:0}10%,80%{opacity:1}92%,100%{opacity:0}}
@keyframes g-scan{0%{transform:translateY(-220px);opacity:.3}40%{transform:translateY(0);opacity:1}88%{transform:none;opacity:1}100%{transform:none;opacity:.3}}
@keyframes g-meter{0%,8%{transform:scaleX(var(--from))}48%,100%{transform:scaleX(1)}}
@keyframes g-old{0%,26%{opacity:1}38%,100%{opacity:.45}}
@keyframes g-new{0%,28%{opacity:0;transform:translateX(-8px)}40%,100%{opacity:1;transform:none}}
@keyframes g-progress{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@keyframes g-step{0%{opacity:.25}6%,100%{opacity:1}}
@keyframes g-travel{0%,14%{transform:translateX(-230px);opacity:1}30%,48%{transform:translateX(0)}64%,86%{transform:translateX(230px);opacity:1}93%{transform:translateX(230px);opacity:0}94%{transform:translateX(-230px);opacity:0}100%{transform:translateX(-230px);opacity:1}}
@keyframes g-fill{0%,14%{transform:scaleX(.34)}30%,48%{transform:scaleX(.67)}64%,100%{transform:scaleX(1)}}
@keyframes g-drop{0%{transform:translateY(-40px);opacity:0}9%{transform:none;opacity:1}82%{opacity:1}94%,100%{transform:none;opacity:0}}
@keyframes g-hop{0%,8%{transform:translate(0,0);opacity:1}13%{transform:translate(calc(var(--sx)*.5),calc(var(--sy)*.5 - 22px))}18%,26%{transform:translate(var(--sx),var(--sy))}31%{transform:translate(calc(var(--sx)*1.5),calc(var(--sy)*1.5 - 22px))}36%,44%{transform:translate(calc(var(--sx)*2),calc(var(--sy)*2))}49%{transform:translate(calc(var(--sx)*2.5),calc(var(--sy)*2.5 - 22px))}54%,62%{transform:translate(calc(var(--sx)*3),calc(var(--sy)*3))}67%{transform:translate(calc(var(--sx)*3.5),calc(var(--sy)*3.5 - 22px))}72%,88%{transform:translate(calc(var(--sx)*4),calc(var(--sy)*4));opacity:1}95%{transform:translate(calc(var(--sx)*4),calc(var(--sy)*4));opacity:0}96%{transform:translate(0,0);opacity:0}100%{transform:translate(0,0);opacity:1}}
@keyframes g-attach{0%{transform:translateY(-34px);opacity:0}10%{transform:none;opacity:1}84%{opacity:1}95%,100%{transform:none;opacity:0}}
/* stop rules: off screen and hidden tabs freeze; the motion toggle and reduced motion show the still frame */
.js .g-art:not(.is-live) *,.tab-hidden .g-art *{animation-play-state:paused!important}
.motion-paused .g-art *{animation:none!important}
@media(prefers-reduced-motion:reduce){.g-art *{animation:none!important}}
/* chapters rise in once as they enter (only when main.js can observe them) */
.g-io .g-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.g-io .g-reveal.is-in{opacity:1;transform:none}
.g-io .g-art.g-reveal{transition-delay:.12s}
.motion-paused .g-reveal{opacity:1!important;transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.g-reveal{opacity:1!important;transform:none!important;transition:none!important}}
/* one-line comparison under the picture */
.g-vsline{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);margin-top:clamp(34px,3.8vw,56px);border:1px solid var(--g-line)}
.g-vsline p{padding:18px clamp(18px,2vw,26px) 20px;font-size:15px;line-height:1.6;color:#b5bac0;word-break:keep-all}
.g-vsline .mono{display:block;margin-bottom:8px;font-size:10px;letter-spacing:.12em;color:#7d838a}
.g-vsline-arrow{display:grid;place-items:center;border-inline:1px solid var(--g-line);color:var(--g-lime-hi);font-size:16px}
.g-vsline-arrow::before{content:"→"}
.g-vsline .g-vsline-m{background:var(--g-lime-soft);box-shadow:inset 0 0 0 0 transparent;color:#eef1ec;font-weight:550}
.g-vsline-m .mono{color:var(--g-lime-hi)}
/* details: "자세히 보기" */
.g-more{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--g-line)}
.g-more>summary{display:inline-flex;align-items:center;gap:12px;padding:16px 0 6px;font-size:14px;font-weight:650;letter-spacing:-.005em;color:#e9ecef;cursor:pointer;list-style:none}
.g-more>summary::-webkit-details-marker{display:none}
.g-more>summary::after{content:"+";display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--g-line-strong);font:400 15px/1 'Courier New',monospace;color:var(--g-lime-hi)}
.g-more[open]>summary::after{content:"−"}
.g-more>summary:hover{color:var(--g-lime-hi)}
.g-more>summary:hover::after{border-color:var(--g-lime-hi)}
.g-more>summary:focus-visible{outline:2px solid var(--g-lime-hi);outline-offset:4px}
.g-more:not([open]) .g-more-close,.g-more[open] .g-more-open{display:none}
.g-more-body{padding-bottom:6px}
.g-more-body>.g-figure:first-child,.g-more-body>.g-loop:first-child,.g-more-body>.g-points:first-child,.g-more-body>.g-tools:first-child,.g-more-body>.g-week:first-child{margin-top:clamp(20px,2.4vw,32px)}
.g-more-body .g-figure{margin-top:clamp(24px,2.8vw,40px)}
.g-more-body .g-points{margin-top:clamp(30px,3.4vw,48px)}
.g-more-body .g-vs{margin-top:clamp(28px,3.2vw,44px)}
.g-statusline{margin-top:16px}
.g-faq-item p b{font-weight:650;color:#e9ecef}
/* the comparison table shows three rows; the details open the other three (no :has support: always all rows) */
.g-row-more{display:none}
#compare:has(.g-more[open]) .g-row-more{display:table-row}
@supports not selector(:has(a)){.g-row-more{display:table-row}}
/* a week at a glance */
.g-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:clamp(30px,3.4vw,48px) 0 0;padding:0;list-style:none;border-top:1px solid var(--g-line)}
.g-days li{padding:16px clamp(12px,1.4vw,22px) 0 0;font-size:15px;font-weight:600;line-height:1.45;color:#e6e9ec;word-break:keep-all}
.g-days li+li{padding-left:clamp(12px,1.4vw,22px);border-left:1px solid var(--g-line)}
.g-days .mono{display:block;margin-bottom:8px;font-size:10px;letter-spacing:.12em;color:var(--g-lime-hi)}
/* tools that can join */
.g-tools{margin:0;padding:0;list-style:none;border-top:1px solid var(--g-line)}
.g-tools li{display:grid;grid-template-columns:minmax(150px,.62fr) minmax(0,2fr) auto;gap:8px 26px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--g-line)}
.g-tools b{font-size:16px;font-weight:700;color:#eceef0}
.g-tools p{font-size:14px;line-height:1.55;color:var(--g-muted);word-break:keep-all}
.g-tools em{justify-self:end;padding:5px 9px;border:1px solid var(--g-line-strong);font-size:12px;font-style:normal;color:#cfd3d7;white-space:nowrap}
.g-tools em.is-verified{border-color:var(--g-lime);color:var(--g-lime-hi)}
.g-tools .is-next b{color:var(--g-lime-hi)}
.g-points.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* figures */
.g-figure{margin:clamp(44px,5vw,80px) 0 0;border:1px solid var(--g-line);background-color:#0a0c0f;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:32px 32px}
.g-figure-head{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--g-line);font-size:10px;letter-spacing:.12em;color:#8b9097}
.g-figure>figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:13px 18px;border-top:1px solid var(--g-line);font-size:12px;line-height:1.6;color:var(--g-muted);word-break:keep-all}
.g-status{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px;color:rgba(195,236,109,.9)}
.g-status .mono{font-size:10px;letter-spacing:.12em}
.g-figure>figcaption .status-dot{margin-right:0}
.g-arch-key{display:block;font-size:10px;letter-spacing:.12em;color:#9aa0a8}
/* wires with a travelling signal */
.g-wire{position:relative;display:grid;place-items:center;min-height:40px}
.g-wire i{position:absolute;left:6px;right:10px;top:50%;height:1px;background:var(--g-lime-edge);overflow:visible}
.g-wire i::after{content:"";position:absolute;right:-6px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--g-lime-edge);border-right:0}
.g-wire i::before{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;background:var(--g-lime-hi);animation:g-signal 2.6s linear infinite}
.g-wire span{position:relative;top:-14px;padding:0 6px;background:#0a0c0f;font-size:9px;letter-spacing:.12em;color:var(--g-lime-hi);white-space:nowrap}
@keyframes g-signal{from{left:0;opacity:0}12%{opacity:1}88%{opacity:1}to{left:calc(100% - 5px);opacity:0}}
.motion-paused .g-wire i::before,.tab-hidden .g-wire i::before{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.g-wire i::before{animation:none;opacity:0}}
/* 00 overview loop */
.g-loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:clamp(44px,5vw,76px) 0 0;padding:0;list-style:none;border-top:1px solid var(--g-line)}
.g-loop li{position:relative;padding:26px clamp(18px,2.4vw,40px) 0 0}
.g-loop li+li{padding-left:clamp(18px,2.4vw,40px);border-left:1px solid var(--g-line)}
.g-loop li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:-12px;width:18px;height:22px;background:var(--bg);color:var(--g-lime-hi);font-size:14px;text-align:center}
.g-loop-n{display:block;margin-bottom:22px;font-size:11px;letter-spacing:.1em;color:var(--g-lime-hi)}
.g-loop .g-key{color:#8f959c}
.g-loop h3{font-size:clamp(24px,2.2vw,34px);font-weight:750;letter-spacing:-.035em;color:var(--g-ink)}
.g-loop p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--g-muted);word-break:keep-all}
.g-loop-back{margin-top:22px;text-align:right;font-size:12px;color:#7d838a}
/* points */
.g-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,52px);margin-top:clamp(44px,5vw,72px)}
.g-point{padding-top:22px;border-top:1px solid var(--g-line)}
.g-point h3{font-size:clamp(18px,1.45vw,22px);line-height:1.38;font-weight:700;letter-spacing:-.025em;color:var(--g-ink);word-break:keep-all}
.g-point p{margin-top:12px;font-size:15px;line-height:1.68;color:var(--g-muted);word-break:keep-all}
/* comparison callout */
.g-vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(40px,4.4vw,64px);border:1px solid var(--g-line)}
.g-vs>div{padding:22px clamp(20px,2.2vw,30px) 24px}
.g-vs-label{display:block;margin-bottom:14px;font-size:10px;letter-spacing:.12em;color:#7d838a}
.g-vs p{font-size:15px;line-height:1.7;color:#b5bac0;word-break:keep-all}
.g-vs-tag{display:block;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.01em;color:#dfe2e5}
.g-vs-moai{border-left:1px solid var(--g-line);background:var(--g-lime-soft);box-shadow:inset 3px 0 0 var(--g-lime)}
.g-vs-moai .g-vs-label,.g-vs-moai .g-vs-tag{color:var(--g-lime-hi)}
.g-vs-moai p{color:#eef1ec;font-weight:500}
/* 01 canonical document */
.g-doc-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3.4vw,52px)}
.g-doc{position:relative;padding:12px 30px 18px;border:1px solid var(--g-line-strong);background:#0e1114;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.g-doc-sec{position:relative;padding:16px 0;border-top:1px dashed rgba(255,255,255,.12)}
.g-doc-sec:first-child{border-top:0}
.g-doc-title{margin-bottom:7px;font-size:14px;font-weight:700;color:#eef0f2}
.g-doc-title .mono{font-size:13px;color:var(--g-lime)}
.g-doc-sec p{font-size:15px;line-height:1.62;color:#c4c8cd;word-break:keep-all}
.g-doc-sec .g-doc-hl{display:inline-block;padding:6px 10px;background:rgba(149,204,44,.14);box-shadow:inset 2px 0 0 var(--g-lime);color:#f5f8f0;font-weight:600}
.g-doc-sec .g-doc-why{margin-top:7px;font-size:13px;color:#99a0a7}
.g-doc-sec .g-doc-archive{margin-top:6px;font-size:12px;color:#7a8087}
.g-doc-sec .g-doc-archive::before{content:"→ ";color:var(--g-lime)}
.g-pin{position:absolute;right:-41px;top:18px;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--g-lime);color:var(--g-lime-hi);font-size:10px;background:#0a0c0f}
.g-doc>.g-pin-a{right:-11px;top:22px}
.g-notes{margin:0;padding:0;list-style:none}
.g-notes li{display:grid;grid-template-columns:30px 1fr;align-items:center;padding:14px 0;border-top:1px solid var(--g-line);font-size:14px;line-height:1.5;color:#d4d8dc;word-break:keep-all}
.g-notes li:first-child{border-top:0}
.g-notes .mono{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--g-lime);color:var(--g-lime-hi);font-size:10px}
/* 02 start guide */
.g-boot{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1.15fr) 64px minmax(0,.85fr);align-items:center;padding:clamp(24px,3.4vw,52px)}
.g-boot-tools{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.g-boot-tools li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--g-line-strong);background:rgba(10,12,15,.92)}
.g-boot-tools b{font-size:14px;font-weight:650;color:#eceef0}
.g-boot-tools span{font-size:11px;color:#8d939a;white-space:nowrap}
.g-boot-card{padding:22px;border:1px solid var(--g-lime-edge);background:linear-gradient(var(--g-lime-soft),var(--g-lime-soft)),#0a0c0f}
.g-boot-card .g-arch-key{color:var(--g-lime-hi)}
.g-boot-card h3{margin:10px 0 14px;font-size:22px;font-weight:750;letter-spacing:-.03em;color:var(--g-ink)}
.g-boot-card ol{margin:0;padding:0;list-style:none;counter-reset:g-boot}
.g-boot-card li{counter-increment:g-boot;display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--g-line);font-size:14px;color:#dfe2e5}
.g-boot-card li::before{content:counter(g-boot,decimal-leading-zero);font:500 10px/1.6 'Courier New',monospace;letter-spacing:.08em;color:var(--g-lime-hi)}
.g-boot-canon{padding:22px;border:1px solid var(--g-line-strong);background:rgba(10,12,15,.92)}
.g-boot-canon p{margin-top:12px;font-size:14px;line-height:1.55;color:#dfe2e5;word-break:keep-all}
/* 03 read */
.g-read{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4.5vw,72px);align-items:center;padding:clamp(24px,3.4vw,52px)}
.g-strip{margin:0;padding:0;list-style:none}
.g-strip li{padding:16px 0 16px 18px;border-left:1px solid var(--g-line);font-size:17px;font-weight:650;color:#eceef0;word-break:keep-all}
.g-strip li:first-child{border-left-color:var(--g-lime)}
.g-strip li:nth-child(2){border-left-color:rgba(149,204,44,.6)}
.g-strip .mono{display:block;margin-bottom:6px;font-size:10px;font-weight:400;letter-spacing:.12em;color:var(--g-lime-hi)}
.g-chat{display:flex;flex-direction:column;gap:14px;width:100%;max-width:540px;justify-self:end}
.g-bubble{max-width:86%;padding:14px 18px;font-size:15px;line-height:1.55;word-break:keep-all}
.g-bubble-q{align-self:flex-end;background:#1b1f23;color:#eceef0}
.g-bubble-a{align-self:flex-start;border:1px solid var(--g-line-strong);background:#0e1114;color:#f0f2f3}
.g-bubble-a>p:first-child{font-size:17px;font-weight:650}
.g-cite{display:inline-block;margin-top:12px;padding:6px 10px;border:1px solid var(--g-lime-edge);font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--g-lime-hi);word-break:break-word}
.g-gap{font-size:12px;color:#8b9097}
/* 04 write pipeline */
.g-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:0;padding:clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px) 0;list-style:none}
.g-pipe li{position:relative;padding:18px;border:1px solid var(--g-line-strong);background:rgba(10,12,15,.94)}
.g-pipe li:not(:last-child)::after{content:"→";position:absolute;right:-15px;top:50%;width:12px;margin-top:-11px;color:var(--g-lime-hi);font-size:13px;line-height:22px;text-align:center}
.g-pipe .mono{display:block;font-size:9px;letter-spacing:.12em;color:#8b9097}
.g-pipe h3{margin:10px 0 8px;font-size:18px;font-weight:750;letter-spacing:-.025em;color:var(--g-ink)}
.g-pipe p{font-size:13px;line-height:1.55;color:#aeb3b9;word-break:keep-all}
.g-pipe .g-diff{display:flex;gap:8px;margin-top:6px;padding:5px 8px;font-size:13px}
.g-pipe .g-diff b{font:700 12px/1.55 'Courier New',monospace}
.g-diff-old{background:rgba(255,255,255,.04);color:#8a9096;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.g-diff-new{background:rgba(149,204,44,.13);color:var(--g-lime-hi)}
.g-pipe .g-rev{margin-top:12px;font-size:10px;letter-spacing:.06em;color:var(--g-lime-hi)}
.g-pipe-preview{border-color:var(--g-lime-edge)!important}
.g-stale{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:18px clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px);padding:14px 18px;border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.03)}
.g-stale .mono{font-size:10px;letter-spacing:.12em;color:#f3f4f5}
.g-stale p{font-size:14px;line-height:1.6;color:#c4c8cd;word-break:keep-all}
.g-stale b{color:#f3f4f5;font-weight:650}
/* 05 task */
.g-task{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4.5vw,72px);align-items:center;padding:clamp(24px,3.4vw,52px)}
.g-task-card{padding:24px;border:1px solid var(--g-lime-edge);background:linear-gradient(var(--g-lime-soft),var(--g-lime-soft)),#0a0c0f}
.g-task-card .g-arch-key{color:var(--g-lime-hi)}
.g-task-card h3{margin:10px 0 18px;font-size:22px;font-weight:750;letter-spacing:-.03em;color:var(--g-ink);word-break:keep-all}
.g-task-label{font-size:12px;font-weight:600;color:#8b9097}
.g-checks{margin:8px 0 0;padding:0;list-style:none}
.g-checks li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--g-line);font-size:14px;color:#dfe2e5}
.g-checks li::before{content:"";flex:none;width:12px;height:12px;border:1px solid #8b9097}
.g-checks li.is-done::before{border-color:var(--g-lime);background:var(--g-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23050702' stroke-width='1.6'/%3E%3C/svg%3E") center/10px no-repeat}
.g-checks li.is-done{color:#9ea4ab}
.g-timeline{margin:0;padding:0;list-style:none}
.g-timeline li{position:relative;padding:0 0 26px 26px;border-left:1px solid var(--g-line-strong);font-size:16px;font-weight:600;color:#eceef0}
.g-timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.g-timeline li::before{content:"";position:absolute;left:-5px;top:2px;width:9px;height:9px;background:#0a0c0f;border:1px solid var(--g-lime)}
.g-timeline li:last-child::before{background:var(--g-lime)}
.g-timeline .mono{display:block;margin-bottom:6px;font-size:10px;font-weight:400;letter-spacing:.1em;color:#8b9097}
.g-states{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin:0;padding:0 clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px);list-style:none}
.g-states li{padding:7px 11px;border:1px solid var(--g-line-strong);font-size:13px;color:#d6d9dd}
.g-states li:not(:last-child)::after{content:"→";margin:0 10px 0 21px;color:var(--g-lime-hi)}
.g-states li:not(:last-child){border-right:0;padding-right:0;border-color:transparent;padding-left:0}
.g-states li:last-child{border-color:var(--g-lime);color:var(--g-lime-hi)}
/* 06 control */
.g-zones{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.75fr);gap:clamp(18px,3vw,40px);align-items:stretch;padding:clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px) 0}
.g-storage{padding:22px;border:1px solid var(--g-line-strong);background:rgba(10,12,15,.94)}
.g-storage-p{margin:10px 0 18px;font-size:14px;color:#d4d8dc;word-break:keep-all}
.g-zone-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.g-zone{padding:16px;border:1px solid var(--g-line);font-size:15px;font-weight:650;color:#eceef0;word-break:keep-all}
.g-zone .mono{display:block;margin-bottom:10px;font-size:9px;font-weight:400;letter-spacing:.12em;color:var(--g-lime-hi)}
.g-zone-private{border-style:dashed;border-color:rgba(255,255,255,.3)}
.g-zone-private .mono{color:#b9bec4}
.g-server{display:flex;flex-direction:column;justify-content:center;padding:22px;border:1px dashed var(--g-line-strong);color:var(--g-muted)}
.g-server p{margin-top:10px;font-size:13px;line-height:1.55;word-break:keep-all}
.g-ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:18px clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px)}
.g-ask>.mono{font-size:10px;letter-spacing:.12em;color:var(--g-lime-hi)}
.g-ask ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.g-ask li{padding:7px 11px;border:1px solid var(--g-line-strong);font-size:13px;color:#dfe2e5}
/* 07 ladder */
.g-ladder{margin:0;padding:clamp(14px,2vw,26px) clamp(24px,3.4vw,52px);list-style:none}
.g-ladder li{display:grid;grid-template-columns:96px minmax(0,.9fr) minmax(0,1.6fr) 78px;align-items:center;gap:18px;padding:15px 18px;border-top:1px solid var(--g-line)}
.g-ladder li:first-child{border-top:0}
.g-ladder .mono{font-size:10px;letter-spacing:.12em;color:#8b9097}
.g-ladder h3{font-size:17px;font-weight:700;color:#eceef0;word-break:keep-all}
.g-ladder p{font-size:14px;line-height:1.5;color:var(--g-muted);word-break:keep-all}
.g-ladder em{justify-self:end;padding:5px 8px;border:1px solid var(--g-line-strong);font:500 10px/1 'Courier New',monospace;letter-spacing:.08em;font-style:normal;color:#a9aeb4;white-space:nowrap}
.g-ladder li.is-core{background:var(--g-lime);border-top-color:transparent}
.g-ladder li.is-core .mono,.g-ladder li.is-core h3,.g-ladder li.is-core p{color:#050702}
.g-ladder li.is-core em{border-color:#050702;color:#050702}
/* 08 week */
.g-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:clamp(44px,5vw,72px) 0 0;padding:0;list-style:none;border-top:1px solid var(--g-line)}
.g-week li{padding:22px clamp(14px,1.6vw,26px) 0 0}
.g-week li+li{padding-left:clamp(14px,1.6vw,26px);border-left:1px solid var(--g-line)}
.g-week .mono{display:block;margin-bottom:14px;font-size:11px;letter-spacing:.12em;color:var(--g-lime-hi)}
.g-week p{font-size:15px;line-height:1.65;color:#cfd3d7;word-break:keep-all}
/* 09 compare */
.g-table-wrap{margin-top:clamp(44px,5vw,72px);overflow-x:auto;border:1px solid var(--g-line)}
.g-table-wrap:focus-visible{outline:2px solid var(--g-lime-hi);outline-offset:2px}
.g-table{width:100%;min-width:860px;border-collapse:collapse;font-size:14px}
.g-table th,.g-table td{padding:16px 18px;border-top:1px solid var(--g-line);text-align:left;vertical-align:top;line-height:1.5;word-break:keep-all}
.g-table thead th,.g-table thead td{border-top:0;padding-top:20px;padding-bottom:18px;font-size:15px;font-weight:700;color:#eceef0}
.g-table thead th .mono{display:block;margin-top:6px;font-size:10px;font-weight:400;letter-spacing:.06em;color:#7d838a}
.g-table thead th.g-col-moai .mono{margin-top:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--g-lime-hi)}
.g-table tbody th{width:15%;font-weight:600;color:#aeb3b9}
.g-table td{color:#c4c8cd}
.g-table .g-col-moai{background:var(--g-lime-soft);color:#f1f4ee;font-weight:600}
.g-table thead .g-col-moai{box-shadow:inset 0 3px 0 var(--g-lime)}
.g-sources{margin-top:26px}
.g-sources>.mono{font-size:10px;letter-spacing:.12em;color:#7d838a}
.g-sources ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 0 0;padding:0;list-style:none}
.g-sources a{font-size:12px;color:#a9aeb4;border-bottom:1px solid transparent}
.g-sources a:hover,.g-sources a:focus-visible{color:var(--g-lime-hi);border-bottom-color:var(--g-lime-hi)}
/* FAQ */
.g-faq-list{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--g-line)}
.g-faq-item{border-bottom:1px solid var(--g-line)}
.g-faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(17px,1.4vw,20px);font-weight:650;letter-spacing:-.02em;color:var(--g-ink);cursor:pointer;list-style:none;word-break:keep-all}
.g-faq-item summary::-webkit-details-marker{display:none}
.g-faq-item summary::after{content:"+";flex:none;font:400 20px/1 'Courier New',monospace;color:var(--g-lime-hi)}
.g-faq-item[open] summary::after{content:"−"}
.g-faq-item summary:focus-visible{outline:2px solid var(--g-lime-hi);outline-offset:4px}
.g-faq-item p{max-width:48em;padding:0 0 24px;font-size:15px;line-height:1.7;color:var(--g-muted);word-break:keep-all}
/* closing call to action */
.g-cta{padding-top:clamp(96px,10vw,170px);padding-bottom:clamp(48px,5vw,80px)}
.g-cta h2{margin-top:clamp(30px,4vw,56px);font-size:clamp(40px,5.2vw,88px);line-height:1.04;letter-spacing:-.055em;font-weight:800;color:var(--g-ink)}
.g-cta h2 .title-light{font-size:.7em;font-weight:300;color:#d9dcdf}
.g-cta>p:not(.g-note){margin-top:24px;font-size:clamp(16px,1.3vw,19px);line-height:1.65;color:#cfd3d7}
.g-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:34px}
.g-cta .g-cta-button{background:var(--g-lime);border-color:var(--g-lime);color:#050702;font-weight:700}
.g-cta .g-cta-button:hover{background:var(--g-lime-hi);border-color:var(--g-lime-hi)}
.g-cta .g-cta-button:focus-visible{outline:2px solid var(--g-lime-hi);outline-offset:3px}
.g-cta .text-link{font-size:13px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:7px}
/* home page entry points */
.hero-definition .hero-guide{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding-bottom:5px;border-bottom:1px solid rgba(195,236,109,.55);color:#e9f3d8;font-weight:600}
.hero-definition .hero-guide:hover,.hero-definition .hero-guide:focus-visible{color:var(--g-lime-hi);border-bottom-color:var(--g-lime-hi)}
.section-more{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.38);font-size:13px;font-weight:600;color:#edf0ea}
.section-more:hover,.section-more:focus-visible{color:var(--g-lime-hi);border-bottom-color:var(--g-lime-hi)}
.section-more span{transition:transform .2s ease}
.section-more:hover span{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.section-more span{transition:none}}
/* home: the WHY table and its sources fold into the same details */
.why-more{margin-top:clamp(36px,4vw,56px)}
.why-more>summary{font-size:14px}
.why-more .g-more-body>.why-table-wrap{margin-top:clamp(18px,2vw,28px)}
/* responsive */
@media(max-width:1190px){.g-pipe{grid-template-columns:repeat(3,minmax(0,1fr))}.g-pipe li:nth-child(3)::after{display:none}.g-week{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}.g-week li:nth-child(4){padding-left:0;border-left:0}.g-points.is-4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}}
@media(max-width:980px){
 .g-hero-grid,.g-head,.g-stage,.g-chapter.is-flip .g-stage{grid-template-columns:1fr;align-items:start}
 .g-chapter.is-flip .g-copy{order:0}
 .g-boot{grid-template-columns:1fr;gap:0}
 .g-wire{min-height:58px}
 .g-wire i{left:50%;right:auto;top:6px;bottom:12px;width:1px;height:auto}
 .g-wire i::after{left:-4px;right:auto;top:auto;bottom:-6px;border:4.5px solid transparent;border-top:7px solid var(--g-lime-edge);border-bottom:0}
 .g-wire i::before{left:-2px;top:0;animation-name:g-signal-v}
 .g-wire span{top:0;left:22px;justify-self:start;margin-left:50%;background:transparent}
 .g-doc-wrap,.g-read,.g-task,.g-zones{grid-template-columns:1fr}
 .g-loop{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
 .g-loop li:nth-child(3){padding-left:0;border-left:0}
 .g-loop li:nth-child(2)::after{display:none}
 .g-points{grid-template-columns:1fr;row-gap:30px}
}
@keyframes g-signal-v{from{top:0;opacity:0}12%{opacity:1}88%{opacity:1}to{top:calc(100% - 5px);opacity:0}}
@media(max-width:820px){
 .g-localnav{gap:10px;padding:5px 8px}
 .g-localnav-title{display:none}
 .g-localnav-list{margin-left:0}
 .g-vs{grid-template-columns:1fr}
 .g-vs-moai{border-left:0;border-top:1px solid var(--g-line)}
 .g-vsline{grid-template-columns:1fr}
 .g-vsline-arrow{height:30px;border-inline:0;border-block:1px solid var(--g-line)}
 .g-vsline-arrow::before{content:"↓"}
 .g-days{grid-template-columns:1fr;border-top:0}
 .g-days li,.g-days li+li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:13px 0;border-left:0;border-top:1px solid var(--g-line)}
 .g-days .mono{margin:3px 0 0}
 .g-tools li{grid-template-columns:1fr;gap:6px}
 .g-tools em{justify-self:start}
 .g-pipe{grid-template-columns:1fr;gap:26px}
 .g-pipe li:not(:last-child)::after{content:"↓";right:auto;left:18px;top:auto;bottom:-24px;margin-top:0}
 .g-pipe li:nth-child(3)::after{display:block}
 .g-week{grid-template-columns:1fr;row-gap:0}
 .g-week li,.g-week li+li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:18px 0;border-left:0;border-top:1px solid var(--g-line)}
 .g-week li:first-child{border-top:0}
 .g-week .mono{margin:3px 0 0}
 .g-zone-row{grid-template-columns:1fr}
 .g-ladder li{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 4px}
 .g-ladder .mono{grid-column:1/-1}
 .g-ladder p{grid-column:1/-1;grid-row:3}
 .g-ladder em{grid-column:2;grid-row:2}
 .g-ladder li.is-core{padding-inline:14px}
}
@media(max-width:640px){
 .g-points.is-4{grid-template-columns:1fr}
 .g-art-frame{padding:10px}
 .g-loop{grid-template-columns:1fr}
 .g-loop li,.g-loop li+li{padding:22px 0 0;border-left:0}
 .g-loop li+li{margin-top:22px;border-top:1px solid var(--g-line)}
 .g-loop li::after{display:none}
 .g-doc{padding:8px 18px 14px}
 .g-pin{right:-29px}
 .g-bubble{max-width:100%}
 .g-states{gap:8px}
 .g-states li,.g-states li:not(:last-child){padding:6px 9px;border:1px solid var(--g-line-strong)}
 .g-states li:not(:last-child)::after{display:none}
 .g-figure-head{font-size:9px}
}
/* r21: keep the row labels in view while the comparison table scrolls sideways; mark the current page in the bar. */
.g-table tbody th,.g-table thead td{position:sticky;left:0;z-index:1;background:#0b0d10}
.g-table tbody th{box-shadow:1px 0 0 var(--g-line)}
:root .header .nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-decoration-color:var(--g-lime-hi);text-underline-offset:7px}
:root .header .mobile-nav>a[aria-current="page"]{color:var(--g-lime-hi)}
.no-js .header .menu-toggle{display:none}
/* r22: the voxel wave crosses the whole bar again (Sean 2026-10-08 "시안 2"). banner-scene.js keeps full strength inside the
   lime box and fades it to 30% past the box edge, so the dark glass and its English labels stay readable. */
:root .header .header-light,:root .header.is-scrolled .header-light,:root .header.is-scrolling .header-light{right:0;width:auto}
/* r23: ChatGPT, Codex and ChatGPT + moAI side by side in guide 03 (Sean 2026-10-08: customers may mix up ChatGPT and Codex). */
.g-trio{margin-top:clamp(30px,3.4vw,48px)}
.g-trio-head{font-size:clamp(17px,1.35vw,20px);font-weight:700;letter-spacing:-.02em;color:var(--g-ink);word-break:keep-all}
.g-trio-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0 0;padding:0;list-style:none;border:1px solid var(--g-line)}
.g-trio-list li{padding:20px clamp(18px,2vw,26px) 22px}
.g-trio-list li+li{border-left:1px solid var(--g-line)}
.g-trio-list .mono{display:block;margin-bottom:10px;font-size:10px;letter-spacing:.12em;color:#8b9097}
.g-trio-list h3{font-size:clamp(17px,1.3vw,19px);line-height:1.4;font-weight:700;letter-spacing:-.02em;color:var(--g-ink);word-break:keep-all}
.g-trio-list p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--g-muted);word-break:keep-all}
.g-trio-list li.is-moai{background:var(--g-lime-soft);box-shadow:inset 0 3px 0 var(--g-lime)}
.g-trio-list li.is-moai .mono{color:var(--g-lime-hi)}
.g-trio-list li.is-moai p{color:#dfe5d6}
@media(max-width:820px){.g-trio-list{grid-template-columns:1fr}.g-trio-list li+li{border-left:0;border-top:1px solid var(--g-line)}}
/* r25: dithered box end (Sean 2026-10-08). The lime box keeps no voxels; banner-scene.js paints the box and, past its edge,
   lime voxel dots (ordered dithering) that spread toward the first label and pull back in, then rest about 6 s. While the canvas
   shows (main.js .has-dither) it paints the box itself, so ::before (the box for no script or a failed canvas) steps aside and the
   box edge and the first dot column share one pixel grid. The dots stay on screen, still, when motion is paused or reduced or the
   menu is open. The dark glass tint drops from 7% to 3% (Sean: "틴트도 너무 쎄고"). */
:root{--r20-tint:.03}
:root .header .header-light,:root .header.is-scrolled .header-light,:root .header.is-scrolling .header-light{transition:none}
:root .header.has-dither::before{visibility:hidden}
@media(prefers-reduced-motion:reduce){:root .header .header-light.has-canvas{display:block!important}}
/* r27: two weights in the moAI wordmark (Sean 2026-10-08 "모아이 로고폰트 한단계만 얇게 할 수 없어? 오픈에이아이 처럼" -> "엠오(모) 이거는
   볼드(760) 에이아이는 (600)으로 하면 되겠다"): "mo" keeps the bold 760, "AI" (.brand-word-ai) is 600. The tagline (480), the MO symbol and
   the lime box are untouched; main.js re-measures the box edge from the tagline, so the box follows the slightly narrower word. */
:root .header .brand-word{font-weight:760}
:root .header .brand-word-ai{font-weight:600}