.st-ide.st-design .logo img{width:22px;height:22px;display:block}.st-ide.st-design .comps{display:block}.st-ide.st-design .tree,.st-ide.st-design.lt-files .comps{display:none}.st-ide.st-design.lt-files .tree{display:block}.st-ide.st-design .v-canvas{flex-direction:column;align-items:center;padding:14px 16px;transition:background .4s;display:flex;position:absolute;inset:0;overflow:hidden}.st-ide.st-design.mode-preview .v-canvas{background:#0a0f1c}.st-ide.st-design .cv-bar{color:#8e97ab;align-self:stretch;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;display:flex}.st-ide.st-design .cv-bar b{color:#e6e9f0}.st-ide.st-design .cv-bar .sp{flex:1}.st-ide.st-design .seg{border:1px solid var(--i-line);border-radius:7px;display:flex;overflow:hidden}.st-ide.st-design .seg span{color:#9aa3b8;align-items:center;gap:5px;padding:4px 9px;font-size:11.5px;transition:all .3s;display:flex}.st-ide.st-design .seg span.on{background:var(--i-blue2);color:#0b1220;font-weight:700}.st-ide.st-design .pvtools{align-items:center;gap:8px;display:none}.st-ide.st-design.mode-preview .pvtools{display:flex}.st-ide.st-design.mode-preview .cv-edit{display:none}.st-ide.st-design .frame{width:100%;max-width:100%;min-height:0;transition:max-width .7s var(--ease), background .5s;background:#eef1f6;border-left:3px solid #2dd4bf;border-radius:8px;flex:1;padding:14px;overflow:hidden}.st-ide.st-design.mode-preview .frame{border-left-color:#0000}.st-ide.st-design.dev-tab .frame{max-width:560px}.st-ide.st-design.dev-phone .frame{max-width:330px}.st-ide.st-design .fcard{color:#1f2937;background:#fff;border-radius:10px;padding:16px 18px;transition:background .5s,color .5s;box-shadow:0 1px 2px #1018280f}.st-ide.st-design .fhead{align-items:center;gap:9px;margin-bottom:14px;font-size:15px;font-weight:700;display:flex}.st-ide.st-design .fhead i{color:#6b7280}.st-ide.st-design .fgrid{grid-template-columns:1fr 1fr;gap:12px 16px;display:grid}.st-ide.st-design.dev-phone .fgrid{grid-template-columns:1fr}.st-ide.st-design .fcard{transition:background .5s, color .5s, transform .6s var(--ease);transform-origin:top}.st-ide.st-design.dev-phone .fcard{transform:scale(.8)}.st-ide.st-design.dev-phone .fgrid{gap:8px}.st-ide.st-design .slot{color:#94a3b8;border:1.5px dashed #cbd5e1;border-radius:8px;place-items:center;min-height:58px;font-size:12px;transition:border-color .3s,background .3s;display:grid;position:relative}.st-ide.st-design .slot.target{border-color:var(--i-blue);color:var(--i-blue);background:#4f8ff714}.st-ide.st-design .slot .fld{width:100%;display:none}.st-ide.st-design .slot.filled{border:0;place-items:stretch stretch;min-height:0}.st-ide.st-design .slot.filled .ph{display:none}.st-ide.st-design .slot.filled .fld{animation:st-popin .45s var(--ease) both;display:block}.st-ide.st-design.dev-phone .slot:not(.filled){display:none}.st-ide.st-design .fld small{color:#374151;margin-bottom:5px;font-size:12px;font-weight:600;display:block}.st-ide.st-design .fld .fin{color:#9ca3af;background:#f9fafb;border:1px solid #e5e7eb;border-radius:7px;justify-content:space-between;align-items:center;height:34px;padding:0 10px;font-size:12.5px;display:flex}.st-ide.st-design .slot.sel .fld{outline:2px solid var(--i-blue);outline-offset:4px;border-radius:6px}.st-ide.st-design .facts{border-top:1px solid #eef1f5;justify-content:flex-end;align-items:center;gap:10px;min-height:52px;margin-top:16px;padding-top:14px;display:flex}.st-ide.st-design .facts .aslot{color:#94a3b8;border:1.5px dashed #cbd5e1;border-radius:8px;flex:1;place-items:center;min-height:38px;font-size:12px;display:grid}.st-ide.st-design .facts .aslot.target{border-color:var(--i-blue);color:var(--i-blue);background:#4f8ff714}.st-ide.st-design.has-btns .facts .aslot,.st-ide.st-design .facts .xb{display:none}.st-ide.st-design.has-btns .facts .xb{animation:st-popin .4s var(--ease) both;display:inline-flex}.st-ide.st-design.dev-phone .facts{flex-direction:column-reverse;align-items:stretch}.st-ide.st-design.dev-phone .facts .xb{justify-content:center}.ds-scope .ans-btn{color:#374151;transition:all .45s var(--ease);background:#f3f4f6;border:1px solid #d1d5db;border-radius:7px;align-items:center;gap:7px;padding:8px 14px;font-size:13px;font-weight:600;display:inline-flex}.ds-scope .ans-btn.ans-brand{color:#fff;background:#ff5a17;border-color:#ff5a17;box-shadow:0 6px 16px -6px #ff5a1799}.ds-scope .ans-btn.ans-brand-soft{color:#c2410c;background:#ffe9e0;border-color:#ffe9e0}.ds-scope .ans-btn.ans-brand-outline{color:#ff5a17;background:0 0;border-color:#ff5a17}.ds-scope .ans-btn.ans-sm{padding:5px 10px;font-size:12px}.ds-scope .ans-btn.ans-lg{padding:11px 20px;font-size:14.5px}.ds-scope .ans-btn.ans-disabled{opacity:.45;filter:grayscale(.4)}.ds-scope .ans-btn .spin{border:2px solid;border-right-color:#0000;border-radius:50%;width:13px;height:13px;animation:.8s linear infinite ds-spin;display:none}.ds-scope .ans-btn.ans-loading .spin{display:inline-block}.ds-scope .ans-btn.ans-loading{opacity:.85}@keyframes ds-spin{to{transform:rotate(360deg)}}.st-ide.st-design .xb.sel{outline:2px solid var(--i-blue);outline-offset:3px}.st-ide.st-design.cv-dark .frame{background:#0f172a}.st-ide.st-design.cv-dark .fcard{color:#e2e8f0;background:#1e293b}.st-ide.st-design.cv-dark .fhead i{color:#94a3b8}.st-ide.st-design.cv-dark .fld small{color:#cbd5e1}.st-ide.st-design.cv-dark .fld .fin{color:#64748b;background:#0f172a;border-color:#334155}.st-ide.st-design.cv-dark .facts{border-top-color:#334155}.st-ide.st-design.cv-dark .ans-btn:not(.ans-brand):not(.ans-brand-outline){color:#e2e8f0;background:#334155;border-color:#334155}.st-ide.st-design .props2{flex-direction:column;gap:6px;display:none}.st-ide.st-design.btn-sel .props2,.st-ide.st-design.fld-sel .props2{display:flex}.st-ide.st-design.btn-sel .rp-empty,.st-ide.st-design.fld-sel .rp-empty,.st-ide.st-design.fld-sel .cls-sec{display:none}.st-ide.st-design .pv2.tr{justify-content:space-between}.st-ide.st-design .chips2{border:1px solid var(--i-line);background:var(--i-bg);border-radius:7px;flex-wrap:wrap;gap:5px;min-height:28px;padding:5px;display:flex}.st-ide.st-design .chip2{font-family:var(--mono);color:#e6e9f0;animation:st-popin .3s var(--ease) both;background:#25304a;border-radius:5px;align-items:center;gap:5px;padding:2px 7px;font-size:11px;display:inline-flex}.st-ide.st-design .chip2 .sw{border-radius:3px;width:9px;height:9px}.st-ide.st-design .chip2 i{color:#8e97ab;font-size:8px}.st-ide.st-design .cin{border:1px solid var(--i-line);background:var(--i-bg);height:28px;font-family:var(--mono);color:#6f788d;border-radius:7px;align-items:center;gap:6px;padding:0 8px;font-size:11.5px;display:flex}.st-ide.st-design .cin.act{border-color:var(--i-blue);color:#e6e9f0}.st-ide.st-design .cin .typed:after{content:"";vertical-align:-2px;background:#fff;width:1.5px;height:12px;margin-left:1px;animation:1s step-end infinite st-blink;display:inline-block}.st-ide.st-design .sugg{border:1px solid var(--i-line);background:#141c30;border-radius:8px;display:none;overflow:hidden;box-shadow:0 14px 30px -12px #000000b3}.st-ide.st-design.show-sugg .sugg{animation:st-popin .25s var(--ease) both;display:block}.st-ide.st-design .sugg .g{letter-spacing:.1em;color:#6f788d;padding:6px 9px 2px;font-size:10px}.st-ide.st-design .sugg .o{align-items:center;gap:8px;padding:5px 9px;font-size:11.5px;display:flex}.st-ide.st-design .sugg .o b{font-family:var(--mono);color:#e6e9f0;font-weight:500}.st-ide.st-design .sugg .o span:last-child{color:#8e97ab;margin-left:auto;font-size:10.5px}.st-ide.st-design .sugg .o .sw{border-radius:3px;flex:none;width:11px;height:11px}.st-ide.st-design .sugg .o.on{background:#4f8ff733}.st-ide.st-design .nocss{color:#34d399;align-items:center;gap:6px;margin-top:2px;font-size:11px;display:flex}.st-ide.st-design .lang-sec{display:none}.st-ide.st-design.show-lang .lang-sec{animation:st-popin .3s var(--ease) both;flex-direction:column;gap:6px;display:flex}.st-ide.st-design .ltab{grid-template-columns:28px 1fr;align-items:center;gap:4px 6px;font-size:11.5px;display:grid}.st-ide.st-design .ltab span{color:#8e97ab;font-family:var(--mono);font-size:10.5px}.st-ide.st-design .ltab b{border:1px solid var(--i-line);background:var(--i-bg);color:#e6e9f0;border-radius:6px;align-items:center;height:26px;padding:0 8px;font-weight:500;display:flex}.st-ide.st-design .ltab b.typing{border-color:var(--i-blue)}.st-ide.st-design .prow{grid-template-columns:62px 1fr}.st-stage.compact .frame{padding:10px}.st-stage.compact .fgrid{gap:10px}.st-stage.compact .cv-bar .seg.lang2{display:none}.st-stage.compact .fgrid{max-height:600px;transition:max-height .5s var(--ease), opacity .4s}.st-stage.compact .st-ide.st-design.btn-sel .fgrid{opacity:0;max-height:0;overflow:hidden}.st-stage.compact .st-ide.st-design.btn-sel .facts{margin-top:0}.st-ide.st-design .dt,.st-ide.st-design .comps{display:block}.st-ide.st-design .cls-sec{flex-direction:column;gap:6px;display:flex}.st-ide.st-design .cls-sec .ph,.st-ide.st-design .lang-sec .ph{margin-top:6px}.st-ide.st-design .cls-l{color:#9aa3b8;font-size:12px}.st-ide.st-design .pv2.lgb{justify-content:center;width:32px}.st-ide.st-design .pvi{color:#34d399}.st-ide.st-design .ghost i{width:auto}.ds-play{grid-template-columns:1fr 1.15fr;align-items:stretch;gap:24px;display:grid}.ds-classes{border:1px solid var(--st-line);background:var(--st-surf);border-radius:12px;padding:18px}.ds-classes .g{font-family:var(--fs-mono);letter-spacing:.12em;color:var(--st-dim);margin:16px 0 8px;font-size:10.5px}.ds-classes .g:first-child{margin-top:0}.ds-classes .row{flex-wrap:wrap;gap:8px;display:flex}.ds-cl{font-family:var(--fs-mono);cursor:pointer;color:var(--st-tx);border:1px solid var(--st-line2);background:0 0;border-radius:7px;align-items:center;gap:7px;padding:7px 11px;font-size:12.5px;transition:border-color .25s,background .25s;display:inline-flex}.ds-cl .sw{border-radius:3px;width:11px;height:11px}.ds-cl[aria-pressed=true]{border-color:color-mix(in oklab, var(--ans-brand) 60%, transparent);background:color-mix(in oklab, var(--ans-brand) 12%, transparent)}.ds-cl:focus-visible{outline:2px solid var(--ans-brand);outline-offset:2px}.ds-out{border:1px solid var(--st-line);background:#eef1f6;border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.ds-out .canvas{flex:1;place-items:center;min-height:220px;padding:30px;display:grid}.ds-out .card{color:#1f2937;background:#fff;border-radius:10px;width:min(420px,100%);padding:18px 20px;box-shadow:0 1px 3px #10182814}.ds-out .card p{color:#4b5563;margin:0 0 14px;font-size:13.5px}.ds-out .acts{justify-content:flex-end;gap:10px;display:flex}.ds-out pre{font-family:var(--fs-mono);color:#cbd5e1;white-space:pre-wrap;word-break:break-word;background:#0b1020;margin:0;padding:12px 16px;font-size:12.5px}.ds-out pre .k{color:#7dd3fc}.ds-out pre .s{color:#fbbf24}.ds-out .note{color:#34d399;background:#0b1020;border-top:1px solid #ffffff0f;align-items:center;gap:8px;padding:9px 16px;font-size:12.5px;display:flex}.ds-rsp{grid-template-columns:300px 1fr;align-items:center;gap:36px;display:grid}.ds-tabs{gap:8px;display:grid}.ds-tabs button{text-align:left;cursor:pointer;font:inherit;color:var(--st-mu);border:1px solid var(--st-line);background:var(--st-surf);border-radius:12px;align-items:center;gap:14px;padding:12px 14px;transition:all .3s;display:flex}.ds-tabs button i{text-align:center;width:22px;font-size:17px}.ds-tabs button b{color:var(--st-tx);font-size:15px;display:block}.ds-tabs button small{font-family:var(--fs-mono);color:var(--st-dim);font-size:11px}.ds-tabs button[aria-selected=true]{color:var(--ans-brand);border-color:color-mix(in oklab, var(--ans-brand) 55%, transparent);background:color-mix(in oklab, var(--ans-brand) 10%, transparent)}.ds-tabs button:focus-visible{outline:2px solid var(--ans-brand);outline-offset:2px}.ds-list{gap:9px;min-height:96px;margin:18px 0 0;padding:0;list-style:none;display:grid}.ds-list li{align-items:flex-start;gap:10px;font-size:14px;display:flex}.st-page.is-live .ds-list li{animation:st-popin .45s var(--ease) both}.ds-list li i{color:var(--st-ok);margin-top:4px;font-size:12px}.ds-a11y{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.ds-a11y span{border:1px solid var(--st-line2);border-radius:999px;align-items:center;gap:7px;padding:5px 11px;font-size:12.5px;display:inline-flex}.ds-a11y i{color:var(--st-ok);font-size:11px}.ds-stage{background:radial-gradient(60% 60% at 50% 45%,#6f5bff1f,#0000 70%),radial-gradient(40% 40% at 60% 70%,#ff5a1714,#0000 70%);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;height:640px;display:flex;position:relative;overflow:hidden}.ds-scale{transform-origin:50%;transition:transform .7s var(--ease);flex-direction:column;align-items:center;display:flex}.ds-device{--dw:760px;--dh:470px;--bz:11px;--rad:14px;width:var(--dw);height:var(--dh);padding:var(--bz);border-radius:var(--rad);transition:width .8s var(--ease), height .8s var(--ease), padding .8s var(--ease), border-radius .8s var(--ease);background:linear-gradient(145deg,#2a3247,#141a2b);position:relative;box-shadow:inset 0 0 0 1px #ffffff14,0 40px 80px -30px #0009}.ds-device.tab{--dw:440px;--dh:590px;--bz:14px;--rad:28px}.ds-device.phone{--dw:268px;--dh:556px;--bz:10px;--rad:40px}.ds-device .cam{left:50%;top:calc(var(--bz) / 2 - 2px);width:5px;height:5px;transition:all .8s var(--ease);background:#0b0f1a;border-radius:50%;margin-left:-2.5px;position:absolute;box-shadow:0 0 0 1px #ffffff14}.ds-device.phone .cam{z-index:3;background:#05070d;border-radius:999px;width:64px;height:18px;margin-left:-32px;top:16px}.ds-device .screen{border-radius:calc(var(--rad) - var(--bz) + 2px);width:100%;height:100%;transition:border-radius .8s var(--ease);background:#f3f5f9;overflow:hidden;container-type:inline-size}.ds-stand{height:76px;transition:opacity .4s, height .6s var(--ease);flex-direction:column;align-items:center;display:flex}.ds-stand .neck{clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:linear-gradient(#232a3d,#171d2e);width:96px;height:56px}.ds-stand .base{background:#1d2436;border-radius:6px;width:210px;height:9px;box-shadow:0 10px 22px -8px #0009}.ds-stage.no-stand .ds-stand{opacity:0;height:0}.ds-app{color:#1f2937;text-align:left;flex-direction:column;height:100%;font-family:Segoe UI,system-ui,sans-serif;font-size:12px;display:flex}.ds-app .top{background:#fff;border-bottom:1px solid #e5e7eb;flex:none;align-items:center;gap:10px;height:42px;padding:0 12px;display:flex}.ds-app .wm{width:auto;height:18px;display:block}.ds-app .search{color:#94a3b8;background:#f1f5f9;border-radius:7px;align-items:center;gap:7px;width:220px;height:28px;margin-left:10px;padding:0 10px;font-size:11.5px;display:flex}.ds-app .spx{flex:1}.ds-app .bell{color:#64748b}.ds-app .av{color:#c2410c;background:#ffe9e0;border-radius:50%;place-items:center;width:26px;height:26px;font-size:10.5px;font-weight:700;display:grid}.ds-app .main{flex-direction:column;flex:1;min-height:0;padding:14px 16px;display:flex;overflow:hidden}.ds-app .card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;flex-direction:column;min-height:0;padding:14px 16px;display:flex}.ds-app .head{align-items:center;gap:8px;margin-bottom:12px;font-size:13.5px;display:flex}.ds-app .head i{color:#64748b}.ds-app .badge{color:#475569;background:#f1f5f9;border-radius:999px;margin-left:auto;padding:2px 8px;font-size:10.5px;font-weight:600}.ds-app .grid{grid-template-columns:1fr 1fr;gap:10px 14px;display:grid}.ds-app .f.wide{grid-column:1/-1}.ds-app .f small{color:#374151;margin-bottom:4px;font-size:11px;font-weight:600;display:block}.ds-app .in{white-space:nowrap;color:#111827;background:#f9fafb;border:1px solid #e5e7eb;border-radius:7px;justify-content:space-between;align-items:center;height:30px;padding:0 10px;font-size:12px;display:flex;overflow:hidden}.ds-app .in i{color:#94a3b8;font-size:10px}.ds-app .in.area{white-space:normal;align-items:flex-start;height:44px;padding-top:7px}.ds-app .acts{border-top:1px solid #f1f5f9;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:12px;display:flex}.ds-app .acts .ans-btn{justify-content:center;padding:7px 14px;font-size:12px}@container (width<=600px){.ds-app .search{width:150px}.ds-app .in{height:38px;font-size:12.5px}.ds-app .acts .ans-btn{padding:10px 18px;font-size:13px}.ds-app .main{padding:14px 12px}}@container (width<=380px){.ds-app .top{height:64px;padding:22px 12px 0}.ds-app .search{background:0 0;width:auto;margin-left:auto;padding:0}.ds-app .search span,.ds-app .spx,.ds-app .bell{display:none}.ds-app .main{padding:12px 12px 0}.ds-app .card{background:0 0;border:0;border-radius:0;flex:1;min-height:0;padding:0}.ds-app .head{font-size:15px}.ds-app .grid{grid-template-columns:1fr;gap:9px;overflow:hidden}.ds-app .in{background:#fff;height:40px;font-size:13px}.ds-app .acts{background:#fff;border-top:1px solid #e5e7eb;grid-template-columns:1fr 1fr;margin:auto -12px 0;padding:10px 12px 16px;display:grid;position:sticky;bottom:0;box-shadow:0 -8px 18px -12px #00000040}.ds-app .acts .ans-btn{padding:11px 0;font-size:13.5px}}@media (width<=960px){.ds-play,.ds-rsp{grid-template-columns:1fr}.ds-tabs{grid-template-columns:repeat(3,1fr)}.ds-tabs button{text-align:center;flex-direction:column;gap:6px}.ds-stage{height:auto;min-height:420px;padding:20px 0}}@media (width<=640px){.ds-tabs button{padding:10px 6px}.ds-tabs button small{display:none}}