:root {
  --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 10px; --s-5: 12px;
  --s-6: 14px; --s-7: 16px; --s-8: 22px; --s-9: 28px;
  --h-ctl: var(--auris-mix-void-control-height); --h-sm: var(--auris-mix-void-small-control-height); --h-head: 40px; --h-card-head: 36px;
  --page-x: var(--s-8); --anchor-clearance: 66px;
}
html { scrollbar-color: var(--bd2) var(--bg); color-scheme: dark; }
html[data-theme=light] { color-scheme: light; }
::selection { background: var(--tx); color: var(--bg); }
input, textarea { caret-color: var(--tx); }
input::placeholder, textarea::placeholder { color: var(--mu); opacity: 1; }
button, a, summary { -webkit-tap-highlight-color: var(--acs); }
button, a { touch-action: manipulation; }
a { color: inherit; text-underline-offset: var(--s-1); }
[tabindex="-1"]:focus-visible { outline: 2px solid var(--ac); outline-offset: var(--s-1); }
.wrap { max-width: 1040px; padding: var(--s-6) var(--page-x) var(--s-8); }
.top { gap: var(--s-3); padding-bottom: var(--s-6); border-bottom: 1px solid var(--bd); margin-bottom: var(--s-8); }
.brand { gap: var(--s-3); flex: none; color: inherit; text-decoration: none; }
.wordmark { display: block; width: 88px; height: 24px; line-height: 0; }
.wordmark img { display: block; width: 100%; height: 100%; object-fit: contain; }
html[data-theme=dark] .wordmark img { filter: invert(1); }
.crumb { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 24vw; white-space: nowrap; }
.song-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 5px 0; background: transparent; color: var(--tx); font: inherit; font-weight: 600; text-align: left; cursor: text; }
.song-title[hidden], .rename-song[hidden], #songName[hidden] { display: none; }
.song-title:disabled { cursor: default; }
.rename-song { display: grid; flex: none; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--mu); cursor: pointer; }
.rename-song .i { width: 14px; height: 14px; }
.rename-song:hover { background: var(--pn2); color: var(--tx); }
.rename-song:disabled { display: none; }
.song-title:focus-visible, .rename-song:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.crumb.editing { flex: 1; width: 24vw; }
#songName { display: block; width: 100%; min-width: 0; height: 34px; padding: 4px 8px; border: 1px solid var(--bd2); border-radius: var(--r-in); background: var(--pn2); color: var(--tx); font: inherit; }
#songName:focus { outline: 2px solid var(--ac); outline-offset: 1px; }
#songName[aria-invalid=true] { border-color: var(--ng); }
.song-name-error { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; width: max-content; max-width: min(260px,80vw); white-space: normal; padding: 8px 10px; border: 1px solid var(--bd2); border-radius: 6px; background: var(--pn); color: var(--tx); font-size: 12px; line-height: 1.4; box-shadow: 0 6px 18px #00000020; }
.song-name-error[hidden] { display: none; }
.top > .chip { flex: none; }
.btn { height: var(--h-ctl); gap: var(--s-3); }
.btn.sm { height: var(--h-sm); }
html[data-variant=void] .btn { text-transform: none; letter-spacing: 0; font-size: 13px; border-radius: var(--auris-mix-void-pill-radius); }
.btn.ic { display: grid; place-items: center; width: var(--h-ctl); flex: none; }
.skip { position: fixed; z-index: 50; top: var(--s-3); left: var(--s-3); padding: var(--s-5); background: var(--ac); color: var(--acd); transform: translateY(-200%); }
.skip:focus { transform: none; }
.jump { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--bg); border-bottom: 1px solid var(--bd2); margin: 0 0 var(--s-8); }
.jump a { min-height: 44px; display: grid; place-items: center; text-decoration: none; color: var(--mu); border-bottom: 2px solid transparent; font-size: 13px; }
.jump a:hover, .jump a[aria-current=location] { color: var(--tx); border-bottom-color: var(--tx); }
.jump a:focus-visible { outline: 2px solid var(--ac); outline-offset: -4px; }
body.noproj .jump { display: none; }
#wvc, #colLpane, #det, #share { scroll-margin-top: var(--anchor-clearance); min-width: 0; }
.head { min-height: var(--h-head); margin: 0 0 var(--s-5); gap: var(--s-3); }
html[data-variant=void] .head h1 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; text-transform: none; }
html[data-variant=void] #empty h1 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; text-transform: none; }
.head .stats { font-size: 12px; }
.cardh { min-height: var(--h-card-head); padding: var(--s-3) 0; gap: var(--s-3); }
.cardh h2 { flex: none; margin-right: 0; }
#wvInfo { margin-left: auto; font-size: 12px; }
html[data-variant=void] .wvc { margin-bottom: var(--s-8); }
html[data-variant=void] .wvbody { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) 0 var(--s-5); }
html[data-variant=void] .wvw { height: 160px; margin: 0; }
.wvax, .tr, .wvleg, .wvsel { margin: 0; }
.tr { min-height: 44px; gap: var(--s-3) var(--s-5); margin-top: 0; }
.tr .lm { gap: var(--s-3); }
.wvleg { gap: var(--s-1) var(--s-5); font-size: 11px; line-height: 1.5; }
.marker-key { position: relative; flex: none; margin-left: var(--s-5); font-size: 12px; color: var(--mu); }
.marker-key summary { cursor: pointer; min-height: 32px; align-content: center; padding-inline: var(--s-1); }
.marker-key summary:hover, .marker-key[open] summary { color: var(--tx); }
.marker-key summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.marker-key .wvleg { position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; width: 268px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--bd2); border-radius: 10px; background: var(--pn3); box-shadow: 0 8px 24px #0000001a; font-size: 12px; }
.wvadd { display: grid; grid-template-columns: minmax(0,1fr) max-content; grid-template-rows: 44px 24px; gap: var(--s-1) var(--s-5); align-items: stretch; flex: none; margin-top: 0; padding-top: var(--s-5); border-top: 1px solid var(--bd); }
.wvadd textarea { grid-column: 1; grid-row: 1/3; }
.wvadd .btn { grid-column: 2; grid-row: 1; }
.wvadd .composer-help { grid-column: 2; grid-row: 2; font-size: 11px; line-height: 12px; }
.wvadd textarea, .pnote textarea { min-width: 0; height: 64px; min-height: 64px; max-height: 64px; resize: none; padding: 10px 12px; overflow-y: auto; border: 1px solid var(--bd2); border-radius: var(--r-in); background: var(--pn2); color: var(--tx); font: inherit; line-height: 21px; }
.composer-help { font-size: 11px; line-height: 16px; }
.wvadd textarea { height: 72px; min-height: 72px; max-height: 72px; }
.wvadd .btn { height: 44px; justify-content: center; }
.wvsel { flex: none; height: 40px; min-height: 40px; flex-wrap: nowrap; margin-top: 0; }
.wvsel[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.wvsel > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvsel .sp { min-width: 0; }
.wvsel .btn { flex: none; height: 40px; min-height: 40px; white-space: nowrap; }
.sw::before { content: ""; position: absolute; inset: -10px -3px; }
.sw::after { inset: auto; left: 2px; top: 2px; width: 16px; height: 16px; }
.sw[aria-checked=true]::after { transform: translateX(16px); }
.layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-9); }
.history-filters { flex: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-3); padding: var(--s-3) var(--s-6) var(--s-5); border-bottom: 1px solid var(--bd); }
.history-filters .bp { display: grid; grid-template-columns: 8px minmax(0,1fr) 20px; align-items: center; gap: var(--s-3); min-width: 0; height: 36px; padding: 0 10px; text-align: left; transform: none; }
.history-filters #branch-all { grid-template-columns: minmax(0,1fr) 20px; }
.history-filters .bp .bp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-filters .bp i { width: 8px; height: 8px; }
.history-filters .bp small { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.history-filters .bp::after { content: none; }
.history-filters .bp.on { border-color: var(--bd2); background: var(--acs); color: var(--tx); }
.cr { position: relative; height: var(--row,72px); border-bottom: 0; }
.cr:not(:last-child)::after { content: ""; position: absolute; left: var(--lw); right: 14px; bottom: 0; height: 1px; background: var(--bd); pointer-events: none; }
.cr[aria-current=true] { box-shadow: inset 1px 0 var(--tx); }
.cm .t { font-size: 14px; }
.cm .m { font-size: 12px; }
.av { width: 28px; height: 28px; }
.cmt .av { width: 32px; height: 32px; }
.note-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-body { flex: 1; min-width: 0; }
.cmt { display: block; }
.comment-main { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; }
.comment-action { border: 0; border-radius: 6px; padding: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; user-select: text; -webkit-user-select: text; }
.comment-main .comment-body, .comment-main .note, .comment-main .note-text { display: block; }
.comment-main .note-text { margin: 6px 0 10px; line-height: 1.65; }
.comment-action:hover .note-text { color: var(--ac); }
.comment-action:focus-visible { outline: 2px solid var(--ac); outline-offset: 6px; }
.comment-fix { display: inline-flex; margin: 8px 0 0 44px; cursor: pointer; }
.comment-fix:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
.cmt.note-focused { background: var(--acs); }
.wpin.note-focused, .ppin.note-focused:not(.pend) { outline: 2px solid var(--ac); outline-offset: 3px; z-index: 5; }
.pane, .dp, .sec, .chk > div { min-width: 0; }
.dp h2, .dm, .fl > span { overflow-wrap: anywhere; }
.fl > span:not(.chip):not(.sz) { min-width: 0; flex: 1; }
.fl .sz { flex: none; }
#tabpane[aria-labelledby=tab-commit] .dp { padding-top: 24px; }
#tabpane[aria-labelledby=tab-commit] h2 { font-size: 19px; line-height: 1.4; margin-bottom: 16px; }
#tabpane[aria-labelledby=tab-commit] .dm { gap: 10px 12px; line-height: 1.65; margin-block: 12px; }
#tabpane[aria-labelledby=tab-commit] .dm > .av + span { flex: 1; min-width: 0; }
#tabpane[aria-labelledby=tab-commit] .acts { gap: 10px; margin-block: 20px; }
#tabpane[aria-labelledby=tab-commit] .sec { margin-top: 30px; }
#tabpane[aria-labelledby=tab-commit] .sec h3 { margin-bottom: 12px; }
#tabpane[aria-labelledby=tab-commit] .chk { padding-block: 14px; gap: 12px; line-height: 1.6; }
#tabpane[aria-labelledby=tab-commit] .cg, #tabpane[aria-labelledby=tab-commit] .fl { padding-block: 12px; }
#tabpane[aria-labelledby=tab-commit] .cmt { padding-block: 18px; gap: 12px; }
#tabpane[aria-labelledby=tab-commit] .cmt p { margin-block: 6px 10px; line-height: 1.65; }
html[data-variant=void] .det { position: static; max-height: none; overflow: visible; border-left: 0; padding-left: 0; }
.tabs { min-height: var(--h-head); flex-wrap: nowrap; gap: var(--s-7); overflow-x: auto; scrollbar-width: thin; position: sticky; top: 44px; }
.tabs button { height: var(--h-head); flex: none; }
html[data-variant=void] .tabs button { font-size: 13px; letter-spacing: 0; text-transform: none; }
html[data-variant=void] .cardh h2, html[data-variant=void] .sec h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-variant=void] .chip, html[data-variant=void] .bp { font-size: 13px; letter-spacing: 0; text-transform: none; }
html[data-variant=void] .chip { border-radius: var(--auris-mix-void-pill-radius); }
.tabs button::after { left: 0; right: 0; }
html[data-variant=void] .dp { padding: var(--s-7) 0 var(--s-8); }
.dm { gap: var(--s-3); }
.sec { margin-top: var(--s-8); }
.sec h3 { align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.chk { padding: var(--s-4) 0; gap: var(--s-4); }
.chk b { font-size: 13px; }
.whatc { border-left-width: 1px; padding: var(--s-4) var(--s-5); }
.wtip { border-radius: var(--r-in); }
.pane .shr { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-9); margin: 0; padding: var(--s-7) 0 var(--s-8); border-top: 0; }
#appMain > #share { display: none; }
.shrow { gap: var(--s-7); align-items: center; }
.qr { width: 176px; height: 176px; padding: var(--s-5); }
.qrc { max-width: 220px; }
.lnk { min-width: 0; }
.lnk input { min-width: 0; }
.opt { gap: var(--s-5); padding: var(--s-5) 0; }
.phone { width: 360px; border-radius: var(--r-in); padding: var(--s-7); box-shadow: none; }
.phone .nt { display: none; }
.preview-title { font-size: 13px; font-weight: 600; padding-bottom: var(--s-4); border-bottom: 1px solid var(--bd); margin-bottom: var(--s-7); }
.preview-title span { display: block; color: var(--mu); font-weight: 400; font-size: 12px; margin-top: var(--s-1); }
.pnote { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: var(--s-3); }
.pnote textarea { grid-column: 1/-1; }
.pnote .btn { justify-content: center; height: 44px; }
.phone .seg { margin-left: 0; }
.pctl .seg { width: 100%; }
.pctl .seg button { flex: 1; min-width: 0; }
.phone .sub, .pn .bd { overflow-wrap: anywhere; }
.foot { max-width: none; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--bd); font-size: 13px; line-height: 1.55; }
.foot p { color: var(--mu); max-width: 92ch; }
.foot summary { cursor: pointer; color: var(--tx); display: flex; align-items: center; gap: var(--s-3); min-height: 32px; list-style: none; }
.foot summary::-webkit-details-marker { display: none; }
.foot summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: var(--s-1); border-right: 1.5px solid var(--mu); border-bottom: 1.5px solid var(--mu); transform: translateY(-2px) rotate(45deg); transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.foot details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.foot summary:hover::after { border-color: var(--tx); }
.foot summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.foot-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mu); }
.foot summary:has(#remoteHint:not([hidden])) .foot-dot { background: var(--ok); }
.foot summary:has(#busyHint:not([hidden])) .foot-dot { background: var(--wn); }
.foot p { margin-top: var(--s-3); }
#retrySave[hidden] { display: none; }
.status { left: auto; right: var(--s-8); bottom: var(--s-8); max-width: min(440px,calc(100vw - 44px)); padding: var(--s-4) var(--s-6); border-radius: var(--r-in); font-size: 13px; }
.addsheet { box-shadow: none; }
@media (min-width:1100px) and (min-height:760px) {
  html[data-layout=wide], html[data-layout=wide] body { height: 100%; overflow: hidden; }
  html[data-layout=wide] .wrap { --sheet-w: clamp(400px,32vw,500px); --rail-w: 76px; max-width: none; height: 100dvh; display: grid; grid-template-columns: minmax(0,1fr) var(--rail-w); grid-template-rows: auto auto auto minmax(0,1fr); padding: 0; }
  html[data-layout=wide] .top { grid-column: 1/-1; grid-row: 1; flex-wrap: nowrap; gap: var(--s-4); padding: var(--s-5) var(--s-8); margin: 0; }
  .top .crumb { margin-right: auto; }
  html[data-layout=wide] .store-notice { grid-column: 1/-1; grid-row: 2; margin: var(--s-4) var(--s-8) 0; }
  html[data-layout=wide] #empty { grid-column: 1/-1; grid-row: 3; padding-inline: var(--s-8); }
  html[data-layout=wide] .jump { grid-column: 2; grid-row: 4; position: relative; display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: var(--s-5) var(--s-2); border: 0; border-left: 1px solid var(--bd); background: var(--bg); }
  html[data-layout=wide] .jump .rail-listen { display: none; }
  html[data-layout=wide] .jump a { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 64px; grid-auto-flow: row; border: 0; border-radius: var(--r-in); color: var(--mu); font-size: 11px; font-weight: 500; }
  html[data-layout=wide] .jump a:hover { background: var(--pn2); color: var(--tx); }
  html[data-layout=wide] .jump a[aria-current=location] { border: 0; }
  html[data-layout=wide] .jump a.on { background: var(--pn3); color: var(--tx); }
  html[data-layout=wide] .jump a:focus-visible { outline-offset: -2px; }
  html[data-layout=wide] .jump .i { width: 20px; height: 20px; }
  html[data-layout=wide] .rail-badge { position: absolute; top: 7px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--auris-mix-void-pill-radius); background: var(--tx); color: var(--bg); font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); font-variant-numeric: tabular-nums; }
  html[data-layout=wide] .jump a:hover .rail-badge, html[data-layout=wide] .jump a.on .rail-badge { box-shadow: 0 0 0 2px var(--pn3); }
  html[data-layout=wide] #appMain { grid-column: 1; grid-row: 4; position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) var(--sheet-w); grid-template-rows: minmax(0,1fr) auto; border-top: 1px solid var(--bd); }
  html[data-layout=wide] .wrap > .top { border-bottom: 0; }
  html[data-layout=wide] .jump { border-top: 1px solid var(--bd); }
  html[data-layout=wide] .stage { grid-column: 1/-1; grid-row: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-9) var(--s-9) var(--s-8); }
  html[data-layout=wide][data-pin=on]:not([data-sheet=none]) .stage { grid-column: 1; }
  html[data-layout=wide] .head { flex: none; margin: 0; }
  html[data-layout=wide] .wvc { flex: 1 0 auto; min-height: 360px; margin: 0; display: flex; flex-direction: column; }
  html[data-layout=wide] .wvc .cardh { height: var(--h-card-head); flex: none; padding: 0; }
  html[data-layout=wide] .wvbody { flex: 1; min-height: 0; }
  html[data-layout=wide][data-variant=void] .wvw { flex: 1; height: auto; min-height: 180px; }
  html[data-layout=wide] .layout { grid-column: 2; grid-row: 1; z-index: 6; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: var(--s-4) var(--s-4) var(--s-4) 0; border: 1px solid var(--bd2); border-radius: var(--r-card); background: var(--pn); overflow: hidden; transition: opacity var(--d-ui) var(--ease), visibility 0s; }
  html[data-layout=wide][data-pin=on] .layout { margin: 0; border: 0; border-left: 1px solid var(--bd); border-radius: 0; background: var(--bg); }
  html[data-layout=wide][data-sheet=none] .layout { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--d-exit) var(--ease), visibility 0s linear var(--d-exit); }
  html[data-layout=wide][data-sheet=history] #det, html[data-layout=wide][data-sheet=review] #colLpane { display: none; }
  html[data-layout=wide] .sheet-bar { flex: none; display: flex; align-items: center; gap: var(--s-1); min-height: 60px; padding: var(--s-5) var(--s-5) var(--s-3) var(--s-8); }
  html[data-layout=wide] .sheet-bar h2 { margin-right: auto; font-size: 18px; font-weight: 600; letter-spacing: -.02em; text-transform: none; }
  html[data-layout=wide] .sheet-bar .btn.ic { border-color: transparent; background: transparent; color: var(--mu); }
  html[data-layout=wide] .sheet-bar .btn.ic:hover { background: var(--pn2); color: var(--tx); }
  html[data-layout=wide] #sheetPin[aria-pressed=true] { background: var(--pn3); color: var(--tx); }
  html[data-layout=wide] #colLpane { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0 var(--s-5) var(--s-5) var(--s-8); border: 0; border-radius: 0; background: transparent; }
  html[data-layout=wide] .gl { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  html[data-layout=wide] .det, html[data-layout=wide][data-variant=void] .det { position: static; flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; margin: 0; padding: 0 var(--s-5) var(--s-6) var(--s-8); border: 0; border-radius: 0; background: transparent; }
  html[data-layout=wide] .tabs { top: 0; background: inherit; }
  html[data-layout=wide]:not([data-pin=on]) .tabs { background: var(--pn); }
  html[data-layout=wide] .foot { grid-column: 1/-1; grid-row: 2; margin: 0; padding: var(--s-2) var(--s-8) var(--s-3); border-top: 1px solid var(--bd); position: relative; }
  html[data-layout=wide] .foot details[open] p { position: absolute; bottom: calc(100% + var(--s-3)); left: var(--s-8); right: var(--s-8); max-height: 240px; overflow-y: auto; margin: 0; padding: var(--s-6); border: 1px solid var(--bd2); border-radius: var(--r-in); background: var(--pn); z-index: 15; }
  html[data-layout=wide] .addsheet { position: absolute; z-index: 15; top: 64px; left: var(--s-8); right: var(--s-8); width: min(720px,calc(100% - 44px)); margin: 0 auto; max-height: calc(100dvh - 86px); overflow-y: auto; }
  html[data-layout=wide] body.noproj #empty { margin-top: 10vh; }
  html[data-layout=wide]:has(body.noproj), html[data-layout=wide] body.noproj { height: auto; overflow: auto; }
  html[data-layout=wide] body.noproj .wrap { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto auto; }
  html[data-layout=wide] body.noproj #appMain { display: block; grid-column: 1/-1; margin-top: auto; padding-top: var(--s-9); border-top: 0; }
  html[data-layout=wide] body.noproj .foot { padding-top: var(--s-5); border-top: 0; }
  html[data-layout=wide] .top .account { margin-left: var(--s-3); padding-left: var(--s-6); border-left: 1px solid var(--bd); }
}
@media (max-width:640px) {
  :root { --page-x: var(--s-6); }
  .wrap { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); }
  .top { display: grid; grid-template-columns: auto minmax(0,1fr) 44px; gap: var(--s-4) var(--s-3); margin-bottom: var(--s-6); }
  .brand { grid-column: 1; }
  .crumb { grid-column: 2; max-width: none; }
  .crumb.editing { width: auto; }
  .song-title { min-height: 44px; padding-block: 10px; }
  .rename-song { width: 44px; height: 44px; }
  #songName { height: 44px; font-size: 16px; }
  .top > .chip { display: none; }
  #themeBtn { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
  .top > .sp { display: none; }
  #goShare { grid-row: 2; grid-column: 2/-1; justify-content: center; padding-inline: var(--s-2); }
  #addMix { grid-row: 2; grid-column: 1; justify-content: center; }
  #demoChip { padding-inline: var(--s-2); letter-spacing: .04em; }
  .top .btn { min-height: 44px; }
  .head { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  .head .stats { flex-basis: 100%; order: 3; }
  .head .sp { flex: 1; }
  #resetBtn, #exportBtn { height: 40px; }
  .cardh { flex-wrap: wrap; }
  #wvInfo { width: 100%; margin-left: 0; }
  .wvadd { grid-template-columns: minmax(0,1fr); grid-template-rows: 72px 44px auto; gap: 8px; }
  .wvadd textarea { grid-column: 1; grid-row: 1; }
  .wvadd .btn { grid-column: 1; grid-row: 2; }
  .wvadd .composer-help { grid-column: 1; grid-row: 3; }
  .wvadd textarea, .wvadd .btn { width: 100%; }
  .wvadd .btn { height: 44px; min-height: 44px; }
  .wvadd textarea, .pnote textarea, .arow input, .lnk input { font-size: 16px; }
  .wvadd .btn { justify-content: center; }
  .wvsel, .wvsel[hidden] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 20px 44px; height: 72px; }
  .wvsel > span:first-child { grid-column: 1/-1; line-height: 20px; }
  .wvsel .sp { display: none; }
  .wvsel .btn { width: 100%; height: 44px; min-height: 44px; justify-content: center; }
  .tr .lm { width: 100%; margin-left: 0; justify-content: space-between; min-height: 44px; }
  .tr .pbtn { width: 44px; height: 44px; }
  .tr .seg { margin-left: auto; }
  .seg button { height: 40px; padding-inline: var(--s-3); }
  .seg button::after, .bp::after, .btn.sm::after { content: none; }
  .bp { height: 40px; }
  .history-filters { gap: 6px; padding-inline: 10px; }
  .history-filters .bp { height: 44px; padding-inline: 7px; gap: 5px; grid-template-columns: 7px minmax(0,1fr) 14px; letter-spacing: 0; font-size: 11px; }
  .history-filters #branch-all { grid-template-columns: minmax(0,1fr) 14px; }
  .history-filters .bp i { width: 7px; height: 7px; }
  .marker-key { margin-left: auto; }
  .marker-key summary { min-height: 44px; }
  .marker-key .wvleg { left: auto; right: 0; }
  .tabs { gap: var(--s-7); min-height: 44px; }
  .tabs button { height: 44px; }
  .cr .rt .chip { display: inline-flex; font-size: 10px; padding-inline: var(--s-1); }
  .cr { gap: var(--s-2); }
  .cm .t { font-size: 13px; }
  .cm .m { font-size: 11px; }
  .cm .t .tg { display: none; }
  .lnk { flex-wrap: wrap; }
  .lnk input { flex-basis: 100%; width: 100%; height: 44px; }
  .lnk .btn { width: 100%; justify-content: center; }
  .qr { width: 176px; height: 176px; }
  .shrow { gap: var(--s-5); }
  .qrc { max-width: none; }
  .phone { width: 100%; padding: 0; border: 0; }
  .opt { align-items: flex-start; }
  .sw { margin-block: var(--s-2); }
  .cg { flex-wrap: wrap; gap: var(--s-1); }
  .fl { flex-wrap: wrap; overflow-wrap: anywhere; }
  .dz { padding: var(--s-8) var(--s-6); }
  .dzb { width: 100%; }
  .dzb .btn { width: 100%; justify-content: center; }
  .status { right: var(--s-6); bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); }
  .acts .btn, .pact .btn { min-height: 44px; }
}
@media (pointer:coarse) {
  .rename-song { width: 44px; height: 44px; }
  .sw { width: 38px; height: 22px; }
  .btn, .btn.sm { min-height: 44px; }
  .wvsel, .wvsel .btn { min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
.busy-toggle { flex: none; white-space: nowrap; }
.busy-track { width: 26px; height: 16px; padding: 2px; border: 1px solid var(--bd2); border-radius: 999px; background: var(--pn2); }
.busy-track::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--mu); }
.busy-toggle[aria-checked=true] .busy-track { background: var(--tx); border-color: var(--tx); }
.busy-toggle[aria-checked=true] .busy-track::after { transform: translateX(10px); background: var(--bg); }
.busy-hint { color: var(--mu); }
.busy-hint[hidden] { display: none; }
.wpin, .ppin:not(.pend) { position: absolute; top: 0; bottom: auto; z-index: 3; width: 36px; height: 36px; margin-left: -18px; padding: 2px; border: 0; border-radius: 50%; background: var(--pn); color: var(--tx); display: grid; place-items: center; pointer-events: auto; cursor: pointer; line-height: 1; }
.wpin.c, .ppin.c:not(.pend) { top: 36px; border: 1px dashed var(--mu); padding: 1px; background: var(--pn); }
.wpin .av, .ppin .av { margin: 0; }
.wpin::after, .ppin::after { content: none; }
.wpin:hover, .ppin:not(.pend):hover { transform: scale(1.08); z-index: 4; }
.wpin:focus-visible, .ppin:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; z-index: 4; }
.ppin:not(.pend) { width: 32px; height: 32px; margin-left: -16px; }
.marker-status, .marker-count { position: absolute; z-index: 1; right: -1px; bottom: -1px; display: grid; place-items: center; height: 14px; min-width: 14px; padding-inline: 2px; border: 1.5px solid var(--pn); border-radius: 999px; background: var(--tx); color: var(--bg); font-size: 9px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.marker-status.fixed { background: var(--ok); color: var(--pn); }
.marker-status.open { background: var(--wn); color: var(--pn); }
.marker-status svg { display: block; width: 9px; height: 9px; stroke-width: 2.5; }
.wtip { z-index: 9; top: 74px; width: min(300px,100%); max-height: 220px; overflow: hidden; background: var(--pn); box-shadow: 0 8px 24px #00000020; }
.phone-note-pins { z-index: 2; }
.pwv .wtip { top: 72px; }
.marker-list { position: absolute; z-index: 10; top: 74px; width: min(340px,100%); max-height: 280px; overflow: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--bd2); border-radius: var(--r-in); background: var(--pn); color: var(--tx); box-shadow: 0 10px 30px #00000026; pointer-events: auto; }
.marker-list-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px 8px; }
.marker-list-head strong { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
.marker-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--mu); cursor: pointer; }
.marker-close svg { width: 16px; height: 16px; }
.marker-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 52px; padding: 10px 8px; border: 0; border-top: 1px solid var(--bd); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.marker-item-body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.marker-item strong { font-size: 12px; font-weight: 600; }
.marker-item .note-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.5; }
.marker-item small { color: var(--mu); font-size: 11px; overflow-wrap: anywhere; }
.marker-item:hover, .marker-close:hover { background: var(--pn2); }
.marker-item:focus-visible, .marker-close:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
@media (max-width:640px) {
  .top .busy-toggle { grid-row: 3; grid-column: 1/-1; justify-content: space-between; }
  .marker-list { max-height: 260px; }
  .marker-close { width: 40px; height: 40px; }
}

