body.presentation-mode { overflow: hidden; background: #e9e7e2; }
body.presentation-mode .site-header, body.presentation-mode #toast:empty { display: none; }
#presentation { position: fixed; inset: 0; z-index: 10; font-family: "Noto Sans JP", "Yu Gothic", sans-serif; color: #263b38; }
#presentation[hidden], #presentation [hidden] { display: none !important; }
.pres-viewport { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; touch-action: none; outline: none; scrollbar-width: thin; scrollbar-color: #b9bcb4 transparent; }
.pres-student .pres-viewport { scrollbar-width: none; }
.pres-student .pres-viewport::-webkit-scrollbar { display: none; }
.pres-document { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0 110px; min-width: 100%; box-sizing: border-box; }
.pres-student .pres-document { padding-bottom: 24px; }
.pres-page { position: relative; flex: none; background: white; box-shadow: 0 3px 20px #293b3214, 0 0 0 1px #293b320a; border-radius: 2px; overflow: hidden; }
.pres-canvas, .pres-ink, .pres-covers { position: absolute; inset: 0; width: 100%; height: 100%; }
.pres-canvas { display: block; }
.pres-ink { pointer-events: none; }
.pres-covers { pointer-events: none; }
.pres-cover { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 0; background: #fff0aa; box-shadow: inset 0 0 0 1px #8a701520; pointer-events: none; touch-action: none; }
.pres-teacher[data-tool="cover"] .pres-cover, .pres-teacher[data-tool="pan"] .pres-cover { pointer-events: auto; cursor: grab; }
.pres-cover.selected { box-shadow: inset 0 0 0 2px #346958; }
.pres-cover.live { cursor: pointer !important; }
.pres-teacher .pres-cover.live { pointer-events: auto; }
.pres-cover.live:hover { background: #ffe68a; }
.pres-cover-handle { position: absolute; width: 40px; height: 40px; touch-action: none; z-index: 1; }
.pres-cover-handle::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: white; border: 2px solid #346958; box-shadow: 0 1px 5px #0002; }
.pres-cover-handle[data-corner="nw"] { left: -20px; top: -20px; cursor: nwse-resize; }
.pres-cover-handle[data-corner="ne"] { right: -20px; top: -20px; cursor: nesw-resize; }
.pres-cover-handle[data-corner="sw"] { left: -20px; bottom: -20px; cursor: nesw-resize; }
.pres-cover-handle[data-corner="se"] { right: -20px; bottom: -20px; cursor: nwse-resize; }
.pres-cover.selected { overflow: visible; }
.pres-page:has(.pres-cover.selected) { overflow: visible; }
.pres-teacher[data-tool="pen"] .pres-page, .pres-teacher[data-tool="highlighter"] .pres-page { cursor: crosshair; }
.pres-teacher[data-tool="eraser"] .pres-page { cursor: cell; }
.pres-teacher[data-tool="cover"] .pres-page { cursor: crosshair; }
.pres-waiting { position: absolute; inset: 0; display: grid; place-items: center; background: #f7f7f2; text-align: center; padding: 24px; }
.pres-waiting-symbol { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 24px; border-radius: 26px; background: #e6eee4; color: #557965; }
.pres-waiting h1 { margin: 0 0 12px; font-size: clamp(25px, 4vw, 40px); font-weight: 650; letter-spacing: .04em; }
.pres-waiting p { margin: 0; font-size: 16px; line-height: 1.9; color: #7b857c; }
.pres-attention { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: #edf1e8b8; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); text-align: center; touch-action: none; }
.pres-attention p { font-size: clamp(32px, 7vw, 76px); font-weight: 700; letter-spacing: .07em; color: #294c3d; }
.pres-attention svg { width: 64px; height: 64px; }
.pres-dock { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100% - 24px); transition: opacity .2s, transform .2s; }
.pres-dock.asleep { opacity: 0; pointer-events: none; transform: translate(-50%, 14px); }
.pres-toolbar { display: flex; align-items: center; gap: 4px; padding: 7px; background: #fbfcf8f5; border: 1px solid #dfe5dc; border-radius: 20px; box-shadow: 0 5px 30px #273e3224; overflow-x: auto; max-width: 100%; scrollbar-width: none; backdrop-filter: blur(12px); }
.pres-toolbar::-webkit-scrollbar { display: none; }
.pres-button { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 56px; height: 55px; padding: 6px 10px; border: 0; border-radius: 13px; font-family: inherit; font-size: 10px; background: transparent; color: #64746b; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.pres-button svg { width: 21px; height: 21px; stroke-width: 1.8; }
.pres-button:hover { background: #edf1e8; }
.pres-button[aria-pressed="true"] { background: #e0eddf; color: #315e47; }
.pres-button:disabled { opacity: .35; cursor: default; }
.pres-button.launch { background: #365f49; color: white; padding: 6px 17px; }
.pres-button.launch.live { background: #e2eada; color: #41653c; }
.pres-button.attention-on { background: #c57446; color: white; }
.pres-separator { width: 1px; height: 30px; background: #dbe1d7; margin: 0 4px; flex: none; }
.pres-wake { position: absolute; bottom: 0; left: 20%; width: 60%; height: 32px; border: 0; z-index: 25; background: transparent; color: #536856; cursor: pointer; touch-action: manipulation; }
.pres-wake::after { content: ""; display: block; margin: auto; width: 44px; height: 4px; background: #87958485; border-radius: 4px; }
.pres-settings, .pres-menu { position: absolute; left: 50%; bottom: 82px; transform: translateX(-50%); max-width: calc(100vw - 24px); min-width: 290px; padding: 20px; border-radius: 20px; border: 1px solid #dde4d8; background: #fbfcf8; box-shadow: 0 8px 40px #2945322e; }
.pres-settings-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; color: #3c5845; font-size: 14px; font-weight: 650; }
.pres-settings-close { border: 0; background: #edf1e8; color: #526750; font-size: 19px; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
.pres-swatches { display: flex; gap: 12px; margin-bottom: 20px; }
.pres-swatch { border: 3px solid transparent; box-shadow: 0 0 0 1px #0001; width: 40px; height: 40px; border-radius: 50%; background: var(--swatch); cursor: pointer; }
.pres-swatch[aria-pressed="true"] { border-color: white; box-shadow: 0 0 0 2px #547058; }
.pres-slider-label { display: flex; justify-content: space-between; font-size: 12px; color: #73806f; margin-bottom: 9px; }
#pres-size { width: 100%; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; accent-color: #416b4c; }
.pres-settings-hint { color: #78836f; font-size: 12px; line-height: 1.7; margin: 12px 0 0; }
.pres-menu { left: auto; right: 0; transform: none; width: 306px; max-height: calc(100svh - 110px); overflow-y: auto; box-sizing: border-box; }
.pres-menu-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 13px; }
.pres-menu-title strong { font-size: 22px; letter-spacing: .08em; color: #335641; }
.pres-menu-button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 10px; background: transparent; color: #435d46; min-height: 44px; padding: 10px; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.pres-menu-button:hover { background: #edf1e7; }
.pres-menu-button svg { width: 18px; height: 18px; flex: none; }
.pres-menu-button.danger { color: #aa5d45; }
.pres-page-controls { display: flex; align-items: center; justify-content: center; gap: 12px; border-top: 1px solid #e1e6dc; margin-top: 12px; padding-top: 14px; color: #65705e; font-size: 13px; }
.pres-page-controls button { border: 0; background: #edf1e7; border-radius: 9px; min-width: 40px; min-height: 40px; color: inherit; cursor: pointer; font-size: 18px; }
.pres-offline { position: absolute; top: 12px; right: 12px; z-index: 40; background: #fdf7e8; color: #8c7043; border: 1px solid #e7d7ae; padding: 8px 14px; border-radius: 20px; font-size: 12px; }
.pres-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #f8f8f3; color: #70816e; text-align: center; padding: 24px; font-size: 15px; }
.pres-loading button { border: 1px solid #c5d1bd; background: #e9efe2; border-radius: 10px; padding: 10px 20px; color: #425c41; cursor: pointer; font: inherit; }
.pres-cursor { position: fixed; pointer-events: none; border: 1px solid #6c7d6c; border-radius: 50%; z-index: 22; transform: translate(-50%, -50%); }
#toast { z-index: 100 !important; }
.pres-current-page { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 55; border-radius: 8px; padding: 6px 9px; background: #fbfcf8e6; box-shadow: 0 1px 8px #203b3214; font-size: 12px; pointer-events: none; font-variant-numeric: tabular-nums; }
.pres-highlight-setting { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 13px; }
.pres-highlight-setting select { border: 1px solid #ccd6c6; border-radius: 8px; padding: 8px 12px; background: white; color: #335641; font: inherit; }
.pres-notes { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pres-note { position: absolute; pointer-events: none; touch-action: none; box-shadow: 0 2px 7px #52452120; background: #fff4b8f5; }
.pres-note-paper { position: absolute; inset: 0; overflow: hidden; box-sizing: border-box; }
.pres-note-author { font-weight: 700; line-height: 1.5; color: #6d612d; white-space: nowrap; }
.pres-note-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; line-height: 1.45; color: #383323; }
.pres-note.own { background: #fff0aaf5; }
.pres-student .pres-note.editable { pointer-events: auto; cursor: pointer; }
.pres-teacher[data-tool="pan"] .pres-note { pointer-events: auto; cursor: grab; }
.pres-note.selected { outline: 2px solid #346958; z-index: 2; }
.pres-note:focus-visible { outline: 3px solid #346958; }
.pres-note-measure { position: fixed; left: -10000px; top: 0; height: auto; visibility: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.pres-note-area { position: absolute; z-index: 3; background: rgba(95, 148, 126, .10); border: 1px dashed #5f947e55; box-sizing: border-box; pointer-events: none; }
.pres-note-area.selected { border-color: #427c64; }
.pres-note-area-caption { display: none; position: absolute; left: 4px; top: -24px; background: #fbfcf8eb; border-radius: 5px; color: #41634e; font-size: 11px; line-height: 20px; padding: 0 5px; white-space: nowrap; }
.pres-teacher[data-tool="pan"] .pres-note-area-caption { display: block; pointer-events: auto; cursor: move; }
.pres-note-area-edge { position: absolute; }
.pres-note-area-edge.top, .pres-note-area-edge.bottom { left: 0; right: 0; height: 12px; }
.pres-note-area-edge.top { top: -6px; }.pres-note-area-edge.bottom { bottom: -6px; }
.pres-note-area-edge.left, .pres-note-area-edge.right { top: 0; bottom: 0; width: 12px; }
.pres-note-area-edge.left { left: -6px; }.pres-note-area-edge.right { right: -6px; }
.pres-teacher[data-tool="pan"] .pres-note-area-edge, .pres-teacher[data-tool="pan"] .pres-note-area-handle { pointer-events: auto; cursor: move; }
.pres-teacher[data-tool="noteArea"] .pres-page { cursor: crosshair; }
.pres-note-area-action { display: block; width: 100%; padding: 10px 12px; margin: 8px 0; font: inherit; font-size: 13px; border: 1px solid #cbd8c5; border-radius: 9px; background: #eef4e9; color: #3c5845; cursor: pointer; }
.pres-note-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100svh - 40px); overflow-y: auto; box-sizing: border-box; padding: 22px; border: 1px solid #d7e1d0; border-radius: 18px; background: #fbfcf8; color: #263b38; font-family: inherit; box-shadow: 0 12px 60px #203c3240; }
.pres-note-dialog::backdrop { background: #233b3245; }
.pres-note-field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; margin: 16px 0; }
.pres-note-field input, .pres-note-field select { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #cbd6c5; border-radius: 8px; background: white; font: inherit; color: #335641; }
.pres-note-fields { display: flex; gap: 14px; }.pres-note-fields > label { flex: 1; min-width: 0; }
.pres-note-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pres-note-check input { accent-color: #416b4c; width: 18px; height: 18px; }
.pres-note-students { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-height: 150px; overflow-y: auto; padding: 10px; border: 1px solid #dce4d6; border-radius: 9px; }
.pres-note-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.pres-note-actions button { border: 1px solid #cad6c3; border-radius: 9px; padding: 10px 16px; background: #edf2e8; color: #41634e; font: inherit; font-size: 13px; cursor: pointer; }
.pres-note-actions button.primary { background: #365f49; color: white; }
.pres-note-dialog button:disabled { opacity: .45; cursor: default; }
#pres-note-text { box-sizing: border-box; width: 100%; resize: vertical; min-height: 100px; padding: 12px; border: 1px solid #c7d3c0; border-radius: 10px; font: inherit; font-size: 16px; line-height: 1.7; background: #fff9dc; color: #383323; }
.pres-note-compose-info { display: flex; justify-content: space-between; font-size: 12px; color: #75816e; margin-top: 8px; }
.pres-student-note-controls { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 32; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100% - 95px); }
.pres-student-note-controls button, .pres-note-delete { font: inherit; font-size: 13px; border: 1px solid #ced9c6; background: #fbfcf8f5; color: #3d6248; border-radius: 12px; padding: 11px 14px; box-shadow: 0 2px 12px #203b3220; cursor: pointer; }
.pres-student-note-controls button:disabled { opacity: .6; cursor: default; }
#pres-note-status { font-size: 11px; border-radius: 8px; padding: 5px 8px; background: #fbfcf8e6; }
.pres-note-delete { position: absolute; bottom: 90px; right: 12px; z-index: 31; color: #9d533b; }
body.presentation-mode #toast { top: 66px; bottom: auto; max-width: calc(100vw - 32px); pointer-events: none; }
@media (max-width: 700px) {
  .pres-document { gap: 12px; padding-top: 12px; }
  .pres-dock { max-width: calc(100% - 12px); bottom: 7px; }
  .pres-teacher .pres-dock { max-width: calc(100% - 104px); left: calc(50% + 44px); }
  .pres-button { min-width: 50px; padding: 6px 8px; }
  .pres-toolbar { border-radius: 16px; }
  .pres-settings { padding: 16px; }
  .pres-menu { position: fixed; right: 0; width: min(306px, calc(100vw - 20px)); }
}