.app-shell{display:grid;grid-template-columns:var(--nav-width) minmax(0,1fr);grid-template-areas:"nav content";height:100vh;height:100dvh;width:100vw;overflow:hidden;background:var(--color-bg-default);transition:grid-template-columns .2s ease}.app-shell:has(.navigation-menu-btn){--nav-width:60px;grid-template-columns:var(--nav-width) minmax(0,1fr)}.app-shell:has(.navigation--collapsed){--nav-width:var(--navigation-width-collapsed);grid-template-columns:var(--nav-width) minmax(0,1fr)}.navigation-menu-btn{position:fixed;top:var(--space-lg);left:var(--space-md);z-index:1000}.app-shell.bg-diagonal{background:repeating-linear-gradient(45deg,transparent,transparent 16px,color-mix(in srgb,var(--color-border-primary) 30%,transparent) 16px,color-mix(in srgb,var(--color-border-primary) 30%,transparent) 17px),var(--color-bg-default)}.app-shell.bg-grid{background:linear-gradient(color-mix(in srgb,var(--color-border-primary) 30%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-border-primary) 30%,transparent) 1px,transparent 1px),var(--color-bg-default);background-size:16px 16px,16px 16px,100% 100%}.app-shell.bg-synthwave{background:linear-gradient(90deg,rgba(255,20,147,.05) 1px,transparent 1px),linear-gradient(0deg,rgba(0,191,255,.05) 1px,transparent 1px),radial-gradient(ellipse at 40% center,rgba(138,43,226,.03) 0,transparent 70%),var(--color-bg-default);background-size:16px 16px,16px 16px,100% 100%,100% 100%}.app-shell.bg-neural{background:radial-gradient(circle at 25% 25%,rgba(99,102,241,.04) 2px,transparent 2px),radial-gradient(circle at 75% 25%,rgba(99,102,241,.04) 2px,transparent 2px),radial-gradient(circle at 25% 75%,rgba(99,102,241,.04) 2px,transparent 2px),radial-gradient(circle at 75% 75%,rgba(99,102,241,.04) 2px,transparent 2px),linear-gradient(45deg,rgba(99,102,241,.02) 1px,transparent 1px),linear-gradient(-45deg,rgba(99,102,241,.02) 1px,transparent 1px),var(--color-bg-default);background-size:60px 60px,60px 60px,60px 60px,60px 60px,60px 60px,60px 60px,100% 100%}.app-shell.bg-glass{background:radial-gradient(ellipse 120% 80% at 20% 30%,rgba(120,119,198,.08) 0,transparent 70%),radial-gradient(ellipse 120% 80% at 80% 70%,rgba(255,119,198,.06) 0,transparent 70%),radial-gradient(ellipse 100% 60% at 50% 0,rgba(139,69,19,.04) 0,transparent 60%),radial-gradient(circle,rgba(255,255,255,.02) 1px,transparent 1px),var(--color-bg-default);background-size:100% 100%,100% 100%,100% 100%,40px 40px,100% 100%}.app-shell.bg-dotted{background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--color-border-primary) 60%,transparent) 1px,transparent 0),var(--color-bg-default);background-size:16px 16px}.app-shell.bg-none,.public-shell{background:var(--color-bg-default)}.public-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100vw;padding:var(--space-md) var(--space-xl) var(--space-2xl);box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.public-shell--home-scroll-snap{scroll-behavior:smooth;scroll-snap-type:y mandatory}.home-scroll-snap-top{width:100%;height:0;flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:always}.public-shell.bg-dotted{background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--color-border-primary) 60%,transparent) 1px,transparent 0),var(--color-bg-default);background-size:16px 16px}.public-shell__main{display:flex;flex:1 1;flex-direction:column;width:min(1120px,100%);min-height:0;margin:0 auto;padding:var(--space-xl) 0 0;box-sizing:border-box}.public-shell--home-scroll-snap .public-shell__main{padding-top:clamp(2.75rem,5.5vh,4rem)}.public-shell__main>.page{flex:1 1;min-height:0;height:100%}@media (prefers-reduced-motion:reduce){.app-shell__content-area--home-scroll-snap,.public-shell--home-scroll-snap{scroll-behavior:auto;scroll-snap-type:none}}.is-mobile .app-shell:not(.bg-none):after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to top,var(--color-bg-default),transparent);pointer-events:none;z-index:0}.is-mobile .app-shell>*{position:relative;z-index:1}.app-shell__content-area{grid-area:content;display:flex;justify-content:center;align-items:stretch;overflow-x:hidden;overflow-y:auto;padding:var(--space-xl) var(--space-xl) var(--space-xl) 0;box-sizing:border-box;height:100%;min-width:0}.app-shell__content-area:has(.virtual-cube-page--learn){padding-bottom:0}.app-shell__content-area--home-scroll-snap{flex-direction:column;justify-content:flex-start;align-items:stretch;scroll-behavior:smooth;scroll-snap-type:y mandatory}.app-shell__main{flex:1 1 auto;min-width:0;max-width:1200px;width:100%;margin:0 auto;background:transparent;display:flex;flex-direction:column}:root{--nav-card-width:220px;--nav-card-width-collapsed:72px;--nav-padding:var(--space-md);--nav-padding-collapsed:var(--space-sm);--nav-width:calc(var(--nav-card-width) + var(--nav-padding) * 2);--navigation-width-collapsed:calc(var(--nav-card-width-collapsed) + var(--nav-padding-collapsed) * 2);--navigation-card-padding:var(--space-xs);--navigation-item-height:44px;--navigation-card-radius:var(--radius-xl);--page-max-width:1200px;--page-padding:var(--space-xl);--page-sidebar-width:280px}.navigation{grid-area:nav;width:100%;height:100vh;background:transparent;z-index:1000;box-sizing:border-box;padding:var(--space-md)}.navigation,.navigation__card{display:flex;flex-direction:column;overflow:visible}.navigation__card{position:relative;background:var(--color-surface-default);border:0;border-radius:var(--radius-xl);backdrop-filter:blur(var(--micro-blur-glass)) saturate(var(--saturation-glass));-webkit-backdrop-filter:blur(var(--micro-blur-glass)) saturate(var(--saturation-glass));box-shadow:var(--shadow-lg);height:100%;gap:var(--space-sm);padding:var(--space-sm) 0}.navigation__card:before{inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--color-glass-border-dark) 60%,transparent) 0,color-mix(in srgb,var(--color-glass-border-light) 20%,transparent) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.navigation__card:after,.navigation__card:before{content:"";position:absolute;pointer-events:none;opacity:.5}.navigation__card:after{top:1px;left:var(--space-lg);right:var(--space-lg);height:1px;background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--color-glass-highlight) 30%,transparent) 50%,transparent 100%)}.navigation--collapsed{padding:var(--nav-padding-collapsed)}.navigation__card--collapsed{align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-xs);width:100%}.navigation--collapsed .navigation-rail__brand{margin:var(--space-sm) 0 var(--space-lg)}.navigation--collapsed .navigation-rail__brand>.navigation__brand-logo{width:24px;height:24px}.navigation--collapsed .navigation-rail__brand>span{transform:scale(.67)}.navigation-rail__premium,.navigation-rail__profile{display:flex;align-items:center;justify-content:center;width:44px;height:36px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;opacity:.9}.navigation-rail__premium:hover,.navigation-rail__profile:hover{color:var(--color-text-default);opacity:1}.navigation-rail__primary-group{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--space-xs);min-height:0;padding-bottom:0}.navigation-rail__profile-area{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:var(--space-xl)}.navigation-rail__profile{height:42px;margin-bottom:var(--space-2xs)}.navigation-rail__profile--active{background:color-mix(in srgb,var(--color-surface-tertiary) 82%,transparent);color:var(--color-text-default);opacity:1}.navigation-rail__profile-avatar{display:flex;align-items:center;justify-content:center;width:30px;height:30px}.navigation-rail__profile-avatar svg{width:100%;height:100%}.navigation-rail__level{max-width:44px;overflow:hidden;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1;letter-spacing:0;margin-bottom:var(--space-sm)}.navigation-rail__level-progress{display:block;width:44px;padding:0}.navigation-rail__level-progress .progress-bar-container{gap:0;width:100%;padding:0}.navigation-rail__level-progress .progress-bar--small .progress-bar__track{height:5px}.navigation-rail__bottom-actions{display:flex;flex-direction:column;gap:var(--space-xs);flex:0 0 auto;margin-top:auto}.navigation-rail__premium{margin-bottom:var(--space-md);background:var(--color-surface-secondary)}.navigation-rail__premium-icon{width:16px;height:16px;color:var(--color-primary-default)}.navigation__brand{display:flex;align-items:center;justify-content:center;align-self:center;width:36px;height:36px;margin:var(--space-xs) 0 0;padding:0;border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-text-default);cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1)}.navigation__brand:hover{transform:scale(1.06)}.navigation__brand:active{transform:scale(.98)}.navigation__brand .navigation__brand-logo{width:36px;height:36px;flex:0 0 auto}.navigation__collapse-btn{position:absolute;top:var(--space-xs);right:var(--space-sm);z-index:3;display:flex;justify-content:center;align-items:center;opacity:.2;pointer-events:auto;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-surface-secondary) 35%,transparent);transition:opacity var(--transition-fast),background var(--transition-fast)}.navigation:hover .navigation__collapse-btn{opacity:.6;background:color-mix(in srgb,var(--color-surface-secondary) 55%,transparent)}.navigation__collapse-btn:hover{opacity:.8!important}.navigation__bottom-section{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-sm);width:100%;padding:0 var(--space-md) var(--space-md);box-sizing:border-box}.navigation__main-items{padding:0 var(--space-md);box-sizing:border-box;position:relative;width:100%}.navigation--collapsed .navigation__main-items{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:0}.navigation--collapsed .navigation-section-label{width:42px;height:2px;margin:var(--space-md) 0 var(--space-sm);padding:0;overflow:hidden;border-radius:var(--radius-full);color:transparent;background:color-mix(in srgb,var(--color-border-primary) 72%,transparent)}.navigation--collapsed .navigation-section-label:first-child{margin-top:0}.navigation-rail__bottom-actions .navigation-section-label,.navigation-rail__primary-group .navigation__main-items>.navigation-section-label:first-child{display:none}.navigation--collapsed .navigation-item-wrapper{justify-content:center}.navigation-item-wrapper{width:100%;display:flex;justify-content:flex-start;position:relative}.is-mobile .navigation{display:none}.is-mobile .app-shell{position:relative;display:flex;flex-direction:column;width:100%;max-width:100vw;height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:pan-x pan-y}.nav-popover{min-width:200px;margin-top:-4px}.nav-popover__content{display:flex;flex-direction:column;gap:var(--space-xs)}.nav-popover .navigation__main-items{padding:0!important;margin:0!important}.nav-popover .navigation-item-wrapper{padding:0!important}.nav-popover .navigation__settings{padding:0!important;margin:0!important}.nav-popover .navigation__settings .navigation-item-wrapper{padding:0!important}.nav-popover .navigation__settings .navigation-item{padding-left:var(--space-md)!important}.nav-popover__expand{margin-top:var(--space-sm)}.nav-popover .divider{margin:var(--space-sm) 0}.nav-popover__profile-item{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-sm);height:40px;padding:var(--space-xs) var(--space-md);margin:0;border:none;background:transparent;border-radius:var(--radius-md);color:var(--color-text-tertiary);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);cursor:pointer;text-align:left;width:100%;box-shadow:none;min-width:0;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;font-family:inherit;opacity:.8;transition:none}.nav-popover__profile-item:hover{background:transparent}.nav-popover__profile-item--active,.nav-popover__profile-item:hover{color:var(--color-text-default);border:none;box-shadow:none;opacity:1}.nav-popover__profile-item--active{background:var(--color-surface-secondary);position:relative;border-radius:var(--radius-md)}.nav-popover__profile-item--active:hover{color:var(--color-text-default);background:var(--color-surface-secondary);border-radius:var(--radius-md);box-shadow:none;cursor:default;opacity:1}.nav-popover__profile-avatar{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.85}.nav-popover__profile-item--active .nav-popover__profile-avatar{opacity:1}.nav-popover__profile-avatar svg{width:100%;height:100%}.nav-popover__profile-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:inherit}@media (min-width:1201px){.navigation__profile-info{display:flex}}.app-shell__mobile-content{flex:1 1;min-height:0;width:100%;max-width:100vw;padding:0 env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0);margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;display:flex;flex-direction:column;box-sizing:border-box}.app-shell__mobile-content:has(.timer-page){overflow:hidden}.app-shell__mobile-content:has(.virtual-cube-page){overflow:hidden}.app-shell__mobile-content:has(.solver-page){overflow:hidden}.page{padding:0 var(--page-padding);height:100%;box-sizing:border-box}.is-mobile .page{padding:0;display:flex;flex-direction:column}.page--full{padding:0;width:100%}.page--centered{max-width:var(--page-max-width);margin:0 auto}.page--content{max-width:960px;margin:0 auto}.page--with-sidebar{display:flex;gap:var(--space-xl);max-width:calc(720px + var(--page-sidebar-width) + var(--space-xl));margin:0 auto;height:100%}.page__main{flex:1 1;min-width:0}.page__main,.page__sidebar{display:flex;flex-direction:column}.page__sidebar{width:var(--page-sidebar-width);flex-shrink:0;animation:sidebarReveal .8s cubic-bezier(.16,1,.3,1) forwards}@keyframes sidebarReveal{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}.is-mobile .page--with-sidebar{flex-direction:column}.is-mobile .page__sidebar{width:100%}.copy-button-container{position:relative;display:inline-block}.copy-effect-checkmark-static{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);pointer-events:none;opacity:0;transition:opacity var(--transition-base)}.copy-effect-checkmark-static--visible{opacity:1}.copy-effect-label{position:absolute;top:50%;right:100%;transform:translateY(-50%);margin-right:var(--space-sm);font-size:var(--font-size-fluid-xs);color:var(--color-icon-green);font-weight:var(--font-weight-regular);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-base)}.copy-effect-label--visible{opacity:1}.copy-effect-checkmark-static .icon{width:16px;height:16px;color:var(--color-icon-green)}.copy-button-success{transition:all .2s var(--motion-spring-gentle);transform:scale(var(--micro-scale-hover))}.copy-button-success .icon{opacity:0;transition:opacity .2s var(--motion-spring-gentle)}