/* «Тёмное поле» — бумага, тушь, латунь. Никаких неоновых градиентов. */
:root{
  --paper:#e9e0ce; --paper-2:#ded2b8; --paper-3:#cec0a3;
  --ink:#23201b; --ink-2:#544a3d; --ink-3:#8a7c67;
  --ochre:#8a5a2b; --brass:#a8873f; --prussian:#2c3c4c;
  --blood:#8b2f22; --green:#4d6340;
  --rule:rgba(35,32,27,.24);
  --shadow:0 22px 60px rgba(0,0,0,.55);
  --serif:"PT Serif",Georgia,"Times New Roman",serif;
  --sans:"PT Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--serif); color:var(--ink);
  background:#14110d;
  background-image:
    radial-gradient(ellipse at 50% 0%, #2a241c 0%, #14110d 62%);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* зерно бумаги — генерится фильтром, не картинкой */
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.16;mix-blend-mode:multiply}
.grain svg{width:100%;height:100%}

#app{height:100%;display:flex;align-items:center;justify-content:center;padding:18px}

.sheet{
  position:relative;width:min(1180px,100%);height:min(780px,100%);
  background:var(--paper);
  background-image:
    linear-gradient(rgba(206,192,163,.5) .5px,transparent .5px),
    radial-gradient(ellipse at 30% 15%, rgba(255,250,235,.7), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(150,130,95,.28), transparent 60%);
  background-size:100% 26px,100% 100%,100% 100%;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
.sheet::after{ /* след печатной доски */
  content:"";position:absolute;inset:9px;border:1px solid rgba(35,32,27,.16);pointer-events:none;
}

h1,h2,h3{font-weight:400;letter-spacing:.04em}
.caps{text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--ink-3);font-family:var(--sans)}
.lat{font-style:italic;color:var(--ink-3)}
.rule{height:1px;background:var(--rule);border:0}
.dbl{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);height:4px}

button{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid rgba(35,32,27,.4);
  padding:10px 20px;cursor:pointer;transition:.15s;position:relative}
button:hover:not(:disabled){background:rgba(35,32,27,.07);border-color:var(--ink)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.32;cursor:default}
button.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.solid:hover:not(:disabled){background:#3a342b}
button.warn{border-color:var(--blood);color:var(--blood)}
button.ghost{border-color:transparent;color:var(--ink-2);padding:8px 10px}
button.ghost:hover{border-color:transparent;color:var(--ink);background:transparent;text-decoration:underline}

input[type=text]{font-family:var(--serif);font-size:20px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--ink);padding:6px 2px;outline:none;width:100%}
input[type=text]::placeholder{color:var(--ink-3);font-style:italic}

.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
.scroll::-webkit-scrollbar{width:7px}
.scroll::-webkit-scrollbar-thumb{background:rgba(35,32,27,.3)}

.fade{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.slow{animation:fade .9s ease both}