.volpiano-editor {
    --vp-surface: #f6f6f6;
    --vp-surface-strong: #ececec;
    --vp-paper: #ffffff;
    --vp-border: #d8d8d8;
    --vp-border-strong: #c5c5c5;
    --vp-text: #2d2d2d;
    --vp-muted: #666666;
    --vp-focus: #2d5d91;
    --vp-valid: #2e7b34;
    --vp-invalid: #b43b24;

    background: linear-gradient(180deg, #fbfbfb 0%, var(--vp-surface) 100%);
    border: 1px solid var(--vp-border);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    padding: 0.85rem;
    display: grid;
    gap: 0.7rem;
    color: var(--vp-text);
}

.volpiano-editor__header {
    border-bottom: 1px solid var(--vp-border);
    padding-bottom: 0.5rem;
}

.volpiano-editor__title {
    color: #222222;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.volpiano-editor__help {
    margin: 0.25rem 0 0;
    color: var(--vp-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.volpiano-editor__toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.45rem;
}

.volpiano-editor__tool-group {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--vp-border);
    border-radius: 3px;
    padding: 0.38rem;
    display: grid;
    gap: 0.32rem;
}

.volpiano-editor__tool-group-title {
    color: #575757;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px dashed #d8d8d8;
    padding-bottom: 0.12rem;
}

.volpiano-editor__tool-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.volpiano-editor__tool-group--notes {
    background: linear-gradient(180deg, #fcfcfc 0%, #f5f7fa 100%);
    border-color: #cfd9e5;
}

.volpiano-editor__tool-group--notes .volpiano-editor__tool-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.95rem, 1fr));
    gap: 0.34rem;
}

.volpiano-editor__tool-group--notes .volpiano-editor__tool {
    min-width: 0;
    min-height: 3.1rem;
    padding: 0.25rem 0.2rem;
}

.volpiano-editor__tool-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    line-height: 1;
}

