:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#343e37;background:#f5f4ef;font-synthesis:none;--green:#456858;--muted:#606e65;--line:#e2e5dc;--lime:#e5edbb}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}header{max-width:480px;margin:0 auto;height:94px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:0 20px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:25px;letter-spacing:-.9px}.brand-icon{color:var(--green);font-size:36px}.brand-sub{font-weight:400;font-size:20px;letter-spacing:-.8px}.local{border:1px solid #cbd0c3;border-radius:99px;padding:7px 12px;font-size:11px;color:var(--muted)}#identity{margin-left:auto;font-size:13px}main{max-width:480px;margin:48px auto 110px;padding:0 24px}.eyebrow{text-transform:uppercase;font-size:10.5px;letter-spacing:1.25px;font-weight:600;color:var(--green);margin:0 0 12px}h1{font-size:34px;line-height:1.14;letter-spacing:-1.3px;font-weight:500;margin:0 0 16px}h2{font-size:26px;line-height:1.25;letter-spacing:-.5px;font-weight:600;margin:0 0 12px}h3{margin:0 0 12px;font-size:17px}p{line-height:1.6}.muted{color:var(--muted)}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px;gap:20px}.intro p{margin:0}.progress{min-width:220px;font-size:12px}.progress-line{display:flex;justify-content:space-between;margin-bottom:12px;gap:20px}progress{accent-color:var(--green);height:5px;width:100%;display:block;border:0;background:#dce0d4}progress::-webkit-progress-bar{background:#dce0d4}progress::-webkit-progress-value{background:var(--green)}.listening{display:grid;grid-template-columns:1fr;gap:58px;align-items:start}.art-wrap{background:#eeeee5;padding:20px;border-radius:22px;box-shadow:0 10px 30px #314a3408}.cover{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#e2e6d7;border-radius:12px}.sleeve-caption{display:flex;justify-content:space-between;margin-top:18px;color:var(--muted);font-size:10px;letter-spacing:1.1px;text-transform:uppercase}.album-info{padding-top:10px}.album-info h2{font-size:30px;letter-spacing:-.65px;font-weight:550;margin-top:16px}.album-info h2 a{text-decoration:none}.album-info h2 a:hover{text-decoration:underline}.artist{font-size:19px;color:var(--muted);margin:8px 0 20px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.tag{font-size:11px;border:1px solid #e1e6d9;background:#edf0e7;border-radius:99px;padding:7px 11px}.release-note{font-size:12px;color:var(--muted);padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);line-height:1.6;margin-bottom:24px}.release-note a{display:inline-block;margin-top:6px}.rating-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:23px}label.field{display:block;font-size:12px;font-weight:600;margin:17px 0 8px}input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea,select{background:#fcfcf9;border:1px solid #dce3d6;border-radius:14px;padding:12px;color:inherit;width:100%;min-height:44px}textarea{min-height:86px;resize:vertical}input:focus,textarea:focus,select:focus{outline:2px solid #6a8971;outline-offset:2px}.primary,.secondary,.danger{border:0;border-radius:14px;padding:14px 20px;min-height:46px;background:var(--green);color:#fff;display:inline-flex;justify-content:center;align-items:center;gap:12px;text-decoration:none;font-size:13px}.primary{font-weight:600}.wide{width:100%;margin-top:16px}.secondary{background:#e9ede3;color:#3e5748}.danger{background:#f0ded7;color:#733622}button:disabled{opacity:.5;cursor:wait}.fine{font-size:11px;color:var(--muted);text-align:center}.section-note{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;font-size:12px;display:flex;justify-content:space-between;color:var(--muted);gap:18px}nav{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;background:#fdfdf8;border:1px solid #e2e7da;box-shadow:0 10px 30px #314a3410;border-radius:22px;padding:7px;gap:4px;z-index:3}nav a{text-decoration:none;padding:13px 20px;font-size:12px;border-radius:15px;white-space:nowrap}nav a.active{color:#36583f;background:#e4ecdd}[hidden]{display:none!important}.auth-layout{display:grid;grid-template-columns:1fr;gap:80px;align-items:center;min-height:60vh}.auth-art{background:#e3eadb;color:#3b5747;min-height:450px;padding:46px;border-radius:22px;position:relative;overflow:hidden}.auth-art p{max-width:300px;color:#5d705f}.record{width:240px;height:240px;border-radius:50%;background:repeating-radial-gradient(circle,#222e26 0px,#222e26 4px,#334b39 5px,#222e26 6px);border:35px solid #1c2b22;position:absolute;right:-35px;bottom:-65px;box-shadow:0 0 0 14px #91a16a}.record:after{content:'1001';background:var(--lime);border-radius:50%;width:80px;height:80px;display:grid;place-items:center;color:var(--green);position:absolute;inset:45px;font-weight:800}.tabs{display:flex;gap:8px;margin-bottom:24px}.tabs button{flex:1}.panel{background:#fafbf7;border:1px solid var(--line);padding:26px;border-radius:20px;margin-bottom:20px}.welcome{text-align:center;padding:70px 24px;max-width:640px;margin:auto}.welcome .disc{font-size:100px;color:var(--green)}.welcome .primary{min-width:210px}.toolbar{display:flex;gap:12px;margin:24px 0}.toolbar input{flex:1}.toolbar select{max-width:210px}.history-card{display:grid;grid-template-columns:68px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}.history-card img{width:68px;height:68px;object-fit:cover;border-radius:12px}.history-card h3{font-size:16px;margin-bottom:5px}.history-card p{margin:4px 0;font-size:13px;overflow-wrap:anywhere}.score{background:#e2ebd9;color:#3c5c46;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;font-size:17px}.history-card details{margin-top:10px;font-size:12px}.history-card summary{cursor:pointer;min-height:25px}.history-card form{margin-top:18px}.stats-grid{display:grid;grid-template-columns:1fr;gap:16px}.metric strong{display:block;font-size:48px;letter-spacing:-2px;font-weight:500;margin-top:16px}.metric span{font-size:12px;color:var(--muted)}.histogram{display:flex;gap:14px;height:220px;align-items:end;margin-top:32px}.bar-group{flex:1;text-align:center;font-size:12px;display:flex;flex-direction:column;justify-content:end;height:100%;gap:8px}.bar-group meter{width:100%;height:140px;writing-mode:vertical-lr;direction:rtl;accent-color:var(--green)}.settings-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.preview-rows{max-height:340px;overflow:auto;font-size:12px}.preview-row{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.preview-row p{margin:4px 0}#notice{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);background:#3e5b49;color:white;border-radius:16px;padding:14px 22px;box-shadow:0 5px 30px #0002;z-index:10;font-size:13px}#notice:empty{display:none}.admin-row{padding:16px 0;border-bottom:1px solid var(--line)}.admin-row summary{cursor:pointer;line-height:1.5}.admin-fields{display:grid;grid-template-columns:1fr;gap:0 18px}.check{display:flex;align-items:center;gap:8px;font-size:13px;margin:20px 0}.admin-row form{max-width:800px}pre{white-space:pre-wrap;overflow-wrap:anywhere}details.tracklist{font-size:12px;margin:16px 0}li{padding:4px 0}.links{display:flex;gap:12px;margin-top:12px;font-size:12px}.empty{padding:50px 20px;text-align:center}
header{height:76px;padding:0 20px;gap:12px}.brand{font-size:23px}.brand-sub{font-size:17px}.brand-icon{font-size:30px}.local{display:none}main{margin:28px auto 110px;padding:0 20px}h1{font-size:34px;letter-spacing:-.9px}.intro{display:block;margin-bottom:24px}.intro>div>p.muted{font-size:13px}.progress{margin-top:23px}.listening{grid-template-columns:1fr;gap:18px}.art-wrap{padding:15px}.album-info{padding:0}.album-info h2{font-size:27px;margin-top:10px}.artist{font-size:17px}.section-note{font-size:10px}nav{bottom:12px;gap:1px;padding:5px;max-width:calc(100vw - 20px);width:max-content}nav a{padding:13px 12px;font-size:11px}.auth-layout{grid-template-columns:1fr;gap:30px}.auth-art{min-height:245px;padding:28px}.auth-art h1{max-width:260px}.auth-art p{max-width:220px;font-size:13px}.record{width:180px;height:180px;bottom:-80px;right:-70px}.record:after{inset:15px}.stats-grid{gap:8px}.metric{padding:17px 12px}.metric strong{font-size:31px}.metric span{font-size:10px}.settings-grid{grid-template-columns:1fr;gap:0}.panel{padding:22px}.history-card{grid-template-columns:52px 1fr auto;gap:12px}.history-card img{width:52px;height:52px}.history-card .score{width:35px;height:35px;font-size:14px}.toolbar{flex-direction:column}.toolbar select{max-width:none}.histogram{gap:8px}.admin-fields{grid-template-columns:1fr}.welcome{padding:35px 0}.welcome .disc{font-size:80px}
@media(prefers-reduced-motion:no-preference){button,a{transition:background .15s ease,opacity .15s ease}}


