:root{--color-primary:#667eea;--color-secondary:#764ba2;--color-bg-dark:#1a1a2e;--color-bg-black:#000;--color-white:#fff;--color-overlay:rgba(0,0,0,.7);--color-overlay-hover:rgba(0,0,0,.8);--color-border:hsla(0,0%,100%,.2);--color-border-hover:hsla(0,0%,100%,.35);--color-bg-item:hsla(0,0%,100%,.05);--color-bg-item-hover:hsla(0,0%,100%,.1);--color-bg-item-light:hsla(0,0%,100%,.08);--spacing-xs:8px;--spacing-sm:10px;--spacing-md:12px;--spacing-lg:20px;--border-radius:8px;--border-radius-lg:12px;--button-size:48px;--button-size-mobile:40px;--transition:all 0.3s ease;--transition-fast:all 0.2s ease}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}body{background:radial-gradient(ellipse at center,var(--color-bg-dark) 0,var(--color-bg-black) 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;min-height:100vh;position:relative;width:100%}body:before{animation:gridMove 20s linear infinite;background-image:linear-gradient(rgba(102,126,234,.03) 1px,transparent 0),linear-gradient(90deg,rgba(102,126,234,.03) 1px,transparent 0),linear-gradient(rgba(102,126,234,.05) 1px,transparent 0),linear-gradient(90deg,rgba(102,126,234,.05) 1px,transparent 0);background-position:0 0,0 0,0 0,0 0;background-size:20px 20px,20px 20px,100px 100px,100px 100px;content:"";inset:0;position:absolute;z-index:-1}@keyframes gridMove{0%{background-position:0 0,0 0,0 0,0 0}to{background-position:20px 20px,20px 20px,100px 100px,100px 100px}}.wrapper{display:grid;height:100vh;place-items:center;position:relative;width:100vw}.circle__button{align-items:center;backdrop-filter:blur(12px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:50%;color:var(--color-white);display:flex;height:var(--button-size);justify-content:center;transition:var(--transition);width:var(--button-size)}.circle__button:hover{background:var(--color-overlay-hover);border-color:var(--color-border-hover)}.github__link{left:var(--spacing-lg);position:absolute;text-decoration:none;top:var(--spacing-lg);z-index:200}.github__link svg{transition:transform .3s ease}.github__link:hover svg{animation:octocat-wave .6s ease-in-out}.tooltip{backdrop-filter:blur(12px);background:var(--color-overlay-hover);border:1px solid var(--color-border);border-radius:6px;color:var(--color-white);font-size:.875rem;left:100%;margin-left:var(--spacing-md);opacity:0;padding:.5rem .75rem;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--transition-fast);white-space:nowrap}.tooltip:before{border:6px solid transparent;border-right:6px solid var(--color-border)}.tooltip:after,.tooltip:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%)}.tooltip:after{border:5px solid transparent;border-right:5px solid var(--color-overlay-hover);margin-right:-1px}.github__link:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(4px)}@keyframes octocat-wave{0%,to{transform:rotate(0deg)}20%{transform:rotate(-15deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(5deg)}}.intro__text{color:#fff;left:50%;pointer-events:none;position:absolute;text-align:center;top:10%;transform:translateX(-50%);z-index:10}.intro__text h1{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%);-webkit-background-clip:text;font-size:2.5rem;font-weight:700;margin-bottom:1rem;-webkit-text-fill-color:transparent;background-clip:text}.intro__text p{font-size:1.2rem;opacity:.8}.top__controls{display:flex;gap:var(--spacing-sm);position:absolute;right:var(--spacing-lg);top:var(--spacing-lg);z-index:250}.controls__toggle,.keyboard__toggle,.mouse__toggle{cursor:pointer}.controls__toggle:hover,.keyboard__toggle:hover,.mouse__toggle:hover{background:var(--color-overlay-hover);border-color:var(--color-border-hover)}.controls__toggle:hover .tooltip,.keyboard__toggle:hover .tooltip,.mouse__toggle:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)}.controls__toggle[aria-expanded=true],.keyboard__toggle[aria-expanded=true],.mouse__toggle[aria-expanded=true]{background:var(--color-overlay-hover);border-color:var(--color-primary)}.controls__toggle svg{transition:transform .3s ease}.controls__toggle[aria-expanded=true] svg{transform:rotate(90deg)}.controls__toggle .tooltip,.keyboard__toggle .tooltip,.mouse__toggle .tooltip{left:auto;margin-left:0;margin-right:var(--spacing-md);right:100%;transform:translateY(-50%)}.controls__toggle .tooltip:before,.keyboard__toggle .tooltip:before,.mouse__toggle .tooltip:before{border-left-color:var(--color-border);border-right-color:transparent;left:100%;right:auto}.controls__toggle .tooltip:after,.keyboard__toggle .tooltip:after,.mouse__toggle .tooltip:after{border-left-color:var(--color-overlay-hover);border-right-color:transparent;left:100%;margin-left:-1px;margin-right:0;right:auto}.controls__panel,.keyboard__panel,.mouse__panel{backdrop-filter:blur(16px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);max-height:calc(100vh - var(--spacing-lg) - var(--button-size) - var(--spacing-sm) - var(--spacing-lg));opacity:0;overflow-y:auto;padding:1.25rem;pointer-events:none;position:absolute;right:var(--spacing-lg);top:calc(var(--spacing-lg) + var(--button-size) + var(--spacing-sm));transform:translateY(-10px);transition:transform .25s ease,opacity .25s ease,visibility .25s;visibility:hidden;width:300px;z-index:200}.keyboard__panel{right:calc(var(--spacing-lg) + (var(--button-size) + var(--spacing-sm))*2)}.mouse__panel{right:calc(var(--spacing-lg) + var(--button-size) + var(--spacing-sm))}.controls__panel:before,.keyboard__panel:before,.mouse__panel:before{border-bottom:8px solid var(--color-border);border-left:8px solid transparent;border-right:8px solid transparent;content:"";height:0;position:absolute;right:14px;top:-8px;width:0}.controls__panel:after,.keyboard__panel:after,.mouse__panel:after{border-bottom:7px solid var(--color-overlay);border-left:7px solid transparent;border-right:7px solid transparent;content:"";height:0;position:absolute;right:15px;top:-6px;width:0}.controls__panel--active,.keyboard__panel--active,.mouse__panel--active{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.controls__header,.keyboard__header,.mouse__header{border-bottom:1px solid hsla(0,0%,100%,.1);margin-bottom:1.25rem;padding-bottom:1rem}.controls__header h3,.keyboard__header h3,.mouse__header h3{color:var(--color-white);font-size:1.125rem;font-weight:600;margin:0}.control__section{margin-bottom:1.25rem}.control__section:last-child{margin-bottom:0}.section__label{color:var(--color-white);display:block;font-size:.8125rem;font-weight:600;letter-spacing:.05em;margin-bottom:.75rem;opacity:.7;text-transform:uppercase}.button__group{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}.button__group-item{align-items:center;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-white);cursor:pointer;display:flex;flex-direction:column;font-size:.75rem;font-weight:500;gap:.375rem;padding:.75rem .5rem;transition:var(--transition)}.button__group-item:hover{background:var(--color-bg-item-hover);border-color:var(--color-border-hover)}.button__group-item--active{background:var(--color-primary);border-color:var(--color-primary)}.button__group-item svg{opacity:.8}.button__group-item--active svg{opacity:1}.switch__group{display:flex;flex-direction:column;gap:.75rem}.switch__item{align-items:center;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;display:flex;justify-content:space-between;padding:.75rem;position:relative;transition:var(--transition)}.switch__item:hover{background:var(--color-bg-item-light);border-color:var(--color-border-hover)}.switch__label{align-items:center;color:var(--color-white);display:flex;font-size:.875rem;font-weight:500;gap:.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch__label svg{opacity:.8}.switch__item input[type=checkbox]{height:0;opacity:0;position:absolute;width:0}.switch__slider{background:hsla(0,0%,100%,.2);border-radius:12px;height:24px;position:relative;transition:var(--transition);width:44px}.switch__slider:before{background:var(--color-white);border-radius:50%;content:"";height:20px;left:2px;position:absolute;top:2px;transition:var(--transition);width:20px}.switch__item input[type=checkbox]:checked~.switch__slider{background:var(--color-primary)}.switch__item input[type=checkbox]:checked~.switch__slider:before{transform:translateX(20px)}.keyboard__shortcuts{display:flex;flex-direction:column;gap:.75rem}.shortcut__item{align-items:center;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);display:flex;justify-content:space-between;padding:.75rem;transition:var(--transition)}.shortcut__item:hover{border-color:var(--color-border-hover)}.shortcut__item:hover,.shortcut__key{background:var(--color-bg-item-light)}.shortcut__key{align-items:center;border:1px solid var(--color-border);border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.2);color:var(--color-white);display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,monospace;font-size:.8125rem;font-weight:600;justify-content:center;min-width:2.5rem;padding:.375rem .625rem}.shortcut__key--range{letter-spacing:.05em;min-width:3.5rem}.shortcut__description{color:var(--color-white);font-size:.875rem;font-weight:500}.mouse__controls{display:flex;flex-direction:column;gap:.75rem}.control__item{align-items:flex-start;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);display:flex;gap:.875rem;padding:.875rem;transition:var(--transition)}.control__item:hover{border-color:var(--color-border-hover)}.control__icon,.control__item:hover{background:var(--color-bg-item-light)}.control__icon{align-items:center;border:1px solid var(--color-border);border-radius:6px;color:var(--color-primary);display:flex;flex-shrink:0;height:2.5rem;justify-content:center;width:2.5rem}.control__content{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}.control__title{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.3}.control__description{color:hsla(0,0%,100%,.65);font-size:.75rem;font-weight:400;line-height:1.4}.peek-carousel__caption-title{display:block;font-size:1.8rem;font-weight:700;margin-bottom:.5rem}.peek-carousel__caption-subtitle{color:hsla(0,0%,100%,.8);font-size:1.1rem}.peek-carousel__nav{align-items:center;bottom:7rem;display:flex;gap:1rem;left:50%;position:absolute;transform:translateX(-50%)}.peek-carousel__counter{margin:0;position:static!important;transform:none!important}.peek-carousel>.peek-carousel__counter{align-items:center;backdrop-filter:blur(12px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:var(--border-radius);bottom:7rem;color:var(--color-white);display:flex;font-size:.875rem;font-weight:500;height:-moz-max-content;height:max-content;justify-content:center;left:50%;line-height:1;padding:.5rem 1rem;position:absolute!important;transform:translateX(-50%)!important}.peek-carousel__controls{bottom:3rem}.share__panel{backdrop-filter:blur(16px);background:var(--color-overlay);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);max-height:calc(100vh - var(--spacing-lg) - var(--button-size) - var(--spacing-sm) - var(--spacing-lg));opacity:0;overflow-y:auto;padding:1.25rem;pointer-events:none;position:absolute;right:var(--spacing-lg);top:calc(var(--spacing-lg) + var(--button-size) + var(--spacing-sm));transform:translateY(-10px);transition:transform .25s ease,opacity .25s ease,visibility .25s;visibility:hidden;width:300px;z-index:200}.share__panel:before{border-bottom:8px solid var(--color-border);border-left:8px solid transparent;border-right:8px solid transparent;right:calc(14px + (var(--button-size) + var(--spacing-sm))*0);top:-8px}.share__panel:after,.share__panel:before{content:"";height:0;position:absolute;width:0}.share__panel:after{border-bottom:7px solid var(--color-overlay);border-left:7px solid transparent;border-right:7px solid transparent;right:calc(15px + (var(--button-size) + var(--spacing-sm))*0);top:-6px}.share__panel--active{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.share__header{border-bottom:1px solid hsla(0,0%,100%,.1);margin-bottom:1.25rem;padding-bottom:1rem}.share__header h3{color:var(--color-white);font-size:1.125rem;font-weight:600;margin:0}.share__buttons{display:flex;flex-direction:column;gap:.75rem}.share__item{align-items:flex-start;background:var(--color-bg-item);border:1px solid var(--color-border);border-radius:var(--border-radius);display:flex;gap:.875rem;padding:.875rem;text-decoration:none;transition:var(--transition)}.share__item:hover{border-color:var(--color-border-hover)}.share__icon,.share__item:hover{background:var(--color-bg-item-light)}.share__icon{align-items:center;border:1px solid var(--color-border);border-radius:6px;color:var(--color-primary);display:flex;flex-shrink:0;height:2.5rem;justify-content:center;transition:var(--transition);width:2.5rem}.share__item--twitter:hover .share__icon{background:#000;border-color:#000;color:var(--color-white)}.share__item--facebook:hover .share__icon{background:#1877f2;border-color:#1877f2;color:var(--color-white)}.share__item--linkedin:hover .share__icon{background:#0a66c2;border-color:#0a66c2;color:var(--color-white)}.share__item--reddit:hover .share__icon{background:#ff4500;border-color:#ff4500;color:var(--color-white)}.share__content{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}.share__title{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.3}.share__description{color:hsla(0,0%,100%,.65);font-size:.75rem;font-weight:400;line-height:1.4}.share__toggle{cursor:pointer}.share__toggle:hover{background:var(--color-overlay-hover);border-color:var(--color-border-hover)}.share__toggle:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)}.share__toggle[aria-expanded=true]{background:var(--color-overlay-hover);border-color:var(--color-primary)}.share__toggle .tooltip{left:auto;margin-left:0;margin-right:var(--spacing-md);right:100%;transform:translateY(-50%)}.share__toggle .tooltip:before{border-left-color:var(--color-border);border-right-color:transparent;left:100%;right:auto}.share__toggle .tooltip:after{border-left-color:var(--color-overlay-hover);border-right-color:transparent;left:100%;margin-left:-1px;margin-right:0;right:auto}@media (max-width:768px){.circle__button{height:var(--button-size-mobile);width:var(--button-size-mobile)}.github__link{left:var(--spacing-sm);top:var(--spacing-sm)}.github__link svg{height:24px;width:24px}.tooltip{display:none}.intro__text{max-width:calc(100vw - 2rem);padding:0 1rem;top:18%}.intro__text h1{font-size:1.8rem;margin-bottom:.5rem}.intro__text p{font-size:.8rem}.controls__toggle,.top__controls{right:var(--spacing-sm);top:var(--spacing-sm)}.controls__toggle svg,.keyboard__toggle svg,.mouse__toggle svg{height:20px;width:20px}.controls__panel,.keyboard__panel,.mouse__panel{left:var(--spacing-sm);max-height:calc(100vh - var(--spacing-sm) - var(--button-size-mobile) - var(--spacing-xs) - var(--spacing-sm) - 2rem);max-width:none;padding:1rem;right:var(--spacing-sm);top:calc(var(--spacing-sm) + var(--button-size-mobile) + var(--spacing-xs));width:auto}.keyboard__panel,.mouse__panel{left:var(--spacing-sm);right:var(--spacing-sm)}.controls__panel:after,.controls__panel:before,.keyboard__panel:after,.keyboard__panel:before,.mouse__panel:after,.mouse__panel:before{left:50%;right:auto;transform:translateX(-50%)}.controls__header,.keyboard__header,.mouse__header{margin-bottom:1rem;padding-bottom:.75rem}.controls__header h3,.keyboard__header h3,.mouse__header h3{font-size:1rem}.control__section{margin-bottom:1rem}.section__label{font-size:.8125rem}.button__group-item{font-size:.6875rem;padding:.625rem .375rem}.button__group-item svg{height:14px;width:14px}.switch__item{padding:.625rem}.switch__label{font-size:.8125rem}.switch__label svg{height:14px;width:14px}.switch__slider{height:22px;width:40px}.switch__slider:before{height:18px;width:18px}.switch__item input[type=checkbox]:checked~.switch__slider:before{transform:translateX(18px)}.peek-carousel__caption-title{font-size:1.5rem}.peek-carousel__caption-subtitle{font-size:.95rem}.peek-carousel__nav{bottom:10rem}.peek-carousel>.peek-carousel__counter{bottom:10rem;font-size:.8125rem;padding:.375rem .75rem}.peek-carousel__controls{bottom:7rem}.share__panel{left:var(--spacing-sm);max-height:calc(100vh - var(--spacing-sm) - var(--button-size-mobile) - var(--spacing-xs) - var(--spacing-sm) - 2rem);max-width:none;padding:1rem;right:var(--spacing-sm);top:calc(var(--spacing-sm) + var(--button-size-mobile) + var(--spacing-xs));width:auto}.share__panel:after,.share__panel:before{left:50%;right:auto;transform:translateX(-50%)}.share__header{margin-bottom:1rem;padding-bottom:.75rem}.share__header h3{font-size:1rem}.share__item{padding:.75rem}.share__icon{height:2.25rem;width:2.25rem}.share__icon svg{height:18px;width:18px}}