/* Textbook doodle: grey-brown linen desk, controls cut from dark brown paper, one serif family.
   Palette from the design: #a39794 desk, #4e4441 dark paper, #e3d9d3 cream card, #e8c9c1 dusty pink. */
:root {
  --bg: #2b2422;
  --surface: #efe6e1;
  --surface-2: #ddd0ca;
  --field: #f6f0ec;
  --bar: #4e4441;
  --disc: #e3d9d3;
  --ink: #3b302c;
  --ink-2: #6d5f5a;
  --ink-3: #a39794;
  --line: #4e4441;
  --accent: #e8c9c1;
  --on-dark: #f1e7e1;
  --danger: #9a4a3a;
  --font: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-weight: 600;
  --title-weight: 900;
  --radius: 0;
  --radius-sm: 0;
  --btn: 44px;
  --tile: #4e4441;
  --pink: #e8c9c1;
  --tile-btn: none;
  --tile-btn-soft: none;
}

html,
body {
  background: var(--bg);
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.frame {
  position: absolute;
  background-color: #a39794;
  background-repeat: repeat;
}

/* ---------- header, laid over the desk ----------
   Narrow: title card, language and export on the first row, the other four buttons on the second (right-aligned).
   Wide: everything on one row. Every control is a cut-paper tile drawn a little inside its 44 px touch area. */
.top {
  position: absolute;
  z-index: var(--z-rail);
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(env(safe-area-inset-top, 0px) + var(--u) * 3) calc(var(--u) * 3) 0;
  pointer-events: none;
}

.top > * {
  pointer-events: auto;
}

.title-tile {
  position: relative;
  flex: none;
  margin-right: auto;
}

.title-card {
  display: block;
}

/* The title is drawn on the card; the heading stays for screen readers. */
.title-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.top-buttons {
  display: none;
}

.top-tools {
  order: 3;
  display: flex;
  justify-content: flex-end;
  flex: 1 1 100%;
  margin-top: calc(var(--u) * 1.2);
}

.top.is-one-row .top-tools {
  order: 0;
  flex: none;
  margin-top: 0;
}

.top .tool,
.lang-seg {
  margin-left: calc(var(--u) * 1.6);
}

.top-tools .tool:first-child {
  margin-left: 0;
}

.top .tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn);
  height: var(--btn);
  padding: 3px;
  background-color: var(--tile);
  background-clip: content-box;
  background-origin: content-box;
  color: var(--on-dark);
  touch-action: manipulation;
}

.top .tool .icon {
  width: 46%;
  height: 46%;
}

.top .tool .icon svg {
  width: 100%;
  height: 100%;
}

.top .tool[disabled] {
  color: #8f817c;
  cursor: default;
}

.top .tool:active,
.lang-seg .seg:active {
  color: var(--pink);
}

/* Language: a two-part switch on one paper strip; the current one is underlined in pink. */
.lang-seg {
  display: flex;
  height: var(--btn);
  background-position: center;
  background-size: 100% calc(100% - 6px) !important;
}

.lang-seg .seg {
  position: relative;
  min-width: var(--btn);
  height: var(--btn);
  padding: 0 calc(var(--u) * 2);
  color: #a99c96;
  font-size: calc(var(--btn) * 0.3);
  line-height: 1;
  touch-action: manipulation;
}

.lang-seg .seg.is-on {
  color: var(--on-dark);
}

.lang-seg .seg.is-on::after {
  content: '';
  position: absolute;
  left: calc(var(--u) * 2);
  right: calc(var(--u) * 2);
  bottom: calc(var(--btn) * 0.16);
  height: calc(var(--u) * 0.6);
  background: var(--pink);
}

/* ---------- stage: the whole frame is the desk ---------- */
.stage {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  touch-action: none;
}

.board {
  position: absolute;
  left: 0;
  top: 0;
  touch-action: none;
}

/* Pens: big tools lying on the desk, coming in from the lower-left edge; the part past the edge is cut off by
   the edge of the desk, like a real table edge. */
