@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+SC:wght@600;700;900&family=Noto+Sans+SC:wght@400;500;600&display=swap');

:root {
  --paper: #f4f1ea;
  --ink: #1d2522;
  --muted: #69736d;
  --line: #c9ccc2;
  --leaf: #176b50;
  --leaf-dark: #0e4837;
  --soft-leaf: #e0ebe4;
  --alert: #a13d30;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: 'Noto Sans SC', sans-serif; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font: 600 16px/1 'Noto Sans SC', sans-serif; letter-spacing: .04em; }
.status-dot { color: var(--muted); font: 12px/1 'DM Mono', monospace; letter-spacing: .03em; }
.status-dot i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--leaf); }
.workspace { padding: clamp(70px, 13vw, 154px) 0 90px; max-width: 880px; }
.eyebrow { color: var(--leaf); font: 500 11px/1 'DM Mono', monospace; letter-spacing: .17em; }
h1 { margin: 20px 0 28px; font-family: 'Noto Serif SC', serif; font-size: clamp(38px, 6vw, 72px); letter-spacing: -.055em; line-height: 1.18; text-wrap: pretty; }
.intro { max-width: 660px; margin: 0 0 49px; color: #4f5b54; font-size: 17px; line-height: 1.9; text-wrap: pretty; }
.archive-form { max-width: 840px; }
.archive-form label { display: block; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
.input-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; height: 58px; padding: 0 18px; border: 1px solid #9ba69e; border-radius: 2px; outline: none; color: var(--ink); background: #fbfaf6; font: 14px 'DM Mono', monospace; transition: border-color .16s, box-shadow .16s; }
input::placeholder { color: #9aa29c; } input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px #bcd4c7; }
button { min-width: 156px; height: 58px; border: 0; border-radius: 2px; padding: 0 22px; cursor: pointer; color: #fff; background: var(--leaf-dark); font: 600 14px 'Noto Sans SC', sans-serif; transition: background .16s, transform .16s; }
button:hover { background: var(--leaf); } button:active { transform: translateY(1px); } button:disabled { cursor: wait; opacity: .7; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; } code { font-family: 'DM Mono', monospace; }
.notice { max-width: 840px; margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line); background: #eeece5; }
.notice p { margin: 0; }.notice p:first-child { font-weight: 600; font-size: 14px; }.notice p + p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.view-record { display: inline-block; margin-top: 13px; color: var(--leaf-dark); font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }.view-record:hover { color: var(--leaf); }
.notice[data-kind='success'] { border-color: var(--leaf); background: var(--soft-leaf); }.notice[data-kind='success'] p:first-child { color: var(--leaf-dark); }.notice[data-kind='error'] { border-color: #d4aaa3; background: #f4e5e1; }.notice[data-kind='error'] p:first-child { color: var(--alert); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.principles div { min-height: 180px; padding: 27px 30px 20px 0; border-right: 1px solid var(--line); }.principles div + div { padding-left: 30px; }.principles div:last-child { border-right: 0; }
.principles b { display: block; margin-bottom: 29px; color: var(--leaf); font: 11px 'DM Mono', monospace; }.principles span { display: block; font-weight: 600; font-size: 14px; }.principles p { max-width: 260px; margin: 9px 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
@media (max-width: 720px) { .shell { width: min(100% - 32px, 1180px); }.topbar { height: 70px; }.status-dot { font-size: 10px; }.workspace { padding-top: 78px; padding-bottom: 70px; }.intro { font-size: 15px; }.input-row { display: block; } input, button { width: 100%; } button { margin-top: 10px; }.principles { grid-template-columns: 1fr; }.principles div, .principles div + div { min-height: auto; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }.principles b { margin-bottom: 15px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }