:root {
  color-scheme: dark;
  --night: #08090c;
  --glass: #171319;
  --white: #f6eff4;
  --muted: #9a929c;
  --pink: #ff4fa5;
  --light-pink: #f6f8ff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--white); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
main { width: min(1040px, calc(100% - 72px)); margin: 0 auto; padding: 30px 0 20px; }
.heading { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 11px; letter-spacing: .2em; }
.pink-dot { width: 5px; height: 5px; background: var(--pink); border-radius: 50%; }
h1 { margin: 0; font-weight: 400; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: .06em; }
h1 span { color: var(--light-pink); }
.note { margin: 0 0 3px; color: #cfc3cd; font-size: 12px; line-height: 1.9; text-align: right; }
.note span { color: var(--muted); }
.stage { position: relative; display: flex; justify-content: center; height: min(65vh, 690px); min-height: 330px; margin: 2px 0 0; overflow: hidden; }
.portrait { position: relative; width: auto; height: 100%; aspect-ratio: 850 / 770; overflow: hidden; }
.portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--night), transparent 11%, transparent 89%, var(--night)); }
.frame { position: absolute; display: block; max-width: none; width: 225.882353%; height: auto; left: -58.823529%; top: -22.077922%; }
.led { pointer-events: none; }
.controls { position: relative; display: flex; align-items: center; gap: 12px; width: min(650px, 100%); margin: 4px auto 0; padding: 12px; border: 1px solid #30252e; background: #111014; border-radius: 14px; }
.text-field { flex: 1; min-width: 0; padding: 1px 8px; }
.text-field > span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
input { display: block; width: 100%; padding: 2px 0; border: 0; outline: 0; background: transparent; color: var(--light-pink); font: 500 17px "Segoe UI", "Microsoft YaHei", sans-serif; }
.text-field:focus-within { border-radius: 4px; outline: 2px solid #a63670; outline-offset: 3px; }
.actions { display: flex; gap: 8px; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid #41323e; border-radius: 8px; background: var(--glass); color: #e2d8e0; font: 12px "Segoe UI", "Microsoft YaHei", sans-serif; white-space: nowrap; cursor: pointer; }
button:hover { background: #28202a; border-color: #755066; }
button:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.pause-icon { font: 16px Consolas, monospace; width: 10px; }
.power-light { width: 5px; height: 5px; border-radius: 50%; background: #F6BDD6; box-shadow: 0 0 5px #F6BDD633; }
.power[aria-pressed="false"] .power-light { background: #776774; box-shadow: none; }
.hint { width: min(650px, 100%); margin: 12px auto 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.hint span { float: right; color: #726a75; }
@media (max-width: 600px) {
  main { width: calc(100% - 32px); padding-top: 22px; }
  .heading { align-items: flex-start; gap: 8px; }
  h1 { font-size: 24px; }
  .note { max-width: 108px; font-size: 10px; line-height: 1.8; padding-top: 2px; }
  .note span { display: inline-block; }
  .stage { height: min(127vw, 510px); min-height: 0; margin: 18px -16px 0; }
  .portrait { flex-shrink: 0; width: 100%; max-width: 490px; height: auto; aspect-ratio: auto; }
  .frame { width: 282.352941%; left: -86.764706%; top: 0; transform: translateY(-16.666667%); }
  .portrait::after { background: linear-gradient(to bottom, var(--night), transparent 7%, transparent 87%, var(--night)); }
  .controls { flex-wrap: wrap; padding: 12px; gap: 12px; }
  .text-field { flex-basis: 100%; padding: 0 6px; }
  .actions { width: 100%; }
  button { flex: 1; }
  .hint { font-size: 10px; }
  .hint span { float: none; display: block; }
}

@media (max-width: 360px) {
  .heading { flex-wrap: wrap; }
  .note { max-width: none; width: 100%; text-align: left; margin-top: 4px; }
  .note br { display: none; }
  .note span { margin-left: 8px; }
}

.source-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.stage { touch-action: none; cursor: ew-resize; }
.hint #motion-status { float: none; display: inline; color: var(--muted); }
@media (max-width: 600px) { .hint #motion-status { display: block; } }