@font-face{font-family:DemoSans;src:url('/static/fonts/DejaVuSans.ttf')}*{box-sizing:border-box}body{margin:0;background:#f5f6f2;color:#183c32;font-family:Arial,sans-serif;font-size:14px}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #83ad95;outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:#fdfdfb;border-right:1px solid #e2e7df;padding:32px 20px 22px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;gap:11px;align-items:center;padding:0 12px;font-family:Georgia,serif;font-size:26px;letter-spacing:-1px}.brand-symbol{width:38px;height:42px;border-radius:13px;background:#204d3b;color:#fff;display:grid;place-items:center;font-family:Arial;font-size:25px}.brand small{display:block;font:8px Arial,sans-serif;letter-spacing:1.7px;margin-top:6px;color:#7b887e}.sidebar-section{margin-top:40px;overflow:auto}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:600;color:#78857b}.sidebar-section>.eyebrow{display:block;margin:0 14px 15px}nav{display:flex;flex-direction:column;gap:4px}nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;padding:11px 14px;border-radius:8px;color:#69776c;font-size:13px}nav button i{font-size:19px}nav button:hover{background:#f0f3ec}nav button[aria-current=page]{background:#e6eee4;color:#244c36;font-weight:600}nav button[aria-current=page]:after{content:'';width:5px;height:5px;border-radius:50%;background:#48774c;margin-left:auto}.sidebar-footer{margin-top:auto;padding:22px 12px 0;font-size:11px;color:#5c7160}.sidebar-footer p{line-height:1.7;font-size:10px;color:#8b938b;margin:10px 0 17px}.local-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;background:#669267;margin-right:5px}.reset-button{border:0;background:transparent;color:#768376;padding:0;font-size:11px}.reset-button i{margin-right:6px}.workspace{margin-left:244px}.toolbar{height:77px;border-bottom:1px solid #e2e7df;display:flex;align-items:center;justify-content:center;padding:0 44px;background:#fafbf8}.breadcrumb{font-size:11px;color:#728071}.breadcrumb span{margin:0 12px;color:#b3bab0}.mode-switch{padding:4px;background:#ebeee7;border:1px solid #e1e6dc;border-radius:9px;display:flex;gap:3px}.mode-switch button{border:0;background:transparent;padding:9px 13px;border-radius:6px;font-size:11px;color:#778271}.mode-switch button i{font-size:15px;margin-right:5px}.mode-switch button[aria-pressed=true]{background:#fff;color:#254533;box-shadow:0 1px 3px #18341b12}main{max-width:1500px;margin:0 auto;padding:36px 44px 22px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-heading h1{font-family:Georgia,serif;font-weight:400;font-size:33px;line-height:1.22;letter-spacing:-.9px;margin:12px 0 11px}.page-heading p{font-size:12px;color:#889184;margin:0;line-height:1.6}.demo-label{display:flex;align-items:center;gap:7px;background:#edf1e9;border:1px solid #dce5d6;border-radius:20px;padding:8px 12px;font-size:10px;color:#5b7555}.demo-label>span{width:5px;height:5px;border-radius:50%;background:#729566}.phone-stage{display:flex;align-items:center;justify-content:center;gap:clamp(40px,6vw,110px);padding:4px 0 0;min-height:670px}.context-panel{width:265px;flex-shrink:0}.step-number{font-size:10px;letter-spacing:1.2px;color:#9aa48f}.context-panel h2{font:36px Georgia,serif;letter-spacing:-.7px;margin:19px 0 16px}.context-panel>p{font-size:13px;color:#7d887b;line-height:1.85;margin-bottom:26px}.try-block{border-top:1px solid #dbe2d5;padding-top:20px}.try-block ul{padding:0;list-style:none;margin:17px 0 27px}.try-block li{font-size:12px;color:#5d705f;line-height:1.7;padding:0 0 12px 18px;position:relative}.try-block li:before{content:'↗';position:absolute;left:0;color:#8ba17a}.profile-note{display:flex;gap:10px;align-items:center;padding:14px 0;border-top:1px solid #dbe2d5;border-bottom:1px solid #dbe2d5}.avatar{display:grid;place-items:center;background:#e3eadb;color:#607a50;width:34px;height:34px;border-radius:50%;font-family:Georgia,serif;font-size:18px}.profile-note strong{font-size:11px;font-weight:500}.profile-note div>span{display:block;font-size:9px;color:#919b88;margin-top:5px}.scenario-label{display:block;font-size:10px;color:#77876f;margin:22px 0 8px}select{background:#fdfdfb;border:1px solid #dce4d5;color:#425a40;border-radius:7px;padding:10px 12px;width:100%;font-size:11px}.context-panel .scenario-note{font-size:10px;line-height:1.6;color:#99a18f;margin:9px 0 0}.device-area{flex-shrink:0}.device{width:376px;height:710px;background:#fcfdf9;border:7px solid #26352e;border-radius:47px;box-shadow:0 23px 50px -23px #233b2b45,0 0 0 1px #7d887a;overflow:hidden;display:flex;flex-direction:column;position:relative}.device-top{height:35px;min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:10px;font-weight:600;color:#2c4230;background:#f9fbf6}.island{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:91px;height:23px;border-radius:20px;background:#26352e}.device iframe{border:0;width:100%;flex:1;min-height:0;background:#f9faf5}.device-bottom{height:17px;min-height:17px;display:flex;align-items:center;justify-content:center;background:#f9fbf6}.device-bottom span{width:100px;height:4px;background:#26352e;border-radius:3px}.device-caption{text-align:center;color:#a1a997;font-size:10px;margin-top:16px}.device-caption i{margin-right:5px}.device-area.wide{min-width:0;flex:1}.wide .device{width:100%;height:710px;border-radius:22px}.wide .device-top,.wide .device-bottom{display:none}.phone-stage:has(.wide){gap:22px;align-items:start}.phone-stage:has(.wide) .context-panel{width:190px;padding-top:20px}.overview-intro{font-size:12px;color:#7e8b77;line-height:1.6;margin:20px 0 25px}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px 22px}.screen-card{min-width:0}.screen-card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.screen-card h2{font:20px Georgia,serif;margin:0}.screen-card-heading button{border:0;background:transparent;font-size:10px;color:#688059}.mini-device{height:545px;border:5px solid #344239;border-radius:29px;overflow:hidden;background:#fdfdfb;position:relative}.mini-device iframe{width:100%;height:100%;border:0}.screen-card>p{color:#8b9682;font-size:10px;line-height:1.5}.status{font-size:11px;color:#688059;min-height:15px;text-align:center}footer{padding:17px 44px;border-top:1px solid #e2e7df;color:#a0a895;font-size:9px;display:flex;justify-content:space-between;gap:20px}dialog{border:1px solid #d8e0d0;border-radius:16px;padding:26px;max-width:430px;color:#284733;background:#fafbf7}dialog::backdrop{background:#162b2366}dialog h2{font:25px Georgia,serif;margin:0 0 13px}dialog p{font-size:13px;color:#73816c;line-height:1.7}dialog form{display:flex;gap:10px;justify-content:end;margin-top:24px}dialog button{border:1px solid #d6dfcd;border-radius:7px;padding:10px 14px;background:#fff;font-size:12px}dialog .primary{background:#2e5740;color:white;border-color:#2e5740}@media(min-width:1500px){.phone-stage{gap:130px}}@media(max-width:1200px){.sidebar{width:210px;padding-inline:15px}.workspace{margin-left:210px}main{padding:28px}.toolbar{padding:0 28px}.phone-stage{gap:35px}.context-panel{width:225px}.page-heading h1{font-size:29px}.demo-label{display:none}.device{width:350px;height:690px}}@media(max-width:970px){.sidebar{width:180px;padding-inline:10px}.brand{font-size:22px;padding:0 5px}.brand small{font-size:6px}.brand-symbol{width:30px;height:34px}nav button{font-size:11px;padding:10px}.workspace{margin-left:180px}.context-panel{width:190px}.phone-stage{gap:20px}.device{width:330px;height:670px}.context-panel h2{font-size:29px}main{padding:25px 20px}.toolbar{padding:0 20px}.breadcrumb{display:none}.toolbar{justify-content:flex-end}.page-heading h1{font-size:26px}footer{padding:18px 20px}footer span{display:none}}@media(max-width:760px){.sidebar{position:static;width:100%;height:auto;padding:18px 18px 0;border-right:0;border-bottom:1px solid #e1e7db}.brand{padding:0}.sidebar-section{margin-top:22px;overflow:visible}.sidebar-section>.eyebrow,.sidebar-footer{display:none}nav{flex-direction:row;overflow:auto;padding:0 0 12px;gap:5px}nav button{width:auto;white-space:nowrap;padding:9px 11px;font-size:11px}nav button i{font-size:16px}nav button[aria-current=page]:after{display:none}.workspace{margin:0}.toolbar{height:58px;justify-content:center;background:transparent}.page-heading h1{font-size:27px}.page-heading{margin-bottom:15px}main{padding:23px 16px}.phone-stage{display:flex;flex-direction:column-reverse;min-height:0;gap:20px}.device{width:min(376px,calc(100vw - 36px));height:710px}.device-area{max-width:100%}.context-panel{width:100%;max-width:376px}.context-panel h2{font-size:27px;margin:12px 0}.context-panel>p{margin-bottom:20px}.try-block ul{margin-bottom:10px}.profile-note{margin-top:5px}.scenario-label{margin-top:16px}.phone-stage:has(.wide){gap:20px;align-items:center}.phone-stage:has(.wide) .context-panel{width:100%}.device-area.wide{width:100%}.overview-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px}.mini-device{height:610px}footer{font-size:9px;justify-content:center}.status{margin-bottom:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}

.mini-device iframe{width:390px;height:calc(100% / var(--preview-scale,1));transform:scale(var(--preview-scale,1));transform-origin:top left}@media(max-width:760px){.sidebar-footer{display:block;padding:2px 0 14px;margin:0}.sidebar-footer p{display:none}.sidebar-footer .reset-button{float:right}}

.workspace .toolbar{justify-content:center}.phone-stage{min-height:calc(100dvh - 135px)}.screen-card>.step-number{display:block;margin-bottom:10px}.screen-card>p{min-height:40px;margin:0 0 14px}.screen-card-heading{min-height:42px}@media(max-width:760px){.phone-stage{min-height:0}.step-number{display:block}.sidebar-footer .reset-button{float:none}}