/* Olivia Studio — booking UI. Uses the theme's tokens when present, with fallbacks. */

:root { --oys-ink: var(--ink, #12231A); --oys-card: var(--card, #FBFBF8); --oys-line: var(--line, rgba(18,35,26,.16)); --oys-muted: var(--muted, #53635A); --oys-forest: var(--forest, #2B5036); --oys-lilac: var(--lilac, #C6A3EE); --oys-pink: var(--pink, #FF72B6); --oys-sun: var(--sun, #FF8C42); --oys-orchid: var(--orchid, #D92B86); --oys-paper: var(--paper, #F3F2EC); }

.oys-icon { width: 20px; height: 20px; flex: none; }
.oys-hp { position: absolute; left: -9999px; }
.oys-small { font-size: .88rem; color: var(--oys-muted, #53635A); }
.oys-empty { color: var(--oys-muted, #53635A); }

.oys-notice { padding: .95rem 1.15rem; border: 2px solid var(--ink, #12231A); border-radius: 6px; background: var(--pale, #DEE7D6); font-weight: 600; margin: 0 0 1.5rem; }
.oys-notice--error { background: #FFE0EE; border-color: var(--orchid, #D92B86); }

.oys-card { background: var(--oys-card); border: 2px solid var(--oys-ink); border-radius: 6px; padding: clamp(1.2rem, 3vw, 1.8rem); }
.oys-card + .oys-card { margin-top: 1.25rem; }
.oys-card h2 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); margin-bottom: .5rem; }
.oys-card h3 { margin-top: 0; }

/* Timetable extras (base styles come from the theme's .schedule) */
.oys-schedule .day h3 small { display: block; font-family: var(--f-text, sans-serif); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oys-muted); margin-top: .35rem; }
.session__spots { justify-self: start; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--oys-orchid); }
.session__spots.is-full { color: var(--oys-muted); }
.session__status { justify-self: start; display: inline-flex; gap: .3rem; align-items: center; margin-top: .35rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--oys-muted); }
.session__status.is-booked { color: var(--oys-forest); }
.session__status .oys-icon { width: 16px; height: 16px; }
.session__book .oys-icon { width: 14px; height: 14px; }

/* Checkout */
.oys-checkout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .oys-checkout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2.5rem; } .oys-summary { position: sticky; top: calc(var(--header-h, 72px) + 24px); } }
.oys-summary { background: var(--oys-lilac); box-shadow: 8px 8px 0 var(--oys-ink); }
.oys-facts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; border-top: 2px solid var(--oys-ink); padding-top: 1rem; }
.oys-facts li { display: flex; gap: .6rem; align-items: center; font-weight: 600; color: var(--oys-ink); }
.oys-bigprice { font-family: var(--f-display, sans-serif); font-size: 3.4rem; line-height: 1; margin: .2rem 0 .8rem; color: var(--oys-ink); }
.oys-desc { margin-top: 1rem; }
.oys-options { border: 0; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.oys-option { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border: 2px solid var(--oys-ink); border-radius: 6px; background: var(--oys-paper); cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.oys-option:hover { background: #fff; }
.oys-option:has(input:checked) { background: var(--oys-lilac); box-shadow: 4px 4px 0 var(--oys-ink); }
.oys-option.is-disabled { opacity: .5; cursor: not-allowed; }
.oys-option input { width: 20px; height: 20px; accent-color: var(--oys-forest); }
.oys-option__label { font-weight: 700; color: var(--oys-ink); }
.oys-option__price { font-family: var(--f-display, sans-serif); font-size: 1.5rem; color: var(--oys-ink); }
.oys-policy { font-size: .9rem; color: var(--oys-muted); border-left: 4px solid var(--oys-sun); padding-left: .9rem; margin: 1rem 0; }
.oys-secure { font-size: .82rem; color: var(--oys-muted); margin: .9rem 0 0; }
.oys-submit { width: 100%; }
@media (min-width: 600px) { .oys-submit { width: auto; } }
.oys-waiver { margin: .5rem 0; border: 1.5px dashed var(--oys-ink); border-radius: 6px; padding: .6rem .9rem; font-size: .92rem; }
.oys-waiver summary { cursor: pointer; font-weight: 700; }
.oys-waiver p { margin: .6rem 0 0; color: var(--oys-muted); }
.oys-check { display: flex; gap: .6rem; align-items: flex-start; margin: .7rem 0; font-size: .95rem; }
.oys-check input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--oys-forest); flex: none; }
.oys-done { background: var(--pale, #DEE7D6); box-shadow: 8px 8px 0 var(--oys-ink); }
.oys-done--paid { background: var(--oys-lilac); }

/* Forms */
.oys-form { display: grid; gap: 1rem; }
.oys-form .btn { justify-self: start; }
.oys-form--row { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 520px) { .oys-form--row { grid-template-columns: 1fr; } }
.oys-inline { display: inline; margin: 0; }

/* Log in / sign up */
.oys-auth--page { max-width: 720px; }
.oys-tabs__nav { display: flex; gap: .4rem; margin: 1rem 0 1.25rem; flex-wrap: wrap; }
.oys-tabs__nav button { font: 700 .8rem/1 var(--f-text, sans-serif); text-transform: uppercase; letter-spacing: .08em; padding: .8rem 1.1rem; border: 2px solid var(--oys-ink); border-radius: 999px; background: transparent; color: var(--oys-ink); cursor: pointer; }
.oys-tabs__nav button[aria-selected="true"] { background: var(--oys-ink); color: var(--oys-paper); }

/* Account */
.oys-account__head { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: space-between; align-items: end; margin-bottom: 1.5rem; }
.oys-account__head h2 { margin: 0; }
.oys-stats { display: flex; gap: .75rem; margin: 0; flex-wrap: wrap; }
.oys-stat { border: 2px solid var(--oys-ink); border-radius: 6px; padding: .7rem 1rem; min-width: 130px; background: var(--oys-lilac); }
.oys-stat--pink { background: var(--oys-pink); }
.oys-stat--sun { background: var(--oys-sun); }
.oys-stat dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--oys-ink); }
.oys-stat dd { margin: .2rem 0 0; font-family: var(--f-display, sans-serif); font-size: 2.4rem; line-height: 1; color: var(--oys-ink); font-variant-numeric: tabular-nums; }
.oys-account__nav { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 3px solid var(--oys-ink); padding-bottom: .9rem; margin-bottom: 1.75rem; }
.oys-account__nav a { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--oys-ink); padding: .6rem .95rem; border-radius: 999px; border: 2px solid transparent; }
.oys-account__nav a:hover { border-color: var(--oys-ink); }
.oys-account__nav a[aria-current="page"] { background: var(--oys-ink); color: var(--oys-paper); }
.oys-account__nav .oys-logout { margin-left: auto; color: var(--oys-muted); }
.oys-account__body h3 { margin: 2rem 0 1rem; }
.oys-account__body h3:first-child { margin-top: 0; }

.oys-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--oys-ink); }
.oys-item { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; align-items: center; padding: 1.1rem 0; border-bottom: 1.5px solid var(--oys-ink); }
.oys-item__when { width: 64px; height: 64px; border-radius: 6px; background: var(--oys-pink); display: grid; place-content: center; text-align: center; line-height: 1; color: var(--oys-ink); }
.oys-item__when b { font-family: var(--f-display, sans-serif); font-size: 1.9rem; font-weight: 400; }
.oys-item__when span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.oys-item__main h4 { margin: 0 0 .2rem; font-size: 1.1rem; }
.oys-item__main p { margin: 0; color: var(--oys-muted); }
.oys-item__actions { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; }
.oys-item__actions .btn { padding: .65em 1.1em; font-size: .72rem; }
@media (min-width: 760px) { .oys-item { grid-template-columns: auto 1fr auto; } .oys-item__actions { grid-column: auto; justify-content: flex-end; } }
.oys-item:not(:has(.oys-item__when)) { grid-template-columns: 1fr auto; }

