.popomee-sound-garden { color: #243638; font: inherit; max-width: 760px; margin: 0 auto; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.popomee-sound-garden * { box-sizing: border-box; }
.popomee-sound-garden [hidden] { display: none !important; }
.popomee-sound-garden p { margin: 12px 0; line-height: 1.65; }
.popomee-sound-garden button, .popomee-sound-garden select, .popomee-sound-garden input[type="number"] { font: inherit; color: #243638; background: #fff; border: 1px solid #81978d; border-radius: 6px; min-height: 44px; padding: 10px 14px; max-width: 100%; box-shadow: none; }
.popomee-sound-garden button { cursor: pointer; line-height: 1.4; white-space: normal; }
.popomee-sound-garden button:disabled { cursor: default; opacity: 0.55; }
.popomee-sound-garden :is(button, input, select, summary, h2):focus-visible { outline: 3px solid #31585b; outline-offset: 3px; }
.popomee-sound-garden .sg-primary { background: #31585b; color: #fff; }
.popomee-sound-garden .sg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.popomee-sound-garden label { display: block; font-weight: 600; min-width: 0; }
.popomee-sound-garden select { width: 100%; margin-top: 6px; }
.popomee-sound-garden .sg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.popomee-sound-garden .sg-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; }
.popomee-sound-garden progress { display: block; width: 100%; height: 8px; margin: 12px 0; accent-color: #31585b; }
.popomee-sound-garden .sg-garden { display: block; width: 100%; height: auto; max-height: 180px; }
.popomee-sound-garden .sg-petals { opacity: 0.15; }
.popomee-sound-garden [data-grown="true"] .sg-petals { opacity: 1; }
.popomee-sound-garden .sg-tap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 150px; background: #f3f7f2; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.popomee-sound-garden .sg-tap svg { width: 140px; height: 88px; pointer-events: none; }
.popomee-sound-garden .sg-tap span { pointer-events: none; font-weight: 700; }
.popomee-sound-garden .sg-feedback { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 46px; text-align: center; }
.popomee-sound-garden .sg-score { font-size: 2rem; font-weight: 700; }
.popomee-sound-garden details { border-top: 1px solid #d8ded8; padding: 12px 0; margin-top: 16px; }
.popomee-sound-garden summary { cursor: pointer; min-height: 44px; padding: 10px 0; }
.popomee-sound-garden fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.popomee-sound-garden fieldset > * { margin: 12px 0; }
.popomee-sound-garden input[type="range"] { display: block; width: 100%; min-height: 44px; accent-color: #31585b; }
.popomee-sound-garden input[type="number"] { display: block; width: 150px; margin-top: 6px; }
.popomee-sound-garden .sg-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.popomee-sound-garden input[type="checkbox"] { width: 22px; height: 22px; accent-color: #31585b; }
.popomee-sound-garden .sg-small, .popomee-sound-garden .sg-links { font-size: 0.85rem; }
.popomee-sound-garden .sg-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.popomee-sound-garden .sg-links a { color: #31585b; text-decoration: underline; }
@media (max-width: 400px) { .popomee-sound-garden .sg-choices { grid-template-columns: 1fr; } .popomee-sound-garden .sg-meta { font-size: 0.9rem; } .popomee-sound-garden .sg-garden { max-height: 100px; } }