/* ============================================================
   Nihil Journal — ink & brass
   ============================================================ */

:root{
  /* ground */
  --ink:#0A0C10;
  --panel:#10131A;
  --panel-2:#161A22;
  --raise:#1C212B;
  --line:#232833;
  --line-soft:#191D25;

  /* text */
  --txt:#E8E6E0;
  --dim:#9AA0AC;
  --faint:#69707D;

  /* accent */
  --brass:#C6A15B;
  --brass-dim:#8A7440;
  --teal:#6FA3A0;
  --rose:#C4705F;

  /* code palette — muted, keyed to the brass ground */
  --code-bg:#0C0F15;
  --code-txt:#D4D1CA;
  --c-comment:#5A626F;
  --c-keyword:#C08A5E;
  --c-string:#8FB08A;
  --c-number:#C99A93;
  --c-func:#7FA6C4;
  --c-type:#C6A15B;
  --c-builtin:#A98FBF;
  --c-prop:#A7AEBC;
  --c-punct:#7C838F;
  --c-tag:#C08A5E;
  --c-attr:#C6A15B;

  --serif:"Newsreader",ui-serif,Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --rail-w:268px;
}

*{box-sizing:border-box;}

[hidden]{display:none !important;}

html,body{height:100%;}

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

button,input,textarea{font:inherit;color:inherit;}

::selection{background:rgba(198,161,91,.28);}

:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

#app{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  grid-template-rows:minmax(0,1fr);
  height:100%;
}

/* ============================================================
   left rail
   ============================================================ */

#rail{
  position:relative;
  background:var(--panel-2);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.rail-head{
  padding:16px 14px 12px;
  border-bottom:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  gap:11px;
}

.brand{display:flex;align-items:center;gap:8px;}

/* the star: always brass, radiant, and quietly the way in */
.star-wrap{
  position:relative;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

/* thin spokes of light, masked to a ring so they read as rays */
.star-wrap::before{
  content:"";
  position:absolute;
  inset:-13px;
  pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(198,161,91,.95) 0deg 3.6deg,
    transparent 3.6deg 22.5deg,
    rgba(198,161,91,.62) 22.5deg 25.1deg,
    transparent 25.1deg 45deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 26%,#000 46%,transparent 94%);
  mask-image:radial-gradient(closest-side,transparent 26%,#000 46%,transparent 94%);
  opacity:.55;
  animation:rays 34s linear infinite;
  transition:opacity .4s ease;
}

/* the flare fired when the mode changes */
.star-wrap::after{
  content:"";
  position:absolute;
  inset:-14px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,.5),rgba(198,161,91,.12) 45%,transparent 68%);
  opacity:0;
  transform:scale(.4);
}

.star-wrap.flare::after{animation:flare .72s cubic-bezier(.2,.7,.3,1);}

@keyframes rays{to{transform:rotate(360deg);}}
@keyframes flare{
  0%{opacity:.9;transform:scale(.35);}
  100%{opacity:0;transform:scale(1.5);}
}

.brand-mark{
  position:relative;
  z-index:1;
  border:1px solid transparent;
  background:none;
  color:var(--brass);
  font-size:.8rem;
  line-height:1;
  width:24px;
  height:24px;
  border-radius:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  text-shadow:0 0 12px rgba(198,161,91,.5);
  transition:border-color .18s ease,transform .45s cubic-bezier(.2,.7,.3,1),text-shadow .3s ease;
}
.brand-mark:hover{border-color:var(--brass-dim);}

#app[data-mode="edit"] .brand-mark{
  border-color:var(--brass-dim);
  background:rgba(198,161,91,.1);
  transform:rotate(72deg);
  text-shadow:0 0 14px rgba(198,161,91,.6);
}
#app[data-mode="edit"] .star-wrap::before{opacity:.92;animation-duration:20s;}

/* the writing controls exist only while writing */
#app[data-mode="read"] .rail-foot .ghost-btn{display:none;}
#app[data-mode="read"] #btn-new{display:none;}

.brand-name{
  font-family:var(--serif);
  font-size:1.12rem;
  letter-spacing:.02em;
}

.rail-tools{display:flex;gap:8px;}

#search{
  flex:1;
  min-width:0;
  height:30px;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--ink);
  padding:0 10px;
  font-size:.82rem;
  color:var(--txt);
}
#search::placeholder{color:var(--faint);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;}
#search:focus{border-color:var(--brass-dim);outline:none;}

.icon-btn{
  width:30px;height:30px;
  flex:0 0 auto;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--ink);
  color:var(--dim);
  cursor:pointer;
  line-height:1;
  transition:color .15s ease,border-color .15s ease;
}
.icon-btn:hover{color:var(--brass);border-color:var(--brass-dim);}
.icon-btn.danger:hover{color:var(--rose);border-color:var(--rose);}

