/* Material 3 skin — pink seed #FF8FB6. Hidden unless html[data-style="md3"]. */

.md3-tools,
.md3-nav-rail,
.md3-nav-bar,
.md3-now-playing,
.md3-scrim,
.md3-snackbar{display:none}

html[data-style="md3"]{
    color-scheme:dark;
    --md-sys-color-primary:#FFB1C8;
    --md-sys-color-on-primary:#5E1133;
    --md-sys-color-primary-container:#7B2949;
    --md-sys-color-on-primary-container:#FFD9E4;
    --md-sys-color-secondary:#E4BDC6;
    --md-sys-color-on-secondary:#432930;
    --md-sys-color-secondary-container:#5C3F47;
    --md-sys-color-on-secondary-container:#FFD9E2;
    --md-sys-color-tertiary:#F0BC95;
    --md-sys-color-on-tertiary:#48290C;
    --md-sys-color-tertiary-container:#623F20;
    --md-sys-color-on-tertiary-container:#FFDCC4;
    --md-sys-color-error:#FFB4AB;
    --md-sys-color-on-error:#690005;
    --md-sys-color-error-container:#93000A;
    --md-sys-color-on-error-container:#FFDAD6;
    --md-sys-color-surface:#1A1114;
    --md-sys-color-on-surface:#F0DEE2;
    --md-sys-color-on-surface-variant:#D6C2C7;
    --md-sys-color-surface-container-lowest:#140C0F;
    --md-sys-color-surface-container-low:#22191C;
    --md-sys-color-surface-container:#271D20;
    --md-sys-color-surface-container-high:#32282A;
    --md-sys-color-surface-container-highest:#3D3235;
    --md-sys-color-surface-dim:#1A1114;
    --md-sys-color-surface-bright:#41373A;
    --md-sys-color-outline:#9E8C91;
    --md-sys-color-outline-variant:#514347;
    --md-sys-color-inverse-surface:#F0DEE2;
    --md-sys-color-inverse-on-surface:#382E31;
    --md-sys-color-inverse-primary:#8E4A62;

    --md-sys-shape-corner-none:0px;
    --md-sys-shape-corner-extra-small:4px;
    --md-sys-shape-corner-small:8px;
    --md-sys-shape-corner-medium:12px;
    --md-sys-shape-corner-large:16px;
    --md-sys-shape-corner-large-increased:20px;
    --md-sys-shape-corner-extra-large:28px;
    --md-sys-shape-corner-extra-large-increased:32px;
    --md-sys-shape-corner-extra-extra-large:48px;
    --md-sys-shape-corner-full:9999px;

    --md-sys-motion-easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate:cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-duration-short4:200ms;
    --md-sys-motion-duration-medium2:300ms;
    --md-sys-motion-duration-medium4:400ms;

    --md-ref-typeface-brand:'Google Sans Flex','Google Sans',sans-serif;
    --md-ref-typeface-plain:'Google Sans Flex','Google Sans',sans-serif;
    --md-sys-typescale-brand:var(--md-ref-typeface-brand);
    --md-sys-typescale-plain:var(--md-ref-typeface-plain);

    --bg:var(--md-sys-color-surface);
    --text:var(--md-sys-color-on-surface);
    --text-dim:var(--md-sys-color-on-surface-variant);
    --text-faint:var(--md-sys-color-outline);
    --accent:var(--md-sys-color-primary);
    --accent-2:var(--md-sys-color-primary);
    --accent-3:var(--md-sys-color-primary);
    --glass:var(--md-sys-color-surface-container);
    --glass-strong:var(--md-sys-color-surface-container-high);
    --line:var(--md-sys-color-outline-variant);
    --font-body:var(--md-sys-typescale-plain);
    --ease:var(--md-sys-motion-easing-emphasized);
    --md3-scrim-tone:rgba(26,17,20,.55);
}

