:root{--bg:#0b0b14;--cy:#00f0ff;--mg:#ff2bd6;--ac:#e8ff3b;--panel:rgba(255,255,255,.05);--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0%,#1a0f2e 0,transparent 50%),radial-gradient(circle at 90% 100%,#021d24 0,transparent 50%),var(--bg);color:#e9e9f2;font-family:'DM Mono',monospace;min-height:100vh}
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.06;z-index:50;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr 1s steps(4) infinite}
@keyframes gr{50%{transform:translate(3%,-2%)}}
header{text-align:center;padding:18px 10px 6px}
h1{font-family:'VT323',monospace;font-size:clamp(42px,8vw,84px);margin:0;letter-spacing:.06em;line-height:1}
h1 span{display:inline-block;text-shadow:-4px 0 var(--mg),4px 0 var(--cy),-9px 0 rgba(255,43,214,.3),9px 0 rgba(0,240,255,.3)}
#tagline{margin:4px 0 0;color:var(--ac);font-weight:300;font-size:13px;letter-spacing:.2em;text-transform:uppercase;transition:opacity .4s}
main{display:grid;grid-template-columns:1fr 300px;gap:20px;max-width:1200px;margin:0 auto;padding:16px}
@media(max-width:820px){main{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);border-radius:18px;padding:50px 20px;text-align:center}
.clock{font-size:90px;color:var(--mg);display:inline-block;animation:melt 3s ease-in-out infinite alternate}
@keyframes melt{to{transform:skewX(-14deg) scaleY(1.2);filter:blur(1px)}}
.note{color:#9a9ab0;font-size:13px;max-width:380px;margin:16px auto 0}
button{font-family:'DM Mono',monospace;background:transparent;color:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:13px;transition:.2s}
button:hover{border-color:var(--cy);box-shadow:0 0 14px rgba(0,240,255,.35);animation:wob .4s}
@keyframes wob{30%{transform:rotate(-2deg)}60%{transform:rotate(2deg)}}
button.big{font-family:'VT323';font-size:38px;padding:10px 40px;background:linear-gradient(90deg,var(--mg),var(--cy));border:none;color:#0b0b14;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 40px rgba(255,43,214,.6)}}
kbd{font-size:10px;opacity:.5;margin-left:4px}
#stage{position:relative;border-radius:16px;padding:3px;background:linear-gradient(90deg,var(--mg),var(--cy),#8a2bff,var(--mg));background-size:300% 100%;animation:bord 6s linear infinite}
@keyframes bord{to{background-position:300% 0}}
#canvas{display:block;width:100%;border-radius:13px;background:#000;touch-action:none}
#hud{position:absolute;top:12px;left:12px;font-size:11px;background:rgba(0,0,0,.55);padding:4px 9px;border-radius:6px;color:var(--ac)}
#recRing{position:absolute;top:10px;right:12px;width:52px;height:52px;display:grid;place-items:center}
#recRing svg{position:absolute;inset:0;transform:rotate(-90deg)}
#recRing circle{fill:rgba(0,0,0,.5);stroke:#ff3b3b;stroke-width:3;stroke-dasharray:107;stroke-dashoffset:107}
#recRing span{position:relative;font-size:10px;color:#ff3b3b}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;border-radius:13px;transition:opacity .5s}
#actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0}
#recBtn.on{border-color:#ff3b3b;color:#ff3b3b}
#gallery{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
#gallery img{height:64px;border-radius:6px;border:1px solid var(--line);cursor:pointer;flex:none}
#gallery img:hover{border-color:var(--ac)}
aside{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);border-radius:18px;padding:18px;align-self:start}
h2{font-family:'VT323';font-weight:400;font-size:26px;margin:0 0 8px;color:var(--cy)}
#modes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
#modes button{font-size:12px;padding:6px 11px}
#modes button.on{background:var(--ac);color:#0b0b14;border-color:var(--ac)}
aside label{display:block;font-size:12px;margin:12px 0}
aside label b{float:right;color:var(--ac);font-weight:500}
input[type=range]{width:100%;accent-color:var(--mg);margin-top:6px}
input[type=range]::-webkit-slider-thumb{filter:drop-shadow(0 0 6px var(--mg))}
.tg{display:flex!important;align-items:center;gap:8px;cursor:pointer;margin:8px 0!important}
.tg input{accent-color:var(--cy);width:16px;height:16px}
.hint{font-size:11px;color:#77778c;margin-top:14px}
.hidden{display:none!important}
#toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%) translateY(30px);background:#000;border:1px solid var(--ac);color:var(--ac);padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;transition:.35s;z-index:60;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:70}
.lbInner{text-align:center}.lbInner img{max-width:90vw;max-height:75vh;border-radius:10px}
.lbInner div{display:flex;gap:8px;justify-content:center;margin-top:10px}
footer{text-align:center;font-size:12px;color:#77778c;padding:24px}
footer a{color:var(--cy)}