:root{--ink:#173657;--muted:#7894b2;--blue:#5ab4f6;--blue-deep:#48a8f3;--cream:#fbfaf6;--wash:#edf6fc;--line:#d9e8f3}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif}body{min-height:100vh}.app-shell{min-height:100vh;max-width:1800px;margin:auto;padding:30px clamp(28px,5vw,82px) 24px;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:5}.brand{color:var(--ink);text-decoration:none;font-family:Nunito,sans-serif;font-size:46px;line-height:.82;font-weight:900;letter-spacing:-2px}.brand b{color:#4aa8ed}.brand small{display:block;margin-top:19px;color:#7590af;font:600 12px/1.65 "DM Sans",sans-serif;letter-spacing:3px}.utility-nav{display:flex;gap:21px;align-items:center}.icon-button{width:46px;height:46px;border:0;background:transparent;border-radius:50%;color:#5d7fa5;display:grid;place-items:center;cursor:pointer;transition:background .18s,transform .18s}.icon-button:hover,.icon-button:focus-visible{background:#edf6fc;transform:scale(1.03);outline:none}.icon-button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.settings-button svg{width:25px;height:25px}.focus-stage{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:clamp(20px,5vh,58px);position:relative}.drop-wrap{width:min(31vw,370px);min-width:220px;aspect-ratio:360/430;display:grid;place-items:center}.droplet{width:100%;height:100%;overflow:visible}.drop-fill{fill:#f6fbff}.drop-outline{fill:none;stroke:#4ba9f2;stroke-width:7;stroke-linejoin:round}.water-group{transform:translateY(430px);transition:transform .35s linear}.wave{fill:url(#waterGradient)}.wave-back{opacity:.72;animation:wave 9s linear infinite}.wave-front{animation:wave 6s linear infinite reverse}.face{fill:#173657}.face path{stroke:#173657;stroke-width:7}.highlight{fill:#fff;opacity:.8}.timer{font-family:Nunito,sans-serif;font-size:clamp(56px,6.1vw,86px);font-weight:900;letter-spacing:-3px;line-height:.95;margin-top:7px;color:#173657}.task-row{margin-top:8px;height:40px;display:flex;align-items:center}.task-button{border:0;background:#e8f3fb;color:var(--ink);border-radius:22px;padding:9px 22px 9px 29px;min-width:237px;font:600 16px "DM Sans";cursor:pointer;display:flex;justify-content:center;gap:13px;align-items:center}.task-button:hover{background:#deeffa}.task-button svg{width:18px;height:18px;fill:none;stroke:#7196bc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.task-input{display:none;border:0;border-bottom:2px solid var(--blue);background:transparent;color:var(--ink);font:600 16px "DM Sans";text-align:center;width:270px;padding:8px;outline:none}.controls{display:flex;align-items:center;gap:18px;margin-top:20px}.primary-control,.secondary-control{border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .18s,background .18s}.primary-control{width:70px;height:70px;background:var(--blue);color:#fff}.secondary-control{width:53px;height:53px;background:#eaf3f9;color:#7598bd}.primary-control:hover,.secondary-control:hover{transform:scale(1.03)}.primary-control svg{width:27px;height:27px;fill:currentColor}.secondary-control svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sound-holder{position:relative}.drops-section{text-align:center;margin-top:35px}.drops-section p{font-size:14px;color:#7894b2;margin:0 0 12px}.drop-list{display:flex;justify-content:center;align-items:center;gap:8px;min-height:38px;max-width:360px;flex-wrap:wrap}.mini-drop{width:29px;height:35px}.mini-drop path{fill:#79c4f8;stroke:#55aff1;stroke-width:1.5}.mini-drop.empty path{fill:none;stroke:#8eb4d5;stroke-width:1.5;stroke-dasharray:3 3}.mini-drop .mini-face{fill:#173657}.drop-count{font-size:13px;color:#7894b2;margin-top:9px}.popover{position:absolute;top:58px;right:0;background:rgba(255,255,252,.98);border:1px solid #e1edf4;border-radius:14px;box-shadow:0 12px 35px rgba(31,75,113,.13);padding:18px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:20}.popover.open{opacity:1;visibility:visible;transform:none}.stats-popover{width:190px}.popover-kicker{font-size:10px;letter-spacing:1.8px;color:#86a3be;margin:0 0 3px}.stats-popover strong,.stats-popover span{display:block}.stats-popover strong{font-size:17px}.stats-popover span{color:#7894b2;font-size:12px;margin-top:2px}.week-label{margin-top:18px}.calendar-popover{width:250px}.calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.calendar-head button{border:0;background:none;color:var(--muted);font-size:23px;cursor:pointer}.calendar-head strong{font-size:14px}.weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.weekdays{color:#9ab0c5;font-size:10px;margin-bottom:5px}.calendar-grid span{font-size:11px;padding:5px;color:#5c7896;border-radius:50%}.calendar-grid span.today{background:#e7f4fc;color:var(--ink);font-weight:700}.calendar-grid span.has-focus:after{content:"";display:block;margin:2px auto -4px;width:3px;height:3px;border-radius:50%;background:var(--blue)}.sound-popover{top:62px;left:50%;right:auto;transform:translate(-50%,6px);padding:7px;width:140px}.sound-popover.open{transform:translate(-50%,0)}.sound-popover button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px;border-radius:8px;color:var(--ink);cursor:pointer}.sound-popover button:hover{background:var(--wash)}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;border-radius:30px;padding:10px 18px;font-size:13px;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:rgba(26,54,79,.12);display:grid;place-items:center;z-index:50}.modal-backdrop[hidden]{display:none}.settings-modal{width:min(92vw,410px);background:#fffefa;border-radius:20px;padding:25px;box-shadow:0 20px 60px rgba(31,75,113,.2);animation:modalIn .2s ease}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{font-family:Nunito;font-size:25px;margin:0}.close-button{border:0;background:none;color:#8ca5ba;font-size:27px;cursor:pointer}.settings-modal fieldset{border:0;padding:0;margin:25px 0 20px}.settings-modal legend,.field-label{display:block;font-size:13px;font-weight:700;margin-bottom:10px}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.preset-grid label{border:1px solid var(--line);border-radius:9px;padding:10px 4px;text-align:center;font-size:12px;cursor:pointer;color:#5d7895}.preset-grid input{position:absolute;opacity:0}.preset-grid label:has(input:checked){background:#e5f3fc;border-color:#9fd4f6;color:var(--ink);font-weight:700}.custom-line{display:flex;align-items:center;gap:10px;font-size:12px;color:#7894b2;margin-top:10px}.custom-line input,.field-label input{border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 10px;color:var(--ink);font:14px "DM Sans";outline:none}.custom-line input:focus,.field-label input:focus{border-color:var(--blue)}.goal-grid{grid-template-columns:repeat(3,1fr)}.field-label input{display:block;width:100%;margin-top:8px}.settings-note{font-size:12px;color:#b2764e;background:#fff5eb;padding:9px 11px;border-radius:8px}.modal-actions{display:flex;justify-content:flex-end;gap:14px;align-items:center;margin-top:23px}.text-button,.save-button{border:0;cursor:pointer;font:600 13px "DM Sans"}.text-button{background:none;color:#7894b2}.save-button{background:var(--blue);color:#fff;border-radius:18px;padding:10px 17px}.save-button:hover{background:var(--blue-deep)}@keyframes wave{from{transform:translateX(-36px)}to{transform:translateX(36px)}}@keyframes modalIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (max-height:760px) and (min-width:700px){.app-shell{padding-top:20px}.focus-stage{padding-top:5px}.drop-wrap{width:min(27vw,310px)}.timer{font-size:clamp(48px,5vw,70px)}.controls{margin-top:13px}.drops-section{margin-top:20px}}@media (max-width:650px){.app-shell{padding:20px 18px}.brand{font-size:35px}.brand small{font-size:9px;letter-spacing:2px;margin-top:14px}.utility-nav{gap:1px}.icon-button{width:40px;height:40px}.drop-wrap{width:min(72vw,310px);margin-top:4vh}.timer{font-size:60px}.task-button{min-width:220px}.popover{right:0}.stats-popover{right:50px}.calendar-popover{right:0}.settings-modal{padding:22px}.preset-grid{gap:5px}}
/* Generated drop assets used by the My Drops Today progress row. */
.drop-list{gap:6px;min-height:36px;max-width:420px}
.flying-collected-drop{position:fixed;z-index:100;pointer-events:none;object-fit:contain;transform-origin:center;filter:drop-shadow(0 5px 7px rgba(64,156,224,.2))}.mini-drop.awaiting-drop{visibility:hidden}.mini-drop.drop-landed{animation:dropLanded .4s cubic-bezier(.2,.8,.2,1)}@keyframes dropLanded{0%{transform:scale(.82)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
.mini-drop{display:block;flex:0 0 36px;width:36px;height:36px;object-fit:contain;user-select:none}

/* Compact AQUA focus lockup from the original reference layout */
.brand-lockup{display:flex;align-items:flex-start;gap:24px;min-width:0}
.aqua-brand{display:flex;align-items:center;gap:7px;color:var(--ink);font-family:Nunito,sans-serif;font-size:28px;font-weight:900;letter-spacing:-1.1px;line-height:1;white-space:nowrap;margin-top:-3px}
.aqua-brand img{display:block;width:42px;height:46px;object-fit:contain;user-select:none}
@media (max-width:650px){.brand-lockup{gap:10px}.aqua-brand{gap:4px;font-size:18px;letter-spacing:-.6px;margin-top:-2px}.aqua-brand img{width:28px;height:31px}}

/* Refine the relative alignment: AQUA + focus share one baseline, while the
   two-line tagline starts at the left edge of focus. */
.brand-lockup{gap:clamp(10px,1vw,18px)}
.aqua-brand{gap:clamp(6px,.55vw,9px);font-size:clamp(22px,2vw,30px)}
.brand{font-size:clamp(40px,3.2vw,54px);line-height:.82}
.brand small{margin-top:clamp(18px,1.35vw,26px);font-size:clamp(10px,.85vw,14px);line-height:1.7;letter-spacing:clamp(2.5px,.25vw,4px)}
.brand-tagline{position:relative;left:clamp(-150px,-7vw,-105px)}
@media (max-width:650px){.brand-lockup{gap:6px}.aqua-brand{gap:4px;font-size:18px}.brand{font-size:35px}.brand small{margin-top:14px;font-size:9px;letter-spacing:2px}.brand-tagline{left:-58px}}

/* Keep the desktop focus view fully visible without a browser scrollbar. */
html,body{overflow:hidden;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
@media (min-width:651px) and (max-height:1000px){
  .app-shell{height:100vh;min-height:0;overflow:hidden;padding-top:20px;padding-bottom:12px}
  .focus-stage{min-height:0;padding-top:0;margin-top:-35px}
  .drop-wrap{width:min(24vw,250px)}
  .timer{font-size:clamp(48px,5.2vw,72px);margin-top:0}
  .task-row{margin-top:4px}
  .controls{margin-top:10px}
  .drops-section{margin-top:12px}
}

/* Goals + reset controls */
[hidden]{display:none!important}
.goals-button svg{width:28px;height:28px}
.task-row{position:relative}
.task-button svg{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.goal-selector{top:48px;left:50%;right:auto;width:min(320px,calc(100vw - 36px));padding:8px;transform:translate(-50%,6px);z-index:35}
.goal-selector.open{transform:translate(-50%,0)}
.goal-selector button{display:flex;width:100%;align-items:center;gap:10px;border:0;background:none;border-radius:9px;padding:10px 11px;color:var(--ink);font:600 13px "DM Sans",sans-serif;text-align:left;cursor:pointer}
.goal-selector button:hover{background:var(--wash)}
.goal-selector .selector-status{width:17px;color:#4aa8ed;font-weight:800;text-align:center}
.goal-selector .selector-manage{border-top:1px solid var(--line);margin-top:5px;padding-top:12px;color:#5b84ad}
.reset-control{opacity:1}
.reset-control:disabled{opacity:.38;cursor:not-allowed;transform:none!important}
.reset-control svg{width:24px;height:24px}
.goals-panel{position:fixed;top:40vh;left:max(24px,5vw);z-index:40;width:min(475px,calc(100vw - 48px));padding:25px 18px 18px;background:rgba(255,255,252,.98);border:1px solid #e6eef3;border-radius:20px;box-shadow:0 20px 55px rgba(31,75,113,.15);animation:panelIn .2s ease}
.goals-panel-head{display:flex;align-items:center;justify-content:space-between;padding:0 5px 17px}
.goals-panel-head{cursor:grab;user-select:none;touch-action:none}
.goals-panel-head:active{cursor:grabbing}
.goals-panel-head h2{margin:0;color:var(--ink);font:800 25px/1 Nunito,sans-serif;letter-spacing:-.5px}
.panel-close{border:0;background:none;color:#7a9abb;font-size:29px;line-height:1;cursor:pointer;padding:0 3px}
.goal-list{display:flex;flex-direction:column;gap:0}
.goal-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto 32px;align-items:center;gap:8px;min-height:58px;padding:7px 7px 7px 3px;border-top:1px solid #e5edf3;border-radius:12px;transition:background .18s,transform .18s,box-shadow .18s,opacity .18s}
.goal-row:first-child{border-top:0}
.goal-row:hover{background:#f7fbfe}
.goal-row.current{background:#eef7fe}
.goal-row.dragging{opacity:.96;transform:scale(1.01);box-shadow:0 8px 20px rgba(50,109,157,.12);z-index:2}
.goal-row.dragging~.goal-row{transition:transform .18s ease}
.goal-row.completed .goal-title{color:#8da1b4;text-decoration:line-through;text-decoration-thickness:1px}
.goal-row.completed .goal-check{color:#fff;background:#4aa8ed;border-color:#4aa8ed}
.goal-check{width:29px;height:29px;padding:0;border:2px solid #9db9d2;border-radius:50%;display:grid;place-items:center;background:#fff;color:#fff;font:800 16px/1 "DM Sans",sans-serif;cursor:pointer}
.goal-check.current{border-color:#4aa8ed;background:#4aa8ed}
.goal-main{min-width:0;border:0;background:none;padding:7px 0;color:var(--ink);font:600 15px/1.25 "DM Sans",sans-serif;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-drops{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:38px;color:#6e94b7;font-size:12px;white-space:nowrap}
.goal-drops .mini-drop{width:25px;height:25px;flex:0 0 25px}
.goal-drops .more-drops{margin-left:2px}
.goal-menu-button{width:30px;height:30px;padding:0;border:0;background:transparent;border-radius:8px;color:#7797b5;font-size:20px;line-height:1;cursor:pointer;letter-spacing:1px}
.goal-menu-button:hover{background:#e8f3fb}
.goal-menu{position:absolute;right:6px;top:42px;z-index:6;width:148px;padding:5px;background:#fff;border:1px solid #e0ebf2;border-radius:10px;box-shadow:0 10px 25px rgba(31,75,113,.14)}
.goal-menu button{display:block;width:100%;border:0;background:none;border-radius:7px;padding:8px 9px;color:var(--ink);font:500 12px "DM Sans",sans-serif;text-align:left;cursor:pointer}
.goal-menu button:hover{background:var(--wash)}
.goal-menu button.danger{color:#b27676}
.goal-edit-input,.new-goal-input{width:100%;border:0;border-bottom:2px solid var(--blue);background:transparent;color:var(--ink);outline:none;padding:7px 0;font:600 15px "DM Sans",sans-serif}
.goal-placeholder{height:58px;margin:3px 0;border:1px dashed #b9d8ef;border-radius:12px;background:#f5fbff}
.goal-add-area{padding:14px 5px 0}
.add-goal-button{border:0;background:#e5f3fc;border-radius:23px;padding:10px 18px;color:#2873b2;font:700 14px "DM Sans",sans-serif;cursor:pointer}
.add-goal-button span{display:inline-block;margin-right:8px;font-size:23px;font-weight:400;line-height:12px;vertical-align:-2px}
.add-goal-button:hover{background:#d9effc}
.add-goal-form{display:flex;align-items:center;gap:10px;padding:5px 4px}
.add-goal-form .text-button{padding:6px}
.empty-goals{padding:24px 10px;color:#8ba3b8;font-size:13px;text-align:center}
.confirm-popover{position:fixed;left:50%;top:50%;z-index:80;width:min(300px,calc(100vw - 36px));padding:18px 19px;background:#fffefa;border:1px solid #e0ebf2;border-radius:15px;box-shadow:0 18px 45px rgba(31,75,113,.18);transform:translate(-50%,-50%);animation:none}
.confirm-popover strong{display:block;color:var(--ink);font:800 15px Nunito,sans-serif}
.confirm-popover p{margin:6px 0 15px;color:#7894b2;font-size:12px}
.confirm-popover>div{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.confirm-popover .save-button{padding:8px 14px}
@keyframes panelIn{from{opacity:0;transform:translateY(-4px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:650px){.goals-panel{top:27vh;left:18px;width:calc(100vw - 36px);padding:20px 12px 14px}.goals-panel-head h2{font-size:22px}.goal-row{grid-template-columns:32px minmax(0,1fr) auto 28px;gap:6px}.goal-main{font-size:14px}.goal-drops .mini-drop{width:22px;height:22px;flex-basis:22px}.goal-menu{right:4px}.controls{gap:12px}}

/* Exact P1 / P2 / P3 image states supplied for Goal rows. */
.goal-check,.goal-check.current,.goal-row.completed .goal-check{width:31px;height:31px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;display:grid;place-items:center}
.goal-state-icon{display:block;width:31px;height:31px;object-fit:contain;user-select:none;pointer-events:none}
.goal-row.goal-fade-out{opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none;transition:opacity 3s linear,transform 3s linear}
.layout-editor{position:fixed;right:22px;bottom:22px;z-index:90;width:250px;padding:16px;background:#fffefa;border:1px solid #dceaf3;border-radius:14px;box-shadow:0 14px 35px rgba(31,75,113,.18);color:var(--ink);font-size:12px}
.layout-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font:800 15px Nunito,sans-serif}
.layout-editor-head button{border:0;background:none;color:#7894b2;font-size:24px;line-height:1;cursor:pointer}
.layout-editor label{display:block;margin:12px 0;color:#5d7895;font-weight:600}
.layout-editor output{float:right;color:#2873b2;font-weight:700}
.layout-editor input[type=range]{display:block;width:100%;margin-top:8px;accent-color:var(--blue)}
.layout-editor p{margin:14px 0 10px;color:#8aa3b9;font-size:11px}
.layout-editor .text-button{padding:0;color:#2873b2}
.sound-popover{top:50%;left:calc(100% + 12px);right:auto;transform:translateY(calc(-50% - 24px));z-index:45}
.sound-popover.open{transform:translateY(calc(-50% - 24px))}
@media (max-width:650px){.sound-popover{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}.sound-popover.open{transform:translateY(-50%)}}

/* Focus sound popover: a compact recreation of the supplied reference. */
.sound-popover{width:282px;padding:16px 14px 18px;background:#fff;border:1px solid #e4eef5;border-radius:22px;box-shadow:0 14px 30px rgba(37,91,132,.12),0 2px 5px rgba(37,91,132,.04);color:#183c63;transform:translateY(calc(-50% - 24px));transition:opacity .18s ease,visibility 0s linear .18s}
.sound-popover.open{transform:translateY(calc(-50% - 24px));transition:opacity .18s ease,visibility 0s linear 0s}
.sound-popover .sound-title{margin:1px 6px 10px;color:#7895b3;font-size:14px;font-weight:500;line-height:1.25}
.sound-options{display:flex;flex-direction:column;gap:2px}
.sound-options button{height:52px;display:grid;grid-template-columns:38px minmax(0,1fr) 30px;align-items:center;width:100%;padding:0 10px;border:0;border-radius:28px;background:transparent;color:#173d66;font:500 16px/1 "DM Sans",sans-serif;cursor:pointer;transition:background .16s ease, color .16s ease}
.sound-options button:hover,.sound-options button:focus-visible{background:#f1f8fd;outline:none}
.sound-options button.selected{background:#e2f2fc;color:#1260a5}
.sound-icon{width:28px;height:28px;display:grid;place-items:center;color:#174a7c}
.sound-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.sound-icon-off svg{width:25px}
.sound-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sound-check{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#258df0;color:#fff;opacity:0;transform:scale(.76);transition:opacity .16s ease,transform .16s ease}
.sound-check svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sound-options button.selected .sound-check{opacity:1;transform:scale(1)}
.sound-volume{margin:10px 6px 0;padding-top:17px;border-top:1px solid #e5eef4}
.sound-volume-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;color:#7895b3;font-size:14px;line-height:1}
.sound-volume-head output{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sound-volume input[type=range]{display:block;width:100%;height:16px;margin:0;appearance:none;background:transparent;cursor:pointer}
.sound-volume input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:10px;background:linear-gradient(to right,#42a6f2 var(--volume-fill,35%),#e8f3fa var(--volume-fill,35%))}
.sound-volume input[type=range]::-moz-range-track{height:10px;border-radius:10px;background:#e8f3fa}
.sound-volume input[type=range]::-moz-range-progress{height:10px;border-radius:10px;background:#42a6f2}
.sound-volume input[type=range]::-webkit-slider-thumb{width:25px;height:25px;margin-top:-7.5px;appearance:none;border:0;border-radius:50%;background:#3299ed;box-shadow:0 1px 3px rgba(28,114,180,.16)}
.sound-volume input[type=range]::-moz-range-thumb{width:25px;height:25px;border:0;border-radius:50%;background:#3299ed;box-shadow:0 1px 3px rgba(28,114,180,.16)}
.sound-volume input[type=range]:focus-visible{outline:2px solid #9bd2f7;outline-offset:3px;border-radius:8px}
@media (max-width:650px){.sound-popover{width:min(282px,calc(100vw - 32px));left:50%;top:auto;bottom:calc(100% + 38px);transform:translateX(-50%)}.sound-popover.open{transform:translateX(-50%)}}