:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #26382d;
  background: #e9ede4;
  --green: #345b43;
  --paper: #fffef9;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; width: 100%; }
body {
  background: radial-gradient(ellipse at 8% 0%, #f8f8ef 0%, transparent 58%),
    radial-gradient(ellipse at 100% 100%, #d9e3d2 0%, transparent 55%);
}
button, input, textarea { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--green);
  color: #fffef3;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1;
  user-select: none;
  box-shadow: inset 0 1px 0 #ffffff22, 0 4px 8px #263b2b0c;
}
.login-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}
.login-page::before, .login-page::after {
  content: "";
  position: fixed;
  width: min(780px, 95vw);
  aspect-ratio: 1;
  border: 1px solid #57784912;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.login-page::before { transform: translate(-270px, -220px); }
.login-page::after { transform: translate(300px, 230px); }
.login-shell {
  width: min(414px, calc(100% - 40px));
  padding: 50px 40px 45px;
  margin: 32px 0 70px;
  background: #fffef9e8;
  border: 1px solid #ffffff;
  outline: 1px solid #4a634010;
  border-radius: 24px;
  box-shadow: 0 25px 70px -35px #3d553d46, 0 2px 5px #3d553d05;
  text-align: center;
  animation: arrive .5s ease-out both;
}
.login-mark {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border-radius: 20px 20px 20px 6px;
  font-size: 60px;
  padding: 0 4px 12px 0;
  transform: rotate(-5deg);
}
h1 {
  font-size: 24px;
  font-weight: 570;
  letter-spacing: -1px;
  margin: 24px 0 36px;
}
#loginForm {
  position: relative;
  border-radius: 12px;
  background: #f3f4ed;
  border: 1px solid #dce2d5;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
#loginForm:focus-within {
  background: #fffefb;
  border-color: #83a078;
  box-shadow: 0 0 0 4px #7f9e6c12;
}
input {
  display: block;
  width: 100%;
  height: 56px;
  border: 0;
  outline: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  padding: 12px 58px 12px 45px;
  letter-spacing: 3px;
  font-size: 19px;
}
input:disabled { opacity: .5; }
.input-lock {
  position: absolute;
  width: 19px;
  height: 19px;
  left: 17px;
  top: 18px;
  color: #85947c;
  pointer-events: none;
}
.enter-button {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fffef7;
  transition: background .18s, transform .18s;
}
.enter-button svg { width: 20px; height: 20px; transition: transform .18s; }
.enter-button:hover { background: #264b34; }
.enter-button:hover svg { transform: translateX(2px); }
.enter-button:active { transform: scale(.95); }
.enter-button:focus-visible { outline: 2px solid #759265; outline-offset: 3px; }
#loginForm:has(input:disabled) .enter-button { opacity: .5; pointer-events: none; }
.editor-page {
  height: 100vh;
  height: 100dvh;
  padding: 30px clamp(24px, 5vw, 80px);
  overflow: hidden;
}
.editor-shell {
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr) 30px;
  height: 100%;
  width: 100%;
  max-width: 1180px;
  margin: auto;
  border: 1px solid #fffefc;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 18px 65px -30px #40553b33, 0 1px 4px #40553b09;
  overflow: hidden;
  animation: arrive .4s ease-out both;
  transition: box-shadow .25s;
}
.editor-shell:focus-within { box-shadow: 0 18px 65px -30px #40553b33, 0 0 0 1px #9baf8a55; }
.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 34px;
  border-bottom: 1px solid #e9ece2;
}
.editor-mark { width: 34px; height: 34px; font-size: 30px; border-radius: 10px 10px 10px 3px; padding: 0 2px 6px 0; }
.connection-light { width: 6px; height: 6px; border-radius: 50%; background: #cbd3c3; transition: background .3s, box-shadow .3s; }
.editor-shell:has(textarea[data-state="saved"]) .connection-light { background: #739260; box-shadow: 0 0 0 4px #7392600c; }
.editor-shell:has(textarea[data-state="saving"]) .connection-light { background: #b49a60; animation: breathe 1.2s ease-in-out infinite; }
.editor-shell:has(textarea[data-state="offline"]) .connection-light { background: #bd7955; }
textarea {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 31px 42px 24px;
  border: 0;
  outline: 0;
  border-radius: 0;
  resize: none;
  background: transparent;
  color: #2c3a30;
  font: 16px/1.9 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .05px;
  tab-size: 2;
  caret-color: #527e43;
  scrollbar-width: thin;
  scrollbar-color: #d4dccc transparent;
  transition: opacity .2s;
}
textarea::selection { background: #dce8cf; color: #233a29; }
textarea:disabled { opacity: .5; }
.paper-foot { display: flex; justify-content: center; align-items: center; }
.paper-foot span { display: block; width: 28px; height: 3px; border-radius: 3px; background: #e4e9dc; }
@keyframes arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { 50% { opacity: .35; } }
@media (max-width: 600px) {
  .login-shell { padding: 38px 28px 32px; max-width: 354px; border-radius: 20px; }
  .login-mark { width: 64px; height: 64px; font-size: 55px; border-radius: 18px 18px 18px 5px; }
  h1 { font-size: 22px; margin-bottom: 29px; }
  .editor-page { padding: 12px; }
  .editor-shell { border-radius: 13px; grid-template-rows: 64px minmax(0, 1fr) 22px; }
  .editor-header { margin: 0 21px; }
  .editor-mark { width: 30px; height: 30px; font-size: 27px; border-radius: 9px 9px 9px 3px; }
  textarea { padding: 23px 22px; font-size: 16px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}