*{box-sizing:border-box}
:root{color-scheme:dark;--paper:#eee7d9;--muted:#999690;--amber:#d6b286;--floor:46px;--art:240px}
html{background:#0c0d0e;min-height:100%}body{margin:0;color:var(--paper);font:14px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:radial-gradient(ellipse at 50% 40%,#23201b50,transparent 60%),#0c0d0e;min-height:100svh}
button,input,textarea{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,.scene:focus-visible{outline:2px solid var(--amber);outline-offset:5px}button:disabled{cursor:default;opacity:.45}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.app{max-width:560px;margin:auto;padding:28px 22px max(28px,env(safe-area-inset-bottom));overflow:hidden}.masthead{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:39px}.brand{flex-shrink:0}
.wordmark{font-size:45px;font-weight:900;letter-spacing:-3px;line-height:1;display:flex;align-items:center;text-shadow:0 1px #fff3}.brand-dot{color:#b44b37;margin-left:3px}
.record-logo{display:inline-block;position:relative;width:66px;height:50px;margin:0 1px 0 3px}.record-logo:before{content:'';position:absolute;left:0;top:0;width:49px;height:49px;border-radius:50%;background:repeating-radial-gradient(circle,#373736 0 1px,#111213 2px 3px);border:1px solid #b6a38b88;box-shadow:inset 4px 1px 10px #ffffff1c,1px 2px 3px #000}.record-logo:after{content:'';position:absolute;width:35px;height:35px;right:0;bottom:0;border-radius:50%;background:radial-gradient(circle,#161818 0 12%,#99978c 13% 16%,transparent 17%),conic-gradient(from 20deg,#f1e9c4,#bbb6ad,#83a3aa,#e7dad2,#b38d7e,#f8f3da,#9fa4a6,#f1e9c4);border:1px solid #e2dace;box-shadow:-2px 2px 5px #0007}.record-logo span{position:absolute;z-index:1;left:16px;top:16px;width:17px;height:17px;background:radial-gradient(circle,#151413 0 10%,#c9a67e 11% 100%);border-radius:50%}
.tagline{font-size:7.6px;letter-spacing:2px;margin-top:10px;color:#9d9489}.profile{display:flex;align-items:center;gap:12px}.profile>span{font-size:10px;letter-spacing:1.3px;white-space:nowrap;color:#d5cec1}
.knob{position:relative;flex-shrink:0;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #3d3e3f;background:repeating-conic-gradient(#747575 0 2deg,#25282a 2deg 5deg);box-shadow:0 3px 10px #000a,0 0 0 4px #171819}.knob span{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#5a5d5d,#303335 55%,#202224);box-shadow:inset 0 1px 1px #aaa7,inset 0 -1px 1px #000}.knob span:after{content:'';position:absolute;width:2px;height:9px;top:3px;left:50%;background:#e5cca7;box-shadow:0 0 5px #d8ac6c4d;transform:rotate(-26deg);transform-origin:50% 12px}.knob:active span{transform:rotate(18deg)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.section-title h1{margin:0;font-size:23px;letter-spacing:-.6px;font-weight:550}.add-shelf{display:flex;align-items:center;gap:6px;background:linear-gradient(#252526,#1c1d1e);border:1px solid #45433f;border-radius:9px;min-height:44px;padding:0 13px;font-size:12px;color:#c7beb0;box-shadow:inset 0 1px #ffffff05}.add-shelf svg{width:16px;height:16px}
.shelf-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.shelf-name{display:flex;align-items:center;gap:9px}.shelf-name h2{margin:0;font-size:15px;font-weight:550}.status-light{width:4px;height:4px;flex-shrink:0;background:#caaa7a;border-radius:50%;box-shadow:0 0 7px #b8915860}.record-quantity{font-size:10px;color:#7c7a75;margin-left:4px}.counter{font-size:11px;letter-spacing:1px;display:flex;gap:7px;font-variant-numeric:tabular-nums}.counter b{font-weight:500;color:#e8decf}.counter>span{color:#787773}
.shelf-shell{position:relative;margin:0 -22px}.scene{position:relative;isolation:isolate;height:calc(var(--art) + 107px);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;perspective:1100px;perspective-origin:50% 70%;outline-offset:-4px!important}.scene.dragging{cursor:grabbing}.light-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 71%,#b37d3633,transparent 66%);transition:opacity .3s}.scene:after{content:'';position:absolute;z-index:70;inset:0;pointer-events:none;background:linear-gradient(90deg,#0d0e0fdb,transparent 15%,transparent 85%,#0d0e0fdb)}
.records{position:absolute;inset:0;transform-style:preserve-3d}.jacket{position:absolute;width:var(--art);height:var(--art);left:calc(50% - var(--art)/2);bottom:calc(var(--floor) + 9px);transform-style:preserve-3d;will-change:transform;transform-origin:50% 100%;border-radius:2px}.cover{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px;overflow:hidden;box-shadow:8px 9px 17px #0009,0 1px 3px #000;border:1px solid #fff3;background:#272624}.cover img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.cover:after{content:'';position:absolute;inset:0;border:1px solid #f0e2cc25;background:linear-gradient(105deg,#ffffff18,transparent 15%,transparent 80%,#0002);border-radius:2px;box-shadow:inset 1px 0 2px #e9d9b94d,inset -1px 0 2px #0007}.spine{position:absolute;top:1px;bottom:1px;width:10px;left:-9px;transform:rotateY(-90deg);transform-origin:right center;background-image:linear-gradient(#0004,#0004),var(--cover);background-size:auto 100%;background-position:left;border:1px solid #c0a28166;box-shadow:inset 2px 0 #fff2}
.floor-shadow{position:absolute;z-index:0;height:31px;bottom:calc(var(--floor) - 9px);left:5%;right:5%;background:radial-gradient(ellipse,#000d,transparent 70%);filter:blur(5px)}.shelf-board{position:absolute;left:0;right:0;bottom:var(--floor);height:10px;z-index:72;background:linear-gradient(#8f6b47,#4d3825 18%,#2d2118 60%,#4b3322 65%,#211b16);border-top:1px solid #bd92618c;box-shadow:0 10px 19px #000,0 -2px 12px #ca98542b}.shelf-board:after{content:'';position:absolute;inset:1px 0;background:repeating-linear-gradient(1deg,transparent 0 2px,#180e071c 3px 4px);opacity:.7}.shelf-board>div{position:absolute;top:-2px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#efd0a27a,transparent);box-shadow:0 0 13px 2px #e9aa5633}
.shelf-arrow{position:absolute;z-index:90;top:calc(50% - 57px);width:39px;height:91px;border-radius:9px;background:linear-gradient(100deg,#303131,#1b1d1f 45%,#151718);border:1px solid #545049;box-shadow:inset 1px 1px #f2ddbe0d,0 4px 9px #0008;display:grid;place-items:center;color:#e5d5bc;touch-action:manipulation}.shelf-arrow:hover{background:linear-gradient(100deg,#393a3a,#232526 45%,#1e2021);border-color:#85725b}.shelf-arrow:active{transform:translateY(1px);color:#fff1d8}.shelf-arrow svg{width:21px;height:21px;stroke-width:1.7}.previous{left:10px}.previous svg{transform:rotate(180deg)}.next{right:10px}
.album-info{text-align:center;margin-top:-17px;position:relative;z-index:3;min-height:90px;padding:0 10px}.album-info h3{font:500 clamp(22px,5.6vw,29px)/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.4px;margin:0;text-wrap:balance;overflow-wrap:anywhere}.album-info p{color:#b2aaa0;margin:8px 0 6px;font-size:13px;letter-spacing:.1px;min-height:18px}.format{font-size:9px;letter-spacing:1.8px;color:#74736e}.format span{margin:0 5px;color:#645e54}
.position-track{width:84px;height:2px;background:#32302c;border-radius:2px;margin:17px auto 24px;overflow:hidden}.position-track span{display:block;width:calc(100% / 7);height:100%;border-radius:2px;background:#d2af7c;box-shadow:0 0 8px #d2af7c55;transition:transform .15s}
.album-actions{display:flex;justify-content:center;gap:22px}.album-actions>button{background:transparent;border:0;padding:0;min-width:62px;min-height:74px;display:flex;flex-direction:column;align-items:center;gap:9px;color:#b9b1a5;font-size:10px;letter-spacing:.15px}.action-icon{position:relative;display:grid;place-items:center;width:50px;height:47px;background:linear-gradient(125deg,#272828,#191b1c);border:1px solid #47443e;border-radius:11px;box-shadow:inset 0 1px #e9d9c20a,0 3px 6px #0004}.action-icon svg{width:21px;height:21px;color:#d7c8b4}.album-actions button:hover .action-icon{border-color:#91806a;background:#30302e}.action-icon i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--amber);right:7px;top:7px}
.gesture-hint{text-align:center;max-width:310px;margin:23px auto 0;color:#83817b;font-size:10px;line-height:1.7;min-height:34px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.bottom-sheet{position:fixed;inset:auto 0 0;width:min(100%,560px);margin:0 auto;max-height:min(86svh,770px);padding:12px 23px max(25px,env(safe-area-inset-bottom));background:linear-gradient(140deg,#252625,#161819);border:1px solid #555047;border-bottom:0;border-radius:22px 22px 0 0;color:var(--paper);box-shadow:0 -14px 80px #000b;overflow:auto}.bottom-sheet::backdrop{background:#0009;backdrop-filter:blur(5px)}.sheet-grip{margin:0 auto 8px;width:36px;height:3px;border-radius:2px;background:#67635b}.sheet-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.sheet-heading h2{font-size:18px;font-weight:500;margin:0}.sheet-heading>button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent}.sheet-heading svg{width:20px;height:20px}.sheet-copy{color:#b2aca2;line-height:1.7;margin:0 0 18px;font-size:13px}.sheet-cover{display:block;width:140px;height:140px;object-fit:cover;margin:0 auto 20px;box-shadow:0 8px 20px #0007}.sheet-album{text-align:center;font:23px/1.25 Georgia,serif;margin:0 0 5px}.sheet-artist{text-align:center;color:#bbb1a4;margin:0 0 20px;font-size:13px}
.metadata{display:grid;grid-template-columns:1fr 1.5fr;gap:12px 15px;font-size:12px;line-height:1.5;margin:20px 0}.metadata dt{color:#918b82}.metadata dd{margin:0;overflow-wrap:anywhere}.note-label{display:block;color:#aaa297;font-size:12px;margin-bottom:9px}.note-input{width:100%;min-height:160px;resize:vertical;border:1px solid #56534c;background:#101213;border-radius:10px;padding:14px;font-size:16px;color:#ece4d6;line-height:1.5}
.primary-button{display:block;width:100%;min-height:47px;border-radius:10px;background:#d1b48f;color:#211a13;border:1px solid #e2c7a4;font-size:13px;font-weight:600;margin-top:18px}.secondary-button{display:block;width:100%;min-height:44px;border-radius:10px;background:#292c2b;color:#d7c8b4;border:1px solid #555047;margin-top:10px;font-size:13px}.switch-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;gap:25px;border-bottom:1px solid #ffffff0d;font-size:13px}.switch-row span small{display:block;color:#999086;margin-top:5px;font-size:11px;line-height:1.5}.switch-row input{accent-color:#c8a67b;width:22px;height:22px;flex-shrink:0}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);width:max-content;background:#dbbf98;color:#252016;padding:11px 17px;border-radius:10px;box-shadow:0 8px 30px #0008;font-size:12px;z-index:200}.no-light .light-wash,.no-light .shelf-board>div{opacity:0}.no-light .shelf-board{box-shadow:0 10px 19px #000}.noscript{padding:20px;text-align:center}
@media(max-width:400px){.app{padding:24px 18px 28px}.shelf-shell{margin:0 -18px}.masthead{gap:10px;margin-bottom:32px}.wordmark{font-size:36px;letter-spacing:-2px}.record-logo{width:54px;height:42px}.record-logo:before{width:41px;height:41px}.record-logo:after{width:29px;height:29px}.record-logo span{width:14px;height:14px;left:14px;top:14px}.tagline{font-size:6.5px;letter-spacing:1.65px}.profile{gap:9px}.profile>span{font-size:9px;letter-spacing:.6px}.knob{width:39px;height:39px}.section-title{margin-bottom:22px}.section-title h1{font-size:22px}.shelf-arrow{width:35px;height:83px}.previous{left:8px}.next{right:8px}.record-quantity{font-size:9px;margin-left:0}.gesture-hint{max-width:280px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}


@media(max-width:340px){.wordmark{font-size:32px}.record-logo{width:47px;height:37px}.record-logo:before{width:36px;height:36px}.record-logo:after{width:25px;height:25px}.record-logo span{left:12px;top:12px;width:12px;height:12px}.tagline{font-size:5.8px;letter-spacing:1.45px}.profile{gap:8px}.profile>span{font-size:8px}.masthead{gap:8px}}

.shelf-arrow{min-width:44px}.knob{min-width:44px;min-height:44px}.album-actions>button{font-size:11px}.gesture-hint{font-size:11px}

/* CR-021: personal album history and the nine-band rating. */
.profile-button{border:0;background:none;padding:10px 0;min-height:44px;max-width:100px;font-size:10px;letter-spacing:.9px;color:#d5cec1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-button:hover{color:var(--amber)}.record-quantity{font-size:11px;color:#aaa296}.format{font-size:10px;color:#aaa296}.counter>span{color:#a59d92}.album-info{min-height:82px}
.home-rating{max-width:300px;margin:7px auto 0}.rating-display{display:flex;align-items:center;gap:19px;width:100%;min-height:78px;text-align:left;padding:12px 14px;border:1px solid #70654f42;border-radius:12px;background:linear-gradient(120deg,#1f211fb0,#131616);box-shadow:inset 0 1px #f5d4a207}
.rating-display:hover{border-color:#9d866361}.rating-caption{display:flex;flex-direction:column;gap:3px;flex:1}.eyebrow{font-size:9px;letter-spacing:1.6px;color:#a19787}.rating-caption strong{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.rating-description{font-size:10px;color:#a69b8a;line-height:1.5}.rating-chevron{font-size:22px;color:#a08f74}.rating-large{margin:20px 0 17px;gap:23px;justify-content:center}.rating-large .rating-caption{max-width:190px}
.equalizer{--eq-height:41px;--eq-width:84px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;width:var(--eq-width);height:var(--eq-height);flex-shrink:0;align-items:stretch}.eq-bar{display:grid;grid-template-rows:repeat(10,minmax(0,1fr));gap:1.5px}.eq-cell{display:block;border-radius:1px;background:#2e332c;opacity:.75}.eq-cell.lit{background:var(--segment-color);opacity:1;box-shadow:0 0 4px color-mix(in srgb,var(--segment-color) 20%,transparent)}
.position-track{margin:14px auto 18px}.album-actions{gap:27px}.gesture-hint{margin-top:15px}.masthead{margin-bottom:31px}
.bottom-sheet{max-height:min(90dvh,870px);padding:12px 22px max(24px,env(safe-area-inset-bottom));overscroll-behavior:contain}.sheet-heading{position:relative;margin-bottom:14px}.sheet-heading h2{font-size:18px}.sheet-heading>button{flex-shrink:0}
.album-hero{display:flex;align-items:center;gap:20px;margin:3px 0 21px}.album-hero>img{width:125px;height:125px;object-fit:cover;flex-shrink:0;border:1px solid #cbb99935;box-shadow:0 8px 15px #0006;border-radius:2px}.album-hero>div{min-width:0}.album-hero h3{font:500 24px/1.23 Georgia,serif;letter-spacing:-.3px;margin:9px 0 6px;overflow-wrap:anywhere}.album-hero p{font-size:13px;color:#b8aea0;margin:0;overflow-wrap:anywhere}.album-hero.compact{gap:15px;padding-bottom:16px;border-bottom:1px solid #ffffff10;margin-bottom:15px}.album-hero.compact>img{width:58px;height:58px}.album-hero.compact h3{font-size:18px;margin:4px 0}.album-hero.compact .eyebrow{font-size:8px}.album-hero.compact p{font-size:12px}
.card-tabs{display:flex;gap:4px;padding:4px;background:#101313;border:1px solid #ffffff0b;border-radius:11px;margin:22px 0 18px}.tab{flex:1;padding:10px 3px;min-height:43px;border:0;border-radius:7px;background:transparent;font-size:12px;color:#a79f92;white-space:nowrap}.tab[aria-selected=true]{background:#33332e;color:#f0e4ce;box-shadow:0 2px 5px #0005}.card-panel{min-height:240px}.subheading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 6px}.subheading h3{font-size:14px;font-weight:500;margin:0}.subheading .muted-copy{margin:0}.metadata{font-size:12px;grid-template-columns:minmax(90px,1fr) minmax(0,1.35fr);gap:13px 18px;margin:15px 0 25px}.metadata dt{color:#a49c8f}.metadata dd{white-space:pre-wrap}.metadata .unfilled{color:#858077}
.text-button,.back-link{background:none;border:0;min-height:38px;padding:7px 0;color:#cbb28f;font-size:12px}.text-button:hover,.back-link:hover{color:#eed7b7}.text-button.centered{display:block;margin:8px auto 0}.back-link{margin:-5px 0 13px;text-align:left}.muted-copy{font-size:12px;line-height:1.65;color:#aaa193;margin:12px 0}.centered{text-align:center}.local-caption{font-size:10px;color:#938b7e;text-align:center;line-height:1.6;margin:12px 0 5px}.notes-link{display:flex;align-items:center;gap:12px;width:100%;border:1px solid #ffffff15;background:#292d29;border-radius:11px;padding:12px 14px;font-size:13px}.notes-link>svg{width:19px;height:19px}.notes-link>span:last-child{margin-left:auto;font-size:20px}.pill{background:#b49a7130;border-radius:6px;padding:2px 7px;color:#d5bd98;font-size:10px}.latest-note{font-size:12px;color:#b7ad9e;line-height:1.65;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding:0 3px}
.rating-preview{padding:22px 15px 16px;text-align:center;background:radial-gradient(ellipse at 50% 90%,#889b5a0d,transparent 80%),#121615;border:1px solid #69705b3b;border-radius:14px}.rating-preview .equalizer{--eq-width:198px;--eq-height:94px;gap:8px;margin:6px auto 20px}.rating-preview .eq-bar{gap:3px}.rating-preview strong{display:block;font:500 25px/1.4 Georgia,serif;letter-spacing:1px}.rating-preview p{font-size:12px;color:#b4a990;margin:5px 0}.rating-options{display:flex;gap:10px;margin:20px 0 16px}.rating-option{flex:1;min-width:0;min-height:50px;border:1px solid #5e584c;border-radius:10px;background:linear-gradient(#30332f,#212421);font-size:19px;color:#bfb5a4}.rating-option.selected{background:#d3b890;color:#201c14;border-color:#f4d8ad;box-shadow:0 0 0 3px #dbba7b14}.rating-option:focus-visible{outline-offset:2px}
.form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:12px;color:#b9ad9c}.form-field input,.form-field select,.form-field textarea{width:100%;font:16px/1.45 inherit;font-family:inherit;font-size:16px;line-height:1.45;color:#eee5d7;background:#121615;border:1px solid #514e43;border-radius:9px;padding:12px;min-height:46px;outline-color:#d0b187;resize:vertical}.form-field textarea{min-height:100px}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:2px solid #b79d74;outline-offset:1px}.edit-form fieldset{border:0;padding:0;margin:14px 0 25px}.edit-form legend{font-size:15px;color:#e6d6bc;border-bottom:1px solid #a5997730;padding-bottom:12px;margin-bottom:18px;width:100%}.form-error{font-size:12px;line-height:1.6;color:#efb19a}.form-error:empty{display:none}.discard-prompt{padding:12px 16px;border:1px solid #ac8f65;border-radius:12px;background:#343026;margin-bottom:18px}.discard-prompt p{margin:0;font-size:13px}.discard-prompt .text-button{display:block;width:100%}
.empty-state{padding:25px 18px;border:1px dashed #746c584d;border-radius:13px;background:#151a171f;text-align:center;margin:14px 0}.empty-state strong{font:500 19px/1.4 Georgia,serif;display:block}.empty-state p{font-size:12px;line-height:1.7;color:#a99f8f;max-width:300px;margin:10px auto 0}.message-list{display:flex;flex-direction:column;gap:16px;min-height:170px;padding:8px 0 20px}.message{margin-left:18px;background:linear-gradient(125deg,#3b3c31,#2a3028);border:1px solid #86826234;border-radius:15px 15px 3px 15px;padding:15px 16px;box-shadow:0 3px 6px #0002}.message>p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}.message-footer{margin-top:10px}.message time{font-size:10px;color:#b0a793;display:block;line-height:1.6}.message-tools{display:flex;gap:18px;justify-content:flex-end}.message-tools .text-button{font-size:10px;min-height:30px;padding:7px 0}.message-tools .text-button:last-child{color:#a99c88}.message-composer{display:grid;grid-template-columns:1fr 44px;align-items:end;gap:10px;padding:12px 0 6px;position:sticky;bottom:0;background:linear-gradient(#1e2220f2,#1b1e1c);box-shadow:0 -10px 12px #1e2220df;border-radius:10px}.message-composer textarea{border:1px solid #555848;background:#111714;color:#eee6d7;font:16px/1.5 inherit;font-family:inherit;font-size:16px;line-height:1.5;padding:12px;border-radius:12px;resize:vertical;width:100%;min-height:70px;max-height:160px;outline-color:#c4a87d}.send-button{border:1px solid #c8b38c;background:#cfb78e;color:#272c21;border-radius:12px;height:44px;display:grid;place-items:center;margin-bottom:3px}.send-button svg{width:22px;height:22px;stroke-width:1.8}.editing-label{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#d4bb94}.editing-label[hidden]{display:none}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:17px 0}.photo-tile{margin:0;position:relative;border:1px solid #6d62494d;border-radius:10px;overflow:hidden;background:#181c18}.photo-open{display:block;aspect-ratio:1;width:100%;padding:0;border:0;background:#111413}.photo-open img{width:100%;height:100%;object-fit:cover;display:block}.photo-cover-button{width:100%;min-height:40px;border:0;background:#292d25;font-size:11px;color:#cfbc99}.photo-delete{position:absolute;right:6px;top:6px;width:34px;height:34px;border:1px solid #ffffff35;background:#10130fd9;border-radius:50%;font-size:22px;color:#e6d7c0;display:grid;place-items:center;padding:0}.upload-button{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;min-height:48px;border:1px solid #8e7e5c;border-radius:10px;color:#ddc8a3;background:#3c3d2d;font-size:13px;margin-top:15px;cursor:pointer;overflow:hidden}.upload-button svg{width:20px;height:20px}.upload-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.upload-button:focus-within{outline:2px solid var(--amber);outline-offset:3px}.upload-button.disabled{opacity:.5;pointer-events:none}.full-photo{display:block;max-width:100%;max-height:64dvh;object-fit:contain;margin:auto;border-radius:4px}
.share-preview{border:1px solid #73634566;background:#111613;padding:22px;border-radius:13px;margin-bottom:15px}.share-brand{font-weight:850;font-size:24px;letter-spacing:-1px;color:#e5d9c5}.share-preview .album-hero{display:block;text-align:center;margin:20px 0 0}.share-preview .album-hero>img{width:100%;height:auto;aspect-ratio:1;max-width:260px;object-fit:cover;margin:0 auto 17px}.share-preview .album-hero h3{font-size:25px}.share-preview .album-hero .eyebrow{display:none}.share-preview .muted-copy{margin-bottom:0}.share-explanation{margin-top:20px;font-size:11px}.profile-avatar{margin:5px auto 18px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#d7c5a5;border:1px solid #c9ae7a69;background:repeating-radial-gradient(circle,#2a2e27 0 1px,#191e18 2px 4px);box-shadow:0 6px 16px #0004}.profile-title{text-align:center;font:24px/1.3 Georgia,serif;margin:10px 0;overflow-wrap:anywhere}.profile-form{margin-top:23px}.account-row{width:100%;display:grid;grid-template-columns:1fr 20px;gap:6px;padding:16px;text-align:left;background:#303429;border:1px solid #7b765d55;border-radius:12px;font-size:14px}.account-row>small{grid-column:1;grid-row:2;font-size:11px;color:#b0a58f}.account-row>span:last-child{grid-column:2;grid-row:1/3;align-self:center;font-size:24px}.settings-subtitle{font-size:12px;letter-spacing:1px;color:#a69b87;text-transform:uppercase;font-weight:500;margin:27px 0 4px}.version-label{font-size:11px;line-height:1.8;white-space:pre-line;color:#a79d8b;text-align:center;margin:27px 0 0}.toast{display:flex;align-items:center;gap:16px}.toast[hidden]{display:none}.toast-undo{background:none;border:0;color:#302619;text-decoration:underline;font-size:12px;padding:4px}.toast span{max-width:300px}
@media(max-width:400px){.profile-button{font-size:9px;letter-spacing:.4px;max-width:86px}.masthead{margin-bottom:27px}.bottom-sheet{padding-left:18px;padding-right:18px}.album-hero{gap:16px}.album-hero>img{width:108px;height:108px}.album-hero h3{font-size:22px}}
@media(max-width:340px){.profile-button{max-width:70px;font-size:8px}.rating-display{gap:15px}.rating-display .equalizer{--eq-width:78px}.tab{font-size:11px}.album-hero>img{width:90px;height:90px}.album-hero h3{font-size:20px}.rating-options{gap:7px}.metadata{grid-template-columns:1fr 1.2fr;gap:12px}}

/* CR-022 — Media Object identity and a personal mixed-media shelf. */
:root{--paper:#eee1d0;--muted:#a79f96;--amber:#dc9a79;--terracotta:#d25a3c;--red:#ff1b1b}
html,body{background-color:#0e0e0e}body{background:radial-gradient(ellipse at 50% 44%,#392a202e,transparent 64%),#0e0e0e}
[hidden]{display:none!important}.app{padding-top:max(24px,env(safe-area-inset-top));max-width:560px}.masthead{gap:16px;margin-bottom:24px}.brand{width:210px;max-width:56%}.brand-art{display:block;width:100%;height:auto;aspect-ratio:740/175;stroke:none;fill:none}.brand .tagline{font-size:7px;letter-spacing:2.05px;white-space:nowrap;color:#b4a99d;margin-top:9px;text-align:center}.profile{gap:14px}.profile-button{max-width:76px;font-size:11px;color:#cbbeb0}.knob span:after{background:#e8b28c}
.search-launch{width:100%;min-height:46px;display:flex;align-items:center;gap:11px;padding:10px 14px;border:1px solid #60564a50;border-radius:25px;background:linear-gradient(110deg,#232321,#191a19);color:#b6aca1;text-align:left;font-size:12px;margin-bottom:25px;box-shadow:inset 0 1px #ffffff06}.search-launch svg{width:19px;height:19px;color:#eee1d0}.section-title{margin-bottom:18px}.section-title h1{font-size:23px}.add-shelf{font-size:12px;color:#e2c8ad;border-color:#6b5445}.shelf-tabs{display:flex;gap:7px;overflow-x:auto;margin:0 0 20px;padding:2px 1px 6px;scrollbar-width:thin}.shelf-tabs button{flex-shrink:0;background:#1c1e1d;border:1px solid #49423a;border-radius:20px;min-height:36px;padding:0 14px;font-size:12px;color:#b6a99b;max-width:230px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.shelf-tabs button[aria-pressed=true]{background:#663a29;border-color:#ba6b49;color:#f1ddc5}.shelf-heading{gap:10px}.shelf-name{min-width:0;gap:8px;flex-wrap:wrap}.shelf-name h2{max-width:200px;overflow-wrap:anywhere;font-size:15px}.status-light{background:#d96f4e}.pill{font-size:10px;color:#f5b38c;background:#a851313a}.record-quantity{font-size:11px;color:#a99e91;margin-left:0}.counter{flex-shrink:0}.demo-description{font-size:11px;line-height:1.65;color:#b0a292;margin:9px 0 0;max-width:370px}
.scene{height:calc(var(--art) + 94px);--floor:34px}.shelf-board{height:8px}.shelf-arrow{top:calc(50% - 41px);height:88px;width:38px;min-width:38px}.scene:after{background:linear-gradient(90deg,#0e0e0ecc,transparent 17%,transparent 83%,#0e0e0ecc)}.light-wash{background:radial-gradient(ellipse at 50% 74%,#b1733330,transparent 67%)}
.jacket{--media-w:1;--media-h:1;width:calc(var(--art)*var(--media-w));height:calc(var(--art)*var(--media-h));left:calc(50% - var(--art)*var(--media-w)/2);bottom:calc(var(--floor) + 9px)}.media-cd{--media-w:.63;--media-h:.56}.media-cassette{--media-w:.35;--media-h:.54}.media-cd .cover{border:3px solid #bbb6a082;border-left-width:9px;border-radius:3px;box-shadow:3px 5px 13px #0009,inset 0 0 0 1px #fff9}.media-cassette .cover{border:3px solid #a69b8877;border-radius:3px;box-shadow:3px 6px 13px #0009}.media-cassette .cover img{object-position:50% 50%}.media-cassette .cover:after,.media-cd .cover:after{background:linear-gradient(115deg,#ffffff3a,transparent 29%,#ffffff08 70%,#ffffff32);border:1px solid #efe7d84d}.media-cassette .spine{width:17px;left:-16px;background-color:#4d453b}.media-cd .spine{width:7px;left:-6px;background-color:#9c9990}
.physical-media{position:absolute;inset:3%;border-radius:50%;transform:translateX(calc(var(--pull,0) * 24%));background:radial-gradient(circle,#e41e22 0 2%,#0c0c0c 2.5% 6%,#a64832 6.5% 17%,#161616 17.5% 18%,transparent 18.5%),repeating-radial-gradient(circle,#101010 0 2px,#242422 3px 4px,#101010 5px 6px);box-shadow:3px 3px 10px #0007;border:1px solid #393834;z-index:0}
.media-cd .physical-media{inset:3% 6%;transform:translateX(calc(var(--pull,0) * 30%));background:radial-gradient(circle,#151515 0 8%,#b0ac9c 8.5% 11%,transparent 11.5% 16%,#e9e1d55c 16.5% 19%,transparent 19.5%),conic-gradient(from 20deg,#e3d8bd,#989c9c,#9aadb2,#e4d3cb,#b9a094,#faf0da,#8d9394,#e3d8bd);border:1px solid #e2d4bb}
.media-cassette .physical-media{inset:5% 4%;border-radius:4px;background:linear-gradient(120deg,#534d4233,#1f2322 30%,#44473d88);border:2px solid #b7ad9670;transform:translateX(calc(var(--pull,0) * 37%));box-shadow:3px 3px 8px #0008;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.media-cassette .physical-media i{height:25%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ded7bf 0 17%,#171b19 18% 27%,#9e9b89 28% 32%,#30362d 33% 70%,#777b6877 71%);border:1px solid #a0a28b66}.media-cassette .physical-media span{font-size:5px;color:#e4dbc2;letter-spacing:1px;position:absolute;bottom:1px;left:4px;writing-mode:vertical-rl}.jacket .cover{z-index:1}.jacket .spine{z-index:2}
.album-info{margin-top:-6px;min-height:76px}.album-info h3{font-size:25px}.album-info p{margin-top:6px}.home-rating{max-width:295px;margin-top:7px}.rating-display{background:linear-gradient(125deg,#25251f80,#141614);min-height:73px;padding:10px 14px}.album-actions{gap:28px}.album-actions>button{min-height:65px}.position-track{margin:13px auto 16px}.add-album{max-width:360px;margin:23px auto 0;background:linear-gradient(125deg,#d76d47,#c55437);border-color:#e6946b;color:#fff0de;box-shadow:0 3px 12px #0004;font-size:14px;font-weight:550;min-height:48px;border-radius:24px}.primary-button{background:#ce7955;border-color:#e6a681;color:#1d1510}.add-album{background:linear-gradient(125deg,#d76d47,#c55437);color:#fff0de}#manage-shelf{margin:5px auto 0;font-size:11px}.gesture-hint{font-size:10px;margin-top:10px;min-height:18px}.empty-shelf{position:relative;margin-top:-150px;min-height:150px;text-align:center;padding:0 16px;color:#e8d6c2;z-index:80}.empty-shelf strong{font:22px Georgia,serif}.empty-shelf p{font-size:12px;line-height:1.6;color:#aaa092;max-width:260px;margin:12px auto}
.search-tabs{display:flex;gap:6px;border-bottom:1px solid #514737;margin:0 0 15px}.search-tab{border:0;background:transparent;padding:12px;min-height:44px;color:#a99d8d;font-size:12px}.search-tab[aria-pressed=true]{color:#e9bd91;box-shadow:0 2px #d4774c}.search-result{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:0;border-bottom:1px solid #ffffff0d;background:transparent;padding:12px 0;min-height:80px}.search-result img{width:55px;height:55px;object-fit:cover;border-radius:3px}.search-result>span:nth-child(2){flex:1;min-width:0}.search-result strong{display:block;overflow-wrap:anywhere;font-size:14px;font-weight:500}.search-result small{display:block;margin-top:6px;color:#aea18f;font-size:12px}.search-result>span:last-child{font-size:22px;color:#b99d80}
.new-cover{position:relative;display:flex;min-height:160px;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;border:1px dashed #87705b;border-radius:12px;background:#171b18;margin-bottom:24px;cursor:pointer}.new-cover svg{width:32px;height:32px}.new-cover small{color:#a3998a;font-size:10px}.new-cover input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.new-cover img{max-width:100%;max-height:220px;object-fit:contain}.new-cover.has-photo{min-height:220px}.new-cover.has-photo>svg,.new-cover.has-photo>.new-cover-label,.new-cover.has-photo>small{display:none}.media-picker{border:0;padding:0;margin:0 0 21px}.media-picker legend{font-size:12px;color:#b9ad9c;margin-bottom:10px}.media-picker>div{display:flex;gap:10px}.media-picker label{position:relative;flex:1;border:1px solid #54493e;border-radius:12px;background:#20221f;min-height:91px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;font-size:12px;cursor:pointer}.media-picker input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}.media-picker label:has(input:checked){border-color:#dd9772;background:#5f39285c;color:#e7b68c}.media-picker label:has(input:focus-visible){outline:2px solid #e3ba88;outline-offset:3px}.media-symbol{width:31px;height:31px;border-radius:50%;background:radial-gradient(circle,#171717 0 7%,#ba4e37 8% 24%,#131613 25% 65%,#524c42 67%,#171717 70%)}.cd-symbol{background:radial-gradient(circle,#171717 0 13%,#b6b4a6 14% 22%,transparent 23%),conic-gradient(#d9ceb1,#777e7a,#e4d7c9,#99a8a1,#d9ceb1)}.tape-symbol{border-radius:3px;background:radial-gradient(circle at 30% 45%,#aba793 0 12%,transparent 13%),radial-gradient(circle at 70% 45%,#aba793 0 12%,transparent 13%),linear-gradient(#33372e,#767665);height:22px;margin:5px 0 4px;border:2px solid #85836d}
.manage-row{display:flex;align-items:center;gap:6px;border-bottom:1px solid #ffffff10;padding:9px 0}.manage-name{flex:1;text-align:left;overflow-wrap:anywhere;border:0;background:transparent;min-height:44px;padding:7px 6px;font-size:14px}.order-button{border:1px solid #5f5547;border-radius:9px;background:#2c2d26;min-width:44px;min-height:44px;color:#d6c1a1;font-size:20px}.assign-list{max-height:42vh;overflow:auto}.assign-row{display:flex;align-items:center;gap:13px;padding:14px 2px;border-bottom:1px solid #ffffff10;cursor:pointer}.assign-row input{width:21px;height:21px;accent-color:#ce7955;flex-shrink:0}.assign-row strong{display:block;font-size:12px;font-weight:500}.assign-row small{display:block;color:#a99a86;font-size:11px;margin-top:5px}.sheet-heading h2{font-size:18px}.bottom-sheet{background:linear-gradient(140deg,#262624,#171918)}.toast{z-index:2147483647}.bottom-sheet .toast{position:sticky;left:auto;bottom:8px;transform:none;margin:10px auto 0;max-width:100%}
@media(max-width:400px){.app{padding-left:18px;padding-right:18px}.brand{width:184px;max-width:56%}.brand .tagline{font-size:6px;letter-spacing:1.5px}.profile{gap:12px}.profile-button{font-size:10px;max-width:65px}.masthead{margin-bottom:22px}.search-launch{font-size:11px;margin-bottom:21px}.section-title{margin-bottom:18px}.shelf-name h2{max-width:155px}.scene{height:calc(var(--art) + 90px)}.shelf-arrow{width:35px;min-width:35px;height:79px}.album-info h3{font-size:23px}.album-info{min-height:71px}.demo-description{font-size:10px}.home-rating{max-width:285px}.add-album{margin-top:19px}.album-actions>button{font-size:11px}.shelf-tabs{margin-bottom:16px}}
@media(max-width:340px){.masthead{gap:9px}.brand .tagline{font-size:5px;letter-spacing:1.25px}.profile-button{max-width:42px;font-size:9px}.profile{gap:8px}.knob{min-width:40px;min-height:40px;width:40px;height:40px}.shelf-name{gap:6px}.shelf-name h2{max-width:130px;font-size:14px}.record-quantity{font-size:10px}.shelf-arrow{min-width:31px;width:31px}.album-info h3{font-size:21px}.media-picker>div{gap:7px}}
/* Keep the album, rating and primary actions together within a phone screen. */
.app{padding-top:20px}.masthead{margin-bottom:18px}.search-launch{margin-bottom:18px}.section-title{margin-bottom:15px}.demo-description{margin-top:6px}.scene{height:calc(var(--art) + 76px)}
#album-detail{display:grid;grid-template-columns:minmax(0,1fr) 100px;column-gap:16px;align-items:center}.album-info{padding:0;margin:0;text-align:left;min-height:78px;display:flex;flex-direction:column;justify-content:center}.album-info h3{font-size:20px;line-height:1.22;text-wrap:initial;order:1}.album-info p{order:0;color:#d9cbb9;font-size:12px;margin:0 0 5px}.album-info .format{order:2;display:block;margin-top:7px;font-size:9px}.home-rating{margin:0;width:100px}.home-rating .rating-display{display:flex;flex-direction:column;gap:7px;padding:8px 0;min-height:0;border:0;border-radius:8px;background:transparent;box-shadow:none;text-align:center}.home-rating .equalizer{--eq-width:78px;--eq-height:35px}.home-rating .rating-caption{display:block}.home-rating .rating-caption strong{font-size:10px;color:#cbb18b}.home-rating .eyebrow,.home-rating .rating-description,.home-rating .rating-chevron{display:none}.position-track,.album-actions{grid-column:1/-1}.position-track{margin:11px auto 14px}.album-actions>button{min-height:64px}.add-album{margin-top:16px}.gesture-hint{margin-top:10px}.demo-description{max-width:100%}
@media(min-width:401px){.brand{width:198px}.app{padding-top:22px}.scene{height:calc(var(--art) + 74px)}}
@media(max-width:340px){#album-detail{column-gap:10px;grid-template-columns:minmax(0,1fr) 86px}.home-rating{width:86px}.album-info h3{font-size:18px}.album-info p{font-size:11px}.scene{height:calc(var(--art) + 68px)}}