/* Responsive learning layouts use the actual AI Ecom component system. */
:root{--paper:#000;--ink:#f4f4f5;--blue:#a974ff;--orange:#b99bff;--quiet:#b3a8c2}
html,body{background:#000;color:#f4f4f5;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.app,.app[data-theme=paper],.app[data-theme=blue],.app[data-theme=warm],.app[data-theme=dark]{background:#000;--surface:#000;--text:#f4f4f5;--muted:#b3a8c2;--border:#302837;--button-bg:#6e4bff;--button-text:#fff}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #b99bff;outline-offset:5px}::selection{background:#8f6bff59;color:#fff}
.topbar,.bottom-bar{max-width:1660px;margin:0 auto;padding-left:48px;padding-right:48px}.wordmark img{width:160px;height:auto;display:block}.preview-tag{color:#eee}.text-button,.outline-button{color:#e5dfef}.motion-toggle{color:#b3a8c2}
.stage{border-radius:0;margin:0 auto;max-width:1640px;background:#000}
.scene,.scene[data-theme=paper],.scene[data-theme=warm],.scene[data-theme=dark],.scene[data-theme=blue]{background:#000;color:#fff;background-image:radial-gradient(ellipse at 50% 76%,#25103442,#0000 67%)}
.scene[data-theme=dark],.scene[data-theme=warm]{background-image:radial-gradient(ellipse at 55% 56%,#29133f55,#0000 62%)}
.scene[data-theme=blue]{background-image:radial-gradient(ellipse at 50% 48%,#3b19545c,#180a252f 45%,#0000 75%)}
.scene-index{color:#c7b1f2;opacity:.06;font-weight:500;letter-spacing:-.055em}
.scene .eyebrow,.scene[data-theme=warm] .eyebrow,.scene[data-theme=dark] .eyebrow,.scene[data-theme=blue] .eyebrow{color:#b9a6ff;letter-spacing:0;font-weight:400}
h1{font-size:clamp(50px,6.1vw,106px);font-weight:600;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.scene .support,.scene[data-theme=warm] .support,.scene[data-theme=dark] .support,.scene[data-theme=blue] .support{color:#c6bfce;letter-spacing:0;line-height:1.5}
.blue-ink{color:#a974ff;text-shadow:0 0 18px #925bff66}
.opening-copy{width:100%;padding-top:60px;text-align:center}.opening-copy h1{font-size:clamp(58px,6.7vw,114px);font-weight:600;letter-spacing:-.035em;max-width:100%}.opening-copy .support{margin:0 auto}.opening-copy .eyebrow{display:inline-block;margin-bottom:25px;font-size:11px;border:1px solid #9b7dff38;background:#170e238c;border-radius:999px;padding:8px 15px;letter-spacing:0}
.opening-square,.ending-square{left:50%;right:auto;top:9%;width:83px;height:83px;background:linear-gradient(180deg,#302343,#0f0a18);border:1px solid #a974ff66;border-radius:24px;box-shadow:inset 0 1px 0 #ffffff26,0 0 80px -10px #925bff66;transform:translateX(-50%)}
.opening-square::before,.ending-square::before{content:'';position:absolute;left:28px;top:32px;width:27px;height:26px;border:2px solid #c3a4ff;border-radius:4px;transform:skew(-5deg);background:linear-gradient(160deg,#a974ff22,#a974ff07)}
.opening-square::after,.ending-square::after{content:'';position:absolute;left:36px;top:23px;width:11px;height:14px;border:2px solid #c3a4ff;border-bottom:0;border-radius:9px 9px 0 0}
.opening-rail{left:18%;right:18%;bottom:17%;height:1px;background:linear-gradient(90deg,#7c5cff00,#9b7dff88 25%,#9b7dff88 75%,#7c5cff00)}.opening-rail i{width:10px;height:10px;border:1px solid #dfcaff;background:#9b7dff;box-shadow:0 0 15px #a974ff99;top:-4px}
.carry,.app[data-theme=warm] .carry,.app[data-theme=dark] .carry,.app[data-theme=blue] .carry{width:19px;height:19px;border:1px solid #a974ff66;padding:4px;background:#110a19;box-shadow:0 0 20px -5px #a974ff80}.carry i{background:#c4a1ff;box-shadow:0 0 8px #a974ff66}.transition-cover{background:#0a0511}
.ambient-frame{opacity:.08;filter:grayscale(1) blur(45px)}.scene-glow .ambient-frame,.scene-focus .ambient-frame{filter:grayscale(1) blur(40px);opacity:.14}.warm-halo{background:radial-gradient(ellipse at 50% 70%,#5a26884a,#280b0200 55%)}
.scene-glow h1{font-size:clamp(65px,7vw,127px)}.glow-star{right:13%;top:18%;font-size:clamp(50px,6vw,95px);color:#a974ff;filter:drop-shadow(0 0 25px #925bff77)}
.choice-copy{width:67%}.choice-copy h1{font-size:clamp(48px,5.5vw,96px)}.macro-letter{font-size:clamp(250px,30vw,510px);font-weight:600;opacity:.14;text-shadow:0 0 90px #925bff33}.project-options{gap:13px}.project-option{padding:17px 20px;min-height:60px;border:1px solid #ffffff14;background:linear-gradient(180deg,#ffffff09,#ffffff03);font-size:14px;color:#fff;border-radius:18px}.project-option[aria-pressed=true]{background:linear-gradient(180deg,#7c5cff24,#7c5cff08);color:#fff;border-color:#7c5cff;box-shadow:0 0 0 1px #7c5cff,0 34px 80px -34px #7c5cffa6}.project-option:hover{transform:none;border-color:#9678ff99}
.scene-prompt{gap:6%}.prompt-copy h1{font-size:clamp(52px,6.1vw,110px)}.prompt-panel{background:linear-gradient(180deg,#0c0c0e,#070708);border:1px solid #7c5cff59;border-radius:22px;padding:28px 30px;box-shadow:0 40px 90px -60px #7c5cff80,inset 0 1px 0 #ffffff0d}.prompt-panel label{font-size:10px;color:#c7b5e9;letter-spacing:0}.prompt-panel textarea{color:#fff;font-size:clamp(22px,2.05vw,36px);line-height:1.4;letter-spacing:-.45px}.prompt-panel textarea::placeholder{color:#a69aae}.prompt-meta{color:#b3a8c2}.prompt-send{background:#7c5cff;color:#fff;font-size:24px;box-shadow:inset 0 0 13px #ffffff33,0 0 25px -5px #7c5cff66}.prompt-state{color:#b3a8c2;margin:14px 0 0}
.scene-artifact h1{font-size:clamp(44px,4.5vw,84px);font-weight:500}.artifact-panel{background:linear-gradient(180deg,#120c1b,#08060d);border:1px solid #a974ff4d;color:#fff;border-radius:28px;box-shadow:0 60px 120px -75px #7c5cff66,inset 0 1px 0 #ffffff0f}.artifact-label{color:#b9a6ff}.artifact-idea{font-weight:500;font-size:clamp(36px,4.3vw,78px);line-height:1.1;letter-spacing:-.04em}.artifact-corner{color:#b99bff}
.layers-copy h1{font-size:clamp(50px,6.4vw,114px)}.sheet-stack{width:34%;height:59%;top:19%}.sheet{background:linear-gradient(155deg,#20142e,#0a0710);border:1px solid #a974ff59;border-radius:28px;box-shadow:0 20px 48px -24px #000c}.sheet:nth-child(1){background:#0a0710}.sheet:nth-child(2){background:#110c19}.sheet:nth-child(3){background:radial-gradient(ellipse at 50% 45%,#3d205457,#0c0811);color:#c9adff}.sheet small{font-weight:500;letter-spacing:-.04em;line-height:1.08;text-shadow:0 0 18px #925bff66}.sheet-rail{height:1px;background:#b99bff;opacity:.28}
.still-showcase .sheet{overflow:hidden}.still-showcase .sheet:nth-child(3){padding:0;background:#0b0712}.showcase-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}.still-motion{filter:invert(1);object-fit:cover;mix-blend-mode:normal}.still-prompt{filter:hue-rotate(260deg);object-position:40% center}.still-glow{filter:hue-rotate(245deg);object-position:62% center}.still-caption{position:absolute;bottom:8%;left:10%;padding:6px 9px;border:1px solid #a974ff33;border-radius:6px;background:#10081cdd;color:#cbbaff;font-size:9px;letter-spacing:0}
.scene-focus h1{font-size:clamp(62px,7.3vw,134px)}.focus-ring{width:46%;border-color:#a974ff4d;box-shadow:0 0 65px -35px #925bff55}.focus-ring::after{border-color:#a974ff26}.focus-dot{background:#b99bff;width:12px;height:12px;box-shadow:0 0 16px #925bff77}
.refine-copy h1{font-size:clamp(50px,5.8vw,105px)}.refine-panel{border:1px solid #a974ff88;border-radius:22px;background:linear-gradient(180deg,#100b18,#08060d);box-shadow:0 40px 90px -60px #7c5cff80,inset 0 1px 0 #ffffff0d}.refine-panel label{color:#b9a6ff}.refine-panel textarea{color:#fff;font-size:clamp(24px,2.2vw,40px)}.refine-panel textarea::placeholder{color:#a69aae}.refine-panel .prompt-state{color:#b3a8c2}.selection-handle{width:8px;height:8px;border-radius:50%;background:#c3a4ff;box-shadow:0 0 12px #925bff99}.selection-handle:nth-of-type(1){left:10px;top:10px}.selection-handle:nth-of-type(2){right:10px;top:10px}.selection-handle:nth-of-type(3){left:10px;bottom:10px}.selection-handle:nth-of-type(4){right:10px;bottom:10px}.selection-cursor{color:#b99bff}
.scene-confirmation h1{font-size:clamp(55px,6.8vw,122px)}.check-orbit{width:52%;border-color:#a974ff44}.check-mark{color:#b99bff;right:14%;top:15%;font-size:clamp(40px,4.5vw,75px);text-shadow:0 0 25px #925bff66}
.pace-word{font-weight:500;font-size:clamp(53px,6.2vw,113px);letter-spacing:-.045em;color:#968b9e}.pace-word:first-child{color:#fff}.pace-copy h1{font-size:clamp(46px,4.6vw,87px)}.pace-rail{height:1px;background:linear-gradient(90deg,#7c5cff00,#9b7dff77,#7c5cff00)}
.scene-saved h1{font-size:clamp(60px,7.5vw,141px)}.saved-control{border:1px solid #7c5cff59;background:linear-gradient(180deg,#0c0c0e,#070708);border-radius:22px;box-shadow:0 40px 90px -60px #7c5cff80,inset 0 1px 0 #ffffff0d}.saved-position{font-size:clamp(18px,2.1vw,38px)}.saved-position small{color:#b3a8c2;font-size:10px;margin-top:9px}.saved-pill{background:#6e4bff;box-shadow:inset 0 0 12px 1px #ffffff33,0 14px 26px -10px #7c5cff66;color:#fff}
.scene-ending h1{font-size:clamp(65px,7.5vw,133px)}.ending-copy{text-align:center;padding-top:70px}.ending-copy .eyebrow{padding:8px 15px;border:1px solid #333;border-radius:7px;background:#111;font-size:11px;letter-spacing:0;display:inline-block}.ending-copy .support{margin:0 auto}
.chapter{color:#cbbaff}.progress{background:#342641;border-radius:9px}.progress i{background:#b99bff}.save-dot{background:#b99bff;opacity:1;box-shadow:0 0 6px #9b7dff66}.save-state[data-failed=true] .save-dot{background:#ffa2a2}
.back-button,.proceed-button{height:56px;min-height:56px;border-radius:999px;font-size:15px;font-weight:400}.back-button{border-color:#555;background:#111;color:#fff}.proceed-button{min-width:216px;border:0;color:#fff;background:#6e4bff}.back-button:not(:disabled):hover{background:#171020;border-color:#a974ff66}.proceed-button:not(:disabled):hover{filter:brightness(1.1)}
.loader{background:linear-gradient(180deg,#100b18,#08060d);color:#fff;border:1px solid #a974ff4d;padding:21px 24px;width:270px;border-radius:18px;box-shadow:0 40px 90px -60px #7c5cff80,inset 0 1px 0 #ffffff0d}.loader-track{background:#342641;border-radius:9px}.loader-track i{background:#b99bff}.loader p{color:#b3a8c2}
dialog{border:1px solid #7c5cff59;border-radius:30px;background:linear-gradient(180deg,#0c0c0e,#070708);color:#fff;box-shadow:0 70px 150px -90px #7c5cff8c,inset 0 1px 0 #ffffff0f}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}.dialog-heading .eyebrow{color:#b9a6ff}.dialog-heading h2{font-weight:500}.close-button{border-color:#555;background:#111;color:#fff}#outline-list button{border:1px solid #ffffff14;border-radius:16px;background:linear-gradient(180deg,#ffffff09,#ffffff03);color:#fff}#outline-list button[aria-current=step]{background:linear-gradient(180deg,#7c5cff24,#7c5cff08);border-color:#7c5cff;color:#fff;box-shadow:0 0 0 1px #7c5cff}.outline-number,.outline-check{color:#cbbaff}.dialog-footnote{color:#b3a8c2}
@media(max-width:950px){.topbar,.bottom-bar{padding-left:26px;padding-right:26px}.prompt-panel{padding:22px}.project-option{padding:15px 14px;min-height:54px}}
@media(max-width:650px){.topbar{height:68px;padding:0 18px;gap:9px}.wordmark img{width:130px}.preview-tag{font-size:9px;letter-spacing:0;padding:6px 8px}.top-actions{gap:10px}.stage{margin:0}.scene{padding-left:9%;padding-right:9%}h1{font-size:clamp(43px,11.4vw,68px);line-height:1.07;letter-spacing:-.04em}.opening-copy{padding-top:70px}.opening-copy h1{font-size:clamp(49px,12.6vw,75px)}.opening-copy .eyebrow{font-size:8px;letter-spacing:0;margin-bottom:24px;padding:8px 12px}.opening-square,.ending-square{width:72px;height:72px;top:11%;border-radius:21px}.opening-square::before,.ending-square::before{left:24px;top:27px;width:24px;height:23px}.opening-square::after,.ending-square::after{left:31px;top:19px;width:11px;height:13px}.opening-rail{left:14%;right:14%;bottom:17%}.carry,.app[data-theme=blue] .carry,.app[data-theme=dark] .carry,.app[data-theme=warm] .carry{width:18px;height:18px;padding:4px;bottom:14%}.scene-glow h1{font-size:clamp(52px,13vw,75px)}.glow-star{font-size:69px;top:14%}.scene-choice{align-items:center;padding-top:12%;padding-bottom:12%}.choice-copy{width:100%}.choice-copy h1{font-size:clamp(40px,10.6vw,60px);max-width:100%}.macro-letter{font-size:285px;opacity:.1}.project-options{align-items:stretch;gap:10px}.project-option{font-size:14px;padding:17px 18px;min-height:54px;border-radius:16px}.prompt-copy h1,.refine-copy h1{font-size:clamp(40px,10.9vw,61px)}.prompt-panel{padding:23px;border-radius:22px}.prompt-panel textarea{font-size:23px;line-height:1.4;letter-spacing:-.4px}.prompt-panel textarea:focus-visible{outline-color:#b99bff}.scene-artifact h1{font-size:39px}.artifact-panel{border-radius:24px}.artifact-idea{font-size:clamp(29px,8vw,41px);line-height:1.14}.layers-copy h1{font-size:clamp(45px,11.6vw,65px)}.sheet-stack{width:41%;height:29%;top:7%;right:17%}.sheet{border-radius:19px}.sheet small{font-size:25px}.scene-focus h1{font-size:clamp(46px,11.9vw,68px)}.focus-ring{width:88%}.scene-confirmation h1{font-size:clamp(44px,11.4vw,66px)}.check-orbit{width:100%}.check-mark{font-size:48px}.pace-word{font-size:clamp(48px,13vw,68px)}.pace-copy h1{font-size:36px}.scene-saved h1{font-size:clamp(47px,12.1vw,68px)}.saved-control{border-radius:22px}.saved-position{font-size:23px}.saved-position small{font-size:9px}.scene-ending h1{font-size:clamp(52px,13.1vw,78px)}.ending-copy{padding-top:73px}.ending-copy .eyebrow{font-size:10px;padding:8px 12px;max-width:none}.bottom-bar{padding-left:18px;padding-right:18px}.back-button,.proceed-button{height:48px;min-height:48px;min-width:0;font-size:14px}.loader{width:230px;padding:18px 20px;border-radius:18px}dialog{border-radius:26px}}
@media(max-width:350px){.wordmark img{width:105px}.topbar{padding-left:15px;padding-right:15px;gap:7px}.preview-tag{font-size:8px;padding:6px}.top-actions{gap:7px}.scene{padding-left:8%;padding-right:8%}.save-state{font-size:7px}.chapter{font-size:7px}.scene-layers h1{font-size:39px}}
@media(max-height:700px) and (min-width:651px){.scene h1{font-size:clamp(45px,5.3vw,95px)}.opening-square,.ending-square{top:8%;width:66px;height:66px;border-radius:20px}.opening-square::before,.ending-square::before{left:21px;top:25px;width:24px;height:23px}.opening-square::after,.ending-square::after{left:28px;top:17px;width:11px;height:13px}.opening-copy,.ending-copy{padding-top:65px}.scene-artifact .artifact-idea{font-size:47px}}