:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f7f8fb;font-family:Inter,Segoe UI,Tahoma,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}.app-shell{--note-font-size:18px;--note-height:188px;--note-width:238px;background-color:#f7f8fb;background-image:linear-gradient(90deg,#1f29370e 1px,#0000 1px),linear-gradient(0deg,#1f29370e 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-height:100vh;overflow:hidden}.app-shell.compact-cards{--note-font-size:15px;--note-height:150px;--note-width:196px}.app-shell.focus-mode{background-size:22px 22px}.topbar{z-index:30;background:#ffffffe6;border-bottom:1px solid #dfe5ee;justify-content:space-between;align-items:center;gap:16px;min-height:76px;padding:12px 18px;display:flex;position:sticky;top:0}.focus-mode .topbar{border:1px solid #dfe5ee;border-radius:8px;min-height:54px;padding:6px;position:fixed;top:10px;left:10px;right:auto;box-shadow:0 14px 32px #1f29371f}.focus-mode .brand{display:none}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{color:#ffe071;background:#1f2937;border-radius:8px;flex:none;place-items:center;width:42px;height:42px;display:grid}.brand h1{margin:0;font-size:20px;line-height:1.1}.brand p,.panel-head p{color:#687383;margin:4px 0 0;font-size:13px}.toolbar{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.focus-mode .toolbar{flex-wrap:nowrap;max-width:calc(100vw - 24px);padding:2px;overflow-x:auto}.tool-button,.icon-button,.sync-pill,.note-icon,.note-drag{color:#202a3a;border:1px solid #d7dee8;border-radius:8px;justify-content:center;align-items:center;min-height:40px;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}.tool-button{background:#fff;gap:8px;padding:0 12px}.tool-button.primary{color:#fff;background:#1f2937;border-color:#1f2937}.tool-button:disabled{cursor:not-allowed;opacity:.7}.icon-button:disabled{cursor:not-allowed;opacity:.45}.icon-button,.note-icon,.note-drag{aspect-ratio:1;background:#fff;width:40px;padding:0}.sync-pill{color:#123d3a;background:#edf7f6;border-color:#bfdfdc;gap:7px;padding:0 11px}.tool-button:hover,.icon-button:hover,.sync-pill:hover,.note-icon:hover,.note-drag:hover{background:#f0f4f8;transform:translateY(-1px)}.workspace{height:calc(100vh - 76px);min-height:560px;display:flex;position:relative}.focus-mode .workspace{height:100vh;min-height:100vh}.board{background:#e9eef5;flex:1;min-width:0;position:relative;overflow:auto}.board-canvas{background-color:#fff;background-image:linear-gradient(90deg,#1f29370e 1px,#0000 1px),linear-gradient(0deg,#1f29370e 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-width:100%;min-height:100%;position:relative;box-shadow:inset 0 0 0 1px #dfe5ee}.board-grid{opacity:.9;pointer-events:none;background:radial-gradient(circle at 20% 25%,#ffe07129,#0000 24%),radial-gradient(circle at 74% 72%,#7dd3fc29,#0000 24%);position:absolute;inset:0}.empty-state{color:#6b7280;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.note-card{background:var(--note-bg);color:var(--note-ink);height:var(--note-height);touch-action:none;width:var(--note-width);z-index:5;border:1px solid #17203324;border-radius:8px;flex-direction:column;padding:10px;display:flex;position:absolute;top:0;left:0;overflow:hidden;transform:rotate(-.4deg);box-shadow:0 14px 30px #1f293721}.note-card.drawing-note{background:linear-gradient(180deg, #ffffff94, #ffffff3d), var(--note-bg)}.note-card:nth-of-type(2n){transform:rotate(.35deg)}.note-card.negative{border-color:#be123cb8;box-shadow:0 14px 30px #1f293721,0 0 0 3px #f43f5e29}.note-card.dismissing{pointer-events:none;z-index:20;animation:.96s cubic-bezier(.24,.78,.33,1) forwards flyAway}.note-head{align-items:center;gap:6px;display:flex}.note-drag{color:inherit;background:#ffffff73;width:30px;height:30px;min-height:30px}.swatches{gap:4px;margin-inline-end:auto;display:flex}.swatch{border:1px solid #17203340;border-radius:999px;width:18px;height:18px;padding:0}.swatch.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #1f293759}.note-icon{color:inherit;background:#ffffff80;width:30px;height:30px;min-height:30px}.note-icon.active{color:#fff;background:#be123c;border-color:#be123c}.note-card textarea{color:inherit;font-size:var(--note-font-size);resize:none;background:0 0;border:0;outline:0;flex:1;width:100%;margin-top:8px;padding:4px;line-height:1.55}.compact-cards .swatches{display:none}.compact-cards .note-card{padding:8px}.compact-cards .note-drag,.compact-cards .note-icon{width:28px;height:28px;min-height:28px}.compact-cards .preview-dismiss span{display:none}.compact-cards .preview-dismiss{min-width:30px;padding:0 7px}.note-card textarea::placeholder{color:color-mix(in srgb, var(--note-ink), transparent 48%)}.drawing-area{flex-direction:column;flex:1;gap:8px;min-height:0;margin-top:8px;display:flex}.drawing-palette{align-items:center;gap:5px;padding:1px;display:flex;overflow-x:auto}.drawing-swatch{border:1px solid #17203347;border-radius:999px;flex:none;width:20px;height:20px;padding:0}.drawing-swatch.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #1f293752}.drawing-clear{color:inherit;background:#ffffff94;border:1px solid #17203329;border-radius:999px;flex:none;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:inline-flex}.drawing-paper{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;background-color:#fff;background-image:linear-gradient(90deg,#1f29370d 1px,#0000 1px),linear-gradient(0deg,#1f29370d 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px solid #17203326;border-radius:6px;flex:1;width:100%;min-height:78px}.drawing-paper polyline{pointer-events:none}.note-foot{justify-content:space-between;align-items:center;gap:8px;min-height:24px;display:flex}.resize-handle{color:inherit;cursor:nwse-resize;touch-action:none;background:#ffffffbd;border:1px solid #1720332e;border-radius:8px 0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex;position:absolute;bottom:0;right:0}.resize-handle:hover{background:#fff}.preview-dismiss{color:inherit;background:#ffffff8f;border:1px solid #17203324;border-radius:999px;align-items:center;gap:4px;min-height:26px;padding:0 9px;font-size:12px;display:inline-flex}.preview-dismiss:disabled{cursor:not-allowed;opacity:.65}.timer{background:#ffffff8a;border-radius:999px;align-items:center;gap:4px;padding:4px 8px;font-size:12px;display:inline-flex}.side-panel{z-index:25;background:#fff;border-inline-start:1px solid #dfe5ee;flex-direction:column;flex:0 0 344px;max-width:92vw;display:flex;box-shadow:-14px 0 36px #1f293714}.panel-head{border-bottom:1px solid #e5eaf1;align-items:center;gap:10px;min-height:76px;padding:14px;display:flex}.panel-head h2{margin:0;font-size:18px}.archive-list,.sync-controls{flex-direction:column;gap:10px;padding:14px;display:flex;overflow:auto}.archive-item{background:linear-gradient(90deg, var(--note-bg) 0 8px, transparent 8px), #f8fafc;border:1px solid #e3e8ef;border-radius:8px;grid-template-columns:1fr auto;gap:8px;min-height:82px;padding:12px;display:grid}.archive-item p{color:#243045;word-break:break-word;margin:4px 0 0;line-height:1.5}.archive-reason,.panel-empty{color:#6b7280;font-size:12px}.sync-box{color:#4b5563;align-items:flex-start;gap:10px;padding:16px;line-height:1.6;display:flex}.sync-box p{margin:0}.account-line{color:#123d3a;background:#edf7f6;border:1px solid #bfdfdc;border-radius:8px;align-items:center;gap:9px;min-height:46px;padding:0 12px;display:flex}.device-box{background:#f8fafc;border:1px solid #e3e8ef;border-radius:8px;flex-direction:column;gap:6px;padding:12px;display:flex}.device-box span,.sync-note{color:#687383;font-size:13px}.device-box code{color:#172033;overflow-wrap:anywhere;font-size:12px}.sync-note{margin:0;line-height:1.7}.panel-actions{gap:8px;display:flex}.toast-stack{z-index:60;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:18px;left:18px}.toast{background:#fff;border:1px solid #dfe5ee;border-radius:8px;align-items:center;gap:8px;min-height:42px;padding:0 12px;display:flex;box-shadow:0 14px 30px #1f293724}.toast.ok{border-color:#a7f3d0}.toast.warn{border-color:#fed7aa}.toast.error{border-color:#fecdd3}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes flyAway{0%{opacity:1;transform:translate(0,0)rotate(-.4deg)scale(1)}62%{opacity:.9;transform:translate(-42px,-70px)rotate(-8deg)scale(.94)}to{opacity:0;transform:translate(-360px,-180px)rotate(-24deg)scale(.62)}}@media (width<=760px){.app-shell{--note-font-size:16px;--note-height:178px;--note-width:218px}.app-shell.compact-cards{--note-font-size:14px;--note-height:132px;--note-width:166px}.topbar{flex-direction:column;align-items:flex-start;min-height:134px}.toolbar{justify-content:stretch;width:100%}.toolbar .tool-button.primary{flex:1}.workspace{height:calc(100vh - 134px);min-height:480px}.focus-mode .topbar{max-width:calc(100vw - 16px);top:8px;left:8px;right:8px}.focus-mode .workspace{height:100vh;min-height:100vh}.side-panel{width:min(344px,92vw);position:absolute;inset:0 0 0 auto}}