/* Product interface restored from the supplied original, scoped to the demo. */
#demo{--text:Onest,Arial,sans-serif;--ui:Manrope,Onest,Arial,sans-serif;--surface:#fff;--ink:#242536;--ink-2:#5c6375;--ink-3:#596070;--line:#dfe2ed;--line-2:#cdd2e1;--tint:#eff1f8;--chip:#e9ecfa;--btn:#242638;--pen:#4559a8;--ok:#4d8068;--ok-ink:#3d6a55;--gpt:#6f8fb8;--claude:#c48a68;font:400 16px/1.6 var(--text)}
#demo .layer{inset:auto;visibility:visible}
#demo .layer[data-off]{visibility:hidden}
#demo .brand{display:inline-flex;align-items:center;gap:10px;font:700 24px var(--ui);letter-spacing:-.05em;text-decoration:none;color:var(--ink)}
#demo .brand b{font-weight:500}
#demo .mark{width:30px;height:30px;flex:none}
#demo .mark rect{fill:var(--btn)}
#demo .mark path{stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#demo{position:relative;max-width:var(--wrap);margin:clamp(44px,6vh,64px) auto 0;border-radius:28px;border:1px solid rgba(205,210,225,.8);text-align:left;
 background:radial-gradient(ellipse 50% 60% at 90% 10%,rgba(255,255,255,.75),transparent 70%),linear-gradient(115deg,#dde6ff 0%,#f7f6fc 46%,#f1e3f3 100%);
 padding:22px clamp(14px,2.6vw,36px) 26px;box-shadow:0 40px 90px -40px rgba(60,72,120,.35)}
