/* Digital Agency Design System inspired tokens; research/ui-design-system.json. */
:root{font-family:"Noto Sans JP","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;color:#1a1a1a;background:#fff;font-synthesis:none;font-size:100%;--blue:#0017c1;--blue-hover:#00118f;--blue-active:#000060;--blue-light:#e8f1fe;--text:#1a1a1a;--muted:#595959;--line:#d9d9d9;--focus:#ffd43d}
*{box-sizing:border-box}body{margin:0;font-size:1rem;line-height:1.7;letter-spacing:.02em}[hidden]{display:none!important}
button,input,select{font:inherit;letter-spacing:inherit}button,summary,select{cursor:pointer}
button{min-height:48px;padding:8px 16px;border:1px solid var(--blue);border-radius:8px;background:#fff;color:var(--blue);font-weight:700;line-height:1.5}
button:hover{background:var(--blue-light);color:var(--blue-hover);text-decoration:underline;text-underline-offset:.2em}button:active{color:var(--blue-active)}
a{color:var(--blue);text-underline-offset:.2em;overflow-wrap:anywhere}a:hover{color:var(--blue-hover);text-decoration-thickness:2px}
:where(a,button,input,select,summary,canvas,[tabindex]):focus-visible{outline:4px solid #000;outline-offset:2px;box-shadow:0 0 0 2px var(--focus);z-index:6}
.skip-link{position:fixed;z-index:20;left:16px;top:0;transform:translateY(-150%);background:#fff;padding:12px 20px;font-weight:700}.skip-link:focus{transform:translateY(12px)}
.site-header{min-height:88px;padding:16px 32px;border-top:4px solid var(--blue);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:40px;background:#fff}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-size:1.25rem;font-weight:700;text-decoration:none;letter-spacing:.05em;white-space:nowrap}.brand>span:not(.brand-mark){font-weight:400}
.brand-mark{display:grid;place-items:center;background:var(--blue);color:#fff;width:36px;height:36px;border-radius:4px;font-size:1.5rem;margin-right:4px;letter-spacing:0}
.prototype{margin-left:auto;color:var(--muted);font-size:.875rem;white-space:nowrap}.prototype b{margin-left:12px;font-weight:400}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 416px;height:calc(100dvh - 137px);min-height:560px}
.stage{position:relative;min-width:0;background:#f5f5f5;overflow:hidden}
.vehicle-heading{position:absolute;top:28px;left:32px;right:24px;z-index:2;pointer-events:none}
.eyebrow{font-size:.875rem;color:var(--muted);font-weight:700;letter-spacing:.05em}
.vehicle-heading h1{font-size:clamp(1.75rem,2.6vw,2.25rem);font-weight:700;line-height:1.4;letter-spacing:.01em;margin:6px 0 8px}
.vehicle-heading p{font-size:.875rem;line-height:1.6;color:var(--muted);margin:0;max-width:38rem}
#canvas-wrap{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}canvas:focus-visible{outline-offset:-6px}
#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 24px;background:#fff;border:1px solid #666;border-radius:8px;max-width:85%;z-index:3}
.stage-toolbar{position:absolute;z-index:3;left:32px;bottom:72px;display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;max-width:calc(100% - 64px)}
.stage-toolbar button{min-width:56px;padding:8px 12px;border-color:transparent}.stage-toolbar button.active{background:var(--blue);color:#fff}.stage-toolbar button.active:hover{background:var(--blue-hover)}
.stage-toolbar #reset{border-color:#666;color:var(--text);margin-left:4px}
.stage-bottom{position:absolute;left:32px;right:24px;bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted);font-size:.875rem;pointer-events:none}.gesture{margin:0}
.scale-note{display:flex;flex-direction:column;text-align:right;font-size:.75rem;line-height:1.5}.scale-note strong{font-size:.875rem;color:var(--text);font-weight:400}
#hover-label{position:absolute;z-index:5;display:none;background:#1a1a1a;color:#fff;padding:8px 12px;border-radius:4px;font-size:.875rem;pointer-events:none;max-width:240px}
.drive-heading{display:none;position:absolute;z-index:2;left:24px;right:24px;top:24px;width:fit-content;max-width:calc(100% - 48px);padding:8px 16px;background:#fff;border-left:4px solid var(--blue);font-size:1rem;pointer-events:none}
body[data-focus-view=drive] .vehicle-heading{display:none}body[data-focus-view=drive] .drive-heading{display:block}
.parts-panel{min-width:0;overflow:auto;padding:24px;border-left:1px solid var(--line);scroll-padding:20px;background:#fff}
.panel-head h2{font-size:1.5rem;line-height:1.5;font-weight:700;margin:0 0 8px}.panel-head p{font-size:.875rem;color:var(--muted);margin:0}
.search{display:block;margin:24px 0 20px}.search-label{display:block;font-weight:700;margin-bottom:8px}
.search input{width:100%;height:48px;border:1px solid #666;border-radius:8px;padding:8px 16px;color:var(--text);background:#fff}.search input:hover{border-color:#1a1a1a}.search input::placeholder{color:#757575}
.selection{padding:16px;margin:24px 0;border-left:4px solid var(--blue);background:var(--blue-light);overflow-wrap:anywhere}
.selection-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.tiny-label{font-size:.875rem;font-weight:700;color:var(--text)}
.selection #clear-selection{font-size:.875rem;min-height:44px;padding:8px;background:transparent;border:0;text-decoration:underline}
.selection h3{font-size:1.25rem;line-height:1.5;margin:8px 0 12px}.selection p{margin:0;font-size:1rem;line-height:1.7}
body:not([data-selected-part]) .selection-title,body[data-selected-part=""] .selection-title{display:none}
body:not([data-selected-part]) .selection h3,body[data-selected-part=""] .selection h3{font-size:1rem;margin:0 0 4px}
body:not([data-selected-part]) .selection p,body[data-selected-part=""] .selection p{font-size:.875rem;color:var(--muted)}
#links{display:flex;flex-direction:column;gap:12px;margin-top:20px}#links:empty{margin:0}
#links a{display:block;min-height:48px;padding:12px 16px;border:1px solid var(--blue);border-radius:8px;background:var(--blue);color:#fff;text-align:center;font-weight:700;line-height:1.5;text-decoration:none}
#links a:hover{background:var(--blue-hover);text-decoration:underline}#links a.secondary{color:var(--blue);background:#fff}#links a.secondary:hover{background:var(--blue-light)}
.selection .fitment-note{font-size:.875rem;color:var(--muted);margin-top:16px}
.list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px}.list-heading h3{font-size:1.125rem;margin:0}.list-heading span{font-size:.875rem;color:var(--muted)}
.parts-list{display:flex;flex-direction:column;gap:8px}
.part-button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;color:var(--text);border-color:#b3b3b3;font-weight:400}
.part-button[aria-pressed=true]{background:var(--blue-light);border:2px solid var(--blue);padding:7px 15px;color:var(--blue);font-weight:700}
.part-dot{width:20px;height:20px;flex:none;border:1px solid #666;border-radius:50%;display:grid;place-items:center}
.part-button[aria-pressed=true] .part-dot{background:var(--blue);border-color:var(--blue)}
.part-button[aria-pressed=true] .part-dot::after{content:'';width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
details{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 4px;list-style:none;font-weight:700;line-height:1.6}
summary::-webkit-details-marker{display:none}summary::before{content:'';width:10px;height:10px;flex:none;margin:0 6px 4px 4px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg)}
details[open]>summary::before{transform:rotate(225deg);margin-top:8px}
summary:hover{color:var(--blue);text-decoration:underline;text-underline-offset:.2em;background:#f5f5f5}
.inspection{margin:0}.inspection-content{padding:8px 4px 20px}.cover-controls{display:flex;flex-direction:column;gap:12px}.cover-controls button{text-align:left}
.cover-controls button[aria-pressed=true]{background:var(--blue);color:#fff}.cover-controls button[aria-pressed=true]:hover{background:var(--blue-hover)}
.inspection p{font-size:.875rem;color:var(--muted);line-height:1.7;margin:16px 0 0}.inspection h3{font-size:1rem;margin:24px 0 0}
.inspection a,.reference-details a{display:block;margin-top:12px;font-size:.875rem}#focus-drive{margin-top:16px;width:100%}
.reference-details{margin-top:24px}.reference-details p{font-size:.875rem;line-height:1.8;margin:16px 4px;color:var(--muted)}#reference-links{padding:0 4px 20px}
#no-results{padding:20px;background:#f5f5f5;border-left:4px solid #666}
footer{min-height:49px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:12px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem}.footer-note{margin-left:auto}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 464px}.parts-panel{padding:32px}.vehicle-heading{top:32px}}
@media(min-width:1001px) and (max-width:1200px){.workspace{grid-template-columns:minmax(0,1fr) 368px}.stage-toolbar{left:16px;max-width:calc(100% - 32px);gap:4px}.stage-toolbar button{padding:8px}.scale-note{display:none}}
@media(max-width:1000px){
 .site-header{padding:16px 24px;gap:24px;flex-wrap:wrap}.prototype{display:none}.workspace{display:block;height:auto;min-height:0}
 .stage{height:75svh;min-height:520px;max-height:840px}.parts-panel{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:32px 24px}
 .parts-panel>*{max-width:720px;margin-left:auto;margin-right:auto}.parts-panel .panel-head{margin-bottom:0}.scale-note{display:none}footer{padding:16px 24px}.footer-note{margin-left:0}
}
@media(max-width:600px){
 .site-header{padding:12px 16px;gap:12px}.brand{font-size:1.125rem}.stage{min-height:570px;max-height:760px;height:80svh}
 .vehicle-heading{left:20px;right:20px;top:24px}.vehicle-heading h1{font-size:1.75rem}
 .stage-toolbar{left:16px;right:16px;bottom:76px;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:8px}
 .stage-toolbar button{min-width:0;padding:8px;font-size:1rem}.stage-toolbar #reset{margin-left:0}
 .stage-bottom{left:20px;right:20px;bottom:16px;line-height:1.6}.gesture{max-width:22rem}.parts-panel{padding:28px 20px}.panel-head h2{font-size:1.5rem}
 .drive-heading{left:16px;right:16px;max-width:calc(100% - 32px);font-size:.875rem}.list-heading{flex-wrap:wrap;gap:4px 12px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(forced-colors:active){.part-button[aria-pressed=true],.stage-toolbar button.active{outline:2px solid Highlight}.part-button[aria-pressed=true] .part-dot{background:Highlight}.part-button[aria-pressed=true] .part-dot::after{border-color:HighlightText}}