:root{--paper:#f6f2e8;--ink:#18221d;--muted:#69756e;--line:#d8d8cd;--card:#fffdf7;--red:#e94936;--red-dark:#b72e20;--lime:#c7ee43;--blue:#2166d1;--shadow:0 16px 45px #262e2517}*{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:var(--paper)}body{color:var(--ink);background:var(--paper);margin:0;font-family:Avenir Next,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid color-mix(in oklch, var(--blue) 75%, white);outline-offset:3px}.shell{min-height:100svh}.topbar{z-index:20;border-bottom:1px solid var(--line);background:color-mix(in oklch, var(--paper) 90%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:14px clamp(18px,4vw,64px);display:grid;position:sticky;top:0}.brand{letter-spacing:-.04em;align-items:center;gap:10px;font-size:22px;font-weight:850;display:inline-flex}.brand-mark{grid-template-columns:repeat(2,9px);gap:3px;display:grid;transform:rotate(45deg)}.brand-mark i{background:var(--red);border-radius:2px;width:9px;height:9px}.brand-mark i:last-child{background:var(--lime)}.nav{align-items:center;gap:6px;display:flex}.nav a{color:var(--muted);border-radius:999px;padding:9px 13px;font-size:14px;font-weight:700}.nav a:hover{background:var(--card);color:var(--ink)}.user-slot{justify-self:end;align-items:center;gap:12px;min-width:0;display:flex}.avatar{background:var(--ink);width:35px;height:35px;color:var(--paper);border-radius:50%;flex:none;place-items:center;font-weight:800;display:grid}.user-name{text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:14px;font-weight:750;overflow:hidden}.main{width:min(1180px,100% - 36px);margin-inline:auto;padding-block:clamp(34px,6vw,76px)}.eyebrow{color:var(--red-dark);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:850}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.065em;max-width:820px;margin-bottom:24px;font-size:clamp(42px,7vw,92px);line-height:.94}h2{letter-spacing:-.045em;font-size:clamp(27px,3vw,43px);line-height:1}.lead{max-width:620px;color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.55}.hero{padding-block-end:clamp(42px,7vw,84px);position:relative}.hero:after{content:"";aspect-ratio:1;background:repeating-conic-gradient(from 45deg, var(--lime) 0 12deg, transparent 12deg 24deg);opacity:.24;z-index:-1;border-radius:50%;width:clamp(120px,20vw,260px);position:absolute;top:2%;right:2%}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.button{background:var(--ink);min-height:45px;color:var(--card);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;padding:0 20px;font-weight:800;transition:transform .18s,background .18s;display:inline-flex}.button:hover{background:var(--red-dark);transform:translateY(-2px)}.button.secondary{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);background:0 0}.button.danger{color:var(--muted);background:0 0;padding-inline:10px}.section-head{justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px;display:flex}.feed{gap:18px;display:grid}.result{border-top:1px solid var(--line);background:color-mix(in oklch, var(--card) 74%, transparent);grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:24px;padding:clamp(21px,3vw,34px);display:grid}.result:first-child{border-top:4px solid var(--ink)}.result-player{align-items:center;gap:12px;margin-bottom:22px;display:flex}.meta{color:var(--muted);font-size:13px}.song{letter-spacing:-.035em;overflow-wrap:anywhere;margin-bottom:9px;font-size:clamp(22px,3vw,36px)}.chart-pill{background:var(--lime);border-radius:999px;align-items:center;height:28px;padding:0 11px;font-size:13px;font-weight:900;display:inline-flex}.score{text-align:right;font-variant-numeric:tabular-nums}.score strong{letter-spacing:-.055em;font-size:clamp(28px,4vw,48px);display:block}.score span{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:12px}.empty{border-block:1px solid var(--line);color:var(--muted);padding:56px 0}.login-page{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);min-height:100svh;display:grid}.login-art{background:var(--red);color:#fff8e9;flex-direction:column;justify-content:space-between;padding:clamp(32px,6vw,82px);display:flex;position:relative;overflow:hidden}.login-art:before,.login-art:after{content:"";aspect-ratio:1;border:clamp(25px,5vw,72px) solid #ffffff29;width:48vw;position:absolute;transform:rotate(45deg)}.login-art:before{top:-20vw;right:-25vw}.login-art:after{border-color:#c7ee4359;bottom:-30vw;left:-30vw}.login-art>*{z-index:1;position:relative}.login-art h1{max-width:700px;margin:0;font-size:clamp(54px,9vw,132px)}.login-copy{max-width:500px;font-size:clamp(16px,2vw,22px);line-height:1.5}.login-panel{place-items:center;padding:30px;display:grid}.form-box{width:min(420px,100%)}.form-box h2{margin-bottom:12px}.form-box>p{color:var(--muted);margin-bottom:34px}.field{gap:7px;margin-bottom:18px;display:grid}.field label{font-size:13px;font-weight:800}.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--card);width:100%;min-height:50px;color:var(--ink);border-radius:10px;padding:12px 14px}.field textarea{resize:vertical;min-height:110px}.error{color:#8b2118;background:#f8d9d2;border-radius:9px;margin-bottom:18px;padding:12px 14px;font-size:14px}.form-box .button{width:100%}.upload-zone{text-align:center;background:var(--card);border:2px dashed #b8baad;border-radius:18px;place-items:center;min-height:260px;padding:30px;display:grid}.upload-zone input{max-width:100%}.kicker{background:var(--lime);border-radius:5px;padding:5px 9px;font-size:12px;font-weight:900;display:inline-block;transform:rotate(-2deg)}@media (max-width:760px){.login-page{grid-template-columns:1fr}.login-art{min-height:38svh;padding:30px 24px}.login-art h1{font-size:clamp(48px,18vw,82px)}.login-copy{display:none}.topbar{grid-template-columns:1fr auto}.nav{z-index:30;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);border-radius:999px;justify-content:space-around;padding:7px;position:fixed;bottom:12px;left:12px;right:12px}.user-name{display:none}.main{padding-bottom:110px}.result{grid-template-columns:1fr}.score{text-align:left}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