.pen-fan {
  position: absolute;
  z-index: var(--z-content);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.pen {
  position: absolute;
  display: block;
  pointer-events: auto;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotate(var(--angle));
  transform: rotate(var(--angle));
  -webkit-transition: -webkit-transform 0.18s ease-out;
  transition: transform 0.18s ease-out;
  touch-action: manipulation;
}

.pen.is-on {
  -webkit-transform: rotate(var(--angle)) translateX(var(--slide));
  transform: rotate(var(--angle)) translateX(var(--slide));
}

.pen-art {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.pen:focus-visible {
  outline: calc(var(--u) * 0.6) solid var(--pink);
}

/* Page dial: half a paper disc on the right edge, turned by dragging. */
.page-dial {
  position: absolute;
  z-index: var(--z-rail);
  right: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.dial-disc {
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--tile);
  border-radius: 50%;
}

.page-dial.is-settling .dial-disc,
.page-dial.is-settling .dial-item {
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}

.dial-item {
  position: absolute;
  background: #efe8dc;
  touch-action: none;
}

.dial-item.is-on {
  outline: calc(var(--u) * 0.8) solid var(--pink);
}

.dial-item:focus-visible {
  outline: calc(var(--u) * 0.8) solid var(--on-dark);
}

.dial-thumb {
  display: block;
  pointer-events: none;
}

.tip-anchor {
  position: fixed;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

/* ---------- shared parts: the same cut paper as the page, square corners ---------- */
.modal {
  background: var(--tile-card) center / 100% 100% no-repeat, var(--surface);
}

.popover {
  border: 0;
  background: transparent;
  overflow: visible;
}

.toast {
  top: var(--toast-top, 120px);
  bottom: auto;
  background: var(--tile-btn) center / 100% 100% no-repeat, var(--tile);
}

.modal {
  position: relative;
}

.modal-close {
  display: none;
}

.modal-head {
  padding-right: 52px;
}

/* The x lies on the dialog's corner: a 26 px paper square inside a 44 px touch area, adding no row of its own.
   Text on the first line wraps around it (.modal-x-room), and the export dialog's first line is the short
   sources link on the left, tall enough that the buttons start below the touch area. */
.modal-x {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--on-dark);
}

.modal-x-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: var(--tile);
}

.modal-x-room {
  float: right;
  width: 28px;
  height: calc(38px - var(--gap-3));
}

.modal-x .icon {
  width: 60%;
  height: 60%;
}

.modal-x .icon svg {
  width: 100%;
  height: 100%;
}

.ink-picker {
  display: flex;
  flex-wrap: wrap;
  width: calc(44px * 4 + 6px * 3);
}

.ink-chip {
  width: 44px;
  height: 44px;
  margin: 0 6px 6px 0;
  background-size: 100% 100%;
}

.ink-chip:nth-child(4n) {
  margin-right: 0;
}

.ink-chip.is-on {
  outline: 3px solid var(--on-dark);
  outline-offset: -3px;
}

.btn,
.btn-primary,
.btn-danger {
  border: 0;
  background: var(--tile-btn) center / 100% 100% no-repeat, var(--tile);
  color: var(--on-dark);
}

.btn-primary,
.btn-danger {
  color: var(--pink);
}

.toast-action,
.modal-progress,
.modal-progress::-webkit-progress-bar,
.modal-progress::-webkit-progress-value {
  border-radius: 0;
}

/* Export choices: the two images side by side, the video on its own row. */
.modal-choices {
  display: flex;
  flex-wrap: wrap;
}

.modal-choices .btn {
  flex: 1 1 0;
  margin-left: 0;
}

.modal-choices .btn:nth-child(2) {
  margin-left: var(--gap-2);
}

.modal-choices .btn:nth-child(3) {
  flex: 1 1 100%;
  margin-top: var(--gap-2);
}

.modal-choices .btn.is-off {
  opacity: 0.4;
  cursor: default;
}

/* Export dialog order on every step: small sources link at the top, then the controls, then the studio credit. */
.modal-stack > .credit-sources-line {
  order: -1;
  align-items: flex-start;
  min-height: calc(44px - var(--gap-3));
  margin: 0 0 var(--gap-1);
  padding-right: 44px;
}

.credit-sources-line {
  display: flex;
  justify-content: flex-start;
}

.credit-sources {
  color: var(--ink-2);
  font-size: calc(var(--u) * 2.8);
  line-height: 1.3;
  text-decoration: underline;
}

/* ---------- landscape phones ---------- */
.frame.is-land .top {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--u) * 2.4);
}