/* notepad page */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font: 17px/1.4 var(--font-hand);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
}

body {
  display: flex;
  padding-top: 34px;
}
body.is-web { padding-top: 0; }
body.is-web #titlebar { display: none; }
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  grid-template-columns: none;
}
.login-gate[hidden] { display: none; }
.login-card { max-width: 360px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.login-setup { display: flex; gap: 8px; }

#titlebar { position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 10; display: flex; align-items: center; gap: 8px; padding-left: 14px; background: #0e1a24; border-bottom: 2px dashed var(--line); -webkit-app-region: drag; user-select: none; }
.titlebar-name { font: 600 14px var(--font-fun); color: var(--ink-soft); letter-spacing: 0.5px; }
.titlebar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: glow-pulse 2.4s ease-in-out infinite; }

.blob { position: fixed; width: 320px; height: 320px; border-radius: var(--blob-round); filter: blur(70px); opacity: 0.22; pointer-events: none; z-index: 0; animation: drift 22s ease-in-out infinite alternate; }
.blob-one { background: var(--cyan); top: -80px; right: -90px; }
.blob-two { background: var(--blue); bottom: -120px; left: 10px; animation-duration: 28s; animation-direction: alternate-reverse; }
.blob-three { background: var(--pink); top: 45%; right: -160px; width: 220px; height: 220px; opacity: 0.1; animation-duration: 34s; }

#sidebar, #content { position: relative; z-index: 1; }

#content::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 2px; background: #ff9fcf88; opacity: 0.55; pointer-events: none; }

h1 {
  font: 600 26px/1.1 var(--font-fun);
  margin: 0;
  color: var(--ink);
  text-shadow: 0 0 12px var(--accent-dim);
  letter-spacing: 0.5px;
}

h2 { margin: 6px 0 0; font: 400 19px var(--font-hand); color: var(--ink); }

h2.marker { display: inline-block; align-self: flex-start; padding: 0 8px; transform: rotate(-1.5deg); background: linear-gradient(100deg, transparent 2%, color-mix(in srgb, var(--accent) 45%, transparent) 6%, color-mix(in srgb, var(--accent) 30%, transparent) 90%, transparent 97%); border-radius: 6px 14px 8px 12px; }

.scribble { color: var(--ink-soft); font-family: var(--font-hand); }
.small { font-size: 14px; }
b { color: var(--accent); font-weight: normal; }

::selection { background: var(--accent-dim); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
::-webkit-scrollbar-track { background: transparent; }