:root{color-scheme:dark;--bg:#0b0b0d;--card:#141417;--card2:#19191d;--line:#29292f;--text:#f6f4ef;--muted:#99999f;--accent:#d4ff47;--danger:#ff756d;--radius:18px;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);min-width:320px;overflow-x:hidden;padding-bottom:calc(48px + env(safe-area-inset-bottom))}button,input{font:inherit}.shell{width:min(100% - 28px,720px);margin-inline:auto}.hero{padding-top:calc(42px + env(safe-area-inset-top));padding-bottom:28px}.eyebrow,.step{margin:0 0 10px;color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.hero h1{font-size:clamp(2.7rem,12vw,5.4rem);line-height:.88;letter-spacing:-.065em;margin:0}.hero h1 span{color:var(--muted)}.intro{max-width:450px;color:#babac0;font-size:1rem;line-height:1.5;margin:22px 0 0}.sticky-summary{position:sticky;z-index:20;top:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(11,11,13,.86);backdrop-filter:blur(18px);border-block:1px solid var(--line);padding:8px max(14px,env(safe-area-inset-left))}.sticky-summary div{padding:4px 8px;border-right:1px solid var(--line);min-width:0}.sticky-summary div:last-child{border:0}.sticky-summary span{display:block;color:var(--muted);font-size:.56rem;font-weight:750;letter-spacing:.08em;white-space:nowrap}.sticky-summary strong{display:block;font-size:1rem;margin-top:2px}.sticky-summary .final-mini strong{color:var(--accent)}main section{padding:48px 0;border-bottom:1px solid var(--line)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.step{margin-bottom:5px}.section-head h2{font-size:1.85rem;letter-spacing:-.04em;margin:0}.section-copy{color:var(--muted);line-height:1.5;margin:13px 0 20px}.score-pill{flex:0 0 auto;text-align:right}.score-pill span{display:block;color:var(--muted);font-size:.55rem;font-weight:800;letter-spacing:.1em}.score-pill strong{font-size:1.65rem;letter-spacing:-.05em}.score-pill small{color:var(--muted)}.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.legend span{color:var(--muted);font-size:.64rem;line-height:1.3}.legend b{display:block;color:#d1d1d4;font-size:.72rem}.tracks{display:grid;gap:7px}.track{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name remove" "ratings ratings";gap:7px}.track-name-wrap{grid-area:name;position:relative}.track-name-wrap label{position:absolute;left:11px;top:8px;color:var(--muted);font-size:.58rem;font-weight:700;letter-spacing:.08em;pointer-events:none}.track input{width:100%;height:44px;background:transparent;border:0;color:var(--text);padding:16px 11px 2px;border-radius:8px;outline:0}.track input:focus{background:var(--card2);box-shadow:0 0 0 1px var(--accent)}.remove{grid-area:remove;width:44px;height:44px;border:0;background:transparent;color:#77777d;font-size:1.35rem;border-radius:10px}.remove:disabled{opacity:.2}.rating-buttons{grid-area:ratings;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.rating-buttons button,.score-buttons button{min-height:44px;border:1px solid var(--line);background:#1a1a1e;color:#b7b7bc;border-radius:9px;font-weight:700;font-size:.78rem;touch-action:manipulation}.rating-buttons button.selected,.score-buttons button.selected{background:var(--accent);border-color:var(--accent);color:#101106;box-shadow:0 0 0 1px var(--accent)}.add-button{width:100%;min-height:48px;margin-top:9px;border:1px dashed #38383f;background:transparent;color:#c7c7cc;border-radius:13px;font-weight:700}.stats-card{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:12px}.rated-count strong,.rated-count span{display:block}.rated-count strong{font-size:1rem}.rated-count span{color:var(--muted);font-size:.7rem}.distribution{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.distribution div{text-align:right}.distribution span{display:block;color:var(--muted);font-size:.63rem}.distribution strong{font-size:.9rem}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}.dot.skip{background:#68686e}.dot.decent{background:#b4b4b9}.dot.save{background:var(--accent)}.criteria{display:grid;gap:9px}.criterion{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px}.criterion-head{display:flex;justify-content:space-between;gap:12px}.criterion h3{font-size:1rem;margin:0}.criterion .question{font-size:.75rem;color:var(--muted);margin:3px 0 0}.scale-toggle{min-width:44px;min-height:44px;margin:-8px -8px 0 0;border:0;background:transparent;color:var(--muted);font-size:1.2rem;border-radius:10px}.score-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:12px}.score-buttons button{font-size:.9rem}.selected-description{min-height:18px;margin:10px 0 0;color:#d3d3d6;font-size:.76rem}.full-scale{display:none;border-top:1px solid var(--line);padding-top:10px;margin-top:11px}.criterion.expanded .full-scale{display:grid;gap:5px}.full-scale div{display:grid;grid-template-columns:18px 1fr;gap:7px;color:var(--muted);font-size:.7rem;line-height:1.35}.full-scale b{color:var(--text)}.result-section{border:0}.result-card{position:relative;overflow:hidden;background:linear-gradient(150deg,#17171a,#101012);border:1px solid #33333a;border-radius:24px;text-align:center;padding:30px 18px 18px}.result-card:not(.incomplete){border-color:#53621f}.result-card:not(.incomplete):before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:var(--accent);filter:blur(100px);opacity:.08;top:-100px;left:50%;transform:translateX(-50%)}.result-kicker{margin:0;color:var(--muted);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.stars{color:var(--accent);font-size:clamp(2.5rem,13vw,4.4rem);letter-spacing:.02em;line-height:1.2;margin-top:8px;white-space:nowrap}.rating-number strong{font-size:3.1rem;letter-spacing:-.07em}.rating-number span{color:var(--muted)}.result-card h3{font-size:1.35rem;margin:0;color:var(--accent)}.raw{color:var(--muted);font-size:.62rem;letter-spacing:.08em;margin:10px 0 20px}.raw strong{color:var(--text)}.breakdown{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.breakdown:empty{display:none}.breakdown div{background:#1a1a1e;border:1px solid var(--line);padding:10px;border-radius:10px}.breakdown span{display:block;color:var(--muted);font-size:.61rem}.breakdown strong{font-size:.83rem}.primary{width:100%;min-height:52px;border:0;background:var(--accent);color:#111106;border-radius:13px;font-weight:800;margin-top:16px}.primary:disabled{background:#242429;color:#6c6c72}.reset{width:100%;min-height:50px;border:0;background:transparent;color:#8c8c91;margin-top:10px}dialog{width:min(calc(100% - 28px),400px);padding:0;border:1px solid var(--line);border-radius:22px;background:#161619;color:var(--text)}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.dialog-inner{padding:24px}.dialog-inner h2{margin:0}.dialog-inner>p:not(.eyebrow){color:var(--muted);line-height:1.45}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.dialog-actions button{min-height:48px;border:1px solid var(--line);border-radius:12px;background:#222226;color:var(--text);font-weight:700}.dialog-actions .danger{background:var(--danger);color:#1b0705;border-color:var(--danger)}.toast{position:fixed;z-index:50;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#f4f2ed;color:#101012;border-radius:99px;padding:10px 17px;font-size:.8rem;font-weight:750;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:560px){.sticky-summary{padding-inline:calc((100vw - 692px)/2)}.track{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr) 44px;grid-template-areas:"name ratings remove";align-items:center}.rating-buttons{grid-area:ratings}.remove{grid-area:remove}.breakdown{grid-template-columns:repeat(4,1fr)}}
@media(max-width:350px){.shell{width:calc(100% - 20px)}.sticky-summary div{padding-inline:4px}.sticky-summary span{font-size:.5rem}.legend{display:none}.stats-card{grid-template-columns:1fr}.distribution div{text-align:left}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