.rail-jump{display:flex;}

#jump{
  width:100%;
  height:26px;
  border-radius:4px;
  border:1px solid var(--line-soft);
  background:transparent;
  color:var(--faint);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.04em;
  padding:0 8px;
}
#jump:hover,#jump:focus{color:var(--dim);border-color:var(--line);outline:none;}
#jump::-webkit-calendar-picker-indicator{filter:invert(.55) sepia(.4) saturate(3) hue-rotate(2deg);cursor:pointer;}

.rail-list{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-bottom:20px;
}

.month{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--panel-2);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  padding:14px 14px 6px;
  border-bottom:1px solid var(--line-soft);
}

.item{
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 14px 9px 12px;
  border:0;
  border-left:2px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:background .12s ease;
}
.item:hover{background:var(--raise);}
.item.on{background:var(--raise);}

/* today is always the brass one, whether or not it is the day you are reading */
.item.today{border-left-color:var(--brass);}
.item.today .item-date{color:var(--brass);}
.item.today .item-date::after{
  content:"today";
  font-size:.56rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-dim);
}
.item.on:not(.today){border-left-color:var(--line);}

.item-date{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.05em;
  color:var(--faint);
  display:flex;
  align-items:center;
  gap:6px;
}
.item.on .item-date{color:var(--dim);}
.item.on.today .item-date{color:var(--brass);}

.item-title{
  font-size:.86rem;
  line-height:1.4;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.item.on .item-title{color:var(--txt);}
.item-title.untitled{font-style:italic;color:var(--faint);}

.item-snip{
  font-size:.76rem;
  line-height:1.45;
  color:var(--faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}
.item-snip mark{background:rgba(198,161,91,.22);color:var(--txt);border-radius:2px;padding:0 2px;}

.chips{display:inline-flex;gap:3px;margin-left:auto;}
.chip{width:11px;height:7px;border-radius:1px;background:var(--line);}
.chip.img{background:#2C3A3A;}
.chip.vid{background:#3A2F2C;}
.chip.doc{background:#332C3A;}
.chip.code{background:#2B3140;}

.rail-foot{
  border-top:1px solid var(--line-soft);
  padding:9px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
}
#count{margin-right:auto;}

.ghost-btn{
  border:0;
  background:none;
  color:var(--faint);
  cursor:pointer;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:0;
}
.ghost-btn:hover{color:var(--brass);}

/* ============================================================
   entry pane
   ============================================================ */

#pane{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--ink);
}

.empty{
  margin:auto;
  max-width:38ch;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:40px;
}
.empty-mark{color:var(--brass-dim);margin:0;font-size:1rem;}
.empty h1{font-family:var(--serif);font-weight:300;font-size:1.9rem;margin:0;letter-spacing:-.01em;}
.empty-note{color:var(--dim);font-size:.92rem;margin:0;line-height:1.6;}
.empty-note code{font-family:var(--mono);font-size:.82rem;color:var(--brass);}

.entry{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.entry-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:26px 44px 14px;
  border-bottom:1px solid var(--line-soft);
}

.entry-head{display:flex;flex-direction:column;gap:5px;min-width:0;}

.stamp{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}

.entry-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0;
  align-self:flex-start;
  max-width:60ch;
}
.entry-title.untitled{color:var(--faint);font-style:italic;}

.entry-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}

/* the back arrow and the entry-bar star exist only on the phone layout */
.icon-btn.back{display:none;font-size:1.1rem;margin-top:2px;}
.pane-star{display:none;}

.mode-pill{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:3px;
  border:1px solid var(--line);
  color:var(--faint);
  white-space:nowrap;
}
#pane[data-mode="edit"] .mode-pill{color:var(--brass);border-color:var(--brass-dim);}

/* reading surface */

.read{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:34px 44px 90px;
}

.markdown{max-width:none;}

/* prose stays at a readable measure; code and media get more room */
.markdown p,
.markdown h1,.markdown h2,.markdown h3,.markdown h4,
.markdown ul,.markdown ol,
.markdown blockquote,
.markdown hr,
.markdown table{max-width:68ch;}

.markdown .code-block,
.markdown figure,
.markdown embed.pdf,
.markdown .doc-card{max-width:94ch;}

/* writing surface */

.write{flex:1;min-height:0;display:flex;}

#editor{
  flex:1;
  width:100%;
  resize:none;
  border:0;
  outline:none;
  background:transparent;
  color:var(--txt);
  font-family:var(--mono);
  font-size:.88rem;
  line-height:1.85;
  padding:34px 44px 90px;
  tab-size:2;
}
#editor::placeholder{color:var(--faint);}

/* attachment strip */

.strip{
  border-top:1px solid var(--line-soft);
  background:var(--panel);
  padding:10px 44px;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  min-height:56px;
}

.att{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 10px;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--panel-2);
  cursor:pointer;
  color:var(--dim);
  font-size:.78rem;
  max-width:230px;
  transition:border-color .15s ease,color .15s ease;
}
.att:hover{border-color:var(--brass-dim);color:var(--txt);}
.att .att-kind{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.12em;
  color:var(--faint);
  border:1px solid var(--line);
  border-radius:2px;
  padding:1px 4px;
}
.att .att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att.add{border-style:dashed;color:var(--faint);}
.att.quiet{cursor:default;border-style:dotted;}
.att.quiet:hover{border-color:var(--line);color:var(--dim);}
.att .att-x{color:var(--faint);padding-left:2px;}
.att .att-x:hover{color:var(--rose);}

.strip-hint{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}

/* drag veil */

.drop-veil{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,16,.82);
  border:1px dashed var(--brass-dim);
  z-index:5;
}
.drop-veil.on{display:flex;}
.drop-veil span{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
}

