/* Three-dimensional block island, original materials and interaction UI. */
.voxel-section{margin:30px 0;border:3px solid #202e1c;background:#39472e;box-shadow:0 6px #172013;color:#e7e8cc;scroll-margin-top:20px}.voxel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:#283820;border-bottom:2px solid #152511}.voxel-heading .eyebrow{font-family:Silkscreen,monospace;font-size:14px;color:#a8c57d}.voxel-heading h2{font-size:25px;margin:5px 0 4px;color:#f0f2db}.voxel-heading p{font-size:14px;color:#c0cba9;margin:0}.voxel-modes{display:flex;gap:6px}.voxel-modes button{font-size:14px;padding:8px 14px;min-height:38px}.voxel-modes button[aria-pressed=true]{background:#578237;color:#fff2d6;box-shadow:inset 2px 2px #a5bf7b,inset -2px -2px #2c4a1f}.voxel-viewport{position:relative;height:540px;background:#9db4b2;overflow:hidden;isolation:isolate}.voxel-viewport canvas{display:block;width:100%;height:100%;outline:0;touch-action:none;cursor:grab}.voxel-viewport canvas:active{cursor:grabbing}.voxel-viewport canvas:focus-visible{outline:3px solid #d4eb91;outline-offset:-5px}.voxel-label{position:absolute;top:16px;left:18px;pointer-events:none;background:#203321d9;padding:7px 11px;border:1px solid #9bab7380;font-family:Silkscreen,monospace;font-size:14px;color:#e3eec9}.voxel-label span{color:#b8dd82}.voxel-view-controls{position:absolute;right:16px;top:16px;display:flex;gap:5px;flex-wrap:wrap;max-width:180px;justify-content:flex-end}.voxel-view-controls button{width:33px;height:33px;font-size:17px;padding:0}.voxel-help{position:absolute;left:18px;bottom:94px;right:18px;text-align:center;font-size:14px;color:#f1f4df;text-shadow:1px 2px #102313;pointer-events:none}.voxel-feedback{display:inline-block;background:#22351fce;padding:6px 14px;max-width:100%}.voxel-hotbar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;background:#28301edb;border:2px solid #121d10;box-shadow:inset 2px 2px #7e8a64,3px 3px #17231588}.voxel-slot{width:59px;height:59px;position:relative;background:#7f896e;border:2px solid #3f4f2f;box-shadow:inset 3px 3px #b8bfa4,inset -3px -3px #566344;display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer}.voxel-slot[aria-pressed=true]{border-color:#f1f3d7;outline:2px solid #eff3cf;outline-offset:0;z-index:1;background:#9ba982}.voxel-slot kbd{position:absolute;top:1px;left:4px;font-size:14px;color:#f6f4db;text-shadow:1px 1px #263321}.voxel-slot small{position:absolute;right:4px;bottom:0;font-family:Silkscreen,monospace;font-size:14px;color:#fffbe2;text-shadow:1px 1px #223118}.voxel-slot svg{width:33px;height:37px;filter:drop-shadow(2px 3px #20351b66)}.voxel-slot .tool-icon{font-size:22px;color:#eff0d5}.voxel-mining{position:absolute;left:50%;top:55%;transform:translateX(-50%);height:7px;width:130px;background:#1a2b17;border:2px solid #b1c58a;pointer-events:none;box-shadow:2px 2px #102211}.voxel-mining span{display:block;height:100%;background:#d8edb2;width:0}.voxel-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:14px 20px;background:#2c3b24;font-size:14px;color:#bdcba9;border-top:2px solid #1a2915}.voxel-actions{display:flex;gap:7px;flex-wrap:wrap}.voxel-actions button{padding:6px 10px;font-size:14px}.voxel-save{font-size:14px;color:#91a77b}.voxel-confirm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 20px;background:#574d2b;color:#f1e4bf;font-size:14px}.voxel-confirm button{padding:5px 9px;font-size:14px}.voxel-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:25px;background:#263a29;color:#e4e8cc;z-index:5}.voxel-fallback h3{font-size:19px}.voxel-fallback p{max-width:450px;font-size:14px}.voxel-fallback img{max-width:100%;width:560px;image-rendering:pixelated}.voxel-tip{font-size:14px;color:#aebd98;margin-top:4px}.hero .world-coords{font-size:14px}.hero .world-label{font-family:Silkscreen,monospace}.hero .landscape{background:#647f73}.hero #world{object-position:center center}.hero:after{background:linear-gradient(90deg,#12291ef2 0%,#173524cc 35%,#193e2722 67%,transparent 100%)}
@media(max-width:700px){.voxel-heading{padding:16px;gap:12px;flex-wrap:wrap}.voxel-heading h2{font-size:22px}.voxel-heading p{font-size:14px;max-width:270px}.voxel-viewport{height:460px}.voxel-label{top:12px;left:12px;font-size:14px;padding:6px 8px}.voxel-view-controls{right:12px;top:12px;max-width:120px}.voxel-view-controls button{width:29px;height:29px;font-size:15px}.voxel-slot{width:47px;height:51px;padding:5px}.voxel-hotbar{gap:3px;padding:4px;bottom:17px}.voxel-slot svg{width:28px;height:31px}.voxel-slot kbd{font-size:14px}.voxel-slot small{font-size:14px}.voxel-help{font-size:14px;left:10px;right:10px;bottom:88px}.voxel-feedback{padding:6px 9px}.voxel-footer{padding:13px}.voxel-modes button{font-size:14px;min-height:34px;padding:7px 13px}.hero:after{background:linear-gradient(180deg,#122b21ef 0,#183b29dd 35%,#183b2933 72%,transparent)}}
@media(max-width:360px){.voxel-slot{width:40px;height:47px}.voxel-hotbar{gap:2px}.voxel-viewport{height:430px}.voxel-slot svg{width:25px;height:28px}.voxel-label{font-size:14px}.voxel-heading h2{font-size:21px}.voxel-help{font-size:14px}}
