.layout-mechanical-typewriter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #151b1d;
}

.layout-mechanical-typewriter .editor-pane {
  grid-column: 1;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  background: #151b1d;
}

.layout-mechanical-typewriter .document-tabs,
.layout-mechanical-typewriter .editor-toolbar,
.layout-mechanical-typewriter .editor-book-meta,
.layout-mechanical-typewriter .chapter-title-input,
.layout-mechanical-typewriter .writing-area,
.layout-mechanical-typewriter .editor-status,
.layout-mechanical-typewriter .studio-workbench {
  display: none;
}

.layout-mechanical-typewriter .editor-scroll {
  position: relative;
  display: block;
  min-height: calc(100vh - 36px);
  overflow: auto;
  padding: 60px 16px 84px;
  background:
    radial-gradient(circle at 50% -18%, rgba(236, 218, 169, 0.15), transparent 38%),
    linear-gradient(180deg, #2a3132, #111617 76%);
}

.layout-mechanical-typewriter .work-watermark {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 60;
  transform: translateX(-50%);
}

.typewriter-layout-toggle {
  border-color: #9a7434 !important;
  background: #f4e4bc !important;
  color: #2a2115 !important;
}

.typewriter-quick-controls {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 70;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(245, 226, 173, 0.28);
  border-radius: 7px;
  background: rgba(17, 23, 24, 0.92);
  padding: 6px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
}

.typewriter-quick-controls button {
  min-height: 34px;
  border: 1px solid rgba(245, 226, 173, 0.22);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: #f8edd2;
  padding: 0 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.typewriter-quick-controls button:hover,
.typewriter-quick-controls button:focus-visible {
  border-color: rgba(245, 226, 173, 0.58);
  background: rgba(245, 226, 173, 0.14);
  outline: 2px solid #f3d58f;
  outline-offset: 2px;
}

.typewriter-machine {
  --paper-width: min(760px, calc(100vw - 96px));
  --paper-inline-margin: 42px;
  --carriage-hardware-shift: var(--carriage-shift);
  --carriage-hardware-trim: var(--carriage-trim);
  --carriage-return-start: -72px;
  position: relative;
  z-index: 3;
  display: grid;
  width: min(1540px, 100%);
  margin: 0 auto;
  outline: none;
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.42));
}

.typewriter-machine:focus-visible {
  outline: none;
}

.typewriter-machine:focus-visible .typewriter-paper-controls {
  box-shadow: inset 0 0 0 1px rgba(242, 211, 138, 0.65);
}

.typewriter-console {
  position: absolute;
  top: -44px;
  left: 0;
  z-index: 30;
}

.typewriter-console summary {
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 34px;
  border: 1px solid rgba(245, 226, 173, 0.24);
  border-radius: 5px;
  background: rgba(15, 20, 21, 0.92);
  color: #f1e4c7;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.typewriter-console summary::-webkit-details-marker {
  display: none;
}

.typewriter-console[open] summary {
  border-color: rgba(245, 226, 173, 0.55);
  background: #252c2d;
}

.typewriter-console-panel {
  position: absolute;
  top: 40px;
  left: 0;
  display: grid;
  grid-template-columns: minmax(250px, auto) auto minmax(130px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  width: min(940px, calc(100vw - 40px));
  border: 1px solid rgba(245, 226, 173, 0.26);
  border-radius: 7px;
  background: rgba(20, 26, 27, 0.97);
  color: #f4ead4;
  padding: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
}

.typewriter-console-panel button {
  min-height: 32px;
  border: 1px solid rgba(245, 226, 173, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #f4ead4;
  padding: 0 10px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.typewriter-mode-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, 1fr));
  border: 1px solid rgba(245, 226, 173, 0.2);
  border-radius: 5px;
  overflow: hidden;
}

.typewriter-mode-switch button {
  border: 0;
  border-radius: 0;
}

.typewriter-mode-switch button + button {
  border-left: 1px solid rgba(245, 226, 173, 0.18);
}

.typewriter-mode-switch button.active,
.typewriter-sound-toggle[aria-pressed="true"] {
  background: #e8d4a6;
  color: #241f17;
}

.typewriter-hints-toggle[aria-pressed="true"] {
  background: #e8d4a6;
  color: #241f17;
}

.typewriter-volume {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr);
  gap: 8px;
  align-items: center;
  color: #d5c9ae;
  font-size: 10px;
  font-weight: 750;
}

.typewriter-volume input {
  width: 100%;
  accent-color: #d8bd7d;
}

.typewriter-audio-status {
  max-width: 178px;
  color: #9fcfbe;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.3;
}

.typewriter-peer {
  grid-column: 1 / -1;
  color: #9fa9a4;
  font-size: 10px;
  font-weight: 750;
}

.typewriter-peer.connected {
  color: #8fd3bc;
}

.typewriter-tutorial {
  position: fixed;
  top: 62px;
  left: 24px;
  z-index: 90;
  display: grid;
  gap: 14px;
  width: min(342px, calc(100vw - 32px));
  border: 1px solid rgba(235, 214, 164, 0.34);
  border-radius: 6px;
  background: rgba(17, 22, 23, 0.97);
  color: #f4ead3;
  padding: 16px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
}

.typewriter-tutorial-copy {
  display: grid;
  gap: 7px;
}

.typewriter-tutorial-copy small {
  color: #c7ae75;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.typewriter-tutorial-copy strong {
  color: #fff6e2;
  font-size: 17px;
  line-height: 1.2;
}

.typewriter-tutorial-copy p {
  margin: 0;
  color: #d7cfbd;
  font-size: 12px;
  line-height: 1.55;
}

