:root {
  --ink: #09051f;
  --ink-2: #151143;
  --bone: #f7f0df;
  --paper: #fffaf0;
  --coral: #ff6f79;
  --mint: #74f1cf;
  --cobalt: #3867ff;
  --citron: #eaff63;
  --violet: #9c7cff;
  --muted: rgba(247, 240, 223, .66);
  --line: rgba(247, 240, 223, .22);
  --spread: 0;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color: var(--bone);
  background: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--ink); }

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 7%, rgba(56, 103, 255, .24), transparent 31rem),
    linear-gradient(145deg, #09051f 0%, #0d0929 49%, #08051a 100%);
}

button, [role="button"] { font: inherit; }
button { color: inherit; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible {
  outline: 3px solid var(--citron);
  outline-offset: 4px;
}

[hidden] { display: none !important; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient__image {
  position: absolute;
  inset: -5%;
  background: url("og-image.png") center / cover no-repeat;
  opacity: .15;
  filter: saturate(1.15) contrast(1.1);
  transform: scale(1.07);
  transition: opacity 900ms ease, transform 1600ms cubic-bezier(.2,.8,.2,1);
  mix-blend-mode: screen;
}

body[data-state="working"] .ambient__image,
body[data-state="open"] .ambient__image,
body[data-state="cleaned"] .ambient__image,
body[data-state="sealed"] .ambient__image { opacity: .055; transform: scale(1.14); }

.ambient__grain {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.ambient__beam {
  position: absolute;
  width: 60vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 241, 207, .8), transparent);
  box-shadow: 0 0 40px 4px rgba(116, 241, 207, .18);
  transform-origin: center;
}
.ambient__beam--one { left: -12vw; top: 33vh; transform: rotate(-18deg); }
.ambient__beam--two { right: -20vw; bottom: 26vh; transform: rotate(14deg); background: linear-gradient(90deg, transparent, rgba(255, 111, 121, .75), transparent); }

.masthead {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 68px;
  padding: 14px clamp(18px, 3.2vw, 50px);
  border-bottom: 1px solid var(--line);
}

.masthead__home {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 800;
}
.masthead__date { padding: 7px 9px; color: var(--ink); background: var(--citron); }
.masthead__edition { opacity: .82; }
.masthead__privacy { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .16em; }
.masthead__privacy span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }

main { min-height: calc(100svh - 69px); }

.landing {
  display: grid;
  grid-template-columns: minmax(0, .66fr) minmax(430px, 1.04fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 30px 7vw;
  min-height: calc(100svh - 69px);
  padding: clamp(48px, 8vh, 100px) clamp(18px, 6vw, 100px) max(26px, env(safe-area-inset-bottom));
}

.landing__copy { max-width: 760px; }
.kicker { margin: 0 0 13px; color: var(--mint); font-size: .68rem; line-height: 1.2; font-weight: 900; letter-spacing: .2em; }

h1, h2, h3, p { text-wrap: pretty; }
h1 {
  margin: 0;
  font-size: clamp(3.35rem, 5.7vw, 6.4rem);
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
h1 span { display: block; }
h1 span:last-child { color: var(--coral); margin-left: .22em; }

.landing__dek {
  width: min(52ch, 87%);
  margin: clamp(28px, 4vw, 58px) 0 0;
  color: rgba(247, 240, 223, .76);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.55;
}

.paste-shell { position: relative; width: min(100%, 650px); justify-self: end; }
.paste-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(360px, 54vh, 560px);
  padding: clamp(28px, 5vw, 54px);
  overflow: hidden;
  isolation: isolate;
  cursor: text;
  color: var(--ink);
  background: rgba(255, 250, 240, .96);
  border: 1px solid white;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .42), -20px 20px 0 rgba(56, 103, 255, .42), 22px -16px 0 rgba(255, 111, 121, .26);
  transform: rotate(1.35deg);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.paste-zone:hover, .paste-zone:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: 0 42px 110px rgba(0, 0, 0, .52), -24px 24px 0 rgba(56, 103, 255, .54), 25px -19px 0 rgba(255, 111, 121, .35); }
