.melody-v4 .mt-cc-page .mt-cc-grid{gap:var(--mt-gap,20px);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}@media (min-width:1101px){.melody-v4 .mt-cc-page .mt-cc-grid{grid-template-columns:minmax(0,1fr) minmax(240px,300px)}}.melody-v4 .mt-cc-page .mt-cc-main,.melody-v4 .mt-cc-page .mt-cc-rail{gap:var(--mt-gap,20px);flex-direction:column;min-width:0;display:flex}.melody-v4 .mt-cc-page .mt-page-title .mt-pro-badge{margin-left:6px;font-size:13px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-pair{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px 16px;display:flex}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);flex-direction:column;flex:0 180px;align-items:center;gap:6px;min-width:0;padding:12px;display:flex}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-diagram{min-width:var(--mt-diagram-min-width);min-height:var(--mt-diagram-min-height);place-items:center;display:grid}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-diagram svg{width:128px;height:auto}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-name{font:var(--mt-type-readout-mid);color:var(--text)}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-swap{color:var(--text-soft);align-self:center}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-swap .msi{font-size:24px}.melody-v4 :is(.mt-cc-page,.mt-scope) .mt-cc-change{color:var(--primary-ink);text-underline-offset:3px;min-height:var(--mt-touch-min,44px);background:0 0;border:1px solid #0000;text-decoration:underline}.melody-v4 :is(.mt-cc-page,.mt-scope) .mt-cc-change[aria-disabled=true]{color:var(--text-soft);cursor:not-allowed;text-decoration:none}.melody-v4 :is(.mt-cc-page,.mt-scope) .mt-cc-card[data-next=true]{border-color:var(--mt-beat-lit);box-shadow:inset 0 0 0 1px var(--mt-beat-lit)}.melody-v4 :is(.mt-cc-page,.mt-scope) .mt-cc-next-tag{border:1px solid var(--mt-beat-lit);color:var(--text);font:var(--mt-type-caption);border-radius:999px;padding:1px 8px;font-weight:700}.melody-v4 :is(.mt-cc-page,.mt-scope) .mt-cc-next{text-align:center;color:var(--text);font:var(--mt-type-label);margin:10px 0 0;font-size:15px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-picker{flex-direction:column;align-items:stretch;gap:8px;width:100%;display:flex}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-select{min-height:var(--mt-touch-min,44px);border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-solid);color:var(--text);font:var(--mt-type-label);padding:0 10px;font-size:15px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-select:focus-visible,.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-card .mt-btn:focus-visible,.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-stage .mt-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--secondary)72%,var(--text));outline-offset:2px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-ring{--p:0;background:conic-gradient(var(--mt-beat-lit)calc(var(--p)*1%),var(--surface-3)0);border-radius:50%;place-items:center;width:180px;height:180px;margin:20px auto 8px;display:grid;position:relative}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-ring-centre{background:var(--surface-solid);text-align:center;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:150px;height:150px;display:flex}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-ring-count{font:var(--mt-type-ring-count);color:var(--text)}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-ring-caption{max-width:124px;font:var(--mt-type-caption);color:var(--text-soft)}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels{margin:18px 4px 4px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels-track{background:var(--surface-3);border:1px solid var(--line);border-radius:999px;height:12px;position:relative}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels-track>i{background:var(--mt-beat-lit);border-radius:999px;position:absolute;inset:0 auto 0 0}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels-track>b{background:var(--text);width:2px;margin-left:-1px;position:absolute;top:-4px;bottom:-4px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels-captions{height:40px;margin-top:4px;position:relative}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels-captions>em+em{top:20px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels-captions>em{font:var(--mt-type-caption-mono);color:var(--text-soft);white-space:nowrap;font-style:normal;position:absolute;top:0;transform:translate(-50%)}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-start{background:var(--cta-gradient);color:var(--mt-on-primary);border:0}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-go{min-width:160px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-mic{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-line{margin-top:12px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-result{border-radius:var(--radius-sm);background:color-mix(in srgb,var(--success)12%,transparent);color:var(--text);font:var(--mt-type-label);flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px;padding:12px 14px;font-size:15px;display:flex}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-result p{flex:220px;margin:0}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-result>.msi{color:var(--success-ink)}.melody-v4 .mt-page .mt-cc-level-list{color:var(--text);font:var(--mt-type-label);flex-direction:column;gap:6px;margin:0 0 12px;padding:0;font-size:14px;list-style:none;display:flex}.melody-v4 .mt-page .mt-cc-rail-title{align-items:center;gap:8px;display:flex}.melody-v4 .mt-page .mt-cc-rail-title .msi{color:var(--text-soft)}.melody-v4 .mt-page .mt-cc-spark{width:100%;height:46px;display:block;overflow:visible}.melody-v4 .mt-page .mt-cc-spark polyline{fill:none;stroke:var(--mt-beat-lit);stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.melody-v4 .mt-page .mt-cc-spark-dot{stroke:var(--mt-beat-lit);stroke-width:7px;stroke-linecap:round;vector-effect:non-scaling-stroke}.melody-v4 .mt-page .mt-cc-spark-ref{stroke:var(--line-strong);stroke-width:1px;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.melody-v4 .mt-page .mt-cc-history-line{color:var(--text);font:var(--mt-type-caption);margin:8px 0 0;font-size:14px}.melody-v4 .mt-page .mt-cc-pair-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.melody-v4 .mt-cc-page .mt-cc-pair-choice{width:100%;min-height:var(--mt-touch-min,44px);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);text-align:left;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:8px 12px;display:flex}.melody-v4 .mt-cc-page .mt-cc-pair-choice b{font:var(--mt-type-label)}.melody-v4 .mt-cc-page .mt-cc-pair-choice small{font:var(--mt-type-caption);color:var(--text-soft)}.melody-v4 .mt-cc-page .mt-cc-pair-choice[aria-current=true]{border-color:var(--mt-beat-lit);box-shadow:inset 0 0 0 1px var(--mt-beat-lit)}.melody-v4 .mt-cc-page .mt-cc-pair-choice[aria-disabled=true]{cursor:not-allowed;color:var(--text-soft)}.melody-v4 .mt-cc-page .mt-cc-pair-choice:focus-visible{outline:3px solid color-mix(in srgb,var(--secondary)72%,var(--text));outline-offset:2px}.melody-v4 .mt-page .mt-cc-history-failed{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.melody-v4 .mt-cc-page .mt-cc-read-only{gap:var(--mt-gap,20px);margin-top:var(--mt-gap,20px);flex-direction:column;display:flex}@media (min-width:1101px){.melody-v4 .mt-cc-page .mt-cc-read-only{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;display:grid}.melody-v4 .mt-cc-page .mt-cc-read-only>.mt-note{grid-column:1/-1}}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-save{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:10px;display:flex}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-preview .mt-btn{pointer-events:none}@media (max-width:599px){.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-card{flex-basis:140px;padding:10px 8px}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-swap{display:none}}@media (forced-colors:active){.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-ring{forced-color-adjust:none;border:2px solid canvastext}.melody-v4 :is(.mt-page,.mt-scope) .mt-cc-levels-track>i{background:highlight}.melody-v4 .mt-page .mt-cc-spark polyline,.melody-v4 .mt-page .mt-cc-spark-dot{stroke:canvastext}.melody-v4 .mt-cc-page .mt-cc-pair-choice[aria-current=true]{border:2px solid highlight}}