*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Inter,system-ui,sans-serif}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--s-border);border-radius:2px}:root,[data-shell=dark]{--s-bg: #09080f;--s-surface: #0d0b1a;--s-border: #1e1b2e;--s-borderD: #2a2440;--s-ink: #e4e0ff;--s-ink2: #9590c0;--s-ink3: #6e6b8a;--s-accent: #7c6ff7;--s-accentSoft: rgba(124, 111, 247, .1);--s-accentText: #c4baff}[data-shell=light]{--s-bg: #f8f7ff;--s-surface: #ffffff;--s-border: #ddd8f8;--s-borderD: #c4b5fd;--s-ink: #1a1630;--s-ink2: #524c72;--s-ink3: #a89ec0;--s-accent: #7c6ff7;--s-accentSoft: #ede9ff;--s-accentText: #5a4ee8}:root{--w-bg: #f8f7f4;--w-surface: #ffffff;--w-border: #d6d3cc;--w-borderD: #b0aca4;--w-ink: #1a1916;--w-inkMid: #6b6760;--w-inkFaint: #a8a49e;--w-fill: #eceae5;--w-blue: #3b5bdb;--w-accent: #1a1916;--w-accentFg: #f8f7f4}.cm-editor{height:100%}.cm-scroller{font-family:JetBrains Mono,Fira Code,monospace!important}.device-wrapper{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;margin:0 auto}.device-wrapper.device-f-auto{max-width:440px}.device-wrapper.device-f-ios,.device-wrapper.device-f-android{max-width:380px}.device-wrapper.device-f-browser{max-width:900px}.device-wrapper .viewer__frame,.device-wrapper .preview-frame{background:var(--w-bg);min-height:420px;overflow:hidden}.device-auto .viewer__frame,.device-auto .preview-frame{border-radius:18px;box-shadow:0 0 0 1.5px var(--s-border),0 28px 72px #00000073,0 0 0 6px var(--s-surface)}.device-ios{border-radius:46px;padding:12px;background:#111;box-shadow:0 25px 50px -12px #00000080,inset 0 0 0 2px #333}.device-ios .viewer__frame,.device-ios .preview-frame{border-radius:34px;min-height:700px;position:relative}.device-ios .device-notch{position:absolute;top:24px;left:50%;transform:translate(-50%);width:100px;height:30px;background:#111;border-radius:20px;z-index:100}.device-ios .device-home{position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:130px;height:5px;border-radius:10px;background:#0003;z-index:100}.device-android{border-radius:36px;padding:8px 8px 30px;background:#222;box-shadow:0 25px 50px -12px #00000080,inset 0 0 0 2px #444}.device-android .viewer__frame,.device-android .preview-frame{border-radius:28px;min-height:700px;position:relative}.device-android .device-camera{position:absolute;top:24px;left:50%;transform:translate(-50%);width:14px;height:14px;background:#111;border-radius:50%;z-index:100}.device-android .device-home{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:60px;height:3px;border-radius:3px;background:#fff3;z-index:100}.device-browser{border-radius:10px;background:#e2e2e2;border:1px solid var(--s-border);box-shadow:0 25px 50px -12px #0006;overflow:hidden;display:flex;flex-direction:column}.device-browser .device-browser-bar{height:38px;display:flex;align-items:center;padding:0 16px;gap:8px;background:inherit;border-bottom:1px solid var(--s-border)}.device-browser .device-browser-bar i{width:12px;height:12px;border-radius:50%;background:#ff5f56}.device-browser .device-browser-bar i:nth-child(2){background:#ffbd2e}.device-browser .device-browser-bar i:nth-child(3){background:#27c93f}.device-browser .viewer__frame,.device-browser .preview-frame{border-radius:0;min-height:500px}@media (prefers-color-scheme: dark){[data-shell=dark] .device-browser{background:#2a2a2a}}@media (max-width: 768px){.device-wrapper.device-f-browser{max-width:100%}.device-ios .viewer__frame,.device-ios .preview-frame,.device-android .viewer__frame,.device-android .preview-frame{min-height:500px}}