.paste-zone::before {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: -1;
  border: 1px dashed rgba(9, 5, 31, .24);
}
.paste-zone__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(to bottom, var(--cobalt) 0 22px, var(--coral) 22px 44px, var(--mint) 44px 66px, var(--citron) 66px 88px); }
.paste-zone__eyebrow { font-size: .62rem; font-weight: 900; letter-spacing: .17em; opacity: .6; }
.paste-zone strong { display: block; max-width: 9ch; margin-top: 22px; font-size: clamp(2rem, 4.2vw, 4rem); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.paste-zone > span:last-of-type:not(.paste-zone__cursor) { display: block; max-width: 29ch; margin-top: 24px; font-family: Georgia, serif; font-size: .9rem; line-height: 1.45; opacity: .63; }
.paste-zone__cursor { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: var(--coral); animation: blink 1s steps(1) infinite; }

.sample-button {
  position: absolute;
  right: -16px;
  bottom: -34px;
  z-index: 2;
  min-width: 220px;
  min-height: 74px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  border: 0;
  color: var(--ink);
  background: var(--citron);
  box-shadow: 8px 8px 0 rgba(9, 5, 31, .7);
  transform: rotate(-2deg);
  transition: transform 180ms ease;
}
.sample-button:hover { transform: rotate(0deg) translate(-3px, -3px); }
.sample-button span, .sample-button strong { display: block; }
.sample-button span { font-size: .55rem; font-weight: 900; letter-spacing: .17em; opacity: .62; }
.sample-button strong { margin-top: 5px; font-size: .88rem; text-transform: uppercase; }
.landing__footnote { grid-column: 1 / -1; margin: 22px 0 0; color: rgba(247, 240, 223, .42); font-size: .66rem; letter-spacing: .08em; }

.workbench {
  position: relative;
  min-height: calc(100svh - 69px);
  padding: clamp(28px, 5vh, 64px) clamp(14px, 4vw, 60px) max(32px, env(safe-area-inset-bottom));
}
.workbench__heading { position: relative; z-index: 4; max-width: 620px; }
.workbench__heading h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5.8rem); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; }
.workbench__heading > p:last-child { max-width: 46ch; margin: 15px 0 0; color: var(--muted); font-family: Georgia, serif; line-height: 1.5; }

.stage-wrap { position: relative; width: min(1120px, 100%); margin: clamp(30px, 4vh, 56px) auto 0; }
.stage {
  position: relative;
  height: clamp(360px, 52vh, 600px);
  perspective: 1500px;
  transform-style: preserve-3d;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}

.layer {
  --tx: 0px;
  --ty: 0px;
  --tz: 0px;
  --rz: 0deg;
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(720px, 68vw);
  height: min(350px, 42vh);
  min-height: 280px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translate3d(calc(var(--tx) * var(--spread)), calc(var(--ty) * var(--spread)), calc(var(--tz) * var(--spread))) rotateZ(calc(var(--rz) * var(--spread))) rotateX(calc(4deg * var(--spread)));
  transition: transform 850ms cubic-bezier(.18,.82,.16,1), opacity 500ms ease, filter 500ms ease;
  pointer-events: none;
}
.stage.is-dragging .layer { transition: none; }
.layer__tab { position: absolute; left: 15px; top: -28px; display: flex; gap: 8px; align-items: center; padding: 4px 8px 4px 4px; color: currentColor; background: var(--ink); font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.layer__tab span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; }
.layer__body { width: 100%; height: 100%; overflow: hidden; border: 1px solid currentColor; box-shadow: 0 24px 55px rgba(0,0,0,.28); backdrop-filter: blur(8px); }

.layer--visible { --tx: -245px; --ty: -135px; --tz: 180px; --rz: -4deg; z-index: 5; width: min(620px, 57vw); height: min(310px, 38vh); min-height: 250px; color: var(--ink); }
.layer--visible .layer__body { background: rgba(255, 250, 240, .98); border-color: var(--paper); }
.layer--words { --tx: -88px; --ty: -47px; --tz: 95px; --rz: 2deg; z-index: 4; color: var(--mint); }
.layer--words .layer__body { background: rgba(20, 33, 78, .84); }
.layer--semantics { --tx: 18px; --ty: 25px; --tz: 14px; --rz: -1deg; z-index: 3; color: var(--violet); }
.layer--semantics .layer__body { background: rgba(33, 18, 73, .85); }
.layer--destinations { --tx: 122px; --ty: 95px; --tz: -70px; --rz: 3deg; z-index: 2; color: var(--coral); }
.layer--destinations .layer__body { background: rgba(80, 19, 55, .82); }
.layer--residue { --tx: 222px; --ty: 163px; --tz: -155px; --rz: -2deg; z-index: 1; color: var(--citron); }
.layer--residue .layer__body { background: rgba(37, 38, 20, .84); }

