@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650&family=Libre+Caslon+Display&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;font-size:14px;font-synthesis:none;color-scheme:light;--ink:#353631;--muted:#93928c;--line:#dfded7;--paper:#fbfaf7;--panel:#fdfcf8;--panel-line:#dedbd2;--accent:#846a99;--selected:#eee7f2;--glass:#ffffff85;color:var(--ink);background:var(--paper)}
:root[data-theme=dusk]{color-scheme:dark;--ink:#e5dfe6;--muted:#b6afbc;--line:#514d58;--paper:#25262b;--panel:#2d2d34;--panel-line:#53505b;--accent:#b9a0ca;--selected:#433a4c;--glass:#2d2d348c}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}button{color:inherit;background:none;border:0}a{color:inherit}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.elemental-page{min-height:680px;height:100svh;position:relative}.studio-header{position:absolute;top:35px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;z-index:4;pointer-events:none}.studio-header a{pointer-events:auto}.studio-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:42px/.85 'Libre Caslon Display',Georgia,serif;letter-spacing:-1.9px}.studio-brand small{display:block;font:8px/1 'DM Sans',sans-serif;letter-spacing:2.15px;margin:10px 0 0 2px}.brand-mark{width:43px;height:43px;stroke-width:1;transform:rotate(-15deg)}.brand-mark path+path{opacity:.45}.studio-back{position:absolute;left:0;top:65px;text-decoration:none;color:var(--muted);font-size:9px;letter-spacing:.2px}.studio-back:hover{color:var(--ink)}.studio-intro{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#studio-root{height:100%;min-height:680px;position:relative}.studio-layout,.art-column{height:100%}.studio-toolbar{position:absolute;top:36px;right:35px;display:flex;align-items:center;gap:9px;z-index:5}.palette-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--panel-line);border-radius:30px;padding:6px 12px;background:var(--glass);font-size:11px}.palette-pill select{border:0;color:var(--ink);background:transparent;font-size:11px;padding:4px 2px;max-width:155px}.palette-pill option{background:var(--panel);color:var(--ink)}.palette-dot{width:17px;height:17px;border-radius:50%;background:conic-gradient(var(--art-accent),#adc9c9,#d5b7d8,var(--art-accent));opacity:.85;box-shadow:inset 0 0 5px 2px #ffffff50}.toolbar-divider{height:22px;width:1px;background:var(--line);margin:0 5px}.round-control{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:25px;text-decoration:none;transition:background .2s}.round-control:hover,.round-control[aria-expanded=true]{background:var(--selected)}.round-control svg{width:19px;height:19px}.theme-picker{position:relative}.theme-picker summary{list-style:none}.theme-picker summary::-webkit-details-marker{display:none}.theme-panel{position:absolute;top:48px;right:0;width:250px;padding:20px;border:1px solid var(--panel-line);border-radius:14px;background:var(--panel);box-shadow:0 12px 38px #16131e24}.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}.theme-options button{border:1px solid transparent;border-radius:9px;padding:12px 4px;font-size:11px}.theme-options button[aria-pressed=true]{background:var(--selected);border-color:var(--accent)}.theme-panel p{font-size:10px;color:var(--muted);line-height:1.6;margin:14px 0 0}.eyebrow{font-size:8px;font-weight:400;letter-spacing:1.6px;color:var(--muted)}
.art-stage{position:absolute;inset:126px 24px 240px;isolation:isolate;overflow:hidden;background-size:cover;background-position:center;container-type:inline-size;border-radius:20px}.art-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.custom-scene .art-stage{box-shadow:0 0 0 1px #77777715}.has-background canvas{mix-blend-mode:screen}.art-label{position:absolute;left:3.8%;bottom:6.8%;display:flex;flex-direction:column;gap:6px;max-width:92%;pointer-events:none;z-index:2;color:#353631;text-shadow:0 0 18px #ffffff55}#art-title{font:400 3.4cqw Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#art-artist{font:400 1.4cqw Arial,sans-serif}.dark-art .art-label{color:#faf9f5;text-shadow:0 0 18px #000}.live-badge{position:absolute;top:18px;left:22px;font-size:8px;letter-spacing:1.7px;opacity:.5;pointer-events:none;color:var(--ink)}.dark-art .live-badge{color:#e5dfe6}.stage-fullscreen{position:absolute;bottom:14px;right:16px;border:1px solid #9e979733;border-radius:50%;width:34px;height:34px;font-size:23px;opacity:.55;color:var(--ink)}.dark-art .stage-fullscreen{color:#eee}.stage-fullscreen:hover{opacity:1}.stage-error{position:absolute;inset:0;display:grid;place-content:center;padding:30px;background:var(--panel);line-height:1.6;text-align:center;font-size:13px}.drag-over{outline:1px dashed var(--accent);outline-offset:-10px}.art-stage.is-immersive{position:fixed!important;inset:0;z-index:50;width:100vw;height:100dvh;border:0;border-radius:0;aspect-ratio:auto}.is-immersive .live-badge{display:none}.is-immersive .stage-fullscreen{opacity:0;transition:opacity .2s}.is-immersive:hover .stage-fullscreen,.is-immersive .stage-fullscreen:focus-visible{opacity:1}
.transport{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);width:min(620px,calc(100% - 48px));z-index:3}.transport-card{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--panel-line);border-radius:16px;padding:19px 24px 14px;box-shadow:0 5px 30px #322d2006,0 1px 2px #ffffff22 inset}.transport-top{display:flex;align-items:center;gap:15px}.play-control{border-radius:50%;background:var(--ink);color:var(--paper);width:39px;height:39px;display:grid;place-items:center;flex-shrink:0;font-size:16px}.play-control:hover{opacity:.85}.track-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}.track-copy strong{font-weight:550;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-copy span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.volume-label{font-size:0;display:flex;align-items:center;gap:7px;width:68px}.volume-label input{min-width:42px}.timeline{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--muted);font-size:8px;font-variant-numeric:tabular-nums}.timeline input{flex:1;min-width:20px}.timeline span{min-width:26px}.timeline span:last-child{text-align:right}.source-row{display:flex;justify-content:center;align-items:center;gap:21px;margin-top:16px;flex-wrap:wrap}.source-row button,.example-label select{font-size:10px;padding:4px 0;min-height:28px;color:var(--ink);border:0;background:transparent;white-space:nowrap}.source-row button:hover{color:var(--accent)}.example-label select{max-width:185px}.example-label option{background:var(--panel);color:var(--ink)}.studio-status{color:var(--muted);font-size:9px;text-align:center;line-height:1.6;min-height:15px;margin:7px 0 0}.studio-footer{position:absolute;left:42px;right:42px;bottom:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;color:var(--muted)}.studio-motto{font:italic 12px Georgia,serif}.studio-privacy{display:flex;gap:7px;align-items:center}.studio-privacy i{width:4px;height:4px;border-radius:50%;background:#9caa92}.download-panel{display:flex;gap:20px}.download-panel button{font-size:9px}.download-panel button:last-child{color:var(--accent)}
.studio-panel{position:fixed;inset:96px 29px auto auto;width:310px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 170px);margin:0;padding:26px 25px;border:1px solid var(--panel-line);border-radius:17px;background:var(--panel);color:var(--ink);box-shadow:0 15px 65px #2922181c;overflow:auto;z-index:8;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.studio-panel::backdrop{background:#33333330;backdrop-filter:blur(4px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-heading h2{font:400 33px/1 'Libre Caslon Display',Georgia,serif;letter-spacing:-.5px;margin:7px 0 0}.settings-intro{font-size:10px;line-height:1.7;color:var(--muted);margin:0 0 24px}.field-label{display:flex;flex-direction:column;gap:8px;font-size:10px;margin:15px 0}.field-label select,.field-label input{width:100%;border:1px solid var(--panel-line);border-radius:9px;padding:10px 11px;background:var(--glass);color:var(--ink);font-size:11px}.material-controls{border-top:1px solid var(--line);padding-top:2px}.range-field{display:block;margin:19px 0}.range-field>span{display:flex;justify-content:space-between;font-size:10px;margin-bottom:7px}.range-field output{font-size:9px;font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{--fill:0%;appearance:none;-webkit-appearance:none;height:14px;background:transparent;cursor:pointer;margin:0;width:100%;border-radius:10px}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--accent) var(--fill),var(--line) var(--fill));border-radius:4px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:-3px}input[type=range]::-moz-range-track{height:2px;background:var(--line);border-radius:4px}input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0;background:var(--accent);border-radius:50%}input[type=range]:disabled{opacity:.35;cursor:default}.mirror-control{display:flex;gap:7px;border:0;padding:0;margin:22px 0}.mirror-control legend{font-size:10px;margin-bottom:12px}.mirror-control button{border:1px solid var(--panel-line);background:none;border-radius:30px;padding:9px 8px;font-size:10px;flex:1}.mirror-control button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--selected)}.composition-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:22px 0}.composition-panel summary{list-style:none;font-size:11px;display:flex;justify-content:space-between}.composition-panel summary::-webkit-details-marker{display:none}.composition-panel[open] summary{margin-bottom:18px}.background-actions{display:flex;gap:10px;align-items:center}.field-note{font-size:9px;line-height:1.7;color:var(--muted);margin-bottom:0}.reset-control{display:block;margin:20px auto 0}.filled-button,.small-button,.text-button{font-size:10px;text-decoration:none;line-height:1.4}.filled-button{display:inline-flex;justify-content:center;align-items:center;padding:11px 18px;border:1px solid var(--accent);border-radius:30px;background:var(--accent);color:var(--paper)}.small-button{border:1px solid var(--panel-line);border-radius:30px;padding:8px 12px}.small-button[aria-pressed=true]{color:var(--accent);background:var(--selected);border-color:var(--accent)}.text-button{color:var(--muted);padding:5px 0}.text-button:hover{color:var(--ink)}.export-modal{color:var(--ink);background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;padding:30px;max-width:min(470px,calc(100vw - 32px));box-shadow:0 22px 90px #29221833}.export-modal::backdrop{background:#55514b66;backdrop-filter:blur(8px)}.export-modal h2{font:400 35px 'Libre Caslon Display',Georgia,serif;margin:0}.export-modal p{font-size:11px;color:var(--muted);line-height:1.8}.export-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.export-modal progress{width:100%;height:5px;accent-color:var(--accent);margin-top:25px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-height:950px){.transport{bottom:95px}.studio-footer{bottom:33px}.art-stage{bottom:275px;top:140px}}
@media(max-width:850px){.studio-header{left:25px;right:25px;top:26px}.studio-brand{font-size:37px}.brand-mark{width:37px;height:37px}.studio-brand small{font-size:7px;letter-spacing:1.7px}.studio-toolbar{top:27px;right:20px;gap:5px}.studio-footer{left:25px;right:25px}.studio-motto{display:none}.palette-pill select{max-width:125px}.art-stage{inset:125px 16px 240px}.studio-back{top:61px}}
@media(max-width:700px){.studio-panel{inset:0;margin:auto;max-height:calc(100dvh - 36px);width:390px;padding:26px}.studio-panel .settings-intro{font-size:11px}.range-field>span,.field-label,.mirror-control legend{font-size:11px}.range-field{margin:23px 0}.studio-panel .round-control{width:40px;height:40px}.art-stage{border-radius:16px}.palette-pill select{max-width:110px}}
@media(max-width:540px){.elemental-page,#studio-root{min-height:680px}.studio-header{left:20px;right:20px;top:25px}.studio-brand{font-size:34px;gap:7px;letter-spacing:-1.5px}.brand-mark{width:29px;height:36px}.studio-brand small{font-size:6px;letter-spacing:1.3px;margin-top:9px}.studio-back{left:auto;right:0;top:10px;font-size:9px}.studio-toolbar{top:91px;left:20px;right:20px;justify-content:flex-end;gap:6px}.palette-pill{margin-right:auto;padding:4px 10px}.palette-pill select{max-width:155px;font-size:10px}.palette-dot{width:15px;height:15px}.round-control{width:32px;height:32px}.round-control svg{width:17px;height:17px}.toolbar-divider{margin:0 2px}.art-stage{inset:145px 12px 246px;border-radius:12px}.transport{bottom:79px;width:calc(100% - 32px)}.transport-card{padding:17px 17px 13px;border-radius:13px}.transport-top{gap:12px}.play-control{width:36px;height:36px}.track-copy strong{font-size:12px}.track-copy span{font-size:9px}.volume-label{display:none}.source-row{gap:15px;margin-top:13px}.source-row button,.example-label select{font-size:9px}.example-label select{max-width:135px}.source-row .filled-button{padding:4px 0}.studio-status{font-size:8px;margin-top:4px}.studio-footer{left:20px;right:20px;bottom:22px;display:flex;flex-direction:column;gap:11px;font-size:8px}.download-panel{gap:24px}.download-panel button{font-size:9px}.live-badge{font-size:7px;left:14px;top:14px}.stage-fullscreen{width:29px;height:29px;font-size:21px;bottom:9px;right:11px}.art-label #art-title{font-size:5cqw}.art-label #art-artist{font-size:2.4cqw}.theme-panel{position:fixed;top:132px;right:16px;width:min(250px,calc(100vw - 32px))}.settings-intro{font-size:10px}.export-modal{padding:25px}.export-modal h2{font-size:31px}}
@media(max-width:350px){.studio-brand{font-size:29px}.studio-brand small{font-size:5px}.studio-back{font-size:8px}.source-row{gap:10px}.source-row button,.example-label select{font-size:8px}.example-label select{max-width:120px}.palette-pill select{max-width:125px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Paper choices share the original watercolor studio's quiet card language. */
.palette-picker{position:relative}.palette-pill{cursor:pointer;min-height:38px}.palette-pill>svg{width:14px;height:14px;margin-left:3px;color:var(--muted)}.palette-pill[aria-expanded=true]{border-color:var(--accent);background:var(--selected)}.palette-panel{position:absolute;right:0;top:49px;width:260px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 150px);overflow:auto;padding:20px;border:1px solid var(--panel-line);border-radius:16px;background:var(--panel);box-shadow:0 14px 48px #29233420}.palette-options{display:grid;gap:5px;margin-top:12px}.palette-options button{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid transparent;border-radius:10px;padding:11px 9px;font-size:11px;min-height:44px}.palette-options button:hover{background:var(--glass)}.palette-options button[aria-pressed=true]{background:var(--selected);border-color:var(--panel-line)}.palette-swatch{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 8px #ffffff44;flex-shrink:0}.palette-check{margin-left:auto;color:var(--accent);opacity:0}.palette-options [aria-pressed=true] .palette-check{opacity:1}.source-row button{display:inline-flex;gap:6px;align-items:center;justify-content:center}.source-row button svg{width:13px;height:13px;color:var(--muted)}.source-row #element-example{color:var(--accent)}.play-control svg{width:19px;height:19px}.play-control svg use{pointer-events:none}button svg{pointer-events:none}.paper-dialog{width:min(488px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);margin:auto;overflow:auto;border:1px solid var(--panel-line);border-radius:20px;background:var(--panel);color:var(--ink);padding:30px;box-shadow:0 22px 90px #29233426;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.paper-dialog::backdrop{background:#aaa39b55;backdrop-filter:blur(8px)}.paper-dialog .panel-heading{align-items:flex-start;margin-bottom:15px;gap:12px}.paper-dialog h2{font:400 35px/1.12 'Libre Caslon Display',Georgia,serif;letter-spacing:-.5px;margin:7px 0 0}.paper-dialog .panel-heading>.round-control{flex-shrink:0;margin:-6px -9px 0 0}.dialog-description{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.source-dialog{width:min(450px,calc(100vw - 32px))}.source-choices{display:grid;gap:12px;margin-top:25px}.source-choice{display:flex;align-items:center;gap:12px;width:100%;min-height:88px;padding:12px;border:1px solid var(--panel-line);border-radius:13px;background:var(--glass);text-align:left;transition:background .2s,border-color .2s}.source-choice:hover,.example-song:hover{background:var(--selected);border-color:var(--accent)}.source-choice-copy{display:grid;gap:7px;min-width:0;flex:1;font-size:13px;font-weight:500;line-height:1.5}.source-choice-copy small{font-size:10px;font-weight:400;color:var(--muted)}.source-choice>svg,.example-song>svg{width:16px;color:var(--accent)}.examples-dialog[open]{display:flex;flex-direction:column;overflow:hidden}.examples-dialog>.panel-heading,.examples-dialog>.dialog-description,.examples-dialog>.examples-footnote{flex-shrink:0}.example-songs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:7px;margin:19px -7px 14px}.example-song{display:flex;align-items:center;gap:15px;width:100%;min-height:80px;padding:10px 16px 10px 12px;border:1px solid var(--panel-line);border-radius:13px;text-align:left;background:var(--glass);transition:background .2s,border-color .2s}.example-info{display:grid;gap:8px;min-width:0;flex:1}.example-title{font-size:13px;line-height:1.5;font-weight:500}.example-meta{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.2px}.example-number{font:italic 12px Georgia,serif;color:var(--muted)}.example-art{position:relative;display:grid;place-items:center;width:62px;height:58px;flex-shrink:0;isolation:isolate}.example-art>span,.example-art>i{position:absolute;inset:4px 7px;z-index:-1;border-radius:46% 54% 65% 35%/53% 36% 64% 47%;filter:blur(1.7px);transform:rotate(-18deg);background:radial-gradient(at 35% 38%,#eab49b88,#df9a8b70 40%,#f4d9b63b 70%);box-shadow:inset 2px -3px 6px #cc9c7d3b,2px 2px 5px #edc6b55c}.example-art>i{inset:13px 4px 0 17px;transform:rotate(30deg);opacity:.55;background:radial-gradient(at 60% 50%,#ae9cc77d,#d9b6de77 40%,#d6c7e025 70%)}.lilac .example-art>span{background:radial-gradient(at 35% 40%,#b58bc6a1,#c9b7db88 40%,#c3cfe94a 70%);box-shadow:inset 2px -3px 6px #ad92bb3b,2px 2px 5px #d4bce65c}.lilac .example-art>i{background:radial-gradient(at 60% 50%,#78bbcda1,#a4cfde77 40%,#d0e1e525 70%)}.example-art>svg{width:19px;height:19px;color:var(--ink);opacity:.8}.examples-footnote{font-size:10px;line-height:1.8;color:var(--muted);margin:0;text-align:center}.loading-dialog{text-align:center;width:min(438px,calc(100vw - 32px));padding:34px 33px 24px}.loading-dialog h2{font-size:33px;margin-top:11px}#loading-track{font-size:11px;color:var(--muted);margin:12px 0;overflow-wrap:anywhere}.loading-mark{width:100px;height:80px;margin:20px auto;display:grid;place-items:center;border-radius:46% 54% 65% 35%;background:radial-gradient(at 30% 40%,#e5b5a177,#b8a3c377 55%,#a8c7cd33);color:var(--accent)}.loading-mark svg{width:29px;height:29px}#loading-status{font-size:12px;color:var(--muted);line-height:1.7}#loading-progress{width:100%;height:5px;accent-color:var(--accent);margin:12px 0}#loading-cancel{margin-top:20px}.export-formats{margin:24px 0;padding:0;border:0}.export-formats legend{font-size:11px;color:var(--muted);margin-bottom:12px}.format-options{display:flex;gap:10px}.format-options button{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 10px;border:1px solid var(--panel-line);border-radius:12px;min-height:83px;font-size:12px;text-align:left}.format-options button[aria-pressed=true]{border-color:var(--accent);background:var(--selected)}.format-options small{display:block;margin-top:6px;font-size:9px;color:var(--muted)}.format-frame{display:block;border:1px solid var(--accent);border-radius:3px;flex-shrink:0}.format-frame.landscape{width:34px;height:20px}.format-frame.portrait{width:20px;height:34px}.export-formats:disabled button{opacity:.4;cursor:wait}.export-modal{max-height:calc(100dvh - 32px);overflow:auto}.export-modal .filled-button{border-radius:9px}.paper-dialog button:focus-visible,.palette-panel button:focus-visible{outline-offset:2px}
@media(max-width:540px){.palette-panel{position:fixed;top:132px;left:20px;right:auto;width:min(280px,calc(100vw - 40px));max-height:calc(100dvh - 155px)}.palette-pill{font-size:10px;padding:7px 10px}.palette-pill #palette-label{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-row{gap:14px}.source-row button svg{width:12px;height:12px}.paper-dialog{padding:25px 22px}.paper-dialog h2{font-size:31px}.example-song{gap:10px;padding:8px 12px 8px 7px}.example-art{width:52px;height:54px}.example-title{font-size:12px}.example-number{display:none}.loading-dialog{padding:30px 25px 22px}.examples-footnote{font-size:9px}.source-choice{gap:9px;padding:10px 8px}.source-choice-copy{font-size:12px}.source-choice-copy small{font-size:9px}.format-options button{gap:9px;font-size:11px}.format-options small{font-size:8px}}
@media(max-width:360px){.source-row{gap:10px}.source-row button{font-size:8px}.source-row button svg{width:11px}.example-song>svg{display:none}.example-title{font-size:11px}.example-meta{font-size:9px}.palette-pill #palette-label{max-width:125px}.format-options button{gap:7px;padding:12px 7px}.format-frame.landscape{width:28px;height:17px}}
@media(prefers-reduced-motion:reduce){.source-choice,.example-song{transition:none}}
:root[data-theme=dusk] :is(.paper-dialog,.export-modal)::backdrop{background:#14131bb3}
body:has(dialog:modal){overflow:hidden}.paper-dialog,.studio-panel{overscroll-behavior:contain}.paper-dialog>.panel-heading,.studio-panel>.panel-heading{position:sticky;top:-30px;z-index:1;background:var(--panel);padding-top:6px;padding-bottom:10px}.studio-panel>.panel-heading{top:-26px}@media(max-width:540px){.paper-dialog>.panel-heading{top:-25px}}
/* Collection navigation belongs with the desktop controls, as in Watercolor. */
.studio-toolbar{right:42px;gap:12px}
.collection-link{color:inherit;font-size:12px;text-decoration:none;margin-right:8px;white-space:nowrap}
.collection-link:hover{text-decoration:underline;text-underline-offset:4px}
.studio-header button{pointer-events:auto}
.theme-options button{display:grid;justify-items:center;gap:8px}
.theme-options button svg{width:18px;height:18px}
.studio-panel .studio-panel-content>.panel-heading{position:sticky;top:-26px;z-index:1;background:var(--panel);padding:6px 0 10px}
@media(min-width:701px) and (max-width:1100px){.studio-toolbar{gap:6px}.studio-toolbar .collection-link{font-size:10px;margin-right:2px}.studio-brand{font-size:36px}.studio-brand small{font-size:7px}.palette-pill #palette-label{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:700px),(max-width:950px) and (pointer:coarse){
 .studio-toolbar{display:none}
 .studio-header{left:24px;right:24px;top:26px;align-items:center}
 .studio-brand{font-size:34px;gap:7px;letter-spacing:-1.5px}
 .studio-header .brand-mark{width:29px;height:36px}
 .studio-brand small{font-size:6px;letter-spacing:1.3px;margin-top:9px}
 .art-stage{inset:108px 12px 246px}
}
.volume-label{gap:4px;flex-direction:row;align-items:center}
.volume-label .round-control{width:28px;height:28px}
.volume-label .round-control svg{width:16px;height:16px}
.volume-label input{width:61px}
.timeline .loop-button{flex-shrink:0;width:26px;height:26px;margin:-6px 0}
.loop-button svg{width:14px;height:14px}
.collection-link{display:inline-flex;align-items:center;gap:6px}
.collection-link svg{width:14px;height:14px}
.stage-fullscreen{display:grid;place-items:center}
.stage-fullscreen svg{width:17px;height:17px}
.download-panel button{display:inline-flex;align-items:center;gap:6px}
.download-panel button svg{width:13px;height:13px}
.palette-check svg{width:14px;height:14px}
.loop-button[aria-pressed=true]{color:var(--accent);background:var(--selected)}
@media(max-width:700px){.transport-top .volume-label{display:flex}.volume-label input{display:none}.transport-top{gap:10px}}