:root {
    --paper: #f1efe7;
    --ink: #171711;
    --muted: #6d6b61;
    --line: rgba(23, 23, 17, .17);
    --acid: #d9ff43;
    --orange: #ff6738;
    --blue: #3f67e8;
    --card: #faf9f3;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--paper);
    font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .24;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

.topbar {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.home-link {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.status-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #45a941;
    box-shadow: 0 0 0 4px rgba(69,169,65,.14);
}

main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.hero { padding: 86px 0 56px; }

.kicker, .section-number {
    margin: 0 0 18px;
    font-size: .72rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

h1 {
    max-width: 1000px;
    margin: 0;
    font-size: clamp(3rem, 7.4vw, 6.7rem);
    line-height: .95;
    letter-spacing: -.065em;
    font-weight: 850;
}

h1 em {
    font-family: "Songti SC", "STSong", serif;
    font-weight: 500;
    font-style: italic;
}

.intro {
    max-width: 680px;
    margin: 34px 0 46px auto;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.search-panel {
    padding: 22px;
    border: 1px solid var(--ink);
    background: var(--acid);
    box-shadow: 8px 8px 0 var(--ink);
}

.search-panel label {
    display: block;
    margin-bottom: 10px;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.input-row { display: flex; gap: 10px; }

.input-row input {
    flex: 1;
    min-width: 0;
    height: 62px;
    padding: 0 18px;
    border: 1px solid var(--ink);
    border-radius: 0;
    color: var(--ink);
    background: var(--card);
    font: inherit;
    font-size: 1rem;
    outline: none;
}

.input-row input:focus { box-shadow: inset 0 0 0 3px var(--blue); }

.input-row button, .error-state button {
    min-width: 190px;
    border: 1px solid var(--ink);
    border-radius: 0;
    color: white;
    background: var(--ink);
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.input-row button:hover, .error-state button:hover { background: var(--blue); }
.input-row button:disabled { opacity: .55; cursor: wait; }
.input-row button b { font-size: 1.35rem; }

.field-note {
    margin: 12px 0 0;
    color: rgba(23,23,17,.7);
    font-size: .78rem;
}

.workspace {
    min-height: 350px;
    padding: 56px 0;
    border-top: 1px solid var(--line);
}

.empty-state, .loading-state, .error-state {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    text-align: left;
}

.empty-state h2, .loading-state h2, .error-state h2, .results-heading h2 {
    margin: 0;
    max-width: 680px;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(1.8rem, 3.5vw, 3.4rem);
    line-height: 1.15;
    font-weight: 500;
}

.record {
    position: relative;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, #1c1c18 0 4px, #33322d 5px 7px);
    box-shadow: 8px 8px 0 var(--orange);
}

.record::before, .record i {
    content: "";
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    background: var(--acid);
}

.record i { inset: 47%; background: var(--ink); }

.spinner {
    width: 76px;
    height: 76px;
    border: 8px solid var(--line);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.song-card {
    margin-bottom: 54px;
    padding: 24px;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 26px;
    align-items: center;
    color: white;
    background: var(--blue);
    border: 1px solid var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
}

.song-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    background: #ddd;
}

.song-card .song-label { margin: 0 0 8px; opacity: .7; font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.song-card h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1; }
.song-card p { margin: 5px 0 0; opacity: .86; }
.song-card a { color: white; font-weight: 800; text-underline-offset: 4px; }

.results-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.result-count { font-size: 3rem; line-height: 1; font-weight: 900; color: var(--orange); }

.notice {
    max-width: 760px;
    margin: 22px 0 30px;
    color: var(--muted);
    line-height: 1.65;
}

.result-list { display: grid; gap: 14px; }

.result-item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--ink);
    background: var(--card);
    transition: transform .16s ease, box-shadow .16s ease;
}

.result-item:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }

.score {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--orange);
    font-weight: 900;
}

.result-copy { min-width: 0; }
.result-copy h3 { margin: 0 0 7px; overflow-wrap: anywhere; font-size: 1.03rem; }
.result-copy p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.result-copy a { color: var(--blue); }

.license-chip {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    color: var(--ink);
    background: var(--acid);
    font-size: .68rem;
    font-weight: 900;
}

.download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    color: white;
    background: var(--ink);
    text-decoration: none;
    font-weight: 850;
    white-space: nowrap;
}

.download-button:hover { background: var(--blue); }

.error-state { flex-direction: column; align-items: flex-start; max-width: 720px; margin: 0 auto; }
.error-state p:not(.section-number) { margin: -18px 0 0; color: var(--muted); line-height: 1.6; }
.error-state button { min-height: 48px; min-width: 150px; }

.principles {
    padding: 58px 0 78px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
}

.principles > div { padding: 0 30px; border-left: 1px solid var(--line); }
.principles > div:first-child { padding-left: 0; border-left: 0; }
.principles span { color: var(--orange); font-size: .72rem; font-weight: 900; }
.principles h3 { margin: 18px 0 8px; font-size: 1rem; }
.principles p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }

footer {
    padding: 24px max(20px, calc((100vw - 1180px) / 2));
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: white;
    background: var(--ink);
    font-size: .75rem;
}

footer p { margin: 0; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
    .topbar, main { width: min(100% - 28px, 1180px); }
    .hero { padding-top: 58px; }
    .intro { margin: 28px 0 38px; }
    .input-row { flex-direction: column; }
    .input-row button { min-height: 56px; }
    .empty-state, .loading-state { align-items: flex-start; justify-content: flex-start; }
    .record { width: 82px; height: 82px; }
    .song-card { grid-template-columns: 82px 1fr; }
    .song-card img { width: 82px; height: 82px; }
    .song-card .song-link { grid-column: 1 / -1; }
    .result-item { grid-template-columns: 56px 1fr; }
    .score { width: 52px; height: 52px; }
    .download-button { grid-column: 1 / -1; }
    .principles { grid-template-columns: 1fr; gap: 28px; }
    .principles > div, .principles > div:first-child { padding: 0; border: 0; }
    footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}