.frame[data-frame-type="live"]{ --live-join-w:440px; }
.frame[data-frame-type="live"] > .live-slide-body{ margin-left:var(--live-join-w); }
.frame[data-frame-type="live"] > .slide-header,
.frame[data-frame-type="live"] > .slide-footer{ z-index:3; }
.frame[data-frame-type="live"]:has(.live-card.show-board) > .live-slide-body{ margin-left:0; }
.live-slide-body{
  flex:1; min-height:0; display:flex;
  padding:0 var(--grid-system-slide-grid-margin-horizontal); box-sizing:border-box;
}
.live-card{
  flex:1 1 auto; min-width:0; min-height:0; text-align:left;
  display:grid; grid-template-columns:minmax(0, 1fr) 280px; grid-template-rows:minmax(102px, auto) minmax(0, 1fr);
  grid-template-areas:"question timer" "main main";
  column-gap:32px; row-gap:var(--grid-system-slide-grid-gutter);
}
.live-question{
  grid-area:question; align-self:start; min-width:0; padding:12px 0; outline:none;
  font-family:var(--font-display); font-weight:var(--font-weight-light); font-size:var(--text-7xl); line-height:48px;
  color:var(--md-neutral-foreground-1-rest);
}
.live-board-title{ grid-area:question; display:none; padding:12px 0; font-family:var(--font-display); font-weight:var(--font-weight-light); font-size:var(--text-7xl); line-height:48px; color:var(--md-neutral-foreground-1-rest); }
.live-head{ grid-area:timer; display:flex; }
.present-frame .live-card.is-revealed .live-head{ visibility:hidden; }
.live-main{ grid-area:main; position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; gap:24px; }
.live-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.live-footer{ display:flex; justify-content:space-between; gap:16px; font-family:var(--font-sans); font-size:var(--md-typography-font-size-600); line-height:32px; color:var(--md-neutral-foreground-2-rest); }
.live-footer:has(.live-voters:empty):has(.live-status:empty){ display:none; }
.live-status{ font-weight:600; }

.live-join{
  position:absolute; top:0; bottom:0; left:0; width:var(--live-join-w, 440px); z-index:2;
  box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  padding:40px;
  background:var(--md-neutral-background-2-rest);
  text-align:center;
}
.live-join-qr{
  width:320px; height:320px; display:flex; align-items:center; justify-content:center;
  border-radius:16px; background:#fff;
  color:var(--md-neutral-foreground-3-rest);
}
.live-join-qr i{ font-size:160px; }
.live-join-qr svg{ width:300px; height:300px; display:block; }
.live-join-text{ display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--font-sans); color:var(--md-neutral-foreground-2-rest); }
.live-join-hint, .live-join-code-label{ font-size:var(--md-typography-font-size-500); line-height:28px; }
.live-join-url{ font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-neutral-foreground-1-rest); margin-bottom:8px; }
.live-join-code{ font-family:var(--font-display); font-size:var(--md-typography-font-size-1000); line-height:76px; letter-spacing:.04em; color:var(--md-brand-foreground-1-rest); font-variant-numeric:tabular-nums; white-space:nowrap; }
.live-join-count{ font-family:var(--font-sans); font-size:var(--md-typography-font-size-600); line-height:32px; color:var(--md-neutral-foreground-2-rest); }
.live-join-count:empty{ display:none; }

.live-poll-rows{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:24px; }
.live-poll-row{ display:flex; align-items:center; gap:20px; min-width:0; }
.live-poll-row-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px; }
.live-choice-thumb{ flex-shrink:0; width:72px; height:72px; border-radius:10px; object-fit:cover; display:block; }
.live-poll-row-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; min-width:0; }
.live-poll-label{ min-width:0; outline:none; font-family:var(--font-sans); font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-neutral-foreground-1-rest); }
.live-poll-value{ flex-shrink:0; font-family:var(--font-display); font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-brand-foreground-1-rest); font-variant-numeric:tabular-nums; }
.live-poll-track{ height:24px; border-radius:12px; background:var(--md-neutral-background-3-rest); overflow:hidden; }
.live-poll-fill{ height:100%; width:0; border-radius:12px; background:var(--md-brand-foreground-1-rest); transition:width .6s cubic-bezier(.2, .8, .2, 1); }

