/* The same material hierarchy in daylight and after dark. */
:root{
  color-scheme:light;
  --bg:#f7f8fa;--paper:#fff;--ink:#22252b;--muted:#626a76;--line:#d8dde5;
  --surface:#f6f6f8;--surface-hover:#eeeeF2;--selected:#eeeef2;--border-strong:#7a7a88;
  --glass:rgba(249,249,252,.85);--nav-glass:rgba(230,230,237,.8);--glass-edge:rgba(255,255,255,.9);
  --control:#25252a;--control-ink:#fff;--focus:#245edb;--accent:#245edb;--accent-soft:#e8efff;
  --shadow:0 8px 28px #22222c06;--teal:var(--control);--teal-dark:var(--control);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei UI",sans-serif;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#14161a;--paper:#202329;--ink:#f2f4f8;--muted:#b6becb;--line:#3d444f;
  --surface:#26262c;--surface-hover:#32323a;--selected:#36363f;--border-strong:#9999a6;
  --glass:rgba(30,30,35,.9);--nav-glass:rgba(45,45,53,.85);--glass-edge:rgba(255,255,255,.13);
  --control:#eeeef2;--control-ink:#222227;--focus:#92baff;--accent:#92baff;--accent-soft:#26364e;
  --shadow:0 12px 36px #00000012;
}
body{color:var(--ink);background:var(--bg);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;letter-spacing:0}
button,input,textarea,select{font-family:var(--font);letter-spacing:0}
h1,h2,h3{color:inherit}::selection{background:var(--selected);color:var(--ink)}
.topbar{background:var(--glass);border-color:var(--glass-edge);box-shadow:0 1px 0 var(--line)}
.brand,.membership,.icon-button{color:var(--ink)}
.brand-mark{background:none;color:var(--ink);box-shadow:none;width:30px;border-radius:0}
.brand-mark svg{color:var(--ink)}
.topbar-actions{gap:18px}.preview-badge{display:none}
.header-divider,.aside-rule{background:var(--line)}
.membership{border:0;background:transparent;padding:4px;font-size:16px;gap:10px}
.membership small{display:none}.membership .avatar{display:none}.chevron{font-size:16px;color:var(--muted)}
.membership-label{display:inline!important}
.help-button,.appearance-toggle{width:42px;height:42px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.icon-button:hover,.appearance-toggle:hover{background:var(--surface-hover)}
.appearance{position:relative}
.appearance-toggle{width:auto;display:flex;align-items:center;gap:8px;padding:0 13px;border-radius:24px;font-size:15px;cursor:pointer}
.appearance-toggle svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none}
.appearance-menu{position:absolute;right:0;top:52px;width:248px;padding:10px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:0 15px 50px #0003;backdrop-filter:blur(32px);z-index:100}
.appearance-menu p{font-size:14px;font-weight:600;color:var(--muted);padding:7px 12px}
.appearance-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;color:var(--ink);padding:11px 12px;border:0;border-radius:11px;text-align:left;font-size:16px}
.appearance-menu button:hover,.appearance-menu button[aria-checked=true]{background:var(--selected)}
.appearance-check{visibility:hidden}.appearance-menu [aria-checked=true] .appearance-check{visibility:visible}
.appearance-menu small{display:block;padding:11px 12px 7px;font-size:13px;line-height:1.6;color:var(--muted)}
.welcome-row h1{font-size:42px;font-weight:600;letter-spacing:-1px}
.welcome-note{font-size:18px;line-height:1.7;color:var(--muted)}
.workspace-label,.homepage-link,.home-nav{font-size:15px;color:var(--muted)}
.workspace-nav{background:var(--nav-glass);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-edge),0 8px 26px #00000005}
.tabs button{color:var(--muted);font-size:17px;min-width:155px}
.tabs button:hover{color:var(--ink);background:var(--surface-hover)}
.tabs button[aria-selected=true]{color:var(--ink);background:var(--paper);box-shadow:0 2px 8px #00000010}
.work-card{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow);min-height:800px}
.main-column{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;overflow-anchor:none}
.tab-panel{grid-column:1;grid-row:1;min-width:0}
.tab-panel[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.task-dock{grid-column:1;grid-row:2}
.history-list{max-height:510px;overflow-y:auto;scrollbar-gutter:stable}
.panel-heading h2{font-size:30px;letter-spacing:-.5px}
.panel-heading p{font-size:17px;color:var(--muted);line-height:1.8;max-width:100%}
.subtle-chip{font-size:13px;color:var(--muted);background:var(--surface);white-space:nowrap}
.dropzone{background:var(--surface);border:1px dashed var(--border-strong);min-height:225px}
.dropzone:hover,.dropzone.is-dragging,.dropzone:focus-within{background:var(--surface-hover);border-color:var(--ink)}
.upload-emblem{color:var(--ink);background:var(--paper);border-color:var(--line);box-shadow:0 4px 12px #00000006}
.dropzone h3{font-size:24px;font-weight:550}.dropzone p{font-size:17px;color:var(--muted)}
.inline-emphasis,.text-button{color:var(--ink)}
.file-requirements,.upload-under,.upload-under .text-button{font-size:14px;color:var(--muted)}
.text-button:hover{color:var(--accent)}
input,select,textarea,.field input,.lyrics-grid textarea{font-size:17px;background:var(--surface);color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:focus,textarea:focus,select:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px var(--selected)}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.field label,.upload-modes legend,.format-field legend{font-size:17px;font-weight:550;color:var(--ink)}
.field label>span{font-size:14px;color:var(--muted)}
.upload-mode,.format-option{background:var(--surface);border-color:var(--line)}
.upload-mode:has(input:checked),.format-option:has(input:checked){background:var(--selected);border-color:var(--border-strong);box-shadow:none}
.upload-mode:has(input:focus-visible),.format-option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.mode-title strong{font-size:18px;font-weight:550}.mode-title em{color:var(--accent);background:var(--accent-soft);font-size:12px}
.upload-mode>span:last-child{color:var(--muted);font-size:15px;line-height:1.75}
.radio-mark{border-color:var(--border-strong);background:transparent}
.upload-mode:has(input:checked) .radio-mark,.format-option:has(input:checked) .radio-mark{border:5px solid var(--ink)}
.mode-note{font-size:14px;color:var(--muted)}
.button{font-size:17px;font-weight:550;min-height:50px}
.button.primary,.button.primary:hover:not(:disabled){background:var(--control);color:var(--control-ink);border-color:var(--control);box-shadow:inset 0 1px 0 #ffffff26,0 3px 10px #0001}
.button.primary:hover:not(:disabled){filter:brightness(1.15)}
.button.secondary{color:var(--ink);background:var(--surface);border-color:var(--line)}
.button.secondary:hover{background:var(--surface-hover)}
.panel-actions>span,.form-error{font-size:14px}.panel-actions>span{color:var(--muted)}
.form-error{color:#a13c28}:root[data-theme=dark] .form-error{color:#ffb39d}
.selected-icon{background:var(--selected);color:var(--ink)}.selected-change{color:var(--muted);font-size:14px}
.audio-preview{background:var(--surface);padding:12px 14px}.audio-preview audio{height:40px}
.field-caption,.field-caption .text-button,.info-note{font-size:15px;color:var(--muted)}
.input-with-icon>svg{color:var(--muted)}.input-with-icon input{font-size:17px}
.file-format{font-size:28px;color:var(--ink)}.format-option strong{font-size:17px;color:var(--ink)}
.format-option>span:not(.format-top){font-size:15px;color:var(--muted)}
.download-bottom strong{font-size:17px;color:var(--ink)}.download-bottom p{font-size:15px;color:var(--muted)}
.line-number{color:var(--accent)}
.aside-title h2,.help-card h2{font-size:18px}.service-row,.service-row strong{font-size:15px;color:var(--muted)}.service-row strong{color:var(--ink)}
.aside-note,.preview-controls,.preview-controls label,.help-card p,.help-card .text-button{font-size:14px;color:var(--muted)}
.preview-controls select{color:var(--ink);font-size:15px}.help-card{border-color:var(--line)}
.help-icon{color:var(--ink);background:var(--surface)}.help-card .text-button{color:var(--ink)}
.status-dot,.tab-activity,.studio-footer i{background:var(--accent)}
.task-dock,.task-dock[data-status=failed],.task-dock[data-status=waiting]{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow);backdrop-filter:none}
.dock-label h2{font-size:16px}.dock-tag{font-size:13px;color:var(--muted);background:var(--surface)}
.dock-top>span{font-size:15px;color:var(--ink)}.dock-description strong{font-size:17px;font-weight:500}
.dock-description>span,.dock-bottom>span,.dock-bottom button{font-size:14px;color:var(--muted)}
.dock-bottom button{color:var(--ink)}.progress-track{background:var(--surface-hover);height:5px}.progress-track>span{background:var(--accent)}
.history-table-head,.history-item p,.history-state,.history-footer{font-size:14px;color:var(--muted)}
.history-item h3{font-size:17px}.history-item-actions button{font-size:15px;color:var(--ink)}
.history-cover,.history-cover.download{background:var(--surface);color:var(--muted)}
.empty-history{color:var(--muted);font-size:16px}
.lyrics-toolbar label,.lyrics-toolbar select{font-size:16px;color:var(--ink)}.lyrics-privacy{font-size:14px;color:var(--muted)}
.studio-footer{font-size:13px;color:var(--muted);border-color:var(--line)}
.app-dialog{color:var(--ink);background:var(--glass);border-color:var(--glass-edge)}
.app-dialog h2{font-size:29px}.app-dialog p,.app-dialog details{color:var(--muted);font-size:16px;border-color:var(--line)}
.app-dialog summary{color:var(--ink)}.toast{background:var(--control);color:var(--control-ink);font-size:15px}
/* A listening sleeve: the record moves only when the selected audio plays. */
.studio-art{border:1px solid #ffffff16;border-radius:26px;min-height:440px;background:linear-gradient(145deg,#323239,#17171a);padding:25px;color:#fafafa;box-shadow:0 15px 35px #00000016}
.art-top{color:#c6c6ce;font-size:12px;letter-spacing:1.2px;display:flex;justify-content:space-between;align-items:center}
.art-top svg{height:19px;width:19px}.record-sleeve{background:linear-gradient(125deg,#efe7dc,#c9bcb0);border:1px solid #fff5}
.record-sleeve small{color:#4d4847;font-size:10px;font-weight:500}
.vinyl-label{background:#b58b72}.vinyl-label svg{display:none}
.vinyl-label::before{content:'SUMO';position:absolute;top:10px;left:0;right:0;text-align:center;font:700 10px/1 var(--font);letter-spacing:1px;color:#352c27}
.vinyl-label::after{left:50%;top:50%;transform:translate(-50%,-50%);background:#1e1e22}
.sidebar .vinyl{animation:vinyl-turn 12s linear infinite;animation-play-state:paused;transform-origin:50% 50%}
.studio-art.is-playing .vinyl{animation-play-state:running}
@keyframes vinyl-turn{to{transform:rotate(360deg)}}
.home-page .landing-art .vinyl{animation:vinyl-turn 18s linear infinite;transform-origin:center}
@media(prefers-reduced-motion:reduce){.home-page .landing-art .vinyl{animation:none}}
.record-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:15px}
.record-caption>div{min-width:0}.record-caption h2{font-size:21px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550;letter-spacing:0}
.record-caption p{font-size:14px;color:#c4c4ce;margin-top:4px}
.record-play{border:1px solid #ffffff38;background:#ffffff14;color:#fff;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;cursor:pointer}
.record-play:hover{background:#ffffff28}.record-play:disabled{opacity:.5;cursor:default}.record-play svg{width:19px;height:19px;fill:currentColor;stroke:none}
.record-wave{height:42px;width:100%;display:block;margin-top:21px;color:#c4c4ce;cursor:pointer}
.record-ruler{display:flex;justify-content:space-between;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.4px;color:#c4c4ce;border-top:1px solid #ffffff2b;padding-top:7px;margin-top:2px}
.record-meta{font-size:11px;letter-spacing:1px;color:#c4c4ce;margin-top:18px;display:flex;justify-content:space-between}
.landing-copy .eyebrow,.eyebrow{font-size:14px;color:var(--muted)}
.landing-copy h1 em{color:var(--muted)}.landing-copy>p:not(.eyebrow){font-size:20px;color:var(--muted)}
.landing-preview-note{color:var(--muted)!important;font-size:14px!important}.landing-actions>a:last-child{color:var(--ink)}
.home-format-strip,.home-format-strip span:first-child{font-size:14px;color:var(--muted)}
.landing-art{background:var(--surface);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-edge)}
.landing-art-top,.landing-art-bottom{color:var(--muted)}.landing-art-top{font-size:13px}
.landing-art .vinyl-label::before{font-size:13px;top:15px}.landing-art .vinyl-label::after{top:50%;left:50%}
.home-section,.home-faq details{border-color:var(--line)}
.feature-card{background:var(--paper);border-color:var(--line)}.feature-card p,.feature-card a,.section-heading-row>p,.home-faq details p{color:var(--muted)}
.feature-card a{color:var(--ink)}.feature-card p{font-size:17px}.home-faq details p{font-size:16px}
@media(max-width:1200px){.tabs button{min-width:140px}.upload-mode>span:last-child{font-size:15px}.work-card{min-height:825px}.record-caption h2{font-size:19px}}
@media(max-width:950px){.topbar-actions{gap:14px}.work-card{min-height:820px}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start;margin-top:6px}.studio-art{grid-row:span 2;min-height:430px}.help-card{padding-top:20px}.welcome-row h1{font-size:38px}}
@media(max-width:600px){
 .topbar-inner{padding:0 18px}.topbar-actions{gap:9px}.brand{font-size:24px}.brand-mark{width:34px;height:34px}
 .membership{font-size:14px;padding:0}.membership .chevron{display:none}.appearance-toggle{width:38px;height:38px;padding:8px}.appearance-toggle>span{display:none}
 .help-button{display:grid;width:38px;height:38px}.appearance-menu{right:-46px;top:48px}
 .studio-shell{padding:28px 17px 0}.welcome-row h1{font-size:33px}.welcome-note{font-size:17px}
 .workspace-nav{top:78px}.tabs{gap:2px}.tabs button{min-width:0;min-height:47px;padding:9px 4px;font-size:15px}.tabs svg{display:none}
 .work-card{padding:25px 22px 20px;min-height:870px}.panel-heading h2{font-size:28px}.panel-heading p{font-size:16px;line-height:1.75}
 .dropzone{padding:23px 13px;min-height:230px}.dropzone h3{font-size:22px}.dropzone p{font-size:16px}
 .file-requirements{font-size:14px}.upload-under{align-items:center;gap:8px}.upload-under>span{display:none}.upload-under .text-button{font-size:14px;max-width:none}
 .field label,.upload-modes legend,.format-field legend{font-size:17px}.field input,.field input::placeholder{font-size:16px}
 .upload-mode-options{grid-template-columns:1fr;gap:11px}.upload-mode{padding:15px 17px;gap:6px}.mode-title strong{font-size:17px}.mode-title em{display:inline;font-size:12px}
 .upload-mode>span:last-child{font-size:14px}.mode-note,.panel-actions>span{font-size:14px}.button{font-size:16px}
 .task-dock{padding:21px;min-height:196px}.dock-label h2{font-size:16px}.dock-tag{font-size:12px}.dock-top>span{font-size:14px}
 .dock-description strong{font-size:17px}.dock-description>span,.dock-bottom>span,.dock-bottom button{font-size:14px}
 .dock-bottom{flex-wrap:wrap;gap:9px}.dock-bottom>span{max-width:100%}
 .field-caption{flex-direction:column;align-items:flex-start;gap:7px}.field-caption,.field-caption .text-button,.info-note{font-size:14px}
 .format-option{padding:18px 14px}.format-option strong{font-size:16px}.format-option>span:not(.format-top){font-size:14px}
 .download-bottom strong{font-size:16px}.download-bottom p{font-size:15px}
 .history-item h3{font-size:17px}.history-item p,.history-item-actions button,.history-state,.history-footer{font-size:14px}
 .lyrics-toolbar label,.lyrics-toolbar select{font-size:16px}.lyrics-privacy{font-size:14px}.lyrics-grid textarea{font-size:17px}
 .sidebar{grid-template-columns:1fr;margin-top:0}.studio-art{grid-row:auto;max-width:none;min-height:0;padding:26px}.sidebar .record-composition{height:220px;max-width:290px;margin:18px auto}
 .sidebar .vinyl{width:207px;height:207px;right:0;top:0}.sidebar .record-sleeve{width:168px;height:179px;top:26px}
 .record-caption h2{font-size:23px}.aside-card{padding:0 5px}.help-card{display:none}.studio-footer{font-size:13px;line-height:1.8}
 .app-dialog p,.app-dialog details{font-size:16px}.home-page .membership{display:none}.home-page .topbar-actions{gap:10px}
 .landing-copy>p:not(.eyebrow){font-size:18px}.landing-copy .eyebrow{font-size:13px}.feature-card p{font-size:17px}
}
@media(max-width:360px){.topbar-inner{padding:0 13px}.brand{font-size:22px;gap:7px}.brand-mark{width:30px;height:30px}.topbar-actions{gap:7px}.help-button{display:none}.tabs button{font-size:14px}.work-card{padding:23px 18px}.welcome-row h1{font-size:29px}.welcome-note{font-size:16px}.format-options{grid-template-columns:1fr}.format-option{min-height:150px}.home-page .topbar-actions .button{font-size:12px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){.sidebar .vinyl{animation:none}*,*::before,*::after{scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){.topbar,.workspace-nav,.appearance-menu,.app-dialog{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Put a record on, then choose how to send it. Reveal only the next useful step. */
#panel-upload:not(.has-file) .after-file{display:none}
.work-card{min-height:650px}
.lyrics-grid textarea{height:240px}
.history-list{max-height:405px}
#panel-upload:not(.has-file) .dropzone{min-height:350px}
#panel-upload:not(.has-file) .upload-emblem{width:84px;height:84px;border:1px solid #55545b;border-radius:50%;background:repeating-radial-gradient(circle,#17171a 0 2px,#333338 2.5px,#161619 3.5px);color:#fff;position:relative;box-shadow:0 8px 16px #0002;transition:transform .2s}
#panel-upload:not(.has-file) .upload-emblem::before{content:'';position:absolute;inset:26px;background:#a77659;border-radius:50%}
#panel-upload:not(.has-file) .upload-emblem svg{position:relative;width:20px;height:20px;stroke-width:1.8}
#panel-upload:not(.has-file) .dropzone:hover .upload-emblem{transform:translateY(-4px)}
#panel-upload:not(.has-file) .upload-under{justify-content:center;margin-top:22px}
.upload-under>span{display:none}
.audio-preview{gap:13px;min-height:60px;margin:0 0 21px}
.audio-preview audio{display:none}
.inline-play{display:flex;gap:9px;align-items:center;padding:7px 3px;font-size:15px;white-space:nowrap;color:var(--ink);min-height:40px}
.audio-seek{flex:1;min-width:0;min-height:30px;height:30px;padding:0;accent-color:var(--accent);border:0;background:none;box-shadow:none}
#inlineTime{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.preview-notice{padding:0 6px;color:var(--muted);font-size:14px;line-height:1.8}
.preview-notice .preview-controls{font-size:13px;margin-top:8px}
.quick-help{padding-left:22px;font-size:16px;line-height:1.9;color:var(--ink)}.quick-help li{margin:13px 0}
.studio-art.has-track .record-sleeve{transform:translateX(-7px) rotate(-10deg)}
.record-sleeve{transition:transform .4s ease}
@keyframes vinyl-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:950px){.sidebar{grid-template-columns:1fr 1fr}.work-card{min-height:680px}}
@media(max-width:600px){
 .welcome-row h1{font-size:31px}.welcome-note{font-size:16px}
 .work-card{min-height:700px}#panel-upload:not(.has-file) .dropzone{min-height:305px}
 .lyrics-grid textarea{height:170px}.history-list{max-height:380px}
 .sidebar{grid-template-columns:1fr}.inline-play{font-size:14px;gap:6px}.audio-preview{padding:10px;gap:9px}
 .preview-notice{font-size:14px}.preview-notice .preview-controls{font-size:13px}
}

/* A focused audio workbench: one source, one player, one next action. */
:root{--wave-rest:#9b9ba7}:root[data-theme=dark]{--wave-rest:#9292a2}
.focused-studio .studio-shell{max-width:1168px;padding-top:32px}
.focused-studio .welcome-row{margin-bottom:23px}
.focused-studio .welcome-row h1{font-size:32px;letter-spacing:-.7px}
.focused-studio .welcome-note{font-size:16px;margin-top:6px}
.focused-studio .work-grid{grid-template-columns:minmax(0,1fr)}
.focused-studio .work-card{min-height:635px;padding:30px 34px 26px;border-radius:22px}
.focused-studio .panel-heading h2{font-size:27px}.focused-studio .panel-heading p{font-size:16px}
.focused-studio .subtle-chip{display:none}
.focused-studio .workspace-nav{border-radius:18px;margin-bottom:23px;top:88px;padding:5px;overflow:hidden}
.focused-studio .tabs button:focus-visible{outline-offset:-3px}
.focused-studio .tabs{position:relative;isolation:isolate;gap:3px}
.focused-studio .tabs::before{content:'';position:absolute;left:0;top:0;width:var(--tab-width,155px);height:100%;transform:translateX(var(--tab-x,0px));background:var(--paper);border-radius:13px;box-shadow:0 2px 8px #00000010;transition:transform .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1);z-index:-1}
.focused-studio .tabs button{border-radius:13px;min-height:45px;font-size:16px;min-width:148px}
.focused-studio .tabs button[aria-selected=true]{background:transparent;box-shadow:none}
.focused-studio .tabs button:hover{background:transparent;color:var(--ink)}
.focused-studio #panel-upload:not(.has-file) .dropzone{min-height:338px;transition:background .15s,border-color .15s}
.focused-studio #panel-upload:not(.has-file) .upload-emblem{height:62px;width:62px;border-radius:17px;background:var(--paper);border:1px solid var(--line);box-shadow:0 4px 14px #00000006;color:var(--ink)}
.focused-studio #panel-upload:not(.has-file) .upload-emblem::before{display:none}
.focused-studio #panel-upload:not(.has-file) .upload-emblem svg{width:27px;height:27px}
.focused-studio .dropzone.is-dragging{border:2px dashed var(--accent);background:var(--accent-soft)}
.focused-studio .has-file .dropzone{min-height:118px;padding:24px;border-style:solid;border-color:var(--line);border-radius:17px 17px 0 0;text-align:left;overflow:visible}
.focused-studio .has-file #audioFile{width:1px;height:1px;inset:auto;clip-path:inset(50%);pointer-events:none}
.focused-studio .has-file #dropSelected{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;width:100%;column-gap:17px;align-items:center}
.focused-studio .has-file .selected-icon{grid-row:1/3;width:51px;height:51px;margin:0;border-radius:13px;color:var(--accent);background:var(--accent-soft)}
.focused-studio .has-file #selectedName{grid-column:2;grid-row:1;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.focused-studio .has-file #selectedMeta{grid-column:2;grid-row:2;font-size:14px;margin-top:3px;color:var(--muted)}
.focused-studio .has-file .selected-change{grid-column:3;grid-row:1/3;margin:0;position:relative;z-index:3;padding:8px 0;font-size:14px;color:var(--ink)}
.focused-studio .has-file .upload-under{display:none}
.focused-studio .audio-preview{margin:-1px 0 25px;min-height:90px;border:1px solid var(--line);border-top:0;border-radius:0 0 17px 17px;padding:12px 24px;background:var(--surface);gap:20px}
.focused-studio .inline-play{font-size:16px;gap:9px;min-width:66px;min-height:44px}
.focused-studio .waveform-control{flex:1;min-width:0;position:relative;height:51px;cursor:pointer}
.focused-studio .record-wave{height:51px;margin:0;cursor:pointer}
.focused-studio .audio-seek{position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:0;margin:0;cursor:pointer}
.focused-studio .waveform-control:focus-within{outline:2px solid var(--focus);outline-offset:5px;border-radius:4px}
.focused-studio .audio-times{font:14px var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.focused-studio .audio-times #inlineTime{color:var(--ink)}
.focused-studio .audio-preview .icon-button{width:32px;height:36px}
.focused-studio .button:active:not(:disabled),.focused-studio .inline-play:active{transform:scale(.975)}
.focused-studio .button{transition:background .15s,box-shadow .15s,transform .12s}
.focused-studio .upload-mode-options{gap:16px}.focused-studio .upload-mode{padding:15px 19px}
.focused-studio .upload-modes{margin-top:23px;margin-bottom:24px}
.focused-studio .upload-mode>span:last-child{font-size:15px}
.focused-studio .mode-title strong{font-size:17px}
.focused-studio .task-dock{margin-top:18px;border-radius:18px}
.focused-studio .demo-options{position:relative}
.focused-studio .demo-options summary{cursor:pointer;list-style:none}
.focused-studio .demo-options[open]{display:grid;gap:10px}
.focused-studio .demo-options select{height:40px;font-size:14px}
.focused-studio .studio-footer{margin-top:24px;padding:18px 0 24px}
@media(max-width:950px){.focused-studio .work-card{min-height:660px}.focused-studio .dock-description{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){
 .focused-studio .studio-shell{padding:24px 17px 0}.focused-studio .welcome-row h1{font-size:28px}.focused-studio .welcome-note{font-size:15px}
 .focused-studio .workspace-nav{top:78px;border-radius:16px}.focused-studio .tabs button{min-width:0;font-size:15px;padding:9px 5px}
 .focused-studio .work-card{padding:24px 21px;min-height:700px;border-radius:19px}
 .focused-studio .panel-heading h2{font-size:25px}.focused-studio .panel-heading p{font-size:15px}
 .focused-studio #panel-upload:not(.has-file) .dropzone{min-height:295px}
 .focused-studio .has-file .dropzone{padding:17px;min-height:118px}
 .focused-studio .has-file #dropSelected{grid-template-columns:40px minmax(0,1fr);gap:0 11px}
 .focused-studio .has-file .selected-icon{width:39px;height:45px;grid-row:1/3}
 .focused-studio .has-file #selectedName{font-size:17px}.focused-studio .has-file #selectedMeta{font-size:13px}
 .focused-studio .has-file .selected-change{grid-row:3;grid-column:2;font-size:14px;justify-self:start;padding:8px 0 0}
 .focused-studio .audio-preview{flex-wrap:wrap;padding:10px 17px 16px;gap:9px 13px;min-height:115px}
 .focused-studio .waveform-control{order:3;flex-basis:100%;height:43px}.focused-studio .record-wave{height:43px}
 .focused-studio .inline-play{min-width:60px;font-size:15px}.focused-studio .audio-times{margin-left:auto;font-size:13px}
 .focused-studio .audio-preview .icon-button{width:24px;height:35px}
 .focused-studio .upload-mode-options{gap:11px}.focused-studio .upload-mode{padding:14px 16px}
 .focused-studio .upload-mode>span:last-child{font-size:14px}
}
@media(max-width:360px){.focused-studio .tabs button{font-size:13px}.focused-studio .work-card{padding:23px 17px}}
@media(prefers-reduced-motion:reduce){.focused-studio .tabs::before{transition:none}.focused-studio .button:active:not(:disabled){transform:none}}

/* Homepage format reel spans the full hero width. */
.home-page .landing-hero{padding-bottom:36px}
.home-page .home-format-reel{padding:0 0 28px;min-width:0}
.home-page .format-reel-heading{display:flex;align-items:center;gap:16px;margin-bottom:15px;min-height:32px;color:var(--muted)}
.home-page .format-reel-heading h2{font-size:16px;font-weight:550;letter-spacing:0;margin:0;color:var(--ink)}
.home-page .format-reel-heading>span{font-size:13px}
.home-page #homeFormatToggle{margin-left:auto;font-size:13px;min-height:32px;padding:5px 10px;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.home-page .format-reel-viewport{overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:thin;scrollbar-color:var(--muted) var(--surface);padding:0 0 12px;overscroll-behavior-x:contain;border-radius:6px;direction:ltr}
.home-page .format-reel-track{display:flex;width:max-content}
.home-page .format-reel-group{display:flex;align-items:center;gap:12px;flex-shrink:0;padding-right:12px}
.home-page .format-reel-item{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;min-width:86px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:17px;font-weight:500;letter-spacing:.5px;white-space:nowrap}
.home-page .format-reel-category{padding:0 14px;font-size:13px;color:var(--muted);white-space:nowrap}
.home-page .format-reel-note{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 0}
.home-page .format-reel-viewport:focus-visible,.home-page #homeFormatToggle:focus-visible{outline:2px solid #5487e5;outline-offset:4px}
.home-page #homeFormatToggle[hidden]{display:none}
@media(max-width:600px){.home-page .format-reel-heading{gap:9px;flex-wrap:wrap}.home-page .format-reel-heading h2{font-size:15px}.home-page .format-reel-heading>span{font-size:12px}.home-page .format-reel-item{font-size:16px;min-width:76px;padding:12px 16px}.home-page .format-reel-group{gap:9px;padding-right:9px}}

/* Silver foil sleeve: cool optical reflections, restrained enough for legible type. */
.home-page .landing-art{position:relative;isolation:isolate;overflow:hidden;border:1px solid #b9c3d7;background:linear-gradient(125deg,#fafbff 0%,#e4e9f3 32%,#f6f5ff 56%,#e1e8f1 78%,#fbfcff 100%);box-shadow:inset 0 1px 1px #fff,0 16px 48px #27365016,0 2px 5px #17284a0b}
.home-page .landing-art::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(114deg,#fff0 0 2px,#fff4 2px 3px,#33426808 3px 4px),linear-gradient(112deg,transparent 12%,#a8bded48 28%,#dac5f359 42%,#ffffffb0 49%,#b7cbef6b 57%,transparent 75%);opacity:.85}
.home-page .landing-art::after{content:'';position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--foil-x,38%) var(--foil-y,24%),#ffffffd9 0%,#d8ccff4d 22%,#9ebde329 39%,transparent 62%);transition:opacity .25s;opacity:.7}
.home-page .landing-art .landing-art-top,.home-page .landing-art .landing-art-bottom{color:#566077}
.home-page .landing-art .record-sleeve{background:linear-gradient(135deg,#fff 0%,#e3e6f1 39%,#f5edfb 58%,#dce5f0 83%,#fafcff 100%);border:1px solid #ffffffb3;box-shadow:7px 12px 26px #26344830}
.home-page .landing-art .record-sleeve small{color:#5a6070}.home-page .landing-art .sleeve-lines{opacity:.65;background:repeating-linear-gradient(0deg,transparent 0 4px,#929db2 4px 5px)}
.home-page .landing-art .vinyl-label{background:linear-gradient(135deg,#e3e8f3,#b4bed0);border-color:#eff4ff80}.home-page .landing-art .vinyl-label::before{color:#303848}
.home-page .landing-art .status-dot{background:#6688c2}
:root[data-theme=dark] .home-page .landing-art{background:linear-gradient(125deg,#2b2f3b,#242932 34%,#333040 57%,#242b36 80%,#303645);border-color:#5a6175;box-shadow:inset 0 1px 1px #ffffff25,0 18px 45px #0004}
:root[data-theme=dark] .home-page .landing-art::before{opacity:.3}
:root[data-theme=dark] .home-page .landing-art::after{opacity:.15}
:root[data-theme=dark] .home-page .landing-art .landing-art-top,:root[data-theme=dark] .home-page .landing-art .landing-art-bottom{color:#c7cedf}
@media(prefers-reduced-motion:reduce){.home-page .landing-art::after{transition:none}}