.music-page{margin:80px 0 0 252px;padding:34px 48px 0 55px;max-width:1600px}.music-page .breadcrumb{margin-bottom:30px}.music-intro{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:27px;margin-bottom:26px}.music-intro h1{font-size:clamp(42px,4.3vw,62px);margin:17px 0 14px}.music-intro p{font-size:12px;color:var(--muted);max-width:560px;line-height:1.9;margin:0}.source-link{font-size:10px;color:var(--accent);white-space:nowrap;padding:10px 0}.music-workspace{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(300px,1.15fr);gap:24px;align-items:start}.direction-panel{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:24px;position:sticky;top:100px;min-width:0}.direction-panel h2{font:38px/1.05 'Libre Caslon Display',Georgia,serif;color:var(--accent);text-transform:capitalize;overflow-wrap:anywhere;margin:17px 0 18px;min-height:80px;outline-offset:5px}.direction-panel .eyebrow{font-size:8px}.direction-panel>p{font-size:10px;color:var(--muted);line-height:1.8;margin:0 0 20px}.wheel-actions{display:flex;gap:8px;margin-bottom:23px}.wheel-actions button{border:1px solid var(--line);border-radius:5px;background:var(--bg);padding:10px 14px;font-size:12px;min-height:42px}.wheel-actions .roll{background:var(--accent);color:var(--bg);font-weight:600;flex:1}.wheel-actions .roll:hover{filter:brightness(1.1);color:var(--bg)}button:disabled{opacity:.35;cursor:default}.brief-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px;border-top:1px solid var(--line);padding-top:18px}.brief-fields label{font-size:10px;color:var(--muted);min-width:0}.brief-fields input,.brief-fields select{display:block;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:4px;color:var(--text);font-size:11px;padding:9px;margin-top:5px;min-height:40px}.brief-fields .wide{grid-column:1/-1}#music-output{width:100%;min-height:155px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:14px;font:11px/1.9 ui-monospace,Consolas,monospace;color:var(--text);resize:vertical;overflow-wrap:anywhere}.music-copy-actions{display:flex;align-items:center;gap:14px;justify-content:space-between;margin-top:10px}.music-copy-actions .copy{min-height:40px}.music-copy-actions a{font-size:10px;color:var(--accent)}.music-audit{font-size:9px;color:var(--muted);margin-top:17px;border-top:1px solid var(--line);padding-top:13px;line-height:1.9}.music-audit span{color:var(--copper)}.wheel-panel{min-width:0}.wheel-panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted);margin-bottom:12px}.wheel-panel .search{height:45px;min-height:45px}.genre-viewport{height:630px;overflow:auto;overscroll-behavior:contain;margin-top:16px;border:1px solid var(--line);border-radius:8px;background:radial-gradient(ellipse at 48% 48%,#82ceba09,transparent 70%),var(--bg);position:relative;scrollbar-color:var(--line) transparent}.genre-cloud{display:flex;align-items:center;justify-content:center;gap:8px 6px;flex-wrap:wrap;padding:34px 16px;perspective:800px;min-height:100%}.genre-word{background:transparent;border:1px solid transparent;padding:6px 8px;font-size:12px;line-height:1.5;border-radius:5px;transform:rotate(-7deg);transition:background .15s,border .15s;min-height:36px;text-align:center;max-width:100%;overflow-wrap:anywhere}.genre-word.tone-0{color:var(--accent)}.genre-word.tone-1{color:var(--copper)}.genre-word.tone-2{color:var(--muted)}.genre-word:hover{background:var(--surface);border-color:var(--line)}.genre-word.selected{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}.is-filtered .genre-word{transform:none}.genre-empty{font-size:12px;color:var(--muted);padding:25px}.wheel-explainer{font-size:10px;color:var(--muted);line-height:1.9;margin:13px 2px 0}.wheel-explainer a{color:var(--accent)}.music-guide{border-top:1px solid var(--line);margin-top:42px;padding-top:29px}.music-guide h2{margin:12px 0 18px}.music-guide>p{font-size:11px;line-height:1.9;color:var(--muted);max-width:750px}.music-guide .reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}.reference-grid a{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;padding:18px;background:var(--surface);gap:10px}.reference-grid a span{font-size:8px;color:var(--copper);letter-spacing:1px}.reference-grid a strong{font-size:12px;font-weight:500}.reference-grid a small{font-size:10px;color:var(--muted);line-height:1.8}.music-page footer{margin-top:40px}.nav-link.active{background:#82ceba12;color:var(--accent)}.sidebar .music-nav{margin-top:-19px;margin-bottom:29px}.music-help{margin-top:20px;padding:15px;border:1px solid var(--line);border-radius:5px}.music-help p{font-size:10px;line-height:1.8;color:var(--muted);margin:0}.music-help strong{font-size:11px;font-weight:500;color:var(--text)}@media(max-width:1200px){.music-page{padding:30px 30px 0 35px}.music-workspace{gap:16px;grid-template-columns:minmax(245px,.95fr) minmax(245px,1.05fr)}.direction-panel{padding:19px}.genre-word{font-size:11px;padding:6px}.music-intro{align-items:flex-start;flex-direction:column;gap:9px}.music-intro h1{font-size:50px}.music-guide .reference-grid{grid-template-columns:1fr 1fr}}@media(max-width:950px){.music-workspace{grid-template-columns:1fr}.direction-panel{position:static}.direction-panel h2{min-height:0}.genre-viewport{height:390px}.brief-fields{grid-template-columns:1fr 1fr}.music-guide .reference-grid{grid-template-columns:1fr}.music-page{margin-left:216px;padding:26px 25px 0}.music-intro h1{font-size:47px}}@media(max-width:650px){.music-page{margin:66px 0 0;padding:24px 21px 0}.music-page .breadcrumb{margin-bottom:26px}.music-intro h1{font-size:47px}.music-intro p{font-size:12px}.music-intro{padding-bottom:20px}.music-workspace{gap:24px;display:flex;flex-direction:column}.direction-panel,.wheel-panel{width:100%}.direction-panel{padding:19px}.direction-panel h2{font-size:36px}.brief-fields{gap:12px}.brief-fields input,.brief-fields select{font-size:12px;min-height:44px}.genre-viewport{height:350px}.genre-cloud{padding:20px 9px;gap:5px 3px}.genre-word{min-height:44px;transform:rotate(-4deg);font-size:12px}.music-copy-actions{flex-wrap:wrap}.music-copy-actions a{min-height:36px;display:flex;align-items:center}.music-guide .reference-grid{grid-template-columns:1fr}.music-help{padding:13px}.music-guide{margin-top:30px}.music-guide h2{font-size:29px}.source-link{font-size:11px}.wheel-panel-top{font-size:10px}.direction-panel .eyebrow{font-size:8px}.wheel-actions button{min-height:44px}}@media(prefers-reduced-motion:reduce){.genre-word{transform:none}}

