:root{--st-accent:#ff5960;--st-accent-deep:#e8474e;--st-accent-soft:color-mix(in srgb,var(--st-accent) 55%,#fff);--st-canvas:#fff}*{box-sizing:border-box;margin:0;padding:0}.toolselect{height:32px;border-radius:9px;border:1px solid hsla(0,0%,100%,.12);background:hsla(0,0%,100%,.05);color:#e8eaf2;font:inherit;font-size:13px;padding:0 10px;cursor:pointer}.toolselect:hover{border-color:color-mix(in srgb,var(--st-accent) 60%,transparent)}body,html{height:100%;background:#0a0b12;color:#e8eaf2;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.app{min-height:100vh}.app,.side{display:flex}.side{width:240px;flex-shrink:0;background:#0f1119;border-right:1px solid hsla(0,0%,100%,.06);padding:16px 12px;flex-direction:column;gap:12px}.side__head{display:flex;align-items:center;justify-content:space-between;gap:8px}.side__title{font-size:13px;font-weight:600;letter-spacing:.02em;color:#8b90a6;padding:6px 8px}.side__cube{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:#c7cad8;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);transition:background .12s ease,color .12s ease}.side__cube:hover{background:hsla(0,0%,100%,.1);color:#fff}.side__list{display:flex;flex-direction:column;gap:4px}.side__item{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;background:transparent;border:none;color:#c7cad8;font-size:14px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s ease}.side__tag{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-accent-soft);background:color-mix(in srgb,var(--st-accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--st-accent) 30%,transparent);border-radius:999px;padding:2px 7px;flex-shrink:0}.side__ver{font-size:10px;color:#8b90a6;background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.1);border-radius:999px;padding:2px 8px;flex-shrink:0}.side__select{margin:4px 4px 6px 12px;width:calc(100% - 16px);background:#14151f;color:#c7cad8;border:1px solid hsla(0,0%,100%,.1);border-radius:8px;padding:6px 8px;font-size:12px;cursor:pointer}.side__item:hover{background:hsla(0,0%,100%,.05)}.side__item.is-active{background:rgba(79,107,255,.16);color:#fff}.stage{position:relative;flex:1 1;min-width:0;display:flex;flex-direction:column;background:radial-gradient(120% 120% at 50% 0,#16192a 0,#0a0b12 55%)}@keyframes tmblink{0%,36%{transform:scaleY(1)}48%,58%{transform:scaleY(.06)}70%,to{transform:scaleY(1)}}.bar{flex-shrink:0;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 24px;border-bottom:1px solid hsla(0,0%,100%,.06)}.bar,.bar__path{display:flex;align-items:center}.bar__path{gap:8px;font-size:14px;color:#8b90a6;min-width:0}.bar__sep{color:#4b4f63}.bar__cur{color:#e8eaf2}.bar__tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bar__select{height:34px;background:#14151f;color:#e8eaf2;border:1px solid hsla(0,0%,100%,.12);border-radius:10px;padding:0 10px;font-size:13px;cursor:pointer}.vswitch{position:relative}.vswitch__trigger{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:148px;background:#14151f;border:1px solid hsla(0,0%,100%,.12);border-radius:10px;padding:5px 11px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .12s ease,background .12s ease}.vswitch__trigger:hover:not(:disabled){border-color:hsla(0,0%,100%,.22)}.vswitch__trigger.is-open{border-color:color-mix(in srgb,var(--st-accent) 50%,transparent);background:#191a25}.vswitch__trigger:disabled{cursor:default}.vswitch__triglabel{font-size:13px;color:#e8eaf2;line-height:1.3}.vswitch__trigmeta{display:flex;align-items:center;gap:6px;font-size:11px;color:#8b90a6;line-height:1.2}.vswitch__caret{color:#6b7085;font-size:9px}.vswitch__menu{position:absolute;top:calc(100% + 8px);right:0;z-index:46;width:268px;background:#171822;border:1px solid hsla(0,0%,100%,.12);border-radius:12px;box-shadow:0 18px 40px -14px rgba(0,0,0,.7);overflow:hidden}.vswitch__head{padding:10px 14px 8px;font-size:11px;letter-spacing:.3px;color:#8b90a6;border-bottom:1px solid hsla(0,0%,100%,.06)}.vswitch__list{max-height:320px;overflow-y:auto;padding:6px}.vswitch__item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 30px 9px 11px;border-radius:8px;cursor:pointer;text-align:left;background:transparent;border:0;font-family:inherit;transition:background .12s ease}.vswitch__item:hover{background:hsla(0,0%,100%,.06)}.vswitch__item.is-active{background:color-mix(in srgb,var(--st-accent) 14%,transparent)}.vswitch__itemmain{display:flex;align-items:center;gap:8px}.vswitch__itemlabel{font-size:13px;color:#e8eaf2}.vswitch__badge{font-size:10px;color:#ffb3b6;background:color-mix(in srgb,var(--st-accent) 18%,transparent);border:1px solid color-mix(in srgb,var(--st-accent) 35%,transparent);border-radius:999px;padding:1px 7px}.vswitch__itemmeta{font-size:11px;color:#8b90a6}.vswitch__check{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--st-accent);font-size:13px}.sswitch .vswitch__triglabel{display:flex;align-items:center;gap:7px}.sswitch__dot{margin-top:0}.sswitch .vswitch__trigger{min-width:172px}.stage__body{flex:1 1;min-height:0;flex-direction:column;align-items:center;padding:2.5rem 2rem;overflow:auto}.stage__body,.steps{display:flex;justify-content:center}.steps{gap:8px;flex-wrap:wrap;max-width:760px;margin-bottom:2rem}.steps__chip{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);color:#a9adbe;font-size:12px;padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease}.steps__chip:hover{background:hsla(0,0%,100%,.09);color:#e8eaf2}.steps__chip.is-on{background:color-mix(in srgb,var(--st-accent) 18%,transparent);border-color:color-mix(in srgb,var(--st-accent) 45%,transparent);color:#fff}.cube{position:absolute;top:20px;right:20px;width:42px;height:42px;display:grid;place-items:center;color:#c7cad8;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:12px;transition:background .12s ease,color .12s ease}.cube:hover{background:color-mix(in srgb,var(--st-accent) 16%,transparent);color:var(--st-accent);border-color:color-mix(in srgb,var(--st-accent) 40%,transparent)}.devices{display:flex;flex-wrap:wrap;gap:3rem;justify-content:center;align-items:flex-start}.ds{display:grid;grid-template-columns:232px minmax(0,1fr) minmax(0,1fr);height:100vh;overflow:hidden}.ds__side{background:#0f1119;border-right:1px solid hsla(0,0%,100%,.06);padding:16px 12px;overflow-y:auto}.ds__back{display:inline-block;color:#8b90a6;font-size:13px;text-decoration:none;padding:6px 8px}.ds__back:hover,.ds__brand{color:#e8eaf2}.ds__brand{font-size:13px;font-weight:600;padding:10px 8px 6px}.ds__group{margin-top:10px}.ds__grouptitle{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5a5f73;padding:8px 8px 4px}.ds__item{display:block;width:100%;text-align:left;background:transparent;border:none;color:#c7cad8;font-size:14px;padding:8px 12px;border-radius:8px;cursor:pointer}.ds__item:hover{background:hsla(0,0%,100%,.05)}.ds__item.is-active{background:color-mix(in srgb,var(--st-accent) 16%,transparent);color:#fff}.ds__preview{padding:32px 32px 48px;overflow-y:auto;border-right:1px solid hsla(0,0%,100%,.06)}.ds__eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--st-accent)}.ds__title{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:6px}.ds__blurb{color:#a9adbe;font-size:14px;line-height:1.5;margin-top:8px;max-width:46ch}.ds__note{margin-top:12px;font-size:13px;line-height:1.5;color:#e7c9a0;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);border-radius:10px;padding:10px 12px;max-width:52ch}.ds__platrow{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ds__badge{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid transparent}.ds__badge--native{color:var(--st-accent-soft);background:color-mix(in srgb,var(--st-accent) 12%,transparent);border-color:color-mix(in srgb,var(--st-accent) 30%,transparent)}.ds__badge--unified{color:#8b90a6;background:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1)}.ds__platform{display:inline-flex;gap:2px;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.08);border-radius:10px;padding:3px}.ds__seg{border:none;background:transparent;color:#8b90a6;font-size:13px;padding:6px 16px;border-radius:8px;cursor:pointer}.ds__seg.is-on{background:hsla(0,0%,100%,.1);color:#fff}.ds__canvas{margin-top:24px;background:var(--st-canvas,#fff);border-radius:16px;padding:28px;display:flex;justify-content:center}.ds__states{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));grid-gap:16px;gap:16px}.ds__state{display:flex;flex-direction:column;gap:8px}.ds__statelabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8b90a6}.ds__canvas--sm{margin-top:0;padding:20px;flex:1 1;align-items:center}.ds__duo{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}.ds__duocol{display:flex;flex-direction:column;gap:8px;min-width:0}.ds__schemelabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8b90a6}.ds__duo .ds__canvas{margin-top:0}.ds__staterow{display:flex;gap:12px}.ds__staterow .ds__canvas{flex:1 1}.ds__canvas--dark{background:#0b0e13}.ds__code{padding:32px;overflow-y:auto;background:#0c0d15}.ds__codehead{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5a5f73;margin-bottom:14px}.code{position:relative;background:#14151f;border:1px solid hsla(0,0%,100%,.07);border-radius:12px;overflow:hidden}.code__copy{position:absolute;top:10px;right:10px;z-index:2;background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.12);color:#c7cad8;font-size:12px;padding:4px 10px;border-radius:8px;cursor:pointer}.code__copy:hover{background:hsla(0,0%,100%,.14)}.code__pre{margin:0;padding:44px 16px 18px;font-size:12.5px;line-height:1.6;overflow-x:auto;font-family:SFMono-Regular,Menlo,Consolas,monospace}.code__line{display:flex}.code__ln{width:28px;flex-shrink:0;text-align:right;padding-right:14px;color:#3f4256;-webkit-user-select:none;-moz-user-select:none;user-select:none}.code__content{white-space:pre}@media (max-width:980px){.ds{grid-template-columns:200px 1fr}.ds__code{grid-column:1/-1}}.stage__tools{position:absolute;top:18px;right:20px;display:flex;align-items:center;gap:10px;z-index:20}.segmented{display:inline-flex;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;padding:3px}.segmented__btn{border:none;background:transparent;color:#8b90a6;font-size:13px;padding:6px 14px;border-radius:8px;cursor:pointer}.segmented__btn.is-on{background:color-mix(in srgb,var(--st-accent) 18%,transparent);color:#fff}.toolbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;color:#c7cad8;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;font-size:13px;cursor:pointer;text-decoration:none}.toolbtn:hover{background:color-mix(in srgb,var(--st-accent) 16%,transparent);color:var(--st-accent);border-color:color-mix(in srgb,var(--st-accent) 40%,transparent)}.proto{display:flex;align-items:center;gap:14px;margin-bottom:1.75rem}.proto__label{color:#8b90a6;font-size:13px}.proto__restart{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);color:#c7cad8;font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer}.proto__restart:hover{color:#fff}.slider__scrim{position:fixed;inset:0;background:rgba(5,7,14,.5);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}.slider__scrim.is-open{opacity:1;pointer-events:auto}.slider{position:fixed;top:0;right:0;height:100vh;width:min(560px,92vw);background:#0c0d15;border-left:1px solid hsla(0,0%,100%,.08);transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);z-index:41;display:flex;flex-direction:column}.slider.is-open{transform:translateX(0)}.slider__head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px;border-bottom:1px solid hsla(0,0%,100%,.07)}.slider__eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--st-accent)}.slider__title{font-size:16px;font-weight:600;margin-top:4px}.slider__sub{font-size:12px;color:#8b90a6;margin-top:2px}.slider__close{background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.12);color:#c7cad8;width:30px;height:30px;border-radius:8px;cursor:pointer}.slider__direction{padding:16px 20px;border-bottom:1px solid hsla(0,0%,100%,.07)}.slider__dirlabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5a5f73;margin-bottom:6px}.slider__direction p{color:#c7cad8;font-size:13px;line-height:1.55}.slider__states{padding:16px 20px;border-bottom:1px solid hsla(0,0%,100%,.07)}.slider__state{display:flex;gap:10px;padding:9px 0;border-top:1px solid hsla(0,0%,100%,.05)}.slider__state:first-of-type{border-top:0;padding-top:2px}.slider__statedot{width:8px;height:8px;border-radius:999px;margin-top:5px;flex-shrink:0}.slider__statedot,.slider__statedot--default{background:#8b90a6}.slider__statedot--loading{background:#f5a623}.slider__statedot--success{background:#2e9b6e}.slider__statedot--empty{background:#3b9e9a}.slider__statedot--error{background:var(--st-accent)}.slider__statedot--edge{background:#6e8bef}.slider__statebody{flex:1 1}.slider__statename{font-size:13px;color:#e6e8f0}.slider__statekind{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8b90a6;margin-left:8px}.slider__statenote{font-size:12px;color:#9498a8;line-height:1.5;margin-top:2px}.slider__code{padding:16px 20px;overflow-y:auto;flex:1 1}.slider__empty{color:#5a5f73;font-size:13px}.claudewrap,.exportwrap{position:relative}.toolbtn--claude{display:inline-flex;align-items:center;gap:7px}.toolbtn--claude.is-open{background:rgba(217,119,87,.16);border-color:rgba(217,119,87,.5);color:#fff}.toolbtn--accent{background:var(--st-accent);border-color:var(--st-accent);color:#fff}.toolbtn--accent.is-open,.toolbtn--accent:hover{background:var(--st-accent-deep)}.menuscrim{position:fixed;inset:0;z-index:45}.exportmenu{position:absolute;top:42px;right:0;min-width:268px;background:#12131c;border:1px solid hsla(0,0%,100%,.12);border-radius:12px;padding:6px;z-index:46;box-shadow:0 24px 48px -12px rgba(0,0,0,.6)}.exportmenu__title{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8b90a6;padding:8px 10px 6px}.exportmenu__item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:9px 10px;border-radius:8px;color:#e6e8f0;font-size:13.5px;background:transparent;border:0;cursor:pointer}.exportmenu__item:hover{background:hsla(0,0%,100%,.06)}.exportmenu__sub{font-size:11.5px;color:#8b90a6}.exportmenu__foot{font-size:11px;color:#6a6f82;padding:8px 10px 4px;border-top:1px solid hsla(0,0%,100%,.07);margin-top:4px}.export__actions{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid hsla(0,0%,100%,.07)}.export__meta{font-size:11px;color:#6a6f82;margin-left:auto;text-align:right;max-width:220px}.export__actions .toolbtn:disabled{opacity:.6;cursor:default}.export__body{flex:1 1;overflow:auto;padding:16px 20px}.export__pre{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11.5px;line-height:1.55;color:#c7cad8;margin:0}.ds--overview{grid-template-columns:232px minmax(0,1fr)}.board{grid-column:2/-1;padding:32px 32px 64px;overflow-y:auto}.board__head{margin-bottom:24px}.board__section{margin-bottom:36px}.board__sectionhead{display:flex;align-items:center;gap:10px;margin-bottom:16px}.board__sectionhead>span:first-child{font-size:15px;color:#e8eaf2;font-weight:600}.board__vtag{font-size:10px;color:#8b90a6;background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.1);border-radius:999px;padding:2px 8px}.board__vtag.is-skel{color:var(--st-accent-soft);background:color-mix(in srgb,var(--st-accent) 14%,transparent);border-color:color-mix(in srgb,var(--st-accent) 30%,transparent)}.board__grid{display:grid;grid-template-columns:repeat(auto-fill,200px);justify-content:start;grid-gap:20px 24px;gap:20px 24px}.board__card{background:transparent;border:none;padding:0;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px}.board__screen{width:200px;height:412px;border-radius:18px;overflow:hidden;background:#fff;border:1px solid hsla(0,0%,100%,.1);position:relative;transition:transform .14s ease,border-color .14s ease}.board__card:hover .board__screen{transform:translateY(-3px);border-color:color-mix(in srgb,var(--st-accent) 50%,transparent)}.board__scale{position:absolute;top:0;left:0;width:320px;transform:scale(var(--thumb-scale,.625));transform-origin:top left}.board__device{width:320px;height:660px;display:flex;flex-direction:column;overflow:hidden;pointer-events:none}.board__label{font-size:13px;color:#c7cad8}.cat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:18px;gap:18px}.cat__tile{background:transparent;border:none;padding:0;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:10px}.cat__preview{height:200px;border-radius:14px;overflow:hidden;background:#fff;border:1px solid hsla(0,0%,100%,.1);padding:20px;display:flex;align-items:center;justify-content:center;transition:transform .14s ease,border-color .14s ease}.cat__tile:hover .cat__preview{transform:translateY(-3px);border-color:color-mix(in srgb,var(--st-accent) 50%,transparent)}.cat__name{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:#c7cad8}.cat__badges{display:inline-flex;gap:6px}.cat__motion,.cat__native{font-size:9px;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:2px 7px}.cat__motion{color:#8affd1;background:rgba(46,155,110,.16);border:1px solid rgba(46,155,110,.35)}.cat__native{color:var(--st-accent-soft);background:color-mix(in srgb,var(--st-accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--st-accent) 30%,transparent)}.toolbtn--icon{width:34px;padding:0;justify-content:center}