@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Literata";src:url(fonts/literata.woff2) format("woff2");font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond.woff2) format("woff2");font-display:swap}
@font-face{font-family:"iA Writer Quattro";src:url(fonts/ia-writer-quattro.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-display:swap}

:root{--bg:#F7F6F2;--text:#1C1B19;--muted:#8C8A84;--line:#E4E2DC;--surface:#fff;
  --font:"Source Serif 4",serif;--size:19px;--ui:system-ui,-apple-system,sans-serif;color-scheme:light}
:root[data-theme=dark]{--bg:#141413;--text:#E6E4DE;--muted:#7D7B76;--line:#2A2927;--surface:#1D1C1A;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){
  --bg:#141413;--text:#E6E4DE;--muted:#7D7B76;--line:#2A2927;--surface:#1D1C1A;color-scheme:dark}}

*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
body{overflow:hidden;overscroll-behavior:none;font:13px/1.4 var(--ui);letter-spacing:.02em;background:var(--bg)}
::selection{background:var(--line)}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-user-select:none;user-select:none}
:focus-visible{outline:1.5px solid var(--text);outline-offset:2px}
#ed:focus-visible,.sec-ta:focus-visible{outline:0}

#app{position:fixed;left:0;right:0;top:var(--vt,0px);height:var(--vh,100dvh);
  --gx:max(16px,env(safe-area-inset-left),calc((100% - 66ch)/2))}

/* glyphs */
.g{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);border-radius:50%;flex:none;
  transition:opacity .2s,color .2s,visibility 0s}
.g svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-opacity:1}
.g:hover,.g[aria-pressed=true],.g:focus-visible{color:var(--text)}
#sprite{position:absolute;width:0;height:0}
.pulse{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* top bar */
#top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:flex-start;pointer-events:none;
  height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(4px,env(safe-area-inset-right)) 0 max(4px,env(safe-area-inset-left));
  background:linear-gradient(var(--bg) 62%,transparent);transition:opacity .2s,visibility 0s}
#top>*{pointer-events:auto}
.sp{flex:1}
#label{position:absolute;left:50%;top:env(safe-area-inset-top);transform:translateX(-50%);height:44px;max-width:calc(100% - 200px);padding:0 12px;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#label:hover{color:var(--text)}
.zen:not(.reader) #top{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.offline:not(.reader) #bk,.offline #fl{opacity:.15;pointer-events:none}

/* editor */
#ed,#rd{position:absolute;inset:0;width:100%;height:100%;font:var(--size)/1.7 var(--font);color:var(--text);letter-spacing:0}
#ed{background:none;border:0;resize:none;border-radius:0;caret-color:var(--text);
  padding:18vh var(--gx) 30vh;transition:none}
#ed.out{opacity:0;transform:translateY(-24px);transition:opacity .4s ease-out,transform .4s ease-out}

#zen,#send{position:absolute;bottom:max(4px,env(safe-area-inset-bottom))}
#zen{left:max(4px,env(safe-area-inset-left))}
.zen #zen{opacity:.2}
.zen #zen:hover,.zen #zen:focus-visible{opacity:1}
#send{display:none;right:max(4px,env(safe-area-inset-right));opacity:0;visibility:hidden;color:var(--text)}
@media(pointer:coarse){#send{display:grid}}
.has #send{opacity:1;visibility:visible}
.reader #zen,.reader #send{opacity:0;visibility:hidden}

/* reader */
#rd,#scr{display:none}
.reader #ed{display:none}
.reader #rd{display:block;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;outline:0}
#rd::-webkit-scrollbar{display:none}
#rb{padding:calc(44px + 8vh) max(32px,var(--gx)) 24vh var(--gx)}
#rb h2{font-weight:400;font-size:.68em;font-variant-caps:all-small-caps;letter-spacing:.14em;color:var(--muted);margin:3.2em 0 1.6em}
#rb h2:first-child{margin-top:0}
.sec{position:relative;cursor:text;border-radius:4px}
.sec p{margin-bottom:.9em;overflow-wrap:break-word}
.sec.pending::before,.sec.declined::before,.sec.failed::before{content:"";position:absolute;left:-13px;top:.78em;width:6px;height:6px;border-radius:50%;
  background:var(--muted)}
.sec.declined::before,.sec.failed::before{background:none;border:1.5px solid var(--muted)}
.sec-ed{margin:0 0 1.4em}
.sec-ta{display:block;width:100%;min-height:6em;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  resize:none;font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit}
.orig{margin-top:12px;padding-left:12px;border-left:1px solid var(--line);color:var(--muted)}
.orig p{margin-bottom:.6em}
.row{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px}

#scr{position:absolute;z-index:5;right:0;top:calc(44px + env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));width:32px;touch-action:none;cursor:pointer}
.reader #scr{display:block}
#scr i{position:absolute;right:6px;display:block;background:var(--line)}
.trk{top:0;bottom:0;width:4px;border-radius:2px}
.th{top:0;width:4px;height:28px;border-radius:2px;background:var(--muted)!important}
#scr .tk{right:6px;width:12px;height:1px;background:var(--muted);opacity:.7}
#sl{position:absolute;right:38px;padding:6px 10px;border-radius:6px;background:var(--surface);border:1px solid var(--line);
  white-space:nowrap;color:var(--text);transform:translateY(-3px);pointer-events:none}

