.demo{flex-direction:column;gap:28px;min-width:0;display:flex}.demo-main{flex-direction:column;min-width:0;display:flex}.demo-stage{min-width:0;position:relative}.demo-pane{background:var(--surface);border:1px solid var(--border);transform-origin:0 0;user-select:none;border-radius:14px;flex-direction:column;width:100%;min-width:0;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 60px #191b1f1a,0 2px 6px #191b1f0d}.demo-chrome{border-bottom:1px solid var(--border);background:var(--fill);flex:none;align-items:center;gap:10px;height:44px;padding:0 12px;display:flex}.demo-light{background:var(--strong);border-radius:5px;width:9px;height:9px}.demo-url{background:var(--surface);border:1px solid var(--border);min-width:0;height:26px;font:400 11.5px/1 var(--mono);color:var(--muted);white-space:nowrap;border-radius:13px;flex:1;align-items:center;padding:0 12px;display:flex;overflow:hidden}.demo-puzzle{width:28px;height:28px;color:var(--muted);border-radius:14px;flex:none;justify-content:center;align-items:center;display:flex}.demo-avatar{background:var(--strong);border-radius:11px;flex:none;width:22px;height:22px}.demo-popup{z-index:5;background:var(--surface);border:1px solid var(--strong);transform-origin:100% 0;border-radius:8px;width:320px;transition:opacity .15s,transform .15s;position:absolute;top:46px;right:62px;overflow:hidden;box-shadow:0 8px 28px #0000002e}.demo-pop-head{align-items:center;gap:10px;padding:14px 16px;display:flex}.demo-pop-site{white-space:nowrap;text-overflow:ellipsis;min-width:0;font:600 14px/1.25 var(--ui);letter-spacing:-.01em;color:var(--ink);flex:1;overflow:hidden}.demo-pop-gear{width:28px;height:28px;color:var(--muted);flex:none;justify-content:center;align-items:center;margin:-6px -8px -6px auto;display:flex}.demo-pop-sep{background:var(--border);height:1px}.demo-pop-row{font:400 14px/1.3 var(--ui);color:var(--ink);border-radius:8px;align-items:center;gap:12px;padding:8px 10px;display:flex}.demo-style-btn{box-sizing:border-box;border:1px solid var(--strong);min-height:40px;font:600 14px/1.3 var(--ui);color:var(--ink);border-radius:8px;flex:1;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:8px;padding:9px 12px;transition:background .1s;display:grid}.demo-page-row{background:var(--fill);flex:none;height:560px;display:flex;overflow:hidden}.demo-page{--page-bg:#fff;--page-bar:#fafafa;--page-line:#e5e5e5;--page-ink:#22252b;--page-muted:#6b7280;--page-kicker:#c2410c;--page-quote:#faf4ee;flex:1;min-width:0;transition:filter .4s,background .5s}:root:is([data-theme=dark],[data-theme=stylebot]) .demo-page{--page-bg:#17191d;--page-bar:#1e2126;--page-line:#2a2d33;--page-ink:#dfe2e7;--page-muted:#8f96a3;--page-kicker:#e2795f;--page-quote:#23262c}.demo-editor-wrap{flex:none;transition:width .45s cubic-bezier(.4,0,.2,1);overflow:hidden}.demo-editor{--ui:"Geist", system-ui, sans-serif;--mono:"Geist Mono", ui-monospace, monospace;box-sizing:border-box;background:var(--surface);width:362px;height:calc(100% - 8px);box-shadow:0 0 0 1px var(--border);color:var(--ink);border-radius:12px;flex-direction:column;margin:0 8px 8px;display:flex;overflow:hidden}.demo-side-bar{border-bottom:1px solid var(--border);height:40px;color:var(--muted);flex:none;align-items:center;gap:8px;padding:0 6px 0 12px;display:flex}.demo-side-name{font:500 13px/1 var(--ui);color:var(--ink)}.demo-side-icon{border-radius:14px;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.demo-ed-body{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.demo-ed-head{flex:none;align-items:center;gap:6px;padding:6px 11px 4px 16px;display:flex}.demo-ed-site{white-space:nowrap;text-overflow:ellipsis;font:400 13px/20px var(--ui);color:var(--muted);overflow:hidden}.demo-ed-more{width:24px;height:24px;color:var(--muted);justify-content:center;align-items:center;margin-left:auto;display:flex}.demo-prof-btn{font:600 13px/16px var(--ui);white-space:nowrap;color:var(--ink);border-radius:6px;align-items:center;gap:4px;margin-left:-6px;padding:4px 6px;transition:background .15s;display:flex}.demo-prof-menu{z-index:8;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);transform-origin:0 0;border-radius:10px;width:210px;padding:4px;transition:opacity .15s,transform .15s;position:absolute;top:calc(100% + 6px);left:-48px;box-shadow:0 10px 28px #00000029}.demo-prof-row{font:400 13px/1 var(--ui);color:var(--ink);border-radius:7px;align-items:center;gap:8px;padding:9px 10px;display:flex}.demo-prof-check{width:14px;color:var(--acc);display:flex}.demo-prof-sep{background:var(--border);height:1px;margin:4px 6px}.demo-prof-input{border:1px solid var(--acc);height:32px;font:400 13px/1 var(--ui);color:var(--ink);border-radius:7px;align-items:center;margin:2px 4px 4px;padding:0 10px;display:flex;box-shadow:0 0 0 3px #2a5fd626}.demo-caret{background:var(--acc);width:1.5px;height:14px;margin-left:1px;display:inline-block}.demo-picker{border-radius:8px;flex:none;justify-content:center;align-items:center;width:32px;height:32px;transition:all .15s;display:flex}.demo-sel-field{background:var(--hover);border-radius:8px;flex:1;align-items:center;min-width:0;height:32px;padding-right:6px;display:flex;overflow:hidden}.demo-sel-icon{width:24px;height:24px;color:var(--muted);flex:none;justify-content:center;align-items:center;display:flex}.demo-field{background:var(--hover);border-radius:8px;flex:none;align-items:center;height:30px;display:flex}.demo-field-text{white-space:nowrap;text-overflow:ellipsis;min-width:0;font:400 12.5px/1 var(--ui);color:var(--faint);flex:1;overflow:hidden}.demo-swatch{width:16px;height:16px;box-shadow:inset 0 0 0 1px var(--strong);border-radius:4px;flex:none;margin-left:8px}.demo-small-btn{border:1px solid var(--border);background:var(--surface);font:600 12px/1 var(--ui);border-radius:8px;align-items:center;gap:5px;padding:5px 10px;display:flex}.demo-card{background:var(--surface);border:1px solid var(--border);border-radius:12px}.demo-card-body{font:400 12.5px/1.5 var(--ui);color:var(--muted);text-wrap:pretty;margin-top:8px}.demo-group{height:42px;font:600 13.5px/1 var(--ui);color:var(--ink2);align-items:center;padding:0 14px;display:flex}.demo-row{align-items:center;gap:12px;height:40px;display:flex}.demo-label{font:400 13px/1 var(--ui);color:var(--ink2);flex:1}.demo-unit{font:400 12px/1 var(--ui);color:var(--faint);padding-right:10px}.demo-seg{background:var(--hover);color:var(--muted);border-radius:8px;align-items:center;gap:2px;padding:2px;display:flex}.demo-shortcut{letter-spacing:.06em;color:var(--muted);justify-self:end;font:500 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;transition:opacity .12s}.demo-caption{border-top:1px solid var(--border);background:var(--sunken);min-height:46px;font:400 13px/1.4 var(--ui);color:var(--ink2);flex:none;align-items:center;gap:12px;padding:12px 16px;display:flex}.demo-step-label{font:500 11.5px/1 var(--mono);color:var(--faint);flex:none}.demo-cursor{z-index:10;pointer-events:none;transform-origin:1px 1px;filter:drop-shadow(0 1px 2px #00000040);transition:left .7s cubic-bezier(.45,0,.2,1),top .7s cubic-bezier(.45,0,.2,1),transform .12s;position:absolute}.demo-ripple{z-index:9;pointer-events:none;border:2px solid var(--acc);border-radius:15px;width:30px;height:30px;margin:-15px 0 0 -15px;position:absolute}.demo-steps{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:0;padding:4px 0 0;list-style:none;display:grid}.demo-step{cursor:pointer;flex-direction:column;gap:8px;display:flex}.demo-step-bar{cursor:pointer;margin:-7px 0;padding:7px 0}.demo-step-track{background:var(--border);border-radius:2px;height:3px;overflow:hidden}.demo-step-title{text-align:left;cursor:pointer;background:0 0;border:none;padding:0}.demo-step-body{font:400 13px/1.5 var(--ui);color:var(--muted);text-wrap:pretty}.demo-steps-head,.demo-step-mark{display:none}@media (width>=1100px){.demo-welcome{grid-template-rows:auto 1fr auto;grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:start;gap:22px 40px;display:grid}.demo-welcome .demo-main{grid-area:1/2/span 2}.demo-welcome .demo-below{grid-column:1/-1}.demo-welcome .demo-steps-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}.demo-welcome .demo-steps-head{font:600 14px/1.2 var(--ui);color:var(--ink);padding:14px 18px;display:block}.demo-welcome .demo-steps{padding:0;display:block}.demo-welcome .demo-step{border-top:1px solid var(--border);grid-template-columns:22px minmax(0,1fr);gap:0 12px;padding:14px 18px;display:grid}.demo-welcome .demo-step:hover{background:var(--hover)}.demo-welcome .demo-step.is-active{background:var(--sunken)}.demo-welcome .demo-step-mark{border:1px solid var(--strong);width:22px;height:22px;font:600 11px/1 var(--mono);color:var(--faint);border-radius:11px;grid-area:1/1/span 3;justify-content:center;align-items:center;display:flex}.demo-welcome .is-active .demo-step-mark{border:1.5px solid var(--ink);color:var(--ink)}.demo-welcome .is-done .demo-step-mark{border-color:var(--acc);background:var(--acc);color:#fff}.demo-welcome .demo-step-title{grid-area:1/2}.demo-welcome .demo-step-body{grid-area:2/2;margin-top:5px;font-size:12.5px;display:none}.demo-welcome .demo-step-bar{grid-area:3/2;margin:4px 0 0;padding:6px 0;display:none}.demo-welcome .is-active .demo-step-body,.demo-welcome .is-active .demo-step-bar{display:block}}.demo-menu{z-index:5;background:var(--surface);border:1px solid var(--border);transform-origin:100% 0;border-radius:12px;width:300px;padding-bottom:8px;transition:opacity .18s,transform .18s;position:absolute;top:48px;right:36px;overflow:hidden;box-shadow:0 10px 30px #0000002e}.demo-menu-head{font:500 16px/1.2 var(--ui);color:var(--ink);padding:16px 20px 6px}.demo-menu-note{font:400 12px/1.5 var(--ui);color:var(--muted);flex-direction:column;padding:6px 20px 8px;display:flex}.demo-menu-note strong{font:600 12.5px/1.4 var(--ui);color:var(--ink)}.demo-menu-row{align-items:center;gap:14px;height:40px;padding:0 12px 0 20px;display:flex}.demo-menu-icon{border-radius:4px;flex:none;width:18px;height:18px}.demo-menu-name{min-width:0;font:400 13px/1.2 var(--ui);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.demo-menu-pin{border-radius:14px;justify-content:center;align-items:center;width:28px;height:28px;transition:color .2s;display:flex}.demo-pick-card{z-index:6;color:#191b1f;letter-spacing:0;text-transform:none;text-align:left;white-space:nowrap;background:#fff;border:1px solid #d9dce2;border-radius:12px;padding:10px 14px;font:400 13.5px/1 Geist Mono,ui-monospace,monospace;position:absolute;top:calc(100% + 10px);left:0;box-shadow:0 6px 20px #191b1f24}.demo-pick-arrow{background:#fff;border-top:1px solid #d9dce2;border-left:1px solid #d9dce2;width:10px;height:10px;position:absolute;top:-6px;left:18px;transform:rotate(45deg)}.demo-pick-card.is-dark{color:#e8eaee;background:#1f2124;border-color:#3a3d43;box-shadow:0 6px 20px #0006}.demo-pick-card.is-dark .demo-pick-arrow{background:#1f2124;border-color:#3a3d43}