:root{color-scheme:light;--bg:#fff8ee;--paper:#fffdf7;--ink:#28342e;--muted:#748079;--line:#e8e3d7;--coral:#ef806d;--sun:#ffd66d;--mint:#d7ead8;--green:#446e60}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.shell{max-width:1320px;margin:auto;padding:0 5vw}
.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700;letter-spacing:.03em}.brand-mark{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#fff;font-size:25px;line-height:1}.brand-en{font-size:10px;letter-spacing:.15em;color:var(--muted);font-weight:500;margin-left:8px}.header-link{font-size:13px;font-weight:700;border:1px solid var(--ink);border-radius:100px;padding:10px 16px}.header-link span{margin-left:9px}
.intro{display:grid;grid-template-columns:1fr 40%;gap:5%;align-items:center;padding:48px 0 58px}.eyebrow,.kicker{color:var(--green);font-size:11px;letter-spacing:.13em;font-weight:700}.signal{display:inline-block;width:8px;height:8px;background:var(--coral);border-radius:50%;margin-right:8px}.intro h1{font-size:clamp(48px,5.1vw,80px);letter-spacing:-.07em;line-height:1.2;margin:18px 0}.intro h1 em{font-style:normal;color:var(--coral)}.intro p{max-width:500px;color:var(--muted);line-height:1.9;font-size:15px;margin:0 0 25px}.primary-link{display:inline-flex;gap:32px;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;border-radius:100px;padding:14px 21px;font-size:13px;font-weight:700;box-shadow:0 6px 0 #d8e0d7;transition:transform .2s,box-shadow .2s}.primary-link:hover{transform:translateY(3px);box-shadow:0 3px 0 #d8e0d7}
.hero-art{height:315px;border-radius:24px;position:relative;overflow:hidden;display:grid;place-items:center;background:#fae2af;border:1px solid #cbdcc8}.hero-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.art-caption{position:absolute;left:25px;right:25px;font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--green);z-index:2}.art-caption.top{top:24px;display:flex;justify-content:space-between}.art-caption.bottom{bottom:22px}
.submit-section{padding:48px 0 72px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.kicker span{color:#9da69b;margin:0 5px}.recommendation-form{margin-top:20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 32px #a99b7a13;border-radius:20px;padding:24px 26px}.form-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.form-heading h2{font-size:clamp(23px,2.5vw,32px);letter-spacing:-.045em;line-height:1.2;margin:0}.platform-field{display:flex;align-items:center;gap:10px;flex:none;font-size:12px;font-weight:700}.platform-field span{white-space:nowrap}.platform-field select{height:40px;width:120px;border:1px solid #dddccf;border-radius:10px;background:#fff;color:var(--ink);padding:0 10px;outline:none;font-size:13px}.platform-field select:focus,.submission-row input:focus,.submission-row select:focus{border-color:var(--green);box-shadow:0 0 0 3px #d7ead8}
.submission-row{display:grid;grid-template-columns:minmax(0,1fr) 116px 96px auto;grid-template-areas:"name artist type ." "title artist-input type-select button";gap:8px 12px;align-items:end}.submission-row label{font-size:12px;font-weight:700;color:var(--ink)}.name-field{grid-area:name}.artist-field{grid-area:artist}.type-field{grid-area:type}.submission-row input{grid-area:title}.submission-row #music-artist{grid-area:artist-input}.submission-row #music-type{grid-area:type-select}.submission-row input,.submission-row select{height:44px;min-width:0;width:100%;border:1px solid #dddccf;border-radius:10px;background:#fff;color:var(--ink);padding:0 11px;outline:none;font-size:13px}.submission-row input::placeholder{color:#a1aaa1}.submission-row button{grid-area:button;height:44px;border:0;border-radius:10px;background:var(--coral);color:#fff;padding:0 20px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}.submission-row button:hover{background:#e96c58}.submission-row button:disabled{opacity:.6;cursor:wait}.form-status{min-height:0;color:var(--green);font-size:12px;margin:8px 0 0}.form-status:empty{display:none}.honeypot{position:absolute;left:-9999px;opacity:0}
.discover{border-top:1px solid var(--line);padding:60px 0 86px}.section-head h2{font-size:clamp(31px,3.6vw,48px);letter-spacing:-.05em;margin:12px 0 0}.list-heading{display:flex;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #c9d4c6;color:var(--muted);font-size:11px;letter-spacing:.1em;margin-top:28px}.recommendation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:17px}.recommendation-card{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:16px;align-items:start;border:1px solid var(--line);border-radius:16px;background:#fff;padding:17px;min-height:116px;box-shadow:0 6px 18px #8a997612}.cover{width:80px;height:80px;border-radius:12px;display:grid;place-items:center;position:relative;overflow:hidden;background:#f3e1bc}.cover img{width:100%;height:100%;object-fit:cover;display:block}.card-meta{color:var(--green);font-size:10px;font-weight:700;letter-spacing:.08em}.card-content h3{font-size:18px;line-height:1.35;overflow-wrap:anywhere;margin:8px 0}.card-artist{font-size:12px;color:var(--muted);margin:0}.listen-link{font-size:12px;font-weight:700;white-space:nowrap;color:var(--coral);border-bottom:1px solid currentColor;padding-bottom:4px}.empty,.loading{grid-column:1/-1;text-align:center;color:var(--muted);background:#fff;border:1px dashed #ccd7c9;border-radius:14px;margin:0;padding:43px 20px}.site-footer{border-top:1px solid var(--line);min-height:95px;display:flex;align-items:center;gap:20px;color:var(--muted);font-size:11px}.footer-brand{font-size:14px;color:var(--green);font-weight:700;margin-right:auto}.site-footer a{color:var(--ink)}a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:900px){.recommendation-list{grid-template-columns:1fr}.hero-art{height:280px}}
@media(max-width:760px){.shell{padding:0 22px}.site-header{height:69px}.brand-en{display:none}.intro{grid-template-columns:1fr;padding:43px 0}.hero-art{display:none}.intro h1{font-size:clamp(45px,9vw,65px)}.submit-section{padding:40px 0 62px}}
@media(max-width:600px){.recommendation-form{padding:18px}.form-heading{align-items:flex-start;gap:10px}.form-heading h2{font-size:23px}.platform-field{gap:6px;font-size:10px}.platform-field select{width:105px;height:36px;font-size:12px}.submission-row{grid-template-columns:minmax(0,1fr) 78px 84px;grid-template-areas:"name artist type" "title artist-input type-select" "button button button";gap:7px 8px}.submission-row label{font-size:10px}.submission-row input,.submission-row select{height:40px;padding:0 8px;font-size:12px}.submission-row button{height:42px;margin-top:3px}.recommendation-card{grid-template-columns:60px minmax(0,1fr);gap:12px;padding:13px}.cover{width:60px;height:60px}.listen-link{grid-column:2;justify-self:start}.card-content h3{font-size:16px}.site-footer{flex-wrap:wrap;gap:12px;padding:21px 0}.site-footer span:nth-child(2){width:100%;order:3}}
@media(max-width:380px){.shell{padding:0 16px}.recommendation-form{padding:14px}.form-heading{gap:6px}.form-heading h2{font-size:20px}.platform-field span{display:none}.platform-field select{width:96px}.submission-row{grid-template-columns:minmax(0,1fr) 68px 76px;gap:7px 6px}.submission-row input,.submission-row select{font-size:11px}.submission-row label{font-size:9px}}