:root {
    color-scheme: light;
    --background: #f3f6f4;
    --surface: #ffffff;
    --soft: #e6efea;
    --text: #21362d;
    --muted: #53685e;
    --border: #c4d2ca;
    --accent: #234b46;
    --accent-hover: #183c37;
    --on-accent: #ffffff;
    --error: #a52424;
    --focus: #337369;
    --hello-warm: #fff4d9;
    --hello-badge: #f5e4b9;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --background: #101c18;
        --surface: #1a2923;
        --soft: #233a30;
        --text: #e6efe8;
        --muted: #b0c3b7;
        --border: #415c4f;
        --accent: #9cd5b5;
        --accent-hover: #bae5cd;
        --on-accent: #12291e;
        --error: #ffaaa2;
        --focus: #9cd5b5;
        --hello-warm: #332d20;
        --hello-badge: #493d27;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #101c18;
    --surface: #1a2923;
    --soft: #233a30;
    --text: #e6efe8;
    --muted: #b0c3b7;
    --border: #415c4f;
    --accent: #9cd5b5;
    --accent-hover: #bae5cd;
    --on-accent: #12291e;
    --error: #ffaaa2;
    --focus: #9cd5b5;
    --hello-warm: #332d20;
    --hello-badge: #493d27;
}

* { box-sizing: border-box; }
[hidden], input[type="hidden"] { display: none !important; }
html { background: var(--background); color: var(--text); }
body { font: 1rem/1.6 system-ui, sans-serif; margin: 0 auto; max-width: 48rem; padding: 1.5rem 1rem 3rem; overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0; letter-spacing: -.03em; }
h2 { font-size: 1.5rem; margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
p { margin: .75rem 0 1rem; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
small, .helptext, .feed-meta { color: var(--muted); }
code { background: var(--soft); border-radius: .25rem; padding: .15rem .3rem; }
main { margin-top: 1.75rem; }

.site-footer { margin-top: 2rem; }
.home-screen-help { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; }
.home-screen-help summary { color: var(--accent); cursor: pointer; font-weight: 600; min-height: 44px; padding: .5rem 0; }
.home-screen-help h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.home-screen-help > :last-child { margin-bottom: 0; }

.site-header { background: var(--soft); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem; }
.site-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.site-heading h1 { margin-right: auto; }
.language-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0; margin: 0; border: 0; background: transparent; }
.language-switch select { width: auto; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: .5rem; margin: 0; background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
.theme-toggle:hover { background: var(--soft); color: var(--accent-hover); }
.theme-toggle svg { flex-shrink: 0; }
.theme-icon-sun, :root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
nav { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 1rem 0; }
.site-header nav { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 0; }
.site-header nav a { padding: .25rem 0; font-weight: 600; }
nav form { margin: 0; padding: 0; border: 0; background: transparent; }
nav button { margin: 0; }

form { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem; margin: 1rem 0; }
label { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
form > div:first-of-type > label:first-child { margin-top: 0; }
input, select, textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: .375rem; display: block; font: inherit; padding: .65rem .75rem; max-width: 100%; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 8rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin: 0 .35rem 0 0; padding: 0; accent-color: var(--accent); vertical-align: middle; }
input[type="file"] { padding: .5rem; }
button { background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: .375rem; cursor: pointer; font: inherit; font-weight: 600; margin-top: 1.25rem; padding: .6rem 1rem; }
button:hover { background: var(--accent-hover); }
.helptext { display: block; font-size: .875rem; margin-top: .4rem; }
.errorlist { color: var(--error); padding-left: 1.25rem; }
[aria-invalid="true"] { border-color: var(--error); }

ul, ol { padding-left: 1.5rem; }
li { margin-bottom: .75rem; }
main > ul:not(.photo-grid) { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem 1.25rem 1.25rem 2.5rem; }
main > ul > li:last-child { margin-bottom: 0; }
main > article, .feed-card { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; margin: 1rem 0; padding: 1.25rem; }
.feed-card h3 { margin: .5rem 0; }
.feed-card > :last-child { margin-bottom: 0; }
.feed-meta { font-size: .875rem; margin: .5rem 0; }
.feed-pagination { margin: 1.5rem 0; }
.feed-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.feed-heading h2 { margin: .5rem 0; }
.new-content summary { display: flex; align-items: center; gap: .35rem; min-height: 44px; padding: .6rem 1rem; border-radius: .375rem; background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer; list-style: none; }
.new-content summary::-webkit-details-marker { display: none; }
.new-content summary:hover { background: var(--accent-hover); }
.new-content-options { display: flex; flex-direction: column; margin-top: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: .375rem; }
.new-content-options a { display: flex; align-items: center; min-height: 44px; padding: .5rem 1rem; }
.hello-card { background: linear-gradient(120deg, var(--surface), var(--hello-warm)); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.25rem; margin: 1rem 0 2rem; }
.hello-heading, .hello-intro { display: flex; align-items: center; gap: .85rem; }
.hello-heading { flex-wrap: wrap; justify-content: space-between; }
.hello-intro { flex: 1 1 15rem; }
.hello-wave { display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--hello-badge); font-size: 1.6rem; transform: rotate(-8deg); }
.hello-card h2 { font-size: 1.25rem; margin: 0; }
.hello-intro p { color: var(--muted); font-size: .875rem; margin: .3rem 0 0; }
.hello-form { background: transparent; border: 0; margin: 0; padding: 0; }
.hello-form button { min-height: 44px; min-width: 44px; border-radius: 2rem; margin: 0; }
.hello-form button span { margin-left: .4rem; }
.hello-details { margin-top: 1rem; border-top: 1px solid var(--border); }
.hello-details summary { cursor: pointer; padding: 1rem 0 .25rem; min-height: 44px; }
.hello-details summary::marker { color: var(--accent); }
.hello-summary { display: inline-flex; align-items: center; gap: .75rem; width: calc(100% - 1.5rem); vertical-align: middle; }
.avatar { display: grid; place-items: center; background: var(--hello-badge); color: var(--text); font-weight: 600; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.profile-link, .profile-avatar, .directory-list li, .post-author { display: flex; align-items: center; gap: .75rem; }
main > .directory-list { list-style: none; padding: 1.25rem; }
.directory-list li > div { min-width: 0; }
.hello-person { display: flex; flex-direction: column; min-width: 0; }
.hello-person strong { line-height: 1.4; }
.hello-person time, .hello-username, .hello-expand, .hello-own { color: var(--muted); font-size: .875rem; }
.hello-username { font-weight: 400; }
.hello-expand { color: var(--accent); margin-left: auto; text-align: right; flex-shrink: 0; }
.hello-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.hello-list li { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--border); padding: .75rem 0; margin: 0; }
.hello-list li:last-child { padding-bottom: .25rem; }
.hello-own { margin: 1rem 0 0; }
.hello-own > span { color: var(--accent); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; list-style: none; padding: 0; }
.photo-grid li { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: .5rem; margin: 0; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .25rem; }
.photo-full, .feed-photo { display: block; max-width: 100%; height: auto; border-radius: .375rem; }

.calendar-month { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.calendar-month label, .calendar-month button { margin: 0; }
.calendar-month input { width: auto; }
.calendar-scroll { overflow-x: auto; }
.event-calendar { background: var(--surface); border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 42rem; }
.event-calendar caption { font-size: 1.5rem; font-weight: 600; text-align: left; margin-bottom: .75rem; }
.event-calendar th, .event-calendar td { border: 1px solid var(--border); padding: .5rem; }
.event-calendar th { background: var(--soft); }
.event-calendar td { height: 6rem; vertical-align: top; overflow-wrap: anywhere; }
.event-calendar ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.event-calendar li:last-child { margin-bottom: 0; }
.calendar-other-month { background: var(--soft); color: var(--muted); }
.calendar-today { background: var(--accent); color: var(--on-accent); border-radius: 50%; display: inline-block; min-width: 1.75rem; text-align: center; }

@media (max-width: 30rem) {
    body { padding-top: 1rem; }
    .site-header, form, main > article, .feed-card { padding: 1rem; }
    .hello-card { padding: 1rem; }
    .hello-summary { flex-wrap: wrap; }
    .hello-summary > .hello-person { flex: 1 1 8rem; }
    .hello-expand { flex-basis: 100%; text-align: left; margin-left: 0; font-size: .8rem; }
}
.feedback { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .25rem; }
.feedback-actions { display: flex; align-items: flex-start; }
.feedback form { background: transparent; border: 0; padding: 0; margin: 0; }
.feedback summary { cursor: pointer; list-style: none; }
.feedback summary::-webkit-details-marker { display: none; }
.feedback-actions summary, .heart-form button, .comment-menu > summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .35rem; margin: 0; color: var(--muted); background: transparent; border: 0; font-weight: 400; }
.feedback-actions summary:hover, .heart-form button:hover, .comment-menu > summary:hover { color: var(--accent); background: transparent; }
.comments-toggle summary span, .heart-form button span { font-size: 1.4rem; line-height: 1; margin-right: .25rem; }
.heart-form button[aria-pressed="true"] { color: var(--error); }
.heart-form button { justify-content: flex-end; padding-right: .25rem; }
.reaction-members > summary { justify-content: flex-start; padding-left: 0; }
.reaction-members { position: relative; }
.reaction-members ul { position: absolute; z-index: 2; min-width: 8rem; margin: 0; padding: .5rem .5rem .5rem 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: .4rem; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list > li { display: flex; gap: .6rem; margin: 0; padding: .4rem 0; }
.comment-avatar { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--soft); font-weight: 600; }
.comment-content { min-width: 0; flex: 1; }
.comment-heading { display: flex; justify-content: space-between; align-items: start; }
.comment-heading time, .comment-edited { color: var(--muted); font-size: .85rem; }
.comment-body p { white-space: pre-wrap; margin: 0; }
.comment-menu { position: relative; margin: -.45rem 0; }
.comment-menu > summary { font-size: 1.2rem; }
.comment-menu details { min-width: 10rem; padding: .3rem; background: var(--surface); }
.comment-menu details summary { color: var(--accent); padding: .4rem; }
.comment-menu form { padding: .4rem; }
.comment-menu textarea { min-height: 4rem; }
.comment-menu button, .comment-form button { margin: 0; min-height: 44px; }
.comment-form { display: flex; align-items: center; gap: .5rem; }
.feedback .comment-form textarea { min-height: 44px; border: 0; resize: vertical; padding: .6rem; }
.feedback-error { color: var(--error); }
.feedback:has(.comments-toggle:not([open])) .comment-conversation, .feedback:has(.comments-toggle[open]) .comment-preview { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.feedback .field-error { color: var(--error); margin: .25rem; }

.comment-form textarea { flex: 1 1 auto; min-width: 0; }
.comment-form button { flex: 0 0 auto; white-space: nowrap; }