:root {
  --ink:#39271f;
  --paper:#f7edda;
  --paper2:#e9d9bc;
  --wood:#69432c;
  --wood2:#926b46;
  --line:#b69a73;
  --shadow:#342017;
}
*{box-sizing:border-box}
html{min-width:0;scroll-behavior:smooth;overflow:hidden}
body{margin:0;background:#a18c70;color:var(--ink);font-family:Georgia,'Times New Roman',serif;overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.scene-scroll:focus-visible{outline:3px solid #ffefb5;outline-offset:4px}
.labnotes-stage{position:relative;width:100vw;height:100dvh;overflow:hidden}
.scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100vw,177.6833dvh);aspect-ratio:1672 / 941;overflow:visible}
.scene-art{display:block;width:100%;height:100%;user-select:none;object-fit:cover;image-rendering:pixelated}
.scene-hotspot{display:block;position:absolute;border:2px solid transparent;border-radius:2px;background:transparent;cursor:pointer;z-index:2;color:inherit;text-decoration:none;transition:background .18s,border-color .18s;outline-offset:-2px}
.whiteboard-hotspot{left:48.8%;top:12.2%;width:32.6%;height:37.1%}
.book-hotspot{left:37.6%;top:58.7%;width:22.5%;height:14.1%}
.scene-hotspot:hover,.scene-hotspot:focus-visible{background:rgba(255,237,163,.16);border:2px dashed #ffe4a7;box-shadow:inset 0 0 0 2px rgba(66,39,26,.3)}
.hotspot-hint{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-7px);background:#f8edd1;color:#4a3022;border:2px solid #60432e;box-shadow:3px 3px 0 #302017;padding:7px 9px;white-space:nowrap;font:700 clamp(9px,1.1vw,12px) 'Courier New',monospace;pointer-events:none;opacity:0;transition:opacity .18s}
.scene-hotspot:is(:hover,:focus-visible) .hotspot-hint{opacity:1}
@media(max-width:560px){.book-hotspot{min-height:44px;top:56.9%}.whiteboard-hotspot{min-height:55px}.hotspot-hint{font-size:9px;white-space:normal;width:max-content;max-width:120px;text-align:center}}
.dialog-overlay{position:fixed;inset:0;background:rgba(30,19,15,.73);display:grid;place-items:center;padding:18px;z-index:9999;overflow-y:auto}
.notes-dialog{width:min(100%,760px);max-height:min(90dvh,900px);overflow-y:auto;overscroll-behavior:contain;background:#f4e5d0;border:5px solid #5a3b2a;outline:3px solid #d6b98e;box-shadow:12px 14px 0 rgba(22,14,10,.55);position:relative}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;background:repeating-linear-gradient(90deg,#62412d 0 18px,#674631 18px 36px);color:#fbefdc;padding:14px 18px;gap:14px;border-bottom:4px solid #bf9874}
.dialog-heading .eyebrow{color:#e8c8a2}
.dialog-heading h2{margin:3px 0 0;font:700 30px/1.1 Georgia,serif;letter-spacing:.5px}
.close-dialog{display:grid;place-items:center;color:#513526;background:#f8ead5;border:3px solid #bd9976;width:39px;height:39px;font:700 20px 'Courier New',monospace;flex-shrink:0}
.close-dialog:hover{background:#ead3b9}
.dialog-view{padding:20px clamp(14px,3vw,27px) 24px}
.view-intro{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:15px;border-bottom:2px dotted #c9ab86;padding-bottom:14px}
.view-intro p{margin:0;font:italic 15px/1.5 Georgia,serif}
.pixel-button,.page-button{border:2px solid #644631;background:#866044;color:#fff7e8;padding:9px 13px;box-shadow:3px 3px 0 #4c3223;font:bold 13px/1.2 'Courier New',monospace;white-space:nowrap}
.pixel-button:hover{background:#a07654}
.page-button{background:#f9eddb;color:#60432c;border-color:#9d7c5b;box-shadow:2px 2px 0 #bca083}
.page-button:hover{background:#e9d8bd}
.page-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.notes-list{display:grid;gap:12px}
.note{display:grid;grid-template-columns:74px 1fr;gap:15px;align-items:start;border-bottom:1px dashed #c7ad92;padding:10px 0 16px;min-width:0}
.note:last-child{border-bottom:0}
.note-avatar{width:72px;height:72px;object-fit:cover;image-rendering:pixelated;border:3px solid #9d7758;background:#d2c2a9;box-shadow:3px 3px 0 #dfc3a6}
.note-content{min-width:0}
.note-meta{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:0 0 7px}
.note-name{font-weight:bold;font-size:16px;overflow-wrap:anywhere}
.note-date{font:12px 'Courier New',monospace;color:#80644d}
.note-balloon{background:#f9f4e7;border:2px solid #c7af95;padding:12px 15px;position:relative;border-radius:3px 12px 12px 12px;line-height:1.55;font-size:15px;white-space:normal;overflow-wrap:anywhere;min-height:51px}
.note:nth-child(3n+2) .note-balloon{background:#eef0df}
.note:nth-child(3n+3) .note-balloon{background:#f5e7df}
.note-link{font:12px 'Courier New',monospace;display:inline-block;margin-top:9px;max-width:100%;overflow-wrap:anywhere;color:#69432c;text-underline-offset:3px}
.preview-label{font:700 10px 'Courier New',monospace;margin-left:6px;color:#9c6a46}
.notes-navigation{display:flex;justify-content:center;gap:18px;align-items:center;margin-top:17px;padding-top:15px;border-top:2px dotted #c9ab86}
.page-counter{font:bold 12px 'Courier New',monospace;white-space:nowrap}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label,.message-label{display:grid;gap:7px;font-weight:bold;font-size:14px}
.form-grid input,.message-label textarea{width:100%;background:#fff9ee;border:2px solid #a98a68;padding:10px;color:var(--ink);border-radius:2px;min-width:0}
.form-grid input::placeholder,.message-label textarea::placeholder{color:#96806e;font-weight:normal}
.optional{font-size:11px;font-weight:normal;color:#876f5b}
.avatar-choice{margin:22px 0;border:2px dashed #b79a79;padding:14px}
.avatar-choice legend{font-size:14px;font-weight:bold;padding:0 7px}
.avatars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.avatar-option{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:3px solid #cbb496;background:#e4d4bd;padding:4px;min-width:0;position:relative}
.avatar-option:hover{border-color:#795238}
.avatar-option[aria-pressed="true"]{background:#fff5e5;border-color:#724333;box-shadow:0 0 0 2px #e8b57a}
.avatar-option img{width:100%;aspect-ratio:1;object-fit:cover;image-rendering:pixelated;display:block}
.avatar-number{font:700 10px 'Courier New',monospace;color:#694631}
.message-label textarea{resize:vertical;min-height:95px}
.form-bottom{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.remaining{font:12px 'Courier New',monospace;color:#7e6650}
.form-feedback{min-height:1.5em;font:700 13px/1.5 'Courier New',monospace;color:#684126}
.demo-warning{padding:10px;background:#ead6b6;border-left:4px solid #a57a4e;font:12px/1.6 Georgia,serif;margin:14px 0 0}
@media(max-width:820px){.note{grid-template-columns:56px 1fr;gap:11px}.note-avatar{width:55px;height:55px}}
@media(max-width:550px){.notes-dialog{max-height:92dvh}.dialog-overlay{padding:9px}.dialog-view{padding:14px 13px}.view-intro{flex-wrap:wrap}.form-grid{grid-template-columns:1fr}.avatars{grid-template-columns:repeat(3,minmax(0,1fr))}.notes-navigation{gap:7px}.notes-navigation button{font-size:11px;padding:8px}.note-balloon{font-size:13px;padding:9px}.note-name{font-size:14px}.note-date{font-size:10px}.form-bottom{align-items:flex-end;flex-direction:column-reverse}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.avatar-description{font:12px/1.5 'Courier New',monospace;color:#6e5340;margin:0 0 10px}
.message-label{display:block;margin-bottom:8px}
#message{display:block;width:100%;box-sizing:border-box;background:#fff9ee;border:2px solid #a98a68;padding:12px;color:var(--ink);resize:vertical;min-height:104px;line-height:1.55;font:14px/1.5 'Courier New',monospace}
.markdown-toolbar{display:flex;gap:5px;flex-wrap:wrap;padding:8px;background:#e4d1b5;border:2px solid #a98a68;border-bottom:0}
.markdown-toolbar button{border:1px solid #a38a69;border-radius:2px;background:#faf0de;color:#503727;min-width:35px;height:32px;font:700 15px 'Courier New',monospace}
.markdown-toolbar button:hover{background:#fff8e9}
.editor-tabs{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:9px}
.markdown-preview{padding:15px;background:#fcf6e9;border:2px dashed #aa8e6f;margin-top:10px;line-height:1.55;overflow-wrap:anywhere;min-height:47px}
.markdown-preview p,.note-balloon p{margin:0 0 6px}
.markdown-preview p:last-child,.note-balloon p:last-child{margin:0}
.markdown-preview ul,.note-balloon ul,.markdown-preview ol,.note-balloon ol{margin:5px 0;padding-left:24px}
.markdown-preview blockquote,.note-balloon blockquote{margin:7px 0;padding:5px 10px;border-left:3px solid #a27f5f;background:rgba(175,147,116,.13)}
.markdown-preview code,.note-balloon code{background:#dfd4c2;color:#543e2e;padding:1px 3px;border-radius:2px;font:0.87em 'Courier New',monospace}
.markdown-preview a,.note-balloon a{color:#6a482c;word-break:break-word;text-decoration:underline;text-underline-offset:2px}
.markdown-help{margin-top:12px;padding:9px 12px;background:#e8d6bc;border:1px solid #b89d7f;font:12px/1.6 'Courier New',monospace}
.markdown-help summary{cursor:pointer;font-weight:bold}
.markdown-help p{margin:8px 0 0}
.markdown-help code{background:#f7ebd7;padding:2px 4px;overflow-wrap:anywhere}

@media(max-aspect-ratio: 1/1){.whiteboard-hotspot{left:50%;width:12%}}

.owner-replies{margin-top:15px;display:grid;gap:10px;padding-left:11px;border-left:2px solid #d0af96}
.owner-reply{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start}
.owner-avatar{display:block;width:58px;height:58px;object-fit:contain;image-rendering:pixelated;background:#ede0ca;border:1px solid #c5a88e}
.owner-reply-content{min-width:0}
.owner-reply-meta{display:flex;align-items:center;gap:5px 8px;flex-wrap:wrap;margin-bottom:6px;font-size:13px}
.owner-badge{font:10px 'Courier New',monospace;color:#6c493c;padding:3px 6px;border:1px solid #bfa18c;background:#efdfd9}
.owner-balloon{background:#f1e5ef!important;border-color:#c8b1c5;border-radius:3px 12px 12px 12px}
.empty-notes{text-align:center;line-height:1.6;font-style:italic;padding:16px 3px;color:#765b48}
.honey-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:550px){.owner-replies{padding-left:7px}.owner-reply{grid-template-columns:42px minmax(0,1fr);gap:7px}.owner-avatar{width:42px;height:42px}}