html[data-style="md3"][data-md3-scheme="light"]{
    color-scheme:light;
    --text:var(--md-sys-color-on-surface);
    --text-dim:var(--md-sys-color-on-surface-variant);
    --text-faint:var(--md-sys-color-outline);
    --md-sys-color-primary:#8E4A62;
    --md-sys-color-on-primary:#FFFFFF;
    --md-sys-color-primary-container:#FFD9E4;
    --md-sys-color-on-primary-container:#3B071E;
    --md-sys-color-secondary:#75565D;
    --md-sys-color-on-secondary:#FFFFFF;
    --md-sys-color-secondary-container:#FFD9E2;
    --md-sys-color-on-secondary-container:#2B151B;
    --md-sys-color-tertiary:#7C5635;
    --md-sys-color-on-tertiary:#FFFFFF;
    --md-sys-color-tertiary-container:#FFDCC4;
    --md-sys-color-on-tertiary-container:#2C1600;
    --md-sys-color-error:#BA1A1A;
    --md-sys-color-on-error:#FFFFFF;
    --md-sys-color-error-container:#FFDAD6;
    --md-sys-color-on-error-container:#410002;
    --md-sys-color-surface:#FFF8F8;
    --md-sys-color-on-surface:#22191C;
    --md-sys-color-on-surface-variant:#514347;
    --md-sys-color-surface-container-lowest:#FFFFFF;
    --md-sys-color-surface-container-low:#FCF1F3;
    --md-sys-color-surface-container:#F6EBED;
    --md-sys-color-surface-container-high:#F0E5E8;
    --md-sys-color-surface-container-highest:#EBE0E2;
    --md-sys-color-surface-dim:#E7D6DA;
    --md-sys-color-surface-bright:#FFF8F8;
    --md-sys-color-outline:#837377;
    --md-sys-color-outline-variant:#D6C2C7;
    --md-sys-color-inverse-surface:#382E31;
    --md-sys-color-inverse-on-surface:#FDEDF0;
    --md-sys-color-inverse-primary:#FFB1C8;
    --md3-scrim-tone:rgba(255,248,248,.58);
}

html[data-style="md3"] .dynamic-island{display:none!important}

