:root{color:#f8fafc;background:#08090d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% 0,#5eead42e,#0000 34%),radial-gradient(circle at 90% 5%,#f0abfc2e,#0000 32%),linear-gradient(140deg,#07080c,#101321 55%,#050507);min-height:100vh;margin:0;overflow-x:hidden}body:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff0b 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:44px 44px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}main{width:min(1160px,100% - 28px);margin:0 auto;padding-bottom:48px}.nav{z-index:10;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0f17b8;border:1px solid #ffffff24;border-radius:999px;justify-content:space-between;align-items:center;margin:12px auto 32px;padding:12px 16px;display:flex;position:sticky;top:10px;box-shadow:0 18px 60px #00000047}.brand{letter-spacing:-.03em;align-items:center;gap:9px;font-weight:900;display:flex}.nav a{color:#cbd5e1;font-weight:750;text-decoration:none}.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:34px;min-height:680px;display:grid}.eyebrow{color:#5eead4;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:900}.hero h1{letter-spacing:-.085em;max-width:840px;margin:10px 0 22px;font-size:clamp(3.1rem,8.5vw,7.7rem);line-height:.88}.lead{color:#cbd5e1;max-width:660px;font-size:clamp(1.05rem,2vw,1.32rem)}.actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.primary,.ghost{cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:9px;min-height:50px;padding:14px 20px;font-weight:900;text-decoration:none;display:inline-flex}.primary{color:#09090b;background:#f8fafc;box-shadow:0 18px 44px #5eead42e}.ghost{color:#f8fafc;background:#ffffff14;border:1px solid #ffffff24}.character{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);perspective:900px;background:linear-gradient(145deg,#ffffff1f,#ffffff09);border:1px solid #ffffff26;border-radius:42px;flex-direction:column;justify-content:center;align-items:center;min-height:560px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #fff3,0 30px 90px #0000006b}.halo{filter:blur(32px);opacity:.35;background:radial-gradient(circle,#5eead4,#0000 66%);border-radius:50%;width:330px;height:330px;animation:4s infinite pulse;position:absolute}.head{z-index:2;background:linear-gradient(150deg,#f1f5f9,#a7f3d0);border-radius:44% 44% 36% 36%;width:140px;height:118px;animation:3s ease-in-out infinite bob;position:relative;box-shadow:0 22px 48px #00000047}.head span{background:#0f172a;border-radius:50%;width:14px;height:14px;position:absolute;top:40px}.head span:first-child{left:38px}.head span:nth-child(2){right:38px}.head b{color:#0f172a;font-size:.72rem;position:absolute;bottom:25px;left:42px;transform:rotate(-6deg)}.torso{z-index:2;text-align:center;color:#e2e8f0;background:linear-gradient(145deg,#111827,#1e293b);border:1px solid #ffffff2e;border-radius:34px;flex-direction:column;justify-content:center;align-items:center;width:220px;min-height:178px;margin-top:-4px;padding:18px;display:flex;transform:rotateX(7deg)}.torso p{margin:10px 0 0;font-weight:850}.legs{z-index:1;gap:18px;display:flex}.legs i{background:linear-gradient(#334155,#0f172a 70%,#030712);border:1px solid #ffffff1f;border-radius:0 0 28px 28px;width:72px;height:190px;display:block;position:relative}.legs i:after{content:"";background:#020617;border-radius:999px;height:30px;position:absolute;bottom:-8px;left:-7px;right:-16px}.ruler{color:#111827;background:#fbbf24;border-radius:24px;padding:18px;animation:2.6s ease-in-out infinite wiggle;position:absolute;bottom:28px;right:28px;transform:rotate(-7deg);box-shadow:0 20px 50px #00000047}.ruler span{font-size:3rem;font-weight:1000;line-height:.9;display:block}.ruler small{text-transform:uppercase;letter-spacing:.12em;font-weight:900}.panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f172a9e;border:1px solid #ffffff24;border-radius:38px;margin:26px 0;padding:28px;box-shadow:0 24px 70px #00000047}.finder{grid-template-columns:.8fr 1.05fr .9fr;align-items:start;gap:22px;display:grid}.panel h2,.classes h2{letter-spacing:-.06em;margin:6px 0 14px;font-size:clamp(2rem,5vw,4.2rem);line-height:.95}.panel p,.classes p,.rules p{color:#cbd5e1}.controls{gap:12px;display:grid}.controls label{color:#f8fafc;font-weight:900}.chips{flex-wrap:wrap;gap:8px;display:flex}.chips button,.controls select,.controls input{color:#f8fafc;font:inherit;background:#ffffff14;border:1px solid #ffffff24;border-radius:16px;padding:12px}.chips button{cursor:pointer}.chips .active{color:#0f172a;background:#f8fafc}.controls input[type=range]{accent-color:#5eead4}.result{border:1px solid color-mix(in srgb,var(--accent),transparent 45%);background:linear-gradient(145deg,color-mix(in srgb,var(--accent),transparent 78%),#ffffff0f);border-radius:28px;min-height:320px;padding:24px}.result svg{color:var(--accent)}.result h3{margin:12px 0;font-size:1.8rem;line-height:1}.classes{padding:42px 0}.grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid article,.rules>div{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:28px;min-height:220px;padding:22px}.icon{color:#5eead4;background:#5eead424;border-radius:18px;place-items:center;width:54px;height:54px;display:grid}.grid h3,.rules h3{margin:16px 0 8px;font-size:1.25rem}.brief{grid-template-columns:1.05fr .95fr;gap:22px;display:grid}.brief pre{white-space:pre-wrap;color:#d1fae5;background:#020617;border:1px solid #ffffff1f;border-radius:24px;padding:18px}.brief form{background:#ffffff0f;border-radius:28px;gap:12px;padding:22px;display:grid}.brief input{color:#fff;font:inherit;background:#0003;border:1px solid #ffffff24;border-radius:16px;padding:14px}.brief small{color:#94a3b8}.rules{grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;display:grid}.rules svg{color:#f0abfc}@keyframes bob{50%{transform:translateY(-12px)rotate(2deg)}}@keyframes pulse{50%{opacity:.55;transform:scale(1.08)}}@keyframes wiggle{50%{transform:rotate(4deg)translateY(-8px)}}@media (width<=900px){main{width:min(100% - 18px,760px)}.hero,.finder,.brief,.rules{grid-template-columns:1fr}.hero{min-height:auto;padding-top:28px}.character{min-height:500px}.grid{grid-template-columns:1fr}.nav{top:6px}.hero h1{font-size:4.1rem}.panel{border-radius:28px;padding:20px}}