.typewriter-tutorial-copy kbd {
  justify-self: start;
  border: 1px solid rgba(230, 210, 161, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.055);
  color: #e8d8b5;
  padding: 5px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.typewriter-tutorial-actions {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 7px;
}

.typewriter-tutorial-actions button {
  min-height: 34px;
  border: 1px solid rgba(235, 214, 164, 0.24);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #f3ead6;
  padding: 0 10px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.typewriter-tutorial-actions button.primary {
  background: #e2cc96;
  color: #241f17;
}

.typewriter-tutorial-actions button:disabled {
  cursor: default;
  opacity: 0.35;
}

.hints-on [data-hint]::after {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  z-index: 100;
  width: max-content;
  max-width: 190px;
  transform: translateX(-50%) translateY(3px);
  border: 1px solid rgba(235, 214, 164, 0.28);
  border-radius: 4px;
  background: rgba(14, 19, 20, 0.97);
  color: #f4ead3;
  padding: 5px 7px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.36);
  content: attr(data-hint);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms linear, transform 80ms linear;
}

.hints-on [data-hint]:hover::after,
.hints-on [data-hint]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.tutorial-step-1 .typewriter-typebasket-live,
.tutorial-step-2 .typewriter-paper-sheet,
.tutorial-step-3 .typewriter-photo-knob,
.tutorial-step-4 .typewriter-carriage-drag-zone,
.tutorial-step-4 .typewriter-photo-lever,
.tutorial-step-5 .typewriter-photo-bell,
.tutorial-step-5 .typewriter-paper-bail,
.tutorial-step-5 .typewriter-paper-release,
.tutorial-step-5 .typewriter-ribbon-selector {
  outline: 2px solid rgba(245, 218, 147, 0.9);
  outline-offset: 3px;
}

.typewriter-paper-stage {
  position: relative;
  z-index: 4;
  height: 330px;
  overflow: hidden;
  isolation: isolate;
  transition: height 180ms ease;
}

.typewriter-paper-stage.paper-raised {
  height: min(1040px, calc(100vh - 72px));
  overflow: visible;
}

.typewriter-paper-stage.paper-raised .typewriter-paper-sheet {
  top: 18px;
  transform: translateX(-50%) translateY(var(--paper-inspect-y)) perspective(1100px) rotateX(var(--paper-tilt));
  transform-origin: 50% 92%;
}

.typewriter-paper-sheet {
  position: absolute;
  top: calc(282px - 72px - var(--paper-feed) - var(--manual-paper-feed));
  left: 50%;
  z-index: 4;
  display: block;
  width: var(--paper-width);
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
  transform: translateX(-50%) translateX(calc(50% - var(--paper-inline-margin) + var(--paper-shift) + var(--carriage-trim))) translateY(var(--paper-lift)) perspective(1100px) rotateX(var(--paper-tilt));
  transform-origin: 50% 96%;
  border: 1px solid rgba(104, 84, 47, 0.3);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(172, 136, 65, 0.06), transparent 11%, transparent 89%, rgba(172, 136, 65, 0.05)),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(42, 34, 24, 0.035) 31px 32px),
    #fffdf5;
  color: var(--ink-color, #251d13);
  padding: 72px clamp(22px, 6vw, 42px);
  box-sizing: border-box;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 27px;
  text-align: left;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38);
  cursor: grab;
  touch-action: none;
  transition: top 42ms linear, transform 42ms linear, box-shadow 140ms ease;
}

.typewriter-paper-sheet:active {
  cursor: grabbing;
}

.typewriter-paper-sheet.dragging-sheet {
  transition: none;
}

.typewriter-paper-sheet.holder-attached {
  border-top-color: rgba(125, 96, 45, 0.5);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38), inset 0 8px 0 rgba(120, 98, 61, 0.08);
}

.typewriter-paper-sheet.paper-released {
  border-top-color: #b58a43;
  box-shadow: 0 28px 66px rgba(0, 0, 0, 0.44), inset 0 4px 0 rgba(181, 138, 67, 0.14);
}

.typewriter-paper-sheet.inspecting-sheet {
  box-shadow: 0 34px 74px rgba(0, 0, 0, 0.48);
}

