/* Controls occupy their own rows; they never cover the diagram. */
.vehicle-picker{max-width:100%;font-size:14px}.vehicle-overview{background:#fff;color:#16212c;padding:20px;border-radius:12px;margin-bottom:20px}.vehicle-overview>img{height:280px;background:#0b1015;object-fit:contain}.vehicle-overview p{margin:12px 0;line-height:1.5}.wheel-shortcuts{display:flex;flex-wrap:wrap;gap:8px}.model-credit{font-size:12px}.model-credit a{color:#175581}.app-head{flex-wrap:wrap}.frame-controls{flex-wrap:wrap}.frame-controls .notice{font-size:12px}
.load-error{max-width:700px;padding:32px}.load-error h1{font-size:24px}.load-error p{line-height:1.5;margin:16px 0}
.catalog-link{display:block;color:#ffbd9d;font-size:14px;line-height:1.4;padding:10px 0}.catalog-link:focus-visible{outline:3px solid #ff8a60}.image-dialog .image-surface{touch-action:none}
.image-open{display:block;width:100%;padding:0;margin-top:12px;overflow:hidden;background:#e8e9ea;color:#18212a;text-align:center}.image-caption{display:block;font-size:14px;padding:8px}.image-dialog{width:94vw;max-width:1500px;height:90dvh;max-height:100dvh;padding:0;border:1px solid #46515d;border-radius:12px;background:#151b21;color:#edf0f2}.image-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.image-dialog::backdrop{background:#000b}.image-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px}.image-toolbar h2{font-size:18px;flex:1;min-width:150px}.image-toolbar output{min-width:48px;text-align:center;font-size:14px}.image-surface{min-width:0;min-height:0;overflow:auto;padding:24px;background:#e8e9ea;overscroll-behavior:contain;touch-action:pan-x pan-y}.image-canvas{margin:0 auto}.image-canvas>.tile-image,.image-canvas>.detail-image{display:block;width:100%;height:100%;max-height:none;border-radius:0;pointer-events:none;user-select:none;object-fit:contain}.image-note{font-size:13px;padding:10px 16px;color:#ffc4aa}
:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#edf0f2;background:#0d1115;font-size:16px}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit;background:#20272f;border:1px solid #3d4651;border-radius:9px;padding:10px 13px;cursor:pointer}button:hover,button[aria-pressed=true]{border-color:#ff693e;background:#512b23}button:focus-visible,select:focus-visible{outline:3px solid #ff8a60;outline-offset:2px}button:disabled{opacity:.4;cursor:default}button,select{min-height:44px}h1,h2,p{margin:0}#app{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}.app-head{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #333b44;gap:12px}.brand{font-weight:750;letter-spacing:.05em}.meta{font-size:13px;color:#abb4bc}.mode-tabs{display:flex;gap:6px;overflow-x:auto;padding:9px 16px;border-bottom:1px solid #333b44}.mode-tabs button{white-space:nowrap;font-size:14px}.workspace{min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr)}.systems{min-height:0;overflow:auto;border-right:1px solid #333b44;padding:12px;display:flex;flex-direction:column;gap:7px}.systems button{text-align:left;font-size:14px;flex-shrink:0}.work-main{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;background:#151b21;border-bottom:1px solid #333b44}.toolbar h1{font-size:17px;flex:1;min-width:140px}.zoom-controls{display:flex;gap:5px;align-items:center}.zoom-controls output{font-size:13px;min-width:40px;text-align:center}.content{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr)}.content.has-detail{grid-template-columns:minmax(0,1fr) 310px}.viewport{min-width:0;min-height:0;overflow:auto;background:#e8e9ea;overscroll-behavior:contain;padding:24px;touch-action:pan-x pan-y}.diagram{position:relative;margin:0 auto;flex-shrink:0}.diagram>img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}.spot{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;min-height:40px;padding:0;background:rgba(255,245,236,.95);color:#171717;border:2px solid #ed562c;border-radius:50%;font:bold 12px system-ui;box-shadow:0 2px 8px #0003}.spot:hover{background:#ff784a}.detail{overflow:auto;padding:16px;border-left:1px solid #333b44;min-height:0;background:#11171d}.detail h2{font-size:21px;line-height:1.2;margin:12px 0}.detail p{font-size:14px;color:#b4bec7;line-height:1.5;margin:10px 0}.detail dl{font-size:14px;display:grid;gap:10px}.detail dt{color:#9aa7b3;font-size:12px}.detail dd{margin:2px 0 0}.detail .wide{width:100%;margin-top:10px}.tile-image{display:block;width:100%;aspect-ratio:3/2;border-radius:8px;background-repeat:no-repeat;background-color:#eceeef;background-size:300% 300%}.detail-image{width:100%;max-height:190px;object-fit:contain;background:#e8e9ea;border-radius:8px}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;align-content:start}.part-card{padding:0;overflow:hidden;background:#fff;color:#17202a;border:1px solid #c3c9ce;text-align:left}.part-card:hover{background:#fff5ef}.card-label{padding:12px;display:block;line-height:1.35;font-size:14px}.card-label small{display:block;color:#65707a;font-size:12px;margin-top:5px}.context-image{width:100%;aspect-ratio:3/2;object-fit:contain;background:#e8e9ea}.footer{padding:8px 16px;border-top:1px solid #333b44;color:#b3bdc7;font-size:12px;display:flex;justify-content:space-between;gap:10px}.footer strong{color:#ffc4aa;font-weight:500}.breadcrumb{font-size:13px;color:#a9b5bf}.empty{color:#344250;padding:24px;line-height:1.6}.frame{width:100%;height:100%;border:0}.frame-controls{padding:8px;display:flex;gap:8px;align-items:center;background:#151b21}.frame-controls input{width:160px}.mobile-select{display:none}.notice{font-size:13px;color:#aebbc6}.demo-badge{font-size:12px;background:#593a24;color:#ffe2bc;padding:4px 8px;border-radius:20px}
@media(max-width:1000px){.workspace{grid-template-columns:190px minmax(0,1fr)}.content.has-detail{grid-template-columns:minmax(0,1fr) 260px}.app-head{padding:10px 14px}.gallery{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
@media(max-width:720px){.app-head .meta{display:none}.workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.systems{display:none}.mobile-select{display:block;width:100%;border-radius:0;border-width:0 0 1px;background:#151b21}.content.has-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,1fr) minmax(0,40%)}.detail{border-left:0;border-top:1px solid #333b44}.detail-image,.detail>.tile-image{width:140px;float:right;margin:0 0 10px 12px}.toolbar{padding:8px}.toolbar h1{font-size:15px}.toolbar button{padding:7px 10px}.viewport{padding:22px}.footer{font-size:11px}.footer span:last-child{display:none}.mode-tabs{padding:6px}.mode-tabs button{font-size:13px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card-label{padding:9px;font-size:13px}}

/* Touch-sized markers remain inside the scrollable illustration surface. */
.spot{width:44px;height:44px;min-height:44px}.spot[aria-pressed=true]{background:#ff784a;border-color:#9a2e10;color:#111}


.part-picker{flex-basis:100%;width:100%;font-size:13px}.diagram-inset{position:absolute;transform:translate(-50%,-50%);width:15%;border:1px solid #b9c0c5;border-radius:8px;background:#fff;padding:4px;pointer-events:none}.diagram-inset .tile-image{border-radius:4px}