.live-quiz-timer{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 24px; border-radius:var(--radius);
  background:var(--md-neutral-background-2-rest);
  font-family:var(--font-display); font-size:var(--md-typography-font-size-800); line-height:40px;
  color:var(--md-neutral-foreground-1-rest); font-variant-numeric:tabular-nums;
  transition:background-color .3s ease, color .3s ease;
}
.live-quiz-timer i{ font-size:28px; color:var(--md-neutral-foreground-2-rest); transition:color .3s ease; }
.live-quiz-timer.is-urgent{ background:var(--md-status-danger-background-1-rest); color:var(--md-status-danger-foreground-1-rest); }
.live-quiz-timer.is-urgent i{ color:var(--md-status-danger-foreground-1-rest); }
.live-card .live-quiz-timer.is-done{ display:none; }
.live-quiz-choices{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:16px; align-content:center; }
.live-quiz-choice{
  position:relative; overflow:hidden; min-width:0; min-height:0;
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; border-radius:12px;
  border:2px solid var(--md-neutral-stroke-1-rest);
  background:var(--md-neutral-background-1-rest);
  transition:opacity .4s ease, border-color .4s ease, background-color .4s ease;
}
.live-quiz-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--md-neutral-background-3-rest); transition:width .6s cubic-bezier(.2, .8, .2, 1); }
.live-quiz-line{ position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:16px; }
.live-quiz-choices.has-images .live-quiz-choice{ flex-direction:column; align-items:stretch; padding:12px; gap:12px; }
.live-quiz-choices.has-images .live-quiz-line{ flex:0 0 auto; padding:0 8px 4px; }
.live-quiz-img{ position:relative; flex:1 1 auto; min-height:0; width:100%; object-fit:cover; border-radius:8px; display:block; }
.live-quiz-img.is-empty{ background:var(--md-neutral-background-2-rest); }
.live-quiz-choices.has-images[data-count="5"], .live-quiz-choices.has-images[data-count="6"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.live-quiz-with-image{ flex:1 1 auto; min-height:0; display:flex; align-items:center; gap:32px; }
.live-quiz-question-img{ flex:0 0 auto; width:auto; height:auto; max-width:44%; max-height:100%; border-radius:12px; display:block; }
.live-quiz-with-image > .live-quiz-choices{ flex:1 1 0; min-width:0; align-self:stretch; grid-template-columns:minmax(0, 1fr); }
.live-quiz-with-image > .live-quiz-choices:not(.has-images) .live-quiz-choice{ padding-top:12px; padding-bottom:12px; }
.live-quiz-with-image > .live-quiz-choices:is([data-count="5"], [data-count="6"]),
.live-quiz-with-image > .live-quiz-choices.has-images{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.live-quiz-with-image > .live-quiz-choices.has-images:is([data-count="5"], [data-count="6"]){ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.live-quiz-with-image:has(> .live-quiz-choices:is([data-count="5"], [data-count="6"])) > .live-quiz-question-img{ max-width:36%; }
.live-quiz-letter{
  position:relative; flex-shrink:0; width:48px; height:48px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--md-brand-foreground-1-rest); color:#fff;
  font-family:var(--font-display); font-size:var(--md-typography-font-size-700);
}
.live-quiz-label{ position:relative; flex:1 1 auto; min-width:0; outline:none; font-family:var(--font-sans); font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-neutral-foreground-1-rest); }
.live-quiz-count{ position:relative; flex-shrink:0; font-family:var(--font-display); font-size:var(--md-typography-font-size-700); color:var(--md-neutral-foreground-1-rest); font-variant-numeric:tabular-nums; }
.live-quiz-count:empty{ display:none; }
.live-quiz-mark{
  position:relative; flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:var(--md-status-success-foreground-1-rest); color:#fff; font-size:22px;
}
.live-quiz-choice[data-correct="true"] .live-quiz-mark{ display:flex; }
.live-quiz-choice[data-correct="true"]{ border-color:var(--md-status-success-stroke-color); }
.present-frame .live-card:not(.is-revealed) .live-quiz-mark{ display:none; }
.present-frame .live-card:not(.is-revealed) .live-quiz-choice{ border-color:var(--md-neutral-stroke-1-rest); }
.present-frame .live-card.is-revealed .live-quiz-choice[data-correct="false"]{ opacity:.45; }
.present-frame .live-card.is-revealed .live-quiz-choice[data-correct="true"]{ background:var(--md-status-success-background-1-rest); }
.present-frame .live-card.is-revealed .live-quiz-choice[data-correct="true"] .live-quiz-fill{ background:rgba(0, 0, 0, .06); }
.live-card:not(.is-revealed) .live-quiz-count{ display:none; }

.live-lobby{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--md-neutral-background-1-rest);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s;
}
.present-frame .live-card.is-lobby .live-lobby{ opacity:1; visibility:visible; transition:none; }
.present-frame .live-card.is-lobby .live-question,
.present-frame .live-card.is-lobby .live-head,
.present-frame .live-card.is-lobby .live-body,
.present-frame .live-card.is-lobby .live-footer{ visibility:hidden; }
.live-lobby-title{ font-family:var(--font-display); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-1000); line-height:76px; color:var(--md-brand-foreground-1-rest); }
.live-lobby-hint{ font-family:var(--font-sans); font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-neutral-foreground-2-rest); }
.live-lobby-start{
  margin-top:32px; display:inline-flex; align-items:center; gap:16px;
  padding:20px 56px; border:none; border-radius:999px;
  background:var(--md-brand-foreground-1-rest); color:#fff;
  font-family:var(--font-sans); font-size:var(--md-typography-font-size-700); line-height:36px;
  cursor:pointer; transition:transform .15s ease;
}
.live-lobby-start:hover{ transform:scale(1.04); }
.live-lobby-start i{ font-size:26px; }
.live-lobby-count{
  display:none; margin-top:24px; width:132px; height:132px; border-radius:50%;
  align-items:center; justify-content:center;
  background:var(--md-brand-foreground-1-rest); color:#fff;
  font-family:var(--font-display); font-size:72px; line-height:1; font-variant-numeric:tabular-nums;
}
.live-lobby.is-countdown .live-lobby-start{ display:none; }
.live-lobby.is-countdown .live-lobby-count{ display:flex; }

