/* 3DHM laser generators — card page, item page and the box tool on an item page.
   Colours: 3DHM palette (olive #617A35, yellow #F7C948, slate #3E5C76, light olive tints). */
.gen,.gen-page{--g-olive:#617A35;--g-olive-d:#3F5022;--g-yel:#F7C948;--g-slate:#3E5C76;--g-ink:#23241F;--g-text:#3B3D35;
  --g-page:#F6F7F3;--g-div:#E7EBE1;--g-border:#C0CAAE;--g-input:#8295A6;--g-sel:#EEF1E4;
  --g-sans:'Space Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;--g-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-family:var(--g-sans);color:var(--g-ink)}
.gen *,.gen-page *{box-sizing:border-box}
.gen .tt-ico,.gen-page .tt-ico{width:66%;height:66%;display:block}

/* ---- category buttons ---- */
.gen-cats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.gen-cat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:92px;padding:10px 12px 9px;border:1.5px solid var(--g-border);border-radius:12px;background:#fff;color:var(--g-ink);font:600 14px/1.2 var(--g-sans);cursor:pointer}
.gen-cat:hover{border-color:var(--g-olive)}
.gen-cat-ico{width:40px;height:40px;border-radius:9px;background:#fff;border:1px solid var(--g-border);display:flex;align-items:center;justify-content:center}
.gen-cat small{font:400 11px/1 var(--g-mono);color:var(--g-slate)}
.gen-cat[aria-pressed="true"]{background:var(--g-olive);border-color:var(--g-olive);color:#fff}
.gen-cat[aria-pressed="true"] small{color:#fff}
.gen-cat[aria-pressed="true"] .gen-cat-ico{border-color:#fff}
.gen-cat:focus-visible{outline:3px solid var(--g-olive);outline-offset:2px}

/* ---- cards ---- */
.gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.gen-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--g-border);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--g-ink);transition:border-color .15s,box-shadow .15s}
.gen-card[hidden]{display:none}
a.gen-card:hover{border-color:var(--g-olive);box-shadow:0 6px 18px rgba(62,92,118,.14)}
a.gen-card:focus-visible{outline:3px solid var(--g-olive);outline-offset:2px}
.gen-pic{position:relative;display:flex;align-items:center;justify-content:center;height:180px;background:var(--g-sel);border-bottom:1px solid var(--g-div)}
.gen-pic img{width:100%;height:100%;object-fit:contain;display:block;padding:10px}
.gen-pic canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gen-pic-ico{width:72px;height:72px;display:flex;align-items:center;justify-content:center;opacity:.55}
.gen-pic-ico .tt-ico{width:100%;height:100%}
.gen-drawn .gen-pic-ico{visibility:hidden}
.gen-new{position:absolute;top:10px;left:10px;z-index:2;background:#F2765E;color:var(--g-ink);font:700 11px/1 var(--g-sans);padding:4px 8px;border-radius:999px;letter-spacing:.03em}
.gen-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.gen-kind{font:500 11px/1.2 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-slate)}
.gen-name{font-size:18px;font-weight:700;line-height:1.25}
.gen-desc{font-size:14px;line-height:1.45;color:var(--g-text)}
.gen-size{font:400 12px/1.3 var(--g-mono);color:var(--g-slate)}
.gen-go{margin-top:auto;padding-top:6px;font-weight:600;font-size:14px;color:var(--g-olive)}
.gen-soon{border:1.5px dashed var(--g-input)}
.gen-soon .gen-pic{background:var(--g-div)}
.gen-note{margin:18px 0 0;font-size:14px;color:var(--g-slate)}
@media (max-width:560px){
  .gen-cats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px}
  .gen-cat{flex-shrink:0;min-width:84px}
  .gen-grid{grid-template-columns:1fr}
}

/* ---- item page: header, tile strip of the category, example bar ---- */
.gen-strip{display:flex;gap:18px;overflow-x:auto;padding:14px 18px 12px;margin:0 0 18px;background:#fff;border:1px solid var(--g-border);border-radius:12px}
.gen-tile{flex-shrink:0;width:84px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--g-ink);font-size:13px;font-weight:500;text-align:center;line-height:1.25}
.gen-tile-ico{position:relative;width:54px;height:54px;border:1.5px solid var(--g-border);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.gen-tile:hover .gen-tile-ico{border-color:var(--g-olive)}
.gen-tile[aria-current="page"]{color:var(--g-olive-d);font-weight:700}
.gen-tile[aria-current="page"] .gen-tile-ico{background:var(--g-sel);border:2px solid var(--g-olive)}
.gen-tile:focus-visible{outline:3px solid var(--g-olive);outline-offset:3px;border-radius:12px}
.gen-tile .gen-new{top:-8px;left:auto;right:-14px;font-size:10px;padding:3px 6px}
.gen-head{display:flex;align-items:flex-start;gap:16px;margin:0 0 14px}
.gen-head-ico{flex-shrink:0;width:56px;height:56px;border:2px solid var(--g-olive);border-radius:12px;background:var(--g-sel);display:flex;align-items:center;justify-content:center}
.gen-head-txt{flex:1;min-width:0}
.gen-sec{display:block;font:500 12px/1.3 var(--g-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g-slate);margin-bottom:4px}
.gen-h1{margin:0;font-size:1.9rem;line-height:1.2;font-weight:700;color:var(--g-ink)}
.gen-lead{margin:6px 0 0;font-size:1rem;line-height:1.5;color:var(--g-text)}
.gen-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;padding:10px 14px;border:1px solid var(--g-border);border-radius:12px;background:var(--g-page);font-size:.92rem;line-height:1.45}
.gen-bar .gen-ex{flex:1 1 320px;min-width:0;margin:0;color:var(--g-ink)}
.gen-btns{display:flex;flex-wrap:wrap;gap:8px}
.gen-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--g-input);background:#fff;color:var(--g-ink);font:600 .88rem/1 var(--g-sans);padding:9px 13px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:40px}
.gen-btn:hover{border-color:var(--g-olive);background:var(--g-sel)}
.gen-btn:focus-visible{outline:3px solid var(--g-olive);outline-offset:2px}
.gen-btn svg{width:16px;height:16px;flex-shrink:0}
.gen-btn.is-done{background:#2E7D4F;border-color:#2E7D4F;color:#fff}
@media (max-width:520px){ .gen-head-ico{display:none} .gen-h1{font-size:1.45rem} .gen-btn{white-space:normal;text-align:left} .gen-strip{gap:12px;padding:12px} .gen-tile{width:72px} }

/* ---- the box tool on an item page (same tool, same files; only the look) ---- */
#inkline-box.gen-item{--ink:#23241F;--soft:#3E5C76;--faint:#55687A;--line:#C0CAAE;--bg:#F6F7F3;--white:#fff;
  --blue:#617A35;--blue-2:#3F5022;--blue-soft:#EEF1E4;max-width:none;margin:0 0 8px}
#inkline-box.gen-item .bx-toggle{display:none}
#inkline-box.gen-item .bx-card{border:0;background:transparent;overflow:visible;border-radius:0}
#inkline-box.gen-item .bx-collapse{display:block}
#inkline-box.gen-item .bx-inner{overflow:visible}
#inkline-box.gen-item .bx-body{border-top:0;background:transparent;padding:0}
#inkline-box.gen-item .bx-step{color:var(--soft);font-family:var(--mono);font-weight:500;font-size:11px}
/* quick-start chips (finger-joint box): small icon tiles like the site's tool tiles */
#inkline-box.gen-item .bx-gallery{display:flex;flex-wrap:wrap;gap:12px 14px;margin-bottom:18px}
#inkline-box.gen-item .bx-tpl{flex-direction:column;align-items:center;gap:6px;width:72px;padding:0;border:0;border-radius:10px;background:none;box-shadow:none}
#inkline-box.gen-item .bx-tpl .bx-chipico{display:block;width:46px;height:46px;padding:8px;border:1.5px solid #C0CAAE;border-radius:10px;background:#fff;box-sizing:border-box}
#inkline-box.gen-item .bx-tpl small{display:none}
#inkline-box.gen-item .bx-tpl b{font-size:12px;font-weight:500;line-height:1.25}
#inkline-box.gen-item .bx-tpl:hover .bx-chipico{border-color:var(--blue)}
#inkline-box.gen-item .bx-tpl:active{transform:none}
#inkline-box.gen-item .bx-tpl[aria-pressed="true"]{box-shadow:none}
#inkline-box.gen-item .bx-tpl[aria-pressed="true"] .bx-chipico{background:var(--blue-soft);border:2px solid var(--blue)}
#inkline-box.gen-item .bx-tpl[aria-pressed="true"] b{color:var(--blue-2);font-weight:700}
@media (max-width:520px){ #inkline-box.gen-item .bx-gallery{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 6px;gap:10px} #inkline-box.gen-item .bx-tpl{flex-shrink:0;width:66px} }
/* download / order buttons in the bar above the 3D view */
#inkline-box.gen-item .bx-vtabs{gap:6px 8px}
#inkline-box.gen-item .bx-vtabs .bx-actions{margin-left:8px;gap:6px}
#inkline-box.gen-item .bx-vtabs .bx-btn{padding:7px 12px;min-height:36px;font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid #8295A6;border-radius:8px}
#inkline-box.gen-item .bx-vtabs .bx-btn:hover{background:var(--bg)}
#inkline-box.gen-item .bx-vtabs .bx-btn.bx-primary{background:#F7C948;border-color:#F7C948;color:#23241F}
#inkline-box.gen-item .bx-vtabs .bx-btn.bx-primary:hover{background:#EFBE3A;border-color:#EFBE3A}
#inkline-box.gen-item .bx-vtabs .bx-btn:disabled{opacity:.4}
#inkline-box.gen-item .bx-stats{font-size:11.5px}
#inkline-box.gen-item .bx-out{padding:8px 14px}
/* desktop: 3D view on the left stays put, the settings on the right scroll in their own column */
@media (min-width:901px){
  #inkline-box.gen-item .bx-grid{grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:stretch}
  #inkline-box.gen-item .bx-grid > .bx-view{order:-1;align-self:start}
  #inkline-box.gen-item .bx-grid > .bx-panel:not(.bx-view){contain:size;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#C0CAAE transparent}
}
#inkline-box.gen-item .bx-panel{border-radius:14px}
#inkline-box.gen-item .bx-view{overflow:hidden}
#inkline-box.gen-item .bx-stage{background:radial-gradient(circle at 50% 38%,#4D6C88 0,#3E5C76 72%)}
#inkline-box.gen-item .bx-hint3d{color:#E7EBE1}
#inkline-box.gen-item .bx-in,#inkline-box.gen-item select.bx-in{border-color:#8295A6;min-height:38px}
#inkline-box.gen-item .bx-seg{border-color:#8295A6}
#inkline-box.gen-item .bx-seg button{color:var(--ink);min-height:36px}
#inkline-box.gen-item .bx-seg button+button{border-left-color:#8295A6}
#inkline-box.gen-item .bx-badge{color:var(--blue-2);background:var(--blue-soft)}
#inkline-box.gen-item .bx-btn{border-color:#8295A6;min-height:40px}
#inkline-box.gen-item .bx-btn.bx-primary{background:#F7C948;border-color:#F7C948;color:#23241F}
#inkline-box.gen-item .bx-btn.bx-primary:hover{background:#EFBE3A;border-color:#EFBE3A}
#inkline-box.gen-item .bx-btn:focus-visible{outline-color:#617A35}
#inkline-box.gen-item .bx-msg.warn{background:#FDECE8;border-color:#F2765E;color:#23241F}
#inkline-box.gen-item .bx-cta{background:#FDF4DA;border-color:#F7C948}
#inkline-box.gen-item .bx-cta b{color:#23241F}
#inkline-box.gen-item .bx-vtabs button[aria-selected="true"]{background:var(--blue-soft);color:var(--blue-2)}