.record-page{background:#f6eddb;overflow-x:hidden}.record-page:before{background-color:#f9f1df}.record-page:after{content:"";position:fixed;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 80% 30%,#fff9e7 0,transparent 50%),linear-gradient(110deg,transparent 7%,#b9955c0c 10%,transparent 17%,#b9955c0c 22%,transparent 32%)}.record-header{max-width:1600px;margin:auto;color:#4e4535;height:85px}.record-brand{display:flex;flex-direction:column;align-items:center;line-height:1.1}.record-brand b{font-family:var(--hand);font-size:35px;letter-spacing:3px;font-weight:900;color:#222}.record-brand small{font-size:8px;letter-spacing:2.5px;font-weight:700;margin-top:6px}.tool-caption{font-size:12px;border-right:1px solid #8e8061;padding-right:22px}.record-layout{display:grid;grid-template-columns:35% 65%;max-width:1460px;margin:auto;padding:16px 4% 0;gap:0;position:relative}.record-dedication{position:relative;padding:27px 10px 0 0;z-index:2}.tiny-eyebrow{font-size:8px;letter-spacing:2.7px;color:#968467}.record-dedication h1{font-family:var(--serif);font-size:clamp(37px,4.2vw,64px);font-weight:900;letter-spacing:1px;line-height:1.5;margin:20px 0 17px;white-space:nowrap}.record-dedication h1 span{color:var(--coral)}.to-line{font-family:var(--serif);font-size:22px;letter-spacing:3px;margin:12px 0}.to-line span{font-family:var(--hand);letter-spacing:2px;overflow-wrap:anywhere}.gift-date{font-size:11px;letter-spacing:3px;color:#6b5c47;margin:0}.letter-card{background:#fffaf0;padding:28px 25px 18px;margin:43px 14px 0 0;position:relative;transform:rotate(-6deg);box-shadow:3px 7px 18px #8d68221c;border:1px solid #e8d8b3;min-height:210px;z-index:2}.letter-card:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.04' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.letter-card>p{font-family:var(--hand);font-size:25px;line-height:1.9;letter-spacing:1px;text-align:center;color:#332e25;margin:0;overflow-wrap:anywhere}.letter-card>p.signature{text-align:right;margin:15px 5px 0;font-size:23px}.signature span{color:var(--coral);margin-left:7px}.letter-tape{position:absolute;left:35%;top:-12px;width:96px;height:24px;transform:rotate(8deg);background:#e4ca9280;clip-path:polygon(0 0,100% 3%,99% 100%,1% 91%)}.letter-flower{position:absolute;width:100px;left:-48px;bottom:6px;z-index:3;pointer-events:none;transform:rotate(-8deg)}.side-note{font-family:var(--hand);font-size:18px;line-height:1.6;color:#8c724a;transform:rotate(8deg);position:relative;margin:25px 28px 0 0;text-align:right}.side-note span{display:inline-block;padding:0 9px;color:var(--blue)}.record-stage{position:relative;min-width:0;padding:0 0 0 20px;align-self:start}.sunlight{position:absolute;pointer-events:none;top:-100px;left:-50px;width:80%;height:340px;opacity:.38;filter:blur(13px);background:repeating-linear-gradient(135deg,transparent 0 60px,#d1bf921c 60px 98px,transparent 98px 140px);transform:rotate(-15deg)}.turntable{width:94%;max-width:780px;aspect-ratio:1.48;margin:25px auto 0;border-radius:9px;position:relative;transform:perspective(1100px) rotateX(14deg) rotateZ(-5deg);background:repeating-linear-gradient(1.2deg,#79492510 0 2px,#c59d6a15 2px 4px,#3019091a 4px 5px),repeating-linear-gradient(92deg,#74503355 0 4px,transparent 4px 17px,#29160822 17px 18px),linear-gradient(112deg,#654328,#b88754 42%,#5d3a22 100%);border:3px solid #5e3a20;box-shadow:0 12px 0 #58331d,0 17px 0 #3b2516,7px 30px 32px #52351242,inset 0 0 55px #341a1470;isolation:isolate}.turntable:after{content:"";position:absolute;inset:0;border:1px solid #e9d7aa3b;border-radius:6px;pointer-events:none}.platter{position:absolute;left:4%;top:4%;width:63%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#b7b2a2 0 1px,#191816 1px 2px,#514d45 2px 3px);padding:9px;box-shadow:0 5px 13px #180e0bb0;border:2px solid #3a342b}.vinyl-disc{position:relative;width:100%;height:100%;border-radius:50%;border:0;padding:0;display:block;background:repeating-radial-gradient(circle at center,#171715 0 1px,#292925 1px 2px,#1c1c19 2px 3px,#11110f 3px 4px);box-shadow:inset 0 0 0 2px #5e5b4d,inset 0 0 20px #0009;animation:spin 9s linear infinite;animation-play-state:paused;isolation:isolate}.vinyl-disc:focus-visible{outline-offset:7px}.record-page.playing .vinyl-disc{animation-play-state:running}.vinyl-shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 40deg,transparent 0deg,#fff1 45deg,transparent 82deg,transparent 158deg,#fff2 210deg,transparent 230deg,transparent 270deg,#fff1 294deg,transparent 335deg);pointer-events:none}.vinyl-label{position:absolute;left:31%;top:31%;width:38%;height:38%;border-radius:50%;background:#ffe5b7;border:5px solid #e6bb76;overflow:hidden;box-shadow:0 0 0 3px #a4472c;display:flex;flex-direction:column;align-items:center}.vinyl-label img{width:100%;height:76%;object-fit:cover;object-position:center}.vinyl-label>span{font-family:var(--hand);color:#ce4b34;font-size:clamp(9px,1.2vw,17px);line-height:1.9;white-space:nowrap}.spindle{position:absolute;left:48%;top:48%;width:4%;height:4%;border-radius:50%;background:radial-gradient(circle at 30% 20%,#e6d8ad,#80765b 38%,#232018 78%);box-shadow:1px 2px 2px #0008;pointer-events:none}.tonearm-assembly{position:absolute;right:8%;top:8%;width:22%;height:64%;pointer-events:none}.arm-pivot{width:48%;aspect-ratio:1;position:absolute;top:0;left:34%;border-radius:50%;background:radial-gradient(circle,#989587,#e7dfca 13%,#615c4d 18%,#cfc8b5 20%,#23221e 42%,#555146 45%,#10110f 60%);border:2px solid #9a8e76;box-shadow:2px 4px 7px #0006}.tonearm{position:absolute;left:40%;top:10%;width:25%;height:108%;transform:rotate(-22deg);transform-origin:50% 0;transition:transform 1.2s cubic-bezier(.22,.65,.25,1)}.record-page.playing .tonearm{transform:rotate(17deg)}.arm-bar{position:absolute;left:10%;top:0;width:40%;height:82%;border-radius:10px;background:linear-gradient(90deg,#3c3b34,#e8e2d4 37%,#7e7c70 75%,#d2cbb7);box-shadow:2px 3px 3px #26170755}.arm-head{position:absolute;width:95%;height:21%;bottom:0;left:-15%;border-radius:6px 5px 3px 3px;background:linear-gradient(90deg,#12130f,#5c5c50 50%,#12130f);border:1px solid #9b9279;box-shadow:2px 4px 4px #0005}.arm-head:after{content:"";position:absolute;width:10%;height:20%;bottom:-14%;left:40%;background:#c19d58}.deck-brand{position:absolute;left:8%;bottom:5%;color:#d4ba89;font:8px Georgia,serif;letter-spacing:3px;opacity:.85}.deck-brand small{font-size:5px;letter-spacing:1px;line-height:3}.deck-knob{position:absolute;right:10%;bottom:12%;width:7%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 25%,#666454,#161913 60%);box-shadow:0 3px 5px #21150c;border:2px solid #9d8861}.rpm{position:absolute;right:8%;bottom:5%;font-size:8px;color:#dfc29a;display:flex;gap:6px;align-items:center}.rpm i{width:5px;height:5px;border-radius:50%;background:#3a3324}.rpm i:first-child{background:#f6a15c;box-shadow:0 0 6px #ffb43c}.deck-screws{position:absolute;inset:2%;display:flex;justify-content:space-between;align-content:space-between;flex-wrap:wrap;pointer-events:none}.deck-screws i{width:5px;height:5px;border:1px solid #50402c;background:#ad946e;border-radius:50%;flex:none}.deck-screws i:nth-child(2){margin-left:85%}.deck-screws i:nth-child(3){position:absolute;bottom:0;left:0}.deck-screws i:nth-child(4){position:absolute;bottom:0;right:0}.spin-caption{text-align:center;font-family:var(--hand);color:#8e7752;font-size:13px;margin:35px 0 8px;min-height:20px}.audio-player{max-width:590px;margin:8px auto 0;text-align:center;padding:0 25px}.audio-player h2{font-size:28px;font-family:var(--serif);font-weight:900;margin:0 0 7px}.audio-player>p{font-size:11px;color:#8f8065;letter-spacing:1px;margin:0 0 15px}.seek-row{display:flex;align-items:center;gap:17px;font-size:11px;font-variant-numeric:tabular-nums;color:#6a5b45}.seek{--fill:0%;-webkit-appearance:none;appearance:none;display:block;min-width:0;height:4px;border-radius:5px;border:0;background:linear-gradient(90deg,var(--coral) var(--fill),#c9bba3 var(--fill));cursor:pointer;margin:0;flex:1}.seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;background:var(--coral);border-radius:50%;border:0;box-shadow:0 0 0 4px transparent}.seek::-moz-range-thumb{width:11px;height:11px;background:var(--coral);border:0;border-radius:50%}.seek:focus-visible{outline-offset:7px}.playback-controls{display:flex;justify-content:center;align-items:center;gap:30px;position:relative;min-height:80px;padding-top:8px}.play-record{width:58px;height:58px;background:var(--coral);border:1px solid #f14d41;border-radius:50%;color:#fff;font-size:24px;line-height:1;display:grid;place-items:center;padding:0 0 0 3px;box-shadow:0 8px 22px #ff5a4d3a;flex:none;transition:transform .2s}.play-record:hover{transform:scale(1.06)}.track-control{border:0;background:transparent;font-size:14px;padding:10px;color:#2e2e25;letter-spacing:-6px}.volume-control{position:absolute;right:-10px;display:flex;align-items:center;gap:10px;width:105px}.volume-control button{background:transparent;border:0;font-size:17px;padding:5px;color:#6b5a41}.volume-control .seek{--fill:65%;height:3px}.volume-control .seek::-webkit-slider-thumb{width:9px;height:9px}.sound-memories{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:43px 0 0}.sound-card{border:1px solid #e2d1b4;background:#fff9eb;display:flex;align-items:center;gap:20px;padding:12px;box-shadow:2px 4px 12px #88662412;border-radius:4px;transform:rotate(-1deg);text-align:left;min-width:0;transition:transform .3s,box-shadow .3s,border-color .3s}.sound-card:nth-child(2){transform:rotate(1.2deg)}.sound-card:nth-child(3){transform:rotate(-1.5deg)}.sound-card:hover,.sound-card.active{transform:translateY(-4px);border-color:#dbad8b;box-shadow:0 9px 18px #88662420}.sound-card img{width:45%;height:116px;object-fit:cover;flex:none}.sound-card>span{display:flex;flex-direction:column;gap:18px;min-width:0;align-self:stretch;justify-content:center}.sound-card small{font-size:13px;color:#bba07d;display:flex;align-items:center;gap:12px}.sound-card small b{font-size:9px;font-weight:400}.sound-card strong{font-family:var(--hand);font-size:24px;font-weight:500;white-space:nowrap}.sound-card i{display:block;height:1px;width:80%;background:var(--coral);transform:rotate(-7deg)}.listening-note{grid-column:1/-1;text-align:center;font-family:var(--hand);color:#9b8056;font-size:17px;min-height:30px;line-height:1.7;margin:25px 0 0}.record-footer{display:flex;align-items:center;gap:20px;padding:20px 4% 30px;max-width:1460px;margin:auto;color:#9c8b6e;font-size:10px}.record-footer>p{font-family:var(--hand);font-size:19px;letter-spacing:2px;margin:0 auto;text-align:center}.record-footer>span{font-size:9px;text-align:right}.record-page.is-hidden .vinyl-disc{animation-play-state:paused!important}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.record-dedication h1{font-size:4.15vw}.letter-card{padding:22px 15px 15px;margin-top:35px;min-height:195px}.letter-card>p{font-size:22px}.letter-card>p.signature{font-size:20px}.record-layout{padding-top:4px}.sound-card{gap:12px;padding:10px}.sound-card img{height:100px}.sound-card strong{font-size:20px}.turntable{width:96%}.record-stage{padding-left:25px}.audio-player{padding:0 15px}.audio-player h2{font-size:25px}.volume-control{width:80px;right:0}.playback-controls{gap:23px}.sound-memories{margin-top:30px}.side-note{font-size:16px}.letter-flower{left:-35px;width:76px}}
@media(max-width:700px){.record-header{height:70px;padding:0 5%}.record-brand b{font-size:29px}.record-brand small{font-size:7px;letter-spacing:1.5px}.tool-caption{display:none}.record-layout{display:flex;flex-direction:column;padding:10px 6% 0}.record-dedication{padding:8px 0 0;display:grid;grid-template-columns:1fr auto;position:relative}.tiny-eyebrow{grid-column:1/-1;font-size:7px;letter-spacing:1.9px}.record-dedication h1{font-size:clamp(31px,8.2vw,45px);line-height:1.5;grid-column:1/-1;margin:13px 0}.to-line{font-size:19px;margin:0 0 12px;max-width:220px;line-height:1.5}.gift-date{font-size:9px;letter-spacing:1px;align-self:center;margin-bottom:12px}.letter-card{grid-column:1/-1;min-height:0;margin:17px 8px 14px;transform:rotate(-3deg);padding:20px 15px 13px}.letter-card>p{font-size:20px;line-height:1.8}.letter-card>p br{display:none}.letter-card>p.signature{font-size:18px;margin-top:8px}.letter-flower{width:55px;left:-22px;bottom:0}.side-note{display:none}.record-stage{padding:20px 0 0;width:100%}.turntable{width:98%;margin:7px auto 0;border-width:2px;border-radius:6px;box-shadow:0 7px 0 #58331d,0 11px 0 #3b2516,4px 20px 24px #52351242,inset 0 0 35px #341a1470}.platter{padding:5px;border-width:1px}.vinyl-label{border-width:3px;box-shadow:0 0 0 2px #a4472c}.vinyl-label>span{font-size:9px;line-height:1.4}.deck-brand{font-size:5px;letter-spacing:1.3px}.deck-brand small{font-size:3px}.deck-knob{border-width:1px}.rpm{font-size:5px;gap:3px}.rpm i{width:3px;height:3px}.arm-pivot{border-width:1px}.arm-head{border-radius:3px;border-width:1px}.spin-caption{font-size:12px;margin:28px 0 9px}.audio-player{padding:0 3%;margin-top:7px}.audio-player h2{font-size:26px;line-height:1.5}.audio-player>p{font-size:10px;margin-bottom:16px}.seek-row{gap:12px;font-size:10px}.playback-controls{gap:24px;min-height:88px;padding-right:32px}.play-record{width:53px;height:53px;font-size:22px}.volume-control{position:absolute;right:0;width:62px;gap:4px}.volume-control button{font-size:14px;padding:3px}.sound-memories{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 17px;margin:16px -4px 0;scrollbar-width:thin;scrollbar-color:#cab694 transparent}.sound-card{min-width:235px;width:75%;flex:none;scroll-snap-align:center;gap:13px;padding:10px}.sound-card img{height:92px;width:44%}.sound-card strong{font-size:21px}.sound-card small{font-size:14px}.sound-card small b{font-size:9px}.sound-card>span{gap:14px}.listening-note{font-size:15px;margin-top:6px;min-height:30px}.record-footer{padding:20px 6% 24px;flex-wrap:wrap;justify-content:space-between;gap:14px}.record-footer>p{font-size:17px;order:-1;width:100%;margin:0 0 4px}.record-footer>a{font-size:9px}.record-footer>span{font-size:8px;max-width:180px;line-height:1.7}.sunlight{display:none}}