:root {
    --ink: #213b3b;
    --muted: #61716b;
    --paper: #faf8f0;
    --green: #edf3e8;
    --sky: #b5d9f4;
    --yellow: #ffcc66;
    --line: #d6dfd3;
    --orange: #e76649;
    font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--green);
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: wait; opacity: .65; }
a { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #27769e; outline-offset: 4px; }
input:focus { outline: none; border-color: #467da0; box-shadow: 0 0 0 3px #b5d9f480; }
.hidden { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon, .brand-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen { min-height: 100svh; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #638850; box-shadow: 0 0 0 4px #63885016; flex-shrink: 0; }

/* The welcome room */
#join-screen { display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--green); }
#join-screen:before { content: ''; position: absolute; right: -310px; top: 70px; width: 930px; height: 930px; border-radius: 50%; background: #dfebdb; z-index: 0; pointer-events: none; }
.landing-header, .landing-main, .landing-footer { position: relative; z-index: 1; width: min(1240px, calc(100% - 100px)); margin-inline: auto; }
.landing-header { display: flex; align-items: center; justify-content: space-between; padding: 33px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 33px; font-weight: 750; letter-spacing: -1.7px; text-decoration: none; white-space: nowrap; }
.brand-dot { margin-left: -8px; color: var(--orange); }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 1.7px solid var(--ink); border-radius: 15px; background: var(--yellow); transform: rotate(-8deg); }
.brand-mark svg { width: 31px; height: 31px; stroke-width: 2; }
.header-note { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 550; }
.landing-main { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(355px,.85fr); gap: 74px; align-items: center; flex: 1; padding: 44px 0 62px; }
.welcome-copy { padding-bottom: 8px; }
.eyebrow { font-size: 11px; font-weight: 750; letter-spacing: 2.1px; margin: 0 0 23px; color: #4f6d58; }
h1 { font-size: clamp(48px,5.5vw,78px); line-height: 1.05; letter-spacing: -4px; font-weight: 650; margin: 0 0 30px; }
.together { display: inline-block; position: relative; color: #446f52; }
.together > svg { position: absolute; width: 102%; height: 20px; left: 0; bottom: -15px; overflow: visible; }
.together path { stroke: var(--orange); stroke-width: 3.3; stroke-linecap: round; fill: none; }
.intro { font-size: 16px; line-height: 1.85; color: var(--muted); margin: 0; max-width: 540px; }
.friends-illustration { margin: 23px 0 19px; max-width: 545px; transform-origin: center; }
.friends-illustration > svg { width: 100%; display: block; overflow: visible; }
.friends-illustration:hover { animation: hello-wiggle .55s ease; }
.little-perks { display: flex; align-items: center; gap: 24px; font-size: 12px; font-weight: 550; }
.little-perks > span { display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.little-perks .icon { width: 17px; height: 17px; stroke-width: 1.6; }
.join-container { position: relative; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 28px; padding: 37px 34px 27px; box-shadow: 8px 8px 0 #213b3b; max-width: 455px; width: 100%; justify-self: end; }
.card-sticker { position: absolute; right: 22px; top: -20px; background: var(--sky); border: 1.5px solid var(--ink); border-radius: 9px; padding: 8px 15px; font-size: 13px; font-weight: 650; transform: rotate(6deg); display: flex; gap: 11px; align-items: center; }
.card-sticker span { font-size: 22px; line-height: 1; }
.card-eyebrow { font-size: 9px; letter-spacing: 1.6px; font-weight: 650; color: var(--muted); margin: 0 0 14px; }
.join-container h2 { font-size: 36px; font-weight: 650; letter-spacing: -1.4px; line-height: 1.15; margin: 0 0 10px; }
.card-description { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 24px; }
.join-modes { display: flex; gap: 4px; background: #e9eee3; padding: 4px; border-radius: 11px; margin-bottom: 24px; }
.join-modes button { flex: 1; white-space: nowrap; border: 1px solid transparent; border-radius: 8px; padding: 10px 4px; background: none; font-size: 12px; font-weight: 650; color: #607064; }
.join-modes button.selected { background: var(--paper); border-color: #cad2c5; box-shadow: 0 2px 3px #213b3b0b; color: var(--ink); }
#join-form { display: flex; flex-direction: column; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 12px; font-weight: 650; }
.form-field label > span { font-weight: 400; color: var(--muted); }
.form-field input { width: 100%; min-width: 0; padding: 14px 15px; border: 1px solid #c7d0c5; border-radius: 10px; background: #fffef9; color: var(--ink); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.form-field input::placeholder { color: #889185; }
.form-field small { font-size: 11px; line-height: 1.5; color: var(--muted); }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 11px; box-shadow: 0 3px 0 var(--ink); font-size: 14px; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
.primary-button:hover:not(:disabled) { background: #ffd785; transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.primary-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.permission-note { margin: -2px 0 3px; text-align: center; font-size: 10px; color: var(--muted); }
.private-note { display: flex; align-items: center; gap: 12px; border-top: 1px dashed #c9d2c4; margin-top: 23px; padding-top: 20px; }
.private-note .icon { width: 20px; height: 20px; color: #547451; }
.private-note p { margin: 0; font-size: 11px; line-height: 1.75; font-weight: 600; }
.private-note p > span { font-weight: 400; color: var(--muted); }
.form-status { margin: 0; background: #f9e3d8; border: 1px solid #e0af9c; color: #893b29; border-radius: 10px; font-size: 12px; line-height: 1.5; padding: 11px 12px; }
.landing-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #cfdcc9; padding: 20px 0 23px; font-size: 11px; color: #647461; }
.landing-footer > span:last-child { display: flex; align-items: center; gap: 12px; }
.footer-spark { font-size: 26px; color: #658255; }

/* The call */
#meeting-screen { height: 100dvh; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: 0 24px 20px; background: #e5eee5; position: relative; }
.meeting-header { display: flex; align-items: center; gap: 24px; min-height: 82px; flex-shrink: 0; }
.meeting-brand { font-size: 26px; }
.meeting-brand .brand-mark { width: 34px; height: 34px; border-radius: 12px; }
.meeting-brand .brand-mark svg { width: 25px; height: 25px; }
#room-info { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
#room-id-display { font-size: 12px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room-info button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink); border-radius: 10px; padding: 10px 13px; font-size: 12px; font-weight: 600; background: var(--yellow); white-space: nowrap; }
#room-info button .icon { width: 17px; height: 17px; }
#participants-panel { position: relative; font-size: 12px; }
#participants-header { list-style: none; display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 9px 12px; border: 1px solid #c8d5c8; border-radius: 10px; background: #f8f9f1; white-space: nowrap; }
#participants-header::-webkit-details-marker { display: none; }
#participants-header .icon { width: 18px; height: 18px; }
#participant-count { font-weight: 700; margin-left: 3px; }
#participants-list { position: absolute; right: 0; top: 40px; width: 230px; max-height: 280px; overflow: auto; list-style: none; padding: 12px 16px; border: 1px solid var(--line); background: var(--paper); border-radius: 14px; box-shadow: 0 8px 24px #213b3b20; z-index: 110; }
#participants-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; overflow-wrap: anywhere; }
.status-indicator { width: 7px; height: 7px; border-radius: 50%; background: #60844d; flex-shrink: 0; }
#video-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); grid-auto-rows: minmax(180px,1fr); gap: 14px; overflow: auto; }
#video-grid.single-video { grid-template-columns: 1fr; }
#video-grid.single-video .video-container { width: 100%; max-width: 1000px; justify-self: center; }
#video-grid.two-videos { grid-template-columns: repeat(2,minmax(0,1fr)); }
#video-grid.many-videos { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.video-container { position: relative; background: #c8dfda; border: 1px solid #213b3b22; border-radius: 23px; overflow: hidden; min-height: 180px; isolation: isolate; }
.video-container:nth-child(3n+2) { background: #d5def1; }
.video-container:nth-child(3n+3) { background: #ecddc2; }
.video-container:before { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-size: 70px; font-weight: 600; color: #436d63; z-index: -1; }
.video-container video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-container.local video { transform: scaleX(-1); }
.video-container.local.screen-share video { transform: none; object-fit: contain; }
.video-container.camera-off:not(.screen-share) video { opacity: 0; }
.video-label { position: absolute; bottom: 14px; left: 14px; background: #213b3bea; color: var(--paper); padding: 8px 13px; border-radius: 9px; font-size: 12px; max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-muted-indicator { position: absolute; top: 12px; right: 12px; background: var(--paper); padding: 7px; border-radius: 10px; }
#controls { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 11px; background: var(--paper); border: 1px solid #c7d2c4; border-radius: 22px; align-self: center; box-shadow: 0 4px 0 #213b3b12; flex-shrink: 0; }
.control-btn { width: 77px; min-height: 63px; border: 0; border-radius: 14px; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; transition: background .15s, transform .15s; }
.control-btn:hover { background: #e4ecdf; transform: translateY(-2px); }
.control-btn .icon { width: 22px; height: 22px; }
.control-label { font-size: 10px; font-weight: 600; white-space: nowrap; }
.control-btn.active { background: var(--sky); }
.control-btn.muted { background: #f5d7cb; color: #933f2e; }
.control-btn.leave { background: var(--orange); color: white; }
.control-btn.leave:hover { background: #c8543a; }
.control-divider { height: 31px; width: 1px; background: var(--line); margin-inline: 4px; }

/* Conversation panels */
#chat-panel, #settings-panel { position: absolute; right: 24px; top: 86px; bottom: 111px; width: 340px; background: var(--paper); border: 1px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 #213b3b28; display: flex; flex-direction: column; overflow: hidden; z-index: 100; }
#chat-header, #settings-header { display: flex; align-items: center; justify-content: space-between; padding: 23px 21px 20px; border-bottom: 1px solid var(--line); }
.panel-eyebrow { display: block; font-size: 8px; letter-spacing: 1.4px; font-weight: 700; color: #5c7854; margin-bottom: 8px; }
#chat-header h2, #settings-header h2 { font-size: 24px; line-height: 1; letter-spacing: -.6px; margin: 0; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.icon-button .icon { width: 18px; height: 18px; }
.icon-button:hover { background: #e8eddf; }
#chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
#chat-messages:empty:before { content: 'A link, a thought, a very good joke. This is the place.'; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.8; margin: auto 15px; }
.chat-message { background: #e8eedf; padding: 13px 15px; border-radius: 3px 15px 15px 15px; }
.chat-message .sender { font-size: 11px; font-weight: 700; color: #507448; }
.chat-message .text { font-size: 13px; line-height: 1.6; margin-top: 5px; overflow-wrap: anywhere; }
.chat-message .time { font-size: 9px; color: #798274; margin-top: 7px; }
#chat-form { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
#chat-input { min-width: 0; flex: 1; padding: 11px; border: 1px solid #c7d2c4; border-radius: 10px; background: #fffef9; font-size: 12px; color: var(--ink); }
#chat-form button { display: grid; place-items: center; width: 42px; background: var(--yellow); border: 1px solid var(--ink); border-radius: 10px; }
#chat-form button .icon { width: 20px; height: 20px; }
#settings-content { overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 11px; }
.panel-description { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 0 0 7px; }
.setting-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 10px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.setting-item:hover { background: #e9efe2; }
.setting-item input { width: 17px; height: 17px; accent-color: #53794a; margin: 2px 0; flex-shrink: 0; }
.setting-item > span { font-size: 12px; font-weight: 600; }
.setting-item small { display: block; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--muted); margin-top: 5px; }
.setting-item.enhanced { background: #e5edda; margin-top: 4px; }
.tiny-badge { display: inline-block; font-size: 8px; background: #c4d7b4; padding: 2px 5px; border-radius: 4px; margin-left: 4px; }
.notification { position: fixed; bottom: 112px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: 12px; font-size: 13px; z-index: 400; box-shadow: 0 6px 20px #213b3b30; max-width: calc(100% - 32px); text-align: center; animation: slideUp .2s ease; }

/* The invitation */
.modal-overlay { position: fixed; inset: 0; background: #193c3d65; backdrop-filter: blur(7px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 300; }
.modal { background: var(--paper); padding: 35px; border: 1.5px solid var(--ink); border-radius: 26px; box-shadow: 7px 7px 0 var(--ink); width: 100%; max-width: 470px; text-align: center; }
.modal-mascot { display: grid; place-items: center; margin: 0 auto 19px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 20px; transform: rotate(-7deg); width: 62px; height: 62px; }
.modal-mascot .icon { width: 40px; height: 40px; stroke-width: 1.7; }
.modal h3 { font-size: 29px; line-height: 1.1; letter-spacing: -1px; margin: 0 0 14px; }
.invite-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 23px; }
.invite-link-container { display: flex; gap: 8px; margin-bottom: 24px; }
.invite-link-input { flex: 1; width: 0; min-width: 0; padding: 12px; border: 1px solid #becbb8; border-radius: 10px; background: #fffef9; color: var(--ink); font-size: 12px; }
.copy-btn { border: 1px solid var(--ink); border-radius: 10px; padding: 12px 16px; background: var(--yellow); font-size: 12px; font-weight: 700; }
.copy-btn:hover { background: #ffd785; }
.close-modal-btn { border: 0; background: var(--ink); color: var(--paper); width: 100%; padding: 13px; border-radius: 11px; font-size: 13px; font-weight: 600; }
@keyframes slideUp { from { transform: translate(-50%,10px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }
@keyframes hello-wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-1.3deg); } 65% { transform: rotate(1deg); } }

@media (min-width:1500px) {
    .landing-main { gap: 110px; padding-block: 75px; }
    .welcome-copy { padding-block: 20px; }
}
@media (max-width:1050px) {
    .landing-header,.landing-main,.landing-footer { width: calc(100% - 64px); }
    .landing-main { gap: 38px; grid-template-columns: minmax(0,1fr) minmax(330px,.88fr); }
    h1 { font-size: 58px; letter-spacing: -3.2px; }
    .intro { font-size: 14px; }
    .desktop-break { display: none; }
    .join-container { padding: 34px 26px 25px; }
    .little-perks { gap: 13px; font-size: 10px; }
    .little-perks .icon { width: 15px; }
    .friends-illustration { margin-top: 25px; }
    .meeting-header { gap: 14px; }
    #room-id-display { max-width: 180px; }
}
@media (max-width:800px) {
    .landing-header,.landing-main,.landing-footer { width: calc(100% - 44px); }
    .landing-header { padding-block: 24px; }
    .brand { font-size: 29px; }
    .brand-mark { width: 38px; height: 38px; }
    .header-note { font-size: 11px; }
    .landing-main { grid-template-columns: minmax(0,1fr); gap: 39px; max-width: 540px; padding-top: 24px; padding-bottom: 44px; }
    .welcome-copy { text-align: center; padding: 0; }
    .eyebrow { font-size: 9px; letter-spacing: 1.7px; margin-bottom: 19px; }
    h1 { font-size: 62px; letter-spacing: -3.5px; margin-bottom: 28px; }
    .intro { max-width: 440px; margin: auto; line-height: 1.8; }
    .friends-illustration { max-width: 355px; margin: 16px auto 13px; }
    .little-perks { justify-content: center; flex-wrap: wrap; gap: 19px; font-size: 10px; }
    .join-container { justify-self: center; max-width: 450px; padding: 34px 29px 26px; }
    .landing-footer { font-size: 10px; gap: 12px; }
    .landing-footer > span:last-child { max-width: 190px; text-align: right; }
    .meeting-header { flex-wrap: wrap; gap: 12px; padding-block: 14px; min-height: auto; }
    .meeting-brand { font-size: 22px; }
    .meeting-brand .brand-mark { width: 29px; height: 29px; }
    #participants-panel { margin-left: auto; order: 2; }
    #room-info { order: 3; width: 100%; margin: 0; justify-content: space-between; }
    #room-id-display { flex: 1; max-width: none; }
    #room-info button { padding: 8px 10px; }
    #meeting-screen { padding: 0 14px 16px; gap: 12px; }
    #chat-panel,#settings-panel { top: 122px; right: 14px; bottom: 103px; width: min(340px,calc(100% - 28px)); }
    #video-grid.two-videos { grid-template-columns: 1fr; grid-auto-rows: minmax(140px,1fr); }
    .control-btn { width: 62px; min-height: 57px; }
    .control-divider { margin-inline: 0; }
    #controls { gap: 3px; padding: 6px; border-radius: 17px; }
    .video-container { border-radius: 17px; }
}
@media (max-width:480px) {
    .header-note { font-size: 0; gap: 0; }
    .header-note .status-dot { width: 9px; height: 9px; }
    .landing-main { padding-top: 21px; gap: 37px; }
    h1 { font-size: 49px; letter-spacing: -2.7px; }
    .intro { font-size: 13px; max-width: 315px; }
    .friends-illustration { max-width: 315px; margin-top: 19px; }
    .little-perks { gap: 12px; font-size: 9px; }
    .little-perks .icon { width: 14px; height: 14px; }
    .join-container { padding: 32px 22px 24px; border-radius: 23px; box-shadow: 5px 5px 0 var(--ink); max-width: 370px; }
    .card-eyebrow { font-size: 8px; letter-spacing: 1.3px; }
    .join-container h2 { font-size: 33px; }
    .card-description { font-size: 12px; }
    .form-field label { font-size: 11px; }
    .landing-footer { font-size: 9px; line-height: 1.6; }
    .landing-footer > span:last-child { max-width: 155px; }
    .footer-spark { display: none; }
    .control-divider { display: none; }
    .control-btn { width: 48px; min-height: 54px; gap: 6px; }
    .control-btn .icon { width: 20px; height: 20px; }
    .control-label { font-size: 8px; }
    #controls { width: 100%; max-width: 370px; justify-content: space-between; }
    .modal { padding: 29px 22px; }
    .modal h3 { font-size: 26px; }
    .meeting-header { gap: 10px; }
    #room-id-display { font-size: 10px; }
    #room-info { gap: 8px; }
    #room-info button { font-size: 10px; }
    .video-label { font-size: 10px; bottom: 10px; left: 10px; }
    .video-container { min-height: 140px; }
}
@media (max-width:360px) {
    h1 { font-size: 43px; }
    .join-modes button { font-size: 11px; }
}
@media (prefers-reduced-motion:reduce) {
    *,*:before,*:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Device selection and a private sound check, available before and during a call. */
button, input, select { font: inherit; }
.sound-check-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: none; border: 0; padding: 17px 0 0; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.sound-check-link .icon { width: 17px; height: 17px; }
#settings-panel { position: fixed; inset: 0; margin: auto; width: min(440px,calc(100% - 28px)); max-width: none; height: min(790px,calc(100dvh - 36px)); max-height: none; padding: 0; color: var(--ink); box-shadow: 7px 7px 0 #213b3b40; }
#settings-panel::backdrop { background: #193c3d65; backdrop-filter: blur(4px); }
#settings-header { flex-shrink: 0; }
#settings-content { min-height: 0; gap: 14px; }
.audio-device-field { display: flex; flex-direction: column; gap: 8px; }
.audio-device-field label,.mic-meter label { font-size: 12px; font-weight: 700; }
.audio-device-field select { width: 100%; min-width: 0; padding: 11px; border: 1px solid #b9c9b4; border-radius: 9px; background: #fffef9; color: var(--ink); font-size: 13px; text-overflow: ellipsis; }
.audio-device-field select:focus-visible { outline: 3px solid var(--sky); }
.audio-action { background: #e9efdf; border: 1px solid #becdb6; border-radius: 9px; padding: 10px 12px; font-size: 12px; font-weight: 600; }
.audio-action:hover:not(:disabled) { background: #dae8cd; }
.audio-action:disabled { cursor: default; opacity: .5; }
.audio-test-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.audio-test-actions button { flex: 1; }
.audio-help,.audio-status,.mic-meter p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.audio-status { background: #e9efdf; border-radius: 10px; padding: 10px 12px; }
.audio-status.error { background: #f9e3d8; color: #893b29; }
.mic-meter { display: grid; gap: 7px; }
#mic-level { width: 100%; height: 18px; accent-color: #53794a; }
#mic-level::-webkit-meter-bar { background: #e2e8dc; border: 0; border-radius: 10px; }
#mic-level::-webkit-meter-optimum-value { background: #658d51; border-radius: 10px; transition: width .08s; }
.sound-adjustments { border-top: 1px solid var(--line); padding-top: 14px; }
.sound-adjustments summary { font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 0 8px; }