.volpiano-editor__tool-note-token {
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.volpiano-editor__tool-note-pitch {
    font-size: 0.74rem;
    font-weight: 600;
    color: #3f4f62;
}

.volpiano-editor__tool-group--separators {
    background: linear-gradient(180deg, #fbfbfc 0%, #f2f4f7 100%);
    border-color: #d2d7df;
}

.volpiano-editor__tool-group--alterations {
    background: linear-gradient(180deg, #fff8f4 0%, #fdeedf 100%);
    border-color: #e8caa8;
}

.volpiano-editor__tool-group--alterations .volpiano-editor__tool-group-title {
    color: #8a4f16;
    border-bottom-color: #e8caa8;
}

.volpiano-editor__tool-group--alterations .volpiano-editor__tool {
    border-color: #ddb58b;
    background: linear-gradient(180deg, #fff3e6 0%, #f9e2cb 100%);
    color: #6f3d0d;
    font-weight: 600;
}

.volpiano-editor__tool-group--alterations .volpiano-editor__tool:hover {
    background: #f4d9ba;
}

.volpiano-editor__tool-group--ornaments {
    background: linear-gradient(180deg, #f9fbff 0%, #eef3fb 100%);
    border-color: #ced8ea;
}

.volpiano-editor__tool-group--structure {
    background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
    border-color: #d3d3d3;
}

.volpiano-editor__tool {
    min-width: 2.65rem;
    padding: 0.34rem 0.58rem;
    border: 1px solid var(--vp-border-strong);
    border-radius: 3px;
    background: linear-gradient(180deg, #f4f4f4 0%, var(--vp-surface-strong) 100%);
    color: var(--vp-text);
    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.28rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.volpiano-editor__tool:hover {
    background: #e4e4e4;
}

.volpiano-editor__tool:active {
    background: #dddddd;
}

.volpiano-editor__tool:focus {
    outline: none;
    border-color: var(--vp-focus);
    box-shadow: 0 0 0 2px rgba(45, 93, 145, 0.16);
}

.volpiano-editor__tool--clear {
    min-width: 4.35rem;
}

.volpiano-editor__tool--action {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.15;
    min-width: 4.35rem;
    white-space: nowrap;
}

.volpiano-editor__tool--guide {
    border-color: #b8c9dd;
    background: linear-gradient(180deg, #f6f9fc 0%, #e9f0f8 100%);
}

.volpiano-editor__tool--guide:hover {
    background: #dfe9f4;
}

.volpiano-editor__tool--toggle {
    border-color: #b9c7aa;
    background: linear-gradient(180deg, #f7faf1 0%, #e9f0df 100%);
}

.volpiano-editor__tool--toggle:hover {
    background: #e2ebd6;
}

.volpiano-editor__tool--toggle-active {
    border-color: #6f8f45;
    background: linear-gradient(180deg, #e3f0d0 0%, #d4e7ba 100%);
    color: #2f4321;
    box-shadow: inset 0 0 0 1px rgba(111, 143, 69, 0.28);
}

.volpiano-editor__tool:disabled {
    background: #ededed;
    color: #8d8d8d;
    border-color: #d4d4d4;
    cursor: not-allowed;
    box-shadow: none;
}

.volpiano-editor__tool-group--actions .volpiano-editor__tool-group-row {
    justify-content: flex-end;
    align-items: flex-start;
}

.volpiano-editor__input {
    border: 1px solid var(--vp-border-strong);
    border-radius: 3px;
    padding: 0.62rem 0.72rem;
    font-family: "Source Code Pro", Consolas, Monaco, monospace;
    font-size: 1.32rem;
    line-height: 1.25;
    color: #1f2730;
    background: var(--vp-paper);
    min-height: 2.7rem;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.volpiano-editor__input:focus {
    outline: none;
    border-color: var(--vp-focus);
    box-shadow: inset 0 0 0 1px rgba(45, 93, 145, 0.3);
}

.volpiano-editor__message {
    min-height: 1.05rem;
    color: var(--vp-muted);
    font-size: 0.84rem;
    line-height: 1.2;
}

.volpiano-editor__preview-block {
    display: grid;
    gap: 0.32rem;
}

.volpiano-editor__preview-label {
    color: var(--vp-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.volpiano-editor__preview {
    min-height: 2.5rem;
    border: 1px solid var(--vp-border);
    border-radius: 3px;
    padding: 0.5rem 0.68rem;
    color: #2b2b2b;
    background: var(--vp-paper);
    font-family: "Source Code Pro", Consolas, Monaco, monospace;
    font-size: 1.2rem;
    line-height: 1.22;
    word-break: break-word;
}

.volpiano-editor__staff {
    min-height: 6rem;
    border: 1px solid var(--vp-border);
    border-radius: 3px;
    padding: 0.4rem;
    background: var(--vp-paper);
    overflow: hidden;
}

.volpiano-editor--invalid {
    border-color: #d8b6ad;
    background: linear-gradient(180deg, #fbf7f7 0%, #f7f1f1 100%);
}

.volpiano-editor--invalid .volpiano-editor__message {
    color: var(--vp-invalid);
}

.volpiano-editor--invalid .volpiano-editor__input,
.volpiano-editor--invalid .volpiano-editor__staff {
    border-color: var(--vp-invalid);
}

.volpiano-editor--valid .volpiano-editor__message {
    color: var(--vp-valid);
}

.volpiano-render {
    display: grid;
    gap: 0.5rem;
    border: 1px solid #dddddd;
    border-radius: 3px;
    padding: 0.52rem 0.62rem;
    background: #fafafa;
}

.volpiano-render__text {
    display: block;
    margin: 0;
    font-family: "Source Code Pro", Consolas, Monaco, monospace;
    font-size: 0.98rem;
    line-height: 1.3;
    color: #2f2f2f;
    word-break: break-word;
}

.volpiano-render__staff {
    min-height: 3.4rem;
    border-top: 1px solid #dddddd;
    padding-top: 0.34rem;
    overflow: hidden;
}

.volpiano-staff-placeholder {
    display: block;
    color: #767676;
    font-size: 0.84rem;
    line-height: 1.24;
    padding: 0.34rem 0.24rem;
}

.volpiano-staff-placeholder--invalid {
    color: var(--vp-invalid);
}

.volpiano-staff-block {
    display: grid;
    gap: 0.34rem;
}

.volpiano-staff-row {
    display: block;
    min-width: 0;
}

.volpiano-staff-svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    animation: volpiano-staff-fade 120ms ease-out;
}

.volpiano-staff-line {
    stroke: #d6d9de;
    stroke-width: 1;
}

.volpiano-staff-ledger {
    stroke: #aeb6c1;
    stroke-width: 1.25;
    stroke-linecap: round;
}

.volpiano-staff-note {
    fill: #1f2933;
    stroke: #1f2933;
    stroke-width: 0.5;
}

.volpiano-staff-note--liquescent {
    fill: #2d5d91;
    stroke: #1d3f63;
    stroke-width: 0.65;
}

.volpiano-staff-connection {
    stroke: #2a3440;
    stroke-width: 1.2;
    stroke-linecap: round;
}

.volpiano-staff-ellipsis {
    fill: #5f6f82;
    font-size: 12px;
    font-weight: 700;
    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.volpiano-staff-clef {
    display: block;
    overflow: visible;
    color: #1f2933;
    fill: currentColor;
}

.volpiano-staff-bar {
    stroke: #2f3842;
    stroke-width: 1.45;
}

.volpiano-staff-bar--double {
    stroke-width: 1.85;
}

.volpiano-staff-bar--triple {
    stroke-width: 1.7;
}

.volpiano-staff-bar--minor {
    stroke: #5f6c7d;
    stroke-width: 1.2;
    stroke-dasharray: 2 2;
}

.volpiano-staff-break {
    stroke: #8f9aa8;
    stroke-width: 1.18;
    stroke-dasharray: 2 2;
}

.volpiano-staff-marker {
    fill: #5f6f82;
    font-size: 10px;
    font-weight: 600;
    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.volpiano-staff-alteration {
    fill: #2d5d91;
    font-size: 12px;
    font-weight: 700;
    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.volpiano-staff-alteration--flat {
    fill: #2f5c8e;
}

.volpiano-staff-alteration--natural {
    fill: #336744;
}

.volpiano-staff-ornament {
    stroke: #2b3642;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.volpiano-staff-ornament--oriscus {
    fill: #2b3642;
    stroke-width: 1;
}

.volpiano-staff-ornament--liquescent {
    stroke: #2d5d91;
    fill: #2d5d91;
}

.volpiano-staff-custos {
    fill: #5a697b;
    stroke: #5a697b;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes volpiano-staff-fade {
    from {
        opacity: 0.72;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 860px) {
    .volpiano-editor {
        padding: 0.72rem;
    }

    .volpiano-editor__title {
        font-size: 1.1rem;
    }

    .volpiano-editor__tool {
        min-width: 2.45rem;
        font-size: 1.14rem;
    }

    .volpiano-editor__tool--action {
        min-width: 4rem;
        font-size: 0.82rem;
    }

    .volpiano-editor__tool-group--notes .volpiano-editor__tool-group-row {
        grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr));
    }

    .volpiano-editor__input {
        font-size: 1.14rem;
    }

    .volpiano-editor__preview {
        font-size: 1.06rem;
    }

    .volpiano-editor__staff {
        min-height: 4.75rem;
    }
}

@media (max-width: 620px) {
    .volpiano-editor__toolbar {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .volpiano-editor__tool {
        min-width: 2.3rem;
        padding: 0.3rem 0.46rem;
    }

    .volpiano-editor__tool--action {
        min-width: 3.7rem;
    }

    .volpiano-editor__tool-group-title {
        border-bottom-style: solid;
    }

    .volpiano-editor__tool-group--notes .volpiano-editor__tool-group-row {
        grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr));
        gap: 0.24rem;
    }

    .volpiano-editor__tool-group--actions .volpiano-editor__tool-group-row {
        justify-content: flex-start;
    }

    .volpiano-editor__input {
        min-height: 2.45rem;
    }

    .volpiano-editor__staff {
        min-height: 4.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .volpiano-editor__tool,
    .volpiano-editor__input,
    .volpiano-staff-svg {
        transition: none;
        animation: none;
    }
}