.editor-panel { position:relative }
.editor-surface { position:relative;flex:1;min-height:430px;overflow:hidden;background:transparent }
.editor-panel textarea { display:block;width:100%;height:100%;resize:none;border:0;outline:0;background:transparent;color:var(--text);caret-color:var(--text);box-sizing:border-box;padding:30px 30px;scrollbar-gutter:stable;font:inherit;font-size:17px;line-height:1.9;letter-spacing:.01em;tab-size:8;word-break:break-word;overflow-wrap:break-word }
.editor-panel textarea::placeholder { color:var(--muted);opacity:.7 }
/* Highlight overlay: absolute-positioned divs whose coordinates come from getClientRects() on a hidden mirror */
.editor-highlight-overlay { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none }
.editor-highlight { position:absolute;background-color:color-mix(in srgb,#ffb74d 55%,transparent);border-radius:2px }
.editor-highlight.is-current { background-color:color-mix(in srgb,#ff7043 80%,transparent);outline:1px solid rgba(255,87,34,.55);outline-offset:0 }
:root[data-theme="dark"] .editor-highlight { background-color:color-mix(in srgb,#ffb74d 28%,transparent) }
:root[data-theme="dark"] .editor-highlight.is-current { background-color:color-mix(in srgb,#ff8a65 55%,transparent);outline-color:rgba(255,138,101,.7) }
:root { color-scheme: light; --bg:#f5f3ef; --bg-deep:#ebe7df; --card:#fffdfa; --card-soft:#faf8f4; --text:#252524; --muted:#8b8984; --line:#e9e5de; --accent:#6572c7; --accent-soft:#eef0ff; --green:#4e9b7b; --shadow:0 18px 55px rgba(75,65,50,.08); --radius:22px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Noto Sans SC",sans-serif; --mono:"SFMono-Regular",Consolas,monospace }
:root[data-theme="dark"] { color-scheme:dark; --bg:#1d1e24; --bg-deep:#17181d; --card:#282930; --card-soft:#24252b; --text:#f1f0ec; --muted:#a1a0a0; --line:#3b3c44; --accent:#9ca7ff; --accent-soft:#30334b; --green:#79c3a1; --shadow:0 18px 55px rgba(0,0,0,.18) }
* { box-sizing:border-box } body { margin:0; min-height:100vh; color:var(--text); font-family:var(--font); background:radial-gradient(circle at 4% 0%,rgba(218,211,193,.38),transparent 34%),var(--bg); transition:background .25s,color .25s } button,input,textarea { font:inherit } button { cursor:pointer } .ambient { position:fixed; pointer-events:none; filter:blur(60px); opacity:.35; border-radius:50%; z-index:-1 }.ambient-one { width:260px;height:260px;background:#dfe4ff;top:9%;right:8% }.ambient-two { width:220px;height:220px;background:#f3ddca;bottom:4%;left:3% }
.topbar { height:72px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(10px); position:sticky;top:0;z-index:5 }.back-link,.brand { display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:14px }.back-link { color:var(--muted);transition:color .2s }.back-link:hover { color:var(--accent) }.brand { position:absolute;left:50%;transform:translateX(-50%);font-weight:700;letter-spacing:.01em }.brand-mark { color:var(--accent);font-size:20px }.beta,.label,.eyebrow { font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:700 }.beta { border:1px solid var(--line);border-radius:99px;padding:4px 7px;font-size:8px }.top-actions,.toolbar-actions { display:flex;align-items:center;gap:8px }.icon-button,.add-button,.modal-close { border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:10px;width:36px;height:36px }.icon-button:hover,.add-button:hover { color:var(--accent);border-color:var(--accent) }
.app-shell { width:min(1480px,calc(100% - 40px));margin:0 auto;padding:58px 0 45px }.intro-row { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px }.eyebrow { color:var(--accent);margin:0 0 12px }.intro-row h1 { font-size:clamp(32px,4vw,52px);line-height:1.12;letter-spacing:-.05em;margin:0;font-weight:700 }.intro-row h1 em { color:var(--accent);font-style:normal }.intro-copy { color:var(--muted);font-size:15px;margin:15px 0 0 }.privacy-note { color:var(--green);display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;padding-bottom:4px }.privacy-note small { color:var(--muted) }.privacy-dot,.status-dot { width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-top:5px;box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent) }
.workspace { display:grid;grid-template-columns:220px minmax(0,1fr) 310px;gap:16px;align-items:stretch }.card { background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow) }.documents-panel,.stats-panel { padding:24px }.editor-panel { min-height:575px;display:flex;flex-direction:column;padding:0;overflow:hidden }.panel-heading,.stats-heading,.editor-toolbar,.panel-footer,.trend-heading,.editor-footer { display:flex;align-items:center;justify-content:space-between }.panel-heading h2,.stats-heading h2 { font-size:18px;margin:8px 0 0;letter-spacing:-.03em }.add-button { font-size:20px;line-height:1 }.document-list { display:flex;flex-direction:column;gap:5px;margin-top:28px;min-height:390px }.document-item { display:flex;gap:10px;text-align:left;align-items:center;border:0;border-radius:12px;background:transparent;color:var(--muted);padding:12px 10px;width:100%;transition:background .2s,color .2s }.document-item:hover { background:var(--card-soft);color:var(--text) }.document-item.is-active { color:var(--accent);background:var(--accent-soft) }.document-item-icon { width:17px }.document-item-copy { min-width:0;display:flex;flex-direction:column;gap:4px }.document-item-copy strong { font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }.document-item-copy small { font-size:10px;color:var(--muted) }.footer-button { border:0;background:transparent;color:var(--muted);font-size:10px;padding:0 }.footer-button:hover { color:var(--accent) }.panel-footer { color:var(--muted);font-size:10px;border-top:1px solid var(--line);padding-top:16px }.session-status { display:flex;gap:8px;align-items:center }.session-status .status-dot { width:6px;height:6px;margin:0;box-shadow:none }
.editor-toolbar { border-bottom:1px solid var(--line);padding:16px 22px }.document-title-wrap { display:flex;align-items:center;gap:9px;min-width:0 }.document-icon { color:var(--accent) }.document-title { color:var(--text);background:transparent;border:0;outline:0;font-weight:600;font-size:14px;width:180px;min-width:0 }.format-select { border:1px solid var(--line);background:var(--card-soft);color:var(--muted);border-radius:8px;padding:8px 5px;font-size:10px;outline:0 }.text-button { color:var(--muted);border:0;background:transparent;padding:8px;font-size:12px }.text-button:hover { color:var(--accent) }.primary-button { border:0;background:var(--accent);color:white;padding:10px 14px;border-radius:10px;font-size:12px;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 25%,transparent) }.primary-button:hover { filter:brightness(1.08) }.editor-panel { position:relative }
.highlight-nav { display:inline-flex;align-items:center;gap:6px;margin-left:14px;color:var(--muted);font-size:10px }
.highlight-nav[hidden] { display:none }
.highlight-label { font-family:var(--mono);font-size:10px;letter-spacing:.04em }
.highlight-step,.highlight-clear { border:1px solid var(--line);background:var(--card-soft);color:var(--muted);width:22px;height:22px;border-radius:7px;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0 }
.highlight-step:hover,.highlight-clear:hover { color:var(--accent);border-color:var(--accent) }
.highlight-clear { font-size:14px }.editor-footer { padding:14px 22px;color:var(--muted);font-size:10px;border-top:1px solid var(--line) }.editor-footer i { display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--line);margin:0 8px 2px }.editor-footer kbd,.shortcut-row kbd { color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 5px;font-family:var(--mono);font-size:10px }
.stats-heading { margin-bottom:26px }.stats-actions { display:flex;gap:5px }.view-toggle { border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:7px;font-size:10px;padding:6px 9px }.view-toggle:hover { color:var(--accent);border-color:var(--accent) }.hero-stat { padding:19px 0 22px;border-bottom:1px solid var(--line) }.hero-stat span { font-size:12px;color:var(--muted) }.hero-stat strong { display:block;font-family:var(--mono);font-size:48px;letter-spacing:-.07em;margin:8px 0 5px;color:var(--text) }.hero-stat small { color:var(--accent);letter-spacing:.14em;font-size:9px;font-weight:700 }.quick-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:19px 0;border-bottom:1px solid var(--line) }.quick-stats div { display:flex;flex-direction:column;gap:5px }.quick-stats strong { font-family:var(--mono);font-size:17px }.quick-stats span,.stat-row span { color:var(--muted);font-size:10px }.detail-stats { padding:12px 0;border-bottom:1px solid var(--line) }.stat-row { display:flex;justify-content:space-between;align-items:center;padding:7px 0 }.stat-row strong { font-family:var(--mono);font-size:12px }.trend-section { padding-top:22px }.trend-heading { font-size:11px;color:var(--muted);margin-bottom:10px }.trend-delta { color:var(--muted);font-family:var(--mono);font-size:10px }.trend-delta.is-positive { color:var(--green) }.trend-section svg { width:100%;height:72px;overflow:visible }.trend-line { fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round }.trend-area { fill:var(--accent);opacity:.1 }.trend-labels { display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:2px }.tip { text-align:center;color:var(--muted);font-size:11px;margin:24px 0 0 }.tip span { color:var(--accent);margin-right:7px }
.modal-backdrop { position:fixed;inset:0;background:rgba(30,30,30,.25);display:grid;place-items:center;padding:20px;z-index:10 }.modal-backdrop[hidden],.detail-stats[hidden] { display:none }.modal { position:relative;padding:28px;width:min(390px,100%) }.modal h2 { margin:8px 0 20px;font-size:22px }.modal-close { position:absolute;right:20px;top:20px;border:0;background:transparent;font-size:22px }.shortcut-row { display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:13px 0;font-size:13px }.toast { position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--text);color:var(--card);padding:10px 15px;border-radius:9px;font-size:12px;transition:opacity .2s,transform .2s;z-index:20 }.toast.is-visible { opacity:1;transform:translate(-50%,0) }
@media (max-width:1100px) { .workspace { grid-template-columns:190px minmax(0,1fr) }.stats-panel { grid-column:1 / -1;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:24px;align-items:start }.stats-heading,.hero-stat,.quick-stats,.detail-stats,.trend-section { margin:0;padding:0;border:0 }.stats-heading { display:block }.hero-stat { border-left:1px solid var(--line);padding-left:24px }.trend-section { border-left:1px solid var(--line);padding-left:24px } }
@media (max-width:1100px) { .wordcloud-panel { padding:22px 24px } }
@media (max-width:700px) { .wordbar { height:60px;padding:0 18px }.brand { position:static;transform:none;font-size:13px }.beta { display:none }.back-link span:last-child { display:none }.app-shell { width:calc(100% - 28px);padding:34px 0 }.intro-row { display:block;margin-bottom:24px }.intro-row h1 { font-size:34px }.intro-copy { font-size:13px;line-height:1.7 }.privacy-note { margin-top:20px }.workspace { display:flex;flex-direction:column }.documents-panel { order:2;padding:18px }.editor-panel { order:1;min-height:590px }.stats-panel { order:3;display:block;padding:20px }.document-list { min-height:0;flex-direction:row;overflow:auto;margin-top:16px;padding-bottom:3px }.document-item { min-width:170px }.panel-footer { display:none }.editor-toolbar { padding:13px 15px }.toolbar-actions { gap:0 }.text-button { font-size:10px;padding:8px 4px } .wordcloud-tabs .tab { padding:5px 9px;font-size:10px } .wordcloud-heading h2 { font-size:16px }.text-button:nth-of-type(3) { display:none }.primary-button { padding:9px 11px;font-size:11px }.editor-panel textarea { padding:24px 18px;font-size:16px }.editor-footer { padding:12px 15px }.stats-heading { margin-bottom:20px }.hero-stat strong { font-size:44px }.quick-stats { padding:18px 0 }.detail-stats { padding:11px 0 }.trend-section { padding-top:20px } }
@media (prefers-reduced-motion:reduce) { * { transition-duration:.01ms !important } }
.wordcloud-panel { grid-column:1 / -1;padding:24px 28px 22px;display:flex;flex-direction:column;gap:18px }
.wordcloud-heading { display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px }
.wordcloud-heading h2 { font-size:18px;margin:8px 0 0;letter-spacing:-.03em }
.wordcloud-tabs { display:inline-flex;background:var(--card-soft);border:1px solid var(--line);border-radius:99px;padding:3px;gap:2px }
.wordcloud-tabs .tab { border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:99px;font-size:11px;transition:background .2s,color .2s }
.wordcloud-tabs .tab:hover { color:var(--text) }
.wordcloud-tabs .tab.is-active { background:var(--accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent) }
.wordcloud-empty { margin:0;color:var(--muted);font-size:12px;padding:6px 0 2px;line-height:1.6 }
.wordcloud { display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:6px 0 4px;min-height:54px }
.wordcloud[hidden] { display:none }
.cloud-chip { display:inline-flex;align-items:baseline;gap:5px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--card-soft);color:var(--text);font-weight:var(--weight);font-size:calc(12px * var(--scale));line-height:1.2;opacity:var(--opacity);transition:transform .15s,background .2s,border-color .2s,color .2s }
.cloud-chip:hover { background:var(--accent-soft);border-color:var(--accent);color:var(--accent);transform:translateY(-2px) }
.cloud-chip:focus-visible { outline:2px solid var(--accent);outline-offset:2px }
.cloud-word { letter-spacing:.01em }
.cloud-count { font-family:var(--mono);font-size:.62em;color:var(--muted) }
.cloud-chip:hover .cloud-count { color:inherit }
.wordcloud-footer { display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;border-top:1px solid var(--line);padding-top:14px }
.wordcloud-hint { letter-spacing:.04em }
