.garden-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0 12px}.garden-heading h1{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0}.garden-heading span{font-size:14px;color:var(--muted)}
.garden-instrument{min-width:0}.garden-views{display:flex;border-bottom:1px solid var(--line);gap:4px;padding-bottom:8px}.garden-views button,.garden-tools button{min-width:44px;min-height:44px;padding:8px 16px;border:1px solid transparent;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}.garden-views button:hover,.garden-tools button:hover{background:var(--surface)}.garden-views button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}
#garden-scene{height:clamp(340px,calc(100svh - 335px),850px);position:relative;background:#abb9b5}#garden-scene canvas{display:block;width:100%;height:100%;touch-action:none}#garden-status{position:absolute;inset:40% 24px auto;text-align:center;color:#17221e;background:#abb9b5;padding:12px}
.garden-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.garden-camera{display:flex;gap:4px}.garden-tools button{padding:8px 12px;border-color:var(--line)}.garden-light{display:flex;align-items:center;gap:12px;font-size:14px;min-height:44px}.garden-light input{width:160px;min-height:44px;margin:0;accent-color:var(--mint)}
.garden-notes{margin:0 0 24px}.garden-notes summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--muted);font-size:14px}.garden-notes-body{padding:16px 0;max-width:70ch}.garden-notes h2{font-size:24px;margin-bottom:12px}.garden-notes p{font-size:16px;line-height:1.6}.source-links{display:flex;flex-wrap:wrap;gap:8px 24px}.source-links a{display:inline-flex;min-height:44px;align-items:center}
@media(max-width:600px){.garden-heading span{display:none}.garden-views{gap:0;justify-content:space-between}.garden-views button{padding:8px 10px;font-size:14px}.garden-tools{flex-wrap:wrap;gap:4px}.garden-light{flex:1;justify-content:flex-end}.garden-light input{width:110px}.garden-heading{padding:12px 0}#garden-scene{height:clamp(310px,calc(100svh - 450px),600px)}}
@media(max-width:380px){.garden-light{justify-content:space-between;flex-basis:100%}.garden-light input{width:75%}}