/* Mobile-only monochrome glass finish. Visual properties only; geometry and motion remain owned by each page. */
@media (max-width: 768px) {
    body.white-bg {
        --ink: #171719;
        --ink-soft: #38383d;
        --ink-faint: #727278;
        --paper: #ffffff;
        --paper-soft: #f1f1f3;
        --line: #dedee2;
        --line-strong: #c4c4ca;
        --accent: #68686f;
        --accent-soft: #e8e8eb;
        --accent-warm: #a6a6ad;
        --shadow-soft: 0 12px 32px rgba(0, 0, 0, .09);
        --shadow-lift: 0 18px 42px rgba(0, 0, 0, .15);
        background-color: #f3f3f5;
    }

    body.white-bg .harman-bg { opacity: .12; }
    body.white-bg .nav-item { color: #38383d; }
    body.white-bg .nav-item:hover {
        color: #111113;
        background-color: rgba(80, 80, 86, .08);
    }

    .wrap header { border-bottom-color: rgba(235, 235, 239, .18); }
    .wrap header h1 { color: #f6f6f7; }
    .wrap header .sub { color: rgba(235, 235, 239, .62); }
    .wrap .card {
        background-image: radial-gradient(ellipse at 8% 0%, rgba(255, 255, 255, .20), transparent 48%), radial-gradient(ellipse at 100% 100%, rgba(190, 190, 198, .09), transparent 58%), linear-gradient(132deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 54%, rgba(190, 190, 198, .075));
        background-color: rgba(22, 22, 25, .48);
        border-color: rgba(238, 238, 242, .25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), inset 1px 0 0 rgba(255, 255, 255, .13), inset -1px 0 0 rgba(190, 190, 198, .13), inset 0 -1px 0 rgba(190, 190, 198, .18), 0 16px 38px rgba(0, 0, 0, .25);
    }
    .wrap .q {
        background-image: linear-gradient(132deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018) 58%, rgba(190, 190, 198, .045));
        background-color: rgba(255, 255, 255, .035);
        border-color: rgba(235, 235, 239, .21);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .23), inset 0 -1px 0 rgba(190, 190, 198, .10);
    }
    .wrap h2 { border-left-color: #d0d0d5; }
    .wrap .progress { background-color: rgba(255, 255, 255, .16); }
    .wrap .progress > i { background-image: linear-gradient(90deg, #a7a7ae, #f1f1f3); background-color: #d0d0d5; }
    .wrap .btn:not(.ghost),
    .wrap .opt.sel {
        color: #111113;
        background-image: linear-gradient(138deg, #ffffff, #e1e1e5 56%, #c9c9d0);
        background-color: #e4e4e8;
        border-color: rgba(255, 255, 255, .96);
        box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(130, 130, 138, .40), 0 6px 18px rgba(0, 0, 0, .25);
    }
    .wrap .btn.ghost,
    .wrap .opt:not(.sel),
    .wrap .back {
        color: #eeeeF0;
        background-image: radial-gradient(ellipse at 10% 0%, rgba(255, 255, 255, .18), transparent 52%), linear-gradient(132deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 58%, rgba(190, 190, 198, .075));
        background-color: rgba(27, 27, 30, .44);
        border-color: rgba(238, 238, 242, .30);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(190, 190, 198, .14), 0 5px 15px rgba(0, 0, 0, .20);
    }
    .wrap .notice,
    .wrap details,
    .wrap textarea { background-color: rgba(255, 255, 255, .055); border-color: rgba(235, 235, 239, .23); }
    .wrap .notice { border-left-color: #b9b9c0; }
    .wrap .tag,
    .wrap .dimbar .band { border-color: rgba(230, 230, 234, .32); }
    .wrap .tag.pink { background-color: #c7c7ce; border-color: #e6e6e9; color: #111113; }

    .knowledge-item,
    .detail-content,
    .toc-panel,
    .back-btn,
    .contact-item,
    .soundstage-wrap,
    .taste-wrap {
        background-image: radial-gradient(ellipse at 8% 0%, rgba(255, 255, 255, .98), transparent 54%), radial-gradient(ellipse at 100% 100%, rgba(174, 174, 182, .16), transparent 58%), linear-gradient(132deg, rgba(255, 255, 255, .84), rgba(239, 239, 242, .70) 52%, rgba(255, 255, 255, .82));
        background-color: rgba(246, 246, 248, .82);
        border-color: rgba(255, 255, 255, .94);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 1px 0 0 rgba(255, 255, 255, .68), inset -1px 0 0 rgba(181, 181, 188, .22), inset 0 -1px 0 rgba(154, 154, 162, .20), 0 15px 38px rgba(0, 0, 0, .12);
    }
    .knowledge-item:hover {
        background-image: radial-gradient(ellipse at 8% 0%, rgba(255, 255, 255, 1), transparent 54%), radial-gradient(ellipse at 100% 100%, rgba(164, 164, 172, .19), transparent 58%), linear-gradient(132deg, rgba(255, 255, 255, .94), rgba(239, 239, 242, .78) 52%, rgba(255, 255, 255, .91));
        border-color: rgba(255, 255, 255, .98);
        box-shadow: inset 0 1px 0 #ffffff, inset 1px 0 0 rgba(255, 255, 255, .75), inset -1px 0 0 rgba(164, 164, 172, .24), inset 0 -1px 0 rgba(145, 145, 153, .24), 0 18px 42px rgba(0, 0, 0, .15);
    }
    .knowledge-item span { color: #202024; }
    .knowledge-item span::before,
    .knowledge-item span::after { background-color: #a7a7ae; }
    .knowledge-item:hover span::before,
    .knowledge-item:hover span::after { background-color: #55555c; }

    .detail-title,
    .detail-text h3,
    .detail-text h4,
    .detail-text strong { color: #19191c; }
    .detail-title::before,
    .detail-title::after,
    .detail-text h3::before { background-color: #74747b; }
    .detail-text { color: #37373c; }
    .detail-text .sub-title,
    .detail-text .author-info,
    .detail-text .note { color: #68686f; }
    .detail-text ul > li::marker,
    .detail-text ol > li::marker,
    .detail-text sup { color: #68686f; }
    .detail-text .core-logic,
    .catalog-wrap,
    .contact-item { background-color: rgba(230, 230, 234, .72); border-color: #d2d2d7; }
    .detail-text .core-logic { border-left-color: #77777e; }
    .detail-text table { border-color: #d7d7dc; }
    .detail-text thead th { color: #202024; background: linear-gradient(180deg, #f5f5f6, #e8e8eb); border-bottom-color: #ceced4; }
    .detail-text td { color: #37373c; border-bottom-color: #e1e1e4; }
    .detail-text tbody tr:nth-child(even) { background-color: #f3f3f5; }
    .detail-text tbody tr:hover { background-color: #e7e7ea; }
    .detail-text pre { color: #343439; background-color: #ededf0; border-color: #d7d7dc; }
    .detail-text a { color: #303035; text-decoration-color: #a7a7ad; }

    .toc-toggle { color: #171719; background-image: linear-gradient(145deg, #f7f7f8, #d9d9de); background-color: #e5e5e9; box-shadow: inset 0 1px 0 #ffffff, 0 7px 20px rgba(0, 0, 0, .16); }
    .toc-toggle:hover { background-color: #d6d6db; }
    .toc-panel { border-left-color: rgba(255, 255, 255, .92); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .74), -14px 0 36px rgba(0, 0, 0, .14); }
    .toc-title { color: #202024; border-bottom-color: #d7d7dc; }
    .toc-item { color: #48484e; }
    .toc-item:hover,
    .toc-item.active { color: #202024; background-color: rgba(112, 112, 120, .13); }
    .toc-item.active::before { color: #66666d; }
    :focus-visible { outline-color: #73737a; }
}

@media (max-width: 880px) {
    #sidebar,
    #info,
    #infModel,
    .ctl,
    .chip,
    .tab {
        background-image: radial-gradient(ellipse at 8% 0%, rgba(255, 255, 255, .20), transparent 52%), linear-gradient(132deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .025) 54%, rgba(190, 190, 198, .08));
        border-color: rgba(239, 239, 243, .30);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), inset 1px 0 0 rgba(255, 255, 255, .17), inset -1px 0 0 rgba(190, 190, 198, .15), inset 0 -1px 0 rgba(190, 190, 198, .22), 0 12px 32px rgba(0, 0, 0, .26);
    }
    #sidebar { background-color: rgba(13, 13, 15, .76); border-color: rgba(232, 232, 236, .28); }
    #info { background-color: rgba(15, 15, 17, .78); border-color: rgba(238, 238, 242, .34); }
    #infModel { background-color: rgba(255, 255, 255, .055); }
    .ctl,
    .chip,
    .tab { color: #eeeeF0; background-color: rgba(25, 25, 28, .58); }
    .ctl.live,
    .tab.on { color: #111113; background-image: linear-gradient(140deg, #ffffff, #ddddE2 58%, #c9c9d0); background-color: #e2e2e6; border-color: rgba(255, 255, 255, .98); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(130, 130, 138, .42), 0 6px 18px rgba(0, 0, 0, .24); }
    .dev:hover,
    .dev.on { background-color: rgba(224, 224, 230, .12); }
    .dev.on { border-left-color: #d5d5da; }
    #info .cat,
    #infModel .munit,
    #typelink,
    #scenetitle .t1 { color: #d2d2d7; }
    #info .desc b { color: #ffffff; }
    #info .pts { border-top-color: rgba(235, 235, 239, .18); }
    #info .pts li::before { background-color: #c8c8ce; }
    .meter .mt { background-color: rgba(255, 255, 255, .15); }
}