.layer__body--visible { padding: clamp(25px, 4vw, 50px); color: var(--ink); user-select: text; }
.safe-fragment { max-width: 54ch; font-family: Georgia, serif; font-size: clamp(.93rem, 1.35vw, 1.15rem); line-height: 1.55; }
.safe-fragment h1, .safe-fragment h2, .safe-fragment h3 { margin: 0 0 .45em; font-family: Arial, sans-serif; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: .92; letter-spacing: -.045em; text-transform: none; }
.safe-fragment p, .safe-fragment blockquote, .safe-fragment ul, .safe-fragment ol { margin: .65em 0; }
.safe-fragment a { color: var(--cobalt); text-decoration: underline; text-underline-offset: .14em; }
.safe-image { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--ink); background: var(--mint); font-family: Arial, sans-serif; font-size: .64rem; font-weight: 800; text-transform: uppercase; }

.layer__body--words { padding: 26px; }
.word-river { display: flex; flex-wrap: wrap; align-content: center; gap: 7px 11px; height: 100%; opacity: calc(.35 + var(--spread) * .65); }
.word-river span { font-size: clamp(.72rem, 1.1vw, 1rem); font-weight: 800; letter-spacing: .03em; }
.word-river span:nth-child(4n) { color: var(--bone); }
.word-river span:nth-child(7n) { transform: translateY(-5px); }

.layer__body--semantics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 24px; }
.semantic-cell { display: grid; place-items: center; min-height: 50px; padding: 7px; border: 1px solid currentColor; color: var(--bone); background: rgba(156,124,255,.12); font-size: .55rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.semantic-cell:nth-child(3n) { color: var(--mint); transform: translateY(10px); }

.layer__body--destinations { position: relative; padding: 22px; }
.destination-line { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; margin: 7px 0; font-size: .66rem; line-height: 1.25; }
.destination-line i { display: block; height: 1px; background: currentColor; box-shadow: 20px 0 0 rgba(255,111,121,.4), 40px 0 0 rgba(255,111,121,.18); }
.destination-line code { overflow: hidden; color: var(--bone); text-overflow: ellipsis; white-space: nowrap; }
.destination-orbit { position: absolute; width: 150px; height: 150px; right: -28px; bottom: -38px; border: 1px solid currentColor; border-radius: 50%; }
.destination-orbit::before, .destination-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--coral); box-shadow: 0 0 15px var(--coral); }
.destination-orbit::before { width: 8px; height: 8px; top: 18px; left: 23px; }
.destination-orbit::after { width: 5px; height: 5px; right: 16px; bottom: 38px; }

