:root { color-scheme: light; font-family: system-ui, sans-serif; color: #323127; background: #f9f7ef; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 2rem clamp(1.5rem, 5vw, 4rem); }
.brand { font-weight: 800; font-size: 1.4rem; letter-spacing: -.04em; }
.brand span { color: #e56e53; }
.intro { padding: clamp(5rem, 13vw, 9rem) 0 5rem; max-width: 740px; }
.eyebrow { color: #a94b35; text-transform: uppercase; font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
h1 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.04em; line-height: 1.05; font-size: clamp(3rem, 7vw, 5.5rem); margin: 1.1rem 0; }
.lead { color: #68665d; font-size: 1.15rem; line-height: 1.7; max-width: 33rem; }
.status { display: inline-flex; gap: .6rem; align-items: center; background: #e8eee2; color: #435a42; border-radius: 2rem; padding: .6rem 1rem; font-size: .85rem; font-weight: 700; margin-top: 1rem; }
.status span { background: #6d9268; width: .5rem; height: .5rem; border-radius: 50%; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; border-top: 1px solid #dedccf; padding-top: 2rem; }
article span { color: #a94b35; font-size: .8rem; font-weight: 700; }
h2 { font-family: Georgia, serif; font-weight: 400; font-size: 1.4rem; }
article p, footer { color: #68665d; line-height: 1.6; }
footer { border-top: 1px solid #dedccf; margin-top: 4rem; padding-top: 1.5rem; font-size: .85rem; }
.button, button { display: inline-block; border: 0; border-radius: .5rem; padding: .75rem 1rem; background: #435a42; color: white; font: inherit; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
.session-header { display: flex; justify-content: space-between; align-items: center; }
.session-header a { color: inherit; }
.session-actions { display: flex; align-items: center; gap: 1rem; }
.session-page h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-top: 3rem; }
.notice { background: #fff0df; border-left: 4px solid #a94b35; padding: 1rem; }
.session-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 2rem; }
.participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.participant { background: #e8eee2; border-radius: .75rem; padding: 1rem; min-width: 0; }
.participant video { background: #333; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; }
.participant video.camera-off { visibility: hidden; }
.participant p { margin: .4rem 0 0; font-size: .85rem; }
.controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chat { border: 1px solid #dedccf; border-radius: .75rem; padding: 1rem; }
#messages { min-height: 12rem; max-height: 25rem; overflow-y: auto; padding-left: 1.5rem; overflow-wrap: anywhere; }
#chat-form { display: flex; flex-wrap: wrap; gap: .5rem; }
#chat-form label { flex-basis: 100%; }
#chat-input { min-width: 0; flex: 1; border: 1px solid #aaa; border-radius: .4rem; font: inherit; padding: .6rem; }
.login-form { display: grid; gap: .75rem; max-width: 26rem; }
.login-form input { border: 1px solid #aaa; border-radius: .4rem; font: inherit; padding: .75rem; }
.login-form button { justify-self: start; }
@media (max-width: 700px) { .session-layout { grid-template-columns: 1fr; } }