:root {
  color-scheme: light dark;
  --background: #f6f5f1;
  --surface: #fff;
  --ink: #22251f;
  --muted: #686d71;
  --accent: #c94020;
  --accent-fill: #c94020;
  --accent-hover: #b6381c;
  --line: #e4e4df;
  --success: #167b49;
  --surface-subtle: #f7f7f4;
  --upload-surface: #fcfcfb;
  --control-line: #cdd0c9;
  --drop-hover: #fff4ec;
  --notice-surface: #f4f6ef;
  --error-surface: #fff3ee;
  --error-ink: #a22e18;
  --error-line: #efc5b7;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #171916;
    --surface: #20231f;
    --ink: #f0f2ec;
    --muted: #b0b6ac;
    --accent: #ff9e80;
    --line: #3f453c;
    --success: #75d9a4;
    --surface-subtle: #282d26;
    --upload-surface: #1b1f1a;
    --control-line: #687260;
    --drop-hover: #3a2a21;
    --notice-surface: #2a3224;
    --error-surface: #3b2520;
    --error-ink: #ffb6a4;
    --error-line: #995c4b;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 32px 24px; line-height: 1.6; }
button, input, select { font: inherit; }
button, a, label.choose-file { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .choose-file:focus-within { outline: 3px solid var(--accent); outline-offset: 4px; }
.page-shell { max-width: 1120px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.page-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 36px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 12px; align-items: center; font-size: 24px; font-weight: 750; white-space: nowrap; }
.brand svg { width: 36px; height: 36px; fill: none; stroke: var(--accent-fill); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; align-items: center; font-size: 14px; }
nav a { border-left: 1px solid var(--line); padding-left: 24px; }
#languageSelect { border: 1px solid var(--line); border-radius: 5px; padding: 8px; color: var(--ink); background: var(--surface); }
main { padding: 32px 24px 16px; }
.intro { padding: 0 12px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
h1 { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -.04em; line-height: 1.26; margin: 0; font-weight: 800; white-space: pre-line; }
.intro-copy { font-size: 21px; color: var(--muted); margin: 12px 0 0; }
.steps { list-style: none; display: flex; padding: 0 36px; margin: 28px 0; gap: 24px; }
.steps li { color: var(--muted); display: flex; gap: 16px; align-items: center; flex: 1; white-space: nowrap; }
.steps li:not(:last-child)::after { content: ""; height: 1px; background: var(--line); flex: 1; margin-left: 8px; }
.steps li:last-child { flex: 0; }
.steps li > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--control-line); border-radius: 50%; font-size: 16px; }
.steps .active { color: var(--ink); font-weight: 600; }
.steps .active > span { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.steps b { font-weight: inherit; }
.claim-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: start; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 24px; min-width: 0; }
h2 { font-size: 22px; line-height: 1.4; margin: 0; letter-spacing: -.02em; }
h3 { font-size: 20px; margin: 0 0 4px; }
.preparation { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 16px; }
.preparation li { display: flex; gap: 16px; align-items: start; }
.preparation li > span { background: var(--surface-subtle); border-radius: 50%; width: 28px; height: 28px; flex-shrink: 0; text-align: center; }
.preparation p { margin: 4px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.creator-link { display: block; color: var(--accent); text-decoration: underline; font-size: 14px; margin-top: 4px; overflow-wrap: anywhere; }
.example { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 24px; background: #101321; }
.example-image { display: block; width: 100%; height: auto; }
.caption { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.privacy-note { margin: 24px 0 0; font-size: 13px; color: var(--muted); }
.panel-heading { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.panel-heading > span { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.drop-zone { border: 1px dashed var(--control-line); border-radius: 6px; min-height: 264px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; text-align: center; background: var(--upload-surface); }
.drop-zone.drag-over { border-color: var(--accent); background: var(--drop-hover); }
.upload-icon { width: 48px; height: 48px; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 12px; display: block; }
#uploadPrompt strong { display: block; font-size: 18px; }
#uploadPrompt p { margin: 4px 0 12px; color: var(--muted); font-size: 14px; }
.choose-file { display: inline-block; position: relative; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 6px 28px; cursor: pointer; background: var(--surface); }
.choose-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-name { font-size: 12px; margin: 12px 0 0; color: var(--muted); overflow-wrap: anywhere; max-width: 100%; }
#imagePreview { max-width: 100%; max-height: 210px; object-fit: contain; margin-bottom: 16px; border-radius: 4px; }
.primary-button { border: 1px solid var(--accent-fill); border-radius: 6px; background: var(--accent-fill); color: #fff; font-weight: 650; width: 100%; min-height: 48px; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 10px 16px; margin-top: 16px; }
.primary-button:hover:enabled { background: var(--accent-hover); border-color: var(--accent-hover); }
.browser-note { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.text-button { border: 0; padding: 4px 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; font-size: 12px; color: var(--muted); }
.usage-note { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--muted); margin-top: 12px; padding: 10px 16px; }
.notice { background: var(--notice-surface); padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; margin: 0 0 16px; font-size: 14px; }
.notice.is-error { background: var(--error-surface); color: var(--error-ink); border-color: var(--error-line); }
.application-state { background: var(--surface-subtle); padding: 16px; margin-bottom: 16px; border-radius: 6px; }
.application-state p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.success-label { color: var(--success); font-size: 14px; margin: 0 0 8px; }
.account-intro { color: var(--muted); margin: 0 0 20px; }
.credential-box { background: var(--surface-subtle); border-radius: 8px; padding: 20px; }
.credential-box label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.credential-box label:not(:first-child) { margin-top: 20px; }
.input-row { display: flex; border: 1px solid var(--control-line); background: var(--surface); border-radius: 6px; min-width: 0; }
.input-row input { width: 100%; min-width: 0; background: transparent; border: 0; padding: 10px 12px; color: var(--ink); border-radius: 6px; }
.input-row input::placeholder { color: var(--muted); opacity: 1; }
.input-row button { border: 0; background: transparent; color: var(--muted); padding: 8px; white-space: nowrap; font-size: 12px; }
.code-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.code-section p, .mail-section p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.code-input { font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: .3em; }
.code-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
#codeCountdown { flex: 1; font-size: 12px; color: var(--muted); }
.outline-button { padding: 8px 16px; background: var(--surface); border: 1px solid var(--accent); border-radius: 5px; color: var(--accent); }
.mail-section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; font-size: 14px; }
.mail-section summary { cursor: pointer; }
.mail-section p { margin-top: 12px; }
.mail-section .outline-button { margin-top: 12px; }
@media (max-width: 767px) {
  body { padding: 12px; }
  .page-header { padding: 16px 20px; min-height: 72px; flex-wrap: wrap; gap: 12px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand svg { width: 28px; }
  nav { gap: 12px; font-size: 12px; }
  nav > span { display: none; }
  nav a { border: 0; padding: 0; }
  main { padding: 24px 16px 16px; }
  .intro { padding: 0 4px; }
  .intro-copy { font-size: 17px; }
  .eyebrow { font-size: 14px; }
  .claim-layout { grid-template-columns: 1fr; }
  .card { padding: 20px; }
  .steps { padding: 0 4px; gap: 12px; margin: 24px 0; }
  .steps li { font-size: 12px; gap: 8px; }
  .steps li > span { width: 28px; height: 28px; font-size: 12px; }
  .steps li:not(:last-child)::after { margin-left: 0; }
  .example, .instructions .caption { display: none; }
  .preparation { font-size: 14px; gap: 12px; margin-bottom: 0; }
  .privacy-note { margin-top: 16px; font-size: 12px; }
  .panel-heading { flex-wrap: wrap; gap: 4px; }
  h2 { font-size: 20px; }
  .credential-box { padding: 12px; }
  .usage-note { font-size: 12px; padding: 12px; }
}
@media (max-width: 359px) {
  body { padding: 4px; }
  main { padding: 20px 12px 12px; }
  .card { padding: 16px; }
  .steps { gap: 8px; }
  .steps li { gap: 4px; }
  .code-input { font-size: 24px; letter-spacing: .15em; }
}