#writing .write-glyphs { position: absolute; pointer-events: none; }
#writing .op-demo { container-type: inline-size; width: 100%; height: 100%; position: relative; }
#writing .op-demo [hidden] { display: none !important; }

#write-heading {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
  gap:0;
  overflow:hidden;
  border:1px solid #dededb;
  border-radius:20px;
  background:#fdfdfd;
}
#write-heading figcaption {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:clamp(22px, 2.4vw, 36px);
  border-inline-end:1px solid #dededb;
  background:#efefef;
  font-size:var(--type-body);
}
#write-heading figcaption strong {
  font-size:var(--type-lead);
  line-height:1.3;
}
#write-heading .heading-example {
  display:block;
  padding-block:12px;
  border-block:1px solid #d9d9d4;
  color:var(--ink);
  font:500 1em/1.5 var(--mono);
}
.heading-example span { color:#9b4627; }
.heading-result {
  display:grid;
  align-items:center;
  padding:clamp(12px, 2vw, 28px);
}
.heading-page { position:relative; }
.heading-page img { display:block; width:100%; height:auto; }
/* The margin mark sits beside the second heading in the native capture. */
.heading-page::before {
  content:"";
  position:absolute;
  inset-inline-start:1%;
  top:35.8%;
  height:5.6%;
  width:2px;
  background:#b66342;
  border-radius:2px;
}
@media (max-width:767px) {
  #write-heading { grid-template-columns:minmax(0,1fr); border-radius:16px; }
  #write-heading figcaption { gap:12px; padding:20px; border-inline-end:0; border-bottom:1px solid #dededb; }
  .heading-result { padding:12px 6px; }
}
#writing .write-main .op-window,
#writing .write-clip-window { height: 100%; overflow: hidden; background: #fff; color: #252625; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
#writing .write-main .op-window { display: flex; flex-direction: column; }
#writing .write-main .op-bar,
#writing .write-clip-bar { display: flex; align-items: center; height: 4.35cqw; flex: none; border-bottom: 1px solid #dededb; background: #f1f1ee; }
#writing .write-main .op-bar { padding: 0 1.6cqw; gap: 2.6cqw; }
#writing .write-lights { display: inline-flex; gap: .52cqw; }
#writing .write-lights i { width: .92cqw; height: .92cqw; border-radius: 50%; background: #ed756b; border: 1px solid #0001; }
#writing .write-lights i:nth-child(2) { background: #e8b950; }
#writing .write-lights i:nth-child(3) { background: #79b780; }
#writing .write-tab { font-size: 1.18cqw; font-weight: 550; }
#writing .write-main .op-layout { display: grid; grid-template-columns: 19% minmax(0,1fr) 17%; flex: 1; min-height: 0; }
#writing .write-main .op-nav,
#writing .write-main .op-inspector { padding: 2.35cqw .8cqw; background: #f5f5f2; color: #5c5d58; border: 0; }
#writing .write-main .op-nav { border-right: 1px solid #e6e6e2; }
#writing .write-main .op-inspector { border-left: 1px solid #e6e6e2; background: #f9f9f7; }
#writing .write-navtitle { display: block; margin: 0 .8cqw 1.1cqw; font-size: 1.15cqw; font-weight: 580; color: #878881; }
#writing .write-file,
#writing .write-library,
#writing .write-outline-row { display: flex; align-items: center; gap: .8cqw; line-height: 1.4; margin-bottom: .23cqw; }
#writing .write-library { padding: .55cqw .75cqw; color: #42433d; font-size: 1.35cqw; font-weight: 600; }
#writing .write-file { padding: .58cqw .65cqw .58cqw 1.9cqw; font-size: 1.16cqw; border-radius: .45cqw; }
#writing .write-file.selected { color: #222420; background: #e3e3dd; }
#writing .write-outline-row { padding: .5cqw .8cqw; font-size: 1.12cqw; }
#writing .write-main .op-paper { padding: 0; min-width: 0; background: #fff; }
#writing .write-crumbs { display: flex; align-items: center; gap: .65cqw; padding: 1.45cqw 1.8cqw; color: #74756e; border-bottom: 1px solid #efefec; font-size: 1.06cqw; }
#writing .write-crumbs i,
#writing .write-clip-bar i { color: #b1b2aa; font-style: normal; }
#writing .write-save { margin-left: auto; color: #797b72; }
#writing .write-body { text-align: left; }
#writing .write-main .write-body { padding: 5cqw 4.5cqw; font-size: 1.58cqw; }
#writing .write-body h4,
#writing .write-body h5,
#writing .write-body p,
#writing .write-body blockquote { letter-spacing: normal; text-wrap: wrap; }
#writing .write-body h4 { font-size: 2.05em; line-height: 1.25; font-weight: 680; letter-spacing: -.055em; margin: 0 0 .85em; color: #20221f; }
#writing .write-body h5 { font-size: 1.45em; font-weight: 650; line-height: 1.4; margin: 0 0 .5em; color: #252722; }
#writing .write-body p,
#writing .write-body blockquote { font-size: 1em; font-weight: 400; line-height: 1.85; margin: 0 0 1.05em; color: #55574f; }
#writing .write-caret { display: inline-block; width: max(1px,.08em); height: 1.22em; margin-left: .08em; vertical-align: -.22em; background: #bc613a; }
#writing .write-closeup { background: #f0f0ee; }
#writing .write-clip-window { position: absolute; inset: 0; display: flex; flex-direction: column; }
#writing .write-clip-bar { justify-content: space-between; gap: 2cqw; padding: 0 2cqw; font-size: 1.2cqw; font-weight: 520; color: #666861; }
#writing .write-clip-bar span { display: inline-flex; align-items: center; gap: .75cqw; }
#writing .write-closeup .write-body { width: 73%; margin: auto; padding: 0; min-height: 31cqw; font-size: 1.95cqw; }
#writing .write-block-action { position: relative; margin-top: 1.35em; }
#writing .write-slash { font: 550 1.05em/1.5 ui-monospace, monospace; }
#writing .write-menu { position: absolute; z-index: 1; top: 1.65em; left: -.4em; width: 10.5em; padding: .28em; border: 1px solid #d6d7d1; border-radius: .48em; background: #fbfbfa; box-shadow: 0 .45em 1.2em -.45em #27291c40; }
#writing .write-menu span { display: flex; align-items: center; gap: .6em; padding: .29em .48em; border-radius: .25em; font-size: .86em; line-height: 1.3; }
#writing .write-menu .selected { background: #292b27; color: #fff; }
#writing .write-source .write-body { min-height: 24cqw; }
#writing .write-body blockquote { border-left: .16em solid #c07b57; padding-left: 1em; color: #63665b; }
#writing .write-md { font-family: ui-monospace, "SFMono-Regular", "PingFang SC", monospace; line-height: 1.85; }
#writing .write-md p { margin: 1.1em 0; }
#writing .write-md b { color: #a85b38; }
#writing .write-keys { position: absolute; display: flex; gap: .5cqw; bottom: 3cqw; left: 50%; translate: -50% 0; }
#writing .write-keys kbd { min-width: 3.4cqw; height: 3.4cqw; display: grid; place-items: center; color: #fff; background: #373835; border-radius: .55cqw; font: 550 1.75cqw/1 -apple-system,sans-serif; }
#writing figcaption code,
#writing figcaption kbd { font-size: .9em; line-height: 1; font-family: ui-monospace, monospace; }


@container (max-width: 600px) {
  #writing .write-main .op-layout { grid-template-columns: 21% minmax(0,1fr); }
  #writing .write-main .op-inspector { display: none; }
  #writing .write-main .write-body { padding: 4cqw; font-size: 2.05cqw; }
  #writing .write-crumbs { font-size: 1.5cqw; }
  #writing .write-navtitle, #writing .write-tab, #writing .write-file { font-size: 1.5cqw; }
  #writing .write-library { font-size: 1.7cqw; }
  #writing .write-closeup .write-body { width: 82%; font-size: 2.75cqw; min-height: 32cqw; }
  #writing .write-clip-bar { height: 6cqw; font-size: 1.9cqw; }
  #writing .write-closeup .write-body h4 { font-size: 1.7em; margin-bottom: .55em; }
  #writing .write-block-action { margin-top: .8em; }
}
@container (max-width: 460px) {
  #writing .write-main .op-layout { display: block; }
  #writing .write-main .op-nav { display: none; }
  #writing .write-main .write-body { padding: 5cqw; font-size: 3.1cqw; }
  #writing .write-main .op-bar { height: 6cqw; }
  #writing .write-crumbs, #writing .write-tab { font-size: 2.1cqw; }
}