:root{color-scheme:light;--paper:#e9e6de;--ink:#282b29;--muted:#666b63;--red:#d94b28;--line:#cbc9be;--mono:'Courier New',monospace;--hub-x-left:28.90625%;--hub-x-right:71.223958%;--hub-y:48.144531%;--hub-size:12%}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:5px}.masthead,main,footer{max-width:1360px;margin-inline:auto}.masthead{display:flex;align-items:center;justify-content:space-between;padding:28px 50px;border-bottom:1px solid var(--line)}.wordmark{font-size:35px;font-weight:900;letter-spacing:-2px;text-decoration:none;display:flex;align-items:baseline}.wordmark span{font-weight:400}.wordmark i{width:9px;height:9px;background:var(--red);margin-left:5px}.edition{font:12px var(--mono);letter-spacing:1.5px;display:flex;gap:34px}.edition span{color:var(--muted)}main{padding:34px 50px 0}.intro{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}.intro h1{font-size:clamp(28px,3.2vw,44px);letter-spacing:-1.8px;font-weight:500;margin:0}.intro em{font-family:Georgia,serif;font-weight:400}.intro p{font-size:14px;color:var(--muted)}.workbench{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr);gap:46px;align-items:start}.deck{background:#d8d8cf;border:1px solid #c5c7be;border-radius:6px;padding:20px 22px 19px;box-shadow:0 3px 0 #bfc0b8,0 16px 36px -25px #32352b;position:relative}.deck-top{display:flex;justify-content:space-between;font:11px var(--mono);letter-spacing:1.2px;color:#61675c}.type{font-size:10px}.cassette-stage{padding:8px 0 0;perspective:1000px}.cassette{position:relative;aspect-ratio:1.5;filter:drop-shadow(0 13px 8px #3335);transform-origin:center;transition:transform .65s}.cassette.flipping{transform:rotateY(90deg) translateY(-12px)}.shell{display:block;width:100%;height:100%;object-fit:contain}.handwritten{position:absolute;left:13%;right:14%;top:15%;transform:rotate(-1deg);color:#263c49;font-family:'Bradley Hand','Segoe Print',cursive;font-size:clamp(22px,3.2vw,43px);line-height:1.15;pointer-events:none}.handwritten small{display:block;font:clamp(9px,1vw,13px) var(--mono);margin-top:8px;letter-spacing:.2px;color:#475055}.side-sticker{position:absolute;left:13%;top:59%;font-size:32px;font-weight:bold}.format-sticker{position:absolute;right:15%;top:60%;font-size:26px;font-weight:800;letter-spacing:-2px}.format-sticker span{font-weight:400}.hub{position:absolute;top:var(--hub-y);left:var(--hub-x-left);width:var(--hub-size);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background-image:url('assets/cassette.png');background-repeat:no-repeat;will-change:transform}.hub-right{left:var(--hub-x-right)}.readout{display:flex;align-items:center;justify-content:space-between;background:#2c332f;color:#d0ddbc;border:2px solid #b7b9ad;border-radius:3px;padding:12px 15px;margin:0 9px 19px;box-shadow:inset 0 2px 7px #0005;font-family:var(--mono)}.side-readout{font-size:10px;display:flex;gap:9px;align-items:center;letter-spacing:1px}.side-readout b{font-size:22px}.counter{display:flex;align-items:baseline;gap:9px}.counter>span{font-size:26px;font-weight:bold;font-variant-numeric:tabular-nums;letter-spacing:2px}.counter small{font-size:11px;opacity:.6}.transport-state{font-size:10px;letter-spacing:.5px;display:flex;align-items:center;gap:6px;min-width:76px;justify-content:flex-end}.transport-state i{width:5px;height:5px;border-radius:50%;background:#82916d}.transport-state i.on{background:#e6a263;box-shadow:0 0 9px #e59b58}.transport{display:grid;grid-template-columns:1fr 1.3fr 1fr 1fr 1fr;gap:5px;margin-inline:9px;background:#73766c;padding:4px;border-radius:4px}.key{border:1px solid #252926;border-top-color:#535650;border-bottom:5px solid #171b19;color:#edece4;background:linear-gradient(#424640,#30352f);border-radius:3px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font:10px var(--mono);letter-spacing:1px;user-select:none;-webkit-user-select:none;touch-action:none;transition:filter .15s,transform .08s}.key:hover{filter:brightness(1.15)}.key:active,.key.pressed{transform:translateY(3px);border-bottom-width:2px;background:#262d27}.key-icon{font:19px Arial;letter-spacing:-4px;padding-right:3px;line-height:20px}.play-key{background:linear-gradient(#e36a42,#ce4927);border-color:#b7492b;border-bottom-color:#91311d}.play-key:active,.play-key.pressed{background:#b83f21}.flip-key{color:#333b30;background:linear-gradient(#f2f0e7,#d5d9cc);border-color:#aeb3a4;border-bottom-color:#9a9f92}.flip-key:active{background:#c8cebf}.flip-key .key-icon{font-size:27px}.deck-hint{text-align:center;font:11px var(--mono);color:#62685c;margin:16px 0 0}.listening{padding-top:7px;min-width:0}.section-label{font:11px var(--mono);letter-spacing:1.2px;color:var(--muted)}.listening>.section-label{display:flex;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid var(--line)}.listening h2{font-size:30px;font-weight:500;letter-spacing:-1px;margin:23px 0 5px}.artist{font-size:15px;color:var(--muted);margin:0 0 24px}.video-wrap{background:#242824;position:relative;aspect-ratio:16/10;min-height:200px;overflow:hidden;border-radius:3px}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;min-height:200px;border:0}#youtube-player{width:100%;height:100%}.video-consent{position:absolute;inset:0;padding:23px;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;background:#292e29;color:#edece4}.video-consent[hidden]{display:none}.youtube-label{font-size:13px;letter-spacing:-.5px;font-weight:bold;color:#b9c0b2}.video-consent p{font:italic 25px Georgia,serif;margin:14px 0}.video-consent button{background:#e8e5db;border:0;border-radius:2px;padding:11px 13px;text-align:left;font-size:13px;width:100%;display:flex;justify-content:space-between}.video-consent small{font-size:10px;color:#c1c6ba;line-height:1.5;margin-top:13px}.message{font-size:13px;color:var(--muted);line-height:1.5;min-height:39px;margin:15px 0}.message.error{color:#a63319}.volume-line{display:flex;align-items:center;gap:16px;font:11px var(--mono);letter-spacing:1px}.volume-line input{width:100%;accent-color:#53604b;height:24px}.volume-line>span{min-width:22px}.listening-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:17px;font:9px var(--mono);gap:5px}.listening-foot a{font-size:11px}.liner{margin-top:43px;background:#f3f0e8;border:1px solid #d4d0c3;padding:25px 30px 0;position:relative;box-shadow:0 3px 9px #35342707}.liner-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:21px}.liner h2{font:italic 27px Georgia,serif;margin:7px 0 0}.liner h2 span{font:12px var(--mono);color:var(--muted);margin-left:15px}.text-button{background:transparent;border:0;border-bottom:1px solid #858b7d;padding:8px 0;font-size:12px;color:#4e5c45}.track-columns{display:grid;grid-template-columns:1fr 1fr;gap:48px}.track-heading{display:flex;justify-content:space-between;font:11px var(--mono);padding-bottom:10px;border-bottom:1px solid #bdbfaf}.track-heading b{letter-spacing:1.5px}.track-heading span{color:var(--muted)}ol{list-style:none;margin:0;padding:0}li{display:grid;grid-template-columns:22px 1fr auto;align-items:baseline;gap:9px;padding:13px 0;border-bottom:1px solid #deddd2;font-size:13px}li .number{font:10px var(--mono);color:#747b6b}li .track-details{display:flex;gap:5px;flex-wrap:wrap}li .track-artist{color:var(--muted)}li time{font:11px var(--mono);color:#747b6b}li.current .number,li.current .track-details{color:var(--red)}li.blank-track{font-style:italic;color:#8a8e80}.liner-note{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;font:10px var(--mono);color:#71796a}.liner-note>span{white-space:nowrap}.liner-note p{margin:0;line-height:1.6;text-align:right}.how{margin:25px 0;color:var(--muted);font-size:12px}.how summary{cursor:pointer;width:fit-content;padding:8px 0}.how>div{max-width:800px;line-height:1.7;font-size:14px}footer{padding:22px 50px 26px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px}footer>a{font-weight:bold;text-decoration:none}footer>a span{font-weight:400;color:var(--muted)}footer nav{display:flex;gap:17px;align-items:center;color:var(--muted);font-size:10px}footer nav>span{font:9px var(--mono)}dialog{border:1px solid #bdbfaf;border-radius:5px;padding:32px;max-width:460px;width:calc(100% - 32px);background:#f3f0e8;color:var(--ink);box-shadow:0 20px 100px #0004}dialog::backdrop{background:#1b211bab;backdrop-filter:blur(3px)}dialog h2{font:italic 34px Georgia,serif;margin:14px 0}dialog p{font-size:14px;line-height:1.6;color:var(--muted)}dialog label{display:block;font-size:13px;margin:20px 0 8px}dialog input{width:100%;padding:13px;border:1px solid #bfc3b4;background:#fffefa;border-radius:2px;font-size:14px}.primary{background:var(--red);color:white;border:0;padding:13px 19px;border-radius:3px;width:100%}dialog small{display:block;margin-top:16px;line-height:1.6;color:var(--muted);font-size:11px}.dialog-close{position:absolute;right:13px;top:10px;background:transparent;border:0;font-size:27px}#record-message{min-height:20px}.legal{max-width:800px;padding-block:40px;font-size:16px;line-height:1.8}.legal h1{font-size:36px}.legal h2{margin-top:32px}.legal a{overflow-wrap:anywhere}@media(min-width:1450px){main{padding-top:44px}.intro{margin-bottom:36px}}@media(max-width:1000px){.masthead,footer{padding-inline:28px}main{padding-inline:28px}.workbench{gap:24px;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}.deck{padding:17px 10px}.deck-top{padding:0 9px;font-size:9px}.type{font-size:9px}.readout{padding:9px}.counter>span{font-size:22px}.counter small{display:none}.transport-state{font-size:9px;min-width:64px}.handwritten{font-size:30px}.handwritten small{font-size:9px}.side-sticker{font-size:23px}.format-sticker{font-size:22px}.video-consent{padding:17px}.track-columns{gap:28px}.liner-note{align-items:flex-start}footer{align-items:flex-start}footer nav{flex-wrap:wrap;justify-content:flex-end}}@media(max-width:740px){.masthead{padding:20px}.wordmark{font-size:30px}.edition{font-size:9px;letter-spacing:.6px;flex-direction:column;gap:5px;text-align:right}main{padding:26px 18px 0}.intro{display:block;margin:0 0 24px}.intro h1{font-size:33px}.intro p{font-size:12px;margin:9px 0 0}.workbench{grid-template-columns:1fr;gap:30px}.deck{padding:17px 12px}.cassette-stage{max-width:530px;margin:auto}.handwritten{font-size:clamp(26px,7vw,42px)}.handwritten small{font-size:clamp(8px,2vw,12px)}.readout{padding:11px 13px}.counter small{display:inline}.transport-state{font-size:10px}.key{min-height:64px}.listening{padding:0 5px}.listening h2{font-size:26px;margin-top:18px}.artist{margin-bottom:18px}.video-wrap{aspect-ratio:16/9;min-height:210px}.video-consent{padding:20px}.video-consent p{margin:10px 0}.video-consent button{max-width:350px}.video-consent small{max-width:350px;font-size:11px}.listening-foot{font-size:10px}.liner{margin-top:30px;padding:22px 20px 0}.liner-heading{display:block}.liner-heading .text-button{margin-top:15px}.track-columns{grid-template-columns:1fr;gap:27px}.liner-note{display:block;padding:20px 0}.liner-note p{text-align:left;margin-top:8px}.how{margin:17px 0}footer{padding:20px;display:block}footer nav{justify-content:flex-start;margin-top:18px;gap:13px;font-size:11px}.side-sticker{font-size:25px}.format-sticker{font-size:25px}}@media(prefers-reduced-motion:reduce){.cassette{transition:none}.hub{will-change:auto}.key{transition:none}}@media(max-width:370px){.readout{gap:8px;margin-inline:3px}.counter>span{font-size:20px}.counter small{display:none}.transport{margin-inline:3px}.deck-hint{font-size:10px}}

.cassette-stage{max-width:470px;margin-inline:auto}.handwritten{font-size:clamp(24px,2.8vw,35px)}.handwritten small{margin-top:3px}.transport{position:relative}
@media(max-width:740px){body{padding-bottom:100px}.transport{position:fixed;z-index:8;left:12px;right:12px;bottom:12px;margin:0;box-shadow:0 5px 25px #0006}.deck-hint{margin-bottom:4px}.cassette-stage{max-width:470px}.handwritten{font-size:clamp(24px,7vw,35px)}}

.video-wrap{width:100%}
@media(max-width:740px){body{padding-bottom:0;overflow:hidden}.page-scroll{height:calc(100dvh - 100px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}.transport{bottom:12px}.side-sticker,.format-sticker{font-size:clamp(16px,5vw,24px)}}
@media(max-width:740px){main{padding-top:14px}.intro{display:none}.cassette-stage{max-width:280px}.deck{padding:13px 12px}.deck-hint{display:none}.readout{margin-bottom:0;padding:9px 12px}.workbench{gap:22px}.listening>.section-label{padding-bottom:12px}.listening h2{margin-top:12px;font-size:24px}.artist{margin-bottom:14px}.handwritten{font-size:26px}.handwritten small{font-size:8px}.side-sticker,.format-sticker{font-size:17px}}