/* Hallmark: editorial workbench, paper and ink, single vermilion action. */
/* Critique: two columns keep the destination and consent visible beside the draft. */
:root {
  --paper: #eff3f0;
  --surface: #ffffff;
  --ink: #182f2b;
  --muted: #51655f;
  --accent: #12624e;
  --line: #c8d6ce;
  --soft: #dfece5;
  --font: system-ui, -apple-system, "PingFang SC", sans-serif;
  --display: Georgia, "Songti SC", serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font);
}
header {
  border-bottom: 1px solid var(--ink);
}
.bar,
main,
footer {
  max-width: 1160px;
  margin: auto;
  padding: 0 32px;
}
.bar {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 70px;
}
.bar strong {
  font: 700 26px var(--display);
}
.bar nav {
  display: flex;
  gap: 4px;
}
.bar a {
  margin-left: auto;
}
a {
  color: var(--accent);
}
button,
.button {
  cursor: pointer;
  font: inherit;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
  padding: 8px 16px;
  border-radius: 4px;
}
.button {
  display: inline-block;
  text-decoration: none;
}
button:hover,
.button:hover {
  border-color: var(--ink);
}
nav button {
  border: 0;
  background: transparent;
}
nav [aria-current] {
  color: var(--accent);
  box-shadow: inset 0 -2px var(--accent);
}
input,
textarea,
select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 4px;
  font: inherit;
  color: var(--ink);
}
textarea {
  resize: vertical;
}
label {
  display: grid;
  gap: 4px;
  margin: 16px 0;
  font-weight: 550;
}
small,
p,
footer,
.access span {
  color: var(--muted);
  font-weight: 400;
}
.access {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.access input {
  max-width: 260px;
}
.access label {
  margin: 0;
}
.intro {
  margin: 32px 0 24px;
}
.intro p {
  margin: 8px 0;
}
h1 {
  font: 600 clamp(32px, 5vw, 52px)/1.15 var(--display);
  margin: 0;
  overflow-wrap: break-word;
  min-width: 0;
}
h2 {
  font: 650 22px var(--display);
  margin: 0 0 16px;
}
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
}
.paper {
  background: var(--surface);
  padding: 24px;
  border-top: 2px solid var(--ink);
  min-width: 0;
}
.check,
.accountcheck {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.check input,
.accountcheck input,
input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
}
.primary {
  background: var(--accent);
  color: var(--surface);
  border: 0;
  width: 100%;
  padding: 12px;
  font-weight: 650;
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#notice:not(:empty) {
  padding: 12px 16px;
  background: var(--soft);
  margin-top: 12px;
  white-space: pre-wrap;
}
#preview img,
#preview video {
  max-width: 100%;
  max-height: 280px;
}
.row,
fieldset {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin: 0;
}
.row small,
.row code {
  display: block;
  overflow-wrap: anywhere;
}
.row pre {
  white-space: pre-wrap;
  word-break: break-word;
}
.row button {
  margin: 8px 8px 0 0;
}
footer {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  padding-bottom: 24px;
}
footer span {
  margin-left: 8px;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .bar,
  main,
  footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .bar {
    gap: 8px;
    flex-wrap: wrap;
  }
  .bar nav {
    gap: 0;
  }
  .bar button {
    padding: 8px;
  }
  .columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .access {
    flex-wrap: wrap;
  }
  .paper {
    padding: 16px;
  }
  .intro {
    margin-top: 24px;
  }
}

button:active,
.button:active {
  background: var(--soft);
  color: var(--ink);
}

h1,
h2 {
  text-wrap: balance;
}
.metricLine {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.metricLine span {
  padding: 4px 8px;
  background: var(--soft);
  border-radius: 4px;
}

:root{--forest:#153e35;--cream:#f3f4df;--mint:#b4d9bd;--shadow:0 8px 28px rgba(24,53,42,.06)}
header{background:var(--forest);color:var(--cream);border:0}
.bar strong{display:flex;align-items:center;gap:12px;letter-spacing:.02em}
.bar strong:before{content:"";display:block;width:20px;height:24px;border:2px solid var(--mint);border-radius:3px;box-shadow:-4px 4px 0 -1px var(--forest),-4px 4px 0 0 var(--mint)}
.bar nav button,.bar a{color:var(--cream)}.bar nav button:hover,.bar nav [aria-current]{background:var(--cream);color:var(--forest);box-shadow:none}
.bar a{text-underline-offset:4px}.bar nav{gap:8px}.access{border:0;background:var(--soft);border-radius:12px;padding:12px 20px;margin-top:20px}
.paper{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:clamp(20px,3vw,36px)}
.paper h2{padding-bottom:12px;border-bottom:1px solid var(--line)}.intro h1{color:var(--forest)}
input,textarea,select,button,.button{border-radius:8px}.upload{border:1px dashed var(--accent);border-radius:12px;padding:16px;background:var(--paper)}
.upload input{background:transparent;border:0;padding:4px}.upload input::file-selector-button{padding:8px 16px;margin-right:12px;color:var(--forest);background:var(--surface);border:1px solid var(--line);border-radius:6px}
#library .intro label{max-width:360px}.metricLine span,#session{border-radius:6px}.auth-main{max-width:880px;margin:clamp(24px,6vw,80px) auto}.auth-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);background:var(--surface);border-radius:20px;overflow:clip;border:1px solid var(--line);box-shadow:var(--shadow)}
.auth-intro,.auth-fields{padding:clamp(24px,4vw,44px)}.auth-intro{background:var(--forest);color:var(--cream);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.auth-intro h1{font-size:36px}.auth-intro p{color:var(--mint)}.auth-intro a{color:var(--cream);text-underline-offset:4px}.auth-fields form>p:first-of-type{margin-top:0}.result{max-width:640px;margin:48px auto}.result code{overflow-wrap:anywhere}
@media(max-width:700px){.auth-panel{grid-template-columns:minmax(0,1fr)}.auth-intro h1{font-size:28px}.access{gap:8px}.bar nav{gap:0}.bar{padding-top:8px;padding-bottom:8px}.auth-main{margin-top:20px}}