*{box-sizing:border-box}body{margin:0;background:#11100e;color:#f7ecd4;font-family:'Courier New',monospace}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px)}main{max-width:720px;margin:auto;padding:32px 22px 20px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.krob{font-size:14px;letter-spacing:3px;color:#c6bba4}h1{font-size:clamp(24px,5vw,38px);letter-spacing:-2px;margin:7px 0 0;font-weight:900}.badge{border:2px solid #bc393b;padding:8px;font-size:14px;color:#e8bd6a;line-height:1.4}.cabinet{background:#191918;border:2px solid #504b41;box-shadow:8px 8px 0 #050504;padding:12px}.topline,.bottomline{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;letter-spacing:.3px;color:#c5baa4}.topline{padding:0 3px 10px}button,a{font-family:inherit}button{cursor:pointer;border:0;border-radius:0;font-weight:bold}button:focus-visible,a:focus-visible{outline:3px solid #e8bd6a;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}#sound,#pause{background:transparent;color:#e8bd6a;padding:9px 2px;font-size:14px}.hud{display:flex;justify-content:space-around;background:#090a09;border:1px solid #635b49;padding:14px 8px;text-align:center;margin-bottom:12px}.hud small{display:block;font-size:12px;letter-spacing:2px;color:#d6cdbb}.hud strong{display:block;font-size:32px;color:#e8bd6a;margin-top:4px;font-variant-numeric:tabular-nums}.screen{position:relative;background:#171d1d;overflow:hidden}canvas{width:100%;display:block;image-rendering:pixelated;touch-action:none}.overlay{position:absolute;inset:0;background:#10120fec;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}.overlay[hidden]{display:none}.tag{font-size:12px;color:#e8bd6a;letter-spacing:1px}h2{font-size:clamp(23px,5vw,35px);line-height:1.05;letter-spacing:-1px;margin:18px 0 12px}.intro p{font-size:16px;line-height:1.5;margin:10px 0;color:#d3cbb8}#portrait{height:clamp(125px,26vw,225px);width:auto;image-rendering:pixelated;display:block;margin:12px auto}.primary{display:block;margin:12px auto 0;background:#bf3436;box-shadow:4px 4px 0 #602124;color:#fff1d6;padding:16px 24px;font-size:18px;min-width:220px}.primary:hover{background:#d94c47}.controls{display:flex;align-items:center;justify-content:space-between;text-align:center;gap:12px;padding:14px 0;color:#ddd1b8;font-size:16px}.controls button{background:#eee1c7;color:#151511;border-bottom:5px solid #96876a;font-size:25px;width:85px;height:54px;touch-action:manipulation}.controls button:active{transform:translateY(3px)}.controls small{font-size:12px;line-height:1.6}.bottomline{border-top:1px solid #494437;padding-top:7px}footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#9b9381;gap:15px;margin-top:24px;line-height:1.7}footer span:last-child{text-align:right}footer b{color:#e9bd65;font-size:16px}.note{text-align:center;font-size:12px;color:#8c8374;margin-top:22px}#album{display:block;color:#e8bd6a;font-size:16px;padding:10px}#album[hidden]{display:none}#result:empty{display:none}.pause{position:absolute;inset:0;background:#10120fe8;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px}.pause[hidden]{display:none}@media(max-width:520px){main{padding:18px 12px}.cabinet{padding:8px}.topline{font-size:10px}h1{letter-spacing:-1px}.hud{padding:9px}.hud strong{font-size:26px}.bottomline{font-size:10px}.controls small{font-size:10px}.overlay{padding:12px}h2{margin-top:10px}.intro p{font-size:14px}.primary{font-size:16px;padding:13px 20px}footer{font-size:10px}}

.album-brand{margin:10px 0 0;line-height:0}.album-brand img{display:block;width:120px;height:auto;border:0}.sponsors{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.sponsors>span{font-size:12px;letter-spacing:1px}.sponsors img{display:block;width:170px;height:auto;border:0}@media(max-width:520px){.album-brand img{width:95px}.sponsors img{width:140px}.sponsors>span{font-size:12px}footer{gap:12px}}

[hidden]{display:none!important}.entrance{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:32px 22px;text-align:center}.entrance-content{width:min(100%,440px)}.entrance img{display:block;width:100%;height:auto;margin:0 auto 40px}.entrance .primary{margin-top:0}.album-brand img{width:145px}.promo{font-size:14px}.promo b{font-size:16px}.note{font-size:14px}@media(max-width:520px){.album-brand img{width:120px}footer{flex-direction:column;align-items:center;gap:20px}.sponsors{align-items:center}footer .promo{text-align:center;font-size:14px}.entrance-content{max-width:330px}}
[hidden]{display:none!important}.progressline{display:flex;justify-content:space-between;gap:10px;padding:0 4px 12px;color:#e8bd6a;font-size:12px}.hud strong{font-size:clamp(18px,5vw,30px);overflow-wrap:anywhere}.hud>div{min-width:0;flex:1}
dialog{background:#171918;color:#f7ecd4;border:2px solid #e8bd6a;width:min(94vw,520px);max-height:88svh;padding:24px;font:15px 'Courier New',monospace}dialog::backdrop{background:#000c}dialog label{display:block;margin:16px 0 6px}dialog input:not([type=checkbox]),dialog textarea{display:block;width:100%;background:#080b09;border:1px solid #82765c;color:#fff;padding:12px;margin-top:7px;font:16px system-ui}dialog .consent{display:flex;gap:10px;line-height:1.5}dialog .consent input{flex-shrink:0;width:20px;height:20px}dialog small{display:block;line-height:1.5;color:#c3baa6}#close-fans{float:right;background:transparent;color:#e8bd6a;padding:8px}#fan-status{line-height:1.5}.join-link{background:transparent;color:#e8bd6a;text-decoration:underline;font-size:12px;padding:12px}.join-main{font-size:14px;margin-top:24px}.intro .primary{min-width:190px}#join-end{display:none}body:has(#album:not([hidden])) #join-end{display:inline-block}
