@property --paper-edge {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --paper-spread {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.site-header .paipan-entry-wrap {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1.2vw, 29px);
}

.type-box-entry {
  --entry-width: clamp(69px, 7.3vw, 156px);
  display: grid;
  width: var(--entry-width);
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  place-items: center;
}

.type-box-entry-prop {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1436 / 816;
  container-type: inline-size;
  filter: drop-shadow(0 2px 2px #34463436);
  transition: transform 200ms cubic-bezier(.22,1,.36,1);
}

.type-box-entry:hover .type-box-entry-prop { transform: translateY(-2px) rotate(-3deg); }
html:has(.type-box-studio[open]) .type-box-entry-prop { visibility: hidden; }

.type-box-studio {
  --type-ink: #344b3c;
  --type-paper: #f7f2e6;
  --type-line: #c7b899;
  --type-title: "Noto Serif SC", "Songti SC", SimSun, serif;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(20px, 6vh, 90px) clamp(15px, 5vw, 80px);
  border: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  background: transparent;
  color: var(--type-ink);
  font-family: var(--type-title);
}

.type-box-studio[open] { display: grid; align-items: start; justify-items: center; }
.type-box-studio::backdrop { background: transparent; }
.type-box-studio [hidden] { display: none; }
html:has(.type-box-studio[open]) { overflow: hidden; scrollbar-gutter: stable; }

.type-box-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 71% 49%, #fcf8ea, #f0ebdc 68%, #e2e7dd);
  pointer-events: none;
}

.type-box-sheet {
  position: relative;
  isolation: isolate;
  width: min(100%, 1080px);
  padding: clamp(18px, 4vw, 48px);
  border: 1px solid #c5bba3;
  border-radius: 7px;
  background: linear-gradient(145deg, #fcf9ee, #f3eddf 82%);
  box-shadow: 0 20px 72px #423a2c19, 0 4px 0 -1px #dfd5be, 0 6px 0 -1px #bfb096;
}

.type-box-sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: .16;
  background: url("assets/paper-stock.webp") center / cover;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.type-box-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: clamp(13px, 2.2vw, 24px);
  margin-bottom: clamp(17px, 3vw, 31px);
  border-bottom: 1px solid var(--type-line);
}

.type-box-heading h2 {
  margin: 0;
  font: 500 clamp(27px, 4vw, 48px)/1.15 var(--type-title);
  letter-spacing: .11em;
}

.type-box-close, .type-box-picker-cancel {
  padding: 7px 0;
  background: transparent;
  color: #516557;
  white-space: nowrap;
  font-size: 14px;
}

.type-box-close span { color: #89754d; }
.type-box-close:hover, .type-box-picker-cancel:hover { text-decoration: underline; text-underline-offset: 4px; }
.type-box-workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(0, 780px) minmax(80px, 1fr);
  justify-items: center;
}
.type-box-controls {
  grid-column: 1 / -1;
  min-height: 34px;
  text-align: center;
}
.type-box-birth-value {
  display: inline;
  margin: 0;
  color: var(--type-ink);
  font: 500 clamp(13px, 1.4vw, 17px)/1.45 var(--type-title);
  font-variant-numeric: tabular-nums;
}
.type-box-confirm, .type-box-skip {
  min-height: 41px;
  padding: 8px 14px;
  border: 1px solid #536c5b;
  border-radius: 4px;
  background: #536c5b;
  color: #fffdf4;
  font-size: 15px;
}

.type-box-confirm:hover { background: #3d5646; }
.type-box-error, .type-box-picker-error { color: #8b3f2e; margin: 8px 0 0; font-size: 14px; }

.type-box-picker {
  --wheel-row: clamp(33px, 6.1dvh, 46px);
  position: fixed;
  inset: auto 0 max(20px, 4vh);
  width: min(calc(100% - 40px), 550px);
  max-width: none;
  max-height: calc(100dvh - 40px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 24px 15px;
  border: 1px solid #cec5b0;
  border-radius: 20px;
  background: #fdfbf5;
  color: var(--type-ink);
  box-shadow: 0 18px 65px #26312536;
  overscroll-behavior: contain;
}
.type-box-picker[open] { animation: type-box-picker-enter 220ms cubic-bezier(.23, 1, .32, 1) both; }
.type-box-picker::backdrop { background: #23271f79; }
@keyframes type-box-picker-enter {
  from { opacity: .4; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.type-box-picker-heading, .type-box-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.type-box-picker-heading { margin-bottom: 13px; }
.type-box-date-options { display: flex; align-items: center; gap: 9px; margin-top: 9px; color: #696958; font-size: 13px; }
.type-box-date-options button { min-height: 31px; padding-inline: 11px; font-size: 13px; }
.type-box-sex {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}
.type-box-sex legend { float: left; margin-right: 4px; color: #566052; font-size: 14px; }
.type-box-sex label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: #495b4b;
  font-size: 14px;
  cursor: pointer;
}
.type-box-sex label:has(:checked) { border-color: #d9e1d5; background: #e9eee3; }
.type-box-sex input { margin: 0; accent-color: #516c54; }
.type-box-picker-heading h3 { margin: 0; font: 500 23px/1.3 var(--type-title); }
.type-box-picker-cancel { min-height: 36px; }
.type-box-calendars {
  display: flex;
  padding: 3px;
  border: 1px solid #e9e5d8;
  border-radius: 24px;
  background: #eeece4;
}
.type-box-calendars button, .type-box-locate {
  min-height: 36px;
  padding: 5px 15px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #546156;
  font: 15px var(--type-title);
}
.type-box-calendars button[aria-pressed=true] {
  background: #fffdf7;
  color: #314b38;
  box-shadow: 0 1px 3px #4d49351b;
}
.type-box-confirm { border-radius: 22px; padding-inline: 24px; }
.type-box-quick {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 14px 0 16px;
  padding: 4px;
  border: 1px solid #e6e1d4;
  border-radius: 24px;
  background: #f1eee6;
}
.type-box-quick input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--type-ink);
  font: 16px var(--type-title);
}
.type-box-quick input::placeholder { color: #696b60; opacity: 1; }
.type-box-locate { flex-shrink: 0; background: #fffdf7; }
.type-box-locate:hover { background: #e4e9df; }
.type-box-wheel-help { margin: -5px 0 9px; color: #626556; font-size: 12px; }
.type-box-wheels {
  position: relative;
  display: grid;
  grid-template-columns: 1.19fr repeat(4, minmax(0, 1fr));
  text-align: center;
}
.type-box-wheels::before {
  content: "";
  position: absolute;
  inset: auto 0 calc(2 * var(--wheel-row));
  height: var(--wheel-row);
  border-block: 1px solid #dee5d9;
  border-radius: 9px;
  background: #e8eee4;
  box-sizing: border-box;
  pointer-events: none;
}
.type-box-wheel-column { min-width: 0; }
.type-box-wheel-column > span { display: block; margin-bottom: 4px; color: #4b5d4d; font-size: 15px; }
.type-box-wheel {
  position: relative;
  box-sizing: border-box;
  height: calc(5 * var(--wheel-row));
  padding-block: calc(2 * var(--wheel-row));
  overflow: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
}
.type-box-wheel::-webkit-scrollbar { display: none; }
.type-box-wheel:focus-visible { outline-offset: -2px; border-radius: 8px; }
.type-box-wheel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.type-box-wheel-option {
  display: grid;
  place-items: center;
  height: var(--wheel-row);
  scroll-snap-align: center;
  font: 500 clamp(17px, 3.8vw, 24px)/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #737b70;
  cursor: grab;
  user-select: none;
}
.type-box-wheel.is-dragging .type-box-wheel-option { cursor: grabbing; }
.type-box-wheel-option[aria-selected=true] { color: #253c2c; font-weight: 700; }
.type-box-wheel-option[data-value="-1"] { font-size: clamp(14px, 3.6vw, 18px); }
.type-box-picker-foot { min-height: 30px; margin-top: 5px; }
.type-box-leap:not([hidden]) { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; font-size: 14px; }
.type-box-leap input { accent-color: #58715d; }
.type-box-pillar-fields { margin-top: 12px; }
.type-box-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 11px 0 16px;
  border-bottom: 1px solid #e4ddcc;
}
.type-box-pillar-column { display: grid; justify-items: center; gap: 7px; }
.type-box-pillar-column > span { color: #4b5d4d; font-size: 14px; }
.type-box-pillar-column button, .type-box-pillar-options button {
  min-height: 42px;
  border: 1px solid #e4ddca;
  border-radius: 8px;
  background: #f3efe3;
  color: #526455;
  font: 600 19px/1 var(--type-title);
}
.type-box-pillar-column button { width: min(100%, 58px); }
.type-box-pillar-column button[aria-pressed=true] { border-color: #78927d; background: #e7eee3; }
.type-box-pillar-column button:disabled { opacity: .47; }
.type-box-pillar-options button:hover { border-color: #78927d; background: #e7eee3; }
.type-box-pillar-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0 5px; }
.type-box-pillar-step { margin: 0; font-size: 14px; color: #506255; }
.type-box-pillar-clear { padding: 7px; background: transparent; color: #646551; font-size: 13px; }
.type-box-pillar-clear:disabled { opacity: .47; }
.type-box-pillar-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.type-box-pillar-options:is([data-kind=branches],[data-kind=pairs]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.type-box-pillar-options [data-choice=未知] { grid-column: 1 / -1; font-size: 14px; }
.type-box-pillar-options[data-kind=pairs] button { font-size: clamp(15px, 4.1vw, 19px); }
.type-box-pillar-fields [data-element=wood] { color: #37683f; }
.type-box-pillar-fields [data-element=fire] { color: #9c4031; }
.type-box-pillar-fields [data-element=earth] { color: #755635; }
.type-box-pillar-fields [data-element=metal] { color: #865b21; }
.type-box-pillar-fields [data-element=water] { color: #3b5d8b; }
.type-box-pillar-matches { padding: 9px 12px; border-radius: 8px; background: #f3efe3; }
.type-box-pillar-matches p { margin: 0 0 5px; color: #646551; font-size: 13px; }
.type-box-pillar-matches ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #3e5343;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.type-box-press { position: relative; grid-column: 2; width: 100%; min-width: 0; }
.type-box-machine {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1436 / 816;
  container-type: inline-size;
  filter: drop-shadow(0 11px 10px #35473524);
}

.type-box-casing {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.type-box-tiles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.type-box-well {
  --block-depth: calc(var(--block-height) * .82);
  --tile-porcelain: #f3e9d1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: .8cqw;
  overflow: hidden;
  perspective: 37cqw;
}
.type-box-well[data-day] { --tile-porcelain: #e6ebd6; }
.type-box-tile {
  position: absolute;
  inset: .35cqw .37cqw;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--block-depth) / -2));
}
.type-box-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: .16cqw solid #af9b6e;
  border-radius: .62cqw;
  backface-visibility: hidden;
  color: #304633;
  font: 500 6.2cqw/1 var(--type-title);
  text-shadow: 0 1px #fff9e6;
  background: linear-gradient(145deg, #fff9e675, transparent 60%, #9f875026), var(--tile-porcelain);
  box-shadow: inset 0 .23cqw .4cqw #fff9e6d9, inset 0 -.45cqw .5cqw #8e77483b, inset .23cqw 0 .4cqw #fff5d9b3;
}
.type-box-face[data-face=front] { transform: translateZ(calc(var(--block-depth) / 2)); }
.type-box-face[data-face=back] { transform: rotateX(180deg) translateZ(calc(var(--block-depth) / 2)); }
.type-box-face:is([data-face=top],[data-face=bottom]) {
  top: 50%;
  bottom: auto;
  height: var(--block-depth);
  background: linear-gradient(135deg, #fff6d740, #82705044), var(--tile-porcelain);
}
.type-box-face[data-face=top] {
  transform: translateY(-50%) rotateX(90deg) translateZ(calc(var(--block-height) / 2 - .35cqw));
}
.type-box-face[data-face=bottom] {
  transform: translateY(-50%) rotateX(-90deg) translateZ(calc(var(--block-height) / 2 - .35cqw));
}
.type-box-face:is([data-face=left],[data-face=right]) {
  left: 50%;
  right: auto;
  width: var(--block-depth);
  background: linear-gradient(150deg, #cabb96, #9a835c);
}
.type-box-face[data-face=left] {
  transform: translateX(-50%) rotateY(-90deg) translateZ(calc(var(--block-width) / 2 - .37cqw));
}
.type-box-face[data-face=right] {
  transform: translateX(-50%) rotateY(90deg) translateZ(calc(var(--block-width) / 2 - .37cqw));
}

.type-box-studio[data-phase=opening] .type-box-press .type-box-machine { opacity: 0; }

.type-box-pillar-entry {
  position: absolute;
  z-index: 3;
  inset: 8% 17.2% 8.7% 9.4%;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11%;
  background: transparent;
  cursor: pointer;
}
.type-box-pillar-entry:hover { border-color: #5b74536b; }
.type-box-lever-guide {
  position: absolute;
  z-index: 4;
  left: 87.4%;
  top: 23%;
  width: 9.15%;
  height: 40.5%;
  translate: -50% 0;
  pointer-events: none;
}
.type-box-grip {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 100%;
  aspect-ratio: 1.35;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0;
}
.type-box-lever-button {
  width: max(100%, 44px);
  min-height: 44px;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}
.type-box-knob {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: min(100%, 9.15cqw);
  aspect-ratio: 1.43;
  border: 1px solid #725537;
  border-radius: 39% / 46%;
  background: repeating-linear-gradient(90deg, #6d512b20 0 1px, #fff1b91c 1px 1.7px),
    linear-gradient(178deg, #fff0bf, #dfc18a 16%, #aa844d 69%, #795d39 91%, #61482d);
  box-shadow: 2px 4px 6px #3b2d1b8a, inset 0 1px 2px #fff9d5d1;
  transition: box-shadow 140ms ease, filter 140ms ease;
  pointer-events: none;
}
.type-box-knob::before {
  content: "";
  position: absolute;
  inset: 13% 7% 28%;
  border-radius: 30% / 48%;
  background: repeating-linear-gradient(90deg, #7e602d10 0 1px, transparent 1px 2px),
    linear-gradient(162deg, #f5e0aa, #d5b47c 46%, #e7c996 69%, #ac864f);
  box-shadow: inset 0 1px 2px #fff5ca95, 0 1px 2px #674c315e;
}
.type-box-knob::after {
  content: "";
  position: absolute;
  inset: 31% 28% 43%;
  border-block: 1px solid #8d6d43ab;
  border-radius: 3px;
  background: linear-gradient(transparent 40%, #8d6d4399 42% 57%, transparent 60%);
}
.type-box-entry-prop .type-box-face {
  font: 600 clamp(8px, 9cqw, 14px)/1 "Noto Serif SC", "Songti SC", SimSun, serif;
}
.type-box-entry-prop .type-box-knob,
.type-box-entry-prop .type-box-knob::before { border-width: .5px; box-shadow: none; }
.type-box-entry-prop .type-box-knob::after { display: none; }
.type-box-lever-button:is(:hover,:focus-visible) .type-box-knob { filter: brightness(1.07); }
.type-box-machine[data-pulling] .type-box-lever-button { cursor: grabbing; }
.type-box-machine[data-bottom] .type-box-knob { box-shadow: inset 0 1px 1px #f9e9ba9e, 0 1px 2px #3b392881; }
.type-box-instruction { display: inline; margin: 0; color: #626556; font-size: 13px; line-height: 1.6; }
.type-box-birth-value:not([hidden]) + .type-box-instruction { margin-inline-start: .6em; }
.type-box-reset {
  margin-inline-start: .55em;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #46644d;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.type-box-paper-slot {
  position: absolute;
  z-index: 2;
  left: 24%;
  top: 92.4%;
  width: 50.8%;
  height: 2.7%;
  pointer-events: none;
}
.type-box-result:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 16px;
  margin-top: 5px;
  color: #3f5546;
  font-size: 14px;
  text-align: center;
}

.type-box-result span { white-space: nowrap; }
.type-box-result-note { flex-basis: 100%; margin: 0; font-size: 13px; }
.type-box-details {
  position: relative;
  z-index: 2;
  width: min(100%, 880px);
  margin-inline: auto;
  margin-top: calc(-1 * var(--feed-overlap, 0px));
}
.type-box-paper {
  position: relative;
  padding: 15px clamp(8px, 2vw, 22px) clamp(13px, 2vw, 23px);
  background: repeating-linear-gradient(0deg, #ae92520b 0 1px, transparent 1px 6px), #fbf7e9;
  border: 1px solid #d7c9ab;
  box-shadow: 0 7px 14px #614f281c;
  border-top-color: #bca981;
}
.type-box-details[data-feeding] {
  clip-path: inset(0 -12px calc(100% - var(--paper-edge)) -12px);
  pointer-events: none;
}
.type-box-details[data-feeding] .type-box-paper-window {
  clip-path: inset(0 -8px -12px);
}
.type-box-details[data-feeding] .type-box-paper {
  --folding: calc(1 - var(--paper-spread));
  --paper-horizontal-scale: calc(var(--feed-scale, 1) * var(--folding) + var(--paper-spread));
  --ink-compensation: .49;
  transform-origin: 50% 0;
  transform: translate(calc(var(--feed-shift, 0px) * var(--folding)),
      calc(var(--paper-edge) - 100%))
    scaleX(var(--paper-horizontal-scale));
  box-shadow: 0 7px 14px #614f282e;
}
.type-box-details[data-feeding] .type-box-chart-table :is(.type-box-print-glyph, .type-box-glyph) {
  display: inline-block;
  transform: scaleX(calc(1 + var(--ink-compensation) * (1 / var(--paper-horizontal-scale) - 1)));
}
.type-box-details[data-feeding] .type-box-layer-stack > :is(.type-box-print-glyph, .type-box-glyph) { display: block; }
.type-box-details[data-feeding] .type-box-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 31%, #745b2e1a 32%, #fff7d866 34%, transparent 37%,
    transparent 64%, #745b2e1e 65%, #fff7d869 67%, transparent 70%);
  opacity: var(--folding);
  pointer-events: none;
}
.type-box-detail-tabs { display: flex; gap: clamp(10px, 3vw, 32px); border-bottom: 1px solid #dfd6c2; }
.type-box-detail-tabs button {
  min-height: 47px;
  margin-bottom: -1px;
  padding: 9px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #656958;
  font: 500 clamp(15px, 1.65vw, 20px) var(--type-title);
  cursor: pointer;
}
.type-box-detail-tabs button[aria-pressed=true] { border-color: #55725c; color: #314d39; font-weight: 600; }
.type-box-basic, .type-box-advanced { padding-top: 11px; }
.type-box-natal-relations { display: grid; gap: 0; margin: 13px 0 0; border-top: 1px solid #ded3b8; }
.type-box-natal-relations > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px clamp(11px, 2.8vw, 31px);
  padding: 9px 2px;
  border-bottom: 1px solid #e5dbc3;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.45;
}
.type-box-natal-relations dt { color: #7a643d; font-weight: 600; }
.type-box-natal-relations dd { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; color: #445846; }
.type-box-natal-relations dd span { margin-inline-end: 7px; }
.type-box-natal-relations dd span:not(:last-child)::after { margin-inline-start: 7px; color: #a89b78; content: "｜"; }
.type-box-transit-relations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 264px), 1fr));
  gap: 6px 14px;
  margin: 8px 0;
}
.type-box-transit-relation { padding: 8px 10px; border: 1px solid #dbd1b9; background: #f9f5e9; }
.type-box-transit-relation h4 { margin: 0; color: #405b46; font: 600 15px/1.5 var(--type-title); }
.type-box-transit-relation p { margin: 5px 0 0; color: #586650; font-size: 13px; }
.type-box-transit-relation dl { margin-top: 4px; }
.type-box-transit-relation dl > div { padding: 4px 0; gap: 6px 9px; font-size: 13px; }
.type-box-transit-relation dl > div:last-child { border-bottom: 0; }
.type-box-chart-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fbf8ee;
  color: #35493a;
  font-size: clamp(13px, 1.5vw, 17px);
  text-align: center;
}
.type-box-chart-table th, .type-box-chart-table td { padding: 9px 4px; border-bottom: 1px solid #e3dccb; }
.type-box-chart-table thead { background: #e7ede1; }
.type-box-chart-table th:first-child { width: 17%; font-weight: 500; color: #566254; }
.type-box-chart-table tbody tr:nth-child(even) { background: #f2eee2; }
.type-box-chart-table tr:nth-child(2) .type-box-glyph, .type-box-chart-table tr:nth-child(3) .type-box-glyph {
  font-size: clamp(24px, 3.2vw, 39px);
  font-weight: 600;
  line-height: 1.18;
}
.type-box-layer-stack { vertical-align: top; }
.type-box-layer-stack > span { display: block; line-height: 1.65; white-space: nowrap; }
.type-box-layer-stack .is-main { font-weight: 700; }
.type-box-layer-stack small {
  display: inline-block;
  margin-left: .28em;
  padding: 0 .19em;
  border: 1px solid #c5ccb6;
  border-radius: 3px;
  color: #496054;
  font-size: .63em;
  line-height: 1.28;
  vertical-align: .11em;
}
.type-box-paper [data-element=wood] { color: #37683f; }
.type-box-paper [data-element=fire] { color: #9c4031; }
.type-box-paper [data-element=earth] { color: #755635; }
.type-box-paper [data-element=metal] { color: #865b21; }
.type-box-paper [data-element=water] { color: #3b5d8b; }
.type-box-comparison-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.type-box-compare-time { margin: 0 0 7px; color: #5a6754; font-size: 13px; font-variant-numeric: tabular-nums; }
.type-box-comparison-wrap[data-columns="3"] { --comparison-min: 405px; }
.type-box-comparison-wrap[data-columns="4"] { --comparison-min: 465px; }
.type-box-comparison-wrap[data-columns="5"] { --comparison-min: 520px; }
.type-box-comparison { min-width: var(--comparison-min, 0px); font-size: clamp(12px, 1.3vw, 16px); }
.type-box-comparison th:first-child { width: clamp(39px, 11%, 78px); }
.type-box-comparison .type-box-transit { background: #e6ece18a; }
.type-box-comparison .type-box-natal-start { border-left: 1px solid #b7c2ad; }
.type-box-comparison .type-box-layer-line { white-space: normal; }
.type-box-layer-star { display: inline-block; margin-left: .28em; color: #4f614e; }
.type-box-cycle-header { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 10px 6px; border-block: 1px solid #ded6c0; background: #f1eddf; }
.type-box-luck-summary { min-width: 0; color: #4c5949; font-size: clamp(12px, 1.35vw, 15px); }
.type-box-luck-summary p { margin: 3px 0; }
.type-box-detail-link { padding: 6px 0; border: 0; background: transparent; color: #3b6248; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.type-box-today, .type-box-flow-switch {
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid #d3c9ad;
  border-radius: 3px;
  background: #faf6e9;
  color: #405442;
  white-space: nowrap;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.type-box-timeline { display: grid; grid-template-columns: clamp(39px, 7vw, 66px) minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid #ded6c0; }
.type-box-timeline h4 { display: grid; place-items: center; margin: 0; padding: 5px 3px; color: #506251; font: 600 clamp(13px, 1.6vw, 17px) var(--type-title); background: #f0eadd; }
.type-box-timeline-track { position: relative; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.type-box-timeline-cell {
  display: grid;
  flex: 1 0 clamp(53px, 7.1vw, 78px);
  min-height: 75px;
  gap: 3px;
  align-content: center;
  padding: 5px 2px;
  border: 0;
  border-inline-end: 1px solid #e4dcc9;
  color: #435341;
  background: #fbf7ec;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.type-box-timeline-cell:is(:hover,:focus-visible) { background: #eef0e5; }
.type-box-timeline-cell[aria-pressed=true] { box-shadow: inset 0 -3px #6d8b73; background: #e4ece0; }
.type-box-timeline-cell strong { font-size: clamp(16px, 1.95vw, 22px); }
.type-box-timeline-cell small { font-size: 11px; }
.type-box-flow-refinements { padding-top: 8px; }
.type-box-flow-switches { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; }
.type-box-flow-switch[aria-expanded=true] { border-color: #8ba18a; background: #e5ede2; }
.type-box-flow-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 8px; margin-top: 9px; }
.type-box-flow-field { display: grid; gap: 3px; min-width: 0; color: #566254; font-size: 13px; }
.type-box-flow-field select { width: 100%; min-width: 0; min-height: 34px; padding: 4px; border: 1px solid #c8c1ac; border-radius: 4px; background: #fbf8ee; color: #314d39; font: inherit; }
.type-box-flow-note { margin: 8px 0 0; color: #5e6253; font-size: 12px; }
.type-box-skip { position: fixed; right: max(22px, 4vw); bottom: max(20px, 4vh); }
.type-box-flight {
  position: fixed;
  z-index: 4;
  aspect-ratio: 1436 / 816;
  pointer-events: none;
}

.type-box-records-open {
  align-self: end;
  grid-column: 1;
  grid-row: 2;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 138px);
  margin: 0 0 clamp(17px, 4vw, 61px);
  padding: 2px 3px 0;
  border: 0;
  background: transparent;
  color: #405c48;
  font: 600 clamp(13px, 1.5vw, 17px) var(--type-title);
  cursor: pointer;
}
.type-box-storefront {
  position: relative;
  display: block;
  width: 100%;
  max-width: 124px;
  aspect-ratio: 1.13;
  transition: translate 180ms cubic-bezier(.23, 1, .32, 1);
  filter: drop-shadow(0 6px 5px #55462b35);
}
.type-box-records-open:is(:hover, :focus-visible) .type-box-storefront { translate: 0 -4px; }
.type-box-storefront-roof {
  position: absolute;
  z-index: 1;
  inset: 0 0 57%;
  clip-path: polygon(50% 0, 97% 64%, 100% 85%, 89% 100%, 11% 100%, 0 85%, 3% 64%);
  background: repeating-linear-gradient(100deg, transparent 0 8%, #dee3cf34 8% 10%),
    linear-gradient(177deg, #9ba68d, #5d7864 69%, #3f5848 82%, #cfbe98 86% 91%, #6e624d 93%);
}
.type-box-storefront-cabinet {
  position: absolute;
  inset: 33% 9% 4%;
  display: grid;
  align-content: center;
  gap: 6%;
  padding: 12% 10% 7%;
  border: 1px solid #897651;
  border-bottom-width: 3px;
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(94deg, #b5aa87, #d0c3a1 12%, #e0d6b5 71%, #a19578);
  box-shadow: inset 0 0 0 2px #e6dbbc80;
}
.type-box-storefront-drawer {
  position: relative;
  min-height: 9px;
  border: 1px solid #7f876c;
  border-radius: 2px;
  background: linear-gradient(#afbc9e, #7a947e 88%);
  box-shadow: 0 1px 1px #3f4b3b78;
}
.type-box-storefront-drawer::after {
  content: "";
  position: absolute;
  inset: 34% 37%;
  border-radius: 1px;
  background: linear-gradient(#f6e5b3, #b59b62);
  box-shadow: 0 1px 1px #50422e60;
}
.type-box-storefront-name { white-space: nowrap; }
.type-box-records-close, .type-box-record-skip, .type-box-record-cancel, .type-box-record-reader-close {
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: #455d49;
  font: 14px var(--type-title);
  cursor: pointer;
}
.type-box-records-close:hover, .type-box-record-skip:hover, .type-box-record-cancel:hover, .type-box-record-reader-close:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.type-box-records-count {
  display: inline-block;
  min-width: 1.45em;
  margin-inline-start: 5px;
  padding: 1px 4px;
  border-radius: 8px;
  background: #e7ecdf;
  font: 12px/1.4 system-ui, sans-serif;
  text-align: center;
}
.type-box-record-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 15px;
  padding-top: 12px;
}
.type-box-record-save {
  min-height: 37px;
  padding: 6px 12px;
  border: 1px solid #60745d;
  border-radius: 4px;
  background: #eef0e4;
  color: #314d39;
  font: 600 14px var(--type-title);
  cursor: pointer;
}
.type-box-record-save:hover { background: #e4ebdc; }
.type-box-record-status { color: #60705b; font-size: 13px; }
.type-box-record-caption { flex-basis: 100%; padding: 4px 0 7px; color: #455d49; overflow-wrap: anywhere; }
.type-box-record-caption p { margin: 4px 0 0; color: #5b6655; font-size: 14px; white-space: pre-wrap; }
.type-box-records {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: radial-gradient(ellipse at 56% 0%, #f9f5e7 12%, #efeade 73%, #e9e3d6);
  color: #344b3b;
  font-family: var(--type-title);
}
.type-box-records::backdrop { background: #423f33; }
.type-box-archive {
  box-sizing: border-box;
  width: min(100%, 1390px);
  min-height: 100%;
  margin-inline: auto;
  padding: clamp(23px, 5vw, 72px);
}
.type-box-archive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: clamp(12px, 2.5vw, 24px);
  margin-bottom: 23px;
  border-bottom: 1px solid #bdb398;
}
.type-box-archive-header h3 {
  margin: 0;
  color: #304a39;
  font: 500 clamp(30px, 4.5vw, 52px)/1.15 var(--type-title);
  letter-spacing: .08em;
}
.type-box-record-list-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
}
.type-box-record-desk { min-height: min(55vh, 480px); min-width: 0; }
.type-box-record-list-head { margin-bottom: 23px; }
.type-box-record-total { margin: 0; color: #526752; font-size: 14px; }
.type-box-record-search { width: clamp(135px, 26vw, 230px); min-width: 0; }
.type-box-records :is(input[type=search], input[type=text], select, textarea) {
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #d3c9ad;
  border-radius: 4px;
  background: #fffcf2;
  color: #314d39;
  font: 14px/1.5 var(--type-title);
}
.type-box-record-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 3.6vw, 47px) clamp(25px, 4vw, 49px);
  padding: 0 12px 15px 0;
  margin: 0;
  list-style: none;
}
.type-box-record-row {
  position: relative;
  min-width: 0;
  container-type: inline-size;
}
.type-box-record-sheet { position: relative; }
.type-box-record-view {
  position: relative;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 8px clamp(85px, 22cqw, 112px) 10px 9px;
  border: 0;
  background: transparent;
  color: #304b38;
  font: 500 clamp(13px, 5.1cqw, 24px)/1.35 var(--type-title);
  text-align: center;
  cursor: zoom-in;
}
.type-box-record-view-cover { position: absolute; z-index: 1; inset: 0; height: 100%; padding: 0; }
.type-box-record-sheet { transition: translate 160ms cubic-bezier(.23, 1, .32, 1); }
.type-box-record-sheet:has(.type-box-record-view:is(:hover, :focus-visible)) { translate: 0 -2px; }
.type-box-record-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.type-box-record-pair { white-space: nowrap; }
.type-box-record-label {
  position: absolute;
  z-index: 1;
  top: 3px;
  right: -12px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 88px;
  min-height: 42px;
  padding: 5px 6px 3px;
  border: 1px solid #8c9e80;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(170deg, #eff1df, #d6dfc9);
  box-shadow: 0 2px 1px #65765e6b, 2px 4px 6px #354b3647, inset 0 1px #fff9e9;
  color: #3c5641;
  white-space: nowrap;
  font: 600 13px/1.15 var(--type-title);
  cursor: pointer;
}
.type-box-record-label span { color: #4a614b; font-size: 11px; font-weight: 500; }
.type-box-record-label:is(:hover, :focus-visible) { background: #e9efdd; translate: 2px 0; }
.type-box-record-sheet-preview {
  pointer-events: none;
}
.type-box-record-sheet-preview:empty { display: none; }
.type-box-record-sheet-preview .type-box-paper { padding: 7px 8px 9px; }
.type-box-record-sheet-preview .type-box-detail-tabs { padding-right: 75px; gap: 8px; }
.type-box-record-sheet-preview .type-box-detail-tabs button { min-height: 36px; font-size: clamp(11px, 4cqw, 15px); white-space: nowrap; }
.type-box-record-sheet-preview .type-box-chart-table,
.type-box-record-sheet-preview .type-box-natal-relations > div { font-size: clamp(10px, 1.1vw, 12px); }
.type-box-record-sheet-preview .type-box-chart-table :is(th, td) { padding: 3px 2px; }
.type-box-record-sheet-preview .type-box-chart-table tbody .type-box-glyph { font-size: inherit; }
.type-box-record-sheet-preview .type-box-chart-table tbody :is(tr:nth-child(2), tr:nth-child(3)) .type-box-glyph {
  font-size: clamp(18px, 5.5cqw, 28px);
}
.type-box-record-sheet-preview .type-box-natal-relations { margin-top: 5px; }
.type-box-record-sheet-preview .type-box-natal-relations > div { padding: 4px 0; gap: 5px; }
.type-box-record-reader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(13px, 4vw, 55px);
  border: 0;
  background: transparent;
  color: #344b3b;
  overflow: auto;
  overscroll-behavior: contain;
}
.type-box-record-reader::backdrop { background: #48443380; }
.type-box-record-reader-page { display: grid; width: min(100%, 880px); margin: 0 auto; }
.type-box-record-reader-content .type-box-paper { transform-origin: top left; }
.type-box-record-reader-close {
  justify-self: end;
  margin-bottom: 5px;
  padding: 5px 11px;
  border: 1px solid #d7c9ab;
  border-radius: 4px;
  background: #fbf7e9;
}
.type-box-record-empty, .type-box-record-local { margin: 10px 0; color: #656958; font-size: 13px; }
.type-box-record-local { margin-top: 32px; }
.type-box-record-editor { display: grid; gap: 13px; width: min(100%, 660px); margin-inline: auto; }
.type-box-record-editor label { display: grid; gap: 4px; color: #455d49; font-size: 15px; }
.type-box-record-editor textarea { resize: vertical; }
.type-box-record-preview { margin: 0; padding: 12px 10px; background: #e7ecdf; color: #40583f; font-size: 16px; }
.type-box-record-editor-actions { display: flex; gap: 13px; justify-content: end; }
.type-box-record-error { margin: 7px 0 0; color: #973b2e; font-size: 14px; }

@media (max-width: 700px) {
  .type-box-record-list { grid-template-columns: minmax(0, 1fr); }
  .type-box-workbench { grid-template-columns: clamp(67px, 18vw, 103px) minmax(0, 1fr); }
  .type-box-records-open { margin-bottom: clamp(10px, 4vw, 28px); }
  .type-box-storefront { max-width: 87px; }
  .type-box-record-label { min-width: 82px; }
  .type-box-records { scrollbar-gutter: auto; }
  .type-box-record-list-head { margin-bottom: 13px; }
  .type-box-heading h2 { white-space: nowrap; }
  .type-box-details[data-feeding] .type-box-paper { --ink-compensation: .29; }
  html:has(.type-box-studio[open]) { scrollbar-gutter: auto; }
  .site-header .paipan-entry-wrap { gap: 7px; }
  .type-box-entry { --entry-width: 68px; }
  .type-box-controls { min-height: 30px; }
  .type-box-comparison th, .type-box-comparison td { padding-inline: 2px; }
  .type-box-comparison .type-box-layer-star { margin-left: 0; font-size: 10px; }
  .type-box-flow-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-box-picker {
    inset: auto 0 0;
    width: min(100%, 550px);
    max-height: calc(100dvh - 12px);
    padding: 16px 15px max(13px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .type-box-storefront { transition: none; }
  .type-box-entry-prop, .type-box-knob { transition: none; }
  .type-box-entry:hover .type-box-entry-prop { transform: none; }
  .type-box-picker[open] { animation: none; }
}


/* Reserve the right side of the header without shifting its centered five-element navigation. */
.paipan-entry-wrap { margin-inline-start: auto; }
.type-box-entry:focus-visible { outline: 2px solid #55705c; outline-offset: 4px; }

.celadon-definitions {
  position: absolute;
  pointer-events: none;
}