:root{--bg-start: #f6f7f2;--bg-end: #dbe6f1;--ink: #141414;--panel: rgba(255, 255, 255, .78);--panel-border: rgba(20, 20, 20, .12);--tool-active: #1c8b4b;--tool-active-bg: rgba(28, 139, 75, .15);--online: #18794e;--offline: #b22727;--connecting: #8f5600}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%}body{display:flex;flex-direction:column;color:var(--ink);font-family:Avenir Next,Segoe UI,Helvetica Neue,sans-serif;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.9),transparent 38%),radial-gradient(circle at 80% 100%,rgba(255,255,255,.75),transparent 36%),linear-gradient(135deg,var(--bg-start),var(--bg-end))}#root{display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.65rem max(.75rem,env(safe-area-inset-left)) .65rem max(.75rem,env(safe-area-inset-right));border-bottom:1px solid var(--panel-border);background:var(--panel);backdrop-filter:blur(10px);z-index:2}.brand{font-size:1.55rem;line-height:1;font-weight:750;letter-spacing:.03em;margin-right:.35rem}.room-control{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.35rem;padding:.2rem .45rem;border:1px solid rgba(20,20,20,.16);border-radius:.7rem;background:#ffffffa8}.room-id{font-size:.82rem;font-weight:640;color:#141414bf}.room-id code{font-size:.78rem;padding:.05rem .3rem;border-radius:.35rem;background:#14141414}.room-btn{border:1px solid rgba(20,20,20,.18);border-radius:.45rem;background:#ffffffe6;font-size:.78rem;font-weight:620;padding:.3rem .5rem;cursor:pointer}.copy-status{min-inline-size:5.3rem;font-size:.76rem;color:#14141494}.control{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;color:#141414c7}.nickname-control input{inline-size:min(18vw,9rem);border:1px solid rgba(20,20,20,.22);border-radius:.45rem;background:#ffffffd9;color:var(--ink);padding:.28rem .45rem;font:inherit}input[type=color]{inline-size:1.95rem;block-size:1.95rem;border:0;padding:0;background:transparent}.color-control{gap:.45rem}.tool-buttons{display:inline-flex;align-items:center;gap:.3rem}.tool-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:2.05rem;block-size:2.05rem;border:1px solid rgba(20,20,20,.2);border-radius:.45rem;background:#ffffffd9;color:var(--ink);line-height:0;padding:0;cursor:pointer}.tool-btn svg{inline-size:1.1rem;block-size:1.1rem}.tool-btn.active{border-color:var(--tool-active);color:var(--tool-active);background:var(--tool-active-bg);box-shadow:0 0 0 1px #1c8b4b40 inset}.tool-btn.partial-mode{border-style:dashed;box-shadow:0 0 0 1px #1c8b4b40 inset,0 0 0 1px #1c8b4b42}.tool-btn:active{transform:translateY(1px)}.size-control input[type=range]{inline-size:min(19vw,8.2rem)}.zoom-control{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .35rem;border-radius:.7rem;background:#ffffffa8}.zoom-control input[type=range]{inline-size:min(24vw,10rem)}.grid-control{user-select:none}.grid-control input[type=checkbox]{inline-size:1rem;block-size:1rem;margin:0;accent-color:#2f6b5a}.history-control{display:inline-flex;align-items:center;gap:.3rem}.history-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:2.05rem;block-size:2.05rem;border:1px solid rgba(20,20,20,.2);border-radius:.45rem;background:#ffffffd9;color:var(--ink);line-height:0;padding:0;cursor:pointer}.history-btn svg{inline-size:1.1rem;block-size:1.1rem}.history-btn:active{transform:translateY(1px)}.zoom-btn{inline-size:1.8rem;block-size:1.8rem;border:1px solid rgba(20,20,20,.2);border-radius:.45rem;background:#fff;font-size:1rem;font-weight:700;line-height:1;cursor:pointer}.zoom-readout{min-inline-size:3.25rem;text-align:right;font-weight:700;font-size:.84rem}.clear-btn{border:1px solid rgba(20,20,20,.2);background:#ffffffb8;color:var(--ink);border-radius:.6rem;padding:.44rem .72rem;font-weight:620;cursor:pointer}.clear-btn:active{transform:translateY(1px)}.status{margin-left:auto;font-size:.86rem;font-weight:650}.status.online{color:var(--online)}.status.offline{color:var(--offline)}.status.connecting{color:var(--connecting)}.controls-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;padding:.42rem max(.75rem,env(safe-area-inset-left)) .42rem max(.75rem,env(safe-area-inset-right));border-bottom:1px solid rgba(20,20,20,.09);background:#ffffff85;backdrop-filter:blur(8px)}.presence-bar{display:flex;align-items:center;gap:.55rem;padding:.4rem max(.75rem,env(safe-area-inset-left)) .4rem max(.75rem,env(safe-area-inset-right));border-bottom:1px solid rgba(20,20,20,.09);background:#ffffff8f;backdrop-filter:blur(8px)}.presence-count{font-size:.82rem;font-weight:650;color:#141414b3}.presence-list{display:flex;flex:1;gap:.4rem;overflow-x:auto;padding-bottom:.1rem}.user-pill{display:inline-flex;align-items:center;gap:.33rem;padding:.2rem .45rem;border-radius:999px;border:1px solid rgba(20,20,20,.12);background:#ffffffb3;white-space:nowrap;font-size:.78rem;font-weight:620}.user-pill.self{border-color:#14141440}.user-dot{inline-size:.58rem;block-size:.58rem;border-radius:999px;background:#111}.board-wrap{position:relative;flex:1;min-height:0;padding:0}canvas{width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}.local-cursor-preview{position:absolute;left:0;top:0;display:none;width:0;height:0;border:1.5px solid #111111;border-radius:999px;background:#ffffff14;box-shadow:0 0 0 1px #ffffffd9;transform:translate(-50%,-50%);pointer-events:none;z-index:1}.local-cursor-preview.eraser{border-style:dashed}.local-cursor-preview.eraser-partial{border-style:solid;box-shadow:0 0 0 1px #14141440,0 0 0 2px #ffffffd1}@media(max-width:1180px){.topbar{flex-wrap:wrap;align-items:center;row-gap:.45rem;column-gap:.55rem;padding-top:max(.65rem,env(safe-area-inset-top))}.brand{margin-right:0;order:1}.status{order:2;margin-left:auto}.room-control{order:3;flex:1 1 100%;min-width:0;width:100%;justify-content:flex-start;flex-wrap:wrap}.copy-status{min-inline-size:0}.controls-bar{row-gap:.4rem;column-gap:.5rem}}@media(max-width:1024px){.brand{font-size:1.45rem}.nickname-control input{inline-size:clamp(7.4rem,22vw,9.8rem)}.size-control input[type=range]{inline-size:min(24vw,9.2rem)}.zoom-control{order:2;flex:1 1 100%;justify-content:flex-start}.zoom-control input[type=range]{inline-size:min(52vw,15rem)}.controls-bar .control,.controls-bar .history-control,.controls-bar .clear-btn{flex:0 0 auto}}@media(hover:none)and (pointer:coarse){.control{font-size:.95rem}.room-btn,.tool-btn,.history-btn,.clear-btn,.zoom-btn{min-block-size:2.15rem}.nickname-control input{min-block-size:2.15rem;padding:.34rem .5rem}input[type=color]{inline-size:2.1rem;block-size:2.1rem}}@media(max-width:860px){.topbar{gap:.4rem}.brand{font-size:1.3rem}.room-control{row-gap:.3rem}.copy-status{inline-size:100%;font-size:.72rem}.controls-bar{gap:.4rem}.control{font-size:.84rem}.nickname-control input{inline-size:7.2rem}.zoom-control{width:100%}.zoom-control input[type=range]{inline-size:min(60vw,12rem)}}@media(max-width:768px){.brand{font-size:1.2rem}.room-id{font-size:.76rem}.room-id code{font-size:.73rem}.room-btn{font-size:.74rem;padding:.28rem .44rem}.size-control{width:100%;justify-content:space-between}.size-control input[type=range]{inline-size:min(62vw,12rem)}.zoom-control{width:100%}.tool-btn,.history-btn{inline-size:1.95rem;block-size:1.95rem}.zoom-btn{inline-size:1.7rem;block-size:1.7rem}.presence-bar{gap:.4rem}.presence-count{font-size:.78rem}}