/* Platform layer: keep the source phone design, let desktop use the viewport. */
[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;padding:12px 20px;background:#fbc815;color:#141313;border-radius:16px}
.skip-link:focus{top:12px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #fbc815;outline-offset:4px}
#screen:focus{outline:none}
#wrap{transform:none!important}
#device{border-radius:0;box-shadow:none}
#status,.source-status,.source-indicator,.hi,#statebar{display:none!important}
.web-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:30px;font-weight:300}
.web-brand img{width:35px;height:40px;object-fit:contain}
.web-tagline{font:300 14px/23px Raleway;color:#fff6;margin:28px 0 40px}
.sidebar-bottom{margin-top:auto;padding-top:32px}
.sidebar-bottom p{font:300 11px/18px Raleway;color:#fff5;margin-top:10px}
.build-badge{display:flex;gap:8px;align-items:center;font:300 11px/18px Raleway;color:#fff8}
.build-badge i{width:6px;height:6px;border-radius:50%;background:#f97e12;box-shadow:0 0 12px #f97e1280}
.install-button{width:100%;display:flex;justify-content:space-between;padding:14px 16px;border-radius:16px;background:#25211b;font:400 13px Raleway;color:#fbc815;margin-bottom:20px}
.web-topbar{display:none}
.mobile-demo-mark{position:fixed;right:12px;top:calc(env(safe-area-inset-top) + 2px);font:500 9px/12px Raleway;color:#fff5;z-index:60;pointer-events:none}
#platform-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;background:#252321;border:1px solid #ffffff20;padding:12px 20px;border-radius:20px;font:400 13px/20px Raleway;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
#platform-toast.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#platform-toast button{margin-left:12px;color:#fbc815;text-decoration:underline}
#screen .view:not(.on){visibility:hidden!important;pointer-events:none!important}
.source-state-note{grid-column:1/-1}
@media(min-width:521px){
  #stage{display:flex;align-items:stretch;justify-content:flex-start;gap:0;height:100dvh;background:#141313!important}
  #side{display:flex;width:244px;flex-direction:column;padding:40px 28px 28px;border-right:1px solid #ffffff0c;background:#111010}
  #side nav{border:0;gap:8px}
  #side nav button{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:18px;font:300 15px/22px Raleway;color:#ffffff66}
  #side nav button .i{width:20px;height:20px;flex:none;font-size:20px}
  #side nav button.on{background:#191818;color:#fff}
  #side nav button.on::before{display:none}
  #side nav button:hover{background:#191818;color:#fff}
  #wrap{flex:1;width:0;min-width:0;align-items:stretch;gap:0}
  #device{flex:1;width:100%!important;height:auto!important;min-height:0}
  .web-topbar{height:84px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ffffff0c;font:400 13px Raleway}
  #connection-status{font-size:11px;color:#fff6}
  .source-canvas{width:100%!important;height:100%!important;transform:none!important;inset:0!important}
  .source-head{top:28px;left:40px;right:40px}
  .source-switcher.seg.h3{top:100px;left:40px;right:40px;max-width:640px}
  .source-tasks{top:184px;left:40px;right:40px;bottom:28px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:208px;gap:16px;padding-left:0;padding-right:0;max-width:1100px}
  .source-card{height:208px;border-radius:24px;padding:22px;transition:background .2s,transform .2s}
  .source-card:hover{background:#211e1b;transform:translateY(-2px)}
  .source-zone{left:22px;top:22px;font-size:12px}
  .source-title{left:22px;right:22px;top:56px;white-space:normal;font-size:20px;line-height:26px}
  .source-desc,.source-card[data-id=osago] .source-desc{left:22px;top:94px;right:22px;width:auto;font-size:13px;line-height:21px}
  .source-detail{left:22px;bottom:22px}
  .source-newtask{margin:8px 0 0;max-width:640px;height:60px;border:1px dashed #ffffff20;color:#fff9;background:transparent}
  .source-chathead{top:28px;left:40px;right:40px}
  .source-welcome{top:23%;left:40px;right:40px}
  .source-welcome-text{font-size:24px;line-height:32px;font-weight:300}
  .source-welcome>p{font-size:13px;line-height:22px}
  .source-compose{left:40px;right:40px;bottom:32px;height:64px;max-width:820px;margin:auto}
  .source-conversation{top:108px;bottom:116px;left:40px;right:40px;max-width:820px;margin:auto;font-size:17px;line-height:28px}
  .source-conversation>p{max-width:680px}
  .df-scroll{top:28px;bottom:28px;left:40px;right:40px;max-width:820px;margin:auto}
  .df-decisions{display:flex;flex-direction:column;gap:12px}
  .df-decision{padding:24px}
  #v-zone .scroll{padding:28px 40px 40px!important;bottom:0!important;max-width:900px;margin:auto}
  #v-call .callv{padding:28px 40px 40px;max-width:820px;margin:auto}
  .history-open #call-history{left:40px;right:40px;bottom:24px;top:108px}
  #sheet{left:50%;right:auto;width:min(560px,calc(100% - 48px));transform:translate(-50%,calc(100% + 32px));max-height:calc(100% - 48px);bottom:24px}
  #sheet.on{transform:translate(-50%,0)}
  #thr{left:50%;right:auto;width:min(720px,100%);transform:translate(-50%,100%);padding-top:28px;box-shadow:0 0 80px #0008}
  #thr.on{transform:translate(-50%,0)}
  #tabs{display:none!important}
  .mobile-demo-mark{display:none}
}
@media(min-width:521px) and (max-width:1050px){
  #side{width:192px;padding:28px 18px}
  .web-topbar{padding:0 24px;height:68px}
  .source-tasks{grid-template-columns:repeat(2,minmax(0,1fr));left:24px;right:24px}
  .source-head,.source-switcher.seg.h3,.source-chathead,.source-compose,.source-conversation,.df-scroll{left:24px;right:24px}
}
@media(min-width:521px) and (max-width:700px){
  #side{width:76px;padding:24px 12px}
  .web-brand{justify-content:center}
  .web-brand span,.web-tagline,.nav-label,.sidebar-bottom{display:none}
  #side nav{margin-top:40px}
  #side nav button{justify-content:center;padding:14px}
  #connection-status{max-width:160px;text-align:right}
}
@media(max-width:520px){
  #stage{display:block}
  #side,.web-topbar{display:none}
  #wrap{width:100%}
  #device{width:100vw;height:100dvh!important}
  #tabs{bottom:max(24px,calc(env(safe-area-inset-bottom) + 8px))}
  #platform-toast{bottom:calc(env(safe-area-inset-bottom) + 98px)}
}
.native-keyboard-open #tabs{display:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .source-card:hover{transform:none}
}