.oys-passes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.oys-pass { border: 2px solid var(--oys-ink); border-radius: 6px; padding: 1.1rem; background: var(--oys-lilac); }
.oys-pass--private { background: var(--oys-sun); }
.oys-pass.is-done { background: var(--oys-card); opacity: .75; }
.oys-pass .kicker { margin-bottom: .6rem; }
.oys-pass h4 { margin: 0 0 .3rem; }
.oys-pass__count { margin: 0; color: var(--oys-ink); }
.oys-pass__count b { font-family: var(--f-display, sans-serif); font-size: 2.6rem; font-weight: 400; }
.oys-meter { display: block; height: 8px; border: 1.5px solid var(--oys-ink); border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.5); margin: .5rem 0; }
.oys-meter span { display: block; height: 100%; background: var(--oys-ink); }
.oys-redeem { margin-top: 1.5rem; }
.oys-buy { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.oys-buy li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1.5px solid var(--oys-line); }

.oys-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.oys-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--oys-muted); border-bottom: 3px solid var(--oys-ink); padding: .6rem .5rem .6rem 0; }
.oys-table td { border-bottom: 1.5px solid var(--oys-line); padding: .75rem .5rem .75rem 0; vertical-align: top; }
.oys-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.oys-account__body { overflow-x: auto; padding: 0 12px 12px 0; }

