*{box-sizing:border-box;margin:0;padding:0}body{color:#f5f5f5;background-color:#121212;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden}.compiler-container{max-width:100vw;min-height:100vh;padding:20px;transition:all .3s}.compiler-container.fullscreen{z-index:1000;width:100vw;height:100vh;padding:0;position:fixed;top:0;left:0;overflow:hidden}.compiler-container.fullscreen .editor-grid,.compiler-container.fullscreen .preview-container{height:calc(50% - 60px)}.compiler-container.fullscreen .preview-content{height:100%}header{text-align:center;background:linear-gradient(135deg,#4a00e0,#8e2de2);border-radius:10px;margin-bottom:20px;padding:20px;box-shadow:0 4px 20px rgba(74,0,224,.3)}header h1{text-shadow:0 2px 10px rgba(0,0,0,.3);margin-bottom:15px;font-size:2.5rem}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;display:flex}.controls button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:rgba(255,255,255,.15);border:none;border-radius:50px;align-items:center;gap:8px;padding:10px 20px;font-weight:600;transition:all .3s;display:flex}.controls button:hover{background:rgba(255,255,255,.25);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.2)}.controls button:active{transform:translateY(0)}.controls button:focus-visible{outline-offset:2px;outline:2px solid #00c853}.editor-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;min-height:320px;margin-bottom:20px;display:grid}.code-editor{background:rgba(30,30,30,.8);border-radius:10px;transition:transform .3s;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.4)}.code-editor:hover{transform:translateY(-5px)}.code-editor h2{color:#a67aff;background:rgba(0,0,0,.3);align-items:center;margin:0;padding:12px 20px;font-size:1.2rem;display:flex}.code-editor h2:before{content:"•";color:#00c853;margin-right:10px}.preview-container{background:rgba(30,30,30,.8);border-radius:10px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.4)}.tabs{background:rgba(0,0,0,.3);display:flex}.tabs button{color:rgba(255,255,255,.7);cursor:pointer;background:0 0;border:none;padding:12px 25px;font-weight:600;transition:all .3s;position:relative}.tabs button.active{color:#fff}.tabs button.active:after{content:"";background:#00c853;width:100%;height:3px;position:absolute;bottom:0;left:0}.tabs button:hover{color:#fff;background:rgba(255,255,255,.1)}.tabs button:focus-visible{outline-offset:2px;outline:2px solid #00c853}.preview-content{flex:1;min-height:300px;position:relative}.preview-content iframe{background:#fff;width:100%;height:100%}.console-output{white-space:pre-wrap;color:#f5f5f5;background:#1e1e1e;height:100%;padding:20px;font-family:monospace;overflow-y:auto}.console-output ul{margin:0;padding:0;list-style:none}.console-output ul li{border-bottom:1px solid rgba(255,255,255,.1);padding:5px 0}.console-output ul li.log{color:#f5f5f5}.console-output ul li.error{color:#ff1744;font-weight:700}.console-output p{color:rgba(255,255,255,.7);font-style:italic}.editor-loading{color:#fff;background:rgba(30,30,30,.8);justify-content:center;align-items:center;height:300px;font-size:1.2rem;display:flex}@media (max-width:768px){.editor-grid{grid-template-columns:1fr}.controls{flex-direction:column;align-items:stretch}.controls button{justify-content:center;width:100%}.preview-content{min-height:200px}}