:root{color-scheme:dark;--bg:#211a25;--surface:#2c2430;--line:#584351;--ink:#f5eaf0;--muted:#b6a3b4;--pink:#efaac5;--hand:'Segoe Print','Bradley Hand',cursive;font-family:'Segoe UI',system-ui,sans-serif;font-size:16px;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #f3b2d5;outline-offset:4px}button{border:0;background:none}svg{width:23px;height:23px;flex-shrink:0}button:disabled{opacity:.5;cursor:default}button:hover:not(:disabled){filter:brightness(1.12)}[hidden]{display:none!important}.retro-app{height:100dvh;overflow:hidden;position:relative;background-color:var(--bg);background-image:url("/assets/board-glow-d8e7ae22.png");background-size:100% 100%;background-repeat:no-repeat}
.topbar{height:103px;position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;gap:20px;background:linear-gradient(var(--bg) 55%,#211a25dc 85%,transparent)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--pink);min-width:260px}.cow{font-size:44px;position:relative;transform:rotate(-9deg);filter:drop-shadow(0 2px 8px #ef89b42c)}.cow i{font-size:20px;position:absolute;top:-9px;right:-12px;font-style:normal}.brand strong{font-family:Georgia,serif;font-size:38px;letter-spacing:-2px;line-height:1}.brand strong span{font-size:29px;font-style:italic;font-weight:400;letter-spacing:-1px}.brand small{display:block;font-size:13px;color:var(--muted);margin:8px 0 0 4px;letter-spacing:.2px}.tiny-star{color:var(--pink);padding-left:8px}.stages{display:flex;align-items:center;gap:7px;background:#302633;border:1px solid #53404e;border-radius:40px;padding:5px;box-shadow:0 4px 16px #120e161f}.stages>span{white-space:nowrap;padding:10px 16px;font-size:14px;color:var(--muted);border-radius:30px}.stages b{font-size:11px;margin-right:7px;opacity:.6;letter-spacing:.5px}.stages .active{background:var(--pink);color:#3a2132;font-weight:600}.stages .complete{color:#d7c8d1}.top-actions{display:flex;gap:12px;align-items:center}.top-actions button{display:flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid #594552;border-radius:14px;font-size:14px;white-space:nowrap}.top-actions .invite{color:var(--pink);border-color:#a06c88}.turnbar{position:absolute;top:113px;left:50%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:15px;padding:12px 13px 12px 20px;background:#2e2431f2;border:1px solid #76536b;border-radius:18px;box-shadow:0 8px 30px #130d1833;white-space:nowrap}.turn-star{font-size:35px;color:var(--pink)}.turnbar strong{display:block;font-size:15px;font-weight:600}.turnbar div>span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--pink);color:#412034;border:1px solid #f7c4d7;padding:11px 16px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 2px 0 #0002}.primary svg{width:17px;height:17px}.prototype-label{position:absolute;right:31px;top:119px;color:#a993aa;font-size:10px;letter-spacing:1.2px;z-index:3}.prototype-label span{margin:0 5px;color:#705068}.viewport{position:absolute;inset:100px 0 0;overflow:hidden;touch-action:none;cursor:grab;background-image:radial-gradient(circle,#785a6f50 1px,transparent 1px);background-size:24px 24px}.viewport.is-panning,.viewport:active{cursor:grabbing}.canvas{position:absolute;width:1750px;height:1070px;transform:none}.zone{position:absolute;width:520px;pointer-events:none}.zone h2{font-family:var(--hand);font-size:32px;font-weight:600;margin:0;display:flex;align-items:center;gap:17px;line-height:1.5;white-space:nowrap}.zone h2:after{content:'';height:2px;position:absolute;left:53px;top:49px;width:190px;background:currentColor;opacity:.65;transform:rotate(-2deg);border-radius:50%}.zone h2 svg{width:36px;height:36px}.zone h2 button{border:1px solid currentColor;border-radius:50%;width:29px;height:29px;font-family:system-ui;font-size:20px;line-height:20px;opacity:.65;margin-left:3px;pointer-events:auto}.zone p{margin:12px 0 0 53px;color:#bba6b6;font-size:14px}.good{--paper:#c2e1c0;--accent:#abd8b4}.change{--paper:#f4c6ae;--accent:#e9b49c}.talk{--paper:#d5c2ee;--accent:#c5a7e9}.kudos{--paper:#f5bcd5;--accent:#eeaac7}.zone{color:var(--accent)}
.note{position:absolute;width:230px;min-height:217px;padding:23px 22px 16px;background:var(--paper);color:#342b36;box-shadow:2px 9px 13px #09060d35,inset 0 1px 0 #ffffff80;transform:rotate(var(--rotation,0deg));border:1px solid #ffffff25;border-radius:2px 3px 12px 2px;cursor:grab;touch-action:none;display:flex;flex-direction:column;transition:box-shadow .2s,outline .2s;outline:2px solid transparent;outline-offset:5px}.note:after{content:'';position:absolute;bottom:0;right:0;width:18px;height:18px;pointer-events:none;background:linear-gradient(135deg,transparent 48%,#00000012 50%);border-radius:0 0 10px 0}.note:hover,.note:focus-within{z-index:4;box-shadow:3px 14px 20px #0a060f50;outline-color:#e6b6cf80}.note.dragging{z-index:20;cursor:grabbing;box-shadow:6px 24px 30px #0a060f60;transition:none}.note p{font-size:21px;font-weight:500;line-height:1.5;margin:0 0 19px;overflow-wrap:anywhere;white-space:pre-wrap}.note .note-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;min-height:31px}.note .signature{opacity:.8;overflow-wrap:anywhere}.note .note-action{font-size:12px;padding:7px 9px;background:#ffffff54;color:#3b2839;border-radius:6px;font-weight:600;white-space:nowrap}.note .note-action.reveal{background:#442b40;color:#ffebf6}.note .privacy{display:block;font-size:11px;letter-spacing:.2px;margin-bottom:12px;color:#665164}.note .recipient{font-family:var(--hand);font-size:17px;display:block;margin-bottom:6px}.note .candy{font-size:35px;align-self:center;margin:3px 0 11px;transform:rotate(-10deg)}.note.concealed{min-height:210px;justify-content:center;align-items:center;background:color-mix(in srgb,var(--paper) 48%,#544451);color:#e7dae4;border-color:#d5b4ca30}.note.concealed .big-lock{font-size:25px;filter:grayscale(1);opacity:.7;margin-bottom:16px}.note.concealed p{font-family:var(--hand);font-size:18px;margin:0 0 9px}.note.concealed small{font-size:12px;opacity:.65}.note.is-speaker{outline:2px dashed #efacc58a;outline-offset:7px}.note .agenda-badge{font-size:11px;color:#514155}.note.fresh{animation:stick .35s ease-out}.note .keyboard-hint{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.parking{position:absolute;width:350px;min-height:330px;border:2px solid #ac748e;border-radius:42% 47% 40% 30% / 8% 12% 9% 13%;padding:24px 23px 29px;transform:rotate(2deg)}.parking h2{font-family:var(--hand);font-size:27px;color:#e8abc6;margin:0 0 4px}.parking h2 span{font:13px 'Segoe UI',sans-serif;border:1px solid #9d6f8c;border-radius:20px;padding:3px 8px;vertical-align:middle}.parking>p{color:var(--muted);font-size:12px;line-height:1.5;margin:4px 0 20px}.agenda-empty{text-align:center;margin:26px 0 12px;color:#ac90a6;font-family:var(--hand);font-size:18px;line-height:1.7}.agenda-empty span{display:block;font-size:28px;color:#cd91b0}.agenda-item{background:#deb0ca;color:#412b3d;margin:12px 0;padding:12px 13px;box-shadow:1px 4px 6px #0003;transform:rotate(-3deg);font-size:15px;border-radius:1px}.agenda-item:nth-child(2n){transform:rotate(1deg)}.agenda-item.done{opacity:.5}.agenda-item.done .agenda-text{text-decoration:line-through}.agenda-text{display:block;overflow-wrap:anywhere}.agenda-actions{display:flex;gap:5px;justify-content:flex-end;margin-top:7px}.agenda-actions button{font-size:12px;background:#fff4;border-radius:4px;padding:4px 7px;color:#412b3d}.canvas-scribble{position:absolute;font-family:var(--hand);color:#dca4bd;font-size:23px;transform:rotate(-7deg);line-height:1.8}.canvas-scribble span{display:block;text-align:right;font-size:32px}.tools{position:absolute;left:20px;top:44%;transform:translateY(-25%);z-index:10;display:flex;flex-direction:column;padding:6px;gap:5px;border:1px solid #634c5c;border-radius:17px;background:#2f2533f2;box-shadow:0 7px 20px #0002}.tools button{padding:12px;display:flex;border-radius:11px;color:#d4bdce}.tools button.selected{background:#63445b;color:#ffc2df}.tools>span{height:1px;background:#5a4254;margin:3px 8px}.bottom-left{position:absolute;left:24px;bottom:22px;z-index:10;display:flex;flex-direction:column;gap:10px}.zoom{display:flex;align-items:center;gap:8px;border:1px solid #674e60;background:#2e2431f5;padding:5px 8px;border-radius:13px;align-self:start}.zoom button{width:34px;height:34px;font-size:25px;display:grid;place-items:center}.zoom svg{width:18px}.zoom output{font-size:13px;min-width:41px;text-align:center}.zoom i{height:19px;width:1px;background:#614657;margin:0 3px}.pan-hint{font-size:11px;color:#b099ae;padding-left:2px}.reactions{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:10;padding:7px 12px;display:flex;gap:4px;background:#322432f2;border:1px solid #815970;border-radius:50px;box-shadow:0 6px 24px #100b1544}.reactions button{font-size:27px;padding:6px 7px;transition:transform .15s}.reactions button:hover{transform:translateY(-7px) scale(1.16)}.reactions>span{position:absolute;bottom:-23px;width:100%;left:0;text-align:center;font-family:var(--hand);font-size:11px;color:#b59bad}.minimap{position:absolute;right:25px;bottom:26px;width:148px;height:94px;background:#2b2230d9;border:1px solid #594355;border-radius:13px;z-index:10}.minimap span{position:absolute;width:24px;height:16px;transform:rotate(-5deg);opacity:.8}.mini-good{background:#c2e1c0;left:23px;top:20px}.mini-change{background:#f4c6ae;left:23px;top:53px}.mini-talk{background:#d5c2ee;left:67px;top:20px}.mini-kudos{background:#f5bcd5;left:67px;top:53px}.minimap i{position:absolute;inset:12px 13px;border:1px solid #eab7d274;border-radius:3px}.reaction-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:35}.floating-emoji{position:absolute;bottom:75px;font-size:42px;animation:float-away 3s ease-out forwards}.toast{position:absolute;bottom:120px;left:50%;transform:translate(-50%,15px);z-index:50;background:#f4d8e8;color:#43283c;padding:13px 20px;border-radius:12px;box-shadow:0 8px 30px #0004;opacity:0;pointer-events:none;transition:.2s;font-size:14px;text-align:center;max-width:90vw}.toast.visible{opacity:1;transform:translate(-50%,0)}
.dialog{background:#302532;border:1px solid #88627b;border-radius:24px;color:var(--ink);padding:35px;width:440px;max-width:calc(100vw - 32px);max-height:90dvh;box-shadow:0 24px 100px #08040a88}.dialog::backdrop{background:#140e1ace;backdrop-filter:blur(7px)}.dialog h1,.dialog h2{font-family:Georgia,serif;font-size:32px;font-weight:400;letter-spacing:-.5px;margin:12px 0 16px}.dialog p{font-size:14px;line-height:1.8;color:#c6afc2}.dialog label{font-size:14px;display:block;margin:20px 0 8px;color:#eedce8}.dialog label small{font-size:11px;color:var(--muted);margin-left:5px}.dialog input,.dialog textarea,.dialog select{display:block;width:100%;border:1px solid #74556b;border-radius:9px;padding:13px 14px;background:#231b28;color:var(--ink);resize:vertical}.dialog input::placeholder,.dialog textarea::placeholder{color:#9d8698}.dialog .primary{width:100%;margin-top:20px;justify-content:space-between;padding:14px 16px;font-size:15px}.dialog small{font-size:12px;line-height:1.7;color:#baa1b4}.dialog .privacy-hint{font-size:12px;margin-bottom:0}.eyebrow{letter-spacing:2.5px;font-size:10px;color:var(--pink);font-weight:600}.join-dialog{text-align:center;padding:35px 40px 29px}.dialog-cow{font-size:60px;margin:0 0 18px;position:relative;display:inline-block;transform:rotate(-8deg)}.dialog-cow span{font-size:27px;position:absolute;right:-20px;top:0;color:#f0b5d3}.join-dialog .eyebrow{display:block}.join-dialog label{text-align:left}.join-dialog small{display:block;margin-top:20px}.close{position:absolute;right:13px;top:13px;padding:7px;color:var(--muted)}.close svg{width:20px}.people-list{list-style:none;padding:0;margin:20px 0}.people-list li{display:flex;align-items:center;gap:13px;padding:9px 4px;border-bottom:1px solid #664d613f;font-size:14px}.people-list .avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#62425b;color:#efc6e0}.people-list .person-meta{margin-left:auto;color:#c5a2ba;font-size:12px}.people-list .current{color:var(--pink)}
@keyframes float-away{0%{opacity:0;transform:translate(0,0) rotate(-15deg) scale(.6)}12%{opacity:1;transform:translate(0,-30px) rotate(0) scale(1)}75%{opacity:.9}100%{opacity:0;transform:translate(var(--drift),-65vh) rotate(24deg) scale(1.3)}}@keyframes stick{from{opacity:0;scale:1.08}to{opacity:1;scale:1}}
.note .candy{position:absolute;right:12px;top:12px;font-size:23px;margin:0}.note p{font-size:22px}.note .privacy{font-size:12px}.viewport{background-image:radial-gradient(circle,#785a6f35 .65px,transparent 1.35px)}.minimap{overflow:hidden}
@media(min-width:1700px){.topbar{padding:24px 45px}.canvas-scribble{opacity:.8}}
@media(max-width:1100px){.brand{min-width:210px}.brand strong{font-size:32px}.brand strong span{font-size:24px}.cow{font-size:35px}.topbar{padding:17px 20px;gap:10px}.stages>span{padding:9px 12px}.stages b{display:none}.top-actions .people-button{border:0;padding:10px 4px}.top-actions{gap:8px}.prototype-label{top:100px;font-size:9px}.turnbar{top:124px}}
@media(max-width:720px){.topbar{height:139px;align-items:flex-start;padding:18px}.brand{min-width:auto;gap:9px}.brand strong{font-size:30px}.brand strong span{font-size:23px}.brand small{font-size:11px;margin-top:5px}.cow{font-size:33px}.top-actions button{font-size:12px;padding:9px}.top-actions .people-button span{display:none}.top-actions svg{width:19px}.stages{position:absolute;top:88px;left:50%;transform:translateX(-50%)}.stages>span{font-size:12px;padding:8px 15px}.viewport{top:140px}.turnbar{top:151px;padding:10px;gap:9px;max-width:calc(100% - 24px);border-radius:12px}.turnbar strong{font-size:12px}.turnbar div>span{font-size:10px;max-width:155px;overflow:hidden;text-overflow:ellipsis}.turn-star{display:none}.turnbar .primary{padding:9px;font-size:11px}.prototype-label{top:auto;bottom:87px;right:14px;font-size:8px}.tools{left:9px;border-radius:12px;padding:4px;top:40%}.tools button{padding:10px}.tools svg{width:19px;height:19px}.minimap{display:none}.bottom-left{bottom:18px;left:12px}.pan-hint{display:none}.zoom{gap:0;padding:4px}.zoom button{width:27px;font-size:21px}.zoom output{font-size:11px;min-width:34px}.zoom i{margin:0}.reactions{bottom:19px;left:auto;right:12px;transform:none;padding:4px 6px;gap:0}.reactions button{font-size:21px;padding:5px}.reactions>span{display:none}.dialog{padding:28px}.dialog h1,.dialog h2{font-size:29px}.join-dialog{padding:30px 25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}.floating-emoji{animation-duration:1s!important;animation-name:fade-away!important}@keyframes fade-away{to{opacity:0}}}
/* Roomy workshop areas: the canvas extends instead of shrinking the notes. */
.canvas{width:3350px;height:2800px}.zone{width:1200px;min-height:1260px}.zone:after{content:'';position:absolute;left:28px;top:105px;width:1180px;height:1110px;border:2px dashed color-mix(in srgb,var(--accent) 30%,transparent);border-radius:24px;pointer-events:none}.zone h2{pointer-events:auto}.welcome{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at center,#432939,var(--bg) 65%);padding:25px}.welcome-card{text-align:center;max-width:500px}.welcome h1{font:42px Georgia,serif;color:#f6dce9}.welcome p{line-height:1.9;color:var(--muted);margin-bottom:30px}.welcome .eyebrow{display:block}.welcome .primary{min-width:240px;padding:16px 25px}.welcome small{display:block;color:var(--muted);font-size:13px;line-height:1.8;margin:20px}.welcome a{color:var(--pink);font-size:13px}@media(max-width:720px){.welcome h1{font-size:34px}}
/* Fixed paper size; fit only the message, keeping controls and author legible. */
.note{height:230px;min-height:230px;padding:18px 18px 14px}.note.concealed{min-height:230px}.note .privacy{flex-shrink:0;margin-bottom:8px;line-height:18px}.note-content{flex:1;min-height:0;overflow:hidden;margin-bottom:10px}.note-copy{font-size:22px;display:flow-root}.note .note-copy p{font-size:1em;line-height:1.35;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.note .note-copy .recipient{font-size:.8em;line-height:1.35;margin:0 0 .4em;overflow-wrap:anywhere;white-space:pre-wrap}.note .note-footer{flex-shrink:0;height:31px;min-height:31px;margin-top:0}.note .signature{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note .note-action,.note .agenda-badge{flex-shrink:0}.note .candy{font-size:19px;top:12px}
.auth-message{font-size:14px!important;line-height:1.6;color:var(--pink)}.primary:disabled{opacity:.5;cursor:not-allowed}.welcome-card a.primary{text-decoration:none}.top-actions form{margin:0}
.avatar{position:relative;display:inline-grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:50%;overflow:hidden;background:#62425b;color:#efc6e0;font:600 11px system-ui}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.avatar img[hidden]{display:none}.note .signature .avatar{width:23px;height:23px;vertical-align:middle;margin-right:6px;font-size:9px}
.person-name{min-width:0;overflow-wrap:anywhere}.rename-person{display:block;margin-top:4px;color:var(--pink);font-size:12px;text-decoration:underline;text-underline-offset:3px}.rename-form{border-top:1px solid #664d61;padding-bottom:20px}.rename-form[hidden]{display:none}.rename-actions{display:flex;align-items:center;justify-content:flex-end;gap:20px}.rename-actions .primary{width:auto;margin-top:0}.rename-form [role=alert]{color:var(--pink);font-size:12px}.people-list .person-meta{flex-shrink:0}
.draw-dialog{text-align:center;width:470px;overflow:hidden;padding:28px 20px}.draw-dialog::backdrop{background:#160e20e8;backdrop-filter:blur(10px)}.draw-dialog h2{font-size:29px;margin:14px 0 22px}.draw-stage{position:relative;width:320px;height:320px;margin:0 auto 20px}.draw-wheel{position:absolute;inset:0;border-radius:50%;border:7px solid #f5bcd5;box-shadow:0 0 0 6px #604054,0 0 60px #eeaac730;will-change:transform}.draw-label{position:absolute;left:50%;top:50%;width:100px;margin-left:-50px;margin-top:-10px;font:600 12px/20px system-ui;color:#412034;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.draw-pointer{position:absolute;z-index:2;top:-20px;left:50%;transform:translateX(-50%);color:#fff2f8;font-size:33px;filter:drop-shadow(0 3px 2px #41203499)}.draw-hub{position:absolute;inset:calc(50% - 33px);display:grid;place-items:center;border-radius:50%;background:#352536;border:4px solid #f5bcd5;font-size:35px;box-shadow:0 3px 12px #41203455}.draw-dialog .draw-result{min-height:32px;font-size:22px;color:var(--pink);font-weight:600;margin:16px 0 8px;overflow-wrap:anywhere}@media(max-width:390px){.draw-stage{zoom:.8}.draw-dialog h2{font-size:25px}}
.writing-timer{position:absolute;left:32px;top:122px;right:auto;bottom:auto;z-index:14;padding:0;background:none;border:0;border-radius:0;box-shadow:none;max-width:220px;color:var(--pink)}
.writing-timer[hidden],.writing-timer [hidden]{display:none!important}
.timer-heading{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-family:var(--hand);font-size:17px;color:#cbb3c5}
.timer-heading output{font-family:var(--hand);font-size:39px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;color:var(--pink);letter-spacing:1px}
.timer-setup,.timer-controls{display:flex;gap:18px;align-items:center;margin-top:4px}
.timer-stepper{display:flex;align-items:center;gap:5px;border-bottom:1px solid #bf88a36b;padding-bottom:3px}
.timer-stepper label{font-family:var(--hand);font-size:20px;color:#cbb3c5}
.timer-stepper input{appearance:textfield;-moz-appearance:textfield;width:44px;padding:0;background:transparent;border:0;border-radius:0;color:var(--pink);font-family:var(--hand);font-size:32px;text-align:center;line-height:1.1}
.timer-stepper input::-webkit-inner-spin-button,.timer-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.timer-arrows{display:flex;flex-direction:column;gap:1px}
.timer-arrows button{display:grid;place-items:center;width:25px;height:20px;padding:0;border:0;border-radius:5px;color:var(--pink);background:transparent}
.timer-arrows svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.timer-arrows button:hover,.timer-controls button:hover,.timer-start:hover{background:#eeaac714;color:#ffe6f2}
.writing-timer button:focus-visible,.timer-stepper input:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.timer-start{font-family:var(--hand);font-size:23px;color:var(--pink);padding:5px 7px;border:0;border-radius:6px;transform:rotate(-4deg)}
.timer-controls{gap:12px;margin-top:4px}.timer-controls button{border:0;border-radius:4px;background:transparent;color:var(--pink);padding:4px 0;font-size:12px}.timer-controls button:last-child{color:var(--muted)}
.timer-expired .timer-heading{color:var(--pink)}
@media(max-width:1100px){.writing-timer{left:20px;top:252px;max-width:200px}}
@media(max-width:720px){.writing-timer{left:18px;top:274px;max-width:180px}.timer-heading{font-size:15px}.timer-heading output{font-size:32px}.timer-stepper input{font-size:28px}.timer-start{font-size:21px}}
.timer-start{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap;line-height:1.2}.timer-start svg{width:23px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.timer-music{display:flex;align-items:center;gap:8px;width:220px;margin-top:12px;color:var(--pink)}
.timer-music button{display:inline-flex;align-items:center;gap:6px;flex:0 0 145px;width:145px;color:var(--pink);font-family:var(--hand);font-size:15px;line-height:1.2;white-space:nowrap;padding:5px 0;background:none;border:0;cursor:pointer;transition:color .15s}
.timer-music button:hover{color:#ffe6f2}.timer-music button:disabled{opacity:.5;cursor:default}
.timer-music button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.timer-music .music-silent{display:none}.timer-music.is-muted .music-silent{display:block}.timer-music.is-muted .music-waves{display:none}
.timer-music input[type=range]{--volume:25%;appearance:none;-webkit-appearance:none;display:block;flex:1;width:72px;min-width:48px;height:26px;margin:0;padding:0;border:0;outline:none;background:transparent;cursor:pointer;color:var(--pink)}
.timer-music input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:10px;background:linear-gradient(to right,#efb1d0 0 var(--volume),#705366 var(--volume) 100%)}
.timer-music input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:2px solid #fbdbe9;border-radius:50%;background:#edafd0;box-shadow:0 0 0 3px #edafd012;transition:box-shadow .15s}
.timer-music input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px #edafd026}
.timer-music input[type=range]::-moz-range-track{height:3px;border:0;border-radius:10px;background:#705366}
.timer-music input[type=range]::-moz-range-progress{height:3px;border-radius:10px;background:#efb1d0}
.timer-music input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid #fbdbe9;border-radius:50%;background:#edafd0;box-shadow:0 0 0 3px #edafd012}
.timer-music input[type=range]:focus-visible,.timer-music button:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:5px}
.timer-music.is-muted input[type=range]{opacity:.55}
/* A soft patch of board color keeps the writing timer legible over moving notes. */
.writing-timer{isolation:isolate}
.writing-timer::before{content:"";position:absolute;inset:-18px -85px -20px;z-index:-1;pointer-events:none;background-color:var(--bg);background-image:var(--timer-dots);background-size:var(--timer-grid-size,24px 24px);background-position:var(--timer-grid-position,0 0);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 58%,#000e 70%,#0006 86%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 58%,#000e 70%,#0006 86%,transparent 100%)}
.editable-note{cursor:text;min-height:90px}.note .note-copy p.empty-note{font-size:22px;color:#342b3680;font-weight:400}.note-content.is-editing{display:flex;flex-direction:column;gap:5px;overflow:visible}.inline-body,.inline-recipients{width:100%;min-width:0;border:0;border-radius:0;background:transparent;color:#342b36;outline:none;touch-action:auto;cursor:text}.inline-body{flex:1;min-height:0;resize:none;font-family:var(--hand);font-size:23px;line-height:1.25;padding:0;overflow:auto}.inline-recipients{font-size:13px;padding:3px 0;border-bottom:1px solid #342b3633}.inline-status{font-size:9px;opacity:.65}.note:has(.is-editing){outline-color:#342b3650}.is-creating .viewport,.is-creating .viewport:active{cursor:crosshair}.note .editable-note:focus-visible{outline:1px dashed #342b3680;outline-offset:3px}
/* Board gestures must not select labels or note text; editors remain selectable. */
.retro-app{-webkit-user-select:none;user-select:none}
.retro-app input,.retro-app textarea,.retro-app [contenteditable="true"]{-webkit-user-select:text;user-select:text}
.note .note-copy p,.note .inline-body{font-family:var(--hand);font-weight:400}
/* Scrollbars inherit each note's paper color, including after changing sections. */
.note{--note-scroll-thumb:color-mix(in srgb,var(--paper) 62%,#342b36);--note-scroll-hover:color-mix(in srgb,var(--paper) 42%,#342b36);--note-scroll-track:color-mix(in srgb,var(--paper) 90%,#342b36)}
.note textarea,.note .note-content{scrollbar-width:thin;scrollbar-color:var(--note-scroll-thumb) var(--note-scroll-track);overscroll-behavior:contain}
.note .inline-body{padding-right:5px;scrollbar-gutter:stable}
@supports selector(::-webkit-scrollbar){
  .note textarea,.note .note-content{scrollbar-width:auto;scrollbar-color:auto}
  .note textarea::-webkit-scrollbar,.note .note-content::-webkit-scrollbar{width:7px;height:7px}
  .note textarea::-webkit-scrollbar-track,.note .note-content::-webkit-scrollbar-track{background:var(--note-scroll-track);border-radius:12px;margin-block:3px}
  .note textarea::-webkit-scrollbar-thumb,.note .note-content::-webkit-scrollbar-thumb{background:var(--note-scroll-thumb);border:1px solid var(--note-scroll-track);border-radius:12px;min-height:24px}
  .note textarea::-webkit-scrollbar-thumb:hover,.note .note-content::-webkit-scrollbar-thumb:hover{background:var(--note-scroll-hover)}
  .note textarea::-webkit-scrollbar-button,.note .note-content::-webkit-scrollbar-button{display:none;width:0;height:0}
  .note textarea::-webkit-scrollbar-corner,.note .note-content::-webkit-scrollbar-corner{background:transparent}
}
.note .inline-body:focus-visible,.note .inline-recipients:focus-visible{outline:2px solid color-mix(in srgb,var(--paper) 60%,#342b36);outline-offset:2px;border-radius:3px}

.note .note-action.reveal,.note .discussion-icon{display:grid;place-items:center;width:32px;height:32px;padding:6px;background:transparent;border:0;box-shadow:none;color:#342b36}.note-action.reveal svg,.discussion-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.note .note-action.reveal:hover,.note .note-action.discussion-icon:hover{background:transparent;color:#171019}

.note .discussion-icon{color:#727272}.note .note-action.discussion-icon:hover{color:#595959}



.timer-music button span{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:1.6;padding-block:3px;margin-block:-3px}

.zone h2 button{display:grid;place-items:center;padding:0;flex-shrink:0;line-height:1}.zone h2 button svg{display:block;width:16px;height:16px;margin:0}

.viewport{isolation:isolate}.tools{--tools-top:max(clamp(220px,34vh,320px),var(--player-tools-top,0px));top:var(--tools-top);transform:none;max-height:calc(100dvh - var(--tools-top) - 100px);overflow-y:auto;scrollbar-width:thin}.tools>span{flex-shrink:0}.tools button{flex-shrink:0;align-items:center;justify-content:center}.section-nav{display:flex;flex-direction:column;gap:5px}.tools .section-nav button{color:var(--accent)}.tools .section-nav .agenda-nav{color:#e8abc6}.section-nav button:hover{background:#493246}

/* Brief physical feedback; layout positions stay untouched. */
.note{transition:box-shadow .2s,outline .2s,scale .18s}.note.dragging{scale:1.035;transition:box-shadow .18s,scale .18s}.dialog[open]{animation:dialog-arrive .2s ease-out}.dialog[open]::backdrop{animation:backdrop-arrive .2s ease-out}
@keyframes dialog-arrive{from{opacity:0;translate:0 8px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.note.dragging{scale:1}.dialog[open],.dialog[open]::backdrop{animation:none}}

.note .note-action.delete-note{display:grid;place-items:center;width:32px;height:32px;padding:6px;background:transparent;color:#727272}.delete-note svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.note .note-action.delete-note:hover{background:transparent;color:#934957}

.note,.note.concealed{width:180px;height:180px;min-height:180px;padding:13px 13px 10px}.note .privacy{font-size:10px;margin-bottom:5px;line-height:15px}.note .note-footer{height:27px;min-height:27px;font-size:11px}.note-content{margin-bottom:6px}.note .editable-note{min-height:0}.note .signature .avatar{width:20px;height:20px}.note .candy{font-size:16px;top:8px}.zone{width:1320px;min-height:1320px}.zone:after{width:calc(100% - 40px);height:var(--zone-height,1205px)}

.zone{transition:top .6s cubic-bezier(.45,0,.55,1),min-height .6s ease}.zone:after{transition:height .6s ease}

.tools button,.zoom button{transition:background-color .18s,color .18s,scale .16s}.tools button:hover:not(:disabled),.zoom button:hover:not(:disabled){scale:1.08}.tools button:active:not(:disabled),.zoom button:active:not(:disabled){scale:.94}.minimap{transition:border-color .2s,box-shadow .2s}.minimap:hover{border-color:#b986a3;box-shadow:0 0 16px #efaac51a}@media(prefers-reduced-motion:reduce){.tools button:hover,.tools button:active,.zoom button:hover,.zoom button:active{scale:1}}

.draw-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none}.draw-overlay .draw-stage{margin:0;filter:drop-shadow(0 10px 24px #160e20aa) drop-shadow(0 0 22px #efaac544);animation:dialog-arrive .24s ease-out}.draw-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.draw-overlay .draw-wheel{box-shadow:0 0 0 6px #604054,0 0 45px #eeaac735}@media(prefers-reduced-motion:reduce){.draw-overlay .draw-stage{animation:none}}

.note:hover,.note:focus-within{z-index:auto}.note.dragging{z-index:20}

.timer-music{flex-direction:column;align-items:stretch;gap:5px}.music-track{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 0}.music-transport,.music-volume-row{display:flex;align-items:center;gap:6px}.timer-music .music-transport button{position:relative;flex:0 0 31px;width:31px;height:32px;padding:5px;justify-content:center;border-radius:6px}.music-transport button:hover{background:#efaac515}.music-transport button span{padding:0;margin:0;line-height:1}.music-repeat[aria-pressed=false]{opacity:.45}.music-repeat small{position:absolute;right:0;bottom:0;font:9px system-ui;background:var(--bg);padding:0 2px}.timer-music .music-shared{width:auto;flex:0 0 auto;font:11px/1.5 system-ui;gap:5px;color:var(--muted);padding:3px 0}.music-shared svg{width:14px!important;height:14px!important}.music-queue-dialog{max-height:80dvh}.music-queue-list{list-style:none;padding:0;margin:0;max-height:50dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:#a47792 transparent}.music-queue-list button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 9px;border-radius:7px;font-size:13px}.music-queue-list button:hover{background:#efaac511}.music-queue-list button[aria-current=true]{background:#efaac522;color:var(--pink)}.music-queue-list button>span:first-child{color:var(--muted);font-size:11px}.music-queue-list button>span:nth-child(2){flex:1}.music-queue-list small{color:var(--muted)}

.timer-music .music-transport svg{width:21px;height:21px;stroke-width:1.65}.music-transport button{transition:color .18s,transform .18s}.music-transport button:nth-child(odd) svg{rotate:-3deg}.music-transport button:nth-child(even) svg{rotate:2deg}.timer-music .music-transport button:hover{background:transparent;transform:translateY(-2px)}.timer-music .music-transport button:active{transform:translateY(0) scale(.94)}.music-repeat small{font-family:var(--hand)}@media(prefers-reduced-motion:reduce){.timer-music .music-transport button:hover,.timer-music .music-transport button:active{transform:none}}

.board-tooltip{position:fixed;inset:auto;margin:0;z-index:1000;pointer-events:none;max-width:min(260px,calc(100vw - 16px));padding:9px 13px;border:1px solid #b7809e70;border-radius:11px 13px 10px 12px;background:#302332;color:#f3c8dd;box-shadow:0 5px 18px #140d1a55;font:12px/1.5 "Segoe UI",system-ui,sans-serif;overflow-wrap:anywhere;animation:tooltip-appear .14s ease-out}.board-tooltip::backdrop{background:transparent;pointer-events:none}@keyframes tooltip-appear{from{opacity:0;translate:0 3px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.board-tooltip{animation:none}}

.music-heading{display:flex;align-items:center;gap:8px}.music-heading .music-track{flex:1;min-width:0}.timer-music .music-collapse{flex:0 0 34px;width:34px;height:34px;padding:5px;justify-content:center;color:var(--muted)}.music-collapse svg{width:17px!important;height:17px!important}.music-reopen{display:grid;place-items:center;width:34px;height:34px;margin-top:12px;padding:5px;color:var(--pink);background:none;border:0;border-radius:8px}.music-reopen:hover{background:#efaac511}.music-reopen svg{width:23px;height:23px}.writing-timer.music-compact{width:34px}.writing-timer.music-compact::before{inset:-12px -22px}

.zoom button{padding:0;line-height:1;flex-shrink:0}.zoom button svg{display:block;width:18px;height:18px;margin:0}.zoom output{display:grid;place-items:center;height:34px;line-height:1;font-variant-numeric:tabular-nums}.zoom i{display:block;flex-shrink:0;align-self:center}

.dialog.is-closing{pointer-events:none;animation:none}.dialog.is-closing::backdrop{animation:backdrop-leave .18s ease-in forwards}@keyframes backdrop-leave{to{opacity:0}}.tools{transition:none}.writing-timer{transition:width .28s cubic-bezier(.4,0,.2,1)}.writing-timer::before{transition:inset .28s cubic-bezier(.4,0,.2,1)}.writing-timer:not(.music-compact){width:220px}@media(prefers-reduced-motion:reduce){.dialog.is-closing::backdrop{animation:none}}

.drawn-lock{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.note.concealed .big-lock{display:grid;place-items:center;filter:none;opacity:.75}.big-lock .drawn-lock{width:25px;height:25px;rotate:-4deg}.note .privacy .drawn-lock{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
.note.kudos.concealed{background:transparent;border-color:transparent;box-shadow:none;outline:none;padding:58px 43px 51px;filter:drop-shadow(2px 7px 5px #09060d35);color:#604452}.note.kudos.concealed:after{display:none}.fudge-wrapper{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}.fudge-paper{fill:var(--paper);stroke:#d69ab5;stroke-width:1}.fudge-ends{fill:var(--paper);stroke:#d69ab5;stroke-width:1;stroke-linejoin:round}.fudge-fold{fill:#d99cb6}.fudge-side{fill:#e4a6c1}.fudge-dots{fill:#fff4db;opacity:.8}.fudge-crease{fill:none;stroke:#b8799680;stroke-width:1;stroke-linecap:round}.note.kudos.concealed .big-lock{margin-bottom:5px}.note.kudos.concealed .big-lock svg{width:19px;height:19px}.note.kudos.concealed p{max-width:100%;font-size:16px;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note.kudos.concealed small{display:none}.note.kudos.concealed:hover,.note.kudos.concealed:focus-visible{filter:drop-shadow(2px 10px 7px #09060d60)}
.note.kudos.concealed.dragging{box-shadow:none;filter:drop-shadow(6px 18px 12px #0a060f60)}
.note.kudos:not(.concealed){padding:16px 24px 6px;background:transparent;border-color:transparent;box-shadow:none;filter:drop-shadow(2px 7px 5px #09060d35)}.note.kudos:not(.concealed):after{display:none}.fudge-open-wrapper{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.fudge-open-paper{fill:#fae4ed;stroke:#d69ab5;stroke-width:1;stroke-linejoin:round}.fudge-open-edge{fill:var(--paper)}.fudge-open-creases{fill:none;stroke:#c88ba64d;stroke-width:.8;stroke-linecap:round}.note.kudos:not(.concealed):hover,.note.kudos:not(.concealed):focus-within{box-shadow:none;filter:drop-shadow(2px 10px 7px #09060d60)}.note.kudos:not(.concealed).dragging{box-shadow:none;filter:drop-shadow(6px 18px 12px #0a060f60)}
.note.kudos.is-speaker{outline:none}
/* Keep player controls on the same icon column in both panel states. */
.timer-music{gap:6px}
.music-heading{gap:8px;min-height:34px}
.music-transport{display:grid;grid-template-columns:repeat(6,34px);justify-content:space-between;gap:0}
.timer-music .music-transport button{width:34px;height:34px;padding:0;display:grid;place-items:center}
.timer-music .music-transport button>span{display:grid;place-items:center;line-height:1}
.timer-music .music-transport svg{display:block;rotate:0deg}
.timer-music .music-volume-row>button{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;padding:0;min-height:34px}
.timer-music .music-volume-row>button>svg{justify-self:center;width:21px;height:21px}
.timer-music .music-shared{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;min-height:34px;padding:0}
.timer-music .music-shared>svg{justify-self:center}
.retro-app.is-drawing .turnbar{display:none}.retro-app.is-drawing .note.is-speaker{outline:none}.retro-app.is-drawing .note-action.reveal{visibility:hidden}
/* Roomier discussion area with a softly drawn rectangular outline. */
.parking{width:420px;min-height:420px;padding:28px 26px 30px;border-radius:20px 26px 18px 24px / 24px 18px 26px 20px;transform:none}
.parking h2{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.parking h2 span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px}
.parking .agenda-item{margin:14px 0;padding:15px 16px;transform:rotate(-.5deg);border-radius:3px 5px 4px 3px}
.parking .agenda-item:nth-child(2n){transform:rotate(.5deg)}
.parking .agenda-text{display:block;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.5}
.parking .agenda-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:12px}
.parking .agenda-empty{margin:70px 0 35px}
.discussion-notes textarea{display:block;width:100%;min-height:310px;resize:vertical;background:#fae4ed;color:#412b3d;border:1px solid #d69ab5;border-radius:5px;padding:16px;font-family:inherit;font-size:15px;line-height:1.5;cursor:text;touch-action:auto}.discussion-notes textarea:read-only{background:#fae4eddd}.discussion-notes small{display:block;min-height:18px;margin-top:8px;color:var(--muted);font-size:11px}
.agenda-actions .agenda-icon{display:grid;place-items:center;width:30px;height:30px;padding:5px}.agenda-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.parking>h2{position:absolute;left:0;top:-58px;margin:0;min-height:40px}.parking{padding-top:24px}
.discussion-notes textarea{scrollbar-width:thin;scrollbar-color:#c58aa7 #f4d9e6;overscroll-behavior:contain;scrollbar-gutter:stable}
.discussion-notes textarea::-webkit-scrollbar{width:8px;height:8px}
.discussion-notes textarea::-webkit-scrollbar-track{background:#f4d9e6;border-radius:8px}
.discussion-notes textarea::-webkit-scrollbar-thumb{background:#c58aa7;border:2px solid #f4d9e6;border-radius:8px}
.discussion-notes textarea::-webkit-scrollbar-thumb:hover{background:#ac6e8d}
.discussion-notes textarea::-webkit-scrollbar-button{display:none;width:0;height:0}
.discussion-notes textarea::-webkit-scrollbar-corner{background:#fae4ed}
@supports selector(::-webkit-scrollbar){.discussion-notes textarea{scrollbar-width:auto;scrollbar-color:auto}}
.parking{height:420px;min-height:420px;display:flex;flex-direction:column}
.parking>h2{top:-115px;min-height:48px;line-height:1.5}
.parking .agenda-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 3px;scrollbar-width:thin;scrollbar-color:#c58aa7 transparent;overscroll-behavior:contain}
.discussion-notes textarea{flex:1;min-height:0;height:100%;resize:none}
.discussion-notes .discussion-save-status{flex-shrink:0}
.discussion-notes textarea{flex:none;min-height:200px;max-height:2000px;resize:vertical}.discussion-notes textarea:read-only{resize:none}
.discussion-notes textarea{max-height:none;resize:none;overflow-y:hidden}
.agenda-item[draggable=true]{cursor:grab;transition:opacity .18s,outline-color .18s,box-shadow .18s}.agenda-item.agenda-dragging{opacity:.35;cursor:grabbing}.parking .agenda-item.agenda-drop-target{outline:2px dashed #f5bcd5;outline-offset:3px;box-shadow:0 0 18px #efaac555}
/* Grainy wax-crayon highlight. */
.diegetic-ui .stages>span.active{position:relative;isolation:isolate;background:transparent}
.diegetic-ui .stages>span.active::before{content:"";position:absolute;inset:-3px -5px;z-index:-1;pointer-events:none;transform:rotate(-1deg);background:url("/assets/crayon-highlight-ee49eb62.svg") center / 100% 100% no-repeat}

.settings-dialog .interface-setting{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:15px;cursor:pointer}.settings-dialog .diegetic-toggle{appearance:none;display:block;flex:0 0 42px;width:42px;min-width:42px;max-width:42px;height:24px;padding:0;margin:0;border:1px solid #a47792;border-radius:20px;background:#493746;cursor:pointer;position:relative;transition:background .2s}.diegetic-toggle:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#e7d5e0;border-radius:50%;transition:transform .2s}.settings-dialog .diegetic-toggle:checked{background:#bd799c}.diegetic-toggle:checked:before{transform:translateX(18px)}@media(prefers-reduced-motion:reduce){.diegetic-toggle,.diegetic-toggle:before{transition:none}}/* Optional crayon treatment for action buttons; content stays above the pigment. */
.diegetic-ui :is(.primary,.top-actions button,.tools button,.zoom button,.note-action,.agenda-actions button,.timer-music button,.music-reopen,.timer-controls button,.timer-start,.music-queue-list button){position:relative;isolation:isolate;background:transparent;box-shadow:none;border-color:transparent}
.diegetic-ui :is(.primary,.top-actions button,.tools button,.zoom button,.note-action,.agenda-actions button,.timer-music button,.music-reopen,.timer-controls button,.timer-start,.music-queue-list button)::before{content:"";position:absolute;inset:-2px -3px;z-index:-1;pointer-events:none;background:url("/assets/crayon-highlight-ee49eb62.svg") center / 100% 100% no-repeat;opacity:0;transform:rotate(-1deg);transition:opacity .18s}
.diegetic-ui :is(.primary,.top-actions button,.note-action,.agenda-actions button,.timer-start){color:#412034}
.diegetic-ui :is(.primary,.top-actions button,.note-action,.agenda-actions button,.timer-start)::before{opacity:1}
.diegetic-ui :is(.tools button.selected,.music-queue-list button[aria-current=true]){color:#412034}
.diegetic-ui :is(.tools button.selected,.music-queue-list button[aria-current=true])::before{opacity:1}
.diegetic-ui :is(.tools button,.zoom button,.timer-music button,.music-reopen,.timer-controls button,.music-queue-list button):is(:hover,:focus-visible):not(:disabled){color:#412034;background:transparent}
.diegetic-ui :is(.tools button,.zoom button,.timer-music button,.music-reopen,.timer-controls button,.music-queue-list button):is(:hover,:focus-visible):not(:disabled)::before{opacity:1}
@media(prefers-reduced-motion:reduce){.diegetic-ui button::before{transition:none}}
/* Preserve the original hierarchy within the hand-drawn theme. */
.diegetic-ui .top-actions button{color:var(--ink)}
.diegetic-ui .top-actions .invite{color:var(--pink)}
.diegetic-ui .top-actions button::before{background:currentColor;mask:url("/assets/drawn-button-outline-ba1efa8d.svg") center / 100% 100% no-repeat;opacity:.45;transform:rotate(-.5deg)}
.diegetic-ui .top-actions .invite::before{opacity:.8;transform:rotate(.5deg)}
.diegetic-ui .top-actions .people-button::before{display:none}
.diegetic-ui :is(.note-action,.agenda-actions button)::before{opacity:.4}
.diegetic-ui .note-action.reveal{color:#ffebf6}
.diegetic-ui .note-action.reveal::before{background:#442b40;mask:url("/assets/crayon-highlight-ee49eb62.svg") center / 100% 100% no-repeat;opacity:1}
.diegetic-ui :is(.tools button.selected,.music-queue-list button[aria-current=true]){color:var(--pink)}
.diegetic-ui :is(.tools button,.zoom button,.timer-music button,.music-reopen,.timer-controls button,.music-queue-list button)::before{background:currentColor;mask:url("/assets/crayon-highlight-ee49eb62.svg") center / 100% 100% no-repeat}
.diegetic-ui :is(.tools button.selected,.music-queue-list button[aria-current=true])::before{opacity:.22}
.diegetic-ui :is(.tools button,.zoom button,.timer-music button,.music-reopen,.timer-controls button,.music-queue-list button):is(:hover,:focus-visible):not(:disabled){color:var(--pink)}
.diegetic-ui :is(.tools button,.zoom button,.timer-music button,.music-reopen,.timer-controls button,.music-queue-list button):is(:hover,:focus-visible):not(:disabled)::before{opacity:.16}
/* Rounded pencil contours follow each panel's existing silhouette. */
.diegetic-ui :is(.stages,.turnbar,.tools,.zoom,.minimap,.reactions,.parking,.dialog){border-image:none;border:1px solid #ac748e}
.diegetic-ui :is(.stages,.zoom){position:relative}
.diegetic-ui :is(.stages,.turnbar,.tools,.zoom,.minimap,.reactions,.parking,.dialog)::after{content:"";position:absolute;inset:1px -1px -1px 1px;border:1px solid #c58aa750;border-radius:inherit;transform:rotate(.18deg);pointer-events:none}
.diegetic-ui .tools{overflow-y:auto}
.diegetic-ui .minimap{overflow:hidden}
.diegetic-ui .zone:after{border-image:none;border:2px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:25px 21px 28px 23px / 22px 28px 23px 26px;box-shadow:2px 1px 0 -1px color-mix(in srgb,var(--accent) 25%,transparent),inset 1px -2px 0 -1px color-mix(in srgb,var(--accent) 22%,transparent);opacity:1}
.diegetic-ui :is(.dialog input:not([type=checkbox]):not([type=range]),.dialog textarea,.dialog select,.discussion-notes textarea){border-image:none;border:1px solid #b7809e;border-radius:7px 9px 6px 8px;box-shadow:1px 1px 0 #c58aa730}
.diegetic-ui .top-actions .people-button{padding:10px 15px}.diegetic-ui .top-actions .people-button::before{display:block;background:#fff;opacity:.85;mask:url("/assets/drawn-button-outline-ba1efa8d.svg") center / 100% 100% no-repeat}
/* Same sketch as buttons, drawn at the panel's actual dimensions. */
.diegetic-ui :is(.stages,.turnbar,.tools,.zoom,.minimap,.reactions,.parking,.dialog){border-color:transparent}
.diegetic-ui :is(.stages,.turnbar,.tools,.zoom,.minimap,.reactions,.parking,.dialog)::after{inset:0;border:0;border-radius:0;transform:none;background:#ac748e;mask:var(--drawn-contour) 0 0 / 100% 100% no-repeat;pointer-events:none}
.diegetic-ui .zone:after{border-color:transparent;box-shadow:none;background:var(--accent);mask:var(--drawn-contour) 0 0 / 100% 100% no-repeat;opacity:.65}
/* Fill and contour share one path and the same border-box dimensions. */
.diegetic-ui :is(.stages,.turnbar,.tools,.zoom,.minimap,.reactions,.parking,.dialog){background:transparent var(--drawn-surface) center / 100% 100% no-repeat;background-origin:border-box;background-clip:border-box;box-shadow:none}
.diegetic-ui :is(.stages,.turnbar,.tools,.zoom,.minimap,.reactions,.parking,.dialog)::after{inset:-1px}
.diegetic-ui .stages>span.active::before{inset:0}
.diegetic-ui .stages{overflow:hidden}
/* Borders are painted into the background, outside the scrollable content flow. */
.diegetic-ui :is(.stages,.turnbar,.tools,.zoom,.minimap,.reactions,.parking,.dialog)::after{content:none}
.diegetic-ui :is(.tools,.dialog,.music-queue-list){overflow-x:hidden}
.diegetic-ui :is(.tools button,.music-queue-list button)::before{inset:0;transform:none}
.diegetic-ui .music-queue-dialog{overflow:hidden;display:flex;flex-direction:column}
.diegetic-ui .music-queue-dialog:not([open]){display:none}
.diegetic-ui .music-queue-list{min-height:0;overflow-y:auto}
.diegetic-ui .tools{scrollbar-width:thin;scrollbar-color:#a47792 transparent}
/* Fine chalk pores preserve the legibility and original colors of board headings. */
.diegetic-ui :is(.zone-label,.zone>h2>svg,.parking>h2),.diegetic-ui .zone>h2::after{mask-image:url("/assets/chalk-letter-grain-055ee65e.svg");mask-size:96px 96px;mask-repeat:repeat;mask-mode:alpha}
/* Handwritten interface, preserving the logo and discussion/notebook typography. */
.retro-app.diegetic-ui :not(.brand,.brand *,.parking,.parking *){font-family:var(--hand)}
body:has(.retro-app.diegetic-ui) .board-tooltip{font-family:var(--hand)}
.retro-app.diegetic-ui :is(.brand,.parking){font-family:"Segoe UI",system-ui,sans-serif}
/* Handwriting needs intrinsic width; never squeeze the final stage out of its frame. */
.diegetic-ui .stages{flex-shrink:0;width:max-content;gap:4px}
.diegetic-ui .stages>span{flex-shrink:0;padding-inline:12px}
@media(min-width:721px) and (max-width:980px){
  .diegetic-ui .topbar{height:150px;align-items:flex-start;padding-top:18px}
  .diegetic-ui .stages{position:absolute;top:86px;left:50%;transform:translateX(-50%)}
  .diegetic-ui .viewport{top:150px}
  .diegetic-ui .turnbar{top:161px}
  .diegetic-ui .writing-timer{top:210px}
}
@media(max-width:720px){
  .diegetic-ui .stages{gap:0;max-width:calc(100vw - 20px);padding:5px 3px}
  .diegetic-ui .stages>span{font-size:clamp(10px,2.7vw,12px);padding:8px clamp(5px,1.8vw,12px)}
}

@media(min-width:981px){
  .diegetic-ui .topbar{padding:18px 20px;gap:12px}
  .diegetic-ui .brand{min-width:0;flex-shrink:0}
  .diegetic-ui .stages{gap:2px}
  .diegetic-ui .stages>span{font-size:13px;padding:9px 9px}
  .diegetic-ui .stages b{font-size:10px;margin-right:4px}
  .diegetic-ui .top-actions{gap:6px;flex-shrink:0}
  .diegetic-ui .top-actions button,.diegetic-ui .top-actions .people-button{padding:9px 10px;font-size:12px;gap:6px}
}
@media(min-width:981px) and (max-width:1150px){
  .diegetic-ui .brand strong{font-size:30px}
  .diegetic-ui .brand strong span{font-size:23px}
  .diegetic-ui .cow{font-size:34px}
  .diegetic-ui .stages b{display:none}
  .diegetic-ui .stages>span{padding-inline:8px}
}.diegetic-ui .top-actions button{min-height:42px;justify-content:center}.diegetic-ui .top-actions form{display:flex;align-items:center}
/* Only the currently available action remains, aligned to the right. */
.retro-app .turnbar{left:auto;right:32px;transform:none;padding:0;gap:0;width:max-content;max-width:calc(100% - 40px);background:none;border:0;border-radius:0;box-shadow:none}
.retro-app .turnbar::after{content:none}
.retro-app .turnbar:has(>button[hidden]),.retro-app .turnbar:has(>button:disabled){display:none}
@media(max-width:1100px){.retro-app .turnbar{right:20px}}
@media(max-width:720px){.retro-app .turnbar{right:18px}}
