:root{
  color-scheme:light dark;
  --bg:#fff;
  --fg:#141414;
  --muted:#8c8c91;
  --chrome:#ededf0;
  --chrome2:#f3f3f5;
  --yellow:#f8be11;
  --line:#d4d4d7;
  --keyboard:0px;
  --base-bottom:env(safe-area-inset-bottom,0px);
}
@media(prefers-color-scheme:dark){
  :root{--bg:#000;--fg:#fafafa;--muted:#8b8b90;--chrome:#242426;--chrome2:#1c1c1e;--line:#38383a;--yellow:#ffd21e;}
}
*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
body{overflow:hidden}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}
svg{height:25px;width:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.screen{position:relative;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
.header{
  height:112px;padding:calc(env(safe-area-inset-top,0px) + 14px) 22px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px
}
.round{width:49px;height:49px;border-radius:50%;background:var(--chrome);display:grid;place-items:center;flex-shrink:0}
.round svg{width:27px;height:27px}
.actions{display:flex;gap:10px;align-items:center}
.action-pill{border-radius:28px;display:flex;align-items:center;background:var(--chrome);height:49px;padding:0 2px}
.action-pill button{background:transparent;display:grid;place-items:center;width:46px;height:44px}
.action-pill button svg{width:25px;height:25px}
.done{background:var(--yellow);color:#fff}
.done svg{width:28px;height:28px;stroke-width:2.2}
.date{text-align:center;color:var(--muted);font-size:15px;line-height:19px;margin-top:12px;user-select:none;-webkit-user-select:none}
.editor-wrap{position:absolute;top:154px;left:0;right:0;bottom:calc(96px + var(--base-bottom));padding:0 30px;overflow:auto}
.screen.editing .editor-wrap{bottom:calc(82px + var(--keyboard))}
#note{
  display:block;width:100%;min-height:100%;border:0;outline:0;background:transparent;color:var(--fg);
  font:400 18px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  letter-spacing:0;caret-color:var(--yellow);padding:0;margin:0;overflow-wrap:break-word;
  white-space:pre-wrap;-webkit-user-modify:read-write-plaintext-only;
}
#note.title-style{font-size:25px;font-weight:650}
#note:empty::before{content:attr(data-placeholder);color:transparent}
.toolbar{
  position:fixed;border-radius:29px;background:color-mix(in srgb, var(--chrome2) 88%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 84%, transparent);display:flex;align-items:center;
  box-shadow:0 5px 18px #00000020;z-index:3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.toolbar button{background:transparent;display:grid;place-items:center}
.toolbar svg{width:29px;height:29px;stroke-width:1.8}
.toolbar .aa{font-size:23px;letter-spacing:-1px}
.toolbar-editing{
  left:12px;right:12px;height:54px;justify-content:space-around;
  bottom:calc(var(--keyboard) + var(--base-bottom) + 8px);
  opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .18s,transform .18s;
}
.toolbar-editing button{height:100%;width:20%}
.toolbar-idle{
  left:28px;width:306px;max-width:calc(100vw - 132px);height:58px;padding:0 14px;justify-content:space-between;
  bottom:calc(var(--base-bottom) + 16px);
  opacity:1;pointer-events:auto;transform:none;transition:opacity .18s,transform .18s;
}
.toolbar-idle button{width:64px;height:100%}
.compose-button{
  position:fixed;right:24px;bottom:calc(var(--base-bottom) + 16px);width:60px;height:60px;border-radius:50%;
  background:color-mix(in srgb, var(--chrome2) 88%, transparent);border:1px solid color-mix(in srgb, var(--line) 84%, transparent);
  display:grid;place-items:center;z-index:3;box-shadow:0 5px 18px #00000020;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.compose-button svg{width:28px;height:28px;stroke-width:1.9}
.screen.editing .toolbar-editing{opacity:1;pointer-events:auto;transform:none}
.screen.editing .toolbar-idle,.screen.editing .compose-button{opacity:0;pointer-events:none;transform:translateY(14px)}
.scrim{position:fixed;inset:0;background:#0009;z-index:8}
.sheet{position:fixed;z-index:9;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);background:var(--chrome2);border:1px solid var(--line);border-radius:24px;padding:12px 16px 16px;max-width:520px;margin:auto;box-shadow:0 15px 50px #0005}
.sheet .grabber{width:38px;height:5px;border-radius:10px;background:var(--muted);margin:0 auto 14px;opacity:.55}
.sheet h2{font-size:19px;margin:4px 5px 12px}
.sheet p{font-size:13px;color:var(--muted);line-height:1.45;margin:0 5px 16px}
.sheet label{font-size:13px;color:var(--muted);margin-left:5px}
.sheet textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:12px;font-size:16px;resize:vertical;margin:7px 0}
.sheet button{display:block;width:100%;height:48px;border-radius:12px;background:var(--chrome);font-size:16px;margin-top:8px}
.sheet button.primary{background:var(--yellow);color:#141414;font-weight:650}
.drawing-actions{display:flex;gap:8px}
.sheet canvas{display:block;width:100%;touch-action:none;background:white;border-radius:12px;border:1px solid var(--line)}
#toast{position:fixed;z-index:11;top:calc(env(safe-area-inset-top,0px) + 90px);left:50%;transform:translateX(-50%);pointer-events:none;background:var(--chrome);border-radius:12px;padding:10px 16px;font-size:13px;opacity:0;transition:opacity .2s;white-space:nowrap}
#toast.visible{opacity:1}
[hidden]{display:none!important}
@media(max-width:390px){
  .header{padding-left:16px;padding-right:16px}
  .actions{gap:7px}
  .round{height:46px;width:46px}
  .action-pill{height:46px}
  .action-pill button{width:40px}
  .editor-wrap{padding:0 24px}
  .toolbar-idle{left:18px;bottom:calc(var(--base-bottom) + 14px);width:274px;max-width:calc(100vw - 116px)}
  .compose-button{right:18px;bottom:calc(var(--base-bottom) + 14px)}
}
@media(min-width:650px){
  .screen{max-width:520px;margin:auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .toolbar-editing{max-width:494px;margin:auto}
  .toolbar-idle{max-width:300px}
  .editor-wrap{padding:0 30px}
}