:root {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6.5h10.2L24 12.2V24.5a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2z'/><path d='M18 6.5V12h6'/><path d='M11 17h10'/><path d='M11 21h7'/></svg>");
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 16px;
  font: 16px/1.5 "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
textarea { resize: vertical; }
.card {
  width: min(100%, 28rem);
  position: relative;
  border-radius: 22px;
  padding: 26px 22px 20px;
}
.head { display: flex; align-items: center; gap: 10px; }
.mark { width: 28px; height: 28px; flex: none; color: var(--ink); }
.mark svg { display: block; width: 28px; height: 28px; }
.title { position: relative; margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
body[data-variant="a"] .title,
body[data-variant="a"] .mark { color: #c2c2be; }
form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; position: relative; }
.field { display: grid; gap: 6px; }
.field span, .pick, .drop, .versions, .status, .bar { color: var(--ink); }
textarea, input[type="email"], input[type="text"], input[type="password"] {
  width: 100%;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
textarea { min-height: 9rem; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick, .drop, .send, #stop-motion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
}
.pick, #stop-motion {
  padding: 0 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.pick input, .drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.pick:focus-within, .drop:focus-within, .text-focus:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.previews { display: flex; flex-wrap: wrap; gap: 8px; }
.shot { position: relative; }
.shot button {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 12px;
}
.previews:empty, .bars:empty { display: none; }
.previews img, .bar img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; background: var(--field); }
.previews video, .bar video { width: min(100%, 280px); max-height: 160px; border-radius: 8px; background: #121416; }
.send {
  border: 0;
  padding: 0 18px;
  background: var(--btn);
  color: var(--btn-ink);
}
.send:disabled { cursor: progress; }
.status { min-height: 1.5em; margin: 0; }
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.versions { margin: 0; font-size: 16px; }
.versions a { color: inherit; }
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bar img, .bar video { width: 64px; height: 36px; flex: none; }
.bar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bar button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  min-height: 32px;
}
body[data-variant="a"], body[data-variant="c"] {
  --ink: #f3f3f1;
  --field: rgba(0, 0, 0, 0.28);
  --line: rgba(255, 255, 255, 0.2);
  --btn: #f3f3f1;
  --btn-ink: #141416;
  --sheen: linear-gradient(105deg, #9a9a96 0% 32%, #ffffff 46% 54%, #9a9a96 68% 100%);
}
body[data-variant="a"] {
  background:
    radial-gradient(42rem 26rem at 14% 0%, rgba(255, 255, 255, 0.2), transparent 62%),
    radial-gradient(32rem 22rem at 96% 100%, rgba(255, 255, 255, 0.1), transparent 66%),
    #121416;
  color: var(--ink);
}
body[data-variant="c"] { background: #101114; color: var(--ink); }
body[data-variant="a"] .card, body[data-variant="c"] .card {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.36)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body[data-variant="a"] .card::after,
body[data-variant="c"] .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body[data-variant="a"] .head,
body[data-variant="a"] form,
body[data-variant="c"] .head,
body[data-variant="c"] form { position: relative; z-index: 1; }
body[data-variant="a"] .send { width: 100%; }
body[data-variant="b"] {
  background: #e5e3de;
  color: #161614;
  color-scheme: light;
  --ink: #161614;
  --field: #fbfaf7;
  --line: #d4d2cb;
  --btn: #161614;
  --btn-ink: #f6f5f2;
}
body[data-variant="b"] .card {
  background: #f6f5f2;
  border: 1px solid #dddcd6;
  min-height: min(36rem, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(22, 22, 20, 0.05);
}
body[data-variant="b"] form { flex: 1; }
body[data-variant="b"] .send { margin-top: auto; width: 100%; }
body[data-variant="b"] .name { flex: 1; min-width: 0; }
.hair { height: 1px; margin-top: 8px; background: #cfcbc3; position: relative; overflow: hidden; }
.drop {
  width: 100%;
  min-height: 76px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--ink);
}
.drop.is-over { border-style: solid; }
body[data-variant="c"] .card { width: min(100%, 44rem); }
body[data-variant="c"] .head { width: 100%; }
#stop-motion { margin-left: auto; }
.compose { display: flex; align-items: flex-end; gap: 10px; }
.grow { flex: 1; min-width: 0; }
body[data-variant="c"] textarea { min-height: 3.2rem; }
.bars { display: flex; flex-direction: column; gap: 8px; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  body[data-variant="a"].is-sheen .title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background-image: linear-gradient(100deg, transparent 0% 18%, #fff 46%, #fff 54%, transparent 82% 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: screen;
    animation: sheen-once 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
  }
}
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  body[data-variant="a"].is-sheen .mark,
  body[data-variant="c"].is-sheen:not(.motion-stopped) .mark {
    background-image: var(--sheen);
    background-size: 240% 100%;
    background-repeat: no-repeat;
    background-position: 120% 50%;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    mask-mode: alpha;
  }
  body[data-variant="a"].is-sheen .mark { animation: sheen-once 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  body[data-variant="c"].is-sheen:not(.motion-stopped) .mark { animation: sheen-loop 3.6s ease-in-out infinite; }
  body[data-variant="a"].is-sheen .mark svg,
  body[data-variant="c"].is-sheen:not(.motion-stopped) .mark svg { opacity: 0; }
}
body[data-variant="b"].is-sheen .hair::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent);
  animation: hair-once 1.6s ease forwards;
}
@keyframes sheen-once { from { background-position: 120% 50%; } to { background-position: -20% 50%; } }
@keyframes sheen-loop {
  0%, 58% { background-position: 120% 50%; }
  100% { background-position: -20% 50%; }
}
@keyframes hair-once { from { transform: translateX(-140%); } to { transform: translateX(420%); } }
@media (prefers-reduced-motion: reduce) {
  .title, .title::after, .mark, .hair::after { animation: none !important; }
  .title::after { content: none !important; }
  .mark svg { opacity: 1 !important; }
  .title { background: none !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; }
  #stop-motion { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-variant="a"] .card, body[data-variant="c"] .card {
    background: #1a1c1f;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-variant="a"] .card, body[data-variant="c"] .card {
    background: #1a1c1f;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}