@font-face{font-family:'Betania Patmos';src:url('assets/fonts/BetaniaPatmos-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Little Document — Craft Docs design system (via Refero)
   "Digital Scrapbook": warm paper canvas, soft pastels, pill CTAs, deep diffused shadows. */

:root{
  /* Neutrals (from Craft design system) */
  --ink:#030302;
  --ink-soft:#2b2b29;
  --graphite:#41413f;
  --stone:#8f8b87;
  --ash:#e1e1e1;
  --cloud:#efefef;
  --linen:#f7f7f7;
  --canvas:#fff3e7;         /* warm paper base */
  --warm-soft:#fbf5ec; --menu-soft:#fdf9f2;
  --surface:#ffffff;
  --page:#ffffff;
  --soft:#faf5ee;
  --table:#ffffff;
  --table-head:#faf5ee;
  --muted:#8f8b87;
  --line:#e8e2d8;
  /* Brand pastels */
  --mint:#9bd8a9;
  --marigold:#fde99b;
  --periwinkle:#b8caf5;
  --sky:#9ed4ef;
  --mint-soft:#edf6ef;
  --marigold-soft:#fdf5df;
  --peri-soft:#eef3fc;
  --peri-ink:#55688f;
  /* Small accents */
  --papaya:#ff4500;
  --azure:#0087ff;
  --link:#006fdc;
  /* Radii */
  --radius-card:20px;
  --radius-md:14px;
  --radius-sm:10px;
  /* Deep, multi-layered shadows */
  --shadow-sm:0 2px 6px rgba(3,3,2,.05);
  --shadow-float:rgba(3,3,2,.01) 0 50px 40px,rgba(3,3,2,.02) 0 50px 40px,rgba(3,3,2,.05) 0 20px 40px,rgba(3,3,2,.08) 0 3px 10px;
  --shadow-hover:0 4px 12px rgba(3,3,2,.035),0 1px 3px rgba(3,3,2,.025);
  --shadow-cta:rgba(3,3,2,.15) 0 4px 12px;
}

*{box-sizing:border-box}
body{font-family:Inter,'Noto Sans SC',-apple-system,system-ui,sans-serif;color:var(--ink-soft);font-size:14px;line-height:var(--ui-line-height);background:var(--canvas)}
button,input,textarea,select{font:inherit}
button{cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--periwinkle);box-shadow:0 0 0 3px var(--peri-soft)}
a{color:inherit}
button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
button svg,.icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}

