:root {
  --paper: #f4f3f5;
  --ink: #171716;
  --muted: #5b595d;
  --accent: var(--rainbow-purple);
  --font-body: "OPPO Sans 4.0", Arial, sans-serif;
  --trace-glass: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.22) 58%, rgba(153,51,112,.12));
  --trace-glass-hover: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.4) 58%, rgba(153,51,112,.18));
  --trace-glass-shadow: inset 0 1px rgba(255,255,255,.9), inset 0 -1px rgba(153,51,112,.08), 0 8px 24px rgba(23,23,22,.08);
  --trace-glass-purple: linear-gradient(135deg, rgba(153,51,112,.94), rgba(118,36,81,.86));
  --trace-glass-purple-hover: linear-gradient(135deg, rgba(139,43,99,.96), rgba(105,30,72,.9));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 30px;
  width: 100%;
  height: 100vh;
  height: var(--trace-viewport-height, 100dvh);
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.artifact-header, .artifact-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(16px, 2vw, 32px);
  font-size: 10px;
  letter-spacing: .05em;
}
.artifact-header { min-height: 0; }
.artifact-footer { color: var(--muted); font-size: 9px; }
.artifact-header span:nth-child(2), .artifact-footer span:nth-child(2) { justify-self: center; }
.artifact-header span:last-child, .artifact-footer span:last-child { justify-self: end; }
.artifact-header .archive-counter__label { display: inline; }
.artifact-header b { color: var(--accent); font-weight: 600; }
.artifact-header .project-wordmark {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  width: max-content;
  min-height: 40px;
  padding: 0 2px;
  border: 0;
  font-size: 13px;
  white-space: nowrap;
}
.artifact-header a.project-wordmark:hover,
.artifact-header a.project-wordmark:focus-visible {
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.artifact-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(9px, 1.4vh, 18px);
  width: min(1420px, calc(100% - clamp(32px, 5vw, 80px)));
  min-height: 0;
  margin: 0 auto;
  padding: clamp(10px, 1.9vh, 22px) 0 clamp(8px, 1.3vh, 16px);
}
.artifact-intro {
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(260px, 1fr);
  column-gap: clamp(20px, 5vw, 90px);
  align-items: end;
  min-height: 0;
  padding: 0 0 clamp(10px, 1.5vh, 18px);
}
.artifact-intro > p {
  grid-column: 1 / -1;
  margin: 0 0 clamp(8px, 1.2vh, 13px);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}
.artifact-intro h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(55px, 6vw, 105px);
  font-weight: 400;
  line-height: .73;
  letter-spacing: -.068em;
}
.intro-copy { align-self: end; max-width: 520px; }
.intro-short { margin: 0 0 6px; font-size: clamp(11px, .95vw, 13px); line-height: 1.4; }
.intro-short[lang] { color: var(--muted); }
.intro-more {
  margin-top: 6px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .03em;
}
.intro-dialog {
  width: min(640px, calc(100% - 32px));
  max-height: min(650px, calc(100dvh - 32px));
  padding: clamp(18px, 3vw, 32px);
  overflow: auto;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 20px 70px rgba(23,23,22,.18);
}
.intro-dialog::backdrop { background: rgba(23,23,22,.46); }
.intro-dialog__top { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.intro-dialog h2 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 4vw, 38px); font-weight: 400; }
.intro-dialog__top button { min-height: 36px; border: 0; background: transparent; font-size: 11px; }
.intro-dialog__copy { max-width: 60ch; margin-top: 32px; }
.intro-dialog__copy p { font-size: 14px; line-height: 1.65; }
.intro-dialog__copy .intro-chinese { color: var(--muted); }

