/* とわこみゅ動画プレイヤー / 公共放映モード */
:root {
	--twkm-vp-screen-yellow: #ffe24a;
	--twkm-vp-screen-yellow-border: #c9a900;
	--twkm-vp-screen-blue: #4fc3d7;
	--twkm-vp-screen-blue-dark: #087d8c;
	--twkm-vp-screen-green: #63b96c;
	--twkm-vp-screen-stage: #050608;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-width: 100%; min-height: 100%; margin: 0; color: #f8fafc; background: #0b0e12; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
body { overflow-x: hidden; }
button, a { font: inherit; }
.twkm-vp-screen { position: relative; width: 100%; min-height: 100dvh; padding: clamp(14px, 2vw, 28px); background: #0b0e12; }
.twkm-vp-screen-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1600px; margin: 0 auto 18px; }
.twkm-vp-screen-header h1 { margin: 3px 0 0; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.35; }
.twkm-vp-screen-mode-label { margin: 0; color: #91e29a; font-size: .8rem; font-weight: 850; letter-spacing: .09em; }
.twkm-vp-screen-clock { margin: 0; color: #d6e0e4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.twkm-vp-screen-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); max-width: 1600px; margin: 0 auto; align-items: start; }
.twkm-vp-screen-layout.has-program-guide { grid-template-columns: minmax(0, 1.7fr) minmax(310px, .72fr); }
.twkm-vp-screen-layout.no-program-guide { padding-bottom: 92px; }
.twkm-vp-screen-player { position: relative; min-width: 0; }
.twkm-vp-screen-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(79, 195, 215, .36); border-radius: 16px; background: var(--twkm-vp-screen-stage); box-shadow: 0 18px 54px rgba(0, 0, 0, .34); }
.twkm-vp-screen-stage > div:first-child, .twkm-vp-screen-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.twkm-vp-screen-status { position: absolute; z-index: 4; left: 18px; bottom: 18px; max-width: calc(100% - 36px); padding: 8px 12px; border: 1px solid rgba(79, 195, 215, .34); border-radius: 8px; color: #d6e0e4; background: rgba(5, 6, 8, .86); transition: opacity .18s ease, visibility .18s ease; }
.twkm-vp-screen-status.is-error { border-color: rgba(255, 255, 255, .28); color: #fff; background: rgba(198, 40, 40, .92); }
.twkm-vp-screen-overlay { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; gap: 24px; padding: 18px 110px 54px 20px; background: linear-gradient(rgba(5, 6, 8, .84), transparent); pointer-events: none; transition: opacity .18s ease, visibility .18s ease; }
.twkm-vp-screen-overlay h2 { min-width: 0; max-width: min(74%, 960px); margin: 0; display: -webkit-box; overflow: hidden; font-size: clamp(1rem, 2vw, 1.55rem); line-height: 1.35; overflow-wrap: anywhere; text-shadow: 0 2px 8px #050608; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.twkm-vp-screen-overlay p { margin: 0; white-space: nowrap; }
.twkm-vp-screen-fullscreen-info { display: none; }
.twkm-vp-screen-today { min-width: 0; max-height: min(68dvh, 760px); overflow: auto; padding: clamp(16px, 2vw, 22px); border: 1px solid rgba(99, 185, 108, .45); border-radius: 16px; background: #141a1f; }
.twkm-vp-screen-today h2 { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.twkm-vp-screen-today > p { margin: 4px 0 14px; color: #abb9bd; }
.twkm-vp-screen-program-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.twkm-vp-screen-program-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 12px; border-left: 4px solid #607078; border-radius: 8px; background: #20272d; }
.twkm-vp-screen-program-item time { grid-column: 1 / -1; grid-row: 1; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.twkm-vp-screen-program-item strong { overflow-wrap: anywhere; }
.twkm-vp-screen-program-item span { grid-column: 1; color: #b8c3c7; font-size: .82rem; }
.twkm-vp-screen-program-item em { grid-column: 2; grid-row: 2 / span 2; padding: 3px 7px; border-radius: 999px; color: #1d281e; background: #9be5a3; font-size: .76rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.twkm-vp-screen-program-item.is-current { border-left-color: var(--twkm-vp-screen-green); background: #203727; box-shadow: inset 0 0 0 1px rgba(99, 185, 108, .35); }
.twkm-vp-screen-guide-open, .twkm-vp-screen-weekly button { min-height: 44px; margin-top: 14px; padding: 8px 13px; border: 1px solid var(--twkm-vp-screen-green); border-radius: 8px; color: #fff; background: #244c2a; cursor: pointer; }
.twkm-vp-screen-now-next { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1600px; margin: 16px auto 92px; }
.twkm-vp-screen-now-next article { min-width: 0; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; background: #141a1f; }
.twkm-vp-screen-now-next p { margin: 0 0 5px; color: #9be5a3; font-size: .78rem; font-weight: 800; }
.twkm-vp-screen-now-next h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.twkm-vp-screen-weekly { position: fixed; z-index: 20; top: 0; right: 0; width: min(520px, 94vw); height: 100dvh; overflow: auto; padding: 22px; color: #f8fafc; background: #151c21; box-shadow: -16px 0 48px rgba(0, 0, 0, .48); }
.twkm-vp-screen-weekly[hidden] { display: none; }
.twkm-vp-screen-weekly-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -22px; padding: 22px 0 12px; background: #151c21; }
.twkm-vp-screen-weekly h2 { margin: 0; }
.twkm-vp-screen-weekly ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.twkm-vp-screen-weekly li { display: grid; gap: 3px; padding: 11px; border-left: 4px solid var(--twkm-vp-screen-yellow); background: #20272d; }
.twkm-vp-screen-controls { position: fixed; z-index: 15; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; max-width: calc(100vw - 28px); flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: rgba(5, 6, 8, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); transform: translateX(-50%); transition: opacity .18s ease, visibility .18s ease; }
.twkm-vp-screen-controls[data-mode="minimal"] [data-control-level="full"] { display: none; }
.twkm-vp-screen-controls[data-mode="hidden"] button:not([data-screen-action="start"]), .twkm-vp-screen-controls[data-mode="hidden"] a { display: none; }
.twkm-vp-screen-controls button, .twkm-vp-screen-controls a { display: inline-flex; min-width: 88px; min-height: 48px; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid rgba(79, 195, 215, .55); border-radius: 9px; color: #f8fafc; background: rgba(8, 125, 140, .88); font-weight: 750; line-height: 1.3; text-decoration: none; cursor: pointer; }
.twkm-vp-screen-controls button:hover, .twkm-vp-screen-controls a:hover { border-color: var(--twkm-vp-screen-blue); background: #0a7180; }
.twkm-vp-screen-controls button.is-primary { border-color: var(--twkm-vp-screen-yellow-border); color: #222; background: var(--twkm-vp-screen-yellow); }
.twkm-vp-screen-controls button[aria-pressed="true"] { border-color: #438c4b; background: #438c4b; }
.twkm-vp-screen-controls button[data-screen-action="repeat"][aria-pressed="true"], .twkm-vp-screen-controls button[data-screen-action="shuffle"][aria-pressed="true"] { border-color: var(--twkm-vp-screen-yellow-border); color: #222; background: var(--twkm-vp-screen-yellow); }
.twkm-vp-screen-floating-fullscreen { position: absolute; z-index: 6; top: 78px; right: max(18px, env(safe-area-inset-right)); min-width: 76px; min-height: 48px; padding: 8px 12px; border: 1px solid rgba(79, 195, 215, .68); border-radius: 9px; color: #f8fafc; background: rgba(5, 6, 8, .86); font-weight: 750; cursor: pointer; }
.twkm-vp-screen-controls button:focus-visible, .twkm-vp-screen-controls a:focus-visible, .twkm-vp-screen-floating-fullscreen:focus-visible, .twkm-vp-screen-guide-open:focus-visible, .twkm-vp-screen-weekly button:focus-visible, .twkm-vp-screen-error a:focus-visible { outline: 4px solid var(--twkm-vp-screen-blue); outline-offset: 3px; }
.twkm-vp-screen-control-wake { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.twkm-vp-screen:fullscreen, .twkm-vp-screen:-webkit-full-screen { width: 100vw; height: 100dvh; padding: 0; overflow: hidden; background: var(--twkm-vp-screen-stage); }
.twkm-vp-screen:fullscreen .twkm-vp-screen-header, .twkm-vp-screen:fullscreen .twkm-vp-screen-today, .twkm-vp-screen:fullscreen .twkm-vp-screen-now-next, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-header, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-today, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-now-next { display: none; }
.twkm-vp-screen:fullscreen .twkm-vp-screen-layout, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-layout { display: block; width: 100%; max-width: none; height: 100%; }
.twkm-vp-screen:fullscreen .twkm-vp-screen-player, .twkm-vp-screen:fullscreen .twkm-vp-screen-stage, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-player, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-stage { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.twkm-vp-screen:fullscreen .twkm-vp-screen-fullscreen-info, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-fullscreen-info { position: fixed; z-index: 7; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); display: flex; max-width: min(70vw, 920px); gap: 16px; align-items: center; padding: 8px 12px; border-radius: 9px; background: rgba(5, 6, 8, .76); }
.twkm-vp-screen:fullscreen .twkm-vp-screen-fullscreen-info strong, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-fullscreen-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twkm-vp-screen:fullscreen .twkm-vp-screen-fullscreen-info time, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-fullscreen-info time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.twkm-vp-screen:fullscreen .twkm-vp-screen-fullscreen-info, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-fullscreen-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-width: min(calc(100vw - 128px), 920px); box-sizing: border-box; }
.twkm-vp-screen:fullscreen .twkm-vp-screen-fullscreen-info strong, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-fullscreen-info strong { white-space: normal; overflow-wrap: anywhere; }
.twkm-vp-screen-fullscreen-datetime { display: grid; gap: 2px; font-size: 1rem; line-height: 1.4; }
.twkm-vp-screen-fullscreen-datetime > time { overflow-wrap: anywhere; }
.twkm-vp-screen-fullscreen-datetime > span { white-space: nowrap; }
.twkm-vp-screen-now-next .twkm-vp-screen-program-time { margin-top: 8px; color: #d6e0e4; font-size: .9rem; font-weight: 400; overflow-wrap: anywhere; }
.twkm-vp-screen [data-screen-guide-freshness]:not([hidden]), .twkm-vp-screen [data-screen-fullscreen-freshness]:not([hidden]) { margin: 0; color: #ffe6a4; font-size: .9rem; overflow-wrap: anywhere; }
.twkm-vp-screen:fullscreen .twkm-vp-screen-floating-fullscreen, .twkm-vp-screen:-webkit-full-screen .twkm-vp-screen-floating-fullscreen { position: fixed; top: max(12px, env(safe-area-inset-top)); }
.twkm-vp-screen.is-controls-hidden { cursor: none; }
.twkm-vp-screen.is-controls-hidden .twkm-vp-screen-controls, .twkm-vp-screen.is-controls-hidden .twkm-vp-screen-status, .twkm-vp-screen.is-controls-hidden .twkm-vp-screen-overlay { opacity: 0; visibility: hidden; pointer-events: none; }
.twkm-vp-screen.is-controls-hidden .twkm-vp-screen-control-wake { pointer-events: auto; }
.twkm-vp-screen.is-controls-hidden .twkm-vp-screen-floating-fullscreen { opacity: .34; }
.twkm-vp-screen-error { display: grid; min-height: 100dvh; place-content: center; padding: 30px; text-align: center; }
.twkm-vp-screen-error a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid var(--twkm-vp-screen-blue); border-radius: 9px; color: #f8fafc; background: var(--twkm-vp-screen-blue-dark); }
@media (max-width: 900px) { .twkm-vp-screen-layout.has-program-guide { grid-template-columns: 1fr; } .twkm-vp-screen-today { max-height: none; } .twkm-vp-screen-floating-fullscreen { top: 72px; } }
@media (max-width: 700px) {
	.twkm-vp-screen { padding: 12px; }
	.twkm-vp-screen-header { display: block; padding-right: 82px; }
	.twkm-vp-screen-clock { margin-top: 7px; white-space: normal; }
	.twkm-vp-screen-floating-fullscreen { top: 12px; right: 12px; }
	.twkm-vp-screen-now-next { grid-template-columns: 1fr; margin-bottom: 220px; }
	.twkm-vp-screen-program-item em { justify-self: start; }
	.twkm-vp-screen-controls { width: calc(100vw - 20px); }
	.twkm-vp-screen-controls button, .twkm-vp-screen-controls a { min-width: 0; flex: 1 1 28%; }
	.twkm-vp-screen-layout.no-program-guide { padding-bottom: 220px; }
}
@media (max-width: 390px) { .twkm-vp-screen-controls { gap: 6px; padding: 8px; } .twkm-vp-screen-controls button, .twkm-vp-screen-controls a { min-height: 46px; padding-inline: 8px; font-size: .82rem; } .twkm-vp-screen-status { right: 10px; left: 10px; max-width: none; } }
/* Full is the interactive mode: the YouTube bar and MU toolbar occupy separate rows. */
.twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-controls { position: static; width: auto; max-width: 1600px; margin: 16px auto 0; transform: none; }
.twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-layout.no-program-guide { padding-bottom: 0; }
.twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-now-next { margin-bottom: 16px; }
.twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-control-wake { pointer-events: none; }
.twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-stage { display: flex; flex-direction: column; aspect-ratio: auto; }
.twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-stage > [data-screen-youtube], .twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-stage > iframe { flex: 0 0 auto; height: auto; min-height: 200px; aspect-ratio: 16 / 9; }
.twkm-vp-screen[data-controls-mode="full"] .twkm-vp-screen-status { position: static; order: -1; flex: 0 0 auto; max-width: none; border-radius: 0; }
.twkm-vp-screen[data-controls-mode="full"]:fullscreen, .twkm-vp-screen[data-controls-mode="full"]:-webkit-full-screen { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.twkm-vp-screen[data-controls-mode="full"]:fullscreen .twkm-vp-screen-layout, .twkm-vp-screen[data-controls-mode="full"]:-webkit-full-screen .twkm-vp-screen-layout { grid-row: 1; min-height: 0; }
.twkm-vp-screen[data-controls-mode="full"]:fullscreen .twkm-vp-screen-stage > [data-screen-youtube], .twkm-vp-screen[data-controls-mode="full"]:-webkit-full-screen .twkm-vp-screen-stage > [data-screen-youtube] { flex: 1 1 0; min-height: 0; height: 0; aspect-ratio: auto; }
.twkm-vp-screen[data-controls-mode="full"]:fullscreen .twkm-vp-screen-controls, .twkm-vp-screen[data-controls-mode="full"]:-webkit-full-screen .twkm-vp-screen-controls { grid-row: 2; max-height: 45dvh; overflow-y: auto; margin: 0 auto; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.twkm-vp-screen-caption-help { flex-basis: 100%; font-size: .85rem; }
.twkm-vp-screen-caption-help[hidden] { display: none; }
.twkm-vp-screen-caption-help summary { padding: 8px; cursor: pointer; }
.twkm-vp-screen-caption-help p { margin: 0; padding: 0 8px 8px; }
/* Reserve the control's intrinsic width, including focus clearance, outside fullscreen. */
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 24px; align-content: start; padding-inline: max(clamp(14px, 2vw, 28px), env(safe-area-inset-left)) max(clamp(14px, 2vw, 28px), env(safe-area-inset-right)); padding-top: max(clamp(14px, 2vw, 28px), env(safe-area-inset-top)); }
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) > .twkm-vp-screen-header { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; padding-right: 0; flex-wrap: wrap; row-gap: 8px; }
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) .twkm-vp-screen-header > div { min-width: 0; overflow-wrap: anywhere; }
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) .twkm-vp-screen-clock { min-width: 0; white-space: normal; }
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) > .twkm-vp-screen-floating-fullscreen { position: static; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) > .twkm-vp-screen-layout,
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) > .twkm-vp-screen-now-next,
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen))[data-controls-mode="full"] > .twkm-vp-screen-controls { grid-column: 1 / -1; width: 100%; }
/* Grid margins do not collapse: keep the existing single gap after now/next. */
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen))[data-controls-mode="full"] > .twkm-vp-screen-now-next ~ .twkm-vp-screen-controls { margin-top: 0; }
@media (max-width: 700px) { .twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Navigation owns a layout row, including in native fullscreen. It never overlays video. */
.twkm-vp-screen-topbar { position: sticky; top: 0; z-index: 21; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: #0b0e12; }
.twkm-vp-screen-return { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; max-width: 100%; padding: 10px 22px; border: 2px solid #c9a900; border-radius: 10px; color: #171c20; background: #ffe24a; font-size: 18px; font-weight: 800; line-height: 1.4; text-decoration: none; cursor: pointer; }
.twkm-vp-screen-return:hover { background: #fff085; border-color: #f8fafc; }
.twkm-vp-screen-return:focus-visible { outline: 4px solid #4fc3d7; outline-offset: 3px; }
.twkm-vp-screen-topbar .twkm-vp-screen-floating-fullscreen { position: static; justify-self: end; }
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) > .twkm-vp-screen-topbar { grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; }
.twkm-vp-screen:not(:is(:fullscreen, :-webkit-full-screen)) > .twkm-vp-screen-header { grid-column: 1 / -1; grid-row: 2; }
.twkm-vp-screen:is(:fullscreen, :-webkit-full-screen) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.twkm-vp-screen[data-controls-mode="full"]:is(:fullscreen, :-webkit-full-screen) { grid-template-rows: auto minmax(0, 1fr) auto; }
.twkm-vp-screen:is(:fullscreen, :-webkit-full-screen) > .twkm-vp-screen-topbar { grid-row: 1; grid-column: 1; grid-template-columns: auto minmax(0, 1fr) auto; }
.twkm-vp-screen:is(:fullscreen, :-webkit-full-screen) .twkm-vp-screen-topbar .twkm-vp-screen-fullscreen-info { position: static; width: 100%; max-width: none; min-width: 0; padding: 0; background: none; }
.twkm-vp-screen:is(:fullscreen, :-webkit-full-screen) .twkm-vp-screen-topbar .twkm-vp-screen-floating-fullscreen { position: static; }
.twkm-vp-screen[data-controls-mode]:is(:fullscreen, :-webkit-full-screen) > .twkm-vp-screen-layout { grid-row: 2; grid-column: 1; min-height: 0; padding-bottom: 0; }
.twkm-vp-screen[data-controls-mode="full"]:is(:fullscreen, :-webkit-full-screen) > .twkm-vp-screen-controls { grid-row: 3; }
.twkm-vp-screen-weekly { top: var(--twkm-screen-topbar-height, 100px); height: calc(100dvh - var(--twkm-screen-topbar-height, 100px)); }
@media (max-width: 700px) {
	.twkm-vp-screen-return { min-height: 48px; padding: 8px 12px; }
	.twkm-vp-screen:is(:fullscreen, :-webkit-full-screen) > .twkm-vp-screen-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
	.twkm-vp-screen:is(:fullscreen, :-webkit-full-screen) .twkm-vp-screen-fullscreen-info { grid-row: 2; grid-column: 1 / -1; }
	.twkm-vp-screen-topbar .twkm-vp-screen-floating-fullscreen { grid-row: 1; grid-column: 2; }
	.twkm-vp-screen-fullscreen-datetime { grid-template-columns: minmax(0, 1fr) auto; }
}