:root{--cream:#f8efd5;--gold:#ecb846;--ink:#132725;--wood:url("assets/vhs-hout.jpg");color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px;scroll-padding-bottom:100px}body{margin:0;padding-bottom:calc(88px + env(safe-area-inset-bottom));background:#1c1712 url("assets/vhs-winkel.jpg") center top/cover fixed;color:var(--cream);font:15px/1.5 "DM Sans",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}a{color:inherit;text-underline-offset:5px}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button{color:inherit}button,a,summary{touch-action:manipulation}button[hidden],[hidden]{display:none!important}.skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--cream);color:var(--ink);padding:15px}.skip:focus{top:10px}
.room-header{background:#112624f2;display:flex;justify-content:space-between;align-items:center;padding:16px max(4%,calc((100vw - 1480px)/2));border-bottom:1px solid #cfb77f66;gap:20px}.room-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 23px/.95 "Barlow Condensed",sans-serif}.room-brand img{width:52px;height:auto}.room-header nav{display:flex;align-items:center;gap:28px;font-size:13px}.room-header nav>a{text-decoration:none}.ticket-link{background:var(--gold);color:#192522;padding:12px 25px;font-weight:700;box-shadow:0 3px #745426}
main{max-width:1520px;margin:auto;padding:32px 4% 0}.video-shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.07fr);grid-template-areas:"intro tv" "library tv";column-gap:34px;row-gap:24px;align-items:start}.room-intro{grid-area:intro;text-shadow:0 2px 5px #000}.room-intro h1{margin:0;font:800 clamp(52px,5.5vw,92px)/.95 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:-.025em;white-space:nowrap}.room-intro h1 span{color:#e6687e}.room-intro p:last-child{margin:12px 0 0;font-size:14px}.eyebrow{font:700 9px "DM Sans",sans-serif;letter-spacing:.18em;color:#edcd90;margin:0 0 10px}
.tv-section{grid-area:tv;min-width:0;outline:none}.tv-cabinet{padding:20px 20px 0;border-radius:16px;border:3px solid #59321b;border-top-color:#b17a41;background:linear-gradient(100deg,#0002,#0000 40%,#0004),var(--wood) center/600px;box-shadow:inset 0 0 0 3px #d0984e44,inset 0 0 0 7px #1b0d0877,5px 10px 0 #1c100c,7px 19px 30px #0009;position:relative;z-index:2}
.tv-bezel{padding:10px;background:linear-gradient(120deg,#454038,#171b19 40%,#32352f);border:3px solid #968267;border-bottom-color:#564638;box-shadow:0 0 0 4px #21150d,inset 0 0 0 3px #090d0b;border-radius:25px 25px 14px 14px}
.screen{position:relative;width:100%;aspect-ratio:4/3;min-height:200px;background:#000}
#screen-preview{position:absolute;inset:0;overflow:hidden;border-radius:16px 16px 0 0}
#screen-image{width:100%;height:100%;object-fit:cover}
.screen-shade{position:absolute;inset:0;background:linear-gradient(#0001,transparent 35%,#000b)}
.screen-title{position:absolute;bottom:6%;left:6%;right:6%;text-shadow:0 2px 6px #000}.screen-title strong{display:block;font:800 clamp(26px,2.7vw,42px)/1.05 "Barlow Condensed",sans-serif}.screen-title>span{display:block;color:#e9bd57;font:700 clamp(14px,1.3vw,21px)/1.2 "Barlow Condensed",sans-serif;margin-top:7px}
.play-video{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:76px;height:76px;border:1px solid #faf0d0;border-radius:50%;background:#0e2220eb;color:var(--gold);font-size:28px;display:grid;place-items:center;padding-left:8px;box-shadow:0 3px 12px #0004}.play-video:hover{background:#29423a}.channel{position:absolute;right:7%;top:6%;color:#decc9b;font:17px "Special Elite",monospace}
#video-mount{position:absolute;inset:0;background:#000}#video-mount:empty{display:none}#video-mount iframe{display:block;width:100%;height:100%;border:0}
.story-strip{background:#060808;min-height:96px;padding:9px 14px 13px;text-align:center;display:flex;flex-direction:column;justify-content:center;border-top:1px solid #ddd1;gap:4px}.story-label{color:#c8b990;font-size:8px;font-weight:700;letter-spacing:.12em}.story-strip p{margin:0;font-size:clamp(15px,1.35vw,20px);line-height:1.42;text-wrap:pretty;color:#fff;min-height:2.84em;display:grid;place-content:center}.story-strip.off .story-label{visibility:hidden}.story-strip.off p{color:#adad9e;font-size:13px}
.tv-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;color:#fff1d1;min-height:65px}.tv-bottom p{margin:0;font-weight:700;font-size:13px;line-height:1.3;max-width:65%;text-shadow:0 1px 4px #000}.tv-bottom button{border:1px solid var(--gold);border-radius:24px;background:#090e0cd9;padding:9px 13px;white-space:nowrap;font-size:12px;min-height:40px}.tv-bottom button span{color:var(--gold);padding-left:4px}
.recorder{display:grid;grid-template-columns:28px minmax(0,1.2fr) minmax(180px,1fr);gap:12px;padding:17px 15px;margin-top:15px;background:linear-gradient(95deg,#292a24,#111411 45%,#282a24);border:3px solid #41382a;border-top-color:#7b6a51;border-radius:5px;box-shadow:inset 0 0 0 2px #000,0 7px 0 #160e08,3px 13px 18px #0008;color:#dfb778}.recorder-brand{display:flex;flex-direction:column;justify-content:space-between;padding:0 0 4px}.recorder-brand b{font-size:11px;border:1px solid #b0a089;padding:1px;line-height:1.2}.recorder-brand>span{font-size:7px;line-height:1.1}.tape-slot{background:#050806;border:4px solid #35372e;border-bottom-color:#49453b;padding:3px 4px;box-shadow:inset 0 9px 8px #000;align-self:center;perspective:400px}
.cassette{position:relative;background:repeating-linear-gradient(0deg,#23241e 0 1px,#171a16 1px 3px);padding:5px 8px 6px;border:2px solid #514d3f;border-radius:3px;box-shadow:0 4px 3px #000b;transform:translateY(6px) rotateX(7deg);transition:transform .65s ease}.cassette>span{display:block;background:#e1c7a0;color:#2f231a;border:2px solid #b3956a;box-shadow:inset 0 0 8px #9c713477;border-radius:3px;text-align:center;font:700 21px/1.2 "Caveat",cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 5px}.tape-windows{display:flex;align-items:center;justify-content:space-between;height:24px;background:#645f4a55;border:1px solid #595444;border-radius:5px 5px 0 0;margin:0 6px 5px;padding:2px 8px}.tape-windows i{width:19px;height:19px;flex-shrink:0;border:4px dashed #c5bca3;border-radius:50%;background:#23251e}.tape-windows span{height:10px;width:35%;background:#1c1e18;border:1px solid #a6a08866}
.recorder.loaded .cassette{transform:translateY(-3px) rotateX(16deg) scale(.94)}.recorder.playing .tape-windows i{animation:reels 3s linear infinite}@keyframes reels{to{transform:rotate(360deg)}}
.recorder-panel{min-width:0}#tape-counter{display:block;background:#070c09;color:#bce877;text-shadow:0 0 5px #a4d86455;font:24px/1.2 "Special Elite",monospace;text-align:right;padding:5px 10px 3px;margin-bottom:12px;box-shadow:inset 0 0 0 1px #34382e}
.transport{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.transport button{position:relative;padding:0;border:1px solid #716044;border-bottom:3px solid #0b0f0c;border-radius:2px;background:linear-gradient(#39362d,#201f19);color:#d5b078;min-height:35px;font-size:13px;box-shadow:1px 2px 2px #000}.transport button:hover{background:#514834}.transport small{display:block;font-size:6px;margin-bottom:2px;letter-spacing:.04em}
.player-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;margin:20px 2px 10px;color:#ede2c8}.player-caption>span{display:flex;align-items:center;gap:7px}.player-caption i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#d69d45;flex-shrink:0}.player-caption i.on{background:#a9e169;box-shadow:0 0 7px #a9e169}.player-caption a{white-space:nowrap}
.player-actions{display:flex;gap:15px;align-items:flex-start;justify-content:space-between;font-size:11px}.player-actions details{min-width:0;flex:1}.player-actions summary{cursor:pointer;padding:8px 0;min-height:40px}.player-actions button{background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-size:11px;padding:8px 0;min-height:40px;white-space:nowrap}#story-text{background:#15221fe8;padding:14px 18px;border:1px solid #d5b27744;font-size:14px;line-height:1.7;margin-top:10px}#story-text p{margin:0 0 14px}#story-text p:last-child{margin:0}#share-status{font-size:11px;min-height:0;margin:0}
.tape-library{grid-area:library;background:linear-gradient(#0003,#0005),var(--wood) center/700px;border:12px solid #3c2515;border-image:var(--wood) 20 stretch;box-shadow:0 12px 25px #0009,inset 0 0 0 2px #cb945944;min-width:0}.library-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:2px solid #1d1008;box-shadow:0 7px 8px #0009}.library-top h2{font:700 25px/1.1 "Caveat",cursive;margin:0;background:#dac195;color:#29241c;padding:6px 13px;transform:rotate(-1deg);box-shadow:0 3px 5px #0007;white-space:nowrap}.desktop-hint{font:18px "Caveat",cursive;color:#f1d7a7}.swipe-hint{display:none}
.tapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 20px;padding:25px 18px 20px;background:linear-gradient(#100e0bd9,#110d09c9);position:relative}
.tape-card{--accent:#eac28b;position:relative;min-width:0;text-align:left;padding:0 0 0 16px;background:#e2c392;border:1px solid #8c7551;border-radius:4px 7px 7px 3px;box-shadow:4px 5px 0 #17120e,7px 8px 13px #000c;transition:transform .25s,box-shadow .25s;isolation:isolate;transform:perspective(600px) rotateY(-7deg);color:#f9e6ba;aspect-ratio:.64}
.tape-card:after{content:"";position:absolute;bottom:-15px;left:-15px;right:-15px;height:12px;z-index:-1;background:linear-gradient(#f4bd5533,#0005),var(--wood) center/400px;border-top:1px solid #bf8b4b;box-shadow:0 9px 9px #000;pointer-events:none}
.tape-front{position:relative;display:block;height:100%;background:#161c1b;overflow:hidden;border-left:2px solid #2a221a;border-radius:0 5px 5px 0;box-shadow:inset 0 0 0 2px #b39b7566}
.tape-front>img:first-child{width:100%;height:100%;object-fit:cover;filter:saturate(.7) sepia(.15);opacity:.92}.tape-front:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,#0c141620 40%,#0b1015f5 83%),repeating-linear-gradient(23deg,transparent 0 47px,#eac28b22 48px,transparent 49px);border:2px solid #dfc59266;box-shadow:inset 0 0 0 3px #201b1666;pointer-events:none}
.tape-spine{position:absolute;top:7px;left:1px;bottom:9px;width:15px;writing-mode:vertical-rl;font:600 13px/1 "Caveat",cursive;color:#2b2118;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(90deg,#6c5334,#dbc49b 30%,#ebd5a8 75%,#927344);border-right:1px solid #4c3c28}
.tape-name{position:absolute;z-index:1;bottom:22%;left:9%;right:6%;font:700 clamp(21px,2.8vw,39px)/.84 "Caveat",cursive;text-transform:uppercase;transform:rotate(-5deg);color:var(--accent);text-shadow:1px 2px 3px #000}
.tape-song{position:absolute;z-index:1;left:9%;right:6%;bottom:9%;font:600 10px/1.25 "DM Sans",sans-serif;color:#f0ddbd}.tape-number{position:absolute;top:6%;left:8%;z-index:1;font:700 14px/1 "Barlow Condensed",sans-serif;background:#f4dbb0;color:#1e2722;padding:5px 7px;border-radius:2px;box-shadow:1px 2px 3px #0006}.tape-seal{position:absolute;z-index:1;right:7%;top:5%;width:25px!important;height:auto!important;opacity:.9}.tape-selected{display:none;position:absolute;right:-7px;bottom:15%;z-index:3;font:700 17px "Caveat",cursive;background:var(--gold);color:#1a231c;transform:rotate(-8deg);padding:3px 10px;box-shadow:0 2px 5px #0008}
.tape-card[aria-pressed="true"]{transform:translateY(-6px) perspective(600px) rotateY(-4deg);box-shadow:0 0 0 2px var(--gold),5px 10px 0 #17120e,8px 16px 15px #000c}.tape-card[aria-pressed="true"] .tape-selected{display:block}.tape-card:hover{transform:translateY(-7px) rotateY(0)}
.library-bottom{padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:2px solid #d2914b55}.shelf-nav{display:flex;align-items:center;gap:12px;font:12px "Special Elite",monospace}.shelf-nav button{width:40px;height:36px;border:1px solid #d1aa6866;background:#171813aa;color:#edd1a0;font-size:20px}.library-bottom p{font:20px "Caveat",cursive;margin:0}
.room-outro{text-align:center;padding:40px 0 28px;text-shadow:0 1px 6px #000;background:radial-gradient(ellipse,#151d18d9,transparent 70%)}.room-outro p{font:600 30px "Caveat",cursive;margin:0 0 4px;color:#efd5a5}.room-outro>a{font-size:13px}.room-outro>span{display:block;font-size:11px;color:#d8c9ae;margin-top:20px}.room-footer{padding:20px 4%;background:#132724f5;display:flex;justify-content:space-between;gap:20px;font-size:11px;line-height:1.6;border-top:1px solid #d4bb8544}.room-footer>div{display:flex;gap:20px}.noscript{padding:20px;background:var(--cream);color:var(--ink)}
.ticket-dock{position:fixed;z-index:50;left:0;bottom:0;width:100%;padding:12px max(4%,calc((100vw - 1400px)/2)) calc(12px + env(safe-area-inset-bottom));background:#0d211ff5;border-top:1px solid #e8bf6c66;box-shadow:0 -8px 28px #0005;display:flex;align-items:center;justify-content:space-between;gap:20px}.ticket-dock>div{display:flex;flex-direction:column;font-size:13px}.ticket-dock>div>span{font-size:11px;color:#e5d6b6;margin-top:3px}.ticket-dock>a{display:flex;align-items:center;justify-content:space-between;gap:42px;min-height:46px;background:var(--gold);color:#13211c;text-decoration:none;padding:10px 22px;font-weight:700;box-shadow:0 3px #795825;white-space:nowrap}.ticket-dock>a strong{font-size:18px}.ticket-dock>a strong>span{margin-left:12px}.ticket-dock>a:hover,.ticket-link:hover{background:#fbd17b}
@media(min-width:1600px){.tape-name{font-size:43px}}
@media(max-width:1100px){.video-shop{grid-template-columns:1fr;grid-template-areas:"intro" "tv" "library";gap:26px;max-width:760px;margin:auto}main{padding:26px 4% 0}.room-intro{text-align:center}.room-intro h1{font-size:clamp(54px,9vw,80px)}.room-intro p:last-child{font-size:16px}.tv-section{width:100%;max-width:720px;justify-self:center}.tape-library{width:100%;border-width:9px}.tapes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--gold) #302117;gap:22px;touch-action:pan-x pan-y;padding-bottom:30px}.tape-card{flex:0 0 29%;scroll-snap-align:start;aspect-ratio:.66}.tape-name{font-size:38px}.tape-song{font-size:11px}.library-top h2{font-size:28px}.swipe-hint{display:inline;font-size:11px}.desktop-hint{display:none}.story-strip p{font-size:20px;max-width:600px;margin:auto}.room-footer{flex-wrap:wrap}.tv-bottom p{font-size:15px}.recorder{grid-template-columns:35px minmax(0,1.35fr) minmax(200px,1fr)}.recorder-panel output{font-size:29px}.transport button{min-height:42px}.transport small{font-size:7px}.cassette>span{font-size:27px}.tape-windows{height:30px}.tape-windows i{width:24px;height:24px}}
@media(max-width:600px){body{background-size:auto 1200px;background-attachment:scroll;padding-bottom:calc(82px + env(safe-area-inset-bottom))}.room-header{padding:12px 5%;gap:12px}.room-brand{font-size:17px;gap:8px}.room-brand img{width:40px}.room-header nav{gap:12px;font-size:10px}.room-header nav>a:first-child{max-width:90px;line-height:1.4}.room-header .ticket-link{padding:10px 12px;font-size:12px}.room-intro h1{font-size:clamp(47px,11.8vw,70px)}.eyebrow{font-size:7px;letter-spacing:.13em}.room-intro p:last-child{font-size:12px;margin-top:9px}main{padding:23px 3% 0}.video-shop{gap:19px}.tv-cabinet{padding:12px 10px 0;border-radius:12px;border-width:2px;box-shadow:inset 0 0 0 2px #d0984e44,inset 0 0 0 5px #1b0d0877,3px 6px 0 #1c100c,5px 12px 20px #0009}.tv-bezel{padding:5px;border-width:2px;border-radius:18px 18px 10px 10px;box-shadow:0 0 0 3px #21150d}.screen-title strong{font-size:30px}.screen-title>span{font-size:17px}.play-video{width:60px;height:60px;font-size:23px}.channel{font-size:14px}.story-strip{min-height:91px;padding:8px 9px 11px;gap:5px}.story-strip p{font-size:16px;line-height:1.4;min-height:2.8em}.story-label{font-size:7px;letter-spacing:.07em}.tv-bottom{padding:10px 1px;min-height:58px;gap:7px}.tv-bottom p{font-size:11px;max-width:58%}.tv-bottom button{font-size:11px;min-height:38px;padding:8px 10px}.recorder{grid-template-columns:20px minmax(0,1fr) minmax(125px,.9fr);gap:6px;padding:11px 8px;margin-top:12px;border-width:2px}.recorder-brand b{font-size:9px}.recorder-brand>span{font-size:6px}.cassette{padding:4px 4px 5px}.cassette>span{font-size:19px;padding:1px 2px}.tape-slot{border-width:2px;padding:3px 1px}.tape-windows{margin:0 3px 4px;height:20px;padding:1px 4px}.tape-windows i{width:16px;height:16px;border-width:3px}#tape-counter{font-size:19px;padding:3px 6px;margin-bottom:7px}.transport{gap:3px}.transport button{font-size:11px;min-height:35px}.transport small{font-size:5px;letter-spacing:0}.player-caption{font-size:9px;margin-top:17px}.player-actions{font-size:10px;gap:10px}.player-actions button{font-size:10px}.tape-library{margin-top:0;border-width:6px}.library-top{padding:10px 9px;gap:8px}.library-top h2{font-size:23px;padding:5px 9px}.swipe-hint{font-size:9px;max-width:108px;line-height:1.3}.tapes{padding:22px 12px 28px;gap:18px;scroll-padding-inline:12px}.tape-card{flex-basis:42%;padding-left:14px;aspect-ratio:.62}.tape-spine{width:13px;font-size:12px}.tape-name{font-size:clamp(25px,7.5vw,38px);bottom:24%}.tape-song{font-size:9px;bottom:8%}.tape-seal{width:20px!important}.tape-number{font-size:12px;padding:4px 6px}.tape-selected{font-size:14px;bottom:16%;padding:2px 7px}.library-bottom{padding:10px}.library-bottom p{font-size:18px}.shelf-nav{gap:10px;font-size:10px}.shelf-nav button{width:36px;height:34px}.room-outro{padding:32px 12px 25px}.room-outro p{font-size:27px}.room-outro>span{font-size:10px}.room-footer{flex-direction:column;gap:12px;padding:20px 6% 25px;font-size:11px}.room-footer>div{flex-direction:column;gap:5px}.ticket-dock{padding:10px 4% calc(10px + env(safe-area-inset-bottom))}.ticket-dock>div{display:none}.ticket-dock>a{width:100%;min-height:47px;font-size:14px;padding:10px 18px}.ticket-dock>a strong{font-size:18px}}
@media(max-width:360px){.room-header .ticket-link{display:none}.recorder{grid-template-columns:minmax(0,1fr) 125px}.recorder-brand{display:none}.screen-title strong{font-size:25px}.tape-name{font-size:25px}.story-strip p{font-size:15px}.library-bottom p{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Size lettering to the physical case, including longer artist names. */
.tape-card{container-type:inline-size}
.tape-name{font-size:clamp(21px,19cqw,42px)}
.tape-selected{top:-12px;bottom:auto;font-size:14px}
.tape-card:nth-child(4) .tape-name{font-size:clamp(19px,16cqw,38px)}
/* Approved artwork, used without repainting: CSS windows show original pixels. */
.tv-cabinet{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.tv-art{position:relative;aspect-ratio:638/468;overflow:hidden;isolation:isolate}
.tv-art>.tv-original{position:absolute;width:240.7524%;max-width:none;height:auto;left:-135.1097%;top:-19.6581%;pointer-events:none}
.tv-bezel{position:absolute;left:8.15%;top:12.4%;width:85.58%;height:77.56%;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.screen{height:100%;aspect-ratio:auto;min-height:200px;background:transparent}
#screen-preview{border-radius:0}
.screen[data-original="true"] #screen-image,.screen[data-original="true"] .screen-shade,.screen[data-original="true"] .screen-title,.screen[data-original="true"] .channel{visibility:hidden}
.screen[data-original="true"] .play-video{opacity:0}
.screen[data-original="true"] .play-video:focus-visible{opacity:1}
.tv-cabinet>.story-strip{margin:0 1.4%;border:9px solid #6e4328;border-image:var(--wood) 22 stretch;background:#090c0b;min-height:88px}
.tv-bottom{margin:0 1.4%;padding:10px 14px;background:linear-gradient(#0005,#0003),var(--wood) center/600px;box-shadow:0 6px 12px #0009;min-height:52px}
.recorder{display:block;position:relative;aspect-ratio:656/142;margin:10px 0 0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;isolation:isolate}
.recorder-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.recorder-art img{position:absolute;max-width:none;height:auto;width:234.1463%;left:-131.25%;top:-400.7042%}
.recorder-brand{display:none}
.tape-slot{position:absolute;left:20.1%;top:57.7%;width:35.5%;height:25%;border:0;padding:0;background:none;box-shadow:none;perspective:none}
.cassette,.recorder.loaded .cassette{padding:0;border:0;background:none;box-shadow:none;transform:none;height:100%;transition:none}
.tape-windows{display:none}
.cassette>span{height:100%;padding:0 3px;display:grid;align-items:center;border:1px solid #a68152;background:linear-gradient(90deg,#d9b78f,#edcfaa,#dfbb94);border-radius:3px;font:700 clamp(15px,2.3vw,29px)/1 "Caveat",cursive;color:#1e1b14;box-shadow:none}
.recorder-panel{position:absolute;inset:0;pointer-events:none}
#tape-counter{position:absolute;left:76%;top:16.5%;width:16%;height:24%;margin:0;padding:0;display:grid;place-items:center;font:clamp(13px,2vw,26px)/1 "Special Elite",monospace;background:#111811;box-shadow:none;color:#a6df6d}
.transport{position:absolute;left:65%;top:48%;width:32.5%;height:40%;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;pointer-events:auto}
.transport button{min-height:0;height:100%;border:0;background:transparent!important;box-shadow:none;font-size:0;color:transparent;padding:0}
.transport small{display:none}
.transport button:hover{outline:1px solid #d4b47a;outline-offset:-2px}
.transport button:focus-visible{outline-offset:0}
.transport button#transport-play[aria-label="Pauzeren"]>span{display:grid;place-items:center;position:absolute;inset:38% 12% 9%;font-size:clamp(8px,1vw,14px);color:#dfb77e;background:#312820}
.tape-card{border:0;border-radius:0;background:none;padding:0;box-shadow:none!important;transform:none;aspect-ratio:var(--case-ratio);align-self:end;container-type:normal}
.tape-card:after{bottom:-12px}
.tape-front{background:none;border:0;border-radius:0;box-shadow:none}
.tape-front:after,.tape-spine,.tape-front>.tape-name,.tape-front>.tape-song,.tape-front>.tape-number,.tape-front>.tape-seal{display:none}
.case-art{position:absolute;inset:0;display:block;overflow:hidden}
.case-art img{position:absolute;max-width:none!important;height:auto!important;filter:none!important;opacity:1!important}
.tape-selected{top:-12px;bottom:auto;right:0;font-size:14px;z-index:3}
.tape-card[aria-pressed="true"]{transform:translateY(-3px);outline:2px solid var(--gold);outline-offset:3px}
.tape-card:hover{transform:translateY(-5px)}
.tape-card:first-child .tape-selected{display:block;top:auto;bottom:5%;right:3%;width:43%;height:11%;font-size:clamp(9px,1vw,14px);padding:0 3px;transform:rotate(-12deg);text-align:center;line-height:1.1;align-content:center}
.tape-card:first-child[aria-pressed="false"] .tape-selected{font-size:0}
.tape-card:first-child[aria-pressed="false"] .tape-selected:after{content:"KIJK DEZE BAND";font:700 clamp(9px,1vw,14px)/1 "Caveat",cursive}
.tapes{align-items:end;gap:30px 16px}
.tape-library{border-width:10px}
@media(max-width:1100px){.tape-card{flex-basis:29%}.tv-section{max-width:720px}.cassette>span{font-size:clamp(18px,3.3vw,30px)}#tape-counter{font-size:clamp(16px,3.3vw,27px)}}
@media(max-width:600px){main{padding-left:1.5%;padding-right:1.5%}.room-intro{padding:0 2%}.tv-section{width:100%}.tv-bezel{top:11.8%;height:78.4%}.tv-bottom{padding:8px 10px;min-height:48px}.tv-bottom p{font-size:11px}.tv-cabinet>.story-strip{min-height:86px;border-width:6px}.story-strip p{font-size:16px}.recorder{margin-top:8px}.cassette>span{font-size:17px}#tape-counter{font-size:14px}.transport button{min-height:0}.tape-card{flex-basis:43%;aspect-ratio:var(--case-ratio)}.tapes{gap:16px;padding-left:9px;padding-right:9px}.tape-library{border-width:6px;margin-inline:1%;width:98%}.tape-card:first-child .tape-selected,.tape-card:first-child[aria-pressed="false"] .tape-selected:after{font-size:11px}.player-caption,.player-actions,#share-status{margin-left:3%;margin-right:3%}}
@media(max-width:360px){.tv-art{aspect-ratio:638/530}.tv-art>.tv-original{height:218.8%;width:240.7524%;object-fit:fill}.tv-bezel{top:11%;height:77%;min-height:200px}}
.screen-matte{display:none;position:absolute;left:8%;top:11.5%;width:86%;height:79%;background:#000;border-radius:8%/10%;z-index:0}
.tv-art:has(#video-mount iframe) .screen-matte,.tv-art:has(.screen[data-original="false"]) .screen-matte{display:block}
.tv-bezel{left:10.2%;top:16%;width:80.4%;height:70%;z-index:1}
.transport{left:63.7%;width:35%;height:44%;grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:600px){.tv-bezel{left:9.5%;top:14%;width:82%;height:74%}.screen-matte{top:11%;height:82%}}
@media(max-width:360px){.tv-bezel{top:11.5%;height:78%}}
.screen[data-original="true"] .play-video{top:53%}

/* Keep both the black surround and the live player inside the original glass. */
.screen-matte{left:12%;top:16.5%;width:75%;height:71.5%;border-radius:7%/9%}
.tv-bezel{left:14%;top:20%;width:71%;height:65%}
@media(max-width:600px){
 .tv-art{width:100%;aspect-ratio:638/550;min-height:330px}
 .tv-art>.tv-original{height:218.8034%;width:240.7524%;object-fit:fill}
 .screen-matte{left:12%;top:16.5%;width:75%;height:71.5%}
 .tv-bezel{left:14%;top:20%;width:71%;height:65%;min-height:0}
}

#screen-preview{cursor:pointer}

/* Trace the hardware silhouette, removing the rectangular source background. */
.tv-art{clip-path:polygon(2.4% 5.8%,97.8% .8%,98.8% 1.4%,99.4% 3%,99.8% 97%,98.5% 99.2%,2.2% 98.5%,1.3% 97%,1.3% 8%)}
.tv-cabinet{filter:drop-shadow(0 8px 10px #0008)}
.recorder-art{clip-path:polygon(1% 5%,98.7% 5%,99.8% 8%,99.8% 88%,98.5% 94%,1.7% 94%,.7% 88%)}
.recorder{filter:drop-shadow(0 7px 8px #0009)}
@media(min-width:1101px){
 .video-shop{grid-template-areas:"intro intro" "library tv";align-items:start}
 .room-intro{margin-bottom:6px}
}

.tape-card.has-caption{margin-bottom:45px}.band-caption{position:absolute;left:0;right:0;top:100%;margin-top:5px;padding:5px 6px;background:#eee0bf;color:#15272d;font:600 12px/1.3 "DM Sans",sans-serif;text-align:center;overflow-wrap:anywhere;white-space:normal;border-radius:3px}