.live-board{ display:none; flex:1 1 auto; min-height:0; flex-direction:column; gap:20px; }
.present-frame .live-card.show-board .live-question,
.present-frame .live-card.show-board .live-head,
.present-frame .live-card.show-board .live-body,
.present-frame .live-card.show-board .live-footer,
.present-frame .live-card.show-board .live-join{ display:none; }
.present-frame .live-card.show-board .live-board-title{ display:block; }
.present-frame .live-card.show-board .live-main{ grid-column:1 / -1; }
.present-frame .live-card.show-board .live-board{ display:flex; }
.live-board-rows{
  list-style:none; margin:0; padding:0; flex:1 1 auto; min-height:0;
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--board-rows, 5), auto);
  grid-template-columns:repeat(var(--board-cols, 1), minmax(0, 820px));
  justify-content:center; align-content:start; gap:20px 64px;
}
.live-board-row{ display:grid; grid-template-columns:56px minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:16px; row-gap:6px; align-items:center; }
.live-board-rank{
  grid-row:1 / span 2; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--md-neutral-background-2-rest); color:var(--md-neutral-foreground-1-rest);
  font-family:var(--font-display); font-size:var(--md-typography-font-size-600);
}
.live-board-row[data-rank="1"] .live-board-rank{ background:#F2B705; color:#fff; }
.live-board-row[data-rank="2"] .live-board-rank{ background:#A7B0BE; color:#fff; }
.live-board-row[data-rank="3"] .live-board-rank{ background:#C77B44; color:#fff; }
.live-board-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-sans); font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-neutral-foreground-1-rest); }
.live-board-score{ font-family:var(--font-display); font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-brand-foreground-1-rest); font-variant-numeric:tabular-nums; }
.live-board-bar{ grid-column:2 / span 2; height:12px; border-radius:6px; background:var(--md-neutral-background-3-rest); overflow:hidden; }
.live-board-fill{ display:block; height:100%; border-radius:6px; background:var(--md-brand-foreground-1-rest); transition:width .8s cubic-bezier(.2, .8, .2, 1); }
.live-board-footer{ font-family:var(--font-sans); font-size:var(--md-typography-font-size-600); line-height:32px; color:var(--md-neutral-foreground-2-rest); }
.live-board-footer:empty{ display:none; }

