.CodeMirror{color:#000;font-family:monospace;height:300px}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{background-color:#f7f7f7;border-right:1px solid #ddd;white-space:nowrap}.CodeMirror-linenumber{color:#999;min-width:20px;padding:0 3px 0 5px;text-align:right;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror div.CodeMirror-cursor{border-left:1px solid #000}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.CodeMirror.cm-fat-cursor div.CodeMirror-cursor{background:#7e7;border:0;width:auto}.CodeMirror.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;border:0;width:auto}@-moz-keyframes blink{0%{background:#7e7}50%{background:none}to{background:#7e7}}@-webkit-keyframes blink{0%{background:#7e7}50%{background:none}to{background:#7e7}}@keyframes blink{0%{background:#7e7}50%{background:none}to{background:#7e7}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-ruler{border-left:1px solid #ccc;position:absolute}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-header{color:blue}.cm-s-default .cm-quote{color:#090}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{background:#fff;overflow:hidden;position:relative}.CodeMirror-scroll{height:100%;margin-bottom:-30px;margin-right:-30px;outline:none;overflow:scroll!important;padding-bottom:30px;position:relative}.CodeMirror-sizer{border-right:30px solid transparent;position:relative}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{display:none;position:absolute;z-index:6}.CodeMirror-vscrollbar{overflow-x:hidden;overflow-y:scroll;right:0;top:0}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-x:scroll;overflow-y:hidden}.CodeMirror-scrollbar-filler{bottom:0;right:0}.CodeMirror-gutter-filler{bottom:0;left:0}.CodeMirror-gutters{left:0;position:absolute;top:0;z-index:3}.CodeMirror-gutter{display:inline-block;*display:inline;height:100%;margin-bottom:-30px;white-space:normal;*zoom:1}.CodeMirror-gutter-wrapper{height:100%;position:absolute;z-index:4}.CodeMirror-gutter-elt{cursor:default;position:absolute;z-index:4}.CodeMirror-gutter-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{background:transparent;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;color:inherit;line-height:inherit;overflow:visible;position:relative;z-index:2;-webkit-tap-highlight-color:transparent}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{bottom:0;left:0;position:absolute;right:0;top:0;z-index:0}.CodeMirror-linewidget{overflow:auto;position:relative;z-index:2}.CodeMirror-code{outline:none}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{height:0;overflow:hidden;position:absolute;visibility:hidden;width:100%}.CodeMirror-measure pre{position:static}.CodeMirror div.CodeMirror-cursor{border-right:none;position:absolute;width:0}div.CodeMirror-cursors{position:relative;visibility:hidden;z-index:3}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror ::selection{background:#d7d4f0}.CodeMirror ::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.CodeMirror span{*vertical-align:text-bottom}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.code-editor-page{padding-bottom:var(--space-16);padding-top:var(--space-8)}.code-editor-tool-main{min-width:0;width:100%}body .code-editor-page>.container{max-width:1680px;width:min(100% - 32px,1680px)}body .code-editor-page .code-editor-content-layout{margin:52px auto 0;width:min(100%,1320px)}.code-studio{--studio-bg:#fff;--studio-panel:#fbfcfe;--studio-line:#dfe5ed;--studio-muted:#64748b;--studio-text:#243149;background:#fff!important;border:1px solid #d9e0e9!important;border-radius:18px!important;box-shadow:0 18px 45px rgba(15,23,42,.08)!important;overflow:hidden;padding:0!important;position:relative}.studio-toolbar{align-items:center;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;gap:1rem;justify-content:space-between;min-height:64px;padding:.7rem .85rem .7rem 1rem}.code-studio .tool-ui__header{flex-direction:row;margin:0}.studio-project .tool-ui__title{color:inherit;font-size:.92rem;line-height:1.25;margin:0;white-space:nowrap}.studio-project{align-items:center;color:#0f172a;display:flex;gap:.7rem;min-width:0}.studio-project__icon{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:11px;box-shadow:0 7px 18px rgba(79,70,229,.25);display:grid;height:38px;place-items:center;width:38px}.studio-project__icon svg{fill:none;height:21px;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:21px}.studio-project>div{display:flex;flex-direction:column;min-width:0}.studio-project span:not(.studio-project__icon){color:#64748b;font-size:.7rem;margin-top:.1rem}.studio-actions{display:flex;flex-wrap:wrap;justify-content:flex-end}.studio-actions,.studio-btn{align-items:center;gap:.45rem}.studio-btn{background:none;border:1px solid transparent;border-radius:10px;color:#334155;cursor:pointer;display:inline-flex;font:700 .78rem/1 inherit;height:38px;justify-content:center;padding:0 .8rem;transition:.2s ease;white-space:nowrap}.studio-btn svg{fill:none;height:16px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:16px}.studio-btn--ghost{background:#fff;border-color:#e2e8f0}.studio-btn--ghost:hover{background:#f8faff;border-color:#a5b4fc;color:#4338ca}.studio-btn--run{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 7px 18px rgba(79,70,229,.23);color:#fff;height:40px;padding:0 1rem}.studio-btn--run:hover{box-shadow:0 10px 24px rgba(79,70,229,.3);transform:translateY(-1px)}.studio-btn--run svg{fill:currentColor;stroke:none;width:14px}.studio-btn kbd{background:hsla(0,0%,100%,.16);border-radius:5px;color:#ede9fe;font:600 .62rem/1 inherit;padding:.16rem .32rem}.auto-run-toggle{align-items:center;color:#475569;cursor:pointer;display:flex;font-size:.75rem;font-weight:700;gap:.45rem;height:38px;padding:0 .65rem;white-space:nowrap}.auto-run-toggle input{opacity:0;pointer-events:none;position:absolute}.auto-run-toggle__track{background:#cbd5e1;border-radius:99px;height:18px;padding:2px;transition:.2s;width:32px}.auto-run-toggle__track:after{background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(15,23,42,.25);content:"";display:block;height:14px;transition:.2s;width:14px}.auto-run-toggle input:checked+.auto-run-toggle__track{background:#6366f1}.auto-run-toggle input:checked+.auto-run-toggle__track:after{transform:translateX(14px)}.studio-viewbar{align-items:center;background:#f8fafc;border-bottom:1px solid #dce3ed;color:#64748b;display:flex;gap:12px;min-height:48px;padding:6px 10px}.studio-device-switch,.studio-view-switch{align-items:center;background:#fff;border:1px solid #dce3ed;border-radius:10px;box-shadow:0 1px 2px rgba(15,23,42,.03);display:flex;padding:3px}.studio-device-switch button,.studio-view-switch button{align-items:center;background:transparent;border:0;border-radius:7px;color:#64748b;cursor:pointer;display:inline-flex;font:700 .7rem/1 inherit;gap:6px;height:30px;justify-content:center;padding:0 10px;transition:background .18s,color .18s,box-shadow .18s;white-space:nowrap}.studio-device-switch button:hover,.studio-view-switch button:hover{background:#f1f5ff;color:#315bea}.studio-device-switch button.is-active,.studio-view-switch button.is-active{background:#315bea;box-shadow:0 4px 10px rgba(49,91,234,.2);color:#fff}.studio-device-switch svg,.studio-view-switch svg{fill:none;height:15px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9;width:15px}.studio-device-switch{margin-left:auto}.studio-device-switch button{padding:0;width:32px}.studio-device-switch button:first-child{max-width:190px;padding:0 8px;width:auto}.studio-device-menu-trigger>span{max-width:125px;overflow:hidden;text-overflow:ellipsis}.studio-device-menu-chevron{height:12px!important;transition:transform .18s;width:12px!important}.studio-device-menu-trigger[aria-expanded=true] .studio-device-menu-chevron{transform:rotate(180deg)}.studio-viewbar__hint{color:#8492a8;font-size:.66rem}.sr-only{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.studio-workspace{background:#fff;display:flex;height:clamp(580px,72vh,760px);min-height:440px;width:100%}.editor-pane{background:#fbfcfe;display:flex;flex-direction:column;min-width:180px;overflow:hidden;width:52%}.file-tabs,.preview-tabs{align-items:stretch;background:#f5f7fa;border-bottom:1px solid var(--studio-line);display:flex;height:44px;min-height:44px;overflow-x:auto;scrollbar-width:none}.file-tabs::-webkit-scrollbar,.preview-tabs::-webkit-scrollbar{display:none}.file-tab,.preview-tab{align-items:center;background:#f5f7fa;border:0;border-right:1px solid var(--studio-line);color:#66758a;cursor:pointer;display:inline-flex;font:650 .74rem/1 inherit;gap:.45rem;padding:0 .9rem;position:relative;white-space:nowrap}.file-tab:hover,.preview-tab:hover{background:#eef2f8;color:#263650}.file-tab.is-active,.preview-tab.is-active{background:#fff;color:#2149cf}.file-tab.is-active:after,.preview-tab.is-active:after{background:#315bea;content:"";height:2px;left:0;position:absolute;right:0;top:0}.file-tab__type{font:800 .67rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}.file-tab__type--html{color:#fb7185}.file-tab__type--css{color:#60a5fa}.file-tab__type--js{color:#facc15}.copy-code-btn{background:#f5f7fa;border:0;border-left:1px solid var(--studio-line);color:#69778c;cursor:pointer;margin-left:auto;min-width:42px}.copy-code-btn:hover{background:#eaf0ff;color:#315bea}.copy-code-btn svg{fill:none;height:16px;stroke:currentColor;stroke-width:2;width:16px}.editor-mount{flex:1;min-height:0;overflow:hidden}.editor-mount .CodeMirror{background:#fbfcfe;color:#243149;font:500 14px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;height:100%}.editor-mount .CodeMirror-lines{padding:12px 0 40px}.editor-mount .CodeMirror pre{padding:0 12px}.editor-mount .CodeMirror-gutters{background:#f7f9fc;border-right:1px solid #e5eaf1}.editor-mount .CodeMirror-linenumber{color:#9aa5b5;padding:0 10px 0 8px}.editor-mount .CodeMirror-cursor{border-left:2px solid #315bea}.editor-mount .CodeMirror-selected{background:#dce6ff!important}.editor-mount .CodeMirror-activeline-background{background:rgba(49,91,234,.055)}.cm-s-alltoll.CodeMirror{background:#fbfcfe;color:#243149}.cm-s-alltoll .cm-comment{color:#7b8798;font-style:italic}.cm-s-alltoll .cm-keyword,.cm-s-alltoll .cm-tag{color:#d1264d}.cm-s-alltoll .cm-atom,.cm-s-alltoll .cm-number{color:#7c3aed}.cm-s-alltoll .cm-def,.cm-s-alltoll .cm-variable-2{color:#0369a1}.cm-s-alltoll .cm-variable,.cm-s-alltoll .cm-variable-3{color:#243149}.cm-s-alltoll .cm-attribute,.cm-s-alltoll .cm-property{color:#2563eb}.cm-s-alltoll .cm-string,.cm-s-alltoll .cm-string-2{color:#16803a}.cm-s-alltoll .cm-operator{color:#a21caf}.cm-s-alltoll .cm-meta,.cm-s-alltoll .cm-qualifier{color:#a16207}.cm-s-alltoll .cm-builtin{color:#087f8c}.cm-s-alltoll .cm-error{background:#e11d48;color:#fff}.editor-statusbar{align-items:center;background:#fafbfc;border-top:1px solid var(--studio-line);color:#7c899c;display:flex;font-size:.64rem;gap:1rem;height:30px;justify-content:flex-end;min-height:30px;padding:0 .7rem}.editor-statusbar span:first-child{color:#315bea;font-weight:800;margin-right:auto}.workspace-resizer{align-items:center;background:#f1f4fa;border-left:1px solid #d8e0ea;border-right:1px solid #d8e0ea;color:#315bea;cursor:col-resize;display:flex;justify-content:center;min-width:12px;outline:0;overflow:visible;position:relative;touch-action:none;width:12px;z-index:5}.workspace-resizer:before{background:#d8e0ea;bottom:0;content:"";left:50%;position:absolute;top:0;transform:translateX(-50%);width:1px}.workspace-resizer span{background:linear-gradient(180deg,#fff,#eef2ff);border:1px solid #9fb2f6;border-radius:10px;box-shadow:0 7px 20px rgba(15,23,42,.24);display:grid;height:42px;left:50%;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);transition:border-color .18s,box-shadow .18s,transform .18s;width:31px;z-index:2}.workspace-resizer svg{fill:none;height:19px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9;width:19px}.workspace-resizer:focus-visible span,.workspace-resizer:hover span{border-color:#315bea;box-shadow:0 8px 24px rgba(49,91,234,.32);transform:translate(-50%,-50%) scale(1.04)}body.code-studio-resizing,body.code-studio-resizing *{cursor:col-resize!important;user-select:none!important}.preview-pane{background:#fff;display:flex;flex:1;flex-direction:column;min-width:180px;overflow:hidden}.preview-tab,.preview-tabs{background:#f8fafc;border-color:#e2e8f0}.preview-tab{color:#64748b}.preview-tab:hover{background:#f1f5f9;color:#334155}.preview-tab.is-active{background:#fff;color:#0f172a}.preview-tab svg{fill:none;height:16px;stroke:currentColor;stroke-width:2;width:16px}.console-count{background:#e2e8f0;border-radius:99px;color:#475569;display:inline-grid;font-size:.62rem;height:18px;min-width:18px;padding:0 5px;place-items:center}.console-count.has-errors{background:#fee2e2;color:#dc2626}.preview-result-size{align-items:center;background:#fff;border:1px solid #dce3ed;border-radius:7px;box-shadow:0 1px 2px rgba(15,23,42,.03);color:#64748b;cursor:pointer;display:inline-flex;font:650 .7rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;gap:4px;height:28px;margin:auto 8px auto auto;padding:0 8px;white-space:nowrap}.preview-result-size:hover,.preview-result-size[aria-expanded=true]{background:#f3f6ff;border-color:#aebef7;color:#315bea}.preview-result-size strong{color:#334155;font:800 inherit;font-variant-numeric:tabular-nums}.preview-result-size>svg{fill:none;height:12px;stroke:currentColor;stroke-width:2;transition:transform .18s;width:12px}.preview-result-size[aria-expanded=true]>svg{transform:rotate(180deg)}.preview-actions{align-items:center;display:flex;flex:0 0 auto}.preview-actions button{background:#f8fafc;border:0;border-left:1px solid #e2e8f0;color:#64748b;cursor:pointer;height:43px;width:40px}.preview-actions button:hover{background:#eef2ff;color:#4f46e5}.preview-actions svg{fill:none;height:16px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:16px}.preview-stage{background:#e8edf5;display:flex;flex:1;justify-content:center;min-height:0;overflow:auto;padding:12px;position:relative}.preview-stage:before{color:#94a3b8;content:"Đang chạy bản xem trước…";display:grid;font-size:.78rem;inset:0;place-items:center;position:absolute}.preview-device-shell{background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 8px 22px rgba(15,23,42,.09);display:flex;flex-direction:column;height:100%;min-height:300px;overflow:hidden;position:relative;transition:width .28s ease,border-radius .28s ease,box-shadow .28s ease;width:100%;z-index:1}.preview-browserbar{align-items:center;background:#f8fafc;border-bottom:1px solid #e2e8f0;color:#94a3b8;display:flex;font:650 .57rem/1 inherit;gap:8px;height:31px;min-height:31px;padding:0 9px}.preview-browserbar__dots{display:flex;gap:4px}.preview-browserbar__dots i{background:#cbd5e1;border-radius:50%;height:6px;width:6px}.preview-browserbar__dots i:first-child{background:#fb7185}.preview-browserbar__dots i:nth-child(2){background:#fbbf24}.preview-browserbar__dots i:nth-child(3){background:#34d399}.preview-browserbar__address{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:5px;color:#7b8aa2;display:flex;flex:1;gap:4px;height:20px;min-width:0;overflow:hidden;padding:0 7px;text-overflow:ellipsis;white-space:nowrap}.preview-browserbar__address svg{fill:none;flex:0 0 auto;height:10px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:10px}.preview-stage iframe{background:#fff;border:0;display:block;flex:1;height:100%;min-height:0;width:100%}.preview-stage[hidden]{display:none}.preview-pane.is-device-fixed .preview-device-shell{border-radius:14px;box-shadow:0 14px 34px rgba(15,23,42,.18);flex:0 0 auto;height:calc(var(--preview-device-height) + 33px);max-width:none;width:calc(var(--preview-device-width) + 2px)}.studio-workspace.is-view-code .editor-pane{flex:1;width:100%!important}.studio-workspace.is-view-code .preview-pane,.studio-workspace.is-view-code .workspace-resizer,.studio-workspace.is-view-result .editor-pane,.studio-workspace.is-view-result .workspace-resizer{display:none}.studio-workspace.is-view-result .preview-pane{flex:1;min-width:0;width:100%}.console-panel{background:#0b1120;color:#d8e1ee;display:flex;flex:1;flex-direction:column;min-height:0}.console-panel[hidden]{display:none}.console-toolbar{align-items:center;border-bottom:1px solid #243047;color:#94a3b8;display:flex;font-size:.7rem;font-weight:700;height:36px;justify-content:space-between;min-height:36px;padding:0 .75rem}.console-toolbar button{background:transparent;border:0;color:#94a3b8;cursor:pointer;font-size:.68rem}.console-toolbar button:hover{color:#fff}.console-output{flex:1;font:500 12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto;padding:.45rem 0}.console-empty{color:#64748b;padding:.7rem 1rem}.console-line{border-bottom:1px solid rgba(71,85,105,.23);display:grid;gap:.5rem;grid-template-columns:18px minmax(0,1fr) auto;overflow-wrap:anywhere;padding:.38rem .75rem;white-space:pre-wrap}.console-line__icon{font-weight:900}.console-line__time{color:#53637a;font-size:.62rem}.console-line--log .console-line__icon{color:#60a5fa}.console-line--info .console-line__icon{color:#22d3ee}.console-line--warn{background:rgba(245,158,11,.06);color:#fde68a}.console-line--warn .console-line__icon{color:#f59e0b}.console-line--error{background:rgba(239,68,68,.08);color:#fca5a5}.console-line--error .console-line__icon{color:#f43f5e}.studio-toast{background:#0f172a;border-radius:9px;bottom:1rem;box-shadow:0 10px 26px rgba(15,23,42,.3);color:#fff;font-size:.73rem;font-weight:700;opacity:0;padding:.55rem .8rem;pointer-events:none;position:absolute;right:1rem;transform:translateY(8px);transition:.2s;z-index:10}.studio-toast.is-visible{opacity:1;transform:none}.code-share-modal[hidden],.code-share-notice[hidden]{display:none!important}.code-share-notice{align-items:center;background:#edf3ff;border-bottom:1px solid #bfd0ff;color:#2447b8;display:flex;font-size:.7rem;gap:8px;min-height:40px;padding:7px 13px}.code-share-notice svg{fill:none;flex:0 0 16px;height:16px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:16px}.code-share-notice span{color:#687792}.code-studio.is-share-preview #consoleToggle,.code-studio.is-share-preview #downloadCodeBtn,.code-studio.is-share-preview .studio-view-switch [data-studio-view=code],.code-studio.is-share-preview .studio-view-switch [data-studio-view=split],.code-studio.is-share-preview .studio-viewbar__hint,.code-studio.is-shared-session #runCodeBtn,.code-studio.is-shared-session .auto-run-toggle{display:none}.preview-device-menu[hidden]{display:none!important}.preview-device-menu{background:#fff;border:1px solid #d8e0ea;border-radius:13px;box-shadow:0 22px 60px rgba(15,23,42,.24);color:#243149;font-family:inherit;max-height:min(620px,calc(100dvh - 16px));overflow:auto;position:fixed;scrollbar-width:thin;width:270px;z-index:2147483500}.preview-device-menu>header{backdrop-filter:blur(8px);background:hsla(0,0%,100%,.96);border-bottom:1px solid #e5eaf1;display:grid;gap:2px;padding:12px 14px 10px;position:sticky;top:0;z-index:2}.preview-device-menu>header strong{font-size:12px}.preview-device-menu>header span{color:#7b8798;font-size:9.5px}.preview-device-menu>div{padding:6px}.preview-device-menu__item{align-items:center;background:transparent;border:0;border-radius:7px;color:#334155;cursor:pointer;display:grid;font-size:11.5px;gap:5px;grid-template-columns:20px minmax(0,1fr) auto;min-height:34px;padding:6px 8px;text-align:left;width:100%}.preview-device-menu__item:focus-visible,.preview-device-menu__item:hover{background:#edf2ff;color:#2149cf;outline:0}.preview-device-menu__item small{color:#8a96a8;font:600 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.preview-device-menu__check{color:transparent;font-size:14px;font-weight:800}.preview-device-menu__item.is-selected{background:#f3f6ff;color:#2149cf;font-weight:750}.preview-device-menu__item.is-selected .preview-device-menu__check{color:#315bea}.preview-custom-device{backdrop-filter:blur(9px);background:rgba(248,250,252,.98);border-top:1px solid #e2e8f0;bottom:0;margin:0;padding:9px;position:sticky;z-index:3}.preview-custom-device.is-active{box-shadow:inset 3px 0 #315bea}.preview-custom-device__title{align-items:center;display:flex;justify-content:space-between;margin-bottom:7px}.preview-custom-device__title strong{color:#334155;font-size:10.5px}.preview-custom-device__title span{color:#94a3b8;font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.preview-custom-device__controls{align-items:center;display:grid;gap:5px;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) auto}.preview-custom-device label{align-items:center;background:#fff;border:1px solid #d8e0ea;border-radius:7px;display:flex;gap:3px;height:30px;min-width:0;padding-left:6px}.preview-custom-device label:focus-within{border-color:#315bea;box-shadow:0 0 0 2px rgba(49,91,234,.11)}.preview-custom-device label>span{color:#94a3b8;font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.preview-custom-device input{-moz-appearance:textfield;background:transparent;border:0;color:#243149;font:750 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;height:26px;min-width:0;outline:0;padding:0 4px;width:100%}.preview-custom-device input::-webkit-inner-spin-button{margin:0;opacity:.35}.preview-custom-device button{border:0;border-radius:7px;cursor:pointer;height:30px}.preview-custom-device__swap{background:#e9eef6;color:#64748b;display:grid;place-items:center;width:28px}.preview-custom-device__swap:hover{background:#e3eaff;color:#315bea}.preview-custom-device__swap svg{fill:none;height:14px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:14px}.preview-custom-device__apply{background:#315bea;color:#fff;font-size:9.5px;font-weight:800;padding:0 8px}.preview-custom-device__apply:hover{background:#244bd1}body.code-share-open{overflow:hidden}.code-share-modal{display:grid;font-family:inherit;inset:0;isolation:isolate;padding:20px;place-items:center;position:fixed;z-index:2147483600}.code-share-modal button,.code-share-modal input{font:inherit}.code-share-modal svg{fill:none;height:18px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:18px}.code-share-modal__backdrop{backdrop-filter:blur(7px) saturate(.8);background:rgba(8,15,29,.62);border:0;cursor:default;inset:0;position:absolute}.code-share-dialog{background:#fff;border:1px solid rgba(217,225,236,.96);border-radius:22px;box-shadow:0 32px 90px rgba(4,12,28,.36);color:#172033;max-height:calc(100dvh - 32px);overflow:auto;position:relative;scrollbar-width:thin;width:min(760px,calc(100vw - 32px))}.code-share-dialog>header{align-items:center;background:linear-gradient(120deg,#fff,#f8faff);border-bottom:1px solid #e7ebf1;display:flex;gap:18px;justify-content:space-between;padding:19px 22px 17px}.code-share-heading{align-items:center;display:flex;gap:12px;min-width:0}.code-share-heading__icon{background:linear-gradient(135deg,#315bea,#6b4cf6);border-radius:13px;box-shadow:0 9px 20px rgba(49,91,234,.24);color:#fff;display:grid;flex:0 0 42px;height:42px;place-items:center;width:42px}.code-share-heading>div>span{color:#315bea;display:block;font-size:9px;font-weight:800;letter-spacing:.16em;margin-bottom:3px}.code-share-dialog h2{color:#111827;font-size:21px;line-height:1.2;margin:0}.code-share-close{background:#fff;border:1px solid #dfe5ed;border-radius:11px;color:#56657a;cursor:pointer;display:grid;flex:0 0 38px;height:38px;place-items:center;width:38px}.code-share-close:hover{background:#fff4f4;border-color:#fecaca;color:#dc2626}.code-share-intro{color:#617087;font-size:12.5px;line-height:1.6;margin:0;padding:15px 22px 1px}.code-share-options{border:0;display:grid;gap:10px;margin:0;padding:14px 22px 5px}.code-share-options legend{color:#344258;font-size:12px;font-weight:800;margin-bottom:6px}.code-share-modes{grid-template-columns:1fr 1fr}.code-share-options label{align-items:flex-start;background:#fff;border:1px solid #dfe5ed;border-radius:14px;cursor:pointer;display:flex;gap:10px;min-width:0;position:relative;transition:.18s}.code-share-options label:hover{background:#fafbff;border-color:#aebef7;transform:translateY(-1px)}.code-share-options label:has(input:checked){background:linear-gradient(135deg,#f2f6ff,#f8f6ff);border-color:#315bea;box-shadow:inset 0 0 0 1px #315bea,0 8px 20px rgba(49,91,234,.08)}.code-share-options input{opacity:0;pointer-events:none;position:absolute}.code-share-modes label{min-height:86px;padding:15px 38px 14px 14px}.code-share-modes label:after{background:#fff;border:2px solid #b7c2d2;border-radius:50%;box-sizing:border-box;content:"";height:16px;position:absolute;right:14px;top:14px;width:16px}.code-share-options label:has(input:checked):after{border:5px solid #315bea}.code-share-option__icon{background:#eaf0ff;border-radius:10px;color:#315bea;display:grid;flex:0 0 34px;height:34px;place-items:center;width:34px}.code-share-options strong{color:#1e293b;display:block;font-size:12.5px}.code-share-options small{color:#718096;display:block;font-size:10.5px;line-height:1.45;margin-top:4px}.code-share-linkbox{background:#f3f6ff;border:1px solid #cbd8ff;border-radius:13px;margin:14px 22px 0;padding:12px}.code-share-linkbox>div:first-child{color:#344258;display:flex;font-size:10.5px;gap:12px;justify-content:space-between;margin-bottom:8px}.code-share-linkbox>div:first-child span{color:#315bea}.code-share-linkbox>div:first-child span.is-error{color:#dc2626}.code-share-linkrow{display:flex;gap:8px}.code-share-linkrow input{background:#fff;border:1px solid #d7deea;border-radius:8px;color:#334155;flex:1;font-size:11px;height:40px;min-width:0;outline:0;padding:0 11px}.code-share-linkrow input:focus{border-color:#315bea;box-shadow:0 0 0 3px rgba(49,91,234,.12)}.code-share-linkrow button{align-items:center;background:#fff;border:1px solid #d7deea;border-radius:8px;color:#43516a;cursor:pointer;display:inline-flex;gap:6px;height:40px;padding:0 13px}.code-share-linkrow button:disabled{cursor:not-allowed;opacity:.5}.code-share-privacy{align-items:flex-start;color:#718096;display:flex;font-size:10px;gap:7px;line-height:1.5;margin:0;padding:11px 22px 13px}.code-share-privacy svg{color:#2d9d67;flex:0 0 15px;height:15px;width:15px}.code-share-dialog>footer{background:#fbfcfe;border-top:1px solid #e7ebf1;display:flex;gap:8px;justify-content:flex-end;padding:12px 22px}.code-share-dialog>footer button{align-items:center;border-radius:9px;cursor:pointer;display:inline-flex;font-size:11.5px;font-weight:750;gap:7px;justify-content:center;min-height:38px;padding:0 13px}.code-share-secondary{background:#fff;border:1px solid #dfe5ed;color:#4b5b72}.code-share-primary{background:#315bea;border:1px solid #315bea;box-shadow:0 7px 16px rgba(49,91,234,.22);color:#fff}.code-share-primary:disabled{cursor:wait;opacity:.65}.code-share-dialog button:focus-visible,.code-share-dialog input:focus-visible,.code-share-options label:has(input:focus-visible){outline:3px solid rgba(49,91,234,.2);outline-offset:2px}[data-theme=dark] .studio-toolbar{background:#111827;border-color:#334155}[data-theme=dark] .studio-project{color:#f8fafc}[data-theme=dark] .studio-btn--ghost{background:#172033;border-color:#334155;color:#cbd5e1}[data-theme=dark] .auto-run-toggle{color:#cbd5e1}[data-theme=dark] .studio-viewbar{background:#101827;border-color:#334155}[data-theme=dark] .studio-device-switch,[data-theme=dark] .studio-view-switch{background:#172033;border-color:#334155}[data-theme=dark] .studio-device-switch button,[data-theme=dark] .studio-view-switch button{color:#aebbd0}[data-theme=dark] .preview-result-size{background:#172033;border-color:#334155;color:#94a3b8}[data-theme=dark] .preview-result-size strong{color:#e2e8f0}[data-theme=dark] .preview-device-menu{background:#172033;border-color:#334155;color:#e2e8f0}[data-theme=dark] .preview-device-menu>header{background:rgba(23,32,51,.96);border-color:#334155}[data-theme=dark] .preview-device-menu__item{color:#cbd5e1}[data-theme=dark] .preview-device-menu__item.is-selected,[data-theme=dark] .preview-device-menu__item:hover{background:#273653;color:#fff}[data-theme=dark] .preview-custom-device{background:rgba(15,23,42,.98);border-color:#334155}[data-theme=dark] .preview-custom-device__title strong{color:#e2e8f0}[data-theme=dark] .preview-custom-device label{background:#172033;border-color:#3b475a}[data-theme=dark] .preview-custom-device input{color:#f8fafc}[data-theme=dark] .preview-custom-device__swap{background:#273449;color:#cbd5e1}[data-theme=dark] .cm-s-alltoll.CodeMirror,[data-theme=dark] .editor-mount .CodeMirror,[data-theme=dark] .editor-pane{background:#111827;color:#e5edf8}[data-theme=dark] .copy-code-btn,[data-theme=dark] .editor-statusbar,[data-theme=dark] .file-tab,[data-theme=dark] .file-tabs{background:#172033;border-color:#334155;color:#94a3b8}[data-theme=dark] .file-tab.is-active{background:#111827;color:#f8fafc}[data-theme=dark] .editor-mount .CodeMirror-gutters{background:#0f172a;border-color:#334155}[data-theme=dark] .editor-mount .CodeMirror-linenumber{color:#64748b}[data-theme=dark] .cm-s-alltoll .cm-variable,[data-theme=dark] .cm-s-alltoll .cm-variable-3{color:#e5edf8}[data-theme=dark] .workspace-resizer{background:#0b1220;border-color:#334155}@media(max-width:900px){body .code-editor-page>.container{padding-left:0;padding-right:0;width:calc(100% - 20px)}.studio-toolbar{align-items:flex-start}.studio-project{padding-top:.1rem}.studio-actions{gap:.3rem}.studio-btn kbd,.studio-viewbar__hint{display:none}.studio-workspace{height:560px;min-height:0}.editor-pane,.preview-pane{min-width:0}.workspace-resizer{display:none}.studio-workspace.is-view-split{display:block;height:auto}.studio-workspace.is-view-split .editor-pane,.studio-workspace.is-view-split .preview-pane{height:470px;width:100%!important}.studio-workspace.is-view-split .preview-pane{border-top:1px solid #d8e0ea}.studio-workspace.is-view-code .editor-pane,.studio-workspace.is-view-result .preview-pane{height:100%}}@media(max-width:620px){.code-editor-page .main-column .tool-ui.code-studio{margin-inline:-8px;width:calc(100% + 16px)}.code-studio{border-radius:14px!important}.studio-toolbar{display:block;padding:.65rem}.studio-project{margin-bottom:.6rem}.studio-actions{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:.1rem}.studio-actions::-webkit-scrollbar,.studio-viewbar::-webkit-scrollbar{display:none}.auto-run-toggle{padding:0 .35rem}.studio-btn{padding:0 .62rem}.studio-btn--ghost span{display:none}.studio-btn--run{margin-left:auto}.studio-viewbar{gap:7px;overflow-x:auto;padding:6px;scrollbar-width:none}.studio-device-switch,.studio-view-switch{flex:0 0 auto}.studio-view-switch button{padding:0 8px}.studio-device-menu-chevron,.studio-device-switch button:first-child span{display:none}.studio-device-switch button:first-child{padding:0;width:32px}.file-tab{font-size:.7rem;padding:0 .7rem}.studio-workspace{height:540px}.studio-workspace.is-view-split .editor-pane{height:410px}.studio-workspace.is-view-split .preview-pane{height:470px}.editor-statusbar{gap:.65rem}.editor-statusbar span:nth-last-child(-n+2){display:none}.editor-mount .CodeMirror{font-size:12px}.preview-result-size{margin-right:4px;padding:0 6px}.preview-result-size>span{display:none}.preview-stage{padding:8px}.preview-browserbar__address{max-width:180px}.preview-device-menu{width:min(270px,calc(100vw - 16px))}.code-share-notice{align-items:flex-start;flex-wrap:wrap;font-size:.65rem;padding:8px 10px}.code-share-notice span{margin-left:24px;margin-top:-5px;width:calc(100% - 24px)}.code-share-modal{padding:8px}.code-share-dialog{border-radius:17px;max-height:calc(100dvh - 16px);width:calc(100vw - 16px)}.code-share-dialog>header{padding:14px}.code-share-heading__icon{flex-basis:36px;height:36px;width:36px}.code-share-dialog h2{font-size:18px}.code-share-intro{font-size:11.5px;padding:12px 14px 0}.code-share-options{padding:12px 14px 3px}.code-share-modes{grid-template-columns:1fr}.code-share-modes label{min-height:72px;padding:12px 34px 11px 11px}.code-share-linkbox{margin:11px 14px 0;padding:10px}.code-share-linkbox>div:first-child{display:block}.code-share-linkbox>div:first-child span{display:block;margin-top:3px}.code-share-linkrow button span{display:none}.code-share-linkrow button{justify-content:center;padding:0;width:40px}.code-share-dialog>footer,.code-share-privacy{padding:10px 14px}.code-share-dialog>footer button{padding:0 10px}}.fullscreen-icon--exit,.fullscreen-toggle[aria-pressed=true] .fullscreen-icon--enter{display:none}.fullscreen-toggle[aria-pressed=true] .fullscreen-icon--exit{display:block}.studio-btn.fullscreen-toggle.is-active{background:#315bea;border-color:#315bea;color:#fff}.preview-actions .fullscreen-toggle.is-active{background:#315bea;color:#fff}.code-studio:fullscreen{background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex!important;flex-direction:column;height:100dvh!important;margin:0!important;max-height:none!important;max-width:none!important;width:100vw!important}.code-studio:fullscreen .code-share-notice,.code-studio:fullscreen .studio-toolbar,.code-studio:fullscreen .studio-viewbar{flex:0 0 auto}.code-studio:fullscreen .studio-workspace{flex:1 1 auto;height:auto!important;min-height:0!important}.code-studio:fullscreen .studio-toast{position:fixed;z-index:2147483600}.preview-pane:fullscreen{background:#e8edf5;border:0!important;display:flex!important;flex-direction:column;height:100dvh!important;max-height:none!important;max-width:none!important;width:100vw!important}.preview-pane:fullscreen .preview-tabs{flex:0 0 auto}.preview-pane:fullscreen .preview-stage{flex:1 1 auto;min-height:0}.preview-pane:fullscreen:not(.is-device-fixed) .preview-device-shell{height:100%;width:100%}@media(max-width:900px){.code-studio:fullscreen .studio-workspace.is-view-split{display:block!important;overflow:auto}.code-studio:fullscreen .studio-workspace.is-view-split .editor-pane,.code-studio:fullscreen .studio-workspace.is-view-split .preview-pane{height:min(70vh,620px)}}