:host{--buncss-light:initial;--buncss-dark: ;color-scheme:light;--ink:#17233f;--muted:#70809b;--line:#dbe2ee;--panel:#fff;--canvas:#edf1f7;--navy:#1c2d4f;--blue:#3867e8;--mint:#58b6a8;--yellow:#f6d36c;--coral:#f18f81;--purple:#8166e9;--shadow:0 24px 70px #1522432e;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}:host{color:var(--ink);margin:0}.presentation{min-height:inherit}:host([review]) .presentation,.end-card{background:radial-gradient(circle at 14% 0%,#59b6a833,#0000 34rem),radial-gradient(circle at 100% 80%,#8166e929,#0000 38rem),#101a32}button,input,select,textarea{font:inherit}button{cursor:pointer}.lab{width:min(1440px,100% - 48px);min-height:100vh;margin:0 auto;padding:18px 0 36px}.lab-header{display:flex;color:#fff;flex-wrap:wrap;justify-content:space-between;align-items: flex-end;gap:14px 20px;margin-bottom:14px}:host(:not([review])) .lab-header{color:var(--ink)}:host(:not([review])) .lab-header .eyebrow{color:#52627d}.eyebrow{color:#95a9d0;letter-spacing:.18em;text-transform:uppercase;margin:0 0 9px;font-size:11px;font-weight:800}h1,h2,p{margin:0}h1{letter-spacing:-.045em;max-width:720px;font-size:clamp(24px,2.6vw,36px);line-height:1.1}.layout{display:grid;grid-template-columns:minmax(0,1fr);align-items: start;gap:10px}.browser{pointer-events:none;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);transform-origin:top left;border:1px solid #ffffff24;border-radius:20px;min-width:0}.browser-stage{position:relative;isolation:isolate}.browser-stage>.browser{position:relative;z-index:2}.browser-stage>.peer-browser{position:absolute;z-index:1;visibility:hidden;opacity:0;inset:0 0 auto}:host([playing]) .browser{will-change:transform,opacity}.story-guide{position:absolute;z-index:40;color:#634d22;pointer-events:none;background:#fff5cc;border-left:4px solid #d5aa45;border-radius:2px 2px 9px;width:max-content;max-width:min(330px,100% - 32px);padding:14px 18px;font-family:Georgia,serif;transform:rotate(-1deg);box-shadow:3px 8px 20px #1522433d}.story-guide[data-step="1"]{visibility:hidden}.story-guide strong{display:block;letter-spacing:-.025em;font-size:23px;font-style:italic;line-height:1.15}.story-guide p{margin-top:8px;font-size:16px;line-height:1.35}.story-guide p:empty{display:none}.story-guide:after{content:"";position:absolute;top:100%;left:var(--pointer-x);border:8px solid #0000;border-top-color:#fff5cc;translate:-50%}.story-guide.is-below:after{border-top-color:#0000;border-bottom-color:#fff5cc;top:auto;bottom:100%}.browser-stage.is-shared .story-guide{max-width:min(420px,100% - 32px);padding:18px 22px}.browser-stage.is-shared .story-guide strong{font-size:clamp(23px,2.6vw,32px)}.computer-label{position:absolute;z-index:3;color:#c9d7ee;opacity:0;font-size:11px;font-weight:650;line-height:1.4}:host(:not([review])) .computer-label{color:var(--ink);background:#f7f9fc;border-radius:4px;padding:2px 6px}.computer-label:before{content:"";display:inline-block;background:#79cdb8;border-radius:50%;width:6px;height:6px;margin-right:7px}.browser-stage.is-shared>.browser{border-color:#9bdfd066}.browser-stage.is-shared .focus-ring{border:3px solid #9bdfd0;box-shadow:0 0 18px 5px #9bdfd03d,0 0 0 2000px #101a327a}.end-card{position:absolute;z-index:5;display:grid;visibility:hidden;opacity:0;text-align:center;border-radius:20px;place-content: center;justify-items:center;gap:36px;inset:0}.end-brand{color:#fff;letter-spacing:-.055em;font-size:clamp(42px,7vw,80px);font-weight:750;line-height:1}.end-card button{color:var(--ink);background:#fff;border:1px solid #dce5f3;border-radius:999px;padding:12px 26px;font-size:14px;font-weight:700}.end-card button:hover{background:#eaf0fc}.chrome{display:flex;border-bottom:1px solid var(--line);background:#f7f9fc;align-items: center;height:26px;padding:0 14px}.traffic-lights{display:flex;gap:6px}.traffic-lights i{display:block;border-radius:50%;width:9px;height:9px}.traffic-lights i:first-child{background:#f08d85}.traffic-lights i:nth-child(2){background:#e9c767}.traffic-lights i:nth-child(3){background:#70bf86}.app{position:relative;isolation:isolate;overflow:hidden;background:var(--canvas);height:480px}.camera{position:relative;background:var(--canvas);transform-origin:top left;height:480px}.content{background:#f5f7fb;min-width:0;padding:0 18px 18px}.content-head{display:flex;background:#f5f7fb;justify-content:space-between;align-items: start;gap:16px;padding:18px 18px 14px}.content-head h2{letter-spacing:-.035em;font-size:23px}.content-head p{color:var(--muted);margin-top:5px;font-size:11px}.head-actions{display:flex;gap:8px}.head-actions button{border:1px solid var(--line);color:#667591;background:#fff;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:700}.head-actions button.primary{color:var(--blue);background:#eff3ff;border-color:#bfcdf6}.annotation{position:absolute;z-index:13;display:flex;color:#634d22;opacity:0;pointer-events:none;background:#fff5cc;border-left:3px solid #d5aa45;border-radius:1px 1px 6px;align-items: center;gap:7px;padding:7px 12px;font:italic 600 14px Georgia,serif;box-shadow:2px 4px 8px #57431629}.popup{position:absolute;z-index:20;overflow:hidden;transform-origin:top left;opacity:0;visibility:hidden;pointer-events:none;background:#fff;border:1px solid #d6deeb;border-radius:12px;width:min(480px,100% - 48px);top:12px;right:8px;box-shadow:0 8px 24px #1828493d,0 24px 64px #18284952}.popup.is-visible{visibility:visible}.popup-head{display:flex;border-bottom:1px solid #edf0f5;justify-content:space-between;align-items: center;gap:12px;padding:16px}.popup-head h3{letter-spacing:-.025em;margin:0;font-size:14px}.popup-head p{color:#8c9bb2;margin-top:4px;font-size:10px}.popup-close{color:#9ba8b9;background:0 0;border:0;font-size:17px;line-height:1}.popup-body{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:16px}.field{grid-column:span 2;display:grid;background:#f0f2f5;border:1px solid #d7dfeb;border-radius:8px;gap:3px;min-width:0;padding:6px 9px}.field-wide{grid-column:span 4}.field-half{grid-column:span 3}.field-full{grid-column:1/-1}.field label{color:#768296;font-size:10px;line-height:1.2}.field input,.field select,.field textarea{color:#263858;background:0 0;border:0;width:100%;min-width:0;padding:0;font-size:12px;line-height:1.4}.field textarea{resize:none;height:30px}.field-route{background:#f0f2f5;border-color:#d7dfeb}.field:focus-within{outline:2px solid #6e8eea;outline-offset:1px}.field select:focus{outline:none}.field select:disabled{opacity:1;cursor:default}.popup-save{color:#fff;background:var(--blue);border:0;border-radius:8px;flex:none;min-width:104px;margin-left:auto;padding:9px 12px;font-size:11px;font-weight:800}.popup-save.is-saved{background:#3b9c8c}.focus-ring{position:absolute;z-index:12;opacity:0;pointer-events:none;border:1px solid #8166e966;border-radius:10px;box-shadow:0 0 24px 8px #8166e91a,0 0 0 2000px #1b2a462e}.cursor{position:absolute;z-index:30;opacity:0;pointer-events:none;background:#1c2d4f;border:2px solid #fff;border-radius:50%;width:17px;height:17px;top:0;left:0;box-shadow:0 2px 6px #15213e59}.click-ripple{position:absolute;opacity:0;pointer-events:none;background:#3867e838;border:3px solid #3867e8;border-radius:50%;inset:-8px;box-shadow:0 0 0 2px #fff}.origin-link{position:absolute;z-index:14;overflow:visible;opacity:0;pointer-events:none;width:100%;height:100%;inset:0}.origin-link path{fill:none;stroke:#9a87dc;stroke-width:1.5;stroke-dasharray:5 5}.origin-link circle{fill:#8166e9}.inspector{overflow:hidden;color:#dce5f7;background:#182646db;border:1px solid #ffffff29;border-radius:12px}.inspector-section{padding:10px 14px}.inspector-controls{display:flex;flex-wrap:wrap;align-items: center;gap:8px}.inspector-controls button,.inspector-controls select{color:#eaf0fc;background:#5570b12e;border:1px solid #90a9e359;border-radius:7px;padding:8px 10px;font-size:10px;font-weight:800}.inspector-controls select{--buncss-light:initial;--buncss-dark: ;color-scheme:light}.inspector-controls select option{color:var(--ink);background:#fff}.inspector-controls button:hover{background:#6483cd52}.inspector-controls button:disabled{opacity:.4;cursor:default}.toggle{display:inline-flex;color:#aebdda;align-items: center;gap:6px;font-size:10px}.toggle input{accent-color:#79d0bd}button:focus-visible{outline:2px solid #9bdfd0;outline-offset:4px}a:focus-visible{outline:2px solid #9bdfd0;outline-offset:4px}.frame-navigation{display:flex;color:#c4d3ef;flex-wrap:wrap;align-items: center;gap:10px;margin-bottom:10px;font-size:12px}.frame-navigation strong{color:#edf4ff;margin-right:auto;font-weight:650}.frame-navigation a{color:#a6ddcf;text-underline-offset:3px}.contact-sheet{margin-top:16px;scroll-margin-top:20px}.contact-sheet>.eyebrow{margin-bottom:18px}.frame-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-color:#607594 #192740;gap:14px;padding:4px 4px 14px}.story-frame{position:relative;overflow:hidden;scroll-snap-align:start;background:#192740;border:1px solid #344462;border-radius:12px;flex:0 0 min(240px,82%);min-width:0}.story-frame:hover,.story-frame:focus-within{border-color:#a0b8e2}.story-frame.is-current{border-color:#9bdfd0;box-shadow:0 0 0 2px #9bdfd02e}.snapshot{position:relative;aspect-ratio:5/3;overflow:hidden;pointer-events:none;background:#edf1f7}.snapshot iframe{position:absolute;transform-origin:top left;pointer-events:none;border:0;width:1000px;height:600px;top:0;left:0}.frame-select{display:block;color:#f0f5ff;text-align:left;background:0 0;border:0;width:100%;padding:14px}.frame-select:after{position:absolute;content:"";inset:0}.frame-label{display:flex;align-items: center;gap:9px;margin-bottom:8px;font-size:13px}.frame-number{color:#9bdfd0;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.frame-description{display:block;color:#aabbd6;font-size:11px;line-height:1.5}@media (max-width:800px){.lab{width:calc(100% - 24px);padding-top:18px}.lab-header{align-items: start;gap:12px}.content{padding:0 12px 16px}.content-head{flex-wrap:wrap;padding-inline-start:12px;padding-inline-end:12px}.story-guide{padding:10px 14px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}:host([snapshot]) .lab{width:100%;min-height:0;padding:0}:host([snapshot]) .lab-header,:host([snapshot]) .frame-navigation,:host([snapshot]) .inspector,:host([snapshot]) .contact-sheet{display:none}:host([snapshot]) .layout{display:block}:host([snapshot]) .app,:host([snapshot]) .camera{height:408px}:host([snapshot]) .browser-stage:not(.is-shared) .browser{box-shadow:none;border:0;border-radius:0}:host([snapshot]) *,:host([seeking]) *{transition:none!important}:host{display:block;contain:style;container-type:inline-size;min-width:0}[hidden]{display:none!important}.snapshot product-flow{display:block;position:absolute;transform-origin:top left;width:1000px;height:600px}:host([snapshot]){min-height:600px}:host([snapshot]) .flow-switch{display:none}.flow-switch{display:flex;gap:8px;padding:18px 24px 0}.flow-switch a{color:#bed0ef;text-decoration:none;border:1px solid #344462;border-radius:20px;padding:8px 12px;font:600 12px system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue}.flow-switch a[aria-current]{color:#142442;background:#9bdfd0}@container (width<=800px){.lab{width:calc(100% - 24px)}.content{padding:0 12px 16px}.content-head{flex-wrap:wrap;padding-inline-start:12px;padding-inline-end:12px}}:host(:not([review])) .lab{min-height:0}