:root {--vh: 1vh;}.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}.mobile-device .led-display {-webkit-tap-highlight-color: transparent;touch-action: manipulation;}.mobile-device .control-toggle-btn {-webkit-tap-highlight-color: transparent;touch-action: manipulation;min-height: 44px;}.mobile-device .fullscreen-btn {-webkit-tap-highlight-color: transparent;touch-action: manipulation;min-width: 44px;min-height: 44px;}.led-controller-section {min-height: 100vh;padding: 120px 0 var(--space-20) 0;position: relative;background: var(--bg-primary);overflow: hidden;}.led-display-container {position: relative;margin: var(--space-8) 0;padding: var(--space-6);background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: var(--radius-xl);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);}.led-controller-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);pointer-events: none;z-index: 0;}.led-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;}.quick-tips {background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: var(--radius-lg);padding: var(--space-6);margin-top: var(--space-6);}.quick-tips h3 {color: var(--text-primary);font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--space-4);display: flex;align-items: center;gap: var(--space-2);}.quick-tips ul {list-style: none;padding: 0;margin: 0;}.quick-tips li {color: var(--text-secondary);font-size: var(--font-size-sm);line-height: 1.6;margin-bottom: var(--space-2);gap: var(--space-2);}.quick-tips li:last-child {margin-bottom: 0;}.led-display {position: relative;width: 100%;min-height: 280px;background-color: #000000;border-radius: var(--radius-lg);overflow: hidden;display: flex;align-items: center;justify-content: flex-start;border: 2px solid #1a1a1a;padding: var(--space-4);transition: all 0.3s ease;}.led-text-wrapper {width: 100%;height: 100%;display: flex;align-items: center;overflow: hidden;position: relative;}.led-text {font-family: 'Arial', 'Helvetica', sans-serif;font-size: 60px;font-weight: 700;white-space: nowrap;line-height: 1;display: inline-block;text-align: left;transform: translateX(0);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;padding: var(--space-2) 0;margin: 0;opacity: 0;transition: opacity 0.5s ease-out, transform 0.3s ease-out;will-change: transform;backface-visibility: hidden;perspective: 1000px;transform-style: preserve-3d;}.led-text.visible {opacity: 1;}.led-text[data-gradient="true"] {-webkit-background-clip: text !important;background-clip: text !important;-webkit-text-fill-color: transparent !important;color: transparent !important;background-size: 100% 100% !important;background-repeat: no-repeat !important;background-position: center center !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}@keyframes blink-effect {0%, 25% {opacity: 1;}26%, 50% {opacity: 0.3;}51%, 75% {opacity: 1;}76%, 100% {opacity: 0.3;}}.fullscreen-btn {position: absolute;top: var(--space-4);right: var(--space-4);width: 52px;height: 52px;background: rgba(0, 0, 0, 0.8);border: 2px solid rgba(255, 255, 255, 0.3);border-radius: var(--radius-lg);color: #ffffff;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;z-index: 10;}.fullscreen-btn:hover {background: rgba(0, 0, 0, 0.8);border-color: rgba(255, 255, 255, 0.6);transform: scale(1.08);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);}.control-toggle-btn {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);display: flex;align-items: center;gap: var(--space-2);padding: var(--space-3) var(--space-6);background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: var(--radius-full);color: #ffffff;cursor: pointer;font-size: var(--font-size-sm);font-weight: 500;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index: 10;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);min-width: 120px;justify-content: center;}.toggle-text{display: flex;align-items: center;gap: var(--space-2);}.control-toggle-btn:hover {transform: translateX(-50%) translateY(-2px);background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.1) 100%);border-color: rgba(255, 255, 255, 0.3);box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);}.control-toggle-btn:active {transform: translateX(-50%) translateY(0px);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);}.control-icon {font-size: 16px;transition: transform 0.3s ease;}.control-toggle-btn:hover .control-icon {transform: rotate(15deg);}.control-toggle-btn svg {transition: transform 0.3s ease;}.control-toggle-btn.active svg {transform: rotate(180deg);}.control-panel-overlay {position: fixed;top: 0;right: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.1);z-index: 1000;opacity: 0;visibility: hidden;transition: all 0.3s ease;}.control-panel-overlay.active {opacity: 1;visibility: visible;}.control-panel-slide {position: absolute;top: 0;right: 0;width: 450px;height: 100%;background: var(--bg-secondary);border-left: 1px solid rgba(255, 255, 255, 0.1);transform: translateX(100%);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow-y: auto;box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);-webkit-overflow-scrolling: touch;overscroll-behavior: contain;}.control-panel-overlay.active .control-panel-slide {transform: translateX(0);}.led-display.fullscreen {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 9999;border-radius: 0;border: none;box-shadow: none;padding: 0;background: #000000;cursor: pointer;-webkit-user-select: none;user-select: none;-webkit-touch-callout: none;touch-action: manipulation;}.led-display.fullscreen .led-text {font-size: min(10vw, 160px);animation-duration: inherit;padding: var(--space-4) 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.led-display.fullscreen .fullscreen-btn {position: fixed;top: 20px;right: 20px;z-index: 10000;background: rgba(0, 0, 0, 0.9);border: 2px solid rgba(255, 255, 255, 0.3);color: #ffffff;width: 56px;height: 56px;-webkit-tap-highlight-color: transparent;touch-action: manipulation;}.led-display.fullscreen .fullscreen-btn:hover {background: rgba(0, 0, 0, 0.9);border-color: rgba(255, 255, 255, 0.6);}.led-display.fullscreen .fullscreen-btn:active {transform: scale(0.95);background: rgba(0, 0, 0, 0.95);}body:has(.led-display.fullscreen) .navbar, body:has(.led-display.fullscreen) .control-panel-overlay, body:has(.led-display.fullscreen) .control-toggle-btn, body:has(.led-display.fullscreen) .section-header, body:has(.led-display.fullscreen) .footer, body:has(.led-display.fullscreen) .led-background {display: none !important;}.fullscreen-mode .navbar, .fullscreen-mode .control-panel-overlay, .fullscreen-mode .control-toggle-btn, .fullscreen-mode .section-header, .fullscreen-mode .footer, .fullscreen-mode .led-background {display: none !important;}.fullscreen-mode .led-display-container {position: fixed !important;top: 0 !important;left: 0 !important;width: 100vw !important;height: 100vh !important;margin: 0 !important;padding: 0 !important;background: transparent !important;border: none !important;border-radius: 0 !important;box-shadow: none !important;z-index: 9998 !important;display: block !important;}.section-header{margin-bottom: 20px;}body:not(.fullscreen-mode) .led-display-container {position: relative !important;top: auto !important;left: auto !important;width: auto !important;height: auto !important;margin: var(--space-6) 0 !important;padding: var(--space-6) !important;background: rgba(255, 255, 255, 0.05) !important;border: 1px solid rgba(255, 255, 255, 0.1) !important;border-radius: var(--radius-xl) !important;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;z-index: auto !important;}.control-panel {padding: var(--space-8);height: 100%;background: transparent;}.control-panel-header {display: flex;justify-content: space-between;align-items: center;padding: 15px 32px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);position: sticky;top: 0;background-color: #1a1a1a;z-index: 1;}.control-panel-title {font-size: var(--font-size-lg);font-weight: 700;color: var(--text-primary);margin: 0;}.close-panel-btn {background: none;border: none;color: var(--text-secondary);font-size: 24px;cursor: pointer;padding: var(--space-2);border-radius: 50%;transition: all 0.2s ease;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;}.close-panel-btn:hover {background: rgba(255, 255, 255, 0.1);color: var(--text-primary);}.control-grid {display: grid;grid-template-columns: 1fr;gap: var(--space-5);align-items: start;padding-bottom: 30px;}.control-group {display: flex;flex-direction: column;gap: var(--space-3);background: rgba(255, 255, 255, 0.04);padding: var(--space-5);border-radius: var(--radius-lg);border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease;}.control-group:hover {background: rgba(255, 255, 255, 0.06);border-color: rgba(255, 255, 255, 0.15);transform: translateY(-1px);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}.control-group.full-width {grid-column: 1 / -1;}.control-group label {font-size: var(--font-size-sm);font-weight: 600;color: var(--text-primary);text-transform: uppercase;letter-spacing: 0.5px;}.control-group input[type="text"] {width: 100%;padding: var(--space-4);background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: var(--radius-md);color: var(--text-primary);font-size: var(--font-size-base);transition: var(--transition-base);}.control-group input[type="text"]:focus {outline: none;border-color: var(--primary-color);background: rgba(255, 255, 255, 0.08);}.color-control {display: flex;flex-direction: column;gap: var(--space-3);}.color-control input[type="color"] {width: 100%;height: 48px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: var(--radius-md);background: transparent;cursor: pointer;}.color-presets {display: flex;gap: var(--space-2);flex-wrap: wrap;}.color-content{overflow: hidden;width: 32px;height: 32px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}.color-preset {width: 40px;height: 40px;flex-shrink: 0;border-radius: 50%;cursor: pointer;border: 2px solid rgba(255, 255, 255, 0.2);transition: var(--transition-base);}.color-preset:hover {transform: scale(1.1);border-color: rgba(255, 255, 255, 0.5);}.color-content:nth-child(1) .gradient-preset {background: linear-gradient(45deg, #ff0000 0%, #ff7f00 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%);}.color-content:nth-child(2) .gradient-preset {background: linear-gradient(45deg, #8e2de2 0%, #4a00e0 100%);}.color-content:nth-child(3) .gradient-preset {background: linear-gradient(45deg, #ff006e 0%, #8338ec 100%);}.color-content:nth-child(4) .gradient-preset {background: linear-gradient(45deg, #06ffa5 0%, #0080ff 100%);}.color-content:nth-child(5) .gradient-preset {background: linear-gradient(45deg, #ffbe0b 0%, #fb5607 100%);}.color-content:nth-child(6) .gradient-preset {background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);}.bg-preset:nth-child(1) {background: #000000;}.bg-preset:nth-child(2) {background: #1a1a1a;}.bg-preset:nth-child(3) {background: #2c3e50;}.bg-preset:nth-child(4) {background: #34495e;}.bg-preset:nth-child(5) {background: #8e44ad;}.bg-preset:nth-child(6) {background: #e74c3c;}.range-control {display: flex;align-items: center;gap: var(--space-4);}.range-control input[type="range"] {flex: 1;height: 8px;background: rgba(255, 255, 255, 0.1);border-radius: var(--radius-full);outline: none;-webkit-appearance: none;appearance: none;cursor: pointer;touch-action: pan-x;-webkit-tap-highlight-color: transparent;}.range-control input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 24px;height: 24px;background: var(--primary-gradient);border-radius: 50%;cursor: pointer;box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);border: 2px solid #ffffff;touch-action: pan-x;-webkit-tap-highlight-color: transparent;}.range-control input[type="range"]::-moz-range-thumb {width: 24px;height: 24px;background: var(--primary-gradient);border-radius: 50%;cursor: pointer;border: 2px solid #ffffff;box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);}.range-value {min-width: 60px;text-align: center;font-weight: 600;color: var(--primary-color);background: rgba(102, 126, 234, 0.1);padding: var(--space-1) var(--space-3);border-radius: var(--radius-md);font-size: var(--font-size-sm);}.control-group select {width: 100%;padding: var(--space-4);background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: var(--radius-md);color: var(--text-primary);font-size: var(--font-size-base);cursor: pointer;transition: var(--transition-base);}.control-group select:focus {outline: none;border-color: var(--primary-color);background: rgba(255, 255, 255, 0.08);}.control-group select option {background: var(--bg-secondary);color: var(--text-primary);}.toggle-control {display: flex;align-items: center;gap: var(--space-3);}.toggle-control input[type="checkbox"] {display: none;}.toggle-label {position: relative;width: 60px;height: 30px;background: rgba(255, 255, 255, 0.1);border-radius: var(--radius-full);cursor: pointer;transition: var(--transition-base);border: 1px solid rgba(255, 255, 255, 0.2);}.toggle-switch {position: absolute;top: 2px;left: 2px;width: 24px;height: 24px;background: var(--text-primary);border-radius: 50%;transition: var(--transition-base);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}.toggle-control input[type="checkbox"]:checked+.toggle-label {background: var(--primary-gradient);border-color: var(--primary-color);}.toggle-control input[type="checkbox"]:checked+.toggle-label .toggle-switch {transform: translateX(30px);background: var(--text-primary);}.reset-btn {width: 100%;padding: var(--space-4);background: rgba(231, 76, 60, 0.1);border: 1px solid rgba(231, 76, 60, 0.3);border-radius: var(--radius-md);color: #e74c3c;font-size: var(--font-size-base);font-weight: 600;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: var(--space-2);transition: var(--transition-base);}.reset-btn:hover {background: rgba(231, 76, 60, 0.2);border-color: rgba(231, 76, 60, 0.5);transform: translateY(-2px);}@media (max-width: 1024px) {.control-panel-slide {width: 400px;}.led-display-container {padding: var(--space-4);}}@media (max-width: 768px) {.led-controller-section {padding: 100px 0 var(--space-16) 0;}.led-display {min-height: 200px;padding: var(--space-3);}.led-text {font-size: 40px;padding: var(--space-1) 0;}.led-display.fullscreen .led-text {font-size: min(8vw, 120px);padding: var(--space-3) 0;}.control-panel-slide {width: 380px;top: 70px;height: calc(100% - 70px);}.control-panel {padding: var(--space-5);}.control-group {padding: var(--space-4);}.control-toggle-btn {bottom: 30px;padding: var(--space-3) var(--space-5);font-size: var(--font-size-sm);}.fullscreen-btn {width: 48px;height: 48px;top: var(--space-3);right: var(--space-3);}.control-grid {gap: var(--space-4);}.led-display-container {padding: var(--space-4);margin: var(--space-6) 0;}}@media (max-width: 480px) {.led-controller-section {padding: 80px 0 var(--space-12) 0;}.led-display {min-height: 160px;padding: var(--space-2);}.led-text {font-size: 28px;padding: var(--space-1) 0;}.led-display.fullscreen .led-text {font-size: min(7vw, 80px);padding: var(--space-2) 0;}.control-panel-slide {width: 100vw;top: auto;bottom: 0;height: 60vh;max-height: 600px;border-left: none;border-radius: 20px 20px 0 0;border-top: 1px solid rgba(255, 255, 255, 0.2);transform: translateY(100%);box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);}.control-panel-overlay.active .control-panel-slide {transform: translateY(0);}.control-panel-slide {transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);will-change: transform;}.control-panel-header {padding: var(--space-3) var(--space-5);background: var(--bg-secondary);border-bottom: 1px solid rgba(255, 255, 255, 0.1);position: sticky;top: 0;z-index: 10;border-radius: 20px 20px 0 0;position: relative;}.control-panel-header::before {content: '';position: absolute;top: 8px;left: 50%;transform: translateX(-50%);width: 40px;height: 4px;background: rgba(255, 255, 255, 0.3);border-radius: 2px;}.control-panel {padding: var(--space-4);height: calc(60vh - 80px);max-height: calc(600px - 80px);overflow-y: auto;-webkit-overflow-scrolling: touch;}.control-group {padding: var(--space-3);margin-bottom: var(--space-3);}.fullscreen-btn {width: 44px;height: 44px;top: var(--space-2);right: var(--space-2);}.control-toggle-btn {padding: var(--space-2) var(--space-4);font-size: var(--font-size-xs);min-width: 100px;bottom: var(--space-4);}.control-icon {font-size: 14px;}.range-control input[type="range"] {height: 12px;padding: 8px 0;}.range-control input[type="range"]::-webkit-slider-thumb {width: 28px;height: 28px;margin-top: -10px;}.range-control input[type="range"]::-moz-range-thumb {width: 28px;height: 28px;border: 3px solid #ffffff;}.color-preset {width: 40px;height: 40px;margin: 2px;}.color-content {width: 36px;height: 36px;}.control-group input[type="text"] {padding: var(--space-4);font-size: 16px;border-radius: var(--radius-lg);}.control-group select {padding: var(--space-4);font-size: 16px;border-radius: var(--radius-lg);}.toggle-label {width: 64px;height: 34px;}.toggle-switch {width: 28px;height: 28px;top: 2px;left: 2px;}.toggle-control input[type="checkbox"]:checked+.toggle-label .toggle-switch {transform: translateX(30px);}.led-display-container {padding: var(--space-3);margin: var(--space-4) 0;}.quick-tips {padding: var(--space-4);margin-top: var(--space-4);}.app-comparison-section {padding: var(--space-6);margin-top: var(--space-6);}.comparison-grid {grid-template-columns: 1fr;gap: var(--space-4);}.web-features, .app-features {padding: var(--space-4);}.quick-tips li {font-size: var(--font-size-sm);line-height: 1.5;margin-bottom: var(--space-3);}.led-display.fullscreen {height: 100vh;height: 100dvh;}.led-display.fullscreen .led-text {font-size: min(12vw, 100px);padding: 0;display: flex;align-items: center;justify-content: center;min-height: 100vh;min-height: 100dvh;}.led-display.fullscreen .fullscreen-btn {width: 48px;height: 48px;top: 15px;right: 15px;padding: 8px;border-radius: var(--radius-lg);}#fullscreen-tip {bottom: 20px !important;left: 20px !important;right: 20px !important;transform: none !important;text-align: center;font-size: 13px;padding: 10px 16px;}}@media (max-width: 768px) and (orientation: landscape) {.led-display.fullscreen .led-text {font-size: min(8vh, 80px);padding: 0;}.led-display.fullscreen .fullscreen-btn {top: 10px;right: 10px;width: 44px;height: 44px;}#fullscreen-tip {bottom: 15px !important;font-size: 12px;padding: 8px 14px;}}@media (max-width: 360px) {.control-panel-slide {width: 100vw;height: 65vh;max-height: 500px;}.control-panel {padding: var(--space-3);height: calc(65vh - 70px);max-height: calc(500px - 70px);}.control-group {padding: var(--space-2);margin-bottom: var(--space-2);}.led-display {min-height: 140px;padding: var(--space-1);}.led-text {font-size: 24px;}.control-toggle-btn {padding: var(--space-1) var(--space-3);min-width: 90px;font-size: 12px;}.fullscreen-btn {width: 40px;height: 40px;}.control-panel-header {padding: var(--space-2) var(--space-4);}}.button-clicked {animation: buttonClick 0.2s ease-in-out;}@keyframes buttonClick {0%, 100% {transform: scale(1);}50% {transform: scale(0.95);}}.fade-in-up {animation: fadeInUp 0.8s ease-out forwards;opacity: 0;transform: translateY(50px);}.fade-in-scale {animation: fadeInScale 0.8s ease-out 0.4s forwards;opacity: 0;transform: translateY(50px) scale(0.95);}.fade-in-up-delay {animation: fadeInUp 0.8s ease-out 0.6s forwards;opacity: 0;transform: translateY(30px);}@keyframes fadeInUp {to {opacity: 1;transform: translateY(0);}}@keyframes fadeInScale {to {opacity: 1;transform: translateY(0) scale(1);}}.color-preset:active {transform: scale(0.95);}.range-control input[type="range"]::-webkit-slider-track {background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(102, 126, 234, 0.3) 50%, rgba(255, 255, 255, 0.1) 100%);}.app-comparison-section {background: rgba(255, 255, 255, 0.03);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: var(--radius-xl);padding: var(--space-8);margin-top: var(--space-8);position: relative;overflow: hidden;}.app-comparison-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);pointer-events: none;}.comparison-header {text-align: center;margin-bottom: var(--space-6);position: relative;z-index: 1;}.comparison-header h3 {font-size: var(--font-size-xl);font-weight: 700;color: var(--text-primary);margin-bottom: var(--space-2);background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.comparison-header p {color: var(--text-secondary);font-size: var(--font-size-base);max-width: 600px;margin: 0 auto;}.comparison-grid {display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-6);margin-bottom: var(--space-8);position: relative;z-index: 1;}.web-features, .app-features {background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: var(--radius-lg);padding: var(--space-6);transition: all 0.3s ease;}.web-features:hover, .app-features:hover {transform: translateY(-2px);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);}.app-features {border-color: rgba(102, 126, 234, 0.3);background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);}.web-features h4, .app-features h4 {font-size: var(--font-size-lg);font-weight: 600;color: var(--text-primary);margin-bottom: var(--space-4);text-align: center;}.app-features h4 {color: #667eea;}.feature-list {list-style: none;padding: 0;margin: 0;}.feature-list li {color: var(--text-secondary);font-size: var(--font-size-sm);line-height: 1.6;margin-bottom: var(--space-2);padding-left: var(--space-4);position: relative;}.feature-list li::before {content: '•';position: absolute;left: 0;color: rgba(255, 255, 255, 0.4);}.feature-list.premium li::before {content: '✓';color: #667eea;font-weight: bold;}.feature-list.premium li {color: var(--text-primary);}.app-download-section {text-align: center;position: relative;z-index: 1;}.app-download-section h4 {font-size: var(--font-size-lg);font-weight: 600;color: var(--text-primary);margin-bottom: var(--space-3);}.app-download-section p {color: var(--text-secondary);font-size: var(--font-size-base);margin-bottom: var(--space-6);max-width: 500px;margin-left: auto;margin-right: auto;}.app-info {margin-top: var(--space-4);display: flex;flex-direction: column;align-items: center;gap: var(--space-2);}.rating {display: flex;align-items: center;gap: var(--space-2);}.stars {color: #ffd700;font-size: var(--font-size-base);}.rating-text {color: var(--text-secondary);font-size: var(--font-size-sm);}.app-details {display: flex;align-items: center;gap: var(--space-2);color: var(--text-secondary);font-size: var(--font-size-sm);}