/* Share for review: publication, links and feedback from review links. */
.rvpub { border-top: 0; padding-top: 0; }
.rvh { display: flex; justify-content: space-between; gap: 8px; margin: var(--s-8) 0 var(--s-3); font-size: 12.5px; font-weight: 600; color: var(--mu); }
.rvmk { margin-top: 12px; }
.rvl { padding: 12px 0; border-top: 1px solid var(--bd); }
.rvl .lb { font-size: 13.5px; }
.rvl .lb span { display: block; color: var(--mu); font-size: 12.5px; }
.rvl .lnk { margin: 10px 0 8px; }
.rvl-act { display: flex; gap: 8px; flex-wrap: wrap; }
.rvl-act a.btn { color: inherit; }
a.btn { text-decoration: none; }
.pphead[hidden], .again[hidden] { display: none; }
.rvl .shrow { margin-top: 14px; }
.qrl { display: block; margin-top: 8px; font-size: 12.5px; }
.rvend { margin-top: 12px; font-size: 13px; }
.rvend summary { cursor: pointer; color: var(--mu); min-height: 32px; display: flex; align-items: center; }
.rvend .vw .lb span { display: block; color: var(--mu); font-size: 12.5px; }
.rvfb { align-items: flex-start; }
.rvfb .bd { flex: 1; min-width: 0; }
.rvfh { font-weight: 600; font-size: 13px; }
.rvfb .note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rvfs { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.rvfs .when { margin-left: 0; }
@media (max-width:640px) {
  .rvl-act .btn { flex: 1; justify-content: center; height: 40px; }
  .rvfb { flex-wrap: wrap; }
  .rvfs { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; padding-left: 38px; }
}

/* voice notes and activity */
.rvfv { margin-top: 6px; }
.rvai { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pn3); color: var(--mu); }
.rvai .i { width: 14px; height: 14px; }
.cmt > .vbtn { margin: 4px 0 0 40px; align-self: flex-start; }
.tk2 .ac2 .vbtn, .pn .vbtn { margin-top: 0; }
.pn .vbtn { margin-top: 6px; }

