body{background-color:#333;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#e1e3e1;padding:2%;margin:0}.editor-container{display:flex;flex-direction:row;background-color:#282828;width:100%;height:60vh;padding:10px;box-sizing:border-box;border-radius:10px;border:1px solid #666666}.code-area,.preview-area{flex:1;width:50%;display:flex;flex-direction:column;height:auto;background-color:#282828;margin:0;padding:0}.code-editor{flex:1;height:100%;width:100%;background-color:#121212;border-right:1px solid #444444;overflow-x:auto;box-sizing:border-box}.preview-iframe{all:initial;display:block;width:100%;height:100%;border:0;box-sizing:border-box;background:transparent;contain:layout paint style}.code-editor *,.preview-panel{scrollbar-width:thin;scrollbar-color:#555 #1a1a1a}.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}.pager-status{color:#c1c3c1;font-size:.95rem}.pager-btn{padding:1.3vh 1.5vw;border-radius:10px;border:1px solid #d0d4d4;background:#64ac54;color:#e1e3e1;font-size:1rem;box-shadow:0 2px 6px #0000000f;transition:background .2s ease,box-shadow .2s ease,transform .06s ease}.pager-btn.disabled{background:#d0d4d4;color:#a0a3a0;cursor:not-allowed;box-shadow:none;transform:none}.pager-btn:hover:not(.disabled){background:#7dca6c;box-shadow:0 6px 14px #0000001f;transform:translateY(-1px)}.pager-btn:active:not(.disabled){transform:translateY(0);box-shadow:0 3px 10px #0000001a}.pager-btn.prev:not(.disabled){border-color:#d0d4d4;background:#8ca587}.pager-btn.prev:hover:not(.disabled){background:#a9c5a3}@media(max-width:480px){.editor-container{flex-direction:column}.editor-container>div{width:100%}.pager{gap:8px}.pager-btn{padding:10px 14px;font-size:.95rem}}