:root { color-scheme: light; --paper: #f6f8ff; --ink: #142453; --blue: #304bcb; --muted: #586584; --line: #cbd3ee; --white: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; }
main { max-width: 480px; margin: auto; padding: max(28px, env(safe-area-inset-top)) 26px max(24px, env(safe-area-inset-bottom)); min-height: 100svh; display: flex; flex-direction: column; }
header { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 13px; }
.brand { font-weight: 750; letter-spacing: -.4px; }
.connection { color: var(--muted); display: flex; gap: 6px; align-items: center; }
.connection::before { content: ''; width: 7px; height: 7px; background: #8891aa; border-radius: 50%; }
.connection.online::before { background: #237d5b; }
.intro { padding: 62px 0 32px; }
h1 { margin: 0; font-size: clamp(44px, 12vw, 58px); font-weight: 750; letter-spacing: -2.7px; line-height: 1.02; }
.intro p { margin: 20px 0 0; max-width: 270px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.label-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; }
label { font-weight: 650; }
#counter { color: var(--muted); font-variant-numeric: tabular-nums; }
textarea { display: block; width: 100%; resize: vertical; min-height: 152px; max-height: 360px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 17px; color: var(--ink); font: inherit; font-size: 20px; line-height: 1.4; }
textarea::placeholder { color: #77819b; }
textarea:focus-visible, button:focus-visible { outline: 3px solid #95a9ff; outline-offset: 3px; }
#hint { color: var(--muted); font-size: 12px; margin: 10px 0 24px; }
button { width: 100%; min-height: 56px; padding: 15px 20px; border: 0; border-radius: 12px; background: var(--blue); color: var(--white); font: inherit; font-size: 17px; font-weight: 650; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
button:disabled { background: #dfe5f8; color: #5b688b; cursor: default; }
#feedback { min-height: 44px; font-size: 14px; line-height: 1.5; margin: 16px 0; }
#feedback[data-kind='error'], #counter.over { color: #9e2945; }
#feedback[data-kind='success'] { color: #216645; }
footer { margin-top: auto; padding-top: 28px; font-size: 12px; color: var(--muted); }
@media (max-height: 700px) { .intro { padding-top: 36px; padding-bottom: 24px; } }
@media (prefers-reduced-motion: no-preference) { button { transition: background .15s; } }