/* toast */

.toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translate(-50%,14px);
  background:var(--raise);
  border:1px solid var(--line);
  border-radius:4px;
  padding:9px 16px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  z-index:20;
}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ============================================================
   rendered markdown
   ============================================================ */

.markdown > *:first-child{margin-top:0;}

.markdown h1,.markdown h2,.markdown h3,.markdown h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.25;
  text-wrap:balance;
  margin:1.9em 0 .55em;
}
.markdown h1{font-size:1.6rem;}
.markdown h2{font-size:1.32rem;}
.markdown h3{font-size:1.12rem;color:var(--txt);}
.markdown h4{font-size:1rem;color:var(--dim);}

.markdown p{margin:0 0 1.05em;color:var(--txt);}

.markdown a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(111,163,160,.32);}
.markdown a:hover{border-bottom-color:var(--teal);}

.markdown strong{font-weight:600;}
.markdown em{font-style:italic;color:var(--dim);}
.markdown del{color:var(--faint);}

.markdown mark{background:rgba(198,161,91,.2);color:var(--txt);border-radius:2px;padding:0 3px;}

.markdown hr{
  border:0;
  border-top:1px solid var(--line);
  margin:2.2em 0;
}

.markdown blockquote{
  margin:1.4em 0;
  padding:2px 0 2px 18px;
  border-left:2px solid var(--brass-dim);
  color:var(--dim);
  font-family:var(--serif);
  font-size:1.06rem;
}
.markdown blockquote p:last-child{margin-bottom:0;}

.markdown ul,.markdown ol{margin:0 0 1.1em;padding-left:1.35em;}
.markdown li{margin:.3em 0;}
.markdown li::marker{color:var(--brass-dim);}

.markdown li.task{list-style:none;margin-left:-1.1em;display:flex;gap:9px;align-items:baseline;}
.markdown li.task .box{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--faint);
  flex:0 0 auto;
}
.markdown li.task.done{color:var(--faint);text-decoration:line-through;}
.markdown li.task.done .box{color:var(--brass);}

.markdown table{
  width:100%;
  border-collapse:collapse;
  margin:1.4em 0;
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.markdown th,.markdown td{
  border-bottom:1px solid var(--line-soft);
  padding:8px 12px 8px 0;
  text-align:left;
}
.markdown th{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:500;
  border-bottom-color:var(--line);
}

.markdown code.inline{
  font-family:var(--mono);
  font-size:.84em;
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:1px 5px;
  color:var(--brass);
}

/* media */

.markdown figure{margin:1.6em 0;display:flex;flex-direction:column;gap:8px;}
.markdown figure img,.markdown figure video{
  max-width:100%;
  border-radius:5px;
  border:1px solid var(--line);
  display:block;
  background:var(--panel);
}
.markdown figure figcaption{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
}

.markdown .doc-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel);
  color:var(--dim);
  text-decoration:none;
  margin:1.6em 0;
}
.markdown .doc-card:hover{border-color:var(--brass-dim);color:var(--txt);}
.markdown .doc-card .kind{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  color:var(--brass);
  border:1px solid var(--line);
  border-radius:2px;
  padding:3px 6px;
}
.markdown embed.pdf{
  width:100%;
  height:min(72vh,760px);
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel);
  margin:1.6em 0;
}

.markdown .missing{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--rose);
  border:1px dashed var(--line);
  border-radius:4px;
  padding:10px 12px;
  display:block;
  margin:1.4em 0;
}

