:root{--dev-bg:#f8fafc;--dev-card-bg:#01022e;--dev-editor-bg:#0e1117;--dev-purple:#3c1ae9;--dev-orange:#f97316;--dev-text-light:#fafbff;--dev-text-muted:#94a3b8}.dev-section{color:#0f172a;font-family:Inter,system-ui,-apple-system,sans-serif}.dev-container{margin:0 auto;max-width:800px;width:100%}.dev-viewer{background-color:var(--dev-card-bg);border-radius:24px;box-sizing:border-box;height:530px;min-width:0;padding:16px;width:100%}.viewer-window{background-color:var(--dev-editor-bg);border:1px solid hsla(0,0%,100%,.08);border-radius:16px;display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.viewer-header{align-items:center;background-color:#161b22;border-bottom:1px solid hsla(0,0%,100%,.05);display:flex;flex-shrink:0;gap:12px;justify-content:space-between;padding:12px 16px}.window-dots{display:flex;flex-shrink:0;gap:6px}.dot{border-radius:50%;height:10px;width:10px}.dot-red{background-color:#ff5f56}.dot-yellow{background-color:#ffbd2e}.dot-green{background-color:#27c93f}.lang-tabs{background:hsla(0,0%,100%,.05);border-radius:8px;display:flex;gap:4px;max-width:100%;overflow-x:auto;padding:3px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.lang-tabs::-webkit-scrollbar{display:none}.lang-tab{background:transparent;border:none;border-radius:6px;color:#94a3b8;cursor:pointer;flex-shrink:0;font-size:11px;font-weight:500;padding:4px 10px;transition:all .2s ease;white-space:nowrap}.lang-tab.active{background-color:var(--dev-purple);color:#fff}.viewer-subheader{background-color:rgba(0,0,0,.2);border-bottom:1px solid hsla(0,0%,100%,.05);color:#cbd5e1;flex-shrink:0;font-family:monospace;font-size:12px;justify-content:space-between;padding:8px 16px}.copy-box,.viewer-subheader{align-items:center;display:flex}.copy-box{gap:12px;overflow:hidden}.pkg-cmd{color:#38bdf8;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-btn{align-items:center;background:transparent;border:none;color:#94a3b8;cursor:pointer;display:flex;flex-shrink:0;padding:2px;transition:color .2s}.copy-btn:hover{color:#fff}.code-body{color:#fff;flex-shrink:0;height:235px;overflow:auto;padding:16px}.code-body pre,.response-box pre{font-family:Fira Code,Consolas,Monaco,monospace;font-size:12px;line-height:1.5;margin:0;white-space:pre}.code-body::-webkit-scrollbar,.response-box::-webkit-scrollbar{height:6px;width:6px}.code-body::-webkit-scrollbar-thumb,.response-box::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.15);border-radius:4px}.c-keyword{color:#f472b6}.c-string{color:#a5f3fc}.c-func{color:#60a5fa}.c-comment{color:#94a3b8;font-style:italic}.c-var{color:#facc15}.c-key,.cursor{color:#38bdf8}.cursor{font-weight:700;margin-left:2px}.cursor.blink{animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.response-panel{background-color:#0b0d13;border-top:1px solid hsla(0,0%,100%,.08);display:flex;flex-direction:column;flex-grow:1;overflow:hidden;padding:12px 16px}.response-status{align-items:center;display:flex;flex-shrink:0;font-family:monospace;font-size:11px;gap:8px;margin-bottom:8px}.status-indicator{background-color:#64748b;border-radius:50%;height:6px;transition:background-color .3s ease;width:6px}.status-title{color:#94a3b8;font-weight:600}.status-code{color:#64748b;margin-left:auto;transition:color .3s ease}.response-box{background:hsla(0,0%,100%,.02);border:1px solid hsla(0,0%,100%,.05);border-radius:8px;flex-grow:1;overflow:auto;padding:10px}.response-box pre{color:#fff;font-size:11px}@media (max-width:600px){.dev-viewer{height:500px}.code-body{height:200px}.file-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}