.app-screen.demo-live{display:flex;flex-direction:column;min-height:520px;padding:15px 17px 13px;overflow:hidden;border:7px solid #151b25;border-radius:32px;background:linear-gradient(145deg,#f9fafb,#edf1f3);color:#172033;font-family:var(--sans);box-shadow:0 24px 52px rgba(22,31,44,.18)}
.demo-live button{font:inherit}.demo-status{display:flex;justify-content:space-between;margin:0 2px 16px;font-size:10px;font-weight:800}.demo-main{flex:1;min-height:0}.demo-kicker{display:block;color:#778494;font-size:10px}.demo-title{margin:5px 0 14px;font-size:21px;letter-spacing:-.065em}.demo-segments{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;padding:3px;border:1px solid #dbe2e7;border-radius:12px;background:#fff}.demo-segments button{height:28px;border:0;border-radius:8px;background:transparent;color:#788596;font-size:9px;font-weight:700;cursor:pointer}.demo-segments button.is-active{background:#1d2a3e;color:#fff}.demo-task-list{display:grid;gap:8px}.demo-task{width:100%;display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;padding:11px;border:0;border-radius:11px;background:#fff;color:#253149;text-align:left;box-shadow:0 4px 14px rgba(31,44,63,.07);cursor:pointer}.demo-task i{width:10px;height:10px;border:1.5px solid #94a1b2;border-radius:4px}.demo-task.done{opacity:.55;text-decoration:line-through}.demo-task.done i{background:#1d2a3e;border-color:#1d2a3e}.demo-task span{font-size:10px}.demo-task b{color:#8794a3;font:9px var(--mono)}
.demo-voice{width:100%;margin:13px 0 9px;padding:12px;border:1px dashed #aab9c8;border-radius:14px;background:#eff4f8;color:#26384f;cursor:pointer;text-align:left}.demo-voice strong{display:flex;align-items:center;gap:9px;font-size:11px}.demo-mic{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#1d2a3e;color:white;font-size:13px}.demo-voice span{display:block;margin:7px 0 0 32px;color:#758394;font-size:9px;line-height:1.35}.demo-voice.is-listening{border-color:#536a84;background:#e3ebf2;animation:demoPulse 1.1s ease-in-out infinite}.demo-voice-result{margin:0 0 10px;padding:10px;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(31,44,63,.07)}.demo-voice-result small{color:#758394;font-size:8px}.demo-voice-result p{margin:5px 0 7px;font-size:10px;line-height:1.4}.demo-tags{display:flex;gap:5px;flex-wrap:wrap}.demo-tags span{padding:4px 6px;border-radius:999px;background:#e8edf1;color:#435366;font-size:8px;font-weight:700}.demo-tags span:first-child{background:#d9e6f0;color:#203d57}.demo-team{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:10px;border-top:1px solid #dce3e8}.demo-team small{display:block;color:#778494;font-size:8px}.demo-team b{display:block;margin-top:2px;font-size:10px}.demo-members{display:flex;gap:4px}.demo-member{display:grid;place-items:center;width:25px;height:25px;border:1px solid #d3dce4;border-radius:50%;background:#fff;color:#647386;font-size:9px;font-weight:800;cursor:pointer}.demo-member.is-selected{border-color:#1d2a3e;background:#1d2a3e;color:#fff}.demo-note{padding:12px;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(31,44,63,.07)}.demo-note b{font-size:11px}.demo-note p{margin:6px 0 0;color:#667488;font-size:10px;line-height:1.45}.demo-checks{display:grid;gap:7px;margin-top:10px}.demo-check{display:flex;align-items:center;gap:8px;color:#354357;font-size:10px}.demo-check i{width:12px;height:12px;border:1px solid #98a6b5;border-radius:4px}.demo-check.is-checked i{background:#1d2a3e;border-color:#1d2a3e}.demo-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:13px;padding-top:10px;border-top:1px solid #dce3e8}.demo-nav button{height:36px;border:0;border-radius:10px;background:transparent;color:#7d8b9b;font-size:9px;cursor:pointer}.demo-nav button.is-active{background:#e3e9ee;color:#1d2a3e;font-weight:800}@keyframes demoPulse{50%{transform:scale(1.01);box-shadow:0 0 0 4px rgba(91,120,151,.12)}}
@media(max-width:720px){.app-screen.demo-live{min-height:500px;padding:14px;border-width:6px;border-radius:30px}.demo-title{font-size:20px}.demo-task{padding:10px}.demo-voice{margin-top:11px}}

.demo-nav{grid-template-columns:repeat(4,1fr);gap:4px}.demo-nav button{font-size:8px}.demo-voice-panel{margin-top:12px;padding:15px;border:1px dashed #aab9c8;border-radius:14px;background:#e8eef3}.demo-voice-panel small{color:#61748a;font-size:9px}.demo-voice-panel h5{margin:7px 0 6px;font-size:13px;letter-spacing:-.03em}.demo-voice-panel p{margin:0;color:#69788a;font-size:10px;line-height:1.45}.demo-voice-panel button{margin-top:11px;border:0;border-radius:9px;padding:8px 11px;background:#1d2a3e;color:#fff;font-size:9px;cursor:pointer}.demo-pdf{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #d7e0e7;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(31,44,63,.06)}.demo-pdf-icon{display:grid;place-items:center;width:30px;height:34px;border-radius:7px;background:#e6ebef;color:#35475a;font-size:8px;font-weight:800}.demo-pdf b,.demo-pdf span{display:block}.demo-pdf b{font-size:10px}.demo-pdf span{margin-top:3px;color:#788797;font-size:8px}.demo-pdf i{margin-left:auto;color:#8391a0;font-size:8px;font-style:normal}.demo-calendar{margin-top:12px;padding:10px;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(31,44,63,.06)}.demo-calendar-head,.demo-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.demo-calendar-head{color:#8c98a5;font-size:7px}.demo-calendar-days{margin-top:8px}.demo-calendar-days b{display:grid;place-items:center;height:24px;border-radius:7px;color:#445164;font-size:9px}.demo-calendar-days .is-shift{background:#24344a;color:#fff}.demo-roster{display:grid;gap:6px;margin-top:10px;color:#657386;font-size:9px}.demo-roster span{display:flex;align-items:center;gap:6px}.demo-roster i{width:7px;height:7px;border-radius:50%;background:#667b92}.demo-roster .roster-b{background:#a7b4c1}

/* Expanded Pankrat demo: a real mobile-app hierarchy, scrollable inside the device. */
.app-screen.demo-live{height:520px;min-height:520px}.demo-main{overflow-y:auto;overscroll-behavior:contain;padding-right:2px}.demo-nav-full{grid-template-columns:repeat(5,1fr)}.demo-nav-full button{font-size:7px}.demo-summary{padding:13px;border-radius:16px;background:#111b2d;color:#fff}.demo-summary b,.demo-summary span{display:block}.demo-summary b{font-size:13px}.demo-summary span{margin-top:5px;color:#c8d1dc;font-size:10px}.demo-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:9px 0 13px}.demo-metrics div{padding:10px 8px;border:1px solid #dfe5e9;border-radius:12px;background:#fff}.demo-metrics b,.demo-metrics span{display:block}.demo-metrics b{font-size:16px}.demo-metrics span{margin-top:2px;color:#7c8998;font-size:8px}.demo-section-title{margin:13px 0 7px;font-size:12px}.demo-work-card{display:grid;grid-template-columns:11px 1fr;gap:8px;margin:7px 0;padding:11px;border:1px solid #dbe2e7;border-radius:14px;background:#fff}.demo-work-card.is-done{border:2px solid #17b86d;background:#effcf5}.demo-work-dot{width:9px;height:9px;margin-top:4px;border-radius:50%;background:#2c6dec}.demo-work-card.is-done .demo-work-dot{background:#16b96c}.demo-work-card b,.demo-work-card span{display:block}.demo-work-card b{font-size:10px;line-height:1.32}.demo-work-card span{margin-top:3px;color:#7d8998;font-size:8px}.demo-progress{height:4px;margin-top:9px;overflow:hidden;border-radius:5px;background:#e7edf0}.demo-progress i{display:block;height:100%;border-radius:5px;background:#2b6ceb}.demo-work-card.is-done .demo-progress i{background:#16b96c}.demo-task-stack{display:grid;gap:1px}.demo-schedule-callout{padding:12px;border:1px solid #b9d1fb;border-radius:14px;background:#edf5ff}.demo-schedule-callout b,.demo-schedule-callout span{display:block}.demo-schedule-callout b{color:#1f63c7;font-size:11px}.demo-schedule-callout span{margin-top:4px;color:#5b7da9;font-size:9px}.demo-calendar-full{padding:11px}.demo-calendar-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.demo-calendar-title b{font-size:12px}.demo-calendar-title button{width:24px;height:24px;border:1px solid #e0e6ea;border-radius:8px;background:#fff;font-size:17px;line-height:1}.demo-month-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}.demo-month-days b{position:relative;display:grid;place-items:center;height:23px;border:1px solid transparent;border-radius:7px;font-size:9px}.demo-month-days .shift-day{border-color:#b8efd0;color:#159555}.demo-month-days i{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:#16b96c}.demo-month-days .today-day{border:2px solid #b8efd0;color:#159555}.demo-roster-card{display:grid;gap:6px;margin-top:10px;padding:11px;border:1px solid #e0e6e9;border-radius:13px;background:#fff}.demo-roster-card>b{font-size:10px}.demo-roster-card span{display:flex;align-items:center;gap:6px;color:#637386;font-size:8px}.demo-roster-card i{width:7px;height:7px;border-radius:50%;background:#16b96c}.demo-roster-card .roster-b{background:#2b6ceb}.demo-roster-card .roster-c{background:#9b7be3}.demo-note-empty{margin-top:14px;padding:18px 13px;border:1px dashed #bdc8d1;border-radius:14px;text-align:center}.demo-note-empty b,.demo-note-empty span{display:block}.demo-note-empty b{font-size:10px}.demo-note-empty span{margin-top:6px;color:#7b8997;font-size:9px;line-height:1.35}.demo-new-note{float:right;margin-top:10px;border:0;border-radius:10px;padding:9px 12px;background:#f0e8ff;color:#7251bc;font-size:10px;font-weight:800}.demo-new-note+.demo-voice{clear:both;margin-top:62px}.demo-team-count{padding:12px;border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(31,44,63,.06)}.demo-team-count b,.demo-team-count span{display:block}.demo-team-count b{font-size:12px}.demo-team-count span{margin-top:4px;color:#718092;font-size:9px}.demo-person{display:flex;align-items:center;gap:9px;margin-top:8px;padding:10px;border:1px solid #dce4e9;border-radius:13px;background:#fff}.person-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#dbf5e6;color:#168a52;font-size:8px;font-style:normal;font-weight:800}.person-alt{background:#e5edff;color:#2b62bd}.person-third{background:#f0e8ff;color:#7050bb}.demo-person b,.demo-person span{display:block}.demo-person b{font-size:10px}.demo-person span{margin-top:3px;color:#748295;font-size:8px}.demo-add-person{width:100%;margin-top:10px;padding:10px;border:1px dashed #aec2d4;border-radius:12px;background:#f7fafc;color:#2363ad;font-size:10px;font-weight:800;cursor:pointer}.demo-caption{margin:9px 3px 4px;color:#7c8997;font-size:8px;line-height:1.35}