.intent-head { padding-block: 72px 8px; display: flex; flex-direction: column; gap: 18px; }
.intent-head h1 { text-align: left; font-size: clamp(36px, 5.5vw, 64px); }
.intent-head .lead { max-width: 680px; }
.prose { padding-block: 40px 8px; }
.prose > * { max-width: 760px; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 12px; }
.prose p, .prose li { font-size: 17px; line-height: 1.6; color: var(--text); }
.prose .muted { color: var(--muted); }
.prose a, .tool a.inline { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover, .tool a.inline:hover { color: var(--accent); }
.facts { margin: 20px 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
.facts th, .facts td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--line); }
.facts th { color: var(--muted); font-weight: 500; border-top: 0; background: var(--surface); }
.table-scroll { overflow-x: auto; }

.tool { margin-top: 8px; display: flex; flex-direction: column; gap: 16px; max-width: 860px; min-width: 0; }
.tool [hidden] { display: none !important; }
.tool .modes { display: flex; flex-wrap: wrap; gap: 10px; }
.tool .modes label { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 15px; flex: 1 1 260px; min-width: 0; }
.tool .modes label:has(input:checked) { border-color: var(--accent); }
.tool .modes input { accent-color: var(--accent); flex: none; }
.tool .modes small { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.drop { position: relative; border: 2px dashed var(--line); border-radius: 14px; background: var(--surface); padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); }
.drop.busy { cursor: progress; opacity: .85; }
.drop.off { cursor: not-allowed; opacity: .55; }
.drop strong { font-size: 22px; overflow-wrap: anywhere; }
.drop small { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bar { width: min(420px, 100%); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .4s; }
.bar.indet i { width: 40%; animation: tool-slide 1.2s ease-in-out infinite; }
@keyframes tool-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .bar.indet i { animation: none; width: 100%; opacity: .6; } }
.quota { font-family: var(--mono); font-size: 13px; color: var(--muted); line-height: 1.5; }
.status { font-family: var(--mono); font-size: 14px; color: var(--text); min-height: 1.2em; line-height: 1.5; }
.msg { font-family: var(--mono); font-size: 14px; border: 1px solid var(--warn); color: var(--warn); border-radius: 10px; padding: 14px 16px; line-height: 1.5; }
.msg a { color: inherit; }
.result { display: flex; flex-direction: column; gap: 14px; }
.result h3 { font-size: 18px; margin: 0; }
.players { display: flex; flex-direction: column; gap: 10px; }
.player { display: flex; flex-direction: column; gap: 6px; }
.player span { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.player audio { width: 100%; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.actions small { font-family: var(--mono); color: var(--muted); font-size: 13px; }
.linkish { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-family: var(--mono); font-size: 14px; text-decoration: underline; text-decoration-color: var(--accent); cursor: pointer; }
.rate { border-top: 1px dashed var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.rate .q { font-weight: 600; }
.rate .vote { display: flex; gap: 10px; }
.rate .vote button { font-size: 20px; padding: 8px 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rate textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; resize: vertical; }
.rate .err { color: var(--warn); font-family: var(--mono); font-size: 13px; min-height: 1.2em; }
.rate .thanks { color: var(--ink); font-weight: 600; }
.btn[disabled], button.btn[disabled] { opacity: .5; cursor: not-allowed; }
button.btn { font: inherit; cursor: pointer; }
.semi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.semi input[type=range] { width: 100%; min-width: 0; accent-color: var(--accent); }
.semi .val { font-family: var(--mono); font-size: 28px; font-weight: 700; min-width: 4.5rem; text-align: center; }
.opts { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 15px; }
.opts label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.opts input { accent-color: var(--accent); }
.keys { font-family: var(--mono); font-size: 14px; color: var(--muted); min-height: 1.2em; }
.fname { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 480px) { .semi { gap: 8px; } .semi .val { font-size: 22px; min-width: 2.6rem; } .semi .btn { padding-inline: 12px; } }
@media (max-width: 900px) { .drop { padding: 28px 16px; } .intent-head { padding-block: 48px 8px; } }

.stx { margin-top: 14px; }
.stx p { margin: 0 0 10px; font-size: 14px; }
.stx audio { width: 100%; }
.stx-notify .actions { margin-bottom: 4px; }
.stx-mail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.stx-mail label { font-size: 14px; opacity: .8; }
.stx-mail input { flex: 1 1 14rem; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; }
.stx-mail .btn { min-height: 44px; }
.stx-hint { flex-basis: 100%; font-size: 12px; opacity: .75; margin: 0; }
.stx-state { font-size: 14px; min-height: 1.2em; margin-top: 10px; opacity: .9; }
.stx-state.bad { color: #e5484d; }

.tool .sp { margin-top: 4px; }
.tool .sp .sp-steps, .tool .sp .sp-time-lbl, .tool .sp .sp-time-val, .tool .sp .sp-detail,
.tool .sp .sp-tips-h, .tool .sp .sp-tip { font-family: var(--mono); }
.tool .sp .sp-step { font-size: 11px; letter-spacing: .02em; }
.tool .sp .sp-main { min-height: 100px; }
.tool .sp .sp-time-lbl { height: 18px; line-height: 18px; }
.tool .sp .sp-time-val { font-size: 34px; height: 44px; line-height: 44px; }
.tool .sp .sp-time-val.txt { font-size: 16px; }
.tool .sp .sp-detail { font-size: 12px; }
.tool .sp .sp-tip { font-size: 13px; }


.quota.ok, .midi-note.ok { color: var(--ink); }
.quota.bad, .midi-note.bad { color: var(--warn); }
.midi-pack { display: flex; flex-direction: column; gap: 10px; }
.midi-pack .chk { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 14px; }
.midi-pack .midi-note:empty, .midi-pack .quota:empty { display: none; }
.daw-survey > * + * { margin-top: 10px; }
.daw-survey .q { font-weight: 600; }
.daw-survey .chips { margin: 0; }
.daw-survey .chip { text-align: left; max-width: 100%; }