:root{--bg:#07070a;--fg:#f2f2f2;--accent:#5b7cff;--font-display:"Archivo", "Pretendard Variable", Pretendard, system-ui, sans-serif;--font-body:"Pretendard Variable", Pretendard, "Archivo", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--fs-display:min(220px, calc((100vw - 2 * var(--gutter)) / 9));--fs-h2:min(168px, calc((100vw - 2 * var(--gutter)) / 8.4));--fs-h3:clamp(26px, 2.6vw, 40px);--fs-lead:clamp(17px, 1.35vw, 21px);--fs-body:16px;--fs-small:12px;--gutter:clamp(16px, 3.2vw, 48px);--radius:18px;--ease-out:cubic-bezier(.16, 1, .3, 1);--nav-h:64px;--line:color-mix(in srgb, var(--fg) 16%, transparent);--muted:color-mix(in srgb, var(--fg) 62%, transparent);--panel:color-mix(in srgb, var(--fg) 6%, transparent)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:#07070a}html.scroll-locked{overflow:hidden}body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;word-break:keep-all;margin:0;line-height:1.6;overflow-x:clip}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}::selection{background:var(--accent);color:var(--bg)}.bg-layer{z-index:-2;background:var(--bg);position:fixed;inset:0}.grain{z-index:50;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:-50%}main>section{background:0 0;position:relative}.rv-line{margin-bottom:-.06em;padding-bottom:.06em;display:block;overflow:hidden}.rv-line>span{transition:transform 1.2s var(--ease-out);display:inline-block;transform:translateY(105%)}.is-revealed .rv-line>span{transform:none}.is-revealed .rv-line:nth-child(2)>span{transition-delay:80ms}.is-revealed .rv-line:nth-child(3)>span{transition-delay:.16s}.rv-word{opacity:.14;transition:opacity .25s linear}.rv-word.is-on{opacity:1}@media (prefers-reduced-motion:reduce){.rv-line>span{transition:none;transform:none}.rv-word{opacity:1}}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}@media (hover:hover) and (pointer:fine){html.has-cursor,html.has-cursor *{cursor:none!important}}.cursor{z-index:100;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s;position:fixed;inset:0}.cursor.is-visible{opacity:1}.cursor__dot,.cursor__ring{will-change:transform;position:absolute;top:0;left:0}.cursor__dot:before{content:"";background:#fff;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute}.cursor__ring:before{content:"";width:36px;height:36px;transition:width .4s var(--ease-out), height .4s var(--ease-out), margin .4s var(--ease-out), background .3s;border:1px solid #fff;border-radius:50%;margin:-18px 0 0 -18px;position:absolute}.cursor.is-link .cursor__ring:before{width:64px;height:64px;margin:-32px 0 0 -32px}.cursor.is-mode .cursor__ring:before{background:#fff;width:84px;height:84px;margin:-42px 0 0 -42px}.cursor.is-down .cursor__ring:before{transform:scale(.8)}.cursor__label{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#000;white-space:nowrap;font-size:11px;position:absolute;transform:translate(-50%,-50%)}.loader{z-index:90;color:#f2f2f2;padding:var(--gutter);clip-path:inset(0);background:#07070a;flex-direction:column;justify-content:flex-end;display:flex;position:fixed;inset:0}.loader__inner{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.loader__label{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;color:#8a8a96}.loader__count{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:clamp(80px,18vw,280px);font-weight:800;font-stretch:125%;line-height:.8}.loader__bar{background:#24242c;height:1px;margin-top:24px}.loader__bar span{transform-origin:0;background:#f2f2f2;height:100%;display:block;transform:scaleX(0)}.nav{z-index:40;height:var(--nav-h);padding:0 var(--gutter);color:var(--fg);transition:transform .6s var(--ease-out), background .4s;justify-content:space-between;align-items:center;gap:24px;display:flex;position:fixed;top:0;left:0;right:0}.nav.is-hidden{transform:translateY(-100%)}.nav.is-solid{background:color-mix(in srgb, var(--bg) 72%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.nav__logo{font-family:var(--font-display);letter-spacing:-.02em;font-size:20px;font-weight:800;font-stretch:125%}.nav__logo sup{margin-left:2px;font-size:9px}.nav__links{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;gap:clamp(12px,2.4vw,36px);font-size:12px;display:flex}.nav__links a{opacity:.55;gap:6px;transition:opacity .3s;display:inline-flex}.nav__links a span{color:var(--accent)}.nav__links a:hover,.nav__links a.is-active{opacity:1}.nav__progress{background:var(--line);height:1px;position:absolute;bottom:0;left:0;right:0}.nav__progress span{background:var(--fg);transform-origin:0;height:100%;display:block;transform:scaleX(0)}@media (width<=768px){.nav__links a{gap:0;font-size:0}.nav__links a span{font-size:12px}}.hero{height:100vh;min-height:560px;overflow:hidden}.hero__canvas{position:absolute;inset:0}.hero__canvas.is-fallback{background:radial-gradient(circle at 60% 45%,#2b3fb8 0%,#0b1660 28%,#0000 60%)}.hero__content{z-index:2;height:100%;padding:calc(var(--nav-h) + 24px) var(--gutter) var(--gutter);pointer-events:none;flex-direction:column;justify-content:flex-end;display:flex;position:relative}.hero__kicker{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.hero__title{font-family:var(--font-display);font-size:var(--fs-display);letter-spacing:-.045em;text-transform:uppercase;mix-blend-mode:difference;font-weight:800;font-stretch:125%;line-height:.84}.hero__title .line{display:block;overflow:hidden}.hero__title .line>span{transition:transform 1.4s var(--ease-out);display:inline-block;transform:translateY(110%)}.hero__title .line--indent{padding-left:.9em}.is-loaded .hero__title .line>span{transform:none}.is-loaded .hero__title .line:nth-child(2)>span{transition-delay:.1s}.hero__bottom{opacity:0;transition:opacity 1s .5s, transform 1.2s .5s var(--ease-out);justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(24px,4vh,48px);display:flex;transform:translateY(16px)}.is-loaded .hero__bottom{opacity:1;transform:none}.hero__sub{font-size:var(--fs-lead);max-width:28em;line-height:1.6}.hero__meta{font-family:var(--font-mono);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);gap:28px;margin:0;padding:0;list-style:none;display:flex}.hero__meta strong{color:var(--fg);font-weight:500}.hero__scroll span{animation:1.8s ease-in-out infinite bob;display:inline-block}@keyframes bob{50%{transform:translateY(4px)}}@media (width<=768px){.hero__bottom{flex-direction:column;align-items:flex-start}}.intro{padding:clamp(140px, 22vh, 260px) var(--gutter)}.intro__label{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--accent);letter-spacing:.08em;margin-bottom:32px}.intro__statement{letter-spacing:-.025em;max-width:22em;font-size:clamp(26px,3.4vw,56px);font-weight:600;line-height:1.32}.intro__grid{gap:var(--gutter);border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(100px,16vh,200px);display:grid}.intro__item{flex-direction:column;gap:12px;padding-top:24px;display:flex}.intro__num{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--accent)}.intro__item h3{font-family:var(--font-display);font-size:24px;font-weight:700;font-stretch:105%}.intro__item p{color:var(--muted)}@media (width<=768px){.intro__grid{grid-template-columns:1fr}}.timeline{height:300vh}.timeline__sticky{height:100svh;padding:var(--nav-h) 0 0;flex-direction:column;justify-content:center;gap:clamp(32px,6vh,64px);display:flex;position:sticky;top:0;overflow:hidden}.timeline__head{padding:0 var(--gutter);gap:16px;display:grid}.timeline__head .chapter__title{font-size:min(120px, calc((100vw - 2 * var(--gutter)) / 8.4))}.timeline__track{padding:0 var(--gutter);will-change:transform;gap:clamp(20px,3vw,48px);width:max-content;display:flex}.tl-card{flex-direction:column;gap:12px;width:clamp(260px,26vw,380px);display:flex}.tl-card__img{aspect-ratio:4/3;background:var(--panel);border-radius:14px;margin:0 0 6px;overflow:hidden}.tl-card__img img{object-fit:cover;filter:saturate(.85);width:100%;height:100%;transition:transform .8s var(--ease-out), filter .4s;display:block}.tl-card:hover .tl-card__img img{filter:saturate(1.1);transform:scale(1.05)}.tl-card__meta{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--accent);border-top:1px solid var(--line);justify-content:space-between;padding-top:10px;display:flex}.tl-card h3{font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(22px,2vw,30px);font-weight:700;font-stretch:105%;line-height:1.1}.tl-card p{color:var(--muted);font-size:15px;line-height:1.7}.timeline__progress{margin:0 var(--gutter);background:var(--line);height:1px}.timeline__progress span{background:var(--accent);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.outro{min-height:100vh;padding:clamp(120px, 20vh, 220px) var(--gutter) var(--gutter);flex-direction:column;justify-content:space-between;display:flex}.outro__type{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:min(200px, calc((100vw - 2 * var(--gutter)) / 8.4));letter-spacing:-.04em;text-transform:uppercase;-webkit-user-select:none;user-select:none;line-height:.9}.outro__line{white-space:nowrap;display:block}.outro__ch{will-change:transform;display:inline-block}.outro__line:nth-child(2){color:var(--accent);padding-left:.35em}.footer{border-top:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-small);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(80px,14vh,160px);padding-top:24px;display:flex}.footer__top{color:var(--fg)}.chapter{padding:clamp(120px, 18vh, 220px) var(--gutter) clamp(80px, 12vh, 160px)}.chapter__head{gap:24px var(--gutter);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;margin-bottom:clamp(80px,14vh,180px);display:grid}.chapter__num{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;color:var(--accent);grid-column:1/-1;align-items:center;gap:12px;display:flex}.chapter__num:after{content:"";background:var(--line);flex:1;height:1px}.chapter__title{font-family:var(--font-display);font-size:var(--fs-h2);letter-spacing:-.035em;text-transform:uppercase;grid-column:1/-1;font-weight:800;font-stretch:112%;line-height:.86}.chapter__lead{font-size:var(--fs-lead);color:var(--muted);grid-column:2;justify-self:end;max-width:34em;line-height:1.7}.chapter__demos{flex-direction:column;gap:clamp(100px,16vh,200px);display:flex}.demo-block{position:relative}.demo-block--split{gap:var(--gutter);grid-template-columns:minmax(260px,4fr) 8fr;align-items:stretch;display:grid}.demo-block--split.demo-block--reverse{grid-template-columns:8fr minmax(260px,4fr)}.demo-block--split.demo-block--reverse .demo-info{order:2}.demo-info{flex-direction:column;gap:16px;padding-top:4px;display:flex}.demo-index{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--accent);letter-spacing:.08em}.demo-title{font-family:var(--font-display);font-size:var(--fs-h3);letter-spacing:-.02em;font-weight:700;font-stretch:105%;line-height:1.08}.demo-desc{color:var(--muted);max-width:30em;line-height:1.75}.demo-apis{flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}.demo-apis li{font-family:var(--font-mono);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:11px}.demo-hint{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--muted);align-items:baseline;gap:8px;margin-top:auto;display:flex}.demo-hint:before{content:"↳";color:var(--accent)}.demo-stage{border-radius:var(--radius);background:var(--panel);outline:1px solid var(--line);outline-offset:-1px;touch-action:pan-y;isolation:isolate;min-height:clamp(380px,72vh,760px);position:relative;overflow:hidden}.demo-mount{position:absolute;inset:0}.demo-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.demo-stage:after{content:"";border:1.5px solid var(--line);border-top-color:var(--fg);opacity:0;pointer-events:none;border-radius:50%;width:28px;height:28px;margin:-14px 0 0 -14px;transition:opacity .3s;position:absolute;top:50%;left:50%}.demo-stage.is-loading:after{opacity:1;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.demo-block--full{margin-inline:calc(var(--gutter) * -1)}.demo-block--full .demo-stage{border-radius:0;outline:none;min-height:100vh}.demo-block--full .demo-info{z-index:2;left:var(--gutter);bottom:var(--gutter);border-radius:var(--radius);background:color-mix(in srgb, var(--bg) 70%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none;max-width:420px;padding:24px;position:absolute}.demo-block--scroll{margin-inline:calc(var(--gutter) * -1)}.demo-sticky{height:100vh;position:sticky;top:0;overflow:hidden}.demo-sticky .demo-stage{background:0 0;border-radius:0;outline:none;min-height:0;position:absolute;inset:0}.demo-sticky .demo-info{z-index:2;left:var(--gutter);top:calc(var(--nav-h) + 16px);border-radius:var(--radius);background:color-mix(in srgb, var(--bg) 78%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;max-width:420px;padding:20px 22px;position:absolute}.demo-gate{z-index:5;border:1px solid var(--fg);font-family:var(--font-mono);letter-spacing:.04em;cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:12px;padding:18px 28px;font-size:13px;transition:background .3s,color .3s;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.demo-gate:hover,.demo-gate:focus-visible{background:var(--fg);color:var(--bg)}.demo-gate__dot{background:var(--accent);border-radius:50%;width:8px;height:8px;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.4;transform:scale(1.8)}}.demo-fallback{text-align:center;color:var(--muted);place-content:center;gap:16px;padding:32px;display:grid;position:absolute;inset:0}.demo-fallback button,.demo-ui button{border:1px solid var(--line);font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:999px;justify-self:center;padding:10px 18px;font-size:12px}.demo-ui{z-index:3;flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex;position:absolute;top:16px;right:16px}.demo-ui button{color:var(--fg);background:color-mix(in srgb, var(--bg) 55%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,color .2s}.demo-ui button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.demo-status{z-index:3;font-family:var(--font-mono);color:var(--muted);pointer-events:none;font-size:11px;position:absolute;bottom:14px;left:16px}@media (width<=768px){.chapter__head{grid-template-columns:1fr}.chapter__lead{grid-column:1;justify-self:start}.demo-block--split,.demo-block--split.demo-block--reverse{grid-template-columns:1fr}.demo-block--split.demo-block--reverse .demo-info{order:0}.demo-stage{min-height:60vh}.demo-block--full .demo-info{margin:0 var(--gutter) 16px;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;max-width:none;padding:0;position:static}.demo-block--full{flex-direction:column;display:flex}.demo-block--full .demo-stage{min-height:70vh}.demo-sticky .demo-info{max-width:calc(100% - var(--gutter) * 2);gap:8px;padding:14px 16px}.demo-sticky .demo-desc,.demo-sticky .demo-apis{display:none}}.demo-block--full .demo-ui{top:calc(var(--nav-h) + 16px)}html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-behavior:allow-discrete;transition-property:overflow;transition-duration:1ms}