.live-cloud-area{ position:relative; flex:1 1 auto; min-height:160px; overflow:hidden; }
.live-cloud-sample{
  position:absolute; inset:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center; gap:8px 24px;
  font-family:var(--font-display); color:var(--md-neutral-foreground-3-rest); opacity:.55;
}
.live-cloud-sample-word[data-size="1"]{ font-size:28px; }
.live-cloud-sample-word[data-size="2"]{ font-size:40px; }
.live-cloud-sample-word[data-size="3"]{ font-size:56px; }
.live-cloud-sample-word[data-size="4"]{ font-size:76px; color:var(--md-neutral-foreground-2-rest); }
.live-cloud-words{ position:absolute; inset:0; font-family:var(--font-display); }
.live-cloud-word{
  position:absolute; left:0; top:0; white-space:nowrap; line-height:1.2;
  font-family:var(--font-display);
  transition:transform .6s cubic-bezier(.2, .8, .2, 1), font-size .6s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.live-cloud-word.is-new{ opacity:0; }
.live-cloud-word[data-tone="0"]{ color:var(--md-brand-foreground-1-rest); }
.live-cloud-word[data-tone="1"]{ color:#2F6BFF; }
.live-cloud-word[data-tone="2"]{ color:#0A2A8C; }
.live-cloud-word[data-tone="3"]{ color:#5C7CFA; }
.live-cloud-empty{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:var(--md-typography-font-size-700); color:var(--md-neutral-foreground-3-rest);
}
.present-frame .live-cloud-sample{ display:none; }
.present-frame .live-cloud-empty:not(:empty){ display:flex; }

.live-rank-rows{ list-style:none; margin:0; padding:0; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.live-rank-row{ display:grid; grid-template-columns:52px minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:16px; row-gap:6px; align-items:center; will-change:transform; }
.live-rank-row.has-image{ grid-template-columns:52px 72px minmax(0, 1fr) auto; }
.live-rank-row .live-choice-thumb{ grid-row:1 / span 2; }
.live-rank-row.has-image .live-rank-bar{ grid-column:3 / span 2; }
.live-rank-pos{
  grid-row:1 / span 2; width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--md-brand-foreground-1-rest); color:#fff;
  font-family:var(--font-display); font-size:var(--md-typography-font-size-600);
}
.live-rank-label{ min-width:0; outline:none; font-family:var(--font-sans); font-size:var(--md-typography-font-size-700); line-height:36px; color:var(--md-neutral-foreground-1-rest); }
.live-rank-avg{ font-family:var(--font-sans); font-size:var(--md-typography-font-size-500); line-height:28px; color:var(--md-neutral-foreground-2-rest); white-space:nowrap; }
.live-rank-avg:empty{ display:none; }
.live-rank-bar{ grid-column:2 / span 2; height:14px; border-radius:7px; background:var(--md-neutral-background-3-rest); overflow:hidden; }
.live-rank-fill{ display:block; height:100%; width:0; border-radius:7px; background:var(--md-brand-foreground-1-rest); transition:width .6s cubic-bezier(.2, .8, .2, 1); }

.live-quiz-correct-toggle{ display:flex; align-items:center; flex-shrink:0; }
.live-choice-image-btn{
  position:relative; flex-shrink:0; align-self:stretch; aspect-ratio:1 / 1; padding:0; border-radius:8px; overflow:hidden; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--ui-border); background:none; color:var(--ui-muted); cursor:pointer;
}
.live-choice-image-btn:hover{ border-color:var(--ui-accent); color:var(--ui-accent); }
.live-choice-image-btn.has-image{ border-style:solid; }
.live-question-row{ display:flex; gap:6px; }
.live-question-row > .prop-field{ flex:1; min-width:0; }
.live-choice-image-btn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }