/* Cube nets: a flat net that folds in 3D, and the printed sheets */
.cn-scene { --u: clamp(2.6rem, 11vw, 4.25rem); perspective: 900px; display: grid; place-items: center; padding: calc(var(--u) * .6) 0; overflow: visible; }
.cn-plane { position: relative; transform-style: preserve-3d; transition: transform 1.4s ease; }
.cn-scene.folded .cn-plane { transform: scale(1.25) rotateX(56deg) rotateZ(-32deg) translate(var(--tx), var(--ty)); }
.cn-face { --f: 0; position: absolute; width: var(--u); height: var(--u); box-sizing: border-box; margin: 0; padding: 0;
  background: var(--c); border: 0; box-shadow: inset 0 0 0 2px var(--ink); transform-style: preserve-3d; transition: transform 1.4s ease, outline-color .3s;
  font: inherit; color: var(--ink); display: grid; place-items: center; backface-visibility: visible; }
.cn-scene.folded .cn-face { --f: 1; }
button.cn-face { cursor: pointer; }
button.cn-face:focus-visible { outline: 3px solid var(--sky); outline-offset: -6px; }
.cn-face-star { font-size: calc(var(--u) * .5); line-height: 1; color: var(--ink); pointer-events: none; }
.cn-face.answer { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 7px var(--mint); }
.cn-face.clash { outline: 4px dashed var(--ink); outline-offset: -8px; }
.cn-face .ring { position: absolute; pointer-events: none; }
.cn-demo { display: grid; justify-items: center; gap: .5rem; margin: 0 0 1.25rem; padding: 1rem; border: 1px solid var(--edge); border-radius: .75rem; background: var(--paper, #fff); }
.cn-demo .cn-scene { --u: clamp(2.2rem, 9vw, 3.25rem); }
.cn-stage { display: grid; justify-items: center; gap: .75rem; width: 100%; }
.cn-q { font: 600 1.25rem/1.4 var(--f-b), var(--cjk); margin: 0; text-align: center; }
.cn-choices { justify-content: center; gap: .75rem; }
.cn-choices .btn { position: relative; min-width: 9em; font-size: 1.125rem; padding: .8em 1.2em; }
.cn-after { min-height: 3.5rem; text-align: center; max-width: 30rem; font-size: 1.0625rem; }
@media (prefers-reduced-motion: reduce) { .cn-plane, .cn-face { transition: none; } }

/* flat nets (sheets and the answer key) */
.cn-net .cn-sq { fill: #fff; stroke: #263049; stroke-width: .05; }
.cn-net .cn-tab { fill: #f3f1ea; stroke: #263049; stroke-width: .03; stroke-dasharray: .08 .06; }
.cn-net .cn-star { font-size: .6px; fill: #263049; }
.cn-net .cn-lab { font-size: .4px; fill: #6b7280; }
.cn-net .cn-mark { fill: none; stroke: #E8573C; stroke-width: .07; }
.cn-sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.cn-sheet li { display: flex; align-items: center; gap: .75rem; break-inside: avoid; }
.cn-sheet .ws-no { align-self: flex-start; }
.cn-yn { width: 2.25rem; height: 2.25rem; border: 1.5px solid #263049; border-radius: .25rem; display: grid; place-items: center; font-size: 1.4rem; margin-left: auto; flex: none; }
.keyview .cn-net { max-width: 100%; height: auto; }
.cn-cut { display: grid; gap: 8mm; justify-items: center; align-content: start; }
.cn-cut figure { margin: 0; display: grid; justify-items: center; gap: 2mm; }
.cn-cut figcaption { font-size: 9pt; color: #6b7280; }
@media print {
  .cn-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7mm 6mm; }
  .cn-yn { width: 11mm; height: 11mm; }
}
.cn-scene.folded .cn-face { background: color-mix(in srgb, var(--c) 78%, transparent); }