:root{--ink:#3a2f25;--cream:#fbf3e2;--cream-2:#f3e6cd;--leaf:#6b8e5a;--leaf-dark:#4f6e43;--sun:#e9a23b;--berry:#c2607a;--shadow:0 6px 18px #3c281438;--round:16px;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;background:#cfe8ff;margin:0;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#scene{position:absolute;inset:0}canvas{display:block}.hud{pointer-events:none;align-items:center;gap:14px;padding:12px 16px;display:flex;position:absolute;top:0;left:0;right:0}.hud>*{pointer-events:auto}.hud .title{color:#fff;text-shadow:0 2px 6px #00000059;letter-spacing:.2px;font-size:20px;font-weight:800}.pill{background:var(--cream);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:6px;padding:7px 14px;font-size:14px;font-weight:700;display:inline-flex}.spacer{flex:1}.btn{cursor:pointer;background:var(--cream);color:var(--ink);box-shadow:var(--shadow);border:none;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;transition:transform 80ms,background .15s}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--leaf);color:#fff}.btn.sun{background:var(--sun);color:#fff}.btn:disabled{opacity:.5;cursor:default}.streak{gap:1px;font-size:15px;display:inline-flex}.dialogue{background:var(--cream);border-radius:var(--round);width:min(640px,92vw);box-shadow:var(--shadow);opacity:0;pointer-events:none;border:3px solid #fff;grid-template-columns:56px 1fr;align-items:center;gap:14px;padding:16px 18px;transition:opacity .25s,transform .25s;display:grid;position:absolute;bottom:24px;left:50%;transform:translate(-50%)translateY(20px)}.dialogue.show{opacity:1;pointer-events:auto;cursor:pointer;transform:translate(-50%)translateY(0)}.dialogue .avatar{background:var(--cream-2);border-radius:14px;place-items:center;width:56px;height:56px;font-size:30px;display:grid}.dialogue .who{color:var(--leaf-dark);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-size:13px;font-weight:800}.dialogue .text{font-size:16px;line-height:1.4}.panel{background:var(--cream);border-radius:var(--round);width:min(300px,88vw);box-shadow:var(--shadow);opacity:0;pointer-events:none;border:3px solid #fff;padding:16px;transition:opacity .2s,transform .2s;position:absolute;bottom:24px;right:16px;transform:translateY(16px)}.panel.show{opacity:1;pointer-events:auto;transform:translateY(0)}.panel h3{margin:0 0 4px;font-size:17px}.panel .sub{color:#7a6a55;margin-bottom:12px;font-size:13px}.panel .actions{flex-wrap:wrap;gap:8px;display:flex}.crop-picker{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px;display:grid}.crop-btn{text-align:left;background:var(--cream-2);cursor:pointer;border:2px solid #0000;border-radius:12px;padding:8px 10px;font-size:13px;font-weight:700}.crop-btn small{color:#7a6a55;margin-top:2px;font-size:11px;font-weight:500;display:block}.crop-btn:hover{border-color:var(--leaf)}.overlay{opacity:0;pointer-events:none;z-index:20;background:#281c1273;place-items:center;transition:opacity .2s;display:grid;position:absolute;inset:0}.overlay.show{opacity:1;pointer-events:auto}.book{background:var(--cream);border-radius:var(--round);width:min(560px,92vw);max-height:78vh;box-shadow:var(--shadow);border:4px solid #fff;padding:22px 24px;overflow-y:auto}.book h2{color:var(--leaf-dark);margin:0 0 14px}.entry{border-bottom:1px dashed #d8c6a4;padding:8px 0;font-size:14px;line-height:1.4}.entry:last-child{border-bottom:none}.note-row{gap:8px;margin-top:14px;display:flex}.note-row input{border:2px solid #d8c6a4;border-radius:10px;flex:1;padding:8px 10px;font-family:inherit;font-size:14px}.toast{background:var(--leaf-dark);color:#fff;box-shadow:var(--shadow);opacity:0;pointer-events:none;z-index:30;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700;transition:opacity .2s,transform .2s;position:absolute;top:64px;left:50%;transform:translate(-50%)translateY(-10px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.hint{color:#7a6a55;box-shadow:var(--shadow);background:#fbf3e2e6;border-radius:12px;max-width:220px;padding:8px 12px;font-size:12px;position:absolute;bottom:24px;left:16px}@media (max-width:560px){.hud .title{display:none}.panel{bottom:96px}}