.participation-shell { display: flex; min-height: 0; }
#artifactForm {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  width: 100%;
  min-height: 0;
}
.form-topline { grid-row: 1; }
.reply-target { grid-row: 2; }
.material-tabs { grid-row: 3; }
.open-actions { grid-row: 4; }
.material-summary { grid-row: 5; }
.trace-submit-area { grid-row: 6; }
.form-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 34px; }
.form-topline > span, .reply-target > span, .alias-field > span { color: var(--muted); font-size: 10px; letter-spacing: .05em; }
.entry-modes { display: flex; gap: 6px; }
.entry-modes button, .publication-layout-switch button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.entry-modes button.is-active, .publication-layout-switch button.is-active { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.reply-target { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 16px; align-items: center; height: 40px; }
.reply-target select { width: 100%; min-width: 0; height: 34px; border: 0; background: transparent; font-size: 12px; }
.material-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.material-tabs button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: clamp(46px, 7vh, 65px);
  padding: 8px clamp(8px, 1.5vw, 18px);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 600;
  letter-spacing: .035em;
  text-align: left;
}
.material-tabs button:first-child { padding-left: 0; }
.material-tabs button span { flex: none; font-family: var(--font-body); font-size: 11px; }
.material-tabs button.is-active { border-bottom-color: var(--accent); color: var(--accent); }
.material-tabs button:hover { color: var(--accent); }
.open-actions { position: relative; min-height: 0; overflow: auto; }
.open-action { width: 100%; height: 100%; min-height: 0; padding: clamp(12px, 1.7vh, 20px) 0; }
.open-action--write {
  position: relative;
}
.write-prompt {
  position: absolute;
  top: clamp(12px, 1.7vh, 20px);
  left: 0;
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 10px;
  background: var(--trace-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  box-shadow: var(--trace-glass-shadow);
  color: #777479;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.55;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-action--write:is(:focus-within, .has-text) .write-prompt {
  display: none;
}
.open-action--write textarea {
  display: block;
  width: min(100%, 1040px);
  height: 100%;
  min-height: 0;
  padding: 7px 14px 8px;
  resize: none;
  overflow: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.55;
}
.open-action--write textarea::placeholder { color: transparent; }
.open-action--write:focus-within::after { position: absolute; top: clamp(12px, 1.7vh, 20px); left: 0; width: 2px; height: 35px; background: var(--accent); content: ""; pointer-events: none; }
.open-action--photo { display: grid; width: min(100%, 560px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; align-content: start; gap: 10px; }
.photo-action {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 14px;
  background: var(--trace-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  box-shadow: var(--trace-glass-shadow);
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.photo-action:hover, .photo-action:focus-within { background: var(--trace-glass-hover); box-shadow: inset 0 1px white, 0 10px 26px rgba(23,23,22,.12); }
.photo-action:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.photo-action:active { transform: scale(.99); }
.photo-action input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-preview { display: flex; width: min(100%, 560px); min-height: 0; flex: 1; flex-direction: column; margin: 0; padding: 12px; border: 1px solid rgba(255,255,255,.85); border-radius: 14px; background: var(--trace-glass); -webkit-backdrop-filter: blur(12px) saturate(1.12); backdrop-filter: blur(12px) saturate(1.12); box-shadow: var(--trace-glass-shadow); }
.photo-preview img { display: block; width: auto; max-width: 100%; height: calc(100% - 30px); max-height: 100%; object-fit: contain; object-position: left center; }
.photo-preview figcaption { display: flex; gap: 18px; align-items: center; min-height: 30px; font-size: 11px; }
.photo-preview figcaption span { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-action--photo.has-photo { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; }
.open-action--photo.has-photo .photo-action { display: none; }
.open-action--photo.has-photo .photo-preview { grid-column: 1 / -1; grid-row: 1; height: 100%; }
.open-action--photo.has-photo .trace-camera { grid-column: 1; grid-row: 2; justify-self: start; }
.open-action--photo.has-photo .trace-photo-picker { grid-column: 2; grid-row: 2; justify-self: end; }
.open-action--photo:not(.has-photo) .trace-camera { grid-column: 1; grid-row: 2; justify-self: stretch; }
.open-action--photo:not(.has-photo) .trace-photo-picker { grid-column: 2; grid-row: 2; justify-self: stretch; }
.photo-preview button, .voice-preview button, .trace-camera, .trace-photo-picker {
  min-height: 36px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 10px;
  background: var(--trace-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  box-shadow: var(--trace-glass-shadow);
  color: var(--accent);
  font-size: 10px;
  transition: background 160ms ease, transform 160ms ease;
}
.photo-preview button:hover, .voice-preview button:hover, .trace-camera:hover, .trace-photo-picker:hover { background: var(--trace-glass-hover); }
.photo-preview button:active, .voice-preview button:active, .trace-camera:active, .trace-photo-picker:active { transform: scale(.98); }
.open-action--voice { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 18px; }
.voice-action {
  display: grid;
  width: clamp(104px, 10vw, 148px);
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: var(--trace-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  box-shadow: var(--trace-glass-shadow);
  color: var(--accent);
  font-size: 10px;
  text-align: center;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.voice-action:hover { background: var(--trace-glass-hover); box-shadow: inset 0 1px white, 0 10px 26px rgba(23,23,22,.12); }
.voice-action:active { transform: scale(.97); }
.voice-action i { display: block; width: 13px; height: 13px; border-radius: 50%; background: currentColor; }
.voice-action.is-recording { border-color: var(--rainbow-red); color: var(--rainbow-red); }
.voice-action.is-recording i { animation: voicePulse 1s ease-in-out infinite; }
.voice-action time { font-variant-numeric: tabular-nums; }
.voice-preview { width: min(360px, calc(100% - 170px)); padding: 14px; border: 1px solid rgba(255,255,255,.85); border-radius: 14px; background: var(--trace-glass); -webkit-backdrop-filter: blur(12px) saturate(1.12); backdrop-filter: blur(12px) saturate(1.12); box-shadow: var(--trace-glass-shadow); }
.voice-preview audio { display: block; width: 100%; }
.voice-preview button { margin-top: 8px; }
@keyframes voicePulse { 50% { opacity: .45; transform: scale(.72); } }
.material-summary { display: flex; gap: 8px; align-items: center; min-height: 39px; overflow-x: auto; white-space: nowrap; }
.material-summary__label, #emptySummary { color: var(--muted); font-size: 10px; }
.material-summary__label { margin-right: 7px; }
.material-summary button { max-width: 180px; min-height: 28px; padding: 3px 8px; border: 0; background: rgba(153,51,112,.07); color: var(--accent); font-size: 10px; }
.material-summary button span { display: inline-block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.trace-submit-area { min-height: 0; padding-top: 7px; }
.trace-storage-note { margin: 0 0 7px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.submission-line { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(250px, 1.3fr) auto; gap: clamp(12px, 2vw, 34px); align-items: end; }
.alias-field { display: block; }
.alias-field span { display: block; margin-bottom: 4px; }
.alias-field input { width: 100%; height: 34px; padding: 3px 0; border: 0; background: transparent; font-size: 12px; }
.consent-field { display: flex; gap: 9px; align-items: center; min-height: 38px; cursor: pointer; }
.consent-field input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.consent-field span { font-size: 10px; line-height: 1.35; }
.submit-artifact { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 15px; border: 1px solid rgba(255,255,255,.56); border-radius: 12px; background: var(--trace-glass-purple); -webkit-backdrop-filter: blur(12px) saturate(1.12); backdrop-filter: blur(12px) saturate(1.12); box-shadow: inset 0 1px rgba(255,255,255,.4), inset 0 -1px rgba(73,13,44,.18), 0 8px 24px rgba(118,36,81,.17); color: white; font-size: 10px; font-weight: 600; white-space: nowrap; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.submit-artifact:hover, .submit-artifact:focus-visible { background: var(--trace-glass-purple-hover); box-shadow: inset 0 1px rgba(255,255,255,.5), 0 10px 26px rgba(118,36,81,.23); }
.submit-artifact:active { transform: scale(.98); }
.submit-artifact:disabled { opacity: .5; cursor: wait; }
.form-status { min-height: 18px; margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.3; }
.form-status.is-error { color: #b4253c; }

.submission-result { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; width: 100%; min-height: 0; }
body.is-result .artifact-intro { display: none; }
body.is-result .artifact-main { grid-template-rows: minmax(0, 1fr); }
.publication-result-toolbar, .publication-result-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.publication-result-toolbar > span { font-size: 11px; }
.publication-result-toolbar .publication-swipe-note { display: none; }
.publication-layout-switch { display: flex; }
.publication-preview { display: grid; min-height: 0; place-items: center; overflow: auto; }
.publication-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 850px, 116vh); max-height: 100%; aspect-ratio: 1.414; overflow: hidden; background: var(--rainbow-red); color: var(--ink); box-shadow: 0 12px 34px rgba(23,23,22,.14); animation: publicationArrive .45s ease-out both; }
.publication-spread::after { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(0,0,0,.16); content: ""; }
.publication-page { position: relative; min-width: 0; padding: 6%; overflow: hidden; }
.publication-page-header { position: absolute; top: 2.5%; right: 5%; left: 5%; display: grid; grid-template-columns: 1fr auto 1fr; font-size: clamp(5px, .55vw, 9px); }
.publication-page-header b { justify-self: center; font-weight: 500; }
.publication-page-header span:last-child { justify-self: end; }
.publication-vertical-label { position: absolute; bottom: 7%; left: 3%; font-size: clamp(5px, .56vw, 9px); transform: rotate(-90deg); transform-origin: 0 50%; white-space: nowrap; }
.publication-page-date { position: absolute; bottom: 2%; left: 50%; font-size: clamp(6px, .7vw, 11px); transform: translateX(-50%); }
.publication-text-grid { position: absolute; inset: 19% 13% 12% 15%; display: flex; flex-direction: column; padding: 7%; background: linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px); background-size: 20px 20px; }
.publication-text-grid > span { font-size: clamp(5px, .52vw, 9px); }
.publication-text-grid > p { margin: 10% 0 auto; overflow: auto; font-size: clamp(9px, 1.1vw, 16px); line-height: 1.35; white-space: pre-wrap; }
.publication-text-grid footer { display: flex; justify-content: space-between; gap: 8px; font-size: clamp(5px, .56vw, 9px); }
.publication-hero, .publication-archive-hero { position: absolute; inset: 18% 12% 10%; margin: 0; }
.publication-hero img, .publication-archive-hero img { display: block; width: 100%; height: 76%; object-fit: cover; filter: grayscale(1); }
.publication-hero figcaption, .publication-archive-hero figcaption { margin-top: 5%; font-size: clamp(6px, .7vw, 11px); }
.publication-triptych { position: absolute; inset: 13% auto 13% 14%; display: grid; width: 27%; grid-template-rows: repeat(3, 1fr); gap: 2%; }
.publication-triptych img { width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: grayscale(1); }
.publication-triptych-copy { position: absolute; inset: 14% 9% 15% 48%; display: flex; flex-direction: column; justify-content: center; }
.publication-triptych-copy p { max-height: 70%; overflow: auto; font-size: clamp(7px, .75vw, 12px); white-space: pre-wrap; }
.publication-triptych-copy b { font-size: clamp(5px, .6vw, 10px); }
.publication-archive-hero { inset: 15% 10% 10%; }
.publication-archive-hero img { height: 70%; }
.publication-result-actions { min-height: 46px; }
.publication-result-actions p { max-width: 560px; margin: 0; color: var(--muted); font-size: 11px; }
.publication-result-actions a, .publication-result-actions button { min-height: 32px; padding: 5px 0; border: 0; border-bottom: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 10px; white-space: nowrap; }
@keyframes publicationArrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .artifact-intro { grid-template-columns: 1fr 1fr; gap: 12px; }
  .artifact-intro h1 { font-size: clamp(52px, 7vw, 72px); }
  .submission-line { grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.3fr) auto; gap: 12px; }
  .submit-artifact { gap: 8px; }
}
@media (max-width: 650px) {
  body { grid-template-rows: 48px minmax(0, 1fr); }
  .artifact-footer, .artifact-header span:nth-child(2) { display: none; }
  .artifact-header { grid-template-columns: 1fr auto; }
  .artifact-header .archive-counter__label { display: none; }
  .artifact-header .archive-counter { font-size: 9px; white-space: nowrap; }
  .artifact-main { width: calc(100% - 28px); gap: 9px; padding: 8px 0; }
  .artifact-main .intro-more, .artifact-main .trace-camera, .artifact-main .trace-photo-picker { font-size: 11px; }
  .artifact-main .intro-more { min-height: 36px; }
  .artifact-main .trace-camera, .artifact-main .trace-photo-picker { min-height: 36px; }
  .artifact-main .submit-artifact { min-height: 42px; font-size: 11px; }
  .artifact-intro { grid-template-columns: 1fr; padding-bottom: 8px; }
  .artifact-intro > p { margin-bottom: 5px; font-size: 9px; }
  .artifact-intro h1 { font-size: clamp(43px, 12vw, 62px); }
  .intro-copy { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
  .intro-short { display: none; }
  .intro-more { margin: 0; font-size: 9px; }
  .form-topline > span { display: none; }
  .entry-modes { width: 100%; }
  .entry-modes button { flex: 1; font-size: 9px; }
  .reply-target { grid-template-columns: 1fr; gap: 0; height: 54px; }
  .reply-target > span { font-size: 9px; }
  .material-tabs button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-size: clamp(12px, 3.3vw, 15px); }
  .material-tabs button span { font-size: 10px; }
  .trace-storage-note { font-size: 10px; }
  .submission-line { grid-template-columns: minmax(0,1fr); align-items: center; gap: 3px; }
  .alias-field { grid-column: 1; grid-row: 1; }
  .consent-field { grid-column: 1; grid-row: 2; min-height: 30px; }
  .submit-artifact { grid-column: 1; grid-row: 3; justify-self: end; font-size: 10px; }
  .consent-field span { font-size: 9px; }
  .material-summary { min-height: 34px; }
  .material-summary__label { display: none; }
  .publication-result-toolbar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .publication-result-toolbar .publication-swipe-note { display: inline; color: var(--muted); font-size: 10px; }
  .publication-result-actions { align-items: flex-start; flex-wrap: wrap; gap: 8px 18px; }
  .publication-result-actions p { width: 100%; font-size: 9px; }
  .publication-preview { width: 100%; justify-items: start; overflow: auto; }
  .publication-spread { width: 560px; min-width: 560px; max-height: none; }
}
@media (max-width: 650px) and (max-height: 700px) {
  body.is-reply .artifact-intro { padding-bottom: 4px; }
  body.is-reply .artifact-intro > p { display: none; }
  body.is-reply .artifact-intro h1 { font-size: 43px; }
  body.is-reply #artifactForm { display: block; overflow-y: auto; }
  body.is-reply .open-actions { height: 145px; min-height: 145px; }
  body.is-reply .voice-action { width: 94px; }
}
@media (max-width: 360px) {
  .artifact-header .project-wordmark { font-size: 11px; }
}
@media (max-height: 660px) {
  .artifact-intro > p { margin-bottom: 4px; }
  .artifact-intro h1 { font-size: clamp(42px, 5vw, 68px); }
  .intro-short { margin-bottom: 2px; }
  .material-tabs button { min-height: 42px; }
  .open-action { padding-block: 7px; }
}
@media (max-height: 500px) {
  .artifact-intro h1 { font-size: 40px; }
  #artifactForm { overflow-y: auto; }
  .open-actions { min-height: 88px; }
}
body.is-compact-viewport .artifact-main { gap: 4px; padding-block: 4px; }
body.is-compact-viewport .artifact-intro { padding-bottom: 4px; }
body.is-compact-viewport .artifact-intro > p, body.is-compact-viewport .intro-short { display: none; }
body.is-compact-viewport .artifact-intro h1 { font-size: 38px; }
body.is-compact-viewport .intro-more { min-height: 28px; padding-block: 2px; }
body.is-compact-viewport #artifactForm { display: block; overflow-y: auto; }
body.is-compact-viewport .open-actions { height: 110px; min-height: 110px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .write-prompt, .photo-action, .photo-preview, .photo-preview button, .voice-preview button, .trace-camera, .trace-photo-picker, .voice-action, .voice-preview { background: #f4f3f5; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(153,51,112,.22); }
  .submit-artifact { background: var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none; }
}