:root{
  --bg:#f7f8fa; --panel:#fff; --ink:#161b22; --muted:#5d6b7a; --line:#dfe3e8;
  --accent:#0b62d6; --ok:#1f7a3d; --warn:#a1441b; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1216; --panel:#161b22; --ink:#e6edf3; --muted:#98a5b3; --line:#262c34;
         --accent:#5aa2ff; --ok:#59c47f; --warn:#ff9d6b; }
}
*{box-sizing:border-box}
body{margin:0;padding:1.6rem 1.4rem 3rem;background:var(--bg);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
main{max-width:1900px;margin:0 auto}
main.narrow{max-width:46rem}
main.wide{max-width:1600px}
h1{font-size:1.35rem;margin:.2rem 0 .8rem;letter-spacing:-.01em}
h2{font-size:1.05rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,.mono{font-family:var(--mono)}
p.lead{color:var(--muted);font-size:1rem;max-width:52rem}
p.meta,.meta{color:var(--muted);font-size:.85rem}
p.hint{color:var(--muted);font-size:.83rem}
.crumbs{margin:0 0 .6rem}
ul.plain{color:var(--muted);max-width:52rem}
.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin:1rem 0}
label{display:block;margin:.55rem 0;font-size:.9rem;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input:not([type]),textarea{
  width:100%;padding:.5rem .6rem;margin-top:.25rem;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--ink);font-family:var(--mono);font-size:.86rem}
textarea{resize:vertical;min-height:4rem;line-height:1.45}
input:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}
.btn{display:inline-block;padding:.45rem .8rem;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--ink);cursor:pointer;font-size:.88rem}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.tiny{padding:.1rem .38rem;font-size:.8rem;line-height:1.5}
.btn.danger{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.inline{display:inline}
button.link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0}
.notice,.problem{padding:.55rem .8rem;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-size:.9rem}
.notice{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));color:var(--ok)}
.problem{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));color:var(--warn)}
.pill{display:inline-block;padding:.1rem .5rem;border-radius:999px;border:1px solid var(--line);
  font-size:.75rem;color:var(--muted);vertical-align:middle}
.pill.on{border-color:color-mix(in srgb,var(--ok) 50%,var(--line));color:var(--ok)}
table.docs{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
table.docs th{text-align:left;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);padding:.35rem .5rem}
table.docs td{padding:.45rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.newdoc,.importbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:1rem 0}
.importbar input{min-width:22rem}
.docbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem}
.docbar .right{margin-left:auto}
.docbar .share{font-family:var(--mono);font-size:.82rem}
.titlefield{margin:0 0 1rem;font-size:.9rem;color:var(--muted)}
ol.blocks{list-style:none;padding:0;margin:0}
li.block{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;margin:0 0 .9rem}
li.block.note{border-left:4px solid color-mix(in srgb,var(--accent) 55%,var(--line))}
li.block.diagram{border-left:4px solid color-mix(in srgb,var(--ok) 55%,var(--line))}
.blockhead{display:flex;gap:.6rem;align-items:center;margin-bottom:.45rem}
.blockhead .kind{font-family:var(--mono);font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.blockhead .pos{font-size:.75rem;color:var(--muted)}
.blockhead .actions{margin-left:auto;display:flex;gap:.3rem}
li.block .caption{margin:.5rem 0 0}
.preview{min-height:3rem;margin:.6rem 0 0;padding:.6rem;border:1px dashed var(--line);border-radius:8px;
  background:color-mix(in srgb,var(--panel) 92%,var(--bg));overflow:auto}
.preview svg{max-width:100%;height:auto}
.preview .error,pre.error{color:var(--warn);font-size:.82rem;white-space:pre-wrap}
.srcline{font-size:.78rem;color:var(--muted);margin:.4rem 0 0}
.stickybar{position:sticky;bottom:0;display:flex;gap:.6rem;align-items:center;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);
  border-top:1px solid var(--line);padding:.6rem 0;margin-top:1rem}
