:root{font-family:ui-rounded,"Avenir Next",system-ui,sans-serif;color:#283e35;background:#ecf1e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom));overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #d5ddd1;background:#f8faf5;border-radius:13px;min-height:44px;padding:10px 16px;touch-action:manipulation}button:hover{background:#e2e9dc}button:focus-visible{outline:3px solid #e8a747;outline-offset:2px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}header{display:flex;justify-content:space-between;align-items:center;max-width:1440px;width:100%;margin:0 auto 14px;gap:8px}.brand{display:flex;align-items:center;gap:12px}.logo{background:#345c45;color:#e3edbb;box-shadow:inset -7px -7px #0002;display:grid;place-items:center;width:45px;height:45px;border-radius:14px;font-size:32px}.brand strong{font-size:21px;letter-spacing:-.8px}.brand small{display:block;color:#708071;font-size:12px;margin-top:3px}.beta{font-size:10px;letter-spacing:1px;vertical-align:middle;margin-left:8px;background:#dce5d7;padding:4px 6px;border-radius:5px}.top-actions{display:flex;gap:8px}.subtle{background:transparent;border-color:transparent;font-size:13px;font-weight:600}.round{width:44px;padding:8px}main{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:1440px;margin:auto;gap:12px}.scene{flex:1;min-height:180px;position:relative;background:#b9d8cc;border-radius:22px;overflow:hidden;border:1px solid #bacbc0;box-shadow:0 8px 28px #23452a0b}canvas{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}.scene-top{position:absolute;top:17px;left:18px;right:18px;display:flex;justify-content:space-between;pointer-events:none}.pill{border:1px solid #fff5;border-radius:30px;background:#f8fff0b3;padding:8px 12px;font-size:10px;letter-spacing:1.4px;font-weight:700;backdrop-filter:blur(12px)}.pill i{display:inline-block;width:6px;height:6px;background:#487657;border-radius:50%;margin-right:6px}.objective{position:absolute;top:62px;left:20px;font-size:12px;color:#3e614e;pointer-events:none}.scene-bottom{position:absolute;bottom:10px;left:17px;right:10px;display:flex;align-items:center;justify-content:space-between;color:#fff9;font-size:10px;pointer-events:none}.scene-bottom button{pointer-events:auto;min-height:34px;background:#1e382bbb;color:white;border:1px solid #ffffff29;font-size:11px;padding:6px 12px}#toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#243d30e8;color:#fff;border-radius:12px;padding:10px 15px;opacity:0;pointer-events:none;transition:opacity .15s;font-size:13px;max-width:85%;text-align:center}#toast.show{opacity:1}.workbench{background:#f9faf5;border:1px solid #d7dfd2;border-radius:20px;padding:12px 16px}.bench-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.mode-switch{display:flex;background:#edf0e8;border-radius:12px;padding:3px}.mode-switch button{border:0;background:none;font-size:13px;min-height:36px;padding:7px 14px}.mode-switch .active{background:#345b45;color:#fff;box-shadow:0 3px 6px #20382522}#hint{font-size:12px;color:#7a8679}.hotbar{display:flex;justify-content:center;gap:8px}.slot{position:relative;display:flex;align-items:center;gap:10px;flex:1;max-width:150px;padding:9px 10px;background:#eef1e9;border:2px solid transparent}.slot.selected{border-color:#45694c;background:#e4ecd9}.slot .tile{width:29px;height:29px;display:block;flex-shrink:0;border:1px solid #0002;box-shadow:inset -5px -5px #0002,inset 3px 3px #fff2;image-rendering:pixelated}.slot .name{display:block;font-size:10px;color:#71816d}.slot .count{font-size:14px;font-weight:700}.controls{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.controls>span{font-size:9px;letter-spacing:2px;color:#95a08d}.arrows{display:flex;gap:7px}.controls button{min-width:58px;min-height:46px;font-size:22px;background:#e8ede1;border-color:#dce4d5;touch-action:none;user-select:none;-webkit-user-select:none}.controls #jump{background:#e8b971;border-color:#dfad61;color:#493920}#jump span{font-size:12px;font-weight:700}footer{font-size:10px;color:#879280;display:flex;justify-content:space-between;max-width:1440px;width:100%;margin:8px auto 0}dialog{width:min(440px,92vw);border:1px solid #cfd8c7;border-radius:24px;background:#f9faf3;color:#293f34;padding:27px;box-shadow:0 30px 90px #102c3244;max-height:85dvh}dialog::backdrop{background:#183c3a66;backdrop-filter:blur(5px)}dialog h1{font-size:27px;letter-spacing:-1px;line-height:1.15}dialog p{font-size:14px;line-height:1.65;color:#657560}.eyebrow{font-size:10px;letter-spacing:2px;color:#879677}dialog button{margin:4px 0}.primary{width:100%;background:#345b45;color:white;border:0}.primary:hover{background:#254735}.dialog-row{display:flex;gap:8px}.dialog-row>*{flex:1;font-size:12px}dialog small{display:block;font-size:11px;color:#8a9480;margin-top:18px}.muted{font-size:12px!important}.danger{color:#aa452f}.recipe{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;border-top:1px solid #dfe4d7}.recipe b{font-size:14px}.recipe small{margin:4px 0}.recipe button{font-size:12px}#preview{position:absolute;bottom:60px;left:20px;background:#ecba6b;padding:6px;font-size:10px}
@media(max-width:650px){body{padding-left:10px;padding-right:10px}header{margin-bottom:10px}.brand{gap:8px}.brand strong{font-size:18px}.brand small{font-size:10px}.logo{width:38px;height:38px;border-radius:11px}.top-actions{gap:0}.top-actions .subtle{font-size:11px;padding:8px}main{gap:9px}.scene{border-radius:18px}.workbench{padding:9px 10px;border-radius:18px}.bench-top{margin-bottom:8px}#hint{display:none}.hotbar{gap:4px}.slot{padding:5px 2px;flex-direction:column;gap:3px;border-radius:10px;min-width:0}.slot .name{display:none}.slot .tile{width:25px;height:25px}.slot .count{font-size:11px}.controls>span{font-size:8px;letter-spacing:1px}.keyboard{display:none}.pill{font-size:9px;padding:7px 10px}.objective{font-size:11px}.controls{margin-top:8px}.scene-top{left:12px;right:12px}.objective{left:14px}.controls button{min-width:55px}.brand .beta{margin-left:5px}}
@media(max-height:520px){header{margin-bottom:5px}.brand small,footer,.objective,.controls{display:none}.workbench{display:flex;gap:12px;padding:6px 10px}.bench-top{margin:0}.hotbar{flex:1}.slot{padding:4px}.scene{min-height:130px}.pill{padding:4px 8px}.slot .name{display:none}.slot .tile{width:22px;height:22px}.slot{flex-direction:row}.scene-top{top:9px}body{padding-top:6px}#hint{display:none}}
@media(max-height:520px){.controls{display:flex;position:fixed;bottom:max(88px,calc(env(safe-area-inset-bottom) + 80px));left:25px;right:25px;pointer-events:none}.controls button{pointer-events:auto;opacity:.88}.controls>span{display:none}}