:root{--note-yellow: #ffeb3b;--note-pink: #f8bbd9;--note-blue: #bbdefb;--note-green: #c8e6c9;--note-orange: #ffcc80;--note-purple: #e1bee7;--zone-border: #424242;--zone-bg: #fafafa;--zone-highlight: #e3f2fd;--zone-highlight-border: #1976d2;--picker-bg: #f5f5f5;--topbar-bg: #ffffff;--topbar-border: #e0e0e0}body.workshop-canvas-open{overflow:hidden}.workshop-app-container{position:fixed;inset:0;z-index:9999;background:var(--zone-bg, #fafafa)}.workshop-canvas--loading,.workshop-canvas--error{display:flex;align-items:center;justify-content:center;background:var(--zone-bg)}.workshop-canvas{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--zone-bg)}.workshop-canvas__content{display:flex;flex:1;overflow:hidden}.workshop-top-bar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);flex-shrink:0}.workshop-top-bar__left{display:flex;align-items:center;gap:12px}.workshop-top-bar__exit{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:transparent;border:none;color:#666;cursor:pointer;transition:all .15s ease}.workshop-top-bar__exit:hover{background:#f0f0f0;color:#333}.workshop-top-bar__module{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px}.workshop-top-bar__module-icon{font-size:20px}.workshop-top-bar__module-name{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workshop-top-bar__center{display:flex;flex-direction:column;align-items:center;gap:4px}.workshop-top-bar__participants{display:flex;align-items:center}.workshop-top-bar__avatar{width:32px;height:32px;border-radius:50%;border:2px solid #ccc;margin-left:-8px;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#666;overflow:hidden}.workshop-top-bar__avatar:first-child{margin-left:0}.workshop-top-bar__avatar-img{width:100%;height:100%;object-fit:cover}.workshop-top-bar__avatar-initial{text-transform:uppercase}.workshop-top-bar__avatar--overflow{background:#666;color:#fff;font-size:10px}.workshop-top-bar__participant-count{font-size:12px;color:#666}.workshop-top-bar__right{display:flex;align-items:center;gap:12px}.workshop-top-bar__cursor-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;background:#f0f0f0;border:none;font-size:13px;color:#666;cursor:pointer;transition:all .15s ease}.workshop-top-bar__cursor-toggle:hover{background:#e0e0e0}.workshop-top-bar__cursor-toggle--on{background:#e3f2fd;color:#1976d2}.workshop-top-bar__end{padding:8px 16px;border-radius:6px;background:#ef5350;border:none;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:all .15s ease}.workshop-top-bar__end:hover{background:#e53935}.sticky-note-picker{width:96px;padding:16px 12px;background:var(--picker-bg);border-right:1px solid var(--topbar-border);display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0}.sticky-note-picker__title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#666}.sticky-note-picker__colors{display:flex;flex-direction:column;gap:10px}.sticky-note-picker__color{width:56px;height:56px;border-radius:4px;border:2px solid rgba(0,0,0,.1);cursor:grab;transition:all .15s ease;box-shadow:2px 2px 4px #00000026,inset 0 -2px 4px #0000000d;touch-action:none}.sticky-note-picker__color:hover{transform:scale(1.08);box-shadow:3px 3px 6px #0003,inset 0 -2px 4px #0000000d}.sticky-note-picker__color:active{cursor:grabbing}.sticky-note-picker__color--dragging{opacity:.5;transform:scale(.95)}.sticky-note-picker__hint{font-size:10px;color:#999;text-align:center;line-height:1.3}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field-zone-grid{flex:1;overflow:auto}.field-zone{border:2px solid var(--zone-border);background:var(--zone-bg);display:flex;flex-direction:column;min-height:120px;min-width:0;transition:all .15s ease;overflow:hidden}.field-zone--drag-over{background:var(--zone-highlight);border-color:var(--zone-highlight-border)}.field-zone--snap-target{background:var(--zone-highlight);border-color:var(--zone-highlight-border);border-width:3px;box-shadow:inset 0 0 0 2px #1976d226}.field-zone__insertion-indicator{width:100%;height:4px;background:var(--zone-highlight-border);border-radius:2px;margin:6px 0;animation:insertion-pulse 1s ease-in-out infinite}@keyframes insertion-pulse{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.7;transform:scaleY(.8)}}.field-zone__label{padding:8px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#666;border-bottom:1px solid rgba(0,0,0,.08);background:#00000005;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-zone__notes{flex:1;padding:12px;display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;overflow-y:auto;overflow-x:hidden;min-width:0}.sticky-note{width:120px;max-width:100%;aspect-ratio:1;padding:8px;border-radius:2px;font-family:Playwrite NZ Basic,cursive,sans-serif;font-size:14px;line-height:1.3;cursor:grab;box-shadow:2px 2px 4px #00000026,4px 4px 8px #00000026,inset 0 -2px 4px #0000000d;transition:all .15s ease;position:relative;transform:rotate(var(--note-rotation, 0deg));touch-action:none;display:flex;flex-direction:column;flex-shrink:0}.sticky-note:hover{box-shadow:3px 3px 6px #0000002e,5px 5px 10px #00000026,inset 0 -2px 4px #0000000d}.sticky-note--dragging{cursor:grabbing;box-shadow:8px 8px 16px #00000040,12px 12px 24px #00000026;transform:rotate(var(--note-rotation, 0deg)) scale(1.05);z-index:1000}.sticky-note--picker-drag{width:140px;aspect-ratio:1;cursor:grabbing;box-shadow:8px 8px 16px #00000040,12px 12px 24px #00000026;transform:rotate(-2deg) scale(1.1);opacity:.95}.sticky-note--yellow{background:var(--note-yellow)}.sticky-note--pink{background:var(--note-pink)}.sticky-note--blue{background:var(--note-blue)}.sticky-note--green{background:var(--note-green)}.sticky-note--orange{background:var(--note-orange)}.sticky-note--purple{background:var(--note-purple)}.sticky-note__header{position:absolute;top:4px;right:4px;display:flex;align-items:center;gap:4px;cursor:grab;z-index:1}.sticky-note--dragging .sticky-note__header{cursor:grabbing}.sticky-note__author{font-size:10px;font-weight:600;font-family:system-ui,sans-serif;color:#00000080;background:#ffffff80;padding:2px 6px;border-radius:4px}.sticky-note__actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s ease}.sticky-note:hover .sticky-note__actions{opacity:1}.sticky-note__color-trigger{position:absolute;bottom:4px;left:4px;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.8);cursor:pointer;transition:transform .1s ease,opacity .15s ease;box-shadow:0 1px 2px #0003;opacity:0}.sticky-note:hover .sticky-note__color-trigger{opacity:1}.sticky-note__color-trigger:hover{transform:scale(1.1)}.sticky-note__delete{width:18px;height:18px;border-radius:50%;border:none;background:#0000001a;color:#00000080;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.sticky-note__delete:hover{background:#dc3545e6;color:#fff}.sticky-note__content{color:#000c;word-wrap:break-word;cursor:text;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;position:relative}.sticky-note__placeholder{color:#0006;font-style:italic}.sticky-note__textarea{width:100%;height:100%;border:none;background:transparent;font-family:Playwrite NZ Basic,cursive,sans-serif;line-height:1.3;color:#000c;resize:none;outline:none;text-align:center;padding:0;margin:0;overflow-y:auto;overflow-x:hidden}.sticky-note__textarea::placeholder{color:#0006;font-style:italic}.sticky-note__editable{outline:none;cursor:text;min-width:20px;word-wrap:break-word}.color-picker{position:absolute;bottom:24px;left:4px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;z-index:10}.color-picker__option{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s ease;display:flex;align-items:center;justify-content:center}.color-picker__option:hover{transform:scale(1.15)}.color-picker__option--selected{border-color:#0006}.color-picker__check{font-size:10px;color:#0009;font-weight:700}.field-zone__note-placeholder{transform:rotate(var(--note-rotation, 0deg))}.sticky-note-preview{width:120px;min-height:100px;padding:8px;border-radius:2px;font-family:Playwrite NZ Basic,cursive,sans-serif;font-size:14px;cursor:grab;box-shadow:2px 2px 4px #00000026,4px 4px 8px #00000026,inset 0 -2px 4px #0000000d;transition:all .15s ease;position:relative}.sticky-note-preview:active{cursor:grabbing;box-shadow:8px 8px 16px #00000040,12px 12px 24px #00000026;transform:scale(1.05)}.sticky-note-preview--yellow{background:var(--note-yellow)}.sticky-note-preview--pink{background:var(--note-pink)}.sticky-note-preview--blue{background:var(--note-blue)}.sticky-note-preview--green{background:var(--note-green)}.sticky-note-preview--orange{background:var(--note-orange)}.sticky-note-preview--purple{background:var(--note-purple)}.sticky-note-preview__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.sticky-note-preview__author{font-size:10px;font-weight:600;font-family:system-ui,sans-serif;color:#00000080;background:#ffffff80;padding:2px 6px;border-radius:4px}.sticky-note-preview__delete{width:18px;height:18px;border-radius:50%;border:none;background:#0000001a;color:#00000080;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.sticky-note-preview:hover .sticky-note-preview__delete{opacity:1}.sticky-note-preview__delete:hover{background:#0003;color:#000000b3}.sticky-note-preview__content{color:#000c;line-height:1.4;word-wrap:break-word}.workshop-canvas:focus-within{outline:none}.workshop-top-bar__exit:focus-visible,.workshop-top-bar__cursor-toggle:focus-visible,.workshop-top-bar__end:focus-visible,.sticky-note-picker__color:focus-visible,.sticky-note-preview__delete:focus-visible,.sticky-note__delete:focus-visible,.sticky-note__color-trigger:focus-visible,.sticky-note__content:focus-visible,.color-picker__option:focus-visible{outline:2px solid var(--zone-highlight-border);outline-offset:2px}.collaborative-textarea{width:100%;min-height:60px;position:relative}.collaborative-textarea__editor{width:100%;min-height:60px;font-family:Playwrite NZ Basic,cursive,sans-serif;font-size:16px;line-height:1.4;color:#000c;outline:none;word-wrap:break-word}.collaborative-textarea__editor p{margin:0}.collaborative-textarea__editor .is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:#0006;font-style:italic;pointer-events:none;height:0}.collaboration-cursor__caret{position:relative;margin-left:-1px;margin-right:-1px;border-left:2px solid;border-right:none;word-break:normal;pointer-events:none}.collaboration-cursor__label{position:absolute;top:-1.4em;left:-1px;font-size:10px;font-family:system-ui,sans-serif;font-style:normal;font-weight:600;line-height:1;padding:2px 4px;border-radius:3px 3px 3px 0;white-space:nowrap;color:#fff;user-select:none}.collaborative-textarea__editors{display:flex;align-items:center;gap:4px;position:absolute;bottom:-20px;left:0;font-size:10px;font-family:system-ui,sans-serif;animation:pulse-fade 2s ease-in-out infinite}.collaborative-textarea__editor-badge{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:#fff;text-transform:uppercase}.collaborative-textarea__editor-label{color:#00000080;font-style:italic}@keyframes pulse-fade{0%,to{opacity:1}50%{opacity:.6}}.simple-textarea{width:100%;min-height:60px;border:none;background:transparent;font-family:Playwrite NZ Basic,cursive,sans-serif;font-size:16px;line-height:1.4;color:#000c;resize:none;outline:none}.simple-textarea::placeholder{color:#0006;font-style:italic}.sticky-note--editing{cursor:default;z-index:10}.sticky-note--editing .sticky-note__header{cursor:default}.sticky-note__editing-indicator{position:absolute;bottom:-24px;left:0;display:flex;align-items:center;gap:4px;padding:2px 6px;background:#000000b3;border-radius:4px;color:#fff;font-size:10px;font-family:system-ui,sans-serif;white-space:nowrap;z-index:1}.sticky-note__editing-indicator__avatars{display:flex;align-items:center}.sticky-note__editing-indicator__avatar{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:#fff;margin-left:-4px;border:1px solid rgba(0,0,0,.7)}.sticky-note__editing-indicator__avatar:first-child{margin-left:0}.sticky-note__editing-indicator__text{opacity:.9}.presence-cursors{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:50}.remote-cursor{position:absolute;pointer-events:none;transform:translate(-2px,-2px);transition:left .05s linear,top .05s linear}.remote-cursor__pointer{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.remote-cursor__label{position:absolute;top:20px;left:14px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;font-family:system-ui,sans-serif;color:#fff;white-space:nowrap;box-shadow:0 1px 3px #0003}.remote-cursor__editing-badge{margin-left:4px;font-size:10px}.presence-avatars{display:flex;flex-direction:column;align-items:center;gap:4px}.presence-avatars__stack{display:flex;align-items:center}.presence-avatars__avatar{width:32px;height:32px;border-radius:50%;border:2px solid #ccc;margin-left:-8px;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#666;overflow:hidden;transition:transform .15s ease}.presence-avatars__avatar:first-child{margin-left:0}.presence-avatars__avatar:hover{transform:scale(1.1);z-index:1}.presence-avatars__avatar-img{width:100%;height:100%;object-fit:cover}.presence-avatars__avatar-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;text-transform:uppercase}.presence-avatars__avatar--overflow{background:#666;color:#fff;font-size:10px}.presence-avatars__count{font-size:12px;color:#666}.presence-toast-container{position:fixed;bottom:24px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1000;pointer-events:none}.presence-toast{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#000000d9;border-radius:24px;color:#fff;font-size:14px;font-family:system-ui,sans-serif;animation:toast-enter .3s ease-out;box-shadow:0 4px 12px #0000004d}.presence-toast--exiting{animation:toast-exit .3s ease-in forwards}.presence-toast__avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff}.presence-toast__icon{font-size:12px;opacity:.7}.presence-toast__message{font-weight:500}@keyframes toast-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.reconnecting-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}.reconnecting-overlay__backdrop{position:absolute;inset:0;background:#00000080;backdrop-filter:blur(2px)}.reconnecting-overlay__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 48px;background:#fff;border-radius:16px;box-shadow:0 4px 24px #00000026,0 8px 48px #0000001a;animation:overlay-enter .2s ease-out;max-width:320px;text-align:center}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.reconnecting-overlay__spinner{width:48px;height:48px;color:#1976d2}.reconnecting-overlay__spinner-svg{width:100%;height:100%;animation:spinner-rotate 1s linear infinite}.reconnecting-overlay__spinner-track{opacity:.2}.reconnecting-overlay__spinner-head{animation:spinner-dash 1.5s ease-in-out infinite;transform-origin:center}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.reconnecting-overlay__warning-icon{width:48px;height:48px;color:#f57c00}.reconnecting-overlay__warning-icon svg{width:100%;height:100%}.reconnecting-overlay__title{margin:0;font-size:20px;font-weight:600;color:#333}.reconnecting-overlay__description{margin:0;font-size:14px;color:#666;line-height:1.5}.reconnecting-overlay__retry-button{margin-top:8px;padding:10px 24px;border:none;border-radius:8px;background:#1976d2;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease}.reconnecting-overlay__retry-button:hover{background:#1565c0}.reconnecting-overlay__retry-button:focus-visible{outline:2px solid #1976d2;outline-offset:2px}.sticky-note-edit-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:#00000080;backdrop-filter:blur(4px);animation:modal-backdrop-enter .2s ease-out}@keyframes modal-backdrop-enter{0%{opacity:0}to{opacity:1}}.sticky-note-edit-modal__note{width:200px;height:200px;padding:16px;border-radius:4px;display:flex;flex-direction:column;box-shadow:8px 8px 24px #0000004d,16px 16px 48px #0003;transform:rotate(-1deg);animation:modal-note-enter .2s ease-out}@keyframes modal-note-enter{0%{opacity:0;transform:rotate(-1deg) scale(.8)}to{opacity:1;transform:rotate(-1deg) scale(1)}}.sticky-note-edit-modal__content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.sticky-note-edit-modal__editable{width:100%;max-height:100%;font-family:Playwrite NZ Basic,cursive,sans-serif;font-size:18px;line-height:1.4;color:#000c;outline:none;text-align:center;word-wrap:break-word;overflow-wrap:break-word}.sticky-note-edit-modal__editable:empty:before{content:attr(data-placeholder);color:#0006;font-style:italic;pointer-events:none}.sticky-note-edit-modal__hint{font-size:11px;font-family:system-ui,sans-serif;color:#00000080;text-align:center;margin-top:8px}.template-workshop-container,.bmc-workshop-container{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center}.template-workshop-bg,.bmc-workshop-bg{position:absolute;height:100%;width:auto;max-width:100%;object-fit:contain;opacity:.65;pointer-events:none;user-select:none}.template-workshop-overlay,.bmc-workshop-overlay{position:absolute;height:100%;aspect-ratio:1.414 / 1;max-width:100%}.template-workshop-zone,.bmc-workshop-zone{position:absolute;overflow:visible;border-radius:2px;transition:background-color .15s ease}.template-workshop-zone:hover,.bmc-workshop-zone:hover{background-color:#008c990f}.template-workshop-zone--highlighted,.bmc-workshop-zone--highlighted{background-color:#1976d21f;box-shadow:inset 0 0 0 2px #1976d24d}.template-workshop-zone__notes,.bmc-workshop-zone__notes{padding:20px 6px 6px;height:100%;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;overflow:visible;min-width:0}.workshop-canvas__content--scrollable::-webkit-scrollbar{width:8px;height:8px}.workshop-canvas__content--scrollable::-webkit-scrollbar-track{background:transparent}.workshop-canvas__content--scrollable::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}.workshop-canvas__content--scrollable::-webkit-scrollbar-thumb:hover{background:#00000059}.template-workshop-zone__insertion-indicator,.bmc-workshop-zone__insertion-indicator{width:100%;height:4px;background:var(--zone-highlight-border, #1976d2);border-radius:2px;flex-shrink:0;animation:insertion-pulse 1s ease-in-out infinite}.template-workshop-container .sticky-note,.bmc-workshop-container .sticky-note{width:var(--note-size, 80px);max-width:100%;aspect-ratio:1;padding:4px;font-size:11px}.template-workshop-container .sticky-note__author,.bmc-workshop-container .sticky-note__author{font-size:8px;padding:1px 4px}.template-workshop-container .sticky-note__delete,.bmc-workshop-container .sticky-note__delete{width:14px;height:14px;font-size:10px}.template-workshop-container .sticky-note__color-trigger,.bmc-workshop-container .sticky-note__color-trigger{width:12px;height:12px}.sticky-note--overflowing{border-left:3px solid rgba(25,118,210,.5)}.template-workshop-zone--has-overflow{z-index:1}.template-workshop-container--ep .template-workshop-overlay,.template-workshop-container--persona .template-workshop-overlay,.template-workshop-container--pc .template-workshop-overlay{aspect-ratio:1 / 1.414;width:auto;height:100%}.workshop-zoom-controls{display:flex;border-radius:6px;overflow:hidden;background:#0000000f;gap:1px}.workshop-zoom-btn{padding:4px 8px;font-size:11px;font-weight:500;color:#475569;background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s;white-space:nowrap}.workshop-zoom-btn:hover{background:#00000014}.workshop-zoom-btn--active{background:#008c99;color:#fff}.workshop-zoom-btn--active:hover{background:#007a86}.workshop-zoom-wrapper{flex:1;min-height:0;min-width:0;display:flex}.workshop-canvas__content--scrollable{overflow:auto}
