*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;background:#F5F5F7;color:#252529}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #08778F;outline-offset:3px}a{color:inherit}.workbench-header{height:76px;border-bottom:1px solid #DEDEE3;background:#fff;display:flex;align-items:center;gap:22px;padding:0 28px;position:sticky;top:0;z-index:90}.brand{display:flex;align-items:center;gap:6px;font-size:26px;font-weight:750;letter-spacing:-1.2px;text-decoration:none}.brand>span:first-child{height:27px;width:24px;border-radius:6px;display:grid;place-items:center;background:#FF005A;transform:rotate(-8deg)}.brand img{width:20px;height:23px;object-fit:contain}.brand-dot{font-size:9px;align-self:flex-start;letter-spacing:0;margin-top:3px}.project-title{font-size:12px;color:#6b6b76;border-left:1px solid #DEDEE3;padding-left:21px}.project-title i{font-style:normal;color:#B3B3BD;margin:0 8px}.brand-tokens{display:flex;gap:16px;align-items:center;margin-left:auto}.brand-tokens>span{font-size:10px;color:#666672;font-family:ui-monospace,monospace;display:flex;align-items:center;gap:6px}.brand-tokens i{width:9px;height:9px;border-radius:50%;display:block}.brand-tokens .pink{background:#FF005A}.brand-tokens .blue{background:#22A7CC}.view-controls{display:flex;gap:2px;background:#F1F1F4;padding:4px;border-radius:10px;margin-left:12px}.view-controls button{border:0;background:none;padding:8px 13px;min-height:34px;font-size:11px;color:#656571;border-radius:7px}.view-controls button.selected{background:white;color:#222228;box-shadow:0 1px 4px #00000012}.workbench-layout{display:grid;grid-template-columns:252px minmax(0,1fr)}.state-sidebar{position:sticky;top:76px;height:calc(100dvh - 76px);overflow:auto;background:#FCFCFD;border-right:1px solid #DEDEE3;padding:24px 16px;scrollbar-width:thin;scrollbar-color:#D9D9E0 transparent}.sidebar-label{font-size:9px;font-weight:650;letter-spacing:1.25px;color:#757580;margin:0 10px 16px}.state-sidebar nav{display:grid;gap:3px}.state-sidebar nav button{border:0;background:transparent;display:flex;align-items:center;gap:10px;width:100%;border-radius:9px;padding:12px 10px;text-align:left;font-size:12px;color:#61616D;min-height:42px}.state-sidebar nav button svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none}.state-sidebar nav button.active{background:#FFF0F5;color:#BD154D;font-weight:650}.state-sidebar nav button .count{margin-left:auto;font-size:9px;font-weight:400;color:#7C6B72;background:#FFFFFF;padding:2px 5px;border-radius:4px}.state-search{margin:26px 7px 22px}.state-search label{font-size:10px;color:#62626F;display:block;margin-bottom:7px}.state-search input{border:1px solid #DADAE2;border-radius:8px;width:100%;min-height:38px;padding:9px 11px;background:white;font-size:11px}.state-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}#state-list{display:grid;gap:2px}#state-list button{border:0;border-left:2px solid transparent;background:none;border-radius:0 7px 7px 0;text-align:left;display:flex;align-items:center;gap:8px;padding:10px 11px;font-size:11px;line-height:1.5;color:#676774;min-height:37px}#state-list button.active{color:#25252C;background:#F0F0F4;border-left-color:#22A7CC;font-weight:600}.state-dot{width:5px;height:5px;border-radius:50%;background:#BEC2C7;flex-shrink:0}.state-dot.proposed{background:#22A7CC}.state-dot.current-gap{background:#D59C44}.state-dot.current-hidden,.state-dot.current-unsupported{background:#A8A8B3}.sidebar-footer{display:flex;flex-direction:column;gap:14px;border-top:1px solid #E5E5EB;margin:24px 10px 3px;padding-top:20px}.sidebar-footer a{font-size:10px;color:#616170;text-decoration:none}.sidebar-footer a:hover{text-decoration:underline}main{min-width:0;padding:33px 34px 30px}.stage-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.eyebrow{font-size:9px;letter-spacing:1.5px;color:#797983;font-weight:600}.stage-title h1{font-size:34px;font-weight:550;letter-spacing:-1px;margin:9px 0 7px}.stage-title p{font-size:12px;color:#70707C;line-height:1.7;margin:0;max-width:650px}.reset-button{border:1px solid #DADAE1;background:#FCFCFD;border-radius:9px;padding:10px 13px;font-size:11px;white-space:nowrap;min-height:38px;color:#666670}.stage-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;padding:15px 0;border-top:1px solid #E0E0E7;border-bottom:1px solid #E0E0E7}.state-kind{font-size:8px;font-weight:650;letter-spacing:.7px;color:#59656A;background:#E8EFF1;border-radius:4px;padding:5px 7px;margin-right:auto}.state-kind.proposed{background:#E6F5FA;color:#086981}.state-kind.current-gap{background:#FFF0D6;color:#785016}.stage-controls label{font-size:10px;color:#6E6E7B;display:flex;align-items:center;gap:8px}.stage-controls select{border:1px solid #D7D7DE;border-radius:7px;background:white;min-height:33px;font-size:10px;padding:6px 8px;color:#494955;max-width:220px}.small-check input{accent-color:#D21E65}.phone-stage{display:flex;justify-content:center;align-items:start;gap:34px;padding:0 0 28px;flex-wrap:wrap}.phone-card{--scale:1.15;width:calc(390px*var(--scale));min-width:0}.phone-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;color:#787882;font-size:9px;letter-spacing:1px;padding:0 4px}.phone-label b{font-size:11px;letter-spacing:0;color:#54545D;font-weight:500}.phone-label a{font-size:9px;text-decoration:none;letter-spacing:0;color:#70707C}.phone-scale{width:calc(390px*var(--scale));height:calc(844px*var(--scale));position:relative}.phone-scale>.phone{zoom:var(--scale)}.state-inspector{padding:23px 25px;border-radius:13px;border:1px solid #DCDCE4;background:#FEFEFF;max-width:970px;margin:0 auto}.state-inspector h2{font-size:19px;font-weight:550;letter-spacing:-.3px;margin:10px 0}.state-inspector p{font-size:12px;line-height:1.75;color:#686874;margin:8px 0}.inspector-actions{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0 0}.inspector-actions>span{font-size:9px;color:#52616A;padding:5px 7px;border-radius:5px;background:#F2F5F6}.state-inspector details{border-top:1px solid #E8E8EC;margin-top:18px;padding-top:15px}.state-inspector summary{font-size:11px;color:#696974;cursor:pointer}.state-inspector code{font-size:10px;line-height:1.6;color:#6B6B77;overflow-wrap:anywhere;display:block}.local-note{max-width:970px;margin:20px auto 0;color:#7B7B84;font-size:10px;line-height:1.8}.local-note a{white-space:nowrap;color:#4B6C79}#capture-root{display:none}body.capture{background:transparent;overflow:hidden}body.capture #workbench{display:none}body.capture #capture-root{display:block}body.capture .phone{border:0;border-radius:0;box-shadow:none}body.capture .home-indicator{bottom:8px}.block-label{font-size:11px;letter-spacing:.6px;color:var(--muted);margin:8px 0 14px;font-weight:600}.block-swatch-row{display:flex;gap:9px}.block-swatch{height:48px;flex:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font:10px ui-monospace,monospace}.phone .nav-example{height:115px;position:relative;background:var(--surface);border-radius:16px;margin:15px 12px}.phone .nav-example .nav-layer{bottom:22px}.phone .nav-example .bottom-nav{height:62px}.phone .nav-example .bottom-nav>button{min-height:50px}.phone .nav-example .nav-badge{top:5px}.phone .nav-option-title{font-size:15px;font-weight:600;margin:22px 16px 6px}.phone .nav-option-copy{font-size:12px;line-height:1.6;color:var(--muted);margin:0 18px}.phone .block-caption{font-size:13px;line-height:1.55;color:var(--muted)}
@media(max-width:1200px){.workbench-layout{grid-template-columns:224px minmax(0,1fr)}main{padding:27px 23px}.phone-card{--scale:.9}.phone-stage{gap:24px}.brand-tokens{display:none}.view-controls{margin-left:auto}.stage-controls{gap:11px}.stage-controls label{font-size:9px}.stage-controls select{font-size:9px;max-width:183px}}@media(max-width:1020px){.phone-card{--scale:.78}.phone-stage{gap:22px}.stage-title h1{font-size:30px}.project-title{display:none}}@media(max-width:890px){.workbench-layout{grid-template-columns:190px minmax(0,1fr)}.state-sidebar{padding:20px 10px}main{padding:24px 15px}.phone-card{--scale:.7}.phone-stage{gap:15px}.stage-controls .state-kind{width:100%;margin-right:0}.stage-title{align-items:start}.reset-button{font-size:9px;padding:9px}.state-inspector{padding:20px}}@media(max-width:780px){.workbench-layout{display:block}.state-sidebar{position:static;height:auto;max-height:305px;border-right:0;border-bottom:1px solid #DDDEE5;padding:16px}.state-sidebar nav{display:flex;overflow:auto;gap:5px;scrollbar-width:none}.state-sidebar nav button{white-space:nowrap;width:auto;flex-shrink:0;padding:10px}.state-sidebar nav button .count{display:none}.state-sidebar .sidebar-label:first-child{display:none}.state-search{margin:15px 0 10px}.state-search label{display:none}.state-label{margin:10px 0 8px}#state-list{display:flex;overflow:auto;gap:5px}#state-list button{white-space:nowrap;flex-shrink:0;border-left:0;border-bottom:2px solid transparent;border-radius:6px}#state-list button.active{border-bottom-color:#22A7CC}.sidebar-footer{display:none}.workbench-header{height:68px;padding:0 18px}.brand{font-size:23px}.view-controls{gap:0}.view-controls button{padding:7px 11px;font-size:10px}.phone-card{--scale:.83}.phone-stage{gap:20px}.stage-title p{font-size:11px}.stage-controls{margin-bottom:21px}.state-inspector{margin-top:6px}.stage-controls .state-kind{width:auto}}@media(max-width:690px){.phone-card{--scale:1}.phone-stage{gap:32px}.stage-title h1{font-size:29px}.state-inspector{padding:19px}.stage-controls{gap:12px}.stage-controls .state-kind{width:100%}.local-note{font-size:10px}.stage-title{gap:9px}}@media(max-width:435px){.phone-card{--scale:.9}main{padding:23px 15px}.workbench-header{padding:0 14px;gap:10px}.brand{font-size:22px}.brand>span:first-child{width:22px;height:25px}.view-controls{margin-left:auto}.view-controls button{padding:7px 9px}.stage-title h1{font-size:27px}.stage-title p{max-width:270px}.reset-button{font-size:0;padding:9px;min-width:34px}.reset-button:after{content:'↻';font-size:16px}}@media(max-width:390px){.phone-card{--scale:.84}}@media(max-width:355px){.phone-card{--scale:.77}.view-controls button{padding:7px}.brand{font-size:20px}.brand-dot{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.phone-label .png-link{margin-left:10px;flex:0 0 auto}.phone-label a:first-of-type{margin-left:auto}

.tb-panel{display:flex;flex-direction:column;gap:14px;max-width:970px;margin:0 auto 26px;padding:18px 20px;border:1px solid #DCDCE4;border-radius:13px;background:#FEFEFF}
.tb-group{display:flex;align-items:baseline;gap:14px}
.tb-title{font-size:11px;font-weight:650;color:#75757F;width:118px;flex-shrink:0;letter-spacing:.3px}
.tb-row{display:flex;flex-wrap:wrap;gap:6px}
.tb-chip{position:relative;display:inline-flex}
.tb-chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.tb-chip span{display:inline-flex;align-items:center;min-height:30px;padding:5px 12px;border:1px solid #DADAE2;border-radius:999px;font-size:11.5px;color:#55555F;background:#fff;transition:background-color .12s,color .12s,border-color .12s}
.tb-chip input:checked+span{background:#17171C;border-color:#17171C;color:#fff}
.tb-chip input:focus-visible+span{outline:2px solid #08778F;outline-offset:2px}
.tb-chip.disabled{opacity:.4}
.tb-chip.disabled input{cursor:default}

body.tellitem-mode .state-label,body.tellitem-mode #state-list,body.tellitem-mode .state-search,body.tellitem-mode .state-inspector{display:none}

.nav-group-label{font-size:9px;font-weight:650;letter-spacing:1.25px;color:#9C9CA6;margin:14px 10px 6px;text-transform:uppercase}
.nav-group-label:first-child{margin-top:0}
.state-sidebar nav button.nav-child{padding-left:22px;font-size:11.5px;min-height:36px}
.tb-panel .tb-note{margin:2px 2px 0;font-size:11.5px;color:var(--wb-muted,#8A8F98)}
.state-sidebar nav .nav-group-label:first-child{margin-top:0}
button.nav-disclosure{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;text-align:left;cursor:pointer;padding:6px 10px;min-height:30px;border-radius:7px}
button.nav-disclosure:hover{background:#F2F2F5}
button.nav-disclosure>svg{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none;margin-left:auto;transition:transform .15s ease}
button.nav-disclosure.open>svg{transform:rotate(90deg)}
button.nav-disclosure>.count{margin-left:0;font-size:9px;color:#8B8B95;background:#F0F0F4;padding:2px 5px;border-radius:4px}
.nav-inbox-cards{display:grid;gap:2px;margin-top:2px}
.nav-sub-label{font-size:8px;font-weight:650;letter-spacing:1.1px;color:#ABABB5;text-transform:uppercase;margin:8px 10px 3px 12px}
.nav-inbox-cards button{padding-left:20px;font-size:11.5px;min-height:34px}
.nav-inbox-cards button svg{width:14px;height:14px}
.preview-controls{display:flex;flex-wrap:wrap;gap:12px;max-width:970px;margin:0 auto 24px}
.stage-toggle{position:relative;display:flex;align-items:center;gap:16px;flex:1 1 260px;min-width:0;min-height:72px;padding:16px 20px;border:1px solid #BDBDC9;border-radius:12px;background:#fff;color:#252529;box-shadow:0 2px 5px #18203808;cursor:pointer;user-select:none;transition:background-color .15s,border-color .15s}
.stage-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.stage-toggle-copy{display:flex;flex:1;flex-direction:column;gap:5px}
.stage-toggle-copy strong{font-size:14px;font-weight:600;line-height:1.25}
.stage-toggle-copy small{font-size:11px;line-height:1.4;color:#686874}
.stage-toggle-status{min-width:22px;font-size:11px;font-weight:600;color:#686874}
.stage-toggle-track{flex-shrink:0;width:44px;height:26px;border-radius:999px;background:#888893;padding:3px;transition:background-color .15s}
.stage-toggle-track:before{content:'';display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000026;transition:transform .15s}
.stage-toggle:hover{border-color:#858592;background:#FCFCFE}
.stage-toggle:has(input:checked){border-color:#D8759B;background:#FFF0F5}
.stage-toggle input:checked~.stage-toggle-track{background:#D21E65}
.stage-toggle input:checked~.stage-toggle-track:before{transform:translateX(18px)}
.stage-toggle input:checked~.stage-toggle-status{color:#AE164F}
.stage-toggle:has(input:focus-visible){outline:3px solid #08778F;outline-offset:3px}
@media(max-width:690px){.stage-toggle{flex-basis:100%;min-height:68px;padding:14px 16px}.preview-controls{gap:10px}}
@media(prefers-reduced-motion:reduce){.stage-toggle,.stage-toggle-track,.stage-toggle-track:before{transition:none}}

.nav-section{min-width:0}
.nav-section+.nav-section{margin-top:8px}
.nav-section .nav-group-label{margin-top:8px}
.state-sidebar nav .nav-destination{margin-top:2px}
.state-sidebar nav .nav-destination-toggle{min-height:42px;font-size:12px;font-weight:600;color:#3D3D49}
.state-sidebar nav .nav-destination.is-current>.nav-destination-toggle{color:#BD154D}
.nav-destination-toggle .nav-chevron{margin-left:auto;display:flex}
.state-sidebar nav .nav-chevron svg{width:12px;height:12px;transition:transform .15s}
.nav-destination-toggle[aria-expanded="true"] .nav-chevron svg{transform:rotate(90deg)}
.nav-children{display:grid;gap:2px;margin:0 0 8px 18px;padding-left:8px;border-left:1px solid #DEDEE6}
.state-sidebar nav .nav-children button{padding:9px 10px;font-size:11.5px;min-height:36px}
.state-sidebar nav .nav-children button svg{width:15px;height:15px}
.nav-children[hidden],.nav-inbox-cards[hidden]{display:none}
@media(max-width:780px){
  .state-sidebar nav{align-items:flex-start;max-height:205px;overflow:auto}
  .nav-section{flex:0 0 175px}
  .nav-section+.nav-section,.state-sidebar nav .nav-destination{margin-top:0}
  .nav-screens-label{display:none}
  .state-sidebar nav .nav-section button{width:100%;white-space:normal}
  .nav-children{margin-left:12px;padding-left:6px}
  .nav-inbox-cards{max-height:165px;overflow:auto}
}
@media(prefers-reduced-motion:reduce){.state-sidebar nav .nav-chevron svg{transition:none}}

.state-sidebar nav .nav-inbox-cards-toggle{font-weight:500;color:#3D3D49;gap:8px}
.state-sidebar nav .nav-inbox-cards-toggle>svg:first-child{margin:0;width:15px;height:15px;transform:none}
.state-sidebar nav .nav-inbox-cards-toggle>svg:last-child{width:12px;height:12px}
.nav-inbox-cards{margin-inline-start:8px;padding-inline-start:8px;border-inline-start:1px solid #DEDEE6}