:root{--bg:#081422;--bg2:#101f31;--bg3:#06172a;--blue:#51b8f2;--green:#35cf83;--amber:#f3ad3d;--red:#f05252;--text:#f5f9fd;--muted:#a6bad0;--border:#2b4057;--radius:14px;font-family:Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.app-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px clamp(14px,4vw,48px);border-bottom:1px solid var(--border);background:var(--bg3)}h1,h2,h3,p{margin:0}h1{font-size:clamp(26px,4vw,40px)}h2{font-size:20px;line-height:1.2}.eyebrow{color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.11em;margin-bottom:5px}.subhead{color:var(--muted);margin-top:6px;line-height:1.4}.prototype-state{padding:10px 13px;border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:12px;text-align:right}.prototype-state strong{display:block;color:var(--amber);margin-top:3px}main{padding:18px clamp(10px,3vw,34px) 40px;max-width:1800px;margin:auto}.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.toolbar{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(220px,1fr) 190px;gap:12px;margin-bottom:14px}.toolbar label,.diagram-nav label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:800}input,select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#071a2c;color:var(--text)}input:focus,select:focus{outline:3px solid rgba(81,184,242,.28);border-color:var(--blue)}.scan-row{display:grid;grid-template-columns:1fr auto;gap:8px}.btn{min-height:48px;padding:10px 15px;border-radius:8px;border:1px solid var(--border);font-weight:900;cursor:pointer}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:#e7f5ff;color:#08233d;border-color:#b9ddf5}.btn-green{background:var(--green);color:#041a11;border-color:#62e6a4}.btn-ghost{background:transparent;color:var(--text)}.workspace{display:grid;grid-template-columns:minmax(230px,280px) minmax(420px,1fr) minmax(290px,360px);gap:14px;align-items:start}.diagram-nav{display:grid;gap:14px;position:sticky;top:10px}.family-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.family-tab{min-height:48px;border:1px solid var(--border);background:transparent;color:var(--text);font-weight:900;border-radius:8px;cursor:pointer}.family-tab.active{background:var(--blue);color:#062038;border-color:var(--blue)}.diagram-summary{font-size:13px;line-height:1.45;color:var(--muted)}.part-index summary{font-weight:900;cursor:pointer}.part-index>div{display:grid;gap:6px;margin-top:10px;max-height:46vh;overflow:auto}.index-part{display:grid;grid-template-columns:42px 1fr;gap:8px;text-align:left;padding:8px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text);cursor:pointer}.index-part strong{color:var(--blue)}.index-part span{font-size:12px;line-height:1.35}.diagram-card{min-width:0}.diagram-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}.zoom-actions{display:flex;gap:6px}.zoom-actions .btn{width:auto;min-width:48px}.diagram-help{color:var(--muted);font-size:13px;margin:8px 0 12px}.diagram-viewport{width:100%;height:min(72vh,900px);overflow:auto;background:#dfe8ef;border-radius:10px;touch-action:pan-x pan-y}.diagram-stage{position:relative;transform-origin:top left;width:max-content}.diagram-stage img{display:block;max-width:none;background:#fff}.hotspots{position:absolute;inset:0}.hotspot{position:absolute;transform:translate(-50%,-50%);min-width:34px;min-height:34px;border-radius:50%;border:3px solid rgba(23,105,166,.88);background:rgba(81,184,242,.18);color:#06172a;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.75)}.hotspot:hover,.hotspot:focus{background:#51b8f2;outline:3px solid #08233d;z-index:3}.part-panel{position:sticky;top:10px}.empty-state{padding:28px 10px;text-align:center;color:var(--muted)}.empty-state strong{display:block;color:var(--text);font-size:18px;margin-bottom:7px}.part-title-row,.dialog-head{display:flex;justify-content:space-between;align-items:start;gap:10px}.icon-btn{width:48px;height:48px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--text);font-size:28px;cursor:pointer}.part-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.part-facts div{padding:10px;border:1px solid var(--border);border-radius:8px}.part-facts dt{font-size:10px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.part-facts dd{margin:5px 0 0;font-weight:900}.notice{padding:11px;border-radius:8px;margin:10px 0;font-size:12px;line-height:1.45}.warning{border:1px solid var(--amber);background:rgba(243,173,61,.12);color:#ffd48b}.stock-block{padding-top:13px;margin-top:13px;border-top:1px solid var(--border)}.stock-block h3{font-size:14px;margin-bottom:8px}.stock-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:var(--muted);font-size:13px}.stock-row strong{color:var(--text)}.primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.part-panel>.btn,#part-detail>.btn{width:100%;margin-top:8px}.source-line{margin-top:13px;color:var(--muted);font-size:11px;line-height:1.4}.search-results{position:relative;z-index:5;margin:-5px 0 14px;padding:10px;background:var(--bg2);border:1px solid var(--blue);border-radius:10px;display:grid;gap:6px}.search-result{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.search-result span{color:var(--muted);font-size:12px}.integration{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:14px}.integration p:last-child{color:var(--muted);line-height:1.45;margin-top:6px;max-width:900px}dialog{width:min(560px,calc(100vw - 20px));max-height:92dvh;overflow:auto;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--bg2);color:var(--text)}dialog::backdrop{background:rgba(0,0,0,.72)}dialog form{padding:20px}.dialog-field{display:grid;gap:6px;margin-top:12px;color:var(--muted);font-size:12px;font-weight:800}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.dialog-error{min-height:20px;color:#ffaaaa;font-size:13px;margin-top:10px}.manager-only[hidden]{display:none!important}
@media(max-width:1120px){.workspace{grid-template-columns:250px 1fr}.part-panel{grid-column:1/-1;position:static}.part-facts{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.app-header{align-items:flex-start;padding:16px}.prototype-state{display:none}main{padding:12px 9px 30px}.toolbar{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.diagram-nav{position:static}.diagram-card{padding:12px}.diagram-viewport{height:64vh}.part-panel{grid-column:auto}.part-facts{grid-template-columns:1fr 1fr}.integration{align-items:stretch;flex-direction:column}.integration .btn{width:100%}.primary-actions{grid-template-columns:1fr}.zoom-actions .btn{min-height:48px}.part-index>div{max-height:35vh}.app-header h1{font-size:27px}}

/* Precise diagram markers: compact visually, with an invisible 44px tap area. */
.hotspot{width:26px;height:26px;min-width:26px;min-height:26px;padding:0;border:2px solid #1769a6;background:rgba(255,255,255,.94);color:#08233d;font-size:10px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.hotspot::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.hotspot:hover,.hotspot:focus-visible{background:#51b8f2;outline:3px solid rgba(8,35,61,.9);outline-offset:2px;z-index:3}
.hotspot.reference-only{border-color:#a76300;background:#fff8e8;color:#744500;border-style:dashed}.hotspot.reference-only:hover,.hotspot.reference-only:focus-visible{background:#ffd996}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.diagram-help{line-height:1.45}.diagram-help strong{color:var(--text)}
.guidance-row{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}.guidance-row strong{color:var(--text);text-align:right}.catalog-guidance p{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}.catalog-guidance p strong{color:var(--text)}

.brand-lockup{display:flex;align-items:center;gap:18px}.brand-logo{width:112px;height:92px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}.taste-test{display:grid;grid-template-columns:minmax(240px,1fr) minmax(360px,1.6fr) auto;align-items:center;gap:18px;margin-bottom:14px;border-color:#2e6f96}.taste-test ol{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none;counter-reset:step}.taste-test li{position:relative;padding:10px 10px 10px 38px;color:var(--muted);font-size:13px;line-height:1.35}.taste-test li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#062038;font-weight:900}@media(max-width:900px){.taste-test{grid-template-columns:1fr}.taste-test ol{grid-template-columns:1fr}.brand-logo{width:86px;height:72px}}@media(max-width:520px){.brand-lockup{gap:10px}.brand-logo{width:68px;height:58px}}