body{font-family:Inter,sans-serif;margin:0;padding:0;background:#f8fafc}.preview-header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50}.device-switch{display:flex;align-items:center;gap:1rem}.device-btn{padding:.5rem;border-radius:.375rem;color:#6b7280;cursor:pointer}.device-btn:hover{color:#111827}.device-btn.active{color:#4f46e5}.device-btn svg{width:1.5rem;height:1.5rem}.preview-container{height:calc(100vh - 64px);overflow:hidden;background:#f8fafc}.preview-mode{height:100%;padding:2rem}.desktop-preview-wrapper{width:100%}.desktop-preview-wrapper,.mobile-preview-wrapper{height:100%;background:#fff;border-radius:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}.mobile-preview-wrapper{width:375px;margin:0 auto}.preview-frame{width:100%;height:100%;border:none}.mobile-header{padding:.75rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#f8fafc}.mobile-status-bar{width:60px;height:4px;background:#e5e7eb;border-radius:2px}.code-preview{height:100%;overflow:auto;padding:1.5rem;background:#fff}.code-preview pre{margin:0;padding:1.5rem;border-radius:.5rem;background:#000;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem;line-height:1.5;overflow-x:auto}.code-preview code{white-space:pre;word-break:normal;word-wrap:normal}.code-toolbar{padding:.75rem 1.5rem;background:#f8fafc;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}.code-toolbar select,.copy-code-btn{padding:.375rem .75rem;border-radius:.375rem;border:1px solid #e5e7eb;background:#fff;font-size:.875rem;color:#374151}.copy-code-btn{display:inline-flex;align-items:center;cursor:pointer;transition:all .2s}.copy-code-btn:hover{background:#f3f4f6}.copy-code-btn svg{width:1rem;height:1rem;margin-right:.5rem}.preview-tab{padding:.75rem 1.5rem;font-weight:500;color:#6b7280;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s}.preview-tab:hover{color:#111827}.preview-tab.active{color:#4f46e5;border-bottom-color:#4f46e5}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}