/* Shared desktop layout modes: PC, 1080×960 half-screen, and 9:16 portrait. */
.layout-mode-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--app-line);border-radius:7px;background:var(--app-panel-2)}
.topbar{position:sticky;top:0}
.topbar>.layout-mode-switch{position:static}
.layout-mode-switch button{min-height:28px;padding:0 8px;border:0;border-radius:4px;background:transparent;color:var(--app-muted);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.layout-mode-switch button:hover{color:var(--app-text);background:var(--app-elevated)}
.layout-mode-switch button.active{background:var(--app-accent);color:var(--app-accent-ink)}
.layout-mode-switch [hidden]{display:none!important}
.layout-mode-switch .layout-recording-profile{display:none;margin-left:3px;border-left:1px solid var(--app-line);border-radius:0 4px 4px 0}
html[data-layout-mode="portrait-native"] .layout-mode-switch .layout-recording-profile{display:inline-flex;align-items:center}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] .layout-mode-switch .layout-recording-profile{background:var(--status-success-bg);color:var(--status-success-text)}
.layout-drawer-toggle{display:none;min-width:30px;min-height:30px;padding:0;border:1px solid var(--app-line);border-radius:5px;background:var(--app-panel-2);color:var(--app-muted);font-size:15px;cursor:pointer}
.layout-drawer-close{display:none}
.layout-portrait-navigation{display:none;min-width:0;align-items:center;gap:4px}
.layout-portrait-route{min-width:0;max-width:120px;overflow:hidden;color:var(--app-muted);font-size:12px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.layout-portrait-exit{display:none;min-height:30px;padding:0 9px;border:1px solid var(--button-secondary-border);border-radius:6px;background:var(--button-secondary-bg);color:var(--app-text);font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer}
.layout-history-nav{display:none}
.active-song-context-more,
.active-song-context-more-menu{display:contents}
.active-song-context-more>summary{display:none}
.workspace-hub-showcase{display:none!important}
.workspace-hub-experimental-deemphasized{margin-top:28px;padding-top:16px;border-top:1px dashed var(--app-line)}
.workspace-hub-experimental-deemphasized .workspace-hub-subsection-head{margin-top:0}
.workspace-hub-experimental-deemphasized .workspace-hub-subsection-head h2{font-size:18px;color:var(--app-muted)}
.workspace-hub-experimental-deemphasized .workspace-hub-card{min-height:118px;border-color:var(--app-line);background:var(--app-panel);box-shadow:none}
.workspace-hub-experimental-deemphasized .workspace-hub-card:hover{border-color:var(--button-accent-border);background:var(--app-panel-2)}
.layout-focus-tabs{display:none;align-items:stretch;gap:4px;margin:14px 0 18px;padding:4px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-panel);overflow-x:auto;scrollbar-width:none}
.layout-focus-tabs::-webkit-scrollbar{display:none}
.layout-focus-tabs button{flex:1 0 auto;min-height:36px;padding:0 13px;border:0;border-radius:5px;background:transparent;color:var(--app-muted);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.layout-focus-tabs button:hover{background:var(--app-panel-2);color:var(--app-text)}
.layout-focus-tabs button.active{background:var(--app-accent-soft);color:var(--app-accent)}
.layout-drawer-scrim{display:none}
.creation-record-summary{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;color:var(--app-muted);font-size:11px}
.creation-record-summary span{padding:5px 8px;border:1px solid var(--app-line);border-radius:5px;background:var(--app-panel-2)}

html[data-layout-mode="half"] .app-shell{grid-template-columns:minmax(210px,230px) minmax(0,1fr)}
html[data-layout-mode="half"] .sidebar{padding:18px 12px}
html[data-layout-mode="half"] .project-header{padding:18px 20px}
html[data-layout-mode="half"] .project-title{gap:12px}
html[data-layout-mode="half"] .cover-art{width:54px;height:54px;flex-basis:54px}
html[data-layout-mode="half"] .workflow-strip{grid-template-columns:minmax(150px,1.2fr) repeat(6,minmax(90px,1fr));overflow-x:auto}
html[data-layout-mode="half"] .workflow-arrow{display:none}
html[data-layout-mode="half"] .layout-focus-tabs{display:flex}

html[data-layout-mode="portrait-preview"] .app-shell,
html[data-layout-mode="portrait-native"] .app-shell{display:block;min-height:100vh}
html[data-layout-mode="portrait-preview"] .sidebar,
html[data-layout-mode="portrait-native"] .sidebar{display:none}
html[data-layout-mode="portrait-preview"] .layout-drawer-toggle,
html[data-layout-mode="portrait-native"] .layout-drawer-toggle{display:inline-flex;min-width:68px;align-items:center;justify-content:center;padding:0 10px;gap:5px;color:var(--app-text);font-size:12px;font-weight:750;white-space:nowrap}
html[data-layout-mode="portrait-preview"] .layout-history-nav,
html[data-layout-mode="portrait-native"] .layout-history-nav{display:inline-flex;flex:0 0 auto;align-items:center;gap:3px;margin-right:4px;padding-left:4px;border-left:1px solid var(--app-line)}
html[data-layout-mode="portrait-preview"] .layout-history-nav button,
html[data-layout-mode="portrait-native"] .layout-history-nav button{width:32px;min-width:32px;height:30px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--app-line);border-radius:5px;color:var(--app-text);background:var(--app-panel-2);font-size:16px;font-weight:750;cursor:pointer}
html[data-layout-mode="portrait-preview"] .layout-history-nav button:hover:not(:disabled),
html[data-layout-mode="portrait-native"] .layout-history-nav button:hover:not(:disabled){border-color:var(--button-accent-border);color:var(--button-accent-text);background:var(--button-accent-bg)}
html[data-layout-mode="portrait-preview"] .layout-history-nav button:disabled,
html[data-layout-mode="portrait-native"] .layout-history-nav button:disabled{color:var(--app-faint);cursor:default;opacity:.55}
html[data-layout-mode="portrait-preview"] .layout-portrait-navigation,
html[data-layout-mode="portrait-native"] .layout-portrait-navigation{display:flex}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-exit:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-exit:hover,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-exit:focus-visible{border-color:var(--button-accent-border);background:var(--button-secondary-bg-hover);color:var(--app-text)}
html[data-layout-mode="portrait-preview"] .topbar>.layout-portrait-navigation,
html[data-layout-mode="portrait-native"] .topbar>.layout-portrait-navigation{grid-area:portrait-navigation;align-self:center}
html[data-layout-mode="portrait-preview"] .main-content,
html[data-layout-mode="portrait-native"] .main-content{width:100%;min-width:0;min-height:100vh}
html[data-layout-mode="portrait-preview"] .topbar,
html[data-layout-mode="portrait-native"] .topbar{position:sticky;top:0;z-index:var(--app-layer-shell,2147483600);display:grid!important;height:auto;min-height:132px;grid-template-columns:minmax(0,1fr);grid-template-areas:"breadcrumbs" "song" "utilities";align-content:center;gap:8px;padding:10px 14px;background:color-mix(in srgb,var(--app-bg) 94%,transparent);backdrop-filter:blur(14px)}
html[data-layout-mode="portrait-preview"] .breadcrumbs,
html[data-layout-mode="portrait-native"] .breadcrumbs{grid-area:breadcrumbs;display:flex;min-width:0;height:32px;align-items:center;flex-wrap:nowrap;gap:5px;padding-right:0;overflow:hidden}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .breadcrumbs>:is(#allProjectsLink,b,.autosave){display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .breadcrumbs>#crumbTitle{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .breadcrumbs>.ai-llm-status-badge{min-width:0;max-width:42%;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-layout-mode="portrait-preview"] .active-song-context,
html[data-layout-mode="portrait-native"] .active-song-context{grid-area:song;width:100%;max-width:none}
html[data-layout-mode="portrait-preview"] .top-actions,
html[data-layout-mode="portrait-native"] .top-actions{grid-area:utilities;display:flex;width:100%;justify-self:stretch;justify-content:flex-start;gap:6px;overflow-x:auto;padding:0 0 1px;scrollbar-width:none}
html[data-layout-mode="portrait-preview"] .top-actions::-webkit-scrollbar,
html[data-layout-mode="portrait-native"] .top-actions::-webkit-scrollbar{display:none}
html[data-layout-mode="portrait-preview"] .top-actions .ghost-btn,
html[data-layout-mode="portrait-native"] .top-actions .ghost-btn{min-height:32px;padding-inline:9px;font-size:11px;white-space:nowrap}
html[data-layout-mode="portrait-preview"] .top-actions .primary-btn,
html[data-layout-mode="portrait-native"] .top-actions .primary-btn{min-height:32px;padding-inline:10px;font-size:11px;white-space:nowrap}

/* Portrait chrome is one compact command bar. Navigation and layout stay on
   the left; the active song and its primary actions occupy the remaining row.
   Lower-frequency and destructive commands move into a native overflow menu. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .topbar{
  min-height:0;
  grid-template-columns:auto auto minmax(0,1fr);
  grid-template-areas:"portrait-navigation utilities song";
  align-content:center;
  align-items:center;
  gap:8px;
  padding:6px 12px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .topbar>.breadcrumbs{
  display:none;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context{
  display:grid;
  width:100%;
  min-height:0;
  grid-template-columns:28px minmax(0,1fr) auto;
  grid-template-rows:auto;
  align-items:center;
  justify-self:stretch;
  gap:8px;
  padding:5px 6px;
  border-radius:9px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-icon{
  width:28px;
  height:28px;
  border-radius:8px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context > div:nth-child(2){
  display:flex;
  min-width:0;
  align-items:baseline;
  gap:7px;
  overflow:hidden;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context em{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context small{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-actions{
  position:relative;
  display:inline-flex;
  grid-column:3;
  grid-row:1;
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:5px;
  overflow:visible;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-actions button{
  min-height:30px;
  padding-inline:8px;
  border-radius:8px;
  font-size:12px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more{
  position:relative;
  display:block;
  flex:0 0 auto;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more>summary{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border:1px solid var(--button-secondary-border);
  border-radius:8px;
  background:var(--button-secondary-bg);
  color:var(--app-text-muted);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  cursor:pointer;
  list-style:none;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more>summary::-webkit-details-marker{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more>summary::before{
  content:'···';
  margin-right:5px;
  letter-spacing:1px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more>summary:hover,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more>summary:focus-visible{
  border-color:var(--app-accent);
  background:var(--button-secondary-bg-hover);
  color:var(--app-text);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more:not([open])>.active-song-context-more-menu{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more[open]>.active-song-context-more-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:140;
  display:grid;
  width:max-content;
  min-width:156px;
  gap:4px;
  padding:6px;
  border:1px solid var(--app-line);
  border-radius:9px;
  background:var(--app-panel);
  box-shadow:0 14px 34px var(--app-shadow);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more-menu button{
  display:flex;
  width:100%;
  min-height:36px;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .active-song-context-more-menu #activeSongClear{
  margin-top:3px;
}

/* The global command bar already carries route, song and navigation context.
   Portrait pages therefore use compact stage headers and omit repeated song
   chips instead of stacking a second hero-sized chrome block underneath. */
html[data-ui-surface]:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-context{
  min-height:0;
  align-content:start;
  margin:8px 10px 12px;
  padding:12px 14px;
  border-radius:10px;
}
html[data-ui-surface]:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-context.has-practice-entry{
  min-height:0;
  gap:10px;
}
html[data-ui-surface]:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-context .eyebrow{
  font-size:12px;
  letter-spacing:.12em;
}
html[data-ui-surface]:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-context h1{
  font-size:clamp(22px,4vw,28px);
  line-height:1.12;
  letter-spacing:-.03em;
}
html[data-ui-surface]:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-context p{
  font-size:13px;
  line-height:1.5;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.ai-writing-entry-open .workspace-context{
  display:none;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub{
  padding-top:12px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-hero{
  min-height:0;
  gap:20px;
  padding:22px;
  border-radius:13px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-hero-copy h1{
  margin:6px 0 8px;
  font-size:clamp(28px,4.6vw,38px);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-hero-copy>p{
  line-height:1.55;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-current{
  display:none;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-progress-ring{
  width:80px;
  height:80px;
  flex-basis:80px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-continue{
  min-height:50px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .top-actions{
  width:auto;
  min-width:max-content;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  overflow:visible;
  padding:0;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .top-actions .ui-text-color-switcher{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .top-actions .ui-text-color-trigger{
  width:100%;
  min-height:34px;
  justify-content:center;
  padding-inline:8px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .top-actions .layout-mode-switch{
  width:auto;
  justify-content:center;
  padding:2px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .top-actions .layout-mode-switch button{
  min-height:28px;
  padding-inline:9px;
  font-size:12px;
}

/* The portrait remix review uses one vertically paired stream: original on
   top, editable remix below. Matching structure markers stay quiet by default
   and can be revealed explicitly; errors always remain visible. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.lyric-remix-review-stage .topbar{
  position:relative;
  top:auto;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"portrait-navigation breadcrumbs utilities";
  min-height:0;
  align-items:center;
  gap:8px;
  padding:6px 12px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.lyric-remix-review-stage .topbar .breadcrumbs{
  height:38px;
  min-height:38px;
  overflow:hidden;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.lyric-remix-review-stage .topbar .breadcrumbs :is(.autosave, .ai-llm-status-badge){display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.lyric-remix-review-stage .topbar .top-actions{
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines{
  --lyric-remix-scroll-height:min(72dvh, 980px);
  gap:8px;
  padding:10px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines > .lyric-remix-compare-body > header{
  align-items:center;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines > .lyric-remix-compare-body > header > span{display:none}
.lyric-remix-structure-toggle{
  min-height:32px;
  padding:0 10px;
  border:1px solid var(--app-line);
  border-radius:7px;
  background:var(--button-secondary-bg);
  color:var(--app-muted);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.lyric-remix-structure-toggle:hover,
.lyric-remix-structure-toggle[aria-pressed="true"]{
  border-color:var(--app-accent);
  color:var(--app-accent);
}
.lyric-remix-compare-editor:not(.show-lyric-remix-structure) .lyric-remix-compare-row:is([data-expected-kind="section"], [data-expected-kind="blank"])[data-state="match"]{display:none}
html #lyricRemixWorkspace[data-empty-comparison-entry] :is(#lyricRemixTimingReviewBanner,#lyricRemixFixBar){display:none!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-grid{
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-pane.is-original{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-pane.is-candidate > header{
  height:auto;
  min-height:62px;
  flex-wrap:wrap;
  padding:8px 10px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-pane.is-candidate > header label{
  min-width:min(260px,100%);
  flex:1 1 220px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-pane-actions{
  min-width:0;
  flex:1 1 auto;
  overflow-x:auto;
  scrollbar-width:none;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-pane-actions::-webkit-scrollbar{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original{
  height:auto;
  min-height:76px;
  grid-template-columns:36px minmax(104px,126px) minmax(0,1fr) 24px;
  grid-template-rows:minmax(34px,auto) minmax(40px,auto);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original > .lyric-remix-line-number{
  grid-column:1;
  grid-row:1 / 3;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-portrait-original{
  display:grid;
  grid-column:2 / 4;
  grid-row:1;
  grid-template-columns:subgrid;
  align-items:center;
  gap:0;
  min-width:0;
  padding:0;
  border-bottom:1px solid color-mix(in srgb,var(--app-line) 64%,transparent);
  background:color-mix(in srgb,var(--status-success-bg) 42%,var(--app-bg));
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-portrait-original-label{
  grid-column:1;
  min-width:0;
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:4px 7px;
  border-right:1px solid color-mix(in srgb,var(--app-line) 72%,transparent);
  color:var(--status-success-text);
  font-size:12px;
  font-weight:800;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-portrait-original-text{
  grid-column:2;
  min-width:0;
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:5px 10px;
  overflow:hidden;
  color:var(--app-text);
  font-size:15px;
  font-weight:650;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-portrait-original-text[contenteditable="plaintext-only"]{
  cursor:text;
  white-space:pre-wrap;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-portrait-original-text[contenteditable="plaintext-only"]:focus{
  outline:0;
  background:color-mix(in srgb,var(--app-accent-soft) 58%,transparent);
  box-shadow:inset 0 -2px 0 var(--app-accent);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original > .lyric-remix-line-count{
  display:grid;
  grid-column:2;
  grid-row:2;
  align-content:center;
  gap:2px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original > .lyric-remix-line-count::before{
  content:'魔改';
  color:var(--app-secondary);
  font-size:12px;
  font-weight:800;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original > .lyric-remix-line-text{
  grid-column:3;
  grid-row:2;
  align-self:center;
  color:var(--app-secondary);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original.is-selected > .lyric-remix-line-count::before,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original.is-selected > .lyric-remix-line-text,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original.is-selected > .lyric-remix-portrait-original :is(.lyric-remix-portrait-original-label,.lyric-remix-portrait-original-text){
  color:var(--app-text);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original.is-selected > .lyric-remix-portrait-original{
  border-color:color-mix(in srgb,var(--app-accent) 38%,var(--app-line));
  background:color-mix(in srgb,var(--state-selected) 82%,var(--app-panel));
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .lyric-remix-compare-editor.is-portrait-dual-lines .lyric-remix-compare-row.has-portrait-original > .lyric-remix-line-diff{
  grid-column:4;
  grid-row:2;
}
html[data-layout-mode="portrait-preview"] .layout-focus-tabs,
html[data-layout-mode="portrait-native"] .layout-focus-tabs{display:flex;position:sticky;top:var(--layout-tabs-top,102px);z-index:40;margin:0 14px 14px;background:color-mix(in srgb,var(--app-panel) 96%,transparent);backdrop-filter:blur(12px);box-shadow:0 5px 16px color-mix(in srgb,var(--app-shadow) 35%,transparent)}
html[data-layout-mode="portrait-preview"] .project-header,
html[data-layout-mode="portrait-native"] .project-header{grid-template-columns:1fr;gap:14px;margin:0 14px 14px;padding:18px}
html[data-layout-mode="portrait-preview"] .project-title,
html[data-layout-mode="portrait-native"] .project-title{gap:12px}
html[data-layout-mode="portrait-preview"] .header-stat,
html[data-layout-mode="portrait-native"] .header-stat{width:100%;padding-top:12px;border-top:1px solid var(--app-line)}
html[data-layout-mode="portrait-preview"] .workflow-strip,
html[data-layout-mode="portrait-native"] .workflow-strip{display:flex;gap:6px;margin:0 14px 14px;padding:6px;overflow-x:auto;scrollbar-width:none}
html[data-layout-mode="portrait-preview"] .workflow-strip::-webkit-scrollbar,
html[data-layout-mode="portrait-native"] .workflow-strip::-webkit-scrollbar{display:none}
html[data-layout-mode="portrait-preview"] .workflow-label,
html[data-layout-mode="portrait-native"] .workflow-label{min-width:150px}
html[data-layout-mode="portrait-preview"] .workflow-step,
html[data-layout-mode="portrait-native"] .workflow-step{min-width:112px}
html[data-layout-mode="portrait-preview"] .workflow-arrow,
html[data-layout-mode="portrait-native"] .workflow-arrow{display:none}
html[data-layout-mode="portrait-preview"] .workflow-strip,
html[data-layout-mode="portrait-native"] .workflow-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;align-items:stretch}
html[data-layout-mode="portrait-preview"] .workflow-strip,
html[data-layout-mode="portrait-native"] .workflow-strip{grid-auto-rows:minmax(64px,auto);align-items:start;padding:5px}
html[data-layout-mode="portrait-preview"] .workflow-label,
html[data-layout-mode="portrait-native"] .workflow-label{grid-column:1/-1;min-width:0;padding:8px 10px}
html[data-layout-mode="portrait-preview"] .workflow-step,
html[data-layout-mode="portrait-native"] .workflow-step{min-width:0;width:100%;justify-content:flex-start}
html[data-layout-mode="portrait-preview"] .content-grid,
html[data-layout-mode="portrait-native"] .content-grid{display:block!important;margin:0 14px}
html[data-layout-mode="portrait-preview"] .editor-column,
html[data-layout-mode="portrait-native"] .editor-column{min-width:0}
html[data-layout-mode="portrait-preview"] .tool-column,
html[data-layout-mode="portrait-native"] .tool-column{display:grid;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row;gap:14px;margin-top:14px}
html[data-layout-mode="portrait-preview"][data-layout-focus="lyrics"] .tool-column,
html[data-layout-mode="portrait-native"][data-layout-focus="lyrics"] .tool-column,
html[data-layout-mode="portrait-preview"][data-layout-focus="audio"] .tool-column,
html[data-layout-mode="portrait-native"][data-layout-focus="audio"] .tool-column{display:none!important}
html[data-layout-mode="portrait-preview"][data-layout-focus="tools"] .editor-column,
html[data-layout-mode="portrait-native"][data-layout-focus="tools"] .editor-column{display:none!important}
html[data-layout-mode="portrait-preview"][data-layout-focus="audio"] .lyrics-card,
html[data-layout-mode="portrait-native"][data-layout-focus="audio"] .lyrics-card{display:none!important}
html[data-layout-mode="portrait-preview"] .tool-panel,
html[data-layout-mode="portrait-native"] .tool-panel{min-width:0;width:100%;grid-column:1!important;margin:0}
html[data-layout-mode="portrait-preview"] .lyrics-toolbar,
html[data-layout-mode="portrait-native"] .lyrics-toolbar{align-items:flex-start;flex-direction:column;gap:9px}
html[data-layout-mode="portrait-preview"] .lyrics-version-tools,
html[data-layout-mode="portrait-native"] .lyrics-version-tools{width:100%;display:flex;flex-wrap:wrap;gap:6px}
html[data-layout-mode="portrait-preview"] .lyrics-version-tools select,
html[data-layout-mode="portrait-native"] .lyrics-version-tools select{min-width:0;flex:1 1 100%}
html[data-layout-mode="portrait-preview"] .audio-library-tools,
html[data-layout-mode="portrait-native"] .audio-library-tools{width:100%;display:flex;flex-wrap:wrap}
html[data-layout-mode="portrait-preview"] .audio-search,
html[data-layout-mode="portrait-native"] .audio-search{flex:1 1 100%}
html[data-layout-mode="portrait-preview"] .audio-row,
html[data-layout-mode="portrait-native"] .audio-row{grid-template-columns:32px minmax(0,1fr) auto}
html[data-layout-mode="portrait-preview"] .audio-row .more-btn,
html[data-layout-mode="portrait-native"] .audio-row .more-btn{grid-column:3;grid-row:1}

html[data-layout-mode="portrait-preview"] .sidebar,
html[data-layout-mode="portrait-native"] .sidebar{box-shadow:18px 0 44px var(--app-shadow)}
html[data-layout-drawer="open"][data-layout-mode="portrait-preview"] .sidebar,
html[data-layout-drawer="open"][data-layout-mode="portrait-native"] .sidebar{display:flex;position:fixed;inset:0 auto 0 0;z-index:calc(var(--app-layer-shell,2147483600) + 2);width:min(88vw,380px);overflow:auto;background:var(--app-sidebar)}
html[data-layout-drawer="open"][data-layout-mode="portrait-preview"] body:is(.ensemble-workspace-open,.jianpu-workspace-open) .sidebar,
html[data-layout-drawer="open"][data-layout-mode="portrait-native"] body:is(.ensemble-workspace-open,.jianpu-workspace-open) .sidebar{visibility:visible}
html[data-layout-drawer="open"][data-layout-mode="portrait-preview"] .layout-drawer-close,
html[data-layout-drawer="open"][data-layout-mode="portrait-native"] .layout-drawer-close{position:sticky;z-index:2;top:0;display:flex;min-height:40px;flex:0 0 auto;align-items:center;justify-content:center;margin:-4px -4px 8px;padding:0 12px;border:1px solid var(--app-line);border-radius:0 0 7px 7px;color:var(--app-text);background:color-mix(in srgb,var(--app-elevated) 94%,transparent);font-size:12px;font-weight:750;cursor:pointer;backdrop-filter:blur(12px)}
html[data-layout-drawer="open"][data-layout-mode="portrait-preview"] .layout-drawer-scrim,
html[data-layout-drawer="open"][data-layout-mode="portrait-native"] .layout-drawer-scrim{display:block;position:fixed;inset:0;z-index:calc(var(--app-layer-shell,2147483600) + 1);border:0;background:var(--overlay-backdrop);cursor:pointer}

/* Portrait rehearsal header: readiness duplicates information already shown
   by the working state, so keep the command rail content-first. The menu is
   absolutely layered to avoid changing the header height when it opens. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-readiness-pills{display:none!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head:has(.practice-head-actions:not([data-head-overflow="inline"]) .practice-head-more-tools[open]){z-index:var(--app-layer-menu,2147483599)}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head{z-index:var(--app-layer-coach-popover,2147483599);min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:0;padding:6px 10px}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-main{display:none!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-kicker{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-title-block h2{font-size:16px}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-brand-title,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-brand-toggle{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-readiness{display:block;width:100%;min-width:0;overflow:visible}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-readiness{grid-column:1;grid-row:1}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-actions{width:100%;min-width:0;display:flex;flex-flow:row nowrap;align-items:center;gap:4px;padding-left:0;border-left:0;overflow:visible;white-space:nowrap}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-actions .practice-head-lyrics-version{box-sizing:border-box;width:auto!important;min-width:116px!important;max-width:290px!important;height:38px;display:block;flex:1 1 160px!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-actions .practice-head-lyrics-version select{box-sizing:border-box;height:38px;padding-inline:9px;font-size:12px;text-overflow:ellipsis}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-tools{position:relative;z-index:2;width:38px;height:38px;flex:0 0 38px}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-actions>[data-practice-head-control]:not(.practice-portrait-profile-toggle),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-summary{position:relative;box-sizing:border-box;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;display:inline-grid!important;place-items:center;flex:0 0 38px!important;gap:0!important;padding:0!important;overflow:hidden!important;border:1px solid var(--app-line);border-radius:6px;color:var(--app-text);background:var(--button-secondary-bg);font-size:0!important;font-weight:750;line-height:1!important;cursor:pointer;list-style:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-actions>[data-practice-head-control]:not(.practice-portrait-profile-toggle)>.practice-head-control-label,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-summary>.practice-head-control-label{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;font-size:12px!important;line-height:1!important;white-space:nowrap!important;border:0!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-actions>[data-practice-head-control]:not(.practice-portrait-profile-toggle)>:is(.sr-command-icon,.sr-command-native-icon,.practice-toolbar-icon),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-summary>:is(.sr-command-icon,.sr-command-native-icon,.practice-toolbar-icon){width:18px!important;height:18px!important;flex:0 0 18px!important;color:inherit;stroke-width:2.1}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-actions>[data-practice-head-control]:not(.practice-portrait-profile-toggle)>.practice-toolbar-icon,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-summary>.practice-toolbar-icon{display:block!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-actions>[data-practice-head-control][hidden]{display:none!important}
html[data-layout-mode="portrait-preview"] body.practice-view-open .practice-head-actions>.practice-portrait-profile-toggle{display:none!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-summary::-webkit-details-marker{display:none}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-tools[open]>.practice-head-more-summary{border-color:var(--button-accent-border);color:var(--button-accent-text);background:var(--button-accent-bg)}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu{position:absolute;z-index:var(--app-layer-menu,2147483599);top:calc(100% + 7px);right:0;width:min(520px,calc(100vw - 28px));max-height:min(58dvh,560px);display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;overflow:auto;border:1px solid var(--app-line);border-radius:9px;background:var(--app-elevated);box-shadow:0 18px 44px var(--app-shadow)}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-tools[open]>.practice-head-more-menu{display:grid}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu>.practice-jyutping-mode:not([hidden]){grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu>[data-practice-head-control],
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu>.practice-jyutping-mode:not([hidden])>[data-practice-head-control]{width:100%;min-width:0;min-height:38px;display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:0 9px;overflow:hidden;border:1px solid var(--app-line);border-radius:6px;color:var(--app-text);background:var(--button-secondary-bg);font-size:12px!important;text-align:left;white-space:nowrap}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu>[data-practice-head-control]>.practice-toolbar-icon,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu>.practice-jyutping-mode:not([hidden])>[data-practice-head-control]>.practice-toolbar-icon{position:static!important;width:18px!important;height:18px!important;margin:0!important;display:block!important;flex:0 0 18px!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-menu>[data-practice-head-control]>.practice-head-control-label,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-menu>.practice-jyutping-mode:not([hidden])>[data-practice-head-control]>.practice-head-control-label{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:none!important;font-size:12px!important;line-height:1.2!important;text-overflow:ellipsis;white-space:nowrap!important;border:0!important}

/* Text preferences survive the narrow layout. Put the version on its own row
   so readable commands can wrap without shrinking or hiding the mode switch. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]):not([data-command-display-mode="icons"]) body.practice-view-open #practiceStudio .practice-head-actions{flex-wrap:wrap}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]):not([data-command-display-mode="icons"]) body.practice-view-open #practiceStudio .practice-head-lyrics-version{flex:1 0 100%!important;max-width:none!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]):not([data-command-display-mode="icons"]) body.practice-view-open #practiceStudio .practice-head-more-tools{width:auto;flex:0 0 auto}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]):not([data-command-display-mode="icons"]) body.practice-view-open #practiceStudio .practice-head-actions>[data-practice-head-control]:not([hidden]):not(.practice-portrait-profile-toggle),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]):not([data-command-display-mode="icons"]) body.practice-view-open #practiceStudio .practice-head-more-summary{display:inline-flex!important;width:auto!important;min-width:38px!important;max-width:none!important;flex:0 0 auto!important;gap:5px!important;padding-inline:8px!important;font-size:12px!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]):not([data-command-display-mode="icons"]) body.practice-view-open #practiceStudio .practice-head-actions>[data-practice-head-control]>.practice-head-control-label,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]):not([data-command-display-mode="icons"]) body.practice-view-open #practiceStudio .practice-head-more-summary>.practice-head-control-label{position:static!important;display:inline!important;width:auto!important;height:auto!important;margin:0!important;clip-path:none!important;overflow:visible!important;line-height:1.2!important}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"])[data-command-display-mode="text"] body.practice-view-open #practiceStudio .practice-head-actions>[data-practice-head-control]>:is(.sr-command-icon,.sr-command-native-icon,.practice-toolbar-icon),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"])[data-command-display-mode="text"] body.practice-view-open #practiceStudio .practice-head-more-summary>:is(.sr-command-icon,.sr-command-native-icon,.practice-toolbar-icon){display:none!important}

html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-navigation--immersive{
  flex:0 0 auto;
  justify-content:flex-start;
  padding-right:6px;
  border-right:1px solid var(--app-line);
  -webkit-app-region:no-drag;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-navigation--immersive .layout-drawer-toggle{
  min-width:58px;
  min-height:34px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-navigation--immersive .layout-history-nav{
  margin-right:0;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-navigation--immersive .layout-history-nav button{
  height:34px;
}

@media(max-width:719px){
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-portrait-route{display:none}
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .layout-drawer-toggle{min-width:58px;padding-inline:8px}
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .topbar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"portrait-navigation utilities" "song song";
    gap:6px;
  }
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .topbar>.breadcrumbs>.ai-llm-status-badge{display:none}
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-hero{
    gap:16px;
    padding:18px;
  }
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-progress{
    gap:10px;
  }
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .workspace-hub-progress-ring{
    width:72px;
    height:72px;
    flex-basis:72px;
  }
}

@media(min-width:720px){
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-items:center}
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-readiness{grid-column:1;grid-row:1}
}

@media(max-width:620px){
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu{grid-template-columns:minmax(0,1fr);width:min(310px,calc(100vw - 20px))}
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .practice-head-more-menu>.practice-jyutping-mode:not([hidden]){grid-column:1}
}

@media(max-width:700px){
  .layout-mode-switch button{padding-inline:7px}
  html[data-layout-mode="portrait-preview"] .top-actions .theme-switcher,
  html[data-layout-mode="portrait-native"] .top-actions .theme-switcher{display:none}
  html[data-layout-mode="portrait-preview"] .layout-focus-tabs,
  html[data-layout-mode="portrait-native"] .layout-focus-tabs{top:var(--layout-tabs-top,98px);margin-inline:10px}
  html[data-layout-mode="portrait-preview"] .project-header,
  html[data-layout-mode="portrait-native"] .project-header,
  html[data-layout-mode="portrait-preview"] .workflow-strip,
  html[data-layout-mode="portrait-native"] .workflow-strip,
  html[data-layout-mode="portrait-preview"] .content-grid,
  html[data-layout-mode="portrait-native"] .content-grid{margin-inline:10px}
}

/* Portrait rehearsal is a broadcast canvas. The actual commands remain in
   one movable drawer; changing their presentation never hides its escape. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open {
  overflow: hidden;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .desktop-app-titlebar {
  min-height: 32px;
  height: 32px;
  padding-left: 8px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .desktop-app-titlebar strong { font-size: 14px; white-space: nowrap; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .desktop-app-titlebar > span { display: none; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .desktop-window-controls,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .desktop-window-controls button { height: 32px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #desktopAppMenu { top: 32px; min-height: 36px; padding-inline: 4px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .desktop-app-menu__button { min-width: 36px; padding-inline: 6px; font-size: 12px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .desktop-app-menu__utilities { margin: 0; padding: 0; flex: 1 1 auto; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open .topbar { display: none !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #desktopAppMenu .top-actions { display: flex; gap: 0; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #desktopAppMenu .top-actions > :not(.layout-mode-switch),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #desktopAppMenu .desktop-global-tools > :not(.command-display-toggle),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #desktopAppMenu .desktop-app-zoom { display: none !important; }
.practice-head-shortcuts { display: none; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio > .practice-head {
  display: grid !important;
  grid-template-columns: minmax(44px, 1fr) auto auto auto !important;
  grid-template-rows: 36px !important;
  min-height: 36px !important;
  padding: 2px 8px !important;
  gap: 4px !important;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-main { display: flex !important; grid-column: 1 !important; grid-row: 1 !important; min-width: 0; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-title-block { display: block !important; min-width: 0; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-title-block h2 { font-size: 16px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head :is(.practice-save-state, .practice-kicker, .practice-brand-title, .practice-brand-toggle, .practice-readiness-pills, .practice-close) { display: none !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-readiness { display: flex !important; grid-column: 4 !important; grid-row: 1 !important; width: auto; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-teaching-view-select { display: flex; grid-column: 3; grid-row: 1; align-items: center; margin: 0; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts { display: flex; grid-column: 2; grid-row: 1; align-items: center; gap: 4px; white-space: nowrap; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > button:not([hidden]) { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; width: auto; min-width: 30px; height: 32px; min-height: 32px; padding: 0 4px; border: 1px solid var(--app-line); border-radius: 6px; color: var(--button-secondary-text); background: var(--button-secondary-bg); font-size: 12px; line-height: 1; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > button[aria-checked="true"],
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > button[aria-pressed="true"] { color: var(--button-accent-text); border-color: var(--button-accent-border); background: var(--button-accent-bg); }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > button:disabled { opacity: .5; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > button > :is(.practice-head-control-label, i, b, kbd) { display: none !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > button::after { content: attr(data-quick-label); font-size: 12px; line-height: 1; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > button > .practice-toolbar-icon { width: 16px; height: 16px; flex: 0 0 16px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"])[data-command-display-mode="icons"] #practiceStudio .practice-head-shortcuts > button::after { display: none; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"])[data-command-display-mode="text"] #practiceStudio .practice-head-shortcuts > button > :is(.practice-toolbar-icon, .sr-command-icon) { display: none !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-teaching-view-select select { min-width: 0; width: 90px; height: 32px; padding: 0 4px; font-size: 12px; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-text); background: var(--app-panel); }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.beat-calibration-workspace-open #practiceStudio .practice-title-block::before { display: none; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.beat-calibration-workspace-open #practiceStudio > .practice-head { position: sticky; top: 0; flex-shrink: 0; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.beat-calibration-workspace-open #practiceStudio .practice-back { min-width: 40px; width: 40px; font-size: 12px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-actions { display: flex !important; flex-wrap: nowrap !important; padding: 0; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-tools { width: auto; flex: none; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-summary { width: auto !important; min-width: 48px !important; padding-inline: 4px !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-summary > .practice-head-control-label { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; font-size: 12px !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-menu { width: min(400px, calc(100vw - 20px)); grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(100vh - 150px); overflow-y: auto; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-menu > .practice-head-lyrics-version { display: flex !important; grid-column: 1 / -1; min-width: 0 !important; max-width: none !important; width: 100% !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-menu > button:not([hidden]) { display: flex; width: 100%; min-height: 34px; gap: 6px; align-items: center; justify-content: flex-start; padding-inline: 8px; font-size: 12px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-workspace { flex: 1 1 auto; overflow: hidden; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-stage { flex: 1 1 auto; min-height: 0; padding: 4px 8px; overflow: hidden; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-stage > .practice-lyrics { flex: 0 0 var(--practice-portrait-lyrics-height, var(--practice-lyrics-height, 210px)); min-height: 110px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-stage > .practice-runway { flex: 1 1 0; min-height: 140px; height: auto; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio[data-runway-manual-height="true"] .practice-stage > .practice-runway { flex: 0 0 var(--practice-runway-height, 210px); }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-secondary-panel { display: none; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-transport {
  display: flex !important; flex: 0 0 auto; flex-wrap: wrap; min-height: 42px !important; height: auto !important; gap: 4px !important; padding: 4px !important; margin: 0 !important; width: 100%; box-sizing: border-box;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio :is(.practice-transport-playback, .practice-transport-monitoring, .practice-transport-recording, .practice-transport-queue) { display: contents !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-transport :is(button:not([hidden]), .practice-queue-menu > summary) { flex: 0 0 auto !important; width: auto !important; max-width: 100%; min-height: 32px !important; height: 32px !important; min-width: 32px; padding: 0 8px !important; font-size: 12px !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-transport :is(.practice-transport-status, .practice-portrait-more, .practice-queue-menu > summary small) { display: none !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-queue-menu { min-width: 0; width: auto; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-beat-toolbar { min-height: 36px; flex-wrap: nowrap; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-entry-cue[data-toolbar-rows="2"] .practice-beat-toolbar { min-height: 64px; flex-wrap: wrap; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-entry-cue:not([data-lyric-toolbar-focused="true"]) .practice-entry-cue-drag { width: 24px; min-width: 24px; flex: 0 0 24px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-entry-cue-drag > span { display: none !important; }
.practice-beat-coach[data-coach-chrome-recovered="true"] .practice-beat-coach-chrome { opacity: 1; }

html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-pitch-tools { left: 10px; right: 10px; flex-wrap: nowrap; gap: 4px; min-height: 32px; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-pitch-tool-group:not([data-pitch-tool-group="more"]) { display: contents; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio [data-pitch-tool-group="more"] { margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; padding: 0; gap: 4px; border: 0; background: transparent; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-pitch-tools button,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-pitch-tools summary { min-height: 30px; font-size: 12px; }
#practiceStudio .practice-pitch-tools .practice-pitch-tools-mode-toggle { width: 46px; min-width: 46px; }
#practiceStudio .practice-pitch-tools-mode-toggle .practice-toolbar-icon { display: none; }
#practiceStudio .practice-pitch-tools[data-pitch-tools-mode="icons"] .practice-pitch-style-picker-value { display: none; }
#practiceStudio .practice-pitch-tools-mode-toggle .practice-toolbar-label { display: inline !important; position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; font-size: 12px; }
#practiceStudio .practice-pitch-overflow { display: grid; gap: 5px; }
#practiceStudio .practice-pitch-overflow:empty { display: none; }
#practiceStudio .practice-pitch-overflow [data-toolbar-control] { width: 100%; min-height: 32px; justify-content: flex-start; font-size: 12px; }
#practiceStudio .practice-pitch-overflow .practice-toolbar-label { position: static; display: inline !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; }

/* Solo presentation uses the same workspace and transport; only content changes. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio[data-teaching-solo="lyrics"] .practice-stage > :is(.practice-runway, .practice-lyrics-resize),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio[data-teaching-solo="pitch"] .practice-stage > :is(.practice-lyrics, .practice-lyrics-resize),
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio[data-teaching-solo="beat"] .practice-stage > :is(.practice-lyrics, .practice-runway, .practice-lyrics-resize) { display: none !important; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio[data-teaching-solo="lyrics"] .practice-stage > .practice-lyrics,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio[data-teaching-solo="pitch"]:not([data-runway-manual-height="true"]) .practice-stage > .practice-runway { flex: 1 1 0 !important; height: auto; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio[data-teaching-solo="beat"] .practice-stage > .practice-timeline { margin-top: auto; }
/* Expanded calibration follows the same viewport geometry as expanded rehearsal. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.beat-calibration-workspace-open #practiceStudio .practice-entry-cue.is-maximized {
  position: fixed; inset: auto; left: var(--practice-entry-cue-x); top: var(--practice-entry-cue-y);
  width: var(--practice-entry-cue-width); height: var(--practice-entry-cue-height);
}

html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > [data-action="toggle-dual-lyrics-order"] { order: 1; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-head-shortcuts > [data-action="open-lyric-display-settings"] { order: 2; }
@media (max-width: 360px) {
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) #practiceStudio .practice-teaching-view-select select { width: 76px; }
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-summary { width: 32px !important; min-width: 32px !important; padding-inline: 0 !important; }
  html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) body.practice-view-open #practiceStudio .practice-head-more-summary > .practice-head-control-label { display: none !important; }
}