.layer__body--residue { display: flex; flex-wrap: wrap; align-content: center; gap: 10px; padding: 25px; }
.residue-bit { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 10px; color: var(--ink); background: var(--citron); font-size: .59rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.residue-bit::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.residue-bit:nth-child(2n) { background: var(--coral); transform: rotate(2deg); }
.residue-bit:nth-child(3n) { background: var(--mint); transform: rotate(-2deg); }

.stage__glint { position: absolute; left: 50%; top: 50%; width: 68%; height: 55%; transform: translate(-50%,-50%) rotate(-8deg); border-top: 1px solid rgba(255,255,255,.7); opacity: calc(.1 + var(--spread) * .6); filter: drop-shadow(0 0 12px white); pointer-events: none; }

.peel-guide { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: min(520px, 100%); margin: 4px auto 0; color: var(--muted); font-size: .53rem; font-weight: 900; letter-spacing: .13em; }
.peel-guide__track { height: 3px; background: rgba(247,240,223,.14); }
.peel-guide__track i { display: block; width: calc(var(--spread) * 100%); height: 100%; background: linear-gradient(90deg, var(--mint), var(--coral), var(--citron)); box-shadow: 0 0 16px var(--coral); }
.peel-button { display: block; min-height: 48px; margin: 18px auto 0; padding: 0 20px; cursor: pointer; border: 1px solid var(--line); color: var(--bone); background: rgba(247,240,223,.06); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.peel-button:hover { color: var(--ink); background: var(--mint); border-color: var(--mint); }

.manifest, .seal, .result {
  position: relative;
  z-index: 7;
  width: min(980px, 100%);
  margin: 45px auto 0;
  padding: clamp(24px, 4vw, 45px);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 16px 16px 0 rgba(56,103,255,.4), 0 35px 80px rgba(0,0,0,.35);
}
.manifest { transform: translateY(25px); opacity: 0; transition: transform 500ms ease, opacity 500ms ease; }
body[data-state="open"] .manifest { transform: none; opacity: 1; }
.manifest__heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid rgba(9,5,31,.2); }
.manifest__heading .kicker, .seal .kicker, .result .kicker { color: var(--cobalt); }
.manifest h3, .seal h3, .result h3 { margin: 0; font-size: clamp(2rem, 4vw, 4.4rem); line-height: .9; letter-spacing: -.06em; text-transform: uppercase; }
.manifest__heading > p { margin: 0; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.manifest__heading > p strong { display: block; color: var(--coral); font-size: 2rem; letter-spacing: -.06em; }

.cargo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.cargo-item { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; min-height: 60px; padding: 10px 13px; cursor: pointer; border: 1px solid rgba(9,5,31,.18); background: #f5efdf; transition: transform 160ms ease, background 160ms ease; }
.cargo-item:hover { transform: translateY(-2px); }
.cargo-item input { position: absolute; opacity: 0; pointer-events: none; }
.cargo-item__check { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ink); }
.cargo-item input:checked + .cargo-item__check { color: var(--ink); background: var(--mint); }
.cargo-item input:checked + .cargo-item__check::after { content: "×"; font-size: 1.2rem; line-height: 1; }
.cargo-item__copy strong, .cargo-item__copy span { display: block; }
.cargo-item__copy strong { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.cargo-item__copy span { margin-top: 3px; color: rgba(9,5,31,.56); font-family: Georgia, serif; font-size: .72rem; }
.cargo-item__weight { color: var(--coral); font-size: .58rem; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.cargo-item.is-leaving { animation: release 650ms cubic-bezier(.2,.8,.3,1) forwards; }

.manifest__actions, .result__actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.action { min-height: 52px; padding: 0 22px; cursor: pointer; border: 0; color: var(--ink); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.action--clean { background: var(--coral); box-shadow: 7px 7px 0 var(--ink); }
.action--clean:hover { background: var(--citron); }
.text-button { min-height: 46px; padding: 0 4px; cursor: pointer; border: 0; border-bottom: 1px solid currentColor; color: var(--ink); background: transparent; font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.seal { display: grid; grid-template-columns: 1fr auto; gap: 12px 40px; align-items: center; }
.seal .kicker { grid-column: 1 / -1; }
.seal h3 { grid-column: 1; }
.seal p { grid-column: 1; max-width: 55ch; margin: 0; color: rgba(9,5,31,.65); font-family: Georgia, serif; line-height: 1.5; }
.action--seal { grid-column: 2; grid-row: 2 / span 2; background: var(--cobalt); color: white; box-shadow: 7px 7px 0 var(--coral); }

.result { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px 50px; overflow: hidden; }
.result::after { content: ""; position: absolute; right: -8%; bottom: -35%; width: 330px; height: 330px; border: 44px solid var(--mint); border-radius: 50%; opacity: .23; }
.result__copy, .result__measure, .result__actions { position: relative; z-index: 1; }
.result__copy p:last-child { max-width: 42ch; color: rgba(9,5,31,.64); font-family: Georgia, serif; }
.result__measure { display: grid; align-content: center; gap: 17px; }
.result__measure > div { display: grid; grid-template-columns: 54px 1fr 62px; gap: 10px; align-items: center; font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.result__measure i { display: block; width: var(--bar, 100%); height: 12px; background: var(--coral); transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.result__measure > div:nth-child(2) i { background: var(--mint); }
.result__measure strong { text-align: right; }
.result__actions { grid-column: 1 / -1; }
.action--copy { background: var(--citron); box-shadow: 7px 7px 0 var(--ink); }

.status { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; max-width: min(90vw, 600px); margin: 0; padding: 10px 14px; color: var(--ink); background: var(--mint); font-size: .68rem; font-weight: 800; transform: translate(-50%, 140%); opacity: 0; transition: transform 250ms ease, opacity 250ms ease; }
.status.is-visible { transform: translate(-50%, 0); opacity: 1; }

@keyframes blink { 0%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes release {
  0% { opacity: 1; transform: translate(0,0) rotate(0); }
  65% { opacity: .8; transform: translate(var(--release-x), -48px) rotate(var(--release-r)); }
  100% { opacity: 0; transform: translate(calc(var(--release-x) * 1.5), -120px) rotate(var(--release-r)); }
}

@media (max-width: 900px) {
  .landing { grid-template-columns: 1fr; align-items: start; padding-top: 50px; }
  .landing__copy { max-width: 680px; }
  h1 { font-size: clamp(3.35rem, 11vw, 6rem); }
  .paste-shell { width: min(88vw, 540px); justify-self: center; margin: 15px 0 48px; }
  .landing__footnote { margin-top: 0; }
  .layer { width: min(700px, 78vw); }
  .result { grid-template-columns: 1fr; }
  .result__actions { grid-column: 1; }
}

@media (max-width: 620px) {
  .masthead { min-height: 58px; padding: 10px 15px; }
  .masthead__edition { display: none; }
  .masthead__privacy { font-size: .54rem; }
  main { min-height: calc(100svh - 59px); }
  .landing { min-height: calc(100svh - 59px); gap: 26px; padding: 38px 16px 28px; }
  .landing__dek { width: 100%; margin-top: 24px; }
  .paste-shell { width: calc(100vw - 54px); }
  .paste-zone { min-height: 290px; padding: 34px 29px; box-shadow: 0 28px 70px rgba(0,0,0,.45), -10px 12px 0 rgba(56,103,255,.46), 10px -9px 0 rgba(255,111,121,.28); }
  .sample-button { right: -10px; bottom: -40px; }
  .workbench { min-height: calc(100svh - 59px); padding: 25px 10px 30px; }
  .workbench__heading { padding: 0 8px; }
  .workbench__heading h2 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .stage-wrap { margin-top: 25px; }
  .stage { height: 560px; }
  .layer { left: 50%; top: 43%; width: calc(100vw - 54px); height: 170px; min-height: 0; transform: translate(-50%, -50%) translate3d(calc(var(--tx-mobile) * var(--spread)), calc(var(--ty-mobile) * var(--spread)), calc(var(--tz) * var(--spread))) rotateZ(calc(var(--rz) * var(--spread))); }
  .layer--visible { --tx-mobile: -20px; --ty-mobile: -150px; width: calc(100vw - 84px); height: 150px; min-height: 0; }
  .layer--words { --tx-mobile: -10px; --ty-mobile: -75px; }
  .layer--semantics { --tx-mobile: 0px; --ty-mobile: 0px; }
  .layer--destinations { --tx-mobile: 10px; --ty-mobile: 75px; }
  .layer--residue { --tx-mobile: 20px; --ty-mobile: 150px; }
  .layer__tab { top: -22px; font-size: .49rem; }
  .layer__tab span { width: 18px; height: 18px; }
  .layer__body--visible { padding: 24px; }
  .safe-fragment { font-size: .66rem; line-height: 1.28; }
  .safe-fragment h1, .safe-fragment h2, .safe-fragment h3 { font-size: 1.25rem; }
  .layer__body--words, .layer__body--semantics, .layer__body--destinations, .layer__body--residue { padding: 16px; }
  .layer__body--semantics { grid-template-columns: repeat(4, 1fr); }
  .semantic-cell { min-height: 35px; font-size: .45rem; }
  .destination-line { margin: 4px 0; font-size: .52rem; }
  .residue-bit { min-height: 27px; padding: 5px 7px; font-size: .46rem; }
  .peel-guide { padding: 0 10px; }
  .manifest, .seal, .result { margin-top: 28px; padding: 24px 18px; box-shadow: 8px 8px 0 rgba(56,103,255,.4); }
  .manifest__heading { align-items: start; }
  .cargo-list { grid-template-columns: 1fr; }
  .manifest__actions, .result__actions { align-items: stretch; flex-direction: column; }
  .action, .text-button { width: 100%; }
  .seal { grid-template-columns: 1fr; }
  .seal .kicker, .seal h3, .seal p, .action--seal { grid-column: 1; grid-row: auto; }
  .action--seal { margin-top: 10px; }
  .result__measure > div { grid-template-columns: 48px 1fr 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}