@font-face{font-family:MixtapeHand;src:url('/assets/fonts/Caveat.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
:root{--oxblood:#76383f;--edge:#52252a;--cream:#efe4ca;--paper:#f7efdd;--ink:#3d302a;--muted:#786a5a;--label:#8b4b50;--hand:MixtapeHand,'Segoe Print','Bradley Hand',cursive;--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23846b4d' opacity='.14' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--noise),radial-gradient(ellipse at 20% 0%,#fcf6e9,#e9dfca 80%);color:var(--ink);font-family:var(--hand);-webkit-font-smoothing:antialiased;padding:16px 8px max(30px,env(safe-area-inset-bottom));overflow-wrap:break-word}button,input,summary,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button,a,summary{touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #96704a;outline-offset:5px}a{color:var(--oxblood);text-underline-offset:4px}svg{display:block}button svg{pointer-events:none}[hidden]{display:none!important}.hand{font-family:var(--hand);font-weight:500;letter-spacing:.1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:0;left:12px;background:var(--paper);padding:12px;z-index:100;transform:translateY(-120%)}.skip:focus{transform:none}
.machine{max-width:456px;margin:0 auto;position:relative;padding:12px;border:1px solid #58282b;border-radius:27px 27px 19px 19px;background:var(--noise),repeating-linear-gradient(45deg,#ffffff03 0 1px,#00000008 1px 2px),linear-gradient(100deg,#5e2a2f,#824148 8%,#6a3037 90%,#422025);box-shadow:inset 0 0 0 2px #a56861,inset 0 0 0 5px #51252a,0 20px 45px #4d30242b,0 3px 5px #432b2c38}.machine:before{content:'';position:absolute;inset:6px;border:1px dashed #c68c75a1;border-radius:21px 21px 14px 14px;pointer-events:none}.lid{position:relative;text-align:center;border-radius:15px 15px 10px 10px;padding:22px 10px 17px;isolation:isolate;background:var(--noise),radial-gradient(ellipse at center,#f6eedb,#e9ddc4);border:1px solid #ad9271;box-shadow:inset 0 0 0 3px #f5e9cf,inset 0 0 19px #89714f40,0 2px 3px #2d151b99}.lid:after{content:'';position:absolute;inset:6px;border:1px solid #b8a17a66;border-radius:10px;pointer-events:none}.maker{font:9px/1.5 var(--hand);letter-spacing:3.1px;margin-bottom:6px}.lid h1{font:500 clamp(31px,8.6vw,43px)/.99 var(--hand);letter-spacing:-.3px;margin:0;color:#682e34}.dedication{font-size:20px;line-height:1.2;margin:10px 0 0}.pencil-heart{position:absolute;right:15px;bottom:15px;font:30px var(--hand);transform:rotate(-13deg)}.tape{position:absolute;top:10px;left:13px;width:48px;height:15px;background:var(--noise),#d4b98f88;transform:rotate(-32deg);box-shadow:0 1px 0 #fff5;clip-path:polygon(0 8%,97% 0,100% 86%,3% 100%)}.hinges{height:15px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;position:relative;z-index:2}.hinges i{width:38px;height:21px;display:block;background:repeating-linear-gradient(0deg,transparent 0 4px,#6b665b66 4px 5px),linear-gradient(90deg,#7b7060,#e2d9bd 22%,#a29b87 50%,#ece4cc 74%,#776b58);border:1px solid #61584a;border-radius:2px;box-shadow:1px 2px 2px #0006}
.panel{background:var(--noise),radial-gradient(ellipse at 30% 10%,#f7eed9,#e8d8b8);border:1px solid #b89b72;box-shadow:inset 0 0 0 2px #fcf1d8,inset 0 0 0 4px #bda88388,0 3px 3px #371d1e66;border-radius:11px}.deck{position:relative;padding:12px 17px 13px;isolation:isolate}.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f8e7b7,#a78340 50%,#50422c 90%);box-shadow:0 1px 1px #47362d,0 0 0 1px #e8d5ac;z-index:8}.screw:after{content:'';position:absolute;top:4px;left:2px;width:5px;height:1px;background:#544528;transform:rotate(-28deg);box-shadow:0 1px #fff7}.tl{left:10px;top:11px}.tr{right:10px;top:11px}.bl{left:10px;bottom:12px}.br{right:10px;bottom:12px}
.vinyl-stage{position:relative;aspect-ratio:1.08;width:100%}.speed-dial{position:absolute;top:6%;left:2%;width:12%;aspect-ratio:1;border-radius:50%;padding:4px;background:linear-gradient(120deg,#d6cdb7,#766c58);border:1px solid #776e5d;box-shadow:1px 2px 3px #30262055,inset 0 0 0 2px #e7dcc5;transform:rotate(-35deg)}.speed-dial:before{content:'';position:absolute;inset:14%;border-radius:50%;background:#36342f}.speed-dial:after{content:'';position:absolute;left:47%;top:24%;width:7%;height:35%;background:#ddd1b3;border-radius:2px}.speed-dial span{position:absolute;top:118%;left:33%;font:7px var(--hand);transform:rotate(35deg)}.plaque{position:absolute;right:1%;top:3%;max-width:35%;padding:5px;border:1px solid #bca887;background:#d3bc91;box-shadow:inset 0 0 0 1px #ede0c7,1px 1px 1px #8772565e;text-align:center;font:6.5px/1.3 var(--hand);letter-spacing:.4px;text-transform:uppercase}.platter{position:absolute;width:83%;aspect-ratio:1;left:1.5%;top:12%;border-radius:50%;background:#4c4840;box-shadow:0 0 0 2px #746c58,0 0 0 4px #e8d9b9,2px 5px 6px #51412d80;isolation:isolate}.record{position:absolute;inset:2%;border-radius:50%;background:repeating-radial-gradient(circle at center,#161616 0 1px,#343331 1.5px 2px,#20201e 2.5px 4px);border:2px solid #282622;display:grid;place-items:center;box-shadow:0 1px 2px #000c;animation:spin 1.8s linear infinite;animation-play-state:paused}.record.playing{animation-play-state:running}.record-label{width:34%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;text-align:center;border-radius:50%;padding:10px 4px;background:var(--noise),var(--label);color:#f3e5ca;border:3px double #d4bd92;box-shadow:inset 0 0 10px #3d1c1544;transition:background-color .7s}.record-label small{font:6.5px/1.1 var(--hand);letter-spacing:.6px}.record-label b{font:23px/1 var(--hand);font-weight:400}.sheen{position:absolute;inset:2%;border-radius:50%;pointer-events:none;background:conic-gradient(from 15deg,transparent 0 12%,#fff2 17%,transparent 23% 57%,#fff2 65%,transparent 70%);z-index:2}.spindle{position:absolute;width:7px;height:7px;left:calc(50% - 3.5px);top:calc(50% - 3.5px);border-radius:50%;background:radial-gradient(circle at 25% 20%,#fff9e3,#b7a77d 45%,#4c4332);box-shadow:1px 2px 2px #0008;z-index:3}.tonearm{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}#arm{transform-origin:86px 17px;transform:rotate(-16deg);transition:transform .8s cubic-bezier(.2,.65,.3,1)}.deck.is-playing #arm{transform:rotate(var(--arm-angle,0deg))}.power-light{position:absolute;right:4%;bottom:12%;width:9px;height:9px;border-radius:50%;background:#977044;border:1px solid #9c783e;box-shadow:0 0 0 3px #d5c098,inset 0 0 3px #0005}.is-playing .power-light{background:#ffedab;box-shadow:0 0 0 3px #bd955c,0 0 9px #edaf50,inset 0 0 2px white}
.track-heading{text-align:center;min-height:54px;margin-top:-2px}.track-heading h2{font:600 30px/1.03 var(--hand);margin:0 0 4px}.track-heading p{font:17px/1.05 var(--hand);margin:0;color:#6a5549}.progress{margin:5px 4px 0}input[type=range]{width:100%;display:block;appearance:none;-webkit-appearance:none;height:24px;background:transparent;margin:0;accent-color:var(--oxblood);cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--oxblood) var(--progress,0%),#aa9c80 var(--progress,0%));box-shadow:0 1px #fff9}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;margin-top:-4px;background:#8b4949;border:1px solid #693e36;box-shadow:0 1px #fff6}input[type=range]::-moz-range-track{height:3px;background:#aa9c80}input[type=range]::-moz-range-progress{height:3px;background:var(--oxblood)}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:1px solid #693e36;border-radius:50%;background:#8b4949}input[type=range]:disabled{opacity:.55;cursor:default}.times{display:flex;justify-content:space-between;font:9px var(--hand);color:#6a5747;font-variant-numeric:tabular-nums}.transport{display:flex;align-items:center;justify-content:center;gap:28px;padding:13px 0 11px}.metal-button{border-radius:50%;border:1px solid #7b6c55;width:52px;height:52px;display:grid;place-items:center;padding:15px;background:var(--noise),linear-gradient(115deg,#d4ccb9,#f6ecd2 40%,#ac9f85);box-shadow:0 0 0 2px #efe2c6,0 0 0 3px #c5b28c,1px 4px 3px #67533c55,inset 0 0 0 2px #faf1dc;transition:transform .15s,box-shadow .15s}.metal-button:active{transform:translateY(2px);box-shadow:0 0 0 2px #efe2c6,0 0 0 3px #c5b28c,0 1px 2px #67533c55,inset 0 0 0 2px #faf1dc}.metal-button svg{width:22px;height:22px;fill:#463d32;stroke:#463d32;stroke-width:1.3;stroke-linejoin:round}.main-button{width:69px;height:69px;padding:20px;background:var(--noise),radial-gradient(circle at 30% 25%,#a45a5a,#702e35);border-color:#612e30;box-shadow:0 0 0 2px #f6ecd6,0 0 0 4px #a88c65,1px 5px 4px #67533c77,inset 0 0 0 2px #b47e70}.main-button svg{fill:#f5e8cc;stroke:#f5e8cc;width:25px;height:25px}.deck-footer{display:flex;justify-content:space-between;gap:7px;align-items:center;padding:5px 9px 1px}.side-control{display:flex;gap:7px;align-items:center;font:8px var(--hand);letter-spacing:1px}.side-switch{display:flex;position:relative;background:#cab99a;border-radius:20px;box-shadow:inset 0 1px 3px #69523766,0 1px #fff9;padding:2px}.side-switch button{border:0;background:transparent;min-width:44px;min-height:38px;border-radius:18px;color:#564638;font:12px var(--hand)}.side-switch button[aria-pressed=true]{background:var(--noise),linear-gradient(#9c5e56,#76383f);color:#f6ead3;box-shadow:0 1px 2px #52362b55,inset 0 0 0 1px #b3836b}.deck-footer>.hand{font-size:16px;color:#6a5547}.status{font-size:16px;line-height:1.2;min-height:27px;text-align:center;margin:11px 8px 15px;color:#f1dfbc}
.sleeve-section{position:relative;padding:0 5px}.sleeve-stack{position:relative;margin-top:24px}.sleeve-stack:before,.sleeve-stack:after{content:'';position:absolute;inset:-8px 5px 3px;background:var(--noise),#d9ceb1;border:1px solid #baaa8b;border-radius:8px;transform:rotate(-2deg);box-shadow:0 2px 3px #2f171c55}.sleeve-stack:after{inset:-4px 3px 0;transform:rotate(1.5deg);background-color:#e8dfc7}.sleeve{position:relative;z-index:1;background:var(--noise),radial-gradient(ellipse at 20% 15%,#fcf6e6,#ede0c4);border:1px solid #d1bc96;border-radius:7px;box-shadow:inset 0 0 0 3px #fbefda,0 3px 6px #31141b55;touch-action:pan-y;transition:transform .3s,opacity .3s}.sleeve.changing{animation:sleeve-change .45s ease}.sleeve.flipping{animation:paper-turn .35s ease}.note-tab{position:absolute;right:12px;top:-24px;font-size:17px;line-height:1;min-height:35px;padding:7px 12px 4px;background:var(--noise),#ede0c4;border:1px solid #c8b18b;border-bottom:0;border-radius:6px 6px 0 0;transform:rotate(2deg);z-index:0}.sleeve-front,.sleeve-back{position:relative;min-height:385px;padding:17px 15px 40px;background:var(--noise),radial-gradient(ellipse at 20% 15%,#fcf6e6,#ede0c4);border-radius:7px;isolation:isolate}.sleeve-top{display:flex;align-items:center;gap:12px;position:relative;z-index:2}.stamp{font:23px/1 var(--hand);color:#9c4c42;border:1.5px solid #a96656;box-shadow:inset 0 0 0 1px #b87e6755;transform:rotate(-3deg);min-width:38px;min-height:38px;display:grid;place-items:center;flex-shrink:0}.sleeve-track{font:600 19px/1.1 var(--hand);letter-spacing:.3px;max-width:75%}.sleeve-front>img{width:100%;height:clamp(235px,70vw,300px);object-fit:cover;object-position:center 70%;display:block;mix-blend-mode:multiply;margin:-5px 0 0}.caption{font-size:24px;line-height:1.05;text-align:center;margin:0 8px;padding-bottom:4px}.turn-corner{position:absolute;right:0;bottom:0;border:0;min-width:98px;min-height:46px;padding:13px 6px 5px 18px;text-align:right;font-size:18px;color:#674c3d;background:linear-gradient(142deg,transparent 0 24%,#d6c39d 25%,#fcf0d5 30%,#e8d5af 100%);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);border-radius:0 0 7px 0}.note-heading{font-size:22px;line-height:1.05}.note{font-size:27px;line-height:1.2;margin:25px 4px 18px;min-height:120px;white-space:pre-line}.signature{font-size:24px;line-height:1.05;margin:0 4px 0}.sleeve-back>img{width:100%;height:135px;object-fit:cover;object-position:50% 75%;mix-blend-mode:multiply;display:block;margin:12px auto 0;max-width:210px}.sleeve-browse{position:relative;margin-top:8px;padding:0 8px 12px;background:var(--noise),linear-gradient(100deg,#e5d7b9,#f3e6cb);border:1px solid #b99b72;border-radius:4px 4px 11px 11px;box-shadow:inset 0 0 0 2px #f4e8cf,0 3px 2px #321c2177}.browse-row{display:flex;align-items:center;justify-content:space-between;gap:5px}.browse-row>.hand{font-size:20px;text-align:center}.paper-arrow{border:0;background:transparent;min-width:44px;min-height:44px;font:27px var(--hand)}.track-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}.track-dot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:48px;padding:6px;border:0;background:transparent;font:9px var(--hand);color:#6a5845}.track-dot span{width:8px;height:8px;border-radius:50%;background:#baaa8d;box-shadow:inset 0 1px 2px #5e482e44,0 1px #fff8}.track-dot[aria-pressed=true] span{background:#8e4748;box-shadow:inset 0 1px 2px #5e282c77,0 1px #fff8}.side-caption{font-size:17px;line-height:1.2;text-align:center;color:#78644d;margin:4px 0 0}.video-section{margin:13px 5px 0;padding:0 15px}.video-section summary{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}.video-section summary>.hand{font-size:23px}.video-section summary::-webkit-details-marker{display:none}.video-content{border-top:1px solid #b9a27e80;padding:12px 0 16px}.video-help{font-size:19px;line-height:1.2;text-align:center;margin:0 0 12px}.video-ratio{position:relative;aspect-ratio:16/10;min-height:200px;background:#292320;border-radius:4px;overflow:hidden}.video-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-credit{font:9px/1.5 var(--hand);color:#78634f;text-align:center;margin:12px 0}.video-links{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;text-align:center;font:17px var(--hand)}.video-links a{padding:6px 0;min-height:44px}.listening-options{color:#ecdcc2;padding:14px 9px 6px}.listening-options>label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;min-height:36px}.listening-options input{accent-color:#8d534c;min-width:16px;min-height:16px}.tracklist{margin:8px 0}.tracklist>summary{font-size:20px;min-height:44px;display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer}.tracklist summary::-webkit-details-marker{display:none}.tracklist ol{list-style:none;margin:6px -2px;padding:0;border-top:1px solid #dab99c55}.tracklist li{border-bottom:1px solid #dab99c44}.tracklist li button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 7px;min-height:56px;border:0;background:transparent;color:#f7e7cb;font:22px/1.05 var(--hand)}.tracklist li button[aria-current=true]{background:#e0b9981a}.tracklist li button>span:last-child{margin-left:auto;font-size:19px}.tracklist li small{display:block;font:15px var(--hand);margin-top:2px;color:#dfc5a7}.track-code{border:1px solid #bf8c76;padding:5px;font:13px var(--hand);flex-shrink:0}.personal-paper{background:var(--noise),#eee0c4;transform:rotate(-1deg);margin:15px 7px 0;padding:0 12px;box-shadow:0 2px 4px #2a121c66;border-radius:2px}.personal-paper summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;font-size:21px;gap:8px}.personal-paper summary::-webkit-details-marker{display:none}.personal-paper img{display:block;width:100%;height:auto;border:5px solid #fffaec;box-shadow:1px 2px 5px #4a2c2833;margin-bottom:15px}.personal-paper p{font-size:22px;line-height:1.15;text-align:center;padding:0 0 17px}.closing{text-align:center;color:#f1dfc1;padding:25px 6px 20px}.closing>button{border:0;background:none;font:40px var(--hand);min-width:52px;min-height:52px;color:inherit}.closing h2{font-size:39px;line-height:.95;font-weight:500;margin:12px 0 18px}.closing p{font-size:21px;line-height:1.2;margin:0 0 20px}.closing .signoff{font-size:24px}.closing small{display:block;font:6.5px/1.7 var(--hand);letter-spacing:1.2px;color:#d6b49c}.closing #extra-kiss>img{width:160px;height:190px;object-fit:cover;object-position:center 70%;border:5px solid #f1dfbc;transform:rotate(-3deg);box-shadow:1px 3px 5px #33161e55}.closing #extra-kiss>p{font-size:20px;margin:13px 0 20px}.mini-player{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(calc(100% - 22px),432px);z-index:30;display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;background:var(--noise),linear-gradient(110deg,#f3e8cf,#dfccaa);border:3px solid #7b3c43;box-shadow:0 3px 12px #2c172c44,inset 0 0 0 1px #b59b72}.mini-home{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;min-height:44px;flex:1;min-width:0;text-align:left}.mini-home>span:last-child{min-width:0}.mini-home b{font:600 23px/1 var(--hand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.mini-home small{font:15px var(--hand);display:block;color:#715d48}.mini-record{display:block;flex-shrink:0;width:42px;height:42px;border-radius:50%;background:repeating-radial-gradient(circle,#292726 0 2px,#44403b 2px 3px);position:relative;animation:spin 1.8s linear infinite;animation-play-state:paused}.mini-record:after{content:'';position:absolute;inset:34%;border-radius:50%;background:var(--label);border:1px solid #b5a080}.mini-player.is-playing .mini-record{animation-play-state:running}.mini-action{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid #6d4541;background:var(--noise),#80414a;color:#f9ecd5;font-size:19px;box-shadow:inset 0 0 0 2px #b17e70}.no-js{max-width:420px;margin:20px auto;background:var(--paper);padding:15px;font-size:18px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes sleeve-change{0%{opacity:1;transform:translateX(0) rotate(0)}40%{opacity:.35;transform:translateX(9px) rotate(1deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@keyframes paper-turn{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.94)}}
@media(min-width:700px){body{padding:38px 20px 60px;background:var(--noise),radial-gradient(ellipse at 40% 5%,#faf2df,#d7c8ac 100%)}.machine{max-width:468px;box-shadow:12px 24px 65px #4d30243b,0 3px 5px #432b2c38}.lid h1{font-size:45px}.lid{padding-top:24px}.dedication{font-size:22px}.record-label small{font-size:8px}.record-label b{font-size:27px}.plaque{font-size:8px}.track-heading h2{font-size:34px}.sleeve-front>img{height:315px}}
@media(max-width:350px){body{padding-left:5px;padding-right:5px}.machine{padding:10px}.lid{padding-left:4px;padding-right:4px}.lid h1{font-size:30px}.dedication{font-size:17px}.pencil-heart{font-size:22px;right:8px;bottom:14px}.deck{padding-left:13px;padding-right:13px}.record-label small{font-size:5px}.record-label b{font-size:17px}.track-heading h2{font-size:26px}.transport{gap:22px}.metal-button{width:47px;height:47px}.main-button{width:63px;height:63px}.deck-footer>.hand{font-size:14px}.note{font-size:25px}.note-heading{font-size:20px}.caption{font-size:22px}.browse-row>.hand{font-size:18px}.track-dots{gap:0}.track-dot{min-width:36px}.personal-paper summary{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.moment-art{width:100%;height:clamp(235px,70vw,300px);display:block;mix-blend-mode:multiply;margin:7px 0 11px}.note-art{width:100%;height:135px;mix-blend-mode:multiply;display:block;margin:12px auto 0;max-width:210px}@media(min-width:700px){.moment-art{height:315px}}

/* Even the little labels are written by hand. */
.maker{font-size:17px;font-weight:600;letter-spacing:.7px;line-height:1.2}.plaque{font-size:11px;font-weight:600;line-height:1;text-transform:none;letter-spacing:0;max-width:34%;padding:4px}.record-label small{font-size:11px;letter-spacing:0;line-height:1}.speed-dial span{font-size:12px;line-height:1}.times{font-size:14px;line-height:1}.side-control{font-size:14px;letter-spacing:0}.side-switch button{font-size:19px}.track-dot{font-size:15px;line-height:1}.track-code{font-size:19px;padding:3px 6px}.video-credit{font-size:16px;line-height:1.2}.closing small{font-size:18px;letter-spacing:0;line-height:1.2}.skip,.no-js{font-family:var(--hand);font-size:21px}@media(max-width:350px){.record-label small{font-size:9px}.plaque{font-size:10px}.maker{font-size:16px}.track-dot{min-width:40px;font-size:14px}.closing small{font-size:17px}}

/* A note before the needle drops. */
.intro-page{max-width:456px;margin:0 auto;min-height:calc(100vh - 46px);min-height:calc(100svh - 46px);display:flex;align-items:center;justify-content:center;padding:16px 8px}.intro-paper{position:relative;width:100%;padding:57px 27px 30px;background:var(--noise),radial-gradient(ellipse at 25% 15%,#fff9e9,#eee0c3);border:1px solid #d5bf99;box-shadow:0 12px 35px #5b3e2926,1px 2px 3px #6f4e2826;isolation:isolate}.intro-paper:before{content:'';position:absolute;inset:7px;border:1px solid #bc9f7133;pointer-events:none}.intro-tape{position:absolute;top:-9px;left:calc(50% - 38px);width:76px;height:26px;background:var(--noise),#cdb28b88;transform:rotate(-5deg);clip-path:polygon(0 6%,100% 0,98% 91%,2% 100%)}.intro-record{position:absolute;right:26px;top:24px;width:42px;height:42px;border-radius:50%;background:repeating-radial-gradient(circle,#24211f 0 2px,#49403a 2px 3px);transform:rotate(12deg);box-shadow:1px 2px 3px #4b302d33}.intro-record i{position:absolute;inset:33%;border-radius:50%;background:var(--oxblood);border:1px solid #d7bd94}.intro-paper h1{font-size:43px;line-height:1;margin:0 0 28px;font-weight:500;color:var(--oxblood)}.intro-copy{font-size:27px;line-height:1.2}.intro-copy p{margin:0 0 27px}.intro-copy .intro-last{margin-top:34px}.intro-last span{display:inline-block;color:var(--oxblood);border-bottom:1px solid #a77b6880;transform:rotate(-1deg);padding-bottom:3px}.intro-signature{font-size:22px;line-height:1.2;margin:32px 0 29px}.intro-open{border:1px solid #743d3f;background:var(--noise),#7a3b42;color:#f8e9cd;width:100%;min-height:54px;padding:11px 13px;font-size:23px;line-height:1.1;border-radius:4px;display:flex;justify-content:space-between;align-items:center;gap:8px;box-shadow:0 2px 3px #603b3826}.intro-open:active{transform:translateY(1px)}.closing>.read-intro{display:block;width:100%;font-size:19px;min-height:44px;margin:0 auto 12px;color:#e0c3a6}.machine.entering{animation:case-open .5s ease both}@keyframes case-open{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(max-width:350px){.intro-page{padding:12px 4px}.intro-paper{padding:50px 22px 24px}.intro-copy{font-size:25px}.intro-break{display:none}.intro-open{font-size:21px}.intro-paper h1{font-size:39px}}@media(prefers-reduced-motion:reduce){.machine.entering{animation:none!important}}