@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+SC:wght@500;700;900&family=Permanent+Marker&display=swap');

:root { --ink:#201b34; --cream:#fff7e9; --red:#ff563d; --yellow:#ffc82e; --blue:#6bd8ed; --pink:#ff93a3; --spin-speed:2.5s; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--cream); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); background:var(--cream); font-family:'Noto Sans SC',system-ui,sans-serif; }
button, input { font:inherit; } button { cursor:pointer; } .grain { position:fixed; z-index:20; inset:0; pointer-events:none; 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='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
main { width:min(1180px, calc(100% - 44px)); margin:auto; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:900 21px/1 'Noto Sans SC',sans-serif; letter-spacing:-.08em; }.brand small { display:block; margin-top:5px; color:var(--red); font:700 8px/1 Arial,sans-serif; letter-spacing:.14em; }.brand-mark { display:grid; width:39px; height:39px; place-items:center; border:3px solid var(--ink); border-radius:50%; background:var(--yellow); box-shadow:4px 4px 0 var(--ink); font:900 19px 'Permanent Marker',cursive; transform:rotate(-12deg); }
.status { margin:0 0 0 100px; font-size:12px; letter-spacing:.03em; }.status i { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#75ce75; box-shadow:0 0 0 3px #ddf3ce; }.status b { color:var(--red); }.sound-button { padding:8px 12px; border:2px solid var(--ink); border-radius:20px; color:var(--ink); background:transparent; font-weight:700; font-size:12px; transition:.2s; }.sound-button:hover { background:var(--yellow); transform:rotate(-2deg); }.sound-off { display:none; }.sound-muted .sound-on { display:none; }.sound-muted .sound-off { display:inline; color:var(--red); }
.dance-room { height:600px; position:relative; overflow:hidden; border:3px solid var(--ink); border-radius:26px 26px 9px 9px; background:linear-gradient(132deg,#aeebf5 0%,#e4f9df 39%,#ffebb8 100%); box-shadow:10px 10px 0 var(--ink); isolation:isolate; }.dance-room::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,transparent 0 12.3%,rgba(255,255,255,.32) 12.5% 12.8%); }
.glow { position:absolute; z-index:-1; width:380px; height:380px; border-radius:50%; opacity:.7; filter:blur(3px); }.glow-left { background:#ff9daf; top:-110px; left:-110px; }.glow-right { background:#f9db48; right:-135px; bottom:-180px; }.spotlight { position:absolute; z-index:-1; top:-60px; width:130px; height:540px; transform-origin:50% 0; background:linear-gradient(180deg,rgba(255,255,235,.86),rgba(255,255,255,0)); clip-path:polygon(44% 0,56% 0,100% 100%,0 100%); }.spot-one { left:22%; transform:rotate(19deg); }.spot-two { right:23%; transform:rotate(-20deg); }
.side-note { position:absolute; z-index:1; margin:0; color:var(--ink); font:900 15px/1.25 'Noto Sans SC',sans-serif; letter-spacing:-.09em; }.note-left { left:44px; bottom:128px; transform:rotate(-9deg); }.note-right { right:40px; top:130px; text-align:center; transform:rotate(8deg); }.note-right strong { color:var(--red); font:30px/.9 'Archivo Black',sans-serif; }
.stage { position:absolute; inset:0; width:680px; max-width:100%; margin:auto; }.top-sign { position:absolute; z-index:4; top:26px; left:50%; width:254px; padding:12px 10px 11px; border:3px solid var(--ink); border-radius:11px; transform:translateX(-50%) rotate(-2deg); text-align:center; background:var(--yellow); box-shadow:6px 6px 0 var(--ink); }.top-sign::after { content:""; position:absolute; top:100%; left:50%; height:19px; border-left:3px dashed var(--ink); }.top-sign em { display:block; color:var(--red); font:35px/.85 'Noto Sans SC',sans-serif; font-weight:900; letter-spacing:-.16em; font-style:normal; text-shadow:1px 1px var(--ink); }.top-sign small { display:block; margin-top:7px; font:700 8px Arial,sans-serif; letter-spacing:.16em; }.bulb { position:absolute; top:7px; width:7px; height:7px; border-radius:50%; background:var(--cream); box-shadow:0 0 7px 2px white; }.bulb-a { left:9px; }.bulb-b { right:9px; }
.shout { position:absolute; z-index:1; top:144px; left:50%; white-space:nowrap; font:900 clamp(70px,11vw,135px)/1 'Noto Sans SC',sans-serif; letter-spacing:-.18em; }.main-shout { color:var(--red); transform:translateX(-52%) rotate(-4deg); -webkit-text-stroke:3px var(--ink); text-shadow:7px 7px 0 var(--yellow); }.shadow { color:#ffe18a; transform:translate(calc(-50% + 8px),8px) rotate(-4deg); }
.dancer-wrap { position:absolute; z-index:3; left:50%; top:230px; width:190px; height:255px; transform:translateX(-50%); }.dancer { position:absolute; z-index:2; left:41px; top:20px; width:108px; height:215px; transform-origin:50% 78%; }.head { position:absolute; z-index:3; left:29px; top:0; width:55px; height:58px; border:3px solid var(--ink); border-radius:47% 47% 43% 43%; background:#ffc398; }.hair { position:absolute; top:-5px; left:3px; width:50px; height:24px; border:3px solid var(--ink); border-bottom:0; border-radius:50% 50% 12px 10px; background:var(--ink); }.eye { position:absolute; top:29px; width:4px; height:6px; border-radius:50%; background:var(--ink); }.eye-left { left:15px; }.eye-right { right:15px; }.mouth { position:absolute; left:20px; top:40px; width:12px; height:6px; border-bottom:2px solid var(--ink); border-radius:50%; }
.body { position:absolute; z-index:2; top:52px; left:14px; width:84px; height:94px; border:3px solid var(--ink); border-radius:21px 21px 13px 13px; background:var(--red); transform:skewY(2deg); }.body::after { content:""; position:absolute; top:0; left:26px; width:25px; height:15px; border:3px solid var(--ink); border-top:0; border-radius:0 0 50% 50%; background:#ffc398; }.shirt-label { position:absolute; top:30px; left:28px; display:grid; width:26px; height:37px; place-items:center; border:2px solid var(--ink); border-radius:3px; background:var(--cream); color:var(--ink); font-size:13px; font-weight:900; line-height:.9; }.arm { position:absolute; z-index:1; top:61px; width:24px; height:98px; border:3px solid var(--ink); border-radius:30px; background:#ffc398; transform-origin:50% 10%; }.arm span { position:absolute; bottom:-7px; left:1px; width:16px; height:16px; border:3px solid var(--ink); border-radius:50%; background:#ffc398; }.arm-left { left:1px; transform:rotate(54deg); }.arm-right { right:0; transform:rotate(-57deg); }.leg { position:absolute; z-index:0; top:137px; width:30px; height:82px; border:3px solid var(--ink); border-radius:9px 9px 14px 14px; background:#567bd1; transform-origin:50% 5%; }.leg::after { content:""; position:absolute; bottom:-5px; left:-7px; width:35px; height:15px; border:3px solid var(--ink); border-radius:50% 50% 6px 6px; background:var(--ink); }.leg-left { left:22px; transform:rotate(9deg); }.leg-right { right:20px; transform:rotate(-11deg); }
.orbit { position:absolute; z-index:1; width:206px; height:119px; top:77px; left:-8px; border:3px solid var(--ink); border-left-color:transparent; border-radius:50%; transform:rotate(-14deg); }.orbit b { position:absolute; right:2px; top:-11px; color:var(--yellow); font-size:25px; -webkit-text-stroke:1px var(--ink); }.orbit-two { top:104px; border-color:var(--red) transparent var(--red) transparent; transform:rotate(62deg) scale(.83); }.orbit-two b { color:var(--red); }
.turntable { position:absolute; z-index:2; left:50%; bottom:-89px; width:385px; height:215px; border:3px solid var(--ink); border-radius:50%; transform:translateX(-50%); background:repeating-conic-gradient(var(--yellow) 0deg 18deg,var(--red) 18deg 36deg); box-shadow:0 -3px 0 rgba(255,255,255,.55) inset, 0 8px 0 var(--ink); }.turntable::before { content:""; position:absolute; inset:13px; border:3px dashed var(--ink); border-radius:50%; }.turntable i { position:absolute; top:17px; left:50%; width:3px; height:20px; background:var(--ink); transform-origin:50% 90px; }.turntable i:nth-of-type(1){transform:rotate(0deg)} .turntable i:nth-of-type(2){transform:rotate(45deg)} .turntable i:nth-of-type(3){transform:rotate(90deg)} .turntable i:nth-of-type(4){transform:rotate(135deg)} .turntable i:nth-of-type(5){transform:rotate(180deg)} .turntable i:nth-of-type(6){transform:rotate(225deg)} .turntable i:nth-of-type(7){transform:rotate(270deg)} .turntable i:nth-of-type(8){transform:rotate(315deg)} .disc-label { position:absolute; z-index:1; top:32px; left:50%; width:92px; height:82px; padding-top:6px; border:3px solid var(--ink); border-radius:50%; transform:translateX(-50%); text-align:center; background:var(--cream); color:var(--red); font:900 23px/.85 'Noto Sans SC',sans-serif; letter-spacing:-.15em; }.disc-label span { color:var(--ink); }.disc-center { position:absolute; z-index:2; top:74px; left:50%; display:grid; width:30px; height:30px; place-items:center; border:3px solid var(--ink); border-radius:50%; transform:translateX(-50%); background:var(--blue); font:bold 23px Arial; }
.stage-caption { position:absolute; z-index:4; bottom:18px; left:50%; margin:0; padding:5px 12px; border:2px solid var(--ink); border-radius:20px; transform:translateX(-50%); white-space:nowrap; background:var(--cream); font-size:11px; font-weight:700; }
.control-panel { min-height:113px; display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; padding:16px 26px; border:3px solid var(--ink); border-top:0; border-radius:0 0 20px 20px; background:white; box-shadow:10px 10px 0 var(--ink); }.now-playing { display:flex; align-items:center; gap:12px; }.now-playing p { margin:0; font-size:12px; font-weight:900; }.now-playing small { display:block; margin-top:2px; color:#797583; font-size:10px; font-weight:500; }.record { display:grid; width:44px; height:44px; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--ink); }.record::before { content:""; position:absolute; width:22px; height:22px; border:2px solid var(--cream); border-radius:50%; }.record i { z-index:1; width:7px; height:7px; border-radius:50%; background:var(--yellow); }.dance-button { min-width:190px; padding:14px 20px; border:3px solid var(--ink); border-radius:8px; color:var(--ink); background:var(--yellow); box-shadow:4px 4px 0 var(--ink); font-weight:900; transition:transform .12s,box-shadow .12s; }.dance-button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }.dance-button:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }.play-icon { display:inline-block; margin-right:9px; color:var(--red); font-size:15px; }.speed-control { display:flex; justify-content:flex-end; align-items:center; gap:9px; font-size:11px; font-weight:900; }.speed-control input { width:92px; accent-color:var(--red); }.speed-control output { width:25px; color:var(--red); font-size:10px; }
.instructions { display:flex; justify-content:space-between; width:min(720px,100%); margin:42px auto 90px; font-size:12px; }.instructions p { margin:0; }.instructions b { display:inline-grid; width:20px; height:20px; margin-right:6px; place-items:center; border-radius:50%; background:var(--blue); font:900 10px Arial; }.instructions p:nth-child(2) b { background:var(--yellow); }.instructions p:nth-child(3) b { background:var(--pink); }
.ticker { overflow:hidden; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); color:var(--cream); background:var(--red); white-space:nowrap; font:900 18px/37px 'Noto Sans SC',sans-serif; letter-spacing:-.07em; }.ticker div { display:inline-block; min-width:100%; animation:ticker 15s linear infinite; }.ticker span { color:var(--yellow); }.tip { position:fixed; z-index:30; bottom:14px; left:50%; margin:0; padding:7px 12px; border:2px solid var(--ink); border-radius:20px; transform:translateX(-50%); background:var(--cream); box-shadow:3px 3px 0 var(--ink); font-size:11px; font-weight:700; }
.confetti { position:absolute; z-index:8; left:50%; top:48%; width:9px; height:16px; background:var(--red); animation:confetti .85s cubic-bezier(.1,.74,.46,1) forwards; }.confetti:nth-child(3n) { background:var(--yellow); }.confetti:nth-child(4n) { background:var(--blue); }.confetti:nth-child(5n) { background:var(--ink); }
.is-dancing .turntable { animation:spin-turntable var(--spin-speed) linear infinite; }.is-dancing .dancer { animation:dance calc(var(--spin-speed) * .52) ease-in-out infinite alternate; }.is-dancing .dancer-wrap { animation:float calc(var(--spin-speed) * .42) ease-in-out infinite alternate; }.is-dancing .orbit { animation:orbit calc(var(--spin-speed) * .8) linear infinite; }.is-dancing .orbit-two { animation-direction:reverse; }.is-dancing .main-shout { animation:shout .42s ease-in-out infinite alternate; }.is-dancing .top-sign { animation:sign .5s ease-in-out infinite alternate; }.is-dancing .record { animation:spin-record 1.1s linear infinite; }.is-dancing .stage-caption { color:var(--red); }
@keyframes spin-turntable { from { transform:translateX(-50%) rotate(0deg); } to { transform:translateX(-50%) rotate(360deg); } } @keyframes spin-record { to { transform:rotate(360deg); } } @keyframes dance { from { transform:rotate(-13deg) translateY(6px); } to { transform:rotate(14deg) translateY(-6px); } } @keyframes float { from { transform:translateX(-50%) translateY(0); } to { transform:translateX(-50%) translateY(-12px); } } @keyframes orbit { to { transform:rotate(346deg); } } @keyframes shout { to { transform:translateX(-52%) rotate(3deg) scale(1.06); } } @keyframes sign { to { transform:translateX(-50%) rotate(2deg) scale(1.04); } } @keyframes ticker { to { transform:translateX(-36%); } } @keyframes confetti { to { transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:0; } }
@media (max-width:700px) { main { width:calc(100% - 28px); }.topbar { height:73px; }.brand { font-size:18px; }.brand-mark { width:33px; height:33px; font-size:16px; box-shadow:3px 3px 0 var(--ink); }.status { display:none; }.dance-room { height:535px; border-radius:18px 18px 7px 7px; box-shadow:6px 6px 0 var(--ink); }.side-note { font-size:12px; }.note-left { left:17px; bottom:88px; }.note-right { right:15px; top:147px; }.top-sign { top:22px; width:220px; }.top-sign em { font-size:30px; }.shout { top:139px; font-size:78px; }.dancer-wrap { top:221px; transform:translateX(-50%) scale(.88); }.turntable { bottom:-87px; width:345px; height:195px; }.stage-caption { bottom:12px; font-size:10px; }.control-panel { grid-template-columns:1fr auto; padding:14px 14px; gap:13px; border-radius:0 0 15px 15px; box-shadow:6px 6px 0 var(--ink); }.now-playing { gap:7px; }.now-playing p { font-size:10px; }.now-playing small { font-size:8px; }.record { width:34px; height:34px; }.record::before { width:18px; height:18px; }.dance-button { min-width:132px; padding:12px 9px; font-size:12px; }.speed-control { grid-column:1 / -1; justify-content:center; padding-top:1px; }.speed-control input { width:130px; }.instructions { margin:33px auto 74px; gap:10px; font-size:10px; text-align:center; }.instructions p { flex:1; }.instructions b { display:none; }.ticker { font-size:16px; line-height:34px; }.tip { bottom:10px; font-size:10px; }.sound-button { padding:7px 9px; font-size:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }