@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400&display=swap";.hand-cursor--unified{animation:unifiedPulse 2s ease-in-out infinite}.hand-cursor--unified.hand-cursor--pinching{animation:none}.cursor-arrows{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.cursor-arrow{width:16px;height:16px;opacity:.8;filter:drop-shadow(0 0 4px currentColor)}.cursor-arrows--horizontal{display:flex;align-items:center;justify-content:center;gap:40px;width:80px}.cursor-arrows--horizontal .cursor-arrow--left{animation:slideLeft 1.2s ease-in-out infinite}.cursor-arrows--horizontal .cursor-arrow--right{animation:slideRight 1.2s ease-in-out infinite}.cursor-arrows--vertical{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;height:80px}.cursor-arrows--vertical .cursor-arrow--up{animation:slideUp 1.2s ease-in-out infinite}.cursor-arrows--vertical .cursor-arrow--down{animation:slideDown 1.2s ease-in-out infinite}.cursor-arrows--combined{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;width:80px;height:80px;align-items:center;justify-items:center}.cursor-arrows--combined .cursor-arrow--up{grid-column:2;grid-row:1;animation:slideUp 1.2s ease-in-out infinite}.cursor-arrows--combined .cursor-arrow--down{grid-column:2;grid-row:3;animation:slideDown 1.2s ease-in-out infinite}.cursor-arrows--combined .cursor-arrow--left{grid-column:1;grid-row:2;animation:slideLeft 1.2s ease-in-out infinite}.cursor-arrows--combined .cursor-arrow--right{grid-column:3;grid-row:2;animation:slideRight 1.2s ease-in-out infinite}.cursor-arrows--single-up{position:absolute;top:-28px;left:50%;transform:translate(-50%)}.cursor-arrows--single-up .cursor-arrow--up{animation:slideUp 1.2s ease-in-out infinite}.cursor-arrows--single-down{position:absolute;bottom:-28px;left:50%;transform:translate(-50%)}.cursor-arrows--single-down .cursor-arrow--down{animation:slideDown 1.2s ease-in-out infinite}.cursor-arrows--pinch{display:flex;align-items:center;justify-content:center}.cursor-arrows--pinch .cursor-arrow--pinch{width:24px;height:24px;animation:pulsePinch 1s ease-in-out infinite}.cursor-arrows--fingers{display:flex;align-items:center;justify-content:center}.cursor-fingers-text{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.05em;opacity:.9;animation:pulseFingers 1.5s ease-in-out infinite}@keyframes slideLeft{0%,to{transform:translate(0);opacity:.8}50%{transform:translate(-4px);opacity:1}}@keyframes slideRight{0%,to{transform:translate(0);opacity:.8}50%{transform:translate(4px);opacity:1}}@keyframes slideUp{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(-4px);opacity:1}}@keyframes slideDown{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(4px);opacity:1}}@keyframes pulsePinch{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(.8);opacity:1}}@keyframes pulseFingers{0%,to{opacity:.7}50%{opacity:1}}@keyframes unifiedPulse{0%,to{box-shadow:0 0 20px #64dcff66}50%{box-shadow:0 0 30px #64dcff99}}.calibration-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1000}.calibration-card{background:#000000e6;border:1px solid var(--border-thin);border-radius:16px;padding:2.5rem;max-width:360px;pointer-events:auto;animation:cardFadeIn .4s ease-out}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.calibration-header{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem}.calibration-icon{width:40px;height:40px;color:var(--text-secondary)}.calibration-icon svg{width:100%;height:100%}.calibration-header h3{margin:0;font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-primary)}.calibration-guidance{margin-bottom:2rem}.guidance-intro{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);color:var(--text-secondary);margin:0 0 1rem;text-align:center}.guidance-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.guidance-list li{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);color:var(--text-secondary)}.guidance-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-thin);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:300;color:var(--text-tertiary);flex-shrink:0}.calibration-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding:1rem;background:#ffffff05;border:1px solid var(--border-subtle)}.face-indicator{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);color:var(--text-tertiary);transition:color .3s ease}.face-indicator.detected{color:var(--text-secondary)}.face-ring{width:8px;height:8px;border-radius:50%;background:var(--text-ghost);transition:all .3s ease}.face-indicator.detected .face-ring{background:#0f8c}.ipd-display{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:300;color:var(--text-ghost)}.calibration-actions{display:flex;gap:.75rem}.calibrate-button{flex:1;padding:1rem;border:1px solid var(--text-secondary);border-radius:9999px;background:transparent;color:var(--text-primary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;transition:all .2s ease}.calibrate-button:hover:not(:disabled){background:#ffffff0d}.calibrate-button:disabled{border-color:var(--border-thin);color:var(--text-tertiary);cursor:not-allowed}.skip-button{padding:1rem 1.5rem;border:1px solid var(--border-subtle);border-radius:9999px;background:transparent;color:var(--text-tertiary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;transition:all .2s ease}.skip-button:hover{border-color:var(--border-default);color:var(--text-secondary)}.calibration-note{margin:1.5rem 0 0;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-light);color:var(--text-ghost);text-align:center}.calibration-note kbd{display:inline-block;padding:2px 6px;background:#ffffff0d;border:1px solid var(--border-thin);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:300}.calibration-card.calibrating{text-align:center;padding:3rem 2.5rem}.calibrating-animation{position:relative;width:96px;height:96px;margin:0 auto 2rem}.calibration-progress-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.calibration-progress-track{fill:none;stroke:#ffffff14;stroke-width:3}.calibration-progress-bar{fill:none;stroke:var(--accent-cyan);stroke-width:3;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:276.46;transition:stroke-dashoffset .15s linear;filter:drop-shadow(0 0 6px rgba(0,240,255,.4))}.pulse-ring{position:absolute;inset:0;border:1px solid var(--text-tertiary);border-radius:50%;animation:pulse 1.5s ease-out infinite}.pulse-ring.delay-1{animation-delay:.5s}.pulse-ring.delay-2{animation-delay:1s}@keyframes pulse{0%{transform:scale(.8);opacity:1}to{transform:scale(1.8);opacity:0}}.calibrating-icon{position:absolute;inset:28px;display:flex;align-items:center;justify-content:center;color:var(--accent-cyan);animation:rotate 2s linear infinite}.calibrating-icon svg{width:100%;height:100%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.calibrating-text{margin:0 0 .5rem;font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-primary)}.calibrating-hint{margin:0;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);color:var(--text-tertiary)}.calibration-success{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 2rem;background:#ffffff0d;border:1px solid var(--text-secondary);color:var(--text-primary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;animation:successFadeInOut 2s ease-out forwards;pointer-events:auto}.calibration-success svg{width:16px;height:16px}@keyframes successFadeInOut{0%{opacity:0;transform:scale(.95)}15%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}.arrow-guide{position:fixed;bottom:140px;right:32px;background:#000c;border:1px solid var(--border-default);border-radius:16px;padding:16px 20px;z-index:9999;pointer-events:none;animation:guideSlideIn .4s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:200px}@keyframes guideSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.arrow-guide-header{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}.arrow-guide-step{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;color:var(--text-tertiary);letter-spacing:var(--tracking-wide)}.arrow-guide-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.arrow-guide-instructions{display:flex;flex-direction:column;gap:10px}.arrow-guide-item{display:flex;align-items:center;gap:12px}.arrow-guide-item.hand-left{color:var(--accent-data)}.arrow-guide-item.hand-right{color:var(--accent-warm)}.arrow-guide-text{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--text-secondary)}.arrow-icon{width:24px;height:24px;flex-shrink:0}.arrow-up{animation:bounceUp 1s ease-in-out infinite}.arrow-down{animation:bounceDown 1s ease-in-out infinite}.arrow-left{animation:bounceLeft 1s ease-in-out infinite}.arrow-right{animation:bounceRight 1s ease-in-out infinite}.arrow-horizontal{animation:pulseHorizontal 1.5s ease-in-out infinite}.arrow-vertical{animation:pulseVertical 1.5s ease-in-out infinite}.arrow-pinch{animation:pulsePinch 1.2s ease-in-out infinite}.arrow-fingers{animation:wiggleFingers 1s ease-in-out infinite}@keyframes bounceUp{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes bounceDown{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}@keyframes bounceLeft{0%,to{transform:translate(0)}50%{transform:translate(-6px)}}@keyframes bounceRight{0%,to{transform:translate(0)}50%{transform:translate(6px)}}@keyframes pulseHorizontal{0%,to{transform:scaleX(1);opacity:1}50%{transform:scaleX(1.15);opacity:.8}}@keyframes pulseVertical{0%,to{transform:scaleY(1);opacity:1}50%{transform:scaleY(1.15);opacity:.8}}@keyframes pulsePinch{0%,to{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.7}}@keyframes wiggleFingers{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@media(max-width:768px){.arrow-guide{bottom:160px;right:16px;left:16px;min-width:auto}}.hand-guide-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1001;animation:overlayFadeIn .3s ease-out}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.hand-guide-card{background:#000000f2;border:1px solid var(--border-thin);border-radius:16px;padding:1.5rem;max-width:320px;width:90%;animation:cardSlideIn .4s ease-out}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.hand-guide-header{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem}.hand-guide-icon{width:32px;height:32px;color:var(--text-secondary)}.hand-guide-icon svg{width:100%;height:100%}.hand-guide-header h3{margin:0;font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-primary)}.hand-guide-list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.5rem}.hand-guide-list li{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;background:#ffffff05;border:1px solid var(--border-subtle);border-radius:8px;transition:background .2s ease}.hand-guide-list li:hover{background:#ffffff0a}.gesture-emoji{font-size:1.125rem;width:28px;text-align:center;flex-shrink:0}.gesture-info{display:flex;flex-direction:column;gap:.125rem}.gesture-name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-normal);letter-spacing:var(--tracking-wide);color:var(--text-primary)}.gesture-desc{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-light);color:var(--text-tertiary)}.hand-guide-hint{margin:0;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-light);color:var(--text-ghost);text-align:center;animation:hintPulse 2s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.5}50%{opacity:1}}.periodic-filter-panel{position:absolute;top:var(--periodic-cell);left:calc(var(--periodic-cell) * 3);width:calc(var(--periodic-cell) * 8);height:calc(var(--periodic-cell) * 2);display:flex;align-items:center;justify-content:center;padding:4px;background:transparent;border:none;pointer-events:auto;z-index:5}.periodic-category-chips{width:100%;height:100%;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:flex-start;gap:5px 6px;overflow:hidden}.periodic-category-chip{flex:0 0 auto;padding:4px 10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:var(--text-secondary);font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .15s ease;white-space:nowrap}.periodic-category-chip:hover{background:#ffffff1a;border-color:#ffffff2e;color:var(--text-primary)}.periodic-category-chip.active{background:#00f0ff2e;border-color:#00f0ff99;color:var(--accent-cyan);box-shadow:0 0 12px #00f0ff2e}.periodic-cell.filter-dim{opacity:.18;filter:saturate(.4);pointer-events:none}.periodic-cell.filter-match{box-shadow:0 0 0 1px #00f0ff66}.periodic-table{display:flex;flex-direction:column;gap:0;padding:0;max-width:100%;margin:10px auto 0;overflow:visible;position:relative;z-index:60;-webkit-user-select:none;user-select:none}.periodic-row{display:flex;gap:0;justify-content:center}.periodic-row.lanthanide-actinide-row{margin-top:var(--space-2)}.periodic-cell{position:relative;width:var(--periodic-cell);height:var(--periodic-cell);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);border:1px solid #2a2a2a;margin:-.5px;padding:4px;background:transparent}.periodic-cell.empty{background:transparent;border:none;cursor:default;pointer-events:none;visibility:hidden}.periodic-cell:not(.empty):hover{z-index:10;border-color:var(--element-color, var(--border-emphasis));background:var(--element-color-bg, rgba(255, 255, 255, .03));transform:translateY(-1px);will-change:transform}.periodic-cell:not(.empty):hover .element-symbol{color:var(--element-color, var(--text-primary))}.periodic-cell:not(.empty):hover .element-number,.periodic-cell:not(.empty):hover .element-name{color:var(--text-secondary)}.periodic-cell.drag-hover{z-index:10;transition:none;will-change:transform;border-color:var(--element-color, var(--border-emphasis));background:var(--element-color-bg, rgba(255, 255, 255, .03));transform:translateY(-1px);box-shadow:0 0 12px 2px var(--element-color, rgba(255, 255, 255, .15)),inset 0 0 8px var(--element-color-bg, rgba(255, 255, 255, .04))}.periodic-cell.drag-hover .element-symbol{transition:none;color:var(--element-color, var(--text-primary))}.periodic-cell.drag-hover .element-number,.periodic-cell.drag-hover .element-name{transition:none;color:var(--text-secondary)}.periodic-cell.drag-hover .key-label{transition:none;color:#ffffff80}.periodic-cell.selected{z-index:20;border-color:var(--element-color, var(--text-primary));background:var(--element-color-bg, rgba(255, 255, 255, .05));transform:translateY(-2px);will-change:transform}.periodic-cell.selected .element-symbol{color:var(--element-color, var(--text-primary))}.periodic-cell.selected .element-number,.periodic-cell.selected .element-name{color:var(--text-secondary)}.periodic-cell.in-symphony{border-color:var(--element-color, var(--border-emphasis));background:var(--element-color-bg, rgba(255, 255, 255, .04));z-index:100;will-change:transform}.periodic-cell.in-symphony .element-symbol{color:var(--element-color, var(--text-primary))}.periodic-cell.in-symphony .element-number,.periodic-cell.in-symphony .element-name{color:var(--text-secondary)}.periodic-cell.in-symphony:hover{background:var(--element-color-bg, rgba(255, 255, 255, .06))}.symphony-badge{position:absolute;top:-6px;right:-6px;width:16px;height:16px;background:var(--element-color, var(--text-primary));color:var(--bg-pure);font-family:var(--font-mono);font-size:9px;font-weight:500;display:flex;align-items:center;justify-content:center;z-index:5;border-radius:50%}.element-number{position:absolute;top:4px;left:5px;font-family:var(--font-mono);font-size:clamp(9px,calc(var(--periodic-cell) * .14),16px);font-weight:500;color:#ffffff80;line-height:1}.element-symbol{font-family:var(--font-display);font-size:clamp(22px,calc(var(--periodic-cell) * .5),64px);font-weight:500;letter-spacing:var(--tracking-normal);color:var(--text-primary);margin-top:0;margin-bottom:0;line-height:1;transition:color .15s ease}.element-name{font-family:var(--font-mono);font-size:clamp(9px,calc(var(--periodic-cell) * .13),14px);font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:#ffffffb3;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1;padding:0 2px;margin-top:auto;position:absolute;bottom:3px;left:0;right:0}.key-label{position:absolute;top:5px;right:5px;font-family:var(--font-mono);font-size:8px;font-weight:600;color:#ffffff40;line-height:1;pointer-events:none;transition:color .15s ease}.periodic-cell:not(.empty):hover .key-label{color:#ffffff80}.periodic-cell.keyboard-focused{z-index:25;border-color:var(--element-color, var(--text-primary));background:var(--element-color-bg, rgba(255, 255, 255, .06));transform:translateY(-2px);box-shadow:0 0 8px var(--element-color, rgba(255, 255, 255, .2))}.periodic-cell.keyboard-focused .element-symbol{color:var(--element-color, var(--text-primary))}.periodic-cell.keyboard-focused .key-label{color:var(--element-color, rgba(255, 255, 255, .8))}.periodic-cell.keyboard-active{z-index:30;animation:keyboard-pulse .3s ease-out}@keyframes keyboard-pulse{0%{transform:scale(1.08);box-shadow:0 0 12px var(--element-color, rgba(255, 255, 255, .3))}to{transform:scale(1);box-shadow:none}}@media(max-width:1400px){.periodic-table{transform:scale(.8)}}@media(max-width:1200px){.periodic-table{transform:scale(.65)}}@media(max-width:1024px){.element-name{display:none}}@media(max-width:768px){.element-name{display:none}.symphony-badge{width:12px;height:12px;top:-4px;right:-4px;font-size:8px}}.kiosk-mode .periodic-table{touch-action:none}.kiosk-mode .periodic-cell:not(.empty):hover{z-index:auto;border-color:var(--border-default);background:transparent;transform:none}.kiosk-mode .periodic-cell:not(.empty):hover .element-symbol{color:inherit}.kiosk-mode .periodic-cell:not(.empty):hover .element-number,.kiosk-mode .periodic-cell:not(.empty):hover .element-name{color:inherit}.kiosk-mode .periodic-cell.in-symphony:hover{background:var(--element-color-bg, rgba(255, 255, 255, .03))}.kiosk-mode .periodic-cell:not(.empty):hover .key-label{color:inherit}.kiosk-mode .periodic-cell:not(.empty):active{z-index:10;border-color:var(--element-color, var(--border-emphasis));background:var(--element-color-bg, rgba(255, 255, 255, .03));transform:translateY(-1px)}.kiosk-mode .periodic-cell:not(.empty):active .element-symbol{color:var(--element-color, var(--text-primary))}.kiosk-mode .periodic-cell:not(.empty):active .element-number,.kiosk-mode .periodic-cell:not(.empty):active .element-name{color:var(--text-secondary)}.kiosk-mode .periodic-cell.drag-hover{z-index:10;transition:none;border-color:var(--element-color, var(--border-emphasis));background:var(--element-color-bg, rgba(255, 255, 255, .03));transform:translateY(-1px);box-shadow:0 0 12px 2px var(--element-color, rgba(255, 255, 255, .15)),inset 0 0 8px var(--element-color-bg, rgba(255, 255, 255, .04))}.kiosk-mode .periodic-cell.drag-hover .element-symbol{transition:none;color:var(--element-color, var(--text-primary))}.kiosk-mode .periodic-cell.drag-hover .element-number,.kiosk-mode .periodic-cell.drag-hover .element-name{transition:none;color:var(--text-secondary)}.element-detail-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.element-detail-modal{background:#050505f2;border:1px solid var(--border-thin);border-radius:16px;padding:2.5rem;max-width:540px;width:90%;max-height:80vh;overflow-y:auto;overflow-x:hidden;animation:slideUp .3s ease;font-family:var(--font-display)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.element-detail-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-thin)}.element-detail-symbol{font-family:var(--font-display);font-size:4rem;font-weight:var(--weight-light);letter-spacing:.05em;color:var(--text-primary);line-height:1}.element-detail-info{flex:1}.element-detail-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);margin-bottom:.25rem}.element-detail-number{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:300;color:var(--text-ghost)}.element-detail-close{background:transparent;border:1px solid var(--border-thin);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-tertiary);cursor:pointer;transition:all .2s ease}.element-detail-close:hover{border-color:var(--text-secondary);color:var(--text-secondary)}.spectral-description-row{display:flex;gap:1.5rem;margin-bottom:1.5rem;align-items:flex-start}.spectral-section{flex:1;min-width:0;margin-bottom:0}.element-detail-description{flex:1;font-family:var(--font-display);font-weight:var(--weight-light);color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7;padding:1rem;background:#ffffff05;border-left:1px solid var(--border-thin)}.element-detail-section{margin-bottom:2rem;max-width:100%;overflow:hidden}.element-detail-section-title{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-light);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary);margin-bottom:1rem}.spectral-colors-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;max-width:100%;overflow:hidden}.spectral-color-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:0;overflow:hidden}.spectral-color-chip{width:28px;height:28px;cursor:pointer;transition:transform .2s ease}.spectral-color-chip:hover{transform:scale(1.1)}.spectral-color-chip:active{transform:scale(.95)}.spectral-color-label,.spectral-color-freq{font-family:var(--font-mono);font-size:9px;font-weight:300;color:var(--text-ghost);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.about-section{flex:1;margin-left:1.5rem}.about-section .element-detail-description{margin:0;padding:.75rem 1rem}.emission-spectrum{position:relative;height:48px;width:100%;max-width:100%;background:linear-gradient(to right,#8a00ff26,#0000ff26 20%,#00ff0026 50%,#ffff0026 70%,#ff000026);overflow:hidden;margin-bottom:.5rem}.spectrum-background{position:absolute;inset:0;background:#00000080}.emission-line{position:absolute;top:0;bottom:0;width:2px;transform:translate(-50%)}.spectrum-labels{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:space-between;padding:0 .5rem;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:300;color:var(--text-ghost)}.emission-spectrum-legend{margin-top:6px;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:300;letter-spacing:.04em;color:var(--text-tertiary);text-align:center}.element-detail-section-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.estimated-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ffd7001a;border:1px solid rgba(255,215,0,.4);border-radius:999px;font-family:var(--font-mono);font-size:.6rem;font-weight:400;letter-spacing:.08em;color:var(--accent-warm);text-transform:uppercase;cursor:help}.spectral-lines-list{display:flex;flex-direction:column;gap:.5rem}.spectral-line-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#ffffff05;border:1px solid var(--border-subtle);transition:all .2s ease}.spectral-line-item:hover{background:#ffffff08;border-color:var(--border-thin)}.spectral-line-color{width:32px;height:32px;flex-shrink:0;border:none}.spectral-line-data{flex:1;display:flex;flex-direction:column;gap:.25rem}.spectral-line-main{display:flex;gap:1rem;align-items:baseline}.spectral-wavelength{font-family:var(--font-mono);font-size:var(--text-base);font-weight:300;color:var(--text-primary)}.spectral-frequency{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:300;color:var(--text-secondary)}.spectral-line-meta{display:flex;gap:1rem;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-ghost)}.spectral-intensity{color:var(--text-tertiary)}.spectral-transition{color:var(--text-ghost)}.element-detail-buttons{display:flex;gap:.5rem;margin-top:1.5rem}.element-detail-add-btn{flex:1;padding:1rem;background:transparent;border:1px solid var(--text-secondary);color:var(--text-primary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.element-detail-add-btn:hover:not(:disabled){background:#ffffff0d}.element-detail-add-btn:disabled{opacity:.4;cursor:default}.element-detail-add-btn.is-added{border-color:#ff6b6b;color:#ff6b6b}.element-detail-add-btn.is-added:hover{background:#ff6b6b1a;border-color:#ff8585;color:#ff8585}.element-detail-play-btn{flex:1;padding:1rem;background:transparent;border:1px solid var(--border-thin);color:var(--text-tertiary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.element-detail-play-btn:hover{border-color:var(--text-secondary);color:var(--text-secondary)}.play-icon{font-size:1rem}.element-detail-modal::-webkit-scrollbar{width:4px}.element-detail-modal::-webkit-scrollbar-track{background:transparent}.element-detail-modal::-webkit-scrollbar-thumb{background:var(--border-thin)}.element-detail-modal::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}@media(max-width:768px){.element-detail-modal{padding:1.5rem;max-width:95%}.element-detail-symbol{font-size:3rem}.element-detail-name{font-size:var(--text-base)}.spectral-line-color{width:24px;height:24px}.spectral-description-row{flex-direction:column}.about-section{margin-left:0;margin-top:1rem}}@media(max-width:480px){.element-detail-modal{padding:1rem;max-width:95vw;max-height:92vh;border-radius:10px}.element-detail-header{gap:1rem;margin-bottom:1.25rem;padding-bottom:1rem}.element-detail-symbol{font-size:2.5rem}.element-detail-name{font-size:var(--text-sm)}.element-detail-section{margin-bottom:1.25rem}.spectral-colors-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.spectral-color-chip{width:24px;height:24px}.element-detail-buttons{flex-direction:column;gap:.4rem}.element-detail-add-btn,.element-detail-play-btn{padding:.75rem;font-size:var(--text-xs)}}@media(max-height:500px)and (orientation:landscape){.element-detail-modal{max-height:96vh;padding:1rem 1.5rem}.element-detail-header{margin-bottom:.75rem;padding-bottom:.75rem}.element-detail-section{margin-bottom:.75rem}}.kiosk-mode .element-detail-close:hover{border-color:inherit;color:inherit}.kiosk-mode .spectral-color-chip:hover{transform:none}.kiosk-mode .spectral-line-item:hover{background:transparent;border-color:transparent}.kiosk-mode .element-detail-add-btn:hover:not(:disabled){background:transparent}.kiosk-mode .element-detail-add-btn.is-added:hover{background:transparent;border-color:var(--accent-data);color:#ff6b6b}.kiosk-mode .element-detail-play-btn:hover{border-color:inherit;color:inherit}.kiosk-mode .element-detail-close:active{border-color:var(--text-secondary);color:var(--text-secondary)}.kiosk-mode .spectral-color-chip:active{transform:scale(1.1)}.kiosk-mode .element-detail-add-btn:active:not(:disabled){background:#ffffff0d}.kiosk-mode .element-detail-add-btn.is-added:active{background:#ff6b6b1a;border-color:#ff8585;color:#ff8585}.kiosk-mode .element-detail-play-btn:active{border-color:var(--text-secondary);color:var(--text-secondary)}:root{--font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--text-2xs: .625rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--text-2xl: 2.5rem;--text-3xl: 4rem;--tracking-normal: .02em;--tracking-wide: .1em;--tracking-wider: .2em;--bg-pure: #000000;--bg-subtle: #050505;--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--text-tertiary: rgba(255, 255, 255, .65);--text-ghost: rgba(255, 255, 255, .35);--border-subtle: rgba(255, 255, 255, .06);--border-default: rgba(255, 255, 255, .12);--border-emphasis: rgba(255, 255, 255, .25);--border-thin: var(--border-default);--accent-data: #00F0FF;--accent-warm: #FFD700;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--edge-margin: var(--space-6);--edge-margin-lg: var(--space-12);--bg-color: #000000;--glass-bg: rgba(0, 0, 0, .4);--glass-border: var(--border-thin);--accent-cyan: #00F0FF;--accent-yellow: #FFD700;--text-main: var(--text-primary);--text-muted: var(--text-tertiary);--font-head: var(--font-display);--font-body: var(--font-display);--ease-out: cubic-bezier(.16, 1, .3, 1);--glass-blur: blur(12px);--ui-radius: 4px;--periodic-cell: clamp(64px, min(5.4vw, calc((100vh - 165px) / 9.5)), 130px)}*{margin:0;padding:0;box-sizing:border-box}:focus{outline:none}:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px;border-radius:var(--ui-radius)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{margin:0;overflow:hidden;background-color:var(--bg-color);font-family:var(--font-body);color:var(--text-main);-webkit-font-smoothing:antialiased;cursor:none}html{cursor:none}.app{width:100vw;height:100vh;overflow:hidden;position:relative;background:radial-gradient(ellipse 70% 60% at 28% 38%,rgba(28,22,70,.45) 0%,transparent 62%),radial-gradient(ellipse 80% 70% at 72% 62%,rgba(10,38,52,.4) 0%,transparent 65%),radial-gradient(ellipse at center,#0a0a18,#000)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:var(--space-2) var(--space-4);border-radius:var(--ui-radius);background:#ffffff08;border:1px solid var(--border-default);color:var(--text-secondary);pointer-events:auto;cursor:none;transition:all .2s ease}.btn:hover:not(:disabled){background:#ffffff14;border-color:var(--border-emphasis);color:var(--text-primary)}.btn:disabled{opacity:.2;cursor:not-allowed}.btn.active{background:#ffffff0a;border-color:var(--text-primary);color:var(--text-primary)}.btn-ghost{border-color:var(--border-subtle);color:var(--text-tertiary)}.btn-ghost:hover:not(:disabled){border-color:var(--border-default);color:var(--text-secondary)}.btn-outline{border-color:var(--text-secondary);color:var(--text-primary)}.btn-outline:hover:not(:disabled){background:#ffffff08}.btn-accent-cyan{border-color:var(--accent-data);color:var(--accent-data)}.btn-accent-cyan:hover:not(:disabled){background:#00f0ff14}.btn-accent-gold{border-color:var(--accent-warm);color:var(--accent-warm)}.btn-accent-gold:hover:not(:disabled){background:#ffd70014}.btn-accent-white{border-color:#fffc;color:#ffffffe6}.btn-accent-white:hover:not(:disabled){background:#ffffff14}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.btn-block{width:100%}.canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.wave-canvas{display:block;background:transparent;pointer-events:auto!important;cursor:inherit}.wave-canvas:active{cursor:inherit}.wave-canvas.hide-cursor,.wave-canvas.hide-cursor canvas{cursor:none!important}.wave-canvas canvas{pointer-events:auto!important;touch-action:none}.symphony-glow-container{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}.symphony-glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.25;animation:symphonyGlowPulse 5s ease-in-out infinite;mix-blend-mode:screen;will-change:transform,opacity,filter;contain:strict}@keyframes symphonyGlowPulse{0%{transform:scale(1) rotate(0);opacity:.2}33%{transform:scale(1.2) rotate(120deg);opacity:.3}66%{transform:scale(1.35) rotate(240deg);opacity:.35}to{transform:scale(1) rotate(360deg);opacity:.2}}.landing-screen{position:absolute;inset:0;background:radial-gradient(circle at center,#0a0a1f,#000);z-index:200;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s ease-out,transform .5s ease-out;overflow:hidden;cursor:none}.landing-screen.hidden{pointer-events:none;opacity:0;transform:scale(.98);transition:opacity .5s ease-out,transform .5s ease-out}.hud-frame-minimal{position:absolute;inset:var(--edge-margin-lg);pointer-events:none}.hud-data-tag{font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.2em;opacity:.6}.hud-top-row{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.hud-top-row>*{pointer-events:auto}.hud-tag--bottom-left{position:absolute;bottom:0;left:0}.hud-tag--bottom-right{position:absolute;bottom:0;right:0}.hud-icon{position:absolute;width:20px;height:20px;opacity:.6}.landing-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;margin-top:-5vh}.landing-title{font-family:var(--font-display);font-size:clamp(3rem,12vw,7rem);font-weight:200;letter-spacing:.5em;text-indent:.5em;margin:0 auto;color:var(--text-primary);text-transform:uppercase;text-align:center;animation:landingTitleFade 2s var(--ease-out) forwards}.landing-title span{display:block;font-family:var(--font-mono);font-weight:300;color:var(--accent-data);font-size:.22em;margin-top:1rem;letter-spacing:1.2em;text-indent:1.2em;opacity:.8}.landing-logo{width:clamp(320px,60vw,800px);height:auto;opacity:0;animation:landingTitleFade 2s var(--ease-out) forwards}.landing-subtitle{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:400;color:var(--text-tertiary);letter-spacing:.15em;text-transform:uppercase;max-width:600px;line-height:1.6;margin:-1rem 0 3rem;opacity:0;animation:fadeIn 1.5s var(--ease-out) 1s forwards}.landing-btn{background:#ffffff08;border:1px solid var(--border-emphasis);color:var(--text-primary);padding:1.5rem 4rem;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:400;letter-spacing:.2em;text-transform:uppercase;cursor:none;margin-top:2rem;transition:all .5s var(--ease-out);border-radius:var(--ui-radius);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;animation:fadeIn 1.5s var(--ease-out) 1.8s forwards}.landing-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translate(-100%);transition:transform .6s var(--ease-out)}.landing-btn:hover{border-color:var(--accent-data);background:#00f0ff0d}.landing-btn:hover:before{transform:translate(100%)}.landing-control-hints{position:absolute;bottom:40px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:32px;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-secondary);opacity:.5;animation:fadeIn 2s ease-out 1.5s both}.landing-control-hints .control-group{display:flex;flex-direction:row;align-items:center;gap:16px}.landing-control-hints .control-group span{white-space:nowrap}.landing-control-hints .control-group span:first-child{color:var(--text-tertiary)}.landing-control-hints .control-separator{width:1px;height:16px;background:var(--text-tertiary)}@keyframes landingTitleFade{0%{opacity:0;transform:translateY(30px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.cosmic-header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--edge-margin-lg);z-index:100;pointer-events:none}.cosmic-header>*{pointer-events:auto}.brand{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-light);letter-spacing:var(--tracking-wider);color:var(--text-tertiary);text-transform:uppercase}.brand.clickable{cursor:none;transition:color .2s ease}.brand.clickable:hover,.brand.clickable:hover span{color:var(--text-secondary)}.brand span{font-weight:var(--weight-light);color:var(--text-tertiary)}.sound-toggle-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text-secondary);padding:.4rem .8rem;border-radius:9999px;font-size:.75rem;cursor:none;transition:all .3s;display:flex;align-items:center;gap:.5rem}.sound-toggle-btn:hover{border-color:var(--accent-cyan);color:var(--text-main)}.sound-toggle-btn.active{background:#ffffff1a;border-color:#fffc;color:#ffffffe6}.sound-toggle-btn svg{width:18px;height:18px}.lang-switcher{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text-secondary);padding:.4rem .8rem;border-radius:9999px;font-family:var(--font-mono);font-size:.75rem;line-height:18px;letter-spacing:.05em;cursor:none;transition:all .3s;display:flex;align-items:center;gap:.4rem}.lang-switcher:hover{border-color:var(--accent-cyan);color:var(--text-main)}.lang-active{color:var(--accent-cyan);font-weight:600}.lang-divider{opacity:.3}.hud-frame-minimal .lang-switcher{pointer-events:auto}.audio-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:300;letter-spacing:var(--tracking-wide);text-transform:uppercase}.audio-dots{display:flex;gap:2px;align-items:center}.audio-dots .dot{width:3px;height:3px;border-radius:50%;background:var(--text-tertiary)}.info-box{position:fixed;top:80px;left:50%;transform:translate(-50%);width:90%;max-width:600px;background:transparent;border:none;padding:0;z-index:1;text-align:center}.info-box.step-7{max-width:380px}.info-box.step-7 .info-description{display:none}.info-box.step-8{max-width:700px}.info-box.step-8 .info-description{white-space:normal;text-align:center}.info-step-label{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:400;letter-spacing:.15em;color:var(--text-tertiary);text-transform:uppercase;margin-bottom:1rem}.info-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);margin-bottom:1rem;color:var(--text-primary);text-transform:uppercase}.info-description{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-light);line-height:1.5;color:var(--text-secondary)}.info-description strong{color:var(--text-primary);font-weight:var(--weight-medium)}.control-panel-wrapper{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:0 2rem 2rem;z-index:50;opacity:0;transform:translateY(20px);transition:all .6s var(--ease-out);pointer-events:none}.control-panel-wrapper.visible{opacity:1!important;transform:translateY(0)!important}.control-panel-wrapper.minimized{transform:translateY(calc(100% - 50px))!important}.control-panel{background:transparent;border:none;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;width:100%;max-width:600px;display:flex;flex-direction:column;justify-content:flex-end;gap:1.5rem;min-height:200px;position:relative;transition:all .4s var(--ease-out);pointer-events:none}.panel-toggle{position:absolute;top:-32px;right:0;background:transparent;border:1px solid var(--border-thin);border-bottom:none;border-radius:9999px;padding:.4rem .75rem;cursor:none;color:var(--text-ghost);font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-light);letter-spacing:var(--tracking-wide);text-transform:uppercase;transition:all .3s;display:flex;align-items:center;gap:.4rem}.panel-toggle:hover{color:var(--text-secondary);border-color:var(--text-tertiary)}.controls-area{display:flex;flex-direction:column;justify-content:flex-end;gap:1rem;min-height:160px}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;color:var(--text-secondary);letter-spacing:var(--tracking-wide);text-transform:uppercase}.control-slider{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--border-default);outline:none;cursor:none;margin:10px 0;pointer-events:auto}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--text-primary);border-radius:2px;cursor:none;box-shadow:0 0 15px #fff6;transition:all .2s ease}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 20px #fff9}.control-slider::-moz-range-thumb{width:14px;height:14px;background:var(--text-primary);border-radius:2px;cursor:none;border:none;box-shadow:0 0 15px #fff6;transition:all .2s ease}.control-slider.active::-webkit-slider-thumb{transform:scale(1.25);background:var(--accent-cyan);box-shadow:0 0 28px #00f0ffd9,0 0 12px #00f0ff99}.control-slider.active::-moz-range-thumb{transform:scale(1.25);background:var(--accent-cyan);box-shadow:0 0 28px #00f0ffd9,0 0 12px #00f0ff99}.control-slider.active{box-shadow:0 0 0 1px #00f0ff59,0 0 16px #00f0ff26}.wavelength-slider{background:linear-gradient(to right,#8b00ff,#00f 15%,#0f0 40%,#ff0,#ff7f00 70%,red)}.control-hint{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:300;color:var(--text-ghost)}.control-placeholder{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-light);color:var(--text-ghost);text-align:center;padding:1rem}.waveform-buttons{display:flex;gap:.25rem;width:100%}.waveform-btn{flex:1;background:#ffffff12;border:1px solid var(--border-emphasis);color:var(--text-secondary);padding:.6rem .5rem;border-radius:var(--ui-radius);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:.1em;text-transform:uppercase;text-align:center;cursor:none;transition:all .2s;pointer-events:auto}.waveform-btn:hover{border-color:var(--text-tertiary);color:var(--text-secondary)}.waveform-btn.active{background:#ffffff1f;border-color:var(--text-secondary);color:var(--text-primary)}.waveform-btn:active{transform:scale(.96);background:#00f0ff29;border-color:var(--accent-cyan)}.energy-level-buttons{display:flex;gap:.25rem;justify-content:stretch;width:100%}.energy-btn{flex:1;background:#ffffff12;border:1px solid var(--border-emphasis);color:var(--text-secondary);padding:.6rem .5rem;border-radius:var(--ui-radius);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:400;letter-spacing:.1em;cursor:none;transition:all .2s;text-align:center;pointer-events:auto}.energy-btn:hover{border-color:var(--text-tertiary);color:var(--text-secondary)}.energy-btn.active{background:#ffffff1f;border-color:var(--text-secondary);color:var(--text-primary)}.energy-btn:active{transform:scale(.96);background:#00f0ff2e;border-color:var(--accent-cyan);color:var(--text-primary)}.energy-action-buttons{display:flex;gap:.25rem;margin-top:.75rem}.bohr-scale-note{position:absolute;left:0;right:0;bottom:50px;margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono);font-size:var(--text-2xs);font-style:italic;color:var(--text-tertiary);letter-spacing:.04em;line-height:1.3;pointer-events:none}.excite-btn,.emit-light-btn{flex:1}.nav-area{display:flex;justify-content:center;align-items:center;padding-top:1.5rem;border-top:1px solid var(--border-subtle);position:relative;min-height:50px;pointer-events:auto}.nav-btn.prev{position:absolute;left:0}.nav-btn.next{position:absolute;right:0}.nav-btn{background:#ffffff1f;border:1px solid rgba(255,255,255,.4);color:var(--text-primary);padding:.6rem 1.25rem;border-radius:var(--ui-radius);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:.15em;text-transform:uppercase;cursor:none;transition:all .2s;min-width:150px;display:flex;justify-content:center;align-items:center;pointer-events:auto}.nav-btn:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary);background:#ffffff0f}.nav-btn:active:not(:disabled){transform:scale(.97);border-color:var(--accent-cyan);background:#00f0ff14}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.nav-btn.symphony-hero-btn{background:transparent;color:#fff;z-index:1;overflow:hidden}.nav-btn.symphony-hero-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);background-size:250% 100%;background-repeat:no-repeat;animation:heroShimmerSweep 4s linear infinite;pointer-events:none;border-radius:inherit}@keyframes heroShimmerSweep{0%{background-position:200% 0}40%{background-position:-50% 0}to{background-position:-50% 0}}.nav-btn.symphony-hero-btn:hover:not(:disabled){transform:translateY(-1px)}.nav-btn.symphony-stop-btn{border-color:#ff505080;color:#ff6b6b;background:#ff50500f;animation:stopBtnPulse 2s ease-in-out infinite}.nav-btn.symphony-stop-btn:hover:not(:disabled){border-color:#ff5050cc;background:#ff50501f;box-shadow:0 0 25px #ff505040}@keyframes stopBtnPulse{0%,to{box-shadow:0 0 10px #ff50501a}50%{box-shadow:0 0 20px #ff505040,0 0 40px #ff505014}}.symphony-active .nav-area{border-top:1px solid rgba(0,240,255,.3)}.symphony-active .step-dot.active{animation:dotGlowCycle 2s ease-in-out infinite}@keyframes dotGlowCycle{0%,to{box-shadow:0 0 6px #00f0ff99,0 0 12px #00f0ff4d}33%{box-shadow:0 0 6px #f0f9,0 0 12px #ff00ff4d}66%{box-shadow:0 0 6px #ffd70099,0 0 12px #ffd7004d}}.symphony-active .nav-btn.prev{opacity:.35}.symphony-active .nav-btn.prev:hover:not(:disabled){opacity:.6}.nav-btn.restart-btn{position:absolute;left:50%;transform:translate(-50%);min-width:auto;border-color:var(--text-tertiary);color:var(--text-secondary)}.nav-btn.restart-btn:hover:not(:disabled){border-color:var(--text-primary);color:var(--text-primary)}.step-progress-bar{display:flex;align-items:center;gap:0;position:absolute;left:50%;transform:translate(-50%)}.step-item{display:flex;align-items:center}.step-dot{width:6px;height:6px;border-radius:50%;background:#ffffff1a;border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0}.step-dot.completed{background:#ffffff40;border-color:#ffffff40}.step-dot.active{background:#fff6;border-color:#fff6;box-shadow:0 0 6px #ffffff26}.step-dot .check-icon{width:4px;height:4px;fill:#000}.step-line{width:16px;height:1px;background:#ffffff1a;transition:background .3s ease}.step-line.completed{background:#ffffff40}@media(max-width:768px){.info-box{top:100px;left:50%;transform:translate(-50%);width:95%;max-width:none;text-align:center}.control-panel-wrapper{padding:0 1rem 1rem}.control-panel{padding:1rem;max-width:none}.waveform-btn{padding:.5rem .25rem;font-size:var(--text-xs)}.edge-label--left-vertical,.edge-label--right-vertical{display:none}}.instrument-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;width:100%}.instrument-btn{background:#ffffff12;border:1px solid var(--border-emphasis);color:var(--text-secondary);padding:.6rem .5rem;border-radius:var(--ui-radius);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:.1em;cursor:none;transition:all .2s;text-align:center;text-transform:uppercase;pointer-events:auto}.instrument-btn:hover{background:#ffffff14;border-color:var(--text-secondary);color:var(--text-secondary)}.instrument-btn.active{background:#ffffff26;border-color:var(--text-primary);color:var(--text-primary)}.instrument-btn:active{transform:scale(.96);background:#00f0ff29;border-color:var(--accent-cyan)}.harmonics-display{margin-top:.75rem;padding:0 .25rem}.timbre-layout{display:flex!important;flex-direction:row!important;gap:1.5rem;align-items:flex-start;width:100%}.timbre-instruments{flex:1;display:flex;flex-direction:column;gap:.5rem}.timbre-harmonics{flex:1;display:flex;flex-direction:column;gap:.5rem;pointer-events:auto}.harmonics-bars{display:flex;gap:.3rem;align-items:flex-end;height:80px;margin-top:.5rem;padding:0}.harmonic-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.25rem;min-width:0;height:100%;pointer-events:auto}.harmonic-fill{width:100%;background:linear-gradient(to top,var(--accent-cyan),rgba(0,240,255,.1));border-radius:2px 2px 0 0;height:100%;transform-origin:bottom;transform:scaleY(var(--fill-fraction, 0));transition:transform .3s ease;min-height:2px}.harmonic-label{font-size:.65rem;color:var(--text-muted);letter-spacing:.05em}.elements-section{display:flex;flex-direction:column;gap:1rem;max-height:50vh;overflow-y:auto}.spectral-controls{display:flex;gap:.75rem;padding:.75rem;background:#0000004d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.spectral-controls .control-btn{flex:1;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:var(--text-secondary);padding:.75rem 1rem;border-radius:8px;font-size:.85rem;cursor:none;transition:all .3s;font-weight:500}.spectral-controls .control-btn:hover{border-color:var(--accent-cyan);color:var(--text-main);background:#00f0ff1a;transform:translateY(-1px)}.spectral-controls .control-btn.active{background:#00f0ff33;border-color:var(--accent-cyan);color:var(--accent-cyan)}.spectral-controls .inject-btn{background:linear-gradient(135deg,#ffd7001a,#ff8c001a);border-color:#ffc8004d;color:gold}.spectral-controls .inject-btn:hover{border-color:gold;background:linear-gradient(135deg,#ffd70033,#ff8c0033);box-shadow:0 0 20px #ffd70066;transform:translateY(-2px)}.elements-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.selected-counter{font-family:var(--font-head);font-size:.9rem;color:var(--accent-cyan);font-weight:500}.selection-hint{font-size:.7rem;color:var(--text-muted)}.elements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;padding:.5rem 0}.element-card{position:relative;background:#ffffff08;border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;cursor:none;transition:all .3s var(--ease-out);display:flex;flex-direction:column;gap:.5rem;align-items:center;min-height:140px}.element-card:hover{background:#ffffff0f;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 20px #0000004d}.element-card.selected{background:#ffffff14;border-width:3px;box-shadow:0 0 20px #fff3}.element-card.selected:hover{transform:translateY(-3px);box-shadow:0 6px 25px #ffffff40}.selection-badge{position:absolute;top:.5rem;right:.5rem;font-family:var(--font-head);font-size:.7rem;font-weight:600;color:#000;padding:.2rem .4rem;border-radius:6px;letter-spacing:.5px;box-shadow:0 2px 8px #0000004d}.atomic-number{position:absolute;top:.5rem;left:.5rem;font-size:.7rem;color:var(--text-muted);font-weight:500}.spectral-lines{display:flex;gap:3px;width:100%;height:28px;margin-top:auto;padding:4px;background:#0006;border-radius:6px}.spectral-line{flex:1;border-radius:3px;box-shadow:0 0 10px currentColor,0 0 20px currentColor,inset 0 0 10px #ffffff80;transition:all .3s var(--ease-out);filter:brightness(1.2);position:relative;overflow:hidden}.spectral-line:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 3s infinite}@keyframes shimmer{0%{left:-100%}50%{left:100%}to{left:100%}}.element-card:hover .spectral-line{box-shadow:0 0 15px currentColor,0 0 25px currentColor,0 0 35px currentColor,inset 0 0 15px #ffffffb3;transform:scaleY(1.2);filter:brightness(1.4)}.elements-section::-webkit-scrollbar{width:6px}.elements-section::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.elements-section::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.elements-section::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media(max-width:768px){.elements-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}.element-card{padding:.75rem;min-height:120px}.element-symbol{font-size:1.5rem}.element-name{font-size:.65rem}.spectral-lines{height:16px}.elements-header{flex-direction:column;align-items:flex-start;gap:.5rem}}.hand-tracking-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text-secondary);padding:.4rem .8rem;border-radius:9999px;font-size:.75rem;cursor:none;transition:all .3s;display:flex;align-items:center;gap:.5rem}.hand-tracking-btn:hover{border-color:var(--accent-cyan);color:var(--text-main)}.hand-tracking-btn.active{background:#00f0ff26;border-color:var(--accent-cyan);color:var(--accent-cyan)}.hand-tracking-btn.loading{opacity:.7;cursor:wait}.hand-tracking-btn svg{width:18px;height:18px}.header-controls{display:flex;align-items:center;gap:.75rem}@keyframes gestureFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}.hand-cursor{will-change:transform,opacity}.camera-permission-modal{position:fixed;inset:0;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:10002}.camera-permission-content{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:2rem;max-width:400px;text-align:center;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.camera-permission-content h2{font-family:var(--font-head);margin-bottom:1rem;color:var(--text-main)}.camera-permission-content p{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.6}.camera-permission-content .allow-btn{background:#00f0ff33;border:1px solid var(--accent-cyan);color:var(--accent-cyan);padding:.8rem 2rem;border-radius:8px;font-size:.9rem;cursor:none;transition:all .3s}.camera-permission-content .allow-btn:hover{background:#00f0ff4d;box-shadow:0 0 20px #00f0ff4d}.hand-status{position:fixed;bottom:20px;left:20px;background:#000000b3;border:1px solid var(--glass-border);border-radius:8px;padding:.5rem 1rem;font-size:.75rem;color:var(--text-secondary);z-index:100;display:flex;align-items:center;gap:.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hand-status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-cyan);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.periodic-table-container{position:absolute;top:95px;bottom:70px;left:50%;transform:translate(-50%);z-index:5;width:100%;max-width:1800px;display:flex;align-items:center;justify-content:center;overflow:visible;padding:0;pointer-events:none}.periodic-table-container>*{pointer-events:auto}@media(max-height:720px){.periodic-table-container{top:85px;bottom:60px}}@media(max-width:768px){.periodic-table-container{top:80px;bottom:60px}}.symphony-controls{display:flex;flex-direction:column;gap:1rem}.symphony-elements{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.symphony-element-card{position:relative;background:#ffffff05;border:1px solid rgba(var(--el-color-rgb, 255,255,255),.18);border-radius:2px;padding:.65rem .75rem .5rem;flex:1;min-width:96px;text-align:center;transition:border-color .2s ease,background .2s ease,transform .15s ease;cursor:none;pointer-events:auto;overflow:hidden;opacity:0;animation:cardEntrance .5s var(--ease-out) forwards;animation-delay:var(--card-delay, 0s)}.symphony-element-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--el-color-rgb, 0,240,255),.06) 0%,transparent 60%);opacity:0;transition:opacity .2s ease;pointer-events:none}.symphony-element-card:hover{background:rgba(var(--el-color-rgb, 0,240,255),.04);border-color:rgba(var(--el-color-rgb, 0,240,255),.45);transform:translateY(-1px)}.symphony-element-card:hover:before{opacity:1}.symphony-element-card.symphony-playing{opacity:1;animation:cardSpectrumPulse 2.4s ease-in-out infinite;border-color:rgba(var(--el-color-rgb, 0,240,255),.55);background:rgba(var(--el-color-rgb, 0,240,255),.05)}@keyframes cardEntrance{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes cardSpectrumPulse{0%,to{border-color:rgba(var(--el-color-rgb, 0,240,255),.45);background:rgba(var(--el-color-rgb, 0,240,255),.04)}50%{border-color:rgba(var(--el-color-rgb, 0,240,255),.85);background:rgba(var(--el-color-rgb, 0,240,255),.1)}}.symphony-element-symbol{font-size:1.6rem;font-weight:500;font-family:var(--font-display);line-height:1.1;letter-spacing:.02em}.symphony-element-name{font-family:var(--font-mono);font-size:.65rem;color:#fff9;letter-spacing:.1em;text-transform:uppercase;margin-top:.15rem}.symphony-spectral-bar{display:flex;gap:2px;width:100%;height:3px;margin-top:.6rem;border-radius:2px;overflow:hidden}.symphony-spectral-line{flex:1;border-radius:1px;box-shadow:0 0 6px currentColor;transition:box-shadow .3s ease,transform .3s ease}.symphony-element-card:hover .symphony-spectral-line{box-shadow:0 0 10px currentColor,0 0 20px currentColor;transform:scaleY(1.5)}.symphony-element-card.symphony-playing .symphony-spectral-line{animation:spectralLinePulse 1.8s ease-in-out infinite}@keyframes spectralLinePulse{0%,to{box-shadow:0 0 4px currentColor}50%{box-shadow:0 0 12px currentColor,0 0 24px currentColor}}.symphony-element-order{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:var(--accent-cyan);color:#000;border-radius:50%;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center}.symphony-play-btn{margin-top:1rem;background:#00f0ff0d!important;border:1px solid var(--accent-cyan)!important;color:var(--accent-cyan)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.symphony-play-btn:hover{background:#00f0ff1a!important;transform:translateY(-1px);box-shadow:0 0 20px #00f0ff33}.frequency-map{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10}.frequency-point{position:absolute;width:20px;height:20px;border-radius:50%;transition:opacity .1s ease,transform .1s ease,box-shadow .1s ease;display:flex;align-items:center;justify-content:center}.frequency-label{font-size:10px;color:#fff;font-weight:700;font-family:var(--font-mono);text-shadow:0 0 4px rgba(0,0,0,.8);white-space:nowrap}.kiosk-mode .btn,.kiosk-mode .landing-screen,.kiosk-mode .landing-btn,.kiosk-mode .brand.clickable,.kiosk-mode .sound-toggle-btn,.kiosk-mode .panel-toggle,.kiosk-mode .control-slider,.kiosk-mode .control-slider::-webkit-slider-thumb,.kiosk-mode .control-slider::-moz-range-thumb,.kiosk-mode .waveform-btn,.kiosk-mode .energy-btn,.kiosk-mode .nav-btn,.kiosk-mode .instrument-btn,.kiosk-mode .spectral-controls .control-btn,.kiosk-mode .element-card,.kiosk-mode .hand-tracking-btn,.kiosk-mode .camera-permission-content .allow-btn,.kiosk-mode .symphony-element-card{cursor:default}.kiosk-mode .btn:hover:not(:disabled){background:#ffffff08;border-color:var(--border-default);color:var(--text-secondary)}.kiosk-mode .btn-ghost:hover:not(:disabled){border-color:var(--border-subtle);color:var(--text-tertiary)}.kiosk-mode .btn-outline:hover:not(:disabled){background:transparent}.kiosk-mode .btn-accent-cyan:hover:not(:disabled){background:transparent}.kiosk-mode .btn-accent-gold:hover:not(:disabled){background:transparent}.kiosk-mode .btn-accent-white:hover:not(:disabled){background:transparent}.kiosk-mode .landing-btn:hover{border-color:var(--accent-data);background:transparent}.kiosk-mode .landing-btn:hover:before{transform:translate(-100%)}.kiosk-mode .brand.clickable:hover,.kiosk-mode .brand.clickable:hover span{color:inherit}.kiosk-mode .sound-toggle-btn:hover{border-color:var(--border-default);color:var(--text-secondary)}.kiosk-mode .control-slider::-webkit-slider-thumb:hover{transform:none;box-shadow:none}.kiosk-mode .waveform-btn:hover,.kiosk-mode .energy-btn:hover{border-color:var(--border-default);color:var(--text-tertiary)}.kiosk-mode .nav-btn:hover:not(:disabled){border-color:var(--border-default);color:var(--text-secondary)}.kiosk-mode .nav-btn.symphony-hero-btn:hover:not(:disabled){transform:none}.kiosk-mode .nav-btn.symphony-stop-btn:hover:not(:disabled){border-color:#ff505080;background:#ff50500d;box-shadow:none}.kiosk-mode .instrument-btn:hover{background:transparent;border-color:var(--border-default);color:var(--text-tertiary)}.kiosk-mode .spectral-controls .control-btn:hover{border-color:var(--border-default);color:var(--text-secondary);background:transparent;transform:none}.kiosk-mode .spectral-controls .inject-btn:hover{border-color:#ffd7004d;background:transparent;box-shadow:none;transform:none}.kiosk-mode .element-card:hover{background:#ffffff05;border-color:#ffffff26;transform:none;box-shadow:none}.kiosk-mode .element-card.selected:hover{transform:none;box-shadow:none}.kiosk-mode .element-card:hover .spectral-line{box-shadow:none;transform:none;filter:none}.kiosk-mode .symphony-element-card:hover{transform:none;border-color:rgba(var(--el-color-rgb, 0,240,255),.2);box-shadow:none}.kiosk-mode .symphony-element-card:hover .symphony-spectral-line{box-shadow:none;transform:none}.kiosk-mode .symphony-play-btn:hover{background:transparent!important;transform:none;box-shadow:none}.kiosk-mode .btn:active:not(:disabled){background:#ffffff14;border-color:var(--border-emphasis);color:var(--text-primary)}.kiosk-mode .btn-ghost:active:not(:disabled){border-color:var(--border-default);color:var(--text-secondary)}.kiosk-mode .btn-outline:active:not(:disabled){background:#ffffff08}.kiosk-mode .btn-accent-cyan:active:not(:disabled){background:#00f0ff14}.kiosk-mode .btn-accent-gold:active:not(:disabled){background:#ffd70014}.kiosk-mode .btn-accent-white:active:not(:disabled){background:#ffffff14}.kiosk-mode .landing-btn:active{border-color:var(--accent-data);background:#00f0ff0d}.kiosk-mode .brand.clickable:active{color:var(--text-secondary)}.kiosk-mode .sound-toggle-btn:active{border-color:var(--accent-cyan);color:var(--text-main)}.kiosk-mode .waveform-btn:active,.kiosk-mode .energy-btn:active{border-color:var(--text-tertiary);color:var(--text-secondary)}.kiosk-mode .nav-btn:active:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary)}.kiosk-mode .nav-btn.symphony-hero-btn:active:not(:disabled){transform:translateY(-1px)}.kiosk-mode .nav-btn.symphony-stop-btn:active:not(:disabled){border-color:#ff5050cc;background:#ff50501f;box-shadow:0 0 25px #ff505040}.kiosk-mode .instrument-btn:active{background:#ffffff14;border-color:var(--text-secondary);color:var(--text-secondary)}.kiosk-mode .spectral-controls .control-btn:active{border-color:var(--accent-cyan);color:var(--text-main);background:#00f0ff1a;transform:translateY(-1px)}.kiosk-mode .spectral-controls .inject-btn:active{border-color:gold;background:linear-gradient(135deg,#ffd70033,#ff8c0033);box-shadow:0 0 20px #ffd70066;transform:translateY(-2px)}.kiosk-mode .element-card:active{background:#ffffff0f;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 20px #0000004d}.kiosk-mode .symphony-element-card:active{transform:translateY(-4px) scale(1.04);border-color:rgba(var(--el-color-rgb, 0,240,255),.5);box-shadow:0 8px 32px rgba(var(--el-color-rgb, 0,240,255),.2),0 0 60px rgba(var(--el-color-rgb, 0,240,255),.1),inset 0 1px #ffffff1a}.kiosk-mode .symphony-play-btn:active{background:#00f0ff1a!important;transform:translateY(-1px);box-shadow:0 0 20px #00f0ff33}.audio-fallback-banner{position:fixed;bottom:var(--space-12);left:50%;transform:translate(-50%);z-index:190;pointer-events:none;padding:10px 18px;background:#ffd70014;border:1px solid rgba(255,215,0,.4);border-radius:var(--ui-radius);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-primary);animation:selection-toast-in .2s var(--ease-out)}.webgl-fallback{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-8);background:radial-gradient(ellipse at center,#0a0a14,#000);color:var(--text-primary);font-family:var(--font-display);pointer-events:auto}.webgl-fallback-title{font-size:var(--text-xl);font-weight:var(--weight-medium);letter-spacing:var(--tracking-normal);margin-bottom:var(--space-4);color:var(--accent-cyan)}.webgl-fallback-body{max-width:480px;font-size:var(--text-base);line-height:1.6;color:var(--text-secondary)}.symphony-hud{position:fixed;top:var(--space-6);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:6px 12px;background:#0006;border:1px solid var(--border-default);border-radius:2px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;z-index:60;pointer-events:none}.symphony-hud-status{display:inline-flex;align-items:center;gap:8px;color:var(--text-tertiary)}.symphony-hud-status.active{color:var(--accent-cyan)}.symphony-hud-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.symphony-hud-status.active .symphony-hud-dot{animation:symphony-hud-pulse 1.4s ease-in-out infinite}.symphony-hud-count{color:var(--text-tertiary);padding-left:12px;border-left:1px solid var(--border-default)}@keyframes symphony-hud-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}.selection-toast{position:fixed;bottom:calc(var(--space-12) + var(--space-12));left:50%;transform:translate(-50%);z-index:180;pointer-events:none;display:flex;align-items:center;justify-content:center;height:var(--periodic-cell);min-width:calc(var(--periodic-cell) * 4);padding:0 calc(var(--periodic-cell) * .3);background:#00f0ff14;border:1px solid rgba(0,240,255,.4);border-radius:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:clamp(11px,calc(var(--periodic-cell) * .18),15px);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-primary);white-space:nowrap;box-shadow:0 4px 24px #00f0ff2e;animation:selection-toast-in .2s var(--ease-out),selection-toast-out .24s ease 1.55s forwards}@keyframes selection-toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@keyframes selection-toast-out{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,8px)}}.idle-countdown{position:fixed;top:var(--space-6);left:50%;transform:translate(-50%);z-index:200;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 18px;background:#0000008c;border:1px solid var(--border-emphasis);border-radius:var(--ui-radius);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-mono);letter-spacing:var(--tracking-wide);text-transform:uppercase;animation:idle-fade-in .22s var(--ease-out)}.idle-countdown-time{font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--weight-medium)}.idle-countdown-hint{font-size:var(--text-2xs);color:var(--text-tertiary)}.idle-countdown-urgent{border-color:#ff505099;animation:idle-fade-in .22s var(--ease-out),idle-pulse .8s ease-in-out infinite alternate}.idle-countdown-urgent .idle-countdown-time{color:#ff6b6b}@keyframes idle-fade-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes idle-pulse{0%{box-shadow:0 0 #ff505000}to{box-shadow:0 0 24px #ff505073}}