.stickybar .hint{color:var(--muted);font-size:.8rem}
.stickybar .right{margin-left:auto}
.grip{cursor:grab;color:var(--muted);font-size:1rem;line-height:1;user-select:none;padding:0 .1rem}
.blockhead{cursor:default}
li.block.dragging{opacity:.5;border-style:dashed}
li.block.dropover{border-color:var(--accent)}
.doctools{display:flex;gap:.7rem;align-items:center;max-width:1000px;margin:0 auto .6rem}
.printonly{display:none}
article.doc{max-width:1000px;margin:0 auto}
article.doc h1{font-size:1.6rem}
article.doc section.note{margin:1.6rem 0}
article.doc figure.diagram{margin:1.8rem 0;padding:1rem;background:var(--panel);border:1px solid var(--line);border-radius:10px}
article.doc figure.diagram img{max-width:100%;height:auto;display:block}
article.doc figcaption{color:var(--muted);font-size:.85rem;margin-bottom:.6rem}
article.doc pre.source{font-size:.75rem;color:var(--muted);white-space:pre-wrap;background:transparent;border:0}
article.doc blockquote{border-left:3px solid var(--line);margin:1rem 0;padding:.2rem 0 .2rem .9rem;color:var(--muted)}
article.doc code{background:color-mix(in srgb,var(--line) 40%,transparent);padding:.05rem .3rem;border-radius:4px;font-size:.86em}
article.doc hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
code.pw{font-size:1rem}
footer.foot{max-width:1600px;margin:3rem auto 0;padding-top:1rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.82rem}
footer.foot .dot{margin:0 .35rem}
footer.foot .brand{font-family:var(--mono)}
@media print{
  @page{margin:14mm}
  body{background:#fff;color:#000;padding:0;font-size:11pt}
  main,main.wide,main.narrow{max-width:none}
  .crumbs,footer.foot,.docbar,.stickybar,.importbar,.doctools,.noprint,.notice,.problem{display:none !important}
  .printonly{display:block}
  article.doc{max-width:none;margin:0}
  article.doc h1{font-size:18pt;margin:0 0 .2rem;break-after:avoid}
  article.doc section.note{break-inside:avoid}
  article.doc figure.diagram{break-inside:avoid;border:0;padding:0;margin:14pt 0;background:none}
  article.doc figure.diagram img{max-width:100%;height:auto}
  article.doc figcaption{color:#333;font-size:10pt}
  article.doc a{color:#000;text-decoration:none}
}

/* ------------------------------------------------------------------ lightbox
   A diagram opened big: the public share page and the editor's live previews both
   use it. Clicking the backdrop, the frame, the ✕ or Esc closes; clicking the
   diagram itself toggles between "fit" and "actual size" (scrollable). */
body.lb-open{overflow:hidden}
figure.diagram img.zoomable,.preview svg,.preview img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:2.5rem 3rem;background:color-mix(in srgb,#0b0e12 84%,transparent);backdrop-filter:blur(3px)}
.lightbox[hidden]{display:none}
.lightbox figure{position:relative;margin:0;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;
  gap:.55rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lightbox .lb-stage{overflow:auto;display:flex;align-items:center;justify-content:center;
  width:min(88vw,1400px);height:min(74vh,860px)}
.lightbox .lb-stage > img,.lightbox .lb-stage > svg{max-width:100%;max-height:100%;height:auto;width:auto;display:block}
.lightbox.actual .lb-stage > img,.lightbox.actual .lb-stage > svg{max-width:none;max-height:none;width:auto}
.lightbox figcaption{color:var(--muted);font-size:.85rem;text-align:center;max-width:88vw}
.lightbox .lb-close{position:absolute;top:.35rem;right:.45rem;background:none;border:0;color:var(--muted);
  font-size:1rem;line-height:1;cursor:pointer;padding:.25rem .4rem;border-radius:6px}
.lightbox .lb-close:hover{color:var(--warn);border-color:var(--warn)}
@media (max-width:640px){.lightbox{padding:1rem}.lightbox figure{max-width:96vw;padding:.7rem .8rem}}

/* -------------------------------------------------------------------- editor
   The creation view: a status bar with the share link, one toolbar for adding
   blocks, and every block as a two-column card — source left, live preview right. */
main.editor{max-width:1700px}
.edbar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem}
.edbar-left{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;min-width:0}
.edbar-right{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.edbar .share{font-family:var(--mono);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
.addbar{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;margin:0 0 1rem}
.addbar-title{margin:0 0 .45rem;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.addbar-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.addbar-row .grow{flex:1 1 24rem;min-width:16rem}
.addbar-row .grow input{width:100%}
.addbar > p.meta{margin:.55rem 0 0;max-width:60rem}
.edhead{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin:0 0 .9rem}
.edhead .titlefield{flex:1 1 24rem;margin:0}
.edhead .titlefield input{font-size:1rem;font-family:inherit}
.edhead > .meta{margin-bottom:.55rem}
.empty{color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:1.2rem;text-align:center}
li.block{padding:.6rem .7rem}
.blockhead{gap:.5rem}
.blockhead .num{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;
  border-radius:999px;background:color-mix(in srgb,var(--line) 45%,transparent);font-size:.72rem;color:var(--muted)}
.blockhead .kind{padding:.05rem .45rem;border-radius:999px;border:1px solid var(--line);text-transform:none;letter-spacing:0}
.blockbody{display:grid;grid-template-columns:minmax(320px,1fr) minmax(340px,1.05fr);gap:.9rem;align-items:start;margin-top:.5rem}
li.block.note .blockbody{grid-template-columns:1fr}
@media (max-width:1100px){li.block .blockbody{grid-template-columns:1fr}}
.blockedit .srclabel{margin:0;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.blockedit textarea{min-height:9rem;font-size:.83rem}
.blockedit .caption{margin:.5rem 0 0}
.blockpreview .preview{min-height:9rem;max-height:60vh;margin:0;border-style:solid;
  display:flex;align-items:center;justify-content:center}
.blockpreview .preview svg{max-width:100%;max-height:58vh}
.stickybar .hint{max-width:44rem}
/* ------------------------------------------------------------------ /edit: the diagram editor
   Source left, live preview right. Same mermaid settings as the document previews, so what is
   drawn here is what Publish freezes; the preview keeps a fixed height and scrolls instead of
   growing with the diagram. */
.editgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;margin:0 0 .6rem}
.editpane{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;min-width:0}
.editpane .srclabel{display:block;margin:0 0 .35rem;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.editpane textarea{min-height:26rem;font-size:.84rem;margin:0}
.editpane .preview{min-height:26rem;margin:0;border-style:solid;display:flex;align-items:center;justify-content:center}
.editpane .preview svg{max-width:100%;height:auto}
.editpane > p.meta{margin:.5rem 0 0}
#linkbox{margin:0 0 .8rem}
.crumbs .dot{margin:0 .35rem}
/* The `hidden` attribute is only a UA `display:none`, so any author display rule wins over it and a
   `hidden` button still shows. Own the rule globally so hiding a control actually hides it (this is
   how the scratch editor's copy-link / send buttons leaked onto the block editor). */
[hidden]{display:none !important}
@media (max-width:1000px){.editgrid{grid-template-columns:minmax(0,1fr)}}
@media print{.lightbox{display:none !important}}