/* One machined object opens into five parallel system layers. */
.material{--material-field-height:500px;--material-open-scale:.65;--material-label-size:36px;--material-shadow-bottom:25px;--material-row-gap:14px;--material-stage-min:200px;--material-rail-space:0px;min-width:0;width:100%;margin:0;padding:0 0 0 8px;align-self:center}
.material [hidden]{display:none!important}
/* The detail row always stays in flow; only the absolute 3D stack changes pose. */
.material-field{height:var(--material-field-height);position:relative;display:grid;grid-template-rows:minmax(0,1fr) max-content;row-gap:var(--material-row-gap);touch-action:pan-y pinch-zoom}
.material-stage{--material-open-spread:60px;grid-row:1;position:relative;min-width:0;min-height:0;container-type:size;perspective:4000px;perspective-origin:50% calc(var(--material-field-height)/2)}
.material-stage::after{content:'';position:absolute;width:65%;max-width:340px;height:34px;top:calc(var(--material-field-height) - var(--material-shadow-bottom) - 34px);left:50%;transform:translateX(-50%);background:#000;border-radius:50%;filter:blur(18px);opacity:.85;pointer-events:none;transition:width 750ms ease,left 750ms ease,top 850ms ease,height 850ms ease}
.material-object{--material-x:15deg;--material-y:-22deg;--material-light:120deg;position:absolute;left:50%;top:calc(var(--material-field-height)/2);width:min(350px,72%);aspect-ratio:1;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(var(--material-x)) rotateY(var(--material-y)) rotateZ(-16deg);transition:transform 850ms cubic-bezier(.2,.75,.2,1),left 850ms cubic-bezier(.2,.75,.2,1),top 850ms cubic-bezier(.2,.75,.2,1),width 850ms cubic-bezier(.2,.75,.2,1);z-index:1;pointer-events:none}
.material-layer{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--index) * -7px));transition:transform 850ms cubic-bezier(.2,.75,.2,1)}
/* Closed solid: top z=0, 45-degree bevel to z=-1.5, wall to z=-5.0.
   No clipping/filter on the shell parent: preserve its actual 3D planes. */
