:root{--bg: #1b1b1f;--panel: #2b2b31;--panel-2: #34343c;--slot: #48484f;--slot-in: #3a3a42;--border: #14141a;--text: #e9e9ee;--muted: #a6a6b0;--accent: #6ab04c;--accent-2: #4a8f34}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:24px 24px}.app{max-width:1000px;margin:0 auto;padding:24px 20px 60px}header{text-align:center;margin-bottom:24px}h1{margin:0 0 6px;font-size:2rem;letter-spacing:.5px}.tagline{color:var(--muted);margin:0 auto;max-width:560px;font-size:.9rem}main{display:grid;grid-template-columns:1fr;gap:24px}section{background:var(--panel);border:2px solid var(--border);border-radius:10px;padding:20px}h2{margin:0 0 14px;font-size:1.1rem}.grid-and-output{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:6px;padding:8px;background:var(--panel-2);border-radius:8px}.cell{width:62px;height:62px;border:2px solid var(--border);border-radius:6px;background:var(--slot);color:var(--text);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;transition:transform .06s ease,filter .1s ease;box-shadow:inset 2px 2px #ffffff0f,inset -2px -2px #0000004d}.cell:hover{filter:brightness(1.12)}.cell:active{transform:translateY(1px)}.cell.filled{border-color:#0d0d12}.icon{line-height:1;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4))}.arrow{font-size:2rem;color:var(--muted)}.output-area{display:flex;flex-direction:column;align-items:center;gap:8px}.cell.output{width:74px;height:74px;background:var(--slot-in)}.cell.output:disabled{cursor:not-allowed;opacity:.7}.cell.output.ready{border-color:var(--accent);box-shadow:0 0 0 2px #6ab04c66,inset 2px 2px #ffffff14;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 2px #6ab04c59}50%{box-shadow:0 0 0 5px #6ab04c1f}}.output-label{font-size:.85rem;color:var(--muted);min-height:1.1em}.count{position:absolute;right:3px;bottom:1px;font-size:.78rem;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 1px 0 #000;pointer-events:none}.controls{display:flex;gap:10px;justify-content:center;margin-top:18px}.btn{background:var(--accent-2);color:#fff;border:2px solid var(--border);border-radius:6px;padding:9px 14px;font-size:.9rem;font-weight:600;cursor:pointer;box-shadow:inset 2px 2px #ffffff26,inset -2px -2px #0000004d}.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,58px);gap:6px}.inv-slot{width:58px;height:58px}.inv-slot.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),inset 2px 2px #ffffff14}.hint{color:var(--muted);font-size:.85rem;margin:12px 0 0}.empty{color:var(--muted)}.recipe-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.recipe-card{background:var(--panel-2);border:2px solid var(--border);border-radius:8px;padding:10px;display:flex;align-items:center;gap:12px}.mini-grid{display:flex;flex-direction:column;gap:2px}.mini-row{display:flex;gap:2px}.mini-cell{width:22px;height:22px;border-radius:3px;background:var(--slot-in);display:flex;align-items:center;justify-content:center}.recipe-out{display:flex;align-items:center;gap:6px;font-size:.82rem}@media (min-width: 760px){main{grid-template-columns:1.2fr 1fr;align-items:start}.recipe-book{grid-column:1 / -1}}.back-btn{position:absolute;left:16px;top:16px;background:var(--panel-2)}header{position:relative}.menu{--page-scale: 2;zoom:var(--page-scale);min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px 20px;text-align:center}.menu-head{display:flex;flex-direction:column;gap:6px}.menu-logo{margin:0;font-size:clamp(2.4rem,7vw,4rem);letter-spacing:4px;color:#cfe8b8;text-shadow:3px 3px 0 #2c3a1e,6px 6px 0 rgba(0,0,0,.35)}.menu-sub{margin:0;color:var(--muted)}.menu-name{width:100%;max-width:320px;padding:11px 14px;font-size:1rem;font-family:inherit;color:var(--text);background:var(--panel);border:2px solid var(--border);border-radius:8px;outline:none;text-align:center}.menu-name::placeholder{color:var(--muted)}.menu-name:focus{border-color:var(--accent)}.menu-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));gap:20px;width:100%;max-width:660px;justify-content:center}.menu-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:var(--panel);border:2px solid var(--border);border-radius:12px;padding:22px 20px 20px;color:var(--text);cursor:pointer;transition:transform .1s ease,border-color .1s ease,box-shadow .1s ease;box-shadow:inset 2px 2px #ffffff0d,0 6px 16px #0000004d}.menu-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 24px #0006,0 0 0 2px #6ab04c66}.menu-icon{font-size:2.6rem;line-height:1}.menu-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);background:var(--panel-2);border-radius:4px;padding:3px 7px}.menu-card h2{margin:4px 0 0;font-size:1.25rem}.menu-card p{margin:0;color:var(--muted);font-size:.9rem}.menu-play{margin-top:8px;color:var(--accent);font-weight:700}.menu-foot{color:var(--muted);font-size:.8rem;margin:0}.voxel-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#8fc7ff;cursor:default}.voxel-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.voxel-canvas canvas{display:block}.voxel-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:12px 16px;pointer-events:none;z-index:8}.voxel-top .back-btn{position:static;pointer-events:auto}.voxel-title{color:#fff;font-weight:700;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:22px;line-height:1;mix-blend-mode:difference;pointer-events:none;z-index:4}.voxel-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0c128c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:6;cursor:pointer}.overlay-card{background:var(--panel);border:2px solid var(--border);border-radius:12px;padding:24px 28px;text-align:center;max-width:380px;pointer-events:none}.overlay-card h2{margin:0 0 8px}.overlay-card p{color:var(--muted);margin:8px 0}.controls-list{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:8px;color:var(--text);font-size:.9rem}.click-hint{color:var(--accent)!important;font-weight:700}kbd{display:inline-block;background:var(--panel-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:1px 6px;font-size:.8rem;font-family:inherit;margin:0 1px}.hotbar{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:6px;background:#14141a99;border:2px solid var(--border);border-radius:8px;z-index:5}.hotbar-slot{position:relative;width:48px;height:48px;border:2px solid var(--border);border-radius:6px;background:var(--slot);cursor:pointer;padding:4px}.hotbar-slot.active{border-color:#fff;box-shadow:0 0 0 2px #fff9}.hotbar-slot .swatch{display:block;width:100%;height:100%;border-radius:3px;box-shadow:inset 2px 2px #ffffff26,inset -2px -2px #0000004d}.slot-num{position:absolute;top:1px;left:3px;font-size:.65rem;color:#fff;text-shadow:1px 1px 0 #000}.loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.1rem}.mp-status{pointer-events:auto;font-size:.82rem;font-weight:600;color:#fff;background:#14141a99;border:2px solid var(--border);border-radius:6px;padding:5px 10px;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.mp-status.offline{color:var(--muted)}.mp-status.connecting,.mp-status.reconnecting{color:#e8c04a}.voxel-top-right{margin-left:auto;display:flex;align-items:center;gap:12px}.fly-status{font-size:.82rem;font-weight:600;color:#7fd0ff;background:#14141a99;border:2px solid var(--border);border-radius:6px;padding:5px 10px;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.overlay-card,.voxel-title,.mp-status,.fly-status,.voxel-top .back-btn,.voxel-top .instr-btn{zoom:2}.voxel-top .instr-btn{pointer-events:auto}.voxel-top{flex-wrap:wrap;row-gap:8px}