/* Corner and Creations navigation for families. */
:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#130f20;color:#f5edff;--cube:clamp(160px,40vw,290px);--half:calc(var(--cube)/2)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 38%,#49305e 0,#21172f 42%,#130f20 80%)}
[hidden]{display:none!important}a{color:inherit}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button,.nav-link{border:1px solid #a58abb;border-radius:12px;background:#2d213d;padding:12px 18px;min-height:46px;text-decoration:none}button:hover,.nav-link:hover{background:#4c3264}button[aria-pressed=true]{background:#654286;border-color:#f0cf90}
:focus-visible{outline:3px solid #ffdc92;outline-offset:5px}header,footer{max-width:1040px;margin:auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{font-size:.9rem;color:#d4c3df}.languages{display:flex;gap:6px}.languages button{padding:9px 12px}main{max-width:960px;margin:auto;text-align:center;padding:0 24px 24px}h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(2rem,6vw,3rem);margin:18px 0 10px}p{line-height:1.6}.intro{color:#dfcfe9;margin:0 auto;max-width:560px}
.cube-stage{height:calc(var(--cube)*2);display:grid;place-items:center;perspective:1300px;touch-action:none;user-select:none;max-width:100%;overflow:clip}.navigation-cube{position:relative;width:var(--cube);height:var(--cube);transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-18deg);transition:none}.cube-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:26px;border:2px solid #b195cf;border-radius:12px;background:linear-gradient(145deg,#8c5fb6,#59327c 65%,#43225f);box-shadow:inset 0 0 45px #ca96f333;backface-visibility:hidden;text-decoration:none;font-family:Georgia,serif;font-size:clamp(1.3rem,4vw,2.15rem);line-height:1.25;color:#fff5ff}.cube-face small{font:500 .92rem system-ui;color:#f3deff}.cube-face:nth-child(1){transform:translateZ(var(--half))}.cube-face:nth-child(2){transform:rotateY(90deg) translateZ(var(--half))}.cube-face:nth-child(3){transform:rotateY(180deg) translateZ(var(--half))}.cube-face:nth-child(4){transform:rotateY(270deg) translateZ(var(--half))}.cube-face.top{transform:rotateX(90deg) translateZ(var(--half));background:#a175c2}.cube-face.bottom{transform:rotateX(-90deg) translateZ(var(--half));background:#392348}.cube-face .symbol{font:normal clamp(2.5rem,8vw,4rem) Georgia,serif;color:#ffdb9c}.cube-face[inert]{cursor:default}.cube-face:hover:not([inert]){background:linear-gradient(145deg,#a275cc,#69408b 65%,#52306d)}
.cube-controls,.face-choices{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.cube-controls{margin:4px 0 16px}.face-choices{max-width:780px;margin:auto}.face-choices button{flex:1 1 150px;font-size:.95rem}.hint{font-size:.9rem;color:#d4c1df}.list-toggle{margin-top:18px}.plain-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:12px 0;list-style:none}.plain-links a,.plain-links button{display:block;min-height:48px;padding:14px 18px;border:1px solid #b69bc9;border-radius:12px;background:#352348;font-size:1rem}footer{font-size:.9rem;color:#d6c7df}dialog{max-width:min(520px,90vw);color:#f5edff;background:#30203f;border:1px solid #ba9fd1;border-radius:18px;padding:28px}dialog::backdrop{background:#080511b8}dialog h2{font:normal 2rem Georgia,serif}.still .navigation-cube{transition:none}.no-cube .cube-stage,.no-cube .cube-controls,.no-cube .face-choices,.no-cube .hint{display:none}.no-cube .plain-links{display:flex!important}
@media(prefers-reduced-motion:reduce){.navigation-cube{transition:none}}@media(max-width:440px){header,footer{padding:16px}main{padding:0 16px 20px}.cube-face{padding:12px;gap:8px;font-size:1.15rem}.cube-face .symbol{font-size:2rem}.face-choices button{flex-basis:45%}.cube-controls button{padding:10px 13px}}
@media print{.navigation-cube{transition:none}.cube-stage,.cube-controls,.face-choices,.list-toggle{display:none}.plain-links{display:flex!important}}

.cube-position{width:var(--cube);height:var(--cube);transform-style:preserve-3d}.cube-stage{cursor:grab}.cube-held{cursor:grabbing}.cube-controls button{font-size:.95rem}.cube-face small{line-height:1.45}.cube-face.top,.cube-face.bottom{font-size:1rem}.cube-face:not(a):not(button){cursor:grab}[data-collection="creations"] .cube-face{background:linear-gradient(145deg,#6c74b5,#4b467d 65%,#302b56)}
