.cube-explorer{padding:24px 28px 16px}.cube-explorer-stage{--cube-size:clamp(120px, 15vw, 160px);perspective:900px;place-items:center;height:256px;display:grid;position:relative}.cube-explorer-orbit{border:1px solid var(--diagram-grid);border-radius:50%;width:88%;max-width:320px;height:112px;position:absolute;bottom:12px;transform:rotate(-12deg)}.cube-explorer-shadow{background:radial-gradient(ellipse, color-mix(in srgb, var(--foreground) 12%, transparent), transparent 70%);pointer-events:none;border-radius:50%;width:144px;height:24px;position:absolute;bottom:36px}.cube-explorer-note{color:var(--muted-foreground);font:italic 12px var(--font-display);position:absolute;bottom:12px;right:0;transform:rotate(-6deg)}.cube-explorer-float{width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d;animation:12s ease-in-out infinite paused cube-drift}.cube-explorer[data-playing=true] .cube-explorer-float{animation-play-state:running}.cube-model{--cube-depth:calc(var(--cube-size) / 2);width:100%;height:100%;transform-style:preserve-3d;position:relative;transform:rotateX(-24deg)rotateY(-34deg)}.cube-model-face{transform-style:preserve-3d;border:1px dashed color-mix(in srgb, var(--cube-wire) 65%, transparent);position:absolute;inset:0}.cube-model-front{transform:translateZ(var(--cube-depth))}.cube-model-back{transform:rotateY(180deg) translateZ(var(--cube-depth))}.cube-model-left{transform:rotateY(-90deg) translateZ(var(--cube-depth))}.cube-model-right{transform:rotateY(90deg) translateZ(var(--cube-depth))}.cube-model-top{transform:rotateX(90deg) translateZ(var(--cube-depth))}.cube-model-bottom{transform:rotateX(-90deg) translateZ(var(--cube-depth))}.cube-model-starch{border:1px solid var(--cube-outline);background-color:var(--cube-starch);background-image:radial-gradient(var(--cube-starch-dark) .8px, transparent .8px);box-shadow:inset 0 0 0 5px color-mix(in srgb, var(--cube-starch-light) 45%, transparent);opacity:0;background-size:12px 12px;border-radius:3px;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .6s;position:absolute;inset:-1px;transform:translateZ(28px)scale(.88)}.cube-model-starch[data-visible=true]{opacity:.94;transform:translateZ(0)}.cube-model-top>.cube-model-starch,.cube-model-bottom>.cube-model-starch{background-color:var(--cube-starch-light)}.cube-model-right>.cube-model-starch,.cube-model-back>.cube-model-starch{background-color:var(--cube-starch-dark)}.cube-model-filling{--cube-depth:calc(var(--cube-size) * .34);transform-style:preserve-3d;position:absolute;inset:16%}.cube-model-filling>.cube-model-face{border:1px solid var(--cube-filling-line);background:var(--cube-filling);background-image:repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb, var(--cube-filling-line) 18%, transparent) 15px 16px)}.cube-model-filling>.cube-model-top{background:var(--cube-filling-light)}.cube-model-filling>.cube-model-right,.cube-model-filling>.cube-model-back{background-color:var(--cube-filling-dark)}.cube-model-layers,.cube-model-pieces{transform-style:preserve-3d;position:absolute;inset:0}.cube-model-layer{--layer-thickness:calc(var(--cube-size) * .12);--layer-offset:0px;top:calc(50% - var(--layer-thickness) / 2);width:100%;height:var(--layer-thickness);transform:translateY(var(--layer-offset)) scale(.88);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,1,.36,1);position:absolute}.cube-model-layer-top{--layer-offset:calc((var(--layer-thickness) - var(--cube-size)) / 2 + 1px)}.cube-model-layer-bottom{--layer-offset:calc((var(--cube-size) - var(--layer-thickness)) / 2 - 1px)}.cube-model-layer>.cube-model-face{border:1px solid var(--cube-outline);background:var(--cube-starch);opacity:0;transition:opacity .6s}.cube-model-layer>.cube-model-right,.cube-model-layer>.cube-model-back{background:var(--cube-starch-dark)}.cube-model-layer>.cube-model-top,.cube-model-layer>.cube-model-bottom{top:calc((var(--layer-thickness) - var(--cube-size)) / 2);height:var(--cube-size);background-color:var(--cube-starch-light);background-image:radial-gradient(var(--cube-starch) .8px, transparent .8px);background-size:12px 12px}.cube-model-layer>.cube-model-top{transform:rotateX(90deg) translateZ(calc(var(--layer-thickness) / 2))}.cube-model-layer>.cube-model-bottom{transform:rotateX(-90deg) translateZ(calc(var(--layer-thickness) / 2))}.cube-model-layers[data-visible=true]>.cube-model-layer{transform:translateY(var(--layer-offset)) scale(1)}.cube-model-layers[data-visible=true] .cube-model-face{opacity:1}.cube-model-chip{--chip-size:calc(var(--cube-size) * .42);--chip-thickness:calc(var(--cube-size) * .035);width:var(--chip-size);height:calc(var(--chip-size) * .866025);transform-style:preserve-3d;transition:scale .8s cubic-bezier(.22,1,.36,1);position:absolute;scale:.5}.cube-model-chip>span{opacity:0;transition:opacity .6s;position:absolute}.cube-model-chip-top,.cube-model-chip-bottom{clip-path:polygon(50% 0,100% 100%,0 100%);background-color:var(--cube-starch-light);background-image:radial-gradient(var(--cube-starch-dark) .7px, transparent .7px);transform:translateZ(calc(var(--chip-thickness) / 2));background-size:8px 8px;inset:0}.cube-model-chip-bottom{background-color:var(--cube-starch);transform:translateZ(calc(var(--chip-thickness) / -2))}.cube-model-chip-left,.cube-model-chip-right,.cube-model-chip-base{width:var(--chip-size);height:var(--chip-thickness);background:var(--cube-starch-dark);transform-origin:0 0}.cube-model-chip-left{transform:translateZ(calc(var(--chip-thickness) / -2)) rotateZ(-60deg) rotateX(90deg);top:100%;left:0}.cube-model-chip-right{transform:translateZ(calc(var(--chip-thickness) / -2)) rotateZ(60deg) rotateX(90deg);top:0;left:50%}.cube-model-chip-base{transform:translateZ(calc(var(--chip-thickness) / -2)) rotateX(90deg);top:100%;left:0}.cube-model-pieces[data-visible=true]>.cube-model-chip{scale:1}.cube-model-pieces[data-visible=true] .cube-model-chip>span{opacity:1}.cube-model-chip-one{transform:translateZ(calc(var(--cube-size) * .24)) rotateX(28deg) rotateY(-20deg) rotateZ(-24deg);top:32%;left:-14%}.cube-model-chip-two{transform:translateZ(calc(var(--cube-size) * -.08)) rotateX(-15deg) rotateY(36deg) rotateZ(18deg);top:14%;left:76%}.cube-model-chip-three{top:-12%;left:30%;transform:rotateX(62deg)rotate(-12deg)}.cube-model-chip-four{transform:translateZ(calc(var(--cube-size) * .5)) rotateX(54deg) rotateZ(28deg);top:72%;left:0}.cube-model-chip-five{transform:translateZ(calc(var(--cube-size) * .44)) rotateX(38deg) rotateY(-12deg) rotateZ(-28deg);top:68%;left:64%}.cube-explorer-copy{text-align:center}.cube-explorer-number{color:var(--muted-foreground);letter-spacing:1.6px;text-transform:uppercase;font:9px ui-monospace,monospace}.cube-explorer-copy h2{color:var(--primary);font:52px / 1.1 var(--font-display);letter-spacing:-2px;margin-block:4px}.cube-explorer-structure{min-height:20px;font-size:13px;line-height:20px}.cube-explorer-examples{min-height:36px;color:var(--muted-foreground);text-wrap:balance;margin-top:4px;font-size:11px;line-height:18px}.cube-explorer-footer{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;margin-top:16px;padding-top:8px;display:flex}.cube-explorer-footer .diagram-legend{gap:12px;margin-top:0}.cube-explorer-controls{display:flex}.cube-explorer-controls>button{width:44px;height:44px;color:var(--muted-foreground)}@keyframes cube-drift{0%,to{transform:translateY(0)rotateY(-8deg)}50%{transform:translateY(-12px)rotateY(12deg)}}@media (width<=1000px){.cube-explorer{padding-inline:20px}.cube-explorer>.diagram-caption{flex-wrap:wrap;gap:4px 12px}}@media (width<=760px){.cube-explorer-stage{--cube-size:148px}}@media (width<=380px){.cube-explorer{padding-inline:16px}.cube-explorer-stage{--cube-size:132px;height:240px}}@media (prefers-reduced-motion:reduce){.cube-explorer-float{animation:none}.cube-model-starch,.cube-model-layer,.cube-model-layer>.cube-model-face,.cube-model-chip,.cube-model-chip>span{transition:none}}