.material-layer-edge{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;--edge-color:#a6b2bd;--bevel-color:#e2e8ec;--bottom-color:#596773}
.material-layer-bottom{position:absolute;inset:0;clip-path:polygon(27% 0,73% 0,100% 27%,100% 73%,73% 100%,27% 100%,0 73%,0 27%);background:var(--bottom-color);transform:translateZ(-5.0px)}
.material-wall,.material-bevel{position:absolute;display:block;transform-origin:0 0;backface-visibility:hidden;pointer-events:none;filter:brightness(var(--edge-tone))}
.material-wall{height:3.5px;background:linear-gradient(0deg,#0004,transparent 45%,#fff3),var(--edge-color);transform:translateZ(-5.0px) rotateZ(var(--edge-angle)) rotateX(90deg)}
/* 1.5px rise + 1.5px inset; corner trim = 1.5*tan(22.5deg). */
.material-bevel{height:2.121320344px;clip-path:polygon(0 0,100% 0,calc(100% - .621320344px) 100%,.621320344px 100%);background:var(--bevel-color);transform:translateZ(-1.5px) rotateZ(var(--edge-angle)) rotateX(45deg)}
.material-layer-face{position:absolute;inset:0;clip-path:polygon(calc(27% + .621320344px) 1.5px,calc(73% - .621320344px) 1.5px,calc(100% - 1.5px) calc(27% + .621320344px),calc(100% - 1.5px) calc(73% - .621320344px),calc(73% - .621320344px) calc(100% - 1.5px),calc(27% + .621320344px) calc(100% - 1.5px),1.5px calc(73% - .621320344px),1.5px calc(27% + .621320344px));background:linear-gradient(var(--material-light),#788793 0%,#b9c4cc 21%,#f3f5f6 39%,#d6dfe5 48%,#91a0ad 67%,#c3cdd5 89%,#edf1f4 100%)}
.material-layer-actions .material-layer-face{background:linear-gradient(var(--material-light),#74818c,#dce3e8 38%,#9aa9b5 67%,#d5dfe6)}
.material-layer-rules .material-layer-face{background:linear-gradient(var(--material-light),#6e7b87,#d8e0e6 38%,#919fac 67%,#cbd6de)}
.material-layer-data .material-layer-face{background:linear-gradient(var(--material-light),#5c6b78,#c6d1d9 38%,#8293a1 67%,#bbc8d2)}
/* Cobalt throughout: face, eight bevels, eight walls and underside. */
.material-layer-agents .material-layer-edge{--edge-color:#16458e;--bevel-color:#3b78cf;--bottom-color:#102e61}
.material-layer-agents .material-layer-face{background:linear-gradient(var(--material-light),#102c62,#2055a6 29%,#427cc9 44%,#24559c 62%,#123366)}
.material-cutout{position:absolute;inset:33%;background:linear-gradient(135deg,#34404a 0%,#0a1016 7%,#030609 65%,#18222b 100%);clip-path:polygon(36% 0,64% 0,64% 36%,100% 36%,100% 64%,64% 64%,64% 100%,36% 100%,36% 64%,0 64%,0 36%,36% 36%);box-shadow:inset 5px 5px 3px #000;transform:translateZ(1px)}
.material-engraving{position:absolute;left:33%;bottom:17%;font:11px/1 var(--mono);letter-spacing:3px;color:#4b5b6b;transform:translateZ(1px);text-shadow:0 1px #fff}
.material-layer-etch{position:absolute;left:22%;bottom:19%;font:10px/1 var(--mono);letter-spacing:1px;color:#35495b;transform:translateZ(1px);white-space:nowrap}
.material-layer-agents .material-layer-etch{color:#c7d7fc}
.material-traces{position:absolute;inset:24% 26%;border:1px solid #455c734f;transform:translateZ(1px)}
.material-traces i{position:absolute;display:block;left:15%;right:15%;height:1px;top:27%;background:#455c7370;box-shadow:0 1px #ffffff50}
.material-traces i:nth-child(2){top:50%;right:30%}.material-traces i:nth-child(3){top:73%;left:30%}
.material-layer-agents .material-traces{inset:31%;border:1px solid #9eb8edaa;background:#15316a;box-shadow:0 0 0 8px #85a4e233}
.material-layer-agents .material-traces i{background:#86a7e5;box-shadow:none}
.material-layer-data .material-traces{background:radial-gradient(circle,#50667d 1px,transparent 1.5px) 0 0/13px 13px;border:0}
.material-layer-data .material-traces i{display:none}
.material-trigger{position:absolute;inset:0;width:100%;height:var(--material-field-height);z-index:4;background:transparent;border:0;border-radius:0;cursor:pointer;padding:0;color:inherit;touch-action:pan-y pinch-zoom}
.material-trigger:focus-visible{outline:2px solid #a9c0fc;outline-offset:7px}
.material-labels{list-style:none;padding:0;margin:0;position:absolute;right:0;top:50%;height:calc(4*var(--material-open-spread)*var(--material-open-scale)*.98 + var(--material-label-size));transform:translateY(-50%);width:27%;display:flex;flex-direction:column;justify-content:space-between;z-index:3;pointer-events:none}
.material-labels li{position:relative;display:flex;align-items:baseline;flex-shrink:0;gap:9px;color:#d1d9e4;font-size:12px;line-height:1.35;opacity:0;transform:translateX(-7px);transition:opacity 400ms ease,transform 550ms ease}
.material-labels li::before{content:'';position:absolute;width:22px;height:1px;right:calc(100% + 10px);top:8px;background:#7e8ca0}
.material-label-number{font:9px/1.5 var(--mono);color:#8d9cb1;flex:none}
.material[data-expanded=true] .material-object{left:39%;top:calc((100% - var(--material-rail-space))/2);width:150px;transform:translate(-50%,-50%) rotateX(var(--material-x)) rotateY(var(--material-y)) rotateZ(-24deg) scale3d(var(--material-open-scale),var(--material-open-scale),var(--material-open-scale))}
.material[data-expanded=true] .material-layer{transform:translateZ(calc((2 - var(--index))*var(--material-open-spread)))}
.material[data-expanded=true] .material-stage::after{left:39%;width:50%;top:calc(100% - var(--material-rail-space) - 22px);height:20px}
.material[data-expanded=true] .material-labels li{opacity:1;transform:none;transition-delay:200ms}
.material-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0 0;border-top:1px solid #303641}
.material-signature{font:9px/1.6 var(--mono);letter-spacing:.055em;color:#8f9aac}
.material-hint{font-size:10px;line-height:1.5;color:#a8b3c3;text-align:right}
.material-static-description{font-size:12px;color:#a8b3c3;margin:15px 0 0}
@media(max-width:1100px){
 .material{padding-left:0;--material-field-height:440px;--material-open-scale:.68}.material-stage{--material-open-spread:60px}.material-object{width:76%}
 .material-signature{font-size:8px;letter-spacing:0}.material-caption{gap:12px}.material-hint{font-size:9px;max-width:135px}
 .material-labels{width:28%}.material-labels li{font-size:11px;gap:6px}.material-labels li::before{width:12px;right:calc(100% + 6px)}
 .material[data-expanded=true] .material-object{left:35%}
}
@media(max-width:760px){
 .material{max-width:550px;justify-self:center;--material-field-height:420px;--material-open-scale:.7;--material-label-size:44px;--material-shadow-bottom:12px;--material-row-gap:12px;--material-stage-min:172px;--material-rail-space:48px}.material-stage{--material-open-spread:92px}.material-object{width:min(285px,75%)}
 .material-stage::after{width:62%}.material-caption{padding-top:12px}.material-signature{font-size:8px}
 .material-engraving{font-size:9px;letter-spacing:2px}.material-layer-etch{font-size:8px}
 .material-labels{width:28%}.material-labels li{font-size:11px}
 .material[data-expanded=true] .material-object{left:35%}
 .material-hint{max-width:135px}
}
@media(max-width:380px){.material{--material-field-height:365px;--material-open-scale:.68}.material-stage{--material-open-spread:70px}.material-engraving{font-size:8px}.material-labels li{gap:5px}.material-labels li::before{width:8px;right:calc(100% + 4px)}.material-label-number{font-size:8px}.material[data-expanded=true] .material-object{left:35%}}
@media(prefers-reduced-motion:reduce){.material *,.material-stage::after{transition:none!important}}

/* Hover reveals an explanation; clicking the object still opens or closes it. */
.material-layer-select{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;clip-path:polygon(27% 0,73% 0,100% 27%,100% 73%,73% 100%,27% 100%,0 73%,0 27%);transform:translateZ(2px);pointer-events:auto;cursor:pointer;touch-action:pan-y pinch-zoom}
.material-layer-select:focus-visible{outline:0;background:#2854aa22;box-shadow:inset 0 0 0 3px #a9c0fc}
.material-layer.is-selected .material-layer-face{filter:brightness(1.12)}
.material-labels{pointer-events:auto}
.material-label-button{display:flex;align-items:baseline;gap:9px;height:var(--material-label-size);min-height:var(--material-label-size);width:100%;padding:4px 0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.material-label-button:hover,.material-label-button[aria-expanded=true]{color:#fff}
.material-label-button[aria-expanded=true] .material-label-number{color:#a9c0fc}
.material-label-button:focus-visible{outline:2px solid #a9c0fc;outline-offset:4px}
.material-labels li::before{top:calc(var(--material-label-size)/2)}
.material-label-button>span:last-child{min-width:0;line-height:1.2}
.material-detail{grid-row:2;display:grid;min-height:5rem;max-height:calc(var(--material-field-height) - var(--material-stage-min) - var(--material-row-gap));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#506078 transparent;position:relative;margin:0;padding:8px 0 0;visibility:hidden;border:0;border-radius:0;background:transparent;color:#b5bfcd}
.material[data-expanded=true][data-selected] .material-detail{visibility:visible}
.material-detail-panel{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity 180ms ease;min-width:0;pointer-events:none}
.material-detail-panel.is-current{visibility:visible;opacity:1;pointer-events:auto}
.material[data-expanded=true] .material-trigger{height:100%;z-index:0}
.material-detail-kicker{font:11px/1.4 var(--mono);letter-spacing:.045em;color:#a9bfff;margin-bottom:8px}
.material-detail h3{font:500 clamp(19px,1.65vw,24px)/1.2 var(--sans, sans-serif);letter-spacing:-.025em;color:#f4f5f6;margin:0 0 9px;text-wrap:balance}
.material-detail-panel>p{font-size:15px;line-height:1.55;margin:0;max-width:48ch;color:#bec7d2;overflow-wrap:break-word;text-wrap:pretty}
.material-detail-examples{font:11px/1.5 var(--mono);color:#8f9cac;margin-top:12px;overflow-wrap:break-word}
.material-static-description dt{color:#e0e6ee;margin-top:12px}
.material-static-description dd{margin:4px 0 0}
@media(max-width:1100px){.material-label-button{gap:6px}}
@media(max-width:760px){.material-label-button{gap:5px}.material-detail{min-height:5.5rem}}
@media(max-width:380px){.material-labels li{font-size:10px}.material-label-button{padding:3px 0}}
.material-label-short{display:none}
.material-detail:focus-visible{outline:1px solid #647b9b;outline-offset:4px}
@supports(height:1cqh){
 .material-stage{--material-open-spread:clamp(12px,29cqh,112px)}
 .material[data-expanded=true] .material-object{width:min(350px,72%,85cqh)}
}
/* A short label rail preserves touch targets when long copy shares the mobile field. */
@media(max-width:760px){
 .material[data-expanded=true] .material-object{left:50%;width:85px}
 .material-stage{--material-open-spread:34px}
 .material[data-expanded=true] .material-stage::after{left:50%}
 .material-labels{top:auto;bottom:0;right:0;width:100%;height:44px;transform:none;flex-direction:row;gap:2px}
 .material-labels li{flex:1;min-width:0;justify-content:center}
 .material-labels li::before,.material-label-number,.material-label-full{display:none}
 .material-label-short{display:inline}
 .material-label-button{justify-content:center;align-items:center;gap:0;padding:0;font-size:11px}
 @supports(height:1cqh){
  .material-stage{--material-open-spread:clamp(12px,calc(29cqh - 13.92px),112px)}
  .material[data-expanded=true] .material-object{width:min(285px,75%,calc(85cqh - 40.8px))}
 }
}

/* Reading rail: five stable rows, each explanation travels with its label.
   Mobile/tablet retain the shared reading slot below the object. */
.material-label-explanation{display:none}
.material-detail h3{font:12px/1.4 var(--mono);letter-spacing:.04em;color:#a9bfff;margin:0 0 9px}
@media(min-width:1101px){
 .material{--material-field-height:720px;--material-open-scale:.9}
 .material-field{grid-template-rows:minmax(0,1fr);row-gap:0}
 .material-stage{--material-open-spread:140px}
 .material-labels{width:46%;height:100%;max-height:100%;display:grid;grid-template-rows:repeat(5,minmax(min-content,1fr));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#506078 transparent}
 .material-labels li{min-width:0;align-items:stretch;font-size:15px}
 .material-labels li::before{display:none}
 .material[data-expanded=true] .material-object{left:27%;width:min(390px,calc(54% - 90px),75cqh)}
 .material-label-button{display:grid;grid-template-columns:24px minmax(0,1fr);align-content:center;align-items:baseline;column-gap:8px;row-gap:8px;position:relative;height:auto;min-height:44px;padding:12px 4px;font-size:15px;line-height:1.35;color:#c9d2df;border-radius:6px}
 .material-label-number{font-size:12px}
 .material-label-explanation{display:block;grid-column:2;font:16px/1.45 var(--sans,sans-serif);color:#b5bfcd;overflow-wrap:anywhere}
 .material-label-button>span:last-child{line-height:1.45}
 .material-label-button[aria-expanded=true]{color:#fff}
 .material-label-button[aria-expanded=true] .material-label-explanation{color:#f0f3f8}
 .material-label-button[aria-expanded=true]::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;background:#a9bfff;transform:translateX(-4px)}
 /* The shared panel is the accessible, single selected reading region.
    Inline rail copy is decorative to avoid repeating it for screen readers. */
 .material-detail{position:absolute;width:1px;height:1px;min-height:0;max-height:none;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);grid-row:auto}
}

/* Small engraved brand signature, shared by all viewport sizes. */
.material .material-engraving{left:20%;width:60%;bottom:17%;text-align:center;font:600 clamp(8px,1.1vw,12px)/1 var(--sans,sans-serif);letter-spacing:-.035em;color:#3f4b55;text-shadow:0 .5px 0 #ffffff80}

/* Lightweight studio metal: same five shells, same fixed 5px thickness.
   Broad reflected bands on five faces; no animated mesh depth or fine noise. */
.material-layer-face{background:radial-gradient(ellipse at 28% 18%,#ffffff82,transparent 52%),linear-gradient(var(--material-light),#707b84 0%,#b4bec5 16%,#eef1f3 34%,#c6cfd5 48%,#8b98a2 62%,#dce3e7 83%,#98a6b1 100%)}
.material-layer-actions .material-layer-face,.material-layer-rules .material-layer-face,.material-layer-data .material-layer-face{background:radial-gradient(ellipse at 28% 18%,#ffffff5c,transparent 52%),linear-gradient(var(--material-light),#78858f 0%,#c0cad1 21%,#e9eef1 38%,#a2afb9 57%,#d4dde3 80%,#909fa9 100%)}
.material-layer-agents .material-layer-face{background:radial-gradient(ellipse at 28% 18%,#88b8ef40,transparent 52%),linear-gradient(var(--material-light),#06234d 0%,#0b4287 20%,#2168b7 38%,#0b438c 58%,#082b5c 72%,#15539d 88%,#0a3572 100%)}
.material-wall{background:linear-gradient(0deg,#35434e 0%,#9cabb6 20%,#e2e9ed 45%,#8494a1 62%,#c1cdd5 82%,#6c7e8c 100%)}
.material-layer-bottom{background:linear-gradient(135deg,#3f4d59,#8a99a5 50%,#52616d)}
.material-bevel{background:linear-gradient(0deg,#718492 0%,#c6d2da 22%,#ffffff 48%,#e4ecf1 66%,#8d9fac 100%)}
.material-layer-agents .material-wall{background:linear-gradient(0deg,#04204a,#1a5598 24%,#4c8ace 46%,#0b3776 65%,#205ba1 85%,#082c61)}
.material-layer-agents .material-bevel{background:linear-gradient(0deg,#0d3974,#4086cc 35%,#78afe5 49%,#225b9c 72%,#103c77)}
.material-layer-agents .material-layer-bottom{background:linear-gradient(135deg,#041a3c,#124079 50%,#082b58)}
/* A single masked face opens onto twelve static cavity walls and a real floor.
   Masking is limited to the face, never the parent 3D volume. */
.material-layer-human .material-layer-face{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H100V100H0Z%20M44.5%2032H55.5V44.5H68V55.5H55.5V68H44.5V55.5H32V44.5H44.5Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H100V100H0Z%20M44.5%2032H55.5V44.5H68V55.5H55.5V68H44.5V55.5H32V44.5H44.5Z%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-repeat:no-repeat}
.material-cross-recess{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.material-cross-floor{position:absolute;inset:0;clip-path:polygon(44.5% 32%,55.5% 32%,55.5% 44.5%,68% 44.5%,68% 55.5%,55.5% 55.5%,55.5% 68%,44.5% 68%,44.5% 55.5%,32% 55.5%,32% 44.5%,44.5% 44.5%);transform:translateZ(-4.3px);background:linear-gradient(145deg,#070c11,#1c252d 65%,#10171e)}
.material-cross-wall{position:absolute;display:block;height:4.3px;transform-origin:0 0;transform:translateZ(-4.3px) rotateZ(var(--cross-angle)) rotateX(90deg);backface-visibility:visible;background:linear-gradient(180deg,#131d25 0%,#4c5b66 52%,#9ba8b1 84%,#f2f5f7 100%);pointer-events:none}
.material-machining{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(.2px);pointer-events:none;fill:none;color:#536472}
.material-machining-lights{stroke:#ffffff80;stroke-width:.9}
.material-machining-grooves{stroke:currentColor;stroke-width:.85;opacity:.72;filter:none}
.material-machining-bores{stroke:none;filter:none}
.material-layer-agents .material-machining{color:#04244c}
.material-layer-agents .material-machining-lights{stroke:#6ca5df80}
.material-layer-agents .material-machining-grooves{filter:none;opacity:.85}
.material-layer-agents .material-machining-bores{stroke:none}
.material .material-engraving{color:#28343d;text-shadow:0 .5px 0 #ffffffa6}

/* Open pose from the reference: visible faces with a compact, overlapping stack.
   Keep the closed composition and all reading/interaction regions in place. */
.material-stage{--material-open-spread:54px}
.material[data-expanded=true] .material-object{transform:translate(-50%,-50%) rotateX(var(--material-x)) rotateY(var(--material-y)) rotateZ(-8deg) scale3d(var(--material-open-scale),var(--material-open-scale),var(--material-open-scale))}
@supports(height:1cqh){
 .material-stage{--material-open-spread:clamp(12px,24cqh,112px)}
 .material[data-expanded=true] .material-object{width:min(350px,72%,78cqh)}
}
@media(max-width:760px){
 .material-stage{--material-open-spread:34px}
 @supports(height:1cqh){
  .material-stage{--material-open-spread:clamp(12px,calc(24cqh - 11.52px),112px)}
  .material[data-expanded=true] .material-object{width:min(285px,75%,calc(78cqh - 37.44px))}
 }
}
@media(min-width:1101px){
 .material-stage{--material-open-spread:140px}
 .material[data-expanded=true] .material-object{width:min(390px,calc(54% - 90px),75cqh)}
}
@media(min-width:761px) and (max-width:1100px){
 .material-labels{height:calc(4*var(--material-open-spread)*var(--material-open-scale)*.866 + var(--material-label-size))}
}

/* Measure the historical endpoint widths once, outside animation frames.
   Probes have no layout footprint and no 3D transforms or visible surface. */
.material-size-probe{position:absolute;left:0;top:0;height:0;visibility:hidden;pointer-events:none}
.material-size-closed{width:min(350px,72%);left:50%;top:calc(var(--material-field-height)/2)}
.material-size-open{width:150px;left:39%;top:calc((100% - var(--material-rail-space))/2)}
.material-size-shadow-closed{width:65%;max-width:340px;left:50%;top:calc(var(--material-field-height) - var(--material-shadow-bottom) - 34px)}
.material-size-shadow-open{width:50%;max-width:340px;left:39%;top:calc(100% - var(--material-rail-space) - 22px)}
@media(max-width:1100px){.material-size-closed{width:76%}.material-size-open{left:35%}}
@media(max-width:760px){.material-size-closed{width:min(285px,75%)}.material-size-open{width:85px;left:50%}.material-size-shadow-closed{width:62%}.material-size-shadow-open{left:50%}}
@media(min-width:1101px){.material-size-open{left:27%}}
@supports(height:1cqh){
 .material-size-open{width:min(350px,72%,78cqh)}
 @media(max-width:760px){.material-size-open{width:min(285px,75%,calc(78cqh - 37.44px))}}
 @media(min-width:1101px){.material-size-open{width:min(390px,calc(54% - 90px),75cqh)}}
}
.material[data-sizing=ready] .material-object{width:var(--material-model-size)!important;left:50%!important;top:calc(var(--material-field-height)/2)!important;transform:translate3d(-50%,-50%,0) rotateX(var(--material-x)) rotateY(var(--material-y)) rotateZ(-16deg) scale3d(1,1,1);transition-property:transform;will-change:transform}
.material[data-sizing=ready][data-expanded=true] .material-object{transform:translate3d(calc(-50% + var(--material-shift-x)),calc(-50% + var(--material-shift-y)),0) rotateX(var(--material-x)) rotateY(var(--material-y)) rotateZ(-8deg) scale3d(var(--material-open-scale),var(--material-open-scale),var(--material-open-scale))}
.material[data-sizing=ready] .material-stage::after{width:var(--material-shadow-size)!important;height:34px!important;left:50%!important;top:calc(var(--material-field-height) - var(--material-shadow-bottom) - 34px)!important;transform-origin:50% 0;transform:translate3d(-50%,0,0) scale3d(1,1,1);transition:transform 850ms cubic-bezier(.2,.75,.2,1);will-change:transform}
.material[data-sizing=ready][data-expanded=true] .material-stage::after{transform:translate3d(calc(-50% + var(--material-shadow-shift-x)),var(--material-shadow-shift-y),0) scale3d(var(--material-shadow-ratio),.5882352941176471,1)}
.material[data-sizing=ready] .material-layer{transform:translateZ(calc(var(--index)*-7px)) scale3d(1,1,1)}
.material[data-sizing=ready][data-expanded=true] .material-layer{transform:translateZ(calc((2 - var(--index))*var(--material-open-spread))) scale3d(var(--material-size-ratio),var(--material-size-ratio),1)}
.material[data-sizing=ready] .material-engraving,.material[data-sizing=ready] .material-layer-etch{transform:translateZ(1px) scale(1);transition:transform 850ms cubic-bezier(.2,.75,.2,1)}
.material[data-sizing=ready] .material-layer-etch{transform-origin:left center}
.material[data-sizing=ready][data-expanded=true] .material-engraving,.material[data-sizing=ready][data-expanded=true] .material-layer-etch{transform:translateZ(1px) scale(var(--material-text-ratio))}
/* Colors are baked by material-markup.mjs; no per-facet filter surfaces. */
.material .material-wall,.material .material-bevel{background:var(--material-edge-paint);filter:none}

/* WebGL is an enhancement: the original five CSS volumes stay available on failure.
   The canvas has no layout footprint; the existing field and reading rail reserve space. */
.material-3d{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.material-3d canvas{display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom}
.material[data-renderer=webgl] .material-object{visibility:hidden}
.material[data-renderer=webgl] .material-object *{pointer-events:none!important}
.material[data-renderer=webgl] .material-stage::after{opacity:0}
.material[data-renderer=webgl][data-expanded=true] .material-3d{width:54%;pointer-events:auto;cursor:pointer}
@media(min-width:761px) and (max-width:1100px){
 .material[data-renderer=webgl][data-expanded=true] .material-3d{width:70%}
}
@media(max-width:760px){
 .material[data-renderer=webgl][data-expanded=true] .material-3d{width:100%;height:calc(100% - 48px)}
}