:root{--navy:#061a3f;--blue:#1769e8;--line:#dce4ef;--muted:#63738a;--bg:#f3f6fa;font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172236;background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}body:has(dialog[open]){overflow:hidden}[hidden]{display:none!important}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:var(--blue)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #72a8f8;outline-offset:3px}button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:7px;padding:9px 13px;font-weight:600;font-size:12px}button:hover:not(:disabled){border-color:#9ab8e6;background:#f2f7ff}
.shell-header{height:64px;padding:0 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:#fff}.logo{margin-right:auto;white-space:nowrap;color:var(--navy);font-weight:800;font-size:17px;letter-spacing:.08em;text-decoration:none}.logo small{display:block;color:var(--muted);font-size:9px;font-weight:500;letter-spacing:0;margin-top:3px}.demo-tag{font-size:11px;color:var(--muted);margin-right:20px}
.stage{max-width:1600px;margin:auto;padding:22px 32px 0}.scene-head span{color:var(--blue);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.scene-head h1{margin:5px 0 7px;color:var(--navy);font-size:26px;line-height:1.22;letter-spacing:-.025em}.scene-head p{max-width:1000px;margin:0;color:var(--muted);font-size:13px;line-height:1.55}.stage-toolbar{display:flex;align-items:center;gap:16px;min-height:53px}.page-label{font-size:11px;color:var(--muted);margin-right:auto}.page-label::before{content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;background:#7990ad;border-radius:50%}.stage-toolbar a{font-size:11px;white-space:nowrap;text-decoration:none}.date-control{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.date-control select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--navy);font-size:11px}.mode-control{display:flex;gap:3px;padding:3px;background:#e7edf5;border-radius:7px}.mode-control button{background:transparent;border:0;padding:5px 10px;font-size:11px;color:var(--muted)}.mode-control button[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 4px #061a3f12}
.surfaces{display:grid;grid-template-columns:350px minmax(0,1fr);gap:18px;height:calc(100svh - 315px);min-height:430px;max-height:850px}.chat-panel,.preview-panel{min-width:0;min-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.chat-panel{display:flex;flex-direction:column;box-shadow:0 3px 12px #061a3f04}.telegram-title{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #d5dfe8;background:#fff}.bot-avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;color:#fff;background:linear-gradient(140deg,#3da8eb,#1576c5);font-weight:800}.telegram-title strong{display:block;font-size:13px;color:#172236}.telegram-title small{display:block;margin-top:2px;font-size:11px;color:#8291a3}.telegram-mark{margin-left:auto;color:#7b9ab6;font-size:20px;transform:rotate(-25deg)}#messages{flex:1;min-height:0;padding:17px 13px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background-color:#e8eef0;background-image:radial-gradient(#a9bbc32a 1px,transparent 1px);background-size:14px 14px;scroll-behavior:auto}.message{flex-shrink:0;max-width:96%;align-self:flex-start;padding:10px 12px;border-radius:11px 11px 11px 3px;background:#fff;font-size:12px;line-height:1.55;box-shadow:0 1px 2px #17354b0c;overflow-wrap:anywhere}.message.operator{align-self:flex-end;background:#e2f6db;border-radius:11px 11px 3px 11px}.message .message-body{white-space:pre-line}.message a{text-decoration:none}.message-time{display:block;text-align:right;font-size:9px;line-height:1;color:#8c9b99;margin-top:7px}.message-time i{font-style:normal;color:#69a959;margin-left:4px}.voice-player{display:flex;align-items:center;gap:9px;margin-bottom:9px}.voice-play{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#75b668;color:#fff;font-size:12px}.voice-track{flex:1}.wave{height:20px;display:flex;align-items:center;gap:2px}.wave i{display:block;width:3px;border-radius:2px;background:#72ad65}.voice-duration{font-size:9px;color:#6e9d63;margin-top:1px}.transcript-label{font-size:9px;color:#679459;display:block;border-top:1px solid #c9e4c1;padding-top:7px;margin-bottom:4px}.source .source-label,.attachment .file-label,.forward .forward-label{display:block;font-size:10px;color:#608aa3;margin-bottom:4px}.attachment .file-label{font-weight:700}.forward{border-left:3px solid #64a891}.interval{align-self:center;background:#c6d4da9c;color:#577079;font-size:10px;border-radius:20px;box-shadow:none}.inline-actions{display:grid;gap:5px;margin-top:9px}.inline-actions button{padding:8px;border:1px solid #d6e7ef;border-radius:5px;color:#28779f;background:#f6fbfd;font-size:11px;text-align:center;line-height:1.4}.inline-actions button:disabled{opacity:.55}.chat-progress{padding:10px 13px 12px;background:#fff;border-top:1px solid var(--line)}#beat-progress{display:block;font-size:10px;color:var(--muted);text-align:center;margin:0 0 6px}.beat-button{width:100%;padding:10px;border:0;background:var(--navy);color:#fff;font-size:12px}.beat-button:hover:not(:disabled){background:#11366a}
.preview-panel{position:relative;display:flex;flex-direction:column}.preview-panel iframe{display:block;width:100%;height:100%;flex:1;border:0;background:#fff}.preview-panel:has(#preview-empty:not([hidden])){background:#fcfdff}#preview-empty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center;color:var(--muted)}#preview-empty .empty-mark{display:grid;place-items:center;width:60px;height:72px;margin-bottom:20px;border:1px solid #d4dfed;background:#edf4fb;border-radius:8px;color:#6e91bc;font-size:27px}#preview-empty h2{max-width:360px;font-size:20px;line-height:1.4;color:var(--navy);font-weight:650}#preview-empty p{max-width:360px;font-size:13px;line-height:1.7;margin:0}.stage[data-kind="page"] .surfaces,.stage[data-kind="summary"] .surfaces{grid-template-columns:1fr}.stage[data-kind="page"] .chat-panel,.stage[data-kind="summary"] .chat-panel{display:none}.explanation{display:flex;align-items:center;min-height:42px;margin:9px 0 0;font-size:12px;line-height:1.5;color:#5a6d85}.explanation::before{content:"→";align-self:flex-start;margin:10px 9px 0 0;color:var(--blue)}.navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 18px}.navigation-secondary{display:flex;gap:8px}.navigation #next{background:var(--blue);color:#fff;border-color:var(--blue);min-width:130px}.navigation #next:hover{background:#125ccb}#replay{background:transparent;border-color:transparent;color:var(--muted);font-weight:500}.view-tabs{display:none}
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(390px,95vw);height:100svh;max-height:none;max-width:none;padding:25px;border:0;border-left:1px solid var(--line);box-shadow:-10px 0 60px #061a3f18;color:#172236;overflow:auto}.drawer::backdrop{background:#071a3438}.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.drawer-head h2{margin:0;color:var(--navy);font-size:21px}.close-drawer{padding:4px 10px;border:0;font-size:26px;font-weight:400}.drawer h3{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin:20px 0 10px}.drawer #contents-list button{display:block;width:100%;margin:3px 0;padding:10px;text-align:left;border:0;background:transparent;font-size:12px;line-height:1.45}.drawer #contents-list button.active{background:#edf5ff;color:var(--blue)}#restart{margin:20px 0}.cue{display:flex;align-items:start;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.65}.cue input{margin-top:6px;accent-color:var(--blue)}.notes-progress{margin-top:25px;color:var(--muted);font-size:12px;line-height:1.8}.notes-progress strong{color:var(--navy)}
.scope-content{width:min(100%,980px);text-align:left}.scope-content .scope-kicker{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.08em}.scope-content>h2{max-width:none!important;font-size:30px!important;margin:10px 0 25px}.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.scope-card{padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff}.scope-card span{color:var(--blue);font-size:12px;font-weight:700}.scope-card h3{font-size:16px;color:var(--navy);line-height:1.4}.scope-card p{font-size:12px!important}.optional-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.optional-links button{font-size:11px}
@media(min-width:1600px){.surfaces{grid-template-columns:390px minmax(0,1fr)}}
@media(max-width:1100px){.surfaces{grid-template-columns:310px minmax(0,1fr)}.stage{padding-inline:22px}.shell-header{padding-inline:22px}}
@media(max-width:900px){.demo-tag{display:none}.stage{padding:17px 20px 0}.scene-head h1{font-size:24px}.surfaces{grid-template-columns:1fr;height:calc(100svh - 350px);min-height:400px}.surfaces[data-panel="chat"] .preview-panel,.surfaces[data-panel="page"] .chat-panel{display:none}.stage[data-kind="page"] .preview-panel,.stage[data-kind="summary"] .preview-panel{display:flex}.view-tabs{display:flex;gap:4px;margin:0 0 10px;border-bottom:1px solid var(--line)}.view-tabs button{border:0;border-radius:0;background:transparent;padding:10px 15px;color:var(--muted)}.view-tabs button[aria-selected="true"]{color:var(--blue);box-shadow:inset 0 -2px var(--blue)}.stage[data-kind="page"] .view-tabs,.stage[data-kind="summary"] .view-tabs{display:none}.stage[data-kind="page"] .surfaces{height:calc(100svh - 300px)}.message{max-width:90%;font-size:13px}#messages{padding:18px}.scope-grid{grid-template-columns:1fr}.scope-card{padding:16px}.scope-card h3{margin:7px 0}.scope-content>h2{font-size:23px!important}.stage[data-kind="summary"] .surfaces{height:auto;max-height:none}.stage[data-kind="summary"] #preview-empty{padding:24px}.stage-toolbar{flex-wrap:wrap;gap:8px 12px;padding:9px 0}.mode-control{order:3;width:100%}.mode-control button{flex:1}.date-control{font-size:10px}.date-control select{max-width:125px}.explanation{font-size:11px}.drawer{width:min(400px,95vw)}}
@media(max-width:520px){.shell-header{height:58px;padding:0 15px;gap:6px}.logo{font-size:14px}.logo small{font-size:8px;max-width:145px}.shell-header button{padding:8px;font-size:10px}.stage{padding:15px 12px 0}.scene-head h1{font-size:22px;margin:6px 0 8px;line-height:1.2}.scene-head p{font-size:12px}.scene-head span{font-size:9px}.surfaces{min-height:380px;height:calc(100svh - 365px)}.stage[data-kind="page"] .surfaces{min-height:400px;height:calc(100svh - 330px)}.page-label{font-size:10px;flex-basis:55%}.stage-toolbar a{font-size:10px}.date-control{order:3}.navigation{padding-bottom:16px;gap:5px}.navigation button{font-size:11px;padding:10px}.navigation #next{min-width:94px}#replay span{display:none}#replay{font-size:18px;padding:6px}#return-main{font-size:10px}.navigation-secondary{gap:0}.explanation{align-items:start;padding-top:3px;min-height:48px}.explanation::before{margin-top:0}.scope-content>h2{font-size:20px!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.stage:not([data-kind="summary"]) .surfaces{min-height:330px}

@media(min-width:1100px){body.notes-open .stage,body.notes-open .shell-header{margin-right:350px}body.notes-open .demo-tag{display:none}body.notes-open #notes{width:350px}body.notes-open .stage:not([data-kind="page"]):not([data-kind="summary"]) .surfaces{grid-template-columns:300px minmax(0,1fr)}}