/* hum3d.info — "Clay pass": a 3D-modelling viewport read as a guide.
   Cyclorama grey workspace · orthographic grid panes · clay-shaded primitives · axis gizmo accents (X red / Y green / Z blue)
   · amber = selection · graphite perspective viewport for the demo · outliner-tree contents · asset-library cards. */
:root{
  --cyc:#ECE9E4;--cyc-2:#E3DFD8;--paper:#F8F6F2;--white:#FFFDF9;
  --clay:#D8CFC3;--clay-2:#BDB2A3;--clay-3:#9C9082;
  --ink:#1B1D22;--ink-2:#4A4D56;--line:#D6CFC4;--line-2:#C3BBAE;--grid:#E3DED6;--grid-2:#D8D2C8;
  --x:#D2412C;--y:#3F8C31;--z:#2B5FCC;--z-d:#1E4AA6;--sel:#F29E1F;--sel-d:#B8720C;
  --gr:#1F2227;--gr-2:#292D34;--gr-3:#373C45;--gr-t:#ECE9E4;--gr-m:#A9AEB8;
  --font-head:"Tomorrow",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Rethink Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* tokens the shared game runtime reads */
  --primary:var(--z);--primary-contrast:#fff;--accent:var(--sel);--surface:var(--gr-2);--surface-2:var(--gr);--text:var(--ink);--heading:var(--ink);--muted:var(--ink-2);--border:var(--line);
  --hd-h:60px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cyc);color:var(--ink);font:400 17px/1.65 var(--font-body);font-optical-sizing:auto;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--z-d);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--z);outline-offset:2px;border-radius:2px}
