pasteup 0.1.0__py3-none-any.whl

pasteup/static/css/styles.css

@@ -0,0 +1,983 @@
+/*
+ * Pasteup: a hand-drawn look for a clip-art tool.
+ *
+ * The sketchy feel comes from wobbly border radii, an SVG roughness filter on
+ * card outlines (#sketchy in index.html), hard offset shadows and two bundled
+ * handwriting fonts. Body text, inputs and paths stay in a plain system font,
+ * because a handwriting font hurts reading at small sizes.
+ */
+
+@font-face {
+  font-family: "Caveat";
+  src: url("../fonts/caveat-latin-700.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Patrick Hand";
+  src: url("../fonts/patrick-hand-latin-400.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ---------- Tokens ---------- */
+
+:root {
+  /* Light only: browsers that darken pages on their own leave this one alone. */
+  color-scheme: only light;
+  --paper: #fbf6ea;
+  --paper-raised: #fffdf7;
+  --paper-dot: rgba(43, 42, 51, 0.1);
+  --ink: #2b2a33;
+  --ink-soft: #57525f;
+  --line: #2b2a33;
+  --line-soft: rgba(43, 42, 51, 0.32);
+  --shadow: #2b2a33;
+  --marker: #ffd447;
+  --marker-ink: #2b2a33;
+  --accent: #1f5fa8;
+  --tape: rgba(236, 207, 128, 0.7);
+  --note: #fff3b0;
+  --success-ink: #1d6337;
+  --success-bg: #dcf1df;
+  --warning-ink: #8f2418;
+  --warning-bg: #fde2da;
+  --neutral-bg: #f1ebdd;
+  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2a33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5c2.5 2.2 4.6 4.3 7 6.6 2.4-2.4 4.5-4.6 7-7'/%3E%3C/svg%3E");
+  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none' stroke='%23ffd447' stroke-width='5' stroke-linecap='round' preserveAspectRatio='none'%3E%3Cpath d='M3 7c9-5 15 4 24 0s15-5 24 0 15 4 24 0 15-5 24 0 12 3 18 0'/%3E%3C/svg%3E");
+
+  --font-hand: "Caveat", "Patrick Hand", "Comic Sans MS", cursive;
+  --font-label: "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
+  --font-body: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
+  --wobble-soft: 14px 5px 12px 6px / 6px 12px 5px 14px;
+  --blob: 52% 48% 55% 45% / 48% 54% 46% 52%;
+  --pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2a33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 19.8l1.1-4.5L16.4 4.2c.8-.8 2-.8 2.8 0l.6.6c.8.8.8 2 0 2.8L8.7 18.7z'/%3E%3Cpath d='M14.4 6.3l3.3 3.3'/%3E%3C/svg%3E");
+}
+
+/* ---------- Base ---------- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--paper);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ink);
+  background-color: var(--paper);
+  background-image: radial-gradient(var(--paper-dot) 1.2px, transparent 1.4px);
+  background-size: 22px 22px;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--accent);
+  text-underline-offset: 0.2em;
+}
+
+[hidden],
+.hidden {
+  display: none !important;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.svg-defs {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.skip-link {
+  position: absolute;
+  left: 1rem;
+  top: -4rem;
+  z-index: 10;
+  padding: 0.5rem 1rem;
+  background: var(--marker);
+  color: var(--marker-ink);
+  border: 2px solid var(--line);
+  font-family: var(--font-label);
+  font-size: 1.1rem;
+}
+
+.skip-link:focus {
+  top: 1rem;
+}
+
+.doodle {
+  width: 2.25rem;
+  height: 2.25rem;
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.doodle__fill {
+  fill: var(--paper-raised);
+}
+
+.doodle__accent {
+  fill: var(--marker);
+}
+
+/* ---------- Masthead ---------- */
+
+.masthead {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 1.75rem 1.25rem 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+}
+
+.brand .doodle {
+  width: 3.4rem;
+  height: 3.4rem;
+  transform: rotate(-8deg);
+}
+
+.brand h1 {
+  /* Hug the word, so the underline is as long as the word. */
+  width: fit-content;
+  font-family: var(--font-hand);
+  font-size: clamp(2.7rem, 7vw, 3.6rem);
+  line-height: 0.95;
+  padding-bottom: 0.2em;
+  background: var(--squiggle) no-repeat left bottom / 100% 0.32em;
+}
+
+.brand__tagline {
+  font-family: var(--font-label);
+  font-size: 1.2rem;
+  color: var(--ink-soft);
+}
+
+/* ---------- Layout ---------- */
+
+.layout {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 2rem 1.25rem 3rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2.5rem;
+  align-items: start;
+}
+
+/* Each result card follows its step in the source, so narrow screens read top
+   to bottom: scan, see what was found, set up, make, see the files. Wide
+   screens move the cards beside their steps, where they stay in view while the
+   step scrolls past. */
+@media (min-width: 1100px) {
+  .layout {
+    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
+  }
+
+  .step {
+    grid-column: 1;
+  }
+
+  .step--pick {
+    grid-row: 1;
+  }
+
+  .step--page {
+    grid-row: 2;
+  }
+
+  .step--make {
+    grid-row: 3;
+  }
+
+  .result-panel {
+    grid-column: 2;
+    position: sticky;
+    top: 1.75rem;
+  }
+
+  .result-panel--scan {
+    grid-row: 1 / span 2;
+  }
+
+  .result-panel--files {
+    grid-row: 3;
+  }
+}
+
+/* ---------- Cards ---------- */
+
+.card {
+  position: relative;
+  background: var(--paper-raised);
+  padding: 1.9rem 1.6rem 1.6rem;
+}
+
+/* The outline and its shadow are drawn by a pseudo-element so the roughness
+   filter bends the ink line without blurring the text inside. */
+.card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--line);
+  border-radius: 6px 10px 8px 12px / 12px 8px 10px 6px;
+  box-shadow: 4px 5px 0 var(--shadow);
+  filter: url("#sketchy");
+  pointer-events: none;
+}
+
+/* A strip of masking tape holding the card to the page. */
+.card::before {
+  content: "";
+  position: absolute;
+  top: -0.8rem;
+  left: 50%;
+  width: 6.5rem;
+  height: 1.55rem;
+  background: var(--tape);
+  transform: translateX(-50%) rotate(-3deg);
+  z-index: 1;
+}
+
+.layout > .card:nth-child(even)::before {
+  left: 22%;
+  transform: translateX(-50%) rotate(2.5deg);
+}
+
+.step__title {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  margin-bottom: 0.4rem;
+  font-family: var(--font-hand);
+  font-size: clamp(1.9rem, 4.5vw, 2.3rem);
+  line-height: 1.05;
+}
+
+.step__number {
+  display: inline-grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: none;
+  border: 2px solid var(--line);
+  border-radius: var(--blob);
+  background: var(--marker);
+  color: var(--marker-ink);
+  font-size: 1.65rem;
+  transform: rotate(-7deg);
+}
+
+.step__intro {
+  color: var(--ink-soft);
+  margin-bottom: 1.25rem;
+  max-width: 62ch;
+}
+
+.subhead {
+  font-family: var(--font-hand);
+  font-size: 1.75rem;
+  line-height: 1.1;
+}
+
+/* ---------- Form controls ---------- */
+
+.field {
+  min-width: 0;
+}
+
+.field + .field {
+  margin-top: 1rem;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+  gap: 1rem 1.1rem;
+}
+
+.field-grid .field + .field {
+  margin-top: 0;
+}
+
+/* Five short page settings fit one row on a wide card. */
+.field-grid--page {
+  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
+}
+
+.field-label,
+legend.field-label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-family: var(--font-label);
+  font-size: 1.2rem;
+  line-height: 1.2;
+}
+
+.field-help {
+  margin-top: 0.35rem;
+  font-size: 0.9rem;
+  color: var(--ink-soft);
+}
+
+input[type="text"],
+input[type="number"],
+select,
+textarea {
+  width: 100%;
+  min-height: 2.8rem;
+  padding: 0.55rem 0.8rem;
+  font: inherit;
+  color: var(--ink);
+  background: var(--paper);
+  border: 2px solid var(--line);
+  border-radius: var(--wobble-soft);
+}
+
+textarea {
+  min-height: 5.5rem;
+  resize: vertical;
+}
+
+select {
+  appearance: none;
+  padding-right: 2.4rem;
+  background-image: var(--chevron);
+  background-repeat: no-repeat;
+  background-position: right 0.65rem center;
+  background-size: 1.2rem;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--ink-soft);
+  opacity: 0.85;
+}
+
+input[readonly] {
+  background: var(--note);
+  border-style: dashed;
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+}
+
+input:disabled,
+select:disabled {
+  border-style: dashed;
+  opacity: 0.6;
+}
+
+:focus-visible {
+  outline: 3px dashed var(--accent);
+  outline-offset: 3px;
+}
+
+/* Hand-drawn checkboxes: a wobbly box with a marker tick. */
+.check,
+.subfolder-checklist__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  font-family: var(--font-label);
+  font-size: 1.15rem;
+  line-height: 1.3;
+  cursor: pointer;
+}
+
+.check input,
+.subfolder-checklist__item input {
+  appearance: none;
+  display: grid;
+  place-content: center;
+  width: 1.45rem;
+  height: 1.45rem;
+  margin: 0;
+  flex: none;
+  background: var(--paper);
+  border: 2px solid var(--line);
+  border-radius: 5px 9px 4px 10px / 10px 4px 9px 5px;
+  cursor: pointer;
+}
+
+.check input::after,
+.subfolder-checklist__item input::after {
+  content: "";
+  width: 0.75rem;
+  height: 0.4rem;
+  margin-top: -0.2rem;
+  border-left: 3px solid var(--marker-ink);
+  border-bottom: 3px solid var(--marker-ink);
+  transform: rotate(-48deg) scale(0);
+  transition: transform 120ms ease-out;
+}
+
+.check input:checked,
+.subfolder-checklist__item input:checked {
+  background: var(--marker);
+}
+
+.check input:checked::after,
+.subfolder-checklist__item input:checked::after {
+  transform: rotate(-48deg) scale(1);
+}
+
+.check + .check,
+.check + .field-help + .check {
+  margin-top: 0.6rem;
+}
+
+/* Mode choice: two sticky-note cards behaving as radio buttons. */
+.mode-toggle {
+  margin: 0 0 1.25rem;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.mode-toggle__options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 0.9rem;
+}
+
+.mode-option {
+  position: relative;
+  display: block;
+  cursor: pointer;
+}
+
+.mode-option input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.mode-option__body {
+  display: block;
+  height: 100%;
+  padding: 0.8rem 1rem 0.85rem;
+  background: var(--paper);
+  border: 2px solid var(--line);
+  border-radius: var(--wobble);
+  box-shadow: 3px 4px 0 var(--shadow);
+  transition: transform 120ms ease-out, background-color 120ms ease-out;
+}
+
+.mode-option__title {
+  display: block;
+  font-family: var(--font-label);
+  font-size: 1.35rem;
+  line-height: 1.2;
+}
+
+.mode-option__text {
+  display: block;
+  font-size: 0.92rem;
+}
+
+.mode-option input:checked + .mode-option__body {
+  background: var(--marker);
+  color: var(--marker-ink);
+  transform: rotate(-1.2deg);
+}
+
+.mode-option input:checked + .mode-option__body .mode-option__title::after {
+  content: " \2713";
+}
+
+.mode-option input:focus-visible + .mode-option__body {
+  outline: 3px dashed var(--accent);
+  outline-offset: 4px;
+}
+
+/* Collapsible extras: native <details>, so keyboard and screen readers work. */
+.disclosure {
+  margin-top: 1.25rem;
+  padding-top: 0.9rem;
+  border-top: 2px dashed var(--line-soft);
+}
+
+.disclosure > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  list-style: none;
+  cursor: pointer;
+  font-family: var(--font-label);
+  font-size: 1.2rem;
+}
+
+.disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+
+.disclosure > summary::before {
+  content: "+";
+  display: inline-grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--line);
+  border-radius: var(--blob);
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.disclosure[open] > summary::before {
+  content: "\2013";
+  background: var(--marker);
+  color: var(--marker-ink);
+}
+
+.disclosure__body {
+  padding-top: 1rem;
+}
+
+.disclosure__body > .field + .field-grid {
+  margin-top: 1rem;
+}
+
+/* ---------- Buttons ---------- */
+
+.primary-button,
+.secondary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.9rem;
+  padding: 0.55rem 1.4rem;
+  font-family: var(--font-label);
+  font-size: 1.25rem;
+  line-height: 1.1;
+  color: var(--ink);
+  background: var(--paper-raised);
+  border: 2px solid var(--line);
+  border-radius: var(--wobble);
+  box-shadow: 3px 4px 0 var(--shadow);
+  cursor: pointer;
+  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
+}
+
+.primary-button {
+  background: var(--marker);
+  color: var(--marker-ink);
+}
+
+.primary-button:hover:not(:disabled),
+.secondary-button:hover:not(:disabled) {
+  transform: translate(-1px, -2px) rotate(-0.6deg);
+  box-shadow: 4px 6px 0 var(--shadow);
+}
+
+.primary-button:active:not(:disabled),
+.secondary-button:active:not(:disabled) {
+  transform: translate(2px, 3px);
+  box-shadow: 1px 1px 0 var(--shadow);
+}
+
+.primary-button:disabled,
+.secondary-button:disabled {
+  border-style: dashed;
+  box-shadow: none;
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.button-small {
+  min-height: 2.4rem;
+  padding: 0.35rem 1rem;
+  font-size: 1.1rem;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.25rem;
+  margin-top: 1.4rem;
+}
+
+.actions__hint {
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+  max-width: 40ch;
+}
+
+/* ---------- Step-specific ---------- */
+
+.subpanel {
+  margin-top: 1.6rem;
+  padding: 1.25rem;
+  background: var(--paper);
+  border: 2px dashed var(--line);
+  border-radius: var(--wobble-soft);
+}
+
+.subpanel .subhead {
+  margin-bottom: 0.3rem;
+}
+
+.subfolder-checklist {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  gap: 0.55rem 1.1rem;
+  margin: 0.75rem 0 1rem;
+}
+
+.subfolder-checklist__item {
+  align-items: center;
+  overflow-wrap: anywhere;
+}
+
+.subfolder-picker-row {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.subfolder-picker-row .field {
+  flex: 1 1 14rem;
+}
+
+.checklist-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.status-line {
+  margin-top: 0.6rem;
+  font-size: 0.95rem;
+}
+
+.status-error {
+  color: var(--warning-ink);
+}
+
+/* Tiles keep their own height, so each button sits right under its options. */
+.output-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
+  gap: 1.4rem;
+  align-items: start;
+}
+
+.output-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  padding: 1.2rem 1.2rem 1.3rem;
+  background: var(--paper);
+  border: 2px dashed var(--line);
+  border-radius: var(--wobble);
+}
+
+.output-tile__head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.output-tile__head p {
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+}
+
+.output-tile .disclosure {
+  margin-top: 0.1rem;
+}
+
+.output-tile > .primary-button,
+.output-tile > .secondary-button {
+  margin-top: 0.3rem;
+  align-self: flex-start;
+}
+
+.sticky-note {
+  margin: 0 0 1.6rem;
+  padding: 0.7rem 1rem;
+  background: var(--note);
+  color: var(--ink);
+  font-family: var(--font-label);
+  font-size: 1.15rem;
+  line-height: 1.3;
+  border-radius: 2px 2px 14px 2px;
+  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.14);
+  transform: rotate(-0.8deg);
+  max-width: 46ch;
+}
+
+/* ---------- Results ---------- */
+
+.result-panel .step__title {
+  margin-bottom: 1rem;
+}
+
+.result-card__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.6rem;
+}
+
+.result-badge {
+  display: inline-block;
+  padding: 0.1rem 0.85rem;
+  font-family: var(--font-label);
+  font-size: 1.15rem;
+  color: var(--ink);
+  background: var(--neutral-bg);
+  border: 2px solid currentColor;
+  border-radius: var(--wobble);
+  transform: rotate(-2.5deg);
+}
+
+.result-badge--success {
+  color: var(--success-ink);
+  background: var(--success-bg);
+}
+
+.result-badge--warning {
+  color: var(--warning-ink);
+  background: var(--warning-bg);
+}
+
+.is-busy .result-badge--neutral {
+  animation: wiggle 0.9s ease-in-out infinite;
+}
+
+@keyframes wiggle {
+  50% {
+    transform: rotate(2.5deg);
+  }
+}
+
+.result-message {
+  overflow-wrap: anywhere;
+}
+
+/* Tips and caveats, pencilled onto a sticky note. */
+.result-notes {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0.9rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.result-notes li {
+  padding: 0.5rem 0.75rem 0.5rem 2.1rem;
+  background: var(--note) var(--pencil) no-repeat 0.6rem 0.6rem / 1.05rem;
+  border-radius: 2px 2px 12px 2px;
+  font-size: 0.95rem;
+  overflow-wrap: anywhere;
+}
+
+.result-summary-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem 1rem;
+  margin: 1.1rem 0 0;
+  padding-top: 0.8rem;
+  border-top: 2px dashed var(--line-soft);
+}
+
+.result-summary-row {
+  display: contents;
+}
+
+.result-summary-row dt {
+  font-family: var(--font-label);
+  font-size: 1.1rem;
+  color: var(--ink-soft);
+}
+
+.result-summary-row dd {
+  margin: 0;
+  font-weight: 600;
+}
+
+.result-section h3 {
+  margin: 1.1rem 0 0.4rem;
+  font-family: var(--font-label);
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
+.result-list {
+  display: grid;
+  gap: 0.2rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.result-list__item {
+  position: relative;
+  padding-left: 1.3rem;
+  font-size: 0.95rem;
+  overflow-wrap: anywhere;
+}
+
+.result-list__item::before {
+  content: "\2736";
+  position: absolute;
+  left: 0;
+  color: var(--ink-soft);
+  font-size: 0.8rem;
+  line-height: 1.9;
+}
+
+.result-list__more {
+  padding-left: 1.3rem;
+  font-family: var(--font-label);
+  font-size: 1.05rem;
+  color: var(--ink-soft);
+}
+
+.result-path {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.5rem 0.55rem 0.5rem 0.8rem;
+  background: var(--note);
+  border: 2px dashed var(--line);
+  border-radius: var(--wobble-soft);
+}
+
+.result-path code {
+  flex: 1;
+  min-width: 0;
+  padding-top: 0.2rem;
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.copy-button {
+  flex: none;
+  min-height: 2rem;
+  padding: 0.1rem 0.75rem;
+  font-family: var(--font-label);
+  font-size: 1.05rem;
+  color: var(--ink);
+  background: var(--paper-raised);
+  border: 2px solid var(--line);
+  border-radius: var(--wobble);
+  box-shadow: 2px 2px 0 var(--shadow);
+  cursor: pointer;
+  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
+}
+
+.copy-button:hover {
+  transform: translate(-1px, -1px) rotate(-1.5deg);
+}
+
+.copy-button:active {
+  transform: translate(1px, 1px);
+  box-shadow: none;
+}
+
+.result-empty,
+.muted-text {
+  color: var(--ink-soft);
+}
+
+/* ---------- Footer ---------- */
+
+.site-footer {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 0 1.25rem 2.5rem;
+  color: var(--ink-soft);
+  font-family: var(--font-label);
+  font-size: 1.05rem;
+}
+
+/* ---------- Small screens ---------- */
+
+@media (max-width: 560px) {
+  .card {
+    padding: 1.7rem 1.1rem 1.3rem;
+  }
+
+  .layout {
+    padding-top: 1.5rem;
+    gap: 2.2rem;
+  }
+
+  .actions > .primary-button,
+  .output-tile > .primary-button,
+  .output-tile > .secondary-button,
+  .subpanel .primary-button {
+    width: 100%;
+    align-self: stretch;
+  }
+}
+
+/* ---------- Motion ---------- */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .primary-button:hover:not(:disabled),
+  .secondary-button:hover:not(:disabled),
+  .primary-button:active:not(:disabled),
+  .secondary-button:active:not(:disabled) {
+    transform: none;
+  }
+}