#demo .chapters{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
#demo .chapter{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px 0 8px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink-2);font:600 13.5px var(--ui);cursor:pointer;transition:background .25s var(--ease),color .25s,border-color .25s,transform .16s var(--ease)}
#demo .chapter:active{transform:scale(.97)}
#demo .chapter i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--ink-2);font:700 12px var(--ui);font-variant-numeric:tabular-nums;transition:background .25s,color .25s}
@media(hover:hover){#demo .chapter:hover{color:var(--ink);background:#fff}}
#demo .chapter[aria-selected=true]{background:var(--btn);border-color:var(--btn);color:#fff}
#demo .chapter[aria-selected=true] i{background:rgba(255,255,255,.16);color:#fff}
#demo .chapter .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.55);transform:scaleX(0);transform-origin:left}
#demo .screen{position:relative;height:clamp(500px,46vw,580px);margin-top:20px}
#demo .layer{position:absolute;transition:opacity .45s var(--ease),transform .55s var(--ease),filter .55s var(--ease)}
#demo .layer[data-off]{opacity:0;pointer-events:none;transform:translateY(10px) scale(.985);filter:blur(4px);transition-duration:.2s,.25s,.25s;transition-timing-function:ease-out}
#demo.instant .layer,#demo.instant .note,#demo.instant .lock,#demo.instant .chat .body,#demo.instant .saved-label,#demo.instant .composer,#demo.instant .kf-note{transition:none!important}
#demo .layer.ghost{opacity:.4;filter:grayscale(.6) blur(1px);transform:scale(.97)}
#demo .win{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 70px -20px rgba(46,58,92,.28);overflow:hidden}
#demo .winbar{height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);font:600 12.5px var(--ui);color:var(--ink-3);white-space:nowrap}
#demo .dots{display:flex;gap:6px}
#demo .dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
#demo .addr{flex:1;min-width:0;background:var(--tint);border-radius:6px;padding:5px 12px;overflow:hidden;text-overflow:ellipsis;font-weight:500}
#demo .ico{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
#demo .chat{left:0;top:0;width:min(64%,740px)}
#demo .chat .body{padding:24px 30px 30px}
#demo .t3{font-weight:600;line-height:1.3;letter-spacing:-.02em}
#demo .chat .t3{font-size:17px;margin-bottom:18px}
#demo .msg{display:grid;grid-template-columns:30px 1fr;gap:12px;margin-top:16px;font-size:15px;line-height:1.6}
#demo .av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:700 11px var(--ui);background:var(--chip);color:var(--ink-2)}
#demo .av.ai{background:var(--ink);color:#fff}
#demo .you{background:var(--tint);border-radius:10px;padding:12px 16px}
#demo .files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#demo .file{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;font:600 13px var(--text);white-space:nowrap}
#demo .file small{font:500 11px var(--ui);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
#demo .saved-label{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 20px rgba(46,58,92,.14);font:600 12.5px var(--ui);color:var(--ink-2);transition:opacity .4s var(--ease),transform .5s var(--ease)}
#demo .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(77,128,104,.16);flex:none}
#demo .dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(193,143,55,.18)}
#demo .lock{position:absolute;inset:44px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:rgba(255,255,255,.55);opacity:0;pointer-events:none;transition:opacity .5s var(--ease) .15s}
#demo .lock svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.6;margin-bottom:6px}
#demo .lock b{font:600 19px var(--text);letter-spacing:-.03em}
#demo .lock span{font-size:14px;color:var(--ink-2)}
#demo .chat .body{transition:filter .6s var(--ease),opacity .6s var(--ease)}
#demo[data-step="3"] .chat .body{filter:blur(4px) grayscale(1);opacity:.45}
#demo[data-step="3"] .chat .lock{opacity:1}
#demo[data-step="1"] .saved-label{opacity:0;transform:translateY(6px)}
/* Windows of the real extension (popup, archive, the new chat it fills), 30.10.2026: tokens of consumer/desk.css and popup.css. */
#demo .pop,#demo .arch,#demo .newchat{--ink:#20231f;--ink-2:#575b55;--ink-3:#686c66;--line:#e4e4de;--line-2:#d5d6cf;--tint:#f3f3ef;--chip:#ebebe5;--btn:#20231f;--wash:#eef0f7;--ok:#3f7a5c;--ok-ink:#3f7a5c;--gpt:#5f84bd;--claude:#bf805f;color:var(--ink);font:400 14px/1.55 var(--ui)}
#demo .ui-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
#demo .brand{gap:9px}
#demo .brand .mark{width:26px;height:26px}
#demo .brand .wordmark{display:block;height:19px;width:auto;color:var(--ink)}
#demo .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(63,122,92,.16)}
/* The extension button in the browser toolbar: the popup opens from it. */
#demo .ext-btn{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none;transition:background .3s,box-shadow .3s}
#demo .ext-btn .mark{width:18px;height:18px}
#demo[data-step="2"] .ext-btn,#demo[data-step="3"] .ext-btn{background:#e3e8fb;box-shadow:0 0 0 1px #c9d3f6}
/* Popup — consumer/popup.html at its real 364 px width. */
#demo .pop{right:0;top:36px;width:min(34%,364px);padding:20px 20px 10px;background:#fff}
#demo .p-head{display:flex;align-items:center;justify-content:space-between;min-height:30px}
#demo .p-icon{display:grid;place-items:center;width:32px;height:32px;color:var(--ink-2)}
#demo .p-status{display:grid;grid-template-columns:14px 1fr;gap:8px;margin-top:22px}
#demo .p-status .dot{margin-top:7px}
#demo .p-status b{display:block;font:600 15.5px/1.35 var(--ui);letter-spacing:-.015em}
#demo .p-status p{margin-top:3px;font:400 13.5px/1.5 var(--text);color:var(--ink-2)}
#demo .p-open{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:18px;border:0;border-radius:99px;background:var(--btn);color:#fff;font:600 13.5px var(--ui);cursor:pointer;transition:background .2s,transform .16s var(--ease)}
@media(hover:hover){#demo .p-open:hover{background:#353932}}
#demo .p-open:active{transform:scale(.98)}
#demo .p-history{display:flex;align-items:center;justify-content:center;gap:12px;height:44px;margin-top:8px;border:1px solid var(--line-2);border-radius:99px;font:600 13.5px var(--ui)}
#demo .p-history span,#demo .p-privacy span,#demo .d-row span{font:500 17px/1 var(--ui);color:var(--ink-2)}
#demo .p-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
#demo .p-row:first-of-type{margin-top:20px}
#demo .p-history+.p-row{margin-top:20px}
#demo .p-row b{display:block;font:600 13.5px/1.4 var(--ui)}
#demo .p-row small{display:block;font:400 12.5px/1.4 var(--text);color:var(--ink-2)}
#demo .p-disk>span{display:flex;align-items:center;gap:9px;font:600 13.5px/1.4 var(--ui)}
#demo .p-disk b{font:600 13.5px var(--ui);font-variant-numeric:tabular-nums}
#demo .switch{width:38px;height:24px;border-radius:99px;background:var(--btn);position:relative;flex:none}
#demo .switch::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff}
#demo .p-privacy{display:flex;align-items:center;justify-content:space-between;min-height:42px;border-top:1px solid var(--line);font:500 13px var(--ui);color:var(--ink-2)}
/* Archive — consumer/reader.html: chat column, reading sheet, the «New chat» desk. */
#demo .arch{left:50%;top:0;width:min(100%,1040px);height:100%;transform:translateX(-50%);display:grid;grid-template-columns:232px minmax(0,1fr) 262px;background:#fff}
#demo .layer.arch[data-off]{transform:translateX(-50%) translateY(14px) scale(.985)}
#demo .layer.arch.ghost{transform:translateX(-50%) scale(.97)}
#demo .side{display:flex;flex-direction:column;min-height:0;background:var(--wash);border-right:1px solid #dde1ec;padding:16px 12px 12px}
#demo .s-head{display:flex;align-items:center;justify-content:space-between;padding:0 3px 14px}
#demo .s-icon{color:#6b7080;display:grid}
#demo .search{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;border:1px solid #d7dcea;border-radius:10px;background:#fff;padding:7px 9px;font:500 12.5px var(--ui);color:#6b7080}
#demo .search .ui-i{width:15px;height:15px}
#demo .search kbd{margin-left:auto;font:600 11px var(--ui);border:1px solid #d7dcea;border-radius:5px;padding:0 5px;color:#6b7080}
#demo .s-tools{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:12px 0 4px}
#demo .s-tools small{font:500 11.5px var(--ui);color:#5d6273;white-space:nowrap}
#demo .seg{display:flex;gap:2px;font:600 11.5px var(--ui);color:#5d6273}
#demo .seg>*{padding:4px 7px;border-radius:7px}
#demo .seg b{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(32,35,31,.08)}
#demo .day{font:600 11px/1 var(--ui);letter-spacing:.04em;color:#5d6273;margin:14px 9px 6px}
#demo .item{padding:8px 10px;border-radius:10px}
#demo .item b{display:block;font:600 12.5px/1.4 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demo .item small{display:flex;align-items:center;gap:6px;font:500 11.5px/1.5 var(--ui);color:#5d6273}
#demo .item time{margin-left:auto;font-variant-numeric:tabular-nums}
#demo .item.sel{background:#fff;box-shadow:0 1px 2px rgba(32,35,31,.06),0 8px 18px -12px rgba(32,35,40,.35)}
#demo .src{width:6px;height:6px;border-radius:50%;background:var(--gpt);flex:none}
#demo .src.claude{background:var(--claude)}
#demo .s-foot{margin-top:auto;padding-top:12px;border-top:1px solid #dde1ec}
#demo .s-export{display:flex;height:36px;border:1px solid #d7dcea;border-radius:10px;background:#fff;font:600 12.5px var(--ui)}
#demo .s-export>span{flex:1;display:grid;place-items:center}
#demo .s-export i{display:grid;place-items:center;width:36px;border-left:1px solid #d7dcea;color:var(--ink-2)}
#demo .s-export .ui-i{width:15px;height:15px}
#demo .s-links{display:flex;justify-content:space-between;margin-top:10px;padding:0 2px;font:600 12px var(--ui);color:var(--ink-2)}
#demo .sheet{min-width:0;padding:26px 30px;overflow:hidden;position:relative}
#demo .sheet-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line)}
#demo .sheet .t3{font:400 27px/1.1 var(--text);letter-spacing:-.04em;color:var(--ink)}
#demo .sheet .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:500 12px var(--ui);color:var(--ink-3);margin-top:9px}
#demo .tag{display:inline-flex;align-items:center;gap:6px}
#demo .more{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:10px;font:700 13px/1 var(--ui);letter-spacing:.05em;color:var(--ink-2)}
#demo .turn{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;padding-top:16px;font:400 13.5px/1.6 var(--text);color:#2a2d29}
#demo .turn .who{font:600 12px/1.4 var(--ui);color:var(--ink)}
#demo .turn .who small{display:block;margin-top:5px;font:500 11.5px var(--ui);color:var(--ink-3)}
#demo .turn .q{font:500 14px/1.55 var(--text);color:var(--ink)}
#demo .frow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 0;border-block:1px solid var(--line);margin-top:10px;font:400 12px/1.45 var(--ui)}
#demo .ftype{width:30px;height:36px;border:1px solid var(--line-2);border-radius:5px;display:grid;align-content:end;justify-items:center;padding-bottom:3px;font:700 8.5px var(--ui);color:var(--ink-3)}
#demo .frow b{display:block;font:600 13px/1.4 var(--ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#demo .frow small{display:block;color:var(--ink-3);font-size:11.5px}
#demo .frow em{display:block;font-style:normal;color:var(--ok-ink);font-size:11.5px}
#demo .frow .get{font:600 12px var(--ui);color:var(--ink)}
#demo .acts{display:flex;gap:16px;margin-top:10px;font:500 12px var(--ui);color:var(--ink-2)}
#demo .acts span{display:inline-flex;align-items:center;gap:6px}
#demo .acts .ui-i{width:14px;height:14px}
#demo .desk{min-width:0;background:#f9f9f6;border-left:1px solid var(--line);padding:0 18px}
#demo .d-tabs{display:flex;gap:18px;margin:0 -18px;padding:16px 18px 0;border-bottom:1px solid var(--line);font:600 12.5px var(--ui);color:var(--ink-2);white-space:nowrap}
#demo .d-tabs>*{padding-bottom:10px}
#demo .d-tabs b{color:var(--ink);box-shadow:inset 0 -2px #2447cb}
#demo .d-lead{margin-top:18px;font:400 13px/1.6 var(--text);color:var(--ink-2)}
#demo .targets{display:grid;gap:8px;margin-top:16px}
#demo .targets button{display:flex;justify-content:center;align-items:center;min-height:42px;border-radius:99px;font:600 13px var(--ui);cursor:pointer;transition:background .2s,border-color .2s,transform .16s var(--ease)}
#demo .targets button:active{transform:scale(.98)}
#demo .d-primary{border:1px solid var(--btn);background:var(--btn);color:#fff}
#demo .d-outline{border:1px solid var(--line-2);background:#fff;color:var(--ink)}
@media(hover:hover){#demo .d-primary:hover{background:#353932}#demo .d-outline:hover{border-color:var(--ink)}}
#demo .d-done{display:none;grid-template-columns:14px 1fr;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font:600 12.5px/1.5 var(--ui);color:var(--ink)}
#demo .d-done .dot{margin-top:6px}
#demo[data-step="5"] .d-done{display:grid}
#demo .d-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font:500 12.5px var(--ui);color:var(--ink-2)}
/* Step 5 — the new chat tab KeepFlow opened and filled. Nothing is sent. */
#demo .newchat{right:3%;top:30px;width:min(56%,580px);background:#fff;box-shadow:0 30px 80px -10px rgba(30,38,66,.35)}
#demo .nc-body{padding:34px 28px 30px;background:#fbfaf7}
#demo .nc-hello{font:400 24px/1.2 var(--text);letter-spacing:-.03em;text-align:center;color:var(--ink);margin-bottom:22px}
#demo .composer{border:1px solid var(--line-2);border-radius:18px;background:#fff;padding:12px 14px 10px;box-shadow:0 2px 6px rgba(32,35,31,.05)}
#demo .composer .files{margin:0 0 10px}
#demo .composer .file{max-width:100%;overflow:hidden;text-overflow:ellipsis;font:600 12px var(--ui)}
#demo .draft{font:400 13.5px/1.6 var(--text);color:var(--ink)}
#demo .draft.placeholder{color:#9a9d96}
#demo .c-foot{display:flex;justify-content:flex-end;margin-top:8px}
#demo .send{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#c96442;color:#fff}
#demo .send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#demo .newchat[data-service="ChatGPT"] .nc-body{background:#fff}
#demo .newchat[data-service="ChatGPT"] .composer{border-radius:26px}
#demo .newchat[data-service="ChatGPT"] .send{border-radius:50%;background:#0d0d0d}
/* The status KeepFlow shows in the new tab (consumer/handoff.js note()). */
#demo .kf-note{position:absolute;right:14px;bottom:14px;display:flex;align-items:flex-start;gap:8px;max-width:330px;padding:11px 15px;border-radius:12px;background:#20231f;color:#fff;font:500 12.5px/1.45 var(--ui);box-shadow:0 14px 32px -14px rgba(0,0,0,.45);transition:opacity .4s var(--ease) .35s,transform .5s var(--ease) .35s}
#demo .kf-note .dot{margin-top:5px;width:7px;height:7px;background:#7fc39b;box-shadow:none}
#demo .newchat .composer{transition:opacity .4s var(--ease) .15s,transform .5s var(--ease) .15s}
#demo .newchat[data-off] .composer,#demo .newchat[data-off] .kf-note{opacity:0;transform:translateY(8px);transition-delay:0s}
#demo .stage-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(205,210,225,.8)}
#demo .caption{font-size:16px;line-height:1.55;color:var(--ink);max-width:46em;min-height:3.1em;text-wrap:pretty}
#demo .caption b{font-weight:600}
#demo .stage-tools{display:flex;align-items:center;gap:14px;flex:none}
#demo .play{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);background:rgba(255,255,255,.7);font:600 13px var(--ui);color:var(--ink);cursor:pointer;transition:background .2s,transform .16s var(--ease)}
#demo .play:active{transform:scale(.97)}
@media(hover:hover){#demo .play:hover{background:#fff}}
#demo .play svg{width:14px;height:14px;fill:currentColor}
#demo .next{display:none}



#demo .btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:99px;border:1px solid var(--btn);background:var(--btn);color:#fff;font:600 15px var(--ui);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
 box-shadow:0 2px 4px rgba(29,31,50,.12),0 10px 24px rgba(29,31,50,.13),inset 0 1px rgba(255,255,255,.14);transition:transform .16s var(--ease),background .2s,box-shadow .22s}
#demo .btn:active{transform:scale(.97)}
#demo .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){#demo .btn:hover{background:var(--btn-h);box-shadow:0 4px 8px rgba(29,31,50,.12),0 14px 30px rgba(29,31,50,.16),inset 0 1px rgba(255,255,255,.14)}}
#demo .btn.quiet{background:transparent;color:var(--ink);border-color:transparent;box-shadow:none}
@media(hover:hover){#demo .btn.quiet:hover{background:rgba(255,255,255,.7);border-color:var(--line)}}
#demo .btn.small{min-height:40px;padding:0 18px;font-size:13.5px;box-shadow:0 2px 4px rgba(29,31,50,.1)}
#demo .btn[aria-disabled=true]{opacity:.45;pointer-events:none}
#demo .btn .lbl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;pointer-events:none}
#demo .wv{position:absolute;z-index:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.32) 0%,transparent 72%)}
#demo .btn.quiet .wv{background:radial-gradient(circle,rgba(36,38,56,.1) 0%,transparent 72%)}