.ds-widgets{gap:var(--jf-ui-space-8);max-width:1240px;padding:var(--jf-ui-space-4) 0 var(--jf-ui-space-7);margin:auto;display:grid}.ds-widgets-intro{gap:var(--jf-ui-space-5);align-items:center;display:flex}.ds-widget-emblem{border:1px solid var(--jf-ui-border);border-radius:var(--jf-ui-radius-card);background:var(--jf-ui-brand-soft);height:64px;color:var(--jf-ui-brand-strong);flex:0 0 64px;place-items:center;display:grid}.ds-widgets h1{font:700 clamp(28px,4vw,40px)/1.2 var(--jf-ui-font-heading);margin:8px 0 12px}.ds-widgets h2{font:700 clamp(22px,2.5vw,28px)/1.3 var(--jf-ui-font-heading);margin:0 0 8px}.ds-widgets h3{font:700 18px/1.4 var(--jf-ui-font-heading);margin:0 0 12px}.ds-widgets p{color:var(--jf-ui-text-muted);margin:0;font-size:16px;line-height:1.65}.ds-widgets-intro p{max-width:680px}.ds-widget-demo{gap:var(--jf-ui-space-6);padding-top:var(--jf-ui-space-7);border-top:1px solid var(--jf-ui-border);min-width:0;display:grid}.ds-widget-demo>header{align-items:flex-start;gap:var(--jf-ui-space-4);display:flex}.ds-widget-demo>header p{max-width:760px;font-size:14px}.ds-widget-index{height:36px;color:var(--jf-ui-brand-strong);background:var(--jf-ui-brand-soft);border-radius:var(--jf-ui-control-radius);font:700 13px/1 var(--jf-ui-font-heading);flex:0 0 36px;place-items:center;display:grid}.ds-widget-demo__stage{min-width:0}.ds-surface-comparison{gap:var(--jf-ui-space-6);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.ds-surface-example{min-width:0}.ds-widget-canvas{padding:var(--jf-ui-space-4);border-radius:var(--jf-ui-radius-card);background:var(--jf-ui-surface-soft);border:1px solid var(--jf-ui-border);margin-bottom:var(--jf-ui-space-5)}.ds-widget-canvas .jf-widget{min-height:224px;padding:var(--jf-ui-space-5)}.ds-widget-canvas h3{margin-top:var(--jf-ui-space-4);font-size:16px}.ds-widget-canvas p,.ds-surface-example>p{font-size:14px}.ds-surface-example>h3{margin-bottom:8px}.ds-widget-inline{align-items:center;gap:var(--jf-ui-space-4);justify-content:space-between;font-size:14px;display:flex}.ds-widgets .ds-widget-caption{color:var(--jf-ui-text-muted);font-size:13px;line-height:1.6}.ds-composition-grid{gap:var(--jf-ui-space-7);grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);display:grid}.ds-composition-collection,.ds-spacing-guide{padding:var(--jf-ui-space-6);border:1px solid var(--jf-ui-border);border-radius:var(--jf-ui-radius-card)}.ds-composition-collection>header{margin-bottom:var(--jf-ui-space-6)}.ds-composition-collection>header p{font-size:14px}.ds-widget-grid{gap:var(--jf-ui-space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.ds-widget-grid .jf-widget{padding:var(--jf-ui-space-4);background:var(--jf-ui-surface-soft)}.ds-widget-grid .jf-widget>span:first-child{font-size:14px}.ds-widget-number{font:700 32px/1.3 var(--jf-ui-font-heading);margin:var(--jf-ui-space-4) 0 8px;display:block}.ds-widget-spacing{margin:var(--jf-ui-space-5) 0;display:grid}.ds-widget-spacing>div{gap:var(--jf-ui-space-3);padding:var(--jf-ui-space-3) 0;border-bottom:1px solid var(--jf-ui-border);grid-template-columns:46px 48px 1fr;align-items:center;font-size:14px;display:grid}.ds-widget-spacing>div:last-child{border:0}.ds-widget-space-sample i{background:var(--jf-ui-brand);border-radius:2px;height:12px;display:block}.ds-widget-spacing span{color:var(--jf-ui-text-muted)}.ds-overlay-examples{gap:var(--jf-ui-space-6);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.ds-overlay-examples>article{border:1px solid var(--jf-ui-border);border-radius:var(--jf-ui-radius-card);background:var(--jf-ui-surface);flex-direction:column;min-width:0;display:flex}.ds-overlay-copy{padding:var(--jf-ui-space-6);flex-direction:column;flex:1;align-items:flex-start;display:flex}.ds-overlay-copy h3{margin-top:8px}.ds-overlay-copy p{margin-bottom:var(--jf-ui-space-6);flex:1;font-size:14px}.ds-overlay-copy .jf-action{min-height:44px}.ds-overlay-preview{height:176px;margin:var(--jf-ui-space-4) var(--jf-ui-space-4) 0;border:1px solid var(--jf-ui-border);border-radius:var(--jf-ui-control-radius);background:var(--jf-ui-surface-soft);position:relative;overflow:hidden}.ds-overlay-preview__nav{border-bottom:1px solid var(--jf-ui-border);gap:4px;height:25px;padding:10px;display:flex}.ds-overlay-preview__nav i{background:var(--jf-ui-text-soft);border-radius:50%;width:4px;height:4px}.ds-overlay-preview__lines{gap:12px;padding:20px;display:grid}.ds-overlay-preview__lines i{background:var(--jf-ui-border);width:72%;height:8px}.ds-overlay-preview__panel{background:var(--jf-ui-surface-raised);border:1px solid var(--jf-ui-brand);border-radius:var(--jf-ui-control-radius);box-shadow:var(--jf-ui-shadow);align-content:center;gap:10px;padding:16px;display:grid;position:absolute}.ds-overlay-preview__panel i{background:var(--jf-ui-border-strong);height:5px}.ds-overlay-preview__panel i:nth-child(2){width:70%}.ds-overlay-preview__panel b{background:var(--jf-ui-brand-soft);border:1px solid var(--jf-ui-brand);border-radius:3px;width:48%;height:14px}.ds-overlay-preview--modal .ds-overlay-preview__panel{width:54%;height:96px;margin:auto;inset:0}.ds-overlay-preview--focus .ds-overlay-preview__panel{width:58%;height:88px;top:62px;left:20px}.ds-overlay-preview--drawer .ds-overlay-preview__panel{border-radius:0;width:47%;inset:0 0 0 auto}.ds-sheet-layout{gap:var(--jf-ui-space-8);grid-template-columns:minmax(0,1fr) minmax(320px,1fr);align-items:center;display:grid}.ds-sheet-guide{justify-items:start;gap:var(--jf-ui-space-5);max-width:460px;display:grid}.ds-sheet-guide h3{margin:0;font-size:24px}.ds-sheet-guide ul{gap:var(--jf-ui-space-4);width:100%;margin:0 0 8px;padding:0;list-style:none;display:grid}.ds-sheet-guide li{padding-bottom:var(--jf-ui-space-4);border-bottom:1px solid var(--jf-ui-border);gap:4px;font-size:14px;display:grid}.ds-sheet-guide li span{color:var(--jf-ui-text-muted)}.ds-device-stage{justify-items:center;gap:var(--jf-ui-space-6);padding:var(--jf-ui-space-7);border:1px solid var(--jf-ui-border);border-radius:var(--jf-ui-radius-page);background:var(--jf-ui-surface-soft);margin:0;display:grid}.ds-device-stage figcaption{text-align:center;color:var(--jf-ui-text-muted);font-size:12px}.ds-sheet-preview{height:560px}.ds-sheet-preview__context{gap:var(--jf-ui-space-4);padding:12px 16px 24px;display:grid}.ds-device-time{margin-bottom:12px;padding-left:8px;font-size:12px;line-height:24px}.ds-sheet-preview__context>strong{font:700 20px/1.4 var(--jf-ui-font-heading)}.ds-phone-job{padding:var(--jf-ui-space-4);border:1px solid var(--jf-ui-border);border-radius:var(--jf-ui-control-radius);background:var(--jf-ui-surface);gap:6px;font-size:14px;display:grid}.ds-phone-job span{color:var(--jf-ui-text-muted);font-size:12px}.ds-sheet-preview__surface{z-index:2;gap:var(--jf-ui-space-4);border-top:1px solid var(--jf-ui-border);border-radius:var(--jf-ui-radius-card) var(--jf-ui-radius-card) 0 0;background:var(--jf-ui-surface);max-height:90%;box-shadow:var(--jf-ui-shadow);visibility:hidden;padding:0 16px 28px;transition:transform .22s,visibility .22s;display:grid;position:absolute;inset:auto 0 0;overflow-y:auto;transform:translateY(100%)}.ds-sheet-preview__surface.is-open{visibility:visible;transform:translateY(0)}.ds-sheet-preview__surface h3{margin:0;font-size:18px}.ds-sheet-preview__surface p{font-size:14px}.ds-sheet-mobile-trigger{display:none}.ds-widget-sheet-hint{color:var(--jf-ui-text-muted);font-size:14px;margin:24px 0 0!important}@media (width<=1100px){.ds-composition-grid{grid-template-columns:1fr}.ds-surface-comparison,.ds-overlay-examples{gap:16px}.ds-widget-canvas{padding:12px}.ds-widget-canvas .jf-widget{padding:16px}.ds-overlay-copy{padding:20px}.ds-sheet-layout{gap:24px}.ds-device-stage{padding:24px 16px}}@media (width<=800px){.ds-surface-comparison,.ds-overlay-examples{grid-template-columns:1fr}.ds-surface-example{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;column-gap:24px;display:grid}.ds-surface-example .ds-widget-canvas{grid-row:1/3;margin:0}.ds-surface-example>h3{align-self:end}.ds-overlay-examples>article{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);display:grid}.ds-overlay-preview{align-self:center;margin:20px 0 20px 20px}.ds-sheet-layout{grid-template-columns:1fr}.ds-sheet-guide{max-width:none}.ds-device-stage{padding:32px 16px}}@media (width<=680px){.ds-widgets{gap:32px}.ds-widgets-intro{align-items:flex-start;gap:12px}.ds-widget-emblem{flex-basis:44px;height:44px}.ds-widget-demo{padding-top:24px}.ds-surface-example,.ds-overlay-examples>article{display:block}.ds-surface-example .ds-widget-canvas{margin-bottom:16px}.ds-overlay-preview{margin:16px 16px 0}.ds-widget-grid{grid-template-columns:1fr}.ds-widget-grid .jf-widget{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.ds-widget-number{grid-area:1/2/3;margin:0}.ds-composition-collection,.ds-spacing-guide{padding:20px}.ds-sheet-mobile-trigger{min-height:44px;display:inline-flex}.ds-sheet-desktop-trigger{display:none}.ds-device-stage{padding:24px 12px}.ds-sheet-preview{max-width:100%}}@media (prefers-reduced-motion:reduce){.ds-sheet-preview__surface{transition:none}}