:root { color-scheme: light dark; --bg:light-dark(#f4f4ef,#141c19); --panel:light-dark(#fff,#202b26); --ink:light-dark(#1b3027,#e9f2ec); --muted:light-dark(#52655c,#a7baad); --line:light-dark(#d6e0d9,#405449); --brand:light-dark(#245e44,#a0d6b8); --on-brand:light-dark(#fff,#152d21); --soft:light-dark(#e6efe8,#2c4134); --danger:light-dark(#9f2828,#ffa5a5); }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--ink); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; background:var(--brand); color:var(--on-brand); border:1px solid var(--brand); padding:11px 17px; min-height:44px; border-radius:8px; font-weight:600; }
button.secondary { background:var(--panel); border-color:var(--line); color:var(--ink); }
button:disabled { opacity:.5; cursor:default; }
:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
a { color:var(--brand); }
.app-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px max(24px,calc((100% - 1200px)/2)); background:var(--panel); border-bottom:1px solid var(--line); }
.app-header>span { font-size:13px; color:var(--muted); }
.brand { font-size:22px; font-weight:700; letter-spacing:-.7px; text-decoration:none; display:flex; gap:10px; align-items:center; }
.brand-dot { width:24px; height:24px; border:7px solid var(--brand); border-radius:50%; }
.app-main { max-width:1250px; margin:auto; padding:32px 24px; }
.app-footer { text-align:center; color:var(--muted); font-size:12px; padding:20px; }
h1 { font-size:34px; margin:5px 0; line-height:1.2; letter-spacing:-1px; }
h2 { font-size:20px; margin:0 0 18px; }
h3 { font-size:18px; margin:14px 0 6px; }
p { margin:8px 0 16px; }
.eyebrow { text-transform:uppercase; letter-spacing:1.5px; font-size:11px; color:var(--muted); }
.page-heading,.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.page-heading { margin-bottom:24px; }
.page-heading p { color:var(--muted); }
.badge { display:inline-block; background:var(--soft); color:var(--brand); padding:5px 10px; border-radius:6px; font-size:12px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.set-panel,.play-panel { padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:14px; min-width:0; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
label { display:block; color:var(--muted); font-size:13px; min-width:0; }
input:not([type=checkbox]),select,textarea { display:block; width:100%; padding:10px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); margin:5px 0 12px; min-width:0; }
textarea { font:13px/1.5 ui-monospace,Consolas,monospace; resize:vertical; }
.form-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.form-row>label { flex:1; min-width:120px; }
.file-label { margin:16px 0; }
input[type=file] { padding:7px; font-size:13px; }
.check { display:flex; align-items:center; gap:8px; min-height:44px; }
input[type=checkbox] { accent-color:var(--brand); width:18px; height:18px; }
.volume-control { display:flex; justify-content:space-between; margin-top:8px; }
input[type=range] { accent-color:var(--brand); padding:0; min-height:28px; border:0; }
details { margin:14px 0; }
summary { cursor:pointer; color:var(--brand); min-height:32px; }
.hint { font-size:12px; color:var(--muted); }
#load-status,#play-status { font-size:13px; }
#errors { border-left:3px solid var(--danger); padding:12px; color:var(--danger); background:var(--bg); overflow-wrap:anywhere; }
#errors ul { padding-left:18px; margin:0; }
.entries { list-style:none; padding:0; margin:12px 0; }
.entries li { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--line); border-left:3px solid transparent; }
.entries li.active { background:var(--soft); border-left-color:var(--brand); }
.entry-name { display:block; overflow-wrap:anywhere; }
.entries .tempo { font-size:19px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.entries .tempo small { display:block; font-size:10px; text-align:right; color:var(--muted); }
#play-display { text-align:center; border-top:1px solid var(--line); padding-top:18px; }
#current-entry { font-size:23px; overflow-wrap:anywhere; }
#current-meta { color:var(--muted); font-size:13px; }
.pulse { width:min(260px,65vw); aspect-ratio:1; border-radius:50%; background:var(--soft); color:var(--brand); display:flex; flex-direction:column; justify-content:center; align-items:center; margin:24px auto; }
.pulse[data-lit=true] { background:var(--brand); color:var(--on-brand); }
.pulse[data-strength=medium][data-lit=true] { opacity:.85; }
.pulse[data-strength=normal][data-lit=true] { opacity:.72; }
.pulse[data-strength=subdivision][data-lit=true] { opacity:.5; }
#pulse-number { font-size:64px; line-height:1.2; font-variant-numeric:tabular-nums; }
#pulse-caption { font-size:12px; }
.transport { display:flex; gap:10px; }
.transport button { flex:1; }
.diagnostics { font-size:12px; overflow-wrap:anywhere; }
.focus-mode .set-panel,.focus-mode .page-heading,.focus-mode #rehearsal-controls,.focus-mode .diagnostics { display:none; }
.focus-mode .workspace { display:block; }
.focus-mode .play-panel { max-width:900px; margin:auto; }
.focus-mode .pulse { width:min(430px,65vw); }
.focus-mode #pulse-number { font-size:clamp(64px,12vw,110px); }
[hidden] { display:none!important; }
@media(max-width:800px) { .workspace { grid-template-columns:1fr; } .app-main { padding:24px 14px; } .set-panel,.play-panel { padding:18px; } h1 { font-size:28px; } .app-header { padding:16px; } .app-header>span { display:none; } }
@media(pointer:coarse) { textarea,input,select { font-size:16px!important; } }
/* Library and set workspace */
[hidden] { display:none !important; }
.button-link { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border-radius:8px; background:var(--brand); color:var(--on-brand); text-decoration:none; font-weight:600; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:18px; }
.set-card,.editor-panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; min-width:0; }
.set-card h2 { margin:10px 0; overflow-wrap:anywhere; }
.notice { padding:18px; border:1px solid var(--brand); border-radius:10px; margin:16px 0; background:var(--soft); }
.notice h2 { margin-bottom:10px; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr); gap:24px; align-items:start; }
.editor-rehearsal { min-width:0; position:sticky; top:12px; }
.editor-rehearsal .workspace { display:block; }
.editor-rehearsal .set-panel { display:none; }
.entry-card { padding:16px; margin:18px 0; border:1px solid var(--line); border-radius:10px; min-width:0; }
.entry-card legend { font-weight:700; padding:0 6px; }
.entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.editor-actions { margin-top:18px; }
#editor-form [role=alert]:not(:empty) { border-left:3px solid var(--danger); padding:12px; color:var(--danger); }
#save-status { font-weight:600; }
.focus-mode .editor-panel,.focus-mode #editor-root>.page-heading,.focus-mode #save-actions,.focus-mode #draft-recovery,.focus-mode #server-update { display:none; }
.focus-mode .editor-layout { display:block; }
@media(max-width:800px) { .editor-layout { display:flex; flex-direction:column; } .editor-panel,.editor-rehearsal { width:100%; } .editor-rehearsal { position:static; } .app-header { flex-wrap:wrap; } }
@media(max-width:420px) { .entry-grid { grid-template-columns:1fr; } .editor-panel { padding:14px; } .entry-card { padding:12px; } }

