#course09Main .academy-course-banner h1{max-width:1050px}
#course09Main .academy-course-banner-copy>p{max-width:870px}
.c9-mark span:first-child{font-size:clamp(46px,6vw,92px)}
.c9-workspace{align-items:start;background:#f4efe7}
.c9-rail{position:sticky;top:59px;max-height:calc(100vh - 59px);overflow:auto;padding:22px 16px 28px;background:#0d0e10;color:#f4efe7}
.c9-nav-head{padding:4px 4px 17px;border-bottom:1px solid #34363a}.c9-nav-head .academy-label{font-size:10px}.c9-nav-head strong{display:block;margin-top:6px;font:500 23px/1.15 Georgia,serif;color:#fff}.c9-nav-head p{margin:8px 0 0;color:#c8c4bd;font-size:13px;line-height:1.5}
.c9-term-nav{display:grid;margin-top:11px}.c9-term-nav a{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:center;padding:13px 10px;border-bottom:1px solid #292b2f;color:#f7f3ec;text-decoration:none;transition:background .14s}.c9-term-nav a:hover,.c9-term-nav a:focus-visible,.c9-term-nav a.is-active{background:#1a1c20;outline:0}.c9-term-nav a.is-active{box-shadow:inset 3px 0 0 #ef3e2f}.c9-term-nav a:focus-visible{box-shadow:inset 3px 0 0 #ffd64d}.c9-term-nav span{font-size:10px;font-weight:950;letter-spacing:.08em;color:#ffd64d}.c9-term-nav b{font-size:13px;line-height:1.3;color:#fff}
.c9-learning-column{min-width:0;background:#f4efe7;color:#181714}.c9-intro{padding:46px clamp(22px,5vw,62px) 38px;border-bottom:1px solid #d2cbc1;background:#efe7db;color:#181714}.c9-intro .academy-label{color:#625b53}.c9-intro h2{margin:10px 0 15px;font:900 clamp(54px,7vw,96px)/.88 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;color:#161514;letter-spacing:.005em}.c9-intro h2 em{font-family:Georgia,serif;font-weight:400;text-transform:none;color:#b3261e}.c9-intro p{max-width:880px;margin:0;font:400 clamp(17px,1.55vw,22px)/1.48 Georgia,serif;color:#3b3732}
.c9-terms{display:grid;gap:0}.c9-term{scroll-margin-top:78px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:0;border-bottom:1px solid #d4cdc3;background:#fbf8f2;color:#181714;min-height:420px}.c9-term:nth-child(even){background:#f3ede4}.c9-copy{padding:36px clamp(24px,4vw,54px);align-self:center}.c9-index{display:inline-block;margin-bottom:10px;font-size:10px;font-weight:950;letter-spacing:.16em;color:#b3261e}.c9-copy h3{margin:0 0 16px;font:700 clamp(31px,3vw,48px)/1.02 Georgia,serif;color:#171512}.c9-copy p{margin:9px 0;font-size:14px;line-height:1.62;color:#46413a}.c9-copy .c9-definition{font:400 clamp(18px,1.55vw,22px)/1.48 Georgia,serif;color:#211f1c}.c9-copy b{color:#171512}.c9-example{padding:11px 13px;border-left:3px solid #d5a900;background:rgba(255,255,255,.72);color:#3a352f!important}
.c9-demo{position:relative;min-height:390px;margin:22px;border:1px solid #202125;background:#101114;color:#fff;display:grid;grid-template-rows:1fr auto;overflow:hidden;isolation:isolate}.c9-demo:before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 88%);pointer-events:none}.c9-demo-label{position:absolute;z-index:8;top:13px;left:14px;padding:5px 7px;background:#ffd64d;color:#111;font-size:8px;font-weight:950;letter-spacing:.14em}.demo-caption{position:relative;z-index:5;margin:0;padding:12px 16px;border-top:1px solid #2b2d31;background:#0b0c0e;color:#c9c4bc;font-size:10px;letter-spacing:.04em}
.c9-demo>div{position:relative;z-index:2;align-self:center;justify-self:stretch;margin:52px 28px 24px}
.demo-node,.event-node,.front-box,.back-box,.local-build,.host-server,.build-v2,.live-version,.repo-box,.sdk-app,.supa-app,.supa-hub,.token-login,.protected,.public-code,.env-vault,.auth-user,.auth-lock{border:1px solid #565961;background:#181a1f;color:#fff;padding:18px 14px;text-align:center;font-size:10px;font-weight:900;letter-spacing:.08em}
/* API */.demo-api{display:grid;grid-template-columns:112px 1fr 126px;align-items:center;gap:12px}.api-bank{border:1px solid #565961;background:#181a1f;padding:16px 10px;text-align:center;min-height:80px;display:grid;align-content:center;gap:5px}.api-bank small,.api-bank span{font-size:7px;letter-spacing:.08em;color:#c8c4bd}.api-bank b{font-size:9px;color:#fff}.api-bridge{position:relative;height:92px}.api-bridge-label{position:absolute;left:50%;top:4px;transform:translateX(-50%);white-space:nowrap;font-size:8px;font-weight:950;letter-spacing:.1em;color:#ffd64d}.bridge-deck{position:absolute;left:0;right:0;top:48px;height:4px;background:#ffd64d;box-shadow:0 7px 0 -2px #565961}.api-bridge:before,.api-bridge:after{content:'';position:absolute;top:31px;width:3px;height:38px;background:#777}.api-bridge:before{left:8px}.api-bridge:after{right:8px}.api-request,.api-answer{position:absolute;top:37px;padding:4px 6px;border-radius:2px;font-size:7px;font-style:normal;font-weight:950;white-space:nowrap}.api-request{left:0;background:#ffd64d;color:#111;animation:apiBridgeOut 4.4s ease-in-out infinite}.api-answer{right:0;background:#ef3e2f;color:#fff;animation:apiBridgeBack 4.4s ease-in-out infinite}@keyframes apiBridgeOut{0%,8%{transform:translateX(0);opacity:0}14%{opacity:1}42%{transform:translateX(calc(100% + 38px));opacity:1}48%,100%{transform:translateX(calc(100% + 38px));opacity:0}}@keyframes apiBridgeBack{0%,50%{transform:translateX(0);opacity:0}57%{opacity:1}86%{transform:translateX(calc(-100% - 38px));opacity:1}92%,100%{transform:translateX(calc(-100% - 38px));opacity:0}}
/* API key */.demo-key{display:grid;grid-template-columns:105px 1fr 130px;align-items:center;gap:10px}.key-source{border:1px solid #565961;background:#181a1f;padding:15px 10px;text-align:center;display:grid;justify-items:center;gap:7px}.key-source small,.api-door small{font-size:7px;letter-spacing:.08em;color:#c8c4bd}.key-source b{font-size:8px}.key-shape{position:relative;width:25px;height:6px;background:#ffd64d}.key-shape:before{content:'';position:absolute;width:10px;height:10px;border:3px solid #ffd64d;border-radius:50%;left:-11px;top:-5px}.key-shape:after{content:'';position:absolute;right:3px;bottom:-5px;width:4px;height:6px;border-right:3px solid #ffd64d;border-bottom:3px solid #ffd64d}.key-path{height:2px;background:#494c52;position:relative}.key-path:after{content:'RIGHT KEY';position:absolute;left:50%;top:11px;transform:translateX(-50%);font-size:6px;letter-spacing:.08em;color:#c8c4bd;white-space:nowrap}.key-fly{position:absolute;left:0;top:-13px;padding:5px 6px;background:#ffd64d;color:#111;font-size:7px;font-weight:950;animation:keyToDoor 4s ease-in-out infinite}.api-door{text-align:center}.door-frame{position:relative;height:92px;margin-top:6px;border:2px solid #777;background:#0a0b0d;perspective:180px;overflow:hidden}.door-frame>strong{position:absolute;inset:0;display:grid;place-items:center;color:#8ce99a;font-size:10px;letter-spacing:.08em}.door-panel{position:absolute;z-index:2;inset:0;background:#272a30;border-left:4px solid #3b3e45;display:grid;place-items:center;align-content:center;gap:7px;transform-origin:right center;animation:apiDoorOpen 4s ease-in-out infinite}.door-panel b{font-size:8px}.door-lock{width:14px;height:12px;border:2px solid #ffd64d;position:relative}.door-lock:before{content:'';position:absolute;width:8px;height:8px;border:2px solid #ffd64d;border-bottom:0;border-radius:7px 7px 0 0;left:1px;top:-9px}@keyframes keyToDoor{0%,10%{left:0;opacity:0}20%{opacity:1}56%{left:calc(100% - 28px);opacity:1}64%,100%{opacity:0}}@keyframes apiDoorOpen{0%,55%,100%{transform:rotateY(0)}68%,88%{transform:rotateY(-72deg)}}
/* webhook */.demo-webhook{display:grid;grid-template-columns:120px 1fr 120px;align-items:center;gap:10px}.event-node span{display:block;margin-top:7px;color:#ffd64d}.event-flash{animation:eventFlash 3s ease-in-out infinite}.hook-line{height:2px;background:#4e5157;position:relative}.hook-pulse{position:absolute;width:12px;height:12px;top:-5px;border-radius:50%;background:#ef3e2f;box-shadow:0 0 18px #ef3e2f;animation:webhookMove 3s ease-in-out infinite}.app-event span{color:#8ce99a;animation:receiveFlash 3s ease-in-out infinite}@keyframes eventFlash{0%,12%,100%{opacity:.25}24%,70%{opacity:1}}@keyframes webhookMove{0%,28%{left:0;opacity:0}36%{opacity:1}68%{left:calc(100% - 12px);opacity:1}74%,100%{opacity:0}}@keyframes receiveFlash{0%,66%,100%{opacity:.18}76%,90%{opacity:1}}
/* endpoint */.demo-endpoint{display:grid;grid-template-columns:1fr 150px;align-items:center;gap:45px}.endpoint-request{position:relative;border:1px solid #555;padding:16px;font-size:9px;text-align:center}.endpoint-request i{position:absolute;width:12px;height:12px;border-radius:50%;background:#ffd64d;right:-7px;top:50%;animation:endpointRoute 3s ease-in-out infinite}.endpoint-stack{display:grid;gap:10px}.endpoint-stack span{border:1px solid #444;padding:11px;color:#c8c4bd;text-align:center;font:700 10px monospace}.endpoint-stack .target{border-color:#ef3e2f;color:#fff;animation:endpointTarget 3s ease-in-out infinite}@keyframes endpointRoute{0%,15%{transform:translate(0,-50%);opacity:0}25%{opacity:1}66%{transform:translate(78px,-50%);opacity:1}74%,100%{opacity:0}}@keyframes endpointTarget{0%,54%,100%{background:transparent}66%,84%{background:#6d1e19}}
/* database */.demo-db{display:grid;grid-template-columns:100px 1fr 92px;gap:18px;align-items:center}.db-app,.db-find{position:relative;border:1px solid #565961;background:#181a1f;padding:16px 9px;text-align:center;display:grid;gap:7px;align-content:center;min-height:88px}.db-app small,.db-find small,.db-cabinet small{font-size:7px;letter-spacing:.08em;color:#c8c4bd}.db-app b,.db-find b{font-size:8px}.db-record{position:absolute;right:-12px;top:50%;padding:5px 6px;background:#ffd64d;color:#111;font-size:6px;font-weight:950;white-space:nowrap;animation:dbFileAway 5.2s ease-in-out infinite}.db-cabinet{position:relative;border:2px solid #777;background:#15171b;padding:10px 8px;display:grid;gap:6px;text-align:center}.db-cabinet>strong{font-size:9px;color:#ffd64d}.db-cabinet>small{margin-bottom:2px}.db-drawer{position:relative;border:1px solid #4b4e54;background:#25282e;padding:8px 5px;font-size:7px;letter-spacing:.06em;color:#c8c4bd;box-shadow:inset 0 -3px 0 #15171b}.db-profiles{color:#fff;animation:drawerOpen 5.2s ease-in-out infinite}.db-folder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 6px;background:#ffd64d;color:#111;font-size:6px;font-style:normal;opacity:0;animation:folderStored 5.2s ease-in-out infinite}.db-return{display:block;padding:5px 4px;border:1px solid #8ce99a;color:#8ce99a;font-size:7px;opacity:0;animation:dbFound 5.2s ease-in-out infinite}@keyframes dbFileAway{0%,10%{transform:translate(0,-50%);opacity:0}18%{opacity:1}42%{transform:translate(120px,-50%);opacity:1}48%,100%{transform:translate(120px,-50%);opacity:0}}@keyframes drawerOpen{0%,34%,100%{transform:translateX(0);border-color:#4b4e54}44%,70%{transform:translateX(7px);border-color:#ffd64d}}@keyframes folderStored{0%,40%,100%{opacity:0}50%,72%{opacity:1}}@keyframes dbFound{0%,62%,100%{opacity:0;transform:translateX(10px)}73%,92%{opacity:1;transform:translateX(0)}}
/* auth */.demo-auth{display:grid;grid-template-columns:110px 1fr 120px;gap:24px;align-items:center}.auth-user span{display:block;margin-top:8px;color:#ffd64d}.auth-check{height:2px;background:#555;position:relative;text-align:center}.auth-check i{position:absolute;width:12px;height:12px;border-radius:50%;background:#ffd64d;top:-5px;left:0;animation:authMove 3.4s ease-in-out infinite}.auth-check b{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:8px;color:#dedad2}.auth-lock span{display:block;color:#c8c4bd}.auth-lock b{display:block;color:#8ce99a;margin-top:8px;animation:authOpen 3.4s ease-in-out infinite}@keyframes authMove{0%,12%{left:0;opacity:0}24%{opacity:1}64%{left:calc(100% - 12px);opacity:1}72%,100%{opacity:0}}@keyframes authOpen{0%,57%,100%{opacity:.1}68%,88%{opacity:1}}
/* front/back */.demo-frontback{display:grid;grid-template-columns:140px 1fr 140px;gap:15px;align-items:center}.front-box,.back-box{display:grid;align-content:center;gap:6px;min-height:105px}.front-box small,.back-box small{font-size:7px;color:#ffd64d;letter-spacing:.09em}.front-box span,.back-box span{display:block;margin:0;color:#bbb;font-size:7px}.front-action,.back-action{display:inline-block;margin:3px auto 0;padding:6px 8px;border:1px solid #666;background:#0f1012;color:#fff;font-size:7px;font-style:normal;letter-spacing:.06em}.back-box strong{font-size:8px;color:#8ce99a;opacity:.12;animation:backSaved 4.4s ease-in-out infinite}.fb-line{height:2px;background:#555;position:relative}.fb-line span{position:absolute;left:50%;top:-28px;transform:translateX(-50%);font-size:6px;letter-spacing:.08em;color:#dedad2;white-space:nowrap}.fb-line:before{content:'';position:absolute;left:50%;top:-38px;width:1px;height:78px;background:#777}.fb-line i{position:absolute;width:10px;height:10px;border-radius:50%;top:-4px}.fb-out{background:#ffd64d;animation:fbOut 4.4s ease-in-out infinite}.fb-back{background:#8ce99a;animation:fbBack 4.4s ease-in-out infinite}@keyframes fbOut{0%,10%{left:0;opacity:0}18%{opacity:1}45%{left:calc(100% - 10px);opacity:1}52%,100%{opacity:0}}@keyframes fbBack{0%,58%{right:0;opacity:0}65%{opacity:1}88%{right:calc(100% - 10px);opacity:1}95%,100%{opacity:0}}@keyframes backSaved{0%,48%,100%{opacity:.12}58%,86%{opacity:1}}
/* env */.demo-env{display:grid;grid-template-columns:132px 1fr 145px;gap:13px;align-items:center}.public-code,.env-vault{display:grid;align-content:center;gap:7px;min-height:105px}.public-code small,.env-vault small{font-size:6px;color:#ffd64d;letter-spacing:.08em}.public-code span,.env-vault span{display:block;margin:0;color:#c8c4bd;font-size:7px}.env-vault{border-color:#8ce99a;position:relative}.env-vault:before{content:'LOCKED';position:absolute;right:6px;top:6px;font-size:6px;color:#8ce99a;letter-spacing:.08em}.secret-var{color:#8ce99a!important;font-family:monospace}.env-bridge{height:2px;background:#555;position:relative}.env-bridge i{position:absolute;top:-12px;padding:4px 5px;font-size:6px;font-style:normal;font-weight:900;white-space:nowrap}.env-request{left:0;background:#ffd64d;color:#111;animation:envAsk 4.6s ease-in-out infinite}.env-result{right:0;background:#8ce99a;color:#101114;animation:envReturn 4.6s ease-in-out infinite}@keyframes envAsk{0%,10%{transform:translateX(0);opacity:0}18%{opacity:1}48%{transform:translateX(calc(100% - 45px));opacity:1}54%,100%{opacity:0}}@keyframes envReturn{0%,56%{transform:translateX(0);opacity:0}64%{opacity:1}88%{transform:translateX(calc(-100% + 45px));opacity:1}95%,100%{opacity:0}}
/* json */.demo-json{display:grid;grid-template-columns:120px 35px 1fr;gap:12px;align-items:center}.json-loose{display:grid;gap:8px}.json-loose span{padding:8px;border:1px solid #444;text-align:center;font-size:9px}.json-arrow{color:#ffd64d;font-size:24px;text-align:center}.json-box{margin:0;padding:18px;background:#0a0b0d;border:1px solid #444;font:10px/1.75 monospace;color:#ddd}.json-box i{display:block;font-style:normal;color:#ffd64d;opacity:.25}.json-box i:nth-child(2){animation:jsonField 3.6s .2s infinite}.json-box i:nth-child(3){animation:jsonField 3.6s .7s infinite}.json-box i:nth-child(4){animation:jsonField 3.6s 1.2s infinite}@keyframes jsonField{0%,12%,88%,100%{opacity:.2;transform:translateX(-7px)}28%,72%{opacity:1;transform:translateX(0)}}
/* schema */.demo-schema{display:grid;grid-template-columns:1fr;gap:14px}.schema-plan{display:grid;grid-template-columns:1.2fr 1.5fr 1fr;border:1px solid #555}.schema-plan b{grid-column:1/4;padding:8px;background:#1a1c20;color:#ffd64d;font-size:9px}.schema-plan span{padding:12px 8px;border-top:1px solid #444;border-right:1px solid #444;font-size:8px}.schema-record{display:grid;grid-template-columns:1.2fr 1.5fr 1fr}.schema-record i{padding:12px 8px;border:1px solid #444;font-style:normal;font-size:8px;color:#8ce99a;animation:schemaFit 3.6s infinite}.schema-record i:nth-child(2){animation-delay:.35s}.schema-record i:nth-child(3){animation-delay:.7s}@keyframes schemaFit{0%,15%,85%,100%{transform:translateY(18px);opacity:.15}35%,70%{transform:translateY(0);opacity:1}}
/* host */.demo-host{display:grid;grid-template-columns:110px 1fr 110px 70px;gap:12px;align-items:center}.host-upload{height:2px;background:#555;position:relative}.host-upload i{position:absolute;width:12px;height:12px;border-radius:50%;background:#ffd64d;top:-5px;animation:hostMove 3.5s ease-in-out infinite}.host-server{position:relative}.live-dot{display:block;margin-top:8px;color:#8ce99a;animation:livePulse 1.4s ease-in-out infinite}.host-users{display:flex;gap:6px;justify-content:center}.host-users i{width:10px;height:10px;border-radius:50%;background:#ef3e2f;animation:userReach 3.5s ease-in-out infinite}.host-users i:nth-child(2){animation-delay:.25s}.host-users i:nth-child(3){animation-delay:.5s}@keyframes hostMove{0%,12%{left:0;opacity:0}22%{opacity:1}60%{left:calc(100% - 12px);opacity:1}68%,100%{opacity:0}}@keyframes livePulse{50%{opacity:.35}}@keyframes userReach{0%,58%{transform:translateX(20px);opacity:.1}72%,100%{transform:translateX(0);opacity:1}}
/* deploy */.demo-deploy{display:grid;grid-template-columns:100px 1fr 120px;gap:18px;align-items:center}.build-v2,.live-version{border:1px solid #555;padding:20px;text-align:center;font-size:9px}.build-v2 b{color:#ffd64d}.deploy-track{height:2px;background:#555;position:relative}.deploy-track i{position:absolute;top:-12px;left:0;padding:5px 7px;background:#ffd64d;color:#111;font-size:8px;font-style:normal;font-weight:950;animation:deployMove 4s ease-in-out infinite}.live-version span{display:block;color:#8ce99a;font-size:8px}.live-version b{display:block;margin-top:7px}.v1{animation:v1hide 4s infinite}.v2{position:absolute;opacity:0;animation:v2show 4s infinite}@keyframes deployMove{0%,15%{left:0;opacity:0}25%{opacity:1}58%{left:calc(100% - 25px);opacity:1}66%,100%{opacity:0}}@keyframes v1hide{0%,60%{opacity:1}70%,100%{opacity:0}}@keyframes v2show{0%,63%{opacity:0}73%,100%{opacity:1;color:#ffd64d}}
/* repo */.demo-repo{display:grid;grid-template-columns:120px 1fr 120px;gap:15px;align-items:center}.repo-files{display:grid;gap:7px}.repo-files span{border:1px solid #444;padding:9px;font:9px monospace}.repo-arrow{height:2px;background:#555;position:relative}.repo-arrow i{position:absolute;left:0;top:-11px;padding:4px 6px;background:#ffd64d;color:#111;font-size:7px;font-style:normal;font-weight:950;animation:repoCommit 3.5s ease-in-out infinite}.repo-box{position:relative;min-height:70px}.commit{position:absolute;bottom:10px;color:#8ce99a;opacity:.2}.c1{left:22px}.c2{left:48px}.c3{left:74px}.c2{animation:commitPop 3.5s .4s infinite}.c3{animation:commitPop 3.5s .8s infinite}@keyframes repoCommit{0%,12%{left:0;opacity:0}22%{opacity:1}62%{left:calc(100% - 36px);opacity:1}70%,100%{opacity:0}}@keyframes commitPop{0%,45%,100%{opacity:.2}58%,88%{opacity:1}}
/* SDK */.demo-sdk{display:grid;grid-template-columns:155px 1fr;gap:48px;align-items:center}.sdk-kit{position:relative;border:2px solid #777;border-top:14px solid #777;background:#17191d;padding:24px 10px 11px;display:grid;grid-template-columns:1fr;gap:7px;text-align:center}.sdk-kit:before{content:'';position:absolute;width:58px;height:18px;border:3px solid #777;border-bottom:0;border-radius:8px 8px 0 0;left:50%;top:-32px;transform:translateX(-50%)}.sdk-kit small{position:absolute;top:4px;left:0;right:0;font-size:6px;letter-spacing:.09em;color:#ffd64d}.sdk-kit b{font-size:7px;color:#fff;margin-bottom:2px}.sdk-kit span{padding:8px;background:#ffd64d;color:#111;font-size:7px;font-weight:950;text-align:center;animation:sdkToolOut 5s ease-in-out infinite}.sdk-kit span:nth-of-type(2){animation-delay:.35s}.sdk-kit span:nth-of-type(3){animation-delay:.7s}.sdk-app{position:relative;min-height:122px;display:grid;align-content:center;justify-items:center;gap:8px}.sdk-app small{font-size:6px;color:#c8c4bd;letter-spacing:.08em}.sdk-app b{font-size:10px}.sdk-app strong{font-size:7px;color:#8ce99a;opacity:.15;animation:sdkReady 5s ease-in-out infinite}.sdk-app .slot{position:absolute;left:-28px;width:30px;height:14px;border:1px dashed #777}.s1{top:35px}.s2{top:58px}.s3{top:81px}@keyframes sdkToolOut{0%,12%,88%,100%{transform:translateX(0);opacity:.35}35%,70%{transform:translateX(58px);opacity:1}}@keyframes sdkReady{0%,48%,100%{opacity:.15}62%,86%{opacity:1}}
/* supabase */.demo-supabase{display:grid;grid-template-columns:110px 130px 1fr;gap:26px;align-items:center}.supa-hub{position:relative;border-color:#3ecf8e}.supa-hub b{color:#3ecf8e}.supa-pulse{position:absolute;width:12px;height:12px;border-radius:50%;background:#3ecf8e;left:-28px;top:50%;animation:supaMove 3s ease-in-out infinite}.supa-services{display:grid;gap:8px}.supa-services span{padding:9px;border:1px solid #444;font-size:8px;color:#ddd;animation:supaService 4.2s infinite}.supa-services span:nth-child(2){animation-delay:.5s}.supa-services span:nth-child(3){animation-delay:1s}@keyframes supaMove{0%,10%{transform:translateX(-55px);opacity:0}25%{opacity:1}58%{transform:translateX(30px);opacity:1}68%,100%{opacity:0}}@keyframes supaService{0%,28%,88%,100%{border-color:#444;color:#ddd}42%,65%{border-color:#3ecf8e;color:#3ecf8e}}
/* token */.demo-token{display:grid;grid-template-columns:125px 1fr 135px;gap:15px;align-items:center}.token-login,.protected{display:grid;align-content:center;gap:6px;min-height:100px}.token-login small,.protected small{font-size:6px;color:#ffd64d;letter-spacing:.08em}.token-login b{font-size:9px}.token-login span,.protected span{font-size:7px;color:#c8c4bd}.token-track{height:2px;background:#555;position:relative}.token-track>span{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:6px;letter-spacing:.08em;color:#dedad2;white-space:nowrap}.token-pass{position:absolute;left:0;top:-13px;padding:6px 7px;border-radius:10px;background:#ffd64d;color:#111;font-size:6px;font-style:normal;font-weight:950;white-space:nowrap;animation:tokenPassMove 4.6s ease-in-out infinite}.token-check{position:absolute;right:-2px;top:-11px;width:18px;height:18px;border:2px solid #777;border-radius:50%;background:#101114}.token-check:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#8ce99a;font-size:9px;opacity:0;animation:tokenCheck 4.6s ease-in-out infinite}.protected b{display:block;margin:0;color:#8ce99a;opacity:.12;animation:tokenAccess 4.6s ease-in-out infinite}@keyframes tokenPassMove{0%,10%{left:0;opacity:0}18%{opacity:1}60%{left:calc(100% - 58px);opacity:1}68%,100%{opacity:0}}@keyframes tokenCheck{0%,54%,100%{opacity:0}63%,82%{opacity:1}}@keyframes tokenAccess{0%,62%,100%{opacity:.12}74%,92%{opacity:1}}
.c9-finish{margin:28px;padding:28px;border:1px solid #d2cbc1;background:#fff8e8;color:#181714}.c9-finish .academy-label{color:#625b53}.c9-finish h3{margin:8px 0 10px;font:700 clamp(28px,3vw,42px)/1.08 Georgia,serif;color:#181714}.c9-finish p{max-width:900px;margin:0;font-size:14px;line-height:1.65;color:#454038}
@media(max-width:1050px){.c9-term{grid-template-columns:1fr}.c9-demo{min-height:330px;margin-top:0}.c9-copy{padding-bottom:22px}}
@media(max-width:900px){.c9-rail{position:static;max-height:none;padding:18px 16px}.c9-term-nav{grid-template-columns:1fr 1fr}.c9-term-nav a:nth-child(odd){border-right:1px solid #292b2f}.c9-intro{padding:40px 22px 32px}}
@media(max-width:620px){.c9-term-nav{grid-template-columns:1fr}.c9-term-nav a:nth-child(odd){border-right:0}.c9-copy{padding:28px 18px}.c9-demo{margin:0 14px 18px;min-height:310px}.c9-demo>div{margin-left:14px;margin-right:14px;transform:scale(.9);transform-origin:center}.demo-api,.demo-webhook,.demo-auth,.demo-frontback,.demo-host,.demo-deploy,.demo-repo,.demo-supabase,.demo-token{grid-template-columns:90px 1fr 95px;gap:7px}.demo-api{grid-template-columns:92px 1fr 98px}.demo-host{grid-template-columns:75px 1fr 80px 45px}.demo-key{grid-template-columns:86px 1fr 98px}.demo-db{grid-template-columns:82px 1fr 78px;gap:10px}.demo-env{grid-template-columns:95px 1fr 105px;gap:7px}.demo-endpoint{grid-template-columns:1fr 115px;gap:18px}.demo-json{grid-template-columns:90px 20px 1fr}.demo-sdk{grid-template-columns:112px 1fr;gap:26px}.c9-intro h2{font-size:clamp(48px,15vw,72px)}.c9-finish{margin:18px;padding:22px}}
@media(prefers-reduced-motion:reduce){.c9-demo *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* Root navigation geometry: the final term must have enough document height to reach the same reading line as every earlier term. */
.c9-term-last{min-height:calc(100vh - 78px)}

/* Builder School closing blueprint statement — final message after Course 9 */
.c9-blueprint-message{position:relative;isolation:isolate;overflow:hidden;margin:28px;padding:clamp(34px,5vw,62px);border:1px solid #3a3733;border-top:8px solid #d7332d;background:#0f0f0f;color:#fffdf8;box-shadow:0 18px 46px rgba(0,0,0,.18)}
.c9-blueprint-message:after{content:'OWN';position:absolute;right:-.02em;bottom:-.18em;z-index:-1;font-family:var(--display,Impact,sans-serif);font-size:clamp(105px,18vw,230px);line-height:.8;letter-spacing:.01em;color:rgba(255,255,255,.035);pointer-events:none}
.c9-blueprint-message h2{max-width:980px;margin:0;font-family:Georgia,var(--serif,serif);font-size:clamp(32px,4.4vw,62px);font-weight:700;line-height:1.04;letter-spacing:0;text-transform:none;color:#fffdf8}
.c9-blueprint-message p{max-width:980px;margin:22px 0 0;font-family:var(--sans,Arial,sans-serif);font-size:clamp(17px,1.7vw,24px);font-weight:850;line-height:1.35;letter-spacing:-.01em;color:#ff6258}
@media(max-width:620px){.c9-blueprint-message{margin:18px 14px 24px;padding:30px 22px;border-top-width:6px}.c9-blueprint-message h2{font-size:clamp(30px,9vw,44px)}.c9-blueprint-message p{font-size:17px;line-height:1.42}.c9-blueprint-message:after{font-size:112px}}