:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #28282b;
  --muted: #737378;
  --rule: #d2d2d4;
  --pink: #f2b4cc;
  --frame-inset: 26px;
  --content-inset: clamp(38px, 5vw, 72px);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.theatre {
  position: relative;
  min-height: 380px;
  height: 100vh;
  height: 100svh;
  isolation: isolate;
}
.frame {
  position: absolute;
  inset: var(--frame-inset);
  border: 1px solid var(--rule);
  pointer-events: none;
}
.frame::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 90px;
  height: 3px;
  background: var(--ink);
}
.masthead {
  position: absolute;
  inset: 58px var(--content-inset) auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.identity { display: flex; align-items: center; gap: 18px; }
.identity-mark { display: block; flex-shrink: 0; object-fit: fill; }
h1 {
  margin: 0 0 9px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;
}
.byline {
  margin: 0;
  color: var(--muted);
  font: 9px/1.5 monospace;
  letter-spacing: .2em;
}
.scene-number {
  width: 44px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  color: var(--muted);
  font: 10px/1.5 monospace;
  text-align: right;
  letter-spacing: .12em;
}
.edge-caption {
  position: absolute;
  top: 46%;
  left: calc(var(--frame-inset) - 14px);
  padding: 12px 8px;
  background: var(--paper);
  color: var(--muted);
  font: 9px/1.5 monospace;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}
.colophon {
  position: absolute;
  inset: auto var(--content-inset) 49px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.signature { color: var(--muted); font: 10px/1.5 monospace; letter-spacing: .1em; }
.signature span { margin-right: 10px; color: var(--ink); }
.ticket {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 156px;
  height: 57px;
  padding: 0 17px;
  background: var(--pink);
}
.ticket::after {
  content: "";
  position: absolute;
  inset: 0 42px 0 auto;
  border-left: 1px dashed #9e7182;
}
.ticket-label { font: 10px/1.5 monospace; letter-spacing: .15em; }
.ticket-flower { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1; }
.registration-mark {
  position: absolute;
  right: calc(var(--frame-inset) - 6px);
  bottom: calc(var(--frame-inset) - 6px);
  width: 13px;
  height: 13px;
  background: var(--paper);
}
.registration-mark::before, .registration-mark::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 13px;
  height: 1px;
  background: var(--ink);
}
.registration-mark::after { transform: rotate(90deg); }

@media (max-width: 640px) {
  :root { --frame-inset: 20px; --content-inset: 38px; }
  .masthead { top: 43px; }
  .identity { gap: 13px; }
  .identity-mark { width: 28px; height: 36px; }
  h1 { font-size: 17px; letter-spacing: .15em; }
  .byline { font-size: 8px; }
  .scene-number { width: 28px; font-size: 8px; }
  .colophon { bottom: 40px; }
  .ticket { width: 125px; height: 48px; padding: 0 12px; }
  .ticket::after { right: 36px; }
  .ticket-label { font-size: 9px; }
}
@media (max-width: 350px) {
  :root { --content-inset: 30px; }
  h1 { font-size: 16px; letter-spacing: .08em; }
  .identity { gap: 10px; }
}