/* Gift cards */
.oys-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.oys-form fieldset > legend { padding: 0; }
.oys-gifts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: .8rem 0 1.5rem; }
.oys-gift { position: relative; display: block; cursor: pointer; }
.oys-gift input { position: absolute; opacity: 0; }
.oys-gift__card { display: grid; gap: .4rem; min-height: 170px; align-content: space-between; padding: 1.2rem; border: 2px solid var(--oys-ink); border-radius: 10px; background: var(--oys-pink); color: var(--oys-ink); transition: transform .2s, box-shadow .2s; }
.oys-gift:nth-child(3n+2) .oys-gift__card { background: var(--oys-lilac); }
.oys-gift:nth-child(3n+3) .oys-gift__card { background: var(--oys-sun); }
.oys-gift__card b { font-size: 1.15rem; }
.oys-gift__price { font-family: var(--f-display, sans-serif); font-size: 2.6rem; line-height: 1; }
.oys-gift input:checked + .oys-gift__card { box-shadow: 6px 6px 0 var(--oys-ink); transform: translate(-3px, -3px); }
.oys-gift input:focus-visible + .oys-gift__card { outline: 3px solid var(--oys-orchid); outline-offset: 3px; }
.oys-gifts--preview .oys-gift { cursor: default; }

/* Guests */
.oys-guests { border: 1.5px dashed var(--oys-ink); border-radius: 6px; padding: .9rem 1rem 1rem; margin: 1rem 0; display: grid; gap: .7rem; }
.oys-guests legend { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; padding: 0 .4rem; color: var(--oys-ink); }
.oys-guests .oys-small { margin: 0; }
.oys-guests [data-guest-add] { justify-self: start; }
.oys-guests [data-guest-add][hidden] { display: none; }
.oys-guestrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; padding-top: .7rem; border-top: 1px solid var(--oys-line); }
.oys-guestrow[hidden] { display: none; }
.oys-guestrow__n { grid-column: 1 / -1; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--oys-muted); margin-bottom: -.3rem; }
.oys-guestrow__remove { width: 40px; height: 44px; border: 2px solid var(--oys-ink); border-radius: 6px; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--oys-ink); }
.oys-guestrow__remove:hover { background: var(--oys-pink); }
@media (max-width: 560px) { .oys-guestrow { grid-template-columns: 1fr auto; } .oys-guestrow .field { grid-column: 1; } .oys-guestrow__remove { grid-row: 2; grid-column: 2; } }
.oys-party { margin: .2rem 0 .4rem; font-size: .92rem; color: var(--oys-muted); }
.oys-party b { color: var(--oys-ink); font-size: 1.1rem; }
.oys-option__label small { display: block; font-weight: 500; font-size: .8rem; color: var(--oys-muted); margin-top: .15rem; }
.oys-guestlist { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.oys-guestlist li { display: flex; gap: .75rem; align-items: center; justify-content: space-between; max-width: 460px; padding: .35rem .6rem; border-radius: 6px; background: var(--oys-lilac); color: var(--oys-ink); font-weight: 600; font-size: .92rem; }
.oys-guestlist li:nth-child(even) { background: var(--oys-pink); }
.oys-guestlist .oys-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: .35rem; }
.oys-guestlist small { font-weight: 500; color: rgba(18,35,26,.7); }
.oys-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; cursor: pointer; color: var(--oys-ink); }