html[data-style="md3"] body{
    font-family:var(--md-sys-typescale-plain);
    background:var(--md-sys-color-surface);
    color:var(--md-sys-color-on-surface);
}
html[data-style="md3"] body::before{
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent),transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%,color-mix(in srgb,var(--md-sys-color-surface) 40%,transparent),transparent 60%);
}
html[data-style="md3"] .bg-scrim{
    opacity:.78;mix-blend-mode:normal;
    background:linear-gradient(180deg,
        color-mix(in srgb,var(--md-sys-color-surface) 52%,transparent) 0%,
        color-mix(in srgb,var(--md-sys-color-surface) 70%,transparent) 48%,
        var(--md3-scrim-tone) 100%);
}
html[data-style="md3"] .page{
    min-height:auto;
    padding:24px 16px;
    scroll-margin-top:16px;
    display:flex;
    justify-content:center;
    align-items:stretch;
}
html[data-style="md3"] #home.page{
    min-height:100dvh;
    padding-top:24px;
    align-items:center;
}
html[data-style="md3"] #github,
html[data-style="md3"] #netease{padding-top:16px;padding-bottom:32px}
html[data-style="md3"] .home-inner{
    display:flex;flex-direction:column;gap:16px;
    width:100%;max-width:1040px;
    padding:0;background:transparent;border-radius:0;
    align-items:stretch;text-align:left;
}
html[data-style="md3"] .home-hero{
    display:flex;flex-direction:column;align-items:flex-start;
    padding:0;gap:6px;overflow:visible;
}
html[data-style="md3"] .social{
    width:100%;max-width:none;
    background:var(--md-sys-color-surface-container);
    border-radius:var(--md-sys-shape-corner-extra-extra-large);
    padding:24px 20px 20px;
}
html[data-style="md3"] .explore-btn{
    align-self:flex-start;justify-self:start;width:auto;max-width:max-content;margin-top:8px;
}
html[data-style="md3"] .home-greet{
    font-size:.875rem;
    letter-spacing:.2px;
    color:var(--md-sys-color-on-surface);
    opacity:.72;
    margin:0;
    padding:0;
}
html[data-style="md3"] .home-name{
    font-family:var(--md-sys-typescale-brand);
    filter:none;
    margin:0;
    padding:.14em .16em .08em 0;
    letter-spacing:-.03em;
    line-height:1.22;
    overflow:visible;
    width:max-content;
    max-width:100%;
}
html[data-style="md3"] .home-name:hover .hn-char{animation:none}
html[data-style="md3"] .hn-char:hover{transform:none}
html[data-style="md3"] .hn-char{
    background:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    -webkit-text-fill-color:var(--md-sys-color-on-surface);
    color:var(--md-sys-color-on-surface);
    padding:0;
    display:inline;
    overflow:visible;
    line-height:inherit;
}
html[data-style="md3"] .typewriter{
    margin:0 0 28px;
    padding:0;
    letter-spacing:.15px;
    text-shadow:none;
    color:var(--md-sys-color-on-surface);
}
html[data-style="md3"] .section-label{
    font-family:var(--md-sys-typescale-plain);
    font-size:.75rem;
    letter-spacing:.8px;
    font-weight:500;
    color:var(--md-sys-color-on-surface-variant);
}
html[data-style="md3"] .section-label::after{
    background:var(--md-sys-color-primary);
    height:3px;width:32px;border-radius:var(--md-sys-shape-corner-full);
}
html[data-style="md3"] .typewriter-text{letter-spacing:.15px;text-shadow:none}
html[data-style="md3"] .typewriter-caret{background:var(--md-sys-color-primary)}

html[data-style="md3"] .social-grid{gap:10px}
html[data-style="md3"] .social-btn{
    width:auto;height:48px;min-height:48px;padding:0 18px 0 12px;gap:10px;
    border-radius:var(--md-sys-shape-corner-extra-large);
    background:var(--md-sys-color-surface-container-highest);
    border:none;backdrop-filter:none;animation:none;
    display:inline-flex;align-items:center;
}
html[data-style="md3"] .social-btn img{width:20px;height:20px;filter:brightness(0) invert(1);opacity:.92}
html[data-style="md3"][data-md3-scheme="light"] .social-btn img{filter:brightness(0);opacity:.72}
html[data-style="md3"] .social-btn-img img{filter:none;width:20px;height:20px;opacity:1}
html[data-style="md3"][data-md3-scheme="light"] .social-btn-img img{filter:none;opacity:1}
html[data-style="md3"] .social-btn-wide{padding:0 14px}
html[data-style="md3"] .social-btn-wide img{display:none}
html[data-style="md3"] .social-label{
    display:inline;font-size:.875rem;font-weight:500;letter-spacing:.1px;
    color:var(--md-sys-color-on-surface);
}

