/* APEX prototype – model tiles, phone mock, tracks (brand.html + model.html). Light theme (7 Oct): white tiles, soft shadows, no glows. */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}

/* model tile – photo, name, model code, "N parts", one link (owner, 7 Oct) */
.mt{--rx:0deg;--ry:0deg;--gx:50%;--gy:0%;--tint:#3b4a6b;position:relative;display:flex;flex-direction:column;border-radius:22px;background:var(--surface-solid);border:1px solid var(--line);transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease),border-color .3s,box-shadow .45s var(--ease);will-change:transform;isolation:isolate}
.mt.is-tilt{transition:transform .14s linear,border-color .3s,box-shadow .45s var(--ease)}
.mt:hover,.mt:focus-visible{border-color:rgba(47,123,224,.45);box-shadow:0 30px 50px -36px rgba(var(--ink-rgb),.35)}
.mt__media{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:21px 21px 0 0;overflow:hidden;background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--tint) 14%,transparent),transparent 70%),linear-gradient(180deg,var(--bg2),var(--bg3))}
.mt__media::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.mt__plate{display:block;width:60%;aspect-ratio:1;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 22px 36px -22px rgba(var(--ink-rgb),.35),0 0 0 1px rgba(var(--ink-rgb),.08);transform:translateY(5px) rotate(-2.5deg);transition:transform .7s var(--ease)}
.mt__plate img{width:100%;height:100%;object-fit:cover}
.mt:hover .mt__plate,.mt:focus-visible .mt__plate{transform:translateY(-4px) rotate(0) scale(1.07)}
.mt__ico{display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,123,224,.1),transparent 70%);transition:transform .7s var(--ease)}
.mt__ico svg{width:62%}.mt:hover .mt__ico{transform:scale(1.08) rotate(-4deg)}
.mt__n{position:absolute;z-index:3;top:12px;left:12px;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap}
.mt__n b{color:var(--text);font-weight:700}
/* cut-out on a studio stage (site.js stage()): 4:3 box, brand mark top-right */
.mt__stage{position:absolute;inset:0;--h:61cqw;--t:6.6cqw}
.mt:hover .mt__stage,.mt:focus-visible .mt__stage{--lift:2.2cqw}
.mt:has(.mt__stage):hover,.mt:has(.mt__stage):focus-visible{border-color:color-mix(in srgb,var(--glow,#2f7be0) 45%,transparent)}
.mt__b{display:flex;flex-direction:column;gap:5px;padding:16px 48px 18px 18px;flex:1;min-width:0}
.mt__s{font:700 11px/1.2 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mt__t{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.mt__mc{font:600 12.5px ui-monospace,Menlo,monospace;color:var(--orange2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt__go{position:absolute;right:14px;bottom:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card2);color:var(--text);transition:background .3s,color .3s,transform .35s var(--ease)}
.mt__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mt:hover .mt__go,.mt:focus-visible .mt__go{background:var(--orange);color:#1b0d00;transform:translateX(2px)}
.mt.is-new{animation:mtIn .6s var(--ease) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes mtIn{from{opacity:0;transform:perspective(1000px) translateY(22px) rotateX(8deg)}}

/* part-type mix bar + legend (kept for older markup; tiles no longer carry them) */
.mix{display:flex;gap:2px;height:6px;width:100%;border-radius:4px;overflow:hidden}
.mix i{flex:var(--w) 1 0;min-width:4px;background:var(--c);border-radius:2px;transform-origin:left;transition:transform .8s var(--ease)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.legend i{width:8px;height:8px;border-radius:2px;background:var(--c)}

/* CSS phone mock (no photo) */
.mphone{position:relative;display:block;height:82%;aspect-ratio:9/19;border-radius:16px;padding:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 70%,#fff),var(--tint) 45%,color-mix(in srgb,var(--tint) 55%,#000));box-shadow:0 24px 34px -20px rgba(var(--ink-rgb),.45),inset 0 0 0 1px rgba(255,255,255,.25);transform:rotate(-7deg) translateY(6px);transition:transform .7s var(--ease)}
.mphone::before{content:"";position:absolute;right:-3px;top:22%;width:3px;height:12%;border-radius:0 2px 2px 0;background:color-mix(in srgb,var(--tint) 70%,#fff)}
.mphone__scr{position:absolute;inset:3px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16% 6% 10%;border-radius:13px;overflow:hidden;text-align:center;background:radial-gradient(70% 40% at 20% 25%,rgba(64,150,255,.85),transparent 70%),radial-gradient(80% 45% at 85% 82%,rgba(245,132,31,.9),transparent 70%),radial-gradient(50% 30% at 60% 50%,rgba(140,90,255,.35),transparent 70%),linear-gradient(160deg,var(--navy),#2c4c8e 55%,var(--navy2))}
.mphone__scr::before{content:"";position:absolute;left:50%;top:4%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#000}
.mphone__scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);transform:translateX(-120%);transition:transform 1s var(--ease)}
.mphone__scr b{font:800 clamp(9px,1vw,13px)/1 Inter,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.95)}
.mphone__scr em{font:600 clamp(6px,.62vw,8.5px)/1.25 Inter,sans-serif;font-style:normal;color:rgba(255,255,255,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mt:hover .mphone,.mt:focus-visible .mphone{transform:rotate(0) translateY(-4px) scale(1.06)}
.mt:hover .mphone__scr::after{transform:translateX(120%)}

/* horizontal track */
.htrack{--edge:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--edge) 30px;scroll-padding-inline:var(--edge);scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none;outline-offset:-4px}
.htrack::-webkit-scrollbar{display:none}.htrack.is-drag{cursor:grabbing;scroll-snap-type:none}.htrack.is-drag a{pointer-events:none}
.htrack>.mt{flex:0 0 280px;min-width:0;scroll-snap-align:start}
.arrows{display:flex;gap:8px}.arrows .icon-btn{transition:opacity .2s,background .2s}.arrows .icon-btn:disabled{opacity:.35;cursor:default}
.arrows .icon-btn:not(:disabled):hover{background:rgba(245,132,31,.18)}

/* helpers shared by both pages */
.bm-toast{position:fixed;left:50%;bottom:28px;z-index:310;padding:12px 18px;border-radius:14px;background:var(--surface-solid);border:1px solid var(--line2);box-shadow:0 24px 50px -20px rgba(var(--ink-rgb),.3);font-size:14px;font-weight:600;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--ease)}
.bm-toast.is-on{opacity:1;transform:translate(-50%,0)}
.rchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.empty{padding:48px 24px;border-radius:var(--r2);border:1px dashed var(--line2);text-align:center;color:var(--muted)}
.empty h3{color:var(--text);margin-bottom:8px}.empty .btn{margin-top:18px}
.skt{aspect-ratio:3/4;border-radius:22px}

@media (max-width:600px){
  .mgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .mt{border-radius:18px}.mt__media{border-radius:17px 17px 0 0}
  .mt__b{padding:12px 12px 14px;gap:4px}.mt__t{font-size:14.5px}.mt__s{font-size:10px}.mt__mc{font-size:11px}
  .mt__n{top:8px;left:8px;padding:4px 8px;font-size:11px}.mt__go{display:none}
  .mphone{border-radius:12px}.mphone__scr{border-radius:10px}.mphone__scr em{display:none}
  .htrack>.mt{flex-basis:200px}
}
@media (prefers-reduced-motion:reduce){.mt{transform:none}.mt.is-new{animation:none}}

/* product cards that use the reveal class keep their hover lift */
.pcard.rv.is-in{transition:opacity .9s var(--ease),transform .4s var(--ease),border-color .3s,box-shadow .3s}
.pcard.rv.is-in:hover{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.pcard.rv.is-in:hover{transform:none}}

/* no-WebGL / lite tier: the part's cut-out on the studio stage stands in for the 3D module (models.js fallbackStage) */
.stage3d.s3fb-on{background:none!important}
.s3fb{position:absolute;inset:0;z-index:1;container-type:size;pointer-events:none;transition:opacity .3s,transform .45s var(--ease)}
.s3fb.is-swap{opacity:0;transform:translateY(10px) scale(.98)}
.s3fb .stg{position:absolute;inset:0;container-type:normal;overflow:visible;background:none;--h:min(78cqh,118cqw);--t:calc((100cqh - var(--h)) * .4)}
.s3fb .stg::before{opacity:.8;inset:-10%}
.s3fb .stg__logo{display:none}
.s3fb .stg__p{filter:drop-shadow(0 3cqh 4cqh rgba(var(--ink-rgb),.3))}
@media (prefers-reduced-motion:reduce){.s3fb{transition:none}}
.s3fb .stg::after{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)}
.htrack{overflow-y:hidden}
.s3fb .stg{overflow:hidden}
.s3fb .stg__r{display:none}