:root { --bg-color: #0f172a; --panel-bg: rgba(30, 41, 59, 0.7); --panel-border: rgba(255, 255, 255, 0.1); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --accent-primary: #3b82f6; --accent-hover: #2563eb; --accent-secondary: #8b5cf6; --carry-color: #f59e0b; --math-font: 'Consolas', 'Courier New', monospace; --ui-font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--ui-font); background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; align-items: center; } .container { width: 100%; max-width: 800px; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; } header { text-align: center; } header h1 { font-size: 2.5rem; font-weight: 600; background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; } header p { color: var(--text-secondary); } .glass-panel { background: var(--panel-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--panel-border); border-radius: 16px; padding: 2rem; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } form { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; } .form-group { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 0.5rem; } label { font-size: 0.9rem; color: var(--text-secondary); } input, select { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--panel-border); color: var(--text-primary); padding: 0.75rem 1rem; border-radius: 8px; font-family: var(--ui-font); font-size: 1rem; outline: none; transition: all 0.3s ease; } input:focus, select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } button { cursor: pointer; font-family: var(--ui-font); font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 8px; border: none; transition: all 0.3s ease; } .btn-primary { background: var(--accent-primary); color: white; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); border: 1px solid var(--panel-border); } .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .hidden { display: none !important; } .controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } #step-counter { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 100px; text-align: center; } .stats-wrapper { display: flex; justify-content: center; width: 100%; } .stats { text-align: center; margin-bottom: 2rem; font-size: 1.25rem; font-weight: 600; color: var(--text-primary); background: rgba(139, 92, 246, 0.15); border: 1px solid var(--accent-secondary); padding: 0.75rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .step-toggle-container { display: flex; justify-content: center; margin-top: 1.5rem; margin-bottom: 1.5rem; } /* Math Board Styles */ .math-board { display: flex; flex-direction: column; align-items: center; font-family: var(--math-font); font-size: 1.5rem; overflow-x: auto; padding: 1rem; } .math-grid { display: grid; row-gap: 0.5rem; justify-items: center; } /* The columns will be set dynamically via style="grid-template-columns:repeat(N,2rem)" */ .cell { width: 2.5rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .cell.label { white-space: nowrap; width: auto; } .cell.carry { font-size: 1rem; color: var(--carry-color); font-weight: 700; font-style: italic; transform: translateY(5px); } .cell.operator { justify-self: end; padding-right: 0.5rem; } .line-row { grid-column: 1 / -1; width: 100%; height: 2px; background-color: var(--text-primary); margin: 0.5rem 0; } .cell.highlight { background-color: rgba(59, 130, 246, 0.3); border-radius: 4px; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); } .cell.fade-in { animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } footer { margin-top: auto; text-align: center; } .footer-content { padding: 1rem; font-size: 0.8rem; color: var(--text-secondary); }