:root{font-family:Ubuntu,Arial,sans-serif;color:#eeeae3;background:#111211;color-scheme:dark;--muted:#aaa9a2;--accent:#b9caaa}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}::selection{background:#b9caaa;color:#111}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:8px}header,main,footer{width:min(1400px,calc(100% - 112px));margin:auto}header{display:flex;align-items:center;gap:38px;padding:32px 0;border-bottom:1px solid #343632}header>a:first-child{font-size:21px}header>a span{font-weight:300}header p{font-size:13px;color:var(--muted)}header>a:last-child{margin-left:auto;font-size:12px}main{display:grid;grid-template-columns:1fr 1.08fr;gap:100px;padding:70px 0 90px;align-items:start}.studio{position:sticky;top:45px}h1{font-size:48px;line-height:1.12;font-weight:300;letter-spacing:0;margin:0 0 24px}h1 em{font-style:normal;color:var(--accent)}.intro{color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 54px}.deck{position:relative;aspect-ratio:1.3;width:100%;background:#b5a38a;border-radius:7px;border:1px solid #d1c1a6;border-bottom:9px solid #7c6d58;box-shadow:0 24px 40px -10px #0009;isolation:isolate}.deck:before{content:"";position:absolute;inset:8px;border:1px solid #94836e;border-radius:3px;pointer-events:none}.platter{position:absolute;width:72%;aspect-ratio:1;top:5%;left:4%;border:4px solid #898982;border-radius:50%;background:#151616;box-shadow:0 5px 8px #0006}.disc{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#17191a 0 2px,#27292a 2.4px 3px,#161818 3.5px 5px);border:2px solid #323536;box-shadow:0 10px 20px #0005}.playing-disc{position:absolute;inset:3px}.label{border-radius:50%;width:32%;aspect-ratio:1;background:#e5e2d7;color:#242522;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-size:19px;gap:7px}.label b{font-weight:400}.label small{font-size:7px;line-height:1.6}.spindle{position:absolute;inset:calc(50% - 3px);border-radius:50%;background:#959b96;border:1px solid #e6e9e6;z-index:2}.arm-pivot{position:absolute;right:10%;top:13%;width:11%;aspect-ratio:1;border-radius:50%;background:#27292a;border:5px solid #828680;box-shadow:0 4px 7px #0005}.arm{position:absolute;top:50%;left:40%;width:9px;height:235px;max-height:480%;background:#b5bbb8;border-right:3px solid #666d69;transform-origin:50% 0;transform:rotate(-6deg);transition:transform .45s ease}.arm:before{content:"";position:absolute;top:-18px;left:-10px;width:27px;height:26px;background:#333738;border-top:3px solid #7f8584}.arm i{position:absolute;bottom:-6px;left:-5px;width:20px;height:36px;background:#212425;border-bottom:4px solid #b9caaa}.deck-bottom{position:absolute;left:7%;right:8%;bottom:6%;display:flex;align-items:center;gap:15px;color:#292b27;font-size:10px}.maker{font-size:17px;font-weight:700}.maker small{display:block;font-size:6px;font-weight:400;margin-top:3px}.light{width:7px;height:7px;border-radius:50%;background:#425540;margin-left:auto}.playback{display:flex;align-items:center;justify-content:space-between;min-height:54px;font-size:12px;color:var(--muted)}.playback button{border:0;background:none;text-decoration:underline;cursor:pointer}.signature{font-size:12px;color:var(--muted);line-height:1.7;margin-top:28px}.collection{display:grid;gap:66px;min-width:0}.album{min-width:0}.sleeve{display:block;position:relative;border:0;padding:0;background:none;width:100%;aspect-ratio:1.38;cursor:grab;text-align:left;touch-action:pan-y}.jacket{position:absolute;inset:0 auto 0 0;width:72%;background:#232824;overflow:hidden;box-shadow:3px 10px 22px #0008;border:1px solid #ffffff18;transition:transform .35s ease;display:block}.peek{position:absolute;right:0;top:3%;width:68%;transition:transform .45s ease}.peek .label{font-size:18px}.jacket img{width:100%;height:100%;object-fit:cover;display:block}.cover-type{position:absolute;z-index:1;top:26px;left:26px;font-size:36px;line-height:1.05;font-weight:300}.cover-foot{position:absolute;bottom:22px;left:26px;font-size:10px;z-index:1}.garden .jacket img{filter:brightness(.68)}.garden .cover-type{color:white;text-shadow:0 2px 8px #0007}.garden .cover-foot{background:#1d2921;padding:8px 10px;left:20px;bottom:16px}.garden .label{background:#b9caaa}.sync .jacket{background:#dcdedc;color:#222724}.sync .cover-type{font-size:47px}.cover-type>span{display:block}.sync .jacket img{position:absolute;top:44%;height:39%;object-fit:contain;mix-blend-mode:multiply}.sync .peek{background:repeating-radial-gradient(circle,#b8bab7 0 2px,#d0d1cd 2.4px 3px,#bfc1bd 3.5px 5px);border-color:#bdbfba}.sync .label{background:#343e37;color:#eee}.food .jacket{background:#063d2b}.food .cover-type{font-size:36px}.food .cover-type>span{font-size:16px;margin-top:9px}.food .jacket img{position:absolute;top:36%;height:49%;object-fit:contain}.food .label{background:#b9d59b}.album-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:22px}h2{font-size:17px;font-weight:400;margin:0 0 7px}.album-caption p{font-size:11px;color:var(--muted);margin:0}.album-caption a{font-size:11px;padding:12px 0;white-space:nowrap}.sleeve:hover .peek,.sleeve:focus-visible .peek{transform:translateX(10px) rotate(12deg)}.sleeve:hover .jacket{transform:translateX(-4px)}.deck.target{outline:2px solid var(--accent);outline-offset:7px}.deck.playing .playing-disc{animation:spin 2.5s linear infinite}.deck.playing .arm{transform:rotate(27deg)}.deck.playing .light{background:#d0e4ad}.drag-ghost{position:fixed;width:160px;pointer-events:none;z-index:100;opacity:.95}.drag-ghost .label{font-size:16px}.drag-ghost .label small{font-size:6px}footer{border-top:1px solid #343632;display:flex;justify-content:space-between;gap:20px;padding:28px 0;color:var(--muted);font-size:11px}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){main{gap:140px}.collection{gap:80px}}
@media(max-width:1050px){header,main,footer{width:calc(100% - 64px)}main{gap:50px}h1{font-size:38px}.cover-type,.food .cover-type{font-size:28px}.sync .cover-type{font-size:36px}.arm{height:180px}.cover-type{top:20px;left:20px}}
@media(max-width:700px){header,main,footer{width:calc(100% - 40px)}header{flex-wrap:wrap;gap:10px;padding:24px 0}header>a:first-child{font-size:19px}header p{order:3;width:100%;margin:4px 0 0;font-size:12px}main{display:block;padding-top:34px}.studio{position:relative;top:auto}h1{font-size:38px}.intro{margin-bottom:32px;font-size:13px}.deck{max-width:400px;margin:auto}.signature{display:none}.collection{margin-top:38px;gap:42px}.album-caption{padding-top:17px}.cover-type,.food .cover-type{font-size:32px}.sync .cover-type{font-size:42px}.arm{height:200px}footer{flex-wrap:wrap}.cover-foot{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}