html[data-style="md3"] .explore-btn{
    margin-top:24px;min-height:56px;height:56px;padding:0 32px;
    border:none;border-radius:var(--md-sys-shape-corner-full);
    background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);
    font-size:1rem;font-weight:500;letter-spacing:.1px;backdrop-filter:none;
}
html[data-style="md3"] .explore-btn:active{transform:scale(.97)}
html[data-style="md3"] .card{
    background:var(--md-sys-color-surface-container);
    border:none;border-radius:var(--md-sys-shape-corner-extra-extra-large);
    backdrop-filter:none;box-shadow:none;max-width:1040px;width:100%;
}
html[data-style="md3"] #github .card-body{display:grid;gap:24px}
html[data-style="md3"] .card-header{
    border-bottom:1px solid var(--md-sys-color-outline-variant);
    background:transparent;padding:24px 28px;
}
html[data-style="md3"] .card-header h2{
    font-family:var(--md-sys-typescale-plain);
    font-size:1.75rem;font-weight:400;letter-spacing:0;
}
html[data-style="md3"][data-md3-scheme="light"] .gh-logo,
html[data-style="md3"][data-md3-scheme="light"] .ne-logo{filter:brightness(0);opacity:.72}
html[data-style="md3"] .card-body{padding:28px}
html[data-style="md3"] .card-btn{
    border-radius:var(--md-sys-shape-corner-full);
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
    box-shadow:none;min-height:56px;display:flex;align-items:center;justify-content:center;
    font-size:1rem;
}
html[data-style="md3"] .gh-avatar,
html[data-style="md3"] .netease-avatar{border-radius:var(--md-sys-shape-corner-extra-large);border:none;box-shadow:none}
html[data-style="md3"] .gh-follow{
    border:none;background:var(--md-sys-color-primary);
    color:var(--md-sys-color-on-primary);border-radius:var(--md-sys-shape-corner-full);
    min-height:48px;padding:8px 28px;display:inline-flex;align-items:center;
}
html[data-style="md3"] .skill-grid{
    display:flex;flex-direction:column;gap:0;
    background:var(--md-sys-color-surface-container-high);
    border-radius:var(--md-sys-shape-corner-extra-large);
    overflow:hidden;
}
html[data-style="md3"] .skill{
    background:transparent;border:none;border-radius:0;
    min-height:80px;padding:16px 20px;
    border-bottom:1px solid var(--md-sys-color-outline-variant);
}
html[data-style="md3"] .skill:last-child{border-bottom:none}
html[data-style="md3"] .skill::before{display:none}
html[data-style="md3"] .skill-glyph{border-radius:var(--md-sys-shape-corner-full)}
html[data-style="md3"] .netease-player{
    background:var(--md-sys-color-surface-container-high);
    border:none;border-radius:var(--md-sys-shape-corner-extra-large);
}
html[data-style="md3"] .netease-level{
    background:var(--md-sys-color-tertiary-container);
    color:var(--md-sys-color-on-tertiary-container);
    border:none;border-radius:var(--md-sys-shape-corner-full);
}
html[data-style="md3"] .np-song-item.active{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
}
html[data-style="md3"] .np-title,
html[data-style="md3"] .mc-title,
html[data-style="md3"] .netease-stat b,
html[data-style="md3"] .netease-name,
html[data-style="md3"] .gh-name{
    color:var(--md-sys-color-on-surface);
}
html[data-style="md3"] .netease-intro,
html[data-style="md3"] .np-artist{
    color:var(--md-sys-color-on-surface-variant);
}
html[data-style="md3"] .netease-loc{
    color:var(--md-sys-color-outline);
}
html[data-style="md3"] .np-song-item:hover{
    background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent);
    color:var(--md-sys-color-on-surface);
}
html[data-style="md3"] .md3-np-title{color:var(--md-sys-color-on-surface)}
html[data-style="md3"] .confirm-host,
html[data-style="md3"] .md3-confirm-host,
html[data-style="md3"] .gh-legend{
    font-family:var(--md-sys-typescale-plain);
}
html[data-style="md3"] .np-controls .island-mini-btn{
    background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);
    width:56px;height:56px;
}
html[data-style="md3"] .np-controls .island-mini-btn--ghost{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
}
html[data-style="md3"] .footer{color:var(--md-sys-color-on-surface-variant)}
html[data-style="md3"] .style-switch,
html[data-style="md3"] .lang-switch{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
    border:none;
}
html[data-style="md3"] .scroll-hint{display:none}

