.quality-page{align-items:start}.quality-table-wrap{margin:0 32px 22px}.quality-table td:first-child{white-space:normal}.quality-table code{font-size:.94em}.quality-callout{margin:0 32px 26px;padding:15px 17px;border:1px solid #dbe7ef;border-radius:10px;background:#f8fafc;line-height:1.55}.quality-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 32px 26px}.quality-mode-grid a{display:flex;flex-direction:column;gap:6px;padding:17px;border:1px solid #dfe7ed;border-radius:10px;background:#f8fafc;text-decoration:none;color:inherit}.quality-mode-grid strong{font-size:1.05rem;color:#184d6b}.quality-mode-grid span,.quality-three span,.quality-method-grid span{color:#4b5563;line-height:1.5}.quality-three,.quality-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 32px 26px}.quality-three article,.quality-method-grid article,.quality-faq-grid article{padding:16px 17px;border:1px solid #e2eaf0;border-radius:10px;background:#f8fafc}.quality-three article,.quality-method-grid article{display:flex;flex-direction:column;gap:6px}.quality-source-note{margin:0 32px 28px;color:#4b5563;line-height:1.55}.quality-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 32px 28px}.quality-faq-grid h3{margin:0 0 6px;font-size:1.02rem;color:#184d6b}.quality-faq-grid p{margin:0;color:#4b5563;line-height:1.5}@media(max-width:900px){.quality-mode-grid,.quality-three,.quality-method-grid{grid-template-columns:1fr}}@media(max-width:720px){.quality-table-wrap,.quality-callout,.quality-mode-grid,.quality-three,.quality-method-grid,.quality-source-note,.quality-faq-grid{margin-left:18px;margin-right:18px}.quality-faq-grid{grid-template-columns:1fr}}
/* Keep every quality-page card inside the comparison grid, including long command strings and explanatory copy. */
.quality-page{min-width:0;width:100%}
.quality-page>*{min-width:0;max-width:100%;box-sizing:border-box}
.quality-page>.card{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.quality-page>.card>p{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
.quality-page code{overflow-wrap:anywhere;word-break:normal}
.frequency-context{margin:0 32px 18px;padding:14px 16px;border:1px solid #dbe7ef;border-radius:10px;background:#f8fafc;line-height:1.55;color:#374151}
.frequency-context strong{color:#184d6b}
@media(max-width:720px){.frequency-context{margin-left:18px;margin-right:18px}}

/* Keep quality tables inside the card. Long LAME commands may wrap at argument boundaries instead of widening the table. */
.quality-table-wrap{width:auto;max-width:calc(100% - 64px);box-sizing:border-box;overflow-x:auto}
.quality-table{width:100%;max-width:100%;table-layout:auto}
.quality-table td:first-child,.quality-table th:first-child{min-width:0}
.quality-table td:first-child code{white-space:normal;overflow-wrap:normal;word-break:normal}
@media(max-width:720px){.quality-table-wrap{max-width:calc(100% - 36px)}}

/* Direct explanatory paragraphs in quality cards should use the same content inset as card headings, tables and callouts. */
.quality-page > .card > p {
    margin-left: 32px;
    margin-right: 32px;
    max-width: calc(100% - 64px);
    box-sizing: border-box;
    overflow-wrap: break-word;
}

@media (max-width: 720px) {
    .quality-page > .card > p {
        margin-left: 18px;
        margin-right: 18px;
        max-width: calc(100% - 36px);
    }
}

/* LAME MP3 quality listening test */
.listening-test-card{overflow:visible!important}
.listening-test{margin:0 32px 28px;display:grid;gap:22px}
.listen-control-group{display:grid;gap:10px}
.listen-control-label{font-weight:700;color:#184d6b}
.listen-choice-row{display:flex;flex-wrap:wrap;gap:9px}
.listen-choice{appearance:none;border:1px solid #cfdde6;background:#fff;color:#234;padding:10px 14px;border-radius:9px;font:inherit;font-weight:650;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.listen-choice:hover{border-color:#8fb3c8;background:#f8fbfd}
.listen-choice.active{border-color:#1f6b91;background:#eaf4f9;color:#124e6d;box-shadow:inset 0 0 0 1px #1f6b91}
.listen-choice:focus-visible,.listen-play:focus-visible,.listen-seek:focus-visible{outline:3px solid rgba(31,107,145,.25);outline-offset:2px}
.listen-choice:disabled{cursor:wait;opacity:.58}
.listen-source-note{margin:0;color:#586573;line-height:1.5}
.listen-player{border:1px solid #d9e5ec;border-radius:12px;background:#f8fafc;padding:18px;display:grid;gap:14px}
.listen-player-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.listen-play{appearance:none;border:0;border-radius:9px;background:#17658b;color:#fff;padding:11px 18px;font:inherit;font-weight:750;min-width:102px;cursor:pointer}
.listen-play:disabled{opacity:.55;cursor:wait}
.listen-timeline{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;font-variant-numeric:tabular-nums;color:#52606d;font-size:.92rem}
.listen-seek{width:100%;accent-color:#17658b}
.listen-now{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding-top:4px;border-top:1px solid #e1e8ed}
.listen-now strong{display:block;color:#184d6b;margin-bottom:3px}
.listen-now span{display:block;color:#53616e;line-height:1.45}
.listen-status{margin:0;color:#52606d;line-height:1.5}
.listening-test.is-loading .listen-player{opacity:.82}
.listen-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 32px 26px}
.listen-info-grid article{padding:16px 17px;border:1px solid #e2eaf0;border-radius:10px;background:#f8fafc}
.listen-info-grid h3{margin:0 0 6px;color:#184d6b;font-size:1rem}
.listen-info-grid p{margin:0;color:#4b5563;line-height:1.5}
.listen-mode-link{margin:0 32px 26px;padding:16px 18px;border:1px solid #dbe7ef;border-radius:10px;background:#f8fafc;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.listen-mode-link p{margin:0;line-height:1.5;color:#475569}
@media(max-width:800px){.listen-info-grid{grid-template-columns:1fr}.listen-player-main{grid-template-columns:1fr}.listen-play{justify-self:start}.listen-now{grid-template-columns:1fr}}
@media(max-width:720px){.listening-test,.listen-info-grid,.listen-mode-link{margin-left:18px;margin-right:18px}.listen-timeline{grid-template-columns:38px minmax(0,1fr) 38px;gap:7px}}

/* Listening-test diagnostics */
.listen-debug{margin-top:18px;border:1px solid #d9e5ec;border-radius:12px;background:#fbfcfd;overflow:hidden}
.listen-debug>summary{cursor:pointer;padding:13px 16px;font-weight:700;color:#184d6b;background:#f6f9fb;user-select:none}
.listen-debug[open]>summary{border-bottom:1px solid #e1e8ed}
.listen-debug-toolbar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.listen-debug-note{color:#586573;line-height:1.45;font-size:.92rem}
.listen-debug-actions{display:flex;flex-wrap:wrap;gap:8px}
.listen-debug-actions .secondary-button{font-size:.9rem;padding:8px 11px}
.listen-debug-output{margin:0 16px 16px;padding:14px;max-height:420px;overflow:auto;border:1px solid #dce5eb;border-radius:9px;background:#101820;color:#d8e5ee;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.listen-debug-output:empty::before{content:'Debug events will appear here.';color:#8fa5b4}
@media(max-width:720px){.listen-debug-toolbar{align-items:flex-start}.listen-debug-actions{width:100%}.listen-debug-actions .secondary-button{flex:1 1 auto}}

/* Listening-test source tabs and local WAV comparison */
.listen-tabs{display:flex;gap:10px;margin:0 0 0;align-items:center}
.listen-tab{appearance:none;border:1px solid #cfdde6;background:#fff;color:#234;padding:11px 17px;border-radius:10px 10px 0 0;font:inherit;font-weight:750;cursor:pointer}
.listen-tab.active{border-color:#1f6b91;background:#eaf4f9;color:#124e6d;box-shadow:inset 0 -2px 0 #1f6b91}
[data-listen-panel]{min-width:0}
[data-listen-panel][hidden]{display:none!important}
.listen-privacy-note{padding:14px 16px;border:1px solid #cfe3d5;border-radius:10px;background:#f4fbf6;color:#315b3b;line-height:1.5}
.own-file-input{display:block;max-width:100%;font:inherit;color:#334;padding:8px 0}
.own-file-input::file-selector-button{border:1px solid #cfdde6;background:#fff;color:#184d6b;padding:10px 14px;border-radius:9px;font:inherit;font-weight:700;cursor:pointer;margin-right:12px}
.own-file-input::file-selector-button:hover{border-color:#8fb3c8;background:#f8fbfd}
.listen-memory{margin:0;color:#667582;font-size:.92rem}
.own-generate{width:max-content;max-width:100%}
.own-progress{display:grid;gap:8px;max-width:760px}
.own-progress-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:#586573;font-size:.92rem}
.own-progress progress{width:100%;height:13px;accent-color:#17658b}
@media(max-width:720px){.listen-tabs{margin-left:0;margin-right:0;flex-wrap:wrap}.listen-tab{border-radius:9px}.own-file-input{width:100%}}


/* Own-WAV listening comparison polish */
.own-wav-test{
    gap:20px;
}
.own-wav-test .listen-control-group{
    min-width:0;
}
.own-wav-test .own-progress{
    width:100%;
    max-width:none;
}
.own-wav-test .listen-player{
    margin-top:2px;
}
.own-wav-test .listen-now{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding-top:8px;
}
.own-wav-test .listen-now>div{
    min-width:0;
}
.own-wav-test .listen-now span{
    overflow-wrap:anywhere;
}
.own-wav-test .listen-status{
    padding:0 2px;
}


/* Keep the second local-comparison paragraph aligned with the card copy above it. */
.card-title-row .own-wav-explainer{
    margin-top:14px;
}


/* Listening-test section spacing. */
.quality-page > .card + .card{
    margin-top:18px;
}
.quality-page > [data-listen-panel] > .card + .card{
    margin-top:18px;
}
.quality-page > [data-listen-panel]:not([hidden]){
    margin-bottom:18px;
}