:root{--color: #ffffff;--rgb: 255, 255, 255;--brown-dark: #2a1810;--brown-dark-rgb: 42, 24, 16;--brown-medium: #4a3228;--brown-medium-rgb: 74, 50, 40;--brown-warm: #6b4423;--brown-warm-rgb: 107, 68, 35;--brown-light: #8b5a2b;--brown-light-rgb: 139, 90, 43;--brown-accent: #a67c52;--brown-accent-rgb: 166, 124, 82}*{margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden}body{background:radial-gradient(ellipse at center,#1f1510,#0d0908);min-height:100vh;font-family:system-ui,-apple-system,sans-serif}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(2px 2px at 20px 30px,rgba(166,124,82,.35),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.2),transparent),radial-gradient(1px 1px at 90px 40px,rgba(139,90,43,.45),transparent),radial-gradient(2px 2px at 130px 80px,rgba(255,255,255,.2),transparent),radial-gradient(1px 1px at 160px 120px,rgba(166,124,82,.35),transparent),radial-gradient(2px 2px at 200px 50px,rgba(255,255,255,.25),transparent),radial-gradient(1px 1px at 250px 160px,rgba(139,90,43,.4),transparent),radial-gradient(2px 2px at 300px 90px,rgba(255,255,255,.2),transparent),radial-gradient(1px 1px at 350px 200px,rgba(166,124,82,.45),transparent),radial-gradient(2px 2px at 400px 140px,rgba(255,255,255,.15),transparent);background-size:450px 250px;animation:twinkle 8s ease-in-out infinite alternate;pointer-events:none;z-index:0}@keyframes twinkle{0%{opacity:.6}to{opacity:1}}canvas{display:block}body>div:first-of-type{z-index:1}.face-container{box-shadow:0 0 30px rgba(var(--brown-accent-rgb),.25),inset 0 0 20px rgba(var(--brown-dark-rgb),.4);transform-style:preserve-3d;backface-visibility:hidden}.face-container:hover{box-shadow:0 0 50px rgba(var(--brown-accent-rgb),.4),inset 0 0 20px rgba(var(--brown-dark-rgb),.4)}.instructions{position:fixed;bottom:30px;left:50%;transform:translate(-50%);color:#ffffff80;font-size:.85rem;letter-spacing:2px;text-transform:uppercase;z-index:100;pointer-events:none}.loading{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(ellipse at center,#1f1510,#0d0908);z-index:9999;transition:opacity .5s ease,visibility .5s ease}.loading.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-spinner{width:60px;height:60px;border:3px solid rgba(var(--brown-accent-rgb),.2);border-top-color:var(--brown-accent);border-radius:50%;animation:spin 1s cubic-bezier(.5,.1,.5,.9) infinite}.loading-cube{width:40px;height:40px;position:relative;transform-style:preserve-3d;animation:rotateCube 2s ease-in-out infinite}.loading-cube-face{position:absolute;width:40px;height:40px;border:2px solid var(--brown-accent);background:rgba(var(--brown-dark-rgb),.6);box-shadow:inset 0 0 15px rgba(var(--brown-accent-rgb),.3)}.loading-cube-face:nth-child(1){transform:translateZ(20px)}.loading-cube-face:nth-child(2){transform:rotateY(180deg) translateZ(20px)}.loading-cube-face:nth-child(3){transform:rotateY(90deg) translateZ(20px)}.loading-cube-face:nth-child(4){transform:rotateY(-90deg) translateZ(20px)}.loading-cube-face:nth-child(5){transform:rotateX(90deg) translateZ(20px)}.loading-cube-face:nth-child(6){transform:rotateX(-90deg) translateZ(20px)}.loading-text{color:var(--brown-accent);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.9rem;letter-spacing:3px;text-transform:uppercase;animation:pulse 1.5s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rotateCube{0%,to{transform:rotateX(-20deg) rotateY(0)}50%{transform:rotateX(-20deg) rotateY(180deg)}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--brown-accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px rgba(var(--brown-accent-rgb),.6);transition:transform .2s ease,box-shadow .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 15px rgba(var(--brown-light-rgb),.9)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--brown-accent);border:none;border-radius:50%;cursor:pointer;box-shadow:0 0 10px rgba(var(--brown-accent-rgb),.6)}input[type=range]::-moz-range-track{background:linear-gradient(to right,var(--brown-accent),var(--brown-dark));height:4px;border-radius:2px}