*{box-sizing:border-box}
html{background:#240046}
body{margin:0;min-height:100vh;color:#fff;font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",system-ui,sans-serif;background:linear-gradient(180deg,#240046 0%,#5a189a 45%,#ff6d00 100%);background-attachment:fixed;overflow-x:hidden;text-align:center}
.stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 15%,#fff,transparent),radial-gradient(2px 2px at 70% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 30%,#fff,transparent),radial-gradient(2px 2px at 40% 35%,#ffe066,transparent),radial-gradient(1.5px 1.5px at 10% 45%,#fff,transparent),radial-gradient(2px 2px at 60% 22%,#fff,transparent);animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.4}}
header{padding:1.2rem 1rem .4rem;position:relative}
.tape{display:inline-block;margin:0 0 .6rem;padding:.35rem 1rem;font-weight:bold;color:#222;background:repeating-linear-gradient(-45deg,#ffd60a 0 14px,#222 14px 28px);border-radius:8px;text-shadow:0 0 4px #ffd60a,0 0 4px #ffd60a;font-size:clamp(.85rem,3.6vw,1.1rem);transform:rotate(-2deg)}
.tape span{background:#ffd60a;padding:.1rem .6rem;border-radius:6px;text-shadow:none}
h1{font-size:clamp(2.4rem,11vw,4.6rem);margin:.2rem 0;line-height:1;text-shadow:3px 4px 0 #ff006e,6px 8px 0 #0008}
h1 span{display:block;color:#ffd60a}
.sub{font-size:clamp(1.05rem,4.6vw,1.4rem);margin:.6rem 0 0}
main{max-width:40rem;margin:0 auto;padding:1rem;display:grid;gap:1.1rem;position:relative}
.card{background:#ffffff1f;border:3px solid #ffffff55;border-radius:28px;padding:1.1rem;backdrop-filter:blur(4px);box-shadow:0 8px 0 #0003}
.card h2{margin:.1rem 0 .5rem;font-size:clamp(1.35rem,6vw,1.8rem);color:#ffd60a}
.card p{font-size:clamp(1rem,4.4vw,1.2rem);line-height:1.45;margin:.4rem 0}
#grok{width:100%;height:220px;display:block}
.canvas{border-style:dashed;border-color:#ffd60a}
.soon{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.8rem}
.soon div{background:#ffffff22;border-radius:18px;padding:.6rem .2rem;font-size:2rem;animation:bob 2.4s ease-in-out infinite}
.soon div:nth-child(2){animation-delay:.3s}.soon div:nth-child(3){animation-delay:.6s}.soon div:nth-child(4){animation-delay:.9s}
.soon span{display:block;font-size:.85rem;margin-top:.2rem}
@keyframes bob{50%{transform:translateY(-6px)}}
.log{text-align:left}.log h2,.log .muted{text-align:center}
.muted{opacity:.85}
.log ol{list-style:none;padding:0;margin:.6rem 0 0}
.log li{background:#fff;color:#3c096c;border-radius:18px;padding:.7rem 1rem;margin:.5rem 0;font-size:clamp(1rem,4.4vw,1.15rem);border-left:8px solid #ff006e}
.log time{font-weight:bold;color:#ff006e}
footer{padding:1.5rem 1rem 2rem;font-size:1rem;opacity:.9}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.playbtn{display:inline-block;font-weight:bold;font-size:1.4rem;padding:.6rem 1.6rem;border-radius:40px;background:#ff8c1a;color:#fff;text-decoration:none;box-shadow:0 5px 0 #0006}
.playbtn:hover{transform:scale(1.05)}