.tutorial-page { height: 100vh; min-height: 0; overflow: hidden; }
.tutorial-page .ember-glow { background: radial-gradient(circle,rgba(181,37,21,.16) 0,rgba(181,37,21,.08) 38%,transparent 72%); filter: none; }
.tutorial-topbar .brand-mark { transform: rotate(45deg); }
.tutorial-topbar .mobile-panel-tabs { display: none; }
.tutorial-page .left-rail { max-height: calc(100vh - 136px); }
.tutorial-chat-card { min-height: min(650px,calc(100vh - 136px)); }
.tutorial-chat-card .chat-heading { grid-template-columns: minmax(0,1fr) auto; }
.tutorial-chat-card .chat-heading-actions { align-items: center; }
#tutorial-progress { color: #7c6957; font: 600 .68rem/1.3 var(--serif); white-space: nowrap; }
.tutorial-message .message-bubble { max-width: min(720px,100%); }
.tutorial-message.kp-message .message-head strong { color: #8d3028; }
.tutorial-message.kp-message .message-bubble { border-left: 3px solid #9d392c; background: rgba(177,75,50,.08); }
.tutorial-message.roll-message .message-head strong { color: #7b5a2e; }
.tutorial-message.complete-message .message-bubble { border-color: rgba(126,92,49,.42); background: rgba(203,166,92,.13); }
.tutorial-inline-info { display: inline-grid; width: 1.05rem; height: 1.05rem; margin-left: .18rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: #8d3028; font: 700 .66rem/1 var(--sans); vertical-align: .08rem; }
.tutorial-red-bold { color: #a52820; font-weight: 700; }
.tutorial-message.sticker-message .message-bubble { max-width: min(96px,28vw); }
.tutorial-message.sticker-message .message-sticker { display: block; width: 100%; height: auto; }
.tutorial-page .character-frame-wrap { margin-bottom: 0; }
.tutorial-page .character-frame-wrap iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; }
.tutorial-page .tools-panel { display: flex; box-sizing: border-box; height: calc(100vh - 136px); min-height: min(650px,calc(100vh - 136px)); flex-direction: column; overflow: hidden; }
.tutorial-page .tools-panel > * { flex: 0 0 auto; }
.tutorial-page .tools-panel .character-frame-wrap { flex: 1 1 auto; min-height: 0; }
.tutorial-page .dice-history { max-height: 180px; overflow-y: auto; }

@media (max-width:1220px) {
  .tutorial-page .tabletop-topbar { grid-template-columns: minmax(0,1fr) 42px; grid-template-rows: auto auto; }
  .tutorial-page .tabletop-topbar .topbar-actions { display: contents; }
  .tutorial-page .tabletop-topbar .adventure-settings-button { position: static; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  .tutorial-page .tabletop-topbar .mobile-panel-tabs { grid-column: 1 / -1; grid-row: 2; display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tutorial-page .tabletop-topbar .mobile-panel-tabs button { display: inline-flex; width: 100%; align-items: center; justify-content: center; }
  .tutorial-layout { width: min(calc(100% - 24px),900px); height: 100%; min-height: 0; padding-bottom: max(5px,env(safe-area-inset-bottom)); overflow: hidden; }
  .tutorial-page .tutorial-chat-card { height: 100%; min-height: 0; max-height: 100%; }
  .tutorial-page .left-rail .dice-panel,.tutorial-page .tools-panel { top: calc(var(--tabletop-header-height,106px) + var(--tabletop-viewport-top,0px)); height: calc(var(--tabletop-viewport-height,100dvh) - var(--tabletop-header-height,106px)); min-height: 0; }
}

@media (max-width:900px) {
  .tutorial-layout { width: min(calc(100% - 18px),700px); }
  .tutorial-chat-card .chat-heading { align-items: center; }
  #tutorial-progress { display: none; }
}

@media (max-width:540px) {
  .tutorial-chat-card .chat-heading-actions button { display: block; }
  .tutorial-chat-card .chat-heading { padding: 13px 14px; }
  .tutorial-message .message-bubble { font-size: .82rem; line-height: 1.72; }
}