*{margin:0;padding:0;box-sizing:border-box}.App{min-height:100vh;min-height:100dvh;width:100vw;overflow:auto;display:flex;flex-direction:column}@media (max-width: 768px){.App{min-height:100dvh;overflow:auto;-webkit-overflow-scrolling:touch}}code{font-family:Monaco,Fira Code,Consolas,monospace;font-size:.875em;background:var(--surface-variant);padding:.125em .25em;border-radius:var(--radius-sm)}.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}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap{gap:var(--spacing)}.gap-lg{gap:var(--spacing-lg)}.text-center{text-align:center}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-mono{font-family:Monaco,Fira Code,Consolas,monospace}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.surface{background:var(--surface)}.surface-dim{background:var(--surface-dim)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.text-info{color:var(--info)}.bg-success{background:var(--success)}.bg-warning{background:var(--warning)}.bg-error{background:var(--error)}.bg-info{background:var(--info)}@media (min-width: 769px){::-webkit-scrollbar{display:none}*{-ms-overflow-style:none;scrollbar-width:none}}@media (max-width: 768px){::-webkit-scrollbar{display:block;width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}}.error-boundary{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background-color:var(--color-background)}.error-content{max-width:600px;width:100%;text-align:center;padding:3rem;background-color:var(--color-surface);border-radius:12px;box-shadow:0 4px 6px #0000001a}.error-content h1{font-size:2rem;margin-bottom:1rem;color:var(--color-text)}.error-message{font-size:1.1rem;color:var(--color-text-secondary);margin-bottom:2rem;line-height:1.6}.error-details{margin:2rem 0;text-align:left;background-color:var(--color-background);padding:1rem;border-radius:8px;border:1px solid var(--color-border)}.error-details summary{cursor:pointer;font-weight:600;color:var(--color-text);margin-bottom:.5rem}.error-details pre{margin-top:1rem;padding:1rem;background-color:#ff00000d;border-radius:4px;overflow-x:auto;font-size:.875rem;color:var(--color-error);white-space:pre-wrap;word-break:break-word}.error-actions{margin:2rem 0}.reset-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;color:#fff;background-color:var(--color-primary);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.reset-button:hover{background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.reset-button:active{transform:translateY(0)}.error-footer{font-size:.875rem;color:var(--color-text-secondary);margin-top:2rem}[data-theme=dark] .error-content{background-color:var(--color-surface);box-shadow:0 4px 6px #0000004d}[data-theme=dark] .error-details{background-color:#ffffff0d;border-color:var(--color-border)}[data-theme=dark] .error-details pre{background-color:#ff00001a}.ecc-playground{display:flex;flex-direction:column;gap:var(--spacing);background:var(--surface);flex:1}.playground-header{display:flex;justify-content:between;align-items:center;margin-bottom:16px}.playground-header h3{margin:0;color:var(--text);font-size:1.25rem;font-weight:600}.practice-indicator{display:flex;align-items:center;gap:12px}.practice-badge{background:var(--primary);color:var(--text-inverse);padding:var(--spacing-xs) var(--spacing);border-radius:var(--radius-lg);font-size:.75rem;font-weight:600}.progress-display{font-size:.9rem;color:var(--text-secondary);font-weight:500}.mode-indicator{display:flex;align-items:center;gap:12px}.mode-badge{background:var(--accent);color:var(--text-inverse);padding:var(--spacing-xs) var(--spacing);border-radius:var(--radius-lg);font-size:.75rem;font-weight:600}.error-message{background:#fee;color:#c33;padding:12px;border-radius:6px;border:1px solid #fcc;margin-bottom:16px}.playground-content{display:flex;flex-direction:column;gap:var(--spacing);flex:1}.current-point-section{background:var(--background);padding:16px;border-radius:8px;border:1px solid var(--border)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-header h4{margin:0;color:var(--text-primary);font-size:1.1rem}.point-controls{display:flex;gap:8px}.toggle-button,.save-button,.reset-button{padding:6px 12px;border:1px solid var(--border);background:var(--card-background);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s ease}.toggle-button:hover,.save-button:hover,.reset-button:hover{background:var(--surface-variant)}.save-button{background:var(--primary);color:#fff;border-color:var(--primary)}.reset-button{background:#ff6b6b;color:#fff;border-color:#ff6b6b}.point-display{margin-top:12px}.infinity-point{font-size:1.1rem;color:var(--text-secondary);text-align:center;padding:20px;background:var(--surface-variant);border-radius:6px}.point-coordinates{display:flex;flex-direction:column;gap:8px}.coordinate{display:flex;align-items:center;gap:8px}.coordinate label{font-weight:600;min-width:20px;color:var(--text-primary)}.hex-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;background:var(--surface-variant);padding:4px 8px;border-radius:4px;word-break:break-all;color:var(--text-secondary)}.point-summary{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;color:var(--text-secondary);padding:8px;background:var(--surface-variant);border-radius:4px}.generator-reached{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:16px;border-radius:8px;text-align:center;margin-top:12px;font-weight:600;display:flex;flex-direction:column;gap:12px}.submit-solution{background:#fff;color:#4caf50;border:none;padding:10px 20px;border-radius:6px;font-weight:600;cursor:pointer;transition:transform .2s ease;align-self:center}.submit-solution:hover{transform:translateY(-1px)}.operations-section{background:var(--background);padding:16px;border-radius:8px;border:1px solid var(--border)}.operation-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--surface-variant);padding:4px;border-radius:8px}.operation-tabs .tab{flex:1;padding:8px 12px;border:none;background:transparent;color:var(--text-secondary);border-radius:6px;cursor:pointer;transition:all .2s ease;font-weight:500}.operation-tabs .tab.active{background:var(--primary);color:#fff}.operation-tabs .tab:hover:not(.active){background:var(--card-background)}.scalar-operation,.point-operation{margin-top:16px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-weight:600;color:var(--text-primary)}.scalar-input,.point-select{padding:8px 12px;border:1px solid var(--border);border-radius:4px;background:var(--card-background);color:var(--text-primary);font-family:Monaco,Menlo,Ubuntu Mono,monospace}.scalar-input:focus,.point-select:focus{outline:none;border-color:var(--primary)}.operation-button{padding:10px 16px;background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s ease;align-self:flex-start}.operation-button:hover{background:var(--accent-color-dark)}.operation-help small{color:var(--text-secondary);font-size:.8rem}.saved-points-section{background:var(--background);padding:16px;border-radius:8px;border:1px solid var(--border)}.saved-points-list{display:flex;flex-direction:column;gap:8px}.saved-point-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--card-background);border-radius:6px;border:1px solid var(--border)}.point-label{color:var(--text-primary);font-weight:500}.point-actions{display:flex;gap:4px}.load-button,.delete-button{padding:4px 8px;border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s ease}.load-button{background:var(--primary);color:#fff;border-color:var(--primary)}.delete-button{background:#ff6b6b;color:#fff;border-color:#ff6b6b}.load-button:hover{background:var(--accent-color-dark)}.delete-button:hover{background:#ff5252}.operations-history{background:var(--background);padding:16px;border-radius:8px;border:1px solid var(--border)}.operations-list{display:flex;flex-direction:column;gap:6px}.operation-item{padding:6px 10px;background:var(--surface-variant);border-radius:4px;color:var(--text-secondary);font-size:.9rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.more-operations{color:var(--text-secondary);font-style:italic;text-align:center;margin-top:8px;font-size:.85rem}.graph-calculator-integrated{display:grid;grid-template-columns:1fr 400px;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-lg);width:100%;box-sizing:border-box;flex:1;min-height:600px;max-height:80vh;overflow:hidden}.graph-section.graph-display{background:var(--surface-dim);padding:var(--spacing);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:flex-start}.graph-content{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}.formula{color:var(--text-secondary);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem}.legend-grid{display:flex;gap:16px;align-items:center}.legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-secondary)}.legend-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--card-background)}.ecc-graph{display:block;height:100%;width:100%;background:var(--surface);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:inset 0 1px 3px #0000001a;flex:1}[data-theme=dark] .ecc-graph{background:var(--surface)}.graph-axes{position:absolute;top:0;left:0;right:0;bottom:0}.graph-border{position:absolute;top:20px;left:20px;right:20px;bottom:20px;border:2px solid #d1d5db;border-radius:4px;opacity:.7;z-index:1}[data-theme=dark] .graph-border{border-color:#6b7280}.generator-line{position:absolute;top:20px;bottom:20px;width:2px;background:repeating-linear-gradient(to bottom,#3b82f6 0,#3b82f6 5px,transparent 5px,transparent 10px);opacity:.6;z-index:1}.axis-label{position:absolute;color:var(--text-secondary);font-size:.8rem;font-weight:500}.x-label{bottom:10px;right:10px}.y-label{top:10px;left:10px}.curve-line{display:none}.ecc-point{position:absolute;transform:translate(-50%,-50%);z-index:10}.point-dot{width:16px;height:16px;background:var(--point-color, var(--primary));border:2px solid var(--card-background);border-radius:50%;display:block;box-shadow:0 2px 4px #0000001a}.ecc-point.overlapping .point-dot{width:16px;height:16px}.ecc-point.overlapping .point-label{min-width:80px;white-space:nowrap;overflow:visible;text-overflow:clip;font-weight:600;padding:2px 6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.ecc-point.current .point-label{border-radius:var(--radius-lg);padding:2px 6px}.point-label{position:absolute;top:-25px;left:50%;transform:translate(-50%);background:var(--card-background);color:var(--text-primary);padding:2px 6px;border-radius:4px;font-size:.7rem;font-weight:500;white-space:nowrap;box-shadow:0 1px 3px #0000001a}.range-indicator{position:absolute;color:var(--text-secondary);font-size:.7rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.calculator-section{display:flex;flex-direction:column;background:var(--surface)}.operations-header{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.operations-header h4{margin:0;color:var(--text-primary);font-size:1.1rem}.last-operation{font-size:.85rem;color:var(--text-secondary);font-family:Monaco,Menlo,Ubuntu Mono,monospace;background:var(--surface-variant);padding:4px 8px;border-radius:4px}.quick-buttons{display:flex;gap:8px;flex-wrap:wrap}.quick-buttons-vertical{display:flex;flex-direction:column;gap:8px}.quick-button{padding:10px 16px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s ease;min-width:60px}.quick-button.add{background:#10b981;color:#fff;border-color:#10b981}.quick-button.add:hover{background:#059669}.quick-button.subtract{background:#f59e0b;color:#fff;border-color:#f59e0b}.quick-button.subtract:hover{background:#d97706}.quick-button.multiply{background:#3b82f6;color:#fff;border-color:#3b82f6}.quick-button.multiply:hover{background:#2563eb}.quick-button.divide{background:#8b5cf6;color:#fff;border-color:#8b5cf6}.quick-button.divide:hover{background:#7c3aed}.quick-button.reset{background:#ef4444;color:#fff;border-color:#ef4444}.quick-button.reset:hover{background:#dc2626}.point-info-display{background:var(--background);padding:16px;border-radius:8px;border:1px solid var(--border);margin-bottom:20px;margin-top:0}.point-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.point-info-display h4{margin:0;color:var(--text-primary);font-size:1.1rem}.point-info-actions{display:flex;gap:8px}.point-info-compact{display:flex;flex-direction:column;gap:4px}.point-info-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;padding:8px 0;border-bottom:1px solid var(--border)}.point-info-item:last-child{border-bottom:none;margin-bottom:0}.info-label{font-weight:600;color:var(--text-primary);min-width:80px;font-size:.9rem}.info-value{color:var(--text-secondary);font-size:.9rem;word-break:break-all;flex:1}.info-value.hex-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;background:var(--surface-variant);padding:4px 8px;border-radius:4px;font-size:.8rem}.ecc-point{cursor:pointer;transition:transform .2s ease}.ecc-point.hovered{transform:translate(-50%,-50%) scale(1.2);z-index:100}.ecc-point.current{cursor:pointer}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.point-hover-info{position:absolute;top:-50px;left:50%;transform:translate(-50%);background:var(--card-background);border:1px solid var(--border);border-radius:6px;padding:8px 12px;box-shadow:0 4px 12px #00000026;white-space:nowrap;z-index:200}.point-hover-info div:first-child{font-size:.8rem;color:var(--primary);font-weight:600;margin-bottom:2px}.hover-address{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.7rem;color:var(--text-secondary);max-width:200px;overflow:hidden;text-overflow:ellipsis}@media (max-width: 768px){.ecc-playground{gap:var(--spacing-sm);width:100%;max-width:100%;box-sizing:border-box;overflow:visible;height:auto}.playground-header{flex-direction:column;align-items:stretch;gap:8px}.playground-header h3{font-size:1.2rem;text-align:center}.practice-indicator,.mode-indicator{justify-content:center;flex-wrap:wrap}.point-controls{flex-wrap:wrap;justify-content:center;gap:6px}.toggle-button,.save-button,.reset-button{padding:6px 10px;font-size:.8rem;flex:1;min-width:80px}.operation-tabs{flex-direction:column;gap:2px}.operation-tabs .tab{font-size:.8rem;padding:8px 12px;text-align:center}.ecc-graph{margin:0 auto;display:block}.legend-grid{justify-content:center;gap:6px;flex-wrap:wrap}.legend-item{font-size:.7rem}.graph-calculator-integrated{display:flex;flex-direction:column;grid-template-columns:none;gap:0;max-width:100%;width:100%;margin:0;border-radius:var(--radius);box-sizing:border-box;height:auto;min-height:600px;overflow:visible}.graph-section.graph-display{border-right:none;border-bottom:1px solid var(--border);height:auto;min-height:250px;order:1;padding:var(--spacing-sm);display:flex;flex-direction:column;width:100%;overflow:visible}.calculator-section{order:2;padding:var(--spacing-sm);width:100%;max-width:100%;box-sizing:border-box;overflow:visible;height:auto;min-height:350px}.quick-buttons-vertical{display:grid;grid-template-columns:1fr 1fr;gap:6px}.operations-header{text-align:center;margin-bottom:8px}.operations-header h4{font-size:1rem}.last-operation{font-size:.75rem;padding:6px 8px}.quick-button{padding:10px 8px;font-size:.8rem;text-align:center}.point-info-item{flex-direction:column;gap:4px;align-items:stretch;padding:6px 0}.info-label{min-width:auto;font-size:.8rem}.info-value{font-size:.8rem}.info-value.hex-value{font-size:.7rem;padding:4px 6px}.current-point-section,.operations-section,.saved-points-section,.operations-history,.point-info-display{padding:12px}.section-header h4,.point-info-display h4{font-size:1rem}}@media (max-width: 480px){.graph-calculator-integrated{border-radius:var(--radius-lg);width:calc(100% + 8px)}.ecc-playground{padding:0}.graph-section.graph-display,.calculator-section{padding:6px}}.calculator-point-display{background:var(--surface);padding:var(--spacing-sm) var(--spacing);border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--border);border-bottom:none;margin-bottom:0;position:relative;box-shadow:var(--shadow);flex:1}.calculator-point-display:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--primary);border-radius:var(--radius) var(--radius) 0 0}.point-display-header{display:flex;justify-content:space-between;gap:var(--spacing);margin-bottom:8px}.point-display-header h5{margin:0;color:var(--text);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;opacity:.8}.point-display-actions{display:flex;gap:8px;margin-right:8px}.point-display-content{display:flex;flex-direction:column;gap:6px}.point-coordinates-compact{display:flex;flex-direction:column;gap:var(--spacing-xs);font-family:Monaco,Fira Code,Consolas,monospace;font-size:.75rem;color:var(--text-dim);background:var(--surface-variant);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);user-select:text;cursor:text;-webkit-touch-callout:none;-webkit-user-select:text}.coordinate-row{display:flex;gap:var(--spacing-xs);align-items:center}.coordinate-label{font-weight:600;color:var(--text);min-width:12px;flex-shrink:0}.coordinate-value{overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex:1;min-width:0;user-select:text;cursor:text;-webkit-touch-callout:none;-webkit-user-select:text}.point-compressed-key{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.75rem;color:var(--text-dim);background:var(--surface-variant);padding:4px 8px;border-radius:4px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;user-select:text;cursor:text;-webkit-touch-callout:none;-webkit-user-select:text}.calculator-point-display .point-address{font-family:Monaco,Fira Code,Consolas,monospace;font-size:.875rem;color:var(--text);font-weight:500;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-user-select:text;user-select:text;cursor:text}.calculator-point-display .point-progress{font-size:.75rem;color:var(--primary);font-weight:600}.calculator-point-display .point-status{color:var(--text-dim);font-style:italic;font-size:.875rem}.point-details-button,.reset-point-button,.save-point-button{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius);cursor:pointer;font-size:.875rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.point-details-button:hover,.reset-point-button:hover,.save-point-button:hover{background:var(--surface-variant);transform:translateY(-1px)}.point-details-button{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}.reset-point-button{background:var(--warning);color:var(--text-inverse);border-color:var(--warning)}.reset-point-button:hover{background:var(--warning);opacity:.9}.save-point-button{background:var(--surface-variant);color:var(--text-dim);border-color:var(--border);font-size:1.125rem;font-weight:400}.save-point-button:hover{color:var(--warning);border-color:var(--warning)}.save-point-button.saved{color:var(--warning);border-color:var(--warning);background:#f59e0b1a}.save-point-button.saved:hover{color:var(--text-dim);border-color:var(--border);background:var(--surface-variant)}.reset-dropdown{position:relative;display:inline-block}.reset-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:180px;margin-top:2px}[data-theme=dark] .reset-dropdown-menu{background:#1e293b}.reset-dropdown-item{display:block;width:100%;padding:8px 12px;border:none;background:transparent;color:var(--text-primary);text-align:start;cursor:pointer;font-size:.85rem;transition:background .2s ease}.reset-dropdown-item:hover{background:var(--surface-variant)}.reset-dropdown-item:first-child{border-radius:4px 4px 0 0}.reset-dropdown-item:last-child{border-radius:0 0 4px 4px}.calculator-section{display:flex;flex-direction:column;background:var(--card-background)}.calculator-section.locked{opacity:.6;pointer-events:none;position:relative}.calculator-section.locked:after{content:"🔒 Calculator Locked - Goal Found!";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(var(--accent-color-rgb, 59, 130, 246),.95);color:#fff;padding:16px 24px;border-radius:8px;font-weight:600;font-size:1rem;text-align:center;z-index:100;pointer-events:auto;box-shadow:0 4px 12px #0000004d}.calculator-container{display:flex;flex-direction:column;gap:var(--spacing-sm);background:var(--surface);border-radius:0 0 var(--radius) var(--radius);padding:var(--spacing);width:100%}.calculator-status{background:var(--surface-variant);padding:var(--spacing-sm) var(--spacing);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:var(--spacing-sm);font-size:.875rem;color:var(--primary);font-weight:500;text-align:center}.calculator-display{width:100%;display:flex;align-items:center;gap:var(--spacing-sm)}.calculator-input{flex:1;padding:var(--spacing) var(--spacing-lg);border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:Monaco,Fira Code,Consolas,monospace;font-size:1rem;font-weight:600;transition:all .2s ease}.calculator-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.gohere-display{flex-shrink:0;width:48px;height:56px;border:2px solid var(--primary);background:var(--info);border-color:var(--info);color:var(--text-inverse);border-radius:var(--radius);font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;aspect-ratio:1}.gohere-display:disabled{opacity:.3;background:var(--surface-variant);border-color:var(--border);color:var(--text-dim)}.calculator-input::placeholder{color:var(--text-dim);opacity:.7}.calculator-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm)}.calculator-main-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-sm);flex:1;height:100%}.equals-span{grid-column:span 2;grid-row:span 2}.calc-button{border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-weight:500;font-size:.875rem;transition:all .2s ease;background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:0;box-shadow:var(--shadow);min-height:32px;min-width:32px;height:auto;width:auto}@media (min-width: 769px){.calc-button{min-height:48px;font-size:1rem;padding:8px}.calc-button.operator,.calc-button.equals{font-size:1rem}.calc-button.rand{font-size:.9rem;font-weight:700}}.calc-button:hover{background:var(--surface-variant);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.calc-button:active{transform:translateY(0)}.calc-button.number{background:var(--surface-bright);border-color:var(--border-light)}.calc-button.number:hover{background:var(--surface-variant)}.calc-button.hex{background:var(--info);border-color:var(--info);color:var(--text-inverse)}.calc-button.hex:hover{background:var(--info);opacity:.9}.calc-button.hex.special{background:var(--accent);border-color:var(--accent);color:var(--text-inverse);font-weight:700}.calc-button.hex.special:hover{background:var(--accent-dark);border-color:var(--accent-dark)}.calc-button.hex.special.active{background:var(--accent-dark);color:var(--text-inverse);border-color:var(--accent-dark);box-shadow:0 0 0 2px #d977064d}.calc-button.quick-op.add{background:var(--purple);color:var(--text-inverse);border-color:var(--purple)}.calc-button.quick-op.add:hover{opacity:.9}.calc-button.quick-op.subtract{background:var(--purple);color:var(--text-inverse);border-color:var(--purple)}.calc-button.quick-op.subtract:hover{opacity:.9}.calc-button.quick-op.multiply{background:var(--purple);color:var(--text-inverse);border-color:var(--purple)}.calc-button.quick-op.multiply:hover{opacity:.9}.calc-button.quick-op.divide{background:var(--purple);color:var(--text-inverse);border-color:var(--purple)}.calc-button.quick-op.divide:hover{opacity:.9}.calc-button.quick-op.negate{background:var(--purple);color:var(--text-inverse);border-color:var(--purple)}.calc-button.quick-op.negate:hover{opacity:.9}.calc-button.execute{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);font-weight:700}.calc-button.execute:hover{background:var(--primary-dark)}.calc-button.clear{background:var(--text-dim);color:var(--text-inverse);border-color:var(--text-dim)}.calc-button.clear:hover{opacity:.9}.calc-button.backspace{background:var(--text-dim);color:var(--text-inverse);border-color:var(--text-dim)}.calc-button.backspace:hover{opacity:.9}.calc-button.operator{background:var(--warning);color:var(--text-inverse);border-color:var(--warning);font-size:1rem;font-weight:700}.calc-button.operator:hover{opacity:.9}.calc-button.operator.highlighted{background:var(--error);box-shadow:0 0 0 3px #ef44444d;transform:translateY(-1px)}.calc-button.equals{background:var(--success);color:var(--text-inverse);border-color:var(--success);font-size:1.125rem;font-weight:700;flex-grow:1;margin-top:2px}.calc-button.equals:hover{opacity:.9}.calc-button.spacer{background:transparent;border:none;cursor:default;pointer-events:none}.calc-button.spacer:hover{background:transparent;transform:none}.calc-button.rand{background:var(--error);color:var(--text-inverse);border-color:var(--error);font-weight:600}.calc-button.rand:hover{background:#dc2626;opacity:.9}.operation-help{padding:var(--spacing)}.operation-help small{color:var(--text-dim);font-size:.8rem}@media (max-width: 768px){.calculator-container{padding:var(--spacing-sm);gap:var(--spacing-xs);width:100%;max-width:100%;overflow:visible;height:auto}.calculator-main-grid{gap:var(--spacing-xs);max-width:100%;width:100%;grid-template-columns:repeat(7,1fr)}.equals-span{grid-column:span 2;grid-row:span 2}.calc-button{font-size:.75rem;min-height:44px;padding:0;min-width:0;box-sizing:border-box}.calc-button.operator,.calc-button.equals,.calc-button.clear,.calc-button.backspace{font-size:.75rem}.calculator-input{padding:6px 8px;font-size:.8rem;width:100%;box-sizing:border-box}.gohere-display{height:38px;font-size:1rem}.calculator-status{padding:6px 8px;font-size:.75rem;margin-bottom:6px}.calculator-section{padding:0;overflow:visible;height:auto}.calculator-point-display{padding:6px 8px}.point-display-actions{gap:3px;margin-right:3px}.point-details-button,.reset-point-button{padding:3px 6px;font-size:.7rem}.point-coordinates-compact{display:none}}.point-private-key{background:var(--surface-variant);padding:4px 8px;border-radius:4px}.private-key-row{display:flex;align-items:center;gap:8px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.75rem;color:var(--text-dim)}.private-key-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:500;overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex:1;min-width:0;-webkit-user-select:text;user-select:text;cursor:text}.private-key-value.clickable{cursor:text;border-radius:3px;padding:1px 2px;margin:-1px -2px;transition:all .2s ease;-webkit-user-select:text;user-select:text}.private-key-value.clickable:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4vh 2vw}.modal-overlay.light-backdrop{background:#00000080}.modal{background:var(--surface);border-radius:var(--radius-lg);border:2px solid var(--primary);box-shadow:0 20px 40px #0000004d,0 0 0 1px #ffffff1a,inset 0 1px #fff3;max-width:500px;width:90vw;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;position:relative;display:flex;flex-direction:column;animation:modalAppear .3s cubic-bezier(.34,1.56,.64,1);margin:2vh auto}@keyframes modalAppear{0%{opacity:0;transform:scale(.8) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{padding:var(--spacing) var(--spacing-lg) var(--spacing-sm);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;position:relative;flex-shrink:0;background:linear-gradient(135deg,rgba(var(--accent-color-rgb, 59, 130, 246),.1),rgba(var(--accent-color-rgb, 59, 130, 246),.05))}.modal-header:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--success) 0%,var(--primary) 50%,var(--accent) 100%);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.modal-title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text)}.modal-subtitle{text-align:start;padding:12px 24px;margin-bottom:var(--spacing);background:linear-gradient(135deg,rgba(var(--accent-color-rgb, 59, 130, 246),.15),rgba(var(--accent-color-rgb, 59, 130, 246),.08));border-bottom:1px solid var(--border);font-size:1rem;color:var(--text-dim);line-height:1.5;font-weight:600;flex-shrink:0}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-dim);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s ease;flex-shrink:0}.modal-close:hover{background:var(--surface-variant);color:var(--text)}.modal-content{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-value-container{display:flex;align-items:stretch;width:100%}.copy-button{background:var(--surface);border:1px solid var(--border);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--spacing-sm);cursor:pointer;font-size:.75rem;color:var(--text-dim);transition:all .2s ease;flex-shrink:0;white-space:nowrap;min-width:60px}.copy-button:hover{background:var(--surface-variant);color:var(--text)}@media (max-width: 768px){.modal-overlay{padding:2vh 1vw}.modal{width:95vw;max-height:85vh;margin:auto;border-radius:var(--radius-lg);border-width:1px}.modal-header{padding:var(--spacing-sm)}.modal-title{font-size:1rem}.modal-subtitle{padding:10px var(--spacing);margin-bottom:var(--spacing);font-size:.9rem}.modal-close{width:28px;height:28px;font-size:1.25rem}.modal-content{padding:0}.copy-button{font-size:var(--mobile-font-size);min-height:var(--mobile-button-height);padding:0 var(--spacing);min-width:80px}}@supports (-webkit-touch-callout: none){@media (max-width: 768px){.modal-title{font-size:1.125rem}.modal-subtitle{font-size:1rem}.modal-close{width:32px;height:32px;font-size:1.5rem}.copy-button{font-size:1rem;min-height:48px}}}.save-point-modal{min-width:400px}.save-point-form{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing)}.form-field{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-field label{font-weight:500;color:var(--text);font-size:.875rem}.form-field input{padding:var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;background:var(--surface);color:var(--text);transition:all .2s ease}.form-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.modal-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-sm)}.cancel-button,.save-button{padding:var(--spacing-sm) var(--spacing);border-radius:var(--radius);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-button{background:var(--surface-variant);border:1px solid var(--border);color:var(--text)}.cancel-button:hover{background:var(--surface-dim);transform:translateY(-1px)}.save-button{background:var(--primary);border:1px solid var(--primary);color:var(--text-inverse)}.save-button:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-1px)}.save-button:disabled{background:var(--text-light);border-color:var(--text-light);cursor:not-allowed;opacity:.6}@media (max-width: 768px){.save-point-modal{min-width:auto;width:95vw;max-width:95vw}.form-field input{font-size:var(--mobile-font-size);min-height:var(--mobile-input-height);padding:0 var(--spacing)}.action-button,.save-button,.cancel-button{font-size:var(--mobile-font-size);min-height:var(--mobile-button-height);padding:0 var(--spacing)}}.graph-section{flex:1;min-width:300px;display:flex;flex-direction:column}.graph-display{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;height:100%;display:flex;flex-direction:column}.graph-content{margin-bottom:1rem;width:100%}.graph-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%}.graph-actions{display:flex;gap:var(--spacing-sm)}.graph-action-button{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius);cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s ease;min-height:32px;display:flex;align-items:center}.graph-action-button:hover{background:var(--surface-variant);transform:translateY(-1px)}.graph-action-button.give-up-button{background:transparent;border-color:var(--error);color:var(--error)}.graph-action-button.give-up-button:hover{background:var(--error);color:var(--text-inverse)}.graph-action-button.practice-button{background:var(--primary);border-color:var(--primary);color:var(--text-inverse)}.graph-action-button.practice-button:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.combined-control{position:relative;display:inline-block}.difficulty-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:1000;overflow:hidden}.difficulty-option{display:flex;align-items:center;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background:var(--surface);color:var(--text);border:none;text-align:start;cursor:pointer;font-size:.75rem;transition:all .2s ease;border-bottom:1px solid var(--border);min-height:32px}.difficulty-option:last-child{border-bottom:none}.difficulty-option:hover{background:var(--surface-variant)}.graph-action-button.disabled{opacity:.5}.formula{font-family:Courier New,monospace;font-size:1.1rem;font-weight:700;color:var(--text);background:var(--surface-dim);padding:.5rem;border-radius:4px;border:1px solid var(--border);display:inline-block}.goal-address{font-family:Courier New,monospace;font-size:.9rem;font-weight:600;color:var(--text);background:var(--surface-dim);padding:.5rem;border-radius:4px;border:1px solid var(--border);white-space:nowrap;overflow-x:auto;max-width:100%;display:block;-webkit-overflow-scrolling:touch}@media (max-width: 768px){.goal-address{font-size:.8rem;padding:.4rem}}.ecc-graph{position:relative;flex:1;background:var(--graph-bg);border:2px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:1rem;touch-action:pinch-zoom}.graph-border{position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid var(--border-color);pointer-events:none}.graph-axes{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.axis-label{position:absolute;font-weight:700;color:var(--text-dim);font-size:.9rem}.x-label{bottom:10px;right:15px}.y-label{top:10px;left:15px}.generator-line{position:absolute;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,#3b82f6 0px,#3b82f6 5px,transparent 5px,transparent 10px);opacity:.5;pointer-events:none}.curve-line{position:absolute;top:20%;left:10%;right:10%;bottom:20%;background:linear-gradient(45deg,transparent 40%,rgba(99,102,241,.1) 45%,rgba(99,102,241,.2) 50%,rgba(99,102,241,.1) 55%,transparent 60%);border-radius:50%;pointer-events:none}.ecc-point{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:10;transition:transform .2s ease,z-index .2s ease}.ecc-point:hover{transform:translate(-50%,-50%) scale(1.2);z-index:20}.point-dot{width:16px;height:16px;border-radius:50%;background:var(--point-color, #ef4444);border:2px solid var(--surface);box-shadow:0 2px 4px #0003;margin:0 auto 4px}.point-label{font-size:.75rem;font-weight:700;text-align:center;color:var(--text);background:var(--surface);padding:2px 4px;border-radius:3px;border:1px solid var(--border);white-space:nowrap;min-width:max-content;opacity:.95;z-index:100}.ecc-point.overlapping .point-dot{border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border),0 2px 4px #0003}.range-indicator{position:absolute;font-size:.7rem;color:var(--text-dim);font-weight:700}.bottom-left{bottom:5px;left:5px}.bottom-right{bottom:5px;right:5px}.top-left{top:5px;left:5px}.legend-grid{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:.5rem;background:var(--surface-dim);border-radius:6px;border:1px solid var(--border)}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text)}.legend-dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--border)}.fullscreen-button{position:absolute;bottom:8px;right:32px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s ease;z-index:10}.fullscreen-button:hover{background:var(--surface-variant);border-color:var(--primary)}.modal.fullscreen-graph-modal{max-width:min(90vh,90vw)!important;max-height:90vh;width:min(90vh,90vw)!important;height:auto}.fullscreen-graph-modal .modal-content{padding:var(--spacing);display:flex;justify-content:center;align-items:center}.ecc-graph-fullscreen{position:relative;background:var(--graph-bg);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;width:min(80vh,80vw);height:min(80vh,80vw);aspect-ratio:1;flex-shrink:0;touch-action:pinch-zoom}@media (max-width: 768px){.graph-content,.ecc-graph{margin-bottom:.5rem}.graph-display{padding:.5rem}.fullscreen-button{width:28px;height:28px;font-size:14px;bottom:6px;right:32px}.ecc-graph-fullscreen{width:min(70vh,85vw);height:min(70vh,85vw)}.modal.fullscreen-graph-modal{max-width:min(90vh,95vw)!important;width:min(90vh,95vw)!important;height:auto}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:10000;padding:4vh 2vw;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.modal-content{padding:0;overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain}.point-modal-content{padding:var(--spacing)}.modal-item{display:flex;flex-direction:column;padding:6px 0;gap:6px}.modal-label{font-weight:600;color:var(--text-dim);font-size:.875rem;text-align:start}.modal-value-input{color:var(--text);background:var(--surface-variant);border:1px solid var(--border);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding:var(--spacing-sm);font-family:Monaco,Fira Code,Consolas,monospace;font-size:.875rem;flex:1;outline:none;text-align:start;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-user-select:text;user-select:text}.modal-value-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.modal-value-display{color:var(--text);background:var(--surface-variant);border:1px solid var(--border);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding:var(--spacing-sm);font-family:Monaco,Fira Code,Consolas,monospace;font-size:.875rem;flex:1;text-align:start;overflow-x:auto;overflow-y:hidden;white-space:nowrap;display:block;line-height:1.4;user-select:text;cursor:text;transition:all .2s ease;-webkit-touch-callout:none;-webkit-user-select:text}.modal-value-display:hover{background:var(--surface-dim);border-color:var(--border)}.modal-value-display.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.modal-value-display.clickable:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);transform:translateY(-1px)}.modal-actions{border-top:1px solid var(--border);padding:16px 0 0;margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.action-button{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border:1px solid;min-height:36px;display:inline-flex;align-items:center;justify-content:center}.action-button.primary{background:var(--primary);border-color:var(--primary);color:var(--text-inverse)}.action-button.primary:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark)}.action-button.secondary{background:var(--surface);border-color:var(--border);color:var(--text)}.action-button.secondary:hover{background:var(--surface-variant)}.action-button.small{padding:6px 12px;font-size:12px;min-height:30px}.action-button:disabled{opacity:.5;cursor:not-allowed}.rename-section{display:flex;gap:8px;align-items:center;flex:1}.rename-section input{flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;background:var(--surface);color:var(--text)}.rename-section input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}@media (max-width: 768px){.modal-value-input,.modal-value-display{font-size:var(--mobile-font-size);padding:0 var(--spacing);min-height:var(--mobile-input-height);display:flex;align-items:center;justify-content:start}.action-button{font-size:var(--mobile-font-size);min-height:var(--mobile-button-height);padding:0 var(--spacing)}.action-button.small{font-size:var(--mobile-font-size-sm);min-height:36px}.rename-section input{font-size:var(--mobile-font-size);min-height:var(--mobile-input-height);padding:0 var(--spacing);display:flex;align-items:center}.modal-close{width:var(--mobile-touch-min);height:var(--mobile-touch-min);display:flex;align-items:center;justify-content:center}.modal{width:95vw;max-height:85vh;margin:auto}.modal-overlay{padding:2vh 1vw}.modal-header{padding:var(--spacing);border-bottom:1px solid var(--border)}}@supports (-webkit-touch-callout: none){@media (max-width: 768px){.modal-value-input,.modal-value-display{font-size:var(--mobile-font-size);min-height:44px;padding:0 var(--spacing);-webkit-text-size-adjust:100%}.modal-label{font-size:.875rem}.action-button{font-size:1rem;min-height:48px}}}.explorer-link-button{background:var(--primary);color:var(--text-inverse);padding:6px 12px;border-radius:var(--radius);font-size:.75rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;border:none}.explorer-link-button:hover{background:var(--primary-dark);transform:translateY(-1px);text-decoration:none;color:var(--text-inverse)}.explorer-link-button:active{background:var(--primary-dark);transform:translateY(0)}.metadata-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{background:#6366f11a;color:var(--primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-lg);font-size:.75rem;font-weight:500;border:1px solid rgb(99 102 241 / .2)}.victory-stats{padding:0 var(--spacing);display:flex;flex-direction:column;gap:20px}.stat-item{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing);background:var(--surface-variant);border-radius:var(--radius);border:1px solid var(--border);transition:all .2s ease}.stat-item:hover{background:#6366f10d;border-color:var(--primary)}.stat-label{font-size:.875rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:.875rem;font-weight:600;color:var(--text);word-wrap:break-word;-webkit-user-select:text;user-select:text;cursor:text}.stat-value.address-value{font-family:Monaco,Fira Code,Consolas,monospace;font-size:.875rem;font-weight:500;overflow-x:auto;overflow-y:hidden;white-space:nowrap;background:var(--surface);padding:var(--spacing-sm);border-radius:var(--radius);border:1px solid var(--border);cursor:text;user-select:text;text-align:start;flex-grow:1;-webkit-touch-callout:none;-webkit-user-select:text}.victory-modal .stat-value.clickable{cursor:text;-webkit-user-select:text;user-select:text;border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.victory-modal .stat-value.clickable:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);transform:translateY(-1px)}.victory-actions{padding:var(--spacing);border-top:1px solid var(--border);display:flex;justify-content:center;margin-top:var(--spacing)}.victory-share-button{background:var(--primary);color:var(--text-inverse);border:none;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:140px}.victory-share-button:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.victory-share-button:active{transform:translateY(0)}@media (max-width: 768px){.victory-stats{padding:16px;gap:16px}.stat-item{padding:12px}.stat-value.address-value{font-size:.8rem;padding:6px 8px}.victory-actions{padding:16px}.victory-share-button{min-width:unset;width:100%;font-size:var(--mobile-font-size);min-height:var(--mobile-button-height);padding:0 var(--spacing)}}.mobile-nav-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:30000;animation:overlayFadeIn .3s ease-out;overscroll-behavior:contain}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.mobile-nav-drawer{position:fixed;top:0;left:0;height:100vh;height:100dvh;width:280px;max-width:80vw;background:var(--surface);border-right:1px solid var(--border);box-shadow:4px 0 12px #00000026;z-index:30001;animation:drawerSlideIn .3s ease-out;display:flex;flex-direction:column;overflow:auto}@keyframes drawerSlideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.mobile-nav-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--surface-variant)}.mobile-nav-header h3{margin:0;font-size:1.125rem;font-weight:600;color:var(--text)}.mobile-nav-close{background:none;border:none;font-size:24px;color:var(--text-dim);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:all .2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.mobile-nav-close:hover{background:var(--surface);color:var(--text)}.mobile-nav-content{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 0}.mobile-nav-section{margin-bottom:24px}.mobile-nav-section:last-child{margin-bottom:0}.mobile-nav-section h4{margin:0 0 12px;padding:0 20px;font-size:.875rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.mobile-nav-link{display:block;padding:12px 20px;color:var(--text);text-decoration:none;font-size:1rem;font-weight:500;transition:all .2s ease;border:none;background:none;width:100%;text-align:left;cursor:pointer}.mobile-nav-link:hover{background:var(--surface-variant);color:var(--primary)}.mobile-nav-link.active{background:rgba(var(--primary-rgb, 99, 102, 241),.1);color:var(--primary);border-right:3px solid var(--primary)}.mobile-nav-button{font-family:inherit}@media (min-width: 769px){.mobile-nav-overlay,.mobile-nav-drawer{display:none}}.theme-toggle-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.theme-toggle-button:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);transform:translateY(-1px)}.theme-toggle-button:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #6366f11a}.theme-toggle-button:active{transform:translateY(1px)}.theme-icon{font-size:18px;transition:transform .3s ease}.theme-toggle-button:hover .theme-icon{transform:scale(1.1)}@media (max-width: 768px){.theme-toggle-button{width:36px;height:36px}.theme-icon{font-size:16px}}.game-footer{background:var(--surface);border-top:1px solid var(--border);padding:var(--spacing) var(--spacing-lg);margin-top:auto;z-index:100;box-shadow:0 -1px 3px #0000001a}.footer-content{margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing)}.footer-links{display:flex;align-items:center;gap:var(--spacing-sm)}.footer-link{color:var(--text-dim);text-decoration:none;font-size:.875rem;transition:color .2s ease}.footer-link:hover{color:var(--primary)}.footer-separator,.footer-copyright{color:var(--text-light);font-size:.875rem}@media (max-width: 768px){.game-footer{display:none}}.how-to-play-modal{max-width:800px}.how-to-play-content{flex:1;padding:0 var(--spacing) var(--spacing) var(--spacing)}.how-to-play-section{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border);position:relative}.how-to-play-section:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0}.how-to-play-section:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);border-radius:2px}.how-to-play-section:last-child:after{display:none}.how-to-play-section h3{margin:0 0 16px;color:var(--text);font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:8px}.how-to-play-section h4{margin:20px 0 12px;color:var(--text);font-size:1.1rem;font-weight:600}.how-to-play-section p{margin:0 0 16px;color:var(--text);line-height:1.6;font-size:.95rem}.how-to-play-section ul,.how-to-play-section ol{margin:0 0 16px;padding-left:24px;color:var(--text)}.how-to-play-section li{margin-bottom:10px;line-height:1.6;font-size:.95rem}.visual-example{background:var(--surface-variant);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:16px 0}.operation-examples{display:flex;flex-direction:column;gap:8px}.example-item{display:flex;align-items:center;gap:12px;padding:8px;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border)}.example-item code{background:var(--primary);color:var(--text-inverse);padding:4px 8px;border-radius:var(--radius-sm);font-family:Monaco,Fira Code,Consolas,monospace;font-size:.85rem;font-weight:600;min-width:60px;text-align:center}.example-item span{color:var(--text-dim);font-size:.9rem}.game-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.mode-item{background:var(--surface-variant);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:all .2s ease;position:relative}.mode-item.clickable{cursor:pointer}.mode-item.clickable:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.mode-item.clickable:hover h3,.mode-item.clickable:hover p,.mode-item.clickable:hover .mode-action{color:var(--text-inverse)}.mode-item h3{margin:0 0 8px;color:var(--primary);font-size:1.1rem;font-weight:600}.mode-item p{margin:0 0 12px;font-size:.9rem;color:var(--text-dim);line-height:1.4}.mode-action{display:inline-block;color:var(--primary);font-weight:600;font-size:.875rem;text-decoration:none;transition:color .2s ease}.tip-box{background:linear-gradient(135deg,rgba(var(--accent-color-rgb, 59, 130, 246),.1),rgba(var(--accent-color-rgb, 59, 130, 246),.05));border:1px solid var(--primary);border-radius:var(--radius);padding:16px;margin:16px 0;color:var(--text);font-size:.95rem;line-height:1.5}.how-to-play-footer{padding:24px;border-top:1px solid var(--border);display:flex;justify-content:center;flex-shrink:0}.how-to-play-got-it-button{background:var(--primary);color:var(--text-inverse);border:none;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:160px}.how-to-play-got-it-button:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.how-to-play-got-it-button:active{transform:translateY(0)}.calculator-guide,.graph-guide{margin-top:16px}.calc-operations,.calc-workflow,.calc-examples,.graph-elements,.graph-navigation{margin-bottom:24px}.calc-operations:last-child,.calc-workflow:last-child,.calc-examples:last-child,.graph-elements:last-child,.graph-navigation:last-child{margin-bottom:0}.strategy-steps{display:flex;flex-direction:column;gap:8px;margin-top:12px}.step{background:var(--surface-variant);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-family:Monaco,Fira Code,Consolas,monospace;font-size:.9rem;color:var(--text-dim)}.step code{background:transparent;color:var(--primary);padding:0;font-weight:600}.quick-guide ol{margin:0 0 16px;padding-left:24px;color:var(--text)}.quick-guide li{margin-bottom:10px;line-height:1.6;font-size:.95rem}strong{color:var(--text);font-weight:700}.ecc-basics{background:var(--surface-variant);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:16px 0}.ecc-basics h4{margin:0 0 12px;color:var(--text);font-size:1.05rem;font-weight:600}.ecc-basics ul{margin:0;padding-left:20px}.ecc-basics li{margin-bottom:12px;line-height:1.6}.ecc-basics ul ul{margin-top:8px;margin-bottom:0}.ecc-basics ul ul li{margin-bottom:6px;font-size:.9rem}.image-placeholder{position:relative;background:var(--surface-variant);border:2px dashed var(--border);border-radius:var(--radius);padding:40px 20px;margin:20px 0;text-align:center;min-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden}.image-placeholder img{display:none;max-width:100%;height:auto;border-radius:var(--radius-sm)}.placeholder-text{color:var(--text-dim);font-size:.875rem;font-style:italic;margin:0}@media (prefers-color-scheme: light){.image-placeholder .light-desktop{display:block}.image-placeholder .placeholder-text{display:none}}@media (prefers-color-scheme: dark){.image-placeholder .dark-desktop{display:block}.image-placeholder .placeholder-text{display:none}}@media (max-width: 768px) and (prefers-color-scheme: light){.image-placeholder .light-desktop{display:none}.image-placeholder .light-mobile{display:block}}@media (max-width: 768px) and (prefers-color-scheme: dark){.image-placeholder .dark-desktop{display:none}.image-placeholder .dark-mobile{display:block}}.image-placeholder img:not([src]),.image-placeholder img[src=""]{display:none!important}.image-placeholder img:not([src])~.placeholder-text,.image-placeholder img[src=""]~.placeholder-text{display:block!important}.graph-note{background:var(--surface-dim);border-left:3px solid var(--primary);padding:12px;margin:12px 0;font-size:.875rem;color:var(--text-dim);line-height:1.5}@media (max-width: 768px){.how-to-play-overlay{padding:10px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.how-to-play-modal{max-height:none}.how-to-play-header{padding:24px 16px 16px}.how-to-play-title{font-size:1.5rem}.how-to-play-content{padding:16px}.how-to-play-section{margin-bottom:24px;padding-bottom:20px}.how-to-play-section:after{width:40px;height:2px}.game-modes{grid-template-columns:1fr}.operation-examples{gap:6px}.example-item{flex-direction:column;align-items:center;gap:8px;text-align:left}.how-to-play-footer{padding:16px}.how-to-play-got-it-button{width:100%;font-size:var(--mobile-font-size);min-height:var(--mobile-button-height);padding:0 var(--spacing)}.how-to-play-close-x{width:var(--mobile-touch-min);height:var(--mobile-touch-min)}.calc-operations,.calc-workflow,.calc-examples,.graph-elements,.graph-navigation{margin-bottom:20px}.strategy-steps{gap:6px}.step{padding:8px 12px;font-size:.85rem}.how-to-play-section ul,.how-to-play-section ol,.quick-guide ol{padding-left:20px}.how-to-play-section li,.quick-guide li{margin-bottom:8px;font-size:.9rem}.how-to-play-section h4{margin:16px 0 10px;font-size:1rem}.ecc-basics{padding:12px}.image-placeholder{min-height:150px;padding:30px 15px}}.playground-placeholder{height:100%;width:100%}.ecc-game-page-wrapper{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}@media (max-width: 768px){.ecc-game-page-wrapper{min-height:100dvh;overflow:auto;-webkit-overflow-scrolling:touch}}.ecc-game-page{flex:1;width:100%;background:var(--surface);display:flex;flex-direction:column;min-height:90vh}@media (max-width: 768px){.ecc-game-page{min-height:auto;flex:none}}.game-header{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--spacing) var(--spacing-lg);flex-shrink:0;z-index:100;box-shadow:var(--shadow)}@media (max-width: 768px){.game-header{position:sticky;top:0;background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-lg);will-change:transform;transform:translateZ(0);-webkit-transform:translateZ(0);z-index:500}}@supports (-webkit-touch-callout: none){@media (max-width: 768px){.game-header{position:sticky;top:0;z-index:1000;background:var(--surface);transform:translateZ(0);will-change:transform}.game-main{overflow:visible;height:auto;min-height:calc(var(--vh, 1vh) * 100 - 60px)}}}.header-content{margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header-left{display:flex;align-items:center;gap:32px}.mobile-nav-button{display:none;background:none;border-radius:var(--radius);border:1px solid var(--border);color:var(--text);cursor:pointer;padding:8px;transition:all .2s ease}.mobile-nav-button:hover{background:var(--surface-variant);color:var(--primary)}.site-title{text-decoration:none;color:inherit}.site-title:hover{color:inherit}.header-content h1{margin:0;color:var(--text);font-size:1.5rem;font-weight:700;letter-spacing:-.025em}.nav-links{display:flex;gap:8px}.nav-link{padding:8px 16px;text-decoration:none;color:var(--text-dim);border-radius:var(--radius-sm);transition:all .2s ease;font-weight:500;font-size:.875rem}.nav-link:hover{background:var(--surface);color:var(--text)}.nav-link.active{background:var(--primary);color:var(--text-inverse)}.stats-button{width:32px;height:32px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}.stats-button:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);transform:translateY(-1px)}.stats-icon{width:20px;height:20px;flex-grow:1}.mode-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.mode-selector{display:flex;background:var(--surface-variant);border-radius:var(--radius);padding:var(--spacing-xs);gap:var(--spacing-xs)}.mode-button{padding:var(--spacing-sm) var(--spacing);border:none;background:transparent;color:var(--text-dim);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;font-weight:500;font-size:.875rem}.mode-button.active{background:var(--primary);color:var(--text-inverse)}.mode-button:hover:not(.active){background:var(--surface);color:var(--text)}.how-to-play-button{width:32px;height:32px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:all .2s ease;font-weight:600;font-size:1rem;display:flex;align-items:center;justify-content:center}.how-to-play-button:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);transform:translateY(-1px)}.error-banner-absolute{position:absolute;top:64px;left:0;right:0;background:#fee;color:#c33;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #fcc;z-index:1000;box-shadow:0 2px 4px #0000001a}.error-banner-absolute button{background:none;border:none;color:#c33;cursor:pointer;font-size:1.2rem;padding:0;line-height:1;transition:opacity .2s ease}.error-banner-absolute button:hover{opacity:.7}.game-main{flex:1;padding:var(--spacing);display:flex;flex-direction:column}.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top:3px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-state p,.error-state p{color:var(--text-dim);margin:0;font-size:1.1rem}.error-state h2{color:var(--text);margin:0 0 16px;font-size:1.5rem}.retry-button{background:var(--primary);color:var(--text-inverse);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius);cursor:pointer;font-weight:600;margin-top:var(--spacing-lg);transition:all .2s ease}.retry-button:hover{background:var(--primary-dark);transform:translateY(-1px)}.daily-challenge-container{display:flex;flex:1;gap:var(--spacing)}@media (max-width: 768px){.daily-challenge-container{flex-direction:column}}.playground-container{flex:1;display:flex;flex-direction:column}.challenge-info-row{display:none}.challenge-info-card h3{margin:0 0 16px;color:var(--text);font-size:1.3rem;text-align:center}.victory-banner{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:16px;border-radius:8px;margin-top:20px;display:flex;align-items:center;gap:12px}.victory-icon{font-size:1.5rem}.victory-text strong{display:block;margin-bottom:4px;font-size:1.1rem}.victory-text p{margin:0;opacity:.9;font-size:.9rem;line-height:1.3}.playground-main{flex:1;display:flex;flex-direction:column}@media (max-width: 1024px){.daily-challenge-container{flex-direction:column;gap:var(--spacing-sm)}}@media (max-width: 768px){.game-header{padding:8px 16px}.header-content,.header-left{gap:12px}.mobile-nav-button{display:flex;align-items:center;justify-content:center}.error-banner-absolute{top:56px;padding:10px 16px;font-size:.875rem}.desktop-nav{display:none}.header-content h1{font-size:1.125rem;margin:0}.mode-controls{gap:8px}.stats-button,.how-to-play-button{width:28px;height:28px;font-size:.875rem}.game-main{padding:8px}.challenge-info-card{padding:var(--spacing-sm);overflow:visible;height:auto;box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-sm)}.challenge-info-sidebar{height:auto;flex:0 0 auto;overflow:visible}.daily-challenge-container{gap:6px;height:auto;overflow:visible}.playground-container{flex:1;min-height:500px;height:auto;overflow:visible}.ecc-game-page-wrapper{min-height:100dvh;overflow:auto;-webkit-overflow-scrolling:touch}.ecc-game-page{min-height:100dvh;overflow:visible}.game-main{flex:1;min-height:calc(100dvh - 60px);overflow:visible}@supports (-webkit-touch-callout: none){.ecc-game-page-wrapper{position:relative;height:100dvh;overflow:auto}}}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #a5b4fc;--secondary: #f1f5f9;--accent: #f59e0b;--accent-dark: #d97706;--surface: #ffffff;--surface-dim: #f8fafc;--surface-bright: #ffffff;--surface-variant: #f1f5f9;--text: #0f172a;--text-dim: #64748b;--text-light: #94a3b8;--text-inverse: #ffffff;--border: #e2e8f0;--border-light: #f1f5f9;--border-focus: #6366f1;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--info: #3b82f6;--purple: #a78bfa;--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius: .5rem;--radius-sm: .25rem;--radius-lg: .75rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--graph-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);--mobile-touch-min: 44px;--mobile-button-height: 44px;--mobile-input-height: 44px;--mobile-font-size: .875rem;--mobile-font-size-sm: .75rem}[data-theme=dark]{--primary: #818cf8;--primary-dark: #6366f1;--primary-light: #c7d2fe;--secondary: #1e293b;--accent: #fbbf24;--accent-dark: #f59e0b;--surface: #0f172a;--surface-dim: #1e293b;--surface-bright: #334155;--surface-variant: #334155;--text: #f8fafc;--text-dim: #cbd5e1;--text-light: #94a3b8;--text-inverse: #0f172a;--border: #334155;--border-light: #475569;--border-focus: #818cf8;--success: #34d399;--warning: #fbbf24;--error: #f87171;--info: #60a5fa;--purple: #a78bfa;--shadow: 0 1px 3px 0 rgb(0 0 0 / .5), 0 1px 2px -1px rgb(0 0 0 / .5);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);--graph-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%)}a{font-weight:500;color:var(--primary);text-decoration:inherit;transition:color .2s ease}a:hover{color:var(--primary-dark)}*{box-sizing:border-box;transition:background-color .3s ease,color .3s ease,border-color .3s ease}html{margin:0;padding:0;width:100%;min-height:100%;background:var(--surface);color:var(--text);-webkit-tap-highlight-color:transparent;overflow:auto}body{margin:0;padding:0;width:100%;min-height:100%;overflow:auto;background:var(--surface);color:var(--text);-webkit-tap-highlight-color:transparent;touch-action:pan-y pan-x;min-width:320px}#root{width:100%;min-height:100vh;min-height:100dvh;overflow:auto;position:relative}@media (max-width: 768px){html,body{width:100%;min-height:100%;overflow:auto;-webkit-overflow-scrolling:touch}#root{min-height:100%;width:100%;overflow:auto;position:relative;-webkit-overflow-scrolling:touch}.scrollable-container{-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden}}h1{font-size:2rem;line-height:1.2;color:var(--text);font-weight:700;letter-spacing:-.025em}h2{font-size:1.5rem;line-height:1.3;color:var(--text);font-weight:600;letter-spacing:-.025em}h3{font-size:1.25rem;line-height:1.4;color:var(--text);font-weight:600}h4{font-size:1.125rem;line-height:1.4;color:var(--text);font-weight:500}button{border-radius:var(--radius);border:1px solid var(--border);padding:var(--spacing-sm) var(--spacing);font-size:.875rem;font-weight:500;font-family:inherit;background:var(--surface-bright);color:var(--text);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}button:hover{background:var(--surface-variant);border-color:var(--border-focus);transform:translateY(-1px)}button:focus,button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}button:active{transform:translateY(0)}.button-primary{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}.button-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.button-secondary{background:var(--secondary);color:var(--text);border-color:var(--border)}.button-accent{background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}.button-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark)}input,textarea,select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:var(--spacing-sm) var(--spacing);font-size:.875rem;transition:all .2s ease}input:focus,textarea:focus,select:focus{border-color:var(--border-focus);outline:none;box-shadow:0 0 0 3px #6366f11a}@media (max-width: 768px){h1{font-size:2.2em;line-height:1.2}button{padding:.8em 1.4em;font-size:.9em;min-height:44px;min-width:44px;touch-action:manipulation}input,textarea,select{font-size:16px;min-height:44px;padding:12px}*{-webkit-tap-highlight-color:transparent}}