@font-face{font-family:Open Sans;src:url('../../assets/fonts/OpenSans-Regular.ttf');font-weight:400}@font-face{font-family:Open Sans;src:url('../../assets/fonts/OpenSans-Bold.ttf');font-weight:700}@font-face{font-family:Liberation Mono;src:url('../../assets/fonts/LiberationMono-Bold.ttf');font-weight:700}
:root{--lime:#b3ec61;--bg:#191b19;--muted:#b8bcb3;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:#fafaf7;font-family:Open Sans,system-ui,sans-serif}body{overflow:hidden}[hidden]{display:none!important}button,a,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{cursor:default;opacity:.35}h1,h2,p{margin:0}em{font-style:normal;color:var(--lime)}.demo-app{height:100%;padding:3.1vh 4.8vw 8.5vh;container-type:inline-size;display:flex;flex-direction:column}.demo-header{display:flex;align-items:center;border-bottom:1px solid #ffffff24;min-height:5.1vh;padding-bottom:1.5vh;gap:2vw}.project-name{font-weight:700;font-size:1.55cqw;color:#fafaf7;text-decoration:none;letter-spacing:-.04em}.project-name b{color:var(--lime)}.demo-header>img{width:9cqw;margin-left:auto}.demo-grid{display:grid;grid-template-columns:30% 34% 28%;gap:4%;flex:1;align-items:center;min-height:0}.scenario-panel h1{font-size:3.5vw;line-height:1.1;letter-spacing:-.055em;font-weight:700;margin-bottom:2vh}.intro{font-size:1.2vw;line-height:1.5;color:var(--muted);margin-bottom:2.5vh}.result-options{display:flex;flex-direction:column;gap:1vh}.result-options button{position:relative;display:flex;flex-direction:column;gap:.45vh;background:#ffffff03;color:#f0f2e8;border:1px solid #ffffff21;border-radius:.65vw;text-align:left;padding:1.25vh 1.1vw;min-height:7vh}.result-options button>span{font-size:1.17vw;font-weight:700;letter-spacing:-.02em}.result-options button>small{color:var(--muted);font-size:.83vw}.result-options button>b{position:absolute;right:1vw;top:1.5vh;font-size:1.25vw;font-weight:400;color:#b3ec61}.result-options button.selected{border-color:#b3ec6170;background:#b3ec610b}.result-options button:hover{background:#b3ec6113;border-color:var(--lime)}.demo-actions{display:flex;gap:1vw;margin-top:2vh}.demo-actions button{background:transparent;border:1px solid #ffffff35;border-radius:.6vw;padding:1vh 1.3vw;color:#cbd1c2;font-size:1vw}.demo-actions button:hover{color:var(--lime)}
.phone-stage{height:100%;position:relative;display:flex;align-items:center;justify-content:center;padding:3vh 0 1vh;min-height:0;perspective:1200px}.phone-float{height:min(76vh,50vw);aspect-ratio:0.505;position:relative;z-index:1;animation:float 9s ease-in-out infinite}.phone{position:relative;width:100%;height:100%;border-radius:3.2vw;background:linear-gradient(130deg,#a5a89e,#53594d 20%,#232720 65%,#8b9183);padding:.55vw;box-shadow:0 24px 45px #0007,inset 1px 1px 3px #e8edd2,inset -2px -2px 2px #11170e;container-type:inline-size}.phone::before{content:'';position:absolute;inset:2px;border:1px solid #ffffff25;border-radius:inherit;pointer-events:none}.side-key{position:absolute;right:-.15vw;top:22%;width:.2vw;height:8%;background:#6b7361;border-radius:3px}.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2.7vw;border:5px solid #0b100a;background:#10170f}.status-bar{height:7%;display:flex;align-items:center;justify-content:space-between;padding:0 6%;font-size:3.4cqw;position:absolute;top:0;left:0;right:0;z-index:4;color:#eff5e6;pointer-events:none}.island{background:#060906;position:absolute;width:27%;height:47%;border-radius:30px;left:36.5%;top:22%}.status-bar>span:last-child{font-size:3cqw;letter-spacing:-.07em}.lock-screen{height:100%;padding:18% 5% 12%;background:radial-gradient(ellipse at 60% 80%,#617548 0,transparent 55%),linear-gradient(150deg,#334d30,#18251b 62%,#354c2b);display:flex;flex-direction:column;align-items:center}.lock-screen::before{content:'';position:absolute;left:-25%;width:150%;height:50%;border-radius:50%;bottom:-4%;border:1px solid #d6e6bd28;box-shadow:0 -2px 35px #b3ec6112,inset 0 2px 15px #c6dda311;transform:rotate(-25deg)}.lock-date{font-size:4.4cqw;color:#d8e2ce}.lock-time{font-size:24cqw;line-height:1.2;letter-spacing:-.07em;font-weight:400;margin-bottom:12%}.notification-list{width:100%;position:relative;overflow:auto;scrollbar-width:none;max-height:55%;z-index:1}.notification{width:100%;background:#e3e8dbed;border:1px solid #ffffff60;border-radius:4cqw;padding:5cqw;color:#20251b;box-shadow:0 4px 12px #0003;text-align:left;margin-bottom:3cqw;animation:arrive .45s ease-out}.notification-app{display:flex;gap:2cqw;align-items:center;font-size:3cqw;color:#4c5641;margin-bottom:2cqw}.notification-app>span:first-child{background:#507a30;border-radius:1cqw;color:white;font-size:4cqw;padding:0 1cqw}.notification-app>span:last-child{margin-left:auto}.notification strong{display:block;font-size:4.1cqw;margin-bottom:1.5cqw}.notification p{font-size:4cqw;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.empty-phone{font-size:4cqw;text-align:center;color:#d3dfc9;margin-top:8%}.open-messages{margin-top:auto;z-index:1;border:0;background:transparent;color:#dbe6cf;font-size:3.8cqw;padding-top:4%}.home-indicator{position:absolute;z-index:5;bottom:1.8%;left:35%;width:30%;height:.6%;padding:0;border:0;border-radius:20px;background:#ebefdf}.phone-shadow{position:absolute;bottom:0;width:85%;height:7%;background:#0006;border-radius:50%;filter:blur(15px)}.thread{height:100%;background:#f7f8f4;color:#252a20;display:flex;flex-direction:column;padding-top:14%;position:relative}.phone:has(.thread:not([hidden])) .status-bar{color:#252a20}.phone:has(.thread:not([hidden])) .home-indicator{background:#262b23}.thread-header{position:relative;display:flex;align-items:center;justify-content:center;gap:2cqw;height:10%;flex-shrink:0;border-bottom:1px solid #daddd4;background:#f7f8f4;padding:0 5% 3%}.thread-header button{position:absolute;left:3%;border:0;background:none;color:#526844;font-size:9cqw;line-height:1;padding:0 2% 2%}.avatar{width:8cqw;height:8cqw;display:flex;align-items:center;justify-content:center;background:#56694c;color:white;border-radius:50%;font-size:3.5cqw;margin-left:4%}.thread-header strong{font-size:4.6cqw}.thread-body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bfc6b6 transparent;padding:5% 4%;flex:1;min-height:0}.bubble{background:#e4e7de;color:#242a20;border-radius:4cqw 4cqw 4cqw 1cqw;padding:4.3cqw 4cqw;margin-bottom:2cqw;white-space:pre-wrap;overflow-wrap:anywhere;font-size:4.65cqw;line-height:1.43;animation:arrive .3s ease-out}.bubble a{color:#31551f;text-decoration-thickness:1px;text-underline-offset:2px}.bubble-time{display:block;font-size:2.8cqw;color:#6f7865;margin:1cqw 0 5cqw 2cqw}.thread-composer{border:1px solid #d9dfcf;border-radius:12cqw;flex-shrink:0;padding:2.3cqw 4cqw;font-size:3.7cqw;color:#8a9280;margin:2cqw 5cqw 9cqw}.phone.buzz{animation:buzz .4s ease-out}
@keyframes float{50%{transform:translateY(-.8vh) rotate(.6deg)}}@keyframes arrive{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes buzz{20%,60%{transform:rotate(-1deg)}40%,80%{transform:rotate(1deg)}}
body[data-motion=paused] .phone-float{animation-play-state:paused}body[data-motion=paused] .notification,body[data-motion=paused] .bubble{animation:none}
.context-panel{padding-left:.3vw;align-self:center}.stage-label{display:block;font:700 .77vw/1.5 Liberation Mono,monospace;color:var(--lime);letter-spacing:.055em;margin-bottom:2.1vh}.context-panel h2{font-size:2.3vw;line-height:1.2;letter-spacing:-.045em;font-weight:700}.context-panel p{font-size:1.14vw;line-height:1.6;color:var(--muted);margin-top:2.3vh}.sample-card{margin-top:3vh;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;padding:2vh 0}.sample-card small{display:block;font:700 .68vw Liberation Mono,monospace;color:#a5b296;margin-bottom:1vh}.sample-card strong{display:block;font-size:1vw;line-height:1.5;font-weight:400}.sample-card>span{display:block;font-size:.83vw;margin-top:.8vh;color:var(--muted)}.feedback-trigger{margin-top:3vh;background:#ffffff04;border:1px solid #ffffff35;border-radius:.5vw;color:#f0f4e9;padding:1.5vh .8vw;font-size:.88vw;width:100%;text-align:left}.feedback-trigger span{float:right;color:var(--lime);font-size:.8vw}.context-panel .timing-note{font-size:.82vw;line-height:1.6;margin-top:1.5vh;color:#929b87}.guidance-card{border-left:2px solid var(--lime);padding-left:1.5vw}.guidance-content h3{font-size:1.25vw;font-weight:700;line-height:1.35;color:var(--lime);margin:2vh 0 1.4vh}.guidance-content p{font-size:1.1vw;line-height:1.6;color:var(--muted);margin-top:1.2vh}.guidance-content a{color:var(--lime)}.guidance-content .guidance-link{display:inline-block;margin:2vh 0 0;font-size:.9vw;line-height:1.4}.text-button{border:0;background:none;color:#c8d1bd;padding:2vh 0 0;font-size:.85vw}
dialog{width:min(800px,78vw);max-height:83vh;padding:35px 42px;background:#252b21;color:#f2f5eb;border:1px solid #b3ec6160;border-radius:16px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#080c08c9}dialog h2{font-size:26px;line-height:1.25;letter-spacing:-.04em;margin:12px 0 24px}dialog p{font-size:15px;line-height:1.6;color:#c1cbb7}dialog .stage-label{font-size:11px}dialog .guidance-content h3{font-size:19px}dialog .guidance-content p,dialog .guidance-content .guidance-link{font-size:16px}.dialog-close{float:right;width:36px;height:36px;border:1px solid #ffffff40;border-radius:50%;background:none;color:white;font-size:22px}.demo-note{color:var(--lime)!important;font-size:13px!important;margin-bottom:18px}fieldset{border:0;border-bottom:1px solid #ffffff20;margin:0 0 24px;padding:0 0 24px}legend,.open-label{font-size:16px;font-weight:700;line-height:1.5;margin-bottom:12px}.survey-option{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:15px;color:#d5ddcb}.survey-option input{accent-color:#b3ec61;width:18px;height:18px;margin:0}.open-label{display:block}.open-label textarea{display:block;width:100%;height:90px;margin-top:12px;background:#ffffff09;border:1px solid #ffffff40;border-radius:6px;padding:12px;color:white}.primary-button{background:var(--lime);border:0;border-radius:7px;padding:12px 20px;font-weight:700;color:#203013;margin-top:16px}.survey-done{text-align:center;padding:30px 0}.survey-done>span{color:var(--lime);font-size:40px}

/* SMS and dashboard share the same physical phone and fit inside its screen. */
.phone-stage{padding-top:7vh}.phone-float{height:min(71vh,47vw)}.device-switch{position:absolute;z-index:2;top:1.5vh;left:50%;transform:translateX(-50%);display:flex;padding:.25vw;border:1px solid #ffffff35;background:#20231e;border-radius:2vw;gap:.2vw}.device-switch button{border:0;background:transparent;color:#b8bcb3;border-radius:2vw;padding:.65vh 1.2vw;font-size:.95vw;white-space:nowrap}.device-switch button[aria-pressed=true]{background:var(--lime);color:#223017;font-weight:700}.dashboard-view{position:absolute;inset:0;background:#fff;color:#252a20;display:flex;flex-direction:column;padding-top:14%}.dashboard-view .thread-header{height:8%;background:#f7f8f4}.dashboard-view .thread-header strong{font-size:4.2cqw}.dashboard-fit{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;background:#fff;overflow:hidden}.dashboard-fit img{display:block;width:100%;height:100%;object-fit:contain}.live-dashboard-link{display:block;padding:2.5cqw 0 8cqw;text-align:center;color:#335c21;background:#edf2e5;font-size:3.3cqw}.phone:has(.dashboard-view:not([hidden])) .status-bar{color:#252a20}.phone:has(.dashboard-view:not([hidden])) .home-indicator{background:#262b23}.dashboard-context .dashboard-live{display:inline-block;font-size:1vw;color:var(--lime);margin:2.5vh 0}.dashboard-context .dashboard-qr{display:block;width:9vw;border-radius:.5vw;padding:.45vw;background:white}.dashboard-context .dashboard-qr img{display:block;width:100%}

.phone[data-view=dashboard] .lock-screen,.phone[data-view=dashboard] .thread{visibility:hidden}.context-panel[data-view=dashboard] #context-default,.context-panel[data-view=dashboard] #guidance-card{display:none}