:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:#0f0f0f;color:#e0e0e0}#root{width:100%;min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#ff8c42;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffa566}*{margin:0;padding:0;box-sizing:border-box}body{background:#0f0f0f;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 3rem;border-bottom:1px solid #2a2a2a}.logo{font-size:1.5rem;font-weight:600;color:#ff8c42}.status{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#888}.status-dot{width:8px;height:8px;background:#ff8c42;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main-content{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem 3rem;max-width:1600px;margin:0 auto;width:100%}.screen-section{display:flex;flex-direction:column}.screen-header{padding:.75rem 1rem;background:#1a1a1a;border:1px solid #2a2a2a;border-bottom:none;border-radius:8px 8px 0 0;font-size:.85rem;color:#888}.screen{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:0 0 8px 8px;padding:1.5rem;min-height:500px;position:relative;display:flex;flex-direction:column;gap:1rem}.file-tree{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem;border-bottom:1px solid #2a2a2a}.file-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:4px;transition:all .3s ease;cursor:pointer}.file-item.active{background:#ff8c421a;color:#ff8c42}.file-icon{font-size:.9rem}.editor-area{flex:1}.editor-tabs{display:flex;gap:.25rem;margin-bottom:1rem}.tab{padding:.5rem 1rem;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:4px 4px 0 0;font-size:.85rem;color:#888;cursor:pointer;transition:all .2s ease}.tab.active{background:#1a1a1a;color:#ff8c42;border-bottom-color:transparent}.editor-content{background:#0f0f0f;border:1px solid #2a2a2a;border-radius:0 4px 4px;padding:1rem;font-family:Courier New,monospace;font-size:.9rem}.code-line{display:flex;gap:1rem;padding:.25rem 0}.line-num{color:#555;-webkit-user-select:none;user-select:none;min-width:20px}.code{color:#e0e0e0}.actions{display:flex;gap:1rem;padding-top:1rem;border-top:1px solid #2a2a2a}.action-btn{padding:.75rem 1.5rem;background:transparent;border:1px solid #ff8c42;color:#ff8c42;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500}.action-btn.active{background:#ff8c42;color:#0f0f0f;box-shadow:0 0 20px #ff8c4266}.action-btn:hover{background:#ff8c421a}.click-effect{position:absolute;width:20px;height:20px;border:2px solid #ff8c42;border-radius:50%;pointer-events:none;animation:click-ripple .4s ease-out;transform:translate(-50%,-50%)}@keyframes click-ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.terminal-section{display:flex;flex-direction:column}.terminal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#1a1a1a;border:1px solid #2a2a2a;border-bottom:none;border-radius:8px 8px 0 0;font-size:.85rem;color:#888}.terminal-controls{display:flex;gap:.5rem}.control-dot{width:12px;height:12px;border-radius:50%;background:#2a2a2a}.terminal{background:#0f0f0f;border:1px solid #2a2a2a;border-radius:0 0 8px 8px;padding:1.5rem;min-height:500px;font-family:Courier New,monospace;font-size:.9rem;color:#e0e0e0}.terminal-line{margin-bottom:.5rem;animation:terminal-fade-in .3s ease-out}@keyframes terminal-fade-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.terminal-cursor{display:inline-block;color:#ff8c42;animation:blink 1s step-end infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.footer{padding:2rem 3rem;border-top:1px solid #2a2a2a;text-align:center}.footer a{color:#ff8c42;text-decoration:none;transition:color .3s ease}.footer a:hover{color:#ffa566}@media(max-width:1024px){.main-content{grid-template-columns:1fr;gap:1.5rem}.header{padding:1rem 1.5rem}.main-content,.footer{padding:1.5rem}}@media(max-width:768px){.header,.main-content{padding:1rem}.screen,.terminal{min-height:400px}.actions{flex-direction:column}.action-btn{width:100%}}