/* Buttons — Craft pill CTAs */
.btn{border:1.5px solid var(--ash);background:var(--surface);border-radius:9999px;padding:10px 20px;color:var(--ink);font-size:13px;font-weight:500}
.btn:hover{border-color:var(--stone);box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.primary{background:var(--ink);color:#ffffff;border-color:var(--ink);box-shadow:var(--shadow-cta)}
.primary:hover{background:#1c1c1a;border-color:#1c1c1a;color:#ffffff;box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.icon-btn{border:0;background:transparent;color:#97928b;width:32px;height:32px;border-radius:var(--radius-sm)}
.icon-btn:hover,.icon-btn.active{background:rgba(3,3,2,.06);color:var(--ink)}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;font-family:'Betania Patmos',cursive;font-size:22px;font-weight:400;letter-spacing:0;text-decoration:none;color:var(--ink)}
.brand-mark{width:30px;height:30px;display:block;filter:none}

/* Home layout */
.home{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.sidebar{background:var(--menu-soft);border-right:1px solid var(--line);padding:30px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:236px}
.sidebar .brand{font-size:22px;padding:0 7px;margin-bottom:36px}
.sidebar .brand-mark{width:28px;height:28px}
.nav-label{color:var(--stone);font-size:10px;letter-spacing:1.7px;margin:27px 14px 12px;display:flex;align-items:center}
.folder-add{margin-left:auto;width:20px;height:20px;border:0;background:none;color:var(--stone);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.folder-add:hover{background:rgba(3,3,2,.06);color:var(--ink)}
.folder-add .icon{width:12px;height:12px}
.side-nav{display:flex;align-items:center;gap:11px;border:0;width:100%;text-align:left;background:transparent;padding:12px 14px;color:#7d7973;font-size:13px;border-radius:var(--radius-md);margin-bottom:5px;justify-content:flex-start}
.side-nav:hover{background:rgba(3,3,2,.045);color:var(--ink)}
.side-nav.selected{background:rgba(3,3,2,.07);color:var(--ink);font-weight:600}
.side-nav .count{margin-left:auto;font-size:11px;background:#ffffff;color:var(--peri-ink);min-width:21px;height:20px;padding:0 6px;border-radius:9999px;display:grid;place-items:center;font-weight:600}
.side-nav[data-action="home"]>.icon{color:#5f7fc0}
.side-nav[data-action="help"]>.icon{color:#d99a2b}
.sidebar-bottom{margin-top:auto;padding:20px 10px 0;border-top:1px solid var(--line);color:#b3aa9d;line-height:1.8;font-size:11px}

/* New document — ink pill CTA */
.sidebar .new-document-button{background:var(--ink);color:#ffffff;justify-content:center;border:1px solid var(--ink);min-height:42px;margin-bottom:18px;border-radius:9999px;box-shadow:var(--shadow-cta)}
.sidebar .new-document-button>.icon{color:#ffffff}
.sidebar .new-document-button:hover{background:#1c1c1a;border-color:#1c1c1a;color:#ffffff;transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.sidebar .new-document-button:active{transform:translateY(0)}

.home-main{grid-column:2;padding:40px 5.3% 0;background:var(--canvas);min-width:0}
.home-top{display:flex;align-items:center;justify-content:space-between;height:84px;border-bottom:1px solid var(--line);font-size:12px;color:#96918a}
.home-top .right{display:flex;align-items:center;gap:13px}
.avatar{width:29px;height:29px;display:grid;place-items:center;background:linear-gradient(135deg,var(--periwinkle),var(--mint));color:var(--ink);border-radius:50%;font-size:11px;font-weight:600}

/* Hero — sky-to-cream gradient with organic pastel blobs */
.hero{position:relative;margin:0 0 8px;padding:68px 60px 64px;border-radius:32px;overflow:hidden;background:linear-gradient(115deg,#d9edf8 0%,#eaf6fc 42%,#fdf0e3 100%)}
.hero>*{position:relative;z-index:1}
.hero .hero-blob{position:absolute;z-index:0;pointer-events:none;will-change:transform;contain:layout paint}
.hero-blob-blue{width:320px;height:320px;background:var(--periwinkle);opacity:.5;top:-120px;left:3%}
.hero-blob-green{width:370px;height:370px;background:var(--mint);opacity:.45;bottom:-185px;right:8%}
.eyebrow-app{font-size:10px;letter-spacing:2px;color:var(--graphite);display:flex;align-items:center;gap:9px;margin-bottom:19px;font-weight:600}
.eyebrow-app:before{content:'';width:22px;height:1px;background:var(--papaya)}
.hero h1{font-family:Newsreader,'Noto Serif SC',serif;font-size:46px;font-weight:400;letter-spacing:-.03em;margin:0 0 16px;line-height:1.3;color:var(--ink)}
.hero h1 span{background:linear-gradient(180deg,transparent 60%,var(--marigold) 60%,var(--marigold) 94%,transparent 94%);padding:0 2px}
.hero p{font-size:13px;color:#6f6a63;line-height:1.9;margin:0}
.hero-art{position:absolute;right:64px;top:50%;width:170px;height:125px;transform:translateY(-50%) rotate(-8deg);z-index:1}
.paper-art{position:absolute;background:#ffffff;border:1px solid #ece7dd;border-radius:8px;width:95px;height:117px;left:32px;box-shadow:var(--shadow-float);padding:22px 15px}
.paper-art:before{content:'Aa';font:32px Newsreader,serif;color:var(--ink)}
.paper-art:after{content:'';display:block;margin-top:12px;height:22px;background:repeating-linear-gradient(to bottom,#e5e0d6 0,#e5e0d6 1px,transparent 1px,transparent 7px)}
.paper-art.back{transform:rotate(19deg);background:var(--peri-soft);border-color:#dde5f4;left:51px;top:0}
.paper-art.back:before{color:#8ba3cd}
.art-star{position:absolute;color:var(--papaya);font-size:38px;right:0;top:24px;transform:rotate(8deg)}

/* Drop zone */
.drop-zone{position:relative;border:1.5px dashed #e6d3ae;border-radius:28px;background:linear-gradient(180deg,#fffdf8 0%,#fff9ee 100%);min-height:216px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:background .2s,border-color .2s;outline:none;margin-top:26px}
.drop-zone:hover,.drop-zone.dragging{background:linear-gradient(180deg,#f4f8fd 0%,#eef3fc 100%);border-color:var(--periwinkle)}
.drop-zone:focus-visible{box-shadow:0 0 0 3px var(--peri-soft)}
.upload-symbol{height:54px;width:54px;display:grid;place-items:center;background:linear-gradient(135deg,#fdf3d0,#fbe6a8);color:#8a6d1f;border-radius:56% 44% 62% 38%/48% 58% 42% 52%;margin-bottom:2px;box-shadow:var(--shadow-sm)}
.upload-symbol svg{width:23px;height:23px}
.drop-zone strong{font-size:14px;font-weight:500;color:var(--ink)}
.drop-zone strong span{color:var(--link);text-decoration:underline;text-underline-offset:4px}
.drop-zone small{color:#a09a91;font-size:11px}
.text-button{border:0;background:none;color:#8f8a82;font-size:11px;padding:5px 0}
.text-button:hover{color:var(--ink)}

/* Section heading + search */
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-top:46px;margin-bottom:22px}
.section-heading h2{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0;display:flex;gap:10px;align-items:center;color:var(--ink)}
.section-heading h2 small{font-size:10px;font-weight:600;color:var(--peri-ink);background:#ffffff;border-radius:9999px;padding:4px 10px}
.view-controls{display:flex;gap:5px}
.view-controls button{width:30px;height:28px}
.search-wrap{display:flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--ash);border-radius:9999px;padding:0 14px}
.search-wrap:focus-within{border-color:var(--periwinkle);box-shadow:0 0 0 3px var(--peri-soft)}
.search-wrap .icon{width:14px;color:var(--stone)}
.search{background:transparent;border:0;padding:9px 4px;width:160px;color:var(--ink);outline:none}
.search:focus-visible{box-shadow:none}

/* Document cards — floating white cards with pastel thumbs */
.docs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.doc-card{border:1px solid #e9e4da;border-radius:var(--radius-card);overflow:hidden;background:var(--surface);position:relative;transition:transform .18s,border-color .18s,box-shadow .18s}
.doc-card:hover{transform:translateY(-4px);border-color:#ddd6c8;box-shadow:var(--shadow-hover)}
.doc-open{border:0;background:none;padding:0;text-align:left;display:block;width:100%;color:inherit}
.doc-thumb{height:150px;background:linear-gradient(160deg,var(--peri-soft),#fbfdff);padding:24px 30px 0;overflow:hidden}
.doc-thumb.t1{background:linear-gradient(160deg,var(--mint-soft),#fbfefc)}
.doc-thumb.t2{background:linear-gradient(160deg,var(--marigold-soft),#fffdf6)}
.mini-page{background:#ffffff;width:100%;max-width:215px;height:190px;padding:19px 22px;box-shadow:0 8px 24px rgba(3,3,2,.08);margin:auto;border-radius:8px 8px 0 0}
.mini-label{font-size:5px;letter-spacing:1.2px;color:#8b98ac}
.t1 .mini-label{color:#7ba184}
.t2 .mini-label{color:#b59a5f}
.mini-title{font-size:13px;font-weight:600;line-height:1.5;margin:8px 0;color:var(--ink)}
.mini-rule{border-top:1px solid #e8e3d8;margin:8px 0}
.mini-lines{height:37px;background:repeating-linear-gradient(to bottom,#e8e4da 0,#e8e4da 1px,transparent 1px,transparent 6px)}
.mini-blocks{display:flex;gap:5px;margin-top:7px}
.mini-blocks i{height:25px;flex:1;background:var(--peri-soft);border-radius:5px}
.mini-blocks i:nth-child(2){background:var(--mint-soft)}
.mini-blocks i:nth-child(3){background:var(--marigold-soft)}
.doc-info{padding:17px 18px 18px}
.doc-info h3{font-size:12px;line-height:1.6;font-weight:500;margin:0 0 10px;padding-right:10px;color:var(--ink)}
.doc-meta{display:flex;align-items:center;gap:7px;color:#a09a91;font-size:10px}
.doc-meta>.icon{color:#8ba3cd;width:15px;height:15px}
.doc-tag{color:#8a6d1f;background:var(--marigold-soft);padding:3px 9px;border-radius:9999px;font-size:9px;margin-left:auto;font-weight:600}
.doc-delete{position:absolute;bottom:44px;right:10px;opacity:0;background:var(--surface);box-shadow:var(--shadow-sm)}
.doc-move{position:absolute;bottom:44px;right:42px;opacity:0;background:var(--surface);box-shadow:var(--shadow-sm)}
.doc-delete:hover{background:#ffe9e0;color:var(--papaya)}
.doc-card:hover .doc-delete,.doc-delete:focus-visible,.doc-card:hover .doc-move,.doc-move:focus-visible{opacity:1}
.home-empty{padding:44px;border:1.5px dashed #e6d3ae;border-radius:24px;color:var(--muted);grid-column:1/-1;text-align:center;background:linear-gradient(180deg,#fffdf8,#fff9ee)}
.home-footer{margin:44px 0 24px;display:flex;align-items:center;justify-content:space-between;color:#b0aaa1;font-size:10px}
.footer-flower{font-size:17px;color:var(--papaya);margin-right:5px}

/* List view — slim rows with a small pastel page tile */
.list-view{grid-template-columns:1fr;gap:12px}
.list-view .doc-card{border-radius:16px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.list-view .doc-card:hover{background:rgba(255,255,255,.82)}
.list-view .doc-open{display:flex;align-items:center}
.list-view .doc-thumb{height:auto;align-self:stretch;width:76px;flex-shrink:0;padding:0;display:grid;place-items:center;background:none}
.list-view .mini-page{position:relative;width:34px;height:44px;max-width:none;padding:0;border-radius:7px 7px 7px 2px;border:1px solid #ece7dd;background:var(--peri-soft);box-shadow:var(--shadow-sm)}
.list-view .doc-thumb.t1 .mini-page{background:var(--mint-soft)}
.list-view .doc-thumb.t2 .mini-page{background:var(--marigold-soft)}
.list-view .mini-page>*{display:none}
.list-view .mini-page:after{content:'';position:absolute;left:8px;right:8px;top:11px;height:22px;background:repeating-linear-gradient(to bottom,rgba(65,65,63,.28) 0,rgba(65,65,63,.28) 1.5px,transparent 1.5px,transparent 8px)}
.list-view .doc-info{flex:1;padding:15px 18px}
.list-view .doc-info h3{font-size:14px;margin-bottom:6px;padding-right:0}
.list-view .doc-delete{bottom:auto;top:50%;transform:translateY(-50%);right:14px}
.list-view .doc-move{bottom:auto;top:50%;transform:translateY(-50%);right:46px}
.templates-intro{padding:40px 0 0;color:var(--muted)}

/* ============ Editor shell ============ */
.editor-app{height:100vh;display:flex;flex-direction:column;background:var(--canvas)}
.editor-top{height:61px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:var(--menu-soft);padding:0 22px;gap:16px;flex-shrink:0;position:relative;z-index:31}
.editor-top .brand{font-size:19px}
.editor-top .brand-mark{width:24px;height:24px}
.breadcrumbs{display:flex;gap:12px;align-items:center;font-size:12px;color:#a09a91;min-width:0}
.breadcrumbs .doc-name{max-width:300px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--graphite)}
.editor-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.save-status{font-size:10px;color:#a09a91;margin-right:10px;white-space:nowrap}
.editor-actions .btn{padding:7px 14px;font-size:11px}
.editor-toolbar{height:49px;min-height:49px;max-height:49px;box-sizing:border-box;border-bottom:1px solid var(--line);display:flex;gap:4px;align-items:center;justify-content:center;background:var(--menu-soft);flex-shrink:0;padding:5px 16px;overflow-x:auto;position:relative;z-index:30}
[hidden]{display:none!important}
.toolbar-divider{height:20px;width:1px;background:var(--line);margin:0 8px;flex-shrink:0}
.editor-toolbar .icon-btn{font-size:15px;flex-shrink:0}
.format-select{border:1.5px solid var(--ash);background:var(--surface);color:var(--graphite);padding:5px 8px;font-size:11px;width:95px;border-radius:9999px}
.editor-toolbar [data-action="image"]>.icon,.editor-toolbar [data-action="table"]>.icon{color:#5f7fc0}
.editor-toolbar [data-action="video"]>.icon{color:#7cb587}
.editor-toolbar [data-action="columns"]>.icon{color:#a087ac}
.editor-toolbar [data-action="comment-selection"]>.icon,.editor-actions [data-action="comments"]>.icon{color:#5f7fc0}
.editor-toolbar [data-action="highlight"]>.icon{color:#d99a2b}

/* Workbench */
.workbench{display:flex;flex:1;min-height:0}
.outline-panel{width:224px;flex-shrink:0;border-right:1px solid var(--line);padding:26px 15px;overflow:auto;background:var(--menu-soft)}
.panel-label{font-size:10px;letter-spacing:1.5px;color:#9d9d9d;display:flex;justify-content:space-between;align-items:center;margin:0 10px 24px}
.outline-filter{display:flex;gap:4px;margin:-14px 10px 18px}
.outline-filter button{flex:1;border:1px solid var(--line);background:transparent;border-radius:7px;font-size:9px;letter-spacing:.5px;color:#b3ada4;padding:3px 0;transition:.15s}
.outline-filter button.on{background:transparent;border-color:var(--ink);color:var(--ink)}
.outline-item{display:block;border:0;background:none;text-align:left;color:var(--muted);font-size:11px;line-height:1.5;padding:3px 0 3px 11px;margin:0;width:100%;border-left:1px solid var(--line);border-radius:0;justify-content:flex-start;word-break:break-word}
.outline-item:hover{background:none;color:var(--ink)}
.outline-item.level-1{font-weight:700;color:var(--ink);font-size:12px;line-height:1.4;padding:0;margin:0 0 4px;border-left:0}
.outline-item.level-1:not(:first-child){margin-top:12px}
.canvas{flex:1;min-width:0;overflow:auto;padding:36px 42px 70px;scroll-behavior:smooth;position:relative}
.document-page{max-width:940px;margin:0 auto;position:relative;background:var(--surface);min-height:1080px;padding:64px 72px 90px;border:1px solid #ece7dd;border-radius:8px}
.document-eyebrow{font-size:9px;letter-spacing:2px;color:#aaa49b;margin-bottom:25px;display:flex;align-items:center;gap:9px}
.document-eyebrow:before{content:'';height:1px;width:21px;background:var(--papaya)}
.document-title{font-family:Newsreader,'Noto Serif SC',serif;font-size:38px;font-weight:400;line-height:1.4;letter-spacing:-.03em;margin:0 0 23px;outline:none;word-break:break-word;color:var(--ink)}
.document-meta{font-size:10px;color:#aaa49b;display:flex;gap:11px;margin-bottom:39px;padding-bottom:26px;position:relative}
.document-meta::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:7px;background-image:radial-gradient(circle at 1.5px 1.5px,#dcd7cd 1px,transparent 1.6px),radial-gradient(circle at 1.5px 5.5px,#dcd7cd 1px,transparent 1.6px);background-size:5px 7px}

/* Article content */
.article-content{font-size:14px;line-height:1.9;min-height:450px;outline:none;overflow-wrap:anywhere;counter-reset:chapter}
.article-content h2{font-family:Newsreader,'Noto Serif SC',serif;font-size:26px;font-weight:400;display:block;position:relative;padding-left:38px;overflow:hidden;margin:44px 0 26px;line-height:1.5;counter-increment:chapter;scroll-margin-top:25px;color:var(--ink);letter-spacing:-.01em}
.article-content h2:first-child{margin-top:0}
.article-content h2:before{content:counter(chapter,decimal-leading-zero);font-family:Newsreader,serif;color:var(--papaya);font-size:23px;position:absolute;left:0;top:0}
.article-content h2:after{content:'';display:inline-block;vertical-align:middle;width:100%;margin-left:13px;margin-right:-100%;height:1px;background:var(--line)}
.article-content h3{font-size:19px;font-weight:700;margin:30px 0 15px;scroll-margin-top:25px;color:var(--ink);letter-spacing:-.01em}
.article-content h4{font-size:16px;margin:24px 0 12px;color:var(--ink)}
.article-content p{margin:0 0 20px}
.article-content ul,.article-content ol{padding-left:24px;margin:12px 0 24px}
.article-content ul>li::marker{color:#c9a227}
.article-content blockquote{margin:25px 0;padding:18px 24px;background:var(--soft);border-left:3px solid #e1d5c2;border-radius:0 14px 14px 0;color:#6f6a63;font-size:13px}
.article-content blockquote p:last-child{margin:0}
.article-content table{width:100%;border-collapse:separate;border-spacing:0;margin:25px 0;font-size:12px;table-layout:fixed;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.article-content th,.article-content td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px;min-width:65px;vertical-align:top;overflow-wrap:anywhere}
.article-content tr>*:last-child{border-right:0}
.article-content tbody tr:last-child>*{border-bottom:0}
.article-content th{background:var(--table-head);color:var(--graphite);font-weight:600}
.article-content td:focus,.article-content th:focus{outline:2px solid var(--periwinkle);outline-offset:-2px}
.article-content img,.article-content video{display:block;max-width:100%;height:auto;border-radius:8px;margin:24px 0}
.article-content .columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;align-items:start}
.article-content .column{min-width:0}
.article-content .columns img,.article-content .columns video{margin:10px 0}
/* Column paragraphs follow the normal line rhythm; an empty paragraph adds a blank line. */
.article-content .columns p{margin-bottom:0}
/* Paint editor affordances outside the editable text's inherited background.
   Chromium otherwise serializes the hover color into spans when deleting a line. */
#editor[contenteditable="true"] .column{position:relative;isolation:isolate;border-radius:8px}
#editor[contenteditable="true"] .column::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;transition:background .2s,box-shadow .2s}
#editor[contenteditable="true"] .columns:hover>.column::before{background:rgba(3,3,2,.04);box-shadow:0 0 0 3px rgba(3,3,2,.025)}
#editor[contenteditable="true"] .columns>.column:hover::before{background:rgba(3,3,2,.06);box-shadow:0 0 0 3px rgba(3,3,2,.035)}
.article-content video{background:#1c1c1a;width:100%}
.article-content pre{white-space:pre-wrap;background:var(--soft);border:1px solid var(--line);padding:18px;border-radius:14px}
.article-content code{background:#f2ede4;border-radius:5px;padding:2px 5px;font-size:12px}
.article-content pre code{padding:0;background:none}
.article-content hr{border:0;border-top:1px solid var(--line);margin:32px 0}
/* Native deletion can add spans with a white/inherited background. Only
   semantic highlights get the theme color; arbitrary styled spans keep theirs. */
.article-content mark{background:var(--marigold);color:inherit;border-radius:3px;padding:1px 0}
.comment-anchor{background:#ffe9de;border-bottom:2px solid var(--papaya);cursor:pointer;border-radius:2px}
.article-content a{color:var(--link)}
.editor-footer{height:28px;background:var(--menu-soft);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:9px;color:#aaa49b;flex-shrink:0;position:relative;z-index:30}

/* Margin comments */
.margin-comments{position:absolute;inset:0;pointer-events:none}
.margin-comment{position:absolute;width:208px;pointer-events:auto;background:#fffdf9;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-sm);font-size:11px;line-height:1.65;color:var(--graphite)}
.margin-comment p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.margin-comment .mc-quote{border-left:2px solid var(--periwinkle);padding-left:8px;color:var(--stone);font-size:10px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.margin-comment .mc-actions{display:flex;gap:2px;align-items:center;justify-content:flex-end;margin-top:8px}
.margin-comment .mc-actions .icon-btn{width:22px;height:22px}
.margin-comment .mc-actions .btn{padding:5px 12px;font-size:10px}
.margin-comment .mc-done{margin-right:auto;font-size:9px;color:#a09a91}
.margin-comment.resolved{opacity:.6}
.margin-comment.draft,.margin-comment.flash{border-color:var(--periwinkle);box-shadow:0 0 0 3px var(--peri-soft)}
.margin-comment textarea{width:100%;border:0;background:transparent;resize:none;min-height:54px;font:inherit;color:inherit;outline:none;padding:0}
.comments-hidden .margin-comments{display:none}
.preview-mode .margin-comment.draft,.preview-mode .margin-comment .mc-actions{display:none}
.side-nav.drop-target{background:rgba(3,3,2,.07);box-shadow:inset 0 0 0 1.5px var(--azure)}

/* Floating selection bar */
.selection-bar{position:fixed;z-index:10;display:flex;gap:2px;background:var(--ink);color:#ffffff;padding:5px;border-radius:14px;box-shadow:var(--shadow-hover)}
.selection-bar button{border:0;background:transparent;color:inherit;padding:7px 10px;font-size:11px;border-radius:9px}
.selection-bar button:hover{background:rgba(255,255,255,.14)}
.selection-bar svg{width:14px;height:14px}

/* Preview mode */
.preview-mode .editor-toolbar,.preview-mode .selection-bar{display:none}
.preview-mode .document-page{border:0;box-shadow:none}
.preview-mode .canvas{background:var(--surface)}
.preview-mode .outline-panel{background:#ffffff;border-right:0}
.preview-mode .outline-filter{display:none}
.comments-toggle{position:relative}
.comments-toggle .cm-count{position:absolute;top:-3px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--papaya);color:#fff;font-size:9px;font-weight:600;line-height:14px;text-align:center;pointer-events:none}
.comments-toggle.on{color:var(--ink);background:rgba(3,3,2,.07)}
.comments-toggle.off{color:#b9b3aa}
.comments-toggle.off .cm-count{background:#d9d3c9}

/* Table tools */
.table-tools{display:flex;gap:2px;align-items:center}
.table-tools .icon-btn{font-size:11px;width:auto;padding:0 7px;white-space:nowrap}
.columns-tools{display:flex;gap:2px;align-items:center}
.columns-tools .icon-btn{font-size:11px;width:auto;padding:0 7px;white-space:nowrap}
.columns-menu{width:216px}
.columns-menu .menu-title{font-size:10px;color:#a09a91;padding:8px 12px 6px;letter-spacing:.3px}
.columns-menu button .icon{width:15px;height:15px}
.col-custom{display:flex;align-items:center;gap:4px;padding:8px 10px 7px;border-top:1px solid var(--line);margin-top:4px}
.col-custom-label{font-size:10px;color:#a09a91;margin-right:auto;padding-left:3px}
.col-step{width:22px;height:22px;border:1px solid var(--line);background:var(--surface);border-radius:8px;font-size:12px;color:var(--graphite);padding:0;flex-shrink:0}
.col-step:hover{background:rgba(3,3,2,.05)}
.col-value{min-width:22px;text-align:center;font-size:12px;font-weight:500;color:var(--ink)}
.col-go{margin-left:4px;padding:6px 12px;font-size:11px}

/* Export menu */
.menu{position:absolute;right:22px;top:54px;z-index:40;width:230px;background:#ffffff;border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:var(--shadow-float)}
.menu > button{border:0;background:none;padding:12px;width:100%;justify-content:flex-start;text-align:left;border-radius:10px;font-size:12px;flex-wrap:wrap}
.menu > button:hover{background:rgba(3,3,2,.05)}
.menu small{display:block;color:#a09a91;font-size:10px;width:100%;padding-left:26px}

/* Dialog */
dialog{padding:0;border:1px solid var(--line);border-radius:24px;max-width:460px;width:calc(100% - 32px);box-shadow:var(--shadow-float);color:var(--ink-soft)}
dialog::backdrop{background:rgba(3,3,2,.4);backdrop-filter:blur(4px)}
#modal-body{padding:29px}
#modal-body h2{font-family:Newsreader,'Noto Serif SC',serif;font-size:24px;font-weight:400;margin:0 0 12px;color:var(--ink);letter-spacing:-.01em}
#modal-body p{font-size:12px;color:#8f8a82;line-height:1.8;margin-bottom:22px}
#modal-body label{display:block;font-size:12px;margin:14px 0}
#modal-body input,#modal-body select{border:1.5px solid var(--ash);border-radius:var(--radius-md);padding:9px 12px;width:100%;margin-top:7px;background:#ffffff;color:var(--ink)}
#modal-body input:focus,#modal-body select:focus{outline:none;border-color:var(--periwinkle);box-shadow:0 0 0 3px var(--peri-soft)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}
.modal-quick{display:flex;gap:8px;margin:16px 0 4px}
.folder-pick{display:flex;flex-direction:column;gap:4px;margin:16px 0;max-height:320px;overflow:auto}
.folder-pick .pick-check{margin-left:auto;display:inline-flex;color:var(--peri-ink)}
.folder-del{margin-left:10px;font-size:10px;color:var(--stone);border:1px solid var(--line);background:none;border-radius:9999px;padding:4px 12px;cursor:pointer;font-family:inherit;vertical-align:middle}
.folder-del:hover{color:var(--papaya);border-color:#f0c4b3}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.project-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:20px 20px 16px;border:1px solid rgba(233,228,218,.9);border-radius:18px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left;font-family:inherit;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#ddd4c4;background:rgba(255,255,255,.8)}
.project-card strong{font-size:13px;font-weight:500;color:var(--ink);margin-top:12px;line-height:1.4}
.proj-desc{font-size:11px;color:var(--stone);line-height:1.55;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.proj-count{font-size:10px;color:#b6b0a6;letter-spacing:.4px;margin-top:6px}
.project-card.new-project{border-style:dashed;align-items:center;justify-content:center;color:var(--stone);min-height:172px;gap:8px}
.project-card.new-project .icon{width:20px;height:20px}
.project-card.new-project strong{margin-top:0;color:var(--stone);font-weight:400}
.folder-art{position:relative;width:80px;height:62px;perspective:260px;margin-top:2px;flex-shrink:0;filter:drop-shadow(0 3px 4px rgba(60,50,30,.10));transition:filter .3s}
.project-card:hover .folder-art{filter:drop-shadow(0 3px 5px rgba(60,50,30,.07))}
.folder-back{position:absolute;left:0;right:0;top:8px;bottom:1px;border-radius:0 10px 10px 10px;background:var(--f2);box-shadow:0 0 0 .5px rgba(60,50,30,.05)}
.folder-back::before{content:'';position:absolute;top:-7px;left:0;width:32px;height:10px;border-radius:7px 10px 0 0;background:var(--f2)}
.folder-papers i{position:absolute;left:10px;right:10px;top:12px;bottom:8px;background:#fff;border-radius:3px;box-shadow:0 0 0 .5px rgba(60,50,30,.08),0 1px 2px rgba(80,66,40,.10);transition:transform .38s cubic-bezier(.3,1.35,.4,1)}
.folder-papers i:nth-child(1){transform:rotate(-5deg) translate(1px,2px)}
.folder-papers i:nth-child(2){transform:rotate(3deg) translate(-1px,1px)}
.folder-papers i:nth-child(3){transform:rotate(-1deg)}
.folder-papers i:nth-child(3)::before{content:'';position:absolute;left:5px;top:5px;width:14px;height:3px;border-radius:2px;background:#e2dcc9}
.folder-papers i:nth-child(3)::after{content:'';position:absolute;left:5px;right:5px;top:11px;height:48%;background:repeating-linear-gradient(180deg,#eae5d6 0 1.5px,transparent 1.5px 5px);border-radius:2px}
.folder-front{position:absolute;left:-1px;right:-1px;bottom:-1px;height:64%;border-radius:6px 8px 10px 10px;background:linear-gradient(180deg,var(--f1),var(--f2) 135%);transform-origin:50% 100%;transition:transform .38s cubic-bezier(.3,1.35,.4,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -5px 9px rgba(60,50,30,.08),0 0 0 .5px rgba(60,50,30,.05)}
.project-card:hover .folder-front{transform:rotateX(-26deg)}
.project-card:hover .folder-papers i:nth-child(1){transform:rotate(-7deg) translate(1px,-5px);transition-delay:.02s}
.project-card:hover .folder-papers i:nth-child(2){transform:rotate(3.5deg) translate(-1px,-8px);transition-delay:.05s}
.project-card:hover .folder-papers i:nth-child(3){transform:rotate(-1.5deg) translateY(-11px)}
.project-hero{padding:42px 0 10px}
.project-hero h1{font-family:Newsreader,'Noto Serif SC',serif;font-size:40px;font-weight:400;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.project-hero p{color:var(--stone);font-size:12px;margin:0}
.modal-actions .btn{font-size:12px}
.selection-note{color:#8f8a82;font-size:11px}

/* Toast */
#toast{position:fixed;bottom:40px;left:50%;transform:translate(-50%,15px);background:var(--ink);color:#ffffff;padding:12px 24px;border-radius:9999px;box-shadow:var(--shadow-cta);font-size:12px;z-index:100;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.mobile-brand{display:none}

/* Image tools — floating pill bar */
.image-tools{display:flex;gap:5px;align-items:center;flex-shrink:0;position:fixed;z-index:19;bottom:45px;left:50%;transform:translateX(-50%);padding:7px 12px;border:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-radius:9999px;box-shadow:var(--shadow-hover);max-width:95vw}
.image-tool-label{color:#a09a91;font-size:10px;white-space:nowrap}
.image-tools input{width:62px;border:1.5px solid var(--ash);border-radius:9999px;padding:5px 8px;font-size:11px;color:var(--graphite);background:var(--surface)}
.image-tools .icon-btn{font-size:10px;padding:0 8px;width:auto;white-space:nowrap}
.image-selection{position:fixed;z-index:15;border:2px solid var(--azure);pointer-events:none;border-radius:10px}
.image-resize-handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#ffffff;border:2px solid var(--azure);border-radius:5px;pointer-events:auto;cursor:nwse-resize;touch-action:none;padding:0;box-shadow:var(--shadow-sm)}
.image-size-label{position:absolute;right:0;top:-24px;background:var(--ink);color:#ffffff;padding:3px 8px;border-radius:9999px;font-size:9px;white-space:nowrap}
.is-resizing,.is-resizing *{cursor:nwse-resize!important;user-select:none!important}

/* Responsive */
@media(min-width:1500px){
  .home-main{padding:0 8%}
  .hero{padding-top:74px}
  .drop-zone{min-height:240px}
  .doc-thumb{height:175px}
  .document-page{padding:70px 90px}
}
@media(max-width:1100px){
  .home{grid-template-columns:190px 1fr}
  .sidebar{width:190px;padding:26px 12px}
  .home-main{padding:0 5%}
  .hero{padding:48px 40px}
  .hero-art{right:24px;transform:translateY(-50%) scale(.8) rotate(-8deg);transform-origin:right}
  .hero h1{font-size:32px}
  .doc-thumb{padding:17px 18px 0}
  .outline-panel{width:180px}
  .document-page{padding:46px 42px}
  .canvas{padding:26px}
  .document-title{font-size:31px}
  .margin-comment{width:176px}
  .editor-top .brand{font-size:0;gap:0}
  .breadcrumbs .doc-name{max-width:220px}
}
@media(max-width:800px){
  .sidebar{width:70px;padding:24px 10px;align-items:center}
  .sidebar .brand{font-size:0;padding:0;gap:0}
  .side-nav{padding:13px;justify-content:center}
  .side-nav .nav-text,.side-nav .count,.nav-label,.sidebar-bottom{display:none}
  .sidebar .new-document-button{width:42px;padding:11px}
  .home{grid-template-columns:70px 1fr}
  .home-main{padding:0 6%}
  .hero{padding:38px 26px;margin-top:22px}
  .hero-art{display:none}
  .hero h1{font-size:28px}
  .docs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outline-panel{display:none}
  .margin-comments{display:none}
  .breadcrumbs{display:none}
  .editor-top{padding:0 12px;gap:8px}
  .save-status{margin:0}
  .editor-actions{gap:3px}
  .editor-toolbar{justify-content:flex-start}
  .document-page{padding:38px 32px}
  .canvas{padding:20px}
  .document-title{font-size:30px}
}
@media(max-width:500px){
  .home-top{height:68px}
  .home-top>span{font-size:10px}
  .home-top .right>span{display:none}
  .hero h1{font-size:25px}
  .hero p{font-size:11px}
  .drop-zone{min-height:190px}
  .drop-zone strong{font-size:12px}
  .drop-zone small{font-size:10px}
  .docs-grid{grid-template-columns:1fr}
  .home-footer>span:last-child{display:none}
  .doc-thumb{height:145px}
  .section-heading{flex-wrap:wrap;gap:12px}
  .document-page{padding:30px 20px}
  .canvas{padding:10px}
  .document-title{font-size:27px}
  .article-content{font-size:13px}
  .article-content h2{font-size:22px}
  .article-content .columns{grid-template-columns:1fr!important}
  .editor-top .save-status{display:none}
  .editor-actions .btn{padding:7px 10px;font-size:10px}
  .editor-actions{gap:6px}
  .table-tools{display:none}
  .toolbar-divider{margin:0 4px}
  .search{width:110px}
  .section-heading .view-controls{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}

@media print{
  .editor-top,.editor-toolbar,.outline-panel,.editor-footer,.selection-bar,.margin-comments{display:none!important}
  .editor-app,.workbench,.canvas{display:block;height:auto;overflow:visible;padding:0;background:#ffffff}
  .document-page{border:0;box-shadow:none;padding:0;min-height:0;max-width:none}
  .article-content table{break-inside:avoid}
  .image-selection,.image-tools{display:none!important}
}

/* Folder contents are driven by the actual document count. */
.folder-empty .folder-back{background:linear-gradient(145deg,var(--f2),var(--f1));box-shadow:inset 0 2px 6px rgba(60,50,70,.12)}
.folder-empty .folder-front{height:60%}
.folder-many .folder-papers i:nth-child(1){transform:rotate(-7deg) translate(-2px,-5px)}
.folder-many .folder-papers i:nth-child(2){transform:rotate(5deg) translate(2px,-8px)}
.folder-papers i:last-child::after{content:'';position:absolute;left:6px;right:6px;top:8px;height:50%;background:repeating-linear-gradient(180deg,#eae5d6 0 1.5px,transparent 1.5px 5px)}
@media(hover:hover) and (pointer:fine){
  .project-card:hover .folder-many .folder-papers i:nth-child(1){transform:rotate(-9deg) translate(-3px,-10px)}
  .project-card:hover .folder-many .folder-papers i:nth-child(2){transform:rotate(7deg) translate(3px,-14px)}
}
@media(prefers-reduced-motion:reduce){
  .hero .hero-blob{will-change:auto}
  .folder-art,.folder-front,.folder-papers i{transition:none}
  .project-card:hover .folder-art .folder-front,.project-card:hover .folder-art .folder-papers i{transform:none}
}
@media(max-width:800px){.home-main{padding-top:24px}}
/* Keep the hero inset after removing the workspace header, at every desktop width. */
.home-main{padding-top:40px}
.brand{white-space:nowrap}
.brand-mark{flex-shrink:0}
.sidebar .brand{font-size:20px;gap:8px}
@media(max-width:1100px){.sidebar .brand{font-size:17px;gap:6px}}
@media(max-width:800px){.home-main{padding-top:24px}.sidebar .brand{font-size:0;gap:0}}

.sidebar .nav-label:has(.folder-add){font-size:12px;letter-spacing:1px}
.folder-add{width:26px;height:26px}
.folder-add .icon{width:16px;height:16px}
/* English headings wrap before the decorative papers. */
.hero h1,.hero p{max-width:calc(100% - 190px)}
@media(max-width:800px){.hero h1,.hero p{max-width:none}}
/* Stable project title metrics across Latin and CJK font fallbacks. */
.project-hero h1{line-height:56px;min-height:56px;overflow-wrap:anywhere}
.drop-zone,.upload-symbol{box-shadow:none}
.project-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:14px;margin-bottom:19px;font-size:11px;color:var(--stone)}
.project-breadcrumb button{border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}
.project-breadcrumb button:hover{color:var(--ink)}
.project-tree{flex-shrink:1;min-height:32px;overflow:auto;margin:0 -4px}
.project-tree-row{display:flex;align-items:center;position:relative;padding-left:calc(var(--depth)*16px);min-height:34px}
.project-tree-row .side-nav{min-width:0;padding:7px 7px;margin:0;border-radius:8px;font-size:12px;gap:7px;min-height:34px}
.project-tree-row .side-nav>.icon{width:15px;height:15px;flex-shrink:0}
.project-tree-row .nav-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-tree-row .count{font-size:10px;min-width:18px;height:18px;padding:0 4px}
.tree-toggle,.tree-spacer{width:15px;flex-shrink:0}
.tree-toggle,.tree-add{display:grid;place-items:center;border:0;background:none;padding:0;color:var(--stone);cursor:pointer}
.tree-toggle .icon{width:12px;height:12px}
.tree-toggle.collapsed .icon{transform:rotate(-90deg)}
.tree-add{width:22px;height:26px;flex-shrink:0;opacity:0}
.tree-add .icon{width:14px;height:14px}
.project-tree-row:hover .tree-add,.project-tree-row:focus-within .tree-add{opacity:1}
.tree-toggle:focus-visible,.tree-add:focus-visible{outline:2px solid var(--periwinkle);border-radius:4px}
.subprojects{margin:12px 0 26px}
.subprojects .section-heading{margin-top:0}
.home-import{display:flex;align-items:center;gap:12px;margin:18px 0 0;flex-wrap:wrap}
.home-import>span,.field-hint{font-size:11px;color:var(--stone)}
#folder-parent{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);color:var(--ink);margin-top:8px}
@media(hover:none){.tree-add{opacity:1}}
@media(max-width:800px){.project-tree{width:100%;margin:0}.project-tree-row{padding-left:0}.tree-toggle,.tree-spacer,.tree-add{display:none}.project-tree-row .side-nav{justify-content:center;padding:10px 0}.project-tree-row{border-left:calc(var(--depth)*2px) solid var(--periwinkle)}.home-import>span{display:none}}

.project-root-drop{border-radius:6px;min-height:28px}
.project-root-drop.drop-target,.project-card.drop-target,.project-tree .side-nav.drop-target{background:var(--peri-soft);box-shadow:inset 0 0 0 1.5px var(--azure)}
.project-card.drop-invalid,.project-tree .side-nav.drop-invalid,.project-root-drop.drop-invalid{background:#fff0eb;box-shadow:inset 0 0 0 1.5px #dc7558}
.is-folder-dragging{opacity:.45}
.project-card[draggable="true"],.project-tree .side-nav[draggable="true"]{cursor:grab}
.project-card[draggable="true"]:active,.project-tree .side-nav[draggable="true"]:active{cursor:grabbing}

.doc-card.doc-drag-source{opacity:.35;transform:none;box-shadow:none}
/* Tree rows share one highlight width; indentation applies only to contents. */
.project-tree-row::before{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:0}
.project-tree-row>*{position:relative;z-index:1}
.project-tree-row:has(>.side-nav:hover)::before{background:rgba(3,3,2,.045)}
.project-tree-row:has(>.side-nav.selected)::before{background:rgba(3,3,2,.07)}
.project-tree-row>.side-nav:hover,.project-tree-row>.side-nav.selected{background:transparent}
.project-tree-row:has(>.side-nav.drop-target)::before{background:var(--peri-soft);box-shadow:inset 0 0 0 1.5px var(--azure)}
.project-tree-row:has(>.side-nav.drop-invalid)::before{background:#fff0eb;box-shadow:inset 0 0 0 1.5px #dc7558}
.project-tree .project-tree-row>.side-nav.drop-target,.project-tree .project-tree-row>.side-nav.drop-invalid{background:transparent;box-shadow:none}

/* A language-independent line box for product UI; document typography keeps
   its existing explicit reading line heights. Never use font-metric "normal". */
:root{--ui-line-height:1.5;--ui-breadcrumb-line:16px}
html{scrollbar-gutter:stable}
.project-breadcrumb{height:var(--ui-breadcrumb-line);min-height:var(--ui-breadcrumb-line);line-height:var(--ui-breadcrumb-line);flex-wrap:nowrap;overflow:hidden}
.project-breadcrumb button{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:inherit}
.project-breadcrumb>span{flex-shrink:0;line-height:inherit}
.project-tree-row .nav-text{line-height:18px}
/* Match the project header action to the tree's right-hand action column. */
.sidebar .project-root-drop{margin-right:-4px}
.sidebar .project-root-drop .folder-add{width:22px;flex-shrink:0}
/* Leave space between the selected label, chevron, and right pill edge. */
.format-select{appearance:none;-webkit-appearance:none;width:112px;padding:5px 32px 5px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7973' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:12px 12px;background-position:right 12px center}

/* Text style picker: warm paper, fine border, and the shared light shadow. */
.text-style-control{flex-shrink:0}
.text-style-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;background-image:none;width:120px;padding:5px 12px;min-height:30px;text-align:left}
.text-style-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-style-trigger>.icon{width:13px;height:13px;color:var(--stone)}
.text-style-trigger[aria-expanded="true"]{background:var(--warm-soft);border-color:#d7cbb8}
.text-style-popover{position:fixed;inset:auto;margin:0;width:244px;max-width:calc(100vw - 16px);padding:7px;border:1px solid var(--line);border-radius:16px;background:var(--menu-soft);color:var(--ink-soft);box-shadow:var(--shadow-hover);overflow:auto;font:13px/1.5 Inter,'Noto Sans SC',sans-serif}
.text-style-popover::backdrop{background:transparent}
.text-style-caption{font-size:9px;line-height:16px;letter-spacing:1.4px;font-weight:500;color:var(--stone);padding:7px 10px 9px;pointer-events:none}
.text-style-option{display:flex;align-items:center;gap:12px;width:100%;min-height:43px;border:0;border-radius:9px;background:transparent;color:var(--graphite);padding:8px 10px;text-align:left;justify-content:flex-start;transition:background .15s,color .15s}
.text-style-option:hover,.text-style-option.keyboard-active{background:#eee9e1;color:var(--ink)}
.text-style-option[aria-selected="true"]{background:#eeece6;color:var(--ink)}
.style-glyph{display:grid;place-items:center;flex-shrink:0;width:30px;height:27px;background:#ffffff;border:1px solid #e8e2d8;border-radius:6px;font:11px/1 Inter,sans-serif;color:#8f8b87}
.style-name{flex:1;min-width:0;font-size:12px}
.style-h2 .style-name,.style-h3 .style-name,.style-h4 .style-name{font-family:Newsreader,'Noto Serif SC',serif;line-height:1.2}
.style-h2 .style-name{font-size:24px}
.style-h3 .style-name{font-size:21px}
.style-h4 .style-name{font-size:18px}
.style-blockquote{margin-top:6px;border-top:1px solid var(--line);border-top-left-radius:0;border-top-right-radius:0}
.style-blockquote .style-name{font-family:Newsreader,serif;font-size:18px;font-style:italic}
.style-pre .style-name{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px}
.style-check{width:14px;display:flex;color:var(--peri-ink);visibility:hidden}
.style-check .icon{width:14px;height:14px}
.text-style-option[aria-selected="true"] .style-check{visibility:visible}
.text-style-popover:focus{outline:none}
.text-style-option:focus-visible{outline:2px solid var(--periwinkle);outline-offset:-2px}

.document-drag-ghost{position:fixed;left:0;top:0;z-index:2147483646;pointer-events:none;display:flex;align-items:center;gap:8px;will-change:transform}
.document-drag-ghost>img{width:66px;height:84px;display:block;filter:drop-shadow(0 3px 6px rgba(3,3,2,.08))}
.drag-destination{max-width:190px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:var(--menu-soft);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font:11px/16px Inter,'Noto Sans SC',sans-serif;color:var(--stone);box-shadow:var(--shadow-sm)}
.has-destination .drag-destination{color:var(--peri-ink);border-color:#bac9e4;background:#f6f8fd}
.dragging-document,.dragging-document *{cursor:grabbing!important;user-select:none!important}
.project-card.document-drop-target,.project-breadcrumb [data-folder].document-drop-target{background:var(--peri-soft);box-shadow:inset 0 0 0 1.5px var(--azure);border-color:var(--periwinkle)}
.project-tree-row:has(>.side-nav.document-drop-target)::before{background:var(--peri-soft);box-shadow:inset 0 0 0 1.5px var(--azure)}
.project-hero.document-drop-target{border-radius:12px;outline:1.5px solid var(--periwinkle);outline-offset:8px}
.doc-open{touch-action:pan-y}
/* Reserve a separate action column in list rows so badges never overlap. */
.list-view .doc-card{padding-right:88px}
.list-view .doc-info{min-width:0}
.list-view .doc-meta{flex-wrap:wrap;row-gap:5px}
.list-view .doc-info h3{overflow-wrap:anywhere}

.doc-title-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.doc-title-row h3{margin:0;padding-right:0;min-width:0;flex:0 1 auto}
.doc-title-row .doc-tag{margin-left:0;margin-top:1px;flex-shrink:0;white-space:nowrap}
.list-view .doc-title-row{margin-bottom:6px}
.list-view .doc-title-row h3{margin-bottom:0}

/* Native dropdown arrows share an 8px inset across Studio products. */
select:not([multiple]):not([size]),#modal-body select{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px;background-position:right 8px center;}

/* Context tools stay outside editable/exported content. */
.table-context-tools{position:absolute;z-index:20;display:flex;align-items:center;flex-wrap:wrap;width:max-content;gap:4px;padding:6px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 18px #302a1814;box-sizing:border-box}
.table-context-tools[hidden]{display:none}
.table-context-tools .table-settings,.table-context-tools .table-header-options{display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0;background:transparent;flex-shrink:0}
.table-context-tools button,.table-context-tools button.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:34px;padding:6px;border:0;border-radius:6px;margin:0;flex-shrink:0;background:transparent;color:#747069;cursor:pointer;box-shadow:none}
.table-context-tools .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.table-context-tools button:hover:not(:disabled),.table-context-tools button[aria-pressed="true"]{background:#eee9e1;color:#252525;box-shadow:none}
.table-context-tools button:active:not(:disabled){background:#e4ded3;color:#252525}
.table-context-tools button:focus-visible{outline:2px solid #8d9b72;outline-offset:1px}
.table-context-tools button:disabled{opacity:.35;cursor:default}
.table-tools-divider,.table-delete-divider{display:block;align-self:center;height:20px;width:1px;background:var(--line);margin:0 4px;flex-shrink:0}
.table-action-tooltip{position:fixed;z-index:80;pointer-events:none;padding:6px 9px;border-radius:6px;background:var(--ink,#252525);color:#fff;font:11px/1.4 Inter,'Noto Sans SC',sans-serif;white-space:nowrap;box-shadow:var(--shadow-sm)}
#editor .table-cell-active{outline:none;box-shadow:inset 0 0 0 2px #8d9b72}
.article-content table>:first-child>tr:first-child>:first-child{border-top-left-radius:7px}
.article-content table>:first-child>tr:first-child>:last-child{border-top-right-radius:7px}
.article-content table>:last-child>tr:last-child>:first-child{border-bottom-left-radius:7px}
.article-content table>:last-child>tr:last-child>:last-child{border-bottom-right-radius:7px}
@media(max-width:600px){.table-context-tools button,.table-context-tools button.icon-btn{width:44px;height:44px;min-height:44px}}
@media print{.table-context-tools,.table-action-tooltip{display:none!important}#editor .table-cell-active{outline:none;box-shadow:none}}

/* Tables keep usable column widths and scroll within the document. */
.article-content .doc-table-scroll{max-width:100%;overflow:auto;margin:25px 0;border:1px solid var(--line);border-radius:8px;position:relative;overscroll-behavior-x:contain}
.article-content .doc-table-scroll>table{margin:0;border:0;border-radius:0;overflow:visible}
.article-content .doc-table-scroll.has-fixed-header{max-height:min(65vh,560px)}
.article-content table[data-header-sticky="true"][data-header="top"] thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}
.article-content table[data-header-sticky="true"][data-header="left"] tr>th:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line)}
.selection-bar{z-index:60}
@media print{.article-content .doc-table-scroll{overflow:visible;max-height:none}.article-content .doc-table-scroll>table{min-width:0!important}.article-content th{position:static!important}}
.text-alignment-tools{display:flex;align-items:center;gap:3px;flex-shrink:0}
.text-alignment-tools .icon-btn[aria-pressed="true"]{background:var(--warm-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

.table-context-tools button[data-action="table-delete"]{color:#b64035}
.table-context-tools button[data-action="table-delete"]:hover:not(:disabled){color:#a52f26;background:#fbe9e6}
.table-context-tools button[data-action="table-delete"]:active:not(:disabled){color:#92271f;background:#f5d8d3}
.table-context-tools button[data-action="table-delete"]:focus-visible{outline-color:#b64035}

/* Native undo may retain an empty editable wrapper; it must not render a box. */
.article-content .doc-table-scroll:not(:has(table)){display:contents}
.btn.danger{background:#b64035;border-color:#b64035;color:#fff}
.btn.danger:hover{background:#a52f26;border-color:#a52f26;color:#fff}

.menu.columns-menu{width:248px;max-width:calc(100vw - 16px);box-sizing:border-box}
.columns-menu .col-custom{min-width:0;gap:4px}
.columns-menu .col-step{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;padding:0}
.columns-menu .col-value{flex:0 0 22px;min-width:22px}
.columns-menu .col-go{flex:0 0 auto;width:auto;white-space:nowrap;padding:6px 10px;margin-left:2px}

/* Column controls and resizing affordances stay outside document HTML. */
.columns-context-tools{flex-wrap:nowrap}
.columns-resize-layer{position:absolute;inset:0;pointer-events:none;z-index:18}
.columns-resize-handle{position:absolute;width:14px;min-height:32px;padding:0;border:0;border-radius:5px;background:transparent;pointer-events:auto;cursor:col-resize;touch-action:none}
.columns-resize-handle::after{content:'';position:absolute;top:0;bottom:0;left:6px;width:2px;border-radius:2px;background:#8d9b72;opacity:0;transition:opacity .12s}
.columns-resize-handle:hover::after,.columns-resize-handle:focus-visible::after{background:#8d9b72;width:3px;opacity:1}
.columns-resize-handle:focus-visible{outline:2px solid #8d9b72;outline-offset:1px}
#editor[contenteditable="true"] .column{min-height:32px}
.is-column-resizing,.is-column-resizing *{cursor:col-resize!important;user-select:none!important}
@media print{.columns-resize-layer,.columns-context-tools{display:none!important}}

.is-column-resizing .columns-resize-handle::after{opacity:1}
@media(prefers-reduced-motion:reduce){.columns-resize-handle::after{transition:none}}

/* Table column dividers follow the same affordance as layout columns. */
.table-resize-layer{position:absolute;inset:0;pointer-events:none;z-index:19}
.table-resize-handle{position:absolute;width:12px;min-height:28px;padding:0;border:0;border-radius:5px;background:transparent;pointer-events:auto;cursor:col-resize;touch-action:none}
.table-resize-handle::after{content:'';position:absolute;top:0;bottom:0;left:5px;width:2px;border-radius:2px;background:#8d9b72;opacity:0;transition:opacity .12s}
.table-resize-handle:hover::after,.table-resize-handle:focus-visible::after{width:3px;opacity:1}
.table-resize-handle:focus-visible{outline:2px solid #8d9b72;outline-offset:1px}
.is-table-resizing,.is-table-resizing *{cursor:col-resize!important;user-select:none!important}
.is-table-resizing .table-resize-handle::after{opacity:1}
@media print{.table-resize-layer{display:none!important}}
@media(prefers-reduced-motion:reduce){.table-resize-handle::after{transition:none}}

.article-content .comment-anchor{background-color:#ffe9de;box-shadow:inset 0 -2px var(--papaya);border-bottom:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.article-content .comment-anchor:hover{background-color:#ffd8c3}

/* Compact feedback remains actionable during slow requests. */
#toast{display:flex;align-items:center;gap:12px;bottom:40px;width:max-content;max-width:min(620px,calc(100vw - 32px));padding:14px 16px;border-radius:12px;text-align:left;background:#252521;box-shadow:0 8px 30px #0003;z-index:1000;line-height:1.5}
#toast.show{pointer-events:auto}
.snackbar-symbol{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1.5px solid #ffffff80;border-radius:50%;font-size:12px;font-weight:700}
#toast[data-kind="error"] .snackbar-symbol{color:#ffb1a6;border-color:#ffb1a6}
.snackbar-message{min-width:0;overflow-wrap:anywhere}
.snackbar-action,.snackbar-close{flex:none;border:0;background:transparent;color:#fff;cursor:pointer;font:inherit;border-radius:5px;padding:6px 8px}
.snackbar-action{color:#e1eacb;font-weight:600;white-space:nowrap}.snackbar-close{font-size:20px;line-height:1;padding:4px 6px;opacity:.75}
.snackbar-action:hover,.snackbar-close:hover{background:#ffffff15}.snackbar-action:focus-visible,.snackbar-close:focus-visible{outline:2px solid #e1eacb;outline-offset:1px}
button[aria-busy="true"]{cursor:progress;position:relative;opacity:.65}
button[aria-busy="true"]::after,.loading-spinner,.operation-loading::before{content:'';display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:document-spin .8s linear infinite;flex:none}
button[aria-busy="true"]::after{margin-left:6px;vertical-align:middle}.operation-loading{display:flex;align-items:center;gap:10px}
.workspace-loading{max-width:600px;margin:18vh auto;padding:30px;text-align:center;color:var(--muted)}.workspace-loading h1{font-size:22px;color:var(--ink)}
#workspace-sync{position:fixed;bottom:24px;right:24px;padding:10px 16px;border:1px solid var(--line);background:var(--paper);color:var(--muted);border-radius:12px;z-index:40;font:inherit;font-size:12px;box-shadow:0 4px 16px #0001;cursor:pointer}#workspace-sync.sync-error{color:#b64035}
#workspace-sync[hidden]{display:none}
@keyframes document-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){button[aria-busy="true"]::after,.loading-spinner,.operation-loading::before{animation-duration:2s}}
@media(max-width:480px){#toast{gap:8px;flex-wrap:wrap}.snackbar-message{flex:1;min-width:180px}.snackbar-action{margin-left:24px}}

/* Import stays compact until files enter the project content area. */
.project-heading-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.project-heading-row>div{min-width:0;flex:1}
.project-import-button{flex:none;gap:7px;padding:8px 14px;min-height:36px;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);white-space:nowrap}
.project-import-button .icon{width:15px;height:15px}
.project-import-button:hover{border-color:var(--stone);background:#fff}
.project-import-button:focus-visible{outline:2px solid var(--periwinkle);outline-offset:3px}
.file-drop-overlay{position:fixed;top:12px;right:12px;bottom:12px;z-index:70;display:grid;place-items:center;border:2px dashed var(--periwinkle);border-radius:24px;background:rgba(245,248,255,.94);pointer-events:none;color:var(--ink)}
.file-drop-overlay[hidden]{display:none}
.file-drop-message{text-align:center;padding:28px;max-width:100%;overflow-wrap:anywhere}
.file-drop-message .upload-symbol{margin:0 auto 18px;background:var(--peri-soft);color:var(--peri-ink)}
.file-drop-message strong{display:block;font-size:22px;font-weight:600}
.file-drop-message p{font-size:13px;margin:10px 0;color:var(--stone)}
.file-drop-message small{font-size:11px;color:var(--stone)}
.home-empty>strong{display:block;font-size:16px;color:var(--ink);font-weight:500}.home-empty>p{margin:8px 0 18px;font-size:12px}
.empty-document-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.empty-document-actions .btn{font-size:12px}
@media(max-width:480px){.project-heading-row{align-items:flex-start;gap:12px}.project-import-button{padding:8px 12px}.file-drop-overlay{border-radius:16px}}

.document-list-actions{display:flex;align-items:center;justify-content:flex-end;gap:15px;flex-wrap:wrap}
@media(max-width:600px){.document-list-actions{gap:10px;width:100%}.document-list-actions .search-wrap{flex:1;min-width:0}.document-list-actions .search{width:100%}}

.document-list-actions .project-import-button{background:var(--surface);border-color:var(--line);color:var(--ink-soft);font-weight:500;padding:9px 16px;min-height:38px;box-shadow:none}
.document-list-actions .project-import-button:hover{background:#fff;border-color:var(--stone);color:var(--ink)}
.document-list-actions .document-new-button{padding:9px 16px;min-height:38px;font-weight:600;white-space:nowrap;gap:7px}
.document-list-actions .view-controls{flex:none;margin-left:1px;padding-left:12px;border-left:1px solid var(--line)}

@media(min-width:1400px){.docs-grid:not(.list-view){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Workspace-wide search, above the home banner. */
.workspace-search{position:relative;max-width:640px;margin:0 0 24px;z-index:5}
.workspace-search-field{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 14px;min-height:46px;box-shadow:0 2px 8px #00000003}
.workspace-search-field:focus-within{border-color:var(--periwinkle);box-shadow:0 0 0 3px var(--peri-soft)}
.workspace-search-field>.icon{flex:none;width:17px;height:17px;color:var(--stone)}
#workspace-search{min-width:0;width:100%;font:inherit;font-size:13px;color:var(--ink);border:0;outline:0;background:transparent;padding:13px 0;appearance:none}
#workspace-search::-webkit-search-cancel-button{display:none}
#workspace-search::placeholder{color:var(--stone)}
.workspace-search-clear{flex:none;border:0;background:none;cursor:pointer;color:var(--stone);font-size:22px;line-height:1;width:26px;height:26px;border-radius:6px}.workspace-search-clear:hover{background:var(--peri-soft);color:var(--ink)}
.workspace-search-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 12px 32px #2420191a;overflow:hidden}
.workspace-search-panel[hidden],.workspace-search-clear[hidden]{display:none}
.workspace-search-summary{padding:13px 16px 10px;font-size:11px;color:var(--stone);border-bottom:1px solid var(--line)}
#workspace-search-results{max-height:min(420px,55vh);overflow:auto;overscroll-behavior:contain;padding:5px}
#workspace-search-results:empty{padding:0}
.workspace-search-result{display:flex;align-items:center;gap:12px;width:100%;padding:12px 11px;border:0;border-radius:9px;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.workspace-search-result:hover,.workspace-search-result[aria-selected="true"]{background:var(--peri-soft)}
.workspace-search-result>.icon{width:17px;height:17px;flex:none;color:var(--stone)}
.workspace-search-result>span{flex:1;min-width:0}
.workspace-search-result strong{display:block;overflow-wrap:anywhere;font-size:13px;font-weight:500;line-height:1.5}
.workspace-search-result small{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--stone);overflow-wrap:anywhere}
.workspace-search-result>.icon:last-child{width:13px;height:13px;transform:rotate(180deg);opacity:.55}
@media(max-width:800px){.workspace-search{margin-top:0}}

.workspace-topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 24px;position:relative;z-index:10}
.workspace-topbar .workspace-search{flex:1;min-width:0;margin:0}
.workspace-account-slot{flex:none;position:relative;z-index:6}
#workspace-search:focus,#workspace-search:focus-visible{border:0;outline:none;box-shadow:none;background:transparent}
@media(max-width:600px){.workspace-topbar{gap:14px}.workspace-topbar .workspace-search-field{padding:0 10px;gap:7px}}

.project-title-row{display:flex;align-items:center;gap:12px;min-width:0}
.project-title-row h1{min-width:0;margin-bottom:0}
.project-title-row>.icon-btn{flex:none}

.project-card-shell{position:relative;min-width:0;display:flex}
.project-card-shell>.project-card{width:100%;min-width:0}
.project-card-options{position:absolute;right:12px;top:12px;z-index:2;opacity:0;transition:opacity .15s;background:var(--surface,#fff)}
.project-card-shell:hover .project-card-options,.project-card-shell:focus-within .project-card-options,.project-card-options[aria-expanded="true"]{opacity:1}
.project-options-menu{position:fixed;width:200px;right:auto;z-index:100}
.project-options-menu>button{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.project-options-menu .project-danger{color:#c43b32}
.modal-actions .btn.danger{background:#c43b32;border-color:#c43b32;color:#fff}
.modal-actions .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.project-delete-name{overflow-wrap:anywhere}
@media(hover:none){.project-card-options{opacity:1}}

.project-delete-summary{display:flex;align-items:center;gap:20px;padding:16px;margin:20px 0;background:var(--cream,#faf7f2);border:1px solid var(--line);border-radius:14px;cursor:default}
.project-delete-summary .folder-art{margin:0;pointer-events:none;perspective:none;transition:none}
.project-delete-summary .folder-front,.project-delete-summary .folder-papers i{transition:none}
.project-delete-summary .folder-front{transform:none}
.project-delete-details{min-width:0;flex:1}
.project-delete-details .project-delete-name{display:block;font-size:14px;font-weight:600;line-height:1.5}
.project-delete-details .project-delete-description{margin:4px 0 8px;color:var(--stone);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.project-delete-details small{font-size:11px;color:var(--stone)}
@media(max-width:400px){.project-delete-summary{gap:14px;padding:12px}.project-delete-summary .folder-art{zoom:.8}}

.project-delete-summary{gap:16px;padding:14px 16px;margin:16px 0}
.project-delete-summary .folder-art{zoom:.8}
.project-delete-details{display:flex;flex-direction:column;gap:5px}
.project-delete-details .project-delete-name{line-height:1.35}
.project-delete-details small{line-height:1.4}

/* Empty headings need a text line, even before the first character exists. */
#editor[contenteditable="true"] h2:empty,
#editor[contenteditable="true"] h2:has(>br:only-child){display:block;min-height:1.5em}
#editor[contenteditable="true"] h2:empty::before,
#editor[contenteditable="true"] h2:has(>br:only-child)::before{margin-right:13px;pointer-events:none}
#editor[contenteditable="true"] h2:empty::after,
#editor[contenteditable="true"] h2:has(>br:only-child)::after{display:none}
/* Columns fit their contents; paragraph/media margins are internal spacing only. */
.article-content .column{padding:0}
.article-content .column>:first-child{margin-top:0}
.article-content .column>:last-child{margin-bottom:0}

/* Generated heading ornaments must not intercept text caret placement. */
.article-content h2::before,.article-content h2::after{pointer-events:none;user-select:none}

/* Every column owns the full row's hit area; media adds no inner whitespace. */
.article-content .columns{align-items:stretch}
.article-content .column img,.article-content .column video{margin:0}

/* Highlight blocks share the article's typography and work in columns too. */
.article-content blockquote.callout,.callout-preview{border:0;border-radius:12px;padding:18px 20px;margin:24px 0;background:#fff3cf;color:#453e2d;font-size:inherit;line-height:1.8;overflow-wrap:anywhere}
.article-content .callout>:first-child{margin-top:0}.article-content .callout>:last-child{margin-bottom:0}
.callout-icon{display:inline;margin-right:.65em;user-select:all}

.callout-context-controls{position:fixed;display:flex;gap:2px;padding:4px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:11px;box-shadow:0 4px 18px rgba(30,25,20,.12);z-index:65}
.callout-context-controls[hidden]{display:none}.callout-context-controls .icon-btn{width:32px;height:32px}
.callout-context-controls .icon-btn[aria-expanded="true"]{background:var(--warm-soft)}
.callout-control-popover{position:fixed;width:244px;max-width:calc(100vw - 16px);padding:14px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(30,25,20,.14);z-index:66}
.callout-color-label{font-size:12px;color:var(--ink)}
.callout-presets{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.callout-control-popover .callout-custom-color{position:relative;display:grid;place-items:center;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);color:var(--ink);cursor:pointer}
.callout-custom-color .icon{width:15px;height:15px}
.callout-custom-color input[type="color"]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.callout-custom-color:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.callout-presets button{height:28px;border:1px solid var(--line);border-radius:7px;background:var(--swatch);cursor:pointer}
.callout-presets button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
@media print{.callout-context-controls,.callout-control-popover{display:none!important}}

.style-callout .style-glyph{color:#a17a3d;background:#fff9e9;border-color:#eadcbf}
.style-callout .style-glyph .icon{width:19px;height:19px;stroke-width:1.65}
.callout-context-controls [data-callout-control="background"] .icon{width:19px;height:19px;stroke-width:1.65}

/* Inline status tags. The tone lives in data-tone so the pill looks the same in
   the editor, a shared HTML export, and the reading preview. */
.article-content .doc-tag{display:inline-block;max-width:100%;padding:1px 8px;margin:0 2px;border-radius:999px;background:#e8eddc;color:#4c5636;font-size:.86em;font-weight:600;line-height:1.7;letter-spacing:.01em;vertical-align:baseline;white-space:normal;overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.article-content .doc-tag[data-tone="blue"]{background:#e3ecfa;color:#33517c}
.article-content .doc-tag[data-tone="amber"]{background:#fbeecd;color:#7a571d}
.article-content .doc-tag[data-tone="rose"]{background:#fbe4e1;color:#8b4038}
.article-content .doc-tag[data-tone="violet"]{background:#ece5f8;color:#56437a}
.article-content .doc-tag::selection{background:#8d9b7266}
#editor[contenteditable="true"] .doc-tag{cursor:text}
@media print{.article-content .doc-tag{box-shadow:none}}

/* Mouse-driven row / column / table selection: thin bars that follow the
   table's own column widths and row heights. */
.table-select-layer{position:absolute;inset:0;pointer-events:none;z-index:17}
.table-select-layer button{position:absolute;pointer-events:auto;padding:0;border:0;background:transparent;border-radius:4px;cursor:pointer}
.table-select-layer button:focus-visible{outline:2px solid #8d9b72;outline-offset:1px}
.table-select-layer .table-handle{width:13px;height:13px;border:0;background:#ece6dc;border-radius:3px;transition:background .12s}
.table-select-layer .table-handle:hover,.table-select-layer .table-handle.is-active{background:#8d9b72}
.table-select-layer .table-col-handle,.table-select-layer .table-row-handle{border-radius:3px;background:#f3eee6;transition:background .12s}
.table-select-layer .table-col-handle{height:13px}
.table-select-layer .table-row-handle{width:13px}
.table-select-layer .table-col-handle:hover,.table-select-layer .table-row-handle:hover{background:#e2dbcc}
.table-select-layer .table-col-handle.is-active,.table-select-layer .table-row-handle.is-active{background:#8d9b72}
.table-sel-ring{position:absolute;box-sizing:border-box;border:2px solid #8d9b72;border-radius:9px;pointer-events:none}
.table-sel-ring[hidden]{display:none}
.article-content .table-sel-row>th,.article-content .table-sel-row>td{background:#8d9b7224}
.article-content .table-sel-col{background:#8d9b7224}
.article-content .table-hover-row>th,.article-content .table-hover-row>td{background:#8d9b7214}
.article-content .table-hover-col{background:#8d9b7214}
@media print{.table-select-layer{display:none!important}}

/* Tag color picker popover. */
.tag-color-menu{width:max-content;min-width:196px;right:auto;max-width:calc(100vw - 16px)}
.tag-color-menu .menu-title{padding:8px 12px 4px}
.tag-swatches{display:flex;gap:6px;padding:4px 10px 10px}
.tag-swatch{width:26px;height:26px;padding:3px!important;border:1px solid var(--line);border-radius:999px;background:#fff;flex:none}
.tag-swatch:hover{border-color:#8d9b72}
.tag-swatch[data-tone]{display:inline-flex;align-items:center;justify-content:center}
.tag-swatch-dot{width:100%;height:100%;border-radius:999px;box-shadow:inset 0 0 0 1px #0000000f}
.tag-remove{width:100%;margin-top:2px;padding:10px 12px;border:0;border-top:1px solid var(--line);background:none;text-align:left;font-size:12px;color:#b64035;border-radius:0 0 16px 16px;cursor:pointer}
.tag-remove:hover{background:#fbe9e6}

/* Compact control bar above a selected tag. */
.tag-color-bar{position:absolute;z-index:22;display:flex;align-items:center;gap:5px;padding:5px 6px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px #302a181a}
.tag-color-bar[hidden]{display:none}
.tag-color-bar .tag-swatch{width:20px;height:20px;padding:2px!important;border-radius:999px}
.tag-color-bar .tag-swatch-dot{width:100%;height:100%;border-radius:999px}
.tag-bar-remove{width:22px;height:22px;display:grid;place-items:center;border:0;background:transparent;color:#9a938a;font-size:11px;border-radius:6px;cursor:pointer}
.tag-bar-remove:hover{background:#fbe9e6;color:#b64035}
.article-content .doc-tag-active{box-shadow:0 0 0 2px #8d9b72}
@media print{.tag-color-bar{display:none!important}}

/* The table scroll frame is focusable for keyboard scrolling; Chrome paints the
   system focus ring around the whole table, which reads like a selection. */
.article-content .doc-table-scroll:focus,.article-content .doc-table-scroll:focus-visible{outline:none}

/* Highlighter mode: the pointer becomes a marker while the tool is armed. */
.editor-toolbar [data-action="highlight"].is-active{background:var(--marigold-soft);color:#8a6a1f;box-shadow:inset 0 0 0 1px #eadcbf}
.editor-toolbar [data-action="highlight"].is-active .icon{color:#a8842c}
@media print{.is-highlighting #editor,.is-highlighting #editor *{cursor:text!important}}
/* A real text box outside the pill gives native caret painting an unambiguous position. */
#editor [data-doc-tag-caret]{display:inline-block;min-width:1px;padding:0;margin:0;background:transparent;color:inherit;font:inherit;line-height:inherit;vertical-align:baseline}
.preview-mode [data-doc-tag-caret]{display:none!important}
@media print{[data-doc-tag-caret]{display:none!important}}

/* Marker mode replaces the formatting controls without changing toolbar height. */
.marker-controls{display:none;align-items:center;gap:16px;width:100%;justify-content:center}
.is-highlighting .editor-toolbar>:not(.marker-controls){display:none!important}
.is-highlighting .marker-controls{display:flex}
.marker-mode-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--graphite)}
.marker-mode-label .icon{width:23px;height:23px;color:#b18120}
.marker-colors{display:flex;align-items:center;gap:9px}
.marker-color{display:grid;place-items:center;width:30px;height:30px;padding:4px;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer;transition:background-color 140ms ease,border-color 140ms ease}
.marker-color span{width:20px;height:20px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 1px #0000000c}
.marker-color[aria-pressed="true"]{border-color:#a58a55;background:#fffdf8}
.marker-color:focus-visible{outline:2px solid #a58a55;outline-offset:2px}
.marker-exit{gap:12px}.marker-exit kbd{font-size:10px;font-family:inherit;color:var(--stone);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.is-highlighting #editor::selection,.is-highlighting #editor *::selection{background:transparent;color:inherit}
.marker-live-layer{position:fixed;inset:0;z-index:35;pointer-events:none;opacity:.65;mix-blend-mode:multiply}
.marker-live-stroke{position:absolute;display:block;background-size:100% 100%;background-repeat:no-repeat;transform-origin:left center}
.article-content mark.doc-highlight{background-color:transparent!important;background-size:100% 100%;background-repeat:no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 0;border-radius:0;color:inherit}
@media(hover:hover) and (pointer:fine){.marker-color:hover{background:var(--soft)}}
@media(prefers-reduced-motion:reduce){.marker-color{transition:none}}
@media print{.marker-live-layer,.marker-controls{display:none!important}}
.article-content mark.doc-highlight[data-tone="yellow"],.marker-live-stroke[data-tone="yellow"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23fde99b%22%20fill-opacity%3D%22.88%22%20d%3D%22M.5%203%2018%202.5%2038%203.1%2060%202.4%2083%203%20109%202.3%20137%203%20162%202.5%20183%203%20199%202.5%20200%2026.6%20180%2027.1%20157%2026.4%20132%2027.2%20105%2026.7%2081%2027.3%2055%2026.5%2031%2027.1%2012%2026.7%200%2027.3Z%22%2F%3E%3Cpath%20fill%3D%22%23fde99b%22%20fill-opacity%3D%22.3%22%20d%3D%22M1%207%2040%206%2083%207%20130%206%20199%207%20200%2023%20150%2024%2098%2023%2050%2024%200%2023Z%22%2F%3E%3C%2Fsvg%3E")}
.article-content mark.doc-highlight[data-tone="green"],.marker-live-stroke[data-tone="green"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23cde9bb%22%20fill-opacity%3D%22.88%22%20d%3D%22M.5%203%2018%202.5%2038%203.1%2060%202.4%2083%203%20109%202.3%20137%203%20162%202.5%20183%203%20199%202.5%20200%2026.6%20180%2027.1%20157%2026.4%20132%2027.2%20105%2026.7%2081%2027.3%2055%2026.5%2031%2027.1%2012%2026.7%200%2027.3Z%22%2F%3E%3Cpath%20fill%3D%22%23cde9bb%22%20fill-opacity%3D%22.3%22%20d%3D%22M1%207%2040%206%2083%207%20130%206%20199%207%20200%2023%20150%2024%2098%2023%2050%2024%200%2023Z%22%2F%3E%3C%2Fsvg%3E")}
.article-content mark.doc-highlight[data-tone="blue"],.marker-live-stroke[data-tone="blue"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23c9e5f5%22%20fill-opacity%3D%22.88%22%20d%3D%22M.5%203%2018%202.5%2038%203.1%2060%202.4%2083%203%20109%202.3%20137%203%20162%202.5%20183%203%20199%202.5%20200%2026.6%20180%2027.1%20157%2026.4%20132%2027.2%20105%2026.7%2081%2027.3%2055%2026.5%2031%2027.1%2012%2026.7%200%2027.3Z%22%2F%3E%3Cpath%20fill%3D%22%23c9e5f5%22%20fill-opacity%3D%22.3%22%20d%3D%22M1%207%2040%206%2083%207%20130%206%20199%207%20200%2023%20150%2024%2098%2023%2050%2024%200%2023Z%22%2F%3E%3C%2Fsvg%3E")}
.article-content mark.doc-highlight[data-tone="pink"],.marker-live-stroke[data-tone="pink"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23f6cddd%22%20fill-opacity%3D%22.88%22%20d%3D%22M.5%203%2018%202.5%2038%203.1%2060%202.4%2083%203%20109%202.3%20137%203%20162%202.5%20183%203%20199%202.5%20200%2026.6%20180%2027.1%20157%2026.4%20132%2027.2%20105%2026.7%2081%2027.3%2055%2026.5%2031%2027.1%2012%2026.7%200%2027.3Z%22%2F%3E%3Cpath%20fill%3D%22%23f6cddd%22%20fill-opacity%3D%22.3%22%20d%3D%22M1%207%2040%206%2083%207%20130%206%20199%207%20200%2023%20150%2024%2098%2023%2050%2024%200%2023Z%22%2F%3E%3C%2Fsvg%3E")}
.article-content mark.doc-highlight[data-tone="violet"],.marker-live-stroke[data-tone="violet"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23dfd2f4%22%20fill-opacity%3D%22.88%22%20d%3D%22M.5%203%2018%202.5%2038%203.1%2060%202.4%2083%203%20109%202.3%20137%203%20162%202.5%20183%203%20199%202.5%20200%2026.6%20180%2027.1%20157%2026.4%20132%2027.2%20105%2026.7%2081%2027.3%2055%2026.5%2031%2027.1%2012%2026.7%200%2027.3Z%22%2F%3E%3Cpath%20fill%3D%22%23dfd2f4%22%20fill-opacity%3D%22.3%22%20d%3D%22M1%207%2040%206%2083%207%20130%206%20199%207%20200%2023%20150%2024%2098%2023%2050%2024%200%2023Z%22%2F%3E%3C%2Fsvg%3E")}

.marker-eraser[aria-pressed="true"]{background:#e9e5dd;box-shadow:inset 0 0 0 1px #b5aa98}
.marker-live-layer.is-erasing{mix-blend-mode:normal;opacity:.5}
.marker-live-layer.is-erasing .marker-live-stroke{background-image:none!important;background:#fffdf6;border-bottom:1px dashed #9e9481}
.is-erasing #editor,.is-erasing #editor *{cursor:crosshair}
.editor-toolbar .marker-exit{height:32px;padding:5px 12px;font-size:11px;display:flex;align-items:center}

/* Fixed-size tools keep the document stationary when modes switch. */
.marker-controls{height:32px;min-width:max-content;flex-shrink:0}
.editor-toolbar .marker-eraser{width:30px;height:30px;flex-shrink:0}
.marker-erase-ghost{position:fixed;z-index:35;pointer-events:none;transform-origin:center;mix-blend-mode:multiply}
@media print{.marker-erase-ghost{display:none!important}}


.is-highlighting #editor,.is-highlighting #editor *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fde99b%22%20stroke%3D%22%23b18120%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2011-6%206v3h9l3-3%22%2F%3E%3Cpath%20d%3D%22m22%2012-4.6%204.6a2%202%200%200%201-2.8%200l-5.2-5.2a2%202%200%200%201%200-2.8L14%204Z%22%2F%3E%3C%2Fsvg%3E") 3 22,text}
.is-highlighting.is-erasing #editor,.is-highlighting.is-erasing #editor *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23625e56%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22rotate%2838%2012%2012%29%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%227.5%22%20y%3D%224%22%20width%3D%229%22%20height%3D%2216%22%20rx%3D%222.5%22%20fill%3D%22%23edddd4%22%2F%3E%3Cpath%20d%3D%22M7.5%2014h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 10 25,crosshair}

/* Inline landing pads must never add spacing to marker strokes. */
#editor [data-doc-tag-caret].marker-caret{display:inline;min-width:0;padding:0;margin:0}