:root{--color-primary: #00f3ff;--color-primary-hover-bg: rgba(0, 243, 255, .15);--color-secondary: #6a00ff;--color-background: #050510;--color-text: #e0e6ed;--color-text-muted: #b0b8c4;--color-overlay: rgba(10, 15, 30, .85);--color-white: #ffffff;--gradient-brand: linear-gradient(90deg, var(--color-white), var(--color-primary));--gradient-glow: linear-gradient(135deg, var(--color-primary), var(--color-secondary));--shadow-glow: 0 0 15px var(--color-primary);--shadow-text: 0 0 5px rgba(0, 243, 255, .5);--spacing-xs: 8px;--spacing-sm: 16px;--spacing-md: 24px;--spacing-lg: 40px;--spacing-xl: 60px;--font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-xs: .8rem;--font-size-sm: .9rem;--font-size-base: 1rem;--font-size-lg: 1.1rem;--font-size-xl: 1.5rem;--font-size-2xl: 2.5rem;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 20px;--transition-fast: .3s ease;--transition-medium: .5s ease;--transition-slow: .8s ease;--anim-delay-base: .1s;--anim-delay-cta: .35s;--anim-delay-nav: .4s;--z-canvas: 1;--z-ui: 2;--z-modal: 10;--z-tooltip: 20;--touch-target-min: 44px;--btn-arrow-hover-offset: 4px;--scrollbar-width: 6px;--scrollbar-track-color: rgba(255, 255, 255, .05);--scrollbar-thumb-radius: 3px;--content-panel-top-desktop: 120px;--content-panel-width-desktop: 70%;--content-panel-max-width: 900px;--content-panel-offset-desktop: 150px;--content-panel-width-laptop: 80%;--content-panel-top-tablet: 100px;--content-panel-width-tablet: 90%;--content-panel-offset-tablet: 120px;--content-panel-top-phone: 80px;--content-panel-width-phone: 94%;--content-panel-offset-phone: 100px;--label-font-size-phone: .65rem;--label-padding-phone: 4px 8px;--label-letter-spacing-phone: .5px}header{padding:var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;pointer-events:auto}.logo-container{display:flex;align-items:center;gap:var(--spacing-sm)}.logo-image{height:40px;width:auto}.logo-text{font-size:var(--font-size-xl);font-weight:700;letter-spacing:4px;text-transform:uppercase;background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-hint{font-size:var(--font-size-sm);opacity:.6;border:1px solid rgba(255,255,255,.2);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-lg);transition:opacity var(--transition-medium)}.nav-hint.hidden{opacity:0}.audio-toggle{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:var(--border-radius-lg);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm)}.audio-toggle:hover{border-color:var(--color-primary);color:var(--color-primary)}.audio-toggle svg{width:18px;height:18px}.header-controls{display:flex;align-items:center;gap:var(--spacing-sm)}@media (max-width: 768px){header{padding:var(--spacing-md)}.logo-image{height:32px}.logo-text{font-size:var(--font-size-lg);letter-spacing:2px}.nav-hint{font-size:var(--font-size-xs);padding:6px 10px}.header-controls{gap:var(--spacing-xs)}}@media (max-width: 480px){header{padding:var(--spacing-sm);flex-wrap:wrap;gap:var(--spacing-xs)}.logo-container{gap:var(--spacing-xs)}.logo-image{height:28px}.logo-text{font-size:var(--font-size-base);letter-spacing:1px}.nav-hint{display:none}.audio-toggle{padding:6px 10px;font-size:var(--font-size-xs)}.audio-toggle svg{width:16px;height:16px}}.page-content{position:absolute;top:var(--content-panel-top-desktop);left:50%;transform:translate(-50%);width:var(--content-panel-width-desktop);max-width:var(--content-panel-max-width);max-height:calc(100vh - var(--content-panel-offset-desktop));display:flex;flex-direction:column;background:var(--color-overlay);padding:var(--spacing-lg);border-left:4px solid var(--color-primary);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--transition-slow),transform var(--transition-slow),visibility 0s var(--transition-slow)}.page-content .page-header{flex-shrink:0;padding-bottom:var(--spacing-sm);border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:var(--spacing-sm)}.page-content .page-body{flex:1;overflow-y:auto;padding-right:var(--spacing-xs);scrollbar-width:thin;scrollbar-color:var(--color-primary) var(--scrollbar-track-color)}.page-content .page-body::-webkit-scrollbar{width:var(--scrollbar-width)}.page-content .page-body::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-thumb-radius)}.page-content .page-body::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--scrollbar-thumb-radius);transition:background var(--transition-fast)}.page-content .page-body::-webkit-scrollbar-thumb:hover{background:var(--color-white)}.page-content .page-footer{flex-shrink:0;display:flex;justify-content:space-between;padding-top:var(--spacing-sm);border-top:1px solid rgba(255,255,255,.1);margin-top:var(--spacing-sm)}.page-content.active{opacity:1;pointer-events:auto;visibility:visible;transform:translate(-50%);z-index:100;transition-delay:0s}.page-content .close-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:32px;height:32px;padding:0;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:var(--color-text-muted);font-size:1.5rem;line-height:1;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;z-index:10}.page-content .close-btn:hover{background:#ffffff1a;border-color:var(--color-primary);color:var(--color-primary)}.page-content .close-btn:focus{outline:2px solid var(--color-primary);outline-offset:2px}.page-content .page-header h2{font-size:var(--font-size-2xl);margin:0;color:var(--color-white);padding-right:40px}.page-content p{line-height:1.6;font-size:var(--font-size-lg);color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}.page-content p:last-of-type{margin-bottom:var(--spacing-md)}.page-content p strong,.page-content li strong{color:var(--color-primary)}.page-content p em,.page-content li em{color:var(--color-primary);font-style:italic}.page-content ul{margin:0 0 var(--spacing-sm) 0;padding-left:var(--spacing-md);color:var(--color-text-muted);line-height:1.6;font-size:var(--font-size-lg)}.page-content li{margin-bottom:var(--spacing-xs)}.page-content li:last-child{margin-bottom:0}.page-content .page-cta{display:block;width:100%;text-align:center;margin-top:var(--spacing-md);margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);font-size:var(--font-size-base);text-decoration:none;transition:all var(--transition-fast)}.page-content .page-cta:hover{background:var(--color-primary-hover-bg);color:var(--color-white);border-color:var(--color-white)}.page-content .page-cta:focus{outline:2px solid var(--color-primary);outline-offset:2px}.page-content.active .page-header h2,.page-content.active p,.page-content.active ul{animation:slideInFade .6s ease-out forwards}.page-content.active p:nth-child(3){animation-delay:var(--anim-delay-base)}.page-content.active p:nth-child(4){animation-delay:calc(var(--anim-delay-base) * 2)}.page-content.active p:nth-child(5){animation-delay:calc(var(--anim-delay-base) * 3)}.page-content.active .page-cta{animation:slideInFade .6s ease-out forwards;animation-delay:var(--anim-delay-cta);opacity:0}.page-content.active .page-footer .btn{animation:slideInFade .6s ease-out forwards;animation-delay:var(--anim-delay-nav);opacity:0}@keyframes slideInFade{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media (min-width: 769px) and (max-width: 1024px){.page-content{width:var(--content-panel-width-laptop)}}@media (max-width: 768px){.page-content{top:var(--content-panel-top-tablet);width:var(--content-panel-width-tablet);max-height:calc(100vh - var(--content-panel-offset-tablet));padding:var(--spacing-md)}.page-content .page-header h2{font-size:1.8rem}.page-content p,.page-content ul{font-size:var(--font-size-base)}.page-content .close-btn{width:var(--touch-target-min);height:var(--touch-target-min);font-size:1.75rem}}@media (max-width: 480px){.page-content{top:50%;transform:translate(-50%,-50%);width:var(--content-panel-width-phone);max-height:80vh;padding:var(--spacing-sm);max-width:none}.page-content.active{transform:translate(-50%,-50%);z-index:100}.page-content .page-header h2{font-size:1.4rem}.page-content p,.page-content ul{font-size:var(--font-size-sm);line-height:1.5;margin-bottom:var(--spacing-xs)}.page-content p:last-of-type,.page-content ul:last-of-type{margin-bottom:var(--spacing-sm)}.page-content .page-cta{width:100%;text-align:center;padding:12px 16px}.page-content .page-footer .btn--prev,.page-content .page-footer .btn--next{width:var(--touch-target-min);height:var(--touch-target-min);flex-shrink:0}}.btn{display:inline-block;margin-top:var(--spacing-md);padding:12px 30px;background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);text-decoration:none;text-transform:uppercase;font-weight:700;font-size:var(--font-size-sm);letter-spacing:1px;transition:all var(--transition-fast);cursor:pointer;pointer-events:auto}.btn:hover{background:var(--color-primary-hover-bg);color:var(--color-white);border-color:var(--color-white)}.btn:focus{outline:2px solid var(--color-primary);outline-offset:2px}.cta-container{display:flex;justify-content:space-between;margin-top:1.5rem}.btn--prev,.btn--next{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);width:48px;height:48px;padding:0;font-size:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--transition-fast)}.btn--prev:hover{background:var(--color-primary-hover-bg);color:var(--color-white);border-color:var(--color-white);transform:translate(calc(-1 * var(--btn-arrow-hover-offset)))}.btn--next:hover{background:var(--color-primary-hover-bg);color:var(--color-white);border-color:var(--color-white);transform:translate(var(--btn-arrow-hover-offset))}.label{position:absolute;color:var(--color-primary);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:1px;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;text-shadow:var(--shadow-text);transition:all var(--transition-fast);padding:5px 10px;background:#00000080;border-radius:var(--border-radius-sm);white-space:nowrap}.label:hover{background:#00f3ff33}.label.focused{border:1px solid var(--color-primary)}.tooltip{position:fixed;bottom:15%;left:50%;transform:translate(-50%) translateY(10px);padding:16px 28px;background:var(--color-overlay);border-left:3px solid var(--color-primary);border-radius:var(--border-radius-md);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:220px;max-width:360px;z-index:var(--z-modal);display:flex;flex-direction:column;gap:6px;text-align:center}.tooltip.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.tooltip__title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--font-size-base);font-weight:600;color:var(--color-white);letter-spacing:.5px}.tooltip__icon{font-size:var(--font-size-lg);color:var(--color-primary)}.tooltip__preview{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:1.4}.storm-indicator{position:fixed;bottom:var(--spacing-lg);left:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast);pointer-events:none}.storm-indicator.visible{opacity:1}.storm-indicator__label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1px}.storm-indicator__bar{width:120px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.storm-indicator__fill{height:100%;background:var(--gradient-glow);border-radius:2px;transition:width var(--transition-fast)}.storm-indicator__status{font-size:var(--font-size-xs);color:var(--color-primary)}@media (max-width: 768px){.label{font-size:var(--font-size-sm);padding:8px 14px}.tooltip{bottom:20%;max-width:85%;padding:14px 20px;min-width:180px}.tooltip__title{font-size:var(--font-size-sm)}.tooltip__preview{font-size:var(--font-size-xs)}.storm-indicator{bottom:var(--spacing-md);left:var(--spacing-md)}.keyboard-hint{display:none}}@media (max-width: 480px){.label{font-size:var(--label-font-size-phone);padding:var(--label-padding-phone);letter-spacing:var(--label-letter-spacing-phone)}.tooltip{bottom:12%;max-width:92%;padding:12px 16px;min-width:160px}.tooltip__hint{display:none}.storm-indicator{bottom:var(--spacing-sm);left:var(--spacing-sm)}.storm-indicator__bar{width:80px}.btn--prev,.btn--next{width:var(--touch-target-min);height:var(--touch-target-min);font-size:1.2rem}}.gesture-feedback{position:fixed;pointer-events:none;z-index:1000}.gesture-ripple{position:absolute;border:2px solid var(--color-primary);border-radius:50%;transform:translate(-50%,-50%);animation:ripple-out .6s ease-out forwards}@keyframes ripple-out{0%{width:0;height:0;opacity:1}to{width:80px;height:80px;opacity:0}}.gesture-hold-ring{position:absolute;width:60px;height:60px;border:3px solid var(--color-primary);border-radius:50%;transform:translate(-50%,-50%);animation:pulse-ring 1s ease-in-out infinite}@keyframes pulse-ring{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.4}}.gesture-swipe-trail{position:absolute;height:4px;border-radius:2px;transform-origin:left center;opacity:.8;transition:opacity .3s ease-out;pointer-events:none}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;overflow:hidden;background-color:var(--color-background);font-family:var(--font-family);color:var(--color-text);line-height:1.6}#canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-canvas)}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-ui);pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.no-select{user-select:none;-webkit-user-select:none}.skip-link{position:absolute;top:-40px;left:0;background:var(--color-primary);color:var(--color-background);padding:8px 16px;z-index:100;transition:top var(--transition-fast);text-decoration:none;font-weight:700}.skip-link:focus{top:0;outline:2px solid var(--color-white);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}