/* Fonts are requested from index.html so the stylesheet is not gated on a
   second round trip to Google Fonts before the first paint. */
:root{--paper:#fff;--ink:#20333c;--muted:#6d7d84;--line:#dce5e7;--font:'Inter','Noto Sans KR',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overscroll-behavior-y:none}
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font)}
h1,h2,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid #437f87;outline-offset:7px}
::selection{background:#d9ece9;color:#20333c}

header{position:fixed;inset:0 0 auto;height:96px;padding:0 4.5%;display:flex;align-items:center;gap:35px;z-index:40;pointer-events:none;background:linear-gradient(#fffffff2,#ffffff80 70%,transparent)}
header a{pointer-events:auto}
.wordmark{font-size:25px;font-weight:700;letter-spacing:-1.3px;display:flex;align-items:center;gap:20px}
.wordmark span{font-size:8px;letter-spacing:3px;font-weight:400;color:var(--muted)}
header nav{display:flex;gap:30px;margin-left:auto;font-size:10px;letter-spacing:1.3px;color:#576d76}
header nav a{padding:10px 0}

.story-scroll{height:185svh;position:relative}
.story-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:var(--paper);contain:paint}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ambient-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 32% 5% at 52% 78%,#bccfce18,transparent 100%)}
.hero-copy{position:absolute;z-index:3;text-align:center;left:5%;right:5%;top:44%;transform:translateY(-50%);pointer-events:none;will-change:opacity,translate}
.eyebrow{display:block;font-size:10px;letter-spacing:3.5px;color:#536d78;margin-bottom:26px;font-weight:500}
.hero-copy h1{font-size:clamp(48px,5.1vw,82px);line-height:1.25;letter-spacing:-3.7px;font-weight:300}
.hero-bottom{position:absolute;z-index:3;bottom:40px;left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#637981}
.hero-bottom>span:first-child{font-size:9px;letter-spacing:1.6px}
.fallback-spectrum{position:absolute;left:10%;right:10%;top:37%;height:34%;border-radius:65% 30% 60% 30%;background:linear-gradient(115deg,#bec7ec70 5%,#76b8d578 29%,#acdcca91 52%,#efd1a778 75%,#e8adc478);transform:rotate(-13deg);box-shadow:inset 0 1px #abc4d375;filter:blur(1px)}
.webgl-ready .fallback-spectrum{display:none}

.tech-scroll{height:620svh;position:relative;background:var(--paper)}
.tech-stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;background:var(--paper);contain:paint}
.tech-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 28% 4% at 50% 65%,#a2beb816,transparent)}
.tech-copy{position:absolute;left:7%;right:7%;bottom:13%;text-align:center;z-index:4;pointer-events:none;will-change:opacity,translate}
.tech-copy>.eyebrow{font-size:9px;letter-spacing:2.6px;margin-bottom:18px;color:#587a87}
.tech-copy h2{font-size:clamp(34px,3.3vw,56px);letter-spacing:-2.2px;font-weight:300;line-height:1.3}
.tech-copy:not([data-tech-copy="0"]){visibility:hidden;opacity:0}
.tech-bottom{position:absolute;bottom:36px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;align-items:center;gap:25px;z-index:4}
.tech-bottom>span{font-size:9px;letter-spacing:1.3px;color:#6c8088}
.tech-fallback{position:absolute;left:50%;top:43%;width:42vh;max-width:70vw;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #7ba7b060;border-radius:50%;background:radial-gradient(ellipse at 30% 27%,#fff,#e4efef80 60%,#afcbcb55);box-shadow:inset -20px -20px 70px #689ca41c}
.tech-webgl-ready .tech-fallback{display:none}
footer{padding:35px 4.5%;border-top:1px solid #e5ecee;background:var(--paper);color:#768990}

@media(min-width:1800px){.hero-copy h1{font-size:86px}.tech-copy h2{font-size:59px}}
@media(max-width:700px){
  header{height:78px;padding:0 6%;gap:13px}.wordmark{font-size:21px}.wordmark span{display:none}header nav{font-size:7px;letter-spacing:.5px;gap:15px}
  .story-scroll{height:180svh}.story-stage{min-height:580px}.hero-copy{top:41%}.hero-copy h1{font-size:43px;letter-spacing:-2.8px;line-height:1.28}.eyebrow{font-size:8px;letter-spacing:2.5px;margin-bottom:23px}
  .hero-bottom{left:7%;right:7%;bottom:30px;flex-wrap:wrap;gap:20px}.hero-bottom>span:first-child{font-size:7px;letter-spacing:1.2px}
  .tech-scroll{height:700svh}.tech-stage{min-height:610px}
  .tech-copy{left:4%;right:4%;bottom:17%}.tech-copy>.eyebrow{font-size:7px;letter-spacing:1.7px;margin-bottom:15px}.tech-copy h2{font-size:30px;letter-spacing:-1.5px}
  .tech-bottom{left:7%;right:7%;bottom:27px;display:block}.tech-bottom>span{font-size:7px;display:block;margin-bottom:20px}
  footer{padding:26px 7%}
  .fallback-spectrum{left:-9%;right:-9%;top:44%;height:23%;transform:rotate(-24deg)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Platform narrative and the thirty-second science film. */
.story-scroll{height:500svh}
.hero-copy h2{font-size:clamp(42px,4.8vw,78px);line-height:1.25;letter-spacing:-.045em;font-weight:300}
.hero-copy h2.platform-title{font-size:clamp(48px,5.5vw,90px);line-height:1.02;letter-spacing:-.055em;font-weight:400}
.hero-copy p{font-size:18px;line-height:1.65;letter-spacing:-.03em;margin-top:25px;color:#48636e}
.hero-copy:not([data-story-copy="0"]){opacity:0;visibility:hidden}
.platform-components{font-size:12px;letter-spacing:1.5px;margin-top:21px;color:#4a6a74}
.platform-components i{font-style:normal;margin:0 12px;color:#91a6ad}
.application-names{position:absolute;left:14%;right:14%;top:72%;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;z-index:3;opacity:0;visibility:hidden}
.application-names span{font-size:14px;letter-spacing:2px;color:#315b69}
.story-index{display:flex;align-items:center;gap:14px;font-size:12px;color:#82969d}
.story-index b{font-weight:500;color:#315b69}
.story-index i{width:50px;height:1px;background:#cfdddf}
.eyebrow,.hero-bottom>span:first-child{font-size:12px;letter-spacing:2px}
header nav{font-size:12px}
.wordmark span{font-size:10px}
.tech-scroll{height:640svh}
.tech-copy{bottom:14%}
.tech-copy h2{font-size:clamp(32px,3.3vw,54px)}
.tech-copy>.eyebrow{font-size:12px;letter-spacing:1.8px}
.tech-copy p{font-size:17px;color:#5b7380;line-height:1.7;margin-top:16px;letter-spacing:-.025em}
.mobile-break{display:none}
.diagram-labels{position:absolute;z-index:3;left:12%;right:12%;top:64%;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-size:14px;color:#476879}
.qd-labels span{width:33.333%;text-align:center}
.nir-labels{left:22%;right:16%;top:59%}
.nir-labels span:last-child{font-size:13px}
.summary-labels{position:absolute;top:55%;left:9%;right:9%;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;z-index:3}
.summary-labels b{display:block;font-size:16px;font-weight:500;color:#335c6c}
.summary-labels span{display:block;font-size:13px;color:#6b8791;margin-top:10px}
[data-science-label]:not([data-science-label="0"]){opacity:0;visibility:hidden}
.tech-bottom{bottom:35px;gap:25px}
.tech-bottom>span{font-size:12px;letter-spacing:1px;color:#5e7c89;min-width:75px}
.tech-bottom>span:last-child{text-align:right;min-width:90px}
.film-track{height:1px;background:#dce7e8;flex:1;position:relative}
.film-track i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:#699c9d}
.footer-line{display:flex;gap:25px;align-items:center;font-size:12px}
.footer-line small{margin-left:auto;font-size:12px}
.footer-line>a{font-size:24px}
@media(max-width:700px){
  header nav{font-size:10px;gap:12px}.wordmark{font-size:20px}
  .story-scroll{height:530svh}.hero-copy{top:41%}.hero-copy h1{font-size:clamp(34px,8.5vw,43px);letter-spacing:-.06em}.hero-copy h2{font-size:35px}.hero-copy h2.platform-title{font-size:49px}.hero-copy p{font-size:16px;margin-top:19px}.eyebrow{font-size:11px;letter-spacing:1.4px}.platform-components{font-size:11px;letter-spacing:1px}.platform-components i{margin:0 8px}
  .application-names{left:5%;right:5%;top:70%}.application-names span{font-size:12px;letter-spacing:1px}.hero-bottom>span:first-child{font-size:10px;letter-spacing:1px}
  .tech-scroll{height:700svh}
  .tech-copy{bottom:15%;left:5%;right:5%}.tech-copy h2{font-size:28px;letter-spacing:-.055em}.tech-copy>.eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:14px}.tech-copy p{font-size:15px;line-height:1.65;margin-top:13px}.mobile-break{display:block}
  .diagram-labels{left:4%;right:4%;top:56%;font-size:12px}.nir-labels{left:12%;right:7%;top:56%}.nir-labels span:last-child{font-size:11px;max-width:145px;text-align:right}.summary-labels{top:53%;left:4%;right:4%}.summary-labels b{font-size:14px}.summary-labels span{font-size:12px}
  .tech-bottom{display:flex;bottom:30px;gap:14px}.tech-bottom>span{display:inline;font-size:11px;margin:0;min-width:64px}.tech-bottom>span:last-child{min-width:75px}
  .footer-line{flex-wrap:wrap;gap:15px;font-size:11px}.footer-line small{font-size:11px;order:3;flex-basis:100%;margin:0}.footer-line>a{margin-left:auto}
}
@media(max-height:650px) and (min-width:701px){.tech-copy{bottom:12%}.tech-copy h2{font-size:34px}.tech-copy p{font-size:15px;margin-top:10px}.hero-copy h1{font-size:53px}.hero-copy h2.platform-title{font-size:58px}.hero-copy p{font-size:16px;margin-top:14px}}