header{background:#020617;color:#38bdf8;padding:10px 15px;font-size:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1e293b}header button{background:#38bdf8;border:none;padding:6px 12px;cursor:pointer;border-radius:4px;font-weight:700}header button.theme-toggle{display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}header button.theme-toggle:hover{transform:scale(1.05);box-shadow:0 0 12px #38bdf899}header button.theme-toggle:active{transform:scale(.9)}header button .icon{font-size:22px;display:inline-block;transition:transform .5s ease,opacity .3s ease}header button.vs-dark .icon{transform:rotate(180deg) scale(1.1)}header button.light .icon{transform:rotate(0) scale(1)}.editors{display:flex;height:45vh;border-bottom:1px solid #1e293b}.editor-box{flex:1;display:flex;flex-direction:column;border-right:1px solid #1e293b;min-height:0}.editor-title{background:#020617;color:#fff;text-align:center;padding:20px;font-weight:700;border-bottom:1px solid #1e293b}.editor-box>div{flex:1;min-height:0}@media(max-width:768px){.editors{flex-direction:column;height:auto}.editor-box{height:40vh;border-right:none;border-bottom:1px solid #1e293b}}.output{height:45vh;background:#fff}.output-title{background:#020617;color:#38bdf8;padding:8px;font-weight:700;border-bottom:1px solid #1e293b}iframe{width:100%;height:calc(100% - 35px);border:none}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}body{background:#020617;color:#fff;height:100vh;overflow:hidden}@media(max-width:1024px){.editors{flex-direction:column;height:55vh}.editor-box{border-right:none;border-bottom:1px solid #1e293b}.output{height:40vh}}@media(max-width:768px){header{font-size:16px;padding:8px 10px}header button{padding:4px 8px;font-size:12px}.editors{height:60vh}.editor-title{font-size:13px}.output{height:35vh}}@media(max-width:480px){header{flex-direction:column;gap:8px}.editors{height:65vh}.output{height:30vh}}