.vp-persp :focus-visible,.ft :focus-visible,.cta-strip :focus-visible,.panel-h :focus-visible{outline-color:var(--sel)}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);text-wrap:balance}
p{margin:0 0 1.05em}
.wrap{width:min(100% - 32px,1280px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:4px;font:600 15px/1 var(--font-head);text-decoration:none}
.skip:focus{top:10px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:4px;background:var(--sel);color:var(--ink);border:1px solid var(--sel-d);box-shadow:0 3px 0 var(--sel-d);font:600 16px/1.1 var(--font-head);letter-spacing:.01em;text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{background:#F6AC39;transform:translateY(-1px);box-shadow:0 4px 0 var(--sel-d)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sel-d)}
.btn-ghost{background:var(--white);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn-ghost:hover{background:#fff;box-shadow:0 4px 0 var(--ink)}
.btn-ghost:active{box-shadow:0 1px 0 var(--ink)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}

/* ---------- header: app top bar ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(248,246,242,.94);border-bottom:1px solid var(--line-2);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
.hd::after{content:"";position:absolute;left:0;bottom:-1px;width:84px;height:2px;background:linear-gradient(90deg,var(--x) 0 33.3%,var(--y) 0 66.6%,var(--z) 0)}
.hd-in{width:min(100% - 32px,1280px);margin-inline:auto;min-height:var(--hd-h);display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px;flex:none}
.mark{width:30px;height:30px;flex:none}
.mark path{stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.mark .m1{fill:#EFEAE2}.mark .m2{fill:var(--clay-2)}.mark .m3{fill:var(--clay-3)}
.brand-w{font:700 22px/1 var(--font-head);letter-spacing:-.015em}
.brand-w b{font-weight:700;color:var(--z);text-shadow:1px 1px 0 var(--sel),2px 2px 0 var(--sel);margin-left:1px}
.brand-tag{font:600 11px/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);padding:5px 7px 4px;border-radius:3px}
.hd-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:4px;background:var(--white);color:var(--ink);font:600 15px/1 var(--font-head);cursor:pointer;flex:none}
.hb{display:grid;gap:4px;width:18px}
.hb i{display:block;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s,opacity .2s}
.hb i:nth-child(1){background:var(--x)}.hb i:nth-child(2){background:var(--y)}.hb i:nth-child(3){background:var(--z)}
.hd.is-open .hb i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.is-open .hb i:nth-child(2){opacity:0}
.hd.is-open .hb i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hd-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.lsw{display:flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.lsw a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:600 14px/1 var(--font-head);color:var(--ink);text-decoration:none}
.lsw a[aria-current]{background:var(--ink);color:#fff}
.hd-nav{display:none}
@media (max-width:979.98px){
  .hd.is-open .hd-nav{display:grid;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line-2);box-shadow:0 18px 30px -18px rgba(27,29,34,.45);padding:8px 16px 16px;max-height:calc(100vh - var(--hd-h));overflow:auto}
  .hd-nav a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 6px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:600 17px/1.2 var(--font-head)}
  .hd-nav a::before{content:"";width:9px;height:9px;border:1.5px solid var(--clay-3);transform:rotate(45deg);flex:none}
  .hd-nav a[aria-current]{background:rgba(242,158,31,.16);box-shadow:inset 3px 0 0 var(--sel)}
  .hd-nav a[aria-current]::before{background:var(--sel);border-color:var(--sel-d)}
  html.lock{overflow:hidden}
}
@media (max-width:559.98px){.hd-play{display:none}}
@media (max-width:399.98px){.brand-tag{display:none}.hd-in{gap:10px}.vp-sub{display:none}}
@media (min-width:980px){
  .hd-toggle{display:none}
  .hd-nav{display:flex;align-items:stretch;gap:2px;margin-left:18px;min-width:0}
  .hd-nav a{display:inline-flex;align-items:center;min-height:var(--hd-h);padding:0 11px;color:var(--ink);text-decoration:none;font:500 15px/1 var(--font-head);white-space:nowrap;position:relative}
  .hd-nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:2px;background:var(--sel);transform:scaleX(0);transform-origin:left;transition:transform .2s}
  .hd-nav a:hover::after,.hd-nav a[aria-current]::after{transform:scaleX(1)}
  .hd-nav a[aria-current]{font-weight:700}
}
@media (min-width:980px) and (max-width:1219.98px){.hd-play{display:none}.brand-tag{display:none}}

/* ---------- ortho grid (front view) ---------- */
.vp-front,.ph{
  background-color:var(--paper);
  background-image:
   linear-gradient(90deg,transparent calc(var(--ox) - .75px),rgba(63,140,49,.55) calc(var(--ox) - .75px) calc(var(--ox) + .75px),transparent calc(var(--ox) + .75px)),
   linear-gradient(180deg,transparent calc(var(--oy) - .75px),rgba(210,65,44,.5) calc(var(--oy) - .75px) calc(var(--oy) + .75px),transparent calc(var(--oy) + .75px)),
   linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),
   linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:0 0,0 0,var(--ox) var(--oy),var(--ox) var(--oy),var(--ox) var(--oy),var(--ox) var(--oy)}

/* ---------- viewports ---------- */
.vp{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.vp-lab{display:flex;align-items:center;gap:8px;margin:0;font:600 12.5px/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.vp-lab .dot{width:8px;height:8px;background:var(--sel);box-shadow:0 0 0 2px rgba(242,158,31,.25)}
.vp-sub{margin-left:auto;letter-spacing:.06em;color:var(--gr-m);font-weight:500}
.gizmo{width:60px;height:60px;overflow:visible}
.gizmo path{stroke-width:2.4;stroke-linecap:round;fill:none}
.gizmo .gx{stroke:var(--x);fill:var(--x)}.gizmo .gy{stroke:var(--y);fill:var(--y)}.gizmo .gz{stroke:var(--z);fill:var(--z)}
.gizmo path.gx,.gizmo path.gy,.gizmo path.gz{fill:none}
.gizmo circle{stroke:none}
.gizmo text{font:700 10px/1 var(--font-head);fill:#fff;text-anchor:middle}

/* primitives */
.prim{display:block;overflow:visible}
.prim path,.prim ellipse,.prim circle{stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.prim .f1{fill:#F1ECE4}.prim .f2{fill:var(--clay)}.prim .f3{fill:var(--clay-2)}
.prim .hid{fill:none;stroke-dasharray:3 4;stroke-opacity:.45}
.prim .ed{fill:none;stroke-opacity:.55}
.prim .ax{fill:none;stroke:var(--sel);stroke-width:2.4}
.prim-card path,.prim-card ellipse,.prim-card circle{stroke:#D9DCE2}
.prim-card .f1,.prim-card .f2,.prim-card .f3{fill:none}
.prim-card .hid{stroke-opacity:.35}
.prim-card .ax{stroke:var(--sel)}

/* ---------- home scene ---------- */
.scene{padding:18px 0 8px}
.scene-grid{display:grid;gap:14px}
.vp-front{--ox:calc(100% - 12px);--oy:calc(100% - 12px);padding:18px 16px 26px}
.vp-front>.vp-lab{margin-bottom:14px}
.vp-front>.gizmo{position:absolute;top:12px;right:12px;width:52px;height:52px}
.front-copy{position:relative;z-index:1}
.badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 10px;border-radius:3px;background:var(--ink);color:var(--gr-t);font:600 12.5px/1.2 var(--font-head);letter-spacing:.05em}
.badge::before{content:"";width:8px;height:8px;background:var(--sel);transform:rotate(45deg)}
.vp-front h1{margin:0 0 16px;font-size:clamp(2rem,1.25rem + 2.6vw,3.1rem);line-height:1.05;letter-spacing:-.018em;font-weight:700;max-width:19ch;padding-right:36px}
.lead{color:var(--ink-2);font-size:1.06rem;max-width:38rem}
.lead p:last-child{margin-bottom:0}
.acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin:22px 0 20px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--line-2);border-radius:3px;background:var(--white);font:500 14px/1.2 var(--font-head);color:var(--ink)}
.chips li::before{content:"";width:10px;height:10px;border:1.5px solid var(--ink);background:var(--clay);transform:rotate(45deg) skew(-8deg,-8deg)}
.chips li:nth-child(1)::before{background:var(--x);border-color:#8C2415}
.chips li:nth-child(2)::before{background:var(--y);border-color:#285C1F}
.chips li:nth-child(3)::before{background:var(--z);border-color:#173B85}
.prim-hero{display:none}
.vp-persp{background:var(--gr);border-color:#101215;color:var(--gr-t);container-type:inline-size;margin-inline:-16px;border-radius:0;border-left:0;border-right:0;isolation:isolate}
.vp-persp>.vp-lab{padding:14px 16px 0;color:var(--gr-t);position:relative;z-index:2}
.floor{position:absolute;left:-60%;right:-60%;bottom:0;height:62%;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(236,233,228,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(236,233,228,.08) 1px,transparent 1px);background-size:44px 44px;
  transform:perspective(420px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);mask-image:linear-gradient(to top,#000 30%,transparent)}
.floor::after{content:"";position:absolute;left:0;right:0;top:55%;height:2px;background:rgba(210,65,44,.55)}
.floor::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(63,140,49,.5)}
.vp-persp #game-root{position:relative;z-index:1}
@media (min-width:560px){
  .vp-persp{margin-inline:0;border-radius:6px;border:1px solid #101215}
  .vp-front{--ox:calc(100% - 94px);--oy:calc(100% - 40px);padding:22px 26px 34px}
  .prim-hero{display:block;position:absolute;right:35px;bottom:24px;width:118px;height:118px;z-index:0}
  .chips{max-width:calc(100% - 125px)}
  .front-copy .lead{max-width:min(38rem,calc(100% - 80px))}
}
@media (min-width:980px){
  .scene{padding:22px 0 10px}
  .scene-grid{grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr);align-items:stretch}
  .vp-front{padding:26px 34px 40px;display:flex;flex-direction:column}
  .front-copy{margin-block:auto}
  .vp-front h1{margin-top:12px}
}

/* ---------- inner page header ---------- */
.ph{--ox:calc(100% - 12px);--oy:calc(100% - 12px);border-bottom:1px solid var(--line-2)}
.ph-grid{display:grid;gap:20px;padding:18px 0 30px;position:relative}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin-bottom:10px;font:500 14px/1.2 var(--font-head);color:var(--ink-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--z-d)}
.crumbs span[aria-current]{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink)}
.crumbs .sep{width:7px;height:7px;border-top:1.5px solid var(--clay-3);border-right:1.5px solid var(--clay-3);transform:rotate(45deg);margin:0 4px}
.ph h1{margin:0 0 14px;font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);line-height:1.06;letter-spacing:-.016em;max-width:22ch}
.ph .lead{max-width:44rem}
.ph-model{display:none}
@media (min-width:820px){
  .ph{--ox:calc(100% - max(16px,(100% - 1280px)/2) - 150px);--oy:calc(100% - 20px)}
  .ph-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:center;padding:26px 0 44px}
  .ph-model{display:grid;place-items:center;position:relative;height:260px}
  .ph-model .gizmo{position:absolute;top:0;right:0;width:54px;height:54px}
  .prim-page{width:170px;height:170px;position:relative;z-index:1}
  .ph-model .shadow{position:absolute;bottom:28px;left:50%;width:170px;height:26px;margin-left:-85px;border-radius:50%;background:radial-gradient(closest-side,rgba(27,29,34,.28),transparent)}
}

/* ---------- sheet: article + outliner ---------- */
.sheet{padding:26px 0 56px}
.sheet-grid{display:grid;gap:28px}
.content{min-width:0;max-width:46rem;counter-reset:obj}
.content>.intro-rest{color:var(--ink)}
.obj,.faq{position:relative;padding-top:26px;margin-top:46px}
.content>.obj:first-child,.content>.faq:first-child{margin-top:4px}
.obj::before,.faq::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--x) 0 26px,var(--y) 26px 52px,var(--z) 52px 78px,transparent 78px),linear-gradient(var(--line-2),var(--line-2)) 0 1px/100% 1px no-repeat}
.obj{counter-increment:obj}
.obj h2,.faq h2{margin:0 0 16px;font-size:clamp(1.45rem,1.1rem + 1.3vw,2rem);line-height:1.15;letter-spacing:-.01em;font-weight:700}
.obj h2::before{content:counter(obj,decimal-leading-zero);display:table;margin-bottom:10px;padding:4px 7px 3px;border:1px solid var(--ink);border-radius:2px;background:var(--white);font:600 12px/1 var(--font-head);letter-spacing:.08em;color:var(--ink);box-shadow:2px 2px 0 var(--clay-2)}
.content h3{font-size:1.2rem;line-height:1.25;margin:1.6em 0 .5em;font-weight:600}
.content strong{color:var(--ink);font-weight:700}
.content ul,.content ol{margin:0 0 1.2em;padding:0;list-style:none}
.content li{position:relative;padding-left:30px;margin:0 0 .6em}
.content ul>li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;background:var(--z);box-shadow:0 0 0 3px rgba(43,95,204,.16)}
.content ol{counter-reset:li}
.content ol>li{counter-increment:li}
.content ol>li::before{content:counter(li);position:absolute;left:0;top:.2em;min-width:21px;height:21px;display:grid;place-items:center;border:1.5px solid var(--ink);background:var(--sel);font:700 12px/1 var(--font-head);color:var(--ink);border-radius:2px}
.content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.3em;font-size:15.5px}
.content th,.content td{border:1px solid var(--line-2);padding:8px 10px;text-align:left;vertical-align:top}
.content th{background:var(--cyc-2);font-family:var(--font-head);font-weight:600}
.content blockquote{margin:0 0 1.2em;padding:10px 16px;border-left:3px solid var(--sel);background:var(--paper)}
.content em{font-style:italic}

/* FAQ as outliner rows */
.faq-list{border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--paper)}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{display:flex;align-items:flex-start;gap:12px;min-height:54px;padding:14px 16px;cursor:pointer;list-style:none;font:600 17px/1.35 var(--font-body);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--white)}
.tri{flex:none;width:0;height:0;margin-top:6px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--clay-3);transition:transform .2s}
.faq details[open]>summary{background:rgba(242,158,31,.14);box-shadow:inset 3px 0 0 var(--sel)}
.faq details[open] .tri{transform:rotate(90deg);border-left-color:var(--ink)}
.faq-a{padding:4px 18px 14px 37px;color:var(--ink-2)}
.faq-a p:last-child{margin-bottom:0}

