:root { --paper:#f3f5f7; --surface:#fff; --ink:#192029; --muted:#5e6977; --rule:#dce1e7; --dark:#151b22; --dark-raised:#242c36; --on-dark:#f3f5f7; --muted-dark:#9ba6b5; --accent:#f5762b; --accent-ink:#21150d; --focus:#a13e07; --hover:#eef1f4; --font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:ui-monospace,'SFMono-Regular',Consolas,monospace; }
* { box-sizing:border-box; } html,body { margin:0; } body { background:var(--paper); color:var(--ink); font:15px/1.6 var(--font); }
button,input,select { font:inherit; } button,a,summary,input { touch-action:manipulation; } button,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:1px solid var(--rule); border-radius:5px; background:var(--surface); color:var(--ink); transition:background .15s,border-color .15s; }
button:hover { background:var(--hover); border-color:#b5bfcb; } button:disabled { background:var(--hover);color:var(--muted);cursor:not-allowed; }
:focus-visible { outline:3px solid var(--focus);outline-offset:3px; } a { color:inherit;text-underline-offset:4px; } a:hover { text-decoration-thickness:2px; }
[hidden] { display:none!important; } img { max-width:100%; } h1,h2,h3,p { margin-top:0; } h1 { font-size:36px;font-weight:650;line-height:1.18;letter-spacing:-.025em;margin-bottom:14px; } h2 { font-size:21px;line-height:1.3; } h3 { font-size:17px; }
.skip { position:fixed;z-index:20;padding:12px 20px;background:white;transform:translateY(-120%); } .skip:focus {transform:translateY(0);}
.shell { display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh;max-width:1920px;margin:auto; }
.sidebar { background:var(--dark);color:var(--on-dark);padding:30px 18px 22px;display:flex;flex-direction:column;gap:30px;align-self:start;position:sticky;top:0;height:100vh;overflow:auto; }
.brand { display:flex;align-items:center;gap:12px;text-decoration:none;font-size:15px;font-weight:700;line-height:1.3; }
.brand-mark { display:grid;place-items:center;width:38px;height:38px;background:var(--accent);color:var(--accent-ink);font:600 15px var(--font-mono);border-radius:4px;flex-shrink:0; }
.brand small {display:block;color:var(--muted-dark);font-size:11px;font-weight:400;margin-top:5px;}
.rail-label { font:11px var(--font-mono);color:var(--muted-dark);margin-bottom:12px; } .sidebar nav {display:grid;gap:5px;}
.category {width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid transparent;text-align:left;background:transparent;color:var(--muted-dark);font-size:13px;min-height:44px;}
.category:hover {background:var(--dark-raised);color:white;border-color:transparent;} .category[aria-pressed=true] {background:#2a3139;color:white;border-color:#414a55;box-shadow:inset 3px 0 var(--accent);}
.category span:last-child {font:11px var(--font-mono);color:#9faab8;} .sidebar :focus-visible {outline-color:var(--accent);}
.rail-links {display:grid;gap:10px;padding:0 12px;font-size:13px;} .rail-links a {color:#c1cad5;text-decoration:none;} .rail-links a:hover {color:white;}
.legend {padding:0 12px;display:grid;gap:9px;font-size:12px;color:var(--muted-dark);} .legend div {display:flex;align-items:center;gap:9px;}
.swatch {display:inline-block;width:11px;height:11px;border:1px solid #77818c;background:white;border-radius:2px;flex-shrink:0;} .swatch.moving {background:var(--accent);border-color:var(--accent);} .swatch.extra {background:#6c7683;}
.scope-note {font-size:12px;color:var(--muted-dark);padding:18px 12px 0;margin:auto 0 0;border-top:1px solid #36404d;}
main {min-width:0;padding:0 36px 30px;} .topbar {display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px;border-bottom:1px solid var(--rule);margin-bottom:34px;font-size:13px;}
.topbar nav {display:flex;gap:22px;align-items:center;} .topbar a {text-decoration:none;color:var(--muted);} .topbar a:hover,.topbar a[aria-current=page] {color:var(--ink);}
.service-status {display:flex;align-items:center;gap:8px;font:11px var(--font-mono);color:var(--muted);}
.service-status:before {content:'';width:6px;height:6px;border-radius:50%;background:#a2aab5;} .service-status.online:before {background:#388769;}
.page-head {display:flex;justify-content:space-between;align-items:start;gap:28px;} .eyebrow {font:11px var(--font-mono);color:var(--muted);margin:0 0 12px;}
.intro {color:var(--muted);margin:0 0 26px;max-width:680px;font-size:14px;} .catalog-stats {display:flex;gap:24px;padding:5px 0 0;flex-shrink:0;} .catalog-stats div {min-width:56px;} .catalog-stats strong {display:block;font:500 27px var(--font-mono);line-height:1.3;} .catalog-stats span {display:block;color:var(--muted);font-size:11px;}
.toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;border-top:1px solid var(--rule);padding-top:22px;} .search {flex:1 1 300px;} .search label {display:block;font-size:12px;margin-bottom:7px;color:var(--muted);}
.search input {width:100%;height:44px;padding:9px 14px;border:1px solid #cdd4dd;border-radius:5px;background:var(--surface);color:var(--ink);font-size:14px;} .search input:hover {border-color:#8c98a7;}
.filters {display:flex;gap:18px;flex-wrap:wrap;align-self:end;} .filters label {display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;font-size:13px;} .filters input {width:16px;height:16px;accent-color:var(--ink);}
.results {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 14px;color:var(--muted);font-size:12px;} .reset {min-height:36px;padding:6px 12px;font-size:12px;}
.grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;}
.card {min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:7px;scroll-margin-top:18px;overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.card:hover {border-color:#aeb8c4;box-shadow:0 3px 12px #16243608;} .card summary {list-style:none;cursor:pointer;} .card summary::-webkit-details-marker {display:none;}
.thumbnail-wrap {position:relative;background:#f7f7f4;border-bottom:1px solid var(--rule);} .thumbnail {width:100%;aspect-ratio:520/285;display:block;object-fit:cover;}
.part-number {position:absolute;top:12px;left:14px;font:10px var(--font-mono);color:#6c747e;}
.cad-tag {position:absolute;top:10px;right:12px;font:10px var(--font-mono);padding:2px 6px;border:1px solid #ced4da;border-radius:3px;color:#55606c;background:#ffffffbd;}
.summary-copy {padding:17px 18px 16px;} .summary-title {font-size:17px;line-height:1.3;font-weight:620;margin:0 0 9px;overflow-wrap:break-word;} .card summary:hover .summary-title {color:#bd4c13;}
.summary-description {margin:0;font-size:13px;line-height:1.6;color:var(--muted);min-height:63px;}
.card-meta {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:9px;color:var(--muted);font-size:10px;margin-top:18px;padding-top:12px;border-top:1px solid #edf0f3;}
.open-label {color:var(--ink);font-size:12px;} .quick-model {color:#af4210;text-decoration:none;font-size:12px;font-weight:600;} .quick-model:hover {text-decoration:underline;}
.close-label {display:none;} .card[open] {grid-column:1/-1;border-color:#aab5c2;}
.card[open] .thumbnail-wrap {display:none;} .card[open] .summary-copy {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px;padding:24px 26px;border-bottom:1px solid var(--rule);}
.card[open] .summary-title {font-size:25px;grid-column:1;} .card[open] .summary-description {min-height:0;grid-column:1;max-width:740px;}
.card[open] .card-meta {grid-column:2;grid-row:1/3;margin:0;padding:0;border:0;flex-direction:column;align-items:end;}
.card[open] .card-meta>span:first-child,.card[open] .open-label {display:none;} .card[open] .close-label {display:inline;color:var(--muted);font-size:12px;}
.detail {padding:26px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:32px;} .visual,.explanation {min-width:0;}
.model-entry {margin:0 0 18px;font-size:13px;} .model-entry a,.file-link {display:inline-block;padding:10px 16px;background:var(--ink);border:1px solid var(--ink);border-radius:4px;color:white;text-decoration:none;font-size:13px;font-weight:550;}
.model-entry a:hover,.file-link:hover {background:#323e4d;} .view {font-size:12px;color:var(--muted);margin:0 0 10px;}
.stage-frame {width:100%;aspect-ratio:520/300;background:#f7f7f4;border:1px solid var(--rule);border-radius:4px;} .stage-frame svg {width:100%;height:100%;display:block;}
.stage-buttons {display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;} .stage-buttons button {min-height:42px;flex:1 1 115px;padding:7px;font-size:11px;}
.stage-buttons button[aria-pressed=true] {border-color:var(--ink);background:var(--ink);color:white;}
.motion-controls {display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:16px 0 10px;} .play {padding:9px 17px;min-height:42px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-size:13px;font-weight:550;}
.play:hover {background:#ff8b49;border-color:#ff8b49;} .range-wrap {display:flex;align-items:center;flex:1;gap:8px;}.range-wrap input {width:100%;min-width:90px;accent-color:var(--ink);min-height:42px;cursor:ew-resize;}.percent {min-width:4ch;font:11px var(--font-mono);color:var(--muted);}
.download-links {font-size:12px;display:flex;flex-wrap:wrap;gap:10px 18px;margin:10px 0 16px;}.schematic-note {color:var(--muted);font-size:11px;margin:12px 0;}.explanation dl {margin:0;font-size:13px;}.explanation dt {margin:19px 0 6px;font-weight:600;}.explanation dt:first-child {margin-top:0;}.explanation dd {margin:0;color:var(--muted);}.source {font-size:11px;color:var(--muted);margin:22px 0 0;}
.static-sequence {width:100%;height:auto;}.motion-ui {display:none;}.js .motion-ui {display:block;}.js .static-sequence {display:none;}
.empty {padding:64px 20px;text-align:center;border:1px dashed #bbc5d0;border-radius:5px;}.empty h2 {font-size:21px;}.empty p {color:var(--muted);}
footer {display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:38px;padding-top:18px;color:var(--muted);font-size:11px;}footer a {text-decoration:none;}noscript p {border:1px solid var(--rule);padding:16px;}
.badge {display:inline-block;padding:3px 8px;border:1px solid var(--rule);border-radius:4px;color:var(--muted);background:white;font:10px var(--font-mono);}
@media(min-width:1660px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:1280px){main{padding:0 26px 26px;}.grid{grid-template-columns:repeat(2,minmax(0,1fr));}.catalog-stats{gap:16px;}h1{font-size:32px;}}
@media(max-width:1000px){.shell{grid-template-columns:minmax(0,1fr);}.sidebar{height:auto;position:static;padding:18px 24px;gap:18px;}.sidebar nav{display:flex;flex-wrap:wrap;gap:6px;}.category{width:auto;gap:15px;padding:7px 10px;font-size:12px;}.rail-label,.legend,.scope-note,.rail-links{display:none;}.topbar{margin-bottom:26px;min-height:64px;}.detail{gap:24px;}}
@media(max-width:700px){main{padding:0 16px 24px;}h1{font-size:29px;}.page-head{display:block;}.catalog-stats{margin:-8px 0 22px;gap:28px;}.catalog-stats strong{font-size:20px;}.intro{font-size:13px;}.sidebar{padding:16px;}.brand{font-size:14px;}.brand-mark{width:32px;height:32px;}.brand small{font-size:10px;}.topbar{gap:12px;}.topbar nav{gap:16px;font-size:12px;}.service-status{font-size:10px;}.grid{gap:14px;}.summary-copy{padding:15px;}.summary-title{font-size:16px;}.summary-description{font-size:12px;min-height:76px;}.detail{grid-template-columns:minmax(0,1fr);padding:18px;}.card[open] .summary-copy{padding:20px;}.card[open] .summary-title{font-size:22px;}.card[open] .summary-description{font-size:13px;}.card[open] .card-meta{max-width:96px;}.filters{gap:20px;}}
@media(max-width:460px){.grid{grid-template-columns:minmax(0,1fr);}.thumbnail{max-height:210px;}.summary-description{min-height:0;}.service-status{max-width:130px;line-height:1.5;}.topbar{margin-bottom:24px;}.card[open] .summary-copy{grid-template-columns:minmax(0,1fr);}.card[open] .card-meta{grid-column:1;grid-row:auto;max-width:none;flex-direction:row;align-items:center;margin-top:10px;}footer{display:block;}footer span{display:block;margin-bottom:8px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;}}
@media print{.sidebar,.toolbar,.results,.motion-ui,.empty,.topbar{display:none!important;}.shell,main,.grid,.detail{display:block;}.card{break-inside:avoid;margin:12px 0;}.static-sequence{display:block!important;}.card:not([open]) .thumbnail{max-height:140px;}}
@media(max-width:700px){.topbar .wordmark{display:none;}}