:root{--journey-header:76px}
.topbar{position:sticky;top:0;z-index:20;background:#0c0f14ed;backdrop-filter:blur(16px);max-width:none!important}.topbar .build-label{display:none}.journey-download{font-size:14px;border:1px solid #3c6558;padding:8px 14px;border-radius:6px;color:#b1e8d6;background:#1c3029}.journey-download:hover{background:#2a493c}#principal{scroll-margin-top:90px}
.journey{position:relative;background:#060c12}.journey.is-enhanced{height:570svh}.journey-stage{position:relative;height:calc(100svh - var(--journey-header));min-height:440px;overflow:hidden;isolation:isolate;--demo-opacity:0;--room-opacity:0;--room-fade:1;--film-scale:1;--room-scale:1;--caption-size:52px;--preview-open:0;--preview-width:0%;--ai-opacity:0;--suggestion:0;--terminal:0;--result-glow:0}.is-enhanced .journey-stage{position:sticky;top:var(--journey-header)}
.journey-film,.journey-room{position:absolute;inset:0;pointer-events:none}.journey-film{transform:scale(var(--film-scale));transform-origin:57% 51%;opacity:calc(1 - var(--room-opacity));will-change:transform}.journey-poster,.journey-film video,.journey-room img{display:block;width:100%;height:100%;object-fit:cover}.journey-film video{position:absolute;inset:0;opacity:0}.journey-stage[data-ready=true] video{opacity:1}.journey-room{opacity:calc(var(--room-opacity)*var(--room-fade));transform:translate(var(--room-x,0px),var(--room-y,0px)) scale(var(--room-scale));transform-origin:var(--room-origin,59% 51%);will-change:transform}.journey-stage:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#050a12c9,transparent 42%,transparent 72%,#060c12ed),linear-gradient(90deg,#060c1277,transparent 75%)}
.journey-caption{position:absolute;z-index:3;top:36px;left:max(32px,calc((100vw - 1200px)/2));right:32px;max-width:720px;pointer-events:none}.journey-caption .eyebrow{font:12px/1.5 var(--mono);letter-spacing:1.8px;color:#a9d8ca;margin:0 0 12px}.journey-caption h2{font-size:var(--caption-size);line-height:1.08;font-weight:550;letter-spacing:-1.8px;color:#f4f1e9;text-wrap:balance;margin:0 0 12px;max-width:650px}.journey-caption p:last-child{font-size:16px;line-height:1.55;margin:0;color:#c1cbd3;max-width:600px}.journey-stage[data-chapter="0"] .journey-caption{max-width:540px}.journey-stage[data-chapter="1"] .eyebrow{color:#e9c895}
.journey-note{position:absolute;z-index:3;right:32px;top:36px;display:flex;align-items:center;gap:10px;color:#c1d4d7;font:12px var(--mono)}.scroll-track{width:18px;height:28px;border:1px solid #abc4c77d;border-radius:12px;display:grid;justify-items:center;padding-top:6px}.scroll-track:before{content:'';width:2px;height:6px;background:#b5e8d8;border-radius:2px;animation:scroll-hint 1.7s ease-in-out infinite}.journey-stage:not([data-chapter="0"]) .journey-note{opacity:0}.journey-stage:not([data-chapter="0"]) .scroll-track:before{animation:none}@keyframes scroll-hint{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(7px);opacity:1}}
.journey-hud{position:absolute;z-index:4;bottom:24px;left:max(32px,calc((100vw - 1200px)/2));right:max(32px,calc((100vw - 1200px)/2));display:flex;align-items:center;gap:28px}.journey-chapters{display:flex;gap:5px;flex:1}.journey-chapters button{border:0;border-radius:5px;background:transparent;color:#95a7b7;padding:9px 12px;font-size:14px;white-space:nowrap}.journey-chapters button span{font:12px var(--mono);opacity:.6;margin-right:8px}.journey-chapters button:hover{color:#edf8f5;background:#263c474f}.journey-chapters button[aria-current=step]{color:#c7f3e2;background:#203b384d}.journey-progress{position:absolute;bottom:-24px;left:0;right:0;height:2px;background:#9ebac325}.journey-progress>span{display:block;height:100%;background:#a6e7d0;transform:scaleX(0);transform-origin:left}.journey-skip{font-size:14px;white-space:nowrap;color:#bad0d7;padding:8px 0}.journey-skip:hover{color:#b9f5db}
.scroll-demo{position:absolute;z-index:2;top:202px;bottom:92px;left:max(32px,calc((100vw - 1200px)/2));right:max(32px,calc((100vw - 1200px)/2));background:#0b141c;border:1px solid #43555f;border-radius:12px;overflow:hidden;box-shadow:0 35px 100px #0009,0 0 90px #8ecbb51a;opacity:var(--demo-opacity);transform:perspective(1400px) translate3d(var(--demo-x,9vw),var(--demo-y,11vh),0) rotateY(var(--demo-tilt,-9deg)) scale(var(--demo-scale,.19));transform-origin:center;will-change:transform,opacity;pointer-events:none;display:flex;flex-direction:column}
.demo-titlebar{height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 18px;border-bottom:1px solid #29363e;background:#162129;color:#b6c8cb;font:12px var(--mono)}.demo-brand{display:flex;gap:9px;align-items:center}.demo-brand img{object-fit:contain}.demo-titlebar strong{font-weight:500;color:#e4eee9}.demo-tag{color:#aac0c7;font:11px var(--mono);letter-spacing:1.1px}.demo-body{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}.demo-files{width:150px;flex-shrink:0;background:#101c24;padding:21px 14px;border-right:1px solid #26363e;font:12px/1.6 var(--mono);color:#869ca8}.demo-files p{font:11px var(--mono);letter-spacing:1px;color:#7c949f;margin-bottom:18px}.demo-files strong{color:#c4d3d3;display:block;font-weight:500;margin-bottom:14px}.demo-file{padding:6px 7px;margin:5px -3px;border-radius:4px;white-space:nowrap}.demo-file b{font-size:10px;color:#d3b781;margin-right:7px;font-weight:500}.demo-file.active{color:#d9efe6;background:#223b3e}.demo-files .demo-file:last-child b{color:#a5bbed}
.demo-editor{position:relative;min-width:0;flex:1;overflow:hidden;display:flex;flex-direction:column}.demo-editor-tab{height:37px;flex-shrink:0;padding:7px 17px;background:#101920;border-bottom:1px solid #25353e;font:12px/22px var(--mono);color:#b1c3ca;display:flex;justify-content:space-between}.demo-editor-tab b{font-weight:400;color:#e5c79b}.demo-save{font:11px/22px var(--mono);color:#9cb1b7}.demo-save:before{content:'●';color:#ddbc8d;margin-right:7px}.journey-stage[data-accepted=true] .demo-save:before{content:'✓';color:#a5e2c7}.demo-code-wrap{position:relative;overflow:hidden;flex:1;padding:20px 0 64px}.demo-code{font:clamp(12px,1.06vw,15px)/1.85 var(--mono);white-space:pre;transform:translateY(var(--code-drift,0px));will-change:transform}.demo-line{min-height:1.85em;color:#b2c6d6;opacity:.38;position:relative;padding-right:16px}.demo-line.is-written{opacity:1}.demo-line.is-current{background:#80cfb811}.demo-line.is-current:after{content:'';display:inline-block;width:2px;height:1.15em;background:#b6f1d9;vertical-align:middle}.demo-line-number{display:inline-block;width:52px;text-align:right;padding-right:18px;color:#59727f;user-select:none}.tk-comment{color:#73928c}.tk-string{color:#c2d9ac}.tk-keyword{color:#c7b0e2}.tk-number{color:#efc28b}.tk-code{color:#afc9dc}
.demo-suggestion{position:absolute;bottom:53px;left:36px;right:24px;padding:11px 14px;border:1px solid #54766f;background:#17312ded;border-radius:7px;opacity:var(--suggestion);font:12px var(--mono);color:#bfe7d3;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 14px 40px #0005}.demo-suggestion kbd{border:1px solid #74968d;padding:3px 7px;border-radius:4px;color:#e4f5ed;font:12px var(--mono)}.demo-terminal{position:absolute;bottom:0;left:0;right:0;min-height:60px;padding:10px 18px;background:#101f27;border-top:1px solid #31464d;transform:translateY(calc((1 - var(--terminal))*100%));font:12px/1.6 var(--mono);color:#98b0b8}.demo-terminal span{color:#ace3c9;margin-right:9px}.demo-terminal p{margin:2px 0 0;color:#c0d2c9}
.demo-assistant{position:absolute;z-index:3;right:24px;bottom:78px;width:310px;padding:18px;border:1px solid #557268;border-radius:12px;background:#16282df5;box-shadow:0 20px 55px #0007;opacity:var(--ai-opacity);transform:translateY(var(--ai-y,35px));font-size:14px;line-height:1.6}.demo-assistant-head{display:flex;gap:10px;align-items:center;margin-bottom:14px}.demo-assistant-head img{width:33px;height:37px;object-fit:contain}.demo-assistant-head strong{display:block;color:#d8ece1;font-size:14px}.demo-assistant-head span{font:11px var(--mono);color:#8fa6ae}.demo-prompt{margin:0 0 14px;padding:10px 12px;border-radius:7px;background:#264038;color:#d6e7db}.demo-reply{margin:0;color:#abc2c4}.demo-context{font:11px var(--mono);color:#b0d3c2;border-top:1px solid #3b514e;margin-top:15px;padding-top:12px}
.demo-preview{width:var(--preview-width);flex-shrink:0;position:relative;overflow:hidden;opacity:var(--preview-open);border-left:1px solid #354851;background:#142923;transform:translateX(var(--preview-x,60px))}.demo-preview-inner{width:max(310px,calc((100vw - 220px)*.4));max-width:504px;height:100%;display:flex;flex-direction:column;padding:24px}.demo-preview-label{font:11px var(--mono);letter-spacing:1.2px;color:#9bb8ac;display:flex;justify-content:space-between;margin-bottom:24px}.demo-preview-label span:last-child{color:#c9e7d2}.demo-board{position:relative;flex:1;min-height:0}.demo-board>p{font:12px var(--mono);letter-spacing:1.2px;color:#d6c094;margin:0 0 8px}.demo-board h3{font-size:clamp(23px,2.2vw,30px);line-height:1.15;letter-spacing:-1px;color:#ecf0da;margin:0 0 22px}.demo-idea{--card:var(--card-one,0);display:flex;gap:11px;align-items:center;padding:13px 12px;margin:0 0 10px;background:#233d33;border:1px solid #436251;border-radius:8px;opacity:var(--card);transform:translateY(calc((1 - var(--card))*34px));color:#dce8d6;font-size:13px;line-height:1.4}.demo-idea:nth-of-type(2){--card:var(--card-two,0)}.demo-idea:nth-of-type(3){--card:var(--card-three,0)}.demo-idea>span{color:#c6bc8f;border:1px solid #65765c;width:25px;height:25px;display:grid;place-items:center;border-radius:5px;font:11px var(--mono);flex-shrink:0}.demo-idea small{display:block;color:#a9c0ae;font-size:11px;margin-top:3px}.demo-preview-footer{padding-top:12px;font:11px var(--mono);color:#abcbb7;opacity:var(--result-glow)}.demo-preview:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 70px #a0e6c41c;opacity:var(--result-glow);pointer-events:none}.demo-status{height:28px;flex-shrink:0;background:#1b3337;border-top:1px solid #365152;font:11px var(--mono);color:#b6d4ce;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.demo-status>span:last-child{color:#849f9e}.journey.is-reduced{height:auto}.is-reduced .journey-stage{position:relative;top:0;height:740px;max-height:none}.is-reduced .journey-note,.is-reduced .journey-chapters,.is-reduced .journey-progress{display:none}.is-reduced .journey-hud{justify-content:flex-end}.is-reduced .scroll-demo{will-change:auto}.is-reduced .journey-room,.is-reduced .journey-film{display:none}
@media(max-width:1000px){.journey-caption{left:28px;top:28px}.journey-note{right:28px}.scroll-demo{left:28px;right:28px;top:210px}.journey-hud{left:28px;right:28px;gap:12px}.journey-chapters button{padding:9px 8px;font-size:13px}.journey-chapters button span{display:none}.demo-files{width:120px;padding:18px 8px}.demo-preview-inner{width:320px;padding:20px}.demo-line-number{width:42px;padding-right:12px}.demo-assistant{width:280px}.journey-caption h2{max-width:570px}.journey-note{display:none}}
@media(max-width:680px){.topbar{gap:10px}.journey-download{font-size:12px;padding:7px 9px}.journey.is-enhanced{height:510svh}.journey-stage{min-height:480px;--caption-size:32px}.journey-caption{left:20px;right:20px;top:24px}.journey-caption .eyebrow{font-size:11px;margin-bottom:9px}.journey-caption h2{letter-spacing:-1px;max-width:400px}.journey-caption p:last-child{font-size:15px;max-width:370px}.journey-film video,.journey-poster{object-position:55% center}.journey-room img{object-position:59% center}.journey-room{transform-origin:var(--room-origin,60% 52%)}.journey-hud{left:16px;right:16px;bottom:19px;flex-wrap:wrap;gap:3px;justify-content:center}.journey-chapters{flex:1 0 100%;justify-content:space-between}.journey-chapters button{font-size:12px;padding:8px 6px}.journey-skip{font-size:12px;padding:4px 0}.journey-progress{bottom:-19px}.scroll-demo{left:14px;right:14px;top:193px;bottom:91px;border-radius:9px}.demo-titlebar{height:34px;padding:0 12px}.demo-titlebar strong{font-size:11px}.demo-brand img{height:21px;width:21px}.demo-tag{font-size:9px;letter-spacing:.7px}.demo-files{display:none}.demo-editor-tab{height:32px;font-size:11px;padding:5px 12px}.demo-save{font-size:10px}.demo-code-wrap{padding-top:13px}.demo-code{font-size:12px;line-height:1.9}.demo-line-number{width:35px;padding-right:10px;font-size:10px}.demo-line{min-height:1.9em}.demo-status{font-size:10px;height:27px;padding:0 9px}.demo-status>span:last-child{display:none}.demo-assistant{right:12px;bottom:58px;width:calc(100% - 24px);padding:13px;font-size:13px}.demo-assistant-head{margin-bottom:10px}.demo-context{margin-top:10px;padding-top:8px}.demo-prompt{margin-bottom:10px}.demo-suggestion{left:12px;right:12px;font-size:10px;bottom:43px;padding:9px}.demo-preview{position:absolute;inset:0;width:100%;border-left:0;transform:translateX(calc((1 - var(--preview-open))*100%));z-index:4}.demo-preview-inner{width:100%;max-width:none;padding:20px}.demo-preview-label{margin-bottom:20px}.demo-board h3{font-size:26px;margin-bottom:19px}.demo-idea{font-size:13px;padding:12px;margin-bottom:10px}.demo-preview-footer{font-size:10px}.is-reduced .journey-stage{height:780px}.journey-stage[data-chapter="0"] .journey-caption{max-width:380px}}
@media(max-height:720px) and (min-width:681px){.journey-caption{top:19px}.journey-caption h2{font-size:min(var(--caption-size),34px);margin-bottom:8px}.journey-caption .eyebrow{margin-bottom:7px}.scroll-demo{top:159px;bottom:74px}.journey-hud{bottom:16px}.journey-progress{bottom:-16px}.demo-preview-inner{padding:15px 20px}.demo-preview-label{margin-bottom:14px}.demo-board h3{font-size:24px;margin-bottom:13px}.demo-idea{padding:9px 10px;margin-bottom:8px}.demo-preview-footer{display:none}.demo-assistant{bottom:46px;padding:14px}.demo-context{display:none}}
@media(max-height:680px) and (max-width:680px){.journey-stage{min-height:400px}.journey-caption{top:16px}.journey-caption h2{font-size:26px!important;line-height:1.1;margin-bottom:8px}.journey-caption .eyebrow{font-size:10px;margin-bottom:7px}.journey-caption p:last-child{font-size:13px;line-height:1.4}.scroll-demo{top:147px;bottom:78px}.journey-hud{bottom:12px}.journey-progress{bottom:-12px}.demo-preview-inner{padding:13px 17px}.demo-preview-label{margin-bottom:12px}.demo-board h3{font-size:23px;margin-bottom:12px}.demo-idea{padding:8px 10px;margin-bottom:7px}.demo-idea small,.demo-preview-footer{display:none}.demo-assistant{bottom:37px;padding:12px}.demo-context{display:none}.demo-reply{font-size:12px}}
@media(max-width:540px){.topbar{padding-left:16px;padding-right:16px;gap:10px}.topbar nav{gap:13px}.topbar nav .current{display:none}.journey-download{white-space:nowrap;font-size:12px;padding:7px 10px}.topbar .brand-sub{display:none}.topbar .brand{gap:7px}.topbar .brand strong{font-size:13px;letter-spacing:1px}}
@media(max-width:370px){.topbar .brand strong{display:none}.topbar nav{gap:11px}.journey-chapters{gap:0}.journey-chapters button{font-size:11px;padding:8px 3px}.demo-titlebar strong{max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-titlebar{gap:8px}}
@media(prefers-reduced-motion:reduce){.scroll-track:before{animation:none}.journey.is-enhanced{height:auto}.journey .journey-stage{position:relative;top:0}.journey-chapters{display:none}}