/* Free 3D model pages (/3d-models/). Same look as the machine guides. */
:root { --bg:#070b14; --panel:#0e1626; --line:rgba(94,167,255,.16); --accent:#5ea7ff; --accent2:#8a6cff; --ink:#eaf1ff; --ink-dim:#8fa1bc; color-scheme:dark; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; }
a { color:#8fc4ff; }
.hidden { display:none !important; }
.wrap { max-width:820px; margin:0 auto; padding:36px 16px 96px; }
.wrap.wide { max-width:1080px; }
.crumbs { margin-bottom:22px; font-size:13.5px; color:var(--ink-dim); }
.crumbs a { color:var(--ink-dim); text-decoration:none; }
.crumbs a:hover { color:#8fc4ff; }
.eyebrow { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8fc4ff; margin:0 0 10px; }
h1 { font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(32px,6vw,48px); line-height:1.05; margin:0 0 14px; }
h2 { font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:clamp(22px,4vw,28px); margin:40px 0 12px; }
.by, .lead { font-size:14px; color:var(--ink-dim); margin:0 0 22px; }
.lead { font-size:16.5px; line-height:1.7; color:#cfd9ec; max-width:720px; }
.by a { color:var(--ink-dim); }
p, li { color:#cfd9ec; line-height:1.7; font-size:16px; }
p { margin:0 0 16px; }
.answer { font-size:17.5px; color:var(--ink); padding:18px 20px; border-left:3px solid var(--accent); border-radius:0 12px 12px 0; background:linear-gradient(90deg,rgba(94,167,255,.10),rgba(138,108,255,.04)); }
.hero { position:relative; margin:0 0 24px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#070b14; }
.hero img { display:block; width:100%; height:auto; }
.hero-btn { position:absolute; left:14px; bottom:14px; padding:10px 16px; border-radius:10px; background:rgba(7,11,20,.82); border:1px solid rgba(94,167,255,.35); color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; backdrop-filter:blur(6px); }
.dl { padding:4px 20px 8px; border:1px solid rgba(94,167,255,.25); border-radius:14px; background:rgba(94,167,255,.05); }
.dl h2 { margin-top:18px; }
.dl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin:0 0 14px; }
.dl-opt { position:relative; display:grid; gap:4px; padding:14px 16px; border-radius:12px; border:1px solid rgba(94,167,255,.3); background:var(--panel); color:var(--ink-dim); text-decoration:none; font-size:13.5px; line-height:1.4; }
.dl-opt b { color:var(--ink); font-size:15.5px; }
.dl-opt:hover { border-color:var(--accent); }
.dl-opt.ar { background:linear-gradient(135deg,rgba(94,167,255,.16),rgba(138,108,255,.12)); }
.dl-opt img { position:absolute; width:1px; height:1px; opacity:0; }
.note { font-size:14px; color:var(--ink-dim); }
.note b { color:var(--ink); }
.tbl { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(94,167,255,.12); vertical-align:top; }
tr:last-child th, tr:last-child td { border-bottom:0; }
th { color:var(--ink-dim); font-weight:500; width:38%; }
.rel { font-size:15px; }
.btn { display:inline-block; padding:12px 22px; border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#04101f; font-weight:600; text-decoration:none; }
.cta { margin:32px 0 8px; padding:20px; border:1px solid rgba(94,167,255,.25); border-radius:12px; background:rgba(94,167,255,.06); }
.cta p { margin:0 0 12px; }
.share { margin-top:8px; }
.share-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; font-size:14px; color:var(--ink-dim); }
.share-row a, .share-row button { padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--ink); font:500 13.5px 'Inter',sans-serif; text-decoration:none; cursor:pointer; }
.share-row a:hover, .share-row button:hover { border-color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin:8px 0 24px; }
.grid.small { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); color:inherit; text-decoration:none; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#070b14; }
.card-body { display:grid; gap:5px; padding:14px 16px 16px; }
.card-body b { font-size:17px; }
.card-body span { font-size:13.5px; color:var(--ink-dim); line-height:1.45; }
.card-body .meta { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8fc4ff; }
.card-body .go { color:var(--ink); font-weight:600; margin-top:4px; }
footer { text-align:center; color:var(--ink-dim); font-size:13px; padding:24px 16px; }
footer a { color:var(--ink-dim); }
/* Part cards: every part with picture and its own STL */
.sysgroup { margin:26px 0 0; }
.sysgroup h3 { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:17px; }
.sysgroup h3 i { width:11px; height:11px; border-radius:50%; flex:none; }
.sysgroup h3 span { margin-left:auto; padding:2px 9px; border-radius:999px; background:var(--panel); border:1px solid var(--line); color:var(--ink-dim); font-size:12px; font-weight:500; }
.sysblurb { font-size:14px; color:var(--ink-dim); margin:0 0 12px; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.pcard { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.pcard img { width:120px; height:90px; object-fit:cover; border-radius:8px; background:#070b14; }
.pbody { min-width:0; }
.pcard h4 { margin:2px 0 4px; font-size:15px; line-height:1.3; }
.pcard h4 span { color:#8fc4ff; font-weight:500; font-size:13px; }
.pcard p { margin:0 0 6px; font-size:13px; line-height:1.45; color:var(--ink-dim); }
.pcard .pmeta { font-size:12px; color:#8fc4ff; }
.pact { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; }
.pbtn { padding:6px 11px; border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#04101f !important; font-weight:600; text-decoration:none; }
@media (max-width:380px) { .pgrid { grid-template-columns:1fr; } .pcard { grid-template-columns:96px 1fr; } .pcard img { width:96px; height:72px; } }
/* Live 3D: picture + play button, the atlas loads in a frame after one tap */
.live { position:relative; margin:0 0 8px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#070b14; }
.live img { display:block; width:100%; height:auto; }
.live iframe { display:block; width:100%; height:min(78vh,640px); border:0; background:#070b14; }
.live.on .hero-btn { display:none; }
.live-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; padding:14px 22px; border:0; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#04101f; font:700 16px 'Inter',sans-serif; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.live-play span { font-size:14px; }
.live-note { font-size:14px; color:var(--ink-dim); margin:0 0 22px; }
.pcard details { margin:0 0 6px; font-size:13px; color:var(--ink-dim); }
.pcard summary { cursor:pointer; color:#8fc4ff; }
.pcard details p { margin:6px 0 0; }
.pspec { margin:6px 0 0; padding-left:18px; }
.pspec li { font-size:12.5px; line-height:1.5; margin:0; color:var(--ink-dim); }
.pspec b { color:var(--ink); font-weight:500; }
h3.q { font-size:17px; font-weight:600; color:var(--ink); margin:22px 0 6px; }
.pindex-box { margin:0 0 26px; border:1px solid var(--line); border-radius:12px; background:rgba(94,167,255,.04); }
.pindex-box summary { cursor:pointer; padding:14px 16px; font-weight:600; color:var(--accent); list-style:none; }
.pindex-box summary::-webkit-details-marker { display:none; }
.pindex-box summary::after { content:" \25BE"; }
.pindex-box[open] summary::after { content:" \25B4"; }
.pindex-box .pindex { margin:0; padding:0 16px 8px 36px; }
.pindex { padding-left:20px; }
.pindex li { font-size:14.5px; margin:0 0 10px; }
.pindex a { text-decoration:none; }
.pindex a:hover { text-decoration:underline; }
.cite { margin-top:8px; }