#identity{max-width:35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-art .eyebrow{color:inherit}
nav{display:flex;width:calc(100vw - 24px)}nav a{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;font-size:12px}nav a span{font-size:10px}

/* Softer supporting surfaces and quiet interaction states. */
.release-note{padding:14px 16px;background:#ecefe6;border:0;border-radius:14px}
.sleeve-caption{letter-spacing:.5px}
progress,progress::-webkit-progress-bar,progress::-webkit-progress-value{border-radius:99px}
@media(hover:hover){.primary:not(:disabled):hover{background:#3e604e}.secondary:not(:disabled):hover{background:#e0e8d8}nav a:not(.active):hover{background:#f0f3e9}}
@media(prefers-reduced-motion:no-preference){button,a,input,textarea,select{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,opacity .2s ease}}

/* Integer rating slider: blank until deliberately selected. */
.rating-slider{margin:14px 0 10px}
.rating-readout{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}
.rating-hint{font-size:12px;color:var(--muted)}
.rating-readout output{font-size:34px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums;color:var(--green)}
.rating-denominator{font-size:13px;color:var(--muted)}
.rating-track{position:relative;height:48px}
.rating-track progress{position:absolute;top:20px;left:15px;width:calc(100% - 30px);height:8px;pointer-events:none;background:#e0e7d9;accent-color:#8eaa81}
.rating-track progress::-webkit-progress-bar{background:#e0e7d9}
.rating-track progress::-webkit-progress-value{background:#8eaa81}
.rating-track progress::-moz-progress-bar{background:#8eaa81}
input.score-range{appearance:none;-webkit-appearance:none;display:block;width:100%;height:48px;padding:0;margin:0;border:0;border-radius:16px;background:transparent;cursor:pointer;position:relative;touch-action:pan-y}
input.score-range::-webkit-slider-runnable-track{height:8px;background:transparent;border:0}
input.score-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fafbf7;border:2px solid #92a18a;box-shadow:0 2px 8px #314a3418}
input.score-range::-moz-range-track{height:8px;background:transparent;border:0}
input.score-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fafbf7;border:2px solid #92a18a;box-shadow:0 2px 8px #314a3418}
.is-chosen input.score-range::-webkit-slider-thumb{border-color:var(--green);background:#f4f8ec}
.is-chosen input.score-range::-moz-range-thumb{border-color:var(--green);background:#f4f8ec}
.rating-ticks{display:flex;justify-content:space-between;margin:0 11px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.rating-scale{font-size:11px;margin-top:13px}
button.primary:disabled{cursor:default}

input.score-range:focus{outline:none}
input.score-range:focus-visible{outline:2px solid #819e82;outline-offset:3px}

/* One portrait layout at every viewport width. */
header{padding-top:env(safe-area-inset-top);height:calc(76px + env(safe-area-inset-top))}
main{margin-bottom:calc(110px + env(safe-area-inset-bottom));min-width:0}
.listening,.settings-grid,.auth-layout,.stats-grid,.admin-fields{grid-template-columns:minmax(0,1fr)}
nav{width:calc(100% - 24px);max-width:456px;bottom:calc(12px + env(safe-area-inset-bottom))}
.auth-art{display:none}
.auth-layout{min-height:0}
.metric{display:flex;align-items:center;justify-content:space-between;gap:16px}
.metric strong{margin-top:0}
.metric span{font-size:12px}
.histogram{gap:6px}
#notice{width:max-content;max-width:min(448px,calc(100vw - 32px));bottom:calc(100px + env(safe-area-inset-bottom))}

.album-info .artist{margin-bottom:8px}
.album-duration{font-size:13px;color:var(--muted);margin:0 0 18px;font-variant-numeric:tabular-nums}