:root{--ink:#182127;--muted:#6b7779;--orange:#f66b45;--orange-deep:#df5634;--cream:#f7f7f4;--line:#e6e9e6;--dark:#10262c;--teal:#1c6b67;--white:#fff;--radius:18px;--shadow:0 16px 45px rgba(21,37,38,.055)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f9aa8c;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.5}
.app-shell{min-height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr)}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:30px 18px 22px;display:flex;flex-direction:column;min-height:100vh}
.brand{display:block;padding:0 13px 51px}.brand img{width:152px;height:auto;display:block}
.sidebar-group-label,.section-kicker,.aside-kicker,.mode-index,.eyebrow,.stage-label,.prompt-kicker{font-size:10px;font-weight:800;letter-spacing:.15em}
.sidebar-group-label{color:#a4acad;padding:0 17px 11px}
.side-nav{display:grid;gap:5px}.nav-item{width:100%;background:transparent;border:0;color:#6a7778;display:flex;align-items:center;gap:13px;text-align:left;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:650;transition:.2s}
.cpp-nav-link{text-decoration:none}.cpp-home-link{display:flex;align-items:center;gap:15px;margin-top:17px;padding:18px 21px;border:1px solid #d8e9e3;border-radius:15px;background:#eff7f3;color:#174e4d;text-decoration:none}.cpp-home-link:hover{border-color:#8dbbb0;background:#e7f4ed}.cpp-home-icon{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:#cce9db;color:#197c6c;display:grid;place-items:center;font-size:23px}.cpp-home-link>span:nth-child(2){flex:1}.cpp-home-link strong,.cpp-home-link small{display:block}.cpp-home-link strong{font-size:14px}.cpp-home-link small{font-size:11px;color:#64807a;margin-top:4px}.cpp-home-link b{font-size:21px;color:#ee6a45}
.nav-item:hover{background:#f6f8f6;color:var(--ink)}.nav-item.is-active{background:#fff1eb;color:#e35c36}.nav-icon{font-size:20px;font-weight:500;width:23px;text-align:center;line-height:1}
.sidebar-spacer{flex:1}.sidebar-note{border:1px solid #f4dfd5;background:#fffbf8;padding:16px;border-radius:14px;position:relative}.sidebar-note .small-dot{display:inline-block;margin-right:7px}.sidebar-note strong{font-size:12px}.sidebar-note p{font-size:11px;line-height:1.5;color:#798182;margin:7px 0 0}.sidebar-bottom{padding:22px 4px 0;color:#a8b0ae;font-size:10px;font-weight:700;letter-spacing:.12em}
.main-wrap{min-width:0;display:flex;flex-direction:column}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 43px;background:#fbfcfa}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;color:#889294}.breadcrumb strong{color:#364347;font-weight:650}.breadcrumb-sep{color:#bec5c4}.topbar-right{display:flex;align-items:center;gap:21px}.demo-pill{font-size:11px;font-weight:700;color:#537a6b;display:flex;align-items:center;gap:8px}.small-dot,.live-dot{display:inline-block;width:7px;height:7px;background:#6cb593;border-radius:50%;box-shadow:0 0 0 4px rgba(108,181,147,.15)}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#dce8e2;color:#306257;font-weight:800;font-size:12px}.mobile-brand{display:none}
main{width:min(1400px,100%);margin:0 auto;padding:38px 43px 70px;flex:1}.view{display:none}.view.is-visible{display:block}
h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.045em}p{line-height:1.6}
.home-hero{display:grid;grid-template-columns:51% 49%;min-height:390px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.hero-copy{padding:48px 48px 38px;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{display:flex;align-items:center;gap:10px;color:#ec6c46}.eyebrow-line{width:17px;height:2px;background:#ed6c45}.hero-copy h1{font-size:clamp(34px,3.5vw,59px);line-height:1.07;max-width:600px;margin:26px 0 19px;font-weight:760}.hero-copy h1 em{font-style:normal;color:#f26743}.hero-copy p{color:#687579;font-size:15px;line-height:1.65;max-width:480px;margin-bottom:22px}.hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:13px 18px;font-size:13px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:18px;white-space:nowrap;min-height:44px;transition:transform .18s,background .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px)}.btn-primary{color:white;background:var(--orange);box-shadow:0 7px 16px rgba(246,107,69,.18)}.btn-primary:hover{background:var(--orange-deep)}.btn-plain{background:transparent;color:var(--ink)}.btn-plain:hover{background:#f6f7f5}.hero-quick{margin-top:auto;padding-top:21px;display:flex;align-items:center;gap:8px;color:#8b9696;font-size:11px;font-weight:550}.hero-quick-icon{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#e4f4e8;color:#4b9a70;font-size:10px;font-weight:900}
.hero-visual{position:relative;min-height:390px;overflow:hidden;background:#cbd8d8}.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;position:absolute;inset:0}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,25,29,.28),transparent 28%,transparent 60%,rgba(7,24,29,.62))}.hero-visual-top{position:absolute;top:22px;left:22px;z-index:2;color:white;font-size:10px;font-weight:800;letter-spacing:.11em;display:flex;align-items:center;gap:11px}.hero-visual-bottom{position:absolute;z-index:2;bottom:23px;left:23px;right:23px;display:flex;align-items:center;gap:15px;color:#fff}.road-mark{width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:17px}.road-mark span{display:none}.hero-visual-bottom strong{display:block;font-size:14px}.hero-visual-bottom small{display:block;font-size:11px;color:#d6e0dc;margin-top:3px}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin:42px 0 18px}.section-kicker{color:#f26743}.section-heading h2{font-size:26px;margin:7px 0 0}.section-aside{font-size:12px;color:#93a09e;padding-bottom:4px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.mode-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:0;min-height:290px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 7px 25px rgba(30,50,50,.025);transition:transform .2s,box-shadow .2s,border-color .2s}.mode-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#f0c9bb}.mode-top{display:flex;justify-content:space-between;align-items:center;padding:19px 22px 8px}.mode-index{color:#9eaaa9}.mode-arrow{width:29px;height:29px;border:1px solid #e5eae7;border-radius:50%;display:grid;place-items:center;color:#70807c;font-size:15px}.mode-art{height:105px;margin:0 22px;border-radius:10px;overflow:hidden;position:relative}.map-art{background:#edf2ee}.map-art svg{width:100%;height:100%}.sim-art{background:#dce9e6}.sim-art-road{position:absolute;left:24%;right:19%;top:-20px;bottom:-20px;transform:perspective(120px) rotateX(20deg);background:#58696c;border-left:15px solid #bdcfc5;border-right:15px solid #bdcfc5}.sim-art-road:after{content:"";position:absolute;width:3px;height:100%;background:repeating-linear-gradient(to bottom,#fff 0 10px,transparent 10px 22px);left:50%;top:0}.sim-art-crossing{position:absolute;top:50%;left:27%;right:22%;height:25px;transform:skewY(-9deg);background:repeating-linear-gradient(to right,#fff 0 16px,transparent 16px 31px)}.sim-art-person{position:absolute;top:22%;left:67%;font-size:20px;color:#fd714b;z-index:2}.sim-art-person i{display:block;width:7px;height:27px;background:#fd714b;position:relative;left:6px;border-radius:4px}.sim-art-car{position:absolute;top:17%;left:41%;color:#f86c44;font-size:35px;z-index:3}.mode-content{display:grid;grid-template-columns:36px 1fr;gap:0 13px;padding:20px 23px 22px}.mode-symbol{grid-row:1/4;width:34px;height:34px;border-radius:9px;background:#fff0e9;color:#ec6742;display:grid;place-items:center;font-size:20px}.mode-card-explore .mode-symbol{background:#e6f3ef;color:#397b70}.mode-content strong{font-size:17px;line-height:1.2;letter-spacing:-.025em}.mode-content>span:nth-of-type(2){font-size:12px;color:#7c8b8b;line-height:1.45;margin-top:6px}.mode-link{font-size:11px;color:#e66543;font-weight:800;margin-top:15px}.mode-link b{font-size:15px;margin-left:4px}.home-footnote{display:flex;gap:10px;align-items:center;color:#9aa4a3;font-size:11px;line-height:1.5;margin-top:18px}.footnote-icon{flex:none;width:17px;height:17px;border-radius:50%;border:1px solid #bec8c5;display:grid;place-items:center;font-size:10px;font-weight:800}
.page-heading{display:flex;align-items:start;justify-content:space-between;gap:24px;margin:2px 0 29px}.page-heading h1{font-size:clamp(28px,3vw,39px);margin:9px 0 8px;line-height:1.15}.page-heading p{font-size:13px;color:#7a8888;max-width:620px;margin:0}.feature-badge{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid #e7e9e5;background:#fff;border-radius:8px;white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.06em;color:#60726f}
.drive-layout{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:18px}.drive-main,.simulation-main{min-width:0}.drive-stage,.simulation-stage{height:clamp(360px,42vw,560px);position:relative;background:#aebebc;border-radius:18px;overflow:hidden;isolation:isolate;box-shadow:var(--shadow)}.stage-image{position:absolute;inset:0;background-image:url('./assets/driving-scene.png');background-size:cover;background-position:center;transition:transform .85s ease,background-position .85s ease}.explore-stage .stage-image{transform:scale(var(--drive-scale,1)) translateX(var(--drive-shift,0%))}.stage-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,18,22,.23),transparent 25%,transparent 57%,rgba(2,18,22,.58))}.stage-top{z-index:4;position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:8px}.stage-label,.stage-place{padding:8px 10px;border-radius:6px;color:#fff;background:rgba(13,30,32,.62);backdrop-filter:blur(9px)}.stage-label{font-size:9px}.stage-place{font-size:10px;font-weight:700}.stage-center-hint{position:absolute;z-index:4;top:51%;left:50%;transform:translate(-50%,-50%);text-align:center;background:rgba(255,255,255,.94);padding:12px 16px;border-radius:9px;color:#3c5150;font-weight:750;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);white-space:nowrap;transition:opacity .25s}.stage-center-hint.is-hidden{opacity:0;pointer-events:none}.windshield-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 80px rgba(4,22,24,.12)}.stage-dashboard{position:absolute;z-index:4;bottom:18px;left:18px;right:18px;height:64px;display:flex;align-items:center;gap:18px;color:white;background:rgba(12,32,37,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.17);border-radius:11px;padding:9px 20px}.dashboard-left,.dashboard-right{display:flex;flex-direction:column;gap:2px}.dashboard-left>span,.dashboard-right>span{font-size:8px;font-weight:800;letter-spacing:.12em;color:#b2c4c5}.dashboard-left strong{font-size:26px;line-height:1}.dashboard-left small{font-size:9px;font-weight:500;margin-left:5px}.dashboard-right strong{font-size:13px}.dashboard-divider{width:1px;height:30px;background:rgba(255,255,255,.2)}.dash-route{margin-left:auto;font-size:10px;letter-spacing:.12em;color:#b4c3c3;font-weight:800}
.drive-controls{margin-top:14px;background:white;border:1px solid var(--line);border-radius:15px;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:15px}.controls-label{display:flex;flex-direction:column;gap:4px}.controls-label strong{font-size:13px}.controls-label span{font-size:10px;color:#9aa4a3}.control-buttons{display:flex;gap:7px}.control-btn{border:1px solid #e5e9e6;background:#f9faf8;color:#485856;border-radius:9px;min-width:79px;min-height:43px;padding:7px 12px;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;transition:.18s}.control-btn span{font-size:11px;font-weight:700}.control-btn:hover{background:#eaf0ec;transform:translateY(-2px)}.control-forward{background:#1b4d4d;color:#fff;border-color:#1b4d4d}.control-forward:hover{background:#256563}.control-brake{background:#fff3ec;color:#e35e3e;border-color:#fbdcd0}.control-brake:hover{background:#ffe9db}.drive-aside{display:flex;flex-direction:column;gap:15px}.aside-card,.lesson-panel,.decision-panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;box-shadow:0 7px 25px rgba(30,50,50,.025)}.aside-kicker{color:#ef704e}.aside-card h2{font-size:20px;margin:9px 0 20px}.aside-card h3{font-size:17px;margin:9px 0 18px}.location-card label{display:block;color:#566666;font-weight:750;font-size:11px;margin-bottom:7px}.input-row{display:flex;border:1px solid #dde5e1;border-radius:8px;overflow:hidden}.input-row:focus-within{outline:2px solid #f8c2b0}.input-row input{border:0;outline:0;padding:11px;min-width:0;flex:1;font-size:12px;color:var(--ink)}.input-row button{border:0;background:#204e4d;color:#fff;width:42px;font-size:21px}.aside-small{font-size:10px;color:#9aa6a4;margin:10px 0 0;line-height:1.5}.journey-track,.mini-progress{height:5px;background:#e7eee9;border-radius:8px;overflow:hidden}.journey-track span,.mini-progress span{height:100%;display:block;width:0;background:#f47450;border-radius:8px;transition:width .4s}.journey-steps{display:flex;justify-content:space-between;margin-top:8px;color:#9ba6a4;font-size:10px}.coach-note{display:flex;align-items:start;gap:10px;background:#eef6f2;border-radius:9px;padding:13px 11px;margin:21px 0 15px}.coach-icon{font-size:17px;color:#418878;line-height:1}.coach-note p{font-size:11px;color:#5e7b71;margin:0;line-height:1.45}.text-button{padding:0;background:transparent;border:0;color:#e96b47;font-size:11px;font-weight:800}.text-button:hover{text-decoration:underline}
.simulation-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:17px}.lesson-panel{padding:21px;align-self:start}.lesson-panel h2{font-size:21px;margin:8px 0 21px}.lesson-list{display:grid;gap:7px}.lesson-item{border:1px solid #e8edeb;border-radius:10px;padding:12px;background:#fff;text-align:left;display:grid;grid-template-columns:34px 1fr 15px;align-items:center;gap:9px;transition:.18s}.lesson-item:hover{border-color:#f4bca9}.lesson-item.is-active{border-color:#f7bfae;background:#fff6f0}.lesson-icon{height:34px;width:34px;border-radius:8px;background:#edf3f1;display:grid;place-items:center;color:#37706b;font-size:18px}.lesson-item.is-active .lesson-icon{background:#ffe4d5;color:#e3613e}.lesson-item strong{font-size:11px;display:block;color:#293d3c}.lesson-item small{display:block;color:#95a3a1;font-size:9px;margin-top:3px}.lesson-check{color:#67ab82;font-size:15px;font-weight:800}.lesson-progress{border-top:1px solid #edf0ee;margin-top:26px;padding-top:19px}.lesson-progress div:first-child{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}.lesson-progress strong{font-size:15px}.lesson-progress span{font-size:10px;color:#9ba7a5}
.simulation-stage{height:clamp(350px,39vw,500px)}.sim-image{transform:scale(1)}.simulation-stage.is-running .sim-image{animation:road-approach 13s ease-in-out infinite alternate}.sim-motion{position:absolute;z-index:2;inset:0;opacity:0;pointer-events:none}.simulation-stage.is-running .sim-motion{opacity:1}.sim-motion span{position:absolute;left:50%;bottom:27%;width:2px;height:20%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.6));transform-origin:bottom;animation:motion 1.5s linear infinite}.sim-motion span:nth-child(2){left:41%;animation-delay:.5s}.sim-motion span:nth-child(3){left:59%;animation-delay:1s}.simulation-prompt{position:absolute;z-index:5;bottom:20px;left:20px;max-width:min(460px,calc(100% - 120px));padding:20px 22px;border-radius:12px;background:rgba(14,32,38,.91);color:#fff;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15)}.prompt-kicker{color:#ffc4af;font-size:9px}.simulation-prompt h2{font-size:23px;letter-spacing:-.04em;margin:7px 0 6px}.simulation-prompt p{font-size:12px;line-height:1.45;color:#d7e1e1;margin:0}.sim-speed{position:absolute;z-index:5;bottom:20px;right:20px;background:rgba(14,32,38,.86);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:12px;width:75px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center}.sim-speed span{font-size:8px;letter-spacing:.1em;color:#c7d9d8}.sim-speed strong{font-size:27px;line-height:1}.sim-speed small{font-size:9px}.scenario-actor{position:absolute;z-index:3;opacity:0;transition:opacity .3s;pointer-events:none}.simulation-stage.is-running .scenario-actor{opacity:1}.scenario-actor.pedestrian{right:15%;bottom:32%;width:48px;height:92px;animation:person-walk 7s linear infinite alternate}.scenario-actor.pedestrian .person-head{width:17px;height:17px;position:absolute;left:16px;top:0;background:#263237;border-radius:50%}.scenario-actor.pedestrian .person-body{position:absolute;width:23px;height:38px;left:13px;top:16px;background:#d86b45;border-radius:9px 9px 4px 4px}.scenario-actor.pedestrian .person-leg{position:absolute;width:7px;height:32px;background:#23363a;top:51px;border-radius:3px}.scenario-actor.pedestrian .person-leg.one{left:17px;transform:rotate(13deg)}.scenario-actor.pedestrian .person-leg.two{left:29px;transform:rotate(-12deg)}.scenario-actor.car{right:4%;bottom:43%;width:112px;height:55px;border-radius:28px 24px 9px 9px;background:#e14e36;box-shadow:inset 0 8px 0 rgba(255,255,255,.2),0 6px 12px rgba(0,0,0,.2);animation:car-approach 6s ease-in-out infinite alternate}.scenario-actor.car:before{content:"";position:absolute;left:23px;top:-17px;width:62px;height:25px;border-radius:25px 25px 0 0;background:#bdd5d8;border:7px solid #e14e36;border-bottom:0}.scenario-actor.car:after{content:"";position:absolute;left:13px;bottom:-7px;width:18px;height:18px;border-radius:50%;background:#242a2c;box-shadow:69px 0 0 #242a2c}.scenario-actor.dog{right:18%;bottom:35%;font-size:61px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));animation:dog-move 6s ease-in-out infinite alternate}
.decision-panel{margin-top:14px;padding:18px 21px}.decision-header{display:flex;align-items:center;justify-content:space-between;gap:14px}.decision-header h3{font-size:17px;margin:5px 0 0}.start-btn{padding:11px 16px;font-size:11px;min-height:40px}.decision-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.answer-btn{border:1px solid #e0e8e4;background:#f9fbf9;color:#324845;border-radius:9px;min-height:58px;padding:10px;font-size:11px;font-weight:750;text-align:left;display:flex;align-items:center;gap:8px;line-height:1.35}.answer-btn span{flex:none;width:22px;height:22px;border-radius:5px;background:#e9f0ec;display:grid;place-items:center;color:#477369;font-size:10px}.answer-btn:hover{border-color:#ed9d81;background:#fff7f2}.answer-btn.is-correct{border-color:#77be8d;background:#eff9f1}.answer-btn.is-incorrect{border-color:#f0a297;background:#fff1ef}.feedback{margin-top:13px;border-radius:9px;padding:14px 15px;border:1px solid #d9eeda;background:#f3faf3;display:flex;align-items:flex-start;gap:12px}.feedback.is-wrong{border-color:#f4d7c8;background:#fff6f0}.feedback-icon{font-size:16px;font-weight:900;color:#4f9d70}.feedback.is-wrong .feedback-icon{color:#e46b4b}.feedback strong{font-size:12px;display:block}.feedback p{font-size:11px;color:#697e76;margin:5px 0 0;line-height:1.45}.feedback-next{margin-left:auto;white-space:nowrap;background:#1e5b56;color:#fff;border:0;border-radius:7px;padding:8px 10px;font-size:10px;font-weight:750}.decision-footer{display:flex;justify-content:space-between;margin-top:15px;padding-top:13px;border-top:1px solid #eef0ee;color:#a3aeac;font-size:10px}
@keyframes road-approach{from{transform:scale(1)}to{transform:scale(1.18)}}@keyframes motion{0%{transform:scaleY(.15);opacity:0}35%{opacity:.5}100%{transform:scaleY(1.1);opacity:0}}@keyframes person-walk{from{transform:translateX(0) scale(.7)}to{transform:translateX(-180px) scale(1.1)}}@keyframes car-approach{from{transform:translate(45px,-14px) scale(.55)}to{transform:translate(-70px,24px) scale(1.05)}}@keyframes dog-move{from{transform:translateX(0) scale(.6)}to{transform:translateX(-160px) scale(1)}}
.mobile-nav{display:none}
@media(max-width:1120px){.app-shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding-left:12px;padding-right:12px}.brand img{width:140px}.topbar{padding:0 27px}main{padding:30px 27px 60px}.hero-copy{padding:37px 34px}.hero-copy h1{font-size:clamp(32px,3.7vw,46px)}.drive-layout{grid-template-columns:minmax(0,1fr) 250px}.simulation-layout{grid-template-columns:230px minmax(0,1fr)}.control-btn{min-width:64px;padding:6px 8px}.controls-label span{display:none}}
@media(max-width:850px){.app-shell{display:block}.sidebar{display:none}.topbar{height:64px;padding:0 20px}.mobile-brand{display:block}.mobile-brand img{width:112px;display:block}.breadcrumb{display:none}main{padding:23px 20px 100px}.mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;left:0;right:0;z-index:50;min-height:65px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -9px 28px rgba(19,39,39,.05);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav-item{border:0;background:transparent;color:#879594;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;font-size:10px;font-weight:700}.mobile-nav-item span{font-size:23px;line-height:1}.mobile-nav-item.is-active{color:#e96744}.home-hero{grid-template-columns:1fr}.hero-copy{padding:35px 34px;min-height:340px}.hero-visual{min-height:235px}.drive-layout{grid-template-columns:1fr}.drive-aside{display:grid;grid-template-columns:1fr 1fr}.simulation-layout{grid-template-columns:1fr}.lesson-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.lesson-panel>.aside-kicker,.lesson-panel h2{grid-column:1/-1}.lesson-progress{border:0;margin:0;padding:10px 0 0 10px}.lesson-list{grid-column:1}.lesson-panel h2{margin-bottom:14px}}
@media(max-width:850px){.mobile-nav{grid-template-columns:repeat(4,1fr)}.mobile-nav-item{text-decoration:none}}
@media(max-width:580px){.topbar{padding:0 17px}.demo-pill{font-size:9px}.topbar-right{gap:10px}.avatar{width:29px;height:29px}.home-hero{border-radius:16px}.hero-copy{padding:29px 25px;min-height:330px}.hero-copy h1{font-size:37px;margin:22px 0 15px}.hero-copy p{font-size:13px}.hero-actions{width:100%}.hero-actions .btn{flex:1;font-size:11px;gap:7px;padding:10px}.hero-quick{font-size:10px}.hero-visual{min-height:210px}.section-heading{margin-top:34px}.section-heading h2{font-size:23px}.section-aside{display:none}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:270px}.mode-art{height:90px}.page-heading{margin-bottom:20px}.page-heading h1{font-size:29px}.page-heading p{font-size:12px}.feature-badge{display:none}.drive-stage,.simulation-stage{height:330px;border-radius:13px}.stage-top{left:10px;right:10px;top:10px}.stage-label{font-size:8px}.stage-place{font-size:9px}.stage-dashboard{left:10px;right:10px;bottom:10px;height:54px;padding:8px 12px;gap:12px}.dashboard-left strong{font-size:20px}.dashboard-right strong{font-size:11px}.dash-route{font-size:9px}.stage-center-hint{white-space:normal;width:70%;font-size:11px}.drive-controls{align-items:stretch;flex-direction:column;padding:14px}.controls-label{align-items:center}.control-buttons{display:grid;grid-template-columns:repeat(4,1fr)}.control-btn{min-width:0;min-height:54px;flex-direction:column;gap:1px}.control-btn span{font-size:9px}.drive-aside{grid-template-columns:1fr}.aside-card{padding:17px}.lesson-panel{display:block;padding:16px}.lesson-list{grid-template-columns:repeat(3,1fr);gap:6px}.lesson-item{display:flex;flex-direction:column;gap:5px;min-height:79px;padding:8px 4px;text-align:center;justify-content:center}.lesson-icon{height:25px;width:25px;font-size:14px}.lesson-item strong{font-size:9px}.lesson-item small,.lesson-check{display:none}.lesson-progress{padding:13px 0 0;margin-top:15px;border-top:1px solid #edf0ee}.simulation-prompt{left:10px;bottom:10px;padding:13px;max-width:calc(100% - 83px)}.simulation-prompt h2{font-size:16px;margin:4px 0}.simulation-prompt p{font-size:10px}.sim-speed{right:10px;bottom:10px;width:63px;height:62px}.sim-speed strong{font-size:22px}.decision-panel{padding:15px}.decision-header h3{font-size:14px}.start-btn{font-size:10px;padding:8px 10px}.decision-options{grid-template-columns:1fr}.answer-btn{min-height:42px}.feedback{display:block}.feedback-icon{float:left;margin-right:9px}.feedback-next{display:block;margin-top:10px;margin-left:0}.decision-footer span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* V2: pravi pogled kraja in časovno vodena vaja. */
.release-banner{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.7fr);align-items:center;gap:24px;margin-bottom:20px;padding:25px 29px;border-radius:20px;background:linear-gradient(118deg,#153c3d,#0d282f 65%,#224d4a);color:#fff;box-shadow:0 14px 34px rgba(17,50,50,.13)}
.release-badge{display:inline-block;padding:6px 9px;border:1px solid rgba(255,255,255,.25);border-radius:6px;color:#ffb396;font-size:10px;font-weight:900;letter-spacing:.14em}
.release-intro h2{margin:11px 0 4px;font-size:26px;line-height:1.1;color:#fff}
.release-intro p{margin:0;color:#bdd1cc;font-size:12px}
.release-links{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.release-links button{display:grid;grid-template-columns:26px minmax(0,1fr) 16px;align-items:center;gap:11px;min-height:79px;padding:14px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.09);color:#fff;text-align:left}
.release-links button:hover{background:rgba(255,255,255,.16);border-color:#ffae8f}
.release-number{align-self:start;color:#ffae8f;font-size:11px;font-weight:900}
.release-links strong{display:block;font-size:13px;line-height:1.2}
.release-links small{display:block;margin-top:5px;color:#bad0cb;font-size:10px;line-height:1.25}
.release-arrow{align-self:start;color:#ffae8f;font-size:16px}
.resume-card{display:flex;align-items:center;gap:15px;margin:0 0 20px;padding:16px 20px;border:1px solid #cce7d7;border-radius:14px;background:#edf8f1;color:#244b3f}
.resume-icon{flex:none;width:35px;height:35px;border-radius:9px;background:#d4efdc;display:grid;place-items:center;font-size:22px;font-weight:800}
.resume-card strong{display:block;font-size:13px}
.resume-card p{margin:3px 0 0;color:#648272;font-size:11px}
.resume-card button{margin-left:auto;flex:none;border:0;border-radius:8px;background:#276653;color:#fff;padding:10px 13px;font-size:11px;font-weight:800}
.resume-note{margin-top:12px;padding:10px 11px;border-radius:8px;background:#edf8f1;color:#46715b;font-size:10px;line-height:1.45}
@media(max-width:1120px){.release-banner{grid-template-columns:1fr;gap:16px}}
@media(max-width:580px){.release-banner{padding:20px;border-radius:16px}.release-intro h2{font-size:22px}.release-links{grid-template-columns:1fr}.release-links button{min-height:65px}.release-intro p{font-size:11px}.resume-card{align-items:flex-start;flex-wrap:wrap}.resume-card button{margin-left:50px}}
.street-view-shell{position:absolute;inset:0;z-index:1;overflow:hidden;background:#b9c8c5}
.street-view-shell[hidden],.stage-image[hidden],.google-connect[hidden],.simulation-outcome[hidden]{display:none!important}
.street-view-layer{position:absolute;inset:0;z-index:1;background:#b9c8c5;opacity:0;pointer-events:none;transition:opacity .26s ease-in-out}
.street-view-layer.is-active{z-index:2;opacity:1;pointer-events:auto}
.street-view-layer.is-revealing{z-index:3;opacity:1}
.explore-stage.is-live .windshield-vignette,.explore-stage.is-live .stage-dashboard{display:none}
.explore-stage.is-live .stage-top{pointer-events:none}
.drive-status{min-height:32px;margin:10px 3px 0;color:#536d67;font-size:11px;line-height:1.45}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:-4px 0 18px;background:#eef3ef;border-radius:10px}
.mode-switch button{min-height:34px;border:0;background:transparent;border-radius:7px;color:#668078;font-size:11px;font-weight:800;cursor:pointer}
.mode-switch button.is-active{background:#fff;color:#194f4b;box-shadow:0 2px 7px rgba(19,50,43,.1)}
.google-connect{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid #e9efeb}
.google-connect input{width:100%;min-height:39px;border:1px solid #dce6e0;border-radius:8px;padding:8px 10px;font-size:12px;outline-color:#f4a58c}
.connect-button{min-height:38px;border:0;border-radius:8px;background:#1e5550;color:#fff;font-size:11px;font-weight:800;cursor:pointer}
.connect-button:disabled{opacity:.6;cursor:wait}
.google-connect .aside-small{margin:0}
.demo-shortcut{min-height:38px;border:1px solid #bfd8ca;border-radius:8px;background:#eef7f1;color:#24634e;font-size:11px;font-weight:800;cursor:pointer}
.demo-shortcut:hover{background:#e2f1e8}
.forget-key{margin-top:10px}
.simulation-stage.is-decision .scenario-actor{animation-play-state:paused}
.simulation-stage.is-paused .sim-motion{opacity:0}
.simulation-stage.is-paused .scenario-actor{animation-play-state:paused}
.simulation-stage.is-running .sim-image{animation:none}
.simulation-stage .sim-image{background-position:calc(50% + var(--sim-steer,0%)) center;transform:scale(var(--sim-zoom,1)) translateX(var(--sim-steer,0%));transition:none;will-change:transform}
.simulation-stage .sim-image-next{opacity:var(--sim-blend,0);transform:scale(1) translateX(var(--sim-steer,0%));will-change:opacity}
.simulation-stage.is-finished .sim-motion{opacity:0}
.simulation-timeline{position:absolute;left:20px;right:20px;bottom:7px;z-index:6;height:3px;border-radius:5px;background:rgba(255,255,255,.35);overflow:hidden}
.simulation-timeline span{display:block;width:0;height:100%;background:#ffad8d;transition:width .12s linear}
.simulation-outcome{position:absolute;z-index:7;top:68px;left:50%;transform:translateX(-50%);min-width:180px;max-width:calc(100% - 32px);padding:10px 14px;text-align:center;border-radius:9px;background:#e8f8e9;color:#245c42;font-size:12px;font-weight:850;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.simulation-outcome.is-wrong{background:#fff0e7;color:#a44b33}
@media(max-width:580px){.drive-status{font-size:10px}.simulation-outcome{top:48px;font-size:10px}.simulation-timeline{left:10px;right:10px;bottom:4px}}

/* Vodena vožnja po izračunani avtomobilski poti. */
.guided-planner{display:grid;gap:8px;margin-top:17px;padding-top:16px;border-top:1px solid #e9efeb}
.guided-planner[hidden],.route-question[hidden],.guided-attention[hidden],.guided-results[hidden],.route-feedback[hidden],.route-continue[hidden],.route-skip[hidden],.route-summary[hidden]{display:none!important}
.guided-planner label{margin:0}
.guided-planner input{width:100%;min-height:42px;border:1px solid #dde5e1;border-radius:8px;padding:10px 11px;color:var(--ink);font-size:12px;outline-color:#f8c2b0}
.guided-planner .aside-small{margin:0}
.route-summary{margin-top:13px;padding:10px 12px;border-radius:8px;background:#eaf4ef;color:#2b6554;font-size:11px;font-weight:800}
.route-question{position:absolute;z-index:7;left:18px;bottom:38px;width:min(420px,56%);max-height:calc(100% - 70px);overflow:auto;padding:13px;border:1px solid #f2c3ac;border-radius:14px;background:rgba(255,250,246,.97);box-shadow:0 15px 46px rgba(12,30,33,.25)}
.route-question h2{margin:5px 0;font-size:19px;line-height:1.2}
.route-question p{font-size:11px;line-height:1.4;color:#536c65}
.route-question .route-watch{margin:7px 0 0;padding:6px 8px;border-left:3px solid #1d6661;border-radius:6px;background:#eaf5f0;color:#255b52;font-weight:700}
.route-look{display:flex;gap:7px;margin-top:8px}.route-look button{min-height:32px;padding:6px 9px;border:1px solid #d7e4dc;border-radius:7px;background:#fff;color:#245c54;font-size:10px;font-weight:800;cursor:pointer}
.guided-attention{position:absolute;z-index:6;top:60px;left:18px;max-width:min(400px,55%);padding:11px 14px;border-radius:10px;background:rgba(9,40,43,.89);box-shadow:0 8px 22px rgba(0,0,0,.2);color:#fff;pointer-events:none}
.guided-attention span{display:block;margin-bottom:4px;font-size:9px;font-weight:850;letter-spacing:.1em;color:#ffb39b}
.guided-attention strong{font-size:12px;line-height:1.4}
.guided-results{display:grid;gap:13px;margin-top:14px;padding:18px;border:1px solid #dce6e1;border-radius:15px;background:#fff;box-shadow:var(--shadow)}
.guided-results h2{margin:4px 0;font-size:21px}.guided-results p{margin:0;color:#58716b;font-size:12px;line-height:1.5}
.guided-results-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.guided-results-list>div{padding:11px;border-radius:9px;background:#edf5f1}.guided-results-list strong{display:block;margin-bottom:5px;font-size:12px;color:#1c4944}.guided-results>.connect-button{justify-self:start}
.route-options{display:grid;gap:5px;margin-top:8px}
.route-options button{min-height:38px;padding:7px 9px;border:1px solid #dfe7df;border-radius:9px;background:#fff;color:#314a44;text-align:left;font-size:11px;font-weight:700;line-height:1.35}
.route-options button:hover{border-color:#ef9f7b;background:#fff3e9}
.route-options button.is-correct{border-color:#6cac7c;background:#eaf7ec}
.route-options button.is-wrong{border-color:#e58e7c;background:#fff0eb}
.route-feedback{padding:11px 13px;border-radius:9px;background:#edf5ef;color:#385e4b!important;font-weight:650}
.route-question-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.route-continue{padding:0 18px}
.route-skip{min-height:38px;padding:0 14px;border:1px solid #cfdbd2;border-radius:8px;background:#fff;color:#1e5550;font-size:11px;font-weight:800;cursor:pointer}
.route-skip:hover{background:#eaf4ef}
@media(max-width:720px){.explore-stage.is-live.has-guided-question{height:320px;min-height:0;scroll-margin-top:70px}.route-question{position:relative;left:auto;bottom:auto;width:100%;max-height:none;margin-top:10px;padding:12px;overflow:visible}.route-question h2{font-size:17px}.route-question p{font-size:11px}.route-options{gap:5px;margin-top:8px}.route-options button{min-height:34px;padding:7px 9px;font-size:10px}.route-question-actions{margin-top:8px}.guided-results-list{grid-template-columns:1fr}.guided-attention{left:10px;top:51px;max-width:calc(100% - 20px)}}
@media(max-width:580px){.control-btn span{font-size:8px}}

/* Animiran predstavitveni prizor; na fotografije Street View ne dodajamo izmišljenih udeležencev. */
.demo-pedestrian{position:absolute;z-index:3;bottom:45%;left:82%;width:clamp(72px,12%,132px);aspect-ratio:543/724;opacity:0;pointer-events:none}
.demo-walk-sprite{position:absolute;inset:0;background:url('./assets/pedestrian-walk-v1.png') 0 0/400% 100% no-repeat;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.demo-person-shadow{position:absolute;bottom:11%;left:28%;width:48%;height:6%;border-radius:50%;background:rgba(6,24,28,.22);filter:blur(5px)}
.demo-scene-label{position:absolute;z-index:4;top:60px;left:18px;padding:7px 10px;border-radius:6px;background:rgba(14,32,38,.72);color:#fff;font-size:9px;font-weight:850;letter-spacing:.08em;opacity:0;pointer-events:none}
.demo-scene-label span{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#ff875f;box-shadow:0 0 0 3px rgba(255,135,95,.2)}
.explore-stage.is-demo-scene .stage-center-hint{top:68%}
.explore-stage.is-demo-scene .demo-pedestrian{animation:demo-pedestrian-cross 10s linear infinite}
.explore-stage.is-demo-scene .demo-walk-sprite{animation:demo-walk-frames .64s steps(1,end) infinite}
.explore-stage.is-demo-scene .demo-scene-label{opacity:1}
.explore-stage.is-crossing-clear .demo-pedestrian{display:none}
.demo-crossing-continue{position:absolute;z-index:5;top:65%;left:50%;transform:translate(-50%,-50%);max-width:calc(100% - 24px);padding:12px 18px;border:1px solid #d2e8d9;border-radius:10px;background:#eef9f1;color:#15533d;font-size:12px;font-weight:800;line-height:1.35;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.18);cursor:pointer}
.demo-crossing-continue:hover,.demo-crossing-continue:focus-visible{background:#dff2e6;outline:2px solid #59aa7a;outline-offset:2px}
.explore-stage.is-live .demo-pedestrian,.explore-stage.is-live .demo-scene-label{display:none}
@keyframes demo-pedestrian-cross{0%{left:82%;opacity:0;transform:translateX(-50%) scale(.82)}8%{left:77%;opacity:1}75%{left:25%;opacity:1;transform:translateX(-50%) scale(1)}84%,100%{left:18%;opacity:0;transform:translateX(-50%) scale(1)}}
@keyframes demo-walk-frames{0%,24.9%{background-position:0 0}25%,49.9%{background-position:33.333% 0}50%,74.9%{background-position:66.667% 0}75%,100%{background-position:100% 0}}
@media(max-width:580px){.demo-scene-label{top:46px;left:10px;font-size:8px}.demo-pedestrian{width:72px}}
@media(prefers-reduced-motion:reduce){.explore-stage.is-demo-scene .demo-pedestrian{animation:none;left:50%;opacity:1;transform:translateX(-50%)}.explore-stage.is-demo-scene .demo-walk-sprite{animation:none}}

/* Vaja pešca uporablja iste štiri fotografske poze kot predstavitveni prizor. */
.scenario-actor.pedestrian{right:auto;left:82%;bottom:42%;width:clamp(72px,12%,132px);height:auto;aspect-ratio:543/724;opacity:0;animation:none}
.scenario-actor.pedestrian .demo-walk-sprite{animation:demo-walk-frames .64s steps(1,end) infinite}
.simulation-stage.is-running .scenario-actor.pedestrian{animation:sim-pedestrian-arrive 4.2s linear both}
.simulation-stage.is-decision:not(.is-finished) .scenario-actor.pedestrian{animation-play-state:paused}
.simulation-stage.is-decision .scenario-actor.pedestrian .demo-walk-sprite{animation-play-state:paused}
.simulation-stage.is-finished .scenario-actor.pedestrian{animation:sim-pedestrian-exit 2.8s linear forwards;animation-play-state:running}
.simulation-stage.is-finished .scenario-actor.pedestrian .demo-walk-sprite{animation-play-state:running}
@keyframes sim-pedestrian-arrive{0%{left:82%;opacity:0;transform:translateX(-50%) scale(.82)}12%{opacity:1}100%{left:49%;opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes sim-pedestrian-exit{from{left:49%;opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}to{left:20%;opacity:0;transform:translateX(-50%) scale(1)}}
@media(max-width:580px){.scenario-actor.pedestrian{width:72px}}
@media(prefers-reduced-motion:reduce){.simulation-stage.is-running .scenario-actor.pedestrian,.simulation-stage.is-finished .scenario-actor.pedestrian{animation:none;left:50%;opacity:1;transform:translateX(-50%)}.scenario-actor.pedestrian .demo-walk-sprite{animation:none}}

/* Zaključek demo poti mora ponuditi naslednji korak tudi po obnovitvi shranjenega napredka. */
.demo-finish[hidden]{display:none!important}
.demo-finish{position:absolute;z-index:6;top:48%;left:50%;width:min(430px,calc(100% - 30px));padding:22px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.22);border-radius:15px;background:rgba(13,38,42,.92);backdrop-filter:blur(12px);box-shadow:0 22px 55px rgba(3,20,23,.32);color:white;text-align:center}
.demo-finish>span{font-size:9px;font-weight:850;letter-spacing:.12em;color:#ffaf92}
.demo-finish h2{margin:8px 0;font-size:23px;line-height:1.15;color:white}
.demo-finish p{margin:0;font-size:12px;line-height:1.5;color:#d5e3df}
.demo-finish>div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.demo-finish button{min-height:40px;padding:9px 13px;border:0;border-radius:8px;background:#fff;color:#184d48;font-size:11px;font-weight:850;cursor:pointer}
.demo-finish button:last-child{background:#fa805b;color:#fff}
.demo-finish button:hover{filter:brightness(.95)}
@media(max-width:580px){.demo-finish{top:45%;padding:16px}.demo-finish h2{font-size:18px}.demo-finish p{font-size:10px}.demo-finish>div{margin-top:11px}.demo-finish button{min-height:36px;font-size:10px}}

/* Zaporedne fotografije pokažejo premik vozila; prehodi in odzivi ostanejo pod nadzorom uporabnika. */
.demo-frame{opacity:0;pointer-events:none;transition:opacity .75s ease,transform .85s ease;transform:scale(var(--drive-scale,1)) translateX(var(--drive-shift,0%))}
.demo-frame:after{display:none}
.demo-frame-road{background-image:url('./assets/demo-road-after-crossing-v1.png')}
.demo-frame-junction{background-image:url('./assets/demo-equal-junction-v1.png')}
.demo-frame-clear{background-image:url('./assets/demo-right-turn-v1.png')}
.is-demo-mode[data-demo-frame="1"] .demo-frame-road,.is-demo-mode[data-demo-frame="2"] .demo-frame-road,.is-demo-mode[data-demo-frame="2"] .demo-frame-junction,.is-demo-mode[data-demo-frame="3"] .demo-frame-road,.is-demo-mode[data-demo-frame="3"] .demo-frame-junction,.is-demo-mode[data-demo-frame="3"] .demo-frame-clear{opacity:1}
.explore-stage:not(.is-demo-mode) .demo-frame{display:none}
.explore-stage.is-demo-mode .demo-scene-label{opacity:1}
.demo-scene-label b{font:inherit}
.demo-decision[hidden]{display:none!important}
.demo-decision{position:absolute;z-index:6;top:45%;left:42%;width:min(425px,calc(100% - 28px));max-height:calc(100% - 95px);overflow:auto;padding:19px 20px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(13,38,42,.94);backdrop-filter:blur(12px);box-shadow:0 20px 55px rgba(3,20,23,.35);color:#fff;text-align:center}
.demo-decision>span{font-size:9px;font-weight:850;letter-spacing:.12em;color:#ffaf92}
.demo-decision h2{margin:7px 0;font-size:22px;line-height:1.15;color:#fff}
.demo-decision p{margin:0;font-size:11px;line-height:1.45;color:#d5e3df}
.demo-decision-options{display:grid;gap:7px;margin-top:13px}
.demo-decision button{min-height:39px;padding:9px 12px;border:1px solid rgba(255,255,255,.23);border-radius:8px;background:#fff;color:#194c47;font-size:11px;font-weight:800;cursor:pointer}
.demo-decision button:hover{background:#e7f5ed}
.demo-decision button:disabled{opacity:.72;cursor:default}
.demo-decision .demo-decision-feedback{margin-top:10px;padding:8px;border-radius:7px;background:#dff2e5;color:#24563c;font-weight:750}
.demo-decision .demo-decision-feedback.is-wrong{background:#fff0e8;color:#9f4331}
.demo-decision .demo-decision-continue{margin-top:9px;background:#fa805b;color:#fff;border-color:#fa805b}
@media(max-width:580px){.demo-decision{top:45%;left:50%;max-height:calc(100% - 65px);padding:12px}.demo-decision h2{font-size:16px}.demo-decision p,.demo-decision button{font-size:10px}.demo-decision-options{gap:5px;margin-top:8px}.demo-decision button{min-height:33px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.demo-frame{transition:none}}

/* Vaja prednosti uporablja isti jasno viden pogled na vozilo iz desne. */
.simulation-stage[data-scenario="priority"] .sim-image{background-image:url('./assets/demo-equal-junction-v1.png')}
.simulation-stage[data-scenario="priority"] .scenario-actor.car{display:none}

/* Fotografski pes je izrezan na prosojnem ozadju in se približa voznemu pasu. */
.scenario-actor.dog{right:20%;bottom:28%;width:clamp(130px,17%,190px);height:auto;aspect-ratio:3/2;font-size:0;filter:drop-shadow(1px 4px 3px rgba(8,24,21,.35));animation:none}
.scenario-actor.dog img{display:block;width:100%;height:100%;object-fit:contain}
.simulation-stage.is-running .scenario-actor.dog{animation:dog-move 6s ease-out both}
.simulation-stage.is-finished .scenario-actor.dog{animation:dog-exit 1.8s ease-in forwards;animation-play-state:running}
@keyframes dog-exit{from{transform:translateX(-105px) scale(1);opacity:1}to{transform:translateX(-310px) scale(1.05);opacity:0}}

/* Kratek video prototip v vaji z živaljo; druge vaje ohranijo slikovni prikaz. */
.sim-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04) translateX(var(--sim-steer,0%));transition:transform .12s linear;z-index:0}
.sim-video[hidden]{display:none}
.simulation-stage.has-video .sim-image{visibility:hidden}
.simulation-stage.has-video .sim-motion{display:none}

/* Demo kokpit: hkratno upravljanje volana in pedalov na telefonu. */
.demo-cockpit{display:grid;grid-template-columns:224px minmax(0,1fr) 174px;align-items:center;gap:20px;margin-top:14px;padding:14px 20px;border:1px solid #dce6e1;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.explore-stage.is-demo-mode{height:clamp(330px,calc(100dvh - 480px),520px)}
.demo-cockpit[hidden]{display:none!important}
.live-cockpit[hidden]{display:none!important}
.live-cockpit .live-reverse{margin-top:10px;min-height:32px;padding:6px 11px;border:1px solid #d9e4de;border-radius:7px;background:#eef6f1;color:#235d55;font-size:11px;font-weight:800;cursor:pointer}
.live-cockpit button:disabled{opacity:.55;cursor:not-allowed}
.guided-auto-overlay{position:absolute;z-index:6;left:50%;bottom:40px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:8px 10px;border:1px solid rgba(255,255,255,.35);border-radius:13px;background:rgba(8,38,42,.88);color:#fff;box-shadow:0 10px 30px rgba(4,20,25,.28);backdrop-filter:blur(12px)}
.guided-auto-overlay[hidden]{display:none!important}.guided-auto-overlay button{flex:none;border:0;border-radius:9px;background:#f2734e;color:#fff;padding:11px 14px;font-size:12px;font-weight:850;white-space:nowrap;cursor:pointer}.guided-auto-overlay button:hover{background:#ff865f}.guided-auto-overlay button.is-playing{background:#e85f49}.guided-auto-overlay button:disabled{opacity:.55;cursor:not-allowed}.guided-auto-overlay label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:750;white-space:nowrap}.guided-auto-overlay select{border:1px solid rgba(255,255,255,.25);border-radius:7px;background:#174a4d;color:#fff;padding:8px 5px;font:inherit}.guided-auto-overlay>span{min-width:130px;max-width:175px;color:#deeeea;font-size:10px;line-height:1.35}
@media(max-width:720px){.guided-auto-overlay{bottom:32px;gap:7px;padding:6px}.guided-auto-overlay button{padding:9px;font-size:10px}.guided-auto-overlay>span{display:none}.guided-auto-overlay label{font-size:9px}.guided-auto-overlay select{padding:7px 3px}}
@media(min-width:721px){#live-drive-controls{flex-wrap:wrap}#live-drive-controls .controls-label{flex:1 1 170px}#live-drive-controls .control-btn{min-width:68px;padding:7px 8px}.demo-driving-guide span{font-size:12px;color:#526b65}}
@media(max-width:580px){#live-drive-controls .control-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}
.demo-control-label{display:block;margin-bottom:6px;color:#849390;font-size:9px;font-weight:850;letter-spacing:.13em;text-align:center}
.demo-wheel-row{display:flex;align-items:center;justify-content:center;gap:9px}
.demo-wheel{width:108px;height:108px;flex:none;display:grid;place-items:center;border-radius:50%;background:#edf2ef;touch-action:none;cursor:grab;user-select:none}
.demo-wheel:active{cursor:grabbing}
.demo-wheel-rim{position:relative;width:96px;height:96px;display:grid;place-items:center;border:11px solid #1a3436;border-top-color:#f07856;border-radius:50%;background:#e5eeea;box-shadow:inset 0 2px 7px rgba(10,30,30,.2),0 3px 7px rgba(10,30,30,.12);transform:rotate(var(--wheel-angle,0deg));transition:transform .12s ease}
.demo-wheel-spoke{position:absolute;width:70px;height:11px;border-radius:4px;background:#1a3436;transform:rotate(-24deg)}
.demo-wheel-spoke:after{content:"";position:absolute;left:31px;top:0;width:11px;height:42px;border-radius:4px;background:#1a3436}
.demo-wheel-hub{position:relative;z-index:1;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#18383b;color:#fff;font-size:15px;font-weight:900}
.demo-signal{width:31px;height:35px;flex:none;border:1px solid #dbe8e0;border-radius:7px;background:#edf6ef;color:#3c8c65;font-size:15px;font-weight:900}
.demo-signal.is-active{background:#d0f0d6;color:#168453;box-shadow:0 0 0 3px rgba(65,181,102,.2)}
.demo-driving-guide strong{display:block;font-size:15px;line-height:1.3;color:#193b39}
.demo-driving-guide span{display:block;margin-top:7px;color:#889893;font-size:11px;line-height:1.5}
.demo-sound-button{margin-top:7px;padding:3px 0;border:0;background:transparent;color:#326e67;font-size:10px;font-weight:800}
.demo-sound-button:hover{text-decoration:underline}
.demo-pedals{display:flex;gap:9px;justify-content:flex-end}
.demo-pedal{width:77px;height:109px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;color:#fff;touch-action:none;user-select:none;box-shadow:inset 0 -7px 0 rgba(0,0,0,.12),0 6px 12px rgba(12,40,40,.14)}
.demo-pedal span{font-size:27px;font-weight:400;line-height:1}
.demo-pedal strong{font-size:10px;letter-spacing:.07em}
.demo-pedal-brake{background:#e56a52}.demo-pedal-gas{background:#22645d}
.demo-pedal.is-held{transform:translateY(4px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 2px 5px rgba(12,40,40,.12)}
.demo-indicator-display:not(:empty){margin-left:auto;min-width:18px;color:#8ded9f;font-size:17px;font-weight:900}
.demo-indicator-display:not(:empty)+.dash-route{margin-left:0}
.demo-indicator-display.is-blinking{animation:demo-blink .7s steps(1,end) infinite}
@keyframes demo-blink{50%{opacity:.15}}
.demo-motion{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.is-demo-moving .demo-motion{opacity:.55}
.demo-motion span{position:absolute;bottom:20%;left:45%;width:2px;height:17%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.65));transform-origin:bottom;animation:motion .9s linear infinite}
.demo-motion span:nth-child(2){left:52%;animation-delay:.3s}.demo-motion span:nth-child(3){left:62%;animation-delay:.6s}
.is-demo-mode .stage-image{transition:opacity .75s ease,transform .12s linear}
@media(max-width:720px){.demo-cockpit{grid-template-columns:minmax(0,1fr) 144px;gap:8px;padding:12px}.demo-steering{grid-column:1;grid-row:1}.demo-pedals{grid-column:2;grid-row:1}.demo-driving-guide{grid-column:1/-1;grid-row:2;text-align:center}.demo-driving-guide strong{font-size:12px}.demo-driving-guide span{font-size:9px;margin-top:3px}.demo-wheel{width:89px;height:89px}.demo-wheel-rim{width:82px;height:82px;border-width:9px}.demo-wheel-spoke{width:59px}.demo-wheel-spoke:after{left:26px;height:33px}.demo-pedal{width:67px;height:88px}.demo-pedals{gap:5px}.demo-signal{width:24px;height:31px;font-size:12px}.demo-wheel-row{gap:4px}}
@media(max-width:580px){.explore-stage.is-demo-mode{height:330px}}
@media(max-width:380px){.demo-cockpit{grid-template-columns:minmax(0,1fr) 125px}.demo-pedal{width:59px}.demo-wheel{width:79px;height:79px}.demo-wheel-rim{width:74px;height:74px}}
@media(prefers-reduced-motion:reduce){.demo-motion span,.demo-indicator-display.is-blinking{animation:none}}
@media(prefers-reduced-motion:reduce){.street-view-layer{transition:none}}

/* Zvezna 3D vaja: položaj in smer kamere sledita upravljanju vozila. */
.drive3d-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}
.drive3d-canvas[hidden],.drive3d-distance[hidden]{display:none}
.simulation-stage.has-three .sim-image,.simulation-stage.has-three .sim-video,.simulation-stage.has-three .sim-motion,.simulation-stage.has-three .scenario-actor{display:none}
.simulation-stage.has-three::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 12px 40px rgba(5,25,30,.26),inset 0 -30px 55px rgba(5,20,25,.32)}
.drive3d-distance{position:absolute;z-index:5;top:58px;right:18px;padding:8px 11px;border-radius:7px;background:rgba(12,31,35,.72);color:#e7f3ef;font-size:10px;font-weight:700;backdrop-filter:blur(8px)}
.drive3d-distance strong{margin-left:4px;color:#fff;font-size:12px}
@media(max-width:580px){.lesson-list{grid-template-columns:repeat(4,minmax(0,1fr))}.drive3d-distance{right:10px;top:46px;font-size:9px;padding:6px 8px}}
.guided-editor-link{display:inline-flex;margin:8px 0 0;color:#175b57;font-size:11px;font-weight:800;text-decoration:none}
.guided-editor-link:hover{text-decoration:underline}