:root{--bg: #0e0e10;--surface: #18181b;--border: #27272a;--text: #fafafa;--text-muted: #71717a;--text-dim: #52525b;--accent: #a1e89a;--error: #f87171;--warning: #facc15}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:IBM Plex Mono,monospace;background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:grid;grid-template-rows:auto auto 1fr auto;gap:20px;min-height:100vh;padding:28px 32px 24px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.header{animation:fadeIn .4s ease both}.options-bar{animation:fadeIn .4s ease .05s both}.editor-section{animation:fadeIn .4s ease .1s both}.footer{animation:fadeIn .4s ease .15s both}.header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.logo{font-size:20px;font-weight:600;white-space:nowrap}.logo-accent{color:var(--accent)}.badge{font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.05em;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:2px 10px;text-transform:uppercase}.subtitle{font-family:DM Sans,sans-serif;font-size:13px;font-weight:400;color:var(--text-muted);margin-left:auto}.options-bar{display:flex;align-items:center;gap:20px;padding:12px 16px;background-color:var(--surface);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap}.option-group{display:flex;align-items:center;gap:8px}.option-group label{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.option-divider{width:1px;height:24px;background-color:var(--border)}.option-select{appearance:none;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:400;color:var(--text);background-color:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 32px 6px 10px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%2371717a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .15s ease}.option-select:hover{border-color:var(--text-dim)}.option-select:focus{outline:none;border-color:var(--accent)}.editor-section{display:flex;flex-direction:column;min-height:0}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;border:1px solid var(--border);border-radius:10px;overflow:hidden;min-height:400px}.editor-pane{display:flex;flex-direction:column;min-height:0;min-width:0}.editor-pane:first-child{border-right:1px solid var(--border)}.pane-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background-color:var(--surface);border-bottom:1px solid var(--border)}.pane-label{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.pane-button{font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:500;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:6px;padding:4px 12px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.pane-button:hover{background-color:#ffffff1a;color:var(--text)}.pane-button:active{transform:scale(.97)}.editor-body{display:flex;flex:1;min-height:0;overflow:hidden}.line-numbers{flex-shrink:0;width:30px;padding:16px 0;text-align:right;color:var(--text-dim);font-family:IBM Plex Mono,monospace;font-size:13px;line-height:1.6;background-color:var(--surface);user-select:none;overflow:hidden;white-space:pre}.input-editor{flex:1;width:0;resize:none;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:400;line-height:1.6;color:var(--text);background-color:var(--surface);border:none;padding:16px 16px 16px 12px;outline:none}.input-editor::placeholder{color:var(--text-dim)}.output-area{flex:1;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:400;line-height:1.6;color:var(--accent);background-color:var(--surface);padding:16px 16px 16px 0;overflow:auto;counter-reset:line}.output-area .output-line,.output-area.highlighted pre.shiki code>.line{display:block;position:relative;padding-left:42px;counter-increment:line;white-space:pre-wrap;overflow-wrap:break-word;min-height:1.6em}.output-area .output-line:before,.output-area.highlighted pre.shiki code>.line:before{content:counter(line);position:absolute;left:0;width:30px;text-align:right;color:var(--text-dim);user-select:none}.output-area.placeholder{color:var(--text-dim);font-style:italic;padding-left:16px}.output-area.error{color:var(--error);padding-left:16px}.output-area.highlighted{padding:0;color:inherit}.output-area.highlighted pre.shiki{margin:0;padding:16px 16px 16px 0;background:transparent!important;font-family:IBM Plex Mono,monospace;font-size:13px;line-height:1.6;overflow:visible}.output-area.highlighted pre.shiki code{font-family:inherit;font-size:inherit;line-height:inherit;counter-reset:line;white-space:normal}.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.status{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--warning);flex-shrink:0}.status-dot.loading{animation:pulse 1.5s ease-in-out infinite}.status-dot.ready{background-color:var(--accent);animation:none}.status-dot.error{background-color:var(--error);animation:none}.status-text{font-size:12px;color:var(--text-muted)}.format-button{font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:500;color:var(--bg);background-color:var(--accent);border:none;border-radius:8px;padding:10px 24px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:opacity .15s ease}.format-button:hover:not(:disabled){opacity:.9;background-color:var(--accent)}.format-button:active:not(:disabled){transform:scale(.97)}.format-button:disabled{opacity:.5;cursor:not-allowed}.shortcut-hint{font-size:11px;opacity:.7}@media(max-width:768px){.app{padding:16px}.editor-container{grid-template-columns:1fr}.editor-pane:first-child{border-right:none;border-bottom:1px solid var(--border)}.subtitle{display:none}.options-bar{gap:12px}.option-divider{display:none}}