/* Membership */
.oys-membership { background: var(--oys-sun); box-shadow: 8px 8px 0 var(--oys-ink); }
.oys-membership h3 { margin: 0 0 1rem; font-family: var(--f-display, sans-serif); font-weight: 400; text-transform: uppercase; font-size: 2rem; }
.oys-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.oys-dl dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(18,35,26,.75); }
.oys-dl dd { margin: .2rem 0 0; font-weight: 700; color: var(--oys-ink); }
.oys-bigprice small { font-family: var(--f-text, sans-serif); font-size: .9rem; letter-spacing: 0; }
.oys-item__main .badge { vertical-align: 2px; }

/* Hybrid classes: studio or live online */
.oys-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1.2rem; }
.oys-mode { display: grid; gap: .15rem; padding: .85rem 1rem; border: 2px solid var(--oys-ink); border-radius: 6px; background: var(--oys-paper); color: var(--oys-ink); text-decoration: none; }
.oys-mode b { font-size: 1.02rem; }
.oys-mode span { font-size: .84rem; color: var(--oys-muted); }
.oys-mode:hover { background: var(--oys-card); }
.oys-mode.is-active { background: var(--oys-forest); color: #fff; box-shadow: 4px 4px 0 var(--oys-ink); }
.oys-mode.is-active span { color: rgba(255,255,255,.85); }
.badge--online { background: var(--oys-lilac); color: var(--oys-ink); }
.oys-join { margin-top: .35rem; }
@media (max-width: 480px) { .oys-modes { grid-template-columns: 1fr; } }

/* Donations, paying at the studio, community */
.oys-amounts { border: 0; padding: 0; margin: 0 0 1.25rem; }
.oys-amounts legend { font-weight: 700; margin-bottom: .5rem; }
.oys-amounts__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.oys-amount { position: relative; }
.oys-amount input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oys-amount span { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: 2px solid var(--oys-ink); border-radius: 999px; background: var(--oys-paper); font-weight: 700; cursor: pointer; }
.oys-amount input:checked + span { background: var(--oys-lilac); box-shadow: 3px 3px 0 var(--oys-ink); }
.oys-amount input:focus-visible + span { outline: 3px solid var(--oys-orchid); outline-offset: 2px; }
.oys-amount__custom { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.oys-amount__custom input { width: 5.5rem; min-height: 44px; padding: .35rem .6rem; border: 2px solid var(--oys-ink); border-radius: 6px; font: inherit; }
.oys-amounts .oys-small { margin: .6rem 0 0; }
.oys-due { padding: .7rem .9rem; border-left: 4px solid var(--oys-forest); background: var(--pale, #DEE7D6); }
.session__donation { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border: 1.5px solid currentColor; border-radius: 999px; font-size: .78em; font-weight: 700; }
.oys-fb { margin: 1rem 0 0; }
.oys-fb a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--oys-forest); text-decoration: underline; text-underline-offset: 3px; }
.oys-fb .oys-icon { width: 22px; height: 22px; flex: none; padding: 3px; border-radius: 50%; background: #1877F2; color: #fff; stroke: #fff; }
.oys-account > .oys-fb { margin-top: 1.5rem; }
.oys-private-note { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.oys-private-note .oys-icon { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.oys-min-note { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0; font-size: .92rem; }
.oys-min-note .oys-icon { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.oys-gift-code, .oys-raffle { margin: 0 0 1.25rem; }
.oys-gift-code__code { font-family: var(--f-display, sans-serif); font-size: 1.8rem; letter-spacing: .08em; margin: .2rem 0; }
.oys-raffle__n { font-size: 1.1rem; margin: .2rem 0; }
.oys-raffle__n b { font-family: var(--f-display, sans-serif); font-size: 2.4rem; color: var(--oys-forest); margin-right: .25rem; }
.oys-birthday { border: 0; padding: 0; margin: 0 0 1rem; }
.oys-birthday legend { font-weight: 700; margin-bottom: .4rem; }
.oys-coupon { margin: 0 0 1rem; }
.oys-coupon summary { cursor: pointer; font-weight: 700; color: var(--oys-forest); }
.oys-coupon .field { margin-top: .6rem; }

/* Teachers */
.oys-teacher-line { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; font-size: .86rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.oys-teacher-line img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.oys-teacher-mini { display: flex; gap: .8rem; align-items: flex-start; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(18, 35, 26, .15); }
.oys-teacher-mini img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.oys-teacher-mini p { margin: 0; }
.oys-teacher-mini__name { font-weight: 800; }
.oys-teacher-mini__headline { font-size: .9rem; color: var(--muted, #53635A); }
.oys-teacher-mini__bio summary { cursor: pointer; font-weight: 700; color: var(--oys-forest); margin-top: .3rem; }
.oys-teachers { display: grid; gap: 2.5rem; }
.oys-teacher { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .oys-teacher { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.oys-teacher__photos { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oys-teacher__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.oys-teacher__photos img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.oys-teacher__name { margin: 0 0 .2rem; }
.oys-teacher__headline { font-weight: 700; color: var(--oys-forest); margin: 0 0 .8rem; }
.oys-teacher__next { grid-column: 1 / -1; margin: -1rem 0 0; padding-left: 1.2rem; }

/* ---------- Live online class (OYS_Live): video + class chat ---------- */
.oys-live__head { margin-bottom: 1.2rem; }
.oys-live__kicker { margin: 0 0 .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oys-orchid); }
.oys-live__head h2 { margin: 0; }
.oys-live__when { margin: .35rem 0 0; color: var(--oys-muted); font-weight: 600; }
.oys-live__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1.2rem; align-items: start; }
.oys-live__stage { display: grid; gap: 1rem; min-width: 0; }
.oys-live__video { display: grid; gap: .6rem; padding: .6rem; border: 2px solid var(--oys-ink); border-radius: 6px; background: #12231A; }
.oys-live__video[hidden] { display: none; }
.oys-live__main { position: relative; display: grid; aspect-ratio: 16 / 9; max-height: 70vh; border-radius: 6px; overflow: hidden; background: #0C1A12; }
.oys-live__main.is-waiting::after { content: attr(data-waiting); position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: #F3F2EC; font-weight: 700; text-align: center; }
.oys-live__main .oys-live__tile { aspect-ratio: auto; height: 100%; border-radius: 0; }
.oys-live__main .oys-live__tile video { object-fit: contain; }
.oys-live__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.oys-live__tiles:empty { display: none; }
.oys-live__tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #1D3326; }
.oys-live__tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oys-live__tile video.is-mirror { transform: scaleX(-1); }
.oys-live__tile figcaption { position: absolute; left: .4rem; bottom: .35rem; z-index: 1; padding: .1rem .45rem; border-radius: 4px; background: rgba(12, 26, 18, .7); color: #F3F2EC; font-size: .78rem; font-weight: 600; }
.oys-live__tile:not(.has-video) figcaption { left: 50%; bottom: 50%; transform: translate(-50%, 50%); font-size: .9rem; }
.oys-live__hand { position: absolute; top: .35rem; right: .4rem; z-index: 1; font-size: 1.3rem; }
.oys-live__hand[hidden] { display: none; }
.oys-live__note { margin: 0; color: #F3F2EC; font-weight: 600; text-align: center; }
.oys-live__note[hidden] { display: none; }
.oys-live__bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.oys-live__btn { padding: .55rem 1.05rem; border: 0; border-radius: 999px; background: #F3F2EC; color: #12231A; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.oys-live__btn.is-off { background: #D3302F; color: #fff; }
.oys-live__btn.is-hand.is-on { background: var(--oys-sun); }
.oys-live__btn.is-leave { background: var(--oys-orchid); color: #fff; }
.oys-live__btn:focus-visible { outline: 3px solid var(--oys-lilac); outline-offset: 2px; }
.oys-live__people { font-weight: 700; margin-right: .4rem; }
.oys-live__lobby { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.2rem, 3vw, 2rem); border: 2px solid var(--oys-ink); border-radius: 6px; background: var(--oys-paper); }
.oys-live__lobby[hidden] { display: none; }
.oys-live__status { margin: 0; font-weight: 700; color: var(--oys-ink); }
.oys-live__tips { margin: 0; padding-left: 1.1rem; color: var(--oys-muted); font-size: .92rem; display: grid; gap: .3rem; }
.oys-live__owner { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .9rem; font-weight: 600; }
.oys-live__owner[hidden] { display: none; }
.oys-live__rec::before { content: ""; display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; border-radius: 50%; background: var(--oys-muted); vertical-align: middle; }
.oys-live__rec.is-on::before { background: #D3302F; }
.oys-live__after { display: grid; gap: 1rem; }
.oys-live__summary h3, .oys-live__replay h3 { margin-top: 0; }
.oys-live__summary-text { width: 100%; font: inherit; }
.oys-live__player { width: 100%; max-height: 70vh; border-radius: 6px; background: #12231A; }
.oys-live__chat { position: sticky; top: 1rem; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .6rem; max-height: min(78vh, 720px); padding: 1rem; border: 2px solid var(--oys-ink); border-radius: 6px; background: var(--oys-card); }
.oys-live__chat h3 { margin: 0; }
.oys-live__chat .oys-small { margin: 0; }
.oys-live__messages { list-style: none; margin: 0; padding: 0 .2rem 0 0; overflow-y: auto; display: grid; align-content: start; gap: .55rem; min-height: 180px; }
.oys-live__empty { color: var(--oys-muted); font-size: .92rem; }
.oys-live__msg { padding: .55rem .7rem; border-radius: 6px; background: var(--oys-paper); }
.oys-live__msg.is-teacher { background: color-mix(in srgb, var(--oys-lilac) 45%, var(--oys-paper)); }
.oys-live__msg-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; margin: 0 0 .15rem; font-size: .82rem; }
.oys-live__msg-head time { color: var(--oys-muted); }
.oys-live__badge { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oys-forest); }
.oys-live__del { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: .76rem; color: var(--oys-muted); text-decoration: underline; cursor: pointer; }
.oys-live__msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.oys-live__form { display: grid; gap: .45rem; }
.oys-live__form textarea { width: 100%; resize: vertical; min-height: 2.8rem; font: inherit; padding: .5rem .6rem; border: 2px solid var(--oys-ink); border-radius: 6px; background: #fff; }
.oys-live__form .btn { justify-self: end; }
@media (max-width: 860px) {
	.oys-live__grid { grid-template-columns: minmax(0, 1fr); }
	.oys-live__main { max-height: 60vh; }
	.oys-live__chat { position: static; max-height: 560px; }
}
.oys-live .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }