:root{--navy:#12102b;--ink:#1c1940;--cream:#f8f2ea;--pink:#e8638f;--orange:#f4a06b;--gold:#f0b45a;--txt:#1d1a33;--mut:#6d6888}
*{box-sizing:border-box;margin:0}
body{font-family:Manrope,system-ui,sans-serif;background:var(--cream);color:var(--txt);display:flex;min-height:100vh;line-height:1.5}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.side{width:140px;flex:none;background:linear-gradient(#12102b,#2a1d52);position:sticky;top:0;height:100vh;padding:22px 12px;display:flex;flex-direction:column;gap:6px;color:#e9e4ff}
.logo{text-align:center;margin-bottom:18px;font-family:'Caveat Brush',cursive;font-size:24px;color:var(--gold);line-height:1}
.logo small{display:block;font:600 10px Manrope,sans-serif;color:#b9b2e0;margin-top:4px}
.side a{text-decoration:none;padding:12px 6px;border-radius:14px;text-align:center;font-size:13px;display:grid;gap:2px}
.side a span{font-size:20px}
.side a.on{background:linear-gradient(135deg,var(--orange),var(--pink));color:#fff;box-shadow:0 8px 20px #e8638f55}
main{flex:1;min-width:0;padding-bottom:40px}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:460px}
.hero .txt{padding:60px 40px 40px 48px;align-self:center}
.hello{font-size:15px;margin-bottom:18px}
h1{font-family:'Caveat Brush',cursive;font-weight:400;font-size:clamp(46px,6vw,82px);line-height:.95;transform:rotate(-2deg);transform-origin:left}
h1 em{font-style:normal;color:var(--pink)}
.hero p{margin:22px 0;color:#3b3658;max-width:34ch}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--navy);color:#fff;text-decoration:none;padding:8px 8px 8px 24px;border-radius:99px;font-weight:700;font-size:14px;border:0;cursor:pointer;font-family:inherit}
.btn i{font-style:normal;background:linear-gradient(135deg,var(--orange),var(--pink));width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.art{position:relative;background:linear-gradient(180deg,#f5b48a,#e8638f 45%,#5b3a8a);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,6% 55%);overflow:hidden}
.art .sun{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#ffe7a8,#f9c179);left:30%;top:12%;opacity:.9}
.art .rock{position:absolute;inset:auto 0 0 28%;height:38%;background:#1a1438;clip-path:polygon(0 100%,4% 20%,100% 0,100% 100%)}
.art svg{position:absolute;left:36%;bottom:34%;width:34%;filter:drop-shadow(0 6px 10px #0006)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 32px;margin-top:-10px}
.card{background:var(--ink);color:#fff;border-radius:20px;padding:20px;box-shadow:0 10px 30px #1c194033}
.card small{color:#b9b2e0;font-size:12px;font-weight:600}
.card b.big{display:block;font-size:34px;margin:6px 0}
.card .up{color:#6fdc9a;font-size:14px;font-weight:700}
.ring{width:130px;aspect-ratio:1;border-radius:50%;margin:10px auto 0;display:grid;place-items:center;background:conic-gradient(#fff 0 75%,#ffffff44 0);position:relative;font-size:30px;font-weight:800}
.ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#e8638f}
.ring span{position:relative}
.pink{background:linear-gradient(160deg,#f4a06b,#e8638f 60%,#b4508f);text-align:center}
.pink small{color:#fff}
.bar{height:8px;border-radius:9px;background:#ffffff22;margin-top:10px}
.bar i{display:block;height:100%;width:60%;border-radius:9px;background:linear-gradient(90deg,var(--orange),var(--pink))}
.quote{grid-column:1/-1;background:#fff;color:var(--txt);display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:'Caveat Brush',cursive;font-size:30px;line-height:1.15;border:1px solid #eadfd2}
.quote q{quotes:none}.quote q span{color:var(--pink)}
.quote svg{width:140px;flex:none}
.next{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.next h2,.page h2{font-size:22px;margin:4px 0}
.cd{display:flex;gap:10px;margin:14px 0}
.cd div{background:#ffffff14;border-radius:10px;padding:8px 14px;text-align:center;font-size:24px;font-weight:800;min-width:64px}
.cd small{display:block;font-size:10px}
.pill{margin:24px 32px 0;padding:14px 24px;border-radius:99px;background:linear-gradient(90deg,#2a1d52,#6b3f8f);color:#fff;text-align:center;font-size:18px}
.page{padding:48px 32px;max-width:900px}
.page h1{font-size:clamp(44px,6vw,70px);margin-bottom:24px}
.list{display:grid;gap:14px}
.ev{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center}
.ev .d{background:linear-gradient(135deg,var(--orange),var(--pink));border-radius:14px;text-align:center;padding:8px;font-weight:800;font-size:22px;line-height:1.1}
.ev .d small{display:block;color:#fff;font-size:11px}
.ev p{color:#b9b2e0;font-size:14px}
.tag{font-size:12px;border:1px solid #ffffff55;border-radius:99px;padding:3px 12px}
.dice{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.dice button{background:var(--ink);color:#fff;border:2px solid transparent;border-radius:14px;padding:12px 20px;font:700 15px Manrope;cursor:pointer}
.dice button.on{border-color:var(--pink);background:#2a1d52}
#res{font:400 110px 'Caveat Brush',cursive;text-align:center;color:var(--pink);line-height:1.1}
#hist{color:#b9b2e0;text-align:center;min-height:24px}
.page p.lead{color:var(--mut);max-width:60ch;margin-bottom:18px}
@media(max-width:820px){
body{display:block}
.side{position:fixed;inset:auto 0 0 0;width:auto;height:auto;flex-direction:row;justify-content:space-around;padding:6px;z-index:9;border-radius:18px 18px 0 0}
.logo{display:none}.side a{padding:6px 12px}
main{padding-bottom:96px}
.hero{grid-template-columns:1fr}.hero .txt{padding:36px 24px}.art{min-height:280px}
.grid{grid-template-columns:1fr 1fr;padding:0 16px}.next,.quote{grid-template-columns:1fr}.quote svg{display:none}
.ev{grid-template-columns:60px 1fr}.ev .tag{display:none}.pill{margin:20px 16px 0}.page{padding:32px 16px}
}
@media(prefers-reduced-motion:no-preference){.btn i{transition:transform .2s}.btn:hover i{transform:translateX(4px)}}