html[data-style="md3"] .md3-tools{
    display:flex;position:fixed;z-index:45;gap:12px;
    top:calc(12px + env(safe-area-inset-top,0px));
    right:16px;
}
.md3-fab{
    width:56px;height:56px;border:none;cursor:pointer;
    border-radius:var(--md-sys-shape-corner-large);
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:none;
    transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
.md3-fab svg{width:24px;height:24px;fill:currentColor}
.md3-fab--tonal{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
}
.md3-fab:active{transform:scale(.94)}
.md3-icon-sun{display:none}
html[data-style="md3"][data-md3-scheme="light"] .md3-icon-sun{display:block}
html[data-style="md3"][data-md3-scheme="light"] .md3-icon-moon{display:none}

.md3-icon-btn{
    width:48px;height:48px;border:none;background:transparent;color:var(--md-sys-color-on-surface-variant);
    border-radius:var(--md-sys-shape-corner-full);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.md3-icon-btn svg{width:24px;height:24px;fill:currentColor}

.md3-nav-item{
    display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;
    color:var(--md-sys-color-on-surface-variant);min-width:64px;min-height:56px;
    font-size:.75rem;font-weight:500;letter-spacing:.5px;
}
.md3-nav-item__indicator{
    width:56px;height:32px;border-radius:var(--md-sys-shape-corner-full);
    display:flex;align-items:center;justify-content:center;
    transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
.md3-nav-item__indicator svg{width:24px;height:24px;fill:currentColor}
.md3-nav-item.active{color:var(--md-sys-color-on-surface)}
.md3-nav-item.active .md3-nav-item__indicator{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
}

html[data-style="md3"] .md3-nav-bar{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:80px;padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--md-sys-color-surface-container);
    justify-content:space-around;align-items:center;
}
html[data-style="md3"] .md3-nav-rail{
    display:none;position:fixed;left:0;top:0;bottom:0;z-index:35;width:80px;
    padding:16px 0 16px;flex-direction:column;align-items:center;gap:12px;
    background:var(--md-sys-color-surface);
}

html[data-style="md3"] .md3-now-playing{
    display:none;position:fixed;z-index:38;align-items:center;gap:12px;
    background:var(--md-sys-color-surface-container-high);
    color:var(--md-sys-color-on-surface);
    border-radius:var(--md-sys-shape-corner-extra-large);
    padding:8px;min-height:64px;cursor:pointer;
}
html[data-style="md3"] .md3-now-playing:not([hidden]){display:flex}
.md3-np-cover{width:48px;height:48px;border-radius:var(--md-sys-shape-corner-medium);object-fit:cover}
.md3-np-meta{flex:1;min-width:0}
.md3-np-title{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md3-np-artist{font-size:.75rem;color:var(--md-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

html[data-style="md3"] .md3-scrim{
    display:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:120;
    background:rgba(0,0,0,.4);flex-direction:column;justify-content:flex-end;align-items:stretch;
}
html[data-style="md3"] .md3-scrim:not([hidden]){display:flex}
.md3-sheet{
    width:100%;max-width:none;background:var(--md-sys-color-surface-container-high);
    color:var(--md-sys-color-on-surface);
    border-radius:var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-extra-extra-large) 0 0;
    padding:12px 24px calc(20px + env(safe-area-inset-bottom,0px));
    display:flex;flex-direction:column;gap:12px;
    transform:translateY(16px);opacity:0;
    box-sizing:border-box;
}
.md3-sheet--seal{align-items:center;text-align:center}
.md3-scrim.is-open .md3-sheet:not([hidden]){
    opacity:1;transform:none;
    transition:transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate),
               opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}
.md3-sheet-handle{width:32px;height:4px;border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-on-surface-variant);opacity:.4;margin:4px auto 8px}
.md3-sheet-title{margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}
.md3-sheet--seal .md3-sheet-title,
.md3-sheet--seal .confirm-site{
    background:none;-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:unset;
    color:var(--md-sys-color-on-surface);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.md3-sheet-body{margin:0;font-size:.875rem;line-height:1.25rem;color:var(--md-sys-color-on-surface-variant)}
.md3-confirm-icon{
    border-radius:var(--md-sys-shape-corner-full);
    background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);
    display:flex;align-items:center;justify-content:center;
}
.md3-sheet--seal .confirm-seal{width:120px;height:120px;position:relative;margin:8px 0 4px}
.md3-sheet--seal .confirm-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.md3-sheet--seal .confirm-ring-track{fill:none;stroke:var(--md-sys-color-secondary-container);stroke-width:3.6}
.md3-sheet--seal .confirm-ring-bar{fill:none;stroke:var(--md-sys-color-primary);stroke-width:3.6;stroke-linecap:round}
.md3-sheet--seal .md3-confirm-icon{position:absolute;inset:18px;width:auto;height:auto}
.md3-confirm-icon img.confirm-favicon{width:28px;height:28px;object-fit:contain;display:none}
.md3-confirm-icon .confirm-fallback{width:24px;height:24px}
.md3-confirm-host{margin:0;font-size:.75rem;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-plain)}
.md3-sheet-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
.md3-sheet-actions--stack{flex-direction:column;align-items:stretch;width:100%;max-width:320px}
.md3-btn{
    appearance:none;border:none;cursor:pointer;min-height:48px;padding:0 24px;
    border-radius:var(--md-sys-shape-corner-full);font-size:.875rem;font-weight:500;letter-spacing:.1px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
.md3-btn:active{transform:scale(.97)}
.md3-btn-text{background:transparent;color:var(--md-sys-color-primary)}
.md3-btn-filled{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.md3-btn-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.md3-btn-xl{min-height:56px;height:56px;font-size:1rem;padding:0 32px}
.md3-email-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%}
.md3-email-item{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 20px;border-radius:var(--md-sys-shape-corner-extra-large);
    background:var(--md-sys-color-surface-container);
    min-height:64px;
}

html[data-style="md3"] .md3-snackbar{
    display:flex;position:fixed;left:16px;right:16px;z-index:90;max-width:560px;
    background:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);
    border-radius:var(--md-sys-shape-corner-large);padding:14px 16px;min-height:48px;
    align-items:center;opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
               transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}
html[data-style="md3"] .md3-snackbar.is-open{opacity:1;transform:none;pointer-events:auto}

@media (max-width:599px){
    html[data-style="md3"] .md3-nav-bar{display:flex}
    html[data-style="md3"] #home.page{padding-top:84px}
    html[data-style="md3"] .md3-now-playing:not([hidden]){
        left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));
    }
    html[data-style="md3"] .page,
    html[data-style="md3"] .footer{
        padding-bottom:calc(168px + env(safe-area-inset-bottom,0px));
    }
    html[data-style="md3"] .md3-snackbar{
        bottom:calc(96px + env(safe-area-inset-bottom,0px));
        margin:0 auto;
    }
    html[data-style="md3"] .home-inner{padding-bottom:72px}
    html[data-style="md3"] .shader-dock:not([hidden]){
        left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));
        display:flex;justify-content:center;
    }
    html[data-style="md3"] body.audio-playing .shader-dock:not([hidden]),
    html[data-style="md3"]:has(#md3-now-playing:not([hidden])) .shader-dock:not([hidden]){
        bottom:calc(164px + env(safe-area-inset-bottom,0px));
    }
    html[data-style="md3"] body.audio-playing .page,
    html[data-style="md3"] body.audio-playing .footer,
    html[data-style="md3"]:has(#md3-now-playing:not([hidden])) .page,
    html[data-style="md3"]:has(#md3-now-playing:not([hidden])) .footer{
        padding-bottom:calc(220px + env(safe-area-inset-bottom,0px));
    }
    html[data-style="md3"] .typewriter{justify-content:flex-start}
    html[data-style="md3"] .md3-sheet{
        position:fixed;left:0;right:0;bottom:0;margin-top:0;width:100%;
        transform:translateY(100%);
    }
    html[data-style="md3"] .md3-scrim.is-open .md3-sheet:not([hidden]){transform:none}
}