/* ============================================================
   code blocks
   ============================================================ */

.code-block{
  margin:1.7em 0;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--code-bg);
  overflow:hidden;
}

.code-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}

.code-lang{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass-dim);
}

.code-file{
  font-family:var(--mono);
  font-size:.64rem;
  color:var(--faint);
  margin-left:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.code-copy{
  margin-left:auto;
  border:0;
  background:none;
  cursor:pointer;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  padding:2px 0;
  transition:color .15s ease;
}
.code-copy:hover{color:var(--brass);}
.code-copy.done{color:var(--teal);}

.code-body{display:flex;min-height:0;}

.code-gutter{
  flex:0 0 auto;
  padding:14px 10px 14px 14px;
  text-align:right;
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.75;
  color:#3D4450;
  border-right:1px solid var(--line-soft);
  user-select:none;
  white-space:pre;
  font-variant-numeric:tabular-nums;
}

.code-scroll{
  flex:1;
  min-width:0;
  overflow-x:auto;
  padding:14px 16px;
}

.code-scroll pre{
  margin:0;
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.75;
  color:var(--code-txt);
  white-space:pre;
  tab-size:4;
}

::-webkit-scrollbar{height:9px;width:9px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#333A48;}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent;}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}

/* token colors */
.tk-com{color:var(--c-comment);font-style:italic;}
.tk-kw{color:var(--c-keyword);}
.tk-str{color:var(--c-string);}
.tk-num{color:var(--c-number);}
.tk-fn{color:var(--c-func);}
.tk-ty{color:var(--c-type);}
.tk-bi{color:var(--c-builtin);}
.tk-prop{color:var(--c-prop);}
.tk-pun{color:var(--c-punct);}
.tk-tag{color:var(--c-tag);}
.tk-attr{color:var(--c-attr);}
.tk-esc{color:var(--c-number);}
.tk-add{color:#8FB08A;}
.tk-del{color:var(--rose);}
.tk-meta{color:var(--c-builtin);}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width:900px){
  :root{--rail-w:210px;}
  .entry-bar,.read,#editor,.strip{padding-left:22px;padding-right:22px;}
}

@media (max-width:640px){
  /* ---- Draft A: Two Screens ----------------------------------------
     The list is the home screen; an entry slides over it from the right
     and slides back out. Both live in the same grid cell.              */

  #app{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr);
    overflow:hidden;
  }

  #rail,#pane{grid-area:1 / 1;width:100%;min-width:0;}

  #rail{
    border-right:0;
    transition:transform .26s ease,opacity .26s ease;
  }

  #pane{
    z-index:2;
    transform:translateX(100%);
    transition:transform .26s ease;
    box-shadow:-20px 0 40px -24px #000;
  }

  #app[data-view="entry"] #pane{transform:none;}
  #app[data-view="entry"] #rail{transform:translateX(-14%);opacity:.5;}

  /* header controls that only make sense on a phone */
  .icon-btn.back{display:grid;place-items:center;}
  .pane-star{display:grid;}
  #app[data-view="entry"] .entry-bar .mode-pill{margin-left:0;}

  /* roomier touch targets, tighter margins */
  :root{--rail-w:100%;}
  .rail-head{padding:14px 16px 12px;}
  .brand-name{font-size:1.05rem;}
  #search{height:38px;}
  .icon-btn{width:38px;height:38px;}
  #jump{height:32px;}
  .item{padding:13px 16px 13px 14px;}
  .item-title{font-size:.94rem;}
  .item-date{font-size:.7rem;}
  .month{padding:16px 16px 7px;}

  .entry-bar{
    padding:14px 16px 12px;
    gap:10px;
    align-items:center;
    padding-top:max(14px,env(safe-area-inset-top));
  }
  .entry-head{gap:3px;}
  .entry-title{font-size:1.3rem;}
  .stamp{font-size:.6rem;letter-spacing:.12em;}

  .read,#editor{padding:20px 16px 60px;}
  .markdown p,.markdown h1,.markdown h2,.markdown h3,.markdown h4,
  .markdown ul,.markdown ol,.markdown blockquote,.markdown table{max-width:none;}

  /* code runs to the screen edges and scrolls inside itself */
  .markdown .code-block{
    margin-left:-16px;
    margin-right:-16px;
    border-left:0;
    border-right:0;
    border-radius:0;
    max-width:none;
  }
  .markdown figure,.markdown embed.pdf,.markdown .doc-card{max-width:none;}

  /* bottom furniture clears the home indicator */
  .strip{padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
  .rail-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom));}

}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .star-wrap::before{opacity:.6;}
  .star-wrap::after{display:none;}
}