* { box-sizing:border-box; }
html,body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; font-family:Pretendard,sans-serif; }
.ai-banner { position:relative; width:100%; height:100%; overflow:hidden; background:#eeeee8; color:#242923; }
.brand { position:absolute; inset:20px 24px auto; display:flex; align-items:center; justify-content:space-between; z-index:2; }
.brand strong { font-size:13px; font-weight:800; letter-spacing:.4px; }
.brand>span { font-size:8px; letter-spacing:1.2px; color:#858a7e; }
.demo-stage { position:absolute; top:49px; bottom:167px; left:16px; right:16px; display:grid; place-items:center; }
.demo-shell { position:relative; overflow:hidden; border:4px solid #30342f; border-radius:17px; box-shadow:0 15px 25px #333b3422; background:#181a1e; }
.demo-shell iframe { position:absolute; top:0; left:0; display:block; width:320px; border:0; transform-origin:top left; }
.banner-copy { position:absolute; left:28px; right:26px; bottom:22px; }
.eyebrow { margin:0 0 9px; color:#6d7764; font-size:11px; font-weight:500; }
h1 { margin:0; font-size:28px; font-weight:750; line-height:1.27; letter-spacing:-1px; }
.banner-bottom { margin-top:13px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.banner-bottom p { margin:0; color:#737c6d; font-size:10px; letter-spacing:-.15px; }
.banner-bottom a { display:grid; place-items:center; width:29px; height:29px; flex:none; border-radius:50%; color:#f7f9f2; background:#344831; text-decoration:none; font-size:18px; }
.example-disclosure { position:absolute; top:49px; right:23px; writing-mode:vertical-rl; font-size:8px; letter-spacing:.8px; color:#93988d; }
@media(max-width:350px) { h1 { font-size:24px; } .banner-copy { left:22px; right:22px; } .banner-bottom p { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }