:root{--paper:#f1e8d5;--ink:#171714;--red:#c94230;--line:#bdb29d;--grey:#6c665c;--white:#f8f2e6;--blue:#4c7184;--green:#557663;--yellow:#ddb631;--orange:#e27c25;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:5px}button{min-height:44px}header,footer{display:flex;justify-content:space-between;align-items:center;margin:0 4vw;padding:26px 0;border-bottom:1px solid var(--ink);gap:20px}header{height:99px}.wordmark{background:none;border:0;padding:0;font-weight:900;font-size:34px;letter-spacing:-2px;display:flex;align-items:center;gap:20px}.wordmark span,.edition,footer,.mono,.eyebrow,.tag,.text-button,.label,.track-row,.transport,.small{font-family:'Courier New',monospace;font-size:13px;font-weight:normal;letter-spacing:1px}.wordmark span{letter-spacing:1px;max-width:110px;text-align:left;line-height:1.4}.edition{text-align:right;line-height:1.8}.edition span{display:block;font-size:12px;color:var(--grey)}footer{border-top:1px solid var(--ink);border-bottom:0;color:var(--grey);font-size:11px;padding:22px 0;letter-spacing:1px}.stereo{font-style:normal;letter-spacing:-5px;margin:0 9px 0 3px}.grain{pointer-events:none;position:fixed;inset:0;z-index:20;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.4' filter='url(%23n)'/%3E%3C/svg%3E")}main{min-height:calc(100vh - 165px);max-width:1500px;margin:auto;padding:44px 5vw 54px}h1,h2,h3,p{margin-top:0}h1{font-weight:900;font-size:clamp(38px,5.5vw,76px);letter-spacing:-.065em;line-height:1;margin-bottom:18px}h2{font-size:30px;letter-spacing:-1px}p{line-height:1.65}.eyebrow{color:var(--red);margin-bottom:20px}.intro{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;min-height:570px}.intro-title{font-size:clamp(100px,13vw,190px);line-height:.83;letter-spacing:-.085em;margin:24px 0}.intro h2{font-size:clamp(20px,2.5vw,32px);letter-spacing:-.5px;line-height:1.15;max-width:350px}.stripes{display:flex;width:125px;height:8px;margin-bottom:34px}.stripes i{flex:1;background:var(--blue)}.stripes i:nth-child(2){background:var(--green)}.stripes i:nth-child(3){background:var(--yellow)}.stripes i:nth-child(4){background:var(--orange)}.stripes i:nth-child(5){background:var(--red)}.primary{background:var(--red);color:var(--white);padding:18px 25px;border:1px solid var(--red);font-family:'Courier New',monospace;font-size:14px;letter-spacing:1px;box-shadow:3px 3px 0 var(--ink)}.primary:hover{background:#ac3426}.primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.primary span{margin-left:28px}.intro .small{margin-top:30px;line-height:1.8;color:var(--grey)}.intro-art{position:relative;padding:48px 0}.intro-art .cassette{transform:rotate(-7deg);box-shadow:15px 25px 25px #17171425}.intro-art .caption{text-align:center;transform:rotate(-7deg);margin-top:36px;color:var(--grey);font-size:13px}.cassette{position:relative;border-radius:14px;background:linear-gradient(145deg,#35342f,#191916);padding:25px 23px 42px;border:2px solid #10110f;box-shadow:inset 0 0 0 5px #49473f,inset 0 0 0 7px #121310,0 8px 12px #17171422;aspect-ratio:1.57;width:100%;max-width:520px;margin:auto;color:var(--ink)}.cassette:before,.cassette:after{content:'⊕';position:absolute;color:#8c8879;font:15px monospace;left:9px;top:7px}.cassette:after{left:auto;right:9px}.cassette-label{height:100%;background:var(--paper);border-radius:8px;padding:16px 18px 10px;position:relative;overflow:hidden}.cassette-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:9px}.cassette-title{font-size:30px;font-weight:900;letter-spacing:-2px}.cassette-side{font:bold 19px 'Courier New',monospace;border:1px solid;padding:3px 8px}.cassette-sub{display:flex;justify-content:space-between;font:11px 'Courier New',monospace;letter-spacing:1px;padding:9px 0}.reel-window{background:#262620;border:5px solid #4b493f;border-radius:40px;display:flex;align-items:center;justify-content:space-between;padding:5px 12px;height:69px;box-shadow:inset 0 3px 6px #0009}.reel{height:48px;width:48px;border-radius:50%;background:repeating-conic-gradient(#e2dbcc 0deg 35deg,#747269 35deg 60deg);border:4px solid #aaa99d;position:relative;flex-shrink:0;animation:spin 4s linear infinite;animation-play-state:paused}.reel:after{content:'';position:absolute;inset:12px;background:#23231e;border-radius:50%;border:3px solid #d6cebd}.playing .reel{animation-play-state:running}.tape-window{height:34px;width:34%;background:linear-gradient(90deg,#352b22 48%,#a28d65 49%,#b8a887 51%,#352b22 52%);border:2px solid #8d8875}.cassette-lines{height:16px;margin:12px -18px 0;background:linear-gradient(0deg,var(--red) 0 20%,var(--orange) 20% 40%,var(--yellow) 40% 60%,var(--green) 60% 80%,var(--blue) 80%)}.cassette-bottom{font:10px 'Courier New',monospace;display:flex;justify-content:space-between;margin-top:7px}.cassette-foot{position:absolute;bottom:5px;left:25%;width:50%;height:28px;border:1px solid #55544b;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);background:#292924;display:flex;align-items:center;justify-content:space-around}.cassette-foot i{height:8px;width:8px;background:#080908;border:2px solid #6d6b60;border-radius:50%}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:35px}.section-head h1{font-size:48px}.section-head .small{color:var(--grey);max-width:245px;line-height:1.7}.tapes{display:grid;grid-template-columns:1fr 1fr;gap:40px}.tape-card{border-top:1px solid var(--ink);padding-top:18px}.tape-card .cassette{margin:30px auto;max-width:440px}.tape-heading{display:flex;justify-content:space-between;align-items:center}.tape-heading h2{margin:0;font-size:24px}.tag{border:1px solid var(--line);padding:7px 9px;font-size:11px}.tape-card.locked .cassette{opacity:.55}.tape-card .details{display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.7}.text-button{background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;font-size:14px;letter-spacing:.5px}.text-button:hover{color:var(--red)}.back{margin-bottom:28px}.player-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:7%;align-items:start}.player-left .cassette{margin:15px auto 32px}.player-left .small{color:var(--grey);line-height:1.7}.player-meta{display:flex;justify-content:space-between;font-size:12px;margin-bottom:20px}.player-title{font-size:clamp(32px,3.6vw,52px);line-height:1.02;letter-spacing:-.05em;margin:14px 0}.artist{color:var(--grey);font-size:15px;line-height:1.5}.now-header{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--ink);padding-top:18px}.signal{width:7px;height:7px;display:inline-block;background:var(--red);border-radius:50%;margin-right:9px}.note-preview{border-left:2px solid var(--red);padding-left:18px;font-family:Georgia,serif;font-size:20px;line-height:1.5;margin:28px 0;max-width:480px}.timeline{margin-top:28px}.timeline progress{display:block;width:100%;height:5px;border:0;accent-color:var(--red);background:var(--line)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--red)}.times{display:flex;justify-content:space-between;font-size:12px;margin-top:12px}.transport{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0}.play-button{background:var(--ink);color:var(--paper);border:0;min-width:145px;padding:17px;font:14px 'Courier New',monospace}.volume{display:flex;gap:10px;align-items:center;font-size:11px}.volume input{width:85px;accent-color:var(--ink)}.status{min-height:21px;color:var(--grey);font:12px 'Courier New',monospace;line-height:1.6}.track-list{margin-top:36px}.list-heading{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--ink);padding-bottom:13px}.track-row{display:grid;grid-template-columns:37px 1fr 43px;gap:10px;padding:14px 9px;border:0;border-bottom:1px solid var(--line);width:100%;text-align:left;background:transparent;font-size:13px;letter-spacing:0;align-items:center}.track-row .title{font-family:Arial,sans-serif;font-size:15px;line-height:1.4}.track-row.current{background:#c9423010;color:var(--red);box-shadow:inset 3px 0 var(--red)}.track-row:disabled{opacity:1}.track-row .duration{text-align:right;font-size:12px;color:var(--grey)}.track-row.available:hover{background:#1717140b}.inline-note{font-size:12px;color:var(--grey);line-height:1.7;margin:15px 0}.cover-slot{width:54px;height:54px;background:var(--ink);color:var(--paper);display:flex;justify-content:center;align-items:center;font:bold 15px 'Courier New',monospace;border:5px double var(--paper);flex-shrink:0}.record-info{display:flex;align-items:center;gap:15px;margin:25px 0}.record-info p{font-size:12px;color:var(--grey);margin:0}.record-info strong{display:block;font-size:14px;font-weight:normal;margin-bottom:5px}.archive-group{margin:30px 0}.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.archive-group h2{font-size:22px}.center-stage{max-width:650px;margin:45px auto;text-align:center}.center-stage .cassette{margin:38px auto}.center-stage h1{font-size:56px}.center-stage p{color:var(--grey)}.envelope{width:240px;height:150px;margin:60px auto 45px;border:1px solid var(--line);background:var(--white);box-shadow:7px 10px 0 #1717140b;position:relative;display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;font-size:25px}.envelope:before{content:'';position:absolute;top:0;left:0;right:0;height:60%;clip-path:polygon(0 0,100% 0,50% 100%);background:#e9dfca}.envelope span{z-index:1;margin-top:55px}.flip .cassette{animation:flip 1.6s ease-in-out}.insert{background:var(--white);color:var(--ink);border:1px solid var(--line);max-width:620px;width:calc(100% - 32px);padding:35px 42px;max-height:85vh;box-shadow:15px 18px 0 #17171422;animation:slide .3s ease-out}.insert::backdrop{background:#17171480;backdrop-filter:blur(3px)}.insert .close{float:right;border:0;background:none;font-size:25px;min-width:44px}.insert .letter-text{font-family:Georgia,serif;font-size:21px;line-height:1.8;white-space:pre-wrap}.insert .eyebrow{padding-top:12px}.insert .stripes{margin-top:30px}.insert .small{color:var(--grey);line-height:1.7}.photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}.photos img{width:100%;background:var(--paper);padding:8px}.cover-image{width:54px;height:54px;object-fit:cover}.prototype{margin-top:45px;padding-top:15px;border-top:1px dashed var(--line);color:var(--grey);font:12px 'Courier New',monospace}.prototype summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.prototype button{background:transparent;border:1px solid var(--line);padding:10px;margin:8px 8px 8px 0;font-size:12px}.prototype select{max-width:100%;padding:10px;background:var(--white);font:13px 'Courier New',monospace}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes flip{50%{transform:perspective(800px) rotateY(90deg) scale(1.05)}100%{transform:perspective(800px) rotateY(180deg)}}@keyframes slide{from{transform:translateY(35px);opacity:0}to{transform:translateY(0);opacity:1}}@media(min-width:1400px){main{padding-top:60px}.intro{min-height:650px}}header,footer{margin:0 22px}header{height:85px;padding:15px 0}.wordmark{font-size:29px;gap:12px}.wordmark span{display:none}.edition span{font-size:10px}main{padding:30px 22px 40px;min-height:calc(100vh - 150px)}.intro{grid-template-columns:1fr;gap:0;min-height:auto}.intro-title{font-size:118px;margin:24px 0}.intro h2{font-size:25px;max-width:260px}.intro-art{padding:35px 8px 15px}.intro-art .caption{margin-top:20px;font-size:11px}.intro .small{margin-top:22px;font-size:11px}.intro .stripes{margin-bottom:24px}.intro-art .cassette{max-width:340px}.cassette{padding:20px 17px 34px;border-radius:11px}.cassette-label{padding:10px 12px 6px}.cassette-title{font-size:26px}.cassette-sub{font-size:9px;padding:6px 0}.cassette-head{padding-bottom:5px}.cassette-side{font-size:15px}.reel-window{height:53px;padding:4px 8px;border-width:4px}.reel{height:37px;width:37px}.reel:after{inset:8px}.tape-window{height:26px}.cassette-lines{height:12px;margin:8px -12px 0}.cassette-bottom{font-size:8px;margin-top:5px}.cassette-foot{height:22px}.tapes,.player-grid,.archive-grid{grid-template-columns:1fr;gap:30px}.tape-card .cassette{max-width:340px}.section-head{align-items:start}.section-head h1{font-size:38px}.section-head .small{display:none}.player-title{font-size:36px}.player-left .cassette{max-width:370px;margin:8px auto 20px}.player-left .record-info{display:none}.player-grid{gap:12px}.player-meta{margin-bottom:14px;font-size:11px}.back{margin-bottom:22px}.note-preview{font-size:18px;margin:22px 0}.track-list{margin-top:26px}.insert{padding:24px}.insert .letter-text{font-size:19px}footer{font-size:9px;line-height:1.6;gap:15px}.transport{gap:10px}.volume input{width:65px}.center-stage h1{font-size:42px}.center-stage{margin:24px auto}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:350px){.cassette{padding:17px 12px 29px}.cassette-sub{font-size:8px}.cassette-bottom{font-size:7px}.cassette-title{font-size:22px}.cassette-lines{margin-top:6px}.reel-window{height:45px}.reel{height:31px;width:31px}.reel:after{inset:6px}.volume{gap:4px}.play-button{min-width:120px}}

/* Phone is the base layout. Wider screens expand the same cassette and insert. */
html{scrollbar-gutter:stable}body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}main{max-width:480px;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));min-height:calc(100svh - 150px)}header,footer{max-width:1100px}.intro{display:block;min-height:0;text-align:left}.intro-title{font-size:84px;letter-spacing:-.065em;margin:28px 0 16px}.intro h2{font-size:22px;line-height:1.15}.intro-art{padding:30px 5px 20px}.intro .primary{width:100%;text-align:left;margin-top:22px;display:flex;justify-content:space-between}.intro .eyebrow{font-size:12px;margin-bottom:18px}.intro .stripes{width:105px;height:6px;margin-bottom:25px}.intro-art .cassette{transform:rotate(-4deg);box-shadow:7px 12px 14px #17171420}.intro-art .caption{transform:none;font-size:11px;margin-top:26px;line-height:1.6}.section-head h1{font-size:32px;letter-spacing:-.04em;margin-bottom:0}.section-head{margin-bottom:26px}.section-head .eyebrow{font-size:12px}.tape-card .cassette{margin:22px auto}.tag{font-size:11px}.tape-card .details{font-size:14px}.player-nav{display:flex;justify-content:space-between;gap:16px}.player-title{font-size:36px;overflow-wrap:anywhere}.player-left .cassette{max-width:330px}.player-left .record-info{display:none}.player-left .player-meta{font-size:12px}.player-grid{gap:5px}.track-code{font-size:12px;margin:20px 0 0}.now-header .mono{font-size:12px}.artist{font-size:14px;margin-bottom:13px}.memory-button{font-size:13px}.timeline{margin-top:20px}.transport{margin:18px 0 10px}.volume input{min-height:44px}.status{font-size:11px}.track-list{margin-top:30px}.track-row .title{font-size:16px}.track-row{min-height:48px}.note-preview,.insert .letter-text{font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.75}.insert{padding:24px;max-height:85svh}.insert .close{margin:-10px -12px 0 10px}.insert h2{font-size:28px;overflow-wrap:anywhere}.insert video,.full-photo{width:100%;max-height:60svh;object-fit:contain}.photo-button{padding:0;border:0;background:transparent}.center-stage h1{font-size:38px}.center-stage .cassette{max-width:340px}.flip .cassette{animation-duration:1.1s}.archive-intro{font-size:16px;color:var(--grey)}#seek{width:100%;accent-color:var(--red);min-height:24px}.prototype{font-size:12px;line-height:1.7}.prototype label{display:block;margin-bottom:8px}.prototype summary{display:list-item;padding:14px 0;line-height:1.6}.back{margin-bottom:20px}.tapes{gap:40px}.cassette{user-select:none}.intro .cassette{max-width:330px}
@media(min-width:761px){header,footer{margin-left:auto;margin-right:auto;width:calc(100% - 80px)}header{height:100px}.wordmark span{display:block}.wordmark{font-size:34px}.edition span{font-size:12px}main{max-width:1100px;padding:40px;min-height:calc(100svh - 166px)}.intro{max-width:390px;margin:10px auto 20px}.intro-title{font-size:84px}.tapes,.player-grid,.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.tape-card .cassette{max-width:400px;margin:35px auto}.player-left .cassette{max-width:460px}.player-grid{gap:55px}.player-title{font-size:42px}.player-left .record-info{display:flex}.cassette{padding:25px 23px 42px}.cassette-label{padding:16px 18px 10px}.cassette-head{padding-bottom:9px}.cassette-title{font-size:30px}.cassette-sub{font-size:10px;padding:9px 0}.cassette-side{font-size:19px}.reel-window{height:63px;padding:5px 12px}.reel{height:43px;width:43px}.reel:after{inset:10px}.cassette-lines{height:14px;margin:10px -18px 0}.cassette-bottom{font-size:9px;margin-top:7px}.cassette-foot{height:28px}.intro .cassette{padding:20px 17px 34px}.intro .cassette-label{padding:10px 12px 6px}.intro .cassette-lines{margin:8px -12px 0}.intro .cassette-sub{font-size:9px}.intro .reel-window{height:53px}.intro .reel{width:37px;height:37px}.intro .cassette-bottom{font-size:8px}.intro .cassette-foot{height:22px}.section-head h1{font-size:42px}.player-meta{font-size:13px}.intro-art{padding-top:35px}footer{font-size:11px}.archive-grid{gap:40px}.insert{padding:35px 42px}}
@media(max-width:760px){.cassette{padding-top:20px;padding-bottom:32px}.cassette-label{padding:8px 12px}.cassette-head{padding-bottom:4px}.cassette-sub{padding:6px 0}.reel-window{height:50px}.cassette-lines{height:12px;margin-top:6px}.cassette-bottom{font-size:8px;line-height:1;margin-top:4px}.intro{padding-bottom:10px}.intro-art{padding-top:24px}.intro .primary{margin-top:10px}}
@media(max-width:350px){.cassette{padding:17px 12px 29px}.cassette-label{padding:6px 10px}.cassette-head{padding-bottom:4px}.cassette-title{font-size:22px}.cassette-sub{font-size:8px;padding:4px 0}.reel-window{height:40px}.reel{height:30px;width:30px}.cassette-lines{height:10px;margin:5px -10px 0}.cassette-bottom{font-size:7px;margin-top:3px}.intro-title{font-size:78px}}
@media(max-width:760px){main:has(.player-grid){padding-top:20px}.player-nav .back{margin-bottom:14px}.player-left .cassette{max-width:300px;padding:16px 16px 29px}.player-left .cassette-label{padding:6px 10px}.player-left .cassette-title{font-size:24px}.player-left .cassette-head{padding-bottom:3px}.player-left .cassette-sub{font-size:8px;padding:4px 0}.player-left .reel-window{height:41px}.player-left .reel{width:30px;height:30px}.player-left .reel:after{inset:6px}.player-left .cassette-lines{height:10px;margin:5px -10px 0}.player-left .cassette-bottom{font-size:7px;line-height:1;margin-top:3px}.player-title{margin:10px 0}.track-code{margin-top:16px}.now-header{padding-top:14px}}
/* Memory prints and temporary transport controls, laid out for a phone first. */
.player-left .record-info{display:block;margin:24px 0 30px;max-width:390px;width:100%}.memory-cover{display:block;width:100%;padding:9px 9px 0;border:1px solid var(--line);background:var(--white);text-align:left;box-shadow:3px 5px 0 #1717140b}.memory-cover .cover-image{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}.memory-cover>span{display:block;font:11px 'Courier New',monospace;letter-spacing:.7px;padding:14px 4px}.record-caption{padding:14px 0 0}.record-caption strong{font-size:14px;line-height:1.5}.record-caption p{font:12px 'Courier New',monospace}.record-info .cover-slot{width:100%;height:auto;aspect-ratio:1;flex-direction:column;gap:16px;background:#e8deca;color:var(--grey);border:1px dashed var(--line);font-size:30px}.cover-slot small{font:11px 'Courier New',monospace;letter-spacing:1px}.memory-photos{display:grid;grid-template-columns:1fr;gap:20px;margin:0 0 28px}.memory-photos .photo-button{padding:8px;background:var(--paper);border:1px solid var(--line);box-shadow:3px 4px 0 #1717140a}.memory-photos img{display:block;width:100%;height:auto;max-height:52svh;object-fit:contain}.testing-transport{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:15px 0}.testing-transport>.mono{font-size:11px;letter-spacing:.4px}.testing-transport>div{display:flex;gap:8px}.testing-transport button{border:1px solid var(--ink);background:transparent;padding:10px 12px;font:12px 'Courier New',monospace;min-height:44px}.testing-transport button:hover{background:var(--ink);color:var(--paper)}.testing-transport button:disabled{opacity:.35;background:transparent;color:var(--ink)}.sound-row{display:flex;align-items:center;gap:16px;margin-bottom:12px}.sound-row .text-button{font-size:12px}.sound-row .small{font-size:11px;color:var(--grey)}
@media(max-width:760px){.player-grid{display:flex;flex-direction:column}.player-grid>section{width:100%;min-width:0}.player-left{display:contents}.player-left .player-meta{order:0}.player-left .cassette{order:1}.player-grid>section:nth-child(2){order:2}.player-left .record-info{order:3;margin:28px auto 0}.track-list{margin-top:24px}}
@media(min-width:761px){.player-left .record-info{margin:32px auto;max-width:390px}.memory-photos{gap:24px}.memory-photos:has(.photo-button:nth-child(2)){grid-template-columns:1fr 1fr}.memory-photos:has(.photo-button:nth-child(2)) .photo-button:first-child{grid-column:1/-1}}
.mobile-memory{display:block}.mobile-memory .record-info{display:block;width:100%;max-width:390px;margin:28px auto}.mobile-memory .record-caption{padding-top:12px}
@media(max-width:760px){.player-left .record-info{display:none}}
@media(min-width:761px){.mobile-memory{display:none}}
/* A sealed invitation: photographs are discovered only inside the insert. */
.memory-invitation{width:100%;display:flex;align-items:center;gap:14px;text-align:left;position:relative;background:var(--white);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--red);padding:20px 16px;margin:24px 0 22px;box-shadow:3px 4px 0 #1717140b;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.memory-invitation:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:4px 6px 0 #17171410}.memory-invitation:active{transform:translateY(1px);box-shadow:1px 2px 0 #17171410}.memory-invitation-icon{font:28px Arial,sans-serif;color:var(--red);flex-shrink:0}.memory-invitation strong{display:block;font:700 14px 'Courier New',monospace;letter-spacing:1px;line-height:1.5}.memory-invitation small{display:block;font:14px/1.6 Arial,Helvetica,sans-serif;color:var(--grey);margin-top:4px}.memory-invitation-edge{font:11px 'Courier New',monospace;white-space:nowrap;margin-left:auto;align-self:flex-start;color:var(--grey)}.insert{background:var(--paper);color:var(--ink)}.insert h2{font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.04em;color:var(--ink)}.insert .letter-text,.insert .note-preview{font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:400;line-height:1.8;color:var(--ink)}.insert .eyebrow{font-family:'Courier New',monospace;color:var(--red);font-size:12px;letter-spacing:1px}.insert .memory-photos .photo-button{background:var(--white)}.insert .letter-text{margin-bottom:22px}.insert .small{color:var(--grey)}
@media(max-width:350px){.memory-invitation{gap:10px;padding:16px 12px}.memory-invitation-edge{display:none}}
/* Hero palettes come from the supplied image; photographs remain inside memory. */
body{transition:background-color .45s ease,color .45s ease;background-color:var(--paper)}.primary:hover{background:var(--red);filter:brightness(.9)}.track-row.current{background:color-mix(in srgb,var(--red) 9%,transparent)}.memory-invitation:hover{box-shadow:4px 6px 0 color-mix(in srgb,var(--ink) 10%,transparent)}.voice-letter{margin:26px 0}.voice-letter .play-button{width:100%;min-height:52px;line-height:1.5}.voice-description{font:16px/1.8 Arial,Helvetica,sans-serif;color:var(--ink)}.voice-letter progress{display:block;width:100%;height:5px;accent-color:var(--red);border:0}.hero-theme button:focus-visible,.hero-theme input:focus-visible,.hero-theme summary:focus-visible{outline:3px solid var(--red);outline-offset:5px}.hero-theme .testing-transport button:disabled{opacity:1;color:var(--grey);border-color:var(--line)}
/* Six memory-led hero scenes. Effects are confined to artwork, never behind reading copy. */
.hero-theme main{max-width:1200px}.hero-theme .player-title{font-size:clamp(36px,4.5vw,66px);letter-spacing:-.055em}.hero-theme .now-header{border-top-color:var(--red)}.hero-theme .memory-invitation{border-color:var(--line);border-left-color:var(--red);background:var(--white)}.hero-theme .track-row.current{background:var(--white)}.hero-theme .primary{color:var(--paper)}.hero-theme .stripes{opacity:.85}.hero-theme .cassette{--paper:#f1e8d5;--ink:#171714}.hero-theme .player-left{align-self:start}.hero-stage{position:relative;isolation:isolate;overflow:hidden;margin:8px 0 26px;height:270px;width:100%;border:1px solid var(--line);background:var(--white);order:1}.hero-stage figcaption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--paper);color:var(--ink);font:11px/1.5 'Courier New',monospace;letter-spacing:1px;border-top:1px solid var(--line);z-index:3}.scene-art{position:absolute;inset:0 0 46px;overflow:hidden}.scene-art>*{position:absolute}.scene-rehearsal .scene-art{background:#171411}.film-beam{inset:-50%;background:conic-gradient(from 36deg at 52% 28%,transparent 0deg,#e9b87d20 25deg,#e9b87d55 55deg,transparent 70deg);transform:rotate(-20deg);animation:projector 12s ease-in-out infinite alternate}.film-strip{inset:20px 0 30px -5%;display:flex;gap:14px;transform:rotate(-9deg);width:115%;padding:12px 0;border-top:7px dashed #e9b87d70;border-bottom:7px dashed #e9b87d70}.film-strip i{display:block;min-width:30%;border:1px solid #e9b87d55;background:#0003}.scene-type{color:#fff3dd;font:900 80px/.83 Arial,sans-serif;letter-spacing:-6px;left:30px;top:40px}.frame-corner{width:22px;height:22px;border:1px solid #e9b87d}.corner-a{top:15px;left:15px;border-right:0;border-bottom:0}.corner-b{right:15px;bottom:15px;border-left:0;border-top:0}.scene-moon .scene-art{background:linear-gradient(#0a121c,#182d40)}.moon-disc{width:100px;height:100px;top:24px;left:calc(50% - 50px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#eef4f7,#b9dbe9 65%,#7b9bab);box-shadow:0 0 60px #b9dbe938}.cloud{width:140%;height:65%;border-radius:50%;background:radial-gradient(ellipse,#172c3fce 5%,#33455455 50%,transparent 70%);filter:blur(10px);animation:cloud-drift 23s ease-in-out infinite alternate}.cloud-one{top:30%;left:-50%}.cloud-two{top:7%;left:10%;animation-direction:alternate-reverse;animation-duration:31s}.star-field{inset:0;background-image:radial-gradient(circle,#dceef9 1px,transparent 1.5px),radial-gradient(circle,#dceef980 1px,transparent 1.5px);background-size:89px 77px,137px 97px;background-position:13px 20px,50px 9px;opacity:.45}.moon-horizon{bottom:0;left:0;right:0;height:25%;background:linear-gradient(transparent,#0c1723)}.scene-tide .scene-art{background:linear-gradient(#080606 40%,#630e13 65%,#090606 66%,#210708)}.tide-orbit{width:160px;height:160px;border-radius:50%;border:1px solid #ff443c90;top:10px;left:calc(50% - 80px);box-shadow:0 0 50px #ff443c17,inset 0 0 50px #ff443c17;animation:orbit-breathe 8s ease-in-out infinite}.sea-line{height:1px;left:-10%;right:-10%;background:#ff443c85;transform:rotate(-3deg);animation:tide 8s ease-in-out infinite alternate}.line-one{top:68%}.line-two{top:80%;animation-delay:-3s;opacity:.5}.line-three{top:92%;animation-delay:-6s;opacity:.3}.tide-reflection{left:40%;width:20%;bottom:0;height:35%;background:linear-gradient(#ff443c38,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}.scene-warmth .scene-art{background:#f0ded8}.warm-light{height:240px;width:240px;border-radius:50%;filter:blur(10px);animation:held 12s ease-in-out infinite alternate}.light-one{background:radial-gradient(circle,#d2997680,#bd795333 58%,transparent 70%);left:-20px;top:-55px}.light-two{background:radial-gradient(circle,#b76d7655,#cb8d8d38 55%,transparent 70%);right:-10px;bottom:-55px;animation-direction:alternate-reverse}.warm-arch{inset:22px 20% -60px;border:1px solid #713f3860;border-radius:100px 100px 0 0;box-shadow:0 0 0 16px #713f3808,0 0 0 32px #713f3805}.scene-love .scene-art{background:#281916}.love-type{inset:34px 18px auto;text-align:center;font:900 clamp(40px,10vw,76px)/.9 Arial,sans-serif;letter-spacing:-.06em;color:#fff0de;transform:rotate(-4deg)}.love-type span{color:#f5b797}.love-ring{width:210px;height:210px;border:1px solid #f5b79755;border-radius:50%;left:calc(50% - 105px);top:12px;animation:orbit-breathe 7s ease-in-out infinite}.ring-two{width:290px;height:290px;left:calc(50% - 145px);top:-28px;animation-delay:-3.5s;opacity:.45}.scene-distance .scene-art{background:#171a20}.distance-grid{inset:0;background-image:linear-gradient(#efd0a50b 1px,transparent 1px),linear-gradient(90deg,#efd0a50b 1px,transparent 1px);background-size:36px 36px;transform:rotate(-12deg) scale(1.3)}.distance-thread{left:16%;right:16%;top:50%;height:1px;background:linear-gradient(90deg,#efd0a5,transparent 45%,#efd0a5);transform:rotate(-14deg)}.distance-point{width:12px;height:12px;border-radius:50%;background:#efd0a5;box-shadow:0 0 0 10px #efd0a512,0 0 0 25px #efd0a508}.point-one{left:16%;top:58%}.point-two{right:16%;top:36%}.travelling-light{height:5px;width:5px;background:#f4eadf;border-radius:50%;box-shadow:0 0 12px #efd0a5;offset-path:path('M 0 40 Q 90 25 210 0');left:18%;top:39%;animation:cross-distance 9s linear infinite}.hero-theme .insert{box-shadow:0 15px 80px #0006}.hero-theme .note-preview{color:var(--ink)}
@keyframes projector{to{transform:rotate(-12deg)}}@keyframes cloud-drift{to{transform:translateX(25%)}}@keyframes orbit-breathe{50%{transform:scale(1.09);opacity:.65}}@keyframes tide{to{transform:translateY(7px) rotate(2deg)}}@keyframes held{to{transform:translate(18px,10px) scale(1.08)}}@keyframes cross-distance{to{offset-distance:100%}}
@media(min-width:761px){.hero-stage{height:420px}.scene-type{font-size:135px;top:70px}.moon-disc{height:145px;width:145px;left:calc(50% - 72px);top:50px}.tide-orbit{height:230px;width:230px;left:calc(50% - 115px);top:35px}.warm-light{width:390px;height:390px}.love-type{top:95px;font-size:86px}.love-ring{top:75px}.ring-two{top:35px}.hero-theme .player-grid{grid-template-columns:1.05fr 1fr}.hero-theme .player-left{position:sticky;top:24px}}
@media(prefers-reduced-motion:reduce){.scene-art *{animation:none!important}.travelling-light{offset-distance:50%}.hero-theme *{transition:none!important}}