/* SPDX-License-Identifier: GPL-3.0-only */
:root[data-skin=melodee]{--accent:#b5eba4;--ink:#122019;--piano-active:#a5db99;--bg:#10141b;--panel:#171e28;--desk:#090d13;--chassis:#202733;--chassis-dark:#0a1019;--fg:#edf1e8;--dim:#acb9bc;--line:#394653;--faceplate:linear-gradient(120deg,#263242,#101722);--lcd:#d7f4c7;--wordmark:'Space Grotesk',sans-serif;}
:root[data-skin=melodee][data-mode=light]{--accent:#38602a;--ink:white;--bg:#e9eee6;--panel:#dbe3d9;--fg:#172b22;--dim:#3c5144;--line:#9dab9e;--desk:#c4cfc1;--chassis:#d1ddcd;--chassis-dark:#afc0ac;--faceplate:linear-gradient(120deg,#e8f0e4,#c3d1c3);}
.melodee-wordmark{font-family:'Sora',system-ui,sans-serif!important;letter-spacing:-.035em!important;font-size:clamp(28px,3.5vw,52px)!important;font-weight:700!important;text-decoration:none;line-height:1!important;display:inline-flex;align-items:baseline;gap:.25em}.melodee-wordmark span{font-family:inherit!important;font-size:.5em;letter-spacing:.01em;color:var(--accent);font-weight:500}.masthead .brand-row{align-items:center}.masthead h1{margin:6px 0}.masthead .tagline{font-size:10px}.masthead{margin-bottom:20px}[data-skin=melodee] .masthead{border-image:linear-gradient(90deg,#b5eba4,#9db0ea,#ccade3) 1;border-bottom-width:2px}
button,a.action{touch-action:manipulation}.mode-switch{display:flex;gap:3px;border:1px solid var(--line);padding:3px;border-radius:8px}.mode-switch button{min-height:32px}.mode-switch button[aria-pressed=true]{background:var(--accent);color:var(--ink)}.mode-sim{padding:8px}.audio-scope{height:72px;width:100%;margin-top:14px;background:var(--lcd-bg);border-radius:6px;overflow:hidden}.audio-scope canvas{width:100%;height:100%;display:block}
#browser-session{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0}#browser-session label{display:flex;gap:7px;align-items:center}#audio-volume{width:100px}#session-status{font-size:11px;color:var(--dim)}.groups{align-items:start!important;gap:16px!important}.groups .group[data-controls=knobs]{grid-template-rows:none!important}.groups .group[data-controls=knobs] .scalepicker,.groups .group[data-controls=knobs] .modrow{grid-column:1/-1}.groups .group[data-controls=knobs] .modrow{display:grid;grid-template-columns:20px 1fr 1fr 50px 40px}.groups .group[data-controls=knobs] .modrow>span{min-width:0}.card-tools{grid-column:1/-1}#browser{align-items:center;gap:16px}#browser>div{display:flex;gap:8px;flex-wrap:wrap}#browser .bar{margin:0}#preset{height:74px!important;min-height:0!important}#p5controls fieldset{min-width:0;border:1px solid var(--line);border-radius:6px}#p5controls fieldset input{max-width:90px}#p5panel,#czpanel{margin-bottom:18px}footer{font-size:11px;line-height:1.8;color:var(--dim);margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.landing-page main{max-width:1480px;margin:24px auto;padding:32px}.mel-hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:center;padding:54px 8px 40px}.hero-copy h2{font-size:clamp(34px,4.3vw,66px);font-weight:650;line-height:1.08;letter-spacing:-.05em;border:0;margin:24px 0}.hero-copy h2 em{font-style:normal;color:var(--accent)}.hero-copy>p{font-size:17px;max-width:440px;color:var(--dim);line-height:1.7}.release-badge{font-size:10px;font-weight:700;letter-spacing:.12em;padding:8px 10px;border:1px solid var(--line);border-radius:5px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 15px}.action{padding:14px 20px;border-radius:8px;border:1px solid var(--line);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:24px}.action.primary{background:var(--accent);color:var(--ink);box-shadow:0 6px 20px #0003}.action.secondary{background:var(--panel);color:var(--fg)}.action:hover{filter:brightness(1.12);transform:translateY(-1px)}.hero-copy .hero-note,.instrument-note{font-size:11px;color:var(--dim)}.hero-instrument figure{margin:0;width:100%;filter:drop-shadow(0 20px 16px #0005)}.hero-instrument{min-width:0;text-align:center}.hero-instrument svg{width:100%;height:auto}.instrument-note{display:block;letter-spacing:.05em;margin-top:12px}.feature-strip{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;letter-spacing:.16em;font-size:12px;color:var(--dim);padding:25px 5px;border-block:1px solid var(--line)}.landing-section{padding:50px 5px}.section-heading>span{font-size:10px;letter-spacing:.16em;color:var(--accent)}.section-heading h2{font-size:clamp(25px,3vw,40px);border:0;margin:10px 0 28px;letter-spacing:-.04em}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--fg)}.feature-card h3{font-size:21px;color:var(--fg);margin:0}.feature-card p{font-size:14px;line-height:1.8;color:var(--dim);margin:0}.feature-card strong{font-size:12px;margin-top:auto;padding-top:12px;color:var(--accent)}.feature-number{color:var(--accent);font-size:11px;letter-spacing:.1em}.theme-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.theme-links a{padding:12px 18px;background:var(--panel);border:1px solid var(--line);border-radius:7px;text-decoration:none;color:var(--fg)}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}.guide-grid li{padding:8px 0;line-height:1.7;font-size:14px}.development-note{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px}.development-note h3{font-size:23px;margin:24px 0 14px;color:var(--fg)}.development-note p{font-size:13px;line-height:1.7;color:var(--dim)}
@media(max-width:900px){.mel-hero{grid-template-columns:1fr;padding-top:24px}.hero-instrument{order:2}.feature-grid{grid-template-columns:1fr}.guide-grid{grid-template-columns:1fr;gap:24px}.landing-page main{padding:18px;margin:0}.hero-copy>p{max-width:100%}}@media(prefers-reduced-motion:reduce){.action:hover{transform:none}}

.groups .group[data-controls=knobs] .row.modrow{grid-column:1/-1!important;display:grid!important;grid-template-columns:16px minmax(0,1fr) minmax(0,1fr) 48px 38px!important}.groups .group[data-controls=knobs] .modrow>select{grid-column:auto!important;width:100%;min-width:0}.group.control-bank{position:relative}.group.control-bank>h2{padding-right:92px}#browser>div{flex:0 1 auto!important}#browser label:nth-child(2){flex:1 1 320px!important}.hero-copy h2{font-family:system-ui,sans-serif!important}

#scope-canvas{color:var(--accent);--scope-grid:#65756526}
.group>.studio-widget{grid-column:1/-1}.group .studio-widget .widget-handle{min-width:0;padding:0}
.preview-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px}.preview-gallery a{border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--fg);background:var(--panel)}.preview-gallery img{width:100%;aspect-ratio:1.5;object-fit:cover;object-position:top;display:block}.preview-gallery span{display:block;padding:16px;font-size:14px;font-weight:700}@media(max-width:700px){.preview-gallery{grid-template-columns:1fr}}

#groups .studio-section>.section-grid{grid-column:1/-1}#groups .section-bank>.studio-widget{grid-column:1/-1}#groups .section-bank:has(.scalepicker){grid-column:1/-1}#groups .studio-section>.modrow{display:grid!important;margin-top:10px}@media(max-width:600px){.section-grid{grid-template-columns:1fr!important}}

.landing-page main{box-sizing:border-box}.hero-instrument{padding:14px;box-sizing:border-box}

/* Melodee Atelier: the app's sage, periwinkle and lilac on an ink-blue instrument.
   Scoped to Melodee; other selectable skins keep their own materials. */
:root[data-skin=melodee] {
 --bg:#111923; --fg:#eef3ed; --dim:#b0bec7; --line:#3d4e5d;
 --desk:#080e15; --chassis:#263a43; --chassis-dark:#131e2c;
 --panel:#1b2834; --button:#2b3c4b; --edge:#253c42;
 --accent:#b5eba4; --ink:#122719; --lcd:#d9eecf; --lcd-bg:#0b151c;
 --badge-fg:#edf5e9; --shell-text:#edf5e9; --piano-active:#87bc87;
 --mel-blue:#acbdf5; --mel-lilac:#d7b9ea; --mel-sage:#b5eba4;
 --mel-shadow:#03080e66; --card-radius:14px;
 --knob-top:#536c75; --knob-bottom:#182a35;
 --metal:conic-gradient(from 25deg,#a5bbbf,#425c66 22%,#c1d0d0 42%,#698089 60%,#bacbd0 82%,#a5bbbf);
 --faceplate:radial-gradient(ellipse at 82% 0,#9db0ea18,transparent 65%),linear-gradient(110deg,#293e45,#182638 75%);
}
:root[data-skin=melodee][data-mode=light] {
 color-scheme:light; --bg:#eef2eb; --fg:#192e36; --dim:#49606a; --line:#9eafb1;
 --desk:#d9e2da; --chassis:#dce8dc; --chassis-dark:#bfcfc9;
 --panel:#e2eae3; --button:#ceddd3; --edge:#bdcfc6;
 --accent:#305d37; --ink:#f6fff1; --lcd:#254535; --lcd-bg:#f7faf2;
 --badge-fg:#193539; --shell-text:#193539; --piano-active:#467d51;
 --mel-blue:#3f568b; --mel-lilac:#79528c; --mel-sage:#305d37; --mel-shadow:#28443820;
 --faceplate:radial-gradient(ellipse at 80% 0,#b4bfea40,transparent 65%),linear-gradient(110deg,#e1ebdb,#cfdedb);
}
[data-skin=melodee] body { background:radial-gradient(ellipse at 15% 0,color-mix(in srgb,var(--mel-sage) 8%,var(--desk)),var(--desk) 65%); }
[data-skin=melodee] main { border:1px solid var(--line); border-radius:24px; box-shadow:0 22px 70px var(--mel-shadow); }
[data-skin=melodee] .masthead { border:0; border-bottom:1px solid var(--line); border-image:none; border-radius:23px 23px 4px 4px; box-shadow:inset 0 1px #ffffff14; }
[data-skin=melodee] .masthead::before,[data-skin=melodee] .masthead::after { display:none; }
[data-skin=melodee] .melodee-wordmark { color:var(--badge-fg); font-family:'Sora',system-ui,sans-serif!important; letter-spacing:-.035em!important; text-shadow:none; }
[data-skin=melodee] .melodee-wordmark span { color:var(--mel-lilac); font-family:inherit!important; font-weight:600; letter-spacing:.08em; }
[data-skin=melodee] .masthead .tagline { color:var(--mel-sage); letter-spacing:.14em; }
[data-skin=melodee] .hero-copy h2 { font-family:'Sora',system-ui,sans-serif!important; font-weight:700; letter-spacing:-.065em; }
[data-skin=melodee] .release-badge { color:var(--mel-sage); border-color:color-mix(in srgb,var(--mel-sage) 35%,var(--line)); border-radius:99px; }
[data-skin=melodee] .top,[data-skin=melodee] .panel { border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 14px var(--mel-shadow); }
[data-skin=melodee] .tabs button { border-radius:8px; border:1px solid transparent; box-shadow:none; background:transparent; color:var(--dim); }
[data-skin=melodee] .tabs button[aria-selected=true] { background:var(--accent); color:var(--ink); border-color:var(--accent); box-shadow:none; }
[data-skin=melodee] .groups .group { --section-accent:var(--mel-sage); border:1px solid var(--line); border-top:3px solid var(--section-accent); background:linear-gradient(130deg,#ffffff05,transparent 65%),var(--panel); box-shadow:0 5px 16px var(--mel-shadow),inset 0 1px #ffffff0d; }
[data-skin=melodee] .groups .group:nth-child(3n+2) { --section-accent:var(--mel-blue); }
[data-skin=melodee] .groups .group:nth-child(3n) { --section-accent:var(--mel-lilac); }
[data-skin=melodee] .control-bank h2 { color:var(--section-accent); letter-spacing:.08em; }
[data-skin=melodee] [data-controls=knobs] .dial-control { color:var(--section-accent); }
[data-skin=melodee] [data-controls=knobs] .dial-face { border-color:#162730; box-shadow:0 3px 6px #0007,0 0 0 2px var(--line),inset 0 1px #d4e3df66; }
[data-skin=melodee] [data-controls=knobs] .dial-face::after { background:var(--section-accent,var(--accent)); }
[data-skin=melodee] .studio-widget { border-radius:9px; color:var(--lcd); }
[data-skin=melodee] .browser { border:1px solid var(--line); border-radius:12px; background:var(--lcd-bg); box-shadow:inset 0 2px 7px var(--mel-shadow); }
[data-skin=melodee] .editor-page .play-keyboard { border:1px solid var(--line); border-top:3px solid var(--mel-sage); background:var(--faceplate); box-shadow:0 -8px 30px var(--mel-shadow); }
[data-skin=melodee] .feature-card,[data-skin=melodee] .theme-gallery figure { border-radius:14px; }
[data-skin=melodee] .feature-card:nth-child(2) .feature-number { color:var(--mel-blue); }
[data-skin=melodee] .feature-card:nth-child(3) .feature-number { color:var(--mel-lilac); }
[data-skin=melodee] .sim-toolbar { padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
[data-skin=melodee] .smk-simulator-shell .sim-pad:is(.lit,[aria-pressed=true]) { background:linear-gradient(#ccf2b8,#87bd8a); border-color:#d7f6c9; color:#172d22; box-shadow:0 0 12px #b5eba440,inset 0 1px #fff6; }
[data-skin=melodee] .smk-simulator-shell .sim-key[aria-pressed=true] { background:linear-gradient(#79a682,#c0e5b5); }
[data-skin=melodee] .smk-simulator-shell .sim-button.lit { border-bottom-color:#b5eba4; color:#d8f5ca; }
[data-skin=melodee][data-mode=light] .studio-preview-action { color:var(--ink); }
@media(max-width:600px) { [data-skin=melodee] main { border-radius:14px; } [data-skin=melodee] .masthead { border-radius:13px 13px 3px 3px; } }

:root[data-skin=melodee] .install-primary{background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 90%,white),var(--accent));color:var(--ink);border-color:var(--accent);box-shadow:0 6px 20px var(--mel-shadow)}
[data-skin=melodee] #status:not([data-error=true]){border-left-color:var(--accent)}

/* One complete wordmark face, baseline and casing across every theme. */
.masthead .brand-row h1 .melodee-wordmark {
 align-items:baseline; gap:.22em; white-space:nowrap;
 font-style:normal; text-transform:none; text-shadow:none;
}
.masthead .brand-row h1 .melodee-wordmark span {
 font-family:inherit; font-style:inherit; line-height:1;
 font-weight:600; letter-spacing:.035em;
}