:root{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;color:#282b2f;background:#f3f4f3;font-synthesis:none;--muted:#626970;--line:#d9dddf}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,a,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;color:inherit;background:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #567c99;outline-offset:5px}button:disabled{cursor:default;opacity:.38}h1,h2,h3,p{margin:0}button,summary{touch-action:manipulation}.site-head{height:108px;max-width:1440px;margin:auto;padding:0 64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand img{width:30px;filter:brightness(.35)}.brand b{font-size:28px;letter-spacing:-1.3px;font-weight:850}.brand span{margin-left:15px;padding-left:24px;border-left:1px solid #c7cbce;font-size:14px;color:var(--muted)}nav{display:flex;gap:32px;font-size:14px}nav a:hover{color:#54718a}main{max-width:1440px;margin:auto}.experience{padding:54px 64px 66px;display:grid;grid-template-columns:minmax(310px,.83fr) minmax(470px,1.17fr);gap:66px;align-items:start}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:600;line-height:1.6;color:#6b757e}.eyebrow span{margin-left:22px;color:#8e969b}h1{font-size:clamp(30px,3vw,43px);line-height:1.12;letter-spacing:-1.7px;font-weight:500;margin:22px 0 18px}.intro{font-size:16px;line-height:1.7;max-width:360px;color:var(--muted)}.chapters{list-style:none;display:flex;padding:0;gap:7px;margin:32px 0}.chapters li{flex:1}.chapters button{width:100%;height:35px;border-top:2px solid #d8dcdf;padding:12px 0 0;font-size:12px;color:#879097;text-align:left}.chapters button[aria-current=step]{border-color:#282b2f;color:#282b2f}.chapters button.visited{border-color:#889aa7}.instruction{min-height:213px}.step-count{font-size:12px;letter-spacing:2px;color:#6d7781}.instruction h2{font-size:25px;letter-spacing:-.75px;font-weight:500;margin:14px 0 12px}.instruction p{font-size:16px;line-height:1.65;color:var(--muted);max-width:390px}.instruction .try{color:#334b60;font-size:14px;margin-top:18px}.lesson-nav{display:flex;align-items:center;justify-content:space-between;margin-top:25px}.dark-button{padding:14px 22px;background:#25292e;color:white;border-radius:28px;display:inline-flex;align-items:center;justify-content:center;gap:28px;font-size:14px;min-height:46px}.dark-button:hover{background:#43515d}.text-button{font-size:14px;padding:12px 0}.demo-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.demo-toolbar>span{font-size:11px;letter-spacing:1.55px;color:#737e87}.theme-picker{background:#e5e8e9;border-radius:30px;padding:3px;display:flex}.theme-picker button{padding:7px 13px;font-size:12px;border-radius:20px}.theme-picker [aria-pressed=true]{background:white;box-shadow:0 1px 3px #0001}.desktop{position:relative;min-height:587px;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 15% 65%,#b4c6c8 0,transparent 63%),radial-gradient(ellipse at 85% 35%,#d4d4db 0,transparent 63%),linear-gradient(150deg,#ced4d9,#94a6b4);isolation:isolate}.menu-bar{display:flex;align-items:center;gap:18px;padding:12px 20px;font-size:11px;background:#ffffff15;color:#394952}.menu-bar time{margin-left:auto}.app-position{position:relative;padding:36px 29px 58px;min-height:490px}.app{--ink:#292d32;--sub:#58636d;color:var(--ink);position:relative;width:100%;max-width:465px;margin:0 auto;padding:25px 26px 15px;min-height:237px;border-radius:45px;isolation:isolate;transition:min-height .35s ease}.material{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 76% 32%,#f8fafada,transparent 82%),radial-gradient(ellipse at 20% 86%,#edf6f3cf,transparent 76%),#e2e8ed85;box-shadow:inset 0 1px 1px #ffffffe0,0 18px 50px #52697720;backdrop-filter:blur(18px);opacity:1;transition:opacity 1.3s cubic-bezier(.35,.18,.65,.9);overflow:hidden}.material:after{content:'';position:absolute;inset:-25%;background:radial-gradient(ellipse at 70% 50%,#ffffff80,transparent 45%),radial-gradient(ellipse at 30% 75%,#bcd4dd65,transparent 60%);filter:blur(22px);animation:current 12s ease-in-out infinite alternate;pointer-events:none}.app-header{display:flex;align-items:flex-start;gap:18px;min-height:91px}.logo-button{padding:0;position:relative;flex:0 0 54px;width:54px;height:57px;filter:drop-shadow(0 1px 1px #6a7d8150);z-index:2}.logo-button img{width:54px;height:49px;object-fit:contain;margin-top:7px}.bead{position:absolute;right:-5px;top:1px;width:7px;height:7px;background:#a8afb6;box-shadow:0 0 0 3px #f7f9fa80;border-radius:50%}.identity{padding-top:1px;min-width:0}.identity strong{display:block;font-size:29px;font-weight:850;letter-spacing:-1px}.identity span{display:block;font-size:14px;color:var(--sub);margin-top:4px}.app-tools{margin-left:auto;display:flex;gap:10px;padding-top:2px}.app-tools button{font-size:20px;min-width:26px;min-height:30px;padding:0}.app-body{font-size:15px}.app-footer{display:flex;gap:8px;border-radius:30px;background:#ffffff24;margin:12px -5px -1px;padding:5px}.app-footer button{background:white;border-radius:28px;flex:1;padding:14px 5px;font-size:14px;font-weight:500;color:#181c20;min-height:47px}.app-footer button.primary{background:#08090a;color:#fff}.history-link{display:flex;gap:11px;align-items:center;padding:9px 0;width:100%;font-size:15px;font-weight:550;text-align:left}.history-link svg{width:20px;height:20px;flex-shrink:0}.history-link span:last-child{font-size:23px;font-weight:300}.app.floating{min-height:90px}.floating .material{opacity:0}.floating .identity,.floating .app-tools,.floating .app-body,.floating .app-footer{visibility:hidden}.desktop-note{position:absolute;bottom:30px;left:0;right:0;text-align:center;font-size:13px;color:#4e6576}.demo-disclaimer{font-size:12px;color:#747d85;line-height:1.6;margin:15px 3px;display:flex;gap:15px}.demo-disclaimer span{font-size:10px;white-space:nowrap;letter-spacing:1px;padding-top:2px}.section{padding:62px 64px;border-top:1px solid var(--line)}.setup{display:grid;grid-template-columns:1fr 1.5fr;gap:80px}.section h2{font-size:36px;line-height:1.15;letter-spacing:-1.2px;font-weight:500;margin-top:17px}.setup-list article{display:flex;gap:23px;padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--line)}.setup-list article:last-child{border:0;margin:0;padding-bottom:0}.setup-list article>span{font-size:12px;color:#7c8790;padding-top:5px}.section h3{font-size:19px;font-weight:550;margin-bottom:10px;letter-spacing:-.3px}.section p{font-size:15px;line-height:1.75;color:var(--muted)}.section p.note{font-size:14px;margin-top:12px;border-left:2px solid #b8c6cd;padding-left:14px}.feedback-head{max-width:610px}.feedback-head p{margin-top:16px}.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin:38px 0}.test-grid article>span{display:block;font-size:11px;letter-spacing:1.2px;color:#7a8690;margin-bottom:17px}.feedback-bottom{border-top:1px solid var(--line);padding-top:30px;display:flex;gap:60px;align-items:center;justify-content:space-between}.feedback-bottom p{max-width:720px}.feedback-bottom a{flex-shrink:0}.site-footer{margin:0 64px;padding:24px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:12px;color:#717b82}.site-footer span:nth-child(2){max-width:290px;line-height:1.6}.desktop.dark{background:radial-gradient(ellipse at 8% 80%,#829d9e,transparent 65%),radial-gradient(ellipse at 87% 23%,#a0a7be,transparent 67%),#8999ad}.dark .app{--ink:#f3f5f6;--sub:#cbd2d8}.dark .material{background:radial-gradient(ellipse at 27% 70%,#b6c3d14d,transparent 70%),radial-gradient(ellipse at 75% 20%,#71788d85,transparent 85%),#242b35d9;box-shadow:inset 0 1px 1px #ffffff20,0 20px 50px #283b4b25}.dark .material:after{opacity:.18}.dark .identity strong{color:#f2f4f4}.recess{border-radius:23px;background:#7a8b9d18;padding:18px;margin:12px 0}.dark .recess{background:#03080f20}.body-title{font-size:22px;font-weight:600;letter-spacing:-.6px;margin:2px 0 18px}.sub{font-size:13px;color:var(--sub);line-height:1.6}.app button:hover{filter:brightness(.92)}.highlight{outline:1px solid #5c758799;outline-offset:5px}.dark .highlight{outline-color:#ddebf9aa}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.full{width:100%;text-align:left}.time{font-size:34px;font-weight:550;letter-spacing:-1.3px;margin:8px 0}.meeting-name{font-weight:550;font-size:18px}.scroll-content{max-height:230px;overflow:auto;padding:6px 2px 15px;mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 13px),transparent)}.app textarea,.app input{border:0;border-radius:18px;background:#7e8d9e18;color:var(--ink);padding:15px;width:100%;font-size:15px;outline-offset:2px}.app textarea{height:130px;resize:vertical;max-height:210px}.app label{font-size:13px;display:block;margin:10px 0}.app input::placeholder,.app textarea::placeholder{color:var(--sub)}.app .secondary-action{font-size:14px;padding:12px 0}.live-question{font-size:26px;line-height:1.25;letter-spacing:-.8px;margin:15px 0 18px;font-weight:550}.record-status{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-top:25px}.recording .bead{background:#fa4a47;box-shadow:0 0 0 3px #fffc}.app-footer button.end{background:#b83030;color:#fff}.transcript-row{margin:15px 0;font-size:14px;line-height:1.6}.transcript-row small{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}.app details{font-size:14px;line-height:1.6}.app summary{cursor:pointer}.app details p{color:var(--sub);margin-top:10px;font-size:13px}.setting{padding:14px 0;border-bottom:1px solid #899aa525}.setting button{background:#fff;border-radius:20px;color:#283747;padding:7px 12px;font-size:12px}.sample-tag{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--sub)}@keyframes current{to{transform:translate(5%,-4%) rotate(9deg)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.material:after{animation:none}.material,.app{transition:none}}@media(min-width:1400px){.experience{padding-top:70px}}@media(max-width:1050px){.site-head{padding:0 32px}.experience{padding:40px 32px;gap:35px;grid-template-columns:minmax(270px,.85fr) minmax(400px,1.15fr)}.section{padding:50px 32px}.site-footer{margin:0 32px}.app-position{padding-left:20px;padding-right:20px}.app{padding-left:22px;padding-right:22px}.app-header{gap:13px}.setup{gap:40px}.instruction{min-height:240px}}@media(max-width:780px){.site-head{height:85px;padding:0 22px}.brand span{margin-left:0;padding-left:12px}.site-head nav{gap:15px;font-size:12px}.experience{display:flex;flex-direction:column;padding:32px 22px;gap:24px}.lesson{width:100%}h1{font-size:34px}.intro{max-width:none}.chapters{margin:22px 0}.instruction{min-height:0}.instruction p{max-width:none}.lesson-nav{margin-top:20px}.demo-column{width:100%}.desktop{min-height:530px}.app-position{padding:30px 18px 58px;min-height:425px}.app{max-width:465px}.setup{grid-template-columns:1fr;gap:35px}.section{padding:38px 22px}.section h2{font-size:30px}.test-grid{grid-template-columns:1fr;gap:25px}.feedback-bottom{align-items:flex-start;gap:25px;flex-direction:column}.site-footer{margin:0 22px;flex-wrap:wrap}.site-footer span:nth-child(2){max-width:none}.demo-toolbar>span{font-size:10px}.demo-disclaimer{display:block}.demo-disclaimer span{margin-right:7px}}@media(max-width:410px){.site-head nav a:first-child{display:none}.app-position{padding-left:10px;padding-right:10px}.app{padding:22px 18px 14px;border-radius:35px}.app-header{gap:10px}.identity strong{font-size:25px}.identity span{font-size:12px}.app-footer button{font-size:12px}.logo-button,.logo-button img{width:46px}.logo-button{flex-basis:46px}.app-tools{gap:5px}.demo-toolbar{gap:5px}}
.meeting-heading{font-size:19px!important;line-height:1.3!important;letter-spacing:-.5px!important;overflow-wrap:anywhere;max-height:50px;overflow:hidden}.avatars{display:flex;gap:8px;align-items:center}.avatars>span:not(.sub){display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e1e9ef;color:#303f4c;font-size:12px;font-weight:600;border:1px solid #fff}.avatars .sub{font-size:11px;flex:1;margin-left:4px}.speech{margin-top:14px;padding:14px 17px}.speech p:last-child{font-size:14px;line-height:1.5;margin-top:7px}.live-scroll{max-height:225px}.live-scroll details{margin-top:20px}.transcript-toggle{display:flex;gap:7px;margin:17px 0 5px}.transcript-toggle button{padding:7px 15px;border-radius:22px;color:var(--sub);font-size:12px;background:#7c8c9a18}.transcript-toggle .chosen{background:white;color:#242a2e}.brief-scroll{max-height:280px}.brief-scroll h4{font-size:14px;margin:20px 0 6px}.brief-scroll p{font-size:14px;line-height:1.65;color:var(--sub)}.tag-button{margin-top:18px;border-radius:20px;padding:6px 12px;background:#8899a527;color:var(--sub);font-size:12px}.history-card .full{display:flex;justify-content:space-between;gap:15px}.history-card{margin-top:22px;min-height:195px}.settings-scroll{max-height:290px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.app .app-body{min-width:0}.app-body p{overflow-wrap:anywhere}.app:has(.live-scroll){padding-bottom:15px}.app:has(.live-scroll) .app-header{min-height:88px}.app:has(.live-scroll) .live-question{font-size:23px}.app:has(.live-scroll) .record-status{margin-top:15px}.desktop:has(.recording){min-height:640px}.desktop:has(.settings-scroll),.desktop:has(.brief-scroll),.desktop:has(#context-input){min-height:630px}.app-header .identity{flex:1}.app-tools{flex-shrink:0}.app:has(#context-input) .app-header{min-height:85px}.app textarea{min-height:85px}.history-card .meeting-name{overflow-wrap:anywhere}.app:has(.brief-scroll) .app-tools button,.app:has(.live-scroll) .app-tools button{font-size:18px}@media(max-width:410px){.live-question{font-size:22px}.desktop:has(.recording){min-height:650px}.demo-toolbar>span{letter-spacing:.8px}.app:has(#context-input) .body-title{font-size:21px}}

/* Native shell geometry: scale the 432-point surface as one unit. */
.desktop,.desktop:has(.recording),.desktop:has(.settings-scroll),.desktop:has(.brief-scroll),.desktop:has(#context-input){min-height:520px}
.app-position{padding:0;min-height:0;height:200px;position:relative}
.app,.app:has(.live-scroll),.app.floating{position:absolute;left:50%;top:32px;margin:0;padding:0;width:432px;max-width:none;height:var(--shell-height);min-height:0;border-radius:44px;transform:translateX(-50%) scale(var(--app-scale,1));transform-origin:top center;display:flex;flex-direction:column;transition:none}
.app .app-header,.app:has(#context-input) .app-header,.app:has(.live-scroll) .app-header{position:relative;padding:29px 28px 0 105px;height:112px;min-height:112px;gap:8px;align-items:flex-start;flex-shrink:0}
.app.meeting-identity .app-header{height:128px;min-height:128px}
.app .logo-button{position:absolute;left:28px;top:29px;width:48px;height:48px;flex:none}
.app .logo-button img{width:48px;height:48px;margin:0}
.app .bead{width:6px;height:6px;right:-5px;top:-1px}
.app .identity{padding:0;flex:1;min-width:0}
.app .identity strong{font-size:29px;line-height:30px;font-weight:850;letter-spacing:-1.2px}
.app .identity .meeting-heading{font-size:16px!important;line-height:24px!important;letter-spacing:-.3px!important}
.app .identity span{font-size:11px;line-height:14px;margin-top:7px}
.app .app-tools{gap:8px;margin-left:0;padding:0;flex-shrink:0;transform:translateY(-5px)}
.app .app-tools button{width:32px;height:40px;min-width:32px;min-height:40px;padding:8px;display:grid;place-items:center}
.app-tools svg{width:16px;height:16px;display:block}
.app-tools [data-action=settings]{color:var(--sub)}
.app .app-body{padding:20px 28px 16px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;font-size:13px;scrollbar-width:thin;mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.app[data-route=mini] .app-body{padding:0 28px 6px;overflow:visible;justify-content:flex-end;mask-image:none}
.app[data-route=home] .app-body{padding-top:20px}
.app[data-route=home] .history-link{margin-top:auto;flex-shrink:0}
.app .history-link{font-size:13px;gap:9px;padding:7px 0;height:32px;font-weight:500}
.app .history-link svg{width:15px;height:15px}
.app .history-link span:last-child{font-size:19px}
.app .app-footer{flex-shrink:0;margin:0 22px 16px;padding:6px;gap:8px;min-height:56px;height:56px;border-radius:28px}
.app .app-footer button{font-size:12px;line-height:16px;padding:0 5px;height:44px;min-height:44px;border-radius:22px}
.app .body-title{font-size:22px;font-weight:500;line-height:27px;letter-spacing:-.6px;margin:0 0 16px}
.app .sub{font-size:11px;line-height:1.6}
.app .time{font-size:30px;line-height:36px;margin:0 0 10px}
.app .meeting-name{font-size:16px;line-height:22px}
.app .recess{border-radius:22px;padding:16px;margin:12px 0;flex-shrink:0}
.app[data-route=home] .recess{min-height:142px}
.app .app-body input,.app .app-body textarea{font-size:13px;padding:13px;flex-shrink:0}
.app textarea{height:140px;resize:none;max-height:none}
.app .app-body label{font-size:11px;margin:12px 0 9px}
.app .secondary-action{font-size:12px;text-align:left}
.app .scroll-content,.app .live-scroll,.app .brief-scroll,.app .settings-scroll{max-height:none;min-height:0;flex:1;flex-shrink:0;overflow:visible;mask-image:none}
.app .live-question,.app:has(.live-scroll) .live-question{font-size:24px;line-height:1.25;margin:10px 0 15px}
.app .speech{padding:10px 12px;margin:10px 0}
.app .speech p:last-child{font-size:12px}
.app .sample-tag{font-size:9px}
.app .record-status,.app:has(.live-scroll) .record-status{font-size:11px;margin-top:14px;flex-shrink:0}
.app[data-route=mini] .record-status{margin:0 0 10px}
.app details,.app details p{font-size:12px}
.app .transcript-row{font-size:13px}.app .transcript-row small{font-size:11px}
.app .brief-scroll p{font-size:13px}.app .brief-scroll h4{font-size:13px}
.app .settings-scroll{flex-shrink:1}.app .setting{font-size:13px}
.app.floating .app-body,.app.floating .app-footer{display:none}
.app.floating .logo-button{visibility:visible}
.desktop-note{bottom:20px;font-size:12px}
.app .identity .meeting-heading{font-weight:500}
/* White canvas with a restrained cool gradient, matching the KIOO website. */
:root{background:#fff}
body{background:radial-gradient(ellipse at 90% 12%,#edf2f566,transparent 45%),radial-gradient(ellipse at 0% 55%,#f3f2f766,transparent 45%),#fff}
.desktop,.desktop.dark{background:radial-gradient(ellipse at 12% 80%,#dce9ea99,transparent 68%),radial-gradient(ellipse at 90% 20%,#e5e6ee99,transparent 68%),linear-gradient(145deg,#fff,#f1f4f7)}