@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#28372f;background:#f7f7ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1180px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:32px 28px}.brand{font-size:25px;font-weight:700;color:inherit;text-decoration:none}.brand span{font-size:10px;letter-spacing:2px;margin-left:20px;color:#758276}.badge{font-size:12px;border:1px solid #d8dfd2;border-radius:30px;padding:10px 16px}.intro{text-align:center;padding:45px 20px 32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#6e7d61}h1,h2{font-family:Manrope,sans-serif;letter-spacing:-2px}h1{font-size:clamp(40px,6vw,68px);line-height:1.12;margin:20px 0}h2{font-size:30px;line-height:1.2;margin:16px 0}p{line-height:1.7}.intro>p:not(.eyebrow){max-width:510px;margin:16px auto;color:#6a766d}.lab{margin:0 28px;background:white;border:1px solid #e1e6dc;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr}.toolbar{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid #edf0e8;font-size:12px}select,input,textarea,button{font:inherit}select,input,textarea{border:1px solid #dce2d7;background:#fbfcf8;border-radius:10px;padding:12px;color:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:12px 18px;background:#314b38;color:white}button:hover{filter:brightness(1.12)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #818cf8;outline-offset:3px}.quiet{margin-left:auto;background:transparent;color:#667461;padding:8px}.stage{background:radial-gradient(ellipse at center,#e1e8d7,#f0f3e9 70%);min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:20px}.annotation{font-size:12px;color:#7a876f}.device{width:240px;height:342px;border-radius:58px;background:linear-gradient(120deg,#e5ebc9,#cbd5ab);box-shadow:inset 3px 4px 5px #f6f9e3,inset -4px -5px 8px #b5c28e,16px 28px 35px #66774d35;position:relative;display:flex;align-items:center;flex-direction:column;padding-top:23px;transform:rotate(-5deg)}.speaker{width:62px;height:13px;background:radial-gradient(circle,#78845e 1.2px,transparent 1.7px) 0 0/7px 6px}.screen{width:120px;height:120px;background:#000;border-radius:18px;overflow:hidden;margin-top:15px;border:4px solid #b4bf94;box-shadow:0 2px 2px #ffffff80}canvas{width:100%;height:100%}.led{display:none;width:8px;height:8px;background:#818cf8;border-radius:50%;margin-top:50px;box-shadow:0 0 12px currentColor}.device.v1 .screen{display:none}.device.v1 .led{display:block}.device.v1 .controls{margin-top:40px}.controls{width:142px;height:126px;position:relative;margin-top:15px}.controls button{position:absolute;border-radius:50%;display:grid;place-items:center;padding:0;box-shadow:0 3px 4px #7b896f55,inset 0 2px 3px #fff7;color:#4e6347;background:#edf1dd}.small{width:30px;height:30px;font-size:14px}.north{top:0;left:56px}.south{bottom:0;left:56px}.west{left:0;top:48px}.east{right:0;top:48px}.controls .talk{width:60px;height:60px;left:41px;top:33px;background:#657950;color:#f6f8eb;font-size:30px}.talk:active{transform:translateY(3px)}.device-brand{font-size:10px;letter-spacing:2px;color:#7c8965;margin-top:10px}.status{font-size:12px;color:#546648}.interaction{padding:45px 32px;align-self:center}.interaction>p{font-size:14px;color:#72806f}form{display:flex;flex-direction:column;gap:12px}#question-form{flex-direction:row}#question{width:100%;min-width:0}.suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.suggestions button{background:#f0f3e9;color:#61704f;font-size:11px;padding:8px 10px}.reply{min-height:85px;border-left:2px solid #ccd7b3;padding-left:16px;margin:30px 0}.audio{display:flex!important;align-items:center;gap:10px;font-size:12px;line-height:1.5}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:65px 60px}.bottom p{color:#75806f;font-size:14px}label{display:flex;flex-direction:column;gap:8px;font-size:12px;margin-bottom:14px}textarea{resize:vertical}.fine{font-size:11px!important}footer{border-top:1px solid #dfe4d6;padding:24px 28px;font-size:12px;color:#7b8873;display:flex;justify-content:space-between}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:720px){.badge{display:none}.lab{grid-template-columns:1fr;margin:0 16px}.toolbar{padding:16px;flex-wrap:wrap;gap:8px}.stage{min-height:450px}.interaction{padding:24px}.bottom{grid-template-columns:1fr;padding:40px 28px;gap:30px}footer{gap:15px;flex-direction:column}.brand span{margin-left:12px}}@media(prefers-reduced-motion:reduce){.device{transform:none}}


/* Original HTML/CSS device designs from the supplied export. */
.device.concept{width:200px;height:330px;background:none;border-radius:0;box-shadow:none;transform:none;padding:0;display:block;position:relative}
.concept .speaker,.concept .device-brand,.concept .led,.concept>.screen{display:none!important}
.device-art{width:200px;height:330px}
.device-art button{padding:0;cursor:pointer}
.device-art button:active{transform:translateY(2px)}
.device-art canvas{width:100%;height:100%;border-radius:inherit;display:block}
.concept .controls{position:absolute;top:350px;left:0;width:200px;height:40px;margin:0;display:flex;justify-content:center;gap:12px}
.concept .controls .talk{display:none}
.concept .controls .small{position:static;background:#e8eddf;color:#506345;box-shadow:none;width:32px;height:32px}
.stage{min-height:530px;gap:25px}.stage .status{margin-top:45px}