:root {
  color-scheme: light;
  --bg-1:#f5efe5; --bg-2:#eee4d5; --ink:#35291f; --ink-soft:#6e5c4a;
  --accent:#985432; --accent-2:#a54e28; --on-accent:#fffaf2;
  --card:#fffcf6; --panel-soft:#f1e8db; --field:#fffdf9; --border:#d6c7b5;
  --metal:#c9ced0; --metal-ink:#283238; --danger:#bb3434; --reassigned:#547caa;
  --timeline-bg:#fffcf6; --timeline-grid:#ccbdab; --timeline-soft:#eee5d8;
  --shadow:0 10px 30px #442c1810;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme=light]) { color-scheme:dark; --bg-1:#211c18; --bg-2:#2c241d; --ink:#f1e5d3; --ink-soft:#bdac96; --accent:#d6ad70; --accent-2:#e6b379; --on-accent:#2b2117; --card:#2e2620; --panel-soft:#382e25; --field:#241f1b; --border:#5b4b3b; --metal:#b5babc; --metal-ink:#20272b; --danger:#f18c85; --reassigned:#91b5e4; --timeline-bg:#29231e; --timeline-grid:#6a5844; --timeline-soft:#40362c; --shadow:0 10px 30px #0002; }
}
:root[data-theme=dark] { color-scheme:dark; --bg-1:#211c18; --bg-2:#2c241d; --ink:#f1e5d3; --ink-soft:#bdac96; --accent:#d6ad70; --accent-2:#e6b379; --on-accent:#2b2117; --card:#2e2620; --panel-soft:#382e25; --field:#241f1b; --border:#5b4b3b; --metal:#b5babc; --metal-ink:#20272b; --danger:#f18c85; --reassigned:#91b5e4; --timeline-bg:#29231e; --timeline-grid:#6a5844; --timeline-soft:#40362c; --shadow:0 10px 30px #0002; }
html { font-size:16px; }
body { background:var(--bg-1); font-family:var(--font-ui); line-height:1.5; }
a { color:var(--accent); text-underline-offset:3px; }
button,.site-button,.download-link { border:1px solid var(--border); border-radius:9px; padding:.55rem .9rem; background:var(--card); color:var(--ink); font-size:.9rem; font-weight:600; line-height:1.4; }
.site-button,.download-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
button:hover,.site-button:hover { transform:none; background:var(--panel-soft); filter:none; }
button.primary,.site-button.primary,.download-link,button.secondary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
button.ghost { background:var(--card); color:var(--ink); border:1px solid var(--border); }
:focus-visible { outline:3px solid var(--accent-2); outline-offset:3px; }
input,select,textarea { background:var(--field); color:var(--ink); border-color:var(--border); max-width:100%; }
input[type=checkbox],input[type=range] { accent-color:var(--accent); }
input[type=file] { width:100%; }
label { font-size:.85rem; }
pre { background:var(--field); color:var(--ink-soft); font-size:.78rem; max-width:100%; }
details { border-top:1px solid var(--border); margin-top:1rem; padding-top:.8rem; min-width:0; }
summary { cursor:pointer; font-weight:600; font-size:.9rem; color:var(--ink); }
details[open]>summary { margin-bottom:1rem; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:1.9rem; line-height:1.2; letter-spacing:-.035em; }
h2 { font-size:1.05rem; }
.site-header { min-height:92px; display:flex; align-items:center; gap:1.4rem; padding:1rem max(24px,calc((100vw - 1480px)/2)); border-bottom:1px solid var(--border); background:var(--card); }
.site-brand { display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; flex-shrink:0; }
.site-brand img { display:block; width:160px; height:64px; object-fit:contain; }
.site-navigation { display:flex; align-items:center; gap:1.2rem; margin-right:auto; }
.site-navigation a { color:var(--ink-soft); text-decoration:none; font-size:.85rem; white-space:nowrap; padding:.5rem 0; }
.site-navigation a[aria-current=page] { color:var(--ink); box-shadow:0 2px var(--accent); }
.site-plans-link { color:var(--accent); background:transparent; border:1px solid var(--border); border-radius:9px; padding:.55rem .8rem; font-weight:600; font-size:.85rem; text-decoration:none; white-space:nowrap; }
.site-appearance { font-size:.65rem; gap:.15rem; }
.site-appearance select { padding:.3rem .5rem; font-size:.8rem; }
.site-content { width:min(1480px,calc(100% - 48px)); margin:1.8rem auto; min-height:calc(100vh - 210px); }
.site-view { min-width:0; }
.site-page-title { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-bottom:1.5rem; }
.site-page-title p { margin:.5rem 0 0; color:var(--ink-soft); }
.site-eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; font-weight:650; color:var(--accent); margin:0 0 .65rem; }
.site-project-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 1.5rem; }
.site-project-name { min-width:0; }
.site-project-name h1 { font-size:1.55rem; }
.site-project-name p { margin:.25rem 0; color:var(--ink-soft); font-size:.82rem; }
#songSaveStatus { font-size:.72rem; margin:.25rem 0 0; }
.site-project-actions { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
#siteFileMenu { position:relative; border:none; margin:0; padding:0; }
#siteFileMenu>summary { list-style:none; border:1px solid var(--border); border-radius:9px; padding:.55rem .9rem; background:var(--card); }
#siteFileMenu[open]>summary { margin:0; }
#siteFileActions { position:absolute; z-index:6; right:0; top:calc(100% + 8px); width:290px; display:grid; gap:.55rem; padding:1rem; border:1px solid var(--border); border-radius:12px; background:var(--card); box-shadow:var(--shadow); }
#siteFileActions a { padding:.5rem; }
.site-tabs { display:flex; gap:1.5rem; border-bottom:1px solid var(--border); margin-bottom:1.2rem; overflow-x:auto; }
.site-tabs button { border:0; border-radius:0; background:none; padding:.8rem .4rem 1rem; color:var(--ink-soft); }
.site-tabs button[aria-selected=true] { color:var(--accent); box-shadow:inset 0 -3px var(--accent); }
.site-workspace { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.2rem; align-items:start; }
.site-work-main,.site-inspector,#sitePlayMain,#siteInstrumentSlot>.panel { border:1px solid var(--border); border-radius:14px; background:var(--card); padding:1.3rem; min-width:0; box-shadow:var(--shadow); }
.site-work-main>.panel,#sitePlayMain>.panel { padding:0; border:0; border-radius:0; background:transparent; }
.site-inspector { padding:1.1rem; }
.site-inspector>details:first-child { border:0; padding:0; margin:0; }
.site-inspector .grid { grid-template-columns:minmax(0,1fr); gap:.75rem; }
.site-inspector .actions { gap:.4rem; }
.site-inspector button { font-size:.8rem; }
.site-inspector .practice-transport { border:0; background:none; padding:0; margin:0; }
.site-inspector .checkbox-row { margin:.7rem 0; }
.site-tool-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.site-tool-row h2 { margin:0 auto 0 0; }
#siteEditTools { margin-bottom:1rem; }
#siteEditTools a { margin-right:auto; font-size:.85rem; }
.editor-navigation { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0; }
.song-timeline,.instrument-diagram { background:var(--timeline-bg); }
.site-transport { position:sticky; bottom:12px; z-index:4; margin-top:1.1rem; border:1px solid var(--border); border-radius:12px; padding:.9rem 1.2rem; background:var(--card); box-shadow:var(--shadow); display:grid; grid-template-columns:auto minmax(150px,1fr); gap:.25rem 1.6rem; align-items:center; }
.site-focus-actions { grid-column:2; grid-row:2; justify-self:end; display:flex; gap:.7rem; align-items:center; }
#siteFocusButton { padding:.25rem .55rem; font-size:.75rem; }
.site-focus-plans { display:none; font-size:.75rem; }
.site-focus .site-focus-plans { display:inline; }
#siteTransportStatus { grid-row:3; }
#siteTransportButtons>label { width:80px; }
#siteTransportPosition { display:flex; gap:.8rem; align-items:center; min-width:0; }
#siteTransportPosition>label { flex:1; min-width:90px; }
#siteTransportPosition input { width:100%; }
#vizPosition { font-size:.75rem; margin:0; max-width:330px; }
#siteTransportStatus { grid-column:1; grid-row:2; font-size:.75rem; }
#vizTransportStatus { margin:.25rem 0 0; }
.site-info,.site-empty,#siteNotice,.site-job { padding:1rem; border:1px solid var(--border); border-radius:10px; background:var(--panel-soft); }
#siteNotice,.site-job { margin:1rem 24px; }
#siteNotice { border-color:var(--danger); }
.site-job { display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; }
.site-empty { margin-bottom:1rem; }
/* With no song, show one clear starting point instead of empty editor panels. */
#siteStudio:has(>.site-empty:not([hidden]))>.site-mode,
#siteStudio:has(>.site-empty:not([hidden]))>.site-transport { display:none; }
#siteEditorNotice { color:var(--danger); font-size:.9rem; }
#siteVideoActions { margin:1rem 0; }
#siteVideoStatus { font-size:.85rem; }
.rain-canvas { display:block; }
#siteVideoResult { margin-top:1rem; }
#siteConversionFields { margin-top:1rem; }
#siteSourceFile { margin:1.2rem 0; }
#siteConversionReport pre { white-space:pre-wrap; }
.site-song-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.5rem; }
.site-song-card,.site-plan,.site-guide-grid article { border:1px solid var(--border); border-radius:14px; padding:1.5rem; background:var(--card); box-shadow:var(--shadow); }
.site-song-card { display:flex; flex-direction:column; align-items:start; }
.site-song-card h2 { flex:1; }
.site-song-card .legend { font-size:.75rem; margin:.8rem 0; }
.site-home-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem; border:1px solid var(--border); border-radius:22px; padding:4rem; background:var(--card); }
.site-home-hero h1 { font-family:var(--font-ui); font-weight:600; font-size:clamp(2.8rem,4.3vw,4.5rem); line-height:1.05; }
.site-home-hero p:not(.site-eyebrow) { color:var(--ink-soft); max-width:440px; }
.site-home-hero .legend { margin-top:1rem; font-size:.8rem; }
.site-home-instrument { display:flex; gap:8px; justify-content:center; align-items:start; padding:40px 25px; background:repeating-linear-gradient(1deg,#83562c,#83562c 4px,#885c32 5px,#996b3c 9px); border-radius:30px 30px 45% 45%; box-shadow:inset 0 0 0 8px #ffffff14,0 20px 30px #0002; }
.site-home-instrument span { display:flex; align-items:end; justify-content:center; width:38px; height:var(--tine-length); padding-bottom:16px; background:#d9dedc; color:#243a36; font-size:1.4rem; font-weight:800; border-radius:4px 4px 15px 15px; }
.site-home-steps,.site-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin:2rem 0; }
.site-home-steps article { padding:1rem; }
.site-home-steps p,.site-plan p,.site-guide-grid p { color:var(--ink-soft); font-size:.9rem; }
.site-plan-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:1050px; margin:1.5rem 0 2rem; }
.site-plan { padding:2rem; }
.site-plan h2 { font-size:1.3rem; }
.site-plan .site-price { color:var(--ink); font-size:2rem; font-family:var(--font-ui); margin:.8rem 0; }
.site-plan li { margin:.65rem 0; font-size:.9rem; }
.site-plan ul { padding-left:1.2rem; margin:1.5rem 0; }
.site-badge { font:600 .7rem var(--font-ui); padding:.3rem .5rem; background:var(--panel-soft); border-radius:6px; vertical-align:middle; }
.site-comparison { width:100%; border-collapse:collapse; font-size:.85rem; text-align:left; margin:2rem 0; }
.site-comparison th,.site-comparison td { padding:1rem; border-bottom:1px solid var(--border); }
.site-comparison caption { text-align:left; color:var(--ink-soft); padding-bottom:1rem; }
.site-feature-highlight { background:var(--panel-soft); }
.site-back { display:inline-block; margin-bottom:1.2rem; }
.site-skip { position:absolute; top:-100px; left:20px; z-index:20; padding:1rem; background:var(--card); }
.site-skip:focus { top:10px; }
.live-row { padding:1.3rem; border-radius:14px; background:linear-gradient(100deg,#68412a,#97623c,#70482e); }
.live-tine { background:#d9dedc; color:#243a36; border-color:#939b9e; box-shadow:none; min-height:195px; }
.live-tine small { display:none; }
.live-tine kbd { color:#243a36; background:none; border:0; box-shadow:none; }
.live-tine:hover { background:#d9dedc; }
.live-tine.is-held { background:#f1d8a5; }
.live-tine.is-playback { background:#b9d5c8; }
.live-settings { max-width:600px; }
dialog#siteRefineDialog { width:min(1040px,94vw); max-height:90vh; color:var(--ink); border:1px solid var(--border); border-radius:16px; padding:1.2rem; background:var(--card); }
dialog::backdrop { background:#17120ec9; }
.site-dialog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
#siteRefineSlot>.panel { padding:0; border:0; background:transparent; }
@media(min-width:1600px) { .site-workspace { grid-template-columns:minmax(0,1fr) 350px; } }
@media(min-width:801px) {
  .site-header { min-height:76px; padding-block:.7rem; }
  .site-content { margin-block:1.1rem; }
  .site-project-header { margin-bottom:.8rem; }
  .site-tabs { margin-bottom:.8rem; }
  .site-tabs button { padding-block:.55rem .7rem; }
  /* Status and empty-state blocks must own rows, never create implicit columns. */
  #siteStudio { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto minmax(0,1fr) auto; height:calc(100vh - 155px); min-height:680px; }
  #siteStudio>* { grid-column:1; min-width:0; }
  body[data-mode=practice] #siteStudio,body[data-mode=video] #siteStudio { min-height:680px; }
  #siteStudio>.site-project-header { grid-row:1; }
  #siteStudio>.site-tabs { grid-row:2; }
  #siteStudio>#siteEditorNotice { grid-row:3; margin:0 0 .6rem; }
  #siteStudio>.site-empty { grid-row:4; align-self:start; }
  #siteStudio>.site-mode { grid-row:5; min-height:0; overflow:auto; }
  #siteStudio>.site-transport { grid-row:6; position:static; }
  #siteStudio:has(>.site-empty:not([hidden])) { height:auto; min-height:0; }
  .site-workspace { align-items:stretch; }
  .site-workspace>.site-work-main,.site-workspace>.site-inspector { overflow:auto; min-height:0; box-shadow:none; }
  #siteEditMain { display:flex; flex-direction:column; }
  #siteEditMain #songStudio,#siteEditMain #songWorkspace { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
  #siteEditMain .song-timeline { flex:1; min-height:0; max-height:none; }
  #siteEditTools,#siteEditMain .editor-navigation { flex-shrink:0; }
  #siteEditMain .editor-navigation { display:flex; flex-wrap:wrap; gap:.5rem; }
  #siteEditMain .editor-navigation label { flex:1 1 118px; width:auto; font-size:.73rem; }
  #siteEditMain .editor-navigation button { font-size:.75rem; padding:.55rem; }
  #siteEditMain .site-sheet { flex:0 0 auto; max-height:50%; overflow:auto; }
  #siteMode-practice>.site-work-main,#siteMode-video>.site-work-main { display:flex; flex-direction:column; }
  #sitePracticeCanvas,#siteVideoCanvas { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  #sitePracticeCanvas .rain-canvas,#siteVideoCanvas .rain-canvas { width:auto; height:auto; max-width:100%; max-height:100%; }
  #siteMode-practice .site-tool-row { margin-bottom:.6rem; }
  #siteMode-practice .site-work-main>.legend { margin:.6rem 0 0; font-size:.75rem; }
  #siteVideoResult:has(video[hidden]) { display:none; }
  #siteVideoResult:has(video:not([hidden])) { flex:1; min-height:120px; overflow:auto; }
}
.site-focus .site-header,.site-focus .site-project-header,.site-focus .site-footer { display:none; }
.site-focus .site-content { width:calc(100% - 24px); margin:12px auto; min-height:0; }
body.site-focus #siteStudio { height:calc(100vh - 24px); min-height:0; }
.site-focus .site-tabs { margin:0 0 .5rem; }
.site-focus .site-inspector { display:none; }
.site-focus .site-workspace { grid-template-columns:minmax(0,1fr); }
.site-focus .site-transport { margin-top:.5rem; }
.site-focus #siteMode-practice>.site-work-main { padding:.75rem; }
.site-focus #siteMode-practice .site-work-main>.legend { display:none; }
.site-focus .site-transport { padding:.5rem .8rem; }
.site-focus #siteTransportStatus { display:none; }
.site-focus #siteTransportButtons>label { font-size:.7rem; }
@media(max-width:1100px) { .site-header { gap:1rem; flex-wrap:wrap; } .site-navigation { order:3; width:100%; } .site-brand { margin-right:auto; } .site-home-hero { padding:2rem; gap:1.5rem; } .site-workspace { grid-template-columns:minmax(0,1fr) 280px; } .site-project-header { flex-wrap:wrap; } .site-project-name { flex:1 1 320px; } .site-project-actions { flex-wrap:wrap; } }
@media(max-width:800px) { .site-content { width:calc(100% - 28px); margin:1.2rem auto; } .site-header { padding:1rem 14px; } .site-navigation { overflow-x:auto; gap:1.1rem; } .site-brand { font-size:1.1rem; } .site-brand span { display:none; } .site-workspace { grid-template-columns:minmax(0,1fr); } .site-inspector .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .site-project-header { align-items:start; flex-direction:column; } .site-transport { position:static; grid-template-columns:1fr; padding:.8rem; } .site-transport #siteTransportStatus { grid-column:auto; } .site-song-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .site-home-hero { grid-template-columns:1fr; } .site-home-instrument { max-width:470px; } .site-home-steps,.site-guide-grid { grid-template-columns:1fr; gap:.5rem; } .site-page-title { flex-direction:column; align-items:start; } }
@media(max-width:500px) { .site-header { gap:.7rem; } .site-appearance { margin-left:auto; } .site-plans-link { font-size:.75rem; padding:.45rem .55rem; } .site-tabs { gap:.8rem; } .site-tabs button { font-size:.85rem; } .site-work-main,.site-inspector,#sitePlayMain { padding:.85rem; } .site-inspector .grid,.site-plan-cards,.site-song-cards { grid-template-columns:minmax(0,1fr); } .site-home-hero { padding:1.3rem; } .site-home-instrument { gap:5px; padding-inline:12px; } .site-home-instrument span { width:28px; } .site-comparison th,.site-comparison td { padding:.55rem; } #siteTransportPosition { flex-wrap:wrap; } .editor-navigation { grid-template-columns:1fr 1fr; } .site-footer { width:calc(100% - 28px); flex-direction:column; } }
@media(max-width:800px) { .site-focus-actions { grid-column:1; grid-row:auto; } #siteTransportStatus { grid-row:auto; } .site-focus #siteStudio { height:auto; min-height:calc(100vh - 24px); } }
@media(max-width:800px) { .site-project-name { flex:none; width:100%; } }
@media(max-width:800px) {
  .site-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; }
  .site-brand { grid-column:1; grid-row:1; margin:0; }
  .site-plans-link { grid-column:2; grid-row:1; justify-self:end; }
  .site-navigation { grid-column:1; grid-row:2; min-width:0; margin:0; }
  .site-appearance { grid-column:2; grid-row:2; justify-self:end; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
.live-layout-picker { display:flex; flex-wrap:wrap; align-items:end; gap:.7rem; margin:1rem 0; }
.live-layout-picker .legend { margin:0; font-size:.75rem; }
.live-board-scroll { max-width:100%; overflow-x:auto; padding:.4rem 0 1rem; }
.live-board { position:relative; width:100%; background:repeating-linear-gradient(2deg,#734a2c,#734a2c 5px,#805534 6px,#8c5e38 12px); border:10px solid #67442d; border-radius:24px 24px 20% 20%; box-shadow:inset 0 0 0 3px #d5a97655,0 8px 20px #0002; }
.live-board .live-tine { position:absolute; transform:translateX(-50%); display:flex; flex-direction:column; justify-content:end; min-height:0; padding:0 .1rem 10px; gap:3px; border-radius:5px 5px 16px 16px; }
.live-board .live-tine:hover { transform:translateX(-50%); }
.live-board .live-tine.is-held { transform:translate(-50%,2px); }
.live-board .live-tine strong { font-size:1.4rem; font-weight:800; line-height:1.15; }
.live-board .tine-octave { font-size:.6em; vertical-align:.35em; }
.live-board .tine-octave.is-low { vertical-align:-.15em; }
.live-board .live-tine strong,.live-board .live-tine kbd { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.live-board .live-tine kbd { padding:.1rem .25rem; font-size:.75rem; line-height:1.2; }
.live-board .live-tine[data-row="2"] { border-top:5px solid #617faf; }
.live-board .live-tine[data-row="1"] { border-top:5px solid #b47b42; }
.live-board .live-tine[data-row="0"] { border-top:5px solid #53776c; }
#liveKeymapDialog { width:min(800px,94vw); max-height:90vh; overflow:auto; padding:1.4rem; color:var(--ink); background:var(--card); border:1px solid var(--border); border-radius:14px; }
#liveKeymapDialog>button:first-child { float:right; margin-bottom:1rem; }
#liveKeymapDialog>h2 { margin:.5rem 0 1.5rem; }
#liveBindingOverview { clear:both; border-block:1px solid var(--border); padding:.7rem 0; margin-bottom:1rem; }
#liveBindingOverview p { font-family:Consolas,monospace; font-size:.85rem; overflow-wrap:anywhere; }
@media print { .site-header,.site-footer,.site-tabs,.site-transport,#siteNotice,.site-job { display:none!important; } }
/* Physical timeline: upright labels with exactly rotated note/tine geometry. */
.editor-gesture-status { flex-shrink:0; font-size:.73rem; color:var(--ink-soft); margin:0 0 .55rem; min-height:2.2em; }
.song-timeline { overscroll-behavior:contain; scrollbar-gutter:stable; position:relative; min-height:350px; max-height:68vh; }
.song-timeline svg { touch-action:pan-x pan-y; user-select:none; -webkit-user-select:none; }
.editor-row-panel { fill:var(--timeline-bg); stroke:var(--border); }
.editor-row-title { fill:var(--ink-soft); font:600 12px var(--font-ui); }
.editor-lane { fill:var(--panel-soft); opacity:.35; }
.editor-lane-center { stroke:var(--timeline-soft); stroke-dasharray:2 6; }
.editor-beat-line { stroke:var(--timeline-grid); }
.editor-snap-line { stroke:var(--timeline-soft); }
.editor-beat-label { fill:var(--ink-soft); font:11px var(--font-ui); }
.editor-board { fill:var(--bg-2); stroke:var(--border); }
.editor-strike-line { stroke:var(--accent); stroke-width:3; }
.editor-tine { fill:var(--metal); stroke:var(--border); }
.editor-tine-label { fill:var(--metal-ink); font:800 14px var(--font-ui); }
.editor-tine-label.is-small { font-size:10px; }
.editor-key-label { fill:var(--metal-ink); font:10px var(--font-ui); }
.editor-note { touch-action:none; }
.editor-note-body { fill:var(--accent); stroke:var(--on-accent); stroke-width:1; cursor:grab; }
.editor-note-body.is-reassigned { fill:var(--reassigned); }
.editor-note.is-selected .editor-note-body { fill:var(--accent-2); stroke:var(--ink); stroke-width:2.5; }
.editor-note.is-protected .editor-note-body { stroke:var(--ink); stroke-width:3; stroke-dasharray:5 2; }
.editor-note.has-conflict .editor-note-body { stroke:var(--danger); stroke-width:3; }
.editor-note-caption { fill:var(--on-accent); font:600 10px var(--font-ui); pointer-events:none; }
.editor-note-body:focus { outline:none; stroke:var(--ink); stroke-width:3; filter:drop-shadow(0 0 2px var(--accent)); }
.editor-note-handle { fill:transparent; cursor:ns-resize; }
[data-orientation=horizontal] .editor-note-handle { cursor:ew-resize; }
.editor-note-handle:hover { fill:var(--on-accent); fill-opacity:.5; }
.editor-handle-mark { stroke:var(--on-accent); stroke-width:1.5; pointer-events:none; }
.editor-playhead { stroke:var(--accent-2); stroke-width:3; pointer-events:none; }
.song-timeline.is-dragging { cursor:grabbing; }
.song-timeline.is-dragging .editor-note-body { cursor:grabbing; }
.song-timeline.is-dragging .editor-note.is-preview { opacity:.8; }
.song-timeline.is-invalid { box-shadow:inset 0 0 0 2px var(--danger); }
@media(max-width:800px) { .song-timeline { height:60vh; min-height:350px; } }
@media(min-width:801px) {
  body[data-mode=edit] #siteStudio { height:auto; min-height:0; grid-template-rows:auto auto auto auto auto auto; }
  #siteEditMain .song-timeline { flex:0 0 min(62vh,680px); height:min(62vh,680px); min-height:420px; }
  #siteMode-edit>.site-inspector { max-height:800px; }
  body.site-focus[data-mode=edit] #siteStudio { height:calc(100vh - 24px); grid-template-rows:auto auto auto auto minmax(0,1fr) auto; }
  .site-focus #siteEditMain .song-timeline { flex:1; height:auto; min-height:0; }
}
.song-timeline svg { margin-inline:auto; }
@media(min-width:801px) {
  .site-focus #siteEditMain { padding:12px; }
  .site-focus #siteEditTools { margin-bottom:6px; }
  .site-focus #siteEditMain #songWorkspace { margin-top:0; }
  .site-focus #siteEditMain .site-sheet { display:none; }
  .site-focus #siteEditMain .editor-navigation { margin-bottom:5px; }
  .site-focus .editor-gesture-status { min-height:0; margin-bottom:6px; }
}
/* Credit preview uses the existing kalimba palette in both appearances. */
.site-demo-banner { margin:0; padding:.5rem max(24px,calc((100vw - 1480px)/2)); background:var(--panel-soft); color:var(--ink-soft); border-bottom:1px solid var(--border); font-size:.78rem; }
.site-wallet-link { font-size:.8rem; white-space:nowrap; font-weight:600; }
.site-credit-free { background:var(--panel-soft); border:1px solid var(--border); padding:1.2rem; border-radius:12px; margin-bottom:1rem; }
#creditDialog { width:min(560px,94vw); max-height:88vh; overflow:auto; border:1px solid var(--border); border-radius:14px; padding:1.5rem; color:var(--ink); background:var(--card); }
#creditDialog::backdrop { background:#100c08aa; }
#creditDialog button { display:block; width:100%; margin-top:.7rem; }
.site-credit-demo { color:var(--accent); font-weight:600; font-size:.8rem; }
.site-credit-error { color:var(--danger); }
#creditAccount button { margin:0 .6rem .6rem 0; }
.site-credit-output { padding:.9rem 0; border-bottom:1px solid var(--border); }
.site-credit-output p { margin:.4rem 0; }
.site-credit-output button { margin:.3rem .6rem .3rem 0; }
.site-credit-output small { display:block; color:var(--ink-soft); }
#creditActivity { font-size:.85rem; }
.account-card { padding:1.4rem; margin:1.2rem 0; border:1px solid var(--border); border-radius:14px; background:var(--card); min-width:0; }
.account-card h2 { margin:0 0 .8rem; font-size:1.2rem; }
.account-card h3 { margin:.5rem 0; }
.account-columns { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.account-columns .account-card { margin:0; }
.account-form { display:grid; gap:.85rem; max-width:500px; margin-top:1rem; }
.account-form label { gap:.4rem; }
.account-form label small { font-weight:400; color:var(--ink-soft); }
.account-form input:not([type=checkbox]) { width:100%; min-width:0; }
.account-form .checkbox-row { display:flex; align-items:start; gap:.6rem; }
.account-form .checkbox-row input { flex-shrink:0; margin-top:.3rem; }
.account-form button { justify-self:start; }
.account-form .site-credit-error:empty { display:none; }
.account-card>.actions { margin-block:.8rem; }
.account-card button { margin-right:.4rem; }
.account-verified { color:var(--accent); font-weight:600; }
.account-session,.account-mail { padding:1rem 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.account-session p { font-size:.8rem; color:var(--ink-soft); }
.account-session small,.account-mail small { display:block; color:var(--ink-soft); margin-bottom:.6rem; }
#creditAccountStatus:not(:empty) { border-left:3px solid var(--accent); padding:.7rem 1rem; background:var(--panel-soft); overflow-wrap:anywhere; }
@media(max-width:800px) { .account-columns { grid-template-columns:1fr; } .account-card { padding:1rem; } }
#siteRecoveryDrafts { margin:1rem 0 2rem; padding:1rem; border:1px dashed var(--border); border-radius:12px; }
.site-recovery-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-block:.6rem; }
.site-recovery-row span { overflow-wrap:anywhere; }
.site-focus .site-demo-banner { display:none; }
@media(max-width:800px) { .site-wallet-link { grid-column:2; grid-row:3; justify-self:end; } .site-recovery-row { align-items:start; flex-direction:column; gap:.4rem; } }

/* A full-width footer band keeps support and information separate from the studio. */
.site-footer { width:100%; margin:3rem 0 0; border-top:1px solid var(--border); background:var(--bg-2); color:var(--ink-soft); font-size:.85rem; }
.site-footer-inner,.site-footer-bottom { width:min(1480px,calc(100% - 48px)); margin-inline:auto; }
.site-footer-inner { display:grid; grid-template-columns:minmax(130px,1.3fr) repeat(3,minmax(0,1fr)); gap:2rem; padding-block:2.7rem 2.3rem; }
.site-footer-brand { display:inline-flex; align-items:start; justify-self:start; align-self:start; border-radius:16px; }
.site-footer-brand img { display:block; width:88px; height:88px; object-fit:contain; }
.site-footer-group h2 { margin:0 0 .9rem; color:var(--ink); font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.site-footer-group a { display:block; width:fit-content; margin:.5rem 0; color:var(--ink-soft); text-decoration:none; overflow-wrap:anywhere; }
.site-footer-group a:hover { color:var(--accent); text-decoration:underline; }
.site-footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; padding-block:1rem 1.3rem; border-top:1px solid var(--border); font-size:.72rem; }
.site-reading { max-width:880px; margin-inline:auto; padding-block:.8rem 1.2rem; }
.site-page-intro { color:var(--ink-soft); margin:.7rem 0 2rem; }
.site-reading>details { padding-block:1.2rem; margin:0; }
.site-reading>details>summary { font-size:1rem; }
.site-reading p { max-width:72ch; color:var(--ink-soft); }
.site-info-block { padding-block:1.3rem; border-top:1px solid var(--border); scroll-margin-top:1.5rem; }
.site-info-block h2 { margin-top:0; font-size:1.1rem; }
@media(max-width:600px) {
  .site-brand img { width:128px; height:52px; }
  .site-footer-inner,.site-footer-bottom { width:calc(100% - 28px); }
  .site-footer-inner { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.7rem 1rem; padding-block:2rem; }
  .site-footer-brand { grid-column:1/-1; }
  .site-footer-brand img { width:72px; height:72px; }
  .site-footer-group a { font-size:.8rem; }
  .site-footer-bottom { flex-direction:column; }
}