.typewriter-paper-copy {
  display: block;
  width: 100%;
  min-height: 702px;
  white-space: pre;
  overflow-wrap: normal;
  font: inherit;
  letter-spacing: 0;
  color: var(--ink-color, #251d13);
  transition: color 160ms ease;
}

.typewriter-paper-counter,
.typewriter-paper-position {
  position: absolute;
  bottom: 16px;
  color: #766b58;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.typewriter-paper-counter {
  left: 20px;
}

.typewriter-paper-position {
  right: 20px;
}

.typewriter-sheet-tabs {
  position: absolute;
  right: 12px;
  bottom: 42px;
  z-index: 8;
  display: flex;
  gap: 4px;
}

.typewriter-sheet-tabs button {
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 28px;
  border: 1px solid rgba(232, 214, 170, 0.28);
  border-radius: 4px;
  background: rgba(18, 24, 25, 0.9);
  color: #f4e6c8;
  padding: 0 8px;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.typewriter-sheet-tabs button.active {
  border-color: rgba(231, 201, 129, 0.72);
  background: #dfc990;
  color: #231e16;
}

.typewriter-sheet-tabs button:disabled {
  cursor: default;
  opacity: 0.35;
}

.typewriter-sheet-tabs button:focus-visible {
  outline: 2px solid #f4d98d;
  outline-offset: 2px;
}

.typewriter-impression-guide {
  position: absolute;
  right: 15%;
  bottom: 28px;
  left: 15%;
  z-index: 6;
  height: 32px;
  border-top: 1px solid rgba(218, 195, 142, 0.2);
  border-bottom: 1px solid rgba(218, 195, 142, 0.12);
  pointer-events: none;
}

.typewriter-impression-guide span {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2px;
  height: 25px;
  background: rgba(117, 61, 36, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 247, 222, 0.12);
}

.typewriter-paper-controls {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(238, 222, 170, 0.17);
  border-radius: 6px;
  background: rgba(21, 27, 28, 0.94);
  padding: 8px 12px;
}

.typewriter-paper-adjust {
  display: grid;
  grid-template-columns: auto 92px;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  color: #d8ccb1;
  font-size: 10px;
  font-weight: 800;
}

.typewriter-paper-adjust input {
  width: 92px;
  accent-color: #d8bd7d;
}

.typewriter-paper-controls button,
.typewriter-command-row button {
  min-height: 32px;
  border: 1px solid rgba(245, 226, 173, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.055);
  color: #eadfc9;
  padding: 0 11px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.typewriter-paper-controls button.active,
.typewriter-paper-controls button[aria-pressed="true"],
.typewriter-paper-controls button:hover,
.typewriter-paper-controls button:focus-visible,
.typewriter-command-row button:hover,
.typewriter-command-row button:focus-visible {
  border-color: rgba(245, 226, 173, 0.52);
  background: rgba(245, 226, 173, 0.12);
  outline: none;
}

.typewriter-body {
  position: relative;
  z-index: 10;
  width: min(1120px, 100%);
  aspect-ratio: 4 / 3;
  margin: -104px auto 0;
  contain: layout style;
}

.typewriter-photo-machine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.typewriter-chassis-image {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.typewriter-frame-image {
  inset: -6% -8.5% -11%;
  z-index: 1;
  width: 117%;
  height: 117%;
}

.typewriter-slot-overlay {
  inset: -6% -8.5% -11%;
  z-index: 6;
  width: 117%;
  height: 117%;
}

.typewriter-slot-overlay.slot-left {
  -webkit-mask-image: radial-gradient(ellipse 5% 11% at 21% 42%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 5% 11% at 21% 42%, #000 62%, transparent 100%);
}

.typewriter-slot-overlay.slot-right {
  -webkit-mask-image: radial-gradient(ellipse 5.5% 12% at 74% 42%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 5.5% 12% at 74% 42%, #000 62%, transparent 100%);
}

.typewriter-carriage-image {
  top: 6.5%;
  left: 50%;
  z-index: 5;
  width: 103.5%;
  height: auto;
  transform: translate3d(calc(-50% + var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0);
  transition: transform 42ms linear, filter 70ms linear;
  will-change: transform;
  backface-visibility: hidden;
}

.dragging-carriage .typewriter-carriage-image,
.dragging-knob .typewriter-carriage-image {
  transition: none;
}

.typewriter-typebasket-live {
  position: absolute;
  top: 29%;
  left: 50%;
  z-index: 9;
  width: 50%;
  height: 25%;
  transform: translateX(-50%);
  pointer-events: none;
  contain: layout style;
}

.typewriter-typebar-target {
  position: absolute;
  top: var(--bar-target-y);
  left: var(--bar-target-x);
  z-index: var(--bar-depth);
  width: clamp(8px, 0.95vw, 12px);
  height: clamp(14px, 1.55vw, 20px);
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

.typewriter-typebar-target:hover,
.typewriter-typebar-target:focus-visible {
  border-color: #f4d98d;
  background: rgba(244, 217, 141, 0.15);
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 217, 141, 0.12);
}

.typewriter-typebar-target.active {
  border-color: rgba(244, 217, 141, 0.34);
}

.typewriter-active-typebar {
  position: absolute;
  top: var(--bar-pivot-y);
  left: var(--bar-pivot-x);
  z-index: var(--bar-depth);
  display: block;
  width: 0;
  height: 100%;
  transform: rotate(var(--bar-rest-angle));
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.typewriter-active-typebar.idle {
  visibility: hidden;
}

.typewriter-active-typebar-arm {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(9px, 1.2vw, 13px);
  height: var(--bar-length);
  transform: translate(-50%, var(--bar-pivot-offset));
  opacity: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.66));
  backface-visibility: hidden;
}

.typewriter-active-typebar-arm img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.typewriter-active-typebar-arm span {
  position: absolute;
  top: var(--bar-face-anchor);
  left: 50%;
  display: grid;
  place-items: center;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: #171512;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.typewriter-photo-knob,
.typewriter-photo-lever,
.typewriter-carriage-drag-zone,
.typewriter-photo-bell,
.typewriter-carriage-release,
.typewriter-paper-bail,
.typewriter-paper-release,
.typewriter-ribbon-selector {
  position: absolute;
  z-index: 12;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.typewriter-photo-knob:hover,
.typewriter-photo-knob:focus-visible,
.typewriter-photo-lever:hover,
.typewriter-photo-lever:focus-visible,
.typewriter-carriage-drag-zone:hover,
.typewriter-carriage-drag-zone:focus-visible,
.typewriter-photo-bell:hover,
.typewriter-photo-bell:focus-visible,
.typewriter-carriage-release:hover,
.typewriter-carriage-release:focus-visible,
.typewriter-paper-bail:hover,
.typewriter-paper-bail:focus-visible,
.typewriter-paper-release:hover,
.typewriter-paper-release:focus-visible,
.typewriter-ribbon-selector:hover,
.typewriter-ribbon-selector:focus-visible {
  border-color: #f4d98d;
  background: rgba(244, 217, 141, 0.18);
  outline: none;
}

.typewriter-paper-bail[aria-pressed="true"],
.typewriter-paper-release[aria-pressed="true"],
.typewriter-ribbon-selector[aria-label="Red ribbon"] {
  border-color: rgba(244, 217, 141, 0.28);
  background: rgba(244, 217, 141, 0.07);
}

.typewriter-photo-knob.knob-left {
  z-index: 16;
  top: 19.3%;
  left: -10.1%;
  width: 9.4%;
  aspect-ratio: 928 / 991;
  padding: 0;
  transform: translate3d(calc(var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0);
  transition: transform 42ms linear;
  will-change: transform;
}

.typewriter-photo-knob.knob-right {
  z-index: 16;
  top: 19.3%;
  right: -10.1%;
  width: 9.4%;
  aspect-ratio: 928 / 991;
  padding: 0;
  transform: translate3d(calc(var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0);
  transition: transform 42ms linear;
  will-change: transform;
}

.typewriter-photo-knob > .typewriter-knob-shell,
.typewriter-knob-face,
.typewriter-knob-face img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.typewriter-photo-knob > .typewriter-knob-shell {
  position: relative;
}

.typewriter-photo-knob.knob-right > .typewriter-knob-shell {
  transform: scaleX(-1);
}

.typewriter-knob-face {
  overflow: hidden;
  transition: transform 42ms linear;
  will-change: transform;
}

.typewriter-photo-knob.knob-left .typewriter-knob-face {
  clip-path: ellipse(36% 50% at 34% 49.4%);
}

.typewriter-photo-knob.knob-right .typewriter-knob-face {
  clip-path: ellipse(36% 50% at 66% 49.4%);
}

.typewriter-photo-knob.knob-left .typewriter-knob-face img {
  transform: rotate(var(--left-knob-roll));
  transform-origin: 34% 49.4%;
}

.typewriter-photo-knob.knob-right .typewriter-knob-face img {
  transform: scaleX(-1) rotate(var(--right-knob-roll));
  transform-origin: 66% 49.4%;
}

.dragging-knob .typewriter-photo-knob,
.dragging-knob .typewriter-knob-face,
.dragging-knob .typewriter-knob-face img {
  transition: none;
}

.typewriter-photo-lever {
  top: 17.8%;
  right: -4.7%;
  z-index: 14;
  width: 12%;
  aspect-ratio: 229 / 560;
  border-radius: 5px;
  padding: 0;
  transform: translate3d(calc(var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0);
  transition: transform 42ms linear;
  will-change: transform;
  cursor: grab;
}

.typewriter-photo-lever img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(var(--lever-angle));
  transform-origin: 14.5% 20%;
  pointer-events: none;
  will-change: transform;
  transition: transform 70ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.dragging-lever .typewriter-photo-lever,
.dragging-lever .typewriter-photo-lever img {
  transition: none;
}

.dragging-lever .typewriter-photo-lever {
  cursor: grabbing;
}

.typewriter-carriage-drag-zone {
  top: 12.5%;
  left: 10%;
  z-index: 16;
  width: 80%;
  height: 11%;
  border-radius: 4px;
  transform: translate3d(calc(var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0);
  transition: transform 42ms linear;
  cursor: ew-resize;
}

.dragging-carriage .typewriter-carriage-drag-zone {
  transition: none;
  cursor: grabbing;
}

.typewriter-photo-bell {
  top: 46%;
  right: 14%;
  width: 8%;
  aspect-ratio: 1;
}

.typewriter-carriage-release {
  top: 18%;
  z-index: 17;
  width: 8%;
  min-width: 28px;
  min-height: 28px;
  aspect-ratio: 1;
  border-radius: 5px;
  transform: translateX(calc(var(--carriage-hardware-shift) + var(--carriage-hardware-trim)));
  transition: transform 42ms linear;
}

.typewriter-carriage-release.release-left {
  left: 6%;
}

.typewriter-carriage-release.release-right {
  right: 6%;
}

.typewriter-paper-bail {
  top: 14%;
  left: 43%;
  z-index: 17;
  width: 14%;
  min-height: 28px;
  height: 11%;
  border-radius: 5px;
  transform: translate3d(calc(var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0);
}

.typewriter-paper-release {
  top: 31%;
  right: auto;
  left: 13%;
  width: 5%;
  height: 10%;
  border-radius: 5px;
}

.typewriter-ribbon-selector {
  top: 34%;
  right: 14%;
  width: 8%;
  aspect-ratio: 1;
}

.typewriter-action {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  width: min(360px, 46%);
  transform: translateX(-50%);
  border: 1px solid rgba(213, 183, 111, 0.38);
  border-radius: 5px;
  background: rgba(14, 17, 17, 0.9);
  padding: 7px 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
}

.display-full .typewriter-action {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.typewriter-live-readout {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  gap: 4px 9px;
  align-items: center;
  color: #f7ead0;
}

.typewriter-live-readout small,
.typewriter-live-readout span {
  color: #b7c6c2;
  font-size: 9px;
  font-weight: 800;
}

.typewriter-live-readout strong {
  overflow: hidden;
  color: #fff6db;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 850;
}

.typewriter-live-readout span {
  white-space: nowrap;
}

.typewriter-manual-keyboard {
  position: absolute;
  top: 62%;
  left: 50%;
  z-index: 9;
  display: grid;
  align-content: center;
  gap: 7px;
  width: min(660px, 68%);
  transform: translateX(-50%) perspective(900px) rotateX(7deg);
  transform-origin: 50% 100%;
}

.typewriter-key-row {
  display: flex;
  justify-content: center;
  gap: clamp(3px, 0.7vw, 7px);
  min-width: 0;
}

.typewriter-key-row.home-row {
  padding-left: 16px;
}

.typewriter-key-row.bottom-row {
  padding-left: 30px;
}

.typewriter-manual-key {
  display: grid;
  place-items: center;
  min-width: clamp(36px, 3.3vw, 50px);
  min-height: clamp(36px, 3.3vw, 50px);
  border: 2px solid #131615;
  border-radius: 50%;
  background: #e8ddbc;
  color: #1b1f1d;
  padding: 0 5px;
  font: inherit;
  font-size: clamp(9px, 0.85vw, 14px);
  font-weight: 900;
  box-shadow: inset 0 -5px 7px rgba(64, 51, 31, 0.28), 0 4px 0 #4a453a, 0 7px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.typewriter-manual-key.wide {
  min-width: clamp(58px, 7vw, 105px);
  border-radius: 999px;
}

.typewriter-manual-key:active {
  transform: translateY(4px);
  box-shadow: inset 0 -2px 5px rgba(64, 51, 31, 0.24), 0 1px 0 #4a453a, 0 3px 6px rgba(0, 0, 0, 0.36);
}

.typewriter-manual-key:focus-visible {
  outline: 3px solid #f4d98d;
  outline-offset: 2px;
}

.typewriter-command-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  padding-top: 4px;
}

.display-paper .typewriter-body,
.display-keyboard .typewriter-paper-stage,
.display-keyboard > .typewriter-paper-controls {
  display: none;
}

.display-paper .typewriter-paper-stage {
  height: min(820px, calc(100vh - 180px));
  overflow: visible;
}

.display-paper .typewriter-paper-sheet {
  top: calc(min(44vh, 380px) - 72px - var(--paper-feed) - var(--manual-paper-feed));
  transform: translateX(-50%) translateX(calc(50% - var(--paper-inline-margin) + var(--paper-shift) + var(--carriage-trim))) translateY(var(--paper-lift)) perspective(1100px) rotateX(var(--paper-tilt));
}

.display-paper .typewriter-impression-guide {
  top: calc(min(44vh, 380px) - 15px);
  bottom: auto;
}

.display-keyboard,
.display-monitor {
  width: min(1024px, 100%);
}

.display-keyboard .typewriter-body,
.display-monitor .typewriter-body {
  width: 100%;
  min-height: min(700px, calc(100vh - 130px));
  aspect-ratio: auto;
  margin: 0;
  border: 1px solid rgba(235, 213, 159, 0.19);
  border-radius: 8px;
  background: #131819;
  padding: clamp(18px, 5vh, 60px) 18px;
}

.display-keyboard .typewriter-photo-machine,
.display-keyboard .typewriter-photo-knob,
.display-keyboard .typewriter-photo-lever,
.display-keyboard .typewriter-carriage-drag-zone,
.display-keyboard .typewriter-photo-bell,
.display-keyboard .typewriter-carriage-release,
.display-keyboard .typewriter-paper-bail,
.display-keyboard .typewriter-paper-release,
.display-keyboard .typewriter-ribbon-selector,
.display-keyboard .typewriter-typebasket-live,
.display-monitor .typewriter-photo-machine,
.display-monitor .typewriter-photo-knob,
.display-monitor .typewriter-photo-lever,
.display-monitor .typewriter-carriage-drag-zone,
.display-monitor .typewriter-photo-bell,
.display-monitor .typewriter-carriage-release,
.display-monitor .typewriter-paper-bail,
.display-monitor .typewriter-paper-release,
.display-monitor .typewriter-ribbon-selector,
.display-monitor .typewriter-typebasket-live {
  display: none;
}

body:has(.display-keyboard) .typewriter-quick-controls,
body:has(.display-paper) .typewriter-quick-controls,
body:has(.display-monitor) .typewriter-quick-controls,
.display-keyboard .typewriter-command-row {
  display: none;
}

.display-keyboard .typewriter-action,
.display-keyboard .typewriter-manual-keyboard,
.display-monitor .typewriter-action,
.display-monitor .typewriter-manual-keyboard {
  position: relative;
  top: auto;
  left: auto;
  width: min(900px, 100%);
  margin: 0 auto;
  transform: none;
}

.display-keyboard .typewriter-action,
.display-monitor .typewriter-action {
  margin-bottom: clamp(24px, 5vh, 48px);
}

.display-keyboard .typewriter-manual-keyboard,
.display-monitor .typewriter-manual-keyboard {
  gap: clamp(10px, 2vh, 18px);
}

.display-keyboard .typewriter-key-row,
.display-monitor .typewriter-key-row {
  gap: clamp(7px, 1.3vw, 14px);
}

.display-keyboard .typewriter-manual-key,
.display-monitor .typewriter-manual-key {
  min-width: clamp(46px, 7vw, 72px);
  min-height: clamp(46px, 7vw, 72px);
  font-size: clamp(13px, 1.9vw, 20px);
}

.display-keyboard .typewriter-manual-key.wide,
.display-monitor .typewriter-manual-key.wide {
  min-width: clamp(110px, 17vw, 190px);
}

.display-monitor {
  width: min(1180px, 100%);
}

.display-monitor .typewriter-paper-stage {
  height: min(510px, 54vh);
}

.display-monitor .typewriter-paper-sheet {
  top: calc(42vh - 72px - var(--paper-feed) - var(--manual-paper-feed));
  transform: translateX(-50%) translateX(calc(50% - var(--paper-inline-margin) + var(--paper-shift) + var(--carriage-trim))) translateY(var(--paper-lift)) perspective(1100px) rotateX(var(--paper-tilt));
}

.display-monitor .typewriter-impression-guide {
  top: calc(42vh - 15px);
  bottom: auto;
}

.display-monitor .typewriter-body {
  min-height: min(430px, 42vh);
  margin-top: 8px;
  padding: 18px;
}

.display-monitor .typewriter-action {
  margin-bottom: 18px;
}

.display-monitor .typewriter-manual-key {
  min-width: clamp(38px, 5.2vw, 62px);
  min-height: clamp(38px, 5.2vw, 62px);
  font-size: clamp(11px, 1.4vw, 16px);
}

.display-monitor .typewriter-manual-key.wide {
  min-width: clamp(92px, 13vw, 156px);
}

.key-pulse-0 .typewriter-manual-key.active {
  animation: typewriter-key-a 82ms ease-out;
}

.key-pulse-1 .typewriter-manual-key.active {
  animation: typewriter-key-b 82ms ease-out;
}

.key-pulse-0 .typewriter-active-typebar.active {
  animation: typewriter-typebar-a 96ms cubic-bezier(0.18, 0.84, 0.24, 1);
}

.key-pulse-1 .typewriter-active-typebar.active {
  animation: typewriter-typebar-b 96ms cubic-bezier(0.18, 0.84, 0.24, 1);
}

.bell-pulse-0 .typewriter-photo-bell,
.manual-bell-pulse-0 .typewriter-photo-bell {
  animation: typewriter-bell-control-a 320ms ease;
}

.bell-pulse-1 .typewriter-photo-bell,
.manual-bell-pulse-1 .typewriter-photo-bell {
  animation: typewriter-bell-control-b 320ms ease;
}

.return-pulse-0 .typewriter-photo-lever img {
  animation: typewriter-lever-a 168ms cubic-bezier(0.2, 0.76, 0.28, 1);
}

.return-pulse-1 .typewriter-photo-lever img {
  animation: typewriter-lever-b 168ms cubic-bezier(0.2, 0.76, 0.28, 1);
}

.return-pulse-0 .typewriter-carriage-image,
.return-pulse-1 .typewriter-carriage-image {
  animation: typewriter-return-carriage 158ms cubic-bezier(0.16, 0.72, 0.22, 1);
}

.return-pulse-0 .typewriter-photo-knob,
.return-pulse-1 .typewriter-photo-knob,
.return-pulse-0 .typewriter-photo-lever,
.return-pulse-1 .typewriter-photo-lever,
.return-pulse-0 .typewriter-carriage-drag-zone,
.return-pulse-1 .typewriter-carriage-drag-zone,
.return-pulse-0 .typewriter-carriage-release,
.return-pulse-1 .typewriter-carriage-release,
.return-pulse-0 .typewriter-paper-bail,
.return-pulse-1 .typewriter-paper-bail {
  animation: typewriter-return-component 158ms cubic-bezier(0.16, 0.72, 0.22, 1);
}

.platen-pulse-0 .typewriter-carriage-image,
.platen-pulse-1 .typewriter-carriage-image {
  animation: typewriter-platen 96ms linear;
}

.platen-pulse-0 .typewriter-photo-knob {
  animation: typewriter-knob-a 180ms ease;
}

.platen-pulse-1 .typewriter-photo-knob {
  animation: typewriter-knob-b 180ms ease;
}

@keyframes typewriter-key-a {
  0%, 100% { transform: translateY(0); }
  55% { transform: translateY(4px); }
}

@keyframes typewriter-key-b {
  0%, 100% { transform: translateY(0); }
  55% { transform: translateY(4px); }
}

@keyframes typewriter-typebar-a {
  0% { transform: rotate(var(--bar-rest-angle)); opacity: 0; }
  10% { opacity: 1; }
  48% { transform: rotate(var(--bar-strike-angle)); opacity: 1; }
  100% { transform: rotate(var(--bar-rest-angle)); opacity: 0; }
}

@keyframes typewriter-typebar-b {
  0% { transform: rotate(var(--bar-rest-angle)); opacity: 0; }
  10% { opacity: 1; }
  48% { transform: rotate(var(--bar-strike-angle)); opacity: 1; }
  100% { transform: rotate(var(--bar-rest-angle)); opacity: 0; }
}

@keyframes typewriter-bell-control-a {
  0%, 100% { border-color: transparent; box-shadow: none; }
  45% { border-color: #f4d98d; box-shadow: 0 0 0 6px rgba(244, 217, 141, 0.16); }
}

@keyframes typewriter-bell-control-b {
  0%, 100% { border-color: transparent; box-shadow: none; }
  45% { border-color: #f4d98d; box-shadow: 0 0 0 6px rgba(244, 217, 141, 0.16); }
}

@keyframes typewriter-return-carriage {
  0% { transform: translate3d(calc(-50% + var(--carriage-return-start) + var(--carriage-hardware-trim)), 0, 0); }
  100% { transform: translate3d(calc(-50% + var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0); }
}

@keyframes typewriter-return-component {
  0% { transform: translate3d(calc(var(--carriage-return-start) + var(--carriage-hardware-trim)), 0, 0); }
  100% { transform: translate3d(calc(var(--carriage-hardware-shift) + var(--carriage-hardware-trim)), 0, 0); }
}

@keyframes typewriter-lever-a {
  0%, 100% { transform: rotate(var(--lever-angle)); }
  42% { transform: rotate(28deg); }
}

@keyframes typewriter-lever-b {
  0%, 100% { transform: rotate(var(--lever-angle)); }
  42% { transform: rotate(28deg); }
}

@keyframes typewriter-knob-a {
  0%, 100% { border-color: transparent; box-shadow: none; }
  50% { border-color: #f4d98d; box-shadow: 0 0 0 5px rgba(244, 217, 141, 0.15); }
}

@keyframes typewriter-knob-b {
  0%, 100% { border-color: transparent; box-shadow: none; }
  50% { border-color: #f4d98d; box-shadow: 0 0 0 5px rgba(244, 217, 141, 0.15); }
}

@keyframes typewriter-platen {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@media (min-width: 781px) and (max-height: 950px) {
  .layout-mechanical-typewriter .editor-scroll {
    padding-top: 48px;
    padding-bottom: 32px;
  }

  .typewriter-machine.display-full {
    --paper-width: min(590px, calc(100vw - 96px));
    --paper-inline-margin: 36px;
    width: min(1180px, 100%);
  }

  .display-full .typewriter-paper-stage {
    height: 286px;
  }

  .display-full .typewriter-paper-stage.paper-raised {
    height: min(820px, calc(100vh - 64px));
  }

  .display-full .typewriter-paper-sheet {
    top: calc(238px - 64px - var(--paper-feed) - var(--manual-paper-feed));
    padding: 64px 36px;
    font-size: 13px;
    line-height: 22px;
  }

  .display-full .typewriter-body {
    width: min(680px, 100%);
    margin-top: -78px;
  }

  .display-full .typewriter-manual-keyboard {
    gap: 5px;
    width: 68%;
  }

  .display-full .typewriter-command-row {
    gap: 5px;
    padding-top: 2px;
  }
}

@media (min-width: 781px) and (max-height: 760px) {
  .layout-mechanical-typewriter .editor-scroll {
    padding-top: 42px;
    padding-bottom: 10px;
  }

  .typewriter-machine.display-full {
    --paper-width: min(510px, calc(100vw - 96px));
    --paper-inline-margin: 30px;
    width: min(1040px, 100%);
  }

  .display-full .typewriter-paper-stage {
    height: 244px;
  }

  .display-full .typewriter-paper-stage.paper-raised {
    height: min(720px, calc(100vh - 56px));
  }

  .display-full .typewriter-paper-sheet {
    top: calc(210px - 56px - var(--paper-feed) - var(--manual-paper-feed));
    padding: 56px 30px;
    font-size: 11px;
    line-height: 19px;
  }

  .display-full .typewriter-body {
    width: min(600px, 100%);
    margin-top: -90px;
  }

  .display-full .typewriter-command-row button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 9px;
  }
}

@media (min-width: 781px) and (max-width: 1399px) and (min-height: 951px) {
  .typewriter-machine {
    --paper-width: min(760px, calc(100vw - 96px));
    --carriage-hardware-shift: clamp(-44px, var(--carriage-shift), 44px);
    --carriage-hardware-trim: clamp(-36px, var(--carriage-trim), 36px);
    --carriage-return-start: -44px;
  }

  .typewriter-body {
    width: min(1120px, calc(100% - 160px));
  }

  .typewriter-photo-knob.knob-left,
  .typewriter-photo-knob.knob-right {
    top: 19%;
    width: 9.8%;
  }

  .typewriter-photo-knob.knob-left {
    left: -10.5%;
  }

  .typewriter-photo-knob.knob-right {
    right: -10.5%;
  }

  .typewriter-photo-lever {
    right: -3.4%;
    width: 10.5%;
  }
}

@media (max-width: 780px) {
  .layout-mechanical-typewriter .editor-scroll {
    min-height: 100vh;
    padding: 62px 8px 44px;
  }

  .layout-mechanical-typewriter .work-watermark {
    top: 56px;
    max-width: calc(100vw - 150px);
    padding-inline: 9px;
    font-size: 9px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .layout-mechanical-typewriter .watermark-label-full {
    display: none;
  }

  .layout-mechanical-typewriter .watermark-label-compact {
    display: inline;
  }

  .typewriter-quick-controls {
    top: 8px;
    right: 8px;
    gap: 4px;
    padding: 4px;
  }

  .typewriter-quick-controls button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 10px;
  }

  .typewriter-machine {
    --paper-width: calc(100vw - 28px);
    --paper-inline-margin: 22px;
    --carriage-hardware-shift: clamp(-12px, var(--carriage-shift), 12px);
    --carriage-hardware-trim: clamp(-24px, var(--carriage-trim), 24px);
    --carriage-return-start: -28px;
  }

  .typewriter-console {
    top: -46px;
    left: 0;
  }

  .typewriter-console-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    width: calc(100vw - 20px);
    max-height: 250px;
    overflow: auto;
  }

  .typewriter-mode-switch,
  .typewriter-volume,
  .typewriter-audio-status,
  .typewriter-peer {
    grid-column: 1 / -1;
  }

  .typewriter-paper-stage {
    height: 274px;
  }

  .typewriter-paper-stage.paper-raised {
    height: min(720px, calc(100vh - 48px));
  }

  .typewriter-paper-sheet {
    top: calc(250px - 62px - var(--paper-feed) - var(--manual-paper-feed));
    padding: 62px 22px;
    font-size: clamp(8px, 1.8vw, 12px);
    line-height: 21px;
  }

  .typewriter-paper-stage.paper-raised .typewriter-paper-copy {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .typewriter-paper-position {
    display: none;
  }

  .typewriter-paper-counter {
    right: 16px;
    bottom: 14px;
    left: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .typewriter-sheet-tabs {
    right: 4px;
    bottom: 38px;
  }

  .typewriter-impression-guide {
    right: 44px;
    bottom: 24px;
    left: 44px;
  }

  .typewriter-paper-controls {
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .typewriter-paper-controls::-webkit-scrollbar {
    display: none;
  }

  .typewriter-paper-controls button {
    flex: 0 0 auto;
  }

  .typewriter-body {
    width: 88%;
    margin-top: -76px;
  }

  .typewriter-carriage-image {
    width: 100%;
  }

  .typewriter-photo-knob.knob-left,
  .typewriter-photo-knob.knob-right {
    top: 19.2%;
    width: 8.6%;
  }

  .typewriter-photo-knob.knob-left {
    left: -7.6%;
  }

  .typewriter-photo-knob.knob-right {
    right: -7.6%;
  }

  .typewriter-photo-lever {
    top: 19%;
    right: -0.4%;
    width: 9.5%;
  }

  .typewriter-action {
    top: 49%;
    width: 56%;
    padding: 5px 7px;
  }

  .typewriter-live-readout {
    grid-template-columns: auto minmax(40px, 1fr);
  }

  .typewriter-live-readout span {
    display: none;
  }

  .typewriter-manual-keyboard {
    top: 56%;
    gap: 4px;
    width: 76%;
  }

  .typewriter-key-row {
    gap: 2px;
  }

  .typewriter-key-row.home-row,
  .typewriter-key-row.bottom-row {
    padding-left: 0;
  }

  .typewriter-manual-key {
    min-width: clamp(23px, 6.4vw, 31px);
    min-height: clamp(23px, 6.4vw, 31px);
    padding: 0 2px;
    font-size: 8px;
    border-width: 1px;
    box-shadow: inset 0 -3px 5px rgba(64, 51, 31, 0.24), 0 2px 0 #4a453a, 0 4px 6px rgba(0, 0, 0, 0.34);
  }

  .typewriter-manual-key.wide {
    min-width: 56px;
  }

  .typewriter-command-row {
    display: none;
  }

  .display-keyboard .typewriter-body,
  .display-monitor .typewriter-body {
    min-height: calc(100vh - 116px);
    margin: 0;
    padding: 24px 8px;
  }

  .display-keyboard .typewriter-action,
  .display-monitor .typewriter-action {
    width: calc(100% - 16px);
    margin-bottom: 24px;
  }

  .display-keyboard .typewriter-manual-keyboard,
  .display-monitor .typewriter-manual-keyboard {
    width: 100%;
    gap: clamp(9px, 2vh, 15px);
  }

  .display-keyboard .typewriter-key-row,
  .display-monitor .typewriter-key-row {
    gap: clamp(3px, 1.1vw, 8px);
  }

  .display-keyboard .typewriter-manual-key,
  .display-monitor .typewriter-manual-key {
    min-width: clamp(30px, 8vw, 56px);
    min-height: clamp(36px, 8vw, 56px);
    font-size: clamp(10px, 2.6vw, 17px);
  }

  .display-keyboard .typewriter-manual-key.wide,
  .display-monitor .typewriter-manual-key.wide {
    min-width: clamp(74px, 19vw, 130px);
  }

  .display-monitor .typewriter-paper-stage {
    height: min(430px, 48vh);
  }

  .display-monitor .typewriter-paper-sheet {
    top: calc(40vh - 62px - var(--paper-feed) - var(--manual-paper-feed));
    transform: translateX(-50%) translateX(calc(50% - var(--paper-inline-margin) + var(--paper-shift) + var(--carriage-trim))) translateY(var(--paper-lift)) perspective(900px) rotateX(var(--paper-tilt));
  }

  .display-monitor .typewriter-impression-guide {
    top: calc(40vh - 15px);
  }
}

@media (min-width: 600px) and (max-width: 780px) {
  .display-full .typewriter-manual-keyboard {
    top: 60%;
    width: 72%;
    gap: 5px;
  }

  .display-full .typewriter-key-row {
    gap: 4px;
  }

  .display-full .typewriter-manual-key {
    min-width: 38px;
    min-height: 38px;
    font-size: 10px;
  }

  .display-full .typewriter-manual-key.wide {
    min-width: 78px;
  }
}

@media (max-width: 599px) {
  .typewriter-machine {
    --paper-width: calc(100vw - 44px);
    --carriage-hardware-shift: clamp(-8px, var(--carriage-shift), 8px);
    --carriage-hardware-trim: clamp(-14px, var(--carriage-trim), 14px);
    --carriage-return-start: -16px;
  }

  .typewriter-body {
    width: 82%;
  }

  .typewriter-paper-sheet,
  .typewriter-paper-stage.paper-raised .typewriter-paper-sheet {
    padding-right: 18px;
    padding-left: 18px;
    transform: translateX(-50%) translateX(calc(var(--mobile-paper-shift) + var(--carriage-trim))) translateY(var(--paper-lift)) perspective(1100px) rotateX(var(--paper-tilt));
    font-size: 6px;
    line-height: 14px;
  }

  .typewriter-paper-copy,
  .typewriter-paper-stage.paper-raised .typewriter-paper-copy {
    white-space: pre;
    overflow-wrap: normal;
  }

  .typewriter-paper-stage.paper-raised .typewriter-paper-sheet {
    top: 18px;
  }

  .typewriter-photo-knob.knob-left,
  .typewriter-photo-knob.knob-right {
    top: 15.6%;
    width: 13.5%;
    min-width: 44px;
    min-height: 44px;
  }

  .typewriter-photo-knob.knob-left {
    left: calc(1% - max(13.3%, 43.4px));
  }

  .typewriter-photo-knob.knob-right {
    right: calc(1% - max(13.3%, 43.4px));
  }

  .typewriter-photo-lever {
    top: 16.1%;
    right: -4.3%;
    width: 14%;
  }

  .display-full .typewriter-manual-keyboard {
    gap: 3px;
    width: 82%;
  }

  .display-full .typewriter-key-row {
    gap: 1px;
  }

  .display-full .typewriter-manual-key {
    min-width: 25px;
    min-height: 30px;
    font-size: 7px;
  }

  .display-full .typewriter-manual-key.wide {
    min-width: 48px;
  }

  .typewriter-tutorial {
    position: absolute;
    top: calc(100% + 12px);
    bottom: auto;
    left: 16px;
  }
}

@media (max-width: 1024px) {
  .typewriter-machine {
    --paper-width: min(680px, calc(100vw - 44px));
  }

  .typewriter-paper-sheet,
  .typewriter-paper-stage.paper-raised .typewriter-paper-sheet {
    transform: translateX(-50%) translateX(calc(var(--mobile-paper-shift) + var(--carriage-trim))) translateY(var(--paper-lift)) perspective(1100px) rotateX(var(--paper-tilt));
  }
}

@media (orientation: portrait) and (min-height: 1000px) and (max-width: 1024px) {
  .layout-mechanical-typewriter .editor-scroll {
    display: grid;
    align-content: center;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .display-keyboard .typewriter-body {
    min-height: calc(100vh - 94px);
    padding: 12px;
  }

  .display-keyboard .typewriter-action {
    margin-bottom: 12px;
  }

  .display-keyboard .typewriter-manual-keyboard {
    gap: 5px;
  }

  .display-keyboard .typewriter-key-row {
    gap: 5px;
  }

  .display-keyboard .typewriter-manual-key {
    min-width: 42px;
    min-height: 42px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-paper-stage,
  .typewriter-paper-sheet,
  .typewriter-impression-guide,
  .typewriter-action,
  .typewriter-carriage-image,
  .typewriter-platen-image,
  .typewriter-typebar-target,
  .typewriter-active-typebar,
  .typewriter-photo-lever,
  .typewriter-manual-key {
    animation: none !important;
    transition: none !important;
  }
}