/* Sonement for Apple Watch — screen replica in watchOS points (211 × 257),
 * measured from reference/app-screens/2026-09-23/watch/*.png (@2x). */
.wa{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:#000; color:#fff; --wa-k:1;
  --wa-ff:-apple-system, BlinkMacSystemFont, "SF Compact Text", "SF Pro Text", system-ui, sans-serif; font-family:var(--wa-ff);
  -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none; line-height:1.2; letter-spacing:normal; outline:none; }
.wa, .wa *{ box-sizing:border-box; }
.wa section{ padding:0; margin:0; }
.wa button{ font-family:inherit; }
.wa-stage{ position:absolute; left:50%; top:50%; width:211px; height:257px; margin:-128.5px 0 0 -105.5px; transform:scale(var(--wa-k)); overflow:hidden; }
.wa-time{ position:absolute; right:17px; top:19.5px; z-index:5; font:600 17.5px/1 var(--wa-ff); }
.wa-track{ position:absolute; left:0; top:0; height:257px; width:633px; display:flex; touch-action:pan-y; }
.wa-page{ position:relative; width:211px; height:257px; flex:none; }
.wa-h{ position:absolute; left:17px; top:30px; font:400 25.5px/1.1 var(--wa-ff); color:rgba(255,255,255,.55); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.2px; }
.wa-h.sm{ left:36px; top:33px; font-size:19px; }

/* Now Playing */
.wa-art{ position:absolute; left:76px; top:66px; width:59px; height:59px; border-radius:14px; background:#2a2a2c center/cover no-repeat; }
.wa-art.empty::after{ content:"♪"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.55); font-size:22px; }
.wa-more{ position:absolute; right:-1px; top:4px; width:19px; height:19px; border-radius:50%; background:rgba(255,255,255,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:grid; place-items:center; font:700 7px/1 var(--wa-ff); letter-spacing:-.5px; color:#fff; }
.wa-t{ position:absolute; left:8px; right:8px; top:134px; text-align:center; font:600 16.5px/1.15 var(--wa-ff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-a{ position:absolute; left:8px; right:8px; top:155px; text-align:center; font:400 15px/1.15 var(--wa-ff); color:rgba(255,255,255,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-tr{ position:absolute; left:25px; right:25px; top:178px; height:51px; display:flex; align-items:center; justify-content:space-between; }
.wa-c{ width:40px; height:40px; border:0; border-radius:50%; padding:0; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform .18s cubic-bezier(.3,1.4,.5,1), background-color .15s; }
.wa-c:active{ transform:scale(.9); background:rgba(255,255,255,.26); }
.wa-c svg{ width:19px; height:13px; }
.wa-c.big{ width:51px; height:51px; } .wa-c.big svg{ width:20px; height:20px; }
.wa-vol{ position:absolute; left:14px; right:10px; top:241px; height:22px; display:flex; align-items:center; gap:4px; }
.wa-sl{ position:relative; width:75px; height:15px; border-radius:8px; background:rgba(255,255,255,.2); overflow:hidden; cursor:pointer; --v:.1; touch-action:none; }
.wa-sl i{ position:absolute; left:0; top:0; bottom:0; width:max(18px, calc(var(--v) * 100%)); border-radius:8px; background:#e6e6e6; }
.wa-dot{ width:4px; height:4px; border-radius:50%; background:#fff; margin-left:3px; }
.wa-vn{ font:400 14px/1 var(--wa-ff); min-width:18px; }
.wa-vol button{ width:32px; height:22px; border:0; background:none; padding:0; color:#fff; display:grid; place-items:center; cursor:pointer; margin-left:auto; }
.wa-vol button + button{ margin-left:8px; }
.wa-vol button svg{ width:14px; height:14px; }

/* lists (Rooms, More, pushed lists) */
.wa-scroll{ position:absolute; left:0; right:0; top:60.5px; bottom:0; overflow-y:auto; scrollbar-width:none; padding:4px 2.5px 26px; }
.wa-scroll::-webkit-scrollbar{ display:none; }
.wa-sec{ padding:8px 15px 5px; font:500 13px/1.2 var(--wa-ff); color:#fff; }
.wa-list .wa-scroll{ top:62.5px; }
.wa-page[data-p="2"] .wa-scroll{ top:54.5px; } .wa-page[data-p="2"] .wa-sec:first-child{ padding-bottom:1px; }
.wa-row{ display:flex; align-items:center; gap:12px; width:100%; min-height:58px; margin-bottom:6px; padding:0 14px; border:0; border-radius:18px;
  background:#232325; color:#fff; font:400 17px/1.2 var(--wa-ff); text-align:left; cursor:pointer; transform-origin:50% 0; transition:background-color .15s; }
.wa-row:active{ background:#303033; }
.wa-row.ic svg{ width:22px; height:22px; flex:none; }
.wa-row.room .ck{ width:17px; height:17px; flex:none; color:#fff; } .wa-row.room .ck svg{ width:17px; height:17px; }
.wa-row.room:not(.sel) .ck{ color:rgba(255,255,255,.7); }
.wa-row .nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.wa-row .nm small{ display:block; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:rgba(255,255,255,.6); }
.wa-row .sp{ color:rgba(255,255,255,.9); } .wa-row .sp svg{ width:17px; height:17px; }
.wa-row.art .i{ width:34px; height:34px; border-radius:8px; background:#333 center/cover; flex:none; }
.wa-row.art.sel{ background:#353538; }
.wa-sub{ position:absolute; inset:0; z-index:4; background:#000; transform:translateX(100%); transition:transform .36s cubic-bezier(.25,1,.3,1); }
.wa-sub.on{ transform:none; }
.wa-back{ position:absolute; left:8px; top:30px; width:26px; height:26px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; padding:0; cursor:pointer; }
.wa-back svg{ width:12px; height:12px; }
.wa-ann{ display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:10px; text-align:center; font:600 16px/1.2 var(--wa-ff); }
.wa-ann .orb{ width:70px; height:70px; border-radius:50%; background:#1f6fe5; display:grid; place-items:center; }
.wa-ann .orb svg{ width:30px; height:30px; color:#fff; }
.wa-ann small{ font-weight:400; font-size:13px; color:rgba(255,255,255,.6); }
.wa-dots{ position:absolute; left:0; right:0; bottom:3px; z-index:6; display:flex; justify-content:center; gap:5px; }
.wa-dots i{ width:5.5px; height:5.5px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:background-color .2s; }
.wa-dots i.on{ background:#fff; }
@media (prefers-reduced-motion: reduce){ .wa *{ transition:none !important; } }