*,*::before,*::after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif;font-size:14px;background:#282a36;color:#f8f8f2}body{display:flex;flex-direction:column}.navbar{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#1e1e1e;border-bottom:1px solid #44475a}.navbar-brand{font-size:1.25rem;font-weight:600;color:#f8f8f2}.navbar-brand i{margin-right:.5rem;color:#8be9fd}.format-time{color:#888;font-size:.85rem;font-family:jetbrains mono,monospace}.github-link{color:#888;text-decoration:none;transition:color .2s}.github-link:hover{color:#f8f8f2}.github-link i{margin-right:.25rem}#main{flex:1;display:flex;flex-direction:column;min-height:0;padding:1rem}.editor-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1rem;min-height:0}.editor-panel{display:flex;flex-direction:column;min-height:0;background:#1e1e1e;border-radius:6px;overflow:hidden;border:1px solid #44475a}.editor-header{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:#333;border-bottom:1px solid #44475a;font-size:.85rem;font-weight:500}.editor-header i{margin-right:.4rem;opacity:.8}.badge{font-size:.7rem;font-weight:500;padding:.2rem .5rem;border-radius:3px;text-transform:uppercase;letter-spacing:.5px}.badge-primary{background:#6272a4;color:#f8f8f2}.badge-secondary{background:#44475a;color:#888}.editor-container{flex:1;min-height:0}footer{flex-shrink:0;padding:.5rem 1rem;background:#1e1e1e;text-align:center;font-size:.8rem;color:#888;border-top:1px solid #44475a}@media(max-width:900px){.editor-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}}@media(max-width:480px){.navbar{padding:.5rem .75rem}.navbar-brand{font-size:1rem}#main{padding:.5rem}.editor-grid{gap:.5rem}.editor-header{padding:.4rem .5rem;font-size:.8rem}}