/* The person's page: pen on warm paper. One blue accent, the thin four-colour line, flat. */
:root {
  --ground:#FBF8F2; --surface:#FFFFFF; --ink:#1F1D1A; --ink-2:#6E675D; --ink-3:#A39B8E; --hair:#E4DED3;
  --blue:#2C54D4; --orange:#FF7A1A; --yellow:#FFC222; --teal:#0FA3A3; --tint:#FFF6D6; --done:#E3F4F1;
  --sans:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --r:3px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55;
       -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--blue); text-underline-offset:2px; }
.line { display:flex; height:3px; }
.line i { flex:1; }
.line i:nth-child(1) { background:var(--orange); } .line i:nth-child(2) { background:var(--yellow); }
.line i:nth-child(3) { background:var(--teal); } .line i:nth-child(4) { background:var(--blue); }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; }
.mark { font-weight:700; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.lang { font-size:14px; color:var(--ink-2); text-decoration:none; }
.lang:hover, .mark:hover { color:var(--blue); }
.page { flex:1; width:100%; max-width:640px; margin:0 auto; padding:40px 24px 64px; }
.foot { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; color:var(--ink-3); font-size:13px; padding:24px; }
.foot a { color:var(--ink-2); }
h1 { font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.15; margin:0 0 10px; }
h2 { font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0 0 10px; }
p { margin:0 0 12px; }
section { margin:32px 0 0; padding-top:24px; border-top:1px solid var(--hair); }
section.card, .card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:20px; }
section.card { margin-top:24px; }
.lead { font-size:17px; color:var(--ink-2); margin:0 0 20px; }
.muted { color:var(--ink-2); }
.small { font-size:14px; }
.note { background:var(--tint); border:1px solid var(--hair); border-radius:var(--r); padding:10px 12px; font-size:15px; }
.note.done { background:var(--done); }
.stack { display:flex; flex-direction:column; gap:14px; margin:0 0 12px; }
.inline { display:inline; margin:0; }
label { display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--ink-2); }
label.check { flex-direction:row; align-items:flex-start; gap:10px; font-size:15px; color:var(--ink); }
label.check input { margin-top:4px; width:18px; height:18px; accent-color:var(--ink); }
input[type=email], input[type=text] { font-family:var(--sans); font-size:16px; padding:12px 14px; border:1px solid var(--hair);
       border-radius:var(--r); background:var(--surface); color:var(--ink); width:100%; }
input:focus { outline:none; border-color:var(--ink); }
input.code { font-size:24px; letter-spacing:8px; text-align:center; }
.btn { display:inline-block; font-family:var(--sans); font-weight:500; font-size:15px; padding:12px 18px; border:1px solid var(--ink);
       border-radius:var(--r); background:var(--ink); color:#fff; cursor:pointer; text-decoration:none; text-align:center; }
.btn:hover, .btn:focus-visible { background:var(--blue); border-color:var(--blue); }
.btn.quiet { background:transparent; color:var(--ink); }
.btn.quiet:hover, .btn.quiet:focus-visible { background:transparent; color:var(--blue); border-color:var(--blue); }
button.link { font:inherit; font-size:14px; background:none; border:0; padding:0; color:var(--blue); cursor:pointer;
       text-decoration:underline; text-underline-offset:2px; }
button.link:hover, button.link:focus-visible { color:var(--ink); }
.standing .headline { font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:4px; }
ul.list { list-style:none; margin:0 0 12px; padding:0; }
ul.list li { padding:12px 0; border-bottom:1px solid var(--hair); }
ul.list li:first-child { padding-top:0; }
.row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.name { font-weight:500; overflow-wrap:anywhere; }
.when { font-size:14px; color:var(--ink-2); white-space:nowrap; }
.said { margin:4px 0; }
.said::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--teal); margin-right:8px; vertical-align:1px; }
.said.missed::before { background:var(--ink-3); }
.flag { font-size:12px; background:var(--tint); border:1px solid var(--hair); border-radius:var(--r); padding:1px 6px; color:var(--ink); }
ul.plain { list-style:none; margin:0 0 16px; padding:0; }
ul.plain li { margin:0 0 10px; }
ul.plain .small { display:block; }
ul.bullets { margin:0 0 12px; padding-left:20px; }
ul.bullets li { margin:0 0 6px; }
.secret { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:16px; margin:0 0 16px; }
.secret .label { font-size:14px; color:var(--ink-2); margin:0 0 6px; }
.secret code { display:block; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:15px; overflow-wrap:anywhere;
       word-break:break-all; background:var(--ground); border:1px solid var(--hair); border-radius:var(--r); padding:10px 12px; margin:0 0 8px; user-select:all; }
@media (max-width:480px) {
  .top { padding:14px 16px; }
  .page { padding:28px 16px 48px; }
  h1 { font-size:26px; }
}