/* inner CTA */
.cta-strip{margin-top:48px;display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center;padding:18px;background:var(--gr);color:var(--gr-t);border-radius:6px;position:relative;overflow:hidden}
.cta-strip p{margin:0;font:500 16.5px/1.45 var(--font-body)}
.cta-strip .btn{grid-column:1/-1;justify-self:start}
.cta-prim{width:56px}
.cta-prim .prim{width:56px;height:56px}
.cta-prim .prim path{stroke:#101215}
@media (min-width:640px){.cta-strip{grid-template-columns:auto 1fr auto;padding:20px 24px}.cta-strip .btn{grid-column:auto}}

/* outliner + properties */
.side{min-width:0;order:-1}
.panel-h{display:flex;align-items:center;gap:9px;margin:0;padding:11px 14px;background:var(--gr);color:var(--gr-t);font:600 12.5px/1.2 var(--font-head);letter-spacing:.1em;text-transform:uppercase}
.ph-ic{width:12px;height:12px;border:1.5px solid var(--gr-t);border-radius:2px;position:relative;flex:none}
.ph-ic::after{content:"";position:absolute;inset:2px;background:var(--sel)}
.ph-ic2{border-radius:50%}
.ph-ic2::after{border-radius:50%}
.outliner{border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--paper)}
.outliner ol{list-style:none;margin:0;padding:6px 0 8px;position:relative}
.outliner ol::before{content:"";position:absolute;left:19px;top:6px;bottom:26px;width:1px;background:var(--line-2)}
.outliner li{margin:0}
.outliner a{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 14px 6px 34px;color:var(--ink);text-decoration:none;font:500 15px/1.3 var(--font-body);position:relative}
.outliner a::before{content:"";position:absolute;left:19px;top:50%;width:10px;height:1px;background:var(--line-2)}
.ol-ic{flex:none;width:12px;height:12px;background:var(--clay-2);clip-path:polygon(50% 0,100% 100%,0 100%)}
.outliner li:nth-child(3n+1) .ol-ic{background:var(--x)}
.outliner li:nth-child(3n+2) .ol-ic{background:var(--y)}
.outliner li:nth-child(3n) .ol-ic{background:var(--z)}
.outliner a:hover{background:var(--white)}
.outliner a.on{background:rgba(242,158,31,.2);box-shadow:inset 3px 0 0 var(--sel);font-weight:600}
.props{display:none;margin-top:14px;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--paper)}
.props p:not(.panel-h){margin:0;padding:14px 16px 12px;font-size:15.5px;color:var(--ink-2)}
.props .btn{margin:0 16px 16px}
@media (min-width:980px){
  .sheet{padding:44px 0 72px}
  .sheet-grid{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
  .side{order:0;align-self:stretch}
  .side-in{position:sticky;top:calc(var(--hd-h) + 20px)}
  .props{display:block}
  .outliner ol{max-height:calc(100vh - 330px);overflow:auto}
}

/* ---------- asset library (related) ---------- */
.lib{background:var(--cyc-2);border-top:1px solid var(--line-2);padding:40px 0 52px}
.lib-h{margin:0 0 20px;font-size:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);display:flex;align-items:center;gap:12px}
.lib-h::before{content:"";width:16px;height:16px;border:2px solid var(--ink);background:linear-gradient(135deg,var(--sel) 50%,var(--clay) 50%)}
.lib-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:560px){.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (min-width:980px){.lib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.asset{container-type:inline-size;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-2);border-radius:6px;overflow:hidden;color:var(--ink);text-decoration:none;transition:box-shadow .18s,transform .18s}
.asset:hover{box-shadow:0 0 0 2px var(--sel),0 12px 20px -14px rgba(27,29,34,.5);transform:translateY(-2px)}
.asset-in{display:flex;flex-direction:column;flex:1}
.asset-th{display:grid;place-items:center;height:128px;background-color:var(--gr);background-image:linear-gradient(rgba(236,233,228,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(236,233,228,.07) 1px,transparent 1px);background-size:20px 20px;background-position:center}
.asset-th .prim{width:84px;height:84px;transition:transform .4s}
.asset:hover .prim{transform:rotate(-8deg) scale(1.06)}
.asset strong{display:block;padding:14px 16px 4px;font:600 17px/1.3 var(--font-head)}
.asset-d{display:block;padding:0 16px 16px;font-size:15px;line-height:1.5;color:var(--ink-2)}
@container (max-width:380px){.asset-in{display:grid;grid-template-columns:96px minmax(0,1fr);align-content:start}.asset-th{grid-row:1/span 2;height:auto;min-height:112px;width:96px;border-right:1px solid #101215}.asset-th .prim{width:60px;height:60px}.asset strong{padding:14px 14px 4px;font-size:16.5px}.asset-d{padding:0 14px 14px;font-size:14.5px}}

/* ---------- footer: graphite floor ---------- */
.ft{position:relative;overflow:hidden;background:var(--gr);color:var(--gr-t);isolation:isolate}
.ft-floor{position:absolute;left:-40%;right:-40%;top:0;height:170px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(236,233,228,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(236,233,228,.08) 1px,transparent 1px);background-size:48px 48px;
  transform:perspective(380px) rotateX(-58deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.ft-in{display:grid;gap:30px;padding:52px 0 30px}
.ft .brand{color:var(--gr-t)}
.ft .mark path{stroke:#0E1013}
.ft-brand p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--gr-m);max-width:34rem}
.ft h2{margin:0 0 8px;font:600 12.5px/1.2 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--gr-m)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:inline-flex;align-items:center;min-height:42px;color:var(--gr-t);text-decoration:none;font-size:15.5px}
.ft li a:hover{color:var(--sel);text-decoration:underline}
.ft-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 0 26px;border-top:1px solid var(--gr-3);font:500 14px/1.3 var(--font-head);color:var(--gr-m)}
.age{display:inline-grid;place-items:center;min-width:40px;height:30px;padding:0 6px;border:1.5px solid var(--sel);border-radius:3px;color:var(--sel);font-weight:700}
.ft-ax{margin-left:auto;display:flex;gap:4px}
.ft-ax i{width:18px;height:3px;background:var(--x)}.ft-ax i:nth-child(2){background:var(--y)}.ft-ax i:nth-child(3){background:var(--z)}
@media (min-width:760px){.ft-in{grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-top:64px}}

/* ---------- 404 ---------- */
.nf{padding:40px 0 80px}
.nf-vp{padding:36px 24px}
.nf-vp h1{margin:0 0 12px;font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem)}

/* ---------- motion (never hides content) ---------- */
@media (prefers-reduced-motion:no-preference){
  .floor{animation:floor 7s linear infinite}
  @keyframes floor{to{background-position:0 44px}}
  .prim-hero,.prim-page{animation:bob 5.5s ease-in-out infinite alternate}
  @keyframes bob{from{transform:translateY(0)}to{transform:translateY(-7px)}}
  .ph-model .shadow{animation:shad 5.5s ease-in-out infinite alternate}
  @keyframes shad{to{transform:scaleX(.88);opacity:.75}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.hd,.side,.ft-floor,.floor,.lib{display:none}body{background:#fff}}