:root {
  --desk: #342316;
  --desk-dark: #20140d;
  --paper: #fbf7ed;
  --paper-edge: #eadfc8;
  --paper-fiber: rgba(91, 69, 38, .055);
  --ink: #17283a;
  --graphite: #31302b;
  --brass: #b79455;
  --shadow: rgba(16, 10, 7, .48);
  color: var(--graphite);
  background: var(--desk);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, .08), transparent 24%),
    linear-gradient(105deg, rgba(255, 255, 255, .05), transparent 34%),
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, var(--desk), var(--desk-dark));
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

#desk {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 0;
}

#page {
  position: fixed;
  left: calc(50% + clamp(28px, 4vw, 64px));
  top: clamp(22px, 4vh, 40px);
  width: min(56vw, calc((100vh - 140px) * .7727), 720px);
  max-height: calc(100vh - 140px);
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .42), transparent 24%),
    radial-gradient(circle at 81% 82%, rgba(84, 61, 35, .06), transparent 28%),
    repeating-linear-gradient(86deg, transparent 0 13px, var(--paper-fiber) 13px 14px, transparent 14px 28px),
    repeating-linear-gradient(2deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(23, 40, 58, .028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23, 40, 58, .026) 1px, transparent 1px),
    var(--paper);
  background-size: auto, auto, auto, auto, 24px 24px, 24px 24px, auto;
  border: 1px solid var(--paper-edge);
  border-radius: 4px 7px 5px 3px;
  box-shadow:
    0 30px 70px var(--shadow),
    0 8px 18px rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .56),
    inset 0 -28px 45px rgba(97, 68, 34, .08);
  transform: translateX(-50%) rotate(.25deg);
}

.paper-tape {
  position: absolute;
  z-index: 3;
  width: 104px;
  height: 30px;
  top: -12px;
  background: rgba(228, 207, 160, .74);
  border: 1px solid rgba(123, 93, 47, .18);
  box-shadow: 0 4px 11px rgba(0, 0, 0, .18);
}

.paper-tape-left {
  left: -20px;
  transform: rotate(-10deg);
}

.paper-tape-right {
  right: -22px;
  transform: rotate(8deg);
}

.paper-date {
  position: absolute;
  right: 36px;
  top: 30px;
  color: rgba(23, 40, 58, .62);
  font-size: 15px;
  font-style: italic;
  transform: rotate(-2deg);
}

#writing {
  position: absolute;
  left: clamp(34px, 7%, 58px);
  top: clamp(68px, 12%, 98px);
  height: min(28%, 180px);
  width: calc(100% - clamp(70px, 13%, 106px));
  overflow: visible;
}

#writing path {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--stroke-width, 2.2);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 .2px .15px rgba(23, 40, 58, .35));
}

#status {
  position: absolute;
  right: 26px;
  bottom: 18px;
  color: rgba(23, 40, 58, .42);
  font: italic 14px/1 Georgia, "Times New Roman", serif;
}

#controlPanel {
  position: fixed;
  top: clamp(74px, 12vh, 112px);
  left: 22px;
  z-index: 4;
  display: grid;
  align-items: stretch;
  gap: 13px;
  width: 190px;
  margin: 0;
  padding: 16px 14px;
  color: #eadfca;
  background: rgba(64, 43, 26, .78);
  border: 1px solid rgba(236, 214, 170, .18);
  border-radius: 4px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
  backdrop-filter: blur(4px);
}

.control {
  display: grid;
  gap: 7px;
  min-width: 0;
  font: 12px/1 Arial, Helvetica, sans-serif;
}

.control span {
  line-height: 1;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--brass);
}

#biasValue {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

select {
  height: 30px;
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid rgba(236, 214, 170, .36);
  border-radius: 3px;
  background: #eadfca;
  color: #2e2015;
}

#bottomBar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 10px;
  width: min(56vw, calc((100vh - 140px) * .7727), 720px);
  height: 66px;
  margin: 0;
  padding: 9px 10px 9px 16px;
  background: rgba(238, 226, 201, .9);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 4px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(117, 84, 41, .12);
  transform: translateX(calc(-50% + clamp(28px, 4vw, 64px)));
}

#textInput {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(49, 48, 43, .32);
  outline: none;
  padding: 0 10px;
  color: var(--ink);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-style: italic;
  letter-spacing: 0;
}

#textInput::placeholder {
  color: rgba(49, 48, 43, .42);
}

#drawButton {
  display: grid;
  place-items: center;
  height: 48px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, #c4a25e, #8b642e);
  color: #20140d;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, .18), inset 0 -5px 9px rgba(0, 0, 0, .16);
}

#drawButton svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #20140d;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#drawButton:hover,
#drawButton:focus-visible {
  filter: brightness(1.06);
}

#drawButton[disabled] {
  color: rgba(32, 20, 13, .45);
  cursor: default;
}

#saveButton {
  position: fixed;
  right: clamp(22px, 4vw, 46px);
  top: clamp(82px, 12vh, 120px);
  z-index: 4;
  width: 116px;
  height: 92px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eadfca;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .3));
}

#saveButton svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .26));
}

.envelope-body,
.envelope-shadow {
  fill: #efe3cd;
}

.envelope-body {
  stroke: #c8ad7f;
  stroke-width: 2.4;
}

.envelope-shadow {
  opacity: .18;
  fill: #8c6b3e;
}

.envelope-flap,
.envelope-fold,
.seal-mark {
  fill: none;
  stroke: #b2915f;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seal-wax {
  fill: #8d1918;
  stroke: #5f0e0d;
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}

.seal-mark {
  stroke: rgba(255, 232, 206, .5);
  stroke-width: 2;
}

.object-label {
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  white-space: nowrap;
  font: italic 12px/1 Georgia, "Times New Roman", serif;
}

@media (max-width: 760px) {
  :root {
    font-size: 16px;
  }

  body {
    overflow: auto;
  }

  #desk {
    min-height: 100svh;
    height: auto;
    padding: 12px 10px 154px;
  }

  #controlPanel {
    left: 10px;
    right: auto;
    top: auto;
    bottom: 84px;
    width: min(calc(100vw - 20px), 380px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px 8px;
    padding: 10px;
  }

  .control {
    justify-content: space-between;
    font-size: 11px;
    min-width: 0;
    gap: 6px;
  }

  .control span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  input[type="range"] {
    width: min(22vw, 88px);
    min-width: 70px;
  }

  #page {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(100%, calc((100svh - 250px) * .7727));
    min-height: auto;
    aspect-ratio: 8.5 / 11;
    margin: 0 auto;
    transform: none;
  }

  .paper-tape {
    width: 78px;
    height: 24px;
  }

  .paper-date {
    display: none;
  }

  #writing {
    left: 24px;
    top: 58px;
    height: 30%;
    width: calc(100% - 42px);
  }

  #saveButton {
    right: 10px;
    top: 18px;
    width: 78px;
    height: 62px;
  }

  .object-label {
    display: none;
  }

  #bottomBar {
    left: 50%;
    right: auto;
    bottom: 12px;
    width: min(calc(100vw - 20px), 380px);
    grid-template-columns: minmax(0, 1fr) 52px;
    height: 62px;
    gap: 7px;
    padding: 8px 8px 8px 12px;
    transform: translateX(-50%);
  }

  #textInput {
    height: 44px;
    padding: 0 4px;
    font-size: 17px;
  }

  #drawButton {
    height: 44px;
  }

  #drawButton svg {
    width: 27px;
    height: 27px;
  }

  #status {
    right: 16px;
    bottom: 12px;
    font-size: 12px;
  }
}