.cs-card{background:var(--surface-2);border:1px solid var(--rule);border-radius:12px;margin:2.4rem 0 1.6rem;scroll-margin-top:5rem;position:relative;overflow:hidden}.cs-head{align-items:flex-start;gap:.8rem;padding:.85rem 1rem;display:flex}.cs-titles{flex:1;min-width:0}.cs-card .cs-title{color:var(--fg);margin:0;font-size:15px;font-weight:600;line-height:1.35}.cs-card .cs-desc{color:var(--muted);margin:.2rem 0 0;font-size:.84rem;line-height:1.45}.cs-actions{flex-shrink:0;gap:.35rem;display:flex}.cs-icon{width:32px;height:32px;color:var(--fg);background:var(--bg);border:1px solid var(--rule);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;padding:0;text-decoration:none;transition:border-color .12s,color .12s;display:inline-flex}.cs-icon:hover{color:var(--accent);border-color:var(--accent)}.cs-icon[aria-expanded=true]{color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.cs-icon:focus-visible,.cs-tab:focus-visible,.cs-src pre:focus-visible,.cs-terminal:focus-visible,.cs-notice a:focus-visible,.cs-bar a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.cs-panel{border-top:1px solid var(--rule);background:var(--bg)}.cs-panel:not([hidden]){animation:.18s ease-out cs-open}@keyframes cs-open{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.cs-code{background:var(--bg);position:relative}.cs-tabs-wrap{border-bottom:1px solid var(--rule);position:relative}.cs-tabs{scrollbar-width:none;gap:.2rem;padding:0 .6rem;display:flex;overflow-x:auto}.cs-tabs::-webkit-scrollbar{display:none}.cs-tab{font:500 .8rem/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-bottom:2px solid #0000;flex-shrink:0;padding:.7rem .65rem .6rem}.cs-tab:hover{color:var(--fg)}.cs-tab[aria-selected=true]{color:var(--fg);border-bottom-color:var(--accent)}.cs-tabpanel{position:relative}.cs-copy{z-index:1;position:absolute;top:.5rem;right:.6rem}.cs-src pre{background:var(--bg);max-height:480px;font:400 13px/1.6 var(--mono);white-space:pre;tab-size:4;counter-reset:cs-line;border-radius:0;margin:0;padding:.85rem 3.2rem .85rem 0;overflow:auto}.cs-src pre code{font:inherit;background:0 0;min-width:max-content;padding:0;display:block}.cs-src .line{min-width:100%;padding-right:1rem;display:inline-block}.cs-src .line:before{counter-increment:cs-line;content:counter(cs-line);text-align:right;width:3.2em;color:var(--muted);-webkit-user-select:none;user-select:none;margin-right:.2em;padding-right:1em;display:inline-block}.cs-src .line:last-child:empty{display:none}.cs-src .shiki,.cs-src .shiki span{color:var(--shiki-light)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cs-src .shiki,:root:not([data-theme=light]) .cs-src .shiki span{color:var(--shiki-dark)}}:root[data-theme=dark] .cs-src .shiki,:root[data-theme=dark] .cs-src .shiki span{color:var(--shiki-dark)}.cs-src .cs-plain,.cs-src .cs-plain span{color:var(--fg)}:root:not([data-theme=dark]) .cs-src .shiki span[style*="--shiki-light:#6E7781"]{color:#5c6570}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cs-src .shiki span[style*="--shiki-light:#6E7781"]{color:var(--shiki-dark)}}.cs-notice{border-top:1px solid var(--rule);color:var(--muted);background:var(--bg);margin:0;padding:.6rem 1rem;font-size:.74rem;line-height:1.5}.cs-notice a{color:var(--fg);text-underline-offset:2px;text-decoration:underline}.cs-notice a:hover{color:var(--accent)}.cs-live-inline{border-top:1px solid var(--rule);background:var(--bg)}.cs-frame{background:#fff;border:0;width:100%;display:block}.cs-output{flex-direction:column;gap:.7rem;padding:.8rem 1rem;display:flex}.cs-terminal{max-height:320px;font:400 12.5px/1.55 var(--mono);white-space:pre;color:#e8e4d8;background:#16150f;border-radius:8px;margin:0;padding:.8rem 1rem;overflow:auto}.cs-shot{border:1px solid var(--rule);border-radius:8px;max-width:100%;height:auto;display:block}.cs-badge{font:600 .68rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--surface-2);color:var(--fg);border:1px solid var(--rule);border-radius:4px;align-self:flex-start;padding:.3rem .5rem}.cs-toast{z-index:2;pointer-events:none;font:500 .76rem/1 var(--sans);background:var(--fg);color:var(--bg);opacity:0;border-radius:6px;padding:.5rem .7rem;transition:opacity .15s,transform .15s;position:absolute;top:3.4rem;right:.8rem;transform:translateY(-3px)}.cs-toast[data-show]{opacity:1;transform:none}@media (max-width:767px){.cs-tabs-wrap:before,.cs-tabs-wrap:after{content:"";pointer-events:none;z-index:1;width:1.2rem;position:absolute;top:0;bottom:0}.cs-tabs-wrap:before{background:linear-gradient(to right, var(--bg), transparent);left:0}.cs-tabs-wrap:after{background:linear-gradient(to left, var(--bg), transparent);right:0}.cs-src pre{font-size:12px}.cs-live-inline .cs-frame{max-height:320px}}@media (prefers-reduced-motion:reduce){.cs-panel:not([hidden]){animation:none}.cs-icon,.cs-toast{transition:none}}.cs-viewer{background:var(--bg);flex-direction:column;height:100dvh;display:flex}.cs-bar{border-bottom:1px solid var(--rule);background:var(--surface-2);flex-shrink:0;align-items:center;gap:.7rem;height:48px;padding:0 .8rem;font-size:.84rem;display:flex}.cs-bar .cs-back{color:var(--fg);white-space:nowrap;align-items:center;gap:.35rem;text-decoration:none;display:inline-flex}.cs-bar .cs-back:hover{color:var(--accent)}.cs-bar .cs-bar-title{font-size:inherit;letter-spacing:0;color:var(--fg);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0;font-weight:600;line-height:1.3;overflow:hidden}.cs-bar .cs-bar-notice{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:34ch;font-size:.74rem;overflow:hidden}.cs-bar .cs-bar-notice a{color:var(--muted);text-underline-offset:2px;text-decoration:underline}.cs-bar .cs-bar-notice a:hover{color:var(--accent)}.cs-bar .cs-toggle{width:auto;font:500 .8rem/1 var(--sans);gap:.35rem;padding:0 .6rem}.cs-stage{flex:1;min-height:0;display:flex;position:relative}.cs-stage>.cs-live-full{flex:1;min-width:0;overflow:auto}.cs-live-full .cs-frame{height:100%}.cs-live-full.cs-output{padding:1.2rem}.cs-live-full .cs-terminal{max-height:none}.cs-drawer{border-left:1px solid var(--rule);background:var(--bg);flex-direction:column;flex-shrink:0;width:40%;display:flex;overflow:auto}.cs-drawer[hidden]{display:none}.cs-drawer .cs-src pre{max-height:none}.cs-drawer-head{border-bottom:1px solid var(--rule);color:var(--fg);justify-content:space-between;align-items:center;padding:.4rem .6rem .4rem 1rem;font-size:.8rem;font-weight:600;display:flex}.cs-viewer .cs-toast{top:56px}@media (max-width:767px){.cs-bar .cs-bar-notice,.cs-bar .cs-back-label{display:none}.cs-drawer{z-index:5;border-left:0;width:auto;position:fixed;inset:48px 0 0}}
