* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--surface); color:var(--text); font:14px system-ui,sans-serif; -webkit-text-size-adjust:100%; }
#composition-workspace { position:relative; width:100%; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) 48px; }
/* A recessed well in the grey surface, in its own row above the notes. */
.player-bar{max-width:calc(100% - 352px)}
/* 60% of the previous viewport-minus-28px width, centered. */
.player-bar { position:relative; width:calc(60% - 16.8px); margin:8px auto 0; }
/* Opens below the unchanged title/player, rather than a centered menu overlay. */
#landscape-track-library{position:absolute;inset:auto;width:min(420px,86vw);max-height:70dvh;margin:0;border:1px solid var(--border);border-radius:14px;padding:14px 18px;background:var(--surface-raised);color:var(--text);overflow:auto;overscroll-behavior:contain;box-shadow:0 12px 30px var(--shadow)}
#landscape-track-library::backdrop{background:transparent}
.track-library-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}
.track-library-heading h2{margin:0;font:600 20px system-ui}
#landscape-history-list h3{font:500 12px system-ui;color:var(--text-muted);margin:18px 0 6px}
#landscape-history-list button{display:flex;gap:12px;text-align:left;width:100%;height:auto;min-height:52px;padding:10px 8px;border-radius:10px;border:1px solid transparent}
#landscape-history-list button[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-message)}
#landscape-history-list svg{color:var(--accent);flex:none}
#landscape-history-list span{flex:1;min-width:0}#landscape-history-list strong{display:block;font:500 14px/1.4 system-ui;overflow-wrap:anywhere}#landscape-history-list small{display:block;color:var(--text-muted);font:11px/1.5 system-ui}
#landscape-history-status{color:var(--text-muted);font:12px/1.5 system-ui}#landscape-history-status:empty{display:none}
#landscape-history-more{width:auto;padding:0 14px;color:var(--accent);font:500 13px system-ui}
#landscape-history-more[hidden]{display:none}
.stage { position:relative; min-height:0; margin:12px 20px 12px; }
canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
#timeline-playhead{position:absolute;z-index:2;top:calc(var(--timeline-top,26px) - 10px);bottom:0;left:0;width:1.5px;background:var(--playhead);pointer-events:none;transform:translate3d(0,0,0);will-change:transform}
#timeline-playhead::before{content:"";position:absolute;left:-4px;top:0;border-left:4.75px solid transparent;border-right:4.75px solid transparent;border-top:6px solid var(--playhead)}
#timeline-playhead[hidden]{display:none}
#track-end-actions{position:absolute;right:0;top:var(--timeline-top,26px);width:120px;overflow:hidden;pointer-events:none}
#track-end-actions>div{position:absolute;left:0;right:0;display:flex;gap:5px;align-items:center;pointer-events:auto}
#track-end-actions button{width:auto;min-width:0;flex:1;height:38px;font:600 11px system-ui;border-radius:9px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 9%,var(--surface))}
#track-end-actions button[data-action="add"]{color:var(--positive)}
#track-end-actions button[data-action="delete"]{color:var(--danger)}
#track-end-actions>div[hidden]{display:none}
#track-end-actions[hidden]{display:none}
canvas.panning { cursor:grabbing; }
#status { position:absolute; inset:0; display:grid; place-content:center; padding:25px; margin:0; text-align:center; color:var(--text-muted); font-size:14px; line-height:1.6; white-space:pre-line; pointer-events:none; }
#status:empty { display:none; }
#track-instrument-buttons{position:absolute;inset:var(--timeline-top,26px) auto 0 0;width:74px;overflow:hidden;pointer-events:none}
#track-instrument-buttons button{position:absolute;left:0;width:72px;display:flex;justify-content:flex-start;gap:4px;border-radius:6px;font:10px system-ui;pointer-events:auto;text-align:left}
#track-instrument-buttons svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--instrument-tint);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
#track-instrument-buttons span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-heading #title{flex:1;min-width:0;text-align:center}
.prelude-player .player-heading{display:flex;position:absolute;left:56px;right:56px;top:4px;height:22px;padding:0}
@media(max-width:900px){.prelude-player .player-heading{height:30px}}
.prelude-player .player-meta{display:none}
.prelude-player .player-seek{grid-row:2}
.composition-bin svg,.remaster-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#landscape-history-list .composition-menu-row{display:flex;align-items:center;gap:4px}
#landscape-history-list .composition-menu-row>button:first-child{flex:1;min-width:0}
#landscape-history-list .composition-bin{flex:none;width:32px;min-height:32px;height:32px;padding:6px;color:var(--accent)}
#track-instrument-buttons .track-volume{position:absolute;left:0;width:72px;height:26px;display:flex;align-items:center;gap:2px;pointer-events:auto}
#track-instrument-buttons .track-volume[hidden]{display:none}
#track-instrument-buttons .track-volume button{position:static;flex:none;width:22px;height:26px;padding:2px;justify-content:center;color:var(--accent)}
#track-instrument-buttons .track-volume svg{width:16px;height:16px;fill:currentColor;stroke:none}
#track-instrument-buttons .track-volume input{appearance:none;-webkit-appearance:none;width:40px;min-width:0;height:24px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;accent-color:#999;touch-action:pan-y}
#track-instrument-buttons .track-volume input::-webkit-slider-runnable-track{height:1px;background:#777;border:0;border-radius:0;box-shadow:none}
#track-instrument-buttons .track-volume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:5px;height:5px;margin-top:-2px;border:0;border-radius:50%;background:#aaa;box-shadow:none}
#track-instrument-buttons .track-volume input::-moz-range-track{height:1px;background:#777;border:0;border-radius:0}
#track-instrument-buttons .track-volume input::-moz-range-progress{height:1px;background:#777}
#track-instrument-buttons .track-volume input::-moz-range-thumb{width:5px;height:5px;border:0;border-radius:50%;background:#aaa;box-shadow:none}
#remaster-open{position:absolute;right:20px;top:16px;display:flex;flex:none;align-items:center;gap:5px;color:var(--accent);width:auto;height:40px;padding:3px 5px;font:600 11px system-ui}
.remaster-icon{display:block;width:27px;height:27px;padding:5px;border:1px solid currentColor;border-radius:7px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
#remaster-dialog{width:min(650px,calc(100% - 32px));max-height:calc(100% - 24px);padding:18px 22px;border:1px solid var(--accent);border-radius:16px;background:var(--surface);color:var(--text);overflow:auto}
#remaster-dialog::backdrop{background:#0008}
#remaster-dialog h2{margin:0;color:var(--accent);font:600 18px system-ui}
.mix-hint{font:12px/1.4 system-ui;color:var(--text-muted);margin:7px 0 14px}
#remaster-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
#remaster-fields label{display:flex;justify-content:space-between;gap:8px;align-items:center;font:12px/1.3 system-ui;min-height:32px}
#remaster-fields input:not([type="checkbox"]),#remaster-fields select{width:102px;min-width:0;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:6px;background:var(--surface);color:var(--text);padding:6px;font:12px system-ui}
#remaster-fields input[type="checkbox"]{accent-color:var(--accent);width:18px;height:18px}
#remaster-fields input:disabled,#remaster-fields select:disabled{opacity:.4}
#remaster-fields details{grid-column:1/-1;margin-top:8px}
#remaster-fields summary{color:var(--accent);font:600 13px system-ui;padding:10px 0;cursor:pointer}
#remaster-fields fieldset{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:8px;margin:6px 0;padding:10px}
#remaster-fields legend{font:600 12px system-ui;color:var(--accent)}
#remaster-status{font:12px/1.4 system-ui;color:var(--text-muted)}
.remaster-actions{position:sticky;bottom:-18px;background:var(--surface);display:flex;justify-content:flex-end;gap:10px;margin-top:12px;padding:10px 0}
.remaster-actions button{width:85px;height:36px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);font:600 13px system-ui}
#remaster-save{background:var(--accent);color:white}
#add-instrument,#add-event-mode{position:absolute;z-index:3;top:-24px;height:26px;display:flex;justify-content:flex-start;gap:4px;border-radius:7px;background:transparent;color:var(--accent);font:700 10.35px/1.1 system-ui;text-align:left}
#add-instrument{left:-20px;width:72px}
#add-event-mode{left:54px;width:88px}
#add-instrument>span:first-child,#add-event-mode>span:first-child{display:grid;place-items:center;flex:none;width:19.55px;height:19.55px;border:0;border-radius:0;font:700 20.7px/1 system-ui}
#add-instrument>span:last-child,#add-event-mode>span:last-child{min-width:0}
#add-event-mode[aria-pressed="true"]{color:var(--selection);background:color-mix(in srgb,var(--selection) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--selection) 60%,transparent)}
#add-instrument[hidden],#add-event-mode[hidden]{display:none}
canvas.adding-event{cursor:crosshair}
#instrument-gallery{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:20px 26px;border:0;background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain}
#instrument-gallery::backdrop{background:var(--surface)}
.instrument-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#instrument-heading{margin:0;font:650 24px system-ui}
#instrument-hint{color:var(--text-muted);margin:6px 0 14px;font:12px system-ui}
#instrument-close{font:28px system-ui;border:1px solid var(--border)}
#instrument-category-back{display:block;width:auto;height:34px;margin:0 0 14px;padding:0 14px;border:1px solid var(--border);border-radius:999px;color:var(--instrument-tint);font:650 12px system-ui}
#instrument-category-back[hidden],.instrument-search-row[hidden]{display:none}
.instrument-search-row{display:flex;gap:12px;align-items:center}
#instrument-search{width:min(360px,70%);padding:10px 14px;border:1px solid var(--border);border-radius:20px;color:var(--text);background:var(--surface-raised);font:13px system-ui}
#instrument-retry{width:auto;margin:8px 0;padding:0 14px;border-radius:20px;color:var(--accent)}
#instrument-retry[hidden],#track-instrument-buttons button[hidden]{display:none}
#instrument-status{min-height:18px;margin:12px 0;color:var(--text-muted);font:12px system-ui}
#instrument-status:empty{min-height:0;margin:14px 0}
#instrument-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;padding:2px 2px 20px}
#instrument-tiles .instrument-tile{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:auto;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--instrument-tint) 20%,transparent),transparent 72%),var(--surface-raised);color:var(--instrument-tint);padding:12px 10px 46px;transition:border-color .15s,background .15s}
#instrument-tiles .instrument-tile svg{width:80%;height:auto;max-height:110px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 9px color-mix(in srgb,var(--instrument-tint) 25%,transparent))}
#instrument-tiles .instrument-category-tile{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--instrument-tint) 27%,transparent),transparent 70%),var(--surface-raised)}
.instrument-category-tile .instrument-name small{display:block;margin-top:3px;color:var(--text-muted);font:500 10px/1.1 system-ui}
.instrument-tile .instrument-name{position:absolute;bottom:0;left:0;right:0;padding:10px 8px;min-height:44px;display:grid;place-content:center;text-align:center;color:var(--text);background:linear-gradient(transparent,var(--surface-player-bottom));font:600 12px/1.2 system-ui}
#instrument-tiles .instrument-tile[aria-pressed="true"]{border:2px solid var(--instrument-tint);box-shadow:0 0 0 1px color-mix(in srgb,var(--instrument-tint) 25%,transparent)}
.instrument-tile .instrument-check{position:absolute;top:9px;right:10px;font:700 16px system-ui}
#track-delete-dialog{width:min(390px,calc(100vw - 48px));margin:auto;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised);color:var(--text);box-shadow:0 18px 48px var(--shadow)}
#track-delete-dialog::backdrop{background:var(--shadow)}
#track-delete-dialog h2{margin:0 0 10px;font:650 20px/1.25 system-ui}
#track-delete-description{margin:0;color:var(--text-muted);font:13px/1.55 system-ui}
#track-delete-status{min-height:20px;margin:12px 0 0;color:#77737b;font:12px/1.4 system-ui}
.track-delete-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.track-delete-actions button{width:auto;height:40px;padding:0 18px;border:1px solid var(--border);border-radius:10px;font:650 12px system-ui}
#track-delete-confirm{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--surface-raised))}
@media(max-height:430px){#instrument-gallery{padding:14px 24px}#instrument-heading{font-size:20px}#instrument-tiles{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px}}
button { display:grid; place-items:center; flex:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; touch-action:manipulation; }
button:active { background:var(--pressed); }
button:focus-visible,input:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
button:disabled { opacity:.35; cursor:default; }
svg { width:22px; height:22px; fill:currentColor; }
@media(max-width:900px) {
  .player-bar{max-width:calc(100% - 246px)}
}
@media(max-width:650px) {
  .player-bar { width:calc(60% - 9.6px); }
  .stage { margin-inline:14px; }
  #add-instrument { left:-14px; }
  #add-event-mode { left:58px; }
}
@media(max-height:330px) { .player-bar { margin-top:6px; } .stage { margin-top:8px; margin-bottom:8px; } }
#selection-tools { position:absolute; left:74px; right:130px; bottom:0; display:flex; justify-content:center; align-items:center; gap:8px; padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--surface-raised); color:var(--text); }
#selection-tools[hidden] { display:none; }
#selection-tools button { width:auto; height:44px; border-radius:8px; padding:0 12px; background:var(--surface-message); font:600 12px system-ui; }
#selection-mark { color:var(--accent); }
#selection-mark.is-remove { color:var(--danger); }
#selection-count { font:11px system-ui; color:var(--selection); max-width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#finish-open{position:absolute;right:20px;bottom:4px;display:flex;align-items:center;gap:6px;width:auto;height:40px;padding:3px 5px;color:var(--accent);font:600 12px system-ui}
#finish-open .remaster-icon svg{stroke-width:2}
#landscape-record {justify-self:center;align-self:center;color:var(--accent);border:1px solid var(--border);width:42px;height:42px}
#landscape-record.is-recording{color:var(--danger);box-shadow:0 0 14px var(--danger);border-color:var(--danger)}
#landscape-record svg {fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#voice-dialog{width:min(720px,86vw);max-height:85dvh;overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface-raised);color:var(--text);padding:24px}
.vocal-fields,.vocal-actions{display:flex;gap:12px;flex-wrap:wrap}.vocal-fields label{display:grid;gap:5px;font-size:12px}.vocal-fields input{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:10px;width:140px;border-radius:8px}#vocal-takes>div{display:flex;align-items:center;gap:12px;margin-top:12px}#vocal-status{color:var(--accent);min-height:1.5em}#vocal-record{color:var(--danger)}#vocal-save{color:var(--track-vocals)}
#voice-dialog::backdrop{background:var(--shadow)}#voice-dialog h2{margin:0 0 12px;font:600 20px system-ui}#voice-dialog p{line-height:1.5}#voice-dialog button{width:auto;padding:0 20px;border:1px solid var(--border);border-radius:22px}
.working-balls{display:inline-flex;position:relative;width:80px;height:18px;overflow:hidden;color:var(--accent)}.working-balls i{position:absolute;top:6px;width:6px;height:6px;border-radius:50%;background:currentColor;animation:working-travel 1.6s ease-in-out infinite}@keyframes working-travel{0%{transform:translateX(0);opacity:0}15%,75%{opacity:1}100%{transform:translateX(74px);opacity:0}}@media(prefers-reduced-motion:reduce){.working-balls i{animation:none;position:static;margin:3px}}
@media(max-width:650px) { #selection-tools { gap:4px; padding:4px; } #selection-tools button { padding:0 8px; font-size:11px; } #selection-count { font-size:10px; } }