@media (min-width:600px){
    html[data-style="md3"] .md3-nav-rail{display:flex}
    html[data-style="md3"] .page{
        padding-left:104px;padding-right:24px;padding-top:24px;
    }
    html[data-style="md3"] #home.page{padding-top:24px}
    html[data-style="md3"] #github,
    html[data-style="md3"] #netease{padding-top:16px}
    html[data-style="md3"] .shader-dock{left:104px;bottom:24px}
    html[data-style="md3"] .md3-now-playing:not([hidden]){
        right:24px;bottom:24px;left:auto;width:min(320px,calc(100vw - 120px));
    }
    html[data-style="md3"] .md3-snackbar{left:104px;right:auto;bottom:24px;width:auto;max-width:min(360px,70vw)}
    html[data-style="md3"] .md3-scrim{justify-content:center;align-items:center}
    html[data-style="md3"] .md3-sheet{
        width:min(420px,92vw);
        margin-top:0;
        border-radius:var(--md-sys-shape-corner-extra-extra-large);
        padding:28px 24px 24px;
        transform:scale(.96);
    }
    html[data-style="md3"] .md3-sheet-handle{display:none}
    html[data-style="md3"] .md3-scrim.is-open .md3-sheet:not([hidden]){transform:none}
}

@media (min-width:840px){
    html[data-style="md3"] .home-inner{
        display:grid;
        grid-template-columns:1.15fr .85fr;
        grid-template-rows:auto auto;
        gap:24px 28px;
        align-items:start;
    }
    html[data-style="md3"] .home-hero{grid-column:1;grid-row:1}
    html[data-style="md3"] .explore-btn{grid-column:1;grid-row:2;margin-top:0;width:auto;max-width:max-content;justify-self:start}
    html[data-style="md3"] .social{grid-column:2;grid-row:1 / span 2;margin:0}
    html[data-style="md3"] #github .card-body{
        grid-template-columns:minmax(220px,280px) 1fr;
        align-items:start;
    }
    html[data-style="md3"] #github .gh-profile{
        flex-direction:column;align-items:flex-start;text-align:left;
        grid-column:1;grid-row:1 / span 3;
    }
    html[data-style="md3"] #github .gh-langbar-wrap,
    html[data-style="md3"] #github .section-label,
    html[data-style="md3"] #github .skill-grid{grid-column:2}
    html[data-style="md3"] #github .gh-langbar-wrap{margin-top:0}
}

