:root{--accent:#c46849;--accent-hover:#d4785a;--accent-muted:rgba(196, 104, 73, 0.15);--gray-950:#1e1e1e;--gray-900:#252526;--gray-850:#2d2d30;--gray-800:#333333;--gray-700:#3e3e42;--gray-600:#505050;--gray-500:#6e6e6e;--gray-400:#909090;--gray-300:#b0b0b0;--gray-200:#d4d4d4;--gray-100:#e8e8e8;--gray-050:#f5f5f5;--bg-primary:var(--gray-950);--bg-secondary:var(--gray-900);--bg-card:var(--gray-850);--text-primary:#ffffff;--text-secondary:var(--gray-200);--text-muted:var(--gray-400);--border-color:var(--gray-700);--shadow:rgba(0, 0, 0, 0.3);--font-sans:'Encode Sans Semi Expanded',-apple-system,BlinkMacSystemFont,sans-serif;--font-serif:'Instrument Serif',Georgia,serif;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--transition-fast:150ms ease;--transition-normal:300ms ease}body.light-mode{--bg-primary:#ffffff;--bg-secondary:var(--gray-050);--bg-card:#ffffff;--text-primary:#0f172a;--text-secondary:#4b5563;--text-muted:#6b7280;--border-color:#e5e7eb;--shadow:rgba(0, 0, 0, 0.1)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}.header{position:sticky;top:0;z-index:100;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px)}.header .container{display:flex;align-items:center;justify-content:space-between;height:64px}.logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--text-primary)}.logo-icon{font-size:1.5rem;color:var(--accent)}.logo-text{font-weight:600;font-size:1.125rem}.back-to-site{color:var(--text-muted);text-decoration:none;font-size:.75rem;font-weight:500;padding:var(--space-xs) var(--space-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:all var(--transition-fast);margin-left:var(--space-md)}.back-to-site:hover{color:var(--text-primary);border-color:var(--accent);background:var(--accent-muted)}.nav{display:flex;gap:var(--space-lg)}.nav-link{color:var(--text-muted);text-decoration:none;font-size:.875rem;font-weight:500;padding:var(--space-sm) 0;border-bottom:2px solid transparent;transition:all var(--transition-fast)}.nav-link.active,.nav-link:hover{color:var(--text-primary);border-bottom-color:var(--accent)}.theme-btn{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-size:1rem;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.theme-btn:hover{background:var(--accent-muted);border-color:var(--accent)}.hero{padding:var(--space-2xl) 0;text-align:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.hero-title{font-family:var(--font-serif);font-size:2.5rem;font-weight:400;margin-bottom:var(--space-md)}.hero-title .accent{color:var(--accent)}.hero-subtitle{color:var(--text-muted);font-size:1.125rem}.section{padding:var(--space-2xl) 0}.section-alt{background:var(--bg-secondary)}.section-title{font-family:var(--font-serif);font-size:1.75rem;font-weight:400;margin-bottom:var(--space-sm);text-align:center}.section-desc{color:var(--text-muted);text-align:center;margin-bottom:var(--space-xl)}.calculator-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:700px;margin:0 auto}.system-selector{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);justify-content:center}.system-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-muted);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-width:100px}.system-btn:hover{border-color:var(--accent);color:var(--text-primary)}.system-btn.active{background:var(--accent-muted);border-color:var(--accent);color:var(--accent)}.system-icon{font-size:1.5rem}.input-group{display:flex;flex-direction:column;gap:var(--space-md)}.input-label{font-size:.875rem;font-weight:500;color:var(--text-secondary)}.text-input{width:100%;padding:var(--space-md);font-size:1.25rem;font-family:var(--font-sans);background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast)}.text-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.text-input::placeholder{color:var(--text-muted)}.btn-primary{padding:var(--space-md) var(--space-xl);font-size:1rem;font-weight:600;font-family:var(--font-sans);background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-secondary{padding:var(--space-md) var(--space-xl);font-size:.875rem;font-weight:600;font-family:var(--font-sans);background:0 0;color:var(--accent);border:2px solid var(--accent);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--accent-muted)}.result-container{margin-top:var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--border-color)}.result-container.hidden{display:none}.result-value{text-align:center;margin-bottom:var(--space-xl)}.result-label{display:block;font-size:.875rem;color:var(--text-muted);margin-bottom:var(--space-sm)}.result-number{font-size:4rem;font-weight:700;color:var(--accent);font-family:var(--font-sans)}.transliteration-info{text-align:center;margin-bottom:var(--space-lg);padding:var(--space-md);background:var(--accent-muted);border-radius:var(--radius-md);font-size:1.25rem}.transliteration-info.hidden{display:none}.transliteration-original{color:var(--text-secondary)}.transliteration-arrow{margin:0 var(--space-sm);color:var(--accent);font-weight:600}.transliteration-result{color:var(--text-primary);font-weight:600;font-size:1.5rem}.conversion-method{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;margin-bottom:var(--space-sm);cursor:help;transition:transform .2s ease,box-shadow .2s ease}.conversion-method:hover{transform:scale(1.05)}.conversion-method.translation{background:rgba(34,197,94,.2);color:#22c55e;border:1px solid rgba(34,197,94,.3)}.conversion-method.transliteration{background:rgba(59,130,246,.2);color:#3b82f6;border:1px solid rgba(59,130,246,.3)}.conversion-method.mixed{background:rgba(234,179,8,.2);color:#eab308;border:1px solid rgba(234,179,8,.3)}.light-mode .conversion-method.translation{background:rgba(34,197,94,.15);color:#16a34a}.light-mode .conversion-method.transliteration{background:rgba(59,130,246,.15);color:#2563eb}.light-mode .conversion-method.mixed{background:rgba(234,179,8,.15);color:#ca8a04}.decomposition{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-lg)}.decomposition-title{font-size:.875rem;font-weight:600;color:var(--text-muted);margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:.05em}.decomposition-grid{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;margin-bottom:var(--space-md)}.letter-box{display:flex;flex-direction:column;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);min-width:50px}.letter-char{font-size:1.5rem;font-weight:500;color:var(--text-primary)}.letter-value{font-size:.75rem;color:var(--accent);font-weight:600}.decomposition-formula{text-align:center;font-family:monospace;font-size:.875rem;color:var(--text-muted);padding-top:var(--space-md);border-top:1px solid var(--border-color)}.comparator-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-lg);align-items:end;margin-bottom:var(--space-xl)}.comparator-item{display:flex;flex-direction:column;gap:var(--space-sm)}.compare-result{font-size:2rem;font-weight:700;color:var(--accent);text-align:center;min-height:48px}.comparator-equals{display:flex;align-items:center;justify-content:center;padding-bottom:24px}.equals-sign{font-size:2rem;font-weight:700;color:var(--text-muted);transition:all var(--transition-fast)}.equals-sign.match{color:#22c55e}.equals-sign.no-match{color:var(--gray-500)}.compare-message{text-align:center;padding:var(--space-md);border-radius:var(--radius-md);margin-top:var(--space-lg)}.compare-message.hidden{display:none}.compare-message.match{background:rgba(34,197,94,.15);color:#22c55e}.compare-message.no-match{background:var(--bg-secondary);color:var(--text-muted)}.history-list{margin-bottom:var(--space-lg)}.history-empty{text-align:center;color:var(--text-muted);padding:var(--space-xl)}.history-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--space-sm);cursor:pointer;transition:all var(--transition-fast)}.history-item:hover{background:var(--accent-muted)}.history-text{font-weight:500;color:var(--text-primary)}.history-meta{display:flex;align-items:center;gap:var(--space-md)}.history-value{font-weight:700;color:var(--accent)}.history-system{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.history-actions{display:flex;gap:var(--space-md);margin-top:var(--space-lg)}.history-actions .btn-primary,.history-actions .btn-secondary{flex:1}.tables-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl)}.table-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg)}.table-title{display:flex;align-items:center;gap:var(--space-sm);font-size:1.125rem;font-weight:600;margin-bottom:var(--space-lg)}.table-icon{font-size:1.25rem;color:var(--accent)}.table-wrapper{max-height:400px;overflow-y:auto}.values-table{width:100%;border-collapse:collapse}.values-table td,.values-table th{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--border-color)}.values-table th{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;background:var(--bg-card)}.values-table td:first-child{font-size:1.25rem}.values-table td:last-child{font-weight:600;color:var(--accent)}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg);max-width:900px;margin:0 auto}.example-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;cursor:pointer;transition:all var(--transition-fast)}.example-card:hover{border-color:var(--accent);transform:translateY(-2px)}.example-value{font-size:2rem;font-weight:700;color:var(--accent);margin-bottom:var(--space-sm)}.example-text{font-size:1.25rem;font-weight:500;margin-bottom:var(--space-xs)}.example-trans{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-xs)}.example-ref{font-size:.75rem;color:var(--text-muted);font-style:italic}.footer{padding:var(--space-xl) 0;text-align:center;border-top:1px solid var(--border-color);background:var(--bg-secondary)}.footer-text{color:var(--text-muted);font-size:.875rem;margin-bottom:var(--space-sm)}.footer-link{color:var(--accent);text-decoration:none}.footer-link:hover{text-decoration:underline}.footer-copy{color:var(--text-muted);font-size:.75rem}@media (max-width:768px){.header .container{flex-wrap:wrap;height:auto;padding:var(--space-md);gap:var(--space-md)}.nav{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:var(--space-md)}.hero-title{font-size:1.75rem}.system-selector{flex-wrap:wrap}.system-btn{flex:1;min-width:80px}.comparator-grid{grid-template-columns:1fr}.comparator-equals{padding:var(--space-md) 0}.result-number{font-size:3rem}.tables-grid{grid-template-columns:1fr}.examples-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.examples-grid{grid-template-columns:1fr}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--gray-600);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}::selection{background:var(--accent-muted);color:var(--text-primary)}