/* layers */
#scrim{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.set-open #scrim{opacity:1;pointer-events:auto}
@media(pointer:coarse),(max-width:700px){.side-open #scrim{opacity:1;pointer-events:auto}}
#edge{display:none}
@media(hover:hover) and (pointer:fine){#edge{display:block;position:absolute;left:0;top:56px;bottom:56px;width:16px;z-index:15}
  .zen:not(.reader) #edge{display:none}}

#side,#set{position:absolute;top:0;bottom:0;left:0;z-index:30;overflow-y:auto;background:var(--surface);
  border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .2s ease-out;
  padding:calc(12px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#side{width:min(300px,85vw)}
#set{width:360px;max-width:100vw;padding-left:max(20px,env(safe-area-inset-left));padding-right:20px;padding-top:calc(4px + env(safe-area-inset-top))}
@media(max-width:700px){#set{width:100%;border:0}}
#side.on,#set.on{transform:none}

#side button{display:block;width:100%;min-height:44px;text-align:left;padding:0 10px;border-radius:6px;color:var(--muted)}
#side button:hover,#side .cur{color:var(--text)}
.prow{display:flex;align-items:center;margin-top:8px}
.prow .pn{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)!important}
#side .prow .g{width:44px}
#side .ch{padding-left:22px}
#side .ch.cur::after{content:" ●";font-size:.8em}
#side .add{opacity:.8}
.ren{width:100%;min-height:44px;padding:0 10px;background:none;border:0;border-bottom:1px solid var(--text);outline:0;border-radius:0}
#side,.ch,.pn{-webkit-touch-callout:none}

#insp{position:absolute;inset:0;z-index:40;overflow-y:auto;opacity:0;transition:opacity .16s;
  background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#insp.on{opacity:1}
#cards{max-width:calc(66ch + 32px);margin:0 auto;padding:calc(7vh + env(safe-area-inset-top)) 16px 10vh}
.ih{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-bottom:4px}
.card{position:relative;margin-top:14px;padding:20px 52px 20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  font:17px/1.65 var(--font);letter-spacing:0}
.card .g{position:absolute;top:4px;right:4px}

#menu{position:fixed;z-index:50;min-width:160px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.14)}
#menu button{display:block;width:100%;min-height:44px;padding:0 14px;text-align:left;border-radius:6px}
#menu button:hover,#menu button:focus-visible{background:var(--line)}
#toast{position:absolute;z-index:60;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(90vw,420px);
  padding:10px 16px;border-radius:8px;background:var(--text);color:var(--bg);opacity:0;pointer-events:none;transition:opacity .16s;text-align:center}
#toast.on{opacity:1}

/* settings */
.phead{display:flex;justify-content:flex-end;margin:0 -12px 0 0}
#set section{padding:20px 0;border-top:1px solid var(--line)}
#set section:first-of-type{border-top:0;padding-top:4px}
#set h3{font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
#set ul{margin:6px 0;padding-left:18px;color:var(--muted)}
#set li{margin:4px 0;overflow-wrap:anywhere}
#set a{color:var(--text)}
#set p,.note{color:var(--muted);margin:6px 0;overflow-wrap:anywhere}
#set .warn{color:var(--text);border-left:2px solid var(--text);padding-left:10px}
#set input:not([type=range]),#set select,#set textarea{width:100%;min-height:44px;padding:8px 12px;background:none;border:1px solid var(--line);border-radius:8px;margin:4px 0}
#set textarea{min-height:240px;resize:vertical;font:13px/1.55 ui-monospace,Menlo,monospace}
#set input[type=range]{width:100%;height:44px;accent-color:var(--text)}
#set label{display:block;color:var(--muted);margin-top:10px}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;color:var(--muted);border-radius:8px;text-decoration:none}
.b:hover,.b[aria-pressed=true],.b:focus-visible{color:var(--text)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;margin:4px 0}
.seg .b{flex:1;border-radius:7px;padding:0 6px}
.seg .b[aria-pressed=true]{background:var(--line)}
.fonts .b{display:flex;width:100%;justify-content:flex-start;font-size:17px;letter-spacing:0;border:1px solid transparent}
.fonts .b[aria-pressed=true]{border-color:var(--text);background:none}
.sty{border:1px solid var(--line);border-radius:10px;margin:8px 0;padding:0 12px}
.sty>.sh{display:block;width:100%;min-height:44px;text-align:left;color:var(--text)}
.sty .in{padding-bottom:12px}
.file{display:flex;align-items:center;justify-content:space-between;color:var(--muted);min-height:36px}
.file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .g{width:36px;height:36px}
.b.solid{border:1px solid var(--line)}
.acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

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

/* iOS Safari zooms on focus when a control's font is under 16px */
@media(pointer:coarse){#set input,#set select,#set textarea,.ren{font-size:16px}#ed,.sec-ta{font-size:max(var(--size),16px)}}

/* sign-in */
body.plain{overflow:auto}
.login{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 16px;
  max-width:360px;margin:0 auto;text-align:center}
.login h1{font:400 28px var(--font);letter-spacing:0}
.login img{filter:var(--icon-filter,none)}
@media(prefers-color-scheme:dark){.login img{filter:invert(1)}}
.login .form{display:flex;flex-direction:column;gap:10px;width:100%}
.login label{display:block;text-align:left;color:var(--muted)}
.login input{width:100%;min-height:44px;margin-top:4px;padding:8px 12px;background:none;border:1px solid var(--line);border-radius:8px;font-size:16px}
.login .b{width:100%}
.login p{color:var(--muted)}
.login a{color:var(--text)}
#msg{color:var(--text);border-left:2px solid var(--text);padding-left:10px;text-align:left}

/* the iPhone app is older than the server's minimum version */
#upd{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;
  text-align:center;background:var(--bg);font:400 20px var(--font)}
#upd .note{font:13px var(--ui)}