@font-face {
  font-family: "TAY Amaya";
  src: url("fonts/tay-amaya-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #050505;
  --cream: #eee3d1;
  --paper: #fffdf7;
  --yellow: #f5ce22;
  --blue: #3568d4;
  --green: #126957;
  --lavender: #826dee;
  --coral: #ff6259;
  --heading-font-family: "TAY Amaya", "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;
  --writing-font-family: "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;
  --writing-font-size: .96rem;
  --writing-font-weight: 400;
  --writing-line-height: 1.35;
  --lyrics-line-height: 1.12;
  --writing-mono-font-size: .86rem;
  --task-font-size: .72rem;
  --task-font-weight: 600;
  --song-menu-width: 312px;
  --tool-writing: #ccdcf2;
  --tool-organizing: #f2d18c;
  --tool-reference: #cfe5cf;
  --tool-production: #dfd2ed;
  --tool-files: #e7b2c3;
  --muted: rgba(5, 5, 5, .48);
  --line: 3px;
  --heavy-line: 8px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
.material-symbols-outlined {
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-filled { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.tutorial-arrow { font-size: 18px; line-height: 1; }
.material-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; vertical-align: middle; }
.material-icon-chevron-forward, .material-icon-chevron-backward { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.material-icon-delete { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.material-icon-close { width: 20px; height: 20px; fill: currentColor !important; stroke: none !important; }
.material-icon-info { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.material-icon-graphic-eq { font-size: 27px; line-height: 1; }
.material-icon-mic { font-size: 27px; line-height: 1; }
.project-detail-navigation .material-icon-chevron-backward { width: 18px; height: 18px; }
.module-back .material-icon-chevron-backward { width: 20px; height: 20px; fill: currentColor; stroke: none; }
html {
  background: var(--ink);
  touch-action: manipulation;
  overscroll-behavior-y: none;
}
body {
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background: var(--ink);
  color: var(--ink);
  font-family: "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif;
}
html:has(.song-view:not([hidden])),
body:has(.song-view:not([hidden])) {
  height: 100%;
  overflow-y: hidden;
}
html:has(.field-guide-course-page:not([hidden])),
body:has(.field-guide-course-page:not([hidden])) {
  height: 100%;
  overflow-y: hidden;
}
body::before {
  position: fixed;
  z-index: 19;
  top: 0;
  right: 0;
  left: 0;
  height: env(safe-area-inset-top);
  background: var(--ink);
  content: "";
  pointer-events: none;
}

button, input, textarea, select { font: inherit; }
select option { font-family: "Avenir Next", "SF Pro Display", "Segoe UI", sans-serif; }
button { color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6, .label {
  font-family: var(--heading-font-family);
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 18px;
  background: var(--ink);
  color: white;
}
.topbar-left { display: flex; min-width: 0; align-items: center; gap: 8px; }

.brand {
  padding: 6px 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.045em;
}
.brand img { display: block; width: 165px; height: auto; }

.primary-nav { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: none; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.topbar > .brand { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.account-button {
  display: grid;
  place-items: center;
  place-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 2px solid white;
  border-radius: 9px;
  background: transparent;
  color: white;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.account-button:hover { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.account-button:focus:not(:focus-visible) { outline: none; }
.account-panel > header h2:focus { outline: 0; }
.account-button.is-signed-in, .account-button.is-signed-in:hover { width: 40px; height: 40px; min-height: 40px; padding: 0; border-color: white; border-radius: 9px; background: var(--account-profile-color, var(--blue)); color: var(--account-profile-ink, white); }
.account-button-avatar { font-size: .72rem; font-weight: 950; letter-spacing: -.03em; }
.account-button-avatar svg { display: block; width: 27px; height: 27px; }
.account-button.is-signed-in .account-button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.account-button:disabled { cursor: not-allowed; opacity: .55; }
.inbox-button { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: white; }
.inbox-button:hover, .inbox-button:focus-visible { background: rgba(255,255,255,.12); color: var(--yellow); outline: 0; }
.inbox-button .material-symbols-outlined { font-size: 25px; font-variation-settings: "FILL" 0, "wght" 500; }
.inbox-button-badge { position: absolute; top: -4px; right: -5px; display: grid; min-width: 19px; height: 19px; place-items: center; padding: 0 5px; border: 2px solid var(--ink); border-radius: 999px; background: var(--coral); color: white; font-size: .53rem; font-weight: 950; line-height: 1; }
.cloud-status { position: fixed; left: 18px; bottom: 18px; z-index: 45; max-width: min(420px, calc(100vw - 36px)); padding: 8px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: .6rem; font-weight: 800; box-shadow: 4px 4px 0 rgba(5, 5, 5, .2); white-space: normal; }
.cloud-status:empty { display: none; }
.cloud-status.is-error { border-color: var(--coral); background: #ffe4df; color: var(--ink); }
button.account-required:disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .38; }
.primary-nav-group { display: flex; min-width: max-content; flex: 0 0 auto; align-items: center; contain: layout style; }
.primary-nav-button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: white;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.primary-nav-button:hover { color: var(--yellow); }
.primary-nav-button.is-active { background: var(--yellow); color: var(--ink); transition: border-radius .22s ease, background-color .14s ease, color .14s ease; }
.primary-nav button:focus:not(:focus-visible) { outline: none; }
.primary-nav button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.primary-nav-group:has(.primary-subnav.is-open) .primary-nav-button.is-active { border-radius: 9px 0 0 9px; }
.primary-subnav {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  width: 0;
  height: 34px;
  min-height: 34px;
  align-items: center;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--yellow);
  border-left: 0;
  border-right-width: 0;
  border-radius: 0 9px 9px 0;
  border-color: transparent;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: width .32s cubic-bezier(.22, .72, .25, 1), opacity .16s ease, border-color .16s ease, border-right-width .1s ease;
  white-space: nowrap;
  will-change: width;
}
.primary-subnav.is-open { width: var(--subnav-width, 220px); border-color: var(--yellow); border-right-width: 2px; opacity: 1; pointer-events: auto; }
.primary-subnav-inner {
  display: flex;
  width: max-content;
  min-width: max-content;
  align-items: center;
  gap: 2px;
  padding: 3px 3px 3px 4px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .16s ease .06s, transform .26s cubic-bezier(.22, .72, .25, 1);
}
.primary-subnav.is-open .primary-subnav-inner { opacity: 1; transform: translateX(0); }
.primary-subnav button {
  position: relative;
  display: flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.primary-subnav button:hover, .primary-subnav button.is-current { background: var(--yellow); color: var(--ink); }
.primary-subnav [data-primary-create-song] .material-symbols-outlined { font-size: 18px; vertical-align: -4px; }
.primary-subnav button:last-child { border-radius: 0 5px 5px 0; }
.primary-subnav button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }
.primary-subnav button + button::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: -2px; width: 1px; background: rgba(255, 255, 255, .28); }

.label, .rail-label {
  margin: 0;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

main { min-height: calc(100vh - 68px); padding: 16px; background: var(--cream); }

html:has(body.public-chord-demo-embed),
html:has(body.public-lyrics-demo-embed),
html:has(body.public-listen-back-demo-embed),
body.public-chord-demo-embed,
body.public-lyrics-demo-embed,
body.public-listen-back-demo-embed { height: 100%; min-height: 100%; overflow: hidden; background: var(--tool-writing); }
body.public-chord-demo-embed > .topbar,
body.public-lyrics-demo-embed > .topbar,
body.public-listen-back-demo-embed > .topbar { display: none; }
body.public-chord-demo-embed > main,
body.public-lyrics-demo-embed > main,
body.public-listen-back-demo-embed > main { width: 100%; height: 100%; min-height: 0; padding: 0; }
body.public-chord-demo-embed .song-view.standalone-tool-mode,
body.public-lyrics-demo-embed .song-view.standalone-tool-mode,
body.public-listen-back-demo-embed .song-view.standalone-tool-mode { width: 100%; height: 100%; margin: 0; grid-template-columns: minmax(0, 1fr); }
body.public-chord-demo-embed .standalone-folder-rail,
body.public-chord-demo-embed .standalone-tool-heading,
body.public-lyrics-demo-embed .standalone-folder-rail,
body.public-lyrics-demo-embed .standalone-tool-heading,
body.public-listen-back-demo-embed .standalone-folder-rail,
body.public-listen-back-demo-embed .standalone-tool-heading { display: none !important; }
body.public-chord-demo-embed .song-view.standalone-tool-mode .song-page,
body.public-lyrics-demo-embed .song-view.standalone-tool-mode .song-page,
body.public-listen-back-demo-embed .song-view.standalone-tool-mode .song-page { height: 100%; grid-column: 1; grid-row: 1; grid-template-rows: minmax(0, 1fr); padding: 0; }
body.public-chord-demo-embed .song-view.standalone-tool-mode .module-grid,
body.public-lyrics-demo-embed .song-view.standalone-tool-mode .module-grid,
body.public-listen-back-demo-embed .song-view.standalone-tool-mode .module-grid { grid-row: 1; }
body.public-listen-back-demo-embed .public-listen-back-read-only { pointer-events: none; }
main:has(.app-home-view:not([hidden])) { padding-bottom: 0; }
.route-unavailable {
  position: fixed;
  z-index: 44;
  top: 82px;
  left: 50%;
  display: grid;
  width: min(520px, calc(100vw - 32px));
  grid-template-columns: 54px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 6px 6px 0 rgba(5, 5, 5, .18);
  transform: translateX(-50%);
}
.route-unavailable-character { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 13px; background: var(--yellow); color: var(--ink); }
.route-unavailable-character svg { width: 46px; height: 46px; }
.route-unavailable div { display: grid; gap: 2px; }
.route-unavailable strong { font-size: .86rem; line-height: 1.1; }
.route-unavailable p { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 750; line-height: 1.35; }
.route-unavailable > button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 1.25rem; font-weight: 900; }
.route-unavailable > button:hover, .route-unavailable > button:focus-visible { background: rgba(5, 5, 5, .1); outline: 0; }
.app-home-view, .section-landing {
  min-height: calc(100vh - 100px);
  padding: clamp(24px, 5vw, 70px);
}
.app-home-view { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 28px 24px; }
.app-home-heading, .section-landing-heading { display: grid; max-width: 760px; gap: 7px; }
.app-home-greeting { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .02em; }
.app-home-heading h1, .section-landing-heading h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.035em;
}
.section-landing-heading > span { max-width: 620px; color: var(--muted); font-size: .9rem; font-weight: 700; }
.app-home-heading { max-width: none; grid-column: 1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 24px; }
.app-home-greeting, .app-home-heading h1 { grid-column: 1; }
.app-home-heading h1 { grid-row: 2; }
.app-home-add { display: grid; width: 56px; height: 56px; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; margin: 0; place-items: center; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--ink); transition: transform .14s ease, background-color .14s ease; }
.app-home-add:hover, .app-home-add:focus-visible { background: var(--yellow); color: var(--ink); transform: translateY(-2px); }
.app-home-add:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.app-home-add:active { background: var(--yellow); transform: translateY(1px); }
.app-home-add .material-symbols-outlined { font-size: 30px; }
.app-home-grid, .tool-landing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-home-grid { grid-column: 1 / -1; margin-bottom: clamp(160px, 15vw, 240px); }
.app-home-scroll-cue { display: grid; width: 64px; height: 64px; grid-column: 1 / -1; justify-self: start; place-items: center; margin: 12px 0 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); transition: transform .16s ease, background-color .16s ease; }
.app-home-scroll-cue:hover, .app-home-scroll-cue:focus-visible { background: transparent; transform: translateY(3px); outline: 0; }
.app-home-scroll-cue:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.app-home-scroll-cue .material-symbols-outlined { font-size: 56px; }
.app-home-scroll-cue-advance { margin-top: -14px; margin-bottom: -6px; }
.app-quickstart + .app-home-scroll-cue-advance { margin-top: -24px; margin-bottom: clamp(28px, 4vw, 44px); }
.app-home-view:has(.app-quickstart) { padding-top: clamp(40px, 7vw, 100px); padding-bottom: clamp(40px, 7vw, 100px); }
.app-home-view:has(.app-home-share) { padding-bottom: 0; }
.app-home-discovery, .app-home-share { display: grid; width: 100%; gap: 24px; }
.app-home-discovery { margin-top: clamp(12px, 2vw, 24px); padding: clamp(30px, 5vw, 64px); border: var(--line) solid rgba(5, 5, 5, .72); border-radius: 22px; background: rgba(255, 253, 247, .48); }
.app-home-subsection-heading { display: grid; max-width: 760px; gap: 7px; }
.app-home-subsection-heading h2, .app-home-share h2 { margin: 0; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
.app-home-subsection-heading p, .app-home-share > div > p:not(.label) { max-width: 620px; margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.35; }
.app-home-discovery-content { display: grid; gap: clamp(36px, 5vw, 60px); }
.app-home-discovery-row { display: grid; gap: 16px; }
.app-home-discovery .learn-home-row-header h3 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.7rem); line-height: .98; letter-spacing: -.035em; }
.app-home-discovery-blog-card { min-height: 150px; }
.app-home-discovery-course-grid { grid-template-columns: 1fr; }
.app-home-discovery-course-card { width: 100%; }
.app-home-discovery-row:has(.app-home-discovery-tutorial-link) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.app-home-discovery-tutorial-copy { max-width: 58ch; margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.4; }
.app-home-discovery-tutorial-link { display: flex; width: max-content; min-height: 42px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 9px; background: var(--tool-reference); color: var(--ink); font: 900 .68rem/1 var(--writing-font-family); text-align: left; box-shadow: 4px 4px 0 rgba(5, 5, 5, .13); cursor: pointer; }
.app-home-discovery-tutorial-link:hover, .app-home-discovery-tutorial-link:focus-visible { background: var(--yellow); outline: 0; transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(5, 5, 5, .16); }
.app-home-discovery-tutorial-link .material-icon-chevron-forward { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .16s ease; }
.app-home-discovery-tutorial-link:hover .material-icon-chevron-forward, .app-home-discovery-tutorial-link:focus-visible .material-icon-chevron-forward { transform: translateX(3px); }
.app-home-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.app-home-discovery-grid .learn-placeholder { max-width: none; min-height: 180px; }
.app-home-discovery-coming { border-style: dashed; }
.app-home-share { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 5vw, 72px); width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(52px, 8vw, 104px) calc(16px + clamp(24px, 5vw, 70px)); background: var(--ink); color: white; }
.app-home-share-copy { display: grid; gap: 10px; }
.app-home-share > div > p:not(.label) { max-width: 42ch; color: rgba(255, 255, 255, .72); }
.app-home-share-copy { grid-column: 1; grid-row: 1; }
.app-home-share-character { display: block; width: clamp(72px, 9vw, 116px); height: clamp(72px, 9vw, 116px); grid-column: 2; grid-row: 1 / span 2; color: white; transition: transform .34s cubic-bezier(.22, .72, .25, 1); }
.app-home-share:hover .app-home-share-character, .app-home-share:focus-within .app-home-share-character { transform: translateY(-7px) rotate(-4deg); }
.app-home-share-action { display: grid; grid-column: 1; grid-row: 2; justify-items: start; gap: 8px; }
.app-home-share-action button { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 14px; border: 2px solid white; border-radius: 9px; background: var(--yellow); color: var(--ink); font: 900 .68rem/1 var(--writing-font-family); }
.app-home-share-action button:hover, .app-home-share-action button:focus-visible { background: white; color: var(--ink); outline: 0; }
.app-home-share-action .material-symbols-outlined { font-size: 19px; }
.app-home-share-status { min-height: 1em; color: rgba(255, 255, 255, .72); font-size: .62rem; font-weight: 750; }
.app-quickstart { --quickstart-files-layout: column; display: grid; width: 100vw; grid-column: 1 / -1; gap: 24px; margin-top: clamp(24px, 5vw, 70px); margin-left: calc(50% - 50vw); padding: 40px calc(16px + clamp(24px, 5vw, 70px)) clamp(24px, 3vw, 36px); background: transparent; }
.app-quickstart-heading { display: grid; max-width: 760px; gap: 7px; }
.app-quickstart-heading h2 { margin: 0; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
.app-quickstart-heading > p { max-width: 620px; margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.35; }
.app-quickstart-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, .72fr); align-items: start; column-gap: 30px; row-gap: 28px; }
.app-quickstart-main-column { display: grid; min-width: 0; grid-column: 1; grid-row: 1; align-content: start; gap: 28px; }
.app-quickstart-pane { display: grid; min-width: 0; align-content: start; gap: 10px; padding: 15px; border: 2px solid rgba(5, 5, 5, .62); border-radius: 12px; background: rgba(255, 253, 247, .58); }
.app-quickstart-pane header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-quickstart-pane h3 { margin: 0; font-size: .92rem; letter-spacing: -.025em; }
.app-quickstart-songs { align-self: start; container: app-quickstart-songs / inline-size; }
.app-quickstart-files { display: grid; height: var(--quickstart-main-height, 0px); min-height: 0; grid-column: 2; grid-row: 1; align-self: start; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.app-quickstart-songs > header, .app-quickstart-files > header, .app-quickstart-connections > header { display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 8px; }
.app-quickstart-songs h3, .app-quickstart-files h3, .app-quickstart-connections h3 { margin: 0; font: 900 .92rem/1 var(--writing-font-family); letter-spacing: -.025em; }
.app-quickstart-file-surface { min-height: 0; height: 100%; padding: 15px; border: 2px solid rgba(5, 5, 5, .62); border-radius: 12px; background: rgba(255, 253, 247, .58); }
.app-quickstart-connections { display: grid; min-width: 0; gap: 10px; }
.app-quickstart-connections .connections-directory { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.app-quickstart-connections .connection-profile-card { height: 100px; min-height: 100px; max-height: 100px; overflow: hidden; }
.app-quickstart-connections .connection-profile-card { border: 2px solid var(--ink); border-radius: 9px; box-shadow: none; }
.app-quickstart-connections .connection-profile-card > div { overflow: hidden; }
.app-quickstart-connections .connection-profile-card h2, .app-quickstart-connections .connection-profile-card > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-quickstart-file-pane .tools-recent-list { height: 100%; align-content: start; padding: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.app-quickstart-file-pane .account-file-card { height: 66px; min-height: 66px; max-height: 66px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 7px; padding: 7px; border-width: 2px; border-radius: 9px; box-shadow: none; }
.app-quickstart-file-pane .account-file-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.app-quickstart-file-pane .account-file-icon { width: 42px; height: 42px; }
.app-quickstart-file-pane .account-file-icon svg { width: 29px; height: 29px; }
.app-quickstart-file-pane .account-file-card-copy strong { font-size: .76rem; }
.app-quickstart-file-pane .account-file-card-copy small, .app-quickstart-file-pane .account-file-card-copy em { font-size: .48rem; }
.app-quickstart-files-view-all { display: inline-flex; width: max-content; min-height: 31px; grid-column: 1 / -1; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 900 .59rem/1 var(--writing-font-family); }
.app-quickstart-files-view-all:hover, .app-quickstart-files-view-all:focus-visible { background: var(--yellow); outline: 0; }
.app-quickstart-files-view-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.app-quickstart-list { display: grid; min-width: 0; gap: 6px; }
.app-quickstart-record { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; background: rgba(5, 5, 5, .06); color: var(--ink); text-align: left; }
.app-quickstart-record:hover, .app-quickstart-record:focus-visible { background: var(--yellow); outline: 0; }
.app-quickstart-record:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.app-quickstart-record-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 6px; background: var(--ink); color: white; font-size: 14px; }
.app-quickstart-record-copy { display: grid; min-width: 0; gap: 1px; }
.app-quickstart-record-copy strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.app-quickstart-record-copy small { overflow: hidden; color: var(--muted); font-size: .56rem; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.app-quickstart-record-meta { color: var(--muted); font-size: .55rem; font-weight: 800; white-space: nowrap; }
.app-quickstart-empty { margin: 0; color: var(--muted); font-size: .62rem; font-weight: 700; line-height: 1.35; }
.app-quickstart-link { display: inline-flex; min-height: 31px; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 900 .59rem/1 var(--writing-font-family); }
.app-quickstart-link:hover, .app-quickstart-link:focus-visible { background: var(--yellow); outline: 0; }
.app-quickstart-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.app-quickstart-link .material-icon-chevron-forward { width: 14px; height: 14px; transition: transform .16s ease; }
.app-quickstart-link:hover .material-icon-chevron-forward, .app-quickstart-link:focus-visible .material-icon-chevron-forward { transform: translateX(2px); }
@media (max-width: 1360px) {
  .app-quickstart { --quickstart-files-layout: row; }
  .app-quickstart-grid { grid-template-columns: 1fr; }
  .app-quickstart-main-column, .app-quickstart-files { grid-column: 1; grid-row: auto; }
  .app-quickstart-songs .home-song-row:not(.is-list-mode) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-quickstart-files { height: auto; align-self: start; grid-template-rows: auto auto; }
  .app-quickstart-file-surface { height: auto; }
  .app-quickstart-file-pane .tools-recent-list { height: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-content: start; }
}

@container app-quickstart-songs (max-width: 980px) {
  .app-quickstart-songs .home-song-row:not(.is-list-mode) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container app-quickstart-songs (max-width: 760px) {
  .app-quickstart-songs .home-song-row:not(.is-list-mode) { grid-template-columns: minmax(0, 1fr); }
}
.app-destination-card {
  display: grid;
  container-type: inline-size;
  min-height: 260px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 22px;
  border: 5px solid var(--ink);
  border-radius: 18px;
  color: var(--ink);
  text-align: left;
  box-shadow: 5px 5px 0 rgba(5, 5, 5, .15);
  transition: transform .12s ease, box-shadow .12s ease;
}
.app-destination-card:hover { transform: translateY(-3px); box-shadow: 7px 8px 0 rgba(5, 5, 5, .18); }
.app-destination-card > span { grid-column: 1; grid-row: 1; align-self: start; font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.app-destination-character { display: block; width: 72px; height: 72px; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; color: currentColor; transition: transform .24s cubic-bezier(.22,.72,.25,1); }
.app-destination-card:hover .app-destination-character, .app-destination-card:focus-within .app-destination-character { transform: translateY(-4px) rotate(6deg) scale(1.05); }
.app-destination-card:active .app-destination-character { transform: translateY(2px) rotate(-4deg) scale(.96); }
.app-destination-card > strong { grid-column: 1 / -1; align-self: end; font-size: clamp(1.65rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -.055em; }
.app-destination-card > small { grid-column: 1; grid-row: 3; max-width: 31ch; font-size: .75rem; font-weight: 750; line-height: 1.35; }
.app-destination-entry { display: inline-flex; grid-column: 2; grid-row: 3; min-height: 36px; align-items: center; justify-self: end; gap: 7px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--ink); color: white; font: 900 .64rem/1 var(--writing-font-family); }
.app-destination-entry:hover, .app-destination-entry:focus-visible { background: var(--yellow); color: var(--ink); outline: 0; }
.app-destination-entry:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.app-destination-entry:active { transform: translateY(1px); }
.app-destination-entry-character { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 3; transition: transform .18s ease; }
.app-destination-entry:hover .app-destination-entry-character, .app-destination-entry:focus-visible .app-destination-entry-character { transform: rotate(-8deg) translateY(-1px); }
.app-destination-entry .material-icon-chevron-forward { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .18s ease; }
.app-destination-entry:hover .material-icon-chevron-forward, .app-destination-entry:focus-visible .material-icon-chevron-forward { transform: translateX(3px); }
.destination-songs { background: var(--yellow); }
.destination-connections { background: var(--blue); color: white; }
.destination-tools { background: var(--tool-writing); }
.destination-learn { background: var(--tool-reference); }
.section-landing { display: grid; align-content: start; gap: 30px; }
.tools-view { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: start; }
.tools-view > .section-landing-heading { grid-column: 1 / -1; }
.tools-view > .tool-showcase-grid { grid-column: 1; grid-row: 2 / span 2; width: 100%; min-width: 0; }
.tools-view > .tools-recent { grid-column: 2; grid-row: 2; min-width: 0; margin-top: 0; }
.tool-showcase-chords { order: 1; }
.tool-showcase-listen { order: 2; }
.tool-showcase-lyrics { order: 3; }
.connections-content { width: min(1080px, 100%); }
.profile-foundation-card { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); overflow: hidden; border: var(--line) solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 6px 6px 0 rgba(5,5,5,.15); }
.profile-foundation-identity { display: grid; min-height: 330px; align-content: space-between; gap: 24px; padding: 24px; background: var(--ink); color: white; }
.profile-avatar-placeholder { display: grid; width: 92px; height: 92px; place-items: center; border: 3px solid white; border-radius: 24px; background: var(--blue); font-size: 2rem; font-weight: 950; letter-spacing: -.06em; }
.profile-foundation-identity p { margin: 0; color: rgba(255,255,255,.62); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.profile-foundation-identity h2 { margin: 6px 0 0; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: .98; letter-spacing: -.055em; overflow-wrap: anywhere; }
.profile-foundation-form { display: grid; align-content: start; gap: 18px; padding: clamp(22px, 4vw, 38px); }
.profile-foundation-form > header { display: grid; gap: 5px; }
.profile-foundation-form > header h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.035em; }
.profile-foundation-form > header p, .profile-authority-note, .profile-save-status { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.45; }
.profile-foundation-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-foundation-fields label { display: grid; gap: 6px; }
.profile-foundation-fields label span { font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.profile-foundation-fields input { min-width: 0; height: 45px; padding: 0 11px; border: 2px solid var(--ink); border-radius: 9px; background: white; color: var(--ink); outline: 0; }
.profile-foundation-fields input:focus { box-shadow: 0 0 0 4px var(--yellow); }
.profile-foundation-fields input[readonly] { background: var(--cream); color: var(--muted); cursor: default; }
.profile-save-button { width: max-content; min-height: 43px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 9px; background: var(--yellow); font-size: .72rem; font-weight: 900; }
.profile-save-button:hover { background: var(--ink); color: white; }
.profile-save-button:disabled { cursor: wait; opacity: .55; }
.profile-save-status.is-error { color: #9b1c18; }
.connections-empty-card { display: grid; min-height: 300px; place-items: center; padding: 34px; border: var(--line) solid var(--ink); border-radius: 18px; background: var(--paper); text-align: center; box-shadow: 6px 6px 0 rgba(5,5,5,.15); }
.connections-empty-card > div { display: grid; max-width: 540px; justify-items: center; gap: 10px; }
.connections-empty-icon { display: grid; width: 72px; height: 72px; place-items: center; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--tool-reference); font-size: 1.8rem; font-weight: 900; }
.connections-empty-card h2 { margin: 6px 0 0; font-size: 1.55rem; letter-spacing: -.04em; }
.connections-empty-card p { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 700; line-height: 1.45; }
.connections-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.connection-profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-height: 100px; padding: 14px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5,5,5,.14); }
.connection-profile-avatar { display: grid; width: 68px; height: 68px; place-items: center; border: 3px solid var(--ink); border-radius: 18px; background: var(--connection-profile-color, var(--blue)); color: var(--connection-profile-ink, white); font-size: 1.35rem; font-weight: 950; letter-spacing: -.05em; }
.connection-profile-avatar svg { display: block; width: 48px; height: 48px; }
.connection-profile-card > div { display: grid; gap: 3px; min-width: 0; }
.connection-profile-card p { margin: 0; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.connection-profile-card h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.35rem; line-height: 1; letter-spacing: -.04em; }
.connection-profile-card > div > span { color: var(--muted); font-size: .68rem; font-weight: 750; }
.connections-view { width: 100%; margin: 0 auto; }
.connections-view-heading { display: grid; max-width: 760px; gap: 7px; }
.connections-directory-head, .connections-directory-section > header, .connections-requests > header, .connections-search-results > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.connections-view-heading .label, .connections-directory-section .label, .connections-requests .label, .connections-search-results .label, .connection-detail .label { margin: 0; }
.connections-view-heading h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .9; letter-spacing: -.06em; }
.connections-view-heading h1 { display: flex; align-items: center; gap: 12px; }
.connections-view-heading > span { max-width: 620px; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.35; }
.connections-mushroom-heading { display: block; width: 54px; height: 54px; flex: 0 0 auto; transform: translateY(-3px); transition: transform .34s cubic-bezier(.22,.72,.25,1); }
.connections-view-heading h1:hover .connections-mushroom-heading, .connections-view-heading h1:focus-within .connections-mushroom-heading { transform: rotate(7deg) translateY(-5px); }
.connections-view-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.connections-view-actions button, .connections-directory-head > button, .connections-profile-summary button, .connections-profile-settings header button, .connections-profile-save button, .connection-detail-actions > button, .connections-empty-card button, .connections-search-results button, .connections-requests button { min-height: 40px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: white; color: var(--ink); font-size: .66rem; font-weight: 900; }
.connections-view-actions button:first-child, .connections-directory-head > button, .connection-detail-actions > button:first-child, .connections-profile-save button, .connections-empty-card button, .connections-search-results button { background: var(--yellow); }
.connections-view-actions button:hover, .connections-directory-head > button:hover, .connections-profile-summary button:hover, .connections-profile-settings header button:hover, .connections-profile-save button:hover, .connection-detail-actions > button:hover, .connections-empty-card button:hover, .connections-search-results button:hover, .connections-requests button:hover { background: var(--ink); color: white; }
.connections-page-content { display: grid; gap: 22px; }
.connections-profile-summary, .connections-profile-settings, .connections-requests, .connections-search-results, .connection-detail { border-top: 3px solid var(--ink); }
.connection-detail { border-top: 0; }
.connections-profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.connections-profile-summary > div { display: grid; gap: 3px; }
.connections-profile-summary strong { font-size: 1rem; }
.connections-profile-summary span { color: var(--muted); font-size: .7rem; font-weight: 700; }
.connections-profile-settings { display: grid; gap: 16px; padding-top: 16px; }
.connections-profile-settings header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.connections-profile-settings h2, .connections-directory-section h2, .connections-requests h2, .connections-search-results h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.045em; }
.connections-profile-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.connections-profile-fields label { display: grid; gap: 5px; min-width: 0; }
.connections-profile-fields label > span { font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.connections-profile-fields input[type="text"], .connections-profile-fields input:not([type]) { min-width: 0; height: 40px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 8px; background: white; }
.connections-profile-fields small { color: var(--muted); font-size: .55rem; font-weight: 700; line-height: 1.3; }
.connections-profile-fields .connections-discoverability { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 10px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); }
.connections-discoverability input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ink); }
.connections-discoverability span { display: grid; gap: 2px; }
.connections-discoverability strong { font-size: .7rem; }
.connections-discoverability small { font-size: .62rem; }
.connections-profile-save { display: flex; align-items: center; gap: 10px; }
.connections-profile-save p { margin: 0; color: var(--muted); font-size: .65rem; font-weight: 700; }
.connections-profile-save p.is-error { color: #9b1c18; }
.connections-directory-head { align-items: center; padding-top: 2px; }
.connections-find-section { display: grid; gap: 9px; }
.connections-find-section h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.045em; }
.connections-find-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connections-find-header button { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; padding: 0 11px; border: 2px solid var(--ink); border-radius: 8px; background: white; color: var(--ink); font-size: .62rem; font-weight: 900; }
.connections-find-header button .material-symbols-outlined { font-size: 17px; }
.connections-find-header button.is-copied { background: var(--ink); color: white; }
.connections-find-header button:hover { background: var(--yellow); }
.connections-search-bar.account-files-search { width: 100%; grid-column: auto; }
.connections-find-results { width: 100%; }
.connections-find-results .connections-search-results { max-height: 360px; gap: 9px; overflow-y: auto; padding: 4px 3px 7px; border-top: 1px solid rgba(5,5,5,.28); }
.connections-find-results .connections-search-results > header { position: sticky; z-index: 1; top: 0; display: flex; justify-content: flex-end; padding: 5px 2px 2px; background: var(--cream); }
.connections-find-results .connections-search-results > header span { color: var(--ink); font-size: .62rem; font-weight: 900; }
.connections-find-results .connections-search-results > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.connections-find-results .connections-search-results article { height: 72px; min-height: 72px; margin-top: 0; padding: 10px; border-radius: 10px; }
.connections-find-results .connections-search-results article + article { margin-top: 0; }
.connections-find-results .connection-request-avatar { width: 48px; height: 48px; border-radius: 10px; }
.connections-find-results .connection-request-avatar svg { width: 35px; height: 35px; }
.connections-find-results .connections-search-results article strong { font-size: .78rem; }
.connections-find-results .connections-search-results article > button,
.connections-find-results .connections-search-results article > em { align-self: center; justify-self: end; }
.connections-find-results .connections-search-results article > button, .connection-detail-actions .connection-remove { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.connections-find-results .connections-search-results article > button, .connection-detail-actions .connection-remove { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; }
.connections-find-results .connections-search-results article > button { border: 0; background: transparent; }
.connections-find-results .connections-search-results article > button:hover,
.connections-find-results .connections-search-results article > button:focus-visible,
.connections-find-results .connections-search-results article > button:active,
.connection-detail-actions .connection-remove:hover,
.connection-detail-actions .connection-remove:focus-visible,
.connection-detail-actions .connection-remove:active { background: var(--yellow); color: var(--ink); }
.material-icon-person-add, .material-icon-person-remove { width: 18px; height: 18px; }
.connection-connected-mark { display: inline-grid; width: 38px; height: 38px; place-items: center; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ink); }
.connection-connected-mark .material-icon-check-circle { width: 22px; height: 22px; }
.connections-directory-head input { width: 100%; height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 9px; background: white; font-weight: 700; outline: 0; }
.connections-directory-head input:focus, .connections-profile-fields input:focus { box-shadow: 0 0 0 4px var(--yellow); }
.connections-requests, .connections-search-results { display: grid; gap: 13px; padding-top: 18px; }
.connections-directory-section { display: grid; gap: 13px; }
.connections-requests > header, .connections-search-results > header, .connections-directory-section > header { align-items: center; }
.connections-requests > header > div, .connections-search-results > header > div, .connections-directory-section > header > div { display: grid; gap: 3px; }
.connections-requests > article, .connections-search-results article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 2px solid var(--ink); border-radius: 10px; background: white; }
.connections-requests > article + article, .connections-search-results article + article { margin-top: 7px; }
.connection-request-avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--ink); border-radius: 9px; background: var(--connection-profile-color, var(--blue)); color: var(--connection-profile-ink, white); }
.connection-request-avatar svg { width: 29px; height: 29px; color: inherit; stroke: currentColor; opacity: 1; }
.connection-request-avatar use { color: inherit; stroke: currentColor; opacity: 1; }
.connections-requests article > div:nth-child(2), .connections-search-results article > div { display: grid; min-width: 0; gap: 2px; }
.connections-requests article strong, .connections-search-results article strong { overflow-wrap: anywhere; font-size: .76rem; }
.connections-requests article span, .connections-search-results article span { color: var(--muted); font-size: .62rem; font-weight: 700; }
.connections-requests article > div:last-child { display: flex; gap: 6px; }
.connections-requests article > div:last-child button { min-height: 32px; padding: 0 8px; font-size: .56rem; }
.connections-requests article > div:last-child button:first-child { background: var(--yellow); }
.connections-requests article em, .connections-search-results article em { padding: 5px 7px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: .54rem; font-style: normal; font-weight: 900; }
.connections-directory-section > header > span, .connections-search-results > header > span { display: block; min-width: 0; height: auto; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: .68rem; font-weight: 900; }
.connection-profile-card { width: 100%; color: var(--ink); text-align: left; }
.connection-profile-card:hover, .connection-profile-card:focus-visible { background: var(--yellow); outline: 0; transform: translateY(-2px); }
.connections-back { display: inline-flex; width: max-content; min-height: 38px; align-items: center; gap: 6px; padding: 0 11px; border: 2px solid var(--ink); border-radius: 8px; background: white; color: var(--ink); font-size: .66rem; font-weight: 900; }
.connections-back:hover { background: var(--yellow); }
.connections-back .material-symbols-outlined { font-size: 18px; }
.connections-context-nav { display: inline-flex; width: max-content; align-items: center; gap: 5px; }
.connection-detail { display: grid; gap: 20px; padding-top: 18px; }
.connection-detail > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.connection-detail-avatar { display: grid; width: 96px; height: 96px; place-items: center; border: 3px solid var(--ink); border-radius: 22px; background: var(--connection-profile-color, var(--blue)); color: var(--connection-profile-ink, white); }
.connection-detail-avatar svg, .connection-detail-avatar use { width: 70px; height: 70px; color: inherit; stroke: currentColor; opacity: 1; }
.connection-detail > header .connection-detail-avatar { color: var(--connection-profile-ink, white); }
.connection-detail-identity { display: grid; min-width: 0; gap: 4px; }
.connection-detail h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 3rem); line-height: .95; letter-spacing: -.055em; overflow-wrap: anywhere; }
.connection-detail > header span, .connection-detail > header small { color: var(--muted); font-size: .7rem; font-weight: 700; }
.connection-profile-location { display: inline-flex; align-items: center; gap: 5px; color: var(--ink) !important; }
.connection-profile-location .material-icon { width: 16px; height: 16px; }
.connection-profile-location > span { color: inherit; font-size: .7rem; font-weight: 800; }
.connection-profile-rights { color: var(--ink) !important; font-size: .66rem !important; font-weight: 900 !important; }
.connection-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.connection-detail-actions > button[data-connection-start-song] { background: var(--blue); color: white; }
.connection-detail-actions [data-connection-start-song]:hover,
.connection-detail-actions [data-connection-start-song]:focus-visible,
.connection-detail-actions [data-connection-start-song]:active { background: var(--yellow); color: var(--ink); }
.connection-detail-actions .connection-remove { background: white; }
.connection-detail-actions .connection-add { display: inline-flex; min-width: 40px; align-items: center; justify-content: center; padding: 0 11px; background: var(--yellow); }
.connection-detail-actions .connection-add.is-pending { background: var(--paper); color: var(--muted); cursor: default; opacity: .72; }
.connection-context-note { margin: -6px 0 0; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 9px; background: var(--yellow); font-size: .7rem; font-weight: 800; line-height: 1.4; }
.connection-songs { display: grid; gap: 12px; }
.connection-songs > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.connection-songs > header > div:first-child { display: grid; gap: 4px; }
.connection-songs h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.045em; }
.connection-songs > header > span { display: block; min-width: 0; height: auto; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: .68rem; font-weight: 900; }
.connection-song-sort { display: flex; flex-wrap: nowrap; }
.connection-song-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 2px 2px 8px; }
.connection-song-card-wrap { min-width: 0; }
.connection-song-card { cursor: pointer; }
.connections-empty-copy { margin: 0; color: var(--muted); font-size: .75rem; font-weight: 700; line-height: 1.4; }
.tool-showcase-grid { display: grid; gap: 18px; width: min(1080px, 100%); }
.tool-showcase-card { position: relative; isolation: isolate; display: grid; min-width: 0; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); min-height: 300px; overflow: hidden; border: var(--line) solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5,5,5,.14); transition: transform .18s ease, box-shadow .18s ease; }
.tool-showcase-card::before { position: absolute; z-index: -1; inset: 0; background: var(--tool-showcase-color); content: ""; transform: scaleX(0); transform-origin: right center; transition: none; }
.tool-showcase-chords, .tool-showcase-lyrics { --tool-showcase-color: var(--tool-writing); }
.tool-showcase-listen { --tool-showcase-color: var(--tool-reference); }
.tool-showcase-card:hover, .tool-showcase-card:focus-within { transform: translateY(-3px); box-shadow: 8px 8px 0 rgba(5,5,5,.17); }
.tool-showcase-card:hover::before, .tool-showcase-card:focus-within::before { transform: scaleX(1); }
.tool-showcase-copy { display: grid; align-content: space-between; gap: 16px; padding: 24px; }
.tool-showcase-copy > small { color: rgba(5,5,5,.52); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tool-showcase-copy h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 3rem); line-height: .94; letter-spacing: -.05em; }
.tool-showcase-copy p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.4; }
.tools-robot-icon { display: inline-block; width: 42px; height: 42px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2.6; }
.tools-robot-heading { width: 54px; height: 54px; margin-right: 12px; }
.learn-monocle-icon { display: inline-block; width: 54px; height: 54px; margin-right: 12px; vertical-align: middle; transition: transform .34s cubic-bezier(.22,.72,.25,1); }
.section-landing-heading h1:hover .learn-monocle-icon, .section-landing-heading h1:focus-within .learn-monocle-icon { transform: rotate(7deg) translateY(-2px); }
.tools-robot-heading { transition: transform .34s cubic-bezier(.22,.72,.25,1); }
.section-landing-heading h1:hover .tools-robot-heading, .section-landing-heading h1:focus-within .tools-robot-heading { transform: rotate(-7deg) translateY(-2px); }
.tool-showcase-copy button { display: inline-flex; justify-self: start; min-height: 40px; align-items: center; gap: 8px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--ink); color: white; font: 900 .67rem/1 var(--writing-font-family); }
.tool-showcase-copy h2 { display: flex; align-items: flex-start; gap: 5px; }
.tool-showcase-info-link { display: inline-grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; margin-top: -2px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-decoration: none; }
.tool-showcase-info-link .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.tool-showcase-info-link:hover, .tool-showcase-info-link:focus-visible { background: var(--yellow); outline: 0; }
.tools-robot-button-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; }
.tool-showcase-copy button:hover, .tool-showcase-copy button:focus-visible { background: var(--yellow); color: var(--ink); outline: 0; }
.tool-showcase-copy button:hover .tools-robot-button-icon, .tool-showcase-copy button:focus-visible .tools-robot-button-icon { transform: rotate(-8deg) translateY(-1px); }
.tools-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; transition: transform .18s ease; }
.tool-showcase-copy button:hover .tools-chevron, .tool-showcase-copy button:focus-visible .tools-chevron { transform: translateX(3px); }
.tool-preview { display: grid; height: 320px; align-content: start; justify-items: center; gap: 12px; min-width: 0; overflow: hidden; padding: 22px 18px 0; color: var(--ink); }
.tool-preview-frame { width: 760px; max-width: none; height: 520px; min-height: 520px; pointer-events: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tool-showcase-card:hover .tool-preview-frame, .tool-showcase-card:focus-within .tool-preview-frame { transform: translate(5px, 5px); }
.tool-preview-frame .module-frame-head { grid-template-columns: 38px minmax(0, 1fr) 38px; }
.tool-preview-frame .module-drag { background: var(--yellow); color: var(--ink); }
.tool-preview-frame .module-drag::before { color: var(--ink); }
.tool-preview-frame .module-back, .tool-preview-frame .module-remove, .tool-preview-frame .mobile-module-order { visibility: hidden; }
.tool-preview-frame .module-body { overflow: hidden; }
.tool-preview-chords { background: var(--tool-writing); grid-template-columns: 1fr; align-content: start; }
.tool-preview-chords > header { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 2px solid rgba(5,5,5,.35); font-size: .68rem; }
.tool-preview-chords b, .tool-preview-lyrics b { font-family: var(--heading-font-family); font-size: 1rem; }
.tool-preview-chords div, .tool-preview-chords p, .tool-preview-lyrics p { margin: 0; font-size: clamp(.82rem, 1.5vw, 1.1rem); line-height: 1.4; }
.tool-preview-lyrics { background: var(--tool-writing); }
.tool-preview-lyrics p { font-size: clamp(.9rem, 1.6vw, 1.2rem); }
.tool-preview-audio { background: var(--tool-reference); align-content: start; }
.tool-preview-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); font-size: .72rem; }
.tool-preview-player i { font-style: normal; }
.tool-preview-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-preview-wave { display: flex; height: 120px; align-items: center; gap: 4px; padding: 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.tool-preview-wave i { flex: 1; min-width: 3px; border-radius: 999px; background: rgba(5,5,5,.35); }
.tool-preview-wave i:nth-child(3n) { height: 76%; }.tool-preview-wave i:nth-child(4n) { height: 42%; }.tool-preview-wave i:nth-child(5n) { height: 90%; }.tool-preview-wave i:not(:nth-child(3n)):not(:nth-child(4n)):not(:nth-child(5n)) { height: 58%; }
.tool-preview-markers { display: flex; justify-content: space-between; font: 900 .62rem/1 var(--writing-font-family); }
.tools-recent { display: grid; gap: 12px; width: 100%; margin-top: 16px; padding: 16px; border: var(--line) solid var(--ink); border-radius: 14px; background: rgba(255,253,247,.5); }
.tools-recent > header { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; }
.tools-recent h2 { margin: 0; font-family: var(--heading-font-family); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: -.04em; }
.tools-recent-group { display: grid; gap: 8px; min-width: 0; padding-top: 10px; border-top: 2px solid rgba(5,5,5,.2); }
.tools-recent-group h3 { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tools-recent-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.tools-recent .account-file-card { grid-template-columns: 42px minmax(0, 1fr) auto; min-width: 0; padding: 7px; gap: 7px; }
.tools-recent .account-file-icon { width: 42px; height: 42px; }
.tools-recent .account-file-icon svg { width: 29px; height: 29px; }
.tools-recent .account-file-card-copy strong { font-size: .76rem; }
.tools-recent .account-file-card-copy small, .tools-recent .account-file-card-copy em { font-size: .48rem; }
.tools-recent-empty { margin: 0; padding: 18px; border: 2px dashed rgba(5,5,5,.32); border-radius: 10px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.tool-landing-card {
  display: grid;
  min-height: 180px;
  align-content: end;
  gap: 7px;
  padding: 20px;
  border: var(--line) solid var(--ink);
  border-radius: 15px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 4px 4px 0 rgba(5, 5, 5, .13);
}
.tool-landing-card:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(5, 5, 5, .16); }
.tool-landing-card strong { font-size: 1.35rem; letter-spacing: -.04em; }
.tool-landing-card small { max-width: 34ch; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.35; }
.tool-landing-lyrics, .tool-landing-chords { background: var(--tool-writing); }
.tool-landing-listen { background: var(--tool-reference); }
.learn-placeholder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.learn-landing, .learn-blog-page, .learn-tutorials-page, .learn-courses-page { display: grid; align-content: start; gap: 30px; }
.learn-landing { gap: clamp(28px, 4vw, 44px); }
.learn-home-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.learn-home-category-card { display: grid; min-height: 126px; align-content: space-between; gap: 8px; padding: 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--tool-reference); color: var(--ink); text-align: left; box-shadow: 4px 4px 0 rgba(5, 5, 5, .13); cursor: pointer; }
.learn-home-category-card:hover, .learn-home-category-card:focus-visible { background: var(--yellow); outline: 0; transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(5, 5, 5, .16); }
.learn-home-category-card small { font-size: .58rem; font-weight: 950; letter-spacing: .06em; }
.learn-home-category-card strong { font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1; letter-spacing: -.035em; }
.learn-home-category-card span { max-width: 36ch; color: var(--muted); font-size: .68rem; font-weight: 700; line-height: 1.35; }
.learn-home-reference { display: grid; gap: clamp(42px, 6vw, 72px); }
.learn-home-reference-row { display: grid; gap: 16px; }
.learn-home-row-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.learn-home-row-header > div { display: grid; gap: 6px; }
.learn-home-row-header .label { margin: 0; color: var(--muted); font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.learn-home-row-header h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.7rem); line-height: .98; letter-spacing: -.035em; }
.learn-home-row-link { display: inline-flex; min-height: 31px; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 900 .59rem/1 var(--writing-font-family); }
.learn-home-row-link:hover, .learn-home-row-link:focus-visible { background: var(--yellow); outline: 0; }
.learn-home-row-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.learn-home-row-link .material-icon-chevron-forward { width: 14px; height: 14px; transition: transform .16s ease; }
.learn-home-row-link:hover .material-icon-chevron-forward, .learn-home-row-link:focus-visible .material-icon-chevron-forward { transform: translateX(2px); }
.learn-home-blog-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.learn-home-blog-card { display: grid; min-height: 150px; grid-column: 1 / -1; align-content: space-between; gap: 10px; padding: 20px; border: 2px solid var(--ink); border-radius: 12px; background: rgba(255, 253, 247, .45); }
.learn-home-blog-card small { width: max-content; padding: 5px 7px; border-radius: 6px; background: var(--ink); color: white; font-size: .54rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.learn-home-blog-card strong { font-size: 1.2rem; line-height: 1.05; letter-spacing: -.025em; }
.learn-home-blog-card span { max-width: 58ch; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.4; }
.learn-blog-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.learn-blog-list-card { display: grid; min-width: 0; min-height: 128px; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 22px; padding: 22px 4px; border: 0; border-top: 2px solid rgba(5, 5, 5, .2); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.learn-blog-list-card:last-child { border-bottom: 2px solid rgba(5, 5, 5, .2); }
.learn-blog-list-card:hover, .learn-blog-list-card:focus-visible { background: transparent; outline: 0; transform: none; }
.learn-blog-list-card-copy { display: grid; min-width: 0; gap: 9px; }
.learn-blog-list-card-date { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.learn-blog-list-card-copy strong { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1; letter-spacing: -.035em; transition: transform .16s ease; }
.learn-blog-list-card:hover .learn-blog-list-card-copy strong, .learn-blog-list-card:focus-visible .learn-blog-list-card-copy strong { transform: translateY(-2px); }
.learn-blog-list-card-copy span { max-width: 62ch; color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.4; }
.learn-blog-list-card > .material-icon-chevron-forward { width: 22px; height: 22px; flex: 0 0 auto; transition: transform .16s ease; }
.learn-blog-list-card:hover > .material-icon-chevron-forward, .learn-blog-list-card:focus-visible > .material-icon-chevron-forward { transform: translateX(3px); }
.learn-blog-preview-card { min-height: 112px; }
.learn-blog-preview-card:hover, .learn-blog-preview-card:focus-visible { background: transparent; transform: none; }
.learn-blog-preview-card .learn-blog-list-card-copy strong { transition: transform .16s ease; }
.learn-blog-preview-card:hover .learn-blog-list-card-copy strong, .learn-blog-preview-card:focus-visible .learn-blog-list-card-copy strong { transform: translateY(-2px); }
.learn-blog-post-page { --learn-blog-writing-width: min(700px, 100%); position: relative; display: grid; width: 100%; gap: 30px; }
.learn-blog-post-page > .learn-library-back { width: max-content; margin-inline-start: max(0px, calc((100% - var(--learn-blog-writing-width)) / 2)); margin-inline-end: 0; text-align: left; }
.learn-blog-post-nav { position: absolute; z-index: 1; inset: clamp(126px, 15vw, 190px) 0 auto; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.learn-blog-post-nav-button { display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); transition: transform .16s ease, background-color .16s ease; pointer-events: auto; cursor: pointer; }
.learn-blog-post-nav-button:hover, .learn-blog-post-nav-button:focus-visible { background: var(--yellow); outline: 0; transform: translateY(-2px); }
.learn-blog-post-nav-button:disabled { opacity: .32; pointer-events: none; }
.learn-blog-post-nav-button .material-icon { width: 36px; height: 36px; }
.learn-blog-post { display: grid; width: var(--learn-blog-writing-width); gap: 26px; margin-inline: auto; }
.learn-blog-post-heading { display: grid; gap: 10px; }
.learn-blog-post-meta { margin: 0; color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.learn-blog-post-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.04em; }
.learn-blog-post-deck { max-width: 620px; margin: 0; color: var(--muted); font-size: 1rem; font-weight: 750; line-height: 1.4; }
.learn-blog-post blockquote { margin: 0; padding: 20px 24px; border-left: 5px solid var(--ink); border-radius: 0 12px 12px 0; background: var(--tool-reference); font-size: clamp(1.15rem, 2.5vw, 1.8rem); font-weight: 850; line-height: 1.08; letter-spacing: -.025em; }
.learn-blog-post-body { display: grid; gap: 14px; max-width: none; font-size: clamp(1rem, 1.25vw, 1.1rem); font-weight: 400; line-height: 1.65; }
.learn-blog-post-body p { margin: 0; }
.learn-blog-post-body ol { display: grid; gap: 12px; margin: 0; padding-left: 24px; }
.learn-blog-post-body li { padding-left: 4px; }
.learn-blog-post-body li strong { font-weight: 900; }
.learn-blog-post-cta { display: grid; gap: 12px; margin-top: 12px; padding-top: 22px; border-top: 2px solid rgba(5, 5, 5, .2); }
.learn-blog-post-cta h2 { margin: 0; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1; letter-spacing: -.035em; }
.learn-blog-post-cta-description { max-width: 58ch; margin: 0; color: var(--muted); font-size: .82rem; font-weight: 650; line-height: 1.48; }
.learn-blog-post-cta > button { display: inline-flex; width: max-content; min-height: 38px; align-items: center; gap: 6px; margin-top: 2px; padding: 0 11px; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); color: var(--ink); font: 900 .64rem/1 var(--writing-font-family); }
.learn-blog-post-cta > button:hover, .learn-blog-post-cta > button:focus-visible { background: var(--ink); color: white; outline: 0; transform: translateY(-2px); }
.learn-blog-post-cta-button-sun { display: block; width: 21px; height: 21px; flex: 0 0 auto; }
.learn-blog-post-cta > button .material-icon-chevron-forward { width: 16px; height: 16px; transition: transform .16s ease; }
.learn-blog-post-cta > button:hover .material-icon-chevron-forward, .learn-blog-post-cta > button:focus-visible .material-icon-chevron-forward { transform: translateX(2px); }

@media (max-width: 760px) {
  .learn-blog-list-card { gap: 8px 16px; padding: 18px 4px; }
  .learn-blog-post-page { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .learn-blog-post-page > .learn-library-back { grid-column: 1; grid-row: 1; align-self: center; }
  .learn-blog-post-nav { position: static; grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 0; }
  .learn-blog-post { grid-column: 1 / -1; grid-row: 2; }
}

.learn-home-course-grid { grid-template-columns: 1fr; }
.learn-home-course-card { width: 100%; }
.learn-placeholder {
  display: grid;
  max-width: 760px;
  min-height: 180px;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border: var(--line) dashed var(--ink);
  border-radius: 15px;
  background: rgba(255, 253, 247, .45);
}
.learn-category-button { width: 100%; border-style: solid; background: var(--tool-writing); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.learn-category-button:hover { border-style: solid; background: var(--tool-writing); transform: translateY(-2px); }
.learn-tutorials-page { width: 100%; }
.learn-tutorial-group-heading { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1; letter-spacing: -.035em; }
.learn-blog-page { width: 100%; }
.learn-courses-page { width: 100%; }
.course-library { display: grid; align-content: start; gap: 30px; width: min(1080px, 100%); }
.course-library h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
.course-library-subtitle { max-width: 620px; margin: -18px 0 0; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.4; }
.course-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.course-library-card { display: grid; min-height: 250px; align-content: end; padding: 24px; border: var(--line) solid var(--ink); border-radius: 16px; background: var(--tool-writing); color: var(--ink); text-align: left; box-shadow: 5px 5px 0 rgba(5,5,5,.15); }
button.course-library-card { cursor: pointer; }
button.course-library-card:hover, button.course-library-card:focus-visible { background: var(--yellow); outline: 0; transform: translateY(-2px); box-shadow: 7px 7px 0 rgba(5,5,5,.18); }
.course-library-card strong { font-family: var(--heading-font-family); font-size: clamp(1.75rem, 3vw, 2.7rem); font-weight: 400; line-height: .94; letter-spacing: -.04em; }
.course-library-card small { margin-top: 12px; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.course-library-featured { grid-column: 1 / -1; min-height: 300px; grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) minmax(230px, .58fr); align-items: center; align-content: stretch; gap: clamp(16px, 2.4vw, 26px); padding: clamp(22px, 3.2vw, 34px); }
.course-library-featured .course-space-guy-card { width: 84px; height: 84px; margin: 0; justify-self: center; }
.course-library-card-copy { display: grid; min-width: 0; align-content: center; gap: 10px; }
.course-library-card-copy small { margin: 0; }
.course-library-card-copy strong { font-size: clamp(2rem, 4vw, 3.6rem); }
.course-library-card-description { max-width: 65ch; font-size: .9rem; font-weight: 700; line-height: 1.45; }
.course-library-card-action { display: inline-flex; width: max-content; align-items: center; gap: 6px; margin-top: 4px; font-size: .65rem; font-weight: 900; }
.course-library-card-action .material-icon-chevron-forward { width: 18px; height: 18px; transition: transform .16s ease; }
.course-library-featured:hover .course-library-card-action .material-icon-chevron-forward, .course-library-featured:focus-visible .course-library-card-action .material-icon-chevron-forward { transform: translateX(3px); }
.course-library-card-info { display: grid; min-width: 0; align-content: center; padding-left: clamp(16px, 2.2vw, 24px); border-left: 2px solid rgba(5, 5, 5, .22); }
.course-library-card-info > small { padding-bottom: 8px; color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.course-library-card-stat { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(5, 5, 5, .2); }
.course-library-card-stat strong { font-family: var(--heading-font-family); font-size: .92rem; line-height: 1; letter-spacing: -.02em; text-align: right; }
.course-library-card-stat > span { min-width: 0; color: var(--muted); font-size: .72rem; font-weight: 750; line-height: 1.3; }
.course-space-guy { display: block; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.course-space-guy-face, .course-space-guy-rings { transform-box: fill-box; transform-origin: center; transition: transform .34s cubic-bezier(.22,.72,.25,1); }
.course-space-guy-face { transform: rotate(0deg); }
.course-space-guy-rings { transform: rotate(0deg); }
:is(.course-space-guy:hover, button:hover .course-space-guy, button:focus-visible .course-space-guy) .course-space-guy-face { transform: rotate(5deg); }
:is(.course-space-guy:hover, button:hover .course-space-guy, button:focus-visible .course-space-guy) .course-space-guy-rings { transform: rotate(-6deg); }
.course-space-guy-card { width: 58px; height: 58px; margin-bottom: auto; }
.course-library-card-empty { border-style: dashed; background: transparent; box-shadow: none; }
.learn-view:has(.field-guide-course-page:not([hidden])) { height: calc(100vh - 68px); min-height: 0; padding: 0; overflow: hidden; }
main:has(.field-guide-course-page:not([hidden])) { height: calc(100vh - 68px); min-height: 0; padding: 0; overflow: hidden; background: var(--ink); }
.field-guide-course-page { width: 100%; height: calc(100vh - 68px); min-height: 0; }
.course-workspace { display: grid; height: 100%; min-height: 0; grid-template-columns: minmax(320px, 350px) minmax(0, 1fr); overflow: hidden; background: var(--cream); transition: none; }
.course-sidebar { min-width: 0; min-height: 0; padding: 0; overflow: hidden; background: var(--ink); color: white; }
.course-sidebar-inner { display: grid; width: 100%; height: 100%; min-width: 320px; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; gap: 46px; padding: clamp(28px, 4vw, 54px) clamp(20px, 3vw, 38px); opacity: 1; transform: translateX(0); transition: opacity .14s ease, transform .18s ease; }
.course-sidebar-status { position: absolute; z-index: 3; top: 14px; left: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; width: min(560px, calc(100% - 28px)); min-height: 42px; padding: 6px 13px; border: 1px solid rgba(5,5,5,.16); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(5,5,5,.12); color: var(--ink); }
.course-sidebar-status-label { color: rgba(5,5,5,.48); font-size: .57rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.course-sidebar-status-current { min-width: 0; overflow: hidden; font-size: .75rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.course-workspace.is-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.course-workspace.is-sidebar-collapsed .course-sidebar-inner { opacity: 0; transform: translateX(-18px); pointer-events: none; }
.course-sidebar > nav[aria-label="Contents"], .course-sidebar-inner > nav[aria-label="Contents"] { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
.course-sidebar-home { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.course-sidebar-home-title { display: flex; align-items: center; gap: 10px; }
.course-sidebar-home-title > span { display: block; font-family: var(--heading-font-family); font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 400; line-height: .94; letter-spacing: -.04em; }
.course-space-guy-menu { width: 36px; height: 36px; flex: 0 0 auto; }
.course-sidebar-home small { display: block; margin-top: 12px; color: rgba(255,255,255,.58); font-size: .58rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.course-sidebar-home:hover, .course-sidebar-home:focus-visible { color: var(--yellow); outline: 0; }
.course-sidebar-navigation, .course-sidebar-navigation ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.course-sidebar-navigation { overflow-anchor: none; }
.course-sidebar-navigation { gap: 9px; }
.course-sidebar-navigation button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.course-sidebar-chapter { padding: 4px 0; color: rgba(255,255,255,.56); font-size: .78rem; font-weight: 850; line-height: 1.2; }
.course-sidebar-chapter::before { display: none; }
.course-sidebar-chapter > div { display: grid; min-height: 42px; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 6px; padding: 0 5px 0 9px; border-radius: 8px; }
.course-sidebar-chapter-link { display: grid !important; min-height: 42px; grid-template-columns: 6px 2.1em minmax(0, 1fr); align-items: center; gap: 9px; font-size: inherit; font-weight: inherit; }
.course-sidebar-chapter-current-mark { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0; }
.course-sidebar-chapter-current-mark.is-active { opacity: 1; }
.course-sidebar-chapter-number { color: var(--yellow); font-family: var(--heading-font-family); font-size: .8rem; font-weight: 400; letter-spacing: .08em; line-height: 1; }
.course-sidebar-chapter > div > i { align-self: center; padding: 4px 5px; border-radius: 999px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.58); font-size: .56rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.course-sidebar-chapter-toggle { display: grid !important; width: 30px !important; height: 30px; place-items: center; border-radius: 6px !important; color: rgba(255,255,255,.68); font-size: 1.05rem !important; line-height: 1; }
.course-sidebar-chapter-toggle:hover, .course-sidebar-chapter-toggle:focus-visible { background: rgba(255,255,255,.12); }
.course-sidebar-chapter-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .16s ease; }
.course-sidebar-chapter:not(.is-expanded) .course-sidebar-chapter-toggle svg { transform: rotate(-90deg); }
.course-sidebar-chapter > ol { display: grid; gap: 1px; max-height: 0; margin: 5px 0; padding: 0 0 0 16px; border-left: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: max-height .24s cubic-bezier(.22,.72,.25,1), padding .2s ease, opacity .16s ease, transform .24s cubic-bezier(.22,.72,.25,1); }
.course-sidebar-chapter.is-expanded > ol { max-height: 1200px; padding-top: 6px; padding-bottom: 6px; opacity: 1; transform: translateY(0); }
.course-sidebar-navigation.is-chapter-switching .course-sidebar-chapter.is-expanded > ol { animation: course-sidebar-chapter-switch .28s cubic-bezier(.22,.72,.25,1) both; }
@keyframes course-sidebar-chapter-switch {
  from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-6px); }
  to { max-height: 1200px; padding-top: 6px; padding-bottom: 6px; opacity: 1; transform: translateY(0); }
}
.course-sidebar-secondary { padding: 0; color: rgba(255,255,255,.5); font-size: .66rem; font-weight: 750; line-height: 1.25; }
.course-sidebar-secondary button { position: relative; min-height: 29px; padding: 6px 8px 6px 21px !important; border-radius: 5px !important; }
.course-sidebar-secondary button::before { position: absolute; top: 50%; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; opacity: 0; transform: translateY(-50%); }
.course-sidebar-secondary.is-current button::before { opacity: 1; }
.course-sidebar-secondary.is-complete button { color: rgba(255,255,255,.72); }
.course-sidebar-secondary.is-complete button::after { position: absolute; right: 8px; color: var(--yellow); content: "✓"; font-size: .72rem; font-weight: 900; }
.course-sidebar-secondary.is-recently-complete button::after { animation: course-complete-pop .4s ease both; }
.course-sidebar-chapter.is-current { overflow: hidden; padding: 0; border-radius: 14px; background: rgba(255,255,255,.14); color: white; }
.course-sidebar-chapter.is-current { margin-bottom: 8px; }
.course-sidebar-chapter.is-current > div { border-radius: 0; background: var(--yellow); color: var(--ink); }
.course-sidebar-chapter.is-current > div > i { background: var(--ink); color: white; }
.course-sidebar-chapter.is-current .course-sidebar-chapter-number { color: var(--ink); }
.course-sidebar-chapter.is-current > ol { margin: 0; padding-right: 10px; border-radius: 0; background: rgba(255,255,255,.06); }
.course-sidebar-chapter.is-current .course-sidebar-secondary { color: rgba(255,255,255,.76); }
.course-sidebar-chapter.is-current .course-sidebar-secondary.is-current button { background: rgba(255,255,255,.14); color: white; font-weight: 900; }
.course-sidebar-chapter.is-complete > div > i { background: var(--yellow); color: var(--ink); }
.course-sidebar-chapter.is-recently-complete > div > i { animation: course-complete-pulse .6s ease both; }
@keyframes course-complete-pop {
  0% { opacity: 0; transform: translateY(-50%) scale(.45); }
  65% { opacity: 1; transform: translateY(-50%) scale(1.28); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes course-complete-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,206,34,0); }
  45% { box-shadow: 0 0 0 5px rgba(245,206,34,.3); }
}
@keyframes course-pause-check {
  0% { opacity: 0; transform: rotate(-45deg) translate(1px, -1px) scale(.6); }
  100% { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
}
.course-sidebar button:hover, .course-sidebar button:focus-visible { color: var(--yellow); outline: 0; cursor: pointer; }
.course-sidebar-chapter.is-current > div .course-sidebar-chapter-link:hover, .course-sidebar-chapter.is-current > div .course-sidebar-chapter-link:focus-visible,
.course-sidebar-chapter.is-current > div .course-sidebar-chapter-toggle:hover, .course-sidebar-chapter.is-current > div .course-sidebar-chapter-toggle:focus-visible { color: var(--ink); }
.course-sidebar-chapter.is-current .course-sidebar-secondary button:hover, .course-sidebar-chapter.is-current .course-sidebar-secondary button:focus-visible { background: rgba(255,255,255,.14); color: white; }
.course-sidebar-secondary.is-current button:hover, .course-sidebar-secondary.is-current button:focus-visible { background: rgba(255,255,255,.14); color: white; }
.course-sidebar-resources { display: grid; gap: 10px; margin-top: 0; padding-top: 18px; border-top: 2px solid rgba(255,255,255,.18); }
.course-sidebar-resources h2 { margin: 0; color: rgba(255,255,255,.58); font-family: var(--writing-font-family); font-size: .6rem; font-weight: 900; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.course-sidebar-resource-list { display: grid; gap: 3px; }
.course-sidebar-resources button { min-height: 32px; padding: 6px 8px; border-radius: 6px !important; color: rgba(255,255,255,.62); font-size: .66rem; font-weight: 750; line-height: 1.25; }
.course-sidebar-resources button:hover, .course-sidebar-resources button:focus-visible { background: rgba(255,255,255,.1); color: white; outline: 0; }
.course-sidebar-resources button.is-current { background: var(--yellow); color: var(--ink); font-weight: 900; }
.course-sidebar-resources button.is-current:hover, .course-sidebar-resources button.is-current:focus-visible { background: var(--yellow); color: var(--ink); }
.course-sidebar-reference-button { display: inline-flex !important; align-items: center; gap: 7px; width: max-content !important; min-height: 30px !important; padding: 4px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(255,255,255,.68) !important; font-size: .68rem !important; font-weight: 850 !important; letter-spacing: .01em; }
.course-sidebar-reference-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .16s ease; }
.course-sidebar-reference-button:hover, .course-sidebar-reference-button:focus-visible { background: transparent !important; color: var(--yellow) !important; }
.course-sidebar-reference-button:hover svg, .course-sidebar-reference-button:focus-visible svg { transform: translateX(3px); }
.course-sidebar-reference-button.is-current { background: transparent !important; color: var(--yellow) !important; }
.course-sidebar-reference-button.is-current:hover, .course-sidebar-reference-button.is-current:focus-visible { background: transparent !important; color: var(--yellow) !important; }
.course-content { min-width: 0; min-height: 0; padding: clamp(34px, 8vw, 120px); overflow-y: auto; background: var(--cream); transition: color .32s ease; }
.course-content.is-chapter-home { color: var(--course-chapter-ink); background: var(--course-chapter-background); }
.course-content.is-closing-page { background: var(--cream); }
.course-content.is-course-home { background: var(--green); color: white; }
.course-content.is-reference-page { background: var(--cream); }
.course-content.is-chapter-home { --course-chapter-background: var(--green); --course-chapter-ink: white; }
.course-content > article { display: grid; width: min(800px, 100%); min-height: 100%; align-content: start; }
.course-page { display: grid; align-content: start; gap: 22px; padding-bottom: 32px; }
.course-content > article { transition: opacity .22s ease, transform .22s ease; }
.course-content.is-page-transitioning > article { opacity: .08; transform: translateY(10px); }
.course-page.is-chapter-page { min-height: 100%; grid-template-rows: 1fr auto; align-content: stretch; gap: 38px; padding-bottom: 0; }
.course-page.is-closing-page { min-height: 100%; align-content: center; gap: 28px; padding-bottom: 0; }
.course-page.is-closing-page h2 { max-width: 10ch; font-size: clamp(3rem, 7vw, 6.5rem); }
.course-page.is-closing-page .course-page-blocks { max-width: 58ch; }
.course-closing-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin-top: 10px; }
.course-closing-cta { display: grid; align-content: space-between; gap: 24px; min-width: 0; min-height: 190px; padding: 20px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 rgba(5,5,5,.14); }
.course-closing-cta-kicker { display: block; margin-bottom: 10px; color: var(--green); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.course-closing-cta h3 { margin: 0 0 8px; font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.course-closing-cta p { max-width: 30ch; margin: 0; font-size: .82rem; line-height: 1.45; }
.course-closing-cta button { display: inline-flex; width: max-content; min-height: 42px; align-items: center; gap: 10px; padding: 0 13px; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); color: var(--ink); font: 900 .67rem/1 var(--writing-font-family); cursor: pointer; }
.course-closing-cta button:hover, .course-closing-cta button:focus-visible { background: var(--ink); color: white; outline: 0; }
.course-cta-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.course-closing-cta h3 { display: flex; align-items: center; gap: 9px; }
.course-cta-mushroom { display: block; width: 31px; height: 31px; flex: 0 0 auto; }
.course-cta-sun { display: block; width: 31px; height: 31px; flex: 0 0 auto; }
.course-cta-mushroom use { stroke: none; }
.course-closing-cta-write { background: var(--green); color: white; }
.course-closing-cta-write .course-closing-cta-kicker { color: var(--yellow); }
.course-closing-cta-write button { background: white; }
.course-closing-cta small { min-height: 1em; color: var(--muted); font-size: .6rem; font-weight: 750; }
.course-chapter-pause { display: grid; align-content: center; gap: 22px; max-width: 620px; min-height: 100%; padding-block: clamp(32px, 8vw, 100px); }
.course-chapter-pause-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.course-chapter-pause-title { display: flex; align-items: center; }
.course-chapter-pause-title h2 { flex: 0 1 auto; }
.course-chapter-pause-check { display: inline-grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border: 1.5px solid currentColor; border-radius: 3px; color: var(--green); }
.course-chapter-pause-check i { display: block; width: 8px; height: 5px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; opacity: 0; transform: rotate(-45deg) translate(1px, -1px) scale(.6); animation: course-pause-check .55s .18s cubic-bezier(.22,.72,.25,1) forwards; }
.course-chapter-pause h2 { max-width: 9ch; margin: 0; font-size: clamp(3.4rem, 7vw, 6.5rem); font-weight: 400; line-height: .84; letter-spacing: -.055em; }
.course-chapter-pause p { max-width: 42ch; margin: 0; font-family: var(--writing-font-family); font-size: clamp(1.05rem, 1.75vw, 1.4rem); line-height: 1.4; }
.course-page.is-course-home { min-height: 100%; grid-template-rows: 1fr auto; align-content: stretch; gap: 38px; padding-bottom: 0; }
.course-home { display: grid; align-content: center; gap: clamp(22px, 4vw, 34px); max-width: 760px; padding-block: clamp(24px, 6vw, 80px); }
.course-home-title { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 30px); }
.course-space-guy-home { width: clamp(70px, 11vw, 132px); height: clamp(70px, 11vw, 132px); flex: 0 0 auto; }
.course-home h2 { max-width: 9ch; color: inherit; font-size: clamp(3.6rem, 8vw, 8rem); font-weight: 400; line-height: .82; letter-spacing: -.055em; }
.course-home-author { margin: -12px 0 0; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.course-home-subtitle { max-width: 42ch !important; color: inherit; font-family: var(--writing-font-family); font-size: clamp(1.05rem, 1.75vw, 1.45rem) !important; font-weight: 500 !important; letter-spacing: -.01em; line-height: 1.38 !important; }
.course-home-progress { display: grid; gap: 10px; max-width: 500px; }
.course-home-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.course-home-progress-heading strong { font-size: .65rem; font-weight: 900; letter-spacing: .04em; }
.course-home-progress-track { height: 12px; overflow: hidden; border: 2px solid currentColor; border-radius: 999px; }
.course-home-progress-track i { display: block; height: 100%; background: currentColor; }
.course-home-resume { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(500px, 100%); min-height: 48px; padding: 10px 14px; border: 2px solid currentColor; border-radius: 9px; background: transparent; color: inherit; font-size: .72rem; font-weight: 900; text-align: left; }
.course-home-resume svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.course-home-resume:hover, .course-home-resume:focus-visible { background: var(--yellow); color: var(--ink); outline: 0; }
.course-content.is-course-home .course-page-navigation { border-color: rgba(255,255,255,.65); }
.course-content.is-course-home .course-page-navigation button { border-color: white; background: transparent; color: white; }
.course-content.is-course-home .course-page-navigation button:last-child { border-color: var(--ink); background: var(--yellow); color: var(--ink); }
.course-content.is-course-home .course-page-navigation button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.course-page.is-reference-page { min-height: 100%; align-content: start; }
.course-reference-index { display: grid; align-content: start; gap: 26px; width: min(680px, 100%); padding-block: clamp(16px, 4vw, 42px); }
.course-reference-index h2 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 5.4rem); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.course-reference-index-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: reference-index; }
.course-reference-index-list li { counter-increment: reference-index; }
.course-reference-index-list button { display: grid; min-height: 58px; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 800; text-align: left; }
.course-reference-index-list button::before { color: var(--green); content: counter(reference-index, decimal-leading-zero); font-family: var(--heading-font-family); font-size: .82rem; font-weight: 400; letter-spacing: .06em; }
.course-reference-index-list button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.course-reference-index-list button:hover, .course-reference-index-list button:focus-visible { background: var(--green); color: white; outline: 0; }
.course-reference-index-list button:hover::before, .course-reference-index-list button:focus-visible::before { color: var(--yellow); }
.course-chapter-home { display: grid; align-content: center; gap: clamp(20px, 3vw, 34px); padding-block: clamp(24px, 5vw, 70px); }
.course-chapter-number { width: max-content; padding: 6px 9px; border: 2px solid currentColor; border-radius: 999px; font-size: .62rem; font-weight: 900; letter-spacing: .09em; line-height: 1; text-transform: uppercase; }
.course-chapter-home-title { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 30px); }
.course-space-guy-chapter { width: clamp(62px, 10vw, 116px); height: clamp(62px, 10vw, 116px); flex: 0 0 auto; }
.course-page.is-chapter-page h2 { max-width: 9ch; color: inherit; font-size: clamp(3.6rem, 8vw, 8rem); line-height: .82; }
.course-chapter-subtitle { max-width: 42ch; color: inherit; font-family: var(--writing-font-family) !important; font-size: clamp(1.05rem, 1.75vw, 1.45rem) !important; font-weight: 500 !important; letter-spacing: -.01em; line-height: 1.38 !important; }
.course-content.is-chapter-home .course-page-navigation { border-color: currentColor; }
.course-content.is-chapter-home .course-page-navigation button { border-color: currentColor; background: transparent; color: inherit; }
.course-content.is-chapter-home .course-page-navigation button:last-child { background: var(--ink); color: white; }
.course-content.is-chapter-home .course-page-navigation button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.course-page-chapter { color: var(--muted); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.course-content h2 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 5.4rem); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.course-chapter-intro, .course-page-blocks, .course-section { display: grid; gap: 20px; }
.course-section { padding-top: 28px; border-top: 2px solid rgba(5,5,5,.14); scroll-margin-top: 28px; }
.course-section h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.course-content p { max-width: 64ch; margin: 0; font-size: clamp(.96rem, 1.25vw, 1.12rem); font-weight: 500; line-height: 1.62; }
.course-content :is(p, li) strong { font-weight: 850; }
.course-content :is(p, li) em { font-style: italic; }
.course-list { display: grid; max-width: 64ch; gap: 10px; margin: 0; padding-left: 1.45em; font-size: clamp(.96rem, 1.25vw, 1.12rem); font-weight: 500; line-height: 1.62; }
.course-list li { padding-left: .25em; }
.course-list-bullet li::marker { color: var(--yellow); font-size: .85em; }
.course-list-ordered li::marker { font-weight: 850; }
.course-table-placeholder { display: grid; min-height: 180px; grid-template-rows: repeat(3, 1fr); margin: 8px 0; overflow: hidden; border: 2px dashed rgba(5,5,5,.35); border-radius: 10px; background: rgba(204,220,242,.28); }
.course-table-placeholder i { display: block; border-bottom: 2px dashed rgba(5,5,5,.22); }
.course-table-placeholder i:last-child { border-bottom: 0; }
.course-section:has(.course-glossary) { gap: 20px; padding: clamp(20px, 3vw, 30px); border: 3px solid var(--ink); border-radius: 14px; background: rgba(255,253,247,.5); }
.course-section:has(.course-glossary) > h3 { padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.course-glossary { display: grid; gap: clamp(26px, 4vw, 46px); margin-top: 4px; }
.course-glossary-controls { display: grid; gap: 10px; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; background: rgba(255,255,255,.38); }
.course-glossary-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; }
.course-glossary-search { display: flex; min-height: 46px; align-items: center; gap: 10px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.course-glossary-search:focus-within { outline: 3px solid var(--yellow); outline-offset: 2px; }
.course-glossary-search svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.course-glossary-search .material-symbols-outlined { font-size: 21px; line-height: 1; }
.course-glossary-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .85rem; font-weight: 700; }
.course-glossary-search-status { min-width: 58px; color: var(--muted); font-size: .58rem; font-weight: 850; text-align: right; }
.course-glossary-search-nav { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); font-size: .85rem; font-weight: 900; line-height: 1; }
.course-glossary-search-nav:hover:not(:disabled), .course-glossary-search-nav:focus-visible { background: var(--yellow); }
.course-glossary-search-nav:disabled { cursor: default; opacity: .35; }
.course-glossary-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.course-glossary-categories button { min-height: 32px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; font-size: .6rem; font-weight: 900; }
.course-glossary-categories button:hover, .course-glossary-categories button.is-selected { background: var(--ink); color: white; }
.course-glossary-group { display: grid; gap: 13px; }
.course-glossary-group > h3 { width: max-content; margin: 0; padding-bottom: 5px; border-bottom: 3px solid var(--yellow); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; line-height: 1; }
.course-glossary-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.course-glossary-card { display: grid; min-height: 0; grid-template-columns: minmax(130px, .72fr) minmax(0, 1.1fr) minmax(0, 1.28fr); align-items: start; gap: clamp(12px, 2vw, 24px); padding: 17px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 3px 3px 0 rgba(5,5,5,.12); }
.course-glossary-card h4 { margin: 0; font-size: 1.14rem; font-weight: 400; line-height: 1; letter-spacing: -.025em; }
.course-glossary-card p { max-width: none; font-size: .75rem; font-weight: 700; line-height: 1.48; }
.course-glossary-card p + p { padding-left: clamp(12px, 2vw, 24px); border-left: 1px solid rgba(5,5,5,.22); color: var(--muted); }
.course-glossary-card.is-search-hit { box-shadow: 0 0 0 3px rgba(245,206,34,.62), 3px 3px 0 rgba(5,5,5,.12); }
.course-glossary-card.is-search-current { box-shadow: 0 0 0 4px var(--yellow), 4px 4px 0 rgba(5,5,5,.16); }
.course-reflection { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-reflection-row { display: grid; grid-template-columns: minmax(170px, .72fr) minmax(0, 1.28fr); min-height: 150px; border-bottom: 2px solid var(--ink); }
.course-reflection-row:last-child { border-bottom: 0; }
.course-reflection-row h3 { display: grid; align-content: center; gap: 12px; margin: 0; padding: 18px; border-right: 2px solid var(--ink); background: var(--green); color: white; font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 400; line-height: 1; }
.course-reflection-row h3 > span { display: block; }
.course-reflection-row h3 p { max-width: none; font-family: var(--writing-font-family); font-size: .76rem; font-weight: 700; line-height: 1.48; }
.course-reflection-row textarea { width: 100%; min-height: 146px; resize: vertical; padding: 18px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 .88rem/1.55 var(--writing-font-family); }
.course-reflection-row textarea:focus { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-registration-steps { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-registration-step { display: grid; grid-template-columns: minmax(155px, .58fr) minmax(0, 1.42fr); min-width: 0; border-bottom: 2px solid var(--ink); }
.course-registration-step:last-child { border-bottom: 0; }
.course-registration-step > h3 { display: grid; align-content: center; gap: 10px; margin: 0; padding: 18px; border-right: 2px solid var(--ink); background: var(--green); color: white; font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 400; line-height: 1; }
.course-registration-step > h3 p { max-width: none; margin: 0; font-family: var(--writing-font-family); font-size: .72rem; font-weight: 650; line-height: 1.42; }
.course-registration-step > div { display: grid; align-content: center; gap: 12px; min-width: 0; padding: 18px; }
.course-registration-step > div p { max-width: none; font-size: .88rem; line-height: 1.52; }
.course-royalties-list { display: grid; max-width: 72ch; gap: 10px; margin: 0; padding: 0; list-style: none !important; }
.course-royalties-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); font-size: .92rem; font-weight: 500; line-height: 1.55; }
.course-royalties-list li::marker { content: ""; }
.course-royalties-list li::before { width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--green); content: ""; }
.course-royalties-list strong { font-weight: 900; }
.course-stage-list { display: grid; width: 100%; min-width: 0; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: course-stage; }
.course-stage-list li { display: grid; width: 100%; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); font-size: .9rem; font-weight: 600; line-height: 1.5; }
.course-stage-list li > span { min-width: 0; }
.course-stage-list li::before { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--green); color: white; content: counter(course-stage); counter-increment: course-stage; font-size: .68rem; font-weight: 900; line-height: 1; }
.course-strategy-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.course-strategy-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); font-size: 1rem; font-weight: 500; line-height: 1.62; }
.course-strategy-list li > span { min-width: 0; }
.course-strategy-list li::before { width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--green); content: ""; }
.course-song-type-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.course-song-type-card { display: grid; grid-template-columns: minmax(200px, .62fr) minmax(0, 1.38fr); align-content: stretch; overflow: hidden; min-width: 0; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); }
.course-song-type-card header { display: grid; gap: 12px; align-content: start; padding: 16px; border-right: 3px solid var(--ink); background: var(--green); color: white; }
.course-song-type-card header > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.course-song-type-card header > div > span { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: .75rem; font-weight: 900; }
.course-song-type-card h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 400; line-height: .95; }
.course-song-type-card header p { max-width: none; margin: 0; font-size: .82rem; font-weight: 500; line-height: 1.42; }
.course-song-type-body { display: grid; align-content: start; gap: 18px; padding: 18px; }
.course-song-type-description, .course-song-type-response, .course-song-type-mistake { font-size: 1rem; font-weight: 500; line-height: 1.62; }
.course-song-type-description p, .course-song-type-mistake p { max-width: none; font-size: inherit; font-weight: inherit; line-height: inherit; }
.course-song-type-response { display: grid; gap: 8px; }
.course-song-type-label { color: var(--green); font-weight: 900; }
.course-song-type-response ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.course-song-type-response li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; min-width: 0; }
.course-song-type-response li::before { width: 8px; height: 8px; margin-top: .58em; border-radius: 50%; background: var(--green); content: ""; }
.course-song-type-mistake { padding-top: 14px; border-top: 2px solid var(--ink); }
.course-song-type-mistake p { font-size: inherit !important; }
.course-direction-chart { display: grid; gap: 18px; }
.course-direction-chart > p { max-width: 64ch; }
.course-direction-grid { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5,5,5,.1); }
.course-direction-head, .course-direction-row { display: grid; grid-template-columns: minmax(96px, 1.05fr) repeat(5, minmax(0, 1fr)) minmax(104px, 1.05fr); }
.course-direction-cell { display: flex; min-height: 70px; align-items: stretch; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: rgba(255,255,255,.38); transition: background-color .16s ease, color .16s ease; }
.course-direction-head .course-direction-cell:last-child, .course-direction-row .course-direction-cell:last-child { border-right: 0; }
.course-direction-row:last-child .course-direction-cell { border-bottom: 0; }
.course-direction-cell.is-header { min-height: 50px; align-items: center; justify-content: center; padding: 10px 8px; background: var(--green); color: white; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.course-direction-cell.is-row-label { align-items: center; padding: 14px; background: var(--green); color: white; font-size: .78rem; font-weight: 900; letter-spacing: .04em; }
.course-direction-head .course-direction-cell:first-child { position: sticky; z-index: 4; left: 0; }
.course-direction-cell.is-row-label { position: sticky; z-index: 3; left: 0; }
.course-direction-cell.is-best { background: var(--ink); color: white; box-shadow: none; }
.course-direction-cell.is-best input { color: white; }
.course-direction-cell.is-selected input { color: white; }
.course-direction-chart[data-course-direction-mode="write"] .course-direction-cell.is-selected { background: transparent; color: var(--ink); box-shadow: none; }
.course-direction-chart[data-course-direction-mode="write"] .course-direction-cell.is-selected input { color: var(--ink); }
.course-direction-cell.is-selected { background: var(--green); color: white; }
.course-direction-chart[data-course-direction-mode="select"] .course-direction-cell[data-course-direction-column]:not(.is-best) { cursor: pointer; }
.course-direction-chart[data-course-direction-mode="select"] .course-direction-cell[data-course-direction-column]:not(.is-best):hover { background: rgba(245,206,34,.42); color: var(--ink); }
.course-direction-chart[data-course-direction-mode="select"] .course-direction-cell[data-course-direction-column]:not(.is-best):hover input { color: var(--ink) !important; }
.course-direction-mode-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(260px, 100%); margin-inline: auto; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; }
.course-direction-mode-bar button { min-height: 38px; border: 0; border-right: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 900 .68rem/1 var(--writing-font-family); cursor: pointer; }
.course-direction-mode-bar button:last-child { border-right: 0; }
.course-direction-mode-bar button:hover, .course-direction-mode-bar button:focus-visible { background: var(--yellow); outline: 0; }
.course-direction-mode-bar button.is-selected { background: var(--green); color: white; }
.course-direction-cell input { width: 100%; min-width: 0; padding: 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1rem/1.35 var(--writing-font-family); text-align: center; }
.course-direction-cell.is-best { border-bottom-color: white; }
.course-direction-cell input:focus { background: rgba(245,206,34,.3); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-energy-setup, .course-energy-sample { display: grid; gap: 14px; }
.course-energy-setup h4, .course-energy-sample h4 { margin: 0; font-size: 1.05rem; font-weight: 400; line-height: 1.1; }
.course-energy-map { display: grid; min-width: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-energy-scroll { min-width: 0; overflow-x: auto; padding: 14px 14px 12px; }
.course-energy-grid, .course-energy-climax-row { display: grid; width: 100%; grid-template-columns: repeat(var(--course-energy-columns), minmax(0, 1fr)); min-width: var(--course-energy-min-width, 0px); }
.course-energy-grid { grid-template-rows: repeat(10, 30px) auto; overflow: hidden; border: 2px solid var(--ink); border-radius: 8px; background: var(--cream); }
.course-energy-cell { min-width: 0; padding: 0; border: 0; border-right: 1px solid rgba(5,5,5,.24); border-bottom: 1px solid rgba(5,5,5,.24); background: transparent; }
.course-energy-cell.is-last-column { border-right: 0; }
button.course-energy-cell { cursor: pointer; }
button.course-energy-cell:hover, button.course-energy-cell:focus-visible { background: rgba(245,206,34,.45); outline: 0; }
.course-energy-cell.is-filled { background: var(--ink); }
.course-energy-cell.is-filled.is-climax { background: var(--coral); }
.course-energy-label { display: grid; min-width: 0; min-height: 48px; align-content: center; justify-items: center; gap: 3px; padding: 7px 5px; border-right: 1px solid rgba(5,5,5,.24); background: var(--paper); color: var(--ink); text-align: center; }
.course-energy-label:last-child { border-right: 0; }
.course-energy-label em { max-width: 100%; overflow: hidden; font-size: .68rem; font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.course-energy-label output { font-size: .58rem; font-weight: 900; }
.course-energy-climax-row { width: calc(100% - 4px); min-width: var(--course-energy-track-width, 0px); min-height: 24px; align-items: end; margin: 0 2px 5px; }
.course-energy-climax-row span { min-width: 0; color: var(--coral); font-size: .58rem; font-style: italic; font-weight: 900; text-align: center; }
.course-energy-empty { display: grid; min-height: 100px; place-items: center; padding: 18px; border: 2px dashed rgba(5,5,5,.35); color: var(--muted); font-size: .8rem; font-style: italic; }
.course-energy-map.is-sample .course-energy-cell.is-filled { background: var(--ink); }
.course-energy-map.is-sample .course-energy-cell.is-filled.is-climax { background: var(--coral); }
.course-energy-flow-review { display: grid; gap: 12px; }
.course-energy-flow-review > h4 { margin: 0; font-size: 1.05rem; font-weight: 400; line-height: 1.1; }
.course-energy-flow-reflection { width: 100%; }
.course-energy-flow-reflection .course-reflection-row { min-height: 104px; grid-template-columns: minmax(145px, .72fr) minmax(0, 1.28fr); }
.course-energy-flow-reflection .course-reflection-row h3 { font-family: var(--writing-font-family); font-size: .84rem; font-weight: 850; line-height: 1.3; }
.course-energy-flow-reflection .course-reflection-row textarea { min-height: 100px; padding: 14px; font-size: .82rem; line-height: 1.45; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.course-character-tool { display: grid; gap: 24px; }
.course-character-list { display: grid; gap: 16px; }
.course-character-list > p { max-width: 64ch; }
.course-character-exercise-heading { display: grid; gap: 12px; padding-top: 8px; }
.course-character-exercise-heading h3 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; line-height: 1; }
.course-character-exercise-heading p { max-width: 64ch; margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.62; }
.course-character-reflection { display: grid; grid-template-columns: 1fr; gap: 14px; }
.course-character-card, .course-form-single, .course-form-three-column, .course-form-review { overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-character-card { display: grid; }
.course-character-card header { display: grid; gap: 10px; padding: 16px 18px; background: var(--ink); color: white; }
.course-character-card header h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 400; line-height: 1; }
.course-character-card header p { max-width: none; margin: 0; color: white; font-family: var(--writing-font-family); font-size: .78rem; font-style: italic; font-weight: 700; line-height: 1.45; }
.course-character-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course-character-entries label { position: relative; display: grid; min-height: 150px; border-right: 2px solid rgba(5,5,5,.45); border-bottom: 2px solid rgba(5,5,5,.45); }
.course-character-entries label:nth-child(2n) { border-right: 0; }
.course-character-entries label:nth-last-child(-n + 2) { border-bottom: 0; }
.course-character-entries label > span { position: absolute; top: 14px; left: 14px; font-size: 1.05rem; font-weight: 900; }
.course-character-entries textarea { width: 100%; min-height: 150px; resize: vertical; padding: 42px 14px 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1rem/1.45 var(--writing-font-family); }
.course-character-entries textarea:focus { background: rgba(245,206,34,.2); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-arrangement-builder { display: grid; gap: 14px; }
.course-arrangement-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
.course-arrangement-palette { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; min-width: 0; padding: 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); }
.course-arrangement-parts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; align-items: center; }
.course-arrangement-palette button { min-height: 32px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 7px; background: var(--cream); color: var(--ink); font: 900 .61rem/1 var(--writing-font-family); white-space: nowrap; cursor: pointer; }
.course-arrangement-palette button:hover, .course-arrangement-palette button:focus-visible { background: var(--yellow); outline: 0; }
.course-arrangement-history { display: flex; gap: 6px; align-self: center; padding-left: 10px; border-left: 2px solid var(--ink); }
.course-arrangement-history button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border-radius: 7px; background: var(--ink); color: white; }
.course-arrangement-history button[data-arrangement-reset] { width: 34px; padding: 0; }
.course-arrangement-history svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.course-arrangement-history .material-symbols-outlined { width: 18px; height: 18px; font-size: 18px; line-height: 1; }
.course-arrangement-history button:disabled { cursor: default; opacity: .3; }
.course-arrangement-palette form { display: flex; gap: 8px; width: min(300px, 100%); }
.course-arrangement-palette form input { min-height: 36px; min-width: 0; flex: 1; padding: 0 10px; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); font: 500 .8rem/1 var(--writing-font-family); }
.course-arrangement-palette form button { border-radius: 7px; background: var(--green); color: white; }
.course-arrangement-palette.is-remove-target { background: rgba(234, 93, 74, .18); box-shadow: inset 0 0 0 4px var(--coral); }
.course-arrangement-sequence { display: flex; flex-wrap: wrap; gap: 6px; min-height: 68px; align-content: flex-start; align-items: center; overflow: hidden; padding: 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); }
.course-arrangement-empty { width: 100%; margin: 0; color: var(--muted); font-size: .9rem; font-style: italic; text-align: center; }
.course-arrangement-tag { display: flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: 6px; padding: 7px 9px; border: 2px solid var(--ink); border-radius: 7px; background: var(--green); color: white; cursor: grab; user-select: none; }
.course-arrangement-tag:active { cursor: grabbing; }
.course-arrangement-tag.is-dragging { opacity: .4; }
.course-arrangement-tag.is-drop-target { outline: 4px solid var(--yellow); outline-offset: 3px; }
.course-arrangement-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 900; }
.course-arrangement-tag > div { display: none; gap: 3px; }
.course-arrangement-tag button { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; border: 1px solid white; border-radius: 50%; background: transparent; color: white; font: 900 .7rem/1 var(--writing-font-family); cursor: pointer; }
.course-arrangement-tag button:hover, .course-arrangement-tag button:focus-visible { background: white; color: var(--green); outline: 0; }
.course-form-single { display: grid; }
.course-form-single textarea { min-height: 150px; padding: 18px; border: 0; outline: 0; background: transparent; font: 500 1rem/1.5 var(--writing-font-family); }
.course-form-three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-form-three-column article { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 0; min-width: 0; min-height: 260px; padding: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.course-form-three-column article:last-child { border-right: 0; }
.course-form-three-column article:nth-last-child(-n + 3) { border-bottom: 0; }
.course-form-three-column h4 { margin: 0; padding: 16px 18px 8px; background: var(--green); color: white; font-size: 1.25rem; font-weight: 400; line-height: 1; }
.course-form-three-column p { max-width: none; margin: 0; padding: 0 18px 16px; background: var(--green); color: white; font-size: .78rem; font-style: italic; font-weight: 700; line-height: 1.45; }
.course-form-three-column textarea { min-height: 150px; resize: vertical; padding: 18px; border: 0; outline: 0; background: transparent; font: 500 1rem/1.45 var(--writing-font-family); }
.course-form-three-column textarea:focus, .course-form-single textarea:focus, .course-form-review textarea:focus, .course-form-reflection-row textarea:focus { background: rgba(245,206,34,.2); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-form-anchor-grid { grid-template-rows: repeat(2, minmax(190px, 1fr)); }
.course-form-anchor-grid article { min-height: 190px; }
.course-form-review { display: grid; }
.course-form-review-head, .course-form-review-row { display: grid; grid-template-columns: minmax(220px, 1.55fr) minmax(56px, .35fr) minmax(150px, 1fr) minmax(220px, 1.3fr); }
.course-form-review-head { background: var(--ink); color: white; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.course-form-review-head span { display: flex; min-width: 0; align-items: center; padding: 12px; border-right: 2px solid white; }
.course-form-review-head span:last-child { border-right: 0; }
.course-form-review-row { min-height: 108px; border-bottom: 2px solid var(--ink); }
.course-form-review-row:last-child { border-bottom: 0; }
.course-form-review-row > * { min-width: 0; padding: 14px; border-right: 2px solid var(--ink); }
.course-form-review-row > *:last-child { border-right: 0; }
.course-form-review-row strong { font-size: .8rem; line-height: 1.4; }
.course-form-review-row input, .course-form-review-row textarea { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 .9rem/1.4 var(--writing-font-family); }
.course-form-review-row > :not(:last-child) { border-right: 2px solid var(--ink); }
.course-form-reflection-row { display: grid; grid-template-columns: 40px minmax(220px, .8fr) minmax(0, 1.2fr); align-items: stretch; min-height: 130px; border: 3px solid var(--ink); border-bottom: 0; background: var(--paper); }
.course-form-reflection-row:first-child { border-radius: 14px 14px 0 0; }
.course-form-reflection-row:last-child { border-bottom: 3px solid var(--ink); border-radius: 0 0 14px 14px; }
.course-form-reflection-row h4 { display: grid; place-items: center; padding: 10px; border-right: 2px solid var(--ink); background: var(--green); color: white; }
.course-form-reflection-row p { padding: 18px; border-right: 2px solid var(--ink); font-size: .82rem; font-weight: 700; line-height: 1.45; }
.course-form-reflection-row textarea { width: 100%; resize: vertical; padding: 18px; border: 0; outline: 0; background: transparent; font: 500 1rem/1.5 var(--writing-font-family); }
.course-gather-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-gather-pieces article { display: grid; min-width: 0; align-content: start; border-right: 2px solid var(--ink); }
.course-gather-pieces article:last-child { border-right: 0; }
.course-gather-pieces header { padding: 16px 18px; background: var(--green); color: white; }
.course-gather-pieces header h3 { margin: 0; font-size: 1.35rem; font-weight: 400; line-height: 1; }
.course-gather-items { display: grid; }
.course-gather-items label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 16px; border-bottom: 2px solid var(--ink); cursor: pointer; }
.course-gather-items label:last-child { border-bottom: 0; }
.course-gather-items label:hover { background: rgba(245, 206, 34, .16); }
.course-gather-items input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.course-gather-items span { min-width: 0; font-size: .78rem; font-weight: 500; line-height: 1.5; }
.course-gather-items strong { font-weight: 900; }
.course-gather-reflection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-gather-reflection-card { display: grid; min-width: 0; grid-template-rows: auto minmax(250px, 1fr); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.course-gather-reflection-card:nth-child(2n) { border-right: 0; }
.course-gather-reflection-card.is-summary { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.course-gather-reflection-card header { padding: 15px 18px; background: var(--green); color: white; }
.course-gather-reflection-card h3 { margin: 0; font-family: var(--writing-font-family); font-size: 1.02rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.course-gather-reflection-card > div { display: grid; grid-template-rows: auto 1fr; min-height: 250px; }
.course-gather-reflection-card p { max-width: none; margin: 0; padding: 16px 18px 8px; font-size: .82rem; font-style: italic; font-weight: 600; line-height: 1.45; }
.course-gather-reflection-card textarea { width: 100%; min-height: 180px; resize: vertical; padding: 8px 18px 18px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1rem/1.5 var(--writing-font-family); }
.course-gather-reflection-card textarea:focus { background: rgba(245, 206, 34, .16); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-gather-reflection { grid-template-columns: 1fr; }
.course-checklist { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-checklist-group + .course-checklist-group { border-top: 3px solid var(--ink); }
.course-checklist-group h3 { margin: 0; padding: 14px 18px; background: var(--green); color: white; font-family: var(--writing-font-family); font-size: 1.08rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.course-checklist-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; padding: 18px; border-bottom: 2px solid var(--ink); cursor: pointer; }
.course-checklist-item:last-child { border-bottom: 0; }
.course-checklist-item:hover { background: rgba(245, 206, 34, .14); }
.course-checklist-item input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--green); }
.course-checklist-item span { min-width: 0; font-size: .9rem; font-weight: 500; line-height: 1.55; }
.course-checklist-item strong { font-weight: 900; }
.course-checklist-item.is-complete span { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--green); }
.course-readiness-quiz { display: grid; gap: 14px; }
.course-readiness-quiz-list { display: grid; gap: 14px; }
.course-readiness-card { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-readiness-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--green); color: white; }
.course-readiness-card h3 { margin: 0; font-size: 1.3rem; font-weight: 400; line-height: 1; }
.course-readiness-card header output { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: .72rem; font-weight: 900; }
.course-readiness-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-readiness-options button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px 10px; align-content: start; min-width: 0; min-height: 150px; padding: 16px; border: 0; border-right: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.course-readiness-options button:last-child { border-right: 0; }
.course-readiness-options button:hover, .course-readiness-options button:focus-visible { background: rgba(245, 206, 34, .18); outline: 0; }
.course-readiness-options button.is-selected { background: var(--yellow); }
.course-readiness-options button > span { display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-size: .68rem; font-weight: 900; }
.course-readiness-options button small { align-self: center; color: var(--muted); font-size: .62rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.course-readiness-options button strong { grid-column: 1 / -1; font-size: .82rem; font-weight: 500; line-height: 1.5; }
.course-readiness-total { display: grid; gap: 12px; padding: 14px 18px; border: 3px solid var(--ink); border-radius: 12px; background: var(--ink); color: white; font-size: .8rem; font-weight: 900; }
.course-readiness-total-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.course-readiness-total output { font-size: 1.15rem; }
.course-readiness-result { max-width: 72ch; padding-top: 12px; border-top: 2px solid rgba(255,255,255,.55); font-size: .86rem; font-weight: 500; line-height: 1.5; }
.course-readiness-result strong { font-weight: 900; }
.course-structured-reflection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-structured-reflection article { display: grid; grid-template-rows: auto auto minmax(150px, 1fr); min-width: 0; border-right: 2px solid var(--ink); }
.course-structured-reflection article:last-child { border-right: 0; }
.course-structured-reflection header { padding: 14px 16px; background: var(--green); color: white; }
.course-structured-reflection h3 { margin: 0; font-size: 1.18rem; font-weight: 400; line-height: 1; }
.course-structured-reflection p { max-width: none; min-height: 66px; margin: 0; padding: 14px 16px 8px; font-size: .78rem; font-style: italic; font-weight: 600; line-height: 1.45; }
.course-structured-reflection textarea { width: 100%; min-height: 150px; resize: vertical; padding: 8px 16px 16px; border: 0; outline: 0; background: transparent; font: 500 .95rem/1.5 var(--writing-font-family); }
.course-structured-reflection textarea:focus { background: rgba(245, 206, 34, .16); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-reference-grid { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-reference-grid-head, .course-reference-grid-row { display: grid; grid-template-columns: minmax(110px, .7fr) repeat(3, minmax(0, 1fr)); }
.course-reference-grid-head { background: var(--ink); color: white; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.course-reference-grid-head span { padding: 13px 14px; border-right: 2px solid white; }
.course-reference-grid-head span:last-child { border-right: 0; }
.course-reference-grid-row { min-height: 130px; border-bottom: 2px solid var(--ink); }
.course-reference-grid-row:last-child { border-bottom: 0; }
.course-reference-grid-row > * { min-width: 0; padding: 14px; border-right: 2px solid var(--ink); }
.course-reference-grid-row > *:last-child { border-right: 0; }
.course-reference-grid-row strong { background: var(--green); color: white; font-size: 1rem; font-weight: 400; }
.course-reference-grid-row textarea { width: 100%; min-height: 100px; resize: vertical; border: 0; outline: 0; background: transparent; font: 500 .9rem/1.45 var(--writing-font-family); }
.course-reference-grid-row textarea:focus { background: rgba(245, 206, 34, .16); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-layers-table, .course-plain-table { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-layers-head, .course-layers-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr; }
.course-layers-head { background: var(--ink); color: white; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.course-layers-head span { padding: 12px; border-right: 2px solid white; }
.course-layers-head span:last-child { border-right: 0; }
.course-layers-row { min-height: 74px; border-bottom: 2px solid var(--ink); }
.course-layers-row:last-child { border-bottom: 0; }
.course-layers-row textarea { width: 100%; min-width: 0; resize: vertical; padding: 12px; border: 0; border-right: 2px solid var(--ink); outline: 0; background: transparent; font: 500 .84rem/1.4 var(--writing-font-family); }
.course-layers-row textarea:last-child { border-right: 0; }
.course-layers-row textarea:focus { background: rgba(245, 206, 34, .16); box-shadow: inset 0 0 0 4px var(--yellow); }
.course-plain-table-row { display: grid; grid-template-columns: 1fr 1.7fr 1.1fr 1.6fr; }
.course-plain-table-row > * { min-width: 0; padding: 13px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: .78rem; font-weight: 500; line-height: 1.45; }
.course-plain-table-row > *:last-child { border-right: 0; }
.course-plain-table-row > div strong { font-weight: 850; }
.course-plain-table-row:last-child > * { border-bottom: 0; }
.course-plain-table-row.is-header { background: var(--ink); color: white; text-transform: uppercase; }
.course-plain-table-row.is-header > * { font-size: .66rem; font-weight: 900; }
.course-production-plan { display: grid; gap: 10px; }
.course-production-plan-actions { display: flex; justify-content: flex-end; }
.course-production-plan-actions button { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); color: var(--ink); font: 900 .62rem/1 var(--writing-font-family); cursor: pointer; }
.course-production-plan-actions button:hover, .course-production-plan-actions button:focus-visible { background: var(--yellow); outline: 0; }
.course-production-plan-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.course-production-plan-actions .material-symbols-outlined { font-size: 16px; line-height: 1; }
.course-production-plan-table { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-production-plan-row { display: grid; grid-template-columns: 1.2fr .9fr 1.15fr 1.15fr 1.2fr 1.3fr; min-height: 72px; border-bottom: 2px solid var(--ink); }
.course-production-plan-row:last-child { border-bottom: 0; }
.course-production-plan-row > * { min-width: 0; padding: 12px; border-right: 0; }
.course-production-plan-row > * + * { border-left: 2px solid var(--ink); }
.course-production-plan-row.is-header { min-height: 0; background: var(--ink); color: white; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.course-production-plan-row.is-header span { padding: 12px; border-right: 0; }
.course-production-plan-row.is-header span + span { border-left: 2px solid white; }
.course-production-plan-row textarea { width: 100%; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 .82rem/1.4 var(--writing-font-family); }
.course-production-plan-row textarea + textarea { border-left: 2px solid var(--ink); }
.course-production-plan-row textarea.is-section { background: var(--green); color: white; font-weight: 900; text-align: center; }
.course-production-plan-row textarea:focus { background: rgba(245,206,34,.16); box-shadow: inset 0 0 0 3px var(--yellow); }
.course-release-comparison { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-release-comparison-head, .course-release-comparison-row { display: grid; grid-template-columns: minmax(95px, .45fr) minmax(0, 1fr) minmax(0, 1fr); }
.course-release-comparison-head { background: var(--ink); color: white; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.course-release-comparison-head > * { padding: 13px 14px; border-right: 2px solid white; }
.course-release-comparison-head > *:last-child { border-right: 0; }
.course-release-comparison-row { min-width: 0; border-bottom: 2px solid var(--ink); }
.course-release-comparison-row:last-child { border-bottom: 0; }
.course-release-comparison-row > * { min-width: 0; padding: 16px; border-right: 2px solid var(--ink); }
.course-release-comparison-row > *:last-child { border-right: 0; }
.course-release-comparison-row > strong { background: var(--green); color: white; font-size: .9rem; font-weight: 400; }
.course-release-comparison-row ul { display: grid; gap: 8px; margin: 0; padding-left: 1.1em; font-size: .82rem; font-weight: 500; line-height: 1.5; }
.course-release-comparison-row li::marker { color: var(--green); }
.course-reference-diagram { display: grid; gap: 16px; }
.course-reference-actions { display: flex; justify-content: flex-end; }
.course-reference-actions button { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 7px; background: var(--yellow); color: var(--ink); font: 900 .68rem/1 var(--writing-font-family); cursor: pointer; }
.course-reference-actions button:hover, .course-reference-actions button:focus-visible { background: var(--green); color: white; outline: 0; }
.course-reference-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.course-reference-list { display: grid; gap: 18px; }
.course-reference-card { display: grid; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-reference-card-header { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 14px 18px; background: var(--green); color: white; }
.course-reference-title { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: white; font: 400 1.35rem/1 var(--writing-font-family); }
.course-reference-title::placeholder { color: rgba(255,255,255,.72); }
.course-reference-title:focus { box-shadow: inset 0 -3px 0 var(--yellow); }
.course-reference-delete { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 2px solid white; border-radius: 7px; background: transparent; color: white; cursor: pointer; }
.course-reference-delete:hover, .course-reference-delete:focus-visible { background: white; color: var(--green); outline: 0; }
.course-reference-delete svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.course-reference-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-reference-fields label, .course-reference-notes { display: grid; gap: 7px; min-width: 0; padding: 16px; }
.course-reference-fields label { border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.course-reference-fields label:last-child { border-right: 0; }
.course-reference-fields strong, .course-reference-notes strong { color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.course-reference-fields textarea, .course-reference-notes textarea { width: 100%; min-height: 86px; resize: vertical; padding: 8px 0 0; border: 0; border-radius: 0; outline: 0; background: transparent; font: 500 .9rem/1.45 var(--writing-font-family); }
.course-reference-notes { border-top: 0; }
.course-reference-notes textarea { min-height: 72px; }
.course-reference-fields textarea:focus, .course-reference-notes textarea:focus { background: transparent; box-shadow: none; }
.course-capture-tools { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: capture-tool; }
.course-capture-tools li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); font-size: .88rem; font-weight: 600; line-height: 1.5; }
.course-capture-tools li > span { min-width: 0; }
.course-capture-tools li::before { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--green); color: white; content: counter(capture-tool); counter-increment: capture-tool; font-size: .65rem; font-weight: 900; line-height: 1; }
.course-production-guidelines { display: grid; gap: 24px; }
.course-production-guidelines-intro { display: grid; max-width: 64ch; gap: 12px; }
.course-production-guidelines-intro p { margin: 0; }
.course-guideline-group { display: grid; gap: 10px; }
.course-guideline-group h4 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 500; line-height: 1; letter-spacing: -.025em; }
.course-guideline-list { display: grid; gap: 10px; max-width: 72ch; margin: 0; padding-left: 1.35em; font-size: .9rem; font-weight: 500; line-height: 1.52; }
.course-guideline-list li { padding-left: .25em; }
.course-guideline-list li::marker { color: var(--green); font-size: .9em; }
.course-guideline-list strong { font-weight: 900; }
.course-example-callout { gap: 18px; padding: 22px; border: 3px solid var(--ink); border-radius: 14px; background: var(--green); color: white; box-shadow: 5px 5px 0 rgba(5, 5, 5, .14); }
.course-example-callout h3 { color: white; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.course-example-body { display: grid; gap: 16px; padding: 20px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); }
.course-example-body p { max-width: none; font-size: .95rem; line-height: 1.58; }
.course-8020-section { gap: 22px; }
.course-8020-copy { display: grid; max-width: 72ch; gap: 12px; }
.course-8020-copy p, .course-8020-caption { margin: 0; }
.course-8020-caption { max-width: 72ch !important; padding: 8px 0 2px; text-align: center; }
.course-8020-bar { display: grid; min-height: 58px; overflow: hidden; border: 3px solid var(--ink); background: var(--ink); font-size: 1.25rem; font-weight: 900; line-height: 1; }
.course-8020-bar span { display: grid; place-items: center; padding: 12px; }
.course-8020-bar span:first-child { background: var(--cream); color: var(--muted); }
.course-8020-bar span:last-child { background: var(--ink); color: white; }
.course-8020-effort, .course-8020-quality { grid-template-columns: 1fr 4fr; }
.course-8020-quality { grid-template-columns: 4fr 1fr; }
.course-8020-quality span:first-child { background: var(--ink); color: white; }
.course-8020-quality span:last-child { background: var(--cream); color: var(--muted); }
.course-inspiration-tool { overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); }
.course-inspiration-controls { position: relative; display: grid; border-bottom: 3px solid var(--ink); }
.course-inspiration-controls::after { position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--ink); content: ""; pointer-events: none; transform: translateX(-50%); }
.course-inspiration-control-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.course-inspiration-control-group button { min-height: 48px; padding: 10px 12px; border: 0; border-right: 2px solid var(--ink); background: var(--cream); color: var(--ink); font-family: var(--writing-font-family); font-size: .72rem; font-weight: 800; line-height: 1.1; text-align: left; transition: background-color .18s ease, color .18s ease; }
.course-inspiration-control-group button:last-child { border-right: 0; }
.course-inspiration-control-group button:hover, .course-inspiration-control-group button:focus-visible { background: var(--yellow); outline: 0; cursor: pointer; }
.course-inspiration-control-group button.is-selected { background: var(--green); color: white; }
.course-inspiration-row-controls button { min-height: 36px; font-size: .67rem; text-align: center; }
.course-inspiration-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); }
.course-inspiration-tool[data-focus-row="definition"] [data-inspiration-row]:not([data-inspiration-row="definition"]), .course-inspiration-tool[data-focus-row="qualities"] [data-inspiration-row]:not([data-inspiration-row="qualities"]), .course-inspiration-tool[data-focus-row="practice"] [data-inspiration-row]:not([data-inspiration-row="practice"]), .course-inspiration-tool[data-focus-row="review"] [data-inspiration-row]:not([data-inspiration-row="review"]) { display: none; }
.course-inspiration-panel { display: grid; align-content: start; gap: 17px; padding: 22px; }
.course-inspiration-panel + .course-inspiration-panel { border-left: 3px solid var(--ink); }
.course-inspiration-panel h3 { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; line-height: 1; }
.course-inspiration-panel p { max-width: none; font-size: 1rem; font-weight: 500; line-height: 1.62; }
.course-inspiration-panel ul { display: grid; gap: 10px; margin: 0; padding-left: 1.25em; font-size: 1rem; font-weight: 500; line-height: 1.62; }
.course-inspiration-panel li { padding-left: .2em; }
.course-inspiration-panel li::marker { color: var(--green); font-size: 1em; }
.course-release-comparison-tool .course-inspiration-control-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-release-comparison-tool .course-inspiration-controls::after { display: none; }
.course-release-panel { min-width: 0; }
.course-release-panel > div[hidden] { display: none; }
.course-release-panel > div[data-release-row] { display: grid; gap: 10px; }
.course-release-panel > div[data-release-row] > h4 { display: none; margin: 0; color: var(--green); font-family: var(--heading-font-family); font-size: .9rem; font-weight: 400; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.course-release-comparison-tool[data-release-focus="review"] .course-release-panel > div[data-release-row] > h4 { display: block; }
.course-release-panel ul { gap: 11px; }
.course-ideas-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); }
.course-ideas-table article { display: grid; align-content: start; gap: 17px; min-height: 100%; padding: 22px; }
.course-ideas-table article + article { border-left: 3px solid var(--ink); }
.course-ideas-table h3 { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); color: var(--ink); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; line-height: 1; }
.course-ideas-table ul { display: grid; gap: 10px; margin: 0; padding-left: 1.25em; font-size: 1rem; font-weight: 500; line-height: 1.62; }
.course-ideas-table li { padding-left: .2em; }
.course-ideas-table li::marker { color: var(--green); }
.course-page-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--ink); }
.course-page-navigation button { min-height: 43px; width: max-content; padding: 0 14px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .68rem; font-weight: 900; }
.course-page-navigation button:has(.course-space-guy-button) { display: inline-flex; align-items: center; gap: 8px; }
.course-space-guy-button { width: 20px; height: 20px; flex: 0 0 auto; }
.course-page-navigation button:last-child { justify-self: end; background: var(--yellow); }
.course-page-navigation button:hover:not(:disabled) { background: var(--ink); color: white; }
.course-page-navigation button:disabled { cursor: default; opacity: .35; }
.course-page-navigation span { font-size: .68rem; font-weight: 900; }
.course-page-navigation.is-chapter-begin, .course-page-navigation.is-course-begin { display: flex; justify-content: flex-end; }
.course-home-restart { margin-right: auto; padding-inline: 0 !important; border-color: transparent !important; color: rgba(255,255,255,.72) !important; font-size: .64rem !important; }
.course-home-restart:hover:not(:disabled), .course-home-restart:focus-visible { border-color: transparent !important; background: transparent !important; color: white !important; text-decoration: underline; }
.course-chapter-home { transition: opacity .3s ease, transform .34s ease; }
.course-page.is-chapter-page.is-leaving .course-chapter-home { opacity: 0; transform: translateY(-18px); }
.course-content:not(.is-page-transitioning) .course-page.is-chapter-page .course-chapter-home { animation: course-chapter-home-in .44s ease both; }
@keyframes course-chapter-home-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .course-content, .course-content > article, .course-chapter-home { transition: none; animation: none !important; }
}
.learn-library-back { width: max-content; min-height: 38px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .66rem; font-weight: 900; }
.learn-library-back:hover { background: var(--yellow); }
.learn-tutorial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.learn-tutorial-entry { display: grid; max-width: 620px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); gap: 5px 14px; padding: 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--tool-writing); color: var(--ink); font: inherit; text-align: left; box-shadow: 4px 4px 0 rgba(5, 5, 5, .13); cursor: pointer; }
.learn-tutorial-entry[data-open-listen-back-tutorial] { background: var(--tool-reference); }
.learn-tutorial-entry:hover { background: var(--yellow); transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(5, 5, 5, .16); }
.learn-tutorial-entry small { display: inline-flex; width: max-content; height: 24px; grid-column: 1; grid-row: 1; align-self: start; align-items: center; padding: 0 7px; border-radius: 6px; background: var(--ink); color: white; font-size: .55rem; font-weight: 900; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.learn-tutorial-entry b { grid-column: 1; grid-row: 2; font-size: 1rem; line-height: 1.15; letter-spacing: -.025em; }
.learn-tutorial-entry-description { display: flex; min-width: 0; grid-column: 1; grid-row: 3; align-items: flex-start; gap: 8px; }
.learn-tutorial-entry-description > span:last-child { min-width: 0; max-width: 58ch; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.4; }
.learn-tutorial-entry .learn-tutorial-symbol { display: inline-flex; flex: 0 0 auto; align-items: flex-start; padding-top: 1px; font-size: 34px; line-height: 1; }
.learn-tutorial-entry:hover .learn-tutorial-symbol { transform: translateY(-1px); }
.learn-tutorial-entry i { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 1.4rem; font-style: normal; font-weight: 900; }
.learn-tutorial-entry > .material-icon-chevron-forward { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 24px; height: 24px; }
.chord-tutorial-page { display: grid; width: min(1120px, 100%); margin-inline: auto; gap: clamp(42px, 6vw, 68px); }
.chord-tutorial-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.chord-tutorial-topbar > span { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.tutorial-progress-summary { display: grid; width: min(220px, 42vw); gap: 6px; }
.tutorial-progress-summary > span { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.tutorial-progress-track { height: 9px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: white; }
.tutorial-progress-track i { display: block; width: var(--tutorial-progress, 0%); height: 100%; border-radius: inherit; background: var(--yellow); transition: width .22s ease; }
.chord-tutorial-finish { display: grid; max-width: 820px; gap: 10px; padding-top: clamp(28px, 5vw, 48px); border-top: 3px solid var(--ink); }
.chord-tutorial-finish h2 { margin: 0; font-size: clamp(1.8rem, 5vw, 3.7rem); line-height: .95; letter-spacing: -.06em; }
.chord-tutorial-finish p { max-width: 720px; margin: 0; font-size: .82rem; font-weight: 750; line-height: 1.5; }
.chord-tutorial-finish-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }
.chord-tutorial-finish-actions button { width: max-content; border: 2px solid var(--ink); border-radius: 9px; font-size: .68rem; font-weight: 900; }
.chord-tutorial-primary-action { display: flex; min-height: 50px; align-items: center; gap: 18px; padding: 0 15px; background: var(--yellow); }
.chord-tutorial-primary-action span { font-size: 1.15rem; }
.chord-tutorial-primary-action:hover { background: var(--ink); color: white; }
.chord-tutorial-secondary-action { min-height: 42px; padding: 0 12px; background: var(--paper); }
.chord-tutorial-secondary-action:hover { background: var(--cream); }
.lyrics-tutorial-page { gap: 18px; }
.lyrics-tutorial-guided-workspace { display: grid; min-height: min(680px, calc(100vh - 150px)); grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); gap: 16px; }
.lyrics-tutorial-step-box { display: grid; align-content: start; gap: 18px; padding: 16px 10px; }
.lyrics-tutorial-step-box header { display: grid; gap: 7px; }
.lyrics-tutorial-step-box header > span { width: max-content; padding: 5px 8px; border-radius: 6px; background: var(--ink); color: white; font-size: .55rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.lyrics-tutorial-step-box h1 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: .92; letter-spacing: -.055em; }
.lyrics-tutorial-step-box p { max-width: 31ch; margin: 0; color: var(--ink); font-size: 1rem; font-weight: 400; line-height: 1.55; }
.lyrics-tutorial-try-label { margin-bottom: -10px; color: var(--muted); font-size: .54rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.lyrics-tutorial-step-box ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: .7rem; font-weight: 400; line-height: 1.5; }
.lyrics-tutorial-start-button { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 9px; background: var(--ink); color: white; font-size: .7rem; font-weight: 900; }
.lyrics-tutorial-start-button:hover { background: white; color: var(--ink); }
.lyrics-tutorial-start-button span { font-size: 1.1rem; }
.lyrics-tutorial-step-box.is-complete { background: transparent; }
.lyrics-tutorial-step-actions { display: flex; gap: 8px; margin-top: auto; }
.lyrics-tutorial-step-actions button { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 7px; background: white; color: var(--ink); font-size: 1.45rem; font-weight: 700; line-height: 1; }
.lyrics-tutorial-step-actions button:disabled { cursor: default; opacity: .38; }
.lyrics-tutorial-step-actions button.is-tutorial-coach-target { background: var(--yellow); }
.lyrics-tutorial-real-tool { position: relative; min-height: 620px; padding: 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--tool-writing); --writing-font-weight: 400; }
.lyrics-tutorial-tool-mount { height: 100%; min-height: 590px; }
.lyrics-tutorial-real-tool .lyrics-line-content { font-weight: 400; }
.chord-guided-tutorial { gap: 18px; }
.chord-tutorial-real-tool { background: var(--tool-writing); }
.chord-tutorial-tool-mount,
.chord-tutorial-module,
.chord-tutorial-module .chord-expanded { min-height: 590px; }
.chord-tutorial-module .chart-input-panel,
.chord-tutorial-module .chart-preview-panel { min-height: 0; }
.chord-guided-finish { display: grid; gap: 8px; padding-top: 6px; }
.chord-guided-finish[hidden] { display: none; }
.chord-guided-finish button { width: 100%; border: 2px solid var(--ink); border-radius: 9px; color: var(--ink); font-size: .68rem; font-weight: 900; }
.chord-guided-finish .chord-tutorial-primary-action,
.chord-guided-finish .chord-tutorial-secondary-action { width: 100%; justify-content: space-between; }
.chord-tutorial-module .chart-view-menu > summary.is-tutorial-coach-target { overflow: visible; }
.chord-tutorial-module .chart-view-menu > summary.is-tutorial-coach-target > span { overflow: hidden; }
.chord-tutorial-module .chord-side-rail button.is-tutorial-coach-target::after,
.chord-tutorial-module .chart-view-menu-panel button.is-tutorial-coach-target::after { z-index: 2; inset: 2px; border-width: 3px; border-radius: 6px; }
.chord-tutorial-module [data-coach-meta-toggle].is-tutorial-coach-target { background: var(--yellow); }
.chord-tutorial-module .chord-meta-popover input.is-tutorial-coach-target { box-shadow: 0 0 0 4px var(--yellow); }
.chord-tutorial-module .chord-meta-popover input.is-tutorial-coach-target::after { display: none; }
.chord-tutorial-module .chord-meta-popover > header button { color: var(--ink); }
.chord-tutorial-module [data-coach-canonical].is-tutorial-coach-target,
.chord-tutorial-module [data-coach-cursor-editor].is-tutorial-coach-target { box-shadow: inset 0 0 0 4px var(--yellow); }
.chord-tutorial-module [data-coach-canonical].is-tutorial-coach-target::after,
.chord-tutorial-module [data-coach-cursor-editor].is-tutorial-coach-target::after { display: none; }
.listen-back-tutorial-real-tool { background: var(--tool-reference); }
.listen-back-tutorial-real-tool .lyrics-tutorial-tool-mount { min-height: 590px; }
.listen-back-tutorial-module { min-height: 560px; padding: 12px; }
.listen-back-tutorial-module .audio-header-row { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.listen-back-tutorial-module .audio-playback-row,
.listen-back-tutorial-module .audio-file-control-row { display: flex; min-width: 0; align-items: center; gap: 8px; }
.listen-back-tutorial-module .audio-file-row { min-width: 0; flex: 1 1 auto; }
.listen-back-tutorial-module .audio-scale-controls { display: grid; }
.listen-back-tutorial-module .audio-follow-playhead { display: flex; }
.listen-back-tutorial-module .audio-clear-notes { display: grid; order: 2; }
.listen-back-tutorial-module .audio-marker-stage { grid-template-rows: minmax(210px, 2fr) minmax(125px, 1fr); }
.listen-back-tutorial-module .audio-waveform { height: 100%; min-height: 210px; }
.listen-back-demo-wave-bars { position: absolute; z-index: 2; inset: 16px 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 8px); opacity: .42; clip-path: polygon(0 45%,5% 20%,10% 37%,15% 8%,20% 42%,25% 25%,30% 48%,35% 12%,40% 35%,45% 18%,50% 46%,55% 28%,60% 7%,65% 38%,70% 22%,75% 44%,80% 15%,85% 34%,90% 24%,95% 40%,100% 18%,100% 82%,95% 60%,90% 76%,85% 66%,80% 85%,75% 56%,70% 78%,65% 62%,60% 93%,55% 72%,50% 54%,45% 82%,40% 65%,35% 88%,30% 52%,25% 75%,20% 58%,15% 92%,10% 63%,5% 80%,0 55%); }
.listen-back-tutorial-module .audio-marker-items { min-height: 120px; }
.listen-back-tutorial-module .audio-waveform.is-tutorial-coach-target { box-shadow: inset 0 0 0 4px var(--yellow); }
.listen-back-tutorial-module .audio-waveform.is-tutorial-coach-target::after { z-index: 5; top: 0; right: auto; bottom: 0; left: var(--audio-progress); width: 5px; border: 0; border-radius: 0; background: var(--ink); transform: translateX(-2px); }
.listen-back-tutorial-module textarea.is-tutorial-coach-target { box-shadow: inset 0 0 0 4px var(--yellow); }
.listen-back-tutorial-module textarea.is-tutorial-coach-target::after { display: none; }
.chord-tutorial-module .chord-rail-status:not(:empty) { display: block; max-width: 44px; }
.lyrics-line.is-tutorial-demo-target { outline: 3px solid var(--yellow); outline-offset: 2px; transition: transform .35s ease; }
.lyrics-line.is-tutorial-demo-target.is-tutorial-demo-moving { transform: translateY(-12px); }
.lyrics-line-content.is-tutorial-demo-target {
  border-radius: 4px;
  background: rgba(245, 206, 34, .5);
}
.lyrics-add-alt-input.is-tutorial-demo-target { box-shadow: 0 0 0 4px rgba(245,206,34,.55); }
.lyrics-variant.is-tutorial-demo-target,
.lyrics-variant-option.is-tutorial-demo-target,
.lyrics-variant-action.is-tutorial-demo-target {
  border-radius: 4px;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(245,206,34,.4);
}
.lyrics-side-rail button.is-tutorial-demo-target,
.lyrics-selection-toolbar button.is-tutorial-demo-target { background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 4px rgba(245,206,34,.35); }
.is-tutorial-coach-target { position: relative; z-index: 20 !important; overflow: visible !important; }
.is-tutorial-coach-target::after { position: absolute; z-index: 30; inset: -3px; border: 4px solid var(--yellow); border-radius: 10px; pointer-events: none; content: ""; }
.lyrics-line-handle.is-tutorial-coach-target { opacity: 1; }
.lyrics-line.is-tutorial-coach-section { border-radius: 0; background: rgba(245,206,34,.2); box-shadow: inset 4px 0 0 var(--yellow), inset -4px 0 0 var(--yellow); }
.lyrics-line.is-tutorial-coach-section.is-tutorial-coach-section-first { border-radius: 7px 7px 0 0; box-shadow: inset 4px 0 0 var(--yellow), inset -4px 0 0 var(--yellow), inset 0 4px 0 var(--yellow); }
.lyrics-line.is-tutorial-coach-section.is-tutorial-coach-section-last { border-radius: 0 0 7px 7px; box-shadow: inset 4px 0 0 var(--yellow), inset -4px 0 0 var(--yellow), inset 0 -4px 0 var(--yellow); }
.lyrics-tutorial-demo-badge { position: absolute; z-index: 8; top: 25px; right: 25px; padding: 6px 9px; border: 2px solid var(--ink); border-radius: 7px; background: var(--yellow); color: var(--ink); font-size: .56rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(5,5,5,.16); animation: tutorial-demo-pulse 1s ease-in-out infinite alternate; }
.lyrics-tutorial-control-callout { position: absolute; z-index: 9; right: 25px; bottom: 25px; display: grid; width: min(290px, calc(100% - 50px)); gap: 4px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 9px; background: white; box-shadow: 5px 5px 0 rgba(5,5,5,.18); }
.lyrics-tutorial-control-callout[hidden] { display: none; }
.lyrics-tutorial-control-callout strong { font-size: .68rem; font-weight: 900; }
.lyrics-tutorial-control-callout span { font-size: .62rem; font-weight: 400; line-height: 1.4; }
.lyrics-tutorial-control-callout [data-lyrics-demo-advance] { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 7px; background: var(--ink); color: white; font-size: .58rem; font-weight: 900; }
.lyrics-tutorial-control-callout [data-lyrics-demo-advance][hidden] { display: none; }
.lyrics-tutorial-real-tool.is-demonstrating .lyrics-editor-shell { pointer-events: none; }
@keyframes tutorial-demo-pulse { to { transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(5,5,5,.2); } }
@media (max-width: 760px) {
  .chord-tutorial-page { gap: 52px; }
  .chord-tutorial-topbar { align-items: flex-start; flex-direction: column; }
  .lyrics-tutorial-guided-workspace { grid-template-columns: minmax(0, 1fr); }
  .lyrics-tutorial-step-actions { grid-template-columns: 1fr 1fr; }
  .lyrics-tutorial-real-tool { min-height: 560px; padding: 9px; }
  .lyrics-tutorial-tool-mount { min-height: 536px; }
  .chord-tutorial-tool-mount,
  .chord-tutorial-module,
  .chord-tutorial-module .chord-expanded { min-height: 536px; }
}
@media (max-width: 480px) {
  .new-song-writer-option { grid-template-columns: 34px minmax(0, 1fr) 28px; }
  .new-song-person-control { grid-column: 2; }
  .new-song-form .new-song-person-credit { grid-column: 1 / -1; }
  .new-song-owner-access, .new-song-access-toggle { grid-column: 2; }
  .new-song-person-remove { grid-column: 3; grid-row: 1; }
}
.learn-placeholder strong { font-size: 1.2rem; }
.learn-placeholder span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.help-destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.help-destination-card {
  display: grid;
  min-height: 150px;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border: var(--line) solid var(--ink);
  border-radius: 15px;
  background: var(--paper);
}
.help-destination-card strong { font-size: 1.2rem; }
.help-destination-card span { color: var(--muted); font-size: .78rem; font-weight: 700; }
[data-section-card] { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
[data-section-card].is-selected { background: var(--yellow); box-shadow: 7px 7px 0 rgba(5, 5, 5, .18); transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .primary-subnav, .primary-subnav-inner, .primary-nav-button, [data-section-card], .connections-mushroom-heading, .app-destination-character, .app-home-add, .app-home-share-character, .learn-blog-post-nav-button { transition-duration: .01ms !important; }
}
.home-view { min-height: calc(100vh - 100px); padding: clamp(18px, 4vw, 54px); }
.home-library { display: grid; width: 100%; margin: 0; gap: 18px; }
.home-library > header { display: flex; align-items: center; justify-content: space-between; }
.home-library-heading-actions { display: flex; align-items: center; gap: 3px; }
.home-song-more { position: relative; z-index: 5; }
.home-song-more > summary { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 7px; cursor: pointer; font: 950 1.25rem/.8 Arial, sans-serif; list-style: none; }
.home-song-more > summary::-webkit-details-marker { display: none; }
.home-song-more > summary:hover, .home-song-more[open] > summary { background: var(--yellow); }
.home-song-more > div { position: absolute; top: calc(100% + 4px); right: 0; display: grid; width: 150px; padding: 5px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 4px 4px 0 rgba(5,5,5,.18); }
.home-song-more button { min-height: 31px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; text-align: left; font-size: .6rem; font-weight: 900; }
.home-song-more button:hover { background: var(--yellow); }
.home-library h1, .projects-view-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
.home-library h1 { display: flex; align-items: center; gap: 12px; }
.songs-mushroom-heading { display: block; width: 54px; height: 54px; flex: 0 0 auto; align-self: center; transform: translateY(-3px); }
.songs-sun-heading { display: block; width: 54px; height: 54px; flex: 0 0 auto; align-self: center; transform: translateY(-3px); }
.mushroom-hover-character { overflow: visible; }
.mushroom-hover-head { display: none; }
.mushroom-hover-cap, .mushroom-hover-spots, .mushroom-hover-body { transform: none; transform-origin: 32px 30px; transition: transform .42s cubic-bezier(.22,.72,.25,1); }
.mushroom-hover-cap { fill: var(--cream); }
.mushroom-hover-body { transform-origin: 32px 40px; }
.mushroom-hover-character:hover .mushroom-hover-cap, .mushroom-hover-character:focus-within .mushroom-hover-cap,
.mushroom-hover-character:hover .mushroom-hover-spots, .mushroom-hover-character:focus-within .mushroom-hover-spots,
#my-songs-title:hover .mushroom-hover-cap, #my-songs-title:hover .mushroom-hover-spots,
.new-song-intro-title:hover .mushroom-hover-cap, .course-closing-cta h3:hover .mushroom-hover-cap,
.new-song-intro-title:hover .mushroom-hover-spots, .course-closing-cta h3:hover .mushroom-hover-spots { transform: rotate(7deg); }
.mushroom-hover-character:hover .mushroom-hover-body, .mushroom-hover-character:focus-within .mushroom-hover-body,
#my-songs-title:hover .mushroom-hover-body, .new-song-intro-title:hover .mushroom-hover-body,
.course-closing-cta h3:hover .mushroom-hover-body { transform: rotate(-7deg); }
.library-controls { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.library-filter-tags, .library-sort-options { display: flex; min-width: 0; gap: 5px; }
.library-filter-browser { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: 25px minmax(0, 1fr); align-items: start; gap: 5px; }
.library-filter-browser:has(.library-filter-expand[hidden]) { grid-template-columns: minmax(0, 1fr); }
.library-filter-browser:has(.library-filter-expand[hidden]) .library-filter-tags { grid-column: 1; }
.library-filter-browser .library-filter-tags { grid-column: 2; grid-row: 1; flex-wrap: nowrap; overflow-x: auto; padding: 0 2px 4px 0; scrollbar-width: thin; }
.library-filter-browser.is-expanded .library-filter-tags { display: flex; max-height: 55px; flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: auto; }
.library-filter-expand { display: grid; width: 25px; height: 25px; grid-column: 1; grid-row: 1; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.library-filter-expand:hover { background: var(--yellow); }
.library-filter-expand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.library-filter-browser.is-expanded .library-filter-expand svg { transform: rotate(180deg); }
.library-sort-options { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; overflow: visible; }
.library-filter-tag, .library-sort-options button { display: inline-flex; min-width: 0; min-height: 25px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 3px; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 8px; font-size: .62rem; font-weight: 850; line-height: 1.1; white-space: nowrap; }
.library-filter-tag { opacity: 1; }
.library-filter-tag .connection-tag-avatar, .library-mobile-menu-panel .connection-tag-avatar { flex: 0 0 18px; }
.connection-filter-name { min-width: 0; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-filter-tag:hover { box-shadow: inset 0 -2px 0 rgba(5,5,5,.28); transform: none; }
.library-filter-tag.is-all { background: var(--ink); color: white; }
.library-filter-tag.is-owner, .library-filter-tag.is-editor, .library-filter-tag.is-viewer { background: var(--paper); color: var(--ink); }
.library-filter-tag.is-owned { background: var(--green); color: white; }
.library-filter-tag.is-shared, .library-filter-tag.is-project { background: var(--lavender); color: white; }
.library-filter-tag.is-artist { background: var(--green); color: white; }
.library-filter-tag.is-connection { gap: 5px; padding: 3px 7px 3px 3px; border-radius: 8px; background: var(--paper); color: var(--ink); }
.library-filter-tag.is-connection .connection-filter-name { max-width: 12ch; font-size: .62rem; font-weight: 850; line-height: 1; }
.library-sort-options button { background: var(--paper); color: var(--ink); }
.library-filter-tag.is-active, .library-sort-options button.is-active { background: var(--yellow); color: var(--ink); box-shadow: none; transform: none; }
.library-sort-options button:hover { box-shadow: inset 0 -2px 0 var(--ink); }
.library-sort-options button svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.song-library-layout-controls { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 8px; }
.song-view-options { display: flex; gap: 3px; }
.song-view-options button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.song-view-options button.is-active { background: var(--yellow); }
.song-view-options .material-symbols-outlined { font-size: 18px; line-height: 1; }
.library-mobile-selects { display: none; }
.home-song-row { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; justify-content: start; gap: 12px; overflow: visible; padding: 3px 3px 12px; }
.home-view .home-song-row:not(.is-list-mode) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.home-view .home-song-row:not(.is-list-mode) > .home-song-card-wrap:only-child { width: min(100%, 720px); max-width: 720px; }
.home-song-card-wrap { position: relative; width: 100%; min-width: 0; height: 140px; }
.home-song-row > .home-song-card-wrap.is-editing { height: auto; min-height: 140px; grid-column: 1 / -1; }
.home-song-card { display: grid; width: 100%; height: 100%; min-height: 0; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 8px; overflow: hidden; padding: 13px 46px 13px 13px; border: var(--line) solid var(--ink); border-radius: 13px; background: var(--paper); color: var(--ink); text-align: left; box-shadow: 4px 4px 0 rgba(5, 5, 5, .14); }
.home-song-card strong { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; color: var(--ink); font-size: clamp(1.25rem, 1.8vw, 1.65rem); font-weight: 950; line-height: 1.04; }
.home-song-card:hover { background: var(--yellow); transform: translateY(-2px); }
.home-song-card-wrap.is-selecting .home-song-card { cursor: default; }
.home-song-card-wrap.is-selecting .home-song-card:hover { background: var(--paper); transform: none; }
.home-song-card-wrap.is-selecting:has(.song-selection-check input:checked) .home-song-card { background: var(--yellow); box-shadow: 4px 4px 0 rgba(5,5,5,.28); }
.home-song-card-wrap.is-selection-disabled { opacity: .48; }
.song-selection-check { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; width: 28px; height: 28px; place-items: center; cursor: pointer; }
.song-selection-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.song-selection-check span { display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid var(--ink); border-radius: 7px; background: white; color: transparent; font-size: .72rem; font-weight: 950; }
.song-selection-check input:checked + span { background: var(--ink); color: white; }
.song-selection-check input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.song-selection-check input:disabled + span { cursor: not-allowed; background: var(--cream); }
.song-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 2px solid var(--ink); border-radius: 10px; background: var(--yellow); }
.song-selection-bar[hidden] { display: none; }
.song-selection-bar strong { font-size: .7rem; }
.song-selection-bar > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.song-selection-bar button { min-height: 32px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 7px; background: white; font-size: .59rem; font-weight: 900; }
.song-selection-bar .song-selection-delete { background: var(--coral); }
.song-selection-bar button:disabled { cursor: not-allowed; opacity: .42; }
.tag-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px; }
.entity-tag { display: inline-flex; min-width: 0; min-height: 25px; max-width: 100%; flex: 0 0 auto; align-items: center; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); font-size: .62rem; font-weight: 850; line-height: 1.1; overflow-wrap: anywhere; }
.song-information-tag { height: 25px; min-width: 0 !important; min-height: 25px !important; padding: 3px 8px; background: var(--tool-organizing); font-family: inherit; cursor: pointer; }
.song-information-tag:hover { background: var(--yellow); }
.artist-tag { background: var(--green); color: white; }
.project-tag { background: var(--cream); }
.contributor-tag { background: var(--blue); color: white; }
.more-tag { background: var(--yellow); }
.home-song-card-tags { width: 100%; min-height: 0; max-height: 100%; grid-column: 2; grid-row: 2; align-content: start; justify-content: flex-start; overflow: hidden; }
.home-song-card:hover .artist-tag, .home-song-card:hover .contributor-tag { color: white; }
.home-song-row.is-list-mode { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.home-song-row.is-list-mode .home-song-card-wrap, .home-song-row.is-list-mode .large-song-card-wrap:not(.is-editing) { height: 60px; min-height: 60px; }
.home-song-row.is-list-mode .home-song-card { width: 100%; height: 60px; min-height: 60px; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; column-gap: 10px; padding: 6px 40px 6px 6px; }
.home-song-row.is-list-mode .home-song-card > .home-layout-preview { width: 60px; height: 45px; grid-column: 1; grid-row: 1; }
.home-song-row.is-list-mode .large-song-card-copy { display: flex; height: 100%; min-width: 0; align-items: center; gap: 10px; grid-column: 2; grid-row: 1; overflow: hidden; }
.home-song-row.is-list-mode .large-song-card-copy > strong { min-width: 0; flex: 0 1 auto; overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.home-song-row.is-list-mode .large-song-card-tags { width: auto; max-width: 100%; min-width: 0; flex: 1 1 auto; align-content: center; align-items: center; flex-wrap: wrap; overflow: hidden; }
.home-song-row.is-list-mode .large-song-card-tags .entity-tag { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-song-row.is-list-mode .home-layout-tile { color: transparent; }
.home-song-card .home-song-card-tags .connection-tag { min-height: 25px; padding: 3px 7px 3px 3px; border-width: 1px; border-radius: 8px; gap: 5px; font-size: .62rem; font-weight: 850; }
.home-song-card .home-song-card-tags .connection-tag-role { color: inherit; font-size: .5rem; font-weight: 950; letter-spacing: .02em; text-transform: uppercase; }
.home-layout-preview { position: relative; display: grid; width: 100%; max-height: 100%; aspect-ratio: 4 / 3; grid-column: 1; grid-row: 1 / span 2; align-self: center; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; overflow: hidden; margin: 0; }
.home-layout-cell { border: 1px solid rgba(5, 5, 5, .2); border-radius: 4px; background: var(--cream); }
.home-layout-tile { z-index: 1; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border: 2px solid var(--ink); border-radius: 5px; color: var(--ink); font-size: .44rem; font-style: normal; font-weight: 950; line-height: 1; }
.home-layout-info, .home-layout-todos, .home-layout-lyrics { background: var(--tool-organizing); }
.home-layout-chords, .home-layout-lyricEditor { background: var(--tool-writing); }
.home-layout-audio, .home-layout-record { background: var(--tool-reference); }
.home-layout-metronome { background: var(--tool-reference); }
.home-layout-files { background: var(--tool-files); }
.home-songs-empty { margin: 10px 0; color: var(--muted); font-size: .78rem; font-weight: 700; }
.recently-deleted-songs { display: grid; width: 100%; justify-items: start; gap: 9px; padding-top: 2px; }
.recently-deleted-toggle { min-height: 29px; padding: 4px 9px; border: 2px solid var(--ink); border-radius: 8px; background: transparent; color: var(--ink); font-size: .62rem; font-weight: 850; }
.recently-deleted-toggle:hover, .recently-deleted-toggle[aria-expanded="true"] { background: var(--yellow); }
.recently-deleted-toggle span { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 4px; border-radius: 6px; background: var(--ink); color: white; font-size: .55rem; }
.recently-deleted-panel { display: grid; width: 100%; gap: 8px; padding: 12px; border: 2px solid var(--ink); border-radius: 11px; background: var(--paper); }
.recently-deleted-panel[hidden] { display: none; }
.recently-deleted-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recently-deleted-panel > header > div:first-child { display: grid; gap: 2px; }
.recently-deleted-panel > header strong { font-size: .85rem; }
.recently-deleted-panel > header small { color: var(--muted); font-size: .58rem; font-weight: 800; }
.recently-deleted-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.recently-deleted-header-actions button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--cream); color: var(--ink); font-size: .54rem; font-weight: 900; }
.recently-deleted-header-actions button:hover:not(:disabled) { background: var(--yellow); }
.recently-deleted-header-actions .delete-forever-button:hover:not(:disabled) { background: var(--coral); }
.recently-deleted-header-actions button:disabled { cursor: not-allowed; opacity: .45; }
.recently-deleted-panel > div { display: grid; gap: 6px; }
.recently-deleted-song-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--ink); border-radius: 8px; background: white; }
.recently-deleted-song-row:has(.recently-deleted-song-select) { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
.recently-deleted-song-row.is-selected { background: var(--yellow); }
.recently-deleted-song-row.is-selection-disabled { opacity: .48; }
.recently-deleted-song-select { display: grid; width: 22px; height: 22px; place-items: center; cursor: pointer; }
.recently-deleted-song-select input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.recently-deleted-song-select span { display: grid; width: 19px; height: 19px; place-items: center; border: 2px solid var(--ink); border-radius: 5px; background: white; color: transparent; font-size: .56rem; font-weight: 950; }
.recently-deleted-song-select input:checked + span { background: var(--ink); color: white; }
.recently-deleted-song-select input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.recently-deleted-song-select input:disabled + span { cursor: not-allowed; background: var(--cream); }
.recently-deleted-song-row > div { display: grid; min-width: 0; gap: 2px; }
.recently-deleted-song-row strong { overflow: hidden; text-overflow: ellipsis; font-size: .71rem; white-space: nowrap; }
.recently-deleted-song-row small { color: var(--muted); font-size: .54rem; font-weight: 750; }
.recently-deleted-song-row button { min-height: 31px; padding: 4px 8px; border: 1px solid var(--ink); border-radius: 7px; background: var(--cream); font-size: .58rem; font-weight: 850; }
.recently-deleted-song-row button:hover { background: var(--yellow); }
.recently-deleted-song-row .delete-forever-button:hover { background: var(--coral); }
.recently-deleted-empty { margin: 4px 0; color: var(--muted); font-size: .66rem; font-weight: 750; }
.home-add, .projects-add-button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  padding: 0 0 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 850;
  line-height: 1;
}
.home-add:hover, .projects-add-button:hover, .home-add[aria-expanded="true"], .projects-add-button[aria-expanded="true"] { background: var(--yellow); }
.home-add .material-symbols-outlined, .projects-add-button .material-symbols-outlined { font-size: 21px; }

.song-view {
  position: relative;
  display: grid;
  width: calc(100% + 32px);
  height: calc(100vh - 68px);
  height: calc(100dvh - 68px);
  min-height: 0;
  margin: -16px;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0;
  transition: none;
}
.song-view.module-rail-expanded { grid-template-columns: var(--song-menu-width) minmax(0, 1fr); }
.song-view.song-library-expanded { grid-template-columns: minmax(0, 1fr) 0; }
.song-view.module-sidebar-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.song-view > .home-view, .song-view > .projects-view { width: 100%; min-width: 0; height: 100%; overflow: auto; }
.projects-view { align-content: start; gap: 24px; }
.projects-view-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.projects-add-button:disabled { color: var(--muted); cursor: not-allowed; opacity: .35; }
.projects-view-heading, .projects-content { width: 100%; min-width: 0; grid-column: 1 / -1; }
.projects-content { display: grid; gap: 18px; }
.shared-project-status { margin: 0; padding: 11px 13px; border: 2px solid var(--ink); border-radius: 10px; background: var(--tool-reference); font-size: .72rem; font-weight: 850; }
.shared-project-status.is-error { background: #ffe4df; }
.collaboration-setup-card { display: grid; max-width: 720px; gap: 8px; padding: 24px; border: var(--line) solid var(--ink); border-radius: 17px; background: var(--yellow); box-shadow: 6px 6px 0 rgba(5,5,5,.15); }
.collaboration-setup-card > span { width: max-content; padding: 5px 7px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: white; font-size: .56rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.collaboration-setup-card h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.045em; }
.collaboration-setup-card p { margin: 0; max-width: 64ch; font-size: .76rem; font-weight: 750; line-height: 1.45; }
.collaboration-setup-card strong { overflow-wrap: anywhere; }
.shared-song-setup-card { background: var(--tool-reference); }
.shared-project-create-form { display: grid; max-width: 720px; gap: 14px; padding: 20px; border: var(--heavy-line) solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 6px 6px 0 rgba(5,5,5,.15); }
.shared-project-create-form > header, .project-sharing-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shared-project-create-form h2, .project-sharing-panel h3 { margin: 3px 0 0; font-size: 1.35rem; letter-spacing: -.04em; }
.shared-project-create-form > header button, .project-sharing-panel > header button { width: 34px; height: 34px; padding: 0; border: 2px solid var(--ink); border-radius: 8px; background: white; font-size: 1rem; font-weight: 900; }
.shared-project-create-form label, .project-sharing-panel label { display: grid; gap: 6px; }
.shared-project-create-form label > span, .project-sharing-panel label > span { font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shared-project-create-form input, .shared-project-create-form textarea, .project-sharing-panel select { min-width: 0; padding: 10px 11px; border: 2px solid var(--ink); border-radius: 9px; background: white; color: var(--ink); outline: 0; resize: vertical; }
.shared-project-create-form > button, .project-sharing-panel form > button { min-height: 44px; padding: 0 13px; border: 2px solid var(--ink); border-radius: 9px; background: var(--yellow); font-size: .7rem; font-weight: 900; }
.shared-project-grid { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.shared-project-grid:not(.is-detail) { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.shared-project-card { display: grid; width: 100%; min-width: 0; gap: 14px; padding: 20px; border: var(--line) solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 5px 5px 0 rgba(5,5,5,.14); }
.shared-project-card.is-clickable { cursor: pointer; }
.shared-project-card.is-clickable:hover { box-shadow: 7px 7px 0 rgba(5,5,5,.17); transform: translateY(-1px); }
.shared-project-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -20px -20px 0; padding: 15px 18px; border-radius: 14px 14px 0 0; background: var(--ink); color: white; }
.shared-project-card-head h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 1.8rem; line-height: 1; letter-spacing: -.05em; }
.shared-project-card-head h2 button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; }
.shared-project-card-head h2 button:hover { color: var(--yellow); }
.shared-project-summary-card { min-height: 188px; align-content: start; gap: 11px; padding: 14px; border-radius: 13px; }
.shared-project-summary-card .shared-project-card-head { min-height: 64px; margin: -14px -14px 0; padding: 11px 12px; border-radius: 9px 9px 0 0; }
.shared-project-summary-card .shared-project-card-head h2 { display: -webkit-box; max-height: 2em; overflow: hidden; font-size: 1.25rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shared-project-summary-card .shared-project-card-head span,
.shared-project-summary-card .shared-project-card-head strong { padding: 3px 5px; border-width: 1px; font-size: .48rem; }
.project-summary-description { display: -webkit-box; min-height: 2.8em; margin: 0; overflow: hidden; color: var(--muted); font-size: .7rem; font-weight: 750; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.project-summary-members { min-height: 30px; overflow: hidden; flex-wrap: nowrap; }
.project-summary-members .rail-project-member { flex: 0 0 auto; }
.shared-project-summary-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 9px; border-top: 1px solid rgba(5,5,5,.25); }
.shared-project-summary-card > footer span { color: var(--muted); font-size: .62rem; font-weight: 850; }
.shared-project-summary-card > footer i { font-size: 1rem; font-style: normal; font-weight: 950; }
.shared-project-summary-card > footer > .material-icon-chevron-forward { width: 20px; height: 20px; flex: 0 0 auto; }
.projects-view.is-project-detail > .projects-view-heading { display: none; }
.shared-project-card-head > div { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.shared-project-card-head span, .shared-project-card-head strong { display: inline-flex; min-height: 25px; align-items: center; justify-content: center; padding: 4px 7px; border: 2px solid white; border-radius: 6px; font-size: .56rem; font-weight: 950; line-height: 1.05; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.shared-project-card-head span { background: var(--yellow); color: var(--ink); }
.shared-project-card-head .project-role-badge.is-owner, .shared-project-card-head .project-role-badge.is-editor, .shared-project-card-head .project-role-badge.is-viewer { background: var(--paper); color: var(--ink); }
.shared-project-card-head .access-role-tag { min-height: 0; padding: 3px 6px; border-color: white; border-radius: 5px; font-size: .54rem; letter-spacing: 0; text-transform: none; }
.project-state-badge.is-shared { background: var(--lavender); color: white; }
.project-state-badge.is-personal { background: var(--green); color: white; }
.project-header-edit { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: white; }
.project-header-edit:hover { background: var(--yellow); color: var(--ink); }
.project-header-edit.is-active { background: var(--yellow); color: var(--ink); }
.project-header-leave:hover { background: var(--coral); color: var(--ink); }
.project-header-edit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.project-header-edit .material-symbols-outlined { font-size: 20px; }
.project-header-edit .material-icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.project-credits-share { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: white; }
.project-credits-share:hover { background: var(--yellow); color: var(--ink); }
.project-credits-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.project-credits-share .material-icon-contract { fill: currentColor; stroke: none; }
.project-credits-share .material-icon-file-export { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.shared-project-card-copy { display: grid; gap: 6px; }
.shared-project-card-copy p { margin: 0; color: var(--muted); font-size: .74rem; font-weight: 700; line-height: 1.4; }
.project-information-form { display: grid; gap: 10px; padding: 13px; border: 2px solid var(--ink); border-radius: 10px; background: var(--cream); }
.project-information-form label { display: grid; gap: 5px; }
.project-information-form label > span { font-size: .58rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.project-information-form input, .project-information-form textarea { width: 100%; min-width: 0; padding: 9px; border: 2px solid var(--ink); border-radius: 8px; background: white; resize: vertical; }
.project-information-form > div { display: flex; justify-content: flex-end; gap: 6px; }
.project-information-form button { min-height: 34px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 7px; background: white; font-size: .62rem; font-weight: 900; }
.project-information-form button[type="submit"] { background: var(--yellow); }
.project-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; border: 2px solid var(--ink); border-radius: 10px; background: #ffe4df; }
.project-danger-zone > div { display: grid; gap: 2px; }
.project-danger-zone strong { font-size: .7rem; }
.project-danger-zone small { color: var(--muted); font-size: .58rem; font-weight: 750; }
.project-danger-zone button { flex: 0 0 auto; min-height: 34px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 7px; background: var(--coral); font-size: .61rem; font-weight: 900; }
.project-danger-zone button:disabled { cursor: not-allowed; opacity: .35; }
.shared-project-members { display: grid; gap: 8px; }
.shared-project-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shared-project-section-head > p { margin: 0; color: var(--muted); font-size: .62rem; font-weight: 850; }
.shared-project-section-head > button, .project-song-list > header button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 1rem; font-weight: 950; line-height: 1; }
.shared-project-section-head > button:hover, .shared-project-section-head > button:active, .shared-project-section-head > button[aria-expanded="true"] { background: var(--yellow); color: var(--ink); }
.shared-project-members > div { display: flex; flex-wrap: wrap; gap: 7px; }
.shared-project-member { display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border: 2px solid var(--ink); border-radius: 10px; background: white; font-size: .62rem; font-weight: 850; }
.shared-project-member-profile { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
button.shared-project-member-profile { cursor: pointer; }
button.shared-project-member-profile:hover, button.shared-project-member-profile:focus-visible { color: var(--blue); outline: 0; }
.shared-project-member-profile i { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 9px; background: var(--member-profile-color, var(--blue)); color: var(--member-profile-ink, white); font-style: normal; }
.shared-project-member-profile i svg { display: block; width: 22px; height: 22px; }
.shared-project-member-profile > span { min-width: 0; overflow-wrap: anywhere; }
.shared-project-member small { color: var(--muted); font-size: .52rem; font-weight: 850; }
.shared-project-member.is-manageable { padding-right: 5px; }
.shared-project-member select { min-width: 105px; height: 29px; padding: 0 6px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); font-size: .55rem; font-weight: 850; }
.shared-project-member > button:not(.shared-project-member-profile) { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; font-weight: 950; }
.shared-project-member > button:not(.shared-project-member-profile):hover { background: var(--coral); }
.shared-project-no-members, .shared-project-member-note { color: var(--muted); font-size: .65rem; font-weight: 800; }
.shared-project-share-button { min-height: 43px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 9px; background: var(--yellow); font-size: .7rem; font-weight: 900; }
.shared-project-share-button:hover { background: var(--ink); color: white; }
.project-song-list { display: grid; overflow: hidden; border: 2px solid var(--ink); border-radius: 11px; background: white; }
.project-song-list > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; background: var(--ink); color: white; }
.project-song-list > header p { margin: 0; font-size: .62rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.project-song-list > header > div { display: flex; align-items: center; gap: 7px; }
.project-song-list > header span { display: grid; min-width: 23px; height: 23px; place-items: center; border: 0; border-radius: 0; background: transparent; color: white; font-size: .58rem; font-weight: 950; }
.project-song-list > header button:hover, .project-song-list > header button:active, .project-song-list > header button[aria-expanded="true"] { background: var(--yellow); color: var(--ink); }
.project-song-list > header button .material-symbols-outlined { font-size: 25px; }
.project-song-list > header button:disabled { cursor: not-allowed; opacity: .35; }
.project-song-list > button { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 0; border-top: 2px solid var(--ink); background: white; text-align: left; }
.project-song-list > button:hover { background: var(--yellow); }
.project-song-list > button > span { display: grid; gap: 2px; }
.project-song-list > button strong { font-size: .82rem; }
.project-song-list > button small { color: var(--muted); font-size: .6rem; font-weight: 750; }
.project-song-list > button i { font-size: 1rem; font-style: normal; font-weight: 950; }
.project-song-list > button > .material-icon-chevron-forward { width: 20px; height: 20px; flex: 0 0 auto; }
.project-song-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 9px; border-top: 2px solid var(--ink); background: white; }
.project-song-open { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 3px; border: 0; background: transparent; text-align: left; }
.project-song-open:hover { color: var(--blue); }
.project-song-open > span { display: grid; min-width: 0; gap: 2px; }
.project-song-open strong { overflow-wrap: anywhere; font-size: .82rem; }
.project-song-open small { color: var(--muted); font-size: .6rem; font-weight: 750; }
.project-song-open i { font-size: 1rem; font-style: normal; font-weight: 950; }
.project-song-open > .material-icon-chevron-forward { width: 20px; height: 20px; flex: 0 0 auto; }
.project-song-edit-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.project-song-edit-row > div button { min-height: 31px; padding: 0 8px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); font-size: .56rem; font-weight: 900; }
.project-song-edit-row > div button:first-child:hover { background: var(--yellow); }
.project-song-edit-row > div button:last-child { background: #ffe4df; }
.project-song-edit-row > div button:last-child:hover { background: var(--coral); }
.project-song-empty { margin: 0; padding: 13px 11px; color: var(--muted); font-size: .67rem; font-weight: 750; }
.project-song-manager { display: grid; gap: 9px; padding: 10px; border-top: 2px solid var(--ink); background: var(--cream); }
.project-song-manager > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-song-manager > header p { margin: 0; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.project-song-manager h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.04em; }
.project-song-manager > header > .project-song-manager-actions > button { width: 34px; height: 34px; padding: 0; border: 2px solid var(--ink); border-radius: 8px; background: white; font-weight: 900; }
.project-song-manager-actions { display: flex; align-items: center; gap: 8px; }
.project-song-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.project-song-mode-switch button { min-height: 34px; padding: 0 9px; border: 2px solid var(--ink); background: white; font-size: .61rem; font-weight: 900; }
.project-song-mode-switch button:first-child { border-radius: 8px 0 0 8px; }
.project-song-mode-switch button:last-child { margin-left: -2px; border-radius: 0 8px 8px 0; }
.project-song-mode-switch button.is-active { z-index: 1; background: var(--yellow); }
.project-song-manager-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.project-song-manager-grid form, .project-song-create-prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding: 0; border: 0; background: transparent; }
.project-song-manager-grid form > strong, .project-song-create-prompt > strong { font-size: .8rem; }
.project-song-manager-grid label { display: grid; gap: 5px; }
.project-song-manager-grid label > span { color: var(--muted); font-size: .56rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.project-song-manager-grid input, .project-song-manager-grid select { min-width: 0; height: 41px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 8px; background: white; }
.project-song-manager-grid form > p, .project-song-create-prompt > p { margin: 0; color: var(--muted); font-size: .63rem; font-weight: 700; line-height: 1.4; }
.project-song-create-prompt > small { align-self: center; color: var(--muted); font-size: .58rem; font-weight: 750; }
.project-song-manager-grid form > button, .project-song-create-prompt > button { min-height: 40px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: .65rem; font-weight: 900; }
.project-sharing-panel { display: grid; width: 100%; gap: 9px; margin-top: 4px; padding: 10px; border: 2px solid var(--ink); border-radius: 11px; background: var(--cream); }
.project-sharing-panel > header { align-items: center; }
.project-sharing-panel > header > div { display: grid; gap: 1px; }
.project-sharing-panel h3 { margin: 0; font-size: 1rem; }
.project-sharing-panel > header small { color: var(--muted); font-size: .58rem; font-weight: 750; }
.project-sharing-panel > header .project-copy-link { display: inline-flex; align-items: center; gap: 5px; width: auto; height: 34px; padding: 0 9px; background: white; font-size: .6rem; white-space: nowrap; }
.project-copy-link .material-icon { width: 15px; height: 15px; }
.project-sharing-panel > p { margin: 0; max-width: 64ch; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.45; }
.project-invite-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.project-invite-actions > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.project-invite-actions button { min-height: 42px; padding: 0 11px; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: .66rem; font-weight: 900; }
.project-invite-actions button:last-child { background: white; }
.project-invite-actions > div > button:first-child { background: var(--yellow); }
.project-invite-actions button:hover { background: var(--ink); color: white; }
.project-invite-actions .project-invite-revoke { padding: 0 8px; color: var(--muted); font-size: .58rem; }
.project-sharing-panel > small { color: var(--muted); font-size: .58rem; font-weight: 750; }
.project-sharing-panel > hr { width: 100%; margin: 3px 0 0; border: 0; border-top: 2px solid rgba(5, 5, 5, .2); }
.project-member-invite-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding: 0; border: 0; background: transparent; }
.project-member-invite-form > div { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }
.project-member-invite-form label { display: grid; gap: 4px; }
.project-member-invite-form label > span { color: var(--muted); font-size: .55rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.project-member-invite-form select { min-width: 0; height: 38px; padding: 0 7px; border: 2px solid var(--ink); border-radius: 7px; background: white; font-size: .6rem; font-weight: 850; }
.project-member-invite-form > button { min-height: 38px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: .63rem; font-weight: 900; white-space: nowrap; }
.project-pending-invites { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.project-pending-invites > p { margin: 0; font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.project-pending-invites > div { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: white; }
.project-pending-invite > span { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.project-pending-invite > span strong { overflow-wrap: anywhere; font-size: .65rem; }
.project-pending-invite > span small { color: var(--muted); font-size: .55rem; font-weight: 800; }
.project-pending-invites input { min-width: 0; height: 42px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 8px; background: white; font-size: .62rem; }
.project-pending-invites button { padding: 2px 6px; border: 0; border-radius: 999px; background: var(--cream); color: var(--muted); font-size: .55rem; font-weight: 900; }
.shared-project-empty { display: grid; min-height: 300px; place-items: center; align-content: center; gap: 8px; padding: 30px; border: var(--line) solid var(--ink); border-radius: 18px; background: var(--paper); text-align: center; box-shadow: 6px 6px 0 rgba(5,5,5,.14); }
.shared-project-empty > span { display: grid; width: 68px; height: 68px; place-items: center; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 1.7rem; font-weight: 900; }
.shared-project-empty h2 { margin: 4px 0 0; font-size: 1.5rem; letter-spacing: -.04em; }
.shared-project-empty p { margin: 0; color: var(--muted); font-size: .76rem; font-weight: 700; }
.shared-project-empty button { margin-top: 8px; min-height: 42px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 9px; background: var(--yellow); font-size: .68rem; font-weight: 900; }
.project-library-controls { padding-bottom: 2px; }
.project-detail-navigation { display: flex; flex-wrap: wrap; gap: 8px; }
.project-detail-navigation button { min-height: 38px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .66rem; font-weight: 900; }
.project-detail-navigation button:hover { background: var(--yellow); }
.shared-module-read-only .module-body { background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)); }
.module-info.shared-module-read-only .module-body { background-image: none; }
.shared-song-tag { background: var(--paper); color: var(--ink); }
.shared-song-tag.is-owner, .shared-song-tag.is-editor, .shared-song-tag.is-viewer { background: var(--paper); color: var(--ink); }
.connection-tag { align-items: center; gap: 5px; padding: 3px 7px 3px 3px; border-radius: 8px; background: var(--paper); color: var(--ink); }
.connection-tag-avatar { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.connection-tag-avatar > i { display: grid; width: 18px; height: 18px; place-items: center; overflow: hidden; align-self: center; border-radius: 6px; background: var(--blue); color: white; font-size: .42rem; font-style: normal; font-weight: 950; }
.connection-tag-avatar > i.is-profile-avatar { background: var(--credit-avatar-color); color: var(--credit-avatar-ink); }
.connection-tag-avatar > i svg { width: 18px; height: 18px; }
.connection-tag-status { display: block; width: 12px; height: 12px; flex: 0 0 12px; border: 2px solid currentColor; border-radius: 3px; background: transparent; }
.connection-tag-status.is-active { background: currentColor; }
.connection-tag-status.is-stale { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.connection-tag-name, .connection-tag-role { display: inline-flex; align-items: center; min-height: 18px; line-height: 1; }
.connection-tag-name { min-width: 0; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-tag-role { gap: 4px; font-size: .5rem; font-weight: 950; letter-spacing: .02em; text-transform: uppercase; }
.connection-tag-role::before { color: currentColor; content: "·"; font-size: .75rem; line-height: 1; opacity: .78; }
.connection-tag.is-owner, .connection-tag.is-editor, .connection-tag.is-viewer { background: var(--paper); color: var(--ink); }
.connection-tag.is-profile-link, .artist-tag.is-profile-link, .contributor-tag.is-profile-link { appearance: none; font-family: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.connection-tag.is-profile-link:hover, .artist-tag.is-profile-link:hover, .contributor-tag.is-profile-link:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.06); box-shadow: 0 3px 0 var(--ink); }
.connection-tag.is-profile-link:focus:not(:focus-visible), .artist-tag.is-profile-link:focus:not(:focus-visible), .contributor-tag.is-profile-link:focus:not(:focus-visible) { outline: 0; }
.connection-tag.is-profile-link:focus-visible, .artist-tag.is-profile-link:focus-visible, .contributor-tag.is-profile-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 3px 0 var(--ink); }
.standalone-folder-rail {
  display: flex;
  min-width: 0;
  height: 100%;
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 20px 14px 24px;
  border-right: var(--line) solid var(--ink);
  background: var(--paper);
}
.standalone-folder-heading { display: flex; align-items: center; gap: 9px; }
.standalone-folder-heading h2 { margin: 0; flex: 0 1 auto; font-size: 1.16rem; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.standalone-folder-actions { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.standalone-folder-actions > button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0 0 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.35rem;
  font-weight: 900;
}
.standalone-folder-actions > button:hover { background: var(--yellow); }
.standalone-folder-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.standalone-folder-actions .material-symbols-outlined { font-size: 20px; }
.account-files-return-row { display: inline-flex; width: max-content; align-items: center; gap: 5px; }
.standalone-folder-actions .account-files-return { display: inline-flex; width: max-content; height: 30px; min-height: 30px; flex: 0 0 auto; align-items: center; padding: 0 8px; border: 2px solid var(--ink); border-radius: 7px; background: var(--yellow); font-size: .58rem; }
.standalone-access { width: max-content; margin: -7px 0 0; padding: 3px 7px; border: 2px solid var(--ink); border-radius: 7px; background: var(--tool-reference); font-size: .55rem; font-weight: 850; }
.standalone-folder-sort { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 0; color: var(--muted); font-size: .55rem; font-weight: 850; }
.standalone-folder-sort select { width: 112px; min-width: 0; height: 30px; padding: 0 6px; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); color: var(--ink); font-size: .58rem; font-weight: 850; }
.standalone-new-form { display: grid; gap: 7px; padding: 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--cream); }
.standalone-new-form input { width: 100%; min-width: 0; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 6px; background: white; font-size: .72rem; font-weight: 750; }
.standalone-new-form > div { display: flex; gap: 5px; }
.standalone-new-form button { min-height: 29px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 6px; background: white; font-size: .61rem; font-weight: 850; }
.standalone-new-form button[type="submit"] { background: var(--yellow); }
.standalone-document-list { display: flex; flex-direction: column; gap: 6px; }
.standalone-document-entry { display: grid; gap: 4px; min-width: 0; }
.standalone-document-entry:has(.standalone-card-menu[open]) { position: relative; z-index: 10; }
.standalone-document-card { width: 100%; min-width: 0; }
.standalone-document-button {
  display: grid;
  width: 100%;
  grid-column: 1 / 3;
  grid-template-columns: 56px minmax(0, 1fr);
  align-content: center;
  gap: 11px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.standalone-document-card-main { min-width: 0; }
.standalone-document-button .account-file-card-copy strong,
.standalone-document-button .account-file-card-copy small,
.standalone-document-button .account-file-card-copy em { white-space: normal; overflow-wrap: anywhere; }
.standalone-document-card-actions {
  display: flex;
  grid-column: 3;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.standalone-card-menu { position: relative; z-index: 2; }
.standalone-card-menu[open] { z-index: 10; }
.standalone-card-menu > summary {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 950 1.35rem/.8 Arial, sans-serif;
  list-style: none;
}
.standalone-card-menu > summary::-webkit-details-marker { display: none; }
.standalone-card-menu > summary:hover, .standalone-card-menu[open] > summary { background: var(--yellow); }
.standalone-document-card.is-active .standalone-card-menu > summary:hover,
.standalone-document-card.is-active .standalone-card-menu[open] > summary { background: var(--cream); }
.standalone-card-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  min-width: 148px;
  gap: 2px;
  padding: 5px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(5,5,5,.18);
}
.standalone-card-menu-panel button {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: .57rem;
  font-weight: 900;
}
.standalone-card-menu-panel button:hover,
.standalone-card-menu-panel button:focus-visible { background: var(--yellow); }
.standalone-document-card.is-active .standalone-document-card-actions button:hover,
.standalone-document-card.is-active .standalone-document-card-actions button:focus-visible { background: var(--cream); }
.standalone-document-card-actions svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.song-card-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.song-card-edit .material-symbols-outlined { font-size: 18px; }
.song-card-edit .material-icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.standalone-document-editor { display: grid; gap: 7px; padding: 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--cream); transform-origin: center; animation: standalone-card-flip .16s ease-out; }
@keyframes standalone-card-flip { from { opacity: .55; transform: rotateY(12deg) scale(.985); } to { opacity: 1; transform: rotateY(0) scale(1); } }
.standalone-document-editor label { display: grid; gap: 3px; }
.standalone-document-editor label span { font-size: .58rem; font-weight: 850; }
.standalone-document-editor input { width: 100%; min-width: 0; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 6px; background: white; font-size: .72rem; font-weight: 750; }
.standalone-document-editor-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; }
.standalone-document-editor button { min-height: 31px; padding: 0 7px; border: 2px solid var(--ink); border-radius: 6px; background: white; font-size: .59rem; font-weight: 850; }
.standalone-document-editor [data-standalone-create-song] { background: var(--yellow); }
.standalone-document-editor .standalone-icon-action { display: grid; width: 32px; padding: 0; place-items: center; }
.standalone-document-editor .standalone-icon-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.standalone-document-editor [data-standalone-delete] { background: var(--coral); }
.standalone-delete-confirm { display: grid; gap: 6px; padding-top: 7px; border-top: 2px solid rgba(5, 5, 5, .25); }
.standalone-delete-confirm p { margin: 0; font-size: .62rem; font-weight: 750; line-height: 1.3; }
.standalone-delete-confirm > div { display: flex; gap: 5px; }
.standalone-delete-confirm [data-standalone-delete-confirm] { background: var(--coral); }
.standalone-document-card.is-active { background: var(--yellow); }
.shared-tool-read-only .module-body { background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)); }
.shared-tool-read-only button:disabled { cursor: default; }
.shared-tool-dialog { width: min(520px, calc(100vw - 24px)); }
.shared-tool-panel { display: grid; gap: 14px; }
.shared-tool-panel > header { align-items: flex-start; }
.shared-tool-panel h2 { margin: 2px 0 0; font-size: 1.45rem; line-height: 1; }
.shared-tool-panel > p { margin: 0; font-size: .72rem; font-weight: 700; line-height: 1.4; }
.shared-tool-link-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shared-tool-link-actions > div { display: grid; gap: 5px; }
.shared-tool-link-actions [data-copy-shared-tool-link] { display: grid; min-height: 104px; align-content: center; gap: 6px; padding: 13px; border: 2px solid var(--ink); border-radius: 10px; background: white; text-align: left; }
.shared-tool-link-actions > div:last-child [data-copy-shared-tool-link] { background: var(--yellow); }
.shared-tool-link-actions .shared-tool-revoke-link { min-height: 34px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--cream); font-size: .58rem; font-weight: 850; }
.shared-tool-link-actions button:hover:not(:disabled) { background: var(--ink); color: white; }
.shared-tool-link-actions button:disabled { cursor: wait; opacity: .55; }
.shared-tool-link-actions strong { font-size: .78rem; }
.shared-tool-link-actions span { font-size: .62rem; font-weight: 700; line-height: 1.3; }
.shared-tool-manual-copy { display: grid; gap: 5px; padding: 10px; border: 2px solid var(--ink); border-radius: 9px; background: white; }
.shared-tool-manual-copy > span { font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.shared-tool-manual-copy > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.shared-tool-manual-copy input { min-width: 0; padding: 8px; border: 2px solid var(--ink); border-radius: 7px; background: var(--cream); font-size: .63rem; font-weight: 700; }
.shared-tool-manual-copy button { padding: 0 9px; border: 2px solid var(--ink); border-radius: 7px; background: var(--yellow); font-size: .61rem; font-weight: 900; }
.shared-tool-manual-copy small { color: var(--muted); font-size: .56rem; font-weight: 750; }
.shared-tool-status { min-height: 1.1em; color: var(--green); }
.song-view.standalone-tool-mode { grid-template-columns: minmax(400px, 420px) minmax(0, 1fr); }
.song-view.standalone-tool-mode.module-focused { grid-template-columns: minmax(400px, 420px) minmax(0, 1fr); }
.song-view.standalone-tool-mode .module-rail { display: none; }
.song-view.standalone-tool-mode .song-page { margin-left: 0; padding: 0 14px 14px; grid-column: 2; grid-row: 1; grid-template-rows: auto minmax(0, 1fr); }
.song-view.standalone-tool-mode .standalone-tool-heading { grid-row: 1; }
.song-view.standalone-tool-mode .song-heading { display: none; }
.standalone-tool-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 4px; }
.standalone-tool-heading-copy { display: grid; min-width: 0; gap: 4px; }
.standalone-tool-heading-kicker { color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.standalone-tool-heading h1 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.65rem, 3.2vw, 2.8rem); line-height: .96; letter-spacing: -.04em; }
.standalone-tool-heading-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.standalone-tool-heading-tags:empty { display: none; }
.standalone-tool-heading-tags i { padding: 4px 7px; border: 2px solid var(--ink); border-radius: 999px; background: var(--tool-reference); font-size: .55rem; font-style: normal; font-weight: 900; }
.standalone-tool-heading-actions { display: flex; align-self: flex-start; flex: 0 0 auto; gap: 5px; margin-top: 18px; }
.standalone-tool-heading-actions button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.standalone-tool-heading-actions button:hover { background: var(--yellow); }
.standalone-tool-heading-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.standalone-tool-heading-actions .material-symbols-outlined { font-size: 20px; }
.standalone-tool-heading-actions .material-icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.song-view.standalone-tool-mode .module-grid { height: 100%; grid-row: 2; padding: 0; }
.song-view.standalone-tool-mode:not(.standalone-tool-files-open) .standalone-folder-rail { display: none; }
.song-view.standalone-tool-mode:not(.standalone-tool-files-open) .song-page { grid-column: 1 / -1; }
.song-view.standalone-tool-mode .module-grid.focus-mode .focused-module {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 5px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none;
}
.song-view.standalone-tool-mode .focused-module .module-frame-head { display: none; }
.song-view.standalone-tool-mode .focused-module .module-body { background: white; }
.song-view.standalone-tool-mode .focused-module.module-audio .module-body { background: var(--tool-reference); }
.song-view.standalone-tool-mode .focused-module.module-audio .audio-header-row { padding: 5px 9px 4px; }
.song-view.standalone-tool-mode .focused-module.module-lyricEditor .lyrics-editor-shell,
.song-view.standalone-tool-mode .focused-module.module-chords .chord-expanded {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  background: white;
}
.song-view.standalone-tool-mode .lyrics-side-rail,
.song-view.standalone-tool-mode .chord-side-rail {
  display: flex;
  min-width: 0;
  min-height: 54px;
  overflow: visible;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 9px 9px 6px;
  border-bottom: 3px solid var(--ink);
  background: var(--tool-writing);
}
.song-view.standalone-tool-mode .lyrics-rail-history,
.song-view.standalone-tool-mode .lyrics-rail-move,
.song-view.standalone-tool-mode .lyrics-rail-actions,
.song-view.standalone-tool-mode .chord-rail-history,
.song-view.standalone-tool-mode .chord-rail-modes,
.song-view.standalone-tool-mode .chord-rail-actions { display: flex; grid-template-columns: none; gap: 4px; margin: 0; }
.song-view.standalone-tool-mode .lyrics-rail-actions,
.song-view.standalone-tool-mode .chord-rail-actions { margin-left: auto; }
.song-view.standalone-tool-mode .lyrics-editor-main,
.song-view.standalone-tool-mode .chart-input-panel,
.song-view.standalone-tool-mode .chart-preview-panel { border-radius: 0; }
.song-view.standalone-tool-mode .lyrics-editor-main { border: 0; }
.song-view.standalone-tool-mode .lyrics-editor-surface { padding: 24px 12px 28px; }
.song-view.standalone-tool-mode .chart-builder-grid { gap: 3px; background: var(--ink); }
.song-view.standalone-tool-mode .chart-input-panel,
.song-view.standalone-tool-mode .chart-preview-panel { border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; }
.song-view.standalone-tool-mode .chart-mode-input .chart-input-panel,
.song-view.standalone-tool-mode .chart-mode-output .chart-preview-panel { border-right: 0; border-left: 0; }
.song-view.standalone-tool-mode .chord-meta-popover { top: 60px; left: 9px; }
.module-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 20px 18px 24px;
  border-right: var(--line) solid var(--ink);
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior-y: none;
  transition: opacity .14s ease, transform .18s ease;
}
.song-view.module-sidebar-hidden .module-rail { visibility: hidden; padding-right: 0; padding-left: 0; border-right: 0; opacity: 0; transform: translateX(-100%); pointer-events: none; }
.module-rail .rail-label { color: var(--ink); }
.module-rail-heading { display: grid; width: 46px; justify-items: center; gap: 5px; }
.rail-label { margin: 0; color: var(--muted); font-size: .55rem; }
.rail-label-long { display: none; }
.module-rail-toggle { display: grid; width: 32px; height: 42px; place-items: center; padding: 0; border: 0; background: transparent; color: white; }
.module-rail-toggle:hover { color: var(--yellow); }
.hamburger-icon { position: relative; display: block; width: 20px; height: 16px; }
.hamburger-icon i { position: absolute; left: 0; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transition: top .16s ease, opacity .12s ease, transform .16s ease; }
.hamburger-icon i:nth-child(1) { top: 0; }
.hamburger-icon i:nth-child(2) { top: 6.75px; }
.hamburger-icon i:nth-child(3) { top: 13.5px; }
.module-rail-toggle[aria-expanded="true"] .hamburger-icon i:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
.module-rail-toggle[aria-expanded="true"] .hamburger-icon i:nth-child(2) { opacity: 0; }
.module-rail-toggle[aria-expanded="true"] .hamburger-icon i:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }

@media (max-width: 780px), (max-height: 520px) and (max-width: 760px) {
  .topbar:has(.module-rail-toggle.is-tool-files-toggle) .module-rail-toggle:not([hidden]) { display: grid !important; }
  .topbar:has(.module-rail-toggle.is-tool-files-toggle) .primary-nav { grid-column: 2 / -1; }
}
.mobile-nav-toggle, .mobile-nav-heading { display: none; }
.module-button-copy { display: none; min-width: 0; }
.module-button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font-weight: 950;
}
.module-button svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.module-button .module-icon-symbol { font-size: 27px; line-height: 1; }
.module-information-button .material-icon-info { width: 27px; height: 27px; fill: currentColor; stroke: none; }
.module-button[data-module="audio"] .material-icon-graphic-eq { font-size: 27px; }
.module-button[data-module="record"] .material-icon-mic { font-size: 27px; }
.module-button .module-icon-fill { fill: currentColor; stroke: none; }
.module-information-button { background: var(--ink); color: white; }
.module-information-button.is-active { background: var(--yellow); color: var(--ink); }
.module-button:not(:disabled):hover { background: var(--yellow); transform: translateY(-1px); }
.module-button.is-active { background: var(--yellow); color: var(--ink); transform: none; }
.module-button:disabled { opacity: .3; cursor: default; transform: none; }
.song-view.module-rail-expanded .module-rail { align-items: stretch; }
.song-view.module-rail-expanded .module-rail-heading { display: flex; width: 100%; min-height: 30px; align-items: center; justify-content: space-between; padding: 0 2px; }
.song-view.module-rail-expanded .module-rail-heading .rail-label { color: var(--ink); font-size: .82rem; font-weight: 950; }
.song-view.module-rail-expanded .rail-label-short { display: none; }
.song-view.module-rail-expanded .rail-label-long { display: inline; }
.section-controls { display: grid; width: max-content; min-width: 0; max-width: 100%; flex: 0 0 auto; gap: 3px; margin-left: auto; padding: 0; border: 0; background: transparent; }
.module-add-grid { display: flex; width: max-content; min-width: 0; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow: visible; padding: 2px 0 0; }
.module-add-grid .module-button { flex: 0 0 46px; }
.module-add-grid .module-button:first-child { margin-left: auto; }
.song-view.module-rail-expanded .module-add-grid .module-button { width: 42px; min-width: 42px; min-height: 42px; height: 42px; flex: 0 0 42px; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; padding: 0; }
.song-view.module-rail-expanded .module-add-grid .module-button svg { grid-column: 1; grid-row: 1; width: 24px; height: 24px; justify-self: center; padding: 0; border: 0; border-radius: 0; background: transparent; }
.song-view.module-rail-expanded .module-add-grid .module-button-copy { display: none; }
.module-button-copy strong { overflow: hidden; font-size: 1.02rem; font-weight: 950; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.module-button-copy small { color: var(--ink); font-size: .67rem; font-weight: 550; line-height: 1.35; }

.workspace-presets { display: none; }
.song-menu-heading { display: flex; width: 100%; min-height: 30px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 2px 4px; }
.song-menu-heading .rail-label { font-size: .92rem; font-weight: 950; }
.rail-song-list { display: grid; flex: 0 0 auto; gap: 9px; }
.rail-song-list > header { padding: 0 2px 2px; }
.rail-song-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-song-title-row, .rail-library-row > header, .workspace-title-row { min-height: 32px; padding: 0 2px; }
.rail-section-toggle { display: inline-flex; min-width: 0; align-items: center; gap: 5px; padding: 3px 0; border: 0; background: transparent; color: var(--ink); font-size: .86rem; font-weight: 950; line-height: 1; text-align: left; text-transform: uppercase; }
.rail-library-row .rail-section-toggle { font-size: .86rem; }
.rail-section-toggle:hover { color: var(--blue); }
.rail-section-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.rail-section-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.rail-section-content { display: grid; gap: 7px; }
[data-rail-song-list] { display: grid; max-height: 260px; grid-auto-rows: auto; align-content: start; gap: 7px; overflow-y: auto; padding-right: 3px; scrollbar-gutter: stable; }
[data-rail-song-list]:has(.rail-song-entry.is-editing) { max-height: none; overflow: visible; padding-right: 0; scrollbar-gutter: auto; }
.rail-song-entry { position: relative; width: 100%; min-width: 0; }
.rail-song-entry:not(.large-song-card-wrap):not(.is-editing) { height: 82px; min-height: 82px; max-height: 82px; }
.rail-song-button { display: grid; width: 100%; min-width: 0; height: 100%; grid-template-columns: 82px minmax(0, 1fr); align-items: start; gap: 10px; overflow: hidden; padding: 8px 36px 8px 8px; border: 2px solid var(--ink); border-radius: 9px; background: white; color: var(--ink); text-align: left; }
.rail-song-button:not(.large-song-card) { height: 82px; min-height: 82px; max-height: 82px; }
.rail-song-button:hover, .rail-song-button.is-active { background: var(--yellow); }
.song-card-edit { position: absolute; right: 9px; bottom: 9px; z-index: 2; display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink); }
.song-card-edit:hover { background: var(--yellow); }
.rail-song-entry.is-editing { height: auto; min-height: 0; }
.song-card-inline-editor { width: 100%; min-width: 0; border-color: var(--ink); background: var(--ink); color: white; }
.song-card-inline-editor > strong, .song-card-inline-editor label > span { color: white; }
.song-card-inline-editor .song-inline-actions { display: flex; gap: 5px; }
.song-card-inline-editor .song-inline-actions button { display: grid; width: 32px; min-height: 32px; place-items: center; padding: 0; }
.song-card-inline-editor .song-inline-actions button { background: white; color: var(--ink); }
.song-card-inline-editor .song-inline-actions .song-inline-save { margin-left: auto; background: var(--yellow); color: var(--ink); }
.song-card-inline-editor .song-inline-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.song-card-inline-editor .song-inline-delete { background: var(--coral); color: var(--ink); }
.home-song-card-wrap.is-editing .song-card-inline-editor { min-height: 100%; border-radius: 13px; box-shadow: 4px 4px 0 rgba(5, 5, 5, .14); }
.home-song-card-wrap .song-card-edit { right: 11px; bottom: 11px; }
.rail-song-copy { display: grid; min-width: 0; align-self: start; align-content: start; gap: 6px; }
.rail-song-button strong { overflow: hidden; font-size: .82rem; font-weight: 950; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.rail-song-button small { overflow: hidden; color: var(--muted); font-size: .61rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rail-song-layout-preview { width: 82px; height: 62px; align-self: start; aspect-ratio: auto; gap: 2px; margin: 0; }
.rail-song-layout-preview .home-layout-cell { border-radius: 2px; }
.rail-song-layout-preview .home-layout-tile { border-width: 1px; border-radius: 2px; font-size: .28rem; }
.rail-song-tags { gap: 3px; }
.rail-song-button:not(.large-song-card) .rail-song-tags { max-height: 41px; align-content: start; overflow: hidden; }
.rail-song-tags .entity-tag { min-height: 19px; padding: 2px 5px; border-width: 1px; border-radius: 5px; font-size: .5rem; }
.rail-song-button .connection-tag-role { color: inherit; font-family: inherit; font-size: .5rem; font-weight: 950; letter-spacing: .02em; text-transform: uppercase; }
.rail-song-expand-button { display: flex; min-height: 29px; align-items: center; justify-content: flex-end; gap: 4px; padding: 2px 3px; border: 0; background: transparent; color: var(--ink); font-size: .62rem; font-weight: 850; }
.rail-song-expand-button:hover { color: var(--blue); }
.rail-song-expand-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.rail-song-expand-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.rail-song-empty { margin: 0 2px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.rail-library-row { display: none; flex: 0 0 auto; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--ink); }
.song-view.module-rail-expanded .rail-library-row { display: grid; }
.rail-library-row > header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.rail-library-manage-button { padding: 4px 3px; border: 0; background: transparent; color: var(--ink); font-size: .62rem; font-weight: 850; }
.rail-library-manage-button:hover { color: var(--blue); }
.rail-library-row > div { display: grid; gap: 7px; }
.rail-library-card { display: grid; width: 100%; min-width: 0; min-height: 76px; align-content: start; gap: 6px; padding: 10px; border: 2px solid var(--ink); border-radius: 9px; background: white; color: var(--ink); text-align: left; }
.rail-library-card > strong { overflow: hidden; font-size: .9rem; font-weight: 950; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.rail-library-card > span, .rail-library-card > small { color: var(--muted); font-size: .6rem; font-weight: 700; line-height: 1.3; }
.rail-project-card > header { display: grid; gap: 6px; }
.rail-project-card > .rail-project-banner { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: -10px -10px 1px; padding: 8px 9px; border-radius: 7px 7px 0 0; background: var(--ink); color: white; }
.rail-project-card > header > strong { overflow-wrap: anywhere; font-size: .9rem; font-weight: 950; line-height: 1.12; white-space: normal; }
.rail-project-card.is-clickable { cursor: pointer; }
.rail-project-card.is-clickable:hover { background: var(--yellow); }
.rail-project-open { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow-wrap: anywhere; font-size: .9rem; font-weight: 950; line-height: 1.12; text-align: left; white-space: normal; }
.rail-project-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-project-badges span, .rail-project-badges strong { padding: 2px 5px; border: 1px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: .48rem; font-weight: 900; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.rail-project-badges .is-shared { background: var(--lavender); color: white; }
.rail-project-badges .is-personal { background: var(--green); color: white; }
.rail-project-badges .project-role-badge.is-owner, .rail-project-badges .project-role-badge.is-editor, .rail-project-badges .project-role-badge.is-viewer { background: var(--paper); color: var(--ink); }
.rail-project-banner .rail-project-badges { flex: 0 0 auto; }
.rail-project-banner .rail-project-badges span, .rail-project-banner .rail-project-badges strong { border-color: white; }
.rail-project-members { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-project-member { display: flex; min-height: 30px; align-items: center; gap: 5px; padding: 3px 7px 3px 3px; border: 1px solid var(--ink); border-radius: 8px; background: white; color: var(--ink); }
.rail-project-member i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 6px; background: var(--rail-member-color, var(--blue)); color: var(--rail-member-ink, white); font-style: normal; }
.rail-project-member svg { display: block; width: 18px; height: 18px; }
.rail-project-member b { font-size: .52rem; font-weight: 950; letter-spacing: -.02em; }
.rail-person-card:hover { background: var(--yellow); }
.rail-person-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-person-roles span { padding: 2px 6px; border: 1px solid var(--ink); border-radius: 5px; background: var(--cream); font-size: .54rem; font-weight: 850; }
.rail-person-roles small, .rail-project-songs > small { color: var(--muted); font-size: .6rem; font-weight: 700; }
.rail-project-songs { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
.rail-project-songs button { max-width: 100%; padding: 3px 6px; overflow: hidden; border: 1px solid var(--ink); border-radius: 5px; background: var(--paper); font-size: .56rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rail-project-card .rail-project-songs button { overflow: visible; text-align: left; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.rail-project-songs button:hover { background: var(--yellow); }
.rail-library-empty { margin: 4px 2px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.song-view.module-rail-expanded .workspace-presets { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--ink); }
.workspace-presets > header { margin-bottom: 2px; padding: 0 2px 2px; }
.workspace-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workspace-section-content { gap: 8px; }
.workspace-description { color: var(--muted); font-size: .7rem; font-weight: 700; line-height: 1.35; }
.workspace-add-button, .rail-song-add-button { display: grid; width: 29px; height: 29px; place-items: center; padding: 0 0 2px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-size: 1.18rem; font-weight: 850; line-height: 1; }
.workspace-add-button:hover, .workspace-add-button[aria-expanded="true"], .rail-song-add-button:hover, .rail-song-add-button[aria-expanded="true"] { background: var(--yellow); }
.workspace-add-button .material-symbols-outlined, .rail-song-add-button .material-symbols-outlined { font-size: 19px; }
.workspace-save-form { display: grid; gap: 8px; padding: 11px; border: 2px solid var(--ink); border-radius: 8px; background: var(--cream); }
.workspace-save-form.is-editing-workspace { border: 0; }
.workspace-save-form > strong { font-size: .86rem; font-weight: 950; }
.workspace-save-form label { display: grid; gap: 3px; }
.workspace-save-form label > span { font-size: .62rem; font-weight: 800; }
.workspace-save-form input, .workspace-save-form textarea { width: 100%; min-width: 0; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 6px; background: white; color: var(--ink); font-size: .74rem; font-weight: 500; line-height: 1.3; resize: vertical; }
.workspace-save-form > div { display: flex; gap: 5px; }
.workspace-save-form > div button { min-height: 31px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 6px; background: white; font-size: .64rem; font-weight: 850; }
.workspace-save-form > div button[type="submit"] { background: var(--yellow); }
.workspace-save-form .workspace-delete-button { width: 28px; padding: 0 0 2px; margin-left: auto; background: white; font-size: 1rem; line-height: 1; }
.workspace-delete-confirm { display: grid; gap: 6px; padding: 8px; border: 2px solid var(--ink); border-radius: 6px; background: white; }
.workspace-delete-confirm p { margin: 0; font-size: .68rem; font-weight: 700; line-height: 1.3; }
.workspace-delete-confirm > div { display: flex; gap: 5px; }
.workspace-delete-confirm button { min-height: 30px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 5px; background: white; font-size: .64rem; font-weight: 850; }
.workspace-delete-confirm .workspace-delete-confirm-button { background: var(--coral); }
.custom-workspace-list { display: flex; flex-direction: column; gap: 6px; }
.custom-workspace-list:empty { display: none; }
.workspace-premade-list { display: flex; flex-direction: column; gap: 8px; }
.workspace-preset-divider { display: flex; align-items: center; gap: 8px; margin: 3px 0; color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.workspace-preset-divider::before, .workspace-preset-divider::after { height: 1px; flex: 1 1 auto; background: var(--ink); content: ""; opacity: .38; }
.custom-workspace-card { position: relative; }
.custom-workspace-card .workspace-preset-button { padding-right: 36px; }
.workspace-edit-button { position: absolute; right: 7px; bottom: 7px; display: grid; width: 23px; height: 23px; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink); }
.workspace-edit-button:hover { background: var(--yellow); }
.workspace-edit-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.workspace-edit-button .material-symbols-outlined { font-size: 16px; }
.workspace-edit-button .material-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.song-view.module-rail-expanded .module-rail .workspace-presets { border-top-color: var(--ink); }
.song-view.song-library-expanded .module-rail { align-items: stretch; }
.song-view.song-library-expanded .song-page { display: none; }
.song-view.song-library-expanded .rail-song-list { flex: 0 0 auto; }
.song-view.song-library-expanded .rail-song-list > .rail-section-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; justify-content: start; gap: 12px; padding: 2px 2px 10px; }
.song-view.song-library-expanded [data-rail-song-list] { display: contents; max-height: none; overflow: visible; padding: 0; scrollbar-gutter: auto; }
.song-view.song-library-expanded .rail-song-entry { order: 1; }
.song-view.song-library-expanded .rail-song-entry.is-editing { min-height: 140px; }
.song-view.song-library-expanded .song-card-inline-editor { width: 100%; min-width: 0; min-height: 140px; order: 2; align-content: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 9px; background: var(--ink); color: white; }
.song-view.song-library-expanded .song-card-inline-editor > strong, .song-view.song-library-expanded .song-card-inline-editor > div { grid-column: 1 / -1; }
.song-view.song-library-expanded .song-card-inline-editor > div { align-self: end; }
.large-song-card-wrap { width: 100%; }
.large-song-card-wrap:not(.is-editing) { height: 140px; min-height: 140px; }
.large-song-card { width: 100%; min-width: 0; height: 140px; min-height: 140px; grid-template-columns: minmax(166px, 54%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 0; overflow: hidden; padding: 10px 40px 10px 10px; border: 2px solid var(--ink); border-radius: 9px; background: white; box-shadow: none; transform: none; }
.large-song-card > .rail-song-layout-preview { width: 100%; height: auto; max-height: 100%; aspect-ratio: 4 / 3; grid-column: 1; grid-row: 1; align-self: start; }
.large-song-card-copy { height: 100%; min-height: 0; grid-column: 2; grid-row: 1; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.large-song-card-copy > strong { display: -webkit-box; max-height: 2.16em; grid-column: auto; grid-row: auto; overflow: hidden; font-size: 1.05rem; line-height: 1.08; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.large-song-card-tags { max-height: 100%; grid-column: auto; grid-row: auto; align-content: start; overflow: hidden; }
.large-song-card:hover { background: var(--yellow); transform: none; }
.home-song-row .home-layout-tile { border-width: 1px; border-color: rgba(5,5,5,.62); }
.song-view.song-library-expanded .rail-song-button strong, .song-view.song-library-expanded .rail-project-card > header > strong, .song-view.song-library-expanded .rail-project-open, .song-view.song-library-expanded .workspace-preset-button strong { align-self: start; color: var(--ink); font-size: 1.05rem; font-weight: 950; line-height: 1.08; overflow-wrap: anywhere; white-space: normal; }
.song-view.song-library-expanded .rail-project-banner .rail-project-open { color: white; }
.song-view.song-library-expanded .rail-library-row { display: grid; }
.song-view.song-library-expanded .rail-library-row > div { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; }
.song-view.song-library-expanded .rail-library-card { width: 250px; min-width: 250px; min-height: 92px; flex: 0 0 250px; }
.song-view.song-library-expanded .workspace-presets { flex: 0 0 auto; }
.song-view.song-library-expanded .workspace-section-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 12px; }
.song-view.song-library-expanded .workspace-description,
.song-view.song-library-expanded .custom-workspace-list,
.song-view.song-library-expanded .workspace-preset-divider,
.song-view.song-library-expanded .workspace-premade-list,
.song-view.song-library-expanded .workspace-preset-status { grid-column: 1 / -1; }
.song-view.song-library-expanded .workspace-save-form[data-workspace-form] { width: 100%; min-width: 0; min-height: 140px; align-content: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 9px; background: white; }
.song-view.song-library-expanded .workspace-save-form[data-workspace-form] > strong,
.song-view.song-library-expanded .workspace-save-form[data-workspace-form] > div,
.song-view.song-library-expanded .workspace-save-form[data-workspace-form] > .workspace-delete-confirm { grid-column: 1 / -1; }
.song-view.song-library-expanded .workspace-save-form[data-workspace-form] > div { align-self: end; }
.song-view.song-library-expanded .workspace-save-form[data-workspace-form] textarea { height: 35px; min-height: 35px; resize: none; }
.song-view.song-library-expanded .custom-workspace-list, .song-view.song-library-expanded .workspace-premade-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 2px 2px 10px; }
.song-view.song-library-expanded .custom-workspace-card, .song-view.song-library-expanded .workspace-premade-list > .workspace-preset-button { width: 100%; min-width: 0; }
.song-view.song-library-expanded .workspace-preset-button { min-height: 140px; grid-template-columns: minmax(126px, 54%) minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 6px; padding: 10px; border-radius: 9px; }
.song-view.song-library-expanded .workspace-preview { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.workspace-save-form.song-card-inline-editor {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.workspace-preset-button {
  display: grid;
  width: 100%;
  min-height: 103px;
  grid-template-columns: 106px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  align-self: start;
  column-gap: 12px;
  row-gap: 5px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  text-align: left;
}
.workspace-preset-button:hover { background: var(--yellow); transform: none; }
.workspace-preset-button.is-active { background: var(--yellow); }
.workspace-preset-button strong { grid-column: 2; grid-row: 1; align-self: start; font-size: .94rem; font-weight: 950; line-height: 1.08; }
.workspace-preset-button:hover strong { color: var(--ink); }
.workspace-preset-button small { display: block; grid-column: 2; grid-row: 2; align-self: start; color: var(--ink); font-size: .7rem; font-weight: 400; line-height: 1.3; }
.workspace-preview { display: grid; width: 106px; height: 80px; grid-column: 1; grid-row: 1 / span 2; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; }
.workspace-cell { display: grid; min-width: 0; place-items: center; overflow: hidden; border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); font-size: .32rem; font-style: normal; font-weight: 950; line-height: 1; }
.workspace-preview .preview-chords, .workspace-preview .preview-lyrics { background: var(--tool-writing); }
.workspace-preview .preview-audio { background: var(--tool-reference); }
.workspace-preview .preview-record { background: var(--tool-reference); }
.workspace-preview .preview-metronome { background: var(--tool-reference); }
.workspace-preview .preview-info, .workspace-preview .preview-tasks, .workspace-preview .preview-notepad { background: var(--tool-organizing); }
.workspace-preview .preview-files { background: var(--tool-files); }
.workspace-preview-capture .preview-record { grid-column: 1 / span 2; grid-row: 1 / span 3; }
.workspace-preview-capture .preview-lyrics { grid-column: 3 / span 2; grid-row: 1 / span 3; }
.workspace-preview-write .preview-lyrics { grid-column: 1; grid-row: 1 / span 3; }
.workspace-preview-write .preview-chords { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.workspace-preview-write .preview-audio { grid-column: 2 / span 2; grid-row: 3; }
.workspace-preview-write .preview-files { grid-column: 4; grid-row: 1; }
.workspace-preview-write .preview-record { grid-column: 4; grid-row: 2 / span 2; }
.workspace-preview-chart .preview-lyrics { grid-column: 1; grid-row: 1 / span 3; }
.workspace-preview-chart .preview-chords { grid-column: 2 / span 3; grid-row: 1 / span 3; }
.workspace-preview-lyrics .preview-notepad { grid-column: 1 / span 2; grid-row: 1 / span 3; }
.workspace-preview-lyrics .preview-lyrics { grid-column: 3 / span 2; grid-row: 1 / span 3; }
.workspace-preview-review .preview-audio { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.workspace-preview-review .preview-record { grid-column: 1; grid-row: 3; }
.workspace-preview-review .preview-tasks { grid-column: 2; grid-row: 3; }
.workspace-preview-review .preview-notepad { grid-column: 3; grid-row: 1 / span 3; }
.workspace-preview-review .preview-files { grid-column: 4; grid-row: 1 / span 3; }
.workspace-preview-revise .preview-audio { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.workspace-preview-revise .preview-record { grid-column: 1 / span 2; grid-row: 3; }
.workspace-preview-revise .preview-lyrics { grid-column: 3 / span 2; grid-row: 1 / span 3; }
.workspace-preview-finish .preview-files { grid-column: 1; grid-row: 1 / span 3; }
.workspace-preview-finish .preview-notepad { grid-column: 2; grid-row: 1 / span 3; }
.workspace-preview-finish .preview-record { grid-column: 3; grid-row: 1 / span 3; }
.workspace-preview-finish .preview-tasks { grid-column: 4; grid-row: 1 / span 3; }
.workspace-preset-status { min-height: 1rem; margin: 0 2px; color: var(--muted); font-size: .67rem; font-weight: 800; }

.song-page {
  --song-page-padding-x: clamp(18px, 3vw, 34px);
  --song-page-padding-top: 14px;
  --song-page-padding-bottom: 28px;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  margin-left: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
  padding: var(--song-page-padding-top) var(--song-page-padding-x) var(--song-page-padding-bottom);
}
.song-page.has-account-files-return { grid-template-rows: auto auto minmax(0, 1fr); }
.song-page.has-account-files-return .account-files-return-row { grid-row: 1; }
.song-page.has-account-files-return .song-heading { grid-row: 2; }
.song-page.has-account-files-return .module-grid { grid-row: 3; }
.song-view.standalone-tool-mode .song-page.has-account-files-return { grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 10px; }
.song-view.standalone-tool-mode .song-page.has-account-files-return .account-files-return-row { grid-row: 1; }
.song-view.standalone-tool-mode .song-page.has-account-files-return .module-grid { height: auto; min-height: 0; grid-row: 2; }
.song-heading {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 38px;
  justify-self: start;
  padding: 6px 0;
  text-align: left;
  transition: none;
}
.song-heading h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.15vw, 2.85rem);
  line-height: .96;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.song-title-button { display: block; width: max-content; margin: -4px -7px; padding: 4px 7px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; white-space: nowrap; transition: background-color .12s ease; }
.song-title-button:disabled { color: inherit; cursor: default; opacity: 1; }
.song-view.module-focused .song-title-button { cursor: pointer; }
.song-view.module-focused .song-title-button:hover { background: rgba(5, 5, 5, .14); color: inherit; }
.song-view.module-focused .song-title-button:focus-visible { outline: 3px solid rgba(5, 5, 5, .28); outline-offset: 2px; background: rgba(5, 5, 5, .14); }
.song-title-line { display: grid; min-width: 0; grid-template-columns: max-content minmax(0, 1fr) max-content auto; align-items: start; justify-content: flex-start; gap: 9px; }
.song-title-line h1 { width: max-content; min-width: 0; max-width: none; align-self: center; }
.song-heading.is-sections-row .song-title-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
.song-heading.is-sections-row .song-title-line h1 { grid-column: 1; grid-row: 1; }
.song-heading.is-sections-row .song-heading-tag-row { grid-column: 1; grid-row: 2; }
.song-heading.is-sections-row .section-controls { grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0; }
.song-heading.is-sections-row .song-delete-button { grid-column: 2; grid-row: 1; }
.song-heading.is-stacked .song-title-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
.song-heading.is-stacked .song-title-line h1 { width: 100%; max-width: 100%; grid-column: 1; grid-row: 1; }
.song-heading.is-stacked .song-title-button { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; }
.song-heading.is-stacked .song-heading-tag-row { grid-column: 1 / -1; grid-row: 2; }
.song-heading.is-stacked .section-controls { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-left: 0; }
.song-heading.is-stacked .song-delete-button { grid-column: 2; grid-row: 1; }
.song-heading-tag-row { display: grid; width: 100%; min-width: 0; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 5px; }
.song-title-line > .song-heading-tag-row { align-self: center; }
.song-save-status { display: flex; min-height: 1.1rem; align-items: center; gap: 6px; margin-top: 2px; color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .02em; }
.song-save-status::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; content: ""; }
.song-save-status[data-save-state="saving"]::before { animation: save-status-pulse 1s ease-in-out infinite; }
.song-save-status[data-save-state="saved"] { color: var(--green, #126957); }
.song-save-status[data-save-state="error"] { color: var(--coral); }
.song-save-status[data-save-state="error"]::before { background: var(--coral); }
@keyframes save-status-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.song-heading-tag-row:has(.song-heading-tags-expand[hidden]) { grid-template-columns: minmax(0, 1fr); gap: 0; }
.song-heading-tags-expand { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.song-heading-tags-expand:hover { background: var(--yellow); }
.song-heading-tags-expand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.song-heading-tag-row.is-expanded .song-heading-tags-expand svg { transform: rotate(180deg); }
.song-heading-tags { width: 100%; max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 3px 0 5px; overscroll-behavior-x: contain; scrollbar-width: none; }
.song-heading-tag-row.is-expanded .song-heading-tags { flex-wrap: wrap; overflow-x: hidden; }
.song-heading-tags::-webkit-scrollbar { display: none; }
.song-delete-button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); font-size: .85rem; font-weight: 900; }
.song-delete-button:hover { background: var(--coral); }

.module-grid {
  --grid-columns: 4;
  --grid-visible-rows: 3;
  --grid-column-min: 280px;
  --grid-column-max: 430px;
  --grid-column-width: 240px;
  --grid-gap: 8px;
  --grid-row-height: 220px;
  --grid-scroll-rail: clamp(18px, 3vw, 34px);
  position: relative;
  display: grid;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 1px 1px 8px;
  grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
  grid-template-rows: repeat(var(--grid-visible-rows), var(--grid-row-height));
  grid-auto-flow: column;
  grid-auto-columns: var(--grid-column-width);
  grid-auto-rows: var(--grid-row-height);
  gap: var(--grid-gap);
  align-content: start;
  justify-content: safe center;
  -webkit-user-select: none;
  user-select: none;
}
.module-grid.is-responsive-grid {
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: center;
}
.empty-canvas {
  display: grid;
  grid-column: 1 / -1;
  min-height: 280px;
  place-items: center;
  border: 2px dashed rgba(5, 5, 5, .2);
  border-radius: 16px;
  color: var(--muted);
}
.empty-canvas p { margin: 0; font-size: .72rem; font-weight: 800; }

.module-frame {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 11px;
  overflow: hidden;
  padding: 13px;
  border: 5px solid var(--ink);
  border-radius: 14px;
  background: white;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity .12s ease, transform .12s ease;
}
.module-grid.focus-mode { display: block; overflow: hidden; }
.module-grid.focus-mode .module-frame { display: none; }
.module-grid.focus-mode .module-frame.focused-module {
  display: grid;
  width: 100%;
  height: 100%;
  cursor: default;
}
.module-grid.focus-mode .module-resize { display: none; }
.song-view.module-focused { grid-template-columns: 0 minmax(0, 1fr); }
.song-view.module-focused .module-rail { visibility: hidden; opacity: 0; transform: translateX(-100%); pointer-events: none; }
.song-view.module-focused .focused-module { cursor: default; }
.module-frame.dragging {
  z-index: 2;
  opacity: .46;
  box-shadow: 6px 6px 0 rgba(5, 5, 5, .18);
}
.grid-drop-preview {
  z-index: 4;
  border: 4px solid var(--yellow);
  border-radius: 14px;
  background: rgba(245, 206, 34, .2);
  pointer-events: none;
}
.resize-cell-highlight {
  z-index: 5;
  border: 3px solid var(--yellow);
  border-radius: 14px;
  background: rgba(245, 206, 34, .22);
  pointer-events: none;
}
.resize-live-outline {
  position: absolute;
  z-index: 9;
  min-width: 0;
  min-height: 0;
  border: 4px solid var(--yellow);
  border-radius: 14px;
  background: transparent;
  pointer-events: none;
}
.resize-live-outline::after {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  border-right: 4px solid var(--yellow);
  border-bottom: 4px solid var(--yellow);
  border-radius: 0 0 8px 0;
  content: "";
}
.resize-live-outline.resize-from-left::after {
  right: auto;
  left: -4px;
  border-right: 0;
  border-left: 4px solid var(--yellow);
  border-radius: 0 0 0 8px;
}
.module-frame-head {
  position: relative;
  z-index: 4;
  display: grid;
  min-width: 0;
  min-height: 38px;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: stretch;
  margin: -13px -13px 0;
  border-bottom: 3px solid var(--ink);
  background: var(--ink);
  color: white;
}
.module-frame-head > h2 { min-width: 0; align-self: stretch; margin: 0; padding: 0; font-size: 1.08rem; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere; }
.mobile-module-order { display: none; }
.module-enter { width: 100%; height: 100%; min-width: 0; padding: 0 10px; overflow: hidden; border: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.module-enter.is-pointer-hovered { background: var(--yellow); color: var(--ink); }
.module-enter:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.module-enter:disabled { background: transparent; color: inherit; cursor: default; opacity: 1; }
.module-grid.focus-mode .module-frame-head { grid-template-columns: 38px minmax(0, 1fr) 38px; }
.module-grid.focus-mode .module-enter { padding-left: 10px; }
.module-grid.focus-mode .module-drag { display: none; }
.module-back {
  display: none;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px 0 0 0;
  background: transparent;
  color: white;
  -webkit-appearance: none;
  appearance: none;
}
.module-grid.focus-mode .module-back { display: grid; }
.module-back.is-pointer-hovered { background: var(--yellow); color: var(--ink); }
.module-back:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.module-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.module-drag {
  position: relative;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-right: 3px solid var(--ink);
  border-radius: 9px 0 0 0;
  background: var(--yellow);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: none;
}
.module-drag::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  content: none;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}
.module-drag .material-symbols-outlined { font-size: 20px; line-height: 1; }
.module-drag.is-pointer-hovered, .module-drag:focus-visible { background: var(--yellow); box-shadow: inset 0 0 0 3px rgba(5, 5, 5, .18); }
.module-drag:active { cursor: grabbing; }
.module-drag:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.module-grid:not(.focus-mode) .module-drag { background: var(--ink); box-shadow: none; }
.module-grid:not(.focus-mode) .module-drag::before { color: white; }
.module-grid:not(.focus-mode) .module-drag.is-pointer-hovered,
.module-grid:not(.focus-mode) .module-drag:focus-visible,
.module-grid:not(.focus-mode) .module-drag:active,
.module-grid:not(.focus-mode) .module-frame.dragging .module-drag { background: var(--yellow); box-shadow: inset 0 0 0 3px rgba(5, 5, 5, .18); }
.module-grid:not(.focus-mode) .module-drag.is-pointer-hovered::before,
.module-grid:not(.focus-mode) .module-drag:focus-visible::before,
.module-grid:not(.focus-mode) .module-drag:active::before,
.module-grid:not(.focus-mode) .module-frame.dragging .module-drag::before { color: var(--ink); }
.module-remove {
  position: relative;
  z-index: 6;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, .35);
  border-radius: 0 9px 0 0;
  background: var(--ink);
  color: transparent;
  font-size: 0;
  transition: background .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.module-remove::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  content: none;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}
.module-remove .material-icon-close { position: relative; width: 16px; height: 16px; fill: white !important; stroke: white !important; stroke-width: 22px; stroke-linejoin: round; paint-order: stroke fill; }
.module-remove:hover .material-icon-close, .module-remove:focus-visible .material-icon-close { fill: var(--ink) !important; stroke: var(--ink) !important; }
.module-remove:hover, .module-remove:focus-visible { background: var(--coral); }
.module-remove:hover::before, .module-remove:focus-visible::before { color: var(--ink); }
.module-remove:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.module-close-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: grid; min-width: 148px; max-width: calc(100vw - 36px); gap: 2px; padding: 5px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 4px 4px 0 rgba(5,5,5,.18); color: var(--ink); }
.module-close-menu button { min-height: 30px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); text-align: left; font: 900 .57rem/1.1 var(--writing-font-family); cursor: pointer; }
.module-close-menu button:hover, .module-close-menu button:focus-visible { background: var(--yellow); outline: 0; }
.module-resize {
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
}
.module-resize-right { right: 0; }
.module-resize-left { left: 0; cursor: nesw-resize; }
.module-resize::before {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0 0 8px 0;
  background: var(--ink);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
}
.module-resize-left::before {
  right: auto;
  left: 0;
  border-radius: 0 0 0 8px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.module-resize.is-pointer-hovered { background: transparent; }
.module-resize:active::before, .module-frame.resizing .module-resize::before { background: var(--yellow); }
.module-frame.resizing { z-index: 7; user-select: none; }
.module-grid.suppress-interaction-hover .module-drag { background: var(--ink); box-shadow: none; }
.module-grid.suppress-interaction-hover .module-drag::before { color: white; }
.module-grid.suppress-interaction-hover .module-enter { background: transparent; color: white; }
.module-grid.suppress-interaction-hover .module-resize { background: transparent; }
.module-grid.suppress-interaction-hover .module-resize::before { background: var(--ink); }
.module-grid.suppress-interaction-hover .task-list-column > header .task-list-grip { background: transparent; }
.placeholder-lines { display: grid; gap: 7px; margin-top: 16px; }
.placeholder-lines span { display: block; height: 6px; border-radius: 99px; background: var(--cream); }
.placeholder-lines span:nth-child(2) { width: 72%; }
.placeholder-lines span:nth-child(3) { width: 86%; }
.placeholder-lines span:nth-child(4) { width: 54%; }

.module-chords, .module-lyricEditor { background: var(--tool-writing); }
.module-info, .module-todos, .module-lyrics { background: var(--tool-organizing); }
.module-audio, .module-record { background: var(--tool-reference); }
.module-metronome { background: var(--tool-reference); }
.module-files { background: var(--tool-files); }
.module-metronome .module-body { min-height: 0; overflow: hidden; }
.audio-utility-bar { display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.audio-utility-section { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.audio-utility-section > strong { font-size: .56rem; font-weight: 950; line-height: 1; letter-spacing: .07em; text-transform: uppercase; }
.audio-utility-row { display: flex; min-width: 0; align-items: center; }
.metronome-utility-row, .pad-utility-row { justify-content: flex-start; gap: 5px; }
.utility-play { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 9px; background: white !important; color: var(--ink) !important; }
.utility-play:hover, .utility-play:focus-visible, .utility-play:active { background: var(--yellow) !important; color: var(--ink) !important; }
.audio-utility-row.is-playing .utility-play { background: var(--yellow) !important; color: var(--ink) !important; }
.utility-play .material-symbols-outlined { width: 22px; height: 22px; font-size: 22px; line-height: 1; }
.metronome-tempo { display: grid; height: 42px; min-width: 130px; flex: 1 1 auto; grid-template-columns: 42px minmax(46px, 1fr) 42px; align-items: stretch; gap: 0; overflow: hidden; border-radius: 9px; background: white; box-shadow: inset 0 0 0 2px var(--ink); }
.metronome-tempo > button { position: relative; display: grid; width: 42px; height: 42px; min-width: 42px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.metronome-tempo > button::before { position: absolute; inset: 4px; border-radius: 5px; background: transparent; content: ""; pointer-events: none; }
.metronome-tempo > button:hover, .metronome-tempo > button:focus-visible, .metronome-tempo > button:active { background: transparent; outline: 0; }
.metronome-tempo > button:hover::before, .metronome-tempo > button:focus-visible::before, .metronome-tempo > button:active::before { background: var(--yellow); }
.metronome-tempo > button .material-symbols-outlined { position: relative; z-index: 1; font-size: 16px; line-height: 1; }
.metronome-tempo > label { position: relative; display: grid; min-width: 0; place-items: center; padding: 0; border: 0; background: transparent; }
.module-metronome .metronome-tempo input { width: 100%; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 1.18rem; font-weight: 950; line-height: 1; letter-spacing: -.06em; text-align: center; appearance: textfield; }
.module-metronome .metronome-tempo input:focus { box-shadow: none; }
.metronome-tempo input::-webkit-inner-spin-button, .metronome-tempo input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.metronome-tempo > label:focus-within { border-radius: 8px; box-shadow: 0 0 0 3px var(--yellow); }
.metronome-tap { display: grid; width: 42px; height: 42px; min-width: 0; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 9px; background: white; }
.metronome-tap:hover, .metronome-tap:focus-visible, .metronome-tap:active { background: var(--yellow); outline: 0; }
.metronome-tap .material-symbols-outlined { display: block; width: 21px; height: 21px; overflow: hidden; font-size: 21px; line-height: 1; }
.metronome-tone { display: grid; width: 42px; height: 42px; min-width: 42px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 9px; background: white; color: var(--ink); }
.metronome-tone:hover, .metronome-tone:focus-visible, .metronome-tone:active { background: var(--yellow); outline: 0; }
.metronome-tone .material-symbols-outlined { width: 22px; height: 22px; overflow: hidden; font-size: 22px; line-height: 1; }
.pad-key { position: relative; display: grid; width: 68px; min-width: 0; }
.pad-key::after { position: absolute; top: 50%; right: 8px; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); content: ""; pointer-events: none; transform: translateY(-68%) rotate(45deg); }
.pad-key select { width: 100%; height: 42px; min-height: 42px; padding: 0 24px 0 10px; border: 2px solid var(--ink); border-radius: 9px; appearance: none; -webkit-appearance: none; background: white; color: var(--ink); font-size: .72rem; font-weight: 950; outline: 0; }
.pad-key:focus-within { border-radius: 9px; box-shadow: 0 0 0 3px var(--yellow); }
.module-metronome .pad-key select:focus { box-shadow: none; }
.pad-waveform { container-name: pad-waveform; container-type: inline-size; display: flex; height: 42px; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: space-between; border: 2px solid var(--ink); border-radius: 9px; background: white; transition: background-color .12s ease; }
.audio-utility-volume { display: flex; width: 100%; height: 14px; align-items: center; }
.audio-utility-volume input[type="range"] { width: 100%; height: 10px; margin: 0; padding: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, var(--ink) 0 var(--volume), white var(--volume) 100%); cursor: ew-resize; appearance: none; -webkit-appearance: none; }
.audio-utility-volume input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.audio-utility-volume input[type="range"]::-webkit-slider-thumb { width: 1px; height: 10px; border: 0; background: transparent; opacity: 0; appearance: none; -webkit-appearance: none; }
.audio-utility-volume input[type="range"]::-moz-range-track { height: 100%; border: 0; background: transparent; }
.audio-utility-volume input[type="range"]::-moz-range-progress { background: transparent; }
.audio-utility-volume input[type="range"]::-moz-range-thumb { width: 1px; height: 10px; border: 0; background: transparent; opacity: 0; }
.audio-utility-volume input[type="range"]:focus { box-shadow: 0 0 0 3px var(--yellow); }
.pad-waveform i { display: none; width: 3px; height: 12px; flex: 0 0 3px; border-radius: 3px; background: var(--ink); opacity: .28; transform-origin: center; }
.pad-waveform i:nth-child(-n + 12) { display: block; }
.pad-utility-row.is-playing .pad-waveform { background: white; }
.pad-utility-row.is-playing .pad-waveform i { opacity: 1; }
.pad-utility-row.is-playing .pad-waveform i { animation: pad-waveform 1.05s ease-in-out calc(var(--bar-index) * -.09s) infinite alternate; }
@container pad-waveform (min-width: 120px) { .pad-waveform i:nth-child(-n + 18) { display: block; } }
@container pad-waveform (min-width: 160px) { .pad-waveform i:nth-child(-n + 24) { display: block; } }
@container pad-waveform (min-width: 210px) { .pad-waveform i:nth-child(-n + 28) { display: block; } }
@keyframes pad-waveform { from { height: 9px; } to { height: 34px; } }
@media (max-width: 760px) {
  .metronome-utility-row, .pad-utility-row { gap: 5px; }
  .utility-play, .metronome-tap { width: 40px; height: 40px; }
  .metronome-tempo { height: 40px; min-width: 124px; grid-template-columns: 40px minmax(44px, 1fr) 40px; }
  .metronome-tempo > button { width: 40px; height: 40px; min-width: 40px; }
  .module-metronome .metronome-tempo input { height: 40px; font-size: 1.08rem; }
  .metronome-tone { width: 40px; height: 40px; min-width: 40px; }
  .pad-key { width: 64px; }
  .pad-key select { height: 40px; min-height: 40px; }
  .pad-waveform { height: 40px; }
}
.module-info:not(.focused-module) { color: var(--ink); }
.module-info:not(.focused-module) .module-body { overflow: hidden; }
.module-body { min-height: 0; overflow: auto; cursor: default; }
.module-lyrics .module-body,
.module-lyricEditor .module-body,
.module-todos .module-body,
.module-chords .module-body {
  -webkit-user-select: text;
  user-select: text;
}
.module-frame input, .module-frame textarea, .module-frame select { cursor: text; }
.module-frame button, .module-frame label, .module-frame select { cursor: pointer; }
.module-frame input, .module-frame textarea, .module-frame select {
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 500;
  outline: 0;
}
.module-frame input:focus, .module-frame textarea:focus, .module-frame select:focus { box-shadow: 0 0 0 3px var(--yellow); }
.module-frame label > span { font-size: .6rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.module-empty-message { margin: 10px 2px; color: var(--muted); font-size: .7rem; font-weight: 600; }

.info-summary { display: grid; height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 2px 1px; }
.info-summary-desktop { display: grid; height: 100%; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr); align-content: stretch; gap: 4px; }
.info-summary-mobile { display: none; min-width: 0; align-content: start; gap: 5px; }
.info-summary-title { min-width: 0; overflow: hidden; color: var(--ink); font-size: clamp(1.05rem, 1.45vw, 1.25rem); font-weight: 900; line-height: 1; opacity: 1; text-overflow: ellipsis; white-space: nowrap; }
.info-summary-primary-tags { flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.info-summary-primary-tags > span { min-width: 0; min-height: 20px; overflow: hidden; padding: 2px 6px; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.info-summary-preview-box { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto; gap: 3px; overflow: hidden; }
.info-summary-preview-box > header { display: flex; min-width: 0; grid-row: 2; align-items: center; justify-content: space-between; gap: 7px; }
.info-summary-preview-box > header > span { font-size: .48rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.info-summary-preview-box > header > small { color: var(--muted); font-size: .47rem; font-weight: 850; }
.info-summary-credit-list { display: grid; min-width: 0; min-height: 0; grid-row: 3; grid-template-columns: repeat(var(--info-credit-count, 1), minmax(0, 1fr)); align-items: start; gap: 4px; }
.info-summary-credit-person { display: grid; height: 28px; min-width: 0; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 4px; padding: 2px 3px; border: 1px solid var(--ink); border-radius: 6px; background: white; }
.info-summary-credit-person > i { display: grid; width: 22px; height: 22px; place-items: center; overflow: hidden; border-radius: 6px; background: var(--blue); color: white; font-size: .43rem; font-style: normal; font-weight: 950; }
.info-summary-credit-person > i.is-profile-avatar { background: var(--credit-avatar-color); color: var(--credit-avatar-ink); }
.info-summary-credit-person > i svg { width: 20px; height: 20px; }
.info-summary-credit-person > span { display: grid; min-width: 0; gap: 1px; }
.info-summary-credit-person strong, .info-summary-credit-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-summary-credit-person strong { font-size: .55rem; line-height: 1; }
.info-summary-credit-person small { color: var(--muted); font-size: .46rem; font-weight: 800; line-height: 1; }
.info-summary-ownership-box { min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 3px; }
.info-summary-owner-list { display: flex; min-width: 0; min-height: 0; grid-row: 3; align-items: center; gap: 4px; overflow: hidden; }
.info-summary-owner { display: inline-flex; height: 28px; min-width: 0; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--cream); font-size: .5rem; }
.info-summary-owner b { font-weight: 950; }
.info-summary-owner strong { font-size: inherit; }
.info-summary-allocation { display: inline-flex; height: 28px; flex: 0 0 auto; align-items: center; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 6px; color: var(--ink); font-size: .47rem; font-weight: 950; line-height: 1; }
.info-summary-allocation.is-complete { background: var(--green); color: white !important; }
.info-summary-allocation.is-incomplete { background: var(--yellow); }
.info-summary-more, .info-summary-box-empty { color: var(--muted); font-size: .54rem; font-weight: 850; }
.info-summary-details { display: grid; min-width: 0; gap: 3px; margin: 0; }
.info-summary-details > div { display: grid; min-width: 0; grid-template-columns: 58px minmax(0, 1fr); align-items: baseline; gap: 7px; }
.info-summary-details dt { color: rgba(5,5,5,.58); font-size: .48rem; font-weight: 900; letter-spacing: .055em; line-height: 1.15; text-transform: uppercase; }
.info-summary-details dd { min-width: 0; overflow: hidden; margin: 0; color: var(--ink); font-size: .62rem; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px), (max-height: 520px) and (max-width: 760px) {
  .info-summary-desktop { display: none; }
  .info-summary-mobile { display: grid; }
}
.info-module-content { display: grid; gap: 30px; padding: 1px; }
.info-credits-column { display: grid; min-width: 0; align-content: start; gap: 20px; }
.info-song-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 10px 8px; }
.info-song-hero > div { display: grid; min-width: 0; gap: 8px; }
.info-song-hero > .info-title-editor { flex: 1 1 auto; }
.info-song-hero > .info-song-hero-actions { display: flex; flex: 0 0 auto; gap: 3px; }
.info-song-hero h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.6rem, 3.15vw, 2.85rem); font-weight: 700; line-height: .96; letter-spacing: -.035em; }
.info-print-button { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); }
.info-print-button:hover, .info-print-button:focus-visible { background: white; outline: 0; }
.info-print-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-print-button .material-icon-file-export { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.info-print-button .material-icon-contract { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.info-print-button .material-symbols-outlined { font-size: 21px; }
.info-leave-song-button { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); }
.info-leave-song-button:hover, .info-leave-song-button:focus-visible { background: white; outline: 0; }
.info-leave-song-button .material-symbols-outlined { font-size: 20px; }
.info-focused-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 42px); align-items: start; }
.info-focused-column { display: grid; min-width: 0; align-content: start; gap: 15px; padding: 4px 0; }
.info-column-heading { display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 9px; }
.info-column-heading > span { font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.info-column-heading > small { color: var(--muted); font-size: .58rem; font-weight: 800; }
.info-section-edit-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); }
.info-section-edit-button:hover { background: white; }
.info-section-edit-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-section-edit-button .material-symbols-outlined { font-size: 20px; }
.info-section-edit-button .material-icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.info-read-card { display: grid; gap: 10px; padding: 13px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.info-read-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 1.25rem; line-height: 1; letter-spacing: -.035em; }
.info-read-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.info-read-tags > span, .info-read-tags > button { display: inline-flex; min-height: 25px; align-items: center; justify-content: center; padding: 4px 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--cream); color: var(--ink); font-size: .56rem; font-weight: 850; line-height: 1.1; text-align: center; }
.info-read-tags .is-project { background: var(--lavender); color: white; }
.info-read-tags .artist-tag { background: var(--green); color: white; }
.info-read-tags .is-muted { color: var(--muted); }
.info-project-button { cursor: pointer; }
.info-project-button:hover { background: var(--yellow); color: var(--ink); }
.info-project-button span { margin-left: 6px; border: 0; background: transparent; color: inherit; }
.info-read-list, .info-writer-read-list { display: grid; gap: 6px; }
.info-credit-read-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(110px, auto) auto auto; align-items: center; gap: 8px; min-height: 42px; padding: 7px 10px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper); }
.info-credit-read-row.is-pending { color: #777; background: #ededeb; }
.info-credit-read-row i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: var(--blue); color: white; font-size: .52rem; font-style: normal; font-weight: 950; }
.info-credit-read-row i.is-profile-avatar { overflow: hidden; background: var(--credit-avatar-color); color: var(--credit-avatar-ink); }
.info-credit-read-row i.is-profile-avatar svg { width: 27px; height: 27px; color: currentColor; }
.info-credit-read-row > div { display: grid; min-width: 0; gap: 1px; }
.info-credit-read-row strong { min-width: 0; overflow-wrap: anywhere; font-size: .7rem; }
.info-credit-read-row small { color: var(--muted); font-size: .53rem; font-weight: 800; }
.access-role-tag { display: inline-flex; min-height: 0; align-items: center; justify-content: center; padding: 3px 6px; border: 1px solid var(--ink); border-radius: 5px; background: var(--cream); color: var(--ink); font-size: .54rem; font-weight: 900; line-height: 1.1; letter-spacing: 0; text-transform: none; }
.access-role-tag.is-owner, .access-role-tag.is-editor, .access-role-tag.is-viewer { background: var(--paper); color: var(--ink); }
.access-role-tag.is-manual { background: var(--yellow); color: var(--ink); }
.info-credit-role-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.info-credit-role-tags b { padding: 3px 6px; border: 1px solid var(--ink); border-radius: 5px; background: var(--cream); font-size: .54rem; }
.info-section-editor { display: grid; gap: 9px; padding: 11px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.info-section-editor > label { display: grid; gap: 5px; }
.info-section-editor > label > input, .info-section-editor > label > select { width: 100%; height: 38px; padding: 0 9px; }
.info-fixed-field { display: flex; min-height: 36px; align-items: center; padding: 0 9px; border: 1px solid var(--ink); border-radius: 7px; background: var(--cream); font-size: .68rem; font-weight: 800; letter-spacing: normal; text-transform: none; }
.info-editor-actions { display: flex; justify-content: flex-end; gap: 6px; grid-column: 1 / -1; }
.info-editor-actions button { min-height: 32px; padding: 0 9px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); font-size: .62rem; font-weight: 900; }
.info-editor-actions button:first-child { background: var(--yellow); }
.info-editor-actions .info-action-icon { display: grid; width: 36px; height: 36px; min-height: 36px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.info-editor-actions .info-action-icon:first-child { background: var(--yellow); }
.info-editor-actions .info-action-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-primary-fields { display: grid; grid-template-columns: 1fr; gap: 9px; }
.info-primary-fields label, .song-relationship-fields label, .song-notes-field { display: grid; gap: 5px; }
.info-primary-fields input { width: 100%; height: 38px; padding: 0 9px; }
.song-relationship-fields { display: grid; grid-template-columns: 1fr; gap: 9px; }
.directory-picker { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 5px; font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; }
.directory-picker select { width: 100%; height: 36px; padding: 0 7px; }
.directory-picker button { width: 34px; height: 36px; padding: 0; border: 2px solid var(--ink); border-radius: 8px; background: var(--cream); font-weight: 900; }
.directory-picker button:hover { background: var(--yellow); }
.info-project-identity { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px 5px 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .7rem; font-weight: 850; letter-spacing: normal; text-transform: none; }
.info-project-identity button { min-height: 24px; padding: 0 7px; border: 1px solid var(--ink); border-radius: 5px; background: var(--yellow); font-size: .56rem; font-weight: 900; }
.info-project-identity.is-empty { display: grid; justify-content: stretch; }
.info-project-identity small { color: var(--muted); font-size: .55rem; font-weight: 700; }
.contributors-section { display: grid; gap: 7px; }
.song-credits-section { padding: 10px 20px 18px; border: 2px solid var(--ink); border-radius: 14px; background: rgba(255,255,255,.48); }
.song-credit-fields { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 9px; }
.song-credit-fields > label { display: grid; gap: 5px; }
.song-credit-fields > label:last-child { grid-column: 1 / -1; }
.song-credit-fields input { width: 100%; height: 38px; padding: 0 9px; }
.contributors-section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.contributors-section > header strong { font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; }
.contributors-section > header button { width: 30px; height: 30px; padding: 0; }
.contributor-list { display: grid; gap: 6px; }
.contributor-column-headings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 5px; margin-bottom: -8px; padding: 0 3px; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.contributor-column-headings, .contributor-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 118px 30px; gap: 5px; }
.contributor-row input, .contributor-row select { width: 100%; height: 36px; padding: 0 8px; }
.contributor-fixed-access { width: 100%; height: 36px; }
.access-switch { display: grid; min-width: 0; height: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--ink); border-radius: 7px; background: var(--cream); }
.access-switch label { position: relative; display: grid; min-width: 0; place-items: center; cursor: pointer; }
.access-switch input { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; }
.access-switch span { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 4px; color: var(--muted); font-size: .47rem; font-weight: 900; line-height: 1; }
.access-switch input[value="editor"]:checked + span { background: var(--lavender); color: white; }
.access-switch input[value="viewer"]:checked + span { background: white; color: var(--ink); }
.access-switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }
.contributor-person-field { display: grid; gap: 2px; }
.contributor-person-field small { padding-left: 3px; color: var(--muted); font-size: .52rem; font-weight: 800; }
.contributor-row button { width: 30px; height: 36px; padding: 0; border: 2px solid var(--ink); border-radius: 7px; background: white; font-weight: 900; }
.contributor-row button:hover { background: var(--coral); }
.info-people-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.info-people-actions button { min-height: 34px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .67rem; font-weight: 850; }
.info-people-actions button:hover { background: var(--yellow); }
.info-people-actions .material-symbols-outlined, .rights-actions .material-symbols-outlined, .new-song-people-actions .material-symbols-outlined { margin-right: 2px; font-size: 15px; vertical-align: -3px; }
.info-people-actions .create-info-person-button { background: var(--yellow); }
.song-people-notice { position: relative; display: grid; gap: 5px; padding: 10px 38px 10px 11px; border: 2px solid var(--ink); border-radius: 9px; background: var(--tool-reference); }
.song-people-notice > strong { font-size: .7rem; }
.song-people-notice > p { margin: 0; font-size: .59rem; font-weight: 750; line-height: 1.35; }
.song-people-notice > div { display: grid; gap: 5px; margin-top: 3px; }
.song-people-notice label { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.song-people-notice label > span { font-size: .56rem; font-weight: 900; }
.song-people-notice input { width: 100%; height: 30px; min-width: 0; padding: 0 7px; border: 1px solid var(--ink); border-radius: 5px; background: white; font-size: .52rem; }
.song-people-notice label > button { min-height: 30px; padding: 0 8px; border: 1px solid var(--ink); border-radius: 5px; background: var(--yellow); font-size: .52rem; font-weight: 900; }
.song-people-notice-close { position: absolute; top: 6px; right: 6px; width: 25px; height: 25px; padding: 0; border: 0; background: transparent; font-size: 1rem; font-weight: 900; }
.info-editor-actions .send-people-button { background: var(--green); color: white; }
@media (max-width: 620px) {
  .course-glossary-search-row { grid-template-columns: minmax(0, 1fr) 32px 32px; }
  .course-glossary-search { grid-column: 1 / -1; }
  .course-glossary-search-status { grid-column: 1; justify-self: start; text-align: left; }
  .song-people-notice label { grid-template-columns: minmax(0, 1fr) auto; }
  .song-people-notice label > span { grid-column: 1 / -1; }
}
.info-new-person-editor { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto; gap: 7px; }
.info-new-person-editor input { min-width: 0; height: 38px; padding: 0 9px; }
.info-new-person-editor button { min-height: 38px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .66rem; font-weight: 850; }
.info-new-person-editor button[type="submit"] { background: var(--green); color: white; }
.info-new-person-editor small { grid-column: 1 / -1; color: var(--muted); font-size: .62rem; font-weight: 750; }
.song-rights-section { display: grid; gap: 13px; padding: 18px; border: 2px solid var(--ink); border-radius: 14px; background: rgba(255,255,255,.48); }
.song-rights-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.song-rights-heading > div { display: grid; gap: 2px; }
.song-rights-heading > div > span { font-size: .78rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.song-rights-heading .song-rights-heading-actions { display: flex; align-items: center; gap: 7px; }
.song-rights-heading small, .rights-footnote { color: var(--muted); font-size: .61rem; font-weight: 750; }
.split-total { padding: 7px 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .68rem; white-space: nowrap; }
.split-total.is-complete { background: var(--green); color: white; }
.split-total.is-incomplete { background: var(--yellow); }
.song-rights-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(230px, .8fr); gap: 22px; align-items: start; }
.writer-splits-panel, .writer-list, .copyright-fields { display: grid; gap: 7px; }
.songwriter-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--ink); border-radius: 9px; background: var(--paper); }
.songwriter-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: .63rem; }
.songwriter-table th, .songwriter-table td { padding: 9px 10px; border-right: 1px solid rgba(5,5,5,.2); border-bottom: 1px solid rgba(5,5,5,.2); text-align: left; vertical-align: middle; }
.songwriter-table tr:last-child th, .songwriter-table tr:last-child td { border-bottom: 0; }
.songwriter-table th:last-child, .songwriter-table td:last-child { border-right: 0; }
.songwriter-table thead th { background: var(--cream); color: var(--muted); font-size: .55rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.songwriter-table tbody th { font-size: .67rem; }
.songwriter-table tbody th > span { display: block; }
.songwriter-table tr.has-invitation-status.is-pending,
.songwriter-table tr.has-invitation-status.is-declined { color: #777; background: #ededeb; }
.songwriter-invitation-status { display: inline-block; width: max-content; margin-top: 3px; padding: 2px 5px; border: 1px solid currentColor; border-radius: 999px; color: var(--muted); font-size: .46rem; font-weight: 950; font-style: normal; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.songwriter-invitation-status.is-accepted { color: #14705d; }
.songwriter-invitation-status.is-declined, .songwriter-invitation-status.is-cancelled { color: #8b3f36; }
.writer-contribution-mark { text-align: center !important; font-weight: 950; }
.info-copyright-read { display: flex; flex-wrap: wrap; gap: 6px; }
.info-copyright-read span { padding: 4px 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--muted); font-size: .58rem; font-weight: 750; }
.writer-column-headings { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(115px, .8fr) 92px 30px; gap: 6px; padding: 0 3px; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.writer-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(115px, .8fr) 92px 30px; gap: 6px; align-items: start; }
.writer-row select, .writer-row input { width: 100%; height: 38px; padding: 0 8px; }
.writer-person-field { display: grid; gap: 3px; }
.writer-person-field small { min-height: 12px; padding-left: 3px; color: var(--muted); font-size: .55rem; font-weight: 750; overflow-wrap: anywhere; }
.writer-share-field { position: relative; display: block; }
.writer-share-field input { padding-right: 24px; }
.writer-share-field > span { position: absolute; top: 11px; right: 9px; font-size: .7rem; font-weight: 900; }
.writer-row > button { width: 30px; height: 38px; padding: 0; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); font-weight: 900; }
.writer-row > button:hover { background: var(--coral); }
.rights-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.rights-actions button { min-height: 34px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: .66rem; font-weight: 850; }
.rights-actions button:first-child { background: var(--yellow); }
.copyright-fields label { display: grid; gap: 5px; }
.copyright-fields input { width: 100%; height: 38px; padding: 0 9px; }
.rights-footnote { margin: 0; line-height: 1.4; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.song-notes-field textarea { width: 100%; min-height: 96px; resize: vertical; padding: 9px; line-height: 1.45; }
.info-notes-column textarea { width: 100%; min-height: 340px; resize: vertical; padding: 12px; background: var(--paper); font-size: .9rem; line-height: 1.5; }
.info-notes-readonly { min-height: 180px; padding: 12px; border: 1px solid var(--ink); border-radius: 9px; background: var(--paper); color: var(--ink); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.archive-song-note-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; }
.archive-song-note-button:hover { background: var(--yellow); }
.archive-song-note-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.song-note-status { min-height: 14px; color: var(--muted); font-size: .6rem; font-weight: 800; }
.song-note-status:empty { display: none; }
.song-note-archive { display: grid; gap: 12px; padding-top: 6px; }
.song-note-archive > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.song-note-archive > header > span { font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.song-note-archive > header small { color: var(--muted); font-size: .62rem; font-weight: 850; }
.song-note-archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; align-items: start; }
.song-note-card { display: grid; gap: 9px; min-width: 0; padding: 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.song-note-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.song-note-card time { color: var(--muted); font-size: .58rem; font-weight: 800; }
.song-note-card button { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; font-weight: 900; }
.song-note-card button:hover { background: var(--coral); }
.song-note-card p { margin: 0; font-size: .78rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.song-note-archive-empty { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 750; }
.focused-module .info-module-content { width: 100%; margin-inline: auto; padding: 8px 4px 18px; }

.tasks-module-content { height: 100%; min-height: 0; padding: 1px; }
.tasks-grid-view { display: grid; min-height: 0; align-content: start; gap: 8px; }
.tasks-grid-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tasks-grid-header > h3 { margin: 0; font-size: .72rem; font-weight: 900; }
.tasks-grid-header > small { color: var(--muted); font-size: .56rem; font-weight: 850; }
.tasks-expanded-view { display: none; height: 100%; min-height: 0; }
.tasks-mobile-view, .task-mobile-actions, .task-key-mark { display: none; }
.task-list-board { position: relative; display: grid; min-height: 0; grid-template-columns: 346px minmax(0, 1fr); gap: 10px; overflow: hidden; }
.task-list-landing-pad { display: grid; min-width: 0; min-height: 0; padding: 20px; overflow: hidden; border: 3px dashed var(--ink); border-radius: 13px; background: rgba(245, 206, 34, .18); }
.task-list-landing-pad.task-list-drop-target { outline: 4px solid var(--blue); outline-offset: -4px; }
.task-list-landing-pad .task-list-column { width: 300px; height: 100%; justify-self: center; background: white; }
.task-list-columns { display: grid; min-height: 0; grid-auto-columns: 300px; grid-auto-flow: column; gap: 9px; padding: 21px 0; overflow-x: auto; align-items: stretch; }
.task-list-add-column { display: grid; min-width: 0; min-height: 0; place-content: center; gap: 7px; border: 2px dashed rgba(5, 5, 5, .38); border-radius: 10px; background: transparent; color: var(--muted); }
.task-list-add-column span { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.task-list-add-column .material-symbols-outlined { font-size: 1.35rem; }
.task-list-add-column strong { font-size: .72rem; font-weight: 900; }
.task-list-add-column:hover { border-color: var(--ink); background: var(--yellow); color: var(--ink); }
.task-list-board.task-reordering .task-list-landing-pad, .task-list-board.task-reordering .task-list-columns { overflow: visible; }
.task-list-column { position: relative; z-index: 2; display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 9px; overflow: hidden; border: 2px solid var(--ink); border-radius: 10px; background: var(--cream); transition: transform .18s ease, opacity .12s ease; }
.task-list-column.dragging-list { opacity: 0; }
.task-list-drag-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; box-shadow: 7px 7px 0 rgba(5, 5, 5, .18); opacity: .96; transform: none !important; transition: none !important; }
.task-list-native-drag-image { position: fixed; left: 0; top: 0; z-index: -1; width: 1px; height: 1px; opacity: .01; pointer-events: none; }
.task-list-column.task-list-drop-target { outline: 3px solid var(--blue); outline-offset: -3px; }
.task-list-placeholder { position: absolute; z-index: 1; border: 3px dashed var(--blue); border-radius: 10px; background: rgba(53, 104, 212, .1); pointer-events: none; transition: left .18s ease, top .18s ease; }
.task-list-column > header { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.task-list-mobile-order { display: none; }
.task-list-column > header input { width: 100%; height: 32px; padding: 0 8px; border: 0; background: transparent; font-size: .78rem; font-weight: 900; }
.task-list-column > header .task-list-grip { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: grab; font-size: .8rem; }
.task-list-column > header .task-list-grip .material-symbols-outlined { font-size: 20px; line-height: 1; }
.task-list-column > header .task-list-grip.is-pointer-hovered { background: var(--yellow); }
.task-list-column > header .task-list-grip:active { cursor: grabbing; }
.task-list-column > header .task-list-delete { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: .9rem; font-weight: 900; }
.task-list-column > header .task-list-delete:hover { background: var(--coral); }
.task-list { display: grid; min-height: 0; align-content: start; gap: 6px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.task-item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; padding: 8px 11px 8px 10px; border: 2px solid var(--ink); border-radius: 9px; background: white; }
.task-item.dragging-task { height: 0; min-height: 0; overflow: hidden; padding-block: 0; border-block-width: 0; opacity: 0; }
.task-item-drop-placeholder { min-height: 44px; border: 2px dotted var(--blue); border-radius: 9px; background: rgba(53, 104, 212, .08); pointer-events: none; }
.task-list-column.task-list-drop-target .task-list > .module-empty-message { display: none; }
.task-item .task-drag-surface { position: absolute; z-index: 0; display: none; inset: 0; cursor: grab; }
.task-item .task-drag-surface:active { cursor: grabbing; }
.task-item input[type="checkbox"] { position: relative; z-index: 1; width: 17px; height: 17px; appearance: none; border: 1.5px solid rgba(5,5,5,.5); border-radius: 4px; background: white; cursor: pointer; }
.task-item input[type="checkbox"]:checked { border-color: var(--ink); background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 8.2 6.4 11l6.2-6.2' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 13px; }
.task-item span[data-task-text] { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; cursor: text; font: var(--task-font-weight) var(--task-font-size)/1.25 var(--writing-font-family); }
.task-item .task-edit-field { position: relative; z-index: 1; width: 100%; min-height: 30px; grid-column: 2; resize: none; overflow: hidden; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: var(--task-font-weight) var(--task-font-size)/1.25 var(--writing-font-family); white-space: pre-wrap; overflow-wrap: anywhere; }
.task-item.done span[data-task-text] { color: var(--muted); text-decoration: line-through; }
.task-entry-row { min-height: 44px; list-style: none; }
.task-inline-form { display: grid; min-height: 44px; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 11px 7px 10px; border: 2px solid rgba(5,5,5,.22); border-radius: 9px; background: rgba(255,255,255,.62); }
.task-inline-form:focus-within { border-color: var(--yellow); background: white; box-shadow: inset 0 0 0 1px var(--yellow); }
.task-entry-circle { width: 17px; height: 17px; border: 1.5px solid rgba(5,5,5,.42); border-radius: 4px; }
.task-inline-form input { width: 100%; height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; font: var(--task-font-weight) var(--task-font-size)/1.25 var(--writing-font-family); box-shadow: none; }
.task-inline-form input:focus { box-shadow: none; }
.task-inline-form input::placeholder { color: var(--muted); }
.focused-module .task-item { cursor: grab; }
.focused-module .task-item:active { cursor: grabbing; }
.focused-module .task-item .task-drag-surface { display: block; }
.focused-module .tasks-module-content { width: 100%; margin: 0; padding: 8px; }
.focused-module .tasks-grid-view { display: none; }
.focused-module .tasks-expanded-view { display: grid; }

.module-audio .module-body { min-height: 0; overflow: hidden; }
.audio-module-content {
  container-name: audio-module;
  container-type: inline-size;
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 1px;
  border-radius: 10px;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.audio-module-content > audio { display: none; }
.audio-module-content.is-audio-drag-over { background: rgba(245, 206, 34, .28); box-shadow: inset 0 0 0 3px var(--yellow); }
.audio-is-empty { grid-template-rows: minmax(0, 1fr) auto; }
.audio-drop-zone {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 2px dashed rgba(5, 5, 5, .35);
  border-radius: 10px;
  background: rgba(238, 227, 209, .42);
}
.audio-drop-icon { display: grid; flex: 0 0 auto; place-items: center; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-weight: 950; }
.audio-drop-icon { width: 35px; height: 35px; font-size: 1rem; }
.audio-drop-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.audio-drop-zone > div, .audio-file-row > div { display: grid; min-width: 0; gap: 1px; }
.audio-source-actions { display: flex !important; flex-wrap: wrap; gap: 6px; }
.audio-source-actions button:disabled { cursor: not-allowed; opacity: .38; }
.audio-drop-zone strong, .audio-file-row strong { min-width: 0; overflow: hidden; font-size: .72rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.audio-drop-zone small, .audio-file-row small { min-width: 0; overflow: hidden; color: var(--muted); font-size: .57rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.audio-drop-zone button, .audio-file-row button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 9px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: white;
  font-size: .61rem;
  font-weight: 900;
}
.audio-drop-zone button:hover, .audio-file-row button:hover { background: var(--yellow); }
.audio-header-row { display: grid; height: 42px; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.audio-playback-row, .audio-file-control-row { display: contents; }
.audio-file-row { display: grid; height: 42px; min-width: 0; grid-template-columns: minmax(120px, 1fr) 30px 30px; align-items: center; column-gap: 4px; padding: 4px 4px 4px 6px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); }
.audio-file-row .audio-replace, .audio-file-row .audio-remove { display: grid; width: 30px; height: 30px; min-height: 0; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; }
.audio-file-row .audio-replace svg, .audio-file-row .audio-replace .material-symbols-outlined { display: block; width: 20px; height: 20px; font-size: 20px; line-height: 1; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.audio-file-row .audio-remove { justify-self: end; font-size: .85rem; }
.audio-file-row .audio-replace:hover { background: var(--yellow); }
.audio-file-row .audio-remove:hover { background: var(--coral); }
.audio-primary-controls { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); padding: 4px 0; }
.audio-navigation { display: flex; align-items: center; justify-content: center; gap: 7px; }
.audio-navigation button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); font-size: .72rem; font-weight: 950; line-height: 1; }
.audio-navigation button:not(:disabled):hover { background: var(--yellow); }
.audio-navigation button:disabled { cursor: default; opacity: .25; }
.audio-navigation .audio-play { background: var(--yellow); }
.audio-navigation svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.audio-navigation .material-symbols-outlined { width: 22px; height: 22px; font-size: 22px; line-height: 1; }
.audio-play:not(:disabled):hover { background: var(--coral); }

.module-record .module-body { min-height: 0; overflow: auto; }
.record-module-content { display: grid; min-height: 100%; align-content: start; gap: 6px; padding: 1px; }
.record-capture { display: grid; width: 100%; min-height: 68px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 9px 13px; border: 2px solid var(--ink); border-radius: 10px; appearance: none; background: rgba(255,255,255,.66); color: var(--ink); font-family: inherit; text-align: center; }
.record-capture:not(:disabled):hover { background: var(--yellow); }
.record-capture:focus:not(:focus-visible) { outline: none; }
.record-capture:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.record-capture:disabled { cursor: default; opacity: .42; }
.record-capture-copy { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 8px; }
.record-capture-copy > div { display: grid; min-width: 0; gap: 1px; }
.record-capture.is-recording .record-capture-copy { justify-self: start; text-align: left; }
.record-capture-copy strong { font-size: .72rem; font-weight: 900; }
.record-capture-copy small { overflow: hidden; color: var(--muted); font-size: .54rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.record-state-dot { display: none; width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.record-capture.is-recording .record-state-dot { display: block; }
.record-capture.is-recording, .record-capture.is-recording:not(:disabled):hover { border: 3px solid var(--coral); background: rgba(255,255,255,.72); box-shadow: inset 8px 0 0 var(--coral); }
.record-capture.is-recording { padding-left: 24px; }
.record-capture.is-recording .record-state-dot { background: var(--coral); animation: record-pulse 2.2s ease-in-out infinite; }
@keyframes record-pulse { 50% { transform: scale(.78); opacity: .6; } }
.record-capture output { min-width: 62px; color: inherit; font: 900 1.2rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.record-status { min-height: 14px; margin: -3px 3px 0; color: var(--muted); font-size: .56rem; font-weight: 750; }
.record-status:empty { display: none; }
.record-takes { display: grid; min-height: 0; gap: 5px; }
.record-takes > header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.record-takes > header strong { font-size: .64rem; font-weight: 950; text-transform: uppercase; }
.record-takes > header small { font-size: .57rem; font-weight: 900; }
.record-empty { margin: 10px 2px; color: var(--muted); font-size: .65rem; font-weight: 750; }
.record-take-list { display: grid; min-height: 0; align-content: start; gap: 5px; }
.record-take { display: grid; min-width: 0; gap: 9px; padding: 12px; border: 2px solid var(--ink); border-radius: 13px; background: var(--paper); box-shadow: 4px 4px 0 rgba(5,5,5,.1); }
.record-take-heading { display: grid; min-width: 0; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 7px; }
.record-take-heading-content { min-width: 0; }
.record-take-title { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; }
.record-take-title > div:first-child { display: grid; min-width: 0; gap: 1px; }
.record-take-heading strong { overflow: hidden; font-size: .76rem; font-weight: 950; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.record-take-heading small { color: var(--muted); font-size: .56rem; font-weight: 800; }
.recording-availability-badge { display: inline-flex; max-width: 100%; align-items: center; padding: 1px 4px; border: 1px solid currentColor; border-radius: 999px; font-size: .5rem; font-weight: 950; letter-spacing: .015em; line-height: 1.25; white-space: nowrap; }
.recording-availability-badge.is-available { background: var(--green); color: white; }
.recording-availability-badge.is-uploading { background: var(--yellow); color: var(--ink); }
.recording-availability-badge.is-unavailable { background: #ffe4df; color: #8b2d25; }
.record-take-title-actions { display: flex; align-items: center; gap: 2px; }
.record-take-title-actions button, .record-take-name-form button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; }
.record-take-title-actions button:hover, .record-take-name-form button:hover { background: var(--yellow); }
.record-take-title-actions svg, .record-take-name-form svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.record-take-title { position: relative; }
.record-take-menu { position: relative; z-index: 2; }
.record-take:has(.record-take-menu[open]) { position: relative; z-index: 10; }
.record-take:has(.record-take-menu[open]) .record-take-menu { z-index: 20; }
.record-take-menu > summary { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border-radius: 7px; cursor: pointer; font: 950 1.35rem/.8 Arial, sans-serif; list-style: none; }
.record-take-menu > summary::-webkit-details-marker { display: none; }
.record-take-menu > summary:hover, .record-take-menu[open] > summary { background: var(--yellow); }
.record-take-menu-panel { position: fixed; z-index: 2147483647; top: 0; left: 0; display: grid; min-width: 142px; gap: 2px; padding: 5px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper) !important; background-image: none !important; box-shadow: 4px 4px 0 rgba(5,5,5,.18); isolation: isolate; opacity: 1; contain: paint; transform: translateZ(0); }
.record-take-menu-panel button { min-height: 30px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); text-align: left; font-size: .57rem; font-weight: 900; }
.record-take-menu-panel button:hover { background: var(--yellow); }
.recording-share-dialog-panel > p[data-recording-share-name] { overflow-wrap: anywhere; font-size: .78rem; font-weight: 850; }
.recording-share-actions { display: grid; gap: 8px; }
.recording-share-actions > button { display: grid; min-height: 72px; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 9px; background: white; color: var(--ink); text-align: left; }
.recording-share-actions > button:last-child { background: var(--yellow); }
.recording-share-actions > button:hover { background: var(--ink); color: white; }
.recording-share-actions > button:disabled { cursor: wait; opacity: .5; }
.recording-share-actions svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recording-share-actions span { display: grid; gap: 3px; }
.recording-share-actions strong { font-size: .72rem; }
.recording-share-actions small { font-size: .58rem; font-weight: 700; line-height: 1.25; }
.recording-share-status { min-height: 14px; margin: -7px 0 0 !important; color: var(--muted); font-size: .58rem !important; font-weight: 750 !important; }
.record-take-name-form { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.record-take-name-form input { min-width: 0; height: 32px; padding: 0 7px; border: 1.5px solid var(--ink); border-radius: 6px; background: white; font: 800 .72rem/1 inherit; }
.record-take-edit-actions { display: flex; min-width: 0; align-items: center; gap: 3px; }
.record-take-edit-actions .record-delete-take:hover { background: var(--coral); }
.record-take-edit-actions .record-save-take { margin-left: auto; background: var(--yellow); }
.record-take-edit-actions .material-icon { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.record-mini-player { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 46px; align-items: stretch; gap: 7px; }
.record-mini-player > audio { display: none; }
.record-mini-play, .record-mini-speed { display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-weight: 900; }
.record-mini-play { width: 46px; height: 42px; grid-column: 1; border-radius: 9px; }
.record-mini-play:not(:disabled) { background: transparent; }
.record-mini-play:not(:disabled):hover { background: var(--coral); }
.record-mini-play:disabled { cursor: default; opacity: .3; }
.record-mini-play svg { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.record-mini-speed { width: 46px; height: 42px; grid-column: 2; font-size: .52rem; }
.record-mini-play:not(:disabled):hover, .record-mini-speed:hover { background: var(--yellow); }
.record-mini-speed:hover { background: var(--yellow); }
.record-mini-waveform.audio-waveform { height: 42px; grid-column: 1; border: 0; border-radius: 9px; background-color: rgba(255,255,255,.58); background-image: none; }
.record-mini-waveform.audio-waveform::after { width: 3px; opacity: 0; transform: translateX(-1px); }
.record-take.has-recording-cursor .record-mini-waveform.audio-waveform::after { opacity: 1; }
.record-take.is-playing .record-mini-waveform.audio-waveform::after { background: var(--coral); }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .module-body { overflow: hidden; }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .record-module-content { height: 100%; grid-template-rows: minmax(52px, 1fr) auto; align-content: stretch; align-items: stretch; gap: 6px; }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .record-capture { min-height: 0; height: 100%; }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .record-status { display: none; }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .record-takes { min-width: 0; min-height: 0; }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .record-takes > header { display: none; }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .record-empty { display: grid; min-height: 97px; place-items: center; margin: 0; border: 2px solid rgba(5,5,5,.3); border-radius: 10px; background: rgba(255,255,255,.38); }
.module-record:is([data-size="2×1"], [data-size="1×1"]):not(.focused-module) .record-take-list > .record-take:nth-child(n + 2) { display: none; }
.module-record[data-size="1×1"]:not(.focused-module) .record-capture { gap: 5px; padding: 7px; }
.module-record[data-size="1×2"]:not(.focused-module) .record-take-list { overflow-y: auto; }
.focused-module.module-record .record-module-content { width: min(1180px, 100%); grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 5px; margin: 0 auto; padding: clamp(10px, 2vw, 22px); }
.focused-module.module-record .record-module-content::before { content: "Record"; grid-column: 1; grid-row: 1; padding: 0 2px; font-size: .64rem; font-weight: 950; line-height: 1; text-transform: uppercase; }
.focused-module.module-record .record-capture { min-height: 140px; aspect-ratio: auto; grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-content: center; justify-items: stretch; padding: clamp(16px, 2vw, 24px); text-align: center; }
.focused-module.module-record .record-capture-copy { align-self: center; flex-direction: row; justify-content: center; }
.focused-module.module-record .record-capture.is-recording .record-capture-copy { justify-content: flex-start; }
.focused-module.module-record .record-capture-copy strong { font-size: clamp(.86rem, 1.4vw, 1.05rem); }
.focused-module.module-record .record-capture-copy small { font-size: .6rem; white-space: normal; }
.focused-module.module-record .record-state-dot { width: 20px; height: 20px; flex-basis: 20px; border-width: 2px; }
.focused-module.module-record .record-capture output { align-self: center; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.focused-module.module-record .record-status { grid-column: 1; grid-row: 3; }
.focused-module.module-record .record-takes { max-height: 100%; grid-column: 2; grid-row: 1 / span 3; }
.focused-module.module-record .record-take-list { overflow-y: auto; }
@media (max-width: 760px), (max-height: 620px) {
  .focused-module.module-record .record-module-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .focused-module.module-record .record-module-content::before { grid-column: 1; grid-row: 1; }
  .focused-module.module-record .record-capture { min-height: 150px; aspect-ratio: auto; grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; justify-items: stretch; padding: 14px; text-align: left; }
  .focused-module.module-record .record-capture-copy { align-self: center; flex-direction: row; justify-content: flex-start; }
  .focused-module.module-record .record-state-dot { width: 20px; height: 20px; flex-basis: 20px; border-width: 2px; }
  .focused-module.module-record .record-capture output { align-self: center; }
  .focused-module.module-record .record-status { grid-column: 1; grid-row: 3; }
  .focused-module.module-record .record-takes { max-height: none; grid-column: 1; grid-row: 4; }
}

.module-files .module-body { min-height: 0; overflow: auto; }
.files-module-content { display: grid; min-height: 100%; align-content: start; gap: 12px; padding: 1px; border-radius: 10px; }
.files-module-content.is-files-drag-over { background: rgba(245, 206, 34, .28); box-shadow: inset 0 0 0 3px var(--yellow); }
.files-drop-zone { display: grid; min-height: 76px; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 2px dashed rgba(5,5,5,.35); border-radius: 10px; background: rgba(238,227,209,.42); }
.files-drop-zone > svg { width: 34px; height: 34px; }
.files-drop-zone > div { display: grid; min-width: 0; gap: 2px; }
.files-drop-zone strong { font-size: .72rem; font-weight: 900; }
.files-drop-zone small, .files-status { color: var(--muted); font-size: .57rem; font-weight: 750; }
.files-drop-zone button { min-height: 32px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 7px; background: white; font-size: .59rem; font-weight: 900; }
.files-drop-zone button:hover, .files-edit-form button:hover, .files-trash-item button:hover { background: var(--yellow); }
.files-add-row { display: grid; min-height: 44px; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 4px 6px; border: 2px dashed rgba(5,5,5,.35); border-radius: 9px; background: rgba(255,255,255,.26); }
.files-add-row > svg { width: 25px; height: 25px; }
.files-add-row > div { display: grid; min-width: 0; gap: 1px; }
.files-add-row strong { font-size: .61rem; font-weight: 900; }
.files-add-row small { overflow: hidden; color: var(--muted); font-size: .5rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.files-add-row button { display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; font-size: 1rem; font-weight: 900; }
.files-add-row button:hover { background: var(--yellow); }
.files-add-row button .material-symbols-outlined { font-size: 20px; }
.files-has-files { gap: 7px; }
.files-has-files .files-status { margin-top: -3px; }
.files-status { min-height: 14px; margin: -7px 2px 0; }
.files-library-controls { justify-content: flex-end; }
.focused-module.module-files .files-library-controls { margin-bottom: 5px; }
.files-view-options { display: flex; gap: 3px; }
.files-view-options button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); }
.files-view-options button.is-active { background: var(--yellow); }
.files-view-options svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.files-view-options .material-symbols-outlined { font-size: 17px; line-height: 1; }
.files-grid { display: grid; gap: 6px; }
.files-grid > [data-file-card]:has(.files-card-menu[open]) { position: relative; z-index: 10; }
.files-empty { grid-column: 1 / -1; margin: 8px 0; color: var(--muted); font-size: .65rem; font-weight: 750; }
.files-list-item, .files-trash-item { display: grid; min-width: 0; align-items: center; gap: 7px; padding: 7px; border: 2px solid var(--ink); border-radius: 9px; background: rgba(255,255,255,.55); }
.files-list-item { grid-template-columns: minmax(0,1fr) auto; }
.files-list-item:has(.files-card-main:hover) { background: var(--yellow); }
.files-trash-item { grid-template-columns: 38px minmax(0,1fr) auto; }
.files-list-item.is-editing { grid-template-columns: minmax(0,1fr); }
.files-list-icon, .files-list-icon svg, .files-trash-icon, .files-trash-icon svg { display: block; width: 34px; height: 34px; }
.files-folder-icon { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.files-folder-icon.material-symbols-outlined { display: block; width: 34px; height: 34px; font-size: 34px; line-height: 1; fill: currentColor; stroke: none; }
.files-type-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.files-type-icon.material-icon-contract, .files-list-icon .material-icon-contract, .files-trash-icon .material-icon-contract { fill: currentColor; stroke: none; }
.files-type-icon.is-listen-back, .files-type-icon.is-recording, .files-type-icon.is-audio, .files-type-icon.is-chord-chart, .files-type-icon.is-lyrics, .files-type-icon.is-info, .files-type-icon.is-notes { display: block; width: 34px; height: 34px; stroke-width: 2.15; font-size: 34px; line-height: 1; }
.files-type-icon .files-icon-fill { fill: currentColor; stroke: none; }
.files-download-button > span:last-child, .files-card-main > span:last-child, .files-trash-item > div { display: grid; min-width: 0; gap: 2px; }
.files-list-item strong, .files-list-item small, .files-trash-item strong, .files-trash-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-list-item strong, .files-trash-item strong { font-size: .62rem; font-weight: 900; }
.files-list-item small, .files-trash-item small { color: var(--muted); font-size: .51rem; font-weight: 750; }
.files-edit-button, .files-edit-form button { display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); }
.files-card-main { display: grid; min-width: 0; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 7px; }
.files-card-menu { position: relative; z-index: 2; align-self: center; min-width: 32px; }
.files-card-menu[open] { z-index: 10; }
.files-card-menu > summary { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border-radius: 7px; color: var(--ink); cursor: pointer; font: 950 1.35rem/.8 Arial, sans-serif; list-style: none; }
.files-card-menu > summary::-webkit-details-marker { display: none; }
.files-card-menu > summary:hover, .files-card-menu[open] > summary { background: var(--yellow); }
.files-card-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; display: grid; min-width: 174px; gap: 2px; padding: 5px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 4px 4px 0 rgba(5,5,5,.18); }
.files-card-menu-panel button { min-height: 30px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); text-align: left; font-size: .57rem; font-weight: 900; }
.files-card-menu-panel button:hover { background: var(--yellow); }
.files-card-main[draggable="true"], .files-song-card[draggable="true"] { cursor: grab; }
.files-card-main[draggable="true"]:active, .files-song-card[draggable="true"].is-file-dragging { cursor: grabbing; opacity: .62; }
.audio-module-content.is-audio-file-drop-target { background: rgba(245, 206, 34, .2); box-shadow: inset 0 0 0 4px var(--yellow); }
.audio-module-content.is-audio-file-drop-target .audio-drop-zone { border-color: var(--ink); background: var(--yellow); }
.files-trash-main { display: grid; min-width: 0; gap: 2px; }
.files-download-button { display: grid; width: 100%; min-width: 0; min-height: 38px; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 7px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }
.files-card-main { min-height: 38px; }
.files-edit-button:hover { background: var(--yellow); }
.files-download-button:hover { background: transparent; }
.files-edit-button svg, .files-edit-form button svg, .files-trash-item button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.files-edit-form { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px 8px; }
.files-edit-form label { display: grid; gap: 3px; }
.files-edit-form label { grid-column: 1 / -1; }
.files-edit-form label span { font-size: .5rem; font-weight: 900; text-transform: uppercase; }
.files-edit-form input { width: 100%; min-width: 0; height: 34px; padding: 0 7px; border: 2px solid var(--ink); border-radius: 7px; font-size: .62rem; font-weight: 800; }
.files-edit-form > small { min-width: 0; overflow: hidden; color: var(--muted); font-size: .5rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.files-edit-form > div { display: flex; grid-column: 2; grid-row: 2; justify-self: end; gap: 3px; }
.files-edit-form [data-file-delete-request] { background: transparent; }
.files-edit-form [data-file-delete-request]:hover { background: var(--coral); }
.files-trash-section { display: grid; gap: 7px; padding-top: 4px; border-top: 2px solid var(--ink); }
.focused-module.module-files .files-trash-section { margin-top: 6px; padding-top: 10px; }
.files-trash-section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.files-trash-section > header > div:first-child { display: grid; min-width: 0; gap: 2px; }
.files-trash-section > header strong { font-size: .65rem; font-weight: 950; text-transform: uppercase; }
.files-trash-section > header small { font-size: .55rem; font-weight: 900; }
.files-trash-header-actions, .files-trash-selection-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.files-trash-selection-actions button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: .54rem; font-weight: 900; }
.files-trash-selection-actions button:hover { background: var(--yellow); }
.files-trash-selection-actions button:disabled { cursor: default; opacity: .45; }
.files-trash-section > div { display: grid; gap: 6px; }
.files-trash-item .files-card-menu { grid-column: 3; }
.files-trash-item:has(.files-trash-select) { grid-template-columns: 24px 38px minmax(0,1fr) auto; }
.files-trash-item:has(.files-trash-select) .files-card-menu { grid-column: 4; }
.files-trash-select { display: grid; width: 22px; height: 22px; place-items: center; }
.files-trash-select input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.files-trash-item.is-selected { background: var(--yellow); }
.files-item-listen-back { background: var(--tool-reference); }
.files-item-recording { background: var(--tool-reference); }
.files-item-chord-chart, .files-item-lyrics { background: var(--tool-writing); }
.files-item-information { background: var(--tool-organizing); }
.files-item-audio { background: var(--tool-reference); }
.files-item-pdf, .files-item-image, .files-item-file { background: #f2ab9e; }
.files-module-content.is-grid-mode .files-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 8px; padding-inline: 3px; }
.files-song-card { text-align: left; }
.files-song-card .files-card-main { grid-column: 1 / 3; grid-template-columns: 56px minmax(0, 1fr); align-content: center; gap: 11px; }
.files-song-card .files-card-menu { grid-column: 3; }
.files-module-content.is-list-mode .files-grid { grid-template-columns: minmax(0, 1fr); }
.audio-play:active { background: var(--ink); color: white; }
.audio-play:disabled { cursor: wait; opacity: .35; }
.audio-timeline { display: grid; width: 100%; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 7px; }
.audio-time-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.audio-time-row > span { min-width: 3.2em; font: 850 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.audio-time-row > span:last-child { text-align: right; }
.audio-time-row > strong { color: var(--muted); font-size: .55rem; font-weight: 850; letter-spacing: .055em; text-align: center; text-transform: uppercase; }
.audio-scale-controls { display: none; height: 42px; grid-template-columns: 42px 46px 42px; align-items: stretch; overflow: hidden; border: 0; border-radius: 9px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.audio-scale-controls button { position: relative; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); }
.audio-scale-controls button::before { position: absolute; z-index: 0; inset: 4px; border-radius: 5px; background: transparent; content: ""; pointer-events: none; }
.audio-scale-controls button svg { position: relative; z-index: 1; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.audio-scale-controls button .material-symbols-outlined { position: relative; z-index: 1; font-size: 23px; line-height: 1; }
.audio-scale-controls button:not(:disabled):hover::before { background: var(--yellow); }
.audio-scale-controls button:disabled { opacity: .25; }
.audio-scale-controls output { display: grid; place-items: center; font: 850 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.audio-follow-playhead { display: none; height: 42px; align-items: center; gap: 5px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); color: var(--ink); font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.audio-follow-playhead svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.audio-follow-playhead:hover { background: var(--yellow); }
.audio-follow-playhead[aria-pressed="true"] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--paper); }
.audio-clear-notes { display: none; width: 42px; height: 42px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); }
.audio-clear-notes svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.audio-clear-notes .material-icon-delete { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.audio-clear-notes:not(:disabled):hover { background: var(--coral); }
.audio-clear-notes:disabled { opacity: .3; }
.audio-timeline-viewport { position: relative; width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.audio-timeline-scroll { width: 100%; min-width: 0; min-height: 0; overflow-x: auto; overflow-y: hidden; scrollbar-color: var(--ink) transparent; scrollbar-width: thin; }
.audio-timeline-track { height: 100%; min-height: 0; }
.audio-mobile-scrub-playhead, .audio-mobile-add-note { display: none; }
.audio-waveform { --audio-progress: 0%; --audio-cursor: 0%; position: relative; width: 100%; height: 92px; overflow: hidden; border: 3px solid var(--ink); border-radius: 11px; background-color: var(--paper); background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(5,5,5,.07) calc(10% - 1px), rgba(5,5,5,.07) 10%); cursor: ew-resize; touch-action: none; }
.audio-module-content .audio-waveform { background-image: none; }
.audio-waveform::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(245, 206, 34, .12) 0 var(--audio-progress), transparent var(--audio-progress) 100%); content: ""; pointer-events: none; }
.audio-waveform::after { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--audio-progress); width: 5px; background: var(--ink); content: ""; pointer-events: none; transform: translateX(-2px); }
.audio-waveform:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.module-audio.audio-space-active:focus, .module-audio.audio-space-active .audio-waveform:focus-visible { outline: none; }
.audio-waveform canvas { position: relative; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
.audio-waveform:not(.has-waveform) canvas { opacity: .22; }
.audio-marker-stage { --audio-progress: 0%; position: relative; display: grid; height: 100%; min-width: 0; min-height: 0; grid-template-rows: minmax(150px, 2fr) minmax(82px, 1fr); }
.audio-playhead-time, .audio-cursor-guide span { position: absolute; z-index: 7; top: 5px; left: clamp(27px, var(--audio-progress), calc(100% - 27px)); min-width: 44px; padding: 3px 5px; border-radius: 4px; background: var(--ink); color: white; font: 800 .57rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; pointer-events: none; transform: translateX(-50%); }
.audio-cursor-guide { position: absolute; z-index: 6; inset: 0; opacity: 0; pointer-events: none; }
.audio-cursor-guide::before { position: absolute; top: 0; bottom: 0; left: var(--audio-cursor); border-left: 2px dashed var(--blue); content: ""; transform: translateX(-1px); }
.audio-cursor-guide span { left: clamp(27px, var(--audio-cursor), calc(100% - 27px)); background: var(--blue); }
.audio-waveform.has-audio-cursor .audio-cursor-guide { opacity: .72; }
.audio-playhead-action { position: absolute; z-index: 8; left: var(--audio-progress-left, 13px); display: grid; width: 23px; height: 23px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); color: var(--ink); font: 950 .9rem/1 Arial, sans-serif; transform: translateX(-50%); }
.audio-marker-lane-below .audio-playhead-action { top: 4px; }
.audio-playhead-action:not(:disabled):hover, .audio-playhead-action[aria-expanded="true"] { background: var(--coral); }
.audio-playhead-action:disabled { cursor: default; opacity: .25; }
.audio-playhead-action .material-symbols-outlined { font-size: 16px; }
.audio-marker-lane { position: relative; min-width: 0; min-height: 0; overflow-y: auto; z-index: 4; }
.audio-marker-items { position: relative; width: 100%; min-height: 82px; }
.audio-marker-note { position: absolute; z-index: 4; top: var(--marker-top, 7px); left: var(--marker-left, 0px); display: grid; width: var(--audio-marker-note-width, 180px); overflow: hidden; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.audio-marker-note::after { position: absolute; left: 3px; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); content: ""; transform: rotate(45deg); }
.audio-marker-note::after { top: -6px; transform: rotate(225deg); }
.audio-marker-note > header { position: relative; z-index: 1; display: grid; grid-template-columns: 27px minmax(0, 1fr) 27px; min-height: 29px; border-bottom: 1.5px solid var(--ink); background: var(--yellow); }
.audio-marker-note > header button { min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; text-overflow: ellipsis; white-space: nowrap; }
.audio-marker-note .audio-marker-grip { cursor: grab; touch-action: none; font-size: .78rem; font-weight: 950; }
.audio-marker-note .audio-marker-grip:active { cursor: grabbing; }
.audio-marker-note .audio-marker-title { padding: 0 5px; font: 850 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; }
.audio-marker-note .audio-marker-delete { font-size: .85rem; font-weight: 900; text-align: center; }
.audio-marker-note .audio-marker-grip:hover, .audio-marker-note .audio-marker-title:hover { background: rgba(255, 255, 255, .42); }
.audio-marker-note .audio-marker-delete:hover { background: var(--coral); }
.audio-marker-note.is-repositioning { z-index: 9; }
.audio-marker-attribution-row { min-width: 0; min-height: 19px; padding: 4px 7px 0; color: var(--muted); font-size: .55rem; font-weight: 750; line-height: 1; }
.audio-marker-attribution { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 4px; overflow: hidden; vertical-align: top; }
.audio-marker-attribution > i { display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; overflow: hidden; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: currentColor; font-size: .45rem; font-style: normal; font-weight: 950; line-height: 1; }
.audio-marker-attribution > i.is-profile-avatar { border: 0; background: transparent !important; color: currentColor !important; opacity: .72; }
.audio-marker-attribution > i svg { width: 14px; height: 14px; }
.audio-marker-attribution-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-marker-note textarea { position: relative; z-index: 1; width: 100%; min-height: 46px; resize: none; overflow-y: hidden; padding: 6px 16px 6px 7px; border: 0; border-radius: 0; background: var(--paper); font-size: .84rem; font-weight: 400; line-height: 1.3; scrollbar-gutter: stable; }
.audio-marker-note textarea:focus { outline: 3px solid var(--yellow); outline-offset: -3px; }
.audio-marker-pins { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.audio-marker-pin { position: absolute; top: 0; bottom: 0; left: var(--marker-position); width: 2px; background: var(--ink); opacity: .62; transform: translateX(-1px); }
.audio-marker-pin::before { position: absolute; left: -4px; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); content: ""; }
.audio-marker-pin::before { bottom: 5px; }
.audio-status { min-width: 0; margin: 0 0 0 auto; overflow: hidden; color: var(--muted); font-size: .57rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.audio-file-row .audio-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.module-audio.is-audio-loading .audio-status { display: inline-flex !important; position: static !important; width: auto !important; height: auto !important; align-items: center; gap: 6px; margin: 0 0 0 auto !important; overflow: visible !important; clip: auto !important; white-space: nowrap !important; }
.module-audio.is-audio-loading .audio-file-row > div { display: flex; min-width: 0; align-items: center; }
.module-audio.is-audio-loading .audio-file-row > div > strong,
.module-audio.is-audio-loading .audio-file-row > div > small { display: none; }
.module-audio.is-audio-loading .audio-file-row .audio-status { flex: 1 1 auto; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis; }
.module-audio.is-audio-loading .audio-status::before { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: audio-loading-spin .7s linear infinite; }
.module-audio.is-audio-loading .audio-drop-zone, .module-audio.is-audio-loading .audio-file-row { box-shadow: inset 0 0 0 2px var(--yellow); }
@keyframes audio-loading-spin { to { transform: rotate(360deg); } }
#audio-action-dialog.is-busy .delete-list-dialog { box-shadow: 0 0 0 4px var(--yellow), 8px 8px 0 rgba(5,5,5,.18); }
#audio-action-dialog.is-busy [data-audio-action-confirm], #audio-action-dialog.is-busy [data-audio-action-copy] { position: relative; cursor: wait; }
#audio-action-dialog.is-busy [data-audio-action-confirm]::after, #audio-action-dialog.is-busy [data-audio-action-copy]::after { display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; vertical-align: -1px; animation: audio-loading-spin .7s linear infinite; }
.module-audio.is-audio-uploading .audio-file-row .audio-status { display: block !important; position: static; width: auto; height: auto; margin: 0 0 0 auto; overflow: hidden; clip: auto; }
.module-audio:not(.focused-module) .audio-file-row .audio-status.is-audio-uploading,
.module-audio.focused-module .audio-file-row .audio-status.is-audio-uploading,
.audio-file-row .audio-status.is-audio-uploading { display: block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 0 0 auto !important; overflow: hidden !important; clip: auto !important; white-space: nowrap !important; }
.audio-file-row.is-audio-uploading > div { display: flex; align-items: center; }
.audio-file-row.is-audio-uploading > div > strong,
.audio-file-row.is-audio-uploading > div > small { display: none; }
.audio-file-row.is-audio-uploading .audio-status { flex: 1 1 auto; margin: 0 !important; }
.audio-is-empty .audio-status:empty { display: none; }
.module-audio:not(.focused-module) .audio-marker-stage { grid-template-rows: 130px minmax(82px, 1fr); }
.module-audio:not(.focused-module) .audio-waveform { height: 130px; }
.module-audio:not(.focused-module) .audio-file-row { grid-template-columns: minmax(0, 1fr) 30px 30px; }
.module-audio:not(.focused-module) .audio-navigation { gap: 5px; }
.module-audio:not(.focused-module) .audio-file-row .audio-status { display: none; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-module-content { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 7px; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-primary-controls { height: 100%; grid-template-rows: minmax(0, 1fr); padding: 0; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-timeline { gap: 3px; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-time-row > strong { display: none; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-timeline-viewport,
.module-audio[data-size="2×1"]:not(.focused-module) .audio-timeline-scroll,
.module-audio[data-size="2×1"]:not(.focused-module) .audio-timeline-track,
.module-audio[data-size="2×1"]:not(.focused-module) .audio-marker-stage { height: 100%; min-height: 0; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-marker-stage { display: block; overflow: hidden; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-marker-lane, .module-audio[data-size="2×1"]:not(.focused-module) .audio-playhead-action { display: none; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-waveform { height: 100%; min-height: 0; border-width: 2px; border-radius: 7px; box-shadow: none; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-file-row .audio-status { display: none; }
.module-audio[data-size="2×1"]:not(.focused-module) .audio-drop-zone { padding: 6px; }
.focused-module.module-audio .module-body { padding: 0; }
.focused-module.module-audio .audio-module-content { width: 100%; margin: 0; padding: clamp(10px, 2vw, 22px); border: 0; border-radius: 0; background: transparent; }
.focused-module.module-audio .audio-header-row { height: 42px; grid-template-columns: auto auto auto auto minmax(0, 1fr); align-items: center; }
.focused-module.module-audio .audio-scale-controls { display: grid; }
.focused-module.module-audio .audio-follow-playhead { display: flex; }
.focused-module.module-audio .audio-clear-notes { display: grid; }
.focused-module.module-audio .audio-file-row { grid-template-columns: minmax(140px, 1fr) 30px 30px; }
.focused-module.module-audio .audio-navigation { gap: 5px; }
.focused-module.module-audio .audio-navigation button { width: 42px; height: 42px; font-size: .62rem; }
.focused-module.module-audio .audio-primary-controls { display: grid; grid-template-rows: minmax(0, 1fr); }
.focused-module.module-audio .audio-marker-stage { grid-template-rows: 260px minmax(0, 1fr); }
.focused-module.module-audio .audio-waveform { height: 100%; min-height: 0; }
.focused-module.module-audio.audio-follow-playhead-mode { --audio-follow-waveform-height: 260px; }
.focused-module.module-audio.audio-follow-playhead-mode .audio-timeline-scroll { overscroll-behavior-x: contain; }
.focused-module.module-audio.audio-follow-playhead-mode .audio-timeline-track { box-sizing: content-box; padding-right: 50%; padding-left: 50%; }
.focused-module.module-audio.audio-follow-playhead-mode .audio-waveform::after,
.focused-module.module-audio.audio-follow-playhead-mode .audio-playhead-time { display: none; }
.focused-module.module-audio.audio-follow-playhead-mode .audio-mobile-scrub-playhead { position: absolute; z-index: 10; top: 0; left: 50%; display: block; width: 4px; height: var(--audio-follow-waveform-height); background: var(--ink); pointer-events: none; transform: translateX(-2px); }
.focused-module.module-audio.audio-follow-playhead-mode .audio-mobile-scrub-playhead span { position: absolute; top: 5px; left: 50%; min-width: 44px; padding: 3px 5px; border-radius: 4px; background: var(--ink); color: white; font: 800 .57rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; transform: translateX(-50%); }
.focused-module.module-audio.audio-follow-playhead-mode.is-audio-playing .audio-mobile-scrub-playhead { background: var(--coral); }

@container audio-module (max-width: 820px) {
  .focused-module.module-audio .audio-header-row { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 42px 42px; }
  .focused-module.module-audio .audio-playback-row,
  .focused-module.module-audio .audio-file-control-row { display: flex; min-width: 0; align-items: stretch; gap: 8px; }
  .focused-module.module-audio .audio-playback-row { grid-row: 1; }
  .focused-module.module-audio .audio-file-control-row { grid-row: 2; }
  .focused-module.module-audio .audio-navigation,
  .focused-module.module-audio .audio-scale-controls,
  .focused-module.module-audio .audio-follow-playhead,
  .focused-module.module-audio .audio-clear-notes { flex: 0 0 auto; }
  .focused-module.module-audio .audio-file-row { min-width: 0; flex: 1 1 auto; order: 1; }
  .focused-module.module-audio .audio-clear-notes { order: 2; }
}

@container audio-module (max-width: 520px) {
  .focused-module.module-audio .audio-follow-playhead { width: 42px; justify-content: center; padding: 0; }
  .focused-module.module-audio .audio-follow-playhead span { display: none; }
}

.module-lyrics .module-body { overflow: hidden; }
.module-lyricEditor .module-body { overflow: hidden; }
.lyrics-editor-shell {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}
.lyrics-side-rail {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
}
.lyrics-rail-history, .lyrics-rail-move, .lyrics-rail-actions { display: grid; grid-template-columns: 1fr; gap: 3px; }
.lyrics-rail-actions { margin-top: auto; margin-bottom: 12px; }
.focused-module.module-lyricEditor .lyrics-rail-actions { margin-bottom: 0; }
.lyrics-side-rail button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  justify-self: center;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: white;
  color: var(--ink);
}
.lyrics-side-rail button:hover:not(:disabled) { background: var(--yellow); }
.lyrics-side-rail button:active:not(:disabled) { background: var(--yellow); color: var(--ink); }
.lyrics-side-rail button:disabled { cursor: default; opacity: .3; }
.lyrics-move-mode-button[aria-pressed="true"] { background: var(--yellow); }
.lyrics-rail-icon {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lyrics-rail-actions .material-icon-delete { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.lyrics-rail-actions .material-icon-file-export { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.lyrics-rail-actions .material-symbols-outlined { width: 23px; height: 23px; font-size: 23px; line-height: 1; }
.lyrics-rail-history .material-symbols-outlined { width: 23px; height: 23px; font-size: 23px; line-height: 1; }
.lyrics-rail-status { min-height: 12px; color: var(--muted); font-size: .5rem; font-weight: 750; line-height: 1.2; text-align: center; }
.lyrics-rail-status:empty { display: none; }
.lyrics-editor-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; border: 3px solid var(--ink); border-radius: 11px; background: white; }
.lyrics-editor-surface {
  min-height: 0;
  overflow: auto;
  padding: 24px 12px 28px;
  outline: none;
  color: var(--ink);
  cursor: text;
  font-family: "SF Pro Text", "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif;
}
.lyrics-line {
  display: flex;
  min-height: 21px;
  align-items: flex-start;
  border-radius: 6px;
}
.lyrics-line.is-pointer-hovered { background: rgba(238, 227, 209, .72); }
.lyrics-line.is-selected { background: rgba(245, 206, 34, .34); }
.lyrics-line.is-selected.is-section-selected { background: rgba(255, 93, 104, .27); }
.lyrics-line.is-section-header { margin-top: 10px; }
.lyrics-line.is-section-header .lyrics-line-content { font-weight: 800; }
.lyrics-line-handle {
  display: grid;
  width: 26px;
  min-width: 26px;
  height: 21px;
  place-items: center;
  padding: 0;
  margin-right: 4px;
  opacity: 0;
  color: rgba(5, 5, 5, .78);
  text-align: center;
  cursor: grab;
  user-select: none;
}
.lyrics-line.is-pointer-hovered .lyrics-line-handle, .lyrics-line.is-selected .lyrics-line-handle { opacity: 1; }
.lyrics-line-handle:active { cursor: grabbing; }
.lyrics-line-handle::before {
  width: 17px;
  height: 12px;
  border-radius: 2px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 17px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 5px / 17px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 17px 2px no-repeat;
  content: "";
}
.lyrics-line-handle::before { display: none; }
.lyrics-line-handle .material-symbols-outlined { font-size: 18px; line-height: 1; }
.lyrics-line-content {
  min-width: 0;
  min-height: 21px;
  flex: 1;
  padding: 1px 3px;
  outline: none;
  font: var(--writing-font-weight) var(--writing-font-size)/var(--lyrics-line-height) var(--writing-font-family);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.lyrics-line.dragging { opacity: .3; }
.lyrics-line.drop-before { border-top: 2px solid var(--ink); }
.lyrics-line.drop-after { border-bottom: 2px solid var(--ink); }
.lyrics-selection-toolbar {
  position: fixed;
  z-index: 1000;
  display: none;
  gap: 5px;
  padding: 5px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: white;
  box-shadow: 4px 4px 0 rgba(5, 5, 5, .16);
}
.lyrics-selection-toolbar button {
  min-height: 27px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: var(--ink);
  color: white;
  font-size: .62rem;
  font-weight: 850;
}
.lyrics-selection-toolbar button:hover { background: var(--yellow); color: var(--ink); }
.lyrics-selection-formatting { display: flex; align-items: center; gap: 3px; padding-right: 5px; border-right: 1px solid rgba(5, 5, 5, .25); }
.lyrics-selection-toolbar .lyrics-format-button { width: 27px; padding: 0; }
.lyrics-selection-toolbar .lyrics-format-button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.lyrics-variant { color: var(--blue); cursor: pointer; border-radius: 4px; }
.lyrics-variant:hover { background: rgba(53, 104, 212, .1); }
.lyrics-variant-editor {
  display: inline-flex;
  max-width: none;
  align-items: center;
  gap: 6px;
  padding: 1px 6px;
  margin: 0 2px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: var(--paper);
  vertical-align: baseline;
  white-space: nowrap;
}
.lyrics-variant-option-wrap { display: inline-flex; align-items: center; gap: 2px; }
.lyrics-variant-option-wrap + .lyrics-variant-option-wrap { padding-left: 6px; border-left: 1px solid rgba(5, 5, 5, .24); }
.lyrics-variant-option { color: var(--muted); cursor: pointer; overflow-wrap: anywhere; }
.lyrics-variant-option.active { color: var(--blue); font-weight: 800; }
.lyrics-variant-option:hover { color: var(--ink); }
.lyrics-variant-action {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(5, 5, 5, .58);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 850;
  user-select: none;
}
.lyrics-variant-action:hover { background: var(--yellow); color: var(--ink); }
.lyrics-variant-commit-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lyrics-variant-option-delete { width: 17px; height: 17px; font-size: .66rem; }
.lyrics-variant-divider { width: 1px; height: 15px; flex: none; margin: 0 1px; background: rgba(5, 5, 5, .24); user-select: none; }
.module-frame .lyrics-add-alt-input {
  width: 110px;
  min-width: 110px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.module-frame .lyrics-add-alt-input:focus { box-shadow: none; }
.notepad-focus-layout { height: 100%; min-height: 0; }
.notepad-editor {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 11px;
  background: white;
}
.notepad-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  overflow-x: hidden;
  padding: 5px;
  border-bottom: 2px solid var(--ink);
  background: var(--cream);
  scrollbar-width: thin;
}
.notepad-toolbar-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: white;
}
.notepad-toolbar-group button {
  min-width: 25px;
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: .61rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
.notepad-toolbar-group button + button { border-left: 0; }
.notepad-toolbar-group button:hover, .notepad-toolbar-group button.is-active { background: var(--yellow); }
.notepad-toolbar-group button:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(245, 206, 34, .55); outline-offset: -1px; }
.notepad-icon-group { gap: 2px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.notepad-icon-group button { width: 25px; padding: 0; border-radius: 5px; background: transparent; }
.notepad-icon-group button:hover, .notepad-icon-group button:active { background: var(--yellow); }
.notepad-icon-group svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notepad-icon-group .material-symbols-outlined { font-size: 16px; line-height: 1; }
.notepad-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.notepad-underline { text-decoration: underline; }
.saved-notes-archive { display: none; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 10px; overflow: hidden; border: 3px solid var(--ink); border-radius: 11px; background: var(--cream); }
.saved-notes-archive > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.saved-notes-archive h3 { margin: 0; font-size: .82rem; font-weight: 900; white-space: nowrap; }
.saved-notes-archive input { width: 100%; height: 32px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 7px; background: white; font-size: .68rem; }
.saved-notes-grid { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 7px; overflow: auto; align-content: start; }
.saved-note-card { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 2px solid var(--ink); border-radius: 8px; background: white; }
.saved-note-card > header { display: flex; min-height: 33px; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px 4px 9px; border-bottom: 1.5px solid var(--ink); }
.saved-note-card time { color: var(--muted); font-size: .54rem; font-weight: 700; }
.saved-note-card header span { display: flex; gap: 2px; }
.saved-note-card button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 5px; background: transparent; font-size: .78rem; font-weight: 900; }
.saved-note-card [data-saved-note-copy] svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.saved-note-card button:hover { background: var(--yellow); }
.saved-note-card [data-saved-note-delete]:hover { background: var(--coral); }
.saved-note-content { min-height: 0; overflow: auto; padding: 10px; font-family: "SF Pro Text", "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif; font-size: .78rem; font-weight: 400; line-height: 1.25; }
.saved-note-content p { margin: 0; }
.saved-note-content h2 { margin: .16em 0 .12em; font-size: 1.08rem; line-height: 1.14; letter-spacing: -.01em; }
.saved-note-content pre { margin: .35em 0; padding: .58em .78em; border-radius: 7px; background: #d7c4a4; font: 400 .9em/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; }
.saved-note-content pre code { font: inherit; }
.saved-note-content ul, .saved-note-content ol { margin: 0; padding-left: 2em; }
.saved-note-content blockquote { margin: .96em 0; padding-left: 1em; border-left: 3px solid var(--ink); }
.saved-note-content [data-indent="1"] { margin-left: 2rem; }
.saved-note-content [data-indent="2"] { margin-left: 4rem; }
.saved-note-content [data-indent="3"] { margin-left: 6rem; }
.saved-notes-empty { grid-column: 1 / -1; margin: 10px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.notepad-writing-surface {
  min-height: 0;
  overflow: auto;
  padding: clamp(8px, 1.4vw, 16px);
  color: var(--ink);
  font: var(--writing-font-weight) var(--writing-font-size)/var(--writing-line-height) var(--writing-font-family);
  white-space: pre-wrap;
  word-break: break-word;
}
.notepad-writing-surface:focus,
.notepad-writing-surface:focus-visible,
.notepad-writing-surface .ProseMirror,
.notepad-writing-surface .ProseMirror:focus,
.notepad-writing-surface .ProseMirror:focus-visible { outline: none !important; box-shadow: none !important; }
.notepad-writing-surface .ProseMirror { min-height: 100%; }
.notepad-writing-surface[contenteditable="true"] { min-height: 100%; cursor: text; }
.notepad-writing-surface[contenteditable="true"]:empty::before { color: rgba(5, 5, 5, .38); content: "Start writing…"; pointer-events: none; }
.notepad-writing-surface .ProseMirror > :first-child { margin-top: 0; }
.notepad-writing-surface .ProseMirror > :last-child { margin-bottom: 0; }
.notepad-writing-surface p { margin: 0; }
.notepad-writing-surface ul, .notepad-writing-surface ol { margin: 0; padding-left: 2em; font-size: inherit; line-height: inherit; }
.notepad-writing-surface li { margin: 0; padding-left: 0; line-height: inherit; }
.notepad-writing-surface li + li { margin-top: 0; }
.notepad-writing-surface li > p { margin: 0; }
.notepad-writing-surface ul { list-style-type: disc; }
.notepad-writing-surface ul ul { list-style-type: circle; }
.notepad-writing-surface ul ul ul { list-style-type: square; }
.notepad-writing-surface ol { list-style-type: decimal; }
.notepad-writing-surface h1 { margin: .94em 0 .42em; color: var(--ink); font-size: 1.55rem; font-weight: 800; line-height: 1.06; letter-spacing: -.02em; text-transform: none; }
.notepad-writing-surface h2 { margin: .16em 0 .12em; color: var(--ink); font-size: 1.08rem; font-weight: 720; line-height: 1.14; letter-spacing: -.01em; text-transform: none; }
.notepad-writing-surface h3 { margin: .34em 0 .16em; color: var(--muted); font-size: .66rem; font-weight: 520; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.notepad-writing-surface h3 + p, .notepad-writing-surface h3 + ul, .notepad-writing-surface h3 + ol, .notepad-writing-surface h3 + blockquote { margin-top: .7em; }
.notepad-writing-surface pre { margin: .35em 0; padding: .58em .78em; border-radius: 7px; background: #d7c4a4; color: var(--ink); font: 400 .9em/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; }
.notepad-writing-surface pre code { color: inherit; font: inherit; }
.notepad-writing-surface blockquote { margin: .96em 0; padding: .05em 0 .05em 1em; border-left: 3px solid var(--ink); color: var(--ink); background: transparent; }
.notepad-writing-surface hr { height: 0; margin: 1.18em 0; border: 0; border-top: 1px solid rgba(5, 5, 5, .14); background: transparent; }
.notepad-writing-surface [data-indent="1"] { margin-left: 2rem; }
.notepad-writing-surface [data-indent="2"] { margin-left: 4rem; }
.notepad-writing-surface [data-indent="3"] { margin-left: 6rem; }
.notepad-writing-surface .is-editor-empty:first-child::before { position: absolute; color: rgba(5, 5, 5, .38); content: attr(data-placeholder); cursor: text; pointer-events: none; }
.focused-module .notepad-focus-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 10px; }
.focused-module .notepad-editor { width: auto; margin: 0; }
.focused-module .saved-notes-archive { display: grid; }
.focused-module.module-lyrics .module-body { container-name: notepad-module; container-type: inline-size; }

.chord-module-content { height: 100%; }
.module-chords .module-body { width: 100%; }
.chord-expanded { position: relative; display: grid; height: 100%; min-height: 0; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.focused-module.module-chords .module-body { overflow: hidden; }
.chord-side-rail { display: flex; min-width: 0; min-height: 0; align-items: center; flex-direction: column; gap: 5px; overflow-y: auto; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; scrollbar-width: thin; }
.chord-rail-fields { display: grid; gap: 3px; }
.chord-rail-fields label { display: grid; min-width: 0; gap: 2px; }
.chord-rail-fields label > span { overflow: hidden; padding-left: 1px; font-size: .48rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.chord-rail-fields input, .chord-rail-fields select { width: 100%; height: 29px; min-width: 0; padding: 0 5px; border: 2px solid var(--ink); border-radius: 7px; background: white; font-size: .62rem; font-weight: 800; }
.chord-rail-history, .chord-rail-modes, .chord-rail-actions { display: grid; grid-template-columns: 1fr; gap: 3px; }
.chord-rail-actions { margin-top: auto; margin-bottom: 12px; }
.chord-meta-toggle, .chord-rail-history button, .chord-rail-modes button, .chord-rail-actions button { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; justify-self: center; padding: 0; border: 2px solid var(--ink); border-radius: 10px; background: white; color: var(--ink); }
.chord-meta-toggle:disabled, .chord-rail-history button:disabled, .chord-rail-modes button:disabled, .chord-rail-actions button:disabled { opacity: .38; cursor: not-allowed; }
.chord-side-rail button:hover:not(:disabled), .chord-side-rail button:active:not(:disabled) { background: var(--yellow); color: var(--ink); }
.chord-meta-toggle[aria-expanded="true"] { background: var(--yellow); }
.chord-rail-modes button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.chord-rail-icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chord-rail-modes .material-symbols-outlined { width: 23px; height: 23px; font-size: 23px; line-height: 1; }
.chord-rail-actions .material-icon-info { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.chord-rail-actions .material-icon-delete { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.chord-rail-actions .material-icon-file-export { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.chord-rail-actions .material-symbols-outlined { width: 23px; height: 23px; font-size: 23px; line-height: 1; }
.chord-rail-history .material-symbols-outlined { width: 23px; height: 23px; font-size: 23px; line-height: 1; }
.chord-rail-status { min-height: 12px; color: var(--muted); font-size: .5rem; font-weight: 750; line-height: 1.2; text-align: center; }
.chord-rail-status:empty { display: none; }
.chord-meta-popover { position: absolute; top: 0; left: 56px; z-index: 20; display: grid; width: 190px; gap: 10px; padding: 11px; border: 3px solid var(--ink); border-radius: 11px; background: white; box-shadow: 6px 6px 0 rgba(5,5,5,.18); }
.chord-meta-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chord-meta-popover > header strong { font-size: .76rem; }
.chord-meta-popover > header button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 7px; background: white; }
.chord-meta-popover > header .chord-rail-icon { width: 16px; height: 16px; }
.chord-meta-popover > header .material-icon-info { width: 16px; height: 16px; }
.chart-builder-grid { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
.chart-mode-input .chart-builder-grid, .chart-mode-output .chart-builder-grid { grid-template-columns: minmax(0, 1fr); }
.chart-mode-input .chart-preview-panel { display: none; }
.chart-mode-output .chart-input-panel { display: none; }
.chart-input-panel, .chart-preview-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 3px solid var(--ink); border-radius: 11px; background: white; }
.chart-input-panel.has-input-key-warning, .chart-preview-panel.has-input-key-warning { grid-template-rows: auto auto minmax(0, 1fr); }
.chart-input-panel > header, .chart-preview-panel > header { display: flex; height: 57px; min-height: 57px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; border-bottom: 3px solid var(--ink); background: var(--ink); color: white; }
.chart-input-panel > header strong, .chart-preview-panel > header strong { font-size: 1rem; letter-spacing: -.02em; }
.chart-input-panel > header span { color: rgba(255,255,255,.65); font-size: .64rem; font-weight: 650; }
.chart-input-panel textarea, .bracket-cursor-editor { display: block; width: 100%; height: 100%; min-height: 0; resize: none; padding: 18px; border: 0; border-radius: 0; box-shadow: none; font: var(--writing-font-weight) var(--writing-mono-font-size)/var(--writing-line-height) ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.bracket-cursor-editor { overflow: auto; background: white; color: var(--ink); cursor: text; outline: 0; user-select: none; }
.bracket-cursor-line { position: relative; width: max-content; min-width: 100%; min-height: 1.35em; }
.bracket-cursor-line > [data-bracket-cursor-position] { cursor: text; }
.bracket-cursor-measure { position: absolute; visibility: hidden; pointer-events: none; }
.bracket-cursor-chord { border-radius: 3px; color: var(--blue); cursor: grab; touch-action: none; }
.bracket-cursor-chord.is-selected { background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bracket-cursor-chord.is-editing { box-shadow: 0 0 0 2px var(--ink); cursor: text; }
.bracket-chord-edit-caret { display: inline-block; height: .92em; border-left: 2px solid currentColor; vertical-align: -.08em; animation: bracket-cursor-blink 1s steps(1, end) infinite; }
.bracket-cursor-chord.is-dragging { opacity: .48; cursor: grabbing; }
.bracket-cursor-drag-caret { display: inline-block; width: 0; height: .95em; border-left: 2px solid var(--blue); vertical-align: -.1em; pointer-events: none; }
.bracket-cursor-line > .is-bracket-drag-target { background: rgba(53, 104, 212, .16); box-shadow: inset 2px 0 var(--blue); }
.bracket-cursor-caret { border-radius: 3px; background: rgba(53, 104, 212, .12); color: var(--blue); }
.bracket-cursor-editor:not(:focus) .bracket-cursor-caret { display: none; }
.bracket-cursor-caret i { display: inline-block; height: .92em; border-left: 2px solid currentColor; vertical-align: -.08em; animation: bracket-cursor-blink 1s steps(1, end) infinite; }
@keyframes bracket-cursor-blink { 50% { opacity: 0; } }
.chart-input-panel > header, .chart-preview-panel > header { position: relative; z-index: 3; align-items: center; flex-direction: row; flex-wrap: nowrap; overflow: visible; }
.chart-input-panel > header strong, .chart-preview-panel > header strong { flex: 0 0 auto; }
.chart-output-controls { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 6px; }
.chart-listen-toggle { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: white; }
.chart-listen-toggle .material-symbols-outlined { width: 23px; height: 23px; font-size: 23px; line-height: 1; }
.chart-listen-toggle:hover { background: rgba(255,255,255,.14); }
.chart-listen-toggle[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.chart-listen-toggle:focus:not(:focus-visible) { outline: 0; }
.chart-output-controls .chart-view-menu { width: auto; flex: 0 1 155px; }
.chart-output-controls .chart-output-key-menu { flex-basis: 88px; }
.chart-view-menu { position: relative; width: min(180px, 62%); min-width: 0; flex: 0 1 180px; color: var(--ink); }
.chart-view-menu > summary { display: grid; width: 100%; height: 36px; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 5px; overflow: hidden; padding: 0 9px; border: 2px solid white; border-radius: 8px; background: var(--paper); color: var(--ink); font-size: .6rem; font-weight: 900; line-height: 1; list-style: none; cursor: pointer; }
.chart-view-menu > summary::-webkit-details-marker { display: none; }
.chart-view-menu > summary span { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.chart-view-menu > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.chart-view-menu[open] > summary { border-color: var(--ink); border-radius: 8px 8px 0 0; }
.chart-input-key-menu.is-warning:not([open]) > summary { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.chart-view-menu[open] > summary svg { transform: rotate(180deg); }
.chart-view-menu-panel { position: absolute; z-index: 5; top: calc(100% - 2px); right: 0; display: grid; width: 100%; max-height: min(240px, 52dvh); overflow: hidden auto; border: 2px solid var(--ink); border-radius: 0 0 8px 8px; background: var(--paper); }
.chart-view-menu-panel button { display: grid; width: 100%; min-height: 40px; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 6px; padding: 7px 9px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: .58rem; font-weight: 850; line-height: 1.15; text-align: left; }
.chart-view-menu-panel button span { color: var(--ink); }
.chart-view-menu-panel button + button { border-top: 1px solid rgba(5,5,5,.18); }
.chart-view-menu-panel button:hover { background: var(--cream); }
.chart-view-menu-panel button.is-active { background: var(--yellow); }
.chart-view-menu-panel button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart-input-key-warning { padding: 7px 12px; border-bottom: 2px solid var(--ink); background: var(--yellow); color: var(--ink); font-size: .58rem; font-weight: 850; line-height: 1.25; }
.chord-preview-output { position: relative; z-index: 1; min-height: 0; margin: 0; padding: 18px; overflow: auto; font: var(--writing-font-weight) var(--writing-mono-font-size)/var(--writing-line-height) ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.chart-playable-chord { display: inline; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font: inherit; line-height: inherit; }
.chart-preview-panel:not(.is-listening) .chart-playable-chord { pointer-events: none; }
.chart-preview-panel.is-listening .chart-playable-chord { color: var(--blue); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(53,104,212,.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chart-preview-panel.is-listening .chart-playable-chord:hover { background: var(--yellow); color: var(--ink); text-decoration: none; }
.chart-preview-panel.is-listening .chart-playable-chord.is-selected { background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); text-decoration: none; }
.chart-playable-chord:focus:not(:focus-visible) { outline: 0; }
.chart-preview-section { font-family: "Avenir Next", "SF Pro Display", sans-serif; font-weight: 900; }
.module-grid:not(.focus-mode) .module-chords .chord-expanded { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.module-grid:not(.focus-mode) .module-chords .chord-side-rail { gap: 5px; padding: 4px 2px; }
.module-grid:not(.focus-mode) .module-chords .chord-rail-history,
.module-grid:not(.focus-mode) .module-chords .chord-rail-modes,
.module-grid:not(.focus-mode) .module-chords .chord-rail-actions { gap: 3px; }
.module-grid:not(.focus-mode) .module-chords .chord-meta-toggle,
.module-grid:not(.focus-mode) .module-chords .chord-rail-history button,
.module-grid:not(.focus-mode) .module-chords .chord-rail-modes button,
.module-grid:not(.focus-mode) .module-chords .chord-rail-actions button { width: 44px; height: 44px; }
.module-grid:not(.focus-mode) .module-chords .chord-rail-icon { width: 23px; height: 23px; }
.module-grid:not(.focus-mode) .module-chords .chord-meta-popover { left: 56px; }
.module-grid:not(.focus-mode) .module-chords[data-size^="2×"] .chart-builder-grid { grid-template-columns: minmax(0, 1fr); }
.module-grid:not(.focus-mode) .module-chords[data-size="2×1"] .chord-side-rail { min-height: 52px; }
.module-grid:not(.focus-mode) .module-lyricEditor[data-size^="1×"] .lyrics-editor-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.module-grid:not(.focus-mode) .module-lyricEditor[data-size^="1×"] .lyrics-side-rail { width: 100%; align-items: center; flex-direction: row; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 0 0 3px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.module-grid:not(.focus-mode) .module-lyricEditor[data-size^="1×"] .lyrics-side-rail::-webkit-scrollbar { display: none; }
.module-grid:not(.focus-mode) .module-lyricEditor[data-size^="1×"] .lyrics-rail-history,
.module-grid:not(.focus-mode) .module-lyricEditor[data-size^="1×"] .lyrics-rail-move,
.module-grid:not(.focus-mode) .module-lyricEditor[data-size^="1×"] .lyrics-rail-actions { display: contents; }
.module-grid:not(.focus-mode) .module-lyricEditor[data-size^="1×"] .lyrics-rail-actions { margin: 0; }

dialog { width: min(470px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 18px; background: transparent; }
#new-song-dialog { width: min(820px, calc(100vw - 24px)); }
#new-project-dialog { width: min(820px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(5, 5, 5, .72); }
.new-song-form {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
  gap: 17px;
  padding: 22px;
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  background: var(--cream);
}
.new-project-form {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
  gap: 17px;
  padding: 22px;
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  background: var(--cream);
}
.new-project-form > header { grid-column: 1 / -1; }
.new-project-form > header { display: flex; align-items: center; justify-content: space-between; }
.new-project-form > header .dialog-close { margin-left: auto; }
.new-project-intro { display: grid; grid-column: 1; align-content: start; gap: 14px; padding: 15px 18px 18px 2px; }
.new-project-intro-title { display: flex; align-items: center; gap: 10px; }
.new-project-mark { display: grid; width: 45px; height: 45px; place-items: center; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 1.7rem; font-weight: 900; }
.new-project-intro h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: .94; letter-spacing: -.045em; }
.new-project-intro p, .new-project-section-copy p { max-width: 58ch; margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.45; }
.new-project-step { display: grid; grid-column: 2; align-content: start; gap: 13px; }
.new-project-step[hidden] { display: none; }
.new-project-form label { display: grid; gap: 6px; }
.new-project-form label > span { font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.new-project-form label small { color: var(--muted); font-size: .9em; letter-spacing: 0; text-transform: none; }
.new-project-form input, .new-project-form textarea, .new-project-form select { width: 100%; min-width: 0; padding: 11px 12px; border: 2px solid var(--ink); border-radius: 10px; background: white; color: var(--ink); outline: 0; resize: vertical; }
.new-project-form input, .new-project-form select { height: 48px; }
.new-project-form input:focus, .new-project-form textarea:focus, .new-project-form select:focus { box-shadow: 0 0 0 4px var(--yellow); }
.new-project-section-copy { display: grid; gap: 5px; }
.new-project-section-copy strong { font-size: 1rem; }
.new-project-member-summary { display: grid; gap: 7px; }
.new-project-member-summary > div { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 2px solid var(--ink); border-radius: 9px; background: white; font-size: .7rem; font-weight: 850; }
.new-project-member-summary > div > span:last-child { margin-left: auto; color: var(--muted); font-size: .58rem; text-transform: uppercase; }
.new-project-member-summary i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--blue); color: white; font-style: normal; font-size: .58rem; font-weight: 950; }
.new-project-connection-picker { display: grid; gap: 7px; }
.new-project-connection-picker-head { display: grid; gap: 3px; }
.new-project-connection-picker-head strong { font-size: .78rem; }
.new-project-connection-picker-head small, .new-project-connection-empty { color: var(--muted); font-size: .62rem; font-weight: 750; line-height: 1.4; }
.new-project-connection-row { display: grid !important; grid-template-columns: auto 30px minmax(0, 1fr) 96px; align-items: center; gap: 8px !important; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 9px; background: white; }
.new-project-connection-row > input { width: 16px !important; height: 16px !important; accent-color: var(--ink); }
.new-project-connection-row > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--member-profile-color, var(--blue)); color: var(--member-profile-ink, white); font-style: normal; }
.new-project-connection-row > i svg { width: 22px; height: 22px; }
.new-project-connection-row > span { min-width: 0; overflow-wrap: anywhere; font-size: .68rem; font-weight: 850; }
.new-project-connection-row > select { height: 34px !important; padding: 0 6px !important; border-width: 1px !important; border-radius: 7px !important; font-size: .58rem; font-weight: 850; }
.new-project-member-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 78px 28px; align-items: center; gap: 8px; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 9px; background: white; }
.new-project-member-row > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: var(--blue); color: white; font-size: .56rem; font-style: normal; font-weight: 950; }
.new-project-member-row > select { width: 100%; min-width: 0; height: 34px; padding: 0 7px; border: 1.5px solid var(--ink); border-radius: 7px; background: white; font-size: .58rem; font-weight: 850; }
.new-project-member-row .new-song-access-toggle { grid-column: 3; }
.new-project-member-row .new-song-person-remove { grid-column: 4; grid-row: 1; }
.new-project-member-actions { margin-top: 1px; }
.new-project-invite-actions, .new-project-song-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.new-project-invite-actions button, .new-project-song-actions button, .new-project-existing-song button { min-height: 40px; padding: 0 11px; border: 2px solid var(--ink); border-radius: 8px; background: white; font-size: .64rem; font-weight: 900; }
.new-project-invite-actions button:first-child, .new-project-existing-song button, .new-project-song-actions button:first-child { background: var(--yellow); }
.new-project-song-list { display: grid; gap: 6px; }
.new-project-song-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 2px solid var(--ink); border-radius: 9px; background: white; }
.new-project-song-list strong { font-size: .72rem; }
.new-project-song-list small { color: var(--muted); font-size: .58rem; font-weight: 750; }
.new-project-song-list button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 1rem; font-weight: 950; }
.new-project-song-list button:hover { background: var(--coral); }
.new-project-song-list p { margin: 0; padding: 8px 0; color: var(--muted); font-size: .67rem; font-weight: 750; }
.new-project-existing-song { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.new-project-existing-song button { height: 48px; }
.new-project-status { min-height: 1.2em; margin: 0; color: var(--muted); font-size: .65rem; font-weight: 800; }
.new-project-status.is-error { color: #a52c20; }
.new-project-actions { display: flex; width: 100%; justify-content: space-between; gap: 8px; margin-top: 5px; padding-top: 14px; border-top: 2px solid rgba(5, 5, 5, .25); }
.new-project-actions > button { min-height: 48px; }
.new-project-secondary-button { padding: 0 13px; border: 2px solid var(--ink); border-radius: 10px; background: white; color: var(--ink); font-size: .76rem; font-weight: 900; }
.new-project-secondary-button:hover { background: var(--cream-dark); }
@media (max-width: 560px) {
  .new-project-form { padding: 17px; }
  .new-project-intro, .new-project-step { grid-column: 1; }
  .new-project-intro { padding: 2px 0 4px; }
  .new-project-existing-song { grid-template-columns: 1fr; align-items: stretch; }
  .new-project-existing-song button { height: auto; }
}
.new-song-form header { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; }
.new-song-intro { display: grid; align-content: start; gap: 14px; padding: 15px 18px 18px 2px; }
.new-song-intro-title { display: flex; min-width: 0; align-items: center; gap: 10px; }
.new-song-mushroom-mark { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 0; background: transparent; }
.new-song-mushroom-mark svg { width: 48px; height: 48px; }
.new-song-sun-mark, .new-project-sun-mark { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 0; background: transparent; }
.new-song-sun-mark svg, .new-project-sun-mark svg { width: 48px; height: 48px; }
.new-song-button-mushroom { display: block; width: 21px; height: 21px; flex: 0 0 auto; }
.new-song-button-sun { display: block; width: 21px; height: 21px; flex: 0 0 auto; }
.create-song-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.new-song-intro h2 { max-width: 9ch; margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: .94; letter-spacing: -.045em; }
.new-song-intro p { max-width: 28ch; margin: 0; color: var(--muted); font-size: .82rem; font-weight: 700; line-height: 1.45; }
.new-song-step { display: grid; gap: 17px; }
.new-song-step[hidden] { display: none; }
.dialog-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: 9px;
  background: white;
  font-size: 1.15rem;
}
.new-song-form label { display: grid; gap: 6px; }
.new-song-form label span { font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.new-song-form input, .new-song-form select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  outline: 0;
}
.new-song-form input:focus, .new-song-form select:focus { box-shadow: 0 0 0 4px var(--yellow); }
.new-song-writers { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.new-song-writers legend { margin-bottom: 6px; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.new-song-writer-list { display: grid; max-height: min(242px, 36vh); gap: 7px; overflow-y: auto; padding: 2px; }
.new-song-writer-option { display: grid; min-height: 50px; grid-template-columns: 34px minmax(100px, .8fr) minmax(110px, 1fr) 78px 28px; align-items: center; gap: 8px; padding: 7px 9px; border: 2px solid var(--ink); border-radius: 9px; background: white; }
.new-song-form .new-song-person-credit { width: 100%; min-width: 0; grid-column: 3; height: 34px; padding: 0 9px; border-width: 1.5px; border-radius: 7px; }
.new-song-person-control { display: grid; min-width: 0; grid-column: 2; gap: 2px; }
.new-song-person-control strong, .new-song-person-control small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-song-person-control strong { font-size: .72rem; }
.new-song-person-control small { color: var(--muted); font-size: .55rem; font-weight: 750; }
.new-song-form .new-song-person-control select, .new-song-form .new-song-person-control input { height: 34px; min-width: 0; padding: 0 8px; border-width: 1.5px; border-radius: 7px; }
.new-song-owner-access { display: flex; width: 100%; height: 34px; grid-column: 4; align-items: center; justify-content: flex-start; padding-left: 8px; text-align: left; }
.new-song-access-toggle { width: 100%; height: 32px; grid-column: 4; padding: 0 7px; border: 2px solid var(--ink); border-radius: 7px; font-size: .55rem; font-weight: 950; }
.new-song-access-toggle.is-editor { background: var(--lavender); color: white; }
.new-song-access-toggle.is-viewer { background: white; color: var(--ink); }
.new-song-writer-option > i { display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border-radius: 7px; background: var(--blue); color: white; font-size: .55rem; font-style: normal; font-weight: 950; }
.new-song-writer-option > i.is-profile-avatar { background: var(--credit-avatar-color); color: var(--credit-avatar-ink); }
.new-song-writer-option > i svg { width: 31px; height: 31px; }
.new-song-person-remove { display: grid; width: 28px; height: 28px; grid-column: 5; grid-row: 1; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 1rem; font-weight: 950; }
.new-song-person-remove:hover { background: var(--coral); }
.new-song-person-remove-spacer { width: 28px; }
.new-song-manual-avatar { background: var(--cream-dark) !important; color: var(--ink) !important; font-size: .85rem !important; }
.new-song-people-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.new-song-people-actions button { min-height: 36px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: white; font-size: .62rem; font-weight: 900; }
.new-song-people-actions button:last-child { background: var(--yellow); }
.new-song-people-actions button:disabled { cursor: default; opacity: .42; }
.new-song-writer-empty { margin: 0; color: var(--muted); font-size: .66rem; font-weight: 750; }
.new-song-workspaces { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.new-song-workspaces legend { margin-bottom: 7px; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.new-song-workspace-grid { display: grid; max-height: min(470px, 56vh); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-y: auto; padding: 3px; }
.new-song-workspace-option { position: relative; min-width: 0; cursor: pointer; }
.new-song-workspace-option:has(input:checked) { background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
.new-song-workspace-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.new-song-blank-preview i { border: 1px solid rgba(5,5,5,.25); border-radius: 2px; background: var(--cream); }
.new-song-actions { display: flex; width: 100%; max-width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 5px; padding-top: 14px; border-top: 2px solid rgba(5, 5, 5, .25); }
.new-song-actions > button { width: auto; flex: 0 0 auto; padding-inline: 14px; }
.new-song-actions .create-song-button { margin-top: 0; border-width: 2px; }
.new-song-actions .create-song-button { min-height: 56px; font-size: .82rem; }
.new-song-secondary-button { min-height: 48px; border: 2px solid var(--ink); border-radius: 10px; background: white; color: var(--ink); font-size: .76rem; font-weight: 900; }
.new-song-secondary-button:hover { background: var(--cream-dark); }
.new-song-confirmation { align-content: start; }
.new-song-confirmation-copy { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; border: var(--line) solid var(--ink); border-radius: 12px; background: var(--tool-reference); }
.new-song-confirmation-mark { display: grid; width: 46px; height: 46px; place-items: center; border: var(--line) solid var(--ink); border-radius: 50%; background: white; font-size: 1.5rem; font-weight: 950; }
.new-song-confirmation h3 { margin: 0; font-size: 1.25rem; line-height: 1; }
.new-song-confirmation p { margin: 5px 0 0; color: var(--muted); font-size: .7rem; font-weight: 750; line-height: 1.35; }
.new-song-confirmation-links { display: grid; gap: 7px; }
.new-song-confirmation-links label { display: grid; grid-template-columns: minmax(90px, .55fr) minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.new-song-confirmation-links label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-song-confirmation-links input { min-width: 0; }
.new-song-confirmation-links button, .pending-song-invitation-link { min-height: 34px; padding: 0 10px; border: var(--line) solid var(--ink); border-radius: 8px; background: white; color: var(--ink); font-size: .62rem; font-weight: 900; white-space: nowrap; }
.pending-song-invitation-link { grid-column: 5; justify-self: end; }
.song-limit-dialog { width: min(680px, calc(100vw - 24px)); }
.song-limit-panel { display: grid; gap: 18px; padding: clamp(22px, 5vw, 36px); border: 4px solid var(--ink); border-radius: 22px; background: var(--cream); box-shadow: 9px 9px 0 var(--yellow); }
.song-limit-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.song-limit-panel .label { width: max-content; margin: 0; padding: 5px 8px; border-radius: 7px; background: var(--green); color: white; font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.song-limit-hero { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 20px; }
.song-limit-character { display: grid; width: 100px; height: 100px; place-items: center; border: 3px solid var(--ink); border-radius: 24px; background: var(--yellow); animation: account-sun-float 3.6s ease-in-out infinite; }
.song-limit-character svg { width: 84px; height: 84px; }
.song-limit-hero h2 { max-width: 13ch; margin: 0; font-size: clamp(2rem, 6vw, 3.8rem); line-height: .93; letter-spacing: -.06em; }
.song-limit-hero p { max-width: 46ch; margin: 10px 0 0; color: var(--muted); font-size: .82rem; font-weight: 700; line-height: 1.45; }
.song-limit-pro-note { display: grid; gap: 9px; padding: 13px 15px; border: 2px solid var(--ink); border-radius: 11px; background: white; }
.song-limit-pro-note strong { font-size: .72rem; }
.song-limit-pro-note > div { display: flex; flex-wrap: wrap; gap: 7px; }
.song-limit-pro-note span { padding: 6px 9px; border-radius: 7px; background: var(--lavender); color: white; font-size: .64rem; font-weight: 900; }
.song-limit-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 9px; }
.song-limit-actions button { min-height: 50px; padding: 0 13px; border: 2px solid var(--ink); border-radius: 10px; font-size: .72rem; font-weight: 950; }
.song-limit-upgrade { background: var(--yellow); }
.song-limit-projects { background: white; }
.song-limit-actions button:hover { background: var(--ink); color: white; }
.song-limit-footnote { color: var(--muted); font-size: .62rem; font-weight: 700; line-height: 1.4; }
@media (max-width: 560px) {
  #new-song-dialog { width: min(540px, calc(100vw - 24px)); }
  .new-song-form { grid-template-columns: 1fr; }
  .new-song-form header { grid-column: 1; }
  .new-song-intro { padding: 2px 0 4px; }
  .new-song-intro h2 { max-width: none; font-size: 1.9rem; }
  .new-song-intro p { max-width: none; }
  .new-song-workspace-grid { grid-template-columns: 1fr; }
  .song-limit-hero { grid-template-columns: 1fr; gap: 13px; }
  .song-limit-character { width: 76px; height: 76px; border-radius: 18px; }
  .song-limit-character svg { width: 62px; height: 62px; }
  .song-limit-hero h2 { max-width: none; font-size: 2.4rem; }
  .song-limit-actions { grid-template-columns: 1fr; }
  .new-song-confirmation-links label { grid-template-columns: minmax(0, 1fr) auto; }
  .new-song-confirmation-links label > span { grid-column: 1 / -1; }
}
.create-song-button {
  min-height: 48px;
  margin-top: 4px;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  background: var(--yellow);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 900;
}
.edit-song-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.edit-song-actions button { min-height: 46px; padding: 0 12px; border: var(--line) solid var(--ink); border-radius: 10px; background: white; font-size: .72rem; font-weight: 900; }
.edit-song-actions .create-song-button { margin-top: 0; background: var(--yellow); }
.edit-song-actions [data-edit-song-delete]:hover { background: var(--coral); }
.create-song-button:hover { background: var(--ink); color: white; }

.delete-list-dialog { display: grid; width: min(440px, calc(100vw - 24px)); gap: 16px; padding: 20px; border: var(--heavy-line) solid var(--ink); border-radius: 18px; background: var(--cream); }
.delete-list-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.delete-list-dialog > p { margin: 0; font-size: .8rem; font-weight: 650; line-height: 1.45; }
.delete-list-actions { display: grid; gap: 8px; }
.delete-list-actions button { min-height: 43px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 9px; background: white; font-size: .7rem; font-weight: 850; }
.delete-list-actions .delete-list-move { background: var(--yellow); }
.delete-list-actions .delete-list-move small { display: block; font-size: .48rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.delete-list-actions .delete-list-all { background: var(--coral); }
.delete-list-actions button:hover { background: var(--ink); color: white; }

.shared-entry-gate { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 20px; background: rgba(5,5,5,.78); backdrop-filter: blur(5px); }
.shared-entry-gate > article { display: grid; width: min(650px, 100%); gap: 17px; padding: clamp(24px, 6vw, 46px); border: 4px solid var(--ink); border-radius: 24px; background: var(--cream); box-shadow: 10px 10px 0 var(--yellow); }
.shared-entry-gate .label { width: max-content; margin: 0; padding: 5px 8px; border-radius: 7px; background: var(--ink); color: white; }
.shared-entry-gate h1 { max-width: 12ch; margin: 0; font-size: clamp(2.35rem, 8vw, 4.8rem); line-height: .92; letter-spacing: -.065em; }
.shared-entry-gate article > p:not(.label) { max-width: 50ch; margin: 0; font-size: .82rem; font-weight: 750; line-height: 1.45; }
.shared-entry-gate article > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.shared-entry-gate button { min-height: 52px; padding: 0 16px; border: var(--line) solid var(--ink); border-radius: 11px; font-size: .76rem; font-weight: 950; }
.shared-entry-create { background: var(--yellow); }
.shared-entry-sign-in { background: white; }
.shared-entry-gate button:hover { background: var(--ink); color: white; }

.account-dialog { position: fixed; inset: 0 0 0 auto; width: min(410px, 100vw); max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; overflow-y: auto; overscroll-behavior-y: none; border-radius: 0; }
.account-dialog::backdrop { background: rgba(5, 5, 5, .46); }
.account-dialog.is-shared-entry.is-local-limit::backdrop { background: rgba(5, 5, 5, .82); }
.inbox-dialog { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--cream); }
.inbox-dialog::backdrop { background: rgba(5, 5, 5, .4); }
.inbox-panel { display: grid; height: 100%; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); border-left: var(--line) solid var(--ink); }
.inbox-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 22px 19px; border-bottom: var(--line) solid var(--ink); }
.inbox-panel h2 { margin: 0; font-size: clamp(2rem, 6vw, 2.8rem); line-height: .9; letter-spacing: -.055em; }
.inbox-panel .dialog-close { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 1.5rem; font-weight: 900; }
.inbox-panel .dialog-close:hover, .inbox-panel .dialog-close:focus-visible { background: rgba(5,5,5,.08); outline: 0; }
.inbox-filters { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid rgba(5,5,5,.18); background: rgba(255,255,255,.42); }
.inbox-filters button { min-height: 32px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 7px; background: transparent; color: var(--ink); font-size: .58rem; font-weight: 900; white-space: nowrap; }
.inbox-filters button:hover, .inbox-filters button:focus-visible, .inbox-filters button.is-active { background: var(--ink); color: white; outline: 0; }
.inbox-content { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.inbox-list { display: grid; }
.inbox-item { display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto; align-items: start; column-gap: 10px; row-gap: 8px; padding: 15px 18px; border-bottom: 1px solid rgba(5,5,5,.16); background: rgba(255,255,255,.42); }
.inbox-item.is-actionable { background: white; }
.inbox-item.is-unread { background: white; }
.inbox-activity-item[data-inbox-open-song] { cursor: pointer; }
.inbox-activity-item[data-inbox-open-song]:hover { background: var(--yellow); }
.inbox-direction { display: grid; width: 26px; height: 36px; place-items: center; color: var(--ink); font-size: 22px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 500; }
.inbox-avatar { display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid var(--ink); border-radius: 9px; background: var(--connection-profile-color, var(--blue)); color: var(--connection-profile-ink, white); }
.inbox-avatar svg { width: 27px; height: 27px; }
.inbox-item-copy { min-width: 0; }
.inbox-item-copy p { margin: 1px 0 5px; font-size: .75rem; font-weight: 700; line-height: 1.35; }
.inbox-item-copy small { display: block; color: var(--muted); font-size: .58rem; font-weight: 750; line-height: 1.35; }
.inbox-actions { display: flex; grid-column: 3 / -1; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.inbox-actions button { min-height: 34px; padding: 0 11px; border: var(--line) solid var(--ink); border-radius: 8px; background: white; font-size: .62rem; font-weight: 900; }
.inbox-actions button:first-child { background: var(--yellow); }
.inbox-actions button:hover, .inbox-actions button:focus-visible { background: var(--ink); color: white; outline: 0; }
.inbox-status { align-self: start; justify-self: end; padding: 5px 7px; border-radius: 999px; background: rgba(5,5,5,.08); color: var(--muted); font-size: .54rem; font-weight: 900; text-transform: capitalize; }
.inbox-empty { display: grid; min-height: 60vh; place-content: center; justify-items: center; padding: 32px; text-align: center; }
.inbox-empty .material-symbols-outlined { color: var(--muted); font-size: 42px; }
.inbox-empty h3 { margin: 12px 0 5px; font-size: 1.25rem; }
.inbox-empty p { max-width: 28ch; margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.45; }
.account-panel { display: flex; min-height: 100%; flex-direction: column; gap: 18px; padding: 22px; border: 0; border-left: var(--line) solid var(--ink); border-radius: 0; background: var(--cream); }
.account-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.account-panel h2 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.3rem); line-height: 1; letter-spacing: -.05em; }
.account-panel > header .dialog-close { border: 0; background: transparent; font-weight: 900; }
.account-dialog.is-shared-entry { inset: 0; width: min(520px, calc(100vw - 24px)); height: max-content; max-height: calc(100dvh - 24px); margin: auto; border-radius: 20px; }
.account-dialog.is-shared-entry.is-local-limit { width: min(960px, calc(100vw - 24px)); height: max-content; align-self: start; }
.account-dialog.is-local-limit #account-title { display: none; }
.account-dialog.is-shared-entry .account-panel { min-height: 0; padding: 24px; border: var(--heavy-line) solid var(--ink); border-radius: 18px; }
.account-dialog.is-shared-entry.is-local-limit .account-panel { position: relative; height: max-content; min-height: 0; align-self: start; padding: 12px; box-shadow: 10px 10px 0 rgba(5,5,5,.22); }
.account-dialog.is-shared-entry.is-local-limit .account-panel > header { position: absolute; z-index: 3; top: 24px; left: 24px; }
.account-dialog.is-shared-entry.is-local-limit .account-panel > header .dialog-close { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border-radius: 10px; color: white; }
.account-dialog.is-shared-entry.is-local-limit .account-panel > header .dialog-close:hover, .account-dialog.is-shared-entry.is-local-limit .account-panel > header .dialog-close:focus-visible { background: rgba(255,255,255,.16); outline: 0; }
.account-dialog.is-shared-entry .account-utility-footer { display: none; }
.account-dialog.is-shared-entry .account-create-button { display: none; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out { grid-template-columns: minmax(300px, .86fr) minmax(410px, 1.14fr); gap: 12px; align-items: stretch; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out { height: fit-content; align-content: start; }
.account-dialog.is-shared-entry.is-local-limit .account-local-invite { display: contents; }
.account-dialog.is-shared-entry.is-local-limit .account-local-invite-copy { min-height: 0; grid-column: 1; grid-row: 1; align-content: center; padding: 72px clamp(28px, 4vw, 46px) clamp(32px, 4vw, 46px); border-radius: 14px; background: var(--ink); color: white; overflow: hidden; }
.account-dialog.is-shared-entry.is-local-limit .account-local-invite-actions, .account-dialog.is-shared-entry.is-local-limit .account-form { grid-column: 2; grid-row: 1; align-self: stretch; align-content: center; padding: clamp(24px, 4vw, 38px); border: var(--line) solid var(--ink); border-radius: 14px; background: white; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) { grid-template-columns: 1fr; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite { position: relative; display: grid; width: 100%; height: fit-content; min-height: 0; grid-column: 1; grid-template-columns: 1fr; align-items: center; align-self: start; gap: 22px; padding: 76px clamp(30px, 5vw, 58px) 26px; border-radius: 14px; background: var(--ink); color: white; overflow: hidden; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-copy { min-height: 0; display: grid; grid-column: 1; grid-row: 1; grid-template-columns: 136px minmax(0, 1fr); align-content: center; gap: 12px 24px; padding: 0; border-radius: 0; background: transparent; overflow: visible; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-hero { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: center; justify-content: center; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-label { position: absolute; top: 28px; left: calc(clamp(30px, 5vw, 58px) + 160px); z-index: 1; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite h3 { max-width: none; grid-column: 2; align-self: end; font-size: clamp(2.75rem, 5vw, 4.6rem); white-space: nowrap; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite p { max-width: 52ch; grid-column: 2; align-self: start; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-actions { display: grid; width: min(520px, calc(100% - 160px)); grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: start; align-self: center; gap: 8px; margin-left: 160px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-actions button:first-child { background: var(--yellow); }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-character-shell { color: white; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-actions button { color: var(--ink); }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions[hidden]) .account-local-invite-hero { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 12px; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions[hidden]) .account-local-invite-label { position: static; }
.account-dialog.is-shared-entry.is-local-limit .account-signup-avatar-options { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.account-dialog.is-shared-entry.is-local-limit .account-form:has(.account-signup-profile-step:not([hidden])), .account-dialog.is-shared-entry.is-local-limit .account-form:has([data-account-password-field]:not([hidden])) { grid-template-columns: 1fr; gap: 10px; }
.account-dialog.is-shared-entry.is-local-limit .account-form:has(.account-signup-profile-step:not([hidden]))::before, .account-dialog.is-shared-entry.is-local-limit .account-form:has([data-account-password-field]:not([hidden]))::before { display: none; }
.account-dialog.is-shared-entry.is-local-limit .account-form:has(.account-signup-profile-step:not([hidden])) > *, .account-dialog.is-shared-entry.is-local-limit .account-form:has([data-account-password-field]:not([hidden])) > * { grid-column: 1; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out > .account-local-note { display: none; }
.account-signed-out, .account-signed-in, .account-reset { display: grid; gap: 14px; }
.account-local-invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .58fr); gap: 24px; align-items: center; padding: 8px 0 4px; }
.account-local-invite-copy { display: grid; gap: 18px; }
.account-local-invite-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.account-local-invite-label { width: max-content; padding: 5px 8px; border-radius: 7px; background: var(--green); color: white; font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.account-local-invite h3 { max-width: 8ch; margin: 0; font-size: clamp(2.65rem, 5.4vw, 4.8rem); line-height: .88; letter-spacing: -.065em; }
.account-local-invite p { max-width: 34ch; margin: 0; color: rgba(255,255,255,.78); font-size: .88rem; font-weight: 700; line-height: 1.55; }
.account-local-invite-actions { display: grid; gap: 8px; padding-top: 4px; }
.account-local-invite-character-shell { display: grid; width: 132px; aspect-ratio: 1; flex: 0 0 132px; place-items: center; color: white; transform: rotate(3deg); }
.account-local-invite-character { display: block; width: 104px; height: 104px; animation: account-sun-float 3.6s ease-in-out infinite; }
.account-local-invite-actions button { min-height: 52px; padding: 0 14px; border: var(--line) solid var(--ink); border-radius: 10px; background: white; font-size: .76rem; font-weight: 950; }
.account-local-invite-actions button:last-child { border: var(--line) solid var(--ink); background: white; font-size: .76rem; }
.account-local-invite-actions button:hover { background: var(--ink); color: white; }
.account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-actions button:last-child:hover, .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-actions button:last-child:focus-visible { background: var(--yellow); color: var(--ink); }
@keyframes account-sun-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.account-signed-out > p, .account-signed-in > p, .account-reset > p, .account-local-note, .account-status { margin: 0; font-size: .76rem; font-weight: 650; line-height: 1.45; }
.account-form { display: grid; gap: 10px; }
.account-dialog.is-shared-entry .account-form:has(.account-signup-profile-step:not([hidden])), .account-dialog.is-shared-entry .account-form:has([data-account-password-field]:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(220px, .75fr); align-items: start; column-gap: 28px; }
.account-dialog.is-shared-entry .account-form:has(.account-signup-profile-step:not([hidden]))::before, .account-dialog.is-shared-entry .account-form:has([data-account-password-field]:not([hidden]))::before { grid-column: 1; grid-row: 1 / span 5; align-self: center; color: var(--muted); font-size: .9rem; font-weight: 750; line-height: 1.5; }
.account-dialog.is-shared-entry .account-form:has(.account-signup-profile-step:not([hidden]))::before { content: "Tell us a little about you, then choose the character and color that will represent you."; }
.account-dialog.is-shared-entry .account-form:has([data-account-password-field]:not([hidden]))::before { content: "Tell us a little about you, then choose the character and color that will represent you."; }
.account-dialog.is-shared-entry .account-form:has(.account-signup-profile-step:not([hidden])) > *, .account-dialog.is-shared-entry .account-form:has([data-account-password-field]:not([hidden])) > * { grid-column: 2; }
.account-form label { display: grid; gap: 6px; }
.account-form label span { font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-form input { min-height: 48px; padding: 0 12px; border: var(--line) solid var(--ink); border-radius: 10px; background: white; outline: 0; }
.account-form input:focus { box-shadow: 0 0 0 4px var(--yellow); }
.account-signup-profile-step { display: grid; gap: 14px; }
.account-signup-avatar-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.account-signup-avatar-field legend { margin-bottom: 7px; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-signup-avatar-options { display: grid; width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.account-signup-avatar-option { display: block; cursor: pointer; }
.account-signup-avatar-option > span:first-of-type { display: grid; aspect-ratio: 1; place-items: center; border: var(--line) solid var(--ink); border-radius: 10px; background: var(--blue); color: white; transition: transform .15s ease, box-shadow .15s ease; }
.account-signup-avatar-option:hover > span:first-of-type { transform: translateY(-2px); }
.account-signup-avatar-option svg { display: block; width: calc(100% - 8px); height: calc(100% - 8px); }
.account-signup-avatar-option input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.account-signup-avatar-option input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.account-signup-color-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.account-signup-color-field legend { margin-bottom: 7px; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-signup-color-options { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.account-signup-color-options label { display: block; cursor: pointer; }
.account-signup-color-options label > span:first-of-type { display: block; aspect-ratio: 1; border: var(--line) solid var(--ink); border-radius: 9px; background: var(--signup-color); transition: transform .15s ease; }
.account-signup-color-options label:hover > span:first-of-type { transform: translateY(-2px); }
.account-signup-color-options input:checked + span { box-shadow: 0 0 0 3px var(--yellow); }
.account-signup-color-options input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.account-form button, .account-profile-fields > button[type="submit"], .account-session-footer button { min-height: 46px; padding: 0 14px; border: var(--line) solid var(--ink); border-radius: 10px; background: var(--yellow); font-size: .72rem; font-weight: 900; }
.account-form button:hover { background: var(--ink); color: white; }
.account-form button:disabled, .account-profile-fields > button[type="submit"]:disabled, .account-session-footer button:disabled { cursor: wait; opacity: .55; }
.account-form .account-text-button { min-height: auto; justify-self: center; padding: 4px; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.account-form .account-text-button:hover { background: transparent; color: var(--ink); }
.account-form .account-create-button { background: white; }
.account-local-note { padding-top: 14px; border-top: 2px solid var(--ink); color: var(--muted); }
.account-status { min-height: 1.1em; color: var(--green); }
.account-dialog.is-shared-entry .account-status:empty { display: none; }
.account-status.is-error { color: #9b1c18; }
.account-utility-footer { display: grid; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 2px solid var(--ink); }
.account-utility-footer button { display: flex; align-items: center; gap: 8px; width: max-content; padding: 4px 0; border: 0; background: transparent; color: var(--ink); font-size: .72rem; font-weight: 900; }
.account-utility-footer button:hover { color: var(--green); }
.account-utility-footer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-utility-footer small { color: var(--muted); font-size: .58rem; font-weight: 700; }
.account-profile-avatar { display: grid; width: 66px; height: 66px; place-items: center; border: 3px solid white; border-radius: 18px; background: var(--account-profile-color, var(--blue)); color: var(--account-profile-ink, white); font-size: 1.3rem; font-weight: 950; letter-spacing: -.05em; }
.account-profile-avatar svg { display: block; width: 46px; height: 46px; }
.account-profile-form { display: grid; gap: 13px; padding: 15px; border: var(--line) solid var(--ink); border-radius: 14px; background: var(--ink); color: white; }
.account-profile-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.account-profile-card-head > div { min-width: 0; }
.account-profile-card-head h3 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 1.35rem; line-height: 1.08; letter-spacing: -.04em; }
.account-profile-card-head > div > span { display: block; margin-top: 5px; overflow-wrap: anywhere; color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 700; }
.account-profile-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.account-profile-pro-badge { padding: 4px 7px; border: 1px solid rgba(255,255,255,.7); border-radius: 5px; color: var(--yellow); font-size: .58rem; font-weight: 900; letter-spacing: .05em; line-height: 1; }
.account-billing-status-badge { display: inline-flex; width: max-content; min-height: 0; align-items: center; justify-content: center; padding: 3px 6px 1px; border: 2px solid var(--yellow); border-radius: 7px; background: var(--yellow); color: var(--ink); font-family: var(--heading-font-family); font-size: .95rem; font-weight: 400; letter-spacing: .08em; line-height: 1; vertical-align: middle; }
.account-billing-status-badge.is-pro { border-color: var(--green); background: var(--green); color: white; }
.account-profile-form .account-profile-edit-button { display: grid; width: 38px; min-height: 38px; place-items: center; padding: 0; border: 0; background: transparent; color: white; }
.account-profile-edit-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-profile-edit-button .material-icon { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.account-profile-form .account-profile-edit-button:hover { border-radius: 8px; background: rgba(255,255,255,.12); color: white; }
.account-profile-fields { display: grid; gap: 13px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.35); }
.account-avatar-field, .account-color-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.account-avatar-field legend, .account-color-field legend { margin-bottom: 7px; color: rgba(255,255,255,.72); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-avatar-options { display: grid; width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; min-height: 42px; }
.account-profile-form .account-avatar-option { display: block; }
.account-avatar-option > span:first-of-type { display: grid; width: 100%; aspect-ratio: 1; place-items: center; border: 2px solid rgba(255,255,255,.55); border-radius: 10px; background: var(--account-profile-color, var(--blue)); color: var(--account-profile-ink, white); }
.account-avatar-option svg { display: block; width: 31px; height: 31px; }
.account-avatar-option input:checked + span { border-color: white; box-shadow: 0 0 0 3px var(--yellow); }
.account-avatar-option input:focus-visible + span { outline: 3px solid white; outline-offset: 3px; }
.account-color-options { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.account-profile-form .account-color-option { display: block; }
.account-color-option > span:first-of-type { display: block; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.55); border-radius: 9px; background: var(--swatch); }
.account-color-option input:checked + span { border-color: white; box-shadow: 0 0 0 3px var(--yellow); }
.account-color-option input:focus-visible + span { outline: 3px solid white; outline-offset: 3px; }
.account-profile-form h4 { margin: 0; font-size: .82rem; letter-spacing: -.02em; }
.account-profile-form label { display: grid; gap: 6px; }
.account-profile-form label > span { color: rgba(255,255,255,.72); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-profile-form input, .account-profile-form select { min-width: 0; height: 44px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 9px; background: white; color: var(--ink); outline: 0; }
.account-profile-form input:focus, .account-profile-form select:focus { box-shadow: 0 0 0 4px var(--yellow); }
.account-profile-form input[readonly] { background: var(--cream); color: var(--muted); }
.account-discoverability { display: flex !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; }
.account-discoverability input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--yellow); }
.account-discoverability > span { display: grid; gap: 2px; color: white !important; font-size: .68rem !important; letter-spacing: 0 !important; text-transform: none !important; }
.account-discoverability small { color: rgba(255,255,255,.72); font-size: .62rem; font-weight: 700; line-height: 1.35; }
.account-profile-fields > p { margin: 0; color: rgba(255,255,255,.72); font-size: .66rem; font-weight: 700; line-height: 1.4; }
.account-profile-fields > button[type="submit"] { border-color: white; background: transparent; color: white; }
.account-profile-fields > button[type="submit"]:hover, .account-profile-fields > button[type="submit"]:active { border-color: white; background: var(--yellow); color: var(--ink); }
.account-status-badge { display: inline-block; padding: 4px 7px; border: 2px solid var(--ink); border-radius: 999px; background: var(--tool-reference); font-size: .56rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.account-session-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 2px solid var(--ink); }
.account-session-actions { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 7px; }
.account-session-actions button { min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.account-session-footer .account-billing-trigger { min-height: 36px; padding: 0 11px; border-color: var(--ink); background: var(--blue); color: white; }
.account-session-footer .account-billing-trigger:hover { border-color: var(--ink); background: var(--yellow); color: var(--ink); }
.account-session-footer > span { color: var(--muted); font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-session-footer .account-manage-button { min-height: 36px; padding: 0 11px; background: white; color: var(--ink); }
.account-session-footer .account-manage-button:hover { background: var(--ink); color: white; }
.account-session-footer .account-billing-manage-button { min-height: 36px; padding: 0 11px; background: white; color: var(--ink); }
.account-session-footer .account-billing-manage-button:hover { background: var(--ink); color: white; }
.account-session-footer .account-sign-out-button { display: grid; width: 36px; min-height: 36px; place-items: center; padding: 0; background: white; }
.account-session-footer .account-sign-out-button .material-symbols-outlined { font-size: 19px; line-height: 1; }

.site-footer {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px max(24px, 5vw) max(20px, env(safe-area-inset-bottom));
  border-top: 3px solid var(--ink);
  background: var(--ink);
  color: white;
}
.site-footer strong { font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; }
.site-footer span { color: rgba(255,255,255,.65); font-size: .62rem; font-weight: 700; }
body:has(.song-view:not([hidden])) .site-footer { display: none; }
body:has(.field-guide-course-page:not([hidden])) .site-footer { display: none; }
.account-session-footer .account-sign-out-button:hover { background: var(--ink); color: white; }
.account-upgrade-dialog { width: min(360px, calc(100vw - 28px)); max-width: none; padding: 0; border: var(--heavy-line) solid var(--ink); border-radius: 16px; background: var(--cream); }
.account-upgrade-dialog::backdrop { background: rgba(5, 5, 5, .46); }
.account-upgrade-panel { display: grid; gap: 16px; padding: 22px; }
.account-upgrade-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.account-upgrade-panel h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.04em; }
.account-upgrade-panel p { margin: 0; font-size: .78rem; font-weight: 700; line-height: 1.4; }
.account-upgrade-panel > button { min-height: 44px; border: var(--line) solid var(--ink); border-radius: 9px; background: var(--yellow); font-size: .72rem; font-weight: 900; }
.account-profile-save-status { min-height: 1em; }
.account-profile-save-status.is-error { color: #9b1c18; }
.account-files-entry-shell { margin-top: auto; padding-top: 14px; border-top: 2px solid var(--ink); }
.account-files-entry-shell + .account-utility-footer { margin-top: 0; }
.account-files-entry { display: grid; width: 100%; min-height: 82px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 12px; border: var(--line) solid var(--ink); border-radius: 13px; background: #f2ab9e; text-align: left; }
.account-files-entry:hover, .account-files-entry:active { background: var(--yellow); }
.account-files-entry-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 2px solid var(--ink); border-radius: 11px; background: var(--paper); }
.account-files-entry-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-files-entry-icon .material-symbols-outlined { font-size: 32px; line-height: 1; }
.account-files-entry > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.account-files-entry strong { font-size: 1rem; letter-spacing: -.03em; }
.account-files-entry small { overflow: hidden; font-size: .62rem; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.account-files-entry i { font-size: 1.25rem; font-style: normal; font-weight: 900; }
.account-files-return { width: max-content; min-height: 32px; justify-self: start; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: .62rem; font-weight: 900; white-space: nowrap; }
.account-files-return.is-home-return { background: white; }
.account-files-return:hover { background: var(--coral); }
.account-files-return.is-home-return:hover { background: var(--yellow); }
.account-files-return-close, .connections-context-close { display: inline-grid; width: 32px; height: 32px; min-height: 32px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); }
.account-files-return-close .material-icon-close, .connections-context-close .material-icon-close { width: 18px; height: 18px; }
.account-files-return-close:hover, .account-files-return-close:focus-visible, .connections-context-close:hover, .connections-context-close:focus-visible { background: var(--yellow); outline: 0; }

.account-files-view { min-height: calc(100vh - 68px); padding: clamp(24px, 4vw, 54px); background: var(--cream); }
.account-management-view { min-height: calc(100vh - 68px); padding: clamp(24px, 4vw, 54px); background: var(--cream); }
.account-management-heading { display: grid; max-width: 760px; gap: 7px; }
.account-management-heading .label, .account-management-billing .label { margin: 0; }
.account-management-heading h1 { margin: 0; font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.account-management-heading > p:last-child { max-width: 540px; margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.45; }
.account-management-back { width: max-content; margin-bottom: 8px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: .68rem; font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
.account-management-grid { display: grid; max-width: 760px; margin-top: 38px; }
.account-management-section-heading { display: grid; gap: 5px; }
.account-management-section-heading .label { margin: 0; }
.account-management-section-heading h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.045em; }
.account-management-section-heading > p:last-child { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.4; }
.account-management-profile-form { gap: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); }
.account-management-profile-form .account-profile-card-head { padding-bottom: 20px; border-bottom: 1px solid rgba(5,5,5,.25); }
.account-management-profile-form .account-profile-card-head > div > span { color: var(--muted); }
.account-management-profile-form .account-profile-pro-badge { border-color: var(--ink); }
.account-management-menu { display: flex; align-items: center; gap: 5px; padding: 7px; border: 1px solid rgba(5,5,5,.3); border-radius: 10px; background: var(--paper); }
.account-management-menu a { flex: 1 1 0; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: .64rem; font-weight: 900; text-align: center; text-decoration: none; white-space: nowrap; }
.account-management-menu a:hover, .account-management-menu a:focus-visible { background: var(--yellow); outline: 0; }
.account-management-profile-form .account-profile-fields { display: grid; gap: 0; padding-top: 0; border: 0; }
.account-management-section { scroll-margin-top: 22px; padding-top: 28px; }
.account-management-section > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.account-management-section > header .label { margin: 0 0 3px; }
.account-management-section > header h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.045em; }
.account-management-section > header button { min-height: 34px; padding: 0 11px; border: var(--line) solid var(--ink); border-radius: 8px; background: white; color: var(--ink); font-size: .65rem; font-weight: 900; }
.account-management-section > header button:hover { background: var(--yellow); }
.account-information-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-bottom: 1px solid rgba(5,5,5,.25); }
.account-information-list > div { display: grid; gap: 5px; min-width: 0; padding: 17px 12px 17px 0; }
.account-information-list > div + div { padding-left: 12px; border-left: 1px solid rgba(5,5,5,.25); }
.account-information-list dt { color: var(--muted); font-size: .52rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-information-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .75rem; font-weight: 900; }
.account-profile-edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 20px; }
.account-profile-edit-fields > fieldset, .account-profile-edit-fields > .account-profile-save-actions { grid-column: 1 / -1; }
.account-management-profile-form .account-avatar-field legend, .account-management-profile-form .account-color-field legend, .account-management-profile-form label > span { color: var(--muted); }
.account-management-profile-form .account-avatar-option > span:first-of-type, .account-management-profile-form .account-color-option > span:first-of-type { border-color: rgba(5,5,5,.45); }
.account-management-profile-form .account-avatar-option input:checked + span, .account-management-profile-form .account-color-option input:checked + span { border-color: var(--ink); }
.account-management-profile-form .account-avatar-option input:focus-visible + span, .account-management-profile-form .account-color-option input:focus-visible + span { outline-color: var(--ink); }
.account-management-profile-form .account-avatar-options { grid-template-columns: repeat(auto-fill, 46px); justify-content: start; gap: 8px; min-height: 0; }
.account-management-profile-form .account-avatar-option > span:first-of-type { width: 46px; height: 46px; aspect-ratio: auto; border-radius: 10px; }
.account-management-profile-form .account-avatar-option svg { width: 28px; height: 28px; }
.account-management-profile-form .account-color-options { grid-template-columns: repeat(auto-fill, 32px); justify-content: start; gap: 8px; }
.account-management-profile-form .account-color-option > span:first-of-type { width: 32px; height: 32px; aspect-ratio: auto; }
.account-profile-save-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.account-profile-save-actions > p { margin: 0; color: var(--muted); font-size: .66rem; font-weight: 700; line-height: 1.4; }
.account-profile-save-actions > button[type="button"] { min-height: 42px; padding: 0 14px; border: var(--line) solid var(--ink); border-radius: 9px; background: white; color: var(--ink); font-size: .7rem; font-weight: 900; }
.account-profile-save-actions > button[type="button"]:hover { background: var(--cream); }
.account-profile-save-actions > button[type="submit"] { width: max-content; min-height: 42px; padding: 0 14px; border-color: var(--ink); background: var(--ink); color: white; }
.account-profile-save-actions > button[type="submit"]:hover, .account-profile-save-actions > button[type="submit"]:active { border-color: var(--ink); background: var(--yellow); color: var(--ink); }
.account-management-billing { display: grid; gap: 12px; margin-top: 42px; padding: 26px 0 0; border: 0; border-top: var(--heavy-line) solid var(--ink); border-radius: 0; background: transparent; }
.account-management-billing h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.045em; }
.account-management-billing > p:not(.label) { margin: 0; color: var(--muted); font-size: .76rem; font-weight: 700; line-height: 1.4; }
.account-management-billing ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.account-management-billing li { padding: 2px 0; font-size: .64rem; font-weight: 900; }
.account-management-billing li::before { margin-right: 5px; content: "✓"; }
.account-management-billing button { min-height: 44px; border: var(--line) solid var(--ink); border-radius: 9px; background: var(--yellow); color: var(--ink); font-size: .72rem; font-weight: 900; }
.account-management-billing button:hover { background: var(--ink); color: white; }
.account-manage-button { min-height: 36px; padding: 0 11px; border: var(--line) solid var(--ink); border-radius: 10px; background: var(--yellow); font-size: .72rem; font-weight: 900; }
@media (max-width: 780px) {
  .account-management-view { min-height: calc(100dvh - 68px); padding: 22px 14px 32px; }
  .account-management-heading h1 { font-size: clamp(2.25rem, 13vw, 3.4rem); }
  .account-management-grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .account-information-list { grid-template-columns: minmax(0, 1fr); }
  .account-information-list > div, .account-information-list > div + div { padding: 13px 0; border-left: 0; border-top: 1px solid rgba(5,5,5,.2); }
  .account-information-list > div:first-child { border-top: 0; }
  .account-profile-edit-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .account-session-footer > span { display: none; }
  .account-session-actions { justify-content: stretch; }
  .account-session-actions button { flex: 1 1 0; padding-inline: 7px; font-size: .64rem; }
  .account-session-actions .account-sign-out-button { flex: 0 0 36px; padding: 0; }
}
.account-files-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); align-items: end; gap: 34px; }
.account-files-heading > div { display: grid; max-width: 760px; gap: 7px; }
.account-files-back { width: max-content; margin-bottom: 10px; padding: 0; border: 0; background: transparent; font-size: .68rem; font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
.account-files-heading .label { margin: 0; }
.account-files-heading h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.account-files-cloud-character { display: block; width: 54px; height: 54px; flex: 0 0 auto; transition: transform .34s cubic-bezier(.22,.72,.25,1); }
.account-files-heading h1:hover .account-files-cloud-character, .account-files-heading h1:focus-within .account-files-cloud-character { transform: rotate(7deg) translateY(-2px); }
.account-files-heading > div > p:last-child { max-width: 620px; margin: 5px 0 0; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.45; }
.account-storage-card { display: grid; gap: 9px; color: var(--ink); }
.account-storage-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.account-storage-card > header > span { font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.account-storage-card strong { display: flex; align-items: baseline; gap: 5px; font-size: 1rem; line-height: 1; letter-spacing: -.025em; }
.account-storage-card strong > i { color: var(--muted); font-size: .63rem; font-style: normal; font-weight: 850; letter-spacing: 0; }
.account-storage-meter { display: block; }
.account-storage-card > small { color: var(--muted); font-size: .58rem; font-weight: 850; text-align: right; }
.account-storage-progress { height: 24px; overflow: hidden; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); }
.account-storage-progress > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--yellow); transition: width .25s ease; }
.account-files-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; margin-top: 34px; }
.account-files-search { display: grid; min-width: 0; height: 48px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 10px; background: white; }
.account-files-search { grid-column: 1 / -1; }
.account-files-search:focus-within { box-shadow: 0 0 0 4px var(--yellow); }
.account-files-search svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.account-files-search .material-symbols-outlined { font-size: 21px; line-height: 1; }
.course-glossary-search svg { display: none; }
.course-glossary-search::before { color: currentColor; content: "search"; font: 21px/1 "Material Symbols Outlined"; }
.record-take-menu > summary, .files-card-menu:not(.audio-source-menu) > summary, .standalone-card-menu > summary { font-size: 0; }
.record-take-menu > summary::before, .files-card-menu:not(.audio-source-menu) > summary::before, .standalone-card-menu > summary::before { color: currentColor; content: "more_vert"; font: 22px/1 "Material Symbols Outlined"; }
.listen-back-tutorial-module .audio-scale-controls button { font-size: 0; }
.listen-back-tutorial-module .audio-scale-controls button:first-child::before { content: "remove"; font: 23px/1 "Material Symbols Outlined"; }
.listen-back-tutorial-module .audio-scale-controls button:last-child::before { content: "add"; font: 23px/1 "Material Symbols Outlined"; }
.account-files-search input { min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: 0; font-size: .75rem; font-weight: 750; }
.account-files-filter-row { display: flex; min-width: 0; grid-column: 1; align-items: center; flex-wrap: nowrap; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.account-files-mobile-filters { display: none; }
.account-files-scope, .account-files-types { flex-wrap: wrap; justify-content: flex-start; }
.account-files-types { margin-left: 3px; padding-left: 8px; border-left: 2px solid var(--ink); }
.account-files-scope .library-filter-tag, .account-files-types .library-filter-tag { background: var(--paper); }
.account-files-scope .library-filter-tag.is-active, .account-files-types .library-filter-tag.is-active { background: var(--yellow); }
.account-files-actions { display: flex; grid-column: 2; align-items: center; justify-content: flex-end; gap: 6px; }
.account-files-sort { justify-content: flex-end; }
.account-files-view-options { display: flex; gap: 3px; }
.account-files-view-options button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.account-files-view-options button.is-active { background: var(--yellow); }
.account-files-view-options svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-files-view-options .material-symbols-outlined { font-size: 18px; line-height: 1; }
.account-files-result-count { margin: 18px 0 10px; font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.account-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 9px; }
.account-file-card { --account-file-color: #f2ab9e; display: grid; min-width: 0; min-height: 82px; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; border: var(--line) solid var(--ink); border-radius: 12px; background: var(--account-file-color); color: var(--ink); text-align: left; box-shadow: 0 0 0 var(--ink); transition: transform .14s ease, box-shadow .14s ease; }
.account-file-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.account-file-card:focus-visible { outline: 4px solid white; outline-offset: -7px; }
.account-file-card.is-recording, .account-file-card.is-listen-back, .account-file-card.is-audio { --account-file-color: var(--tool-reference); }
.account-file-card.is-chart, .account-file-card.is-chord-chart { --account-file-color: var(--tool-writing); }
.account-file-card.is-lyrics { --account-file-color: var(--tool-writing); }
.account-file-card.is-info, .account-file-card.is-tasks, .account-file-card.is-notes { --account-file-color: var(--tool-organizing); }
.account-file-card.is-pdf, .account-file-card.is-image, .account-file-card.is-file { --account-file-color: #f2ab9e; }
.account-file-icon { display: grid; width: 56px; height: 56px; place-items: center; border: 0; background: transparent; }
.account-file-icon svg { width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-file-icon .material-icon-contract { fill: currentColor; stroke: none; }
.account-file-icon svg.viewBox24, .account-file-icon .is-chord-chart, .account-file-icon .is-lyrics { width: 34px; height: 34px; }
.account-file-icon .files-icon-fill { fill: currentColor; }
.account-file-badges { display: flex; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.account-file-badges i { padding: 4px 6px; border: 1.5px solid var(--ink); border-radius: 999px; background: white; font-size: .46rem; font-style: normal; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.account-file-card-copy { display: grid; min-width: 0; gap: 3px; }
.account-file-card-copy strong { overflow: hidden; font-size: .9rem; letter-spacing: -.025em; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.account-file-card-copy small { overflow: hidden; font-size: .58rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.account-file-card-copy em { overflow: hidden; color: rgba(5,5,5,.58); font-size: .51rem; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.account-files-view.is-list-mode .account-files-grid { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.account-files-view.is-list-mode .account-file-card { min-height: 58px; grid-template-columns: 42px minmax(0, 1fr) auto; padding: 6px 10px; border-width: 2px; border-radius: 8px; }
.account-files-view.is-list-mode .account-file-icon { width: 42px; height: 42px; }
.account-files-view.is-list-mode .account-file-icon svg { width: 29px; height: 29px; }
.account-files-view.is-list-mode .account-file-card-copy { grid-template-columns: minmax(160px, 1.25fr) minmax(130px, 1fr) minmax(150px, .8fr); align-items: center; gap: 16px; }
.account-files-view.is-list-mode .account-file-card-copy :is(strong, small, em) { width: 100%; justify-self: start; font-size: .62rem; text-align: left; }
.account-files-empty { display: grid; grid-column: 1 / -1; min-height: 280px; place-items: center; align-content: center; gap: 5px; padding: 30px; border: 3px dashed var(--ink); border-radius: 16px; text-align: center; }
.account-files-empty > span { display: grid; width: 70px; height: 70px; place-items: center; }
.account-files-empty svg { width: 58px; height: 58px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.account-files-empty h2, .account-files-empty p { margin: 0; }
.account-files-empty p { color: var(--muted); font-size: .72rem; font-weight: 700; }

@media (max-width: 1080px) {
  .account-files-toolbar { grid-template-columns: minmax(0, 1fr); }
  .account-files-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .account-files-sort { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .account-files-view { min-height: calc(100dvh - 80px); padding: 22px 14px 32px; }
  .account-files-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .account-files-heading h1 { font-size: clamp(2.25rem, 13vw, 3.4rem); }
  .account-storage-card { min-height: 0; }
  .account-files-toolbar { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .account-files-sort { grid-column: auto; }
  .account-files-actions { flex-wrap: wrap; }
  .account-files-grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .account-file-card { min-height: 76px; grid-template-columns: 50px minmax(0, 1fr) auto; padding: 9px; }
  .account-file-icon { width: 50px; height: 50px; }
  .account-file-icon svg { width: 31px; height: 31px; }
  .files-view-options { display: none; }
  .files-module-content.is-grid-mode .files-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .files-module-content.is-grid-mode .files-song-card { min-height: 58px; grid-template-columns: 42px minmax(0, 1fr) auto; padding: 6px 10px; border-width: 2px; border-radius: 8px; gap: 7px; }
  .files-module-content.is-grid-mode .files-song-card .files-card-main { grid-template-columns: 42px minmax(0, 1fr); gap: 7px; }
  .files-module-content.is-grid-mode .files-song-card .account-file-icon { width: 42px; height: 42px; }
  .files-module-content.is-grid-mode .files-song-card .account-file-icon svg { width: 29px; height: 29px; }
  .files-module-content.is-grid-mode .files-song-card .account-file-card-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .files-module-content.is-grid-mode .files-song-card .account-file-card-copy :is(strong, small, em) { font-size: .62rem; }
  .account-files-view.is-list-mode .account-file-card-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.directory-dialog { width: min(940px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.directory-panel { display: grid; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); gap: 20px; overflow: auto; padding: 22px; border: var(--heavy-line) solid var(--ink); border-radius: 22px; background: var(--cream); }
.directory-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.directory-panel-head h2 { margin: 4px 0 0; font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -.045em; }
.directory-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.directory-section { display: grid; min-width: 0; gap: 12px; padding: 15px; border: var(--line) solid var(--ink); border-radius: 13px; background: var(--paper); }
.directory-section:first-child { grid-column: 1 / -1; }
.directory-section > header h3 { margin: 0; font-size: 1.1rem; letter-spacing: -.025em; }
.directory-section > header p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; font-weight: 650; line-height: 1.4; }
.directory-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.directory-add-form input, .directory-row input, .directory-row select { min-width: 0; height: 40px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 8px; background: white; color: var(--ink); outline: 0; }
.directory-add-form input:focus, .directory-row input:focus, .directory-row select:focus { box-shadow: 0 0 0 3px var(--yellow); }
.directory-add-form button, .directory-row button { min-height: 40px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: .68rem; font-weight: 900; }
.directory-list { display: grid; gap: 7px; }
.directory-row { display: grid; grid-template-columns: minmax(115px, 1fr) minmax(90px, auto) auto 34px; align-items: center; gap: 5px; }
.directory-person-row { grid-template-columns: minmax(120px, 1.25fr) minmax(120px, 1.25fr) 105px minmax(110px, 1fr) auto 34px; }
.directory-person-row .directory-usage { grid-column: 1 / 5; }
.directory-row small { color: var(--muted); font-size: .58rem; font-weight: 750; line-height: 1.25; }
.directory-row .directory-remove { width: 34px; padding: 0; background: white; font-size: .9rem; }
.directory-row .directory-remove:not(:disabled):hover { background: var(--coral); }
.directory-row .directory-remove:disabled { cursor: not-allowed; opacity: .28; }
.directory-empty { margin: 7px 2px; color: var(--muted); font-size: .7rem; font-weight: 700; }

@media (max-width: 1300px) {
  .home-song-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-project-grid:not(.is-detail) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .app-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-project-grid:not(.is-detail) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .song-view.song-library-expanded .workspace-section-content,
  .song-view.song-library-expanded .custom-workspace-list,
  .song-view.song-library-expanded .workspace-premade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-focused-grid { grid-template-columns: 1fr; }
  .song-rights-layout { grid-template-columns: 1fr; }
  .info-focused-column { padding: 16px 4px; }
  .info-focused-column:first-child { padding-top: 4px; }
  .chart-mode-input .chart-builder-grid, .chart-mode-output .chart-builder-grid { grid-template-columns: 1fr; overflow: auto; }
  .chart-input-panel, .chart-preview-panel { min-height: 300px; }
  .focused-module.module-chords .module-body { overflow: auto; }
  .chord-expanded { height: auto; min-height: 100%; }
}

@media (max-width: 780px) {
  main { padding: 10px; }
  .tools-view { display: grid; grid-template-columns: 1fr; }
  .tools-view > .section-landing-heading, .tools-view > .tool-showcase-grid, .tools-view > .tools-recent { grid-column: auto; grid-row: auto; }
  .tool-showcase-card { grid-template-columns: 1fr; min-height: 0; }
  .tool-showcase-copy { min-height: 190px; padding: 18px; }
  .tool-preview { height: 240px; min-height: 240px; justify-items: center; padding: 18px 14px 0; }
  .tool-preview-frame { width: 100%; height: 380px; min-height: 380px; }
  .tool-showcase-card:hover .tool-preview-frame, .tool-showcase-card:focus-within .tool-preview-frame { transform: translateY(5px); }
  .tool-preview-frame.module-chords .chart-preview-panel { display: none; }
  .tool-preview-frame.module-chords .chart-builder-grid { grid-template-columns: 1fr; }
  .tool-preview-frame.module-chords .chord-rail-actions { margin-left: 0; }
  .tools-recent-list { grid-template-columns: minmax(0, 1fr); }
  .tools-recent > header { align-items: start; flex-direction: column; gap: 4px; }
  .course-sidebar-status { display: none !important; }
  .route-unavailable { top: 76px; width: calc(100vw - 20px); grid-template-columns: 46px minmax(0, 1fr) 34px; gap: 9px; padding: 9px; }
  .route-unavailable-character { width: 46px; height: 46px; }
  .route-unavailable-character svg { width: 40px; height: 40px; }
  .primary-subnav button { padding: 0 6px; font-size: .57rem; }
  .learn-placeholder-grid, .learn-tutorial-grid, .help-destination-grid { grid-template-columns: 1fr; }
  .learn-view:has(.field-guide-course-page:not([hidden])),
  .field-guide-course-page,
  .course-workspace { height: calc(100vh - 80px - env(safe-area-inset-top)); height: calc(100dvh - 80px - env(safe-area-inset-top)); min-height: 0; }
  .course-library-grid { grid-template-columns: 1fr; }
  .course-library-featured { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .course-library-featured .course-space-guy-card { width: 68px; height: 68px; }
  .course-library-card-info { grid-column: 1 / -1; padding: 16px 0 0; border-top: 2px solid rgba(5, 5, 5, .22); border-left: 0; }
  .course-workspace { position: relative; display: block; overflow: hidden; }
  .course-sidebar { position: absolute; z-index: 10; inset: 0; width: 100%; height: 100%; padding: 0; overflow: hidden; opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s linear; }
  .course-workspace.is-sidebar-collapsed .course-sidebar { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, .2s; }
  .course-sidebar-inner { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; gap: 22px; min-width: 0; padding: 26px 20px; overflow: hidden; }
  .course-sidebar-inner > nav[aria-label="Contents"] { min-height: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  .course-sidebar-navigation { display: grid; overflow-x: hidden; overflow-y: auto; white-space: normal; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  .course-sidebar-chapter { display: block; min-width: 0; margin: 0; padding: 4px 0; border-top: 0; border-left: 0; vertical-align: initial; font-size: .78rem; white-space: normal; }
  .course-sidebar-chapter::before { top: 0; left: 13px; transform: translate(-50%, -5px); }
  .course-sidebar-chapter > ol { margin-top: 10px; padding-left: 0; white-space: normal; }
  .course-sidebar-chapter.is-current:not(.is-expanded) > ol { margin: 0; padding: 0; background: transparent; }
  .course-sidebar-secondary { display: block; }
  .course-sidebar-chapter.is-current { padding: 0; border-color: transparent; }
  .course-sidebar-chapter.is-current > ol { margin: 0; padding: 6px 12px 6px 12px; }
  .course-sidebar-resources { margin-top: 0; padding-top: 16px; }
  .course-content { height: 100%; min-height: auto; padding: 44px 20px 72px; overflow-y: auto; }
  .course-section:has(.course-glossary) { padding: 16px; }
  .course-glossary-card { grid-template-columns: 1fr; gap: 9px; }
  .course-glossary-card p + p { padding: 10px 0 0; border-top: 1px solid rgba(5,5,5,.22); border-left: 0; }
  .course-reflection-row { grid-template-columns: 1fr; }
  .course-reflection-row h3 { min-height: 70px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .course-reflection-row textarea { min-height: 130px; }
  .course-energy-flow-reflection .course-reflection-row { min-height: 0; }
  .course-energy-flow-reflection .course-reflection-row h3 { font-size: .82rem; }
  .course-energy-flow-reflection .course-reflection-row textarea { min-height: 96px; }
  button.course-energy-cell { min-width: 0 !important; min-height: 0 !important; }
  .course-direction-grid { overflow: visible; }
  .course-direction-head { display: none; }
  .course-direction-row { grid-template-columns: 1fr; border-bottom: 2px solid var(--ink); }
  .course-direction-row:last-child { border-bottom: 0; }
  .course-direction-row > .course-direction-cell { border-right: 0; }
  .course-direction-row > .course-direction-cell.is-row-label { min-height: 42px; padding: 10px 14px; border-bottom: 0; }
  .course-direction-row > label.course-direction-cell { display: grid; min-height: 54px; grid-template-columns: minmax(78px, .42fr) minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid rgba(5,5,5,.25); }
  .course-direction-row > label.course-direction-cell:last-child { border-bottom: 0; }
  .course-direction-row > label.course-direction-cell::before { display: flex; align-items: center; padding: 10px 12px; border-right: 1px solid rgba(5,5,5,.25); color: var(--muted); content: attr(data-course-direction-label); font-size: .62rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
  .course-direction-row > label.course-direction-cell.is-best::before { color: white; border-color: rgba(255,255,255,.35); }
  .course-direction-cell input { padding: 10px 12px; text-align: left; }
  .course-direction-chart { display: flex; flex-direction: column; }
  .course-direction-mode-bar { position: sticky; z-index: 5; top: 0; order: -1; margin-bottom: 4px; background: var(--paper); box-shadow: 0 5px 0 var(--paper); }
  .course-demo-stack-diagram .course-inspiration-comparison { grid-template-columns: 1fr; }
  .course-demo-stack-diagram .course-inspiration-panel + .course-inspiration-panel { border-top: 3px solid var(--ink); border-left: 0; }
  .course-spark-inspiration-tool .course-inspiration-comparison { grid-template-columns: 1fr; }
  .course-spark-inspiration-tool .course-inspiration-panel + .course-inspiration-panel { border-top: 3px solid var(--ink); border-left: 0; }
  .course-closing-ctas { grid-template-columns: 1fr; }
  .course-release-comparison-tool .course-inspiration-comparison { grid-template-columns: 1fr; }
  .course-release-comparison-tool .course-inspiration-panel + .course-inspiration-panel { border-top: 3px solid var(--ink); border-left: 0; }
  .course-ideas-table { grid-template-columns: 1fr; }
  .course-ideas-table article + article { border-top: 3px solid var(--ink); border-left: 0; }
  .course-registration-step { grid-template-columns: 1fr; }
  .course-registration-step > h3 { min-height: 70px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .course-song-type-card { grid-template-columns: 1fr; }
  .course-song-type-card header { border-right: 0; border-bottom: 3px solid var(--ink); }
  .course-form-three-column { grid-template-columns: 1fr; }
  .course-arrangement-layout { grid-template-columns: 1fr; }
  .course-arrangement-palette { width: 100%; grid-template-columns: 1fr; gap: 12px; }
  .course-arrangement-parts { gap: 7px; }
  .course-arrangement-palette button { min-height: 40px; padding-inline: 10px; }
  .course-arrangement-history { justify-content: flex-start; padding-top: 10px; padding-left: 0; border-top: 2px solid var(--ink); border-left: 0; }
  .course-arrangement-tag { min-height: 42px; padding: 8px 9px; touch-action: manipulation; }
  .course-arrangement-tag > div { display: flex; }
  .course-arrangement-tag button { width: 26px; height: 26px; }
  .course-gather-pieces { grid-template-columns: 1fr; }
  .course-gather-pieces article { border-right: 0; border-bottom: 2px solid var(--ink); }
  .course-gather-pieces article:last-child { border-bottom: 0; }
  .course-gather-reflection { grid-template-columns: 1fr; }
  .course-gather-reflection-card, .course-gather-reflection-card:nth-child(2n) { border-right: 0; }
  .course-gather-reflection-card.is-summary { grid-column: auto; }
  .course-gather-reflection-card:last-child { border-bottom: 0; }
  .course-readiness-options { grid-template-columns: 1fr; }
  .course-readiness-options button, .course-readiness-options button:last-child { border-right: 0; border-bottom: 2px solid var(--ink); }
  .course-readiness-options button:last-child { border-bottom: 0; }
  .course-structured-reflection { grid-template-columns: 1fr; }
  .course-structured-reflection article, .course-structured-reflection article:last-child { border-right: 0; border-bottom: 2px solid var(--ink); }
  .course-structured-reflection article:last-child { border-bottom: 0; }
  .course-reference-grid { overflow-x: auto; }
  .course-reference-grid-head, .course-reference-grid-row { min-width: 680px; }
  .course-layers-table, .course-plain-table { overflow-x: auto; }
  .course-layers-head, .course-layers-row, .course-plain-table-row { min-width: 760px; }
  .course-production-plan-table, .course-release-comparison { overflow-x: auto; }
  .course-production-plan-row { min-width: 900px; }
  .course-release-comparison-head, .course-release-comparison-row { min-width: 680px; }
  .course-reference-fields { grid-template-columns: 1fr; }
  .course-reference-fields label { border-right: 0; }
  .course-reference-fields label:last-child { border-bottom: 2px solid var(--ink); }
  .course-form-three-column article { border-right: 0; border-bottom: 2px solid var(--ink); }
  .course-form-three-column article:nth-last-child(-n + 3) { border-bottom: 2px solid var(--ink); }
  .course-form-three-column article:last-child { border-bottom: 0; }
  .course-form-review { overflow: hidden; }
  .course-form-review-head, .course-form-review-row { min-width: 0; grid-template-columns: minmax(56px, .28fr) minmax(0, 1fr) minmax(0, 1.4fr); }
  .course-form-review-head span:first-child, .course-form-review-row > strong { display: none; }
  .course-form-reflection-row { grid-template-columns: 40px 1fr; }
  .course-form-reflection-row p { border-right: 0; border-bottom: 2px solid var(--ink); }
  .course-form-reflection-row textarea { grid-column: 1 / -1; }
  .shared-tool-link-actions { grid-template-columns: 1fr; }
  .app-home-view, .section-landing { min-height: calc(100vh - 88px); padding: 28px 14px; }
  .app-home-heading, .app-home-grid { grid-column: 1; }
  .app-home-grid, .tool-landing-grid { grid-template-columns: 1fr; }
  .app-destination-character { width: 64px; height: 64px; }
  .app-quickstart { padding: 32px 24px 24px; }
  .app-quickstart-heading { align-items: start; gap: 8px; }
  .app-quickstart-grid { grid-template-columns: 1fr; }
  .app-quickstart-main-column, .app-quickstart-songs, .app-quickstart-files, .app-quickstart-connections { grid-column: auto; grid-row: auto; }
  .app-quickstart-connections .connections-directory { grid-template-columns: 1fr; }
  .app-quickstart-record-copy small { white-space: normal; }
  .profile-foundation-card { grid-template-columns: 1fr; }
  .profile-foundation-identity { min-height: 220px; }
  .profile-foundation-fields { grid-template-columns: 1fr; }
  .connections-directory { grid-template-columns: 1fr; }
  .shared-project-grid { grid-template-columns: 1fr; }
  .library-controls { display: block; }
  .library-filter-browser, .library-sort-options, .song-library-layout-controls { display: none; }
  .project-library-controls > .library-filter-tags { display: none; }
  .library-mobile-selects { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .account-files-filter-row { display: none; }
  .account-files-mobile-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .account-files-view-options { display: none; }
  .files-library-controls .library-mobile-selects { grid-template-columns: minmax(0, 1fr); }
  .project-library-controls .library-mobile-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-mobile-menu { position: relative; min-width: 0; }
  .library-mobile-menu > summary { display: grid; width: 100%; height: 36px; grid-template-columns: minmax(0, 1fr) 12px; align-items: center; gap: 3px; overflow: hidden; padding: 0 7px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: .62rem; font-weight: 900; line-height: 1; list-style: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .library-mobile-menu > summary::-webkit-details-marker { display: none; }
  .library-mobile-menu > summary > span { display: flex; min-width: 0; align-items: center; gap: 2px; overflow: hidden; text-overflow: ellipsis; }
  .library-mobile-menu > summary > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
  .library-mobile-menu > summary .library-mobile-sort-direction { width: 11px; height: 11px; flex: 0 0 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .library-mobile-menu[open] > summary { position: relative; z-index: 12; border-radius: 8px 8px 0 0; background: var(--paper); }
  .library-mobile-menu.is-active > summary, .library-mobile-menu.is-active[open] > summary { background: var(--yellow); }
  .library-mobile-menu[open] > summary > svg { transform: rotate(180deg); }
  .library-mobile-menu-panel { position: absolute; z-index: 11; top: calc(100% - 2px); left: 0; display: grid; width: 100%; min-width: 0; max-height: min(52vh, 330px); gap: 0; overflow: hidden auto; padding: 0; border: 2px solid var(--ink); border-radius: 0 0 8px 8px; background: var(--paper); box-shadow: none; }
  .library-mobile-menu-panel button { display: grid; width: 100%; min-height: 40px !important; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: .62rem; font-weight: 850; line-height: 1.15; text-align: left; }
  .library-mobile-menu-panel button > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .library-mobile-menu-panel button + button { border-top: 1px solid rgba(5,5,5,.18); }
  .library-mobile-menu-panel button:hover { background: var(--cream); }
  .library-mobile-menu-panel button.is-active { background: var(--yellow); }
  .song-library-controls .library-mobile-menu > summary { grid-template-columns: minmax(0, 1fr) 10px; gap: 1px; padding: 0 4px; font-size: .58rem; }
  .song-library-controls .library-mobile-menu > summary > svg { width: 10px; height: 10px; }
  .song-library-controls .library-mobile-menu-panel,
  .song-library-controls .library-mobile-menu:nth-last-child(-n+2) .library-mobile-menu-panel { right: auto; left: 0; width: 100%; min-width: 0; }
  .song-library-controls .library-mobile-menu-panel button { padding: 7px 6px; font-size: .58rem; overflow-wrap: anywhere; }
  .shared-project-card.is-sharing { grid-column: auto; }
  .project-invite-actions { grid-template-columns: 1fr; }
  .project-song-manager-grid { grid-template-columns: 1fr; }
  .project-song-manager-grid form, .project-song-create-prompt { grid-template-columns: 1fr; }
  .project-song-manager-grid form > button, .project-song-create-prompt > button { width: 100%; }
  .project-member-invite-form { grid-template-columns: 1fr; }
  .project-member-invite-form > button { width: 100%; }
  .connection-profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .connections-view-heading, .connections-directory-head, .connection-detail > header { display: grid; grid-template-columns: 1fr; align-items: start; }
  .connections-view-actions, .connection-detail-actions { justify-content: flex-start; }
  .connections-view-actions button { flex: 1 1 0; }
  .connections-profile-summary { display: grid; }
  .connections-profile-summary button { justify-self: start; }
  .connections-profile-fields { grid-template-columns: 1fr; }
  .connections-directory-head > div { max-width: none; }
  .connections-directory-head > button { display: none; }
  .connections-requests > article, .connections-search-results article { grid-template-columns: auto minmax(0, 1fr); }
  .connections-requests article > div:last-child, .connections-requests article > em, .connections-search-results article > button, .connections-search-results article > em { grid-column: 2; justify-self: start; }
  .connections-find-results .connections-search-results > div { grid-template-columns: 1fr; }
  .connections-find-results .connections-search-results article { grid-template-columns: auto minmax(0, 1fr) auto; }
  .connections-find-results .connections-search-results article > button,
  .connections-find-results .connections-search-results article > em { grid-column: auto; justify-self: end; }
  .connection-detail-avatar { width: 76px; height: 76px; border-radius: 18px; }
  .connection-detail-avatar svg { width: 54px; height: 54px; }
  .connection-songs > header { align-items: center; flex-direction: row; }
  .connection-song-sort { display: flex; justify-content: flex-start; }
  .connection-song-grid { grid-template-columns: 1fr; width: 100%; }
  .new-song-manual-writer { grid-template-columns: 1fr; }
  .contributor-column-headings { display: none; }
  .contributor-row { grid-template-columns: minmax(0, 1fr) 118px 30px; }
  .contributor-person-field, .contributor-row > input { grid-column: 1 / -1; }
  .app-destination-card { min-height: 170px; }
  .song-view {
    width: calc(100% + 20px);
    height: auto;
    min-height: calc(100vh - 68px);
    min-height: calc(100dvh - 68px);
    margin: -10px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .song-view.module-rail-expanded, .song-view.module-sidebar-hidden { grid-template-columns: 1fr; }
  .song-view.standalone-tool-mode, .song-view.standalone-tool-mode.module-focused { grid-template-columns: 320px minmax(0, 1fr); }
  .standalone-folder-rail { position: static; width: auto; padding: 16px 12px; }
  .song-view.song-library-expanded .workspace-section-content,
  .song-view.song-library-expanded .custom-workspace-list,
  .song-view.song-library-expanded .workspace-premade-list { grid-template-columns: 1fr; }
  .module-rail { position: absolute; z-index: 7; inset: 0 auto 0 0; width: min(var(--song-menu-width), calc(100vw - 22px)); align-items: stretch; overflow-x: hidden; overflow-y: auto; padding: 20px 18px 24px; }
  .song-view.song-library-expanded .module-rail { display: flex; }
  .song-view.song-library-expanded .workspace-presets { margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--ink); }
  .module-rail-heading, .song-view.module-rail-expanded .module-rail-heading { display: flex; width: 100%; min-height: 30px; align-items: center; justify-content: space-between; margin: 0; padding: 0 2px; }
  .rail-label-long { display: inline; }
  .rail-label-short { display: none !important; }
  .module-button, .song-view.module-rail-expanded .module-button { width: 42px; min-width: 42px; min-height: 42px; height: 42px; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; padding: 0; }
  .song-view.module-rail-expanded .module-button-copy { display: none; }
  .workspace-presets, .song-view.module-rail-expanded .workspace-presets { display: flex; flex-direction: column; }
  .song-page { min-height: 0; margin-left: 0; border-width: var(--heavy-line); border-radius: 24px; }
  .focused-module .info-primary-fields { grid-template-columns: 1fr; }
  .focused-module .song-relationship-fields { grid-template-columns: 1fr; }
  .directory-columns { grid-template-columns: 1fr; }
  .song-credit-fields { grid-template-columns: 1fr; }
  .song-credit-fields > label:last-child { grid-column: auto; }
  .writer-column-headings { display: none; }
  .writer-row { grid-template-columns: minmax(0, 1fr) 92px 30px; }
  .writer-person-field { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out { grid-template-columns: 1fr; }
  .account-dialog.is-shared-entry.is-local-limit .account-local-invite-copy, .account-dialog.is-shared-entry.is-local-limit .account-local-invite-actions, .account-dialog.is-shared-entry.is-local-limit .account-form { grid-column: 1; }
  .account-dialog.is-shared-entry.is-local-limit .account-local-invite-copy { grid-row: 1; }
  .account-dialog.is-shared-entry.is-local-limit .account-local-invite-actions, .account-dialog.is-shared-entry.is-local-limit .account-form { grid-row: 2; }
  .account-dialog.is-shared-entry .account-form:has(.account-signup-profile-step:not([hidden])), .account-dialog.is-shared-entry .account-form:has([data-account-password-field]:not([hidden])) { grid-template-columns: 1fr; }
  .account-dialog.is-shared-entry .account-form:has(.account-signup-profile-step:not([hidden]))::before, .account-dialog.is-shared-entry .account-form:has([data-account-password-field]:not([hidden]))::before, .account-dialog.is-shared-entry .account-form:has(.account-signup-profile-step:not([hidden])) > *, .account-dialog.is-shared-entry .account-form:has([data-account-password-field]:not([hidden])) > * { grid-column: 1; }
  .account-local-invite { grid-template-columns: 1fr; gap: 16px; }
  .account-local-invite-actions { padding-top: 0; }
  .song-library-controls .library-mobile-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-entry-gate { padding: 12px; }
  .shared-entry-gate > article { gap: 14px; padding: 22px 18px; border-radius: 18px; box-shadow: 6px 6px 0 var(--yellow); }
  .shared-entry-gate article > div { grid-template-columns: 1fr; }
  .topbar { min-height: 62px; padding: 8px 10px; }
  .brand { font-size: 1.15rem; }
  .account-button { min-height: 34px; padding: 0 9px; font-size: .58rem; }
  .cloud-status { display: none; }
  .primary-nav { gap: 0; }
  .primary-nav-button { min-height: 34px; padding: 0 8px; font-size: .6rem; }
  .primary-nav:has(.primary-nav-button.is-active) .primary-nav-group:not(:has(.primary-nav-button.is-active)) { display: none; }
  .primary-subnav { min-height: 34px; overflow-x: auto; padding: 0 2px; }
  .primary-subnav button { min-height: 26px; padding: 0 5px; font-size: .52rem; }
  .song-page { --song-page-padding-x: 12px; --song-page-padding-top: 17px; --song-page-padding-bottom: 16px; gap: 13px; }
  .module-grid { --grid-scroll-rail: 12px; }
  .directory-panel { padding: 15px; }
  .directory-row { grid-template-columns: minmax(0, 1fr) auto 34px; }
  .directory-row small { grid-column: 1 / -1; grid-row: 2; }
  .directory-person-row { grid-template-columns: 1fr 1fr; padding-bottom: 10px; }
  .directory-person-row .directory-usage { grid-column: 1 / -1; grid-row: auto; }
  .directory-person-row button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .account-local-invite-character, .song-limit-character { animation: none; }
}

@media (max-width: 760px) {
  .account-dialog.is-shared-entry.is-local-limit { width: min(620px, calc(100vw - 24px)); }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out { grid-template-columns: 1fr; }
  .account-dialog.is-shared-entry.is-local-limit .account-local-invite-copy, .account-dialog.is-shared-entry.is-local-limit .account-local-invite-actions, .account-dialog.is-shared-entry.is-local-limit .account-form { grid-column: 1; }
  .account-dialog.is-shared-entry.is-local-limit .account-local-invite-copy { min-height: 0; grid-row: 1; padding: 68px 28px 30px; }
  .account-dialog.is-shared-entry.is-local-limit .account-local-invite-actions, .account-dialog.is-shared-entry.is-local-limit .account-form { grid-row: 2; }
  .account-dialog.is-shared-entry.is-local-limit .account-signup-avatar-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite { min-height: 0; grid-template-columns: 1fr; gap: 22px; padding: 68px 28px 24px; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-copy { grid-template-columns: 106px minmax(0, 1fr); gap: 10px 18px; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite h3 { font-size: clamp(2.1rem, 8.5vw, 3.5rem); white-space: normal; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-actions { width: calc(100% - 124px); margin-left: 124px; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-label { top: 22px; left: calc(28px + 124px); }
  .account-local-invite-character-shell { width: 106px; flex-basis: 106px; }
  .account-local-invite-character { width: 82px; height: 82px; }
  .account-local-invite h3 { max-width: 10ch; font-size: clamp(2.6rem, 12vw, 4.2rem); }
}

@media (max-width: 520px) {
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-label { left: 28px; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-copy { grid-template-columns: 1fr; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-hero { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: space-between; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite h3, .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite p { grid-column: 1; }
  .account-dialog.is-shared-entry.is-local-limit .account-signed-out:has(.account-local-invite-actions:not([hidden])) .account-local-invite-actions { width: 100%; grid-template-columns: 1fr; margin-left: 0; }
}

@media (max-width: 780px), (max-height: 520px) and (max-width: 760px) {
  .topbar {
    display: grid;
    min-height: calc(60px + env(safe-area-inset-top));
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    grid-template-rows: 44px 0;
    gap: 0 6px;
    padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }
  .topbar:has(.primary-nav.is-mobile-open) { grid-template-rows: 44px 44px; }
  .topbar > .brand { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; padding: 4px 2px; font-size: 1.2rem; }
  .topbar > .account-button { width: 44px; height: 44px; min-height: 44px; grid-column: 4; grid-row: 1; padding: 0; }
  .topbar > .inbox-button { width: 44px; height: 44px; grid-column: 3; grid-row: 1; justify-self: end; }
  .topbar > .account-button:not(.is-signed-in) { width: auto; min-width: 68px !important; padding: 0 10px; white-space: nowrap; }
  .topbar-left { display: contents; }
  .module-rail-toggle:not([hidden]) { display: grid !important; width: 44px; height: 44px; grid-column: 1; grid-row: 2; align-self: center; }
  .topbar:has(.primary-nav:not(.is-mobile-open)) .module-rail-toggle:not([hidden]) { display: none !important; }
  .mobile-nav-toggle { display: grid; width: 44px; height: 44px; grid-column: 1; grid-row: 1; place-items: center; padding: 0; border: 0; background: transparent; color: white; }
  .mobile-nav-toggle:hover { color: var(--yellow); }
  .mobile-nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
  .mobile-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .primary-nav { position: static; display: none; width: 100%; min-width: 0; grid-column: 1 / -1; grid-row: 2; align-items: center; flex-direction: row; justify-content: flex-start; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 0; background: transparent; color: white; scrollbar-width: none; }
  .topbar:has(.module-rail-toggle:not([hidden])) .primary-nav { grid-column: 2 / -1; }
  .primary-nav.is-mobile-open { display: flex; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .mobile-nav-heading { display: none !important; }
  .primary-nav-group { flex: 0 0 auto; }
  .primary-nav-group:has(.primary-nav-button.is-active) { order: -1; }
  .primary-nav:has(.primary-nav-button.is-active) .primary-nav-group:not(:has(.primary-nav-button.is-active)) { display: flex; }
  .primary-nav-button { min-height: 34px; padding: 0 13px; }
  .primary-subnav { height: 34px; min-height: 34px; }
  .primary-subnav button { min-height: 24px; padding: 0 8px; }
}

@media (pointer: coarse) and (min-width: 781px) and (max-width: 1180px) and (min-height: 900px) {
  .song-page { overflow-y: auto; overscroll-behavior-y: contain; }
  .module-grid { overflow-y: auto; overscroll-behavior-y: contain; }
}

@media (orientation: portrait) and (min-width: 781px) and (max-width: 1180px) {
  .song-page { overflow-y: auto; overscroll-behavior-y: contain; }
  .module-grid.is-responsive-grid { overflow-y: auto; overscroll-behavior-y: contain; }
}

@media (max-width: 620px), (max-height: 520px) and (max-width: 760px) {
  button:not([hidden]) { min-width: 44px !important; min-height: 44px !important; }
  button.record-mini-play:not([hidden]), button.record-mini-speed:not([hidden]) { width: 38px; height: 38px; min-width: 38px !important; min-height: 38px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select { min-height: 44px !important; }

  .topbar {
    display: grid;
    min-height: calc(60px + env(safe-area-inset-top));
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    grid-template-rows: 44px 0;
    gap: 0 6px;
    padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }
  .topbar:has(.primary-nav.is-mobile-open) { grid-template-rows: 44px 44px; }
  .topbar > .brand { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; padding: 4px 2px; font-size: 1.2rem; }
  .topbar > .account-button { width: 44px; height: 44px; min-height: 44px; grid-column: 4; grid-row: 1; padding: 0; }
  .topbar-left { display: contents; }
  .module-rail-toggle:not([hidden]) { display: grid !important; width: 44px; height: 44px; grid-column: 1; grid-row: 2; align-self: center; }
  .topbar:has(.primary-nav:not(.is-mobile-open)) .module-rail-toggle:not([hidden]) { display: none !important; }
  .mobile-nav-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: white;
  }
  .mobile-nav-toggle:hover { color: var(--yellow); }
  .mobile-nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
  .mobile-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .topbar > .account-button .account-button-avatar { font-size: .9rem; }

  .primary-nav {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    width: 100%;
    min-width: 0;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    background: transparent;
    color: white;
    scrollbar-width: none;
  }
  .topbar:has(.module-rail-toggle:not([hidden])) .primary-nav { grid-column: 2 / -1; }
  .primary-nav.is-mobile-open { display: flex; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .mobile-nav-heading { display: none !important; }
  .primary-nav-group { flex: 0 0 auto; }
  .primary-nav-group:has(.primary-nav-button.is-active) { order: -1; }
  .primary-nav:has(.primary-nav-button.is-active) .primary-nav-group:not(:has(.primary-nav-button.is-active)) { display: flex; }
  button.primary-nav-button { height: 44px; min-height: 44px !important; padding: 0 13px; }
  .primary-nav-group { height: 44px; }
  .primary-subnav { height: 44px; min-height: 44px; }
  .primary-subnav.is-open { width: max-content; }
  .primary-subnav-inner { gap: 4px; padding: 4px 3px; }
  .primary-subnav button:not([hidden]) { height: 32px; min-height: 32px !important; padding: 0 8px; }
  .learn-home-category-grid, .learn-home-blog-grid, .learn-blog-list { grid-template-columns: 1fr; }
  .learn-home-row-header { align-items: start; flex-direction: column; gap: 10px; }
  .learn-home-row-link { padding-left: 0; }

  main { min-height: calc(100vh - 60px - env(safe-area-inset-top)); min-height: calc(100dvh - 60px - env(safe-area-inset-top)); }
  .app-home-view, .section-landing { min-height: calc(100vh - 80px - env(safe-area-inset-top)); min-height: calc(100dvh - 80px - env(safe-area-inset-top)); }
  .app-home-grid, .tool-landing-grid, .learn-placeholder-grid, .learn-tutorial-grid, .app-home-discovery-grid { grid-template-columns: 1fr; }
  .app-home-discovery-row:has(.app-home-discovery-tutorial-link) { grid-template-columns: 1fr; align-items: start; }
  .app-home-share { grid-template-columns: 1fr; align-items: start; }
  .app-home-share-copy { grid-column: 1; grid-row: 1; }
  .app-home-share-action { grid-column: 1; grid-row: 2; }
  .app-home-share-character { grid-column: 1; grid-row: 3; justify-self: start; }
  .app-home-share-action { justify-items: start; }
  .learn-blog-post-page { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .learn-blog-post-page > .learn-library-back { grid-column: 1; grid-row: 1; align-self: center; }
  .learn-blog-post-nav { position: static; grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 0; }
  .learn-blog-post { grid-column: 1 / -1; grid-row: 2; }
  .app-destination-card { min-height: 150px; }
  .home-view { padding: 20px 14px 28px; }
  .home-song-row, .song-view.song-library-expanded .rail-song-list > .rail-section-content { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .home-song-card-wrap, .song-view.song-library-expanded .rail-song-entry, .large-song-card-wrap { width: 100%; }
  .home-song-card { column-gap: 10px; padding: 10px 62px 10px 10px; }
  .rail-song-button { padding-right: 58px; }
  .home-song-card strong { font-size: clamp(1.05rem, 5.2vw, 1.35rem); }
  .home-song-card-tags { gap: 4px; }
  .home-song-card-tags .entity-tag { min-height: 25px !important; padding: 3px 6px; font-size: .56rem; }
  .song-selection-bar { align-items: stretch; flex-direction: column; }
  .song-selection-bar > div { display: grid; grid-template-columns: 1fr; }
  .song-selection-bar button { width: 100%; }
  .recently-deleted-song-row { grid-template-columns: minmax(0, 1fr) auto; }
  .recently-deleted-song-row:not(:has(.recently-deleted-song-select)) .delete-forever-button { grid-column: 2; }

  .song-view,
  .song-view.module-rail-expanded,
  .song-view.module-sidebar-hidden,
  .song-view.module-focused {
    height: calc(100vh - 60px - env(safe-area-inset-top));
    height: calc(100dvh - 60px - env(safe-area-inset-top));
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .rail-song-expand-button { display: flex !important; }
  .rail-song-expand-button svg { display: none; }
  .workspace-presets,
  .song-view.module-rail-expanded .workspace-presets { display: none !important; }

  .shared-project-card-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
  .shared-project-grid:not(.is-detail) { grid-template-columns: minmax(0, 1fr); }
  .shared-project-card-head > div { width: 100%; justify-content: flex-start; align-items: center; }
  .shared-project-card-head .project-header-edit { margin-left: auto; }

  .song-view.standalone-tool-mode,
  .song-view.standalone-tool-mode.module-focused { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .song-view.standalone-tool-mode .standalone-folder-rail,
  .song-view.standalone-tool-mode .song-page { width: 100%; height: 100%; grid-column: 1; grid-row: 1; }
  .song-view.standalone-tool-mode:not(.mobile-tool-files-open) .standalone-folder-rail { display: none !important; }
  .song-view.standalone-tool-mode.mobile-tool-files-open .standalone-folder-rail { display: flex !important; padding: 18px 16px max(24px, env(safe-area-inset-bottom)); border-right: 0; }
  .song-view.standalone-tool-mode.mobile-tool-files-open .song-page { display: none !important; }
  .module-rail-toggle.is-tool-files-toggle[aria-expanded="true"] { color: var(--yellow); }
  .module-rail-toggle.is-tool-files-toggle[aria-expanded="true"] .hamburger-icon i:nth-child(1) { top: 0; opacity: 1; transform: none; }
  .module-rail-toggle.is-tool-files-toggle[aria-expanded="true"] .hamburger-icon i:nth-child(2) { top: 6.75px; opacity: 1; transform: none; }
  .module-rail-toggle.is-tool-files-toggle[aria-expanded="true"] .hamburger-icon i:nth-child(3) { top: 13.5px; opacity: 1; transform: none; }
  .song-page {
    --song-page-padding-x: 10px;
    --song-page-padding-top: 10px;
    --song-page-padding-bottom: 18px;
    height: 100%;
    margin: 0;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
  }
  .song-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 0 4px; }
  .song-heading h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .song-title-line { width: 100%; grid-column: 1 / -1; }
  .song-heading-tag-row { width: 100%; max-width: 100%; grid-column: 1 / -1; grid-row: 2; }
  .song-heading-tag-row:not(:has(.song-heading-tags-expand[hidden])) { grid-template-columns: 28px minmax(0, 1fr); gap: 5px; }
  .song-view.module-focused .song-heading-tag-row,
  .song-view.module-focused .section-controls { display: none; }
  button.song-heading-tags-expand:not([hidden]) { width: 28px !important; min-width: 28px !important; height: 28px; min-height: 28px !important; border-radius: 8px; background: transparent; }
  .song-heading-tags-expand:hover { background: transparent; }
  .song-heading-tags-expand:active { background: var(--yellow); }
  .section-controls { width: 100%; max-width: none; grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .module-add-grid { width: 100%; max-width: none; justify-content: flex-start; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 4px 0 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .module-add-grid::-webkit-scrollbar { display: none; }
  .module-add-grid .module-button:first-child { margin-left: 0; }
  .module-button, .song-view.module-rail-expanded .module-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; }
  .song-delete-button { width: 44px; height: 44px; }
  .song-title-line .song-delete-button { grid-column: 2; grid-row: 1; }

  .module-grid {
    display: grid;
    min-height: auto;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: auto;
    align-content: start;
    justify-content: stretch;
    padding: 0 0 max(12px, env(safe-area-inset-bottom));
  }
  .module-grid:not(.focus-mode) .module-frame {
    width: 100%;
    height: auto;
    min-height: 520px;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .module-grid:not(.focus-mode) .module-metronome { height: 224px !important; min-height: 0; grid-template-rows: 44px 146px; }
  .module-grid:not(.focus-mode) .module-metronome .module-body { min-height: 146px; }
  .module-grid:not(.focus-mode) .module-metronome .audio-utility-bar { height: 146px; }
  .module-grid:not(.focus-mode) .module-info { height: auto; min-height: 330px; }
  .module-grid:not(.focus-mode) .module-audio { height: auto; min-height: 430px; }
  .module-grid:not(.focus-mode) .module-record { height: max-content !important; min-height: 210px; grid-template-rows: auto auto; }
  .module-grid:not(.focus-mode) .module-todos { height: auto; min-height: 400px; }
  .module-grid:not(.focus-mode) .module-record .module-body { min-height: auto; overflow: visible; }
  .module-grid:not(.focus-mode) .module-record .record-module-content { min-height: 0; }
  .module-grid:not(.focus-mode) .module-record:is([data-size="2×1"], [data-size="1×1"]) .record-module-content { height: auto; grid-template-rows: auto auto auto; align-content: start; }
  .module-grid:not(.focus-mode) .module-record[data-size="2×1"] .record-module-content { grid-template-columns: minmax(0, 1fr); }
  .module-grid:not(.focus-mode) .module-record .record-capture { height: auto; min-height: 120px !important; }
  .module-grid:not(.focus-mode) .module-record[data-size="1×1"] .record-capture-copy small { display: block; }
  .module-grid:not(.focus-mode) .module-record .record-status:not(:empty) { display: block; }
  .module-grid:not(.focus-mode) .module-record .record-takes { display: grid; }
  .module-grid:not(.focus-mode) .module-record:is([data-size="2×1"], [data-size="1×1"]) .record-takes > header { display: flex; }
  .module-grid:not(.focus-mode) .module-record:is([data-size="2×1"], [data-size="1×1"]) .record-take-list > .record-take:nth-child(n + 2) { display: grid; }
  .module-grid:not(.focus-mode) .module-record .record-module-content[data-recording-take-count="0"] .record-takes { display: none; }
  .module-grid:not(.focus-mode) .module-record .record-take-list { max-height: 470px; overflow-y: auto; overscroll-behavior-y: contain; }
  .module-frame { gap: 8px; padding: 10px; border-width: 3px; border-radius: 11px; }
  .module-frame-head {
    min-height: 44px;
    grid-template-columns: 88px minmax(0, 1fr) 44px;
    margin: -10px -10px 0;
    border-bottom-width: 2px;
  }
  .mobile-module-order { display: flex; width: 88px; height: 44px; }
  .mobile-module-order button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.35);
    background: var(--ink);
    color: white;
    font-size: 1rem;
    font-weight: 950;
  }
  .mobile-module-order button:disabled { color: rgba(255,255,255,.28); cursor: default; }
  .mobile-module-order button:not(:disabled):active { background: var(--yellow); color: var(--ink); }
  .mobile-module-order svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .module-drag, .module-resize { display: none !important; }
  .module-enter { min-height: 44px; }
  .module-remove { width: 44px; height: 44px; border-radius: 0 8px 0 0; }
  .module-grid.focus-mode { min-height: calc(100dvh - 220px); overflow: visible; }
  .module-grid.focus-mode .module-frame.focused-module { min-height: calc(100dvh - 220px); height: auto; }
  .song-view.standalone-tool-mode .module-grid.focus-mode .module-frame.focused-module { min-height: 100%; }
  .module-grid.focus-mode .module-frame-head { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .module-grid.focus-mode .mobile-module-order { display: none; }
  .module-back { width: 44px; height: 44px; }

  .focused-module.module-audio .audio-module-content { height: auto; grid-template-rows: auto auto; align-content: start; gap: 8px; padding: 8px; }
  .focused-module.module-audio .audio-primary-controls { grid-template-rows: auto; }
  .song-view.standalone-tool-mode .focused-module.module-audio .audio-header-row { padding: 5px 8px 4px; }
  .focused-module.module-audio .audio-timeline { grid-template-rows: auto auto; }
  .focused-module.module-audio .audio-timeline-viewport,
  .focused-module.module-audio .audio-timeline-scroll,
  .focused-module.module-audio .audio-timeline-track,
  .focused-module.module-audio .audio-marker-stage { height: auto; }
  .focused-module.module-audio .audio-marker-stage { grid-template-rows: 150px minmax(140px, auto); }
  .focused-module.module-audio .audio-marker-lane { overflow-y: visible; }
  .audio-mobile-scroll-scrub { --audio-mobile-waveform-height: 130px; }
  .focused-module.audio-mobile-scroll-scrub { --audio-mobile-waveform-height: 150px; }
  .audio-mobile-scroll-scrub .audio-timeline-scroll { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .audio-mobile-scroll-scrub .audio-timeline-track { box-sizing: content-box; padding-right: 60%; padding-left: 40%; }
  .audio-mobile-scroll-scrub .audio-waveform { touch-action: pan-x pinch-zoom; }
  .audio-mobile-scroll-scrub .audio-waveform::after,
  .audio-mobile-scroll-scrub .audio-playhead-time { display: none; }
  .audio-mobile-scroll-scrub .audio-mobile-scrub-playhead {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: auto;
    left: 40%;
    display: block;
    width: 4px;
    height: var(--audio-mobile-waveform-height);
    background: var(--ink);
    pointer-events: none;
    transition: background-color .14s ease;
    transform: translateX(-2px);
  }
  .audio-mobile-scroll-scrub .audio-mobile-scrub-playhead span {
    position: absolute;
    top: 5px;
    left: 50%;
    min-width: 44px;
    padding: 3px 5px;
    border-radius: 4px;
    background: var(--ink);
    color: white;
    font: 800 .57rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
    transform: translateX(-50%);
  }
  .audio-mobile-scroll-scrub .audio-playhead-action { display: none; }
  .audio-mobile-scroll-scrub .audio-mobile-add-note {
    position: absolute;
    z-index: 12;
    top: calc(var(--audio-mobile-waveform-height) - 52px);
    left: 40%;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0 0 2px;
    border: 3px solid var(--ink);
    border-radius: 9px;
    background: var(--yellow);
    color: var(--ink);
    font: 950 1.2rem/1 Arial, sans-serif;
    transition: background-color .14s ease;
    transform: translateX(-50%);
  }
  .audio-mobile-scroll-scrub .audio-mobile-add-note:not(:disabled):active { background: var(--coral); }
  .audio-mobile-scroll-scrub .audio-mobile-add-note:disabled { opacity: .3; }
  .audio-mobile-scroll-scrub .audio-mobile-add-note .material-symbols-outlined { font-size: 21px; }
  .audio-mobile-scroll-scrub.is-audio-playing .audio-mobile-scrub-playhead,
  .audio-mobile-scroll-scrub.is-audio-playing .audio-mobile-add-note { background: var(--coral); }
  .focused-module .info-module-content { gap: 18px; padding: 0 0 14px; }
  .info-song-hero { gap: 10px; padding: 8px 4px 2px; }
  .info-song-hero > div { gap: 6px; }
  .info-song-hero h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .module-info:not(.focused-module) .info-summary > strong { font-size: clamp(2rem, 9vw, 2.8rem); }
  .info-credits-column { gap: 16px; }
  .info-focused-column { gap: 10px; padding: 0; }
  .song-credits-section { padding: 8px 14px 14px; }
  .info-read-tags > span,
  .info-read-tags > button,
  .info-summary .entity-tag { min-width: 0 !important; min-height: 28px !important; padding: 4px 8px; line-height: 1.1; }
  .info-credit-read-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 7px 9px; padding: 8px 10px; }
  .info-credit-read-row i { width: 36px; height: 36px; }
  .info-credit-role-tags { grid-column: 2 / 5; justify-content: flex-start; }
  .info-credit-access { grid-column: 3; grid-row: 1; }
  .pending-song-invitation-link { grid-column: 4; grid-row: 1; justify-self: end; }

  .chord-expanded,
  .module-grid:not(.focus-mode) .module-chords .chord-expanded {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .chord-side-rail,
  .module-grid:not(.focus-mode) .module-chords .chord-side-rail {
    align-items: center;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 3px;
  }
  .chord-rail-modes,
  .chord-rail-history,
  .chord-rail-actions,
  .module-grid:not(.focus-mode) .module-chords .chord-rail-history,
  .module-grid:not(.focus-mode) .module-chords .chord-rail-modes,
  .module-grid:not(.focus-mode) .module-chords .chord-rail-actions { display: flex; flex: 0 0 auto; gap: 4px; }
  .chord-rail-actions,
  .module-grid:not(.focus-mode) .module-chords .chord-rail-actions { margin: 0 0 0 auto; }
  .chord-rail-status { flex: 0 0 auto; }
  .chord-meta-popover,
  .module-grid:not(.focus-mode) .module-chords .chord-meta-popover { top: 51px; left: 0; }
  .chart-input-panel > header, .chart-preview-panel > header { height: auto; min-height: 74px; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 5px; padding: 8px 10px; }
  .chart-view-menu { width: min(170px, 64%); flex: 0 0 auto; margin-left: auto; }
  .chart-preview-panel > header .chart-output-controls { width: 100%; flex: 1 1 100%; }
  .chart-output-controls .chart-view-menu { margin-left: 0; flex: 1 1 auto; }
  .chart-output-controls .chart-output-key-menu { flex: 0 1 88px; }

  .lyrics-editor-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .lyrics-side-rail,
  .song-view.standalone-tool-mode .lyrics-side-rail {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding: 8px 10px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .lyrics-side-rail::-webkit-scrollbar { display: none; }
  .lyrics-rail-history,
  .lyrics-rail-move,
  .lyrics-rail-actions,
  .song-view.standalone-tool-mode .lyrics-rail-history,
  .song-view.standalone-tool-mode .lyrics-rail-move,
  .song-view.standalone-tool-mode .lyrics-rail-actions { display: contents; }
  .lyrics-rail-actions,
  .focused-module.module-lyricEditor .lyrics-rail-actions { margin: 0; }
  .lyrics-rail-status { grid-column: 1 / -1; }
  .chord-side-rail,
  .song-view.standalone-tool-mode .chord-side-rail {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .chord-side-rail::-webkit-scrollbar { display: none; }
  .chord-rail-modes,
  .chord-rail-history,
  .chord-rail-actions,
  .song-view.standalone-tool-mode .chord-rail-modes,
  .song-view.standalone-tool-mode .chord-rail-history,
  .song-view.standalone-tool-mode .chord-rail-actions { display: contents; }
  .chord-rail-status { grid-column: 1 / -1; }
  [data-chart-mode="split"] { display: none !important; }
  .module-lyricEditor { --writing-font-size: 1.12rem; --lyrics-line-height: 1.08; }

  .notepad-toolbar { justify-content: flex-start; gap: 4px; padding: 5px; }
  .notepad-toolbar-group button { min-width: 30px !important; min-height: 30px !important; padding: 0 5px; font-size: .72rem; }
  .notepad-icon-group button { width: 30px; padding: 0; }
  .notepad-icon-group svg { width: 16px; height: 16px; stroke-width: 1.8; }
  .saved-notes-grid { grid-template-columns: 1fr; }

  .module-audio .audio-header-row,
  .focused-module.module-audio .audio-header-row { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px 44px; gap: 8px; }
  .module-audio .audio-playback-row,
  .module-audio .audio-file-control-row { display: flex; min-width: 0; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .module-audio .audio-playback-row::-webkit-scrollbar,
  .module-audio .audio-file-control-row::-webkit-scrollbar { display: none; }
  .module-audio .audio-playback-row { grid-row: 1; }
  .module-audio .audio-file-control-row { grid-row: 2; }
  .module-audio .audio-navigation { flex: 1 1 auto; justify-content: flex-start; }
  .module-audio .audio-navigation button { width: 44px; height: 44px; }
  .module-audio .audio-scale-controls { display: grid; height: 44px; flex: 0 0 130px; grid-template-columns: 44px 42px 44px; }
  .module-audio .audio-scale-controls button { width: 44px; height: 44px; }
  .module-audio .audio-follow-playhead, .focused-module.module-audio .audio-follow-playhead { display: none; }
  .module-audio .audio-clear-notes { display: grid; width: 44px; height: 44px; flex: 0 0 44px; order: 2; }
  .module-audio { --audio-marker-note-width: 196px; }
  .module-audio .audio-marker-note > header { min-height: 36px; grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .module-audio .audio-marker-note > header button { height: 36px; min-height: 36px !important; }
  .module-audio .audio-marker-note .audio-marker-grip,
  .module-audio .audio-marker-note .audio-marker-delete { display: grid; width: 36px; min-width: 36px !important; place-items: center; }
  .module-audio .audio-marker-note .audio-marker-title { width: auto; min-width: 0 !important; padding: 0 7px; }
  .module-audio .audio-marker-note .audio-marker-delete { font-size: 1rem; }
  .module-audio .audio-marker-note .audio-marker-grip:active,
  .module-audio .audio-marker-note .audio-marker-title:active { background: rgba(255, 255, 255, .42); }
  .module-audio .audio-marker-note .audio-marker-delete:active { background: var(--coral); }
  .module-audio .audio-file-row,
  .focused-module.module-audio .audio-file-row { height: 44px; min-width: 0; flex: 1 1 auto; order: 1; grid-template-columns: minmax(0, 1fr) 34px 34px; }
  .module-audio .audio-file-row .audio-replace,
  .module-audio .audio-file-row .audio-remove { width: 34px; min-width: 34px !important; height: 34px; min-height: 34px !important; }
  .module-audio .audio-file-row .audio-remove:hover { background: transparent; }
  .module-audio .audio-file-row .audio-remove:active { background: var(--coral); }
  .focused-module.module-audio .audio-module-content { padding: 1px; }

  .task-list-column > header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .task-list-column > header .task-list-grip { display: none; }
  .task-list-mobile-order { display: flex; gap: 3px; }
  .task-list-mobile-order button { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--ink); border-radius: 7px; background: white; }
  .task-list-mobile-order svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
  .task-list-mobile-order button:not(:disabled):active { background: var(--yellow); }
  .task-list-mobile-order button:disabled { opacity: .25; }

  .focused-module .tasks-expanded-view { display: none; }
  .focused-module .tasks-mobile-view { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 10px; }
  .focused-module .tasks-module-content { padding: 4px; }
  .task-mobile-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 6px; }
  .task-mobile-list-tabs { display: flex; min-width: 0; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .task-mobile-list-tabs::-webkit-scrollbar { display: none; }
  .task-mobile-list-tabs button { flex: 0 0 auto; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: white; font-size: .66rem; font-weight: 900; white-space: nowrap; }
  .task-mobile-list-tabs button[aria-pressed="true"] { background: var(--yellow); }
  .task-mobile-add-list { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 1.35rem; font-weight: 700; }
  .task-mobile-add-list:active { background: var(--yellow); }
  .task-mobile-selected-column { width: 100%; height: 100%; min-height: 0; padding: 9px; overflow: hidden; background: var(--cream); }
  .task-mobile-selected-column > header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tasks-mobile-view .task-list { overflow-y: auto; }
  .tasks-mobile-view .task-item { grid-template-columns: 18px minmax(0, 1fr); padding-right: 11px; cursor: default; }
  .tasks-mobile-view .task-item .task-drag-surface { display: none; }
  .tasks-mobile-view .task-edit-field { grid-column: 2; }
  .song-view:not(.standalone-tool-mode) .module-lyricEditor .lyrics-editor-surface { padding-top: 24px; }
  .lyrics-editor-shell.is-lyrics-move-mode .lyrics-editor-surface { cursor: default; }
  .lyrics-editor-shell.is-lyrics-move-mode .lyrics-line { cursor: pointer; }
  .lyrics-editor-shell.is-lyrics-move-mode .lyrics-line-handle { opacity: 1; touch-action: none; }
  .lyrics-editor-shell.is-lyrics-move-mode .lyrics-line-content { user-select: none; }
  .account-panel > header { display: grid; min-height: 44px; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; }
  .account-panel > header .dialog-close { font-size: 1.1rem; }
  .site-footer { min-height: 92px; align-items: flex-start; flex-direction: column; gap: 6px; padding: 20px 18px max(22px, env(safe-area-inset-bottom)); }
}

@container notepad-module (max-width: 600px) {
  .focused-module .notepad-focus-layout { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(420px, 62dvh) auto; }
  .focused-module .notepad-editor { min-height: 420px; }
  .focused-module .saved-notes-archive { min-height: 340px; max-height: 55dvh; }
}

@media (max-height: 520px) and (max-width: 900px) {
  .song-view {
    height: auto;
    min-height: calc(100vh - 68px);
    min-height: calc(100dvh - 68px);
  }
}

@media (max-width: 780px) {
  .account-files-sort.library-sort-options { display: flex; flex-wrap: wrap; justify-content: flex-start; }
}

body.title-case-display :is(
  h1,
  h2,
  h3,
  h4,
  .app-destination-card > strong,
  .tool-landing-card strong,
  .learn-placeholder strong,
  .help-destination-card strong,
  .home-song-card strong,
  .project-song-list > button strong,
  .project-song-open strong,
  .project-song-manager-grid form > strong,
  .project-danger-zone strong,
  .standalone-document-button strong,
  .module-button-copy strong,
  .rail-song-button strong,
  .rail-library-card > strong,
  .rail-project-card > header > strong,
  .rail-project-open,
  .large-song-card-copy > strong,
  .workspace-save-form > strong,
  .workspace-preset-button strong,
  .info-summary-title,
  .chart-input-panel > header strong,
  .chart-preview-panel > header strong,
  .rail-section-toggle,
  .info-column-heading > span,
  .song-rights-heading > div > span,
  .song-note-archive > header > span,
  .task-list-column > header input,
  .task-mobile-list-tabs button,
  [data-mobile-nav-title],
  [data-song-info-title],
  [data-standalone-rename-input],
  input[name="title"]
) {
  letter-spacing: -.015em;
  text-transform: capitalize;
}

@container (max-width: 450px) {
  .app-destination-card {
    grid-template-rows: auto 1fr auto auto;
  }
  .app-destination-card > small {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .app-destination-card .app-destination-entry {
    width: max-content;
    max-width: 100%;
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
  }
}

@media (max-width: 360px) {
  .app-home-heading { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .app-home-add { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; }
}

.app-destination-entry { width: max-content; max-width: 100%; }