:root{font-family:"Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;color:#243b50;background:#edf1f4;font-synthesis:none;--ink:#243b50;--blue:#265d8b;--muted:#627789;--line:#d5dfe6;--paper:#ffffff;--field:#edf1f4}
*{box-sizing:border-box}body{margin:0}button{font:inherit}button:focus-visible,#viewport:focus-visible{outline:3px solid #508dc0;outline-offset:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}.workspace{position:relative;height:100vh;height:100dvh;min-height:420px;overflow:hidden}#viewport{position:absolute;inset:0;outline:none}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.masthead{position:absolute;top:32px;left:36px;display:flex;gap:16px;align-items:center;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:700;margin:0 0 5px}.masthead h1{font-family:"Yu Gothic","Meiryo",sans-serif;font-size:22px;letter-spacing:.025em;margin:0;font-weight:600}.masthead h1 span{font-family:Consolas,monospace;color:var(--blue);font-size:12px;letter-spacing:.04em;margin-left:13px;vertical-align:middle;border:1px solid #b4c9d8;padding:3px 5px}.school-mark{height:42px;width:39px;display:flex;gap:5px;align-items:center;transform:skewY(-15deg)}.school-mark span{height:31px;width:8px;background:var(--blue);border-radius:2px}.school-mark span:nth-child(2){height:42px}.school-mark span:last-child{height:23px;align-self:flex-end}.local-label{position:absolute;right:34px;top:43px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.local-label i{width:5px;height:5px;border-radius:50%;background:#7d97a9}.view-tools{position:absolute;right:30px;top:50%;transform:translateY(-50%);padding:13px 8px 8px;width:78px;background:#fffffff0;border:1px solid #fff;box-shadow:0 10px 38px #27465b0b;border-radius:14px}.tool-label{font-size:10px;letter-spacing:.14em;text-align:center;color:var(--muted);margin:0 0 7px}.view-tools button{border:0;border-radius:9px;width:60px;min-height:57px;padding:8px 3px;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;color:var(--muted);font-size:10px;transition:background .15s,color .15s}.view-tools button:hover:enabled{background:#f0f5f8;color:var(--blue)}.view-tools button[aria-pressed=true]{background:#e5eef5;color:var(--blue)}.view-tools svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}.tool-divider{height:1px;background:var(--line);margin:8px 8px}.model-info{position:absolute;left:36px;bottom:69px;max-width:min(470px,calc(100% - 160px));padding-left:15px;border-left:2px solid #93afc3;pointer-events:none;text-shadow:0 1px 4px var(--field)}.info-heading{display:flex;align-items:center;gap:8px;font-size:12px}.status-dot{width:6px;height:6px;border-radius:50%;background:#99a8b5;flex-shrink:0}.status-dot.ready{background:#387b69}.info-tag{font-size:9px;letter-spacing:.04em;border:1px solid #bacbd6;padding:2px 5px;color:var(--muted);white-space:nowrap}.model-info p{color:var(--muted);font-size:11px;line-height:1.9;margin:8px 0 0;max-width:400px}.model-info dl{display:flex;gap:18px;font-size:10px;color:var(--muted);margin:9px 0 0}.model-info dl div{display:flex;gap:5px}.model-info dt,.model-info dd{margin:0}.model-info dd{font-family:Consolas,monospace;color:var(--ink)}.interaction-help{position:absolute;bottom:0;left:0;right:0;height:43px;border-top:1px solid #cfdbe4;background:#edf1f4cc;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:10px;color:var(--muted);pointer-events:none}.interaction-help b{font-weight:500;color:#385166}.interaction-help em{font-style:normal;padding:0 12px;color:#97a9b5}.axis-label{font-family:Consolas,monospace;font-size:9px;letter-spacing:.16em}.touch-help{display:none}.loading-panel{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);text-align:center;width:min(450px,calc(100% - 190px));padding:32px 26px;background:#ffffffed;border:1px solid #fff;border-radius:16px;box-shadow:0 14px 64px #243b5008}.loading-panel[hidden]{display:none}.loading-panel .eyebrow{font-family:Consolas,monospace;font-size:10px;color:var(--muted);margin:18px 0 10px}.loading-panel h2{font-size:17px;font-weight:600;line-height:1.6;margin:0}.loading-panel p:not(.eyebrow){font-size:12px;line-height:1.9;color:var(--muted);margin:10px 0 0;overflow-wrap:anywhere}.loading-symbol{width:30px;height:30px;border:1px solid #b1c7d6;border-top:2px solid var(--blue);border-radius:50%;margin:auto;animation:spin 1.2s linear infinite}.loading-panel.error .loading-symbol{animation:none;border-radius:5px;border:1px solid #a6b9c6;transform:rotate(45deg)}progress{display:block;height:3px;width:100%;border:0;accent-color:var(--blue);margin:24px 0 0}progress[hidden]{display:none}progress::-webkit-progress-bar{background:#e5edf2}progress::-webkit-progress-value{background:var(--blue)}.retry{border:1px solid #b4c9d8;color:var(--blue);background:#f5f8fa;padding:9px 18px;border-radius:6px;margin:20px 0 0;font-size:12px}.toast{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);background:var(--ink);color:white;padding:10px 16px;border-radius:8px;font-size:12px;max-width:90%;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.masthead{top:22px;left:20px;gap:12px}.masthead h1{font-size:18px}.masthead .eyebrow{font-size:10px}.school-mark{transform:scale(.8) skewY(-15deg);width:30px}.local-label{display:none}.view-tools{top:auto;bottom:51px;left:50%;right:auto;transform:translateX(-50%);display:flex;gap:3px;width:auto;padding:7px;border-radius:13px}.tool-label{display:none}.view-tools button{width:49px;min-height:51px;padding:6px 0;font-size:9px}.view-tools svg{height:20px;width:20px}.tool-divider{width:1px;height:32px;margin:10px 3px}.model-info{left:22px;bottom:133px;max-width:calc(100% - 44px)}.model-info p{font-size:10px;max-width:340px;line-height:1.65}.info-heading{font-size:11px}.model-info dl{gap:12px}.interaction-help{padding:0 20px;font-size:9px}.desktop-help{display:none}.touch-help{display:inline}.loading-panel{top:42%;width:calc(100% - 42px);max-width:430px;padding:27px 20px}.loading-panel h2{font-size:16px}.toast{bottom:117px}}
@media(max-height:620px) and (min-width:701px){.view-tools{display:flex;width:auto;top:26px;right:24px;transform:none;padding:6px;gap:2px}.view-tools .tool-label{display:none}.view-tools button{width:50px;min-height:48px}.tool-divider{width:1px;height:30px;margin:9px 4px}.local-label{display:none}.masthead h1{font-size:17px}.masthead{left:22px;top:26px}.loading-panel{top:47%;padding:18px}.model-info{bottom:60px;left:22px}.loading-symbol{width:20px;height:20px}}
.model-info{background:#edf1f4ed;padding:12px 15px;border-radius:0 8px 8px 0;text-shadow:none}
.masthead{padding:12px 16px;background:#edf1f4ed;border-radius:12px;top:20px;left:20px}
.local-label{top:32px;right:30px}
.local-label button{display:flex;align-items:center;gap:8px;border:1px solid #ffffffb0;background:#edf1f4ed;border-radius:22px;padding:10px 15px;font-size:11px;color:#243b50}
.local-label button[aria-pressed=true]{background:#f1f7f7f2;border-color:#9ebcbe}
.local-label svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
@media(max-width:700px){.masthead{top:14px;left:12px;padding:10px 12px}.local-label{display:block;top:95px;right:16px}.local-label button{font-size:10px;padding:7px 10px}}
@media(max-height:620px) and (min-width:701px){.local-label{display:block;top:95px;right:25px}}
@media(max-width:360px){.view-tools{gap:1px;padding:5px}.view-tools button{width:44px}.tool-divider{margin:10px 1px}.info-heading{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.motorcycle-panel{position:absolute;left:36px;bottom:69px;padding:18px 20px;background:#edf1f4f2;border:1px solid #ffffffb0;border-radius:12px;max-width:calc(100% - 156px);box-shadow:0 8px 30px #18344a0a}.motorcycle-panel[hidden]{display:none}.motorcycle-panel .eyebrow{font-family:Consolas,monospace;color:var(--blue);font-size:10px}.motorcycle-panel h2{font-size:17px;margin:3px 0 0}.motorcycle-caption{font-size:11px;color:var(--muted);margin:8px 0 13px}.motorcycle-angles{display:flex;gap:5px}.motorcycle-angles button{border:1px solid #ccd9e2;background:#fff;color:var(--ink);border-radius:6px;padding:7px 10px;font-size:11px}.motorcycle-angles button[aria-pressed=true]{background:#265d8b;color:#fff;border-color:#265d8b}.instructor-switch{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;cursor:pointer}.instructor-switch input{accent-color:#265d8b;width:15px;height:15px}.motorcycle-focus .model-info{display:none}
@media(max-width:700px){.view-tools{max-width:calc(100% - 16px);gap:1px;padding:5px}.view-tools button{width:43px;flex-shrink:1;min-width:35px}.tool-divider{margin:10px 1px}.motorcycle-panel{left:16px;bottom:128px;padding:12px 14px;max-width:calc(100% - 32px)}.motorcycle-panel h2{font-size:14px}.motorcycle-panel .motorcycle-caption{display:none}.motorcycle-angles{margin-top:10px}.motorcycle-angles button{padding:6px 9px;font-size:10px}.instructor-switch{margin-top:9px;font-size:10px}}

.drive-focus .model-info,.drive-focus .motorcycle-panel{display:none}.drive-panel{position:absolute;left:28px;bottom:66px;width:350px;max-width:calc(100% - 155px);padding:18px;background:#f2f6f8f5;border:1px solid #fff;border-radius:12px;box-shadow:0 8px 30px #17344a18}.drive-panel[hidden]{display:none}.drive-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.drive-heading h2{font-size:15px;margin:6px 0;line-height:1.5}.drive-heading .eyebrow{color:var(--blue)}.speed-readout{display:flex;align-items:baseline;gap:5px}.speed-readout strong{font:32px Consolas,monospace;font-variant-numeric:tabular-nums}.speed-readout span{font-size:10px;color:var(--muted)}#drive-state{font-size:11px;color:var(--muted);min-height:17px;margin:8px 0}#drive-progress{margin:8px 0 14px;height:3px}.drive-panel button,.drive-panel select{font:inherit;font-size:11px;border:1px solid #bbcdd9;border-radius:6px;padding:7px 9px;color:var(--ink);background:#fff}.drive-actions{display:flex;gap:6px;align-items:center}.drive-actions label{font-size:10px;margin-left:auto;display:flex;align-items:center;gap:4px}#drive-play{background:var(--blue);color:white;border-color:var(--blue);min-width:83px}.drive-actions select{padding:6px 2px}.drive-camera{display:flex;gap:6px;margin:12px 0 4px}.drive-camera button[aria-pressed=true]{background:#e0edf6;border-color:#5483a6}.drive-settings{font-size:11px;margin-top:13px}.drive-settings summary{cursor:pointer;color:var(--blue);padding:4px 0}.drive-settings label{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}.drive-settings select{max-width:218px;width:65%}.drive-settings p,.drive-results{font-size:10px;color:var(--muted);line-height:1.7}.drive-results:empty{display:none}.drive-settings label:has(input){justify-content:flex-start}.drive-settings input{accent-color:var(--blue)}.drive-panel select:focus-visible{outline:3px solid #508dc0;outline-offset:2px}
@media(max-width:700px){.drive-panel{left:12px;bottom:124px;max-width:calc(100% - 24px);width:350px;padding:12px 14px}.drive-heading h2{font-size:13px}.drive-heading .eyebrow{font-size:9px}.speed-readout strong{font-size:27px}.drive-camera{margin-top:8px}.drive-settings{margin-top:5px}.drive-settings[open]{max-height:180px;overflow:auto}.view-tools button{min-width:31px;width:39px}.view-tools{width:calc(100% - 16px);justify-content:center}.drive-focus .local-label{display:none}}
@media(max-height:660px){.drive-panel{bottom:54px;padding:12px}.drive-settings[open]{max-height:150px;overflow:auto}}

.drive-actions{flex-wrap:wrap}.drive-panel button:disabled{opacity:.45;cursor:default}.drive-playback{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;font-size:10px;color:var(--muted)}.drive-playback label{display:flex;align-items:center;gap:6px}.drive-playback output{font:12px Consolas,monospace;font-variant-numeric:tabular-nums;margin-left:6px;color:var(--ink)}#drive-direction[aria-pressed=true]{background:#e0edf6;border-color:#5483a6}

.drive-camera-label{display:block;margin:14px 0 6px;font-size:11px;font-weight:600;color:var(--blue)}#drive-camera-select{width:100%;padding:9px}.drive-camera{margin:7px 0 0}.drive-camera button{flex:1;padding:7px 4px}.camera-note{font-size:10px;color:var(--muted);line-height:1.6;margin:7px 0 10px;min-height:32px}#drive-clean{width:100%;background:transparent;text-align:left;color:var(--blue)}kbd{font:10px Consolas,monospace;border:1px solid #bbcad6;border-radius:3px;padding:1px 4px;margin-left:6px;color:var(--muted)}#drive-clean kbd{float:right}.drive-panel{max-height:calc(100dvh - 175px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}.show-controls{position:absolute;right:24px;bottom:24px;padding:10px 15px;border:1px solid #bbcad6;border-radius:7px;background:#f2f6f8ed;color:var(--ink);font-size:11px;transition:opacity .3s}.show-controls[hidden]{display:none}.shooting .masthead,.shooting .local-label,.shooting .view-tools,.shooting .drive-panel,.shooting .model-info,.shooting .interaction-help{display:none}.shooting #viewport:focus-visible{outline:none}.shooting-idle .show-controls{opacity:0}.shooting-idle .show-controls:focus-visible,.shooting-idle .show-controls:hover{opacity:1}.shooting .toast{bottom:24px}
@media(max-width:700px){.drive-panel{max-height:calc(100dvh - 240px)}.camera-note{min-height:0}.drive-camera-label{margin-top:10px}.show-controls{right:12px;bottom:12px}}
@media(max-height:660px) and (min-width:701px){.drive-panel{max-height:calc(100dvh - 160px)}}