@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap";:root{--bg-primary: #0a0e14;--bg-secondary: #13171f;--bg-tertiary: #1a1f2a;--bg-input: #0d1117;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #6e7681;--accent-primary: #00ff9f;--accent-secondary: #00d4ff;--accent-tertiary: #ff6b9d;--border-default: #21262d;--border-focus: #30363d;--success: #3fb950;--error: #f85149;--warning: #d29922;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .7);--shadow-glow: 0 0 20px rgba(0, 255, 159, .15);--font-mono: "JetBrains Mono", "Courier New", monospace;--font-display: "Space Mono", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-mono);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle at 20% 20%,rgba(0,255,159,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(0,212,255,.03) 0%,transparent 50%)}.container{max-width:1600px;margin:0 auto;padding:var(--space-xl) var(--space-lg);min-height:100vh;display:flex;flex-direction:column}.header{margin-bottom:var(--space-2xl);animation:fadeInDown .6s cubic-bezier(.16,1,.3,1)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.header-content{margin-bottom:var(--space-md)}.title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-sm);color:var(--text-primary);position:relative;display:inline-block}.title-accent{position:relative;display:inline-block;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-accent:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));animation:slideIn .8s cubic-bezier(.16,1,.3,1) .3s both}@keyframes slideIn{0%{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}.subtitle{font-size:1rem;color:var(--text-secondary);font-weight:400}.security-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);font-size:.875rem;color:var(--text-secondary);animation:fadeIn .8s cubic-bezier(.16,1,.3,1) .4s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.security-badge svg{color:var(--accent-primary)}.main{flex:1}.converter-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-lg);margin-bottom:var(--space-2xl);animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) .2s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.panel{display:flex;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-base),box-shadow var(--transition-base)}.panel:focus-within{border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);background:var(--bg-tertiary);border-bottom:1px solid var(--border-default)}.panel-label{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.format-selector{position:relative}.format-select{appearance:none;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);font-family:var(--font-mono);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5L6 8L9 5' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-sm) center}.format-select:hover{border-color:var(--border-focus);background-color:var(--bg-secondary)}.format-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #00ff9f1a}.code-editor{flex:1;min-height:400px;padding:var(--space-lg);background:var(--bg-input);color:var(--text-primary);border:none;font-family:var(--font-mono);font-size:.875rem;line-height:1.6;resize:vertical;transition:background var(--transition-fast)}.code-editor:focus{outline:none;background:#0d1218}.code-editor::placeholder{color:var(--text-muted)}.error-message{min-height:24px;padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border-top:1px solid var(--border-default);font-size:.8125rem;color:var(--error);line-height:1.5;display:none}.error-message.visible{display:block;animation:slideDown .3s cubic-bezier(.16,1,.3,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.convert-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-md) 0}.convert-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);color:var(--bg-primary);border:none;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative;overflow:hidden}.convert-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 100%);opacity:0;transition:opacity var(--transition-fast)}.convert-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow)}.convert-btn:hover:before{opacity:1}.convert-btn:active{transform:translateY(0)}.convert-btn.success{animation:successPulse .3s cubic-bezier(.16,1,.3,1)}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.convert-btn svg{width:24px;height:24px;transition:transform var(--transition-base)}.convert-btn:hover svg{transform:translate(4px)}.output-actions{display:flex;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-tertiary);border-top:1px solid var(--border-default)}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{background:var(--bg-secondary);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.action-btn svg{transition:transform var(--transition-fast)}.action-btn:hover svg{transform:scale(1.1)}.action-btn.success{animation:successPulse .3s cubic-bezier(.16,1,.3,1);border-color:var(--success);color:var(--success)}.examples-section{margin-top:var(--space-2xl);animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) .4s both}.examples-title{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-lg);color:var(--text-primary)}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-md)}.example-card{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-lg);cursor:pointer;transition:all var(--transition-base);text-align:left}.example-card:hover{background:var(--bg-tertiary);border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.example-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);font-weight:600;color:var(--text-primary)}.example-from,.example-to{padding:var(--space-xs) var(--space-sm);background:var(--bg-input);border-radius:var(--radius-sm);font-size:.8125rem;font-family:var(--font-mono)}.example-header svg{color:var(--text-muted)}.example-desc{font-size:.875rem;color:var(--text-secondary);line-height:1.5}.footer{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--border-default);text-align:center;font-size:.875rem;color:var(--text-muted);animation:fadeIn .8s cubic-bezier(.16,1,.3,1) .6s both}.footer a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}.footer a:hover{color:var(--accent-secondary);text-decoration:underline}.toast{position:fixed;bottom:var(--space-xl);right:var(--space-xl);padding:var(--space-md) var(--space-lg);background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);transform:translateY(150%);transition:transform var(--transition-base);z-index:1000;pointer-events:none}.toast.show{transform:translateY(0);pointer-events:auto}.toast.success{border-color:var(--success);background:linear-gradient(135deg,rgba(63,185,80,.1) 0%,var(--bg-tertiary) 100%)}.toast.error{border-color:var(--error);background:linear-gradient(135deg,rgba(248,81,73,.1) 0%,var(--bg-tertiary) 100%)}.format-hint{display:none;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#00ff9f1a,#00d4ff0d);border-bottom:1px solid var(--border-default);font-size:.8125rem;color:var(--accent-primary);font-weight:500}.format-hint.visible{display:flex;animation:slideDown .3s cubic-bezier(.16,1,.3,1)}.format-hint svg{flex-shrink:0;color:var(--accent-primary)}.secret-warning{display:none;padding:1rem;background:linear-gradient(135deg,rgba(248,81,73,.1) 0%,var(--bg-tertiary) 100%);border-top:1px solid var(--error);border-bottom:1px solid var(--border-default);font-size:.8125rem;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;font-family:var(--font-mono);max-height:300px;overflow-y:auto}.secret-warning.visible{display:block;animation:slideDown .3s cubic-bezier(.16,1,.3,1)}.format-controls{display:flex;gap:.5rem;align-items:center}.auto-detect-btn{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.auto-detect-btn:hover{background:var(--bg-secondary);border-color:var(--accent-primary);color:var(--accent-primary)}.auto-detect-btn svg{width:14px;height:14px;transition:transform var(--transition-fast)}.auto-detect-btn:hover svg{transform:rotate(180deg)}.keyboard-hint{margin-top:.5rem;font-size:.75rem;color:var(--text-muted);text-align:center;font-family:var(--font-mono)}.shortcuts-info{margin-top:var(--space-2xl);padding:var(--space-xl);background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) .6s both}.shortcuts-info h3{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-md);color:var(--text-primary)}.shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md)}.shortcut-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-input);border-radius:var(--radius-sm);font-size:.875rem;color:var(--text-secondary)}.shortcut-item kbd{padding:.25rem .5rem;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:4px;font-family:var(--font-mono);font-size:.75rem;color:var(--text-primary);box-shadow:0 2px 0 var(--border-default)}@media(max-width:1200px){.converter-grid{grid-template-columns:1fr;gap:var(--space-md)}.convert-section{order:2}.output-panel{order:3}.convert-btn{width:100%}}@media(max-width:768px){.container{padding:var(--space-lg) var(--space-md)}.title{font-size:2rem}.security-badge{font-size:.75rem;padding:var(--space-xs) var(--space-sm)}.code-editor{min-height:300px;font-size:.8125rem}.examples-grid{grid-template-columns:1fr}.toast{bottom:var(--space-md);right:var(--space-md);left:var(--space-md)}.format-controls{flex-direction:column;align-items:stretch}.auto-detect-btn{width:100%;justify-content:center}.shortcuts-info{padding:var(--space-md)}.shortcuts-grid{grid-template-columns:1fr}}::selection{background:#00ff9f33;color:var(--text-primary)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-focus);border-radius:6px;border:2px solid var(--bg-primary)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}