.sc-cover{color:#20252b;font-family:Inter,Arial,sans-serif;overflow:hidden;container-type:inline-size}.sc-thumbnail{border-radius:inherit;background:#fff;width:100%;height:100%}.sc-thumb-canvas{zoom:calc(100cqw / 900px);background-color:#fff;background-image:linear-gradient(#e8ebed80 1px,#0000 1px),linear-gradient(90deg,#e8ebed80 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:90px 90px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;width:900px;height:510px;position:relative}.sc-thumb-brand{letter-spacing:.04em;font-size:18px;font-weight:700;position:absolute;top:35px;left:46px}.sc-thumb-brand>span{letter-spacing:.1em;color:#89929b;margin-left:18px;font-size:10px;font-weight:500}.sc-selection-title{border:2px solid #d64c85;padding:12px 22px 15px;position:absolute;top:98px;left:180px;right:68px}.sc-selection-title strong{letter-spacing:-.055em;white-space:nowrap;color:#14181b;font-size:69px;font-weight:750;line-height:1.08}.sc-selection-title>i{background:#d64c85;width:8px;height:8px;position:absolute}.sc-selection-title>i:first-of-type{top:-5px;left:-5px}.sc-selection-title>i:nth-of-type(2){top:-5px;right:-5px}.sc-selection-title>i:nth-of-type(3){bottom:-5px;left:-5px}.sc-selection-title>i:nth-of-type(4){bottom:-5px;right:-5px}.sc-thumb-topics{color:#bf4278;gap:28px;font-size:13px;font-weight:600;display:flex;position:absolute;top:222px;left:280px}.sc-layout-frame{background:#fff;border:9px solid #2c363c;border-radius:24px;width:580px;height:300px;position:absolute;top:285px;left:190px;overflow:hidden}.sc-layout-bar{border-bottom:1px solid #e7e9eb;align-items:center;gap:5px;height:30px;padding:0 12px;display:flex}.sc-layout-bar>span{background:#bcc4c9;border-radius:50%;width:4px;height:4px}.sc-layout-bar>b{letter-spacing:.04em;color:#909aa2;margin-left:auto;font-size:8px;font-weight:400}.sc-layout-columns{grid-template-columns:repeat(8,1fr);gap:14px;height:240px;margin:0 28px;display:grid}.sc-layout-columns>i{background:#fff0f6}.sc-measure-line{background:#d64c85;height:1px;position:absolute;top:130px;left:28px;right:28px}.sc-measure-line>span{color:#9e4771;background:#fff;padding:4px 8px;font-size:10px;position:absolute;top:12px;left:41%}.sc-token-panel{background:#fff;border:1px solid #e1e5e8;border-radius:8px;width:200px;position:absolute;top:260px;left:45px;overflow:hidden;box-shadow:0 10px 25px #23303b0e}.sc-panel-title{border-bottom:1px solid #e5e9ec;justify-content:space-between;align-items:center;padding:13px 15px;font-size:11px;font-weight:600;display:flex}.sc-token-head,.sc-token-row{border-bottom:1px solid #eff1f3;grid-template-columns:1fr 45px;padding:9px 14px;font-size:9px;display:grid}.sc-token-head{color:#9aa2a9;font-size:8px}.sc-token-row>b{color:#606c76;font-weight:400}.sc-type-panel{background:#fff;border:1px solid #e1e5e8;border-radius:9px;grid-template-columns:75px 1fr;align-items:center;gap:15px;width:190px;padding:19px;display:grid;position:absolute;top:337px;right:32px;box-shadow:0 10px 25px #23303b0e}.sc-type-panel>small{letter-spacing:.12em;color:#8b969d;grid-column:1/-1;font-size:8px}.sc-type-panel>strong{letter-spacing:-.06em;font-size:54px;line-height:1}.sc-type-panel>div{gap:8px;font-size:13px;display:grid}.sc-type-panel span{color:#909aa2;font-size:8px;line-height:1.5}.sc-thumb-tag{letter-spacing:.03em;color:#75818b;font-size:9px;position:absolute;bottom:22px;right:33px}.work-card-media:has(>.sc-thumbnail){background:#fff}.work-card-media>.sc-thumbnail{width:100%;height:100%;position:absolute;inset:0;transform:none}.sc-hero-board{background:#fff;border:1px solid #dce2e5;border-radius:12px;width:100%}.sc-hero-canvas{zoom:calc(100cqw / 680px);box-sizing:border-box;background:radial-gradient(#dce2e6 .7px,#0000 .7px) 0 0/16px 16px;width:680px;height:640px;padding:36px}.sc-hero-heading>span{letter-spacing:.12em;color:#7e8992;font-size:10px}.sc-hero-heading>strong{letter-spacing:-.045em;margin-top:16px;font-size:39px;font-weight:600;line-height:1.1;display:block}.sc-hero-heading>p{color:#83909a;margin:10px 0 27px;font-size:13px}.sc-spec-card{background:#fff;border:1px solid #d9e0e5;border-radius:9px;overflow:hidden;box-shadow:0 12px 30px #30405008}.sc-spec-card>.sc-panel-title{color:#6c7c8a;padding:16px 21px;font-size:11px}.sc-button-anatomy{justify-content:center;align-items:center;height:182px;display:flex;position:relative}.sc-primary-button,.sc-secondary-button,.sc-disabled-button{white-space:nowrap;box-sizing:border-box;border-radius:4px;justify-content:center;align-items:center;gap:4px;height:36px;padding:0 12px;font-size:14px;font-weight:600;display:inline-flex}.sc-primary-button{color:#fff;background:#ed794c;border:1px solid #ed794c}.sc-primary-button>span{font-size:20px;line-height:20px}.sc-secondary-button{color:#37495c;background:#fff;border:1px solid #c7d5db}.sc-disabled-button{color:#a9b7c0;background:#f2f4f6;border:1px solid #e5ebef}.sc-button-anatomy>.sc-primary-button{transform:scale(1.8)}.sc-dimension-top{color:#bb5181;border-bottom:1px solid #d96a9b;padding:0 35px 7px;font-size:10px;position:absolute;top:22px;left:50%;transform:translate(-50%)}.sc-label-left,.sc-label-right{color:#82919d;font-size:10px;position:absolute;bottom:24px}.sc-label-left{left:95px}.sc-label-right{right:80px}.sc-label-left:before,.sc-label-right:before{content:"";background:#d9a9c0;width:1px;height:20px;position:absolute;bottom:22px}.sc-label-left:before{right:0;transform:rotate(35deg)}.sc-label-right:before{left:0;transform:rotate(-35deg)}.sc-variants{border-top:1px solid #edf0f2;justify-content:center;gap:34px;padding:22px 18px;display:flex}.sc-variants>div{justify-items:center;gap:11px;display:grid}.sc-variants small{color:#83909a;font-size:10px}.sc-hero-tokens{border-top:1px solid #dce2e6;justify-content:space-between;align-items:center;gap:12px;margin-top:25px;padding:20px 0;display:flex}.sc-hero-tokens>div{gap:12px;display:grid}.sc-hero-tokens small{letter-spacing:.09em;color:#99a2a9;font-size:8px}.sc-hero-tokens b{align-items:center;gap:5px;font-size:11px;font-weight:500;display:flex}.sc-hero-tokens i{background:#ed794c;border-radius:2px;width:9px;height:9px}.sc-hero-tokens span{color:#8b969f;font-size:9px}.sc-hero-tokens>em{color:#b1bac1;font-size:14px;font-style:normal}.portfolio-home .work-system .project-media:has(>.sc-thumbnail){background:var(--project-card-background)}.story-related .project-media:has(>.sc-thumbnail){background:var(--project-card-background)}.portfolio-home .work-system .project-media>.sc-thumbnail,.story-related .project-media>.sc-thumbnail{border-radius:9px 9px 0 0;width:88%;height:88%;inset:auto 6% 0;box-shadow:0 12px 24px #183b3a15}.system-atlas{--sp-action:#ed794c;--sp-ink:#111827;--sp-muted:#6b7280;color:var(--sp-ink);box-sizing:border-box;font-family:Inter,DM Sans,sans-serif}.system-atlas *{box-sizing:border-box}.sp-cover{background:#e9eeef;border-radius:24px;padding:38px;overflow:hidden}.sp-cover-heading>span,.sp-board-heading>span{letter-spacing:.12em;font-size:11px;font-weight:600}.sp-cover-heading>strong{letter-spacing:-.045em;margin:22px 0;font-size:clamp(28px,3.5vw,48px);line-height:1.04;display:block}.sp-cover-pills{gap:8px;display:flex}.sp-cover-pills>span{border:1px solid #bbc5c9;border-radius:30px;padding:6px 10px;font-size:10px}.sp-cover-stage{grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;padding-bottom:35px;display:grid;position:relative}.sp-product{background:#fff;border:1px solid #d9e0e4;border-radius:12px;min-width:0;overflow:hidden;box-shadow:0 20px 40px #14252e14}.sp-dark{color:#f9fafb;background:#111827;border-color:#374151;transform:translateY(24px)}.sp-product-top{border-bottom:1px solid #d1d5db55;justify-content:space-between;align-items:center;gap:12px;padding:16px;display:flex}.sp-product-top>strong{letter-spacing:-.04em;font-size:20px}.sp-product-top>span{color:#83929b;font-size:9px}.sp-product-content{padding:20px}.sp-product-content>small{letter-spacing:.06em;color:#6b7280;font-size:9px}.sp-product-content h3{letter-spacing:-.035em;margin:12px 0 22px;font-size:23px;line-height:1.2}.sp-product-stats{gap:34px;margin-bottom:24px;display:flex}.sp-product-stats strong{font-size:28px;font-weight:500;display:block}.sp-product-stats span{color:#7c8795;font-size:10px}.sp-product-tabs{border-bottom:1px solid #d1d5db55;gap:16px;padding-bottom:12px;font-size:10px;display:flex}.sp-product-tabs b{color:#b64d23}.sp-dark .sp-product-tabs b{color:#f3a27f}.sp-product-row{border-bottom:1px solid #d1d5db33;justify-content:space-between;align-items:center;gap:10px;padding:16px 0;font-size:11px;display:flex}.sp-product-row small{color:#85919d;margin-top:5px;font-size:9px;display:block}.sp-product-row em{color:#936315;background:#fff3dc;border-radius:4px;padding:4px 7px;font-size:9px;font-style:normal}.sp-product-row em.sp-ok{color:#216247;background:#e0f3e7}.sp-product-action{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.sp-button{color:#fff;white-space:nowrap;vertical-align:middle;background:#ed794c;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:4px;height:36px;padding:8px;font-size:14px;font-style:normal;font-weight:600;line-height:20px;display:inline-flex}.sp-button img{object-fit:contain;width:20px;height:20px;display:block}.sp-secondary{color:#37495c;background:#fff;border-color:#c7d5db}.sp-ai{color:#fff;background:linear-gradient(166deg,#6964de 10%,#fca6e9 136%)}.sp-small{height:28px;padding:4px 8px}.sp-large{height:44px;padding:12px}.sp-hover{filter:brightness(.93)}.sp-active{filter:brightness(.84)}.sp-focus{outline-offset:3px;outline:2px solid #9d98ed}.sp-disabled{opacity:.4}.sp-static-spinner{border:1.5px solid;border-right-color:#0000;border-radius:50%;width:13px;height:13px;display:inline-block}.sp-product .sp-button{height:29px;padding:5px 8px;font-size:10px}.sp-floating{background:#fff;border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;padding:16px;display:flex;position:absolute;bottom:0;left:20%;box-shadow:0 10px 24px #11182725}.sp-floating>span:first-child{color:#6b7280;letter-spacing:.1em;width:100%;font-size:9px}.sp-compact{border-radius:12px;width:100%;height:100%;padding:28px;container-type:inline-size}.sp-compact .sp-cover-heading>strong{margin:12px 0;font-size:6cqw}.sp-compact .sp-cover-heading>span{font-size:2cqw}.sp-compact .sp-cover-pills{display:none}.sp-compact .sp-cover-stage{zoom:calc(100cqw / 680px);gap:24px;width:680px;margin-top:28px}.sp-compact .sp-floating{display:none}.sp-board-heading{max-width:650px;margin-bottom:36px}.sp-board-heading h3{letter-spacing:-.04em;margin:18px 0;font-size:clamp(30px,4vw,48px);line-height:1.06}.sp-board-heading p{color:#64707e;font-size:16px;line-height:1.7}.sp-foundations,.sp-components,.sp-modes{background:#f4f5f6;border-radius:24px;margin:36px 0;padding:42px}.sp-palette{grid-template-columns:repeat(11,1fr);gap:4px;margin:30px 0 38px;display:grid}.sp-palette i{border:1px solid #00000008;border-radius:5px;height:72px;display:block}.sp-palette span{margin-top:8px;font-size:11px;display:block}.sp-palette small{color:#6b7280;font-size:8px}.sp-foundation-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.sp-type{background:#fff;border-radius:14px;padding:28px}.sp-type>span{letter-spacing:.1em;font-size:10px}.sp-type>strong{letter-spacing:-.06em;font-size:100px;font-weight:500;line-height:1.3;display:block}.sp-type h3{letter-spacing:-.03em;margin:12px 0;font-size:25px;font-weight:500}.sp-type p,.sp-type>div{color:#6b7280;font-size:12px;line-height:1.8}.sp-token-cards{grid-template-columns:1fr 1fr;gap:12px;display:grid}.sp-token-cards article{border-radius:14px;flex-direction:column;justify-content:space-between;min-height:155px;padding:20px;display:flex}.sp-token-cards small{letter-spacing:.1em;font-size:9px}.sp-token-cards strong{font-size:21px;font-weight:500}.sp-token-cards article>span{font-size:10px}.sp-tangerine{color:#2d1711;background:#ed794c}.sp-ink{color:#fff;background:#111827}.sp-ai-colour{color:#fff;background:linear-gradient(166deg,#6964de,#fca6e9)}.sp-spacing{background:#fff}.sp-spacing>div{align-items:end;gap:12px;display:flex}.sp-spacing span{font-size:10px}.sp-spacing i{background:#374151;width:12px;margin-bottom:5px;display:block}.sp-anatomy{background:#fff;border-radius:16px;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:32px;display:grid}.sp-anatomy>div{justify-content:center;padding:40px 0;display:flex}.sp-anatomy>div>.sp-button{transform:scale(1.7)}.sp-anatomy dl{grid-template-columns:1fr 1fr;gap:22px;margin:0;display:grid}.sp-anatomy dt{color:#9a4d2e;font-size:11px;font-weight:600}.sp-anatomy dd{margin:7px 0 0;font-size:12px;line-height:1.5}.sp-size-row{align-items:end;gap:32px;margin:32px 0;display:flex}.sp-size-row small{letter-spacing:.08em;color:#6b7280;margin-top:12px;font-size:9px;display:block}.sp-state-grid{background:#fff;border-radius:16px;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;padding:28px;display:grid}.sp-state-grid>div{flex-direction:column;align-items:start;gap:22px;display:flex}.sp-state-grid small{text-transform:uppercase;color:#6b7280;font-size:10px}.sp-state-grid .sp-button{font-size:11px}.sp-state-grid .sp-button img{width:16px;height:16px}.sp-board-note{color:#6b7280;margin:24px 0 0;font-size:12px;line-height:1.6}.sp-modes{background:#e9eeef}.sp-mode-pair{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:24px;display:grid}.sp-mode-pair .sp-product-content{padding:28px}.sp-mode-pair .sp-product-content h3{font-size:32px}.sp-mode-pair .sp-product-row{padding:22px 0;font-size:14px}.sp-mode-pair .sp-product-row em{font-size:11px}.sp-role-map{color:#53616e;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:30px;font-size:11px;display:flex}.story-system{--story-accent:#b44f29;--story-soft:#f7eee8}.story-system .system-hero{color:#111827;background:#e9eeef}.story-system .system-hero-visual{overflow:visible}.story-system .system-hero-visual>.sp-cover{padding:20px}.story-system .system-hero-visual>span{color:#53616e}.story-system .system-hero .story-deck{color:#56616b}.story-system .system-hero h1 em{color:#bb512c}.story-system .system-edition{color:#56616b}.story-system .system-hero .sp-cover-heading{display:none}.story-system .system-hero .sp-cover-stage{margin-top:0}.story-system .system-hero-grid{grid-template-columns:.85fr 1.15fr}.story-system .story-section{border-top:0}.story-system .impact-measurement{background:#f4f1ed}.story-system .system-component-grid .component-card{background:#f4f5f6}@media (max-width:900px){.sp-state-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.story-system .system-hero-grid{grid-template-columns:1fr}.sp-palette small{display:none}.sp-foundation-grid,.sp-anatomy{grid-template-columns:1fr}.sp-cover-heading>strong{font-size:36px}}@media (max-width:600px){.sp-foundations,.sp-components,.sp-modes{margin:24px 0;padding:22px}.sp-palette{gap:3px}.sp-palette i{height:45px}.sp-palette span{font-size:9px}.sp-type>strong{font-size:80px}.sp-token-cards article{min-height:135px;padding:16px}.sp-token-cards strong{font-size:18px}.sp-state-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px}.sp-size-row{gap:14px}.sp-anatomy{padding:22px}.sp-anatomy>div>.sp-button{transform:scale(1.4)}.sp-mode-pair{grid-template-columns:1fr}.sp-dark{transform:none}.sp-cover:not(.sp-compact){padding:16px}.sp-cover:not(.sp-compact) .sp-cover-stage{grid-template-columns:1fr}.sp-cover:not(.sp-compact) .sp-cover-stage>.sp-dark{display:none}.sp-floating{padding:12px;left:10%}.sp-compact{padding:20px}}.work-card-media>.sp-compact{border-radius:12px 12px 0 0;width:88%;height:100%;position:absolute;inset:12% 6% 0}.story-page.story-system{--story-accent:#b44f29;--story-soft:#f7eee8}.story-system .button-preview i:first-child{background:#ed794c}.story-system .button-preview i:nth-child(2){color:#37495c;background:#fff;border-color:#c7d5db}.story-system .reading-progress{background:#b44f29}.sp-component-cover{background-color:#f2f1ee;background-image:linear-gradient(#d6d4cf55 1px,#0000 1px),linear-gradient(90deg,#d6d4cf55 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:28px 28px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding:30px}.sp-component-cover .sp-cover-heading>strong{margin:16px 0 26px;font-size:38px;line-height:1.05}.sp-cover-mosaic{grid-template-columns:1fr 1fr;gap:14px;display:grid}.sp-cover-mosaic>div{background:#fff;border:1px solid #e0e2e5;border-radius:10px;min-width:0;padding:20px;box-shadow:0 8px 18px #15203308}.sp-mosaic-type>small,.sp-mosaic-controls>small{letter-spacing:.08em;color:#657181;margin-bottom:12px;font-size:9px;display:block}.sp-mosaic-type>strong{letter-spacing:-.06em;font-size:64px;font-weight:500;line-height:1.1}.sp-mosaic-type>div{margin-top:15px;display:flex}.sp-mosaic-type i{width:20%;height:24px}.sp-mosaic-controls{flex-wrap:wrap;align-content:start;gap:12px;display:flex}.sp-mosaic-controls>small{width:100%;margin:0}.sp-mosaic-controls>div{gap:12px;width:100%;margin-top:8px;display:flex}.sp-collection-title{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.sp-collection-title strong{font-size:16px}.sp-collection-title>span{letter-spacing:.08em;color:#77838f;font-size:7px}.sp-collection-buttons{gap:8px;margin-bottom:18px;display:flex}.sp-collection .sp-button{height:30px;font-size:11px}.sp-field{text-align:left;flex-direction:column;gap:8px;display:flex}.sp-field>small{color:#556d84;font:12px/16px Inter,sans-serif}.sp-field>small b{color:#e23c39}.sp-field>div{color:#556d84;background:#fff;border:1px solid #556d84;border-radius:4px;align-items:center;height:44px;min-height:44px;padding:13px 17px;font:14px/20px Inter,sans-serif;display:flex}.sp-field-error>div{border-color:#e23c39}.sp-field-error>small:last-child{color:#c92c29}.sp-switch{background:#c7d5db;border-radius:10px;align-items:center;width:36px;min-width:36px;height:20px;padding:2px;display:inline-flex}.sp-switch>i{background:#fff;border-radius:50%;width:16px;height:16px;display:block;box-shadow:0 1px 4px #556d8429}.sp-switch.is-on{background:#ed794c;justify-content:flex-end}.sp-switch.hover{background:#b3c2cc}.sp-switch.is-on.hover{background:#cf582c}.sp-switch.active{background:#8ba2b2}.sp-switch.is-on.active{background:#ad4a24}.sp-switch.focus{box-shadow:0 0 0 2px #ffffffe6,0 0 0 4px #2c6de2}.sp-switch.disabled{opacity:.5}.sp-selection-row{justify-content:space-between;align-items:center;gap:12px;padding:20px 0;font-size:12px;display:flex}.sp-selection-row small{color:#7c8795;margin-top:5px;font-size:11px;display:block}.sp-collection-tags{flex-wrap:wrap;gap:6px;display:flex}.sp-collection-tags>span{color:#246343;background:#e5f4e9;border-radius:4px;padding:4px 6px;font-size:8px}.sp-collection-tags>span:nth-child(2){color:#936315;background:#fff3dc}.sp-collection-tags>span:nth-child(3){color:#b23937;background:#fde8e7}.sp-collection-people{color:#84919c;align-items:center;gap:10px;margin-top:18px;font-size:9px;display:flex}.sp-collection-people>div{display:flex}.sp-collection-people i{color:#556d84;background:#e5ebef;border:2px solid #fff;border-radius:50%;place-items:center;width:24px;height:24px;margin-left:-4px;font-size:8px;font-style:normal;display:grid}.sp-cover-mosaic>.sp-collection-dark{color:#fff;background:#18212c;border-color:#34414e}.sp-collection-dark .sp-field>div,.sp-settings-dark .sp-field>div{color:#edf2f5;background:#24313f;border-color:#778898}.sp-collection-dark .sp-field>small,.sp-settings-dark .sp-field>small{color:#b7c4cd}.sp-collection-dark .sp-secondary,.sp-settings-dark .sp-secondary{color:#d5dfe5;background:0 0;border-color:#778898}.sp-component-cover.sp-compact{height:100%;padding:24px;container-type:inline-size}.sp-compact.sp-component-cover .sp-cover-heading{display:none}.sp-compact.sp-component-cover .sp-cover-mosaic{zoom:calc(100cqw / 640px);gap:16px;width:640px;transform:none}.sp-compact.sp-component-cover .sp-mosaic-type,.sp-compact.sp-component-cover .sp-mosaic-controls{display:none}.sp-compact.sp-component-cover .sp-collection{padding:26px}.sp-compact.sp-component-cover .sp-collection-title>strong{font-size:26px}.sp-compact.sp-component-cover .sp-collection-title>span{font-size:9px}.sp-compact.sp-component-cover .sp-collection-buttons{margin:26px 0}.sp-compact.sp-component-cover .sp-collection .sp-button{height:36px;font-size:14px}.sp-compact.sp-component-cover .sp-selection-row{padding:24px 0}.sp-compact.sp-component-cover .sp-collection-people{display:none}.sp-documentation{background:#fafafa;border:1px solid #e4e7e9;border-radius:24px;margin:36px 0;padding:42px}.sp-doc-grid{grid-template-columns:1fr 1fr;gap:36px;display:grid}.sp-doc-grid>article{background:#fff;border:1px solid #dce2e6;border-radius:12px;min-width:0;padding:28px}.sp-doc-grid>article>small{letter-spacing:.09em;color:#556d84;margin-bottom:28px;font-size:10px;display:block}.sp-doc-grid dl{margin:28px 0}.sp-doc-grid dl>div{border-bottom:1px solid #e5ebef;justify-content:space-between;gap:20px;padding:12px 0;font-size:12px;display:flex}.sp-doc-grid dd{text-align:right;color:#556d84;margin:0}.sp-doc-grid h4{font-size:15px}.sp-doc-grid p,.sp-usage-guide p,.sp-pattern-key p{color:#64707e;font-size:13px;line-height:1.7}.sp-switch-matrix{gap:22px;display:grid}.sp-switch-matrix>div{text-transform:capitalize;grid-template-columns:1fr 60px 60px;align-items:center;font-size:12px;display:grid}.sp-usage-guide{grid-template-columns:1fr 1fr;gap:30px;margin-top:30px;display:grid}.sp-usage-guide>div{border-top:2px solid #c6daca;padding-top:20px}.sp-usage-guide>div:last-child{border-color:#ead0c8}.sp-usage-guide b{font-size:13px}.sp-usage-guide>div>div{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.sp-settings{background:#fff;border:1px solid #d4dde3;border-radius:12px;min-width:0;padding:28px}.sp-settings>small{letter-spacing:.08em;color:#6b7c8c;font-size:9px}.sp-settings h4{letter-spacing:-.04em;margin:20px 0 8px;font-size:24px}.sp-settings>p{color:#81909e;margin-bottom:26px;font-size:12px}.sp-settings-dark{color:#fff;background:#18212c;border-color:#34414e}.sp-settings .sp-selection-row{border-bottom:1px solid #8899a433}.sp-settings-footer{justify-content:flex-end;gap:8px;margin-top:26px;display:flex}.sp-pattern-key{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;display:grid}.sp-pattern-key b{font-size:12px}.story-system .token-hierarchy>div{background:0 0!important}.story-system .system-component-grid{display:none}@media (max-width:700px){.sp-documentation{padding:24px 18px}.sp-doc-grid,.sp-usage-guide,.sp-pattern-key{grid-template-columns:1fr}.sp-doc-grid>article{padding:22px}.sp-component-cover{padding:20px}.sp-component-cover .sp-cover-heading>strong{font-size:32px}.sp-cover-mosaic{gap:10px}.sp-cover-mosaic>div{padding:14px}.sp-mosaic-controls .sp-button{height:29px;font-size:11px}.sp-mosaic-controls>div{gap:6px}.sp-collection-title>span{display:none}.sp-collection-buttons{flex-wrap:wrap}.sp-collection .sp-field>div{padding:8px;font-size:11px}.sp-collection .sp-field>small{font-size:9px}.sp-collection .sp-selection-row{font-size:10px}.sp-settings{padding:22px}.sp-settings-footer .sp-button{font-size:12px}}.migration-view-controls{justify-content:center;gap:6px;margin:18px 0;display:flex}.migration-view-controls button{color:#5a6574;cursor:pointer;background:#fff;border:1px solid #d5dde4;border-radius:20px;padding:8px 16px;font:12px Inter,sans-serif}.migration-view-controls button[aria-pressed=true]{color:#fff;background:#37495c;border-color:#37495c}.migration-surface{font-size:12px}.migration-appbar{flex-shrink:0;height:52px}.migration-global-search{opacity:.65;border:1px solid #ffffff30;border-radius:4px;width:180px;margin-left:auto;padding:8px 12px;font-size:10px}.migration-avatar{color:#37495c;background:#c7d5db;border-radius:50%;place-items:center;width:28px;height:28px;font-size:10px;display:grid}.migration-layout{grid-template-columns:130px minmax(0,1fr)}.migration-layout aside{padding:20px 8px}.migration-layout aside b{padding:10px;font-size:10px}.migration-layout aside span{margin-left:10px;font-size:8px}.migration-layout aside .migration-aside-bottom{letter-spacing:0;text-transform:none;margin-top:auto;font-size:9px}.migration-layout .migration-main{padding:20px}.migration-breadcrumb{color:#82909f;margin-bottom:16px;font-size:9px}.migration-title{align-items:center;gap:8px}.migration-title h4{margin:0;font-size:23px}.migration-title p{color:#788797;margin:7px 0 0;font-size:10px}.migration-primary{padding:9px 11px;font-size:10px}.migration-metrics{gap:10px;margin:22px 0 18px}.migration-metrics article{padding:14px}.migration-metrics span{margin-bottom:9px;font-size:10px}.migration-metrics strong{font-size:24px}.migration-metrics small{color:#81909e;margin-top:7px;font-size:9px;display:block}.migration-workspace{grid-template-columns:minmax(0,1fr) 190px;gap:16px;display:grid}.migration-tabs{border-bottom:1px solid #dce3e8;align-items:center;gap:18px;height:37px;font-size:10px;display:flex}.migration-tabs b{color:#1677ff;border-bottom:2px solid;align-self:stretch;align-items:center;gap:5px;display:flex}.migration-tabs em{color:#556d84;background:#e5ebef;border-radius:4px;padding:2px 4px;font-size:8px;font-style:normal}.migration-filterbar{gap:6px;padding:12px 0;font-size:9px;display:flex}.migration-filterbar span{background:#fff;border:1px solid #d9e0e5;border-radius:3px;padding:8px}.migration-filterbar span:first-child{color:#8896a3;flex:1}.migration-dense-table{background:#fff;border:1px solid #e0e5e9;border-radius:4px;overflow:hidden}.migration-dense-table>div{border-bottom:1px solid #e5ebef;grid-template-columns:1.3fr .8fr .65fr .7fr;align-items:center;gap:8px;padding:12px 10px;font-size:9px;display:grid}.migration-dense-table>div:first-child{color:#7d8995;background:#fafafa;padding-top:10px;padding-bottom:10px}.migration-dense-table>div:last-child{border:0}.migration-dense-table strong{font-size:9px;font-weight:600}.migration-dense-table strong small{color:#8b97a1;margin-top:5px;margin-left:12px;font-size:8px;font-weight:400;display:block}.migration-dense-table em{color:#ad6800;background:#fff7e6;border:1px solid #ffe7ba;border-radius:2px;justify-self:start;padding:3px 4px;font-size:8px;font-style:normal}.migration-dense-table .risk-high{color:#cf1322;background:#fff1f0;border-color:#ffa39e}.migration-dense-table .risk-low{color:#389e0d;background:#f6ffed;border-color:#b7eb8f}.migration-dense-table span>i{color:#556d84;background:#e5ebef;border-radius:50%;place-items:center;width:22px;height:22px;font-size:8px;font-style:normal;display:grid}.migration-evidence{background:#e5ebef;border-radius:4px;height:3px;margin-top:5px;display:block}.migration-evidence i{background:#1677ff;height:100%;display:block}.migration-pagination{color:#7d8995;justify-content:space-between;margin-top:14px;font-size:9px;display:flex}.migration-review-panel{background:#fff;border:1px solid #e0e5e9;border-radius:3px;padding:16px}.migration-review-panel>small{letter-spacing:.08em;color:#86929e;font-size:8px}.migration-review-panel h5{margin:12px 0;font-size:17px}.migration-risk-alert{color:#b84d38;font-size:8px}.migration-review-panel label{color:#556d84;margin:18px 0 7px;font-size:9px;display:block}.migration-faux-field{color:#556d84;border:1px solid #c7d5db;border-radius:3px;padding:9px 7px;font-size:9px}.migration-checks{gap:10px;margin:20px 0;font-size:8px;display:grid}.migration-review-note{color:#8a939b;margin:14px 0;font-size:9px;line-height:1.5}.migration-review-panel>.migration-primary{justify-content:center;display:flex}.migration-shadcn{color:#253544;background:#fff}.migration-shadcn .migration-appbar{color:#37495c;background:#fff;border-color:#e5ebef}.migration-shadcn .migration-global-search{background:#f8fafb;border-color:#c7d5db}.migration-shadcn .migration-symbol,.migration-shadcn .migration-primary{color:#fff;background:#ed794c;border-radius:4px}.migration-shadcn .migration-layout aside{background:#f5f8fa;border-color:#e5ebef}.migration-shadcn .migration-layout aside b.selected{color:#ad4a24;background:#fbe4db;border-radius:4px}.migration-shadcn .migration-metrics article{box-shadow:none;background:#fafcfd;border-color:#e5ebef #e5ebef #e5ebef #ed794c;border-left-style:solid;border-left-width:3px;border-radius:6px}.migration-shadcn .migration-tabs b{color:#ad4a24}.migration-shadcn .migration-dense-table{border-radius:6px}.migration-shadcn .migration-dense-table>div:first-child{color:#556d84;background:#f1f5f7}.migration-shadcn .migration-dense-table .is-selected{background:#fff5ee}.migration-shadcn .migration-dense-table em{border:0;border-radius:4px}.migration-shadcn .migration-evidence i{background:#ed794c}.migration-shadcn .migration-review-panel{border-color:#c7d5db;border-radius:8px;box-shadow:0 4px 18px #37495c0a}.migration-shadcn .migration-review-note{color:#ad4a24;background:#fff5ee;border-radius:4px;padding:10px}.migration-stage:focus-within{outline-offset:3px;outline:2px solid #556d84}@media (max-width:900px){.migration-layout{grid-template-columns:95px minmax(0,1fr)}.migration-layout .migration-main{padding:14px}.migration-workspace{grid-template-columns:minmax(0,1fr) 165px;gap:10px}.migration-review-panel{padding:12px}.migration-title h4{font-size:19px}}@media (max-width:620px){.system-migration-comparison{overflow-x:auto}.migration-stage{width:860px;max-width:none;min-height:610px}.migration-toolbar{gap:12px}.migration-layout{grid-template-columns:120px minmax(0,1fr)}.migration-view-controls{justify-content:flex-start}.migration-workspace{grid-template-columns:minmax(0,1fr) 190px}.migration-layout .migration-main{padding:20px}}.migration-main{width:100%;min-width:0;max-width:none;margin:0;padding:20px}.story-page .system-hero{height:auto;min-height:650px}.story-page .system-hero-visual{align-self:center}.story-page .system-hero .sp-cover{height:auto;max-height:none}.sp-mode-pair{align-items:start}.system-hero-visual .sp-component-cover{container-type:inline-size}.system-hero-visual .sp-cover-mosaic{zoom:calc(100cqw / 640px);grid-template-columns:1fr 1fr;width:640px}.system-hero-visual .sp-cover-mosaic>div{padding:20px}.system-hero-visual .sp-mosaic-controls .sp-button{height:36px;font-size:14px}.system-hero-visual .sp-mosaic-controls>div{gap:12px}.system-hero-visual .sp-collection .sp-field>div{padding:13px 17px;font-size:14px}.system-hero-visual .sp-collection .sp-field>small,.system-hero-visual .sp-collection .sp-selection-row{font-size:12px}.migration-stage{min-height:800px}.migration-main{align-self:start}.migration-layout{align-content:start}.migration-workspace{align-items:start}@media (max-width:620px){.migration-stage{min-height:800px}}