@font-face{font-family:Furore;src:url('../../assets/fonts/Furore-Regular.otf')}*{box-sizing:border-box} :root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202733;background:#f3f4f6;font-size:14px;--blue:#176cdb;--line:#dce0e6;--muted:#626d7c}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button,select,input{accent-color:var(--blue)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #176cdb;outline-offset:4px}button{transition:background .15s,color .15s}::selection{background:#c4ddff;color:#102443}[hidden]{display:none!important}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}input[type=range]{width:100%;height:28px;cursor:pointer}input[type=checkbox][role=switch]{appearance:none;width:36px;height:22px;flex:0 0 36px;border-radius:15px;background:#aab2bd;position:relative;cursor:pointer;margin:0}input[type=checkbox][role=switch]:before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:white;border-radius:50%;transition:transform .18s}input[type=checkbox][role=switch]:checked{background:var(--blue)}input[type=checkbox][role=switch]:checked:before{transform:translateX(14px)}.topbar{height:76px;max-width:1600px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;letter-spacing:.02em;font-size:13px}.brand-mark{display:grid;place-items:center;background:#202834;color:white;width:30px;height:32px;font-size:29px;font-weight:800;font-style:italic;border-radius:7px;line-height:1}.brand strong{font-size:17px;font-weight:600}.slash{color:#adb5c0;margin:0 14px}.prototype-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.prototype-label>span{width:6px;height:6px;border-radius:50%;background:#7c899b}main{max-width:1600px;margin:auto;padding:42px 48px 20px}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:34px}h1{font-size:30px;letter-spacing:-.035em;font-weight:600;margin:0 0 10px;line-height:1.15}.intro p{margin:0;color:var(--muted);line-height:1.6}.text-button{border:0;background:transparent;color:#45536a;padding:8px 0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px}.text-button:hover{color:var(--blue)}.text-button svg{width:15px;height:15px}.text-button span[aria-hidden]{font-size:18px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}.display-topline{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:0 2px 14px;color:#3c4758}.muted{color:#626d7c}.display-topline>span:last-child{font-size:11px;color:#626d7c;display:flex;align-items:center;gap:6px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#21866c;flex-shrink:0}.dot.blue{background:#3288f8}.device{padding:16px 16px 0;background:#161719;border-radius:20px;border:1px solid #46494c;box-shadow:0 16px 26px -16px #222d3c55,0 3px 0 #08090a;position:relative}.screen{aspect-ratio:16/9;position:relative;isolation:isolate;overflow:hidden;background:#0a0a0c url('../../assets/otto/dashboard-bg.png') center/cover;container-type:inline-size;color:#fff;border-radius:3px}.dashboard{position:absolute;inset:0;pointer-events:none}.speed{position:absolute;top:3%;left:3.125%;display:flex;align-items:baseline;gap:1.8cqw;font-family:Furore}.speed>span{font-size:12.5cqw;line-height:1.13;font-variant-numeric:tabular-nums}.speed small{font-family:inherit;font-size:2.6cqw}.clock{position:absolute;right:3.1%;top:5%;font-size:2.6cqw;display:flex;gap:1.2cqw;align-items:center;font-variant-numeric:tabular-nums}.clock svg{height:3.3cqw;width:2.3cqw;color:#3288f8;stroke-width:2}.edition{position:absolute;right:3.1%;top:16%;font:3.55cqw Furore;color:#3288f8}.tach{position:absolute;width:100%;height:100%;inset:0}.rpm-labels{font:28px Furore;fill:#999eab;stroke:none}.rpm-unit{font:19px Furore;fill:#999eab;stroke:none}.gear{position:absolute;right:4.6%;bottom:26%;height:7.8cqw;width:7.8cqw;display:grid;place-items:center;background:#999eab;border-radius:5px;color:black;font:6cqw Furore}.temperatures{display:flex;justify-content:space-between;position:absolute;left:3.125%;right:3.125%;bottom:5.4%;gap:1.5cqw}.temperatures>div{display:flex;align-items:center;gap:1.4cqw}.temperatures img{width:5.1cqw;opacity:.65}.temperatures span{font-size:1.63cqw;color:#a5acb8;white-space:nowrap}.temperatures strong{display:block;font:4.45cqw Furore;color:white;line-height:1.3}.temperatures small{font-size:2.5cqw}.bezel-label{text-align:center;height:38px;line-height:38px;font:bold italic 18px Furore;display:flex;align-items:center;justify-content:center;color:#d0d2d4;letter-spacing:.04em}.bezel-label span{font:9px sans-serif;align-self:flex-start;padding-top:10px}.otto{position:absolute;left:10%;top:67%;width:8.44%;aspect-ratio:1;border:0;padding:0;background:none;touch-action:none;user-select:none;z-index:3;border-radius:8px;cursor:grab}.otto:active{cursor:grabbing}.otto-motion{display:block;width:100%;height:100%;transform-origin:50% 90%;animation:none}.otto img{height:100%;width:100%;object-fit:contain;pointer-events:none;user-select:none}.otto[data-pose=fast-speed] .otto-motion{animation:none}.otto[data-pose=overheating] .otto-motion{animation:weary 2s ease-in-out infinite}.otto[data-pose=feeding] .otto-motion{animation:feeding .65s ease-in-out infinite}.otto[data-pose=playing] .otto-motion{animation:play .65s ease-in-out infinite}.otto[data-pose=being-moved] .otto-motion{animation:none;transform:rotate(-9deg) translateY(-8%)}.heat-waves{position:absolute;top:-10%;left:31%;display:none;width:40%;height:23%;justify-content:space-between}.otto[data-pose=overheating] .heat-waves{display:flex}.heat-waves i{height:90%;border-left:2px solid #efa56b;border-radius:50%;width:18%;animation:heat 1.4s infinite}.heat-waves i:nth-child(2){animation-delay:.3s}.heat-waves i:nth-child(3){animation-delay:.6s}.otto-menu{position:absolute;left:29%;top:24%;width:47%;max-height:72%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#717680 #202226;padding:1.1cqw 1.8cqw;background:#202226;border:1px solid #717680;border-radius:1.6cqw;z-index:5;font-size:1.8cqw;box-shadow:0 6px 15px #0005}.menu-heading{display:flex;justify-content:space-between;align-items:center;font-size:2.2cqw;margin-bottom:.4cqw}.icon-button{display:grid;place-items:center;background:transparent;color:#adb5c0;border:0;padding:0;width:3.4cqw;height:3.4cqw}.icon-button svg{width:2.8cqw}.care-actions{display:flex;gap:1.4cqw}.care-actions button{display:flex;justify-content:center;align-items:center;gap:1cqw;width:50%;height:5.1cqw;border:1px solid #545a65;border-radius:1cqw;background:#2c3037;color:white;font-size:2cqw}.care-actions svg{height:2.8cqw;width:2.8cqw}.care-actions button:disabled{color:#a5adba;background:#26292f}.care-actions button:not(:disabled):hover{background:#285b9d}.lock-label{font-size:1.45cqw}.otto-menu p{font-size:1.55cqw;text-align:center;color:#b6bdc8;margin:.8cqw 0}.menu-bottom{border-top:1px solid #424751;padding-top:.8cqw;display:flex;align-items:center;gap:1cqw}.menu-bottom button{padding:.7cqw 1cqw;border:1px solid #545a65;border-radius:.7cqw;background:transparent;color:white;white-space:nowrap;display:flex;align-items:center;gap:.8cqw;font-size:1.8cqw}.menu-bottom svg{width:2.3cqw;height:2.3cqw}.menu-bottom label{color:#c0c6cf;white-space:nowrap;margin-left:1cqw}.menu-bottom input{height:3cqw;min-width:0} .safe-zone{position:absolute;left:0;top:var(--placement-top);width:100%;height:var(--placement-height);border:1px dashed #7ab6ff;background:#3288f815;z-index:2}.safe-zone span{position:absolute;right:4px;bottom:2px;font-size:1.5cqw;color:#b2d2ff}.dashboard-warning{position:absolute;inset:0;background:#15181bef;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2cqw;border:3px solid #ed7e4d}.dashboard-warning strong{font-size:4cqw}.dashboard-warning span{font-size:2cqw;color:#c0c6cf}.display-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:19px 0 17px;border-bottom:1px solid var(--line)}.display-caption>span{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}.display-caption strong{font-weight:600}.display-caption #state-detail{color:var(--muted);margin-left:4px}.how-to{display:flex;align-items:center;gap:14px;padding:22px 0}.gesture-icon{width:36px;height:40px;display:grid;place-items:center;flex-shrink:0;color:#65758a}.gesture-icon svg{width:25px;height:25px}.how-to p{margin:0;font-size:12px;color:var(--muted);line-height:1.7;max-width:65ch}.how-to strong{color:#334054;font-weight:500}.motion-study{padding-top:19px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.motion-study h2{font-size:14px;font-weight:600;margin:0 0 6px}.motion-study p{font-size:12px;margin:0;color:var(--muted)}.motion-buttons{display:flex;gap:7px;flex-wrap:wrap}.motion-buttons button{border:1px solid #cbd2dc;border-radius:6px;background:transparent;padding:9px 12px;color:#3e4d63;font-size:12px}.motion-buttons button:hover:not(:disabled){background:#e2e8f0}.motion-buttons button:disabled{color:#8b94a2}.demo-note{font-size:10px;color:var(--muted);margin:25px 0 0;line-height:1.5}.controls{background:#fff;border-radius:12px;padding:24px}.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:18px}.section-heading h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.02em}.small-label{font-size:10px;color:var(--muted);white-space:nowrap}.scenes{display:flex;gap:3px;padding:4px;background:#eef1f5;border-radius:8px;margin-bottom:25px}.scenes button{border:0;background:transparent;color:#58667a;flex:1;font-size:11px;border-radius:5px;padding:9px 5px;white-space:nowrap}.scenes button.active{background:#fff;color:#185eb5;box-shadow:0 1px 3px #23344d20}.range-label{display:flex;justify-content:space-between;align-items:center;font-size:12px}.range-label output{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}.range-label output span{font-size:11px;color:var(--muted);font-weight:400}.field-hint{font-size:11px;color:var(--muted);margin:3px 0 20px;line-height:1.5}.control-row{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:61px;border-top:1px solid #e8ebef}.control-row label{font-size:12px;line-height:1.3}.control-row label small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:4px}.control-row select{font-size:11px;border:1px solid #d5dbe4;padding:7px 4px;color:#384b65;background:white;border-radius:5px;max-width:95px}details{border-top:1px solid #e8ebef;margin-top:0;padding-top:13px}summary{font-size:11px;color:#5c6c82;cursor:pointer;margin-bottom:10px}.companion-controls{border-top:1px solid #dce0e6;margin-top:20px;padding-top:23px}.companion-profile{display:flex;align-items:center;gap:12px}.companion-profile>img{width:50px;height:54px;object-fit:contain;background:#edf3fa;border-radius:9px}.companion-profile>div{flex:1;display:flex;flex-direction:column;gap:5px}.companion-profile strong{font-size:14px;font-weight:600}.companion-profile span{font-size:10px;color:var(--muted)}.apply-status{font-size:10px;color:#3f7566;margin:13px 0 16px;line-height:1.5}.care-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;border-top:1px solid #e8ebef;padding-top:8px}.care-summary .text-button{font-size:10px}.behavior{padding-top:20px;margin-top:13px;border-top:1px solid #dce0e6}.behavior-label{font-size:11px;color:#334761;font-weight:600}.behavior p{font-size:11px;color:var(--muted);line-height:1.8;margin:8px 0 0;min-height:59px}footer{max-width:1600px;margin:12px auto 0;padding:24px 48px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px;border-top:1px solid var(--line)}
@keyframes weary{50%{transform:translateY(3%) rotate(-3deg)}}@keyframes feeding{50%{transform:rotate(4deg) scaleY(.96)}}@keyframes play{50%{transform:translateY(-15%) rotate(7deg)}}@keyframes heat{0%{opacity:0;transform:translateY(20%) rotate(-8deg)}50%{opacity:1}100%{opacity:0;transform:translateY(-50%) rotate(8deg)}}
@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 340px;gap:42px}.controls{padding:27px}.device{padding:20px 20px 0}.bezel-label{height:46px;font-size:20px}}
@media(max-width:1150px){main{padding:30px 26px 20px}.topbar{padding:0 26px}.workspace{gap:22px;grid-template-columns:minmax(0,1fr) 285px}.controls{padding:20px}.intro h1{font-size:27px}.display-caption #state-detail{display:none}.motion-study{align-items:flex-start;flex-direction:column;gap:13px}footer{padding:24px 26px}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:24px}.companion-controls{border-top:0;border-left:1px solid #dce0e6;margin-top:0;padding:0 0 0 24px}.behavior{grid-column:1/-1;margin:0;padding-top:16px}.behavior p{min-height:0}.device{padding:12px 12px 0}.display-column{max-width:100%}.motion-study{flex-direction:row}.intro{margin-bottom:26px}.demo-note{margin-bottom:6px}.bezel-label{font-size:15px;height:32px}}
@media(max-width:520px){.topbar{height:62px;padding:0 18px}.brand{font-size:10px;gap:9px}.brand-mark{width:24px;height:26px;font-size:24px}.brand strong{font-size:14px}.slash{margin:0 7px}.prototype-label{font-size:0;gap:0}.prototype-label>span{width:7px;height:7px}main{padding:26px 16px 16px}.intro{display:block;position:relative}.intro h1{font-size:25px;max-width:260px;line-height:1.2}.intro p{font-size:12px;max-width:300px;line-height:1.6}.intro>.text-button{position:absolute;right:0;top:0;font-size:10px}.display-topline{font-size:10px;padding-bottom:10px}.display-topline>span:last-child{font-size:9px}.display-topline .muted{display:none}.device{border-radius:13px;padding:8px 8px 0}.bezel-label{font-size:12px;height:26px}.bezel-label span{padding-top:7px;font-size:6px}.display-caption{padding:12px 0}.how-to{padding:17px 0;gap:8px}.how-to p{font-size:11px}.motion-study{flex-direction:column;gap:13px;padding-top:16px}.motion-buttons{gap:6px}.motion-buttons button{padding:10px 13px}.controls{display:block;padding:21px}.companion-controls{border-left:0;border-top:1px solid #dce0e6;padding:22px 0 0;margin-top:20px}.behavior{padding-top:18px;margin-top:12px}.section-heading h2{font-size:16px}.control-row{min-height:66px}.control-row label{font-size:13px}.control-row label small{font-size:11px}.small-label{font-size:10px}.scenes button{font-size:12px;padding:11px 5px}.demo-note{font-size:9px;margin-top:19px}footer{padding:18px 16px;font-size:9px}.otto-menu{left:29%;width:56%;top:44%;font-size:2.4cqw;padding:1cqw 1.8cqw}.menu-heading{font-size:2.9cqw}.care-actions button{height:6.3cqw;font-size:2.5cqw}.otto-menu p{font-size:2cqw}.menu-bottom button{font-size:2.2cqw}.menu-bottom input{height:4cqw}.menu-bottom label{font-size:2.2cqw}.icon-button{height:4cqw;width:4cqw}.icon-button svg{width:3.2cqw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Phone care controls sit outside the scaled instrument panel. */
.display-column>.otto-menu{position:relative;left:auto;top:auto;width:100%;padding:16px;margin-top:14px;border-radius:12px;color:#fff;font-size:14px;box-shadow:none}
.display-column>.otto-menu .menu-heading{font-size:17px;margin-bottom:10px}
.display-column>.otto-menu .icon-button{width:44px;height:44px}
.display-column>.otto-menu .icon-button svg{width:22px;height:22px}
.display-column>.otto-menu .care-actions{gap:12px}
.display-column>.otto-menu .care-actions button{height:44px;gap:8px;border-radius:7px;font-size:14px}
.display-column>.otto-menu .care-actions svg{width:22px;height:22px}
.display-column>.otto-menu .lock-label{font-size:10px}
.display-column>.otto-menu p{font-size:12px;margin:12px 0}
.display-column>.otto-menu .menu-bottom{padding-top:12px;gap:8px}
.display-column>.otto-menu .menu-bottom button{height:44px;padding:8px;gap:6px;font-size:12px;border-radius:6px}
.display-column>.otto-menu .menu-bottom svg{width:18px;height:18px}
.display-column>.otto-menu .menu-bottom label{font-size:12px;margin-left:6px}
.display-column>.otto-menu .menu-bottom input{height:44px}
/* Idle and roaming pauses keep the body still; only the expression sprite changes. */
/* Expressions are four alpha sprites in one regular, generated 2×2 sheet. */
.otto-motion{position:relative}
.otto-expression{position:absolute;inset:4%;background-image:var(--otto-expressions,url('../../assets/otto/otto-expressions.png'));background-size:200% 200%;background-repeat:no-repeat;pointer-events:none}
.otto-expression[data-expression=curious]{background-position:0 0}
.otto-expression[data-expression=happy]{background-position:100% 0}
.otto-expression[data-expression=sleepy]{background-position:0 100%}
.otto-expression[data-expression=blink]{background-position:100% 100%}
.otto[data-activity=walking] .otto-motion{animation:none}
.otto[data-suspended=true] .otto-motion{animation-play-state:paused}
/* The gear stays readable; actor bounds reserve the space to its left. */
.gear{z-index:4}
/* Four drawn gait frames per direction. RAF advances them by distance travelled. */
.otto-walk{position:absolute;inset:4%;background-size:200% 200%;background-repeat:no-repeat;pointer-events:none}
.otto-walk[data-direction=left]{background-image:var(--otto-walk-left,url('../../assets/otto/otto-walk-left.png'))}
.otto-walk[data-direction=right]{background-image:var(--otto-walk-right,url('../../assets/otto/otto-walk-right.png'))}
/* Contact poses replace the old rigid-body edge tilt. */
.otto-lean{position:absolute;inset:4%;background-size:200% 200%;background-repeat:no-repeat;pointer-events:none}
.otto-lean[data-side=left]{background-image:var(--otto-lean-left,url('../../assets/otto/otto-lean-left.png'))}
.otto-lean[data-side=right]{background-image:var(--otto-lean-right,url('../../assets/otto/otto-lean-right-v2.png'))}
.otto[data-activity=leaning] .otto-motion{animation:none;transform-origin:50% 90.48%}
.otto[data-lean-phase=settling] .otto-motion{animation:lean-settle .48s cubic-bezier(.16,1,.3,1) both}
.otto[data-lean-phase=resting] .otto-motion,.otto[data-lean-phase=blink] .otto-motion{animation:lean-breathe 3.2s ease-in-out infinite}
.otto[data-lean-phase=pushing-off] .otto-motion{animation:lean-recover .42s ease-out both}
@keyframes lean-settle{0%{transform:scaleY(1)}40%{transform:scaleY(.982)}100%{transform:scaleY(1)}}
@keyframes lean-breathe{50%{transform:scaleY(1.008)}}
@keyframes lean-recover{0%{transform:scaleY(.988)}100%{transform:scaleY(1)}}
/* A three-ball round lives in the display; its controls stay outside the gauges. */
.ball-layer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden}
.play-ball{color:#2878db;fill:#e8f2ff;stroke:#183c70;stroke-width:1.2}
.play-ball svg{fill:inherit;stroke:inherit}
.play-ball path{fill:currentColor;stroke:currentColor;stroke-width:1}
.play-ball[data-index="1"]{color:#d66a42;fill:#fff0e6;stroke:#7e3822}
.play-ball[data-index="2"]{color:#36866e;fill:#e6f5ed;stroke:#215a49}
.ball-drop-zone{position:absolute;inset:0;width:100%;height:100%;z-index:6;border:0;background:transparent;cursor:crosshair;touch-action:manipulation;border-radius:3px}
.ball-drop-zone:focus-visible{outline:3px solid #87baff;outline-offset:-3px}
.ball-controls{display:flex;align-items:center;gap:20px;margin-top:16px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ball-instructions{flex:1;min-width:0}.ball-instructions strong{font-size:14px;font-weight:600}.ball-instructions p{font-size:12px;color:#526177;line-height:1.5;margin:5px 0 0}
.ball-count{display:flex;gap:7px;flex-shrink:0}.ball-count i{width:13px;height:13px;border:1.5px solid #778499;border-radius:50%;background:transparent}.ball-count i.dropped{background:#2878db;border-color:#2878db}.ball-count i.dropped:nth-child(2){background:#d66a42;border-color:#d66a42}.ball-count i.dropped:nth-child(3){background:#36866e;border-color:#36866e}.ball-count i.cleared{background:transparent;opacity:.4}
.ball-actions{display:flex;align-items:center;gap:16px}.ball-actions>button{min-height:44px;white-space:nowrap}.ball-actions>button:not(.text-button){border:0;background:#176cdb;color:white;border-radius:6px;padding:10px 16px;font-size:12px}.ball-actions>button:not(.text-button):hover{background:#125bb9}
.otto-kick{position:absolute;inset:4%;background-image:var(--otto-kick,url('../../assets/otto/otto-kick.png'));background-size:200% 200%;background-repeat:no-repeat;pointer-events:none}
.otto[data-play-phase]:not([data-play-phase=""]) .otto-motion{animation:none;transform:none}
.otto[data-play-phase=windup] .otto-motion{transform-origin:50% 92%;animation:kick-plant .3s ease-out both}
@keyframes kick-plant{0%{transform:scaleY(1)}60%{transform:scaleY(.97)}100%{transform:scaleY(1)}}
/* City wind moves the cloth independently of the planted character. */
.otto-car{position:absolute;aspect-ratio:3/2;padding:0;border:0;background:none;z-index:2;isolation:isolate;touch-action:none;cursor:grab;border-radius:8px;user-select:none}
.otto-car img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.car-body{z-index:0}
.car-front{z-index:4}
.car-city-sprite{position:absolute;z-index:2;pointer-events:none;isolation:isolate}
.car-seated-body{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.car-city-sprite .otto-scarf{left:53%;top:27%;width:55%;height:45%}
.car-airborne{position:absolute;z-index:2;pointer-events:none;transform:rotate(-18deg);transform-origin:27% 76%}
.otto-car img.car-steering{inset:auto;z-index:1;object-fit:fill}
.car-wheel-layer{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.car-wheel-spin{fill:none;stroke:#516c85;stroke-width:1.2;opacity:.7}
.car-wheel-face{transform:scale(.65)}
.car-wheel-face circle{display:none}
.otto-car[data-mode=city] .car-wheel-spin,.otto-car[data-mode=highway] .car-wheel-spin{animation:car-wheel-roll var(--car-wheel-duration,.8s) linear infinite;transform-box:fill-box;transform-origin:center}
.otto-car[data-suspended=true] .car-wheel-spin,.otto-car[data-suspended=true] .otto-highway-sprite,.otto-car[data-suspended=true] .otto-scarf{animation-play-state:paused}
@keyframes car-wheel-roll{to{transform:rotate(-360deg)}}
.otto-highway-sprite{position:absolute;inset:0;background-size:200% 200%;background-repeat:no-repeat;transform-origin:27% 76%;scale:.88;translate:-1.361% -8.013%;animation:highway-struggle var(--highway-duration,.8s) steps(1,end) infinite}
/* Character-only atlas offsets keep both hands fixed at the car's grip anchor. */
@keyframes highway-struggle{0%,100%{background-position:0 0;translate:-1.361% -8.013%}25%{background-position:100% 0;translate:2.238% -8.087%}50%{background-position:0 100%;translate:-1.729% -4.404%}75%{background-position:100% 100%;translate:-.110% -4.939%}}
.otto-speech{position:absolute;z-index:3;max-width:calc(100% - 16px);padding:.55em .8em;background:#fff3e5;color:#633516;border:1px solid #d8a475;border-radius:10px;font-size:clamp(11px,1.75cqw,16px);font-weight:600;line-height:1.35;white-space:nowrap;transform:translate(-50%,-100%);pointer-events:none;box-shadow:0 3px 8px #0003}
.otto-speech:after{content:"";position:absolute;left:var(--speech-tail,50%);bottom:-6px;width:10px;height:10px;background:#fff3e5;border-right:1px solid #d8a475;border-bottom:1px solid #d8a475;transform:translateX(-50%) rotate(45deg)}
.otto-motion{isolation:isolate}
.otto-scarf{position:absolute;left:63%;top:18%;width:110%;height:80%;z-index:-1;pointer-events:none;background-image:url('../../assets/otto/otto-scarf.png');background-size:200% 200%;background-repeat:no-repeat;transform-origin:5% 50%;translate:0 -13.295%;animation:scarf-flutter var(--scarf-duration,.7s) steps(1,end) infinite}
/* Read-only alpha measurements align each frame's joined root at the neck. */
@keyframes scarf-flutter{0%,100%{background-position:0 0;translate:0 -13.295%}25%{background-position:100% 0;translate:0 -13.355%}50%{background-position:0 100%;translate:0 4.987%}75%{background-position:100% 100%;translate:0 4.184%}}
@media(max-width:520px){.ball-controls{gap:12px;flex-wrap:wrap}.ball-instructions{flex-basis:75%}.ball-actions{width:100%;justify-content:space-between}.ball-actions>button:not(.text-button){flex:1}.ball-actions>.text-button{padding:10px 4px}}

.otto-car[data-dragging=true]{cursor:grabbing}

.car-choice-row select{max-width:155px;min-height:40px;padding:8px;font-size:12px}

.otto-audio-controls>.range-label{margin-top:10px}.audio-level{display:flex;align-items:center;gap:14px}.audio-level input{flex:1;min-width:0}.audio-level button{min-height:44px;flex-shrink:0;border:1px solid #d5dbe4;background:white;color:#384b65;border-radius:5px;padding:8px 12px;font-size:12px}.audio-level button:hover{background:#edf3fa}.audio-level button:disabled{opacity:.5}.otto-audio-controls .field-hint{min-height:17px;margin-bottom:14px}

.ball-foreground{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;overflow:hidden}
@media(max-width:520px){.ball-actions{flex-wrap:wrap;gap:8px 16px}.ball-actions #preview-viewer-kick{order:3;flex-basis:100%;justify-content:center}}

.audio-expression-row select{max-width:145px;min-height:40px;min-width:105px;font-size:12px;padding:8px}

.car-choice-label{font-size:12px;line-height:1.3}.car-choice-label small{display:block;color:var(--muted);font-size:10px;margin-top:4px;line-height:1.5}
.car-choice-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:165px;min-height:44px;border:1px solid #d5dbe4;border-radius:5px;background:white;color:#384b65;padding:8px 10px;text-align:left;font-size:12px}.car-choice-trigger svg{width:15px;height:15px}.car-choice-trigger:hover{background:#edf3fa}
/* Garage belongs to the instrument screen, including its scrim and scrolling. */
.car-garage-layer{position:absolute;inset:0;z-index:8;overflow:hidden}.garage-backdrop{position:absolute;inset:0;background:#101a2b66}
.car-garage{position:absolute;inset:0 auto 0 0;margin:0;width:48%;height:100%;max-height:100%;max-width:none;padding:clamp(8px,1.5cqw,18px);border:0;border-right:1px solid var(--line);background:#fff;color:#202733;overflow:hidden}.car-garage[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(4px,1cqw,12px)}
.garage-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}.garage-heading h2{font-size:clamp(14px,2.3cqw,22px);font-weight:600;letter-spacing:-.025em;margin:0 0 5px}.garage-heading p{font-size:clamp(11px,1.4cqw,14px);color:var(--muted);line-height:1.4;margin:0}.garage-close{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:0;background:transparent;border-radius:6px;color:#45536a}.garage-close svg{width:20px;height:20px}.garage-close:hover{background:#eef1f5}
.garage-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aab6c7 #edf1f6;min-height:0}.garage-car{display:grid;grid-template-columns:clamp(64px,11cqw,104px) minmax(0,1fr) 18px;align-items:center;gap:clamp(6px,1.2cqw,12px);width:100%;min-height:clamp(54px,8.5cqw,92px);padding:6px;border:0;border-bottom:1px solid var(--line);background:white;color:inherit;text-align:left}.garage-car:hover{background:#f3f6fa}.garage-car[aria-pressed=true]{background:#edf4ff}.garage-car img{width:100%;height:clamp(38px,6.8cqw,68px);object-fit:contain}.garage-car strong{display:block;font-size:clamp(12px,1.5cqw,14px);font-weight:600;line-height:1.3}.garage-car small{display:block;margin-top:4px;font-size:clamp(10px,1.2cqw,12px);line-height:1.4;color:var(--muted)}.garage-car svg{width:18px;height:18px;color:var(--blue);visibility:hidden}.garage-car[aria-pressed=true] svg{visibility:visible}.garage-car[aria-busy=true] small{visibility:hidden}.garage-car[aria-busy=true] span:after{content:'Loading…';display:block;font-size:11px;color:var(--muted);margin-top:-16px}.garage-status{font-size:clamp(10px,1.2cqw,12px);color:var(--muted);line-height:1.4;margin:0}
@container(max-width:520px){.car-garage{width:88%}.garage-heading h2{margin:0}.garage-heading p{display:none}.garage-car small{display:none}.garage-status{font-size:10px}}

.intro-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}
@media(max-width:520px){.intro{align-items:flex-start;flex-direction:column;gap:18px}.intro-actions{width:100%;justify-content:space-between}}

/* Companion preferences share the care menu and the persisted sidebar state. */
.menu-settings{border-top:1px solid #424751;margin-top:1cqw;padding:.8cqw 0}
.menu-volume{padding:.6cqw 0}
.menu-volume label{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:1.8cqw}
.menu-volume output{color:#c0c6cf;font-size:1.65cqw;font-variant-numeric:tabular-nums}
.menu-volume input{display:block;height:3.4cqw;margin:.2cqw 0 0}
.menu-setting{display:flex;align-items:center;justify-content:space-between;gap:1.5cqw;min-height:4.5cqw;font-size:1.8cqw;cursor:pointer}
.menu-setting input[type=checkbox][role=switch]{width:4.2cqw;height:2.6cqw;flex-basis:4.2cqw}
.menu-setting input[type=checkbox][role=switch]:before{width:1.8cqw;height:1.8cqw;left:.4cqw;top:.4cqw}
.menu-setting input[type=checkbox][role=switch]:checked:before{transform:translateX(1.6cqw)}
.display-column>.otto-menu{max-height:none;overflow:visible}
.display-column>.otto-menu .menu-settings{margin-top:12px;padding:8px 0}
.display-column>.otto-menu .menu-volume{padding:6px 0}
.display-column>.otto-menu .menu-volume label,.display-column>.otto-menu .menu-setting{font-size:14px}
.display-column>.otto-menu .menu-volume output{font-size:13px}
.display-column>.otto-menu .menu-volume input{height:44px;margin:2px 0 0}
.display-column>.otto-menu .menu-setting{min-height:44px;gap:16px}
.display-column>.otto-menu .menu-setting input[type=checkbox][role=switch]{width:36px;height:22px;flex-basis:36px}
.display-column>.otto-menu .menu-setting input[type=checkbox][role=switch]:before{width:16px;height:16px;left:3px;top:3px}
.display-column>.otto-menu .menu-setting input[type=checkbox][role=switch]:checked:before{transform:translateX(14px)}

/* Website presentation: display plus simple driving controls, without the test lab. */
html:has(body.website-embed){background:#101a21}
body.website-embed{background:#101a21;color:#eaf1f7}
.website-embed .topbar,.website-embed .intro,.website-embed .controls,.website-embed .how-to,.website-embed .motion-study,.website-embed .demo-note,.website-embed footer{display:none}
.website-embed main{padding:0;margin:0;max-width:none}
.website-embed .workspace{display:block}
.website-embed .display-topline{font-size:11px;padding:0 2px 10px}
.website-embed .display-topline>span:last-child{font-size:10px}
.website-embed .device{padding:12px 12px 0;border-radius:16px}
.website-embed .bezel-label{height:30px;line-height:30px;font-size:14px}
.website-embed .bezel-label span{padding-top:7px}
.website-embed .display-caption{padding:12px 0;border-bottom:0}
.website-embed #state-detail{display:none}
.website-simulator-controls{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px 20px;padding:14px 0 0}
.website-simulator-controls .scenes{margin:0;align-self:center}
.website-simulator-controls .scenes button{min-height:44px;font-size:12px;padding:8px 5px}
.website-speed .range-label{font-size:12px;gap:8px}
.website-speed .range-label output{font-size:16px}
.website-speed input{display:block;margin:0;height:34px}
.website-simulator-actions{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:12px}
.website-simulator-actions .text-button{min-height:40px;font-size:12px}
.website-simulator-hint{margin:0;padding:0 0 8px;color:#626d7c;font-size:11px;line-height:1.6}
.website-embed .display-column>.otto-menu{margin:12px 0 0}
@media(max-width:420px){.website-simulator-controls{grid-template-columns:1fr;gap:10px}.website-simulator-actions{grid-column:auto}.website-speed input{height:44px}.website-embed .display-topline{font-size:10px}.website-embed .display-topline>span:last-child{font-size:9px}}

.website-embed .display-topline,.website-embed .display-caption,.website-embed .text-button{color:#c0d0dd}
.website-embed .muted,.website-embed .display-topline>span:last-child{color:#9dafbf}
.website-embed .scenes{background:#1c2a35}
.website-embed .scenes button{color:#b9cad8}
.website-embed .scenes button.active{color:#1765ba;background:#f1f5f8}
.website-embed .website-simulator-hint{color:#a6b7c5}

/* Otto’s own short outings face the direction of travel, including scarf and occupant. */
.otto-car[data-outing=driving]{transition:scale 180ms ease-in-out;will-change:left}
.otto-car[data-outing=driving][data-direction=right]{scale:-1 1}
@media(prefers-reduced-motion:reduce){.otto-car[data-outing=driving]{transition:none;will-change:auto}}

/* Physical PD-Display enclosure: 105 × 70 mm. Keep the 16:9 dashboard intact. */
.display-column{width:100%;max-width:10.5cm;margin-inline:auto}
.display-column .device{width:100%;aspect-ratio:3/2;padding:0;border-radius:14px}
.device>.screen{position:absolute;left:3%;top:5%;width:94%;aspect-ratio:16/9}
.display-column .bezel-label{position:absolute;left:0;bottom:3%;width:100%;height:10%;font-size:12px;line-height:1}
.display-column .bezel-label span{padding-top:0;font-size:6px;align-self:center}