*{box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:#b4c8b7 #f3f4eb}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:var(--bg,#f3f4eb);color:var(--ink,#21483e);-webkit-font-smoothing:antialiased;word-break:keep-all;overscroll-behavior-y:none}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
a{text-decoration:none;color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:7px}
button{padding:0}
img,svg{display:block}
h1,h2,h3,h4,p{margin:0}
em{font-style:normal;color:var(--accent,#6f9e86)}
.header{position:fixed;inset:0 0 auto;height:100px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 5.8vw;gap:20px;pointer-events:none}
.header>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:6px;font-weight:750;font-size:25px;letter-spacing:-1.2px;white-space:nowrap}
.brand b{font-weight:800}
.brand sup{font-size:9px;align-self:flex-start;margin-top:5px}
.brand-symbol{width:34px;height:34px;border-radius:50%;background:var(--ink,#21483e);color:var(--bg,#f3f4eb);display:grid;place-items:center;font:34px Georgia,serif;letter-spacing:0;margin-right:5px;padding-bottom:4px}
.header nav{display:flex;gap:32px;font-size:12px}
.header nav button{padding:10px 0;opacity:.65}
.header nav button:hover{opacity:1}
.pill-button{display:inline-flex;align-items:center;justify-content:space-between;gap:27px;border-radius:40px;background:var(--ink,#21483e);color:var(--bg,#f3f4eb);font-size:12px;padding:14px 22px;min-height:44px;font-weight:550}
.pill-button span{font-size:20px;font-weight:300;line-height:1}
.pill-button:hover{filter:brightness(1.15)}
.pill-button.large{padding:18px 26px;font-size:14px;margin-top:27px;min-height:54px}
.skip{position:fixed;z-index:99;left:10px;top:-100px;background:#fff;padding:15px;color:#183d37}
.skip:focus{top:10px}
#scroll-track{height:850svh;pointer-events:none}
.stage{position:fixed;inset:0;overflow:hidden;background:var(--bg,#f3f4eb);isolation:isolate}
.ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 53%,var(--glow,#e1ebdd99),transparent 54%);z-index:-1}
#abstract-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.copy-track{position:absolute;left:5.8vw;top:47%;width:40vw;max-width:600px;height:430px;overflow:hidden;transform:translateY(-50%);z-index:4}
.chapter{position:absolute;top:18px;left:0;width:100%;will-change:transform,opacity;pointer-events:none;opacity:0;transform:translateY(160px)}
.chapter.is-active{pointer-events:auto}
.chapter:first-child{opacity:1;transform:none}
.chapter .eyebrow{font-size:10px;font-weight:650;letter-spacing:.15em;line-height:1.6;color:var(--muted,#738779);margin-bottom:26px}
.eyebrow>span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8eae85;margin-right:9px}
.chapter h1,.chapter h2{font-size:clamp(42px,4.6vw,78px);font-weight:550;letter-spacing:-.065em;line-height:1.23}
.chapter-text{font-size:15px;line-height:1.9;color:var(--muted,#718477);margin-top:26px;letter-spacing:-.025em}
.text-button{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:600;margin-top:30px;padding:5px 0}
.text-button span{font-size:23px;font-weight:300}
.chapter-detail{font-size:10px;color:var(--muted,#82917f);line-height:1.7;margin-top:30px;max-width:310px}
.feature-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.feature-tags>span{font-size:10px;border-radius:30px;padding:7px 13px;background:var(--tag,#e7ecdf);color:var(--muted,#637b6d)}
.legal-links{display:flex;gap:22px;font-size:10px;opacity:.6;margin-top:30px}
.phone-layer{position:absolute;left:60%;top:51.5%;width:calc(300px * var(--device-scale,.87));height:calc(620px * var(--device-scale,.87));z-index:3;will-change:transform,opacity;transform:translate(-50%,-50%);perspective:1400px}
.phone-device{position:relative;width:300px;height:620px;overflow:hidden;background:#fff;border:7px solid #24463a;border-radius:43px;box-shadow:0 35px 75px #254f3325,0 5px 12px #254f3310;transform:scale(var(--device-scale,.87));transform-origin:top left;color:#273d32;isolation:isolate}
.phone-device:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffffbb;border-radius:34px;z-index:10}
.phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);height:17px;width:76px;background:#24463a;border-radius:20px;z-index:8}
.phone-status{position:absolute;top:12px;left:20px;right:16px;display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:700;color:#24463a;z-index:7}
.home-indicator{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:82px;height:3px;border-radius:10px;background:#24463a88;z-index:8}
.demo-label{position:absolute;left:50%;transform:translateX(-50%);bottom:-32px;font-size:8px;letter-spacing:.09em;white-space:nowrap;color:var(--muted,#7d8e7b);display:flex;align-items:center;gap:6px}
.demo-label>span{height:4px;width:4px;background:#8eaf88;border-radius:50%}
.demo-label i{font-style:normal;margin:0 3px}
.garden-finale{position:absolute;right:2vw;top:24%;width:54vw;height:58%;z-index:3;pointer-events:none;opacity:0;transform:translateY(100px);will-change:transform,opacity}
.garden-halo{position:absolute;inset:15%;background:#d3e3bc;filter:blur(60px);opacity:.4;border-radius:50%}
.garden-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.garden-capy{position:absolute;left:44%;top:52%;width:19%;height:32%;object-fit:contain}
.garden-note{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);font:italic 20px Georgia,serif;color:#8da37e;white-space:nowrap}
.floating-label{position:absolute;right:5vw;bottom:18%;display:flex;gap:12px;align-items:center;font-size:8px;letter-spacing:.12em;line-height:1.9;color:var(--muted,#83977f);z-index:2;opacity:.7}
.cross{font-size:29px;font-weight:200}
.experience-footer{position:fixed;inset:auto 5.8vw 0;height:83px;display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:15;pointer-events:none}
.experience-footer>*{pointer-events:auto}
.progress-nav{display:flex;align-items:center;gap:5px}
.step-button{width:29px;height:30px;display:flex;align-items:center;justify-content:center;font-size:9px;opacity:.35;position:relative}
.step-button[aria-current=step]{opacity:1;font-weight:600}
.step-button[aria-current=step]:after{content:'';position:absolute;height:2px;width:12px;bottom:0;left:50%;transform:translateX(-50%);background:currentColor}
.scroll-hint{position:absolute;left:35%;display:flex;align-items:center;gap:23px;font-size:8px;letter-spacing:.16em;color:var(--muted,#84937e)}
.scroll-hint>b{font-size:22px;font-weight:300}
.footer-actions{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:8px;letter-spacing:.09em;color:var(--muted,#84937e)}
#motion-toggle{font-size:9px;padding:9px 12px;border-radius:20px;background:var(--tag,#e6ebdf);letter-spacing:0}
.abstract-fallback{position:absolute;right:0;width:38vw;height:60%;top:20%;opacity:.2;z-index:0}
.abstract-fallback i{position:absolute;inset:10% 15%;border:20px solid #9dc29c;border-radius:48%;transform:rotate(35deg)}
.abstract-fallback i:nth-child(2){transform:rotate(-35deg);border-color:#b4d1c4}
.abstract-fallback i:nth-child(3){transform:rotate(90deg);border-color:#d7c5ae}
.webgl-ready .abstract-fallback{display:none}
dialog{width:min(570px,calc(100% - 32px));max-height:85svh;overflow:auto;border:0;background:#fbfcf6;color:#23483b;border-radius:25px;padding:40px;box-shadow:0 25px 90px #142f3833}
dialog::backdrop{background:#142f3870;backdrop-filter:blur(7px)}
.dialog-close{position:absolute;right:17px;top:10px;font-size:30px;font-weight:300}
.dialog-body h2{font-size:29px;letter-spacing:-.05em;margin:10px 0 20px}
.dialog-body p,.dialog-body li{font-size:13px;line-height:1.9;color:#72816b}
.dialog-body .eyebrow{font-size:9px;letter-spacing:.1em}
.dialog-body ol{padding-left:20px}
.notice{padding:15px;background:#edf1e5;border-radius:13px;margin-top:20px;font-size:11px!important}
.app-options{display:grid;gap:15px;margin-top:20px}
.app-options>div{background:#eef2e7;border-radius:15px;padding:20px}
.app-options h3{font-size:16px;margin-bottom:8px}
.dialog-body .pill-button{margin-top:20px;background:#244d3f;color:#fff;font-size:11px}
.no-script{position:fixed;inset:110px 24px auto;z-index:30;background:#f3f4eb;padding:30px}
.no-script p{line-height:1.9;margin-top:20px}

@media(min-width:1600px){.copy-track{left:8vw;width:37vw}
.header{padding:0 8vw}
.experience-footer{left:8vw;right:8vw}
}

@media(max-width:1050px){.copy-track{width:39vw}
.chapter h1,.chapter h2{font-size:48px}
.chapter-text{font-size:13px}
.header nav{gap:20px}
.phone-layer{left:63%}
.floating-label{right:3vw;font-size:7px;bottom:16%}
.footer-actions>span{display:none}
.garden-finale{width:56vw;right:-1vw;top:28%;height:52%}
}

@media(max-width:700px){.header{height:76px;padding:0 22px}
.brand{font-size:21px;gap:4px}
.brand-symbol{width:27px;height:27px;font-size:29px;margin-right:3px}
.header nav{display:none}
.pill-button{min-height:38px;font-size:10px;padding:11px 15px;gap:16px}
.pill-button span{font-size:16px}
.copy-track{left:25px;right:25px;width:auto;top:104px;transform:none;height:265px;max-width:none}
.chapter{top:0}
.chapter .eyebrow{font-size:8px;letter-spacing:.12em;margin-bottom:14px}
.chapter h1,.chapter h2{font-size:35px;line-height:1.19;letter-spacing:-.055em}
.chapter-text{font-size:12px;line-height:1.75;margin-top:14px}
.text-button{font-size:10px;margin-top:16px;gap:15px}
.text-button span{font-size:19px}
.chapter-detail{margin-top:13px;font-size:8px;max-width:280px;line-height:1.7}
.chapter:first-child .chapter-detail{display:none}
.feature-tags{margin-top:13px;gap:5px}
.feature-tags>span{font-size:8px;padding:5px 10px}
.phone-layer{left:50%;top:66%;z-index:3}
.demo-label{font-size:6px;bottom:-23px}
.floating-label{right:18px;bottom:23%;font-size:5px;gap:4px;opacity:.65}
.cross{font-size:20px}
.experience-footer{left:20px;right:20px;height:52px;gap:10px}
.progress-nav{gap:1px}
.step-button{width:23px;font-size:8px;height:27px}
.scroll-hint{position:static;font-size:6px;gap:8px;letter-spacing:.1em}
.scroll-hint>b{font-size:17px}
.footer-actions{gap:0}
#motion-toggle{font-size:7px;padding:7px 9px}
.garden-finale{left:0;right:0;width:100%;top:43%;height:45%;z-index:3}
.garden-capy{width:20%;left:43%;height:34%;top:52%}
.garden-note{font-size:16px;bottom:-8px}
.finale-copy .pill-button{margin-top:19px;font-size:11px;min-height:44px;padding:13px 20px}
.legal-links{font-size:8px;margin-top:17px;gap:18px}
.abstract-fallback{width:75vw;right:-20%;top:35%;height:50%}
.abstract-fallback i{border-width:15px}
dialog{padding:34px 25px}
.dialog-body h2{font-size:26px}
}

@media(max-height:740px) and (max-width:700px){.copy-track{top:88px;height:240px}
.chapter h1,.chapter h2{font-size:30px}
.chapter .eyebrow{margin-bottom:10px;font-size:7px}
.chapter-text{margin-top:10px;font-size:10px}
.chapter-detail{font-size:7px;margin-top:9px}
.text-button{margin-top:10px;font-size:9px}
.feature-tags{margin-top:9px}
.phone-layer{top:67%}
.chapter[data-index='3'] .chapter-detail{display:none}
.garden-finale{top:46%;height:41%}
.legal-links{margin-top:12px}
.experience-footer{height:48px}
.finale-copy .pill-button{margin-top:13px}
}

@media(max-width:360px){.header{padding:0 17px}
.brand{font-size:19px}
.header>.pill-button{padding:10px 13px;gap:9px}
.copy-track{left:20px;right:20px}
.chapter h1,.chapter h2{font-size:30px}
.scroll-hint>span{display:none}
.experience-footer{left:17px;right:17px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.chapter,.phone-layer,.garden-finale{will-change:auto}
}