:root{--bg: #1b1a22;--panel: #24232d;--line: #34323f;--text: #e8e4d8;--muted: #9a95a8;--accent: #8fd16a;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}canvas{-webkit-tap-highlight-color:transparent}#garden-overlay,#view,#pip{touch-action:manipulation}body{background:var(--bg);color:var(--text);font:13px/1.4 ui-monospace,SF Mono,Menlo,monospace;display:flex;flex-direction:column}header{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}h1{font-size:15px;margin:0}nav{display:flex;gap:4px}.spacer{flex:1}.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}button,select,input[type=number]{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:4px 8px;font:inherit;cursor:pointer}button:hover{border-color:var(--muted)}button.active{border-color:var(--accent);color:var(--accent)}body:not([data-mode=gallery]) .gallery-only,body:not([data-mode=editor]) .editor-only,body:not([data-mode=garden]) .garden-only{display:none!important}main{flex:1;display:flex;min-height:0}#controls{width:300px;flex:none;overflow-y:auto;border-right:1px solid var(--line);padding:8px 12px 24px}details{border-bottom:1px solid var(--line);padding:6px 0}summary{cursor:pointer;font-weight:600;color:var(--accent);padding:2px 0}.ctl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;margin:5px 0}.ctl .name{color:var(--muted)}.ctl .val{text-align:right;font-variant-numeric:tabular-nums}.ctl-range input{grid-column:1 / -1;width:100%;accent-color:var(--accent);margin:2px 0}.ctl-bool{grid-template-columns:auto 1fr}.ctl-bool input{accent-color:var(--accent)}.ctl select{max-width:150px}.ctl input[type=color]{width:40px;height:22px;border:none;background:none;padding:0}#palette{display:flex;flex-direction:column;gap:3px;padding:6px 0 10px}#palette div{display:flex;gap:2px}#palette i{width:22px;height:14px;display:block;border-radius:2px}#editor{flex:1;display:flex;flex-direction:column;min-width:0}#stage{flex:1;display:grid;place-items:center;min-height:0;padding:12px;overflow:hidden}canvas{image-rendering:pixelated;display:block}#view{border-radius:6px;box-shadow:0 6px 30px #0006}#pip{position:fixed;right:calc(10px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));z-index:6;image-rendering:pixelated;border-radius:6px;box-shadow:0 6px 24px #000a;outline:2px solid var(--line);cursor:pointer;opacity:0;transform:translateY(-12px) scale(.96);pointer-events:none;transition:opacity .15s,transform .15s}#pip.on{opacity:1;transform:none;pointer-events:auto}#gallery-wrap{flex:1;overflow:auto;padding:12px 16px 32px}.hint{color:var(--muted);margin:0 0 12px}#gallery{display:flex;flex-direction:column;gap:12px}.g-row{display:grid;grid-template-columns:110px repeat(3,max-content);gap:12px;align-items:center}.g-head div{color:var(--accent);font-weight:600}.g-label{color:var(--muted)}figure{margin:0;position:relative;cursor:pointer}figure canvas{border-radius:6px;outline:2px solid transparent}figure:hover canvas{outline-color:var(--accent)}figcaption{position:absolute;top:4px;left:6px;font-weight:700;color:#0008}#garden-wrap{flex:1;display:flex;min-width:0}#garden-stage{flex:1;display:grid;place-items:center;padding:8px;overflow:hidden}#garden-stage>canvas{grid-area:1 / 1;image-rendering:pixelated}#garden-view{border-radius:6px;box-shadow:0 6px 30px #0006}#garden-plants,#garden-plants-cpu{pointer-events:none}#garden-tools{width:250px;flex:none;overflow-y:auto;border-left:1px solid var(--line);padding:10px 12px 24px}#garden-tools h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:8px 0 6px}.tool-row{display:flex;gap:6px}.tool-row .tool{flex:1}.tool.active{border-color:var(--accent);color:var(--accent);background:#2d3a28}#packets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.packet{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 4px;background:#e9dcc0;color:#3a2a1a;border:2px solid #b89a6a;border-radius:3px}.packet canvas{width:64px;height:80px;object-fit:contain;image-rendering:pixelated}.packet span{font-size:11px;font-weight:700}.packet:hover{border-color:#8a6a3a}.packet.active{border-color:var(--accent);background:#f4ecd6;color:#3a2a1a;box-shadow:0 0 0 2px var(--accent)}.status{color:var(--muted);min-height:3em;margin-top:12px}.day{font-weight:700;color:var(--accent)}button.primary{border-color:var(--accent);color:var(--accent)}.packet.mystery{background:#d9c9f0;border-color:#9b83c6}.packet.mystery canvas{width:40px;height:48px;margin:16px 0}#inventory{display:grid;grid-template-columns:1fr 1fr;gap:6px}#inventory .empty{grid-column:1 / -1;color:var(--muted);margin:0;font-size:12px}.modal-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:10;padding:16px}.modal{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px 24px;max-width:360px;text-align:center;box-shadow:0 12px 40px #000a}.modal h3{margin:4px 0 6px;color:var(--accent)}.modal p{margin:0 0 16px;color:var(--text)}.modal-art{display:block;margin:0 auto 8px;image-rendering:pixelated;height:120px;width:auto}.modal p.modal-latin-label{color:var(--muted);font-size:13px;margin:0 0 4px}.modal p.modal-latin{font:italic 15px/1.45 Georgia,Times New Roman,serif;overflow-wrap:anywhere;max-height:6.6em;overflow-y:auto;padding-right:4px}.packet .latin{font-style:italic;font-family:Georgia,Times New Roman,serif}.modal-actions{display:flex;gap:8px;justify-content:center}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--panel);color:var(--text);border:1px solid var(--accent);border-radius:6px;padding:8px 14px;z-index:11;box-shadow:0 6px 20px #0008}@media(pointer:coarse){select,input[type=number]{font-size:16px}button,select{min-height:34px}}@media(max-width:760px){body{height:auto;min-height:100dvh}header{gap:6px;padding:6px 10px}h1{font-size:13px;flex:1;white-space:nowrap}.spacer{display:none}.tools{width:100%;gap:6px}.tools label{white-space:nowrap}button{padding:6px 10px;min-height:34px}nav button{padding:4px 8px;min-height:30px;font-size:12px}select,input[type=number]{font-size:16px;padding:4px 6px;min-height:34px}main{flex-direction:column;flex:none}#garden-wrap{flex:none}#garden-stage{padding:6px;height:calc((100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right)) * var(--scene-aspect, 1.1) + 16px)}#garden-tools{display:flex;flex-direction:column;width:auto;border-left:none;border-top:1px solid var(--line);overflow:visible;padding:8px 12px calc(24px + env(safe-area-inset-bottom))}.status{order:-1;min-height:1.5em;margin:4px 0 8px}#packets,#inventory{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}.tool-row .tool{min-height:44px}#editor{order:1;flex:none}#stage{flex:none;height:52dvh;padding:8px}#controls{order:2;width:auto;border-right:none;border-top:1px solid var(--line);overflow:visible;padding:8px 14px calc(24px + env(safe-area-inset-bottom))}.ctl-range input{height:28px}.ctl select{max-width:60vw}#gallery-wrap{flex:none;padding:10px}.g-row{grid-template-columns:1fr 1fr 1fr}.g-row .g-label{grid-column:1 / -1}.g-head{display:none}figure canvas{width:100%;height:auto}.modal{max-width:100%}}
