*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--user-a: #1a0533;--user-b: #3b1fa8;--user-c: #6c4fff;--user-accent: #a78bfa;--admin-a: #1a0010;--admin-b: #a0104a;--admin-c: #f43f8e;--admin-accent: #fb7bb8;--white: #f0ecff;--glow-user: rgba(108, 79, 255, .55);--glow-admin: rgba(244, 63, 142, .55);--divider: rgba(255, 255, 255, .06);--font-display: "Syne", sans-serif;--font-body: "DM Sans", sans-serif}html,body{height:100%;width:100%;background:#05010f;color:var(--white);font-family:var(--font-body);overflow:hidden}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");opacity:.035;pointer-events:none;z-index:100}.shell{height:100dvh;display:flex;flex-direction:column;position:relative}header{position:absolute;top:25px;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:center;z-index:40;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:15px;animation:fadeDown .8s cubic-bezier(.16,1,.3,1) both}.logo img{height:72px;width:auto;filter:brightness(1.1) drop-shadow(0 0 8px rgba(167,139,250,.5))}.logo-text{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(90deg,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.panels{flex:1;display:flex;flex-direction:row;height:100dvh;overflow:hidden}.panel{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:flex .6s cubic-bezier(.77,0,.175,1)}.panel:hover{flex:1.12}.panel:active{flex:1.05}.panel__bg{position:absolute;inset:0;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s}.panel--user .panel__bg{background:radial-gradient(ellipse 120% 120% at 30% 60%,var(--user-b) 0%,var(--user-a) 60%,#05010f 100%)}.panel--admin .panel__bg{background:radial-gradient(ellipse 120% 120% at 70% 60%,var(--admin-b) 0%,var(--admin-a) 60%,#05010f 100%)}.panel:hover .panel__bg{transform:scale(1.04)}.panel__orb{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;opacity:0;animation:orbIn 1.2s cubic-bezier(.16,1,.3,1) .3s forwards}.panel--user .panel__orb:nth-child(1){width:55%;aspect-ratio:1;background:var(--user-c);bottom:-20%;left:-10%;opacity:0;animation-delay:.2s}.panel--user .panel__orb:nth-child(2){width:35%;aspect-ratio:1;background:#38bdf8;top:10%;right:5%;opacity:0;animation-delay:.4s}.panel--admin .panel__orb:nth-child(1){width:55%;aspect-ratio:1;background:var(--admin-c);bottom:-20%;right:-10%;opacity:0;animation-delay:.3s}.panel--admin .panel__orb:nth-child(2){width:35%;aspect-ratio:1;background:#f97316;top:10%;left:5%;opacity:0;animation-delay:.5s}@keyframes orbIn{to{opacity:.35}}.panel__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%)}.panel__content{position:relative;z-index:10;text-align:center;padding:2rem 2.5rem;max-width:380px;width:100%;display:flex;flex-direction:column;align-items:center;gap:0}.panel__icon-wrap{width:76px;height:76px;border-radius:22px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;position:relative;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .4s both}.panel--user .panel__icon-wrap{background:linear-gradient(135deg,#6c4fff59,#60a5fa40);border:1px solid rgba(167,139,250,.3);box-shadow:0 0 32px #6c4fff4d,inset 0 1px #ffffff1a}.panel--admin .panel__icon-wrap{background:linear-gradient(135deg,#f43f8e59,#f9731633);border:1px solid rgba(251,123,184,.3);box-shadow:0 0 32px #f43f8e4d,inset 0 1px #ffffff1a}.panel__icon-wrap:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;opacity:.6}.panel--user .panel__icon-wrap:before{background:linear-gradient(135deg,var(--user-accent),transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}.panel__icon{font-size:2rem;line-height:1}.panel__tag{font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .5s both}.panel--user .panel__tag{color:var(--user-accent)}.panel--admin .panel__tag{color:var(--admin-accent)}.panel__title{font-family:var(--font-display);font-size:clamp(2rem,3vw,3rem);font-weight:800;line-height:1;letter-spacing:-.02em;margin-bottom:.9rem;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .55s both}.panel__desc{font-size:.875rem;font-weight:300;color:#f0ecffa6;line-height:1.65;max-width:260px;margin-bottom:2rem;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .6s both}.btn{display:inline-flex;align-items:center;gap:8px;padding:.75rem 2rem;border-radius:100px;font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .65s both}.btn:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;background:#ffffff1f}.btn:hover:before{opacity:1}.btn:hover{transform:translateY(-2px) scale(1.03)}.btn:active{transform:scale(.97)}.panel--user .btn{background:linear-gradient(135deg,var(--user-c),#818cf8);color:#fff;box-shadow:0 4px 24px #6c4fff80,0 1px #ffffff26 inset}.panel--user .btn:hover{box-shadow:0 8px 36px #6c4fffb3,0 1px #ffffff26 inset}.panel--admin .btn{background:linear-gradient(135deg,var(--admin-c),#f97316);color:#fff;box-shadow:0 4px 24px #f43f8e80,0 1px #ffffff26 inset}.panel--admin .btn:hover{box-shadow:0 8px 36px #f43f8eb3,0 1px #ffffff26 inset}.btn svg{width:14px;height:14px;transition:transform .2s}.btn:hover svg{transform:translate(3px)}.panel__features{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:1.5rem;animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .7s both}.pill{font-size:.68rem;font-weight:500;padding:4px 10px;border-radius:100px;letter-spacing:.03em}.panel--user .pill{background:#6c4fff2e;border:1px solid rgba(167,139,250,.25);color:var(--user-accent)}.panel--admin .pill{background:#f43f8e2e;border:1px solid rgba(251,123,184,.25);color:var(--admin-accent)}.divider{position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);width:1px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 70%,transparent 100%);z-index:20;pointer-events:none}.divider:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:140px;background:linear-gradient(to bottom,var(--glow-user),var(--glow-admin));filter:blur(20px);border-radius:50%;opacity:.6}.divider-h{display:none;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:1px;background:linear-gradient(to right,transparent 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 70%,transparent 100%);z-index:20;pointer-events:none}@keyframes fadeDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:767px){html,body{overflow:hidden}header{position:absolute;top:0;left:0;right:0}.logo{display:flex;flex-direction:column;position:absolute;right:15px;top:0;animation:fadeDown .8s cubic-bezier(.16,1,.3,1) both}.panels{flex-direction:column;height:100dvh}.panel{flex:1;transition:flex .5s cubic-bezier(.77,0,.175,1)}.panel:hover{flex:1.1}.panel--user .panel__bg{background:radial-gradient(ellipse 160% 160% at 50% 90%,var(--user-b) 0%,var(--user-a) 55%,#05010f 100%)}.panel--admin .panel__bg{background:radial-gradient(ellipse 160% 160% at 50% 10%,var(--admin-b) 0%,var(--admin-a) 55%,#05010f 100%)}.panel__content{padding:1.5rem 1.75rem;gap:0}.panel__icon-wrap{width:60px;height:60px;border-radius:16px;margin-bottom:1rem}.panel__icon{font-size:1.6rem}.panel__title{font-size:clamp(1.7rem,6vw,2.2rem);margin-bottom:.5rem}.panel__desc{font-size:.8rem;margin-bottom:1.25rem}.panel__features{margin-top:1rem;gap:5px}.divider{display:none}.divider-h{display:block}}@media(max-height:640px)and (max-width:767px){.logo{display:flex;animation:fadeDown .8s cubic-bezier(.16,1,.3,1) both}.panel__tag,.panel__desc,.panel__features{display:none}.panel__icon-wrap{width:48px;height:48px;margin-bottom:.75rem}.panel__icon{font-size:1.3rem}.panel__title{font-size:1.6rem;margin-bottom:.75rem}.btn{padding:.6rem 1.5rem;font-size:.8rem}}