.record-library{position:relative;background:var(--paper);padding-block:85px 105px;overflow:hidden}.record-library-inner{max-width:1450px}.library-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px}.library-heading h2{font-size:clamp(40px,4.5vw,70px)}.library-heading p:not(.eyebrow){font-size:15px;color:var(--muted);margin:22px 0 0}.demo-note{font-size:11px;color:var(--wine);background:#510f240b;padding:10px 15px;border-radius:20px;white-space:nowrap}.record-desk{display:grid;grid-template-columns:.6fr 1.4fr;align-items:center;gap:30px;margin:30px auto 10px;min-height:350px}.record-instructions{padding-left:30px}.record-instructions p{max-width:230px;font-size:17px;color:var(--muted);line-height:1.8;min-height:62px}.store-record{font-size:12px;gap:24px;margin-top:15px}.store-record:disabled{cursor:default;transform:none}.turntable-scene{position:relative;width:100%;max-width:760px;aspect-ratio:1.9;perspective:1100px;isolation:isolate}.turntable-shadow{position:absolute;width:84%;height:50%;left:8%;bottom:8%;border-radius:50%;box-shadow:0 35px 30px #382a281d}.turntable-plinth{position:absolute;inset:0 6% 10%;transform:rotateX(25deg) rotate(-6deg);transform-style:preserve-3d;border-radius:22px;background:#625d5c;box-shadow:0 15px #383334,0 20px #242123,0 24px 20px #2d242718}.turntable-top{position:absolute;inset:0;border-radius:22px;background:linear-gradient(120deg,#bdb6b0,#e0d9d2 45%,#b1a7a2);box-shadow:inset 0 1px #ffffff5c;overflow:hidden}.platter-rim{position:absolute;width:58%;aspect-ratio:1;left:11%;top:7%;border-radius:50%;background:repeating-radial-gradient(circle,#a9a1a0 0 1px,#d5cecb 2px 3px);box-shadow:0 6px 2px #3933347a}.platter-slot{position:absolute;width:54%;aspect-ratio:1;left:13%;top:10%;border-radius:50%;background:#312c2f;box-shadow:inset 0 0 0 2px #4b4447}.player-disc,.travelling-record,.sleeve-disc{border-radius:50%;background:repeating-radial-gradient(circle,#19181b 0 2px,#28252b 3px 4px);box-shadow:inset 0 0 0 1px #454047,0 6px 10px #20191e25}.player-disc{position:absolute;inset:0;opacity:0;animation:vinyl-turn 6s linear infinite paused}.player-disc:before,.travelling-record:before,.sleeve-disc:before{content:"";position:absolute;width:29%;height:29%;left:35.5%;top:35.5%;border-radius:50%;background:var(--record-label,#754454);box-shadow:inset 0 0 0 1px #ffffff15}.player-disc:after,.travelling-record:after,.sleeve-disc:after{content:"";position:absolute;width:2%;height:2%;left:49%;top:49%;border-radius:50%;background:#ded8d0}.tonearm{position:absolute;left:79%;top:17%;height:67%;width:6px;transform-origin:50% 8%;transform:rotate(-8deg);transition:transform .7s var(--ease);z-index:3}.tonearm:before{content:"";position:absolute;left:-11px;top:-2px;width:28px;height:28px;border-radius:50%;background:#777071;box-shadow:0 3px #332d32}.tonearm i{position:absolute;width:5px;inset:15px 0 18px;background:#ddd7d3;box-shadow:1px 0 #635c5e}.tonearm b{position:absolute;bottom:0;left:-7px;width:20px;height:25px;border-radius:3px;background:#292529;transform:rotate(-5deg)}.power-light{position:absolute;width:7px;height:7px;left:8%;bottom:12%;border-radius:50%;background:#9b8b85;transition:background .4s,box-shadow .4s}.speed-button{position:absolute;right:8%;bottom:10%;font-size:10px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#53454c;color:#d7ccc9;box-shadow:0 2px #262127}.turntable-wordmark{position:absolute;right:8%;top:8%;font-size:11px;letter-spacing:-.3px;font-weight:600;color:#66565e}.table-foot{position:absolute;width:9%;height:13%;background:#242124;bottom:-10%;border-radius:0 0 8px 8px;transform:translateZ(-16px)}.foot-left{left:8%}.foot-right{right:8%}.record-shelf-wrap{display:flex;align-items:center;gap:10px}.record-shelf{display:flex;gap:34px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:30px 35px 25px;cursor:grab;flex:1;min-width:0;user-select:none}.record-shelf::-webkit-scrollbar{display:none}.record-shelf:active{cursor:grabbing}.record-sleeve{--record-label:#754454;position:relative;width:220px;flex:0 0 220px;aspect-ratio:1.05;background:none;border:0;padding:0;scroll-snap-align:center;perspective:700px;text-align:left;isolation:isolate}.record-sleeve .sleeve-disc{position:absolute;width:86%;aspect-ratio:1;right:-2%;top:5%;transition:opacity .3s}.sleeve-cover{position:absolute;inset:0 11% 0 0;background:#cec1b8;border-radius:2px;box-shadow:-3px 3px #b0a299,0 12px 22px #3d2e2e17;transform:rotateY(-12deg) rotate(-3deg);transition:transform .75s var(--ease),box-shadow .75s;overflow:hidden}.record-sleeve:hover .sleeve-cover,.record-sleeve:focus-visible .sleeve-cover{transform:rotateY(0) rotate(-1deg) translateY(-5px);box-shadow:-2px 2px #b0a299,0 16px 26px #3d2e2e22}.sleeve-caption{position:absolute;bottom:17px;inset-inline:17px;display:flex;flex-direction:column;gap:3px;color:#392b31}.sleeve-caption b{font-size:15px;font-weight:500}.sleeve-caption>span{font-size:9px;letter-spacing:.3px}.sleeve-art{position:absolute;inset:17px 17px 62px;display:flex;align-items:center;justify-content:center;gap:5px}.art-0 i{height:calc(24% + var(--i)*7%);width:6px;border-radius:6px;background:#885666;transform:rotate(-10deg)}.sleeve-1{--record-label:#5c665f}.sleeve-1 .sleeve-cover{background:#a9afa7}.art-1 i{position:absolute;width:calc(90% - var(--i)*9%);aspect-ratio:1;border-radius:50%;border:1px solid #58645c}.sleeve-2{--record-label:#795b49}.sleeve-2 .sleeve-cover{background:#c5ae98}.art-2 i{width:7%;height:65%;background:#947862;transform:translateY(calc(var(--i)*-5px))}.sleeve-3{--record-label:#61586e}.sleeve-3 .sleeve-cover{background:#b8aabd}.art-3 i{position:absolute;width:calc(92% - var(--i)*8%);height:70%;border:1px solid #796780;transform:rotate(calc(var(--i)*8deg))}.record-sleeve.is-selected .sleeve-disc{opacity:0}.record-sleeve.is-selected .sleeve-cover{transform:rotateY(-8deg) rotate(0) translateY(5px);opacity:.7}.shelf-arrow{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;border:0;background:#510f240b;color:var(--wine);font-size:18px}.shelf-arrow:hover{background:#510f2415}.travelling-record{position:absolute;z-index:20;pointer-events:none;transform-origin:top left}.record-library[data-record-state=playing] .player-disc{opacity:1;animation-play-state:running}.record-library[data-record-state=playing] .tonearm{transform:rotate(29deg)}.record-library[data-record-state=playing] .power-light{background:#a8c7b7;box-shadow:0 0 6px #a8c7b755}.record-library[data-record-state=unloading] .player-disc{opacity:1}.record-library[data-record-state=unloading] .tonearm{transform:rotate(-8deg)}@keyframes vinyl-turn{to{transform:rotate(360deg)}}@media(max-width:760px){.record-library{padding-block:65px}.library-heading{display:block}.library-heading h2{font-size:40px}.library-heading p:not(.eyebrow){font-size:14px}.demo-note{display:inline-block;margin-top:20px}.record-desk{display:flex;flex-direction:column-reverse;gap:5px;margin-top:35px;min-height:0}.turntable-scene{width:100%;aspect-ratio:1.75}.record-instructions{padding-left:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px}.record-instructions p{font-size:12px;max-width:180px;min-height:0}.store-record{font-size:11px;min-height:43px;padding:10px 15px;gap:10px;margin:0}.record-shelf{gap:26px;padding:25px 10px 20px}.record-sleeve{width:170px;flex-basis:170px}.record-shelf-wrap{gap:0}.shelf-arrow{width:28px;height:32px;background:none}.sleeve-caption{bottom:14px;inset-inline:13px}.sleeve-caption b{font-size:13px}.sleeve-caption>span{font-size:8px}.sleeve-art{inset:12px 12px 54px}.tonearm:before{left:-6px;width:18px;height:18px}.tonearm i{inset:10px 0 14px;width:3px}.tonearm b{left:-4px;width:13px;height:18px}.speed-button{font-size:8px;width:20px;height:20px}.turntable-wordmark{font-size:8px}}@media(prefers-reduced-motion:reduce){.player-disc{animation:none!important}.tonearm,.sleeve-cover{transition:none!important}}.turntable-scene{aspect-ratio:1.62}.record-library-inner{position:relative}@media(min-width:1001px){.record-library{padding-block:45px 50px}.library-heading .eyebrow{margin-bottom:12px}.library-heading p:not(.eyebrow){margin-top:16px}.record-desk{grid-template-columns:.75fr 1.4fr;min-height:430px;margin:20px auto 0}.record-instructions{align-self:start;padding-top:18px;padding-left:15px}.record-shelf-wrap{position:absolute;left:var(--gutter);bottom:20px;width:31%;max-width:415px}.record-shelf{gap:24px;padding:25px 10px 20px}.record-sleeve{width:175px;flex-basis:175px}.shelf-arrow{width:28px;background:none}.sleeve-caption{inset-inline:12px;bottom:13px}.sleeve-caption b{font-size:13px}.sleeve-caption>span{font-size:8px}.sleeve-art{inset:12px 12px 52px}}@media(min-width:761px)and (max-width:1000px){.record-desk{grid-template-columns:.65fr 1.35fr;min-height:300px}.turntable-scene{max-width:550px}.record-instructions{padding-left:0}.record-instructions p{font-size:14px}.record-sleeve{width:185px;flex-basis:185px}}.player-disc:before,.travelling-record:before,.sleeve-disc:before{background:linear-gradient(90deg,transparent 22%,#eadfd8a8 22%26%,transparent 26%),var(--record-label,#754454)}.sleeve-1{--record-label:#665c59}.sleeve-1 .sleeve-cover{background:#b9afa7}.art-1 i{border-color:#76665d}.sleeve-2 .sleeve-cover{background:#c7b7ac}.sleeve-3{--record-label:#6d4f5a}.sleeve-3 .sleeve-cover{background:#baa7ae}.art-3 i{border-color:#805f6d}.record-library.record-paused .player-disc,.record-library.record-tab-hidden .player-disc{animation-play-state:paused}@media(max-width:760px){.record-library{padding-block:40px}.library-heading p:not(.eyebrow){margin-top:16px}.demo-note{margin-top:15px}.record-desk{margin-top:25px}}.record-shelf{position:relative;display:block;min-height:265px;padding:0;overflow:visible;touch-action:pan-y;scroll-snap-type:none;cursor:grab}.record-sleeve{position:absolute;left:50%;top:25px;width:210px;height:200px;transform:translate(-50%);visibility:hidden;opacity:0;background:transparent!important;box-shadow:none!important}.record-sleeve.is-front{visibility:visible;opacity:1}.record-sleeve[aria-hidden=true]{pointer-events:none}.sleeve-cover{box-shadow:-2px 2px #b0a299;transition:transform .6s var(--ease),opacity .4s}.record-sleeve:hover .sleeve-cover,.record-sleeve:focus-visible .sleeve-cover{box-shadow:-2px 2px #b0a299;transform:rotateY(-5deg) rotate(-1deg) translateY(-3px)}.record-sleeve.is-presenting .sleeve-cover,.record-sleeve.is-selected .sleeve-cover{transform:rotateY(0) rotate(0);opacity:1}.record-sleeve .sleeve-disc{transition:none;box-shadow:inset 0 0 0 1px #454047}.turntable-wordmark{font-size:10px;letter-spacing:-.15px}.tonearm{transition-duration:.85s}.vinyl-label{position:absolute;width:29%;height:29%;left:35.5%;top:35.5%;z-index:1;overflow:visible;fill:#eee3da;font-family:var(--sans);font-size:8.5px;letter-spacing:.55px;pointer-events:none}.player-disc:after,.travelling-record:after{z-index:2}.player-disc:before,.travelling-record:before,.sleeve-disc:before{background:var(--record-label,#754454)}@media(min-width:1001px){.record-shelf-wrap{width:30%;bottom:5px}.record-shelf{min-height:270px}.record-sleeve{width:205px;height:195px}}@media(max-width:760px){.record-shelf{min-height:255px}.record-sleeve{width:210px;height:200px}.turntable-wordmark{font-size:7px}.record-shelf-wrap{gap:3px}}.record-sleeve .sleeve-disc{z-index:0;isolation:isolate}.sleeve-cover{z-index:1}.disc-corner{position:absolute;width:0;height:0;visibility:hidden;pointer-events:none}.turntable-volume{position:absolute;left:2.8%;top:22%;width:7.5%;height:49%;z-index:5;border-radius:5px}.volume-rail{position:absolute;left:33%;width:3px;top:0;bottom:0;background:#6f6362;box-shadow:1px 0 #eee4db7a;border-radius:4px}.volume-cap{position:absolute;left:10%;width:49%;height:9px;bottom:calc(var(--volume-level)*100% - 4.5px);border-radius:2px;background:#d8d0c9;box-shadow:0 2px 2px #30282b50,inset 0 1px #eee6dc}.volume-cap:after{content:"";position:absolute;left:22%;right:22%;top:4px;height:1px;background:#66575c}.volume-leds{position:absolute;left:78%;top:0;bottom:0;width:13%;display:flex;flex-direction:column-reverse;gap:3px}.volume-led{flex:1;min-height:0;border-radius:1px;background:var(--led-color);opacity:.17}.turntable-volume input{position:absolute;left:-12px;top:0;width:calc(100% + 24px);height:100%;margin:0;opacity:0;writing-mode:vertical-lr;direction:rtl;cursor:ns-resize;touch-action:none}.turntable-volume:focus-within{outline:1px solid #754656;outline-offset:6px}.volume-readout{position:absolute;top:calc(100% + 11px);left:0;right:0;text-align:center;font-size:9px;line-height:1;color:#66565e;pointer-events:none}.volume-readout:after{content:" %"}@media(max-width:760px){.volume-leds{gap:2px}.volume-cap{height:7px;bottom:calc(var(--volume-level)*100% - 3.5px)}.volume-cap:after{top:3px}.volume-readout{font-size:6px;top:calc(100% + 7px)}}.player-disc,.travelling-record,.sleeve-disc{background:repeating-radial-gradient(circle,#19181b 0 .7%,#28252b 1.05% 1.4%)}.store-record{filter:opacity(1);transition:filter .42s ease-in-out,transform .65s var(--ease),background .65s var(--ease),box-shadow .65s var(--ease)}.store-record:disabled{filter:opacity(.4)}@media(max-width:760px){.record-sleeve{width:clamp(160px,49vw,190px);height:auto;aspect-ratio:1.05}}.record-status-slot{display:grid;min-width:0}.record-status-slot>p{grid-area:1/1;align-self:center}.record-status-measure{visibility:hidden;pointer-events:none;user-select:none}@media(max-width:760px){.record-instructions{display:grid;grid-template-columns:minmax(0,1fr) auto}.record-status-slot>p{width:100%;max-width:180px}.record-status-measure{margin-block:1em}}.shelf-arrow{opacity:1;transition:opacity .48s ease-in-out}.record-library:is([data-record-state=loading],[data-record-state=unloading]) .shelf-arrow{opacity:0;pointer-events:none;transition-duration:.44s}.record-sleeve{-webkit-tap-highlight-color:transparent}.record-library[data-record-ready=true] .tonearm{transform:rotate(calc(-8deg + var(--playback-engagement,0)*37deg));transition:none}.record-library[data-record-ready=true] .power-light{background:#9b8b85;box-shadow:none;transition:none}.record-library[data-record-ready=true] .power-light:after{content:"";position:absolute;inset:0;border-radius:inherit;background:#a8c7b7;box-shadow:0 0 6px #a8c7b755;opacity:var(--playback-engagement,0)}.volume-led{transition:opacity .1s linear}.shelf-arrow,.shelf-arrow:hover,.shelf-arrow:active{background:transparent;border:0;box-shadow:none}.shelf-arrow>.shelf-arrow-glyph{transition:transform .36s ease-in-out}@media(hover:hover)and (pointer:fine){.shelf-arrow:hover>.shelf-arrow-glyph{transform:scale(1.22)}}