/* Account: a Sign in link to the dashboard, or the signed-in indicator with sign out and import. */
.account { position: relative; flex: none; }
.account[hidden], .account-panel[hidden], .account-panel [hidden], .store-notice[hidden] { display: none; }
#dzRestore[hidden], #resetBtn[hidden] { display: none; }
.account-btn { max-width: 240px; }
.account-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html[data-variant] .account-btn.signed { width: var(--h-ctl); padding: 0; justify-content: center; border-radius: 50%; border-color: transparent; background: transparent; }
.account-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tx); color: var(--bg); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; line-height: 1; overflow: visible; }
.account-avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.account-btn.signed:hover .account-avatar { box-shadow: 0 0 0 3px var(--acs), 0 0 0 4px var(--bd2); }
.account-btn.signed[aria-expanded=true] .account-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--tx); }
.account-id { display: flex; align-items: center; gap: var(--s-5); padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--bd); }
.account-who { min-width: 0; }
.account-who .account-title { margin: 0; font-size: 12.5px; font-weight: 400; color: var(--mu); }
.account-email { margin: 2px 0 0; color: var(--tx); font-size: 14px; font-weight: 600; }
.account-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: min(320px,calc(100vw - 32px)); padding: var(--s-6); border: 1px solid var(--bd2); border-radius: var(--r-in); background: var(--pn); color: var(--tx); box-shadow: 0 6px 18px #00000020; }
.account-title { margin: 0 0 var(--s-2); font-size: 14px; font-weight: 600; }
.account-title:focus { outline: none; }
.account-copy { margin: 0 0 var(--s-4); color: var(--mu); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.account-copy b { color: var(--tx); font-weight: 600; }
.account-error { margin: var(--s-2) 0 0; color: var(--ng); font-size: 12.5px; line-height: 1.4; }
.account-panel .btn { width: 100%; justify-content: center; margin-top: var(--s-4); }
/* Plan and storage (plan.js). Amber marks what needs attention; nothing here is an error. */
.account-plan { margin: 0 0 var(--s-4); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.plan-head h3, .quota h3 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--tx); }
.plan-meter-row { display: flex; justify-content: space-between; gap: var(--s-4); margin: 0; color: var(--mu); font-size: 12px; font-variant-numeric: tabular-nums; }
.plan-meter-row span:first-child { color: var(--tx); }
.plan-track { height: 4px; margin-top: var(--s-2); border-radius: 999px; background: var(--bd); overflow: hidden; }
.plan-track span { display: block; height: 100%; background: var(--tx); }
.plan-meter.near .plan-track span, .plan-meter.over .plan-track span { background: var(--wn); }
.plan-meter.over .plan-rest { color: var(--wn); }
.quota { margin: var(--s-4) 0 0; padding: var(--s-5); border: 1px solid var(--bd2); border-left: 3px solid var(--wn); border-radius: var(--r-in); background: color-mix(in srgb, var(--wn) 8%, var(--pn)); }
.quota > p { margin: var(--s-2) 0 0; color: var(--mu); font-size: 12.5px; line-height: 1.5; }
.quota .plan-meter { margin-top: var(--s-4); }
.quota .btn { margin-top: var(--s-4); }
.quota .note { margin-top: var(--s-2); }
.account-panel { max-height: calc(100vh - 88px); overflow-y: auto; }
/* Checkout: Pro is a neutral choice, so only past due carries amber */
.plan-status { margin: var(--s-4) 0 0; color: var(--tx); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.account-plan .plan-line { margin: var(--s-4) 0 0; }
.plan-callout { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--wn); border-radius: var(--r-in); background: color-mix(in srgb, var(--wn) 10%, var(--pn)); color: var(--tx); font-size: 12.5px; line-height: 1.5; }
.plan-upgrade { margin-top: var(--s-4); }
.plan-offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.plan-offers legend { margin-bottom: var(--s-3); padding: 0; color: var(--mu); font-size: 12px; }
.plan-offer { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: var(--s-3) var(--s-4); border: 1px solid var(--bd2); border-radius: var(--r-in); cursor: pointer; }
.account-panel .plan-offer input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.plan-offer:has(input:checked) { border-color: var(--tx); box-shadow: inset 0 0 0 1px var(--tx); }
.plan-offer:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: 2px; }
.plan-offer-name { color: var(--tx); font-size: 12.5px; font-weight: 600; }
.plan-offer-price { color: var(--mu); font-size: 12px; font-variant-numeric: tabular-nums; }
.plan-consent { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-4); color: var(--tx); font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.account-panel .plan-consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--tx); }
.plan-consent input:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.plan-upgrade .note { margin-top: var(--s-3); }
.opt-upgrade { margin: var(--s-2) 0 var(--s-3); }
@media (pointer:coarse) { .plan-consent { min-height: 44px; align-items: center; } .account-panel .plan-consent input { margin-top: 0; } }
.opt.locked .lb { color: var(--mu); }
.sw[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.store-notice { flex: none; margin: calc(-1 * var(--s-4)) 0 var(--s-6); padding: 8px 12px; border: 1px solid var(--bd2); border-radius: var(--r-in); background: var(--pn); color: var(--tx); font-size: 12.5px; line-height: 1.4; }
@media (max-width:640px) {
  .account { grid-row: 4; grid-column: 1/-1; }
  .account:has(.account-btn.signed) { grid-row: 1; grid-column: 3; }
  .account:has(.account-btn.signed) .account-btn { width: 44px; height: 44px; }
  .account:has(.account-btn.signed) .account-panel { position: fixed; top: 64px; left: var(--page-x); right: var(--page-x); }
  .top:has(.account-btn.signed) { grid-template-columns: auto minmax(0,1fr) 44px 44px; }
  .top:has(.account-btn.signed) #themeBtn { grid-column: 4; }
  body.noproj .top { margin-bottom: var(--s-4); }
  .account-btn { width: 100%; max-width: none; justify-content: center; }
  .account-panel { left: 0; right: 0; width: auto; }
  .account-panel input { height: 44px; font-size: 16px; }
  .account-panel .btn { min-height: 44px; }
}
.sheet-bar { display: none; }
.stage .head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "cover id act" "strip strip strip"; align-items: end; gap: var(--s-5) var(--s-8); margin-bottom: var(--s-8); }
.cover { grid-area: cover; display: grid; place-items: center; width: 120px; height: 120px; border: 1px solid var(--bd); border-radius: var(--r-card); background: var(--pn2); color: var(--mu); }
.cover .i { width: 44px; height: 44px; }
.stage-id { grid-area: id; min-width: 0; }
.stage-kicker { margin: 0 0 var(--s-2); color: var(--mu); font-size: 12px; font-weight: 500; }
html[data-variant] .stage .head h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(30px,3.6vw,54px); font-weight: 650; line-height: 1.05; letter-spacing: -.035em; text-transform: none; }
.stage-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); color: var(--mu); font-size: 13px; }
.stage-act { grid-area: act; display: flex; gap: var(--s-2); }
.vstrip { grid-area: strip; display: flex; gap: var(--s-2); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.vstrip::-webkit-scrollbar { display: none; }
.vpill { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-4); border: 1px solid var(--bd2); border-radius: var(--auris-mix-void-pill-radius); background: transparent; color: var(--mu); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.vpill b { color: var(--tx); font-weight: 600; font-variant-numeric: tabular-nums; }
.vpill:hover { background: var(--pn2); color: var(--tx); }
.vpill[aria-pressed=true] { border-color: var(--tx); background: var(--tx); color: var(--bg); }
.vpill[aria-pressed=true] b { color: var(--bg); }
.vpill:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.jump a { gap: var(--s-2); grid-auto-flow: column; }
.jump .i { width: 16px; height: 16px; }
.rail-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--auris-mix-void-pill-radius); background: var(--pn3); color: var(--tx); font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.rail-badge[hidden] { display: none; }
.wsel { border-color: var(--sig); background: var(--range); }
.wpin:not(.open):not(.fixed) { --pc: var(--sig); }
.wpin { box-shadow: inset 0 0 0 1.5px var(--pc); }
a, button, .btn, .vpill, .jump a { transition: color var(--d-ui) var(--ease), background-color var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease), opacity var(--d-ui) var(--ease), transform var(--d-ui) var(--ease); }
button:active:not(:disabled), .btn:active:not(:disabled), .jump a:active { transform: scale(var(--press)); }
.wpin:hover, .ppin:not(.pend):hover { transform: none; }
.wpin.pfx, .pane.tb-blur, .pane.tb-slide.dir-f, .pane.tb-slide.dir-b, .pane.tb-scale, .pane.mx-rise, .sx-rise, .sx-inr, .sx-wipe { animation-name: moFade; animation-duration: var(--d-ui); animation-timing-function: var(--ease); animation-delay: 0s; }
#empty > * { animation: none; }
.status, .status.on { transform: none; transition: opacity var(--d-ui) var(--ease); }
@media (max-width:640px) {
  .stage .head { grid-template-columns: auto minmax(0,1fr); grid-template-areas: "cover id" "act act" "strip strip"; align-items: center; gap: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
  .cover { width: 64px; height: 64px; }
  .cover .i { width: 26px; height: 26px; }
  html[data-variant] .stage .head h1 { font-size: 28px; white-space: normal; overflow-wrap: anywhere; }
  .stage-kicker { margin-bottom: var(--s-1); }
  .stage-act .btn { flex: 1; justify-content: center; }
  #resetBtn, #exportBtn { height: 44px; }
  .vpill { height: 44px; }
  .jump { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 30; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid var(--bd2); border-bottom: 0; }
  .jump a { position: relative; grid-auto-flow: row; align-content: center; justify-items: center; gap: 3px; min-height: 56px; border-bottom: 0; font-size: 11px; }
  .jump a:hover, .jump a[aria-current=location] { color: var(--tx); }
  .jump a[aria-current=location]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: var(--auris-mix-void-pill-radius); background: var(--tx); }
  .jump .i { width: 20px; height: 20px; }
  .rail-badge { position: absolute; top: 5px; left: calc(50% + 6px); }
  .wrap { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.noproj .wrap { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); }
  .status { bottom: calc(68px + env(safe-area-inset-bottom)); }
  html, body { overflow-x: clip; }
}
.account-panel { top: calc(100% + var(--s-3)); width: min(340px,calc(100vw - 32px)); padding: var(--s-4); border-radius: var(--r-card); box-shadow: none; }
.account-id { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) var(--s-3) var(--s-5); margin: 0; border-bottom: 0; }
.account-avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.account-who .account-title { font-size: 12px; }
.account-email { font-size: 17px; letter-spacing: -.01em; }
#accountStore { margin: 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-in); background: var(--pn2); }
#accountStore:has(+ .account-plan:not([hidden])) { border-radius: var(--r-in) var(--r-in) 0 0; }
.account-plan { margin: 0; padding: 0 var(--s-5) var(--s-5); border-radius: 0 0 var(--r-in) var(--r-in); background: var(--pn2); }
#accountStore + .account-plan { padding-top: var(--s-1); }
#importBox { margin-top: var(--s-4); padding: 0 var(--s-3); }
.account-panel #signOut { width: 100%; min-height: 44px; justify-content: flex-start; margin: var(--s-4) 0 0; padding: 0 var(--s-3); border: 0; border-top: 1px solid var(--bd); border-radius: 0; background: transparent; color: var(--ng); }
.account-panel #signOut:hover:not(:disabled) { background: var(--pn2); border-radius: var(--r-in); }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  button:active, .btn:active, .jump a:active { transform: none; }
}