.entry-header { display:flex; flex-direction:column; gap:8px; }
.entry-toggle { text-align:left; width:100%; border:0!important; padding:4px; }
.entry-toggle>span { display:block; overflow-wrap:anywhere; }
.entry-toggle>span:first-child::before { content:'▸ '; }
.entry-toggle[aria-expanded=true]>span:first-child::before { content:'▾ '; }
.entry-moves { display:flex; gap:6px; flex-wrap:wrap; }
.entry-moves button { padding:7px 10px; font-size:13px; }
.entry-drag { cursor:grab!important; }
.entry-body { padding-top:16px; }
.entry-card.drop-target { outline:3px solid var(--brand); background:var(--soft); }

.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; padding:10px; }

/* Device-local themes share the same contrast and pulse semantics. */
:root[data-theme=light] { color-scheme:light; }
:root[data-theme=dark] { color-scheme:dark; }
:root[data-theme=ocean] { color-scheme:light; --bg:#edf4f8; --panel:#fff; --ink:#183343; --muted:#476171; --line:#c4d7e1; --brand:#155d7b; --on-brand:#fff; --soft:#deedf4; --danger:#9f2828; }
:root[data-theme=heather] { color-scheme:dark; --bg:#211c29; --panel:#302838; --ink:#f4edf7; --muted:#c5b5ce; --line:#63536d; --brand:#d8b5ef; --on-brand:#302039; --soft:#44324e; --danger:#ffb4b4; }
.app-header { flex-wrap:wrap; }
.theme-choice { display:flex; align-items:center; gap:8px; }
.theme-choice select { width:auto; min-height:44px; margin:0; }
.theme-status { margin:8px 24px; }
.theme-status:empty { display:none; }

.site-menu { position:relative; margin:0; }
.site-menu>summary { display:flex; align-items:center; justify-content:center; width:44px; height:44px; list-style:none; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.site-menu>summary::-webkit-details-marker { display:none; }
.site-menu[open]>summary { background:var(--soft); }
.site-menu-panel { position:absolute; right:0; top:calc(100% + 10px); width:min(280px,calc(100vw - 32px)); z-index:20; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 28px #0003; }
.site-menu-panel>a { display:block; padding:12px 10px; border-radius:6px; text-decoration:none; }
.site-menu-panel>a:hover { background:var(--soft); }
.site-menu-panel .theme-choice { justify-content:space-between; padding:4px 10px 14px; border-bottom:1px solid var(--line); margin-bottom:6px; }
#theme-status:empty { display:none; }

.card-action { min-height:44px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--panel); text-decoration:none; }
.card-action:hover { background:var(--soft); }

#editor-form .validation-summary-valid:not(:has(p)) { display:none; }