@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap";:root{color:#29283a;font-synthesis:none;background:#faf9f6;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;background:#fff;border:1px solid #e7e5eb;border-radius:12px;padding:12px 18px}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}button:hover,a:hover{filter:brightness(.96)}:focus-visible{outline-offset:3px;outline:3px solid #aa96ef}h1,h2,.brand{font-family:Manrope,sans-serif}h1{letter-spacing:-2px;font-size:clamp(32px,5vw,64px);line-height:1.15}p{color:#777382;line-height:1.7}em{color:#7762bc;font-style:normal}.primary{color:#fff;background:#7560bd;border:0;border-radius:14px;padding:17px 25px;font-weight:700;display:inline-block}.brand{color:#6b56ae;font-size:22px;font-weight:800}.eyebrow{color:#9b89bc;letter-spacing:3px;font-size:11px;font-weight:700;display:block}.muted{color:#9992a5;font-size:13px}.landing{text-align:center;min-height:100dvh;padding:36px 20px}.landing .brand{text-align:left;max-width:1150px;margin:auto}.hero-art{margin:65px 0 35px;font-size:65px}.landing h1{margin:22px 0}.landing .primary{margin:22px}.dashboard{max-width:980px;margin:auto;padding:30px 24px}.dashboard header{justify-content:space-between;align-items:center;margin-bottom:70px;display:flex}.dashboard h1{font-size:42px}.create-room{background:#efebf7;border-radius:22px;flex-wrap:wrap;align-items:center;gap:16px;margin:35px 0;padding:28px;display:flex}input:not([type=range]):not([type=color]){background:#fff;border:1px solid #ded9e8;border-radius:12px;min-width:0;padding:15px;font-size:16px}label{font-size:14px;font-weight:600}.room-list{gap:12px;display:grid}.room-list a{background:#fff;border:1px solid #e6e2ec;border-radius:16px;justify-content:space-between;padding:24px;display:flex}.join-screen,.login-layout{justify-content:center;align-items:center;gap:70px;min-height:100dvh;padding:24px;display:flex}.join-card,.login-card{background:#fff;border:1px solid #e7e2ed;border-radius:28px;width:100%;max-width:460px;padding:40px;box-shadow:0 16px 70px #49405e0a}.join-art{margin-top:35px;font-size:64px}.join-card h1{letter-spacing:-1px;font-size:34px}.join-card input,.join-card button,.login-card input,.login-card button{width:100%;margin:10px 0}.login-intro{max-width:480px}.login-intro h1{font-size:48px}.login-flower{color:#a496cd;font-size:100px}.form-note{display:none}.text-link{font-size:13px}.error{color:#b44864}.board{background:#faf9f7;position:fixed;inset:0;overflow:hidden}.board-header{background:#fff;border-bottom:1px solid #ece8ee;justify-content:space-between;align-items:center;gap:15px;height:72px;padding:0 24px;display:flex}.board-header>div{align-items:center;gap:18px;display:flex}.board-header strong{font-size:15px}.sync-status{color:#7d9285;font-size:11px}.canvas-area{background-image:radial-gradient(#d8d3df .8px,#0000 .8px);background-size:24px 24px;position:absolute;inset:72px 0 0}canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}canvas.panning{cursor:grab}.board-hint{color:#a29ba9;pointer-events:none;white-space:nowrap;font-size:12px;position:absolute;top:24px;left:50%;transform:translate(-50%)}.toolbar{background:#fff;border:1px solid #e7e2ec;border-radius:22px;align-items:center;gap:16px;max-width:calc(100% - 32px);padding:12px 16px;display:flex;position:absolute;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 8px 35px #38294e12}.tool-group{align-items:center;gap:5px;display:flex}.tool-group+.tool-group{border-left:1px solid #eee8f2;padding-left:16px}.tool-group button{border:0;flex-direction:column;align-items:center;gap:3px;min-width:48px;min-height:48px;padding:7px 10px;display:flex}.tool-group button span{font-size:24px;line-height:25px}.tool-group small{font-size:10px}.selected{color:#7258b5;background:#eee8fa!important}.palette{flex-wrap:wrap;min-width:180px;max-width:220px}.palette button.swatch{border:1px solid #00000010;border-radius:50%;width:28px;min-width:28px;height:28px;min-height:28px;padding:0}.swatch.chosen{outline-offset:2px;outline:2px solid #8f7cb8}.palette input{background:0 0;border:0;width:28px;height:28px;padding:0}.size-control{color:#91889b;gap:8px;width:90px;font-size:11px;display:grid}.size-control input{accent-color:#7960bc;width:90px}.emoji-picker{background:#fff;border:1px solid #eee;border-radius:16px;flex-wrap:wrap;width:290px;padding:12px;display:flex;position:absolute;bottom:110%;left:0;box-shadow:0 4px 20px #0001}.emoji-picker button{border:0;padding:10px;font-size:26px}.zoom-controls{border-radius:12px;display:flex;position:absolute;bottom:30px;right:22px;box-shadow:0 3px 20px #0001}.zoom-controls button{border-color:#eee;border-radius:0;padding:12px}.zoom-controls button:first-child{border-radius:12px 0 0 12px}.zoom-controls button:last-child{border-radius:0 12px 12px 0}.board-error{color:#a43b53;background:#fff0f3;border-radius:12px;padding:10px 20px;font-size:13px;position:absolute;top:80px;left:16px;right:16px}.skip-link{position:absolute;top:-100px}.skip-link:focus{top:10px}.small-spark{color:#a593cb;font-size:32px}@media (width<=1100px){.zoom-controls{bottom:155px}.toolbar{bottom:18px}}@media (width<=650px){.board-header{height:64px;padding:0 12px}.board-header>div{gap:9px}.board-header strong{text-overflow:ellipsis;white-space:nowrap;max-width:130px;overflow:hidden}.board-header button{padding:10px;font-size:11px}.sync-status{z-index:1;position:absolute;top:72px;left:15px}.canvas-area{top:64px}.board-hint{display:none}.toolbar{border-radius:18px;flex-wrap:wrap;justify-content:center;gap:8px;width:max-content;max-width:calc(100% - 20px);padding:10px}.palette{gap:8px;min-width:0;max-width:280px;border:0!important;padding-left:0!important}.palette button.swatch{width:25px;min-width:25px;height:25px;min-height:25px}.size-control,.size-control input{width:60px}.tool-group button{padding:6px 9px}.zoom-controls{bottom:180px;right:12px}.login-intro{display:none}.join-card,.login-card{padding:28px}.create-room{flex-direction:column;align-items:stretch}.dashboard h1{font-size:34px}}.login-card .action{color:#fff;background:#7560bd;padding:16px;font-weight:700}.login-card form label{margin-top:12px;display:block}canvas.erasing{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-35 16 16)'%3E%3Crect x='8' y='4' width='16' height='24' rx='4' fill='%23f8a5be' stroke='%23635478' stroke-width='2'/%3E%3Cpath d='M8 18h16v6a4 4 0 0 1-4 4h-8a4 4 0 0 1-4-4z' fill='%23fff6fa' stroke='%23635478' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 16 16,crosshair}.eraser-preview{pointer-events:none;background:#ffffff30;border:1.5px solid #786585;border-radius:50%;place-items:center;display:grid;position:absolute;transform:translate(-50%,-50%)}.eraser-preview span{color:#97577a;text-shadow:0 1px #fff;font-size:18px}.shape-picker{gap:4px;width:310px}.shape-picker button{justify-items:center;gap:4px;min-width:66px;padding:10px 5px;display:grid}.shape-picker small{font-size:10px}.shape-picker p{color:#8b7b9d;margin:5px 8px;font-size:12px}.toolbar>.tool-group:first-child{flex-shrink:0}@media (width<=1100px){.toolbar{flex-wrap:wrap;justify-content:center;width:max-content}}@media (width<=650px){.toolbar>.tool-group:first-child{justify-content:center;gap:1px;width:100%}.toolbar>.tool-group:first-child button{min-width:40px;padding:6px}.toolbar>.tool-group:first-child small{font-size:9px}}