@media (min-width:1200px){
    html[data-style="md3"] .page{max-width:1200px;margin-inline:auto}
}

html[data-style="md3"] .shader-dock-group{
    background:var(--md-sys-color-surface-container-high);
    border:none;
}
html[data-style="md3"] .shader-opt{color:var(--md-sys-color-on-surface-variant)}
html[data-style="md3"] .shader-opt[aria-pressed="true"]{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
}

@media (hover:hover) and (pointer:fine){
    html[data-style="md3"] .md3-nav-item:hover{color:var(--md-sys-color-on-surface)}
    html[data-style="md3"] .md3-fab:hover{filter:brightness(1.08)}
    html[data-style="md3"] .md3-icon-btn:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}
    html[data-style="md3"] .explore-btn:hover,
    html[data-style="md3"] .card-btn:hover,
    html[data-style="md3"] .gh-follow:hover{filter:brightness(1.08);transform:none;box-shadow:none}
    html[data-style="md3"] .card:hover{transform:none;box-shadow:none}
    html[data-style="md3"] .social-btn:hover{
        background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface-container-highest));
        transform:none;box-shadow:none;
    }
    html[data-style="md3"] .social-btn:hover img{transform:none}
    html[data-style="md3"] .social-btn-img:hover img{filter:none}
    html[data-style="md3"] .skill:hover{transform:none;background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}
}

@media (prefers-reduced-motion:reduce){
    html[data-style="md3"] .md3-sheet,
    html[data-style="md3"] .md3-snackbar{transition:opacity .2s ease}
}