.orbit-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}.view-switch{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}.view-switch button{font-size:10px;background:transparent;color:var(--muted);padding:6px 12px;border-radius:3px;min-height:30px}.view-switch button[aria-pressed=true]{background:var(--surface2);color:var(--accent)}.orbit-shell{border:1px solid var(--line);border-radius:10px;background:var(--bg);box-shadow:0 22px 70px #0002;overflow:hidden}.orbit-stage{height:530px;position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;background-image:linear-gradient(#82ceba04 1px,transparent 1px),linear-gradient(90deg,#82ceba04 1px,transparent 1px);background-size:30px 30px}.orbit-stage:active{cursor:grabbing}.orbit-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.orbit-labels{position:absolute;inset:0;overflow:hidden}.orbit-word{position:absolute;top:0;left:0;white-space:nowrap;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:7px 11px;font-size:10px;border-radius:18px;max-width:250px;overflow:hidden;text-overflow:ellipsis;transition:background .18s,border-color .18s,box-shadow .18s;min-height:34px}.orbit-word:nth-child(3n){color:var(--copper);border-color:#e6b38c30}.orbit-word:hover,.orbit-word:focus-visible{color:var(--accent);border-color:var(--accent);box-shadow:0 0 15px #82ceba30;z-index:400!important}.orbit-word.selected{color:var(--accent);border-color:var(--accent);background:var(--surface2);box-shadow:0 0 22px #82ceba22}.orbit-crosshair{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;opacity:.2}.orbit-crosshair span{font-size:72px;color:var(--accent)}.orbit-corner{position:absolute;width:21px;height:21px;border-color:var(--accent);border-style:solid;opacity:.65;pointer-events:none}.orbit-corner.top-left{left:14px;top:14px;border-width:1px 0 0 1px}.orbit-corner.top-right{right:14px;top:14px;border-width:1px 1px 0 0}.orbit-corner.bottom-left{left:14px;bottom:14px;border-width:0 0 1px 1px}.orbit-corner.bottom-right{right:14px;bottom:14px;border-width:0 1px 1px 0}.orbit-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.orbit-bottom button{background:var(--surface);border:1px solid var(--line);color:var(--accent);width:40px;height:38px;border-radius:6px;font-size:22px}.orbit-bottom p{color:var(--muted);font-size:9px;text-align:center;margin:0;line-height:1.9}.orbit-bottom p span{font-size:8px;opacity:.85}.orbit-shell .genre-viewport{border:0;margin:0;border-radius:0;height:530px}.selection-pulse:after{content:'';position:absolute;border:1px solid var(--accent);border-radius:50%;width:80%;aspect-ratio:1;left:10%;top:10%;pointer-events:none;animation:orbit-pulse .8s ease-out both}.music-workspace{grid-template-columns:minmax(280px,.86fr) minmax(360px,1.14fr)}.direction-panel{box-shadow:0 12px 40px #0001}.direction-panel:before{content:'';display:block;position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}.genre-cloud .genre-word{transform:none;border-color:var(--line);background:var(--surface);padding:8px 10px;min-height:38px}.genre-cloud .genre-word.selected{background:var(--accent);color:var(--bg)}@keyframes orbit-pulse{from{transform:scale(.35);opacity:.65}to{transform:scale(1.18);opacity:0}}@media(max-width:1250px){.music-workspace{grid-template-columns:minmax(250px,.85fr) minmax(300px,1.15fr)}.orbit-stage,.orbit-shell .genre-viewport{height:460px}.orbit-word{font-size:9px;padding:6px 8px;max-width:190px}}@media(max-width:1020px){.music-workspace{display:flex;flex-direction:column}.direction-panel,.wheel-panel{width:100%}.direction-panel{position:static}.orbit-stage,.orbit-shell .genre-viewport{height:500px}.orbit-word{font-size:11px;padding:8px 10px;max-width:235px}}@media(max-width:650px){.orbit-stage,.orbit-shell .genre-viewport{height:390px}.orbit-word{font-size:10px;padding:8px 10px;min-height:38px;max-width:205px}.orbit-toolbar .text-button,.view-switch button{min-height:42px}.orbit-toolbar .text-button{font-size:10px}.orbit-bottom button{width:44px;height:44px}.orbit-corner{width:15px;height:15px}.orbit-bottom p{font-size:9px}.orbit-bottom p span{font-size:8px}.music-workspace .wheel-panel{order:-1}.direction-panel h2{min-height:0}.music-intro h1{font-size:44px}.music-intro .source-link{font-size:10px}}@media(prefers-reduced-motion:reduce){.selection-pulse:after{animation:none;display:none}.orbit-word{transition:none}}

/* The orbit's depth ordering belongs inside the page, below fixed navigation. */
.music-page{position:relative;isolation:isolate;z-index:0}
.orbit-shell,.orbit-stage{isolation:isolate;position:relative;z-index:0}
.wheel-panel-top{justify-content:flex-end}
.orbit-bottom{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.orbit-bottom p{grid-column:2;margin:0;text-align:center;line-height:1.9}
.orbit-bottom #rotate-right{grid-column:3}
.direction-panel h2{font-family:OpenDyslexic,system-ui,sans-serif;font-size:clamp(23px,2.4vw,32px);font-weight:700;font-style:italic;line-height:1.5}
#music-output{font-family:inherit}

/* A real, scalable six-face die. The full control is keyboard/touch operable. */
.wheel-actions{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;margin:24px 0}
.wheel-actions>button:not(.roll){padding:0;width:44px;height:48px;font-size:20px}
.wheel-actions .roll{display:flex;align-items:center;justify-content:center;gap:20px;position:relative;min-width:0;min-height:118px;padding:18px 12px;border:1px solid #9af3da80;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 25% 25%,#92e9d522,transparent 64%),linear-gradient(135deg,#18373e,#0c202c 70%);color:#b7ffe9;box-shadow:inset 0 1px 0 #e4fff426,0 10px 32px #0003;isolation:isolate;transition:border-color .2s,box-shadow .2s,background .2s}
.wheel-actions .roll:hover{color:#d8fff3;filter:none;border-color:#c8ffed;box-shadow:inset 0 1px 0 #e4fff440,0 0 28px #85e2c72b,0 12px 32px #0004}
.wheel-actions .roll:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.wheel-actions .roll:active:not(:disabled){box-shadow:inset 0 2px 18px #0005,0 0 20px #85e2c720}
.wheel-actions .roll.is-rolling{opacity:1;cursor:progress}
.roll-label{font-size:11px;line-height:1.9;font-weight:700;letter-spacing:.3px;position:relative;z-index:1;text-align:left}
.dice-scene{display:block;position:relative;flex:0 0 72px;width:72px;height:78px;perspective:650px;pointer-events:none}
.dice-cube{position:absolute;width:52px;height:52px;left:10px;top:8px;transform-style:preserve-3d;transform:rotateX(var(--die-x,-22deg)) rotateY(var(--die-y,-32deg));transition:transform .4s cubic-bezier(.16,.8,.25,1);will-change:transform}
.dice-face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:2px;padding:11px;border-radius:10px;border:1px solid #caffeead;backface-visibility:hidden;background:radial-gradient(ellipse at 25% 10%,#92dccb44,transparent 66%),linear-gradient(140deg,#28555d 2%,#132d3b 48%,#071623 95%);box-shadow:inset 0 0 0 3px #9fe7d31a,inset 0 0 0 5px #04131d85,inset 0 -3px 8px #0007,0 0 2px #b4f9e999}
.dice-face:before{content:'';position:absolute;inset:6px;border:1px solid #b5efd42a;border-radius:5px;pointer-events:none}
.dice-face:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#edfff218,transparent 40%,#ddab7030);pointer-events:none}
.dice-face.face-front{transform:translateZ(26px)}.dice-face.face-back{transform:rotateY(180deg) translateZ(26px)}.dice-face.face-right{transform:rotateY(90deg) translateZ(26px)}.dice-face.face-left{transform:rotateY(-90deg) translateZ(26px)}.dice-face.face-top{transform:rotateX(90deg) translateZ(26px);background:linear-gradient(140deg,#456e73,#142f3b)}.dice-face.face-bottom{transform:rotateX(-90deg) translateZ(26px)}
.pip{display:block;align-self:center;justify-self:center;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f2fff5,#c1ffe8 48%,#77bfa6);box-shadow:0 0 6px #b1ffde80,0 1px 2px #000,inset 0 1px 1px #fff8}
.pip-1{grid-area:1/1}.pip-2{grid-area:1/2}.pip-3{grid-area:1/3}.pip-4{grid-area:2/1}.pip-5{grid-area:2/2}.pip-6{grid-area:2/3}.pip-7{grid-area:3/1}.pip-8{grid-area:3/2}.pip-9{grid-area:3/3}
.dice-halo{position:absolute;inset:-6px -10px;border:1px solid #b3ead426;border-radius:50%;transform:rotateX(62deg) rotateZ(-24deg);box-shadow:0 0 16px #a5f9d81a}
.dice-shadow{position:absolute;left:6px;right:6px;height:9px;bottom:0;border-radius:50%;background:#0009;filter:blur(4px);box-shadow:0 0 15px #a7efcd44}
.roll:hover .dice-cube{transform:translateY(-3px) rotateX(var(--die-x,-22deg)) rotateY(var(--die-y,-32deg))}
.is-rolling .dice-cube{animation:direction-dice-roll .82s cubic-bezier(.18,.68,.25,1) both}
.is-rolling .dice-shadow{animation:direction-shadow .82s ease-out both}
.direction-changed input,.direction-changed select{animation:direction-field-flash 1.2s ease-out}
.brief-fields textarea{display:block;width:100%;min-width:0;max-width:100%;min-height:82px;resize:vertical;border:1px solid var(--line);background:var(--bg);border-radius:4px;color:var(--text);font:inherit;line-height:1.9;padding:10px;margin-top:5px}.direction-changed textarea{animation:direction-field-flash 1.2s ease-out}
@keyframes direction-dice-roll{0%{transform:rotateX(-22deg) rotateY(-32deg)}28%{transform:translateY(-14px) rotateX(170deg) rotateY(220deg) rotateZ(16deg)}65%{transform:translateY(-7px) rotateX(400deg) rotateY(520deg) rotateZ(-10deg)}84%{transform:translateY(3px) rotateX(var(--die-x,-22deg)) rotateY(var(--die-y,-32deg))}100%{transform:translateY(0) rotateX(var(--die-x,-22deg)) rotateY(var(--die-y,-32deg))}}
@keyframes direction-shadow{30%{transform:scale(.7);opacity:.4}85%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes direction-field-flash{0%{border-color:var(--accent);box-shadow:0 0 0 2px #82ceba20}100%{border-color:var(--line);box-shadow:none}}
[data-theme=light] .wheel-actions .roll{background:radial-gradient(ellipse at 25% 20%,#9ee8cd70,transparent 65%),linear-gradient(135deg,#eef8f2,#d6e8e2);color:#1c5146;border-color:#4e9c84}
[data-theme=light] .roll-label{color:#1c5146}
@media(max-width:600px){.wheel-actions{gap:8px;grid-template-columns:40px minmax(0,1fr) 40px}.wheel-actions>button:not(.roll){width:40px}.wheel-actions .roll{flex-direction:column;gap:8px;padding:14px 8px;min-height:151px}.roll-label{text-align:center;font-size:11px;line-height:1.8}.dice-scene{flex-basis:78px}.direction-panel{min-width:0}.brief-fields input,.brief-fields select{min-width:0;max-width:100%}}
@media(prefers-reduced-motion:reduce){.dice-cube,.wheel-actions .roll{transition:none}.roll:hover .dice-cube{transform:rotateX(var(--die-x,-22deg)) rotateY(var(--die-y,-32deg))}.is-rolling .dice-cube,.is-rolling .dice-shadow,.direction-changed input,.direction-changed select,.direction-changed textarea{animation:none}}

/* Preserve the chosen sentence casing and keep the mobile introduction compact. */
.music-intro h1{text-transform:none;line-height:1.4;letter-spacing:-.5px}.music-intro h1 em{text-transform:none}.dice-sound{display:block;margin:-13px auto 14px;min-height:36px;padding:5px 12px;color:var(--accent)}
@media(max-width:650px){.music-intro h1{font-size:clamp(22px,6vw,28px);line-height:1.45;margin:10px 0 14px}.music-intro{padding-bottom:22px}.music-intro>div{min-width:0}}

.roll-keep{display:block;margin:10px 0 24px;color:var(--muted);font-size:11px}
.music-creation{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:clamp(18px,3vw,36px);margin:30px 0;min-width:0}
.creation-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.creation-heading h2{font-size:clamp(19px,2vw,25px);line-height:1.6;margin:0;color:var(--accent);font-style:italic}
.creation-heading a{color:var(--accent);font-size:11px;line-height:1.8}
.creation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:18px 0}
.creation-grid label,.lyrics-heading label{display:block;color:var(--muted);font-size:12px;line-height:1.8;min-width:0}
.creation-wide{grid-column:1/-1}
.music-creation textarea,.music-creation input:not([type=checkbox]),.music-creation select,.roll-keep select{display:block;width:100%;max-width:100%;min-width:0;margin-top:8px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--text);padding:12px;font:inherit;line-height:1.9}
.music-creation textarea{resize:vertical;min-height:110px}
.music-creation select,.roll-keep select{min-height:48px}
.music-creation input[type=range]{padding:0;accent-color:var(--accent);min-height:40px}
.creation-grid output{float:right;color:var(--accent)}
.creation-options{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0;padding:16px 0}
.creation-options summary{cursor:pointer;color:var(--accent);line-height:1.9;min-height:40px;display:flex;align-items:center;gap:10px}
.creation-options summary:before{content:'+'}.creation-options[open] summary:before{content:'−'}
.lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}
#creation-lyrics{min-height:240px}#lyrics-section.expanded #creation-lyrics{min-height:65vh}
#copy-lyrics{display:block;min-height:46px;width:100%;margin-top:12px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--accent);font:inherit;text-align:center}
.music-status{text-align:center;min-height:0;font-size:12px;color:var(--accent)}.music-status:empty{display:none}
.music-creation [hidden]{display:none!important}
@media(max-width:650px){.creation-grid{grid-template-columns:minmax(0,1fr);gap:18px}.creation-heading{justify-content:center;text-align:center}.creation-heading a{width:100%}.music-creation{padding:18px 14px}.music-creation select{font-size:12px}.music-creation textarea,.music-creation input[type=text]{font-size:16px;letter-spacing:0}}

/* Separate categories from choices, with only one category open at a time. */
.template-picker{min-width:0;margin:10px 0 16px}
.template-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:18px}
.template-heading h3{font-size:14px;color:var(--text);margin:0;letter-spacing:0}
#active-template{font-size:12px;line-height:1.7;color:var(--accent);letter-spacing:0;overflow-wrap:anywhere}
#template-groups{display:grid;gap:16px}
.music-template-group{border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0}
.music-template-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 18px;min-height:58px;cursor:pointer;list-style:none;color:var(--text);font-size:14px;font-weight:700;line-height:1.65;letter-spacing:0;overflow-wrap:anywhere}
.music-template-group>summary::-webkit-details-marker{display:none}
.music-template-group>summary:after{content:'+';color:var(--accent);font-size:20px;font-weight:400;flex:none}
.music-template-group[open]>summary:after{content:'−'}
.music-template-group.has-selection{border-color:var(--accent)}
.music-template-choices{display:grid;gap:10px;padding:0 14px 14px}
.music-template-choices button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--text);font:inherit;font-size:13px;letter-spacing:0;line-height:1.7;text-align:left;white-space:normal;overflow-wrap:anywhere}
.music-template-choices button:before{content:'';flex:0 0 12px;width:12px;height:12px;border:1px solid var(--muted);border-radius:50%}
.music-template-choices button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--surface2)}
.music-template-choices button[aria-pressed=true]:before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--bg)}
.music-template-choices button:focus-visible,.music-template-group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.music-creation input[type=hidden]{display:none!important}
.music-project-review{margin:28px 0 16px;border:1px solid var(--line);border-radius:8px;min-width:0}
.music-project-review>summary{padding:16px 32px;position:relative;text-align:center;cursor:pointer;list-style:none;color:var(--accent);font-size:12px;line-height:1.8}
.music-project-review>summary::-webkit-details-marker{display:none}
.music-project-review>summary:before{content:'▸';position:absolute;left:14px}.music-project-review[open]>summary:before{content:'▾'}
#music-project-preview{white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;max-height:500px;padding:18px;margin:0;border-top:1px solid var(--line);background:var(--bg);font:13px/1.9 OpenDyslexic,system-ui,sans-serif;letter-spacing:0}
.music-project-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.music-project-actions button{width:100%;min-height:48px;padding:13px 16px;font:inherit;font-size:12px;line-height:1.8;letter-spacing:0;text-align:center;white-space:normal;border:1px solid var(--line);border-radius:6px}
.music-project-actions .quiet{background:var(--bg);color:var(--accent)}
#project-status{grid-column:1/-1;margin:0;text-align:center}
@media(max-width:650px){.template-heading{display:block}.template-heading h3{margin-bottom:9px}.music-template-group>summary{padding:16px 14px}.music-template-choices{padding:0 10px 12px}.music-template-choices button{padding:13px 12px;font-size:14px}.music-project-actions{grid-template-columns:minmax(0,1fr)}}

.workspace-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 28px;max-width:660px}
.workspace-modes button{min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;letter-spacing:0;line-height:1.6}
.workspace-modes button[aria-pressed=true]{border-color:var(--accent);background:var(--surface2);color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.workspace-modes button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[data-music-only][hidden]{display:none!important}
.mode-fields{margin-top:24px;min-width:0}
.mode-field{margin-bottom:24px;min-width:0}
.mode-field>label{display:block;font-size:14px;color:var(--text);letter-spacing:0;line-height:1.8}
.mode-field textarea{font-size:16px;line-height:1.9;letter-spacing:0;min-height:150px}
#speech-script{min-height:280px}#sound-description{min-height:220px}
.field-copy{display:block;width:100%;min-height:44px;margin-top:12px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--accent);font:inherit;font-size:12px;letter-spacing:0;line-height:1.8}
.field-copy:disabled{opacity:.45;cursor:default}
.music-project-actions .project-open{grid-column:1/-1;display:flex;justify-content:center;align-items:center;min-height:46px;padding:12px;border:1px solid var(--line);border-radius:6px;color:var(--accent);background:var(--bg);font-size:12px;letter-spacing:0;line-height:1.8;text-align:center}
@media(max-width:650px){.workspace-modes{gap:8px}.workspace-modes button{padding:12px 8px;font-size:13px}.mode-fields .creation-grid select,.mode-fields .creation-grid input[type=number]{font-size:16px;letter-spacing:0}}

.music-select-field{min-width:0}
.music-select-field>.themed-select{margin-top:8px}
.music-select-field .themed-select-trigger{min-height:48px;background:var(--bg);font-size:12px;line-height:1.9}
.brief-fields .music-select-field>.themed-select{margin-top:5px}
.brief-fields .themed-select-trigger{min-height:44px}
.music-select-field select option{background:var(--surface);color:var(--text)}
.direction-changed .themed-select-trigger{animation:direction-field-flash 1.2s ease-out}
@media(prefers-reduced-motion:reduce){.direction-changed .themed-select-trigger{animation:none}}
