.intro {
    padding:48px 20px 20px;
    text-align:center}
.intro h1 {
    font-size:clamp(24px,3.1vw,36px);
    line-height:1.55;
    margin:18px 0}
.intro p {
    color:#666;
    line-height:1.9;
    margin-bottom:0}
.tool-container {
    max-width:1200px}
.analyzer {
    background:#2b2b2b;
    color:#e0e0e0;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px #0003}
.analyzer-header {
    background:#1f1f1f;
    padding:18px 24px;
    border-bottom:1px solid #444;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center}
.analyzer-header i {
    color:#00aeef;
    margin-right:8px}
.pro-badge {
    background:#e91e63;
    color:white;
    padding:3px 6px;
    border-radius:4px;
    font-size:10px;
    letter-spacing:1px;
    margin-left:8px}
.local-badge {
    font-size:10px;
    letter-spacing:1.2px;
    color:#69d2a0}
.analyzer h2 {
    font-size:18px;
    color:#fff;
    margin:0 0 10px}
.upload {
    text-align:center;
    padding:32px 20px;
    background:#252525;
    border:2px dashed #484848;
    margin:24px;
    border-radius:12px;
    transition:background .2s,border-color .2s,transform .2s}
.upload.dragover {
    border-color:#00aeef;
    background:#23323a;
    transform:scale(1.005)}
.upload p {
    font-size:13px;
    margin:10px 0 16px}
.drop-icon {
    display:block;
    width:56px;
    height:56px;
    object-fit:contain;
    margin:0 auto 16px}
.privacy {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#8ddab5;
    background:#20382e;
    border:1px solid #395a48;
    border-radius:8px;
    padding:8px 14px}
.muted {
    color:#aaa;
    font-size:12px}
.small {
    line-height:1.85;
    margin:12px 0 0}
.analyzer button,.analyzer input {
    font:inherit}
.analyzer button {
    cursor:pointer}
.action,.modes button {
    border:1px solid #555;
    background:#383838;
    color:#fff;
    min-height:44px;
    border-radius:8px;
    padding:10px 18px;
    font-weight:700;
    transition:transform .2s,box-shadow .2s,background .2s}
.action:hover:not(:disabled),.modes button:hover:not(:disabled) {
    transform:translateY(-1px);
    background:#454545;
    box-shadow:0 5px 15px #0003}
.action:active:not(:disabled),.modes button:active:not(:disabled) {
    transform:translateY(1px);
    box-shadow:0 2px 6px #0002}
.action.primary {
    background:#008ec4;
    border-color:#00aeef}
.action.primary:hover:not(:disabled) {
    background:#00a0dc}
.analyzer button:disabled {
    opacity:.42;
    cursor:not-allowed;
    transform:none;
    box-shadow:none}
.analyzer :is(button,input,a):focus-visible {
    outline:3px solid #00aeef;
    outline-offset:4px}
/* doc/デザイン.html と同じ押下時の縮小・クリック後の弾み。 */
.analyzer :is(.codec-row button,.select-track) {
    transition:transform .2s cubic-bezier(.4,0,.2,1)}
.analyzer button.click-bounce:not(:disabled),
.analyzer input:is([type=radio],[type=checkbox]).click-bounce {
    animation:control-click-bounce .3s cubic-bezier(.4,0,.2,1)}
.analyzer button:not(:disabled):active,
.analyzer input:is([type=radio],[type=checkbox]):active {
    transform:scale(.95);
    animation:none}
@keyframes control-click-bounce {
    0%,100% {transform:scale(1)}
    50% {transform:scale(1.05)}
}
.setup {
    padding:0 24px 24px}
.file-line {
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    margin:0 0 12px;
    overflow-wrap:anywhere}
.file-info {
    display:flex;
    flex:1 1 280px;
    flex-direction:column;
    gap:5px;
    min-width:0}
.file-line strong {
    min-width:0;
    max-width:100%}
.analyzer canvas {
    display:block;
    width:100%;
    background:#1a1a1a;
    border-radius:6px}
.analyzer input[type=range] {
    accent-color:#00aeef;
    cursor:pointer;
    min-width:0}
.process-actions {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:12px}
#status {
    font-size:13px;
    color:#bbb;
    margin-top:16px}
.encoding-indicator {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
    color:#eee;
    font-size:13px}
.loading-bars {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    height:32px}
.loading-bars span {
    width:4px;
    height:24px;
    border-radius:999px;
    background:#00aeef;
    animation:loading-wave .9s ease-in-out infinite}
.loading-bars span:nth-child(2),.loading-bars span:nth-child(4) {
    background:#ff6b6b}
.loading-bars span:nth-child(3) {
    background:#ffd93d}
.loading-bars span:nth-child(2) {animation-delay:-.8s}
.loading-bars span:nth-child(3) {animation-delay:-.7s}
.loading-bars span:nth-child(4) {animation-delay:-.6s}
.loading-bars span:nth-child(5) {animation-delay:-.5s}
@keyframes loading-wave {0%,40%,100%{transform:scaleY(.05)}20%{transform:scaleY(1)}}
progress {
    width:100%;
    accent-color:#00aeef;
    margin-top:14px;
    height:7px}
#jobs {
    list-style:none;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:12px 0}
#jobs li {
    font-size:11px;
    background:#222;
    border-radius:5px;
    padding:5px 8px}
#jobs .done {
    color:#85dfb1}
#jobs .failed {
    color:#ffa59f}
.warning,#error {
    background:#4c3420;
    border:1px solid #866037;
    color:#ffda9e;
    padding:12px;
    border-radius:8px;
    font-size:13px;
    line-height:1.7}
#error {
    background:#492627;
    color:#ffb5b8;
    border-color:#86454a}
#results {
    border-top:1px solid #444}
.player {
    background:#202020;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px 24px;
    padding:20px 24px;
    position:relative;
    margin-top:14px;
    border:1px solid #414141;
    border-radius:10px}
.now {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap}
.now strong {
    color:#00b8fb;
    font:700 25px monospace}
.eyebrow {
    font-size:10px;
    letter-spacing:1.3px;
    color:#aaa}
.transport {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin:0}
.transport label {
    font-size:12px}
.volume {
    display:flex;
    align-items:center;
    gap:10px}
.volume input {
    width:110px}
.seek-line {
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
    font:13px monospace}
.seek-line output {white-space:nowrap}
.seek-line input {
    flex:1;
    min-width:0}
.modes {
    display:inline-flex;
    gap:4px;
    background:#111;
    padding:5px;
    border-radius:10px;
    margin:0;
    grid-column:2;
    grid-row:1;
    justify-self:start;
    align-self:center}
.modes button {
    border:0;
    background:transparent;
    font-size:13px}
.modes [aria-pressed=true],
.modes [aria-pressed=true]:hover:not(:disabled),
.modes [aria-pressed=true]:active:not(:disabled) {
    background:#00aeef;
    color:#101010}
.visuals,.comparison {
    padding:24px;
    border-top:1px solid #444}
#visuals {scroll-margin-top:86px}
.comparison-heading {
    display:flex;
    gap:16px;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px}
#plotSource {margin-top:0}
.plot-row {
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:10px;
    align-items:stretch}
.plot-axis {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:135px;
    color:#aaa;
    font:10px/1.1 monospace;
    text-align:right;
    white-space:nowrap}
.wave-axis {padding:7px 0}
.wave-plot {
    position:relative;
    min-width:0;
    height:135px}
#wave {
    height:135px;
    cursor:crosshair}
.wave-loading {
    position:absolute;
    z-index:2;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    box-sizing:border-box;
    padding:8px;
    border-radius:6px;
    background:#101820db;
    color:#fff;
    font-size:13px;
    text-align:center}
.tp-marker {
    position:absolute;
    top:0;
    bottom:0;
    border-left:2px solid #ff626b;
    box-shadow:0 0 5px #ff626b99;
    pointer-events:none}
.tp-marker span {
    position:absolute;
    top:4px;
    left:0;
    transform:translateX(-50%);
    padding:3px 6px;
    border:1px solid #ff626b;
    border-radius:4px;
    background:#5b2529;
    color:#fff;
    font:700 11px/1.2 monospace;
    white-space:nowrap}
.tp-marker.edge-left span {transform:none}
.tp-marker.edge-right span {left:auto;right:0;transform:none}
.spectrum {margin-top:14px}
.spectrum canvas {
    height:135px;
    min-width:0;
    cursor:crosshair;
    image-rendering:auto}
.codec-switch {
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #444}
#codecButtons {
    display:grid;
    gap:8px}
.codec-row {
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    padding:2px 0 5px}
.codec-row strong {
    flex:0 0 58px;
    color:#ddd;
    font-size:13px}
.codec-row button {
    flex:1 0 95px;
    min-height:48px;
    padding:7px 8px;
    border:1px solid #666;
    border-radius:7px;
    background:#303030;
    color:#d6d6d6;
    font-size:12px;
    font-weight:700;
    white-space:nowrap}
.codec-row button[data-bitrate] {
    height:48px;
    padding:5px 8px;
    line-height:1.2;
    white-space:pre-line}
.codec-row button.ready {
    border-color:#28799a;
    background:#19465a;
    color:#aee8ff}
.codec-row button[aria-pressed=true] {
    border-color:#00aeef;
    background:#00aeef;
    color:#10222a}
.codec-row button:hover:not(:disabled) {
    border-color:#66d4ff}
.table-scroll {
    overflow:auto}
table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    white-space:nowrap}
th {
    text-align:left;
    font-size:10px;
    letter-spacing:.3px;
    color:#aaa;
    font-weight:400;
    padding:10px 12px;
    border-bottom:1px solid #555}
td {
    padding:13px 12px;
    border-bottom:1px solid #414141;
    font-variant-numeric:tabular-nums}
tbody tr {
    cursor:pointer;
    transition:background .15s}
tbody tr:hover {
    background:#343b40}
tbody tr.selected {
    background:#173d4a}
td .select-track {
    color:#eee;
    border:0;
    background:none;
    text-align:left;
    display:flex;
    gap:10px;
    align-items:center;
    padding:5px 0}
td .select-track:before {
    content:'○';
    font-size:20px;
    color:#888;
    display:inline-block;
    transition:transform .2s ease}
@media(hover:hover) {
    td .select-track:hover:before {transform:scale(1.05)}
}
td .select-track.radio-bounce:before {animation:radio-bounce .3s cubic-bezier(.4,0,.2,1)}
td .select-track:active:before {transform:scale(.95);animation:none}
@keyframes radio-bounce {
    0%,100% {transform:scale(1)}
    50% {transform:scale(1.1)}
}
tr.selected .select-track:before {
    content:'●';
    color:#00aeef}
td small {
    display:block;
    color:#aaa;
    font-size:10px;
    margin-top:4px}
td canvas {
    width:100px!important;
    height:32px}
td a.download-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 14px;
    font-size:12px;
    text-decoration:none;
    white-space:nowrap}
td a.download-button:hover {
    transform:translateY(-1px)}
td a.download-button:active {
    transform:translateY(1px);
    box-shadow:0 2px 6px #0002}
kbd {
    font:10px monospace;
    border:1px solid #666;
    border-radius:3px;
    padding:2px 4px;
    color:#ccc;
    margin-right:4px}
.hot {
    color:#ff8e9b}
.loudness-related {
    max-width:1200px;
    margin-top:24px}
.loudness-related-card {
    display:flex;
    align-items:center;
    gap:20px;
    padding:24px 28px;
    border:1px solid #e2edf4;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    color:var(--text-main);
    text-decoration:none;
    transition:border-color .2s,box-shadow .2s,transform .2s}
.loudness-related-card:hover,.loudness-related-card:focus-visible {
    border-color:var(--primary-color);
    box-shadow:0 12px 32px rgba(0,174,239,.12);
    transform:translateY(-2px)}
.loudness-related-card:focus-visible {
    outline:2px solid var(--primary-color);
    outline-offset:3px}
.loudness-related-icon {
    display:block;
    flex:0 0 92px;
    width:92px;
    height:58px;
    overflow:hidden;
    border-radius:8px}
.loudness-related-icon img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain}
.loudness-related-content {
    display:grid;
    gap:6px;
    min-width:0}
.loudness-related-title {
    font-size:18px;
    line-height:1.5}
.loudness-related-description {
    color:var(--text-sub);
    font-size:14px;
    line-height:1.8}
.loudness-related-action {
    color:var(--primary-hover);
    font-size:14px;
    font-weight:700}
.music-links-wrap {
    max-width:1200px;
    margin-top:24px}
.music-links-wrap .music-links {
    margin:0;
    padding:28px;
    border:0;
    border-radius:16px;
    background:var(--bg-light)}
.guide {
    max-width:1120px;
    padding:72px 32px 80px}
.guide-section {
    padding:32px 0;
    border-bottom:1px solid #eee}
.guide-intro {
    padding-top:0}
.guide h2 {
    font-size:26px;
    font-weight:800;
    line-height:1.5;
    margin:0 0 16px}
.guide p {
    color:var(--text-sub);
    line-height:1.9;
    font-size:15px;
    margin:0 0 14px}
.guide p:last-child {
    margin-bottom:0}
.guide-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    padding:28px;
    margin:36px 0;
    border-radius:16px;
    background:var(--bg-light)}
.guide-grid section {
    min-width:0;
    padding:26px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.05)}
.guide-topic-icon {
    display:block;
    margin-bottom:18px;
    color:var(--primary-color);
    font-size:24px}
.guide-grid h2 {
    font-size:18px;
    font-weight:700;
    margin-bottom:12px}
.guide-grid p {
    font-size:14px}
.related {
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    padding:28px 0;
    border-bottom:1px solid #eee}
.related a {
    color:var(--primary-hover)}
.guide-privacy {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:32px;
    padding:20px;
    border:1px solid #b2f5ea;
    border-radius:8px;
    background:#e6fffa}
.guide-privacy>i {
    margin-top:5px;
    color:#2c7a7b}
.guide-privacy h2 {
    font-size:18px;
    margin-bottom:6px;
    color:#2c7a7b}
.guide-privacy p {
    font-size:14px;
    color:#2c7a7b}
.guide-faq {
    border-bottom:0}
.guide-faq-list {
    overflow:hidden;
    border:1px solid #eee;
    border-radius:16px;
    background:#fff}
.guide-faq-list details {
    border-bottom:1px solid #eee}
.guide-faq-list details:last-child {
    border-bottom:0}
.guide-faq-list summary {
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 24px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    list-style:none}
.guide-faq-list summary::-webkit-details-marker {
    display:none}
.guide-faq-list summary:after {
    content:"";
    width:12px;
    height:12px;
    margin-left:auto;
    flex-shrink:0;
    background:linear-gradient(#666,#666) center/12px 2px no-repeat,linear-gradient(#666,#666) center/2px 12px no-repeat}
.guide-faq-list details[open] {
    background:var(--bg-light)}
.guide-faq-list details[open] summary:after {
    background:linear-gradient(#666,#666) center/12px 2px no-repeat}
.guide-question {
    color:var(--primary-color);
    font-size:18px}
.guide-faq-list details p {
    margin:0 24px 22px 52px;
    font-size:14px}
.profile-section {
    max-width:900px;
    margin:0 auto 40px;
    padding:0 20px}
.profile-card {
    display:flex;
    align-items:flex-start;
    gap:25px;
    padding:30px;
    border:1px solid #eee;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.05)}
.profile-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
    width:100px;
    height:100px;
    border:4px solid #fff;
    border-radius:50%;
    background:#f0f4f8;
    box-shadow:0 2px 10px rgba(0,0,0,.1)}
.profile-icon img {
    width:100%;
    height:100%;
    object-fit:cover}
.profile-info {
    flex:1;
    min-width:0}
.profile-label {
    margin-bottom:5px;
    color:var(--primary-color);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase}
.profile-name {
    margin-bottom:10px;
    color:#1a202c;
    font-size:1.4rem;
    font-weight:700}
.profile-bio {
    margin-bottom:15px;
    color:#4a5568;
    font-size:.95rem;
    line-height:1.8}
.profile-x-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    border-radius:30px;
    background:#000;
    color:#fff;
    font-size:.9rem;
    font-weight:700;
    text-decoration:none;
    transition:background .2s,transform .2s}
.profile-x-btn:hover {
    background:#333;
    transform:translateY(-2px)}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)}
[hidden] {
    display:none!important}
@media(max-width:900px) {
    .player {grid-template-columns:minmax(0,1fr)}
    .modes {
        grid-column:1;
        grid-row:auto;
        justify-self:stretch}
}
@media(max-width:680px) {
.loudness-related-card {
    align-items:flex-start;
    gap:14px;
    padding:20px}
.loudness-related-icon {
    flex-basis:84px;
    width:84px;
    height:53px}
.loudness-related-title {
    font-size:16px}
.music-links-wrap .music-links {
    padding:20px}
.intro {
    padding-top:30px}
.analyzer-header {
    padding:16px}
.local-badge,.pro-badge {
    display:none}
.upload {
    margin:16px;
    padding:25px 12px}
.setup,.player,.visuals,.comparison {
    padding:18px 16px}
.comparison-heading {
    align-items:flex-start;
    flex-direction:column}
.now {
    gap:10px}
.now strong {
    font-size:22px}
.guide-grid {
    grid-template-columns:1fr;
    padding:20px;
    gap:16px}
.guide {
    padding:48px 20px 56px}
.guide h2 {
    font-size:23px}
.guide-grid h2 {
    font-size:18px}
.guide-grid section {
    padding:22px}
.guide-faq-list summary {
    padding:18px 16px}
.guide-faq-list details p {
    margin-left:44px;
    margin-right:16px}
.profile-card {
    flex-direction:column;
    align-items:center;
    padding:25px;
    text-align:center}
.profile-icon {
    width:80px;
    height:80px}
.tool-container {
    padding:0 10px}
.modes {
    display:flex}
.modes button {
    flex:1;
    padding:10px}
.seek-line {
    gap:10px}
.transport {
    gap:10px}
}
@media(prefers-reduced-motion:reduce) {
    .analyzer * {
    transition:none!important;
    animation:none!important}
    td .select-track:before {transition:none!important;animation:none!important;transform:none!important}
    .loading-bars span {transform:scaleY(.45)}
}