:root{font-family:Noto Sans JP,sans-serif;color:#292823;background:#f3efe6;font-synthesis:none;--ink: #292823;--muted: #77756d;--paper: #fbfaf6;--line: #ded9ce;--accent: #ef593f;--note-w: 236px;--note-h: 210px}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%}body{min-height:100vh;overflow:hidden;background:#f3efe6;transition:background .2s ease,color .2s ease}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{height:100vh;min-height:540px;display:grid;grid-template-rows:78px minmax(0,1fr) 42px;padding:0 30px}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;justify-self:start}.brand-mark{width:37px;height:37px;position:relative;display:block}.brand-mark i{position:absolute;width:25px;height:25px;border:2px solid var(--ink);background:#f8c95c}.brand-mark i:nth-child(1){left:0;top:1px;transform:rotate(-8deg)}.brand-mark i:nth-child(2){right:0;bottom:0;background:#ef7c67;transform:rotate(7deg)}.brand-mark i:nth-child(3){left:7px;top:7px;background:#a7d7c7;transform:rotate(1deg)}.brand-copy{display:flex;flex-direction:column;line-height:1;font-family:DM Sans,sans-serif}.brand-copy strong{font-size:19px;letter-spacing:-.7px}.brand-copy small{font-size:8px;letter-spacing:3.3px;margin-top:5px;color:var(--muted)}.header-title{display:flex;align-items:center;gap:14px}.header-title h1{margin:0;font-size:18px;letter-spacing:.04em;font-weight:600}.save-status{color:#807d74;font-size:11px;display:flex;align-items:center;gap:6px}.save-status i{width:6px;height:6px;background:#68a77f;border-radius:50%;box-shadow:0 0 0 3px #68a77f1f}.save-status.saving i{background:#e1a33e}.add-note-wrap{position:relative;justify-self:end;display:flex;align-items:center;gap:10px}.theme-toggle{height:42px;position:relative;display:flex;align-items:center;padding:0 12px 0 38px;border:1px solid #d7d1c5;border-radius:21px;background:#fffdf8;color:#5f5b53;cursor:pointer;box-shadow:0 2px 6px #3c352814;transition:background .2s,border-color .2s,color .2s,transform .15s}.theme-toggle:hover{transform:translateY(-1px);border-color:#aaa397;color:var(--ink)}.theme-toggle:focus-visible{outline:3px solid rgba(239,89,63,.25);outline-offset:2px}.theme-icon{position:absolute;left:12px;font-size:19px;line-height:1;transition:opacity .2s,transform .25s}.theme-label{font-size:11px;font-weight:600;white-space:nowrap}.theme-icon-moon{opacity:0;transform:rotate(-30deg) scale(.6)}[data-theme=dark] .theme-icon-sun{opacity:0;transform:rotate(30deg) scale(.6)}[data-theme=dark] .theme-icon-moon{opacity:1;transform:rotate(0) scale(1)}.add-button{min-height:42px;padding:0 18px;border:0;border-radius:7px;color:#fff;background:var(--ink);font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 3px #11110f;transition:transform .15s ease,background .15s ease}.add-button span{color:#f4c85e;font-size:18px;margin-right:4px;vertical-align:-1px}.add-button:hover{background:#3d3b34;transform:translateY(-1px)}.add-button:active{transform:translateY(2px);box-shadow:0 1px #11110f}.create-palette{position:absolute;z-index:10000;top:calc(100% + 10px);right:0;width:178px;padding:9px;border:1px solid #d8d1c4;border-radius:10px;background:#fffdf8;box-shadow:0 12px 30px #362f2233}.create-palette[hidden],.note-palette[hidden]{display:none}.create-palette p{margin:3px 7px 8px;color:#807a70;font-size:10px;font-weight:600}.create-palette button{width:100%;min-height:38px;display:flex;align-items:center;gap:9px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#3d3a33;font-size:12px;cursor:pointer}.create-palette button:hover,.create-palette button:focus-visible{background:#f2eee5;outline:none}.create-palette button i{width:19px;height:19px;border-radius:4px;border:1px solid rgba(56,49,35,.14)}.create-palette [data-color=yellow] i{background:#f6d46f}.create-palette [data-color=pink] i{background:#ef9c87}.create-palette [data-color=blue] i{background:#aebde7}.create-palette [data-color=green] i{background:#a8d8c9}.board-wrap{min-height:0;padding:12px 0 16px;display:grid;grid-template-rows:42px minmax(0,1fr)}.search-toolbar{display:flex;align-items:start;justify-content:space-between;gap:14px}.project-control{position:relative;flex:0 0 auto}.project-switcher{width:182px;height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #d7d1c5;border-radius:8px;background:#fffdf8;color:var(--ink);cursor:pointer;box-shadow:0 1px 3px #3c35280d}.project-switcher svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#777268;stroke-width:1.6;stroke-linejoin:round}.project-switcher span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:12px;font-weight:600}.project-switcher i{color:#8d887e;font-size:15px;font-style:normal}.project-menu{position:absolute;z-index:10001;top:calc(100% + 7px);left:0;width:260px;padding:7px;border:1px solid #d7d1c5;border-radius:10px;background:#fffdf8;box-shadow:0 14px 32px #362f2233}.project-menu[hidden]{display:none}.project-row{display:grid;grid-template-columns:minmax(0,1fr) 32px 32px;align-items:center;border-radius:7px}.project-row:hover,.project-row.active{background:#f1ede4}.project-row button{height:36px;padding:0;border:0;background:transparent;color:#746f66;cursor:pointer}.project-row .select-project{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 9px;color:#37352f;font-size:12px;text-align:left}.project-row .select-project span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-row .select-project i{color:#4d8059;font-style:normal}.project-row .rename-project,.project-row .delete-project{border-radius:6px;font-size:15px;opacity:.48}.project-row .rename-project:hover,.project-row .delete-project:hover{background:#ffffffb8;opacity:1}.project-row .delete-project:disabled{cursor:not-allowed;opacity:.15}.project-menu .new-project{width:100%;height:38px;display:flex;align-items:center;gap:8px;margin-top:6px;padding:0 10px;border:0;border-top:1px solid #e5dfd4;background:transparent;color:#45423b;font-size:12px;font-weight:600;cursor:pointer}.project-menu .new-project span{color:#bd6d39;font-size:17px}.search-box{width:min(320px,65vw);height:34px;display:flex;align-items:center;gap:8px;padding:0 9px 0 11px;border:1px solid #d7d1c5;border-radius:8px;background:#fffdf8d1;color:#817c72;box-shadow:0 1px 3px #3c35280d;transition:border-color .15s,box-shadow .15s,background .15s}.search-box:focus-within{border-color:#9c968a;background:#fffdf8;box-shadow:0 0 0 3px #504a3f14}.search-box svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px}.search-box input::-webkit-search-cancel-button{display:none}.search-box input::placeholder{color:#9a958b}.search-box button{width:26px;height:26px;flex:0 0 auto;padding:0;border:0;border-radius:50%;background:transparent;color:#79746b;font-size:18px;line-height:1;cursor:pointer}.search-box button:hover{background:#ece7de}.search-box button[hidden]{display:none}.search-count{padding-top:8px;color:#79756c;font-family:DM Sans,Noto Sans JP,sans-serif;font-size:11px;font-weight:600;white-space:nowrap}.status-filter{display:flex;align-items:center;padding:3px;border:1px solid #d7d1c5;border-radius:9px;background:#e0dacf8c}.status-filter button{min-width:58px;height:27px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#777268;font-size:11px;font-weight:600;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}.status-filter button:hover{color:var(--ink)}.status-filter button.active{background:#fffdf8;color:var(--ink);box-shadow:0 1px 4px #3d362921}.align-notes{height:34px;display:flex;align-items:center;gap:6px;padding:0 11px;border:1px solid #d7d1c5;border-radius:8px;background:#fffdf8;color:#5f5b53;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px #3c35280d}.align-notes:hover{border-color:#aaa397;color:var(--ink)}.align-notes:active{transform:translateY(1px)}.align-notes svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}.board{height:100%;position:relative;overflow:hidden;background:#ebe6db;border:1px solid #d7d1c4;border-radius:12px;box-shadow:inset 0 1px 8px #453e3014,0 12px 36px #4e45310d;isolation:isolate}.board-grid{position:absolute;inset:0;z-index:-2;background-image:radial-gradient(#c9c1b2 1px,transparent 1px);background-size:24px 24px;opacity:.62}.board:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.22),transparent 65%)}.complete-zone{position:absolute;right:20px;bottom:20px;z-index:0;width:calc(var(--note-w) + 42px);height:calc(var(--note-h) + 36px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed rgba(87,112,93,.38);border-radius:14px;background:#dce6d96b;color:#617064;pointer-events:none;transition:background .18s,border-color .18s,transform .18s}.complete-zone-icon{width:31px;height:31px;display:grid;place-items:center;margin-bottom:3px;border:1px solid rgba(70,104,78,.3);border-radius:50%;background:#ffffff73;font-weight:700}.complete-zone strong{font-size:13px}.complete-zone small{color:#869087;font-size:10px}.complete-zone.drag-over{border-color:#5e8f69;background:#bcdcc1ad;transform:scale(1.02)}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#7e796e;text-align:center;pointer-events:none}.empty-state.hidden{display:none}.empty-state p{margin:22px 0 5px;font-weight:600;font-size:15px}.empty-state small{font-size:11px;color:#999388}.empty-illustration{width:96px;height:65px;position:relative;opacity:.6}.empty-illustration span{position:absolute;width:53px;height:53px;border:1px solid #b6afa1;box-shadow:0 6px 10px #322d2214}.empty-illustration span:nth-child(1){left:0;top:9px;background:#f2cc67;transform:rotate(-9deg)}.empty-illustration span:nth-child(2){right:0;top:6px;background:#a8d2c6;transform:rotate(8deg)}.empty-illustration span:nth-child(3){left:23px;top:0;background:#ef917e;transform:rotate(-1deg)}.note{position:absolute;width:var(--note-w);height:var(--note-h);display:flex;flex-direction:column;padding:0 15px 15px;background:var(--note-color, #f6d46f);border:1px solid rgba(84,70,36,.12);border-radius:2px 3px 5px 2px;box-shadow:1px 2px 2px #483e291c,3px 7px 12px #483e2924,8px 16px 24px #483e2914,inset 0 1px #ffffff57;touch-action:none;-webkit-user-select:none;user-select:none;transform:rotate(var(--note-tilt, 0deg));transform-origin:50% 48%;transition:left .28s ease,top .28s ease,box-shadow .15s ease,transform .15s ease}.note:after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 15px 15px;border-color:transparent transparent rgba(255,255,255,.28) transparent;filter:drop-shadow(-1px -1px 0 rgba(66,56,37,.08))}.note.filtered-out{display:none}.note.dragging{box-shadow:3px 7px 10px #38302029,10px 22px 34px #38302033;transform:rotate(var(--note-tilt, 0deg)) scale(1.018) translateY(-2px);z-index:9999!important;cursor:grabbing;transition:box-shadow .15s ease,transform .15s ease}.note-toolbar{height:38px;flex:0 0 38px;display:flex;justify-content:space-between;align-items:center;cursor:grab;position:relative}.drag-dots{width:24px;height:24px;display:grid;grid-template-columns:repeat(3,3px);gap:3px;place-content:center;opacity:.32}.drag-dots i{width:3px;height:3px;border-radius:50%;background:#38352e}.note-actions{display:flex;align-items:center}.complete-note,.color-note,.delete-note{flex:0 0 auto}.complete-note{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#2e342c8a;cursor:pointer}.complete-note i{width:17px;height:17px;display:grid;place-items:center;border:1.5px solid currentColor;border-radius:50%;font-family:DM Sans,sans-serif;font-size:11px;font-style:normal;line-height:1}.complete-note:hover{background:#ffffff61;color:#416a4b}.color-note{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;opacity:.72}.color-note i{width:13px;height:13px;border-radius:50%;background:var(--current-color);border:2px solid rgba(50,45,36,.38);box-shadow:0 0 0 2px #ffffff47}.color-note:hover{background:#ffffff61;opacity:1}.delete-note{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:#2826217a;font-size:21px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}.note:hover .delete-note,.delete-note:focus-visible{opacity:1}.delete-note:hover{background:#ffffff61;color:#342f29}.note-palette{position:absolute;z-index:5;top:34px;right:0;display:flex;gap:7px;padding:8px;background:#fffdf8;border:1px solid rgba(68,59,43,.14);border-radius:18px;box-shadow:0 7px 18px #362f2233;cursor:default}.note-palette button{width:24px;height:24px;padding:0;border:2px solid #fffdf8;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #342e2333;cursor:pointer}.note-palette button:hover,.note-palette button:focus-visible{transform:scale(1.14);outline:2px solid rgba(43,41,36,.55);outline-offset:1px}.note.completed{filter:saturate(.55);box-shadow:1px 2px 3px #483e2917,3px 6px 10px #483e291a}.note.completed textarea{color:#32302994;text-decoration:line-through;text-decoration-thickness:1.5px}.note.completed .complete-note{color:#356e45}.note.completed .complete-note i{border-color:#4c895b;background:#ffffff80;box-shadow:0 0 0 3px #4a83571f}.note textarea{flex:1;width:100%;resize:none;outline:none;border:0;background:transparent;color:#323029;font-family:Klee One,cursive;font-size:16px;font-weight:600;line-height:1.8;letter-spacing:.035em;-webkit-user-select:text;user-select:text;touch-action:auto}.note textarea::placeholder{color:#332f276b}.footer{display:flex;align-items:start;justify-content:space-between;color:#817d73;font-size:10px;letter-spacing:.02em}.hint kbd{font-family:inherit;border:1px solid #cbc5b9;background:#faf8f2;border-radius:4px;padding:2px 6px;box-shadow:0 1px #c7c0b4}.project-dialog{width:min(390px,calc(100vw - 32px));padding:0;border:1px solid #d5cec1;border-radius:13px;background:#fffdf8;color:var(--ink);box-shadow:0 24px 60px #2e281d47}.project-dialog::backdrop{background:#2a272057;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.project-dialog form{padding:24px}.project-dialog h2{margin:0 0 20px;font-size:18px}.project-dialog label{display:block;margin-bottom:7px;color:#716c63;font-size:11px;font-weight:600}.project-dialog input{width:100%;height:42px;padding:0 12px;border:1px solid #cbc4b7;border-radius:8px;outline:none;background:#fff;font-size:14px}.project-dialog input:focus{border-color:#777166;box-shadow:0 0 0 3px #49443a17}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.dialog-actions button{min-width:86px;height:38px;border:1px solid #d2cbc0;border-radius:7px;background:#f6f2e9;color:#4a473f;font-size:12px;font-weight:600;cursor:pointer}.dialog-actions button.primary{border-color:#292823;background:#292823;color:#fff}[data-theme=dark]{color:#ece9df;background:#1d1f1e;--ink: #ece9df;--muted: #aaa9a2;--paper: #252826;--line: #3b3e3b}[data-theme=dark] body{background:#1d1f1e;color:#ece9df}[data-theme=dark] .save-status,[data-theme=dark] .search-count,[data-theme=dark] .footer{color:#aaa9a2}[data-theme=dark] .theme-toggle,[data-theme=dark] .project-switcher,[data-theme=dark] .project-menu,[data-theme=dark] .create-palette,[data-theme=dark] .align-notes,[data-theme=dark] .project-dialog{border-color:#444844;background:#292c2a;color:#ece9df;box-shadow:0 12px 30px #00000052}[data-theme=dark] .add-button{background:#f1eee4;color:#222421;box-shadow:0 3px #77756f}[data-theme=dark] .add-button:hover{background:#fffdf7}[data-theme=dark] .create-palette p,[data-theme=dark] .project-dialog label{color:#aaa9a2}[data-theme=dark] .create-palette button,[data-theme=dark] .project-row button,[data-theme=dark] .project-row .select-project,[data-theme=dark] .project-menu .new-project{color:#ddd9cf}[data-theme=dark] .create-palette button:hover,[data-theme=dark] .create-palette button:focus-visible,[data-theme=dark] .project-row:hover,[data-theme=dark] .project-row.active{background:#383c39}[data-theme=dark] .project-row .rename-project:hover,[data-theme=dark] .project-row .delete-project:hover{background:#ffffff14}[data-theme=dark] .project-menu .new-project{border-color:#444844}[data-theme=dark] .search-box{border-color:#444844;background:#292c2ae6;color:#aaa9a2;box-shadow:none}[data-theme=dark] .search-box:focus-within{border-color:#777b76;background:#2d302e;box-shadow:0 0 0 3px #ffffff0f}[data-theme=dark] .search-box input{color:#f0ede4}[data-theme=dark] .search-box input::placeholder{color:#858882}[data-theme=dark] .search-box button{color:#b7b7b0}[data-theme=dark] .search-box button:hover{background:#404440}[data-theme=dark] .status-filter{border-color:#444844;background:#252826}[data-theme=dark] .status-filter button{color:#aaa9a2}[data-theme=dark] .status-filter button.active{background:#414541;color:#fffdf7;box-shadow:0 1px 4px #0000004d}[data-theme=dark] .board{border-color:#3e423f;background:#292c2a;box-shadow:inset 0 1px 10px #0000004d,0 12px 36px #00000029}[data-theme=dark] .board-grid{background-image:radial-gradient(#555a55 1px,transparent 1px);opacity:.58}[data-theme=dark] .board:after{background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.035),transparent 65%)}[data-theme=dark] .complete-zone{border-color:#89b19173;background:#425b463b;color:#a6c1aa}[data-theme=dark] .complete-zone-icon{background:#ffffff0f}[data-theme=dark] .complete-zone small{color:#829487}[data-theme=dark] .empty-state{color:#aaa9a2}[data-theme=dark] .empty-state small{color:#858882}[data-theme=dark] .hint kbd{border-color:#50534f;background:#2c2f2d;box-shadow:0 1px #111}[data-theme=dark] .project-dialog input{border-color:#50534f;background:#202321;color:#f0ede4}[data-theme=dark] .dialog-actions button{border-color:#50534f;background:#343835;color:#e4e0d6}[data-theme=dark] .dialog-actions button.primary{border-color:#eeeae0;background:#eeeae0;color:#242623}@media(max-width:767px){:root{--note-w: 172px;--note-h: 176px}body{overflow:hidden}.app-shell{min-height:480px;grid-template-rows:66px minmax(0,1fr) 34px;padding:0 12px}.topbar{grid-template-columns:1fr auto}.brand-copy small,.save-status,.header-title{display:none}.brand-mark{transform:scale(.87);transform-origin:left center;width:34px}.brand{gap:7px}.brand-copy strong{font-size:17px}.add-button{min-height:44px;padding:0 15px;font-size:13px}.theme-toggle{height:44px;padding-right:10px;padding-left:34px}.theme-icon{left:10px}.theme-label{font-size:10px}.create-palette{width:166px}.board-wrap{padding:8px 0 10px;grid-template-rows:122px minmax(0,1fr)}.search-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:38px 38px 38px;gap:3px 8px}.project-control{grid-column:1 / -1}.project-switcher{width:100%;height:36px}.project-menu{width:100%}.search-box{width:100%;height:36px}.search-box input{font-size:16px}.search-count{padding-top:10px;font-size:10px}.align-notes{width:38px;padding:0;justify-content:center}.align-notes span{display:none}.search-box{grid-column:1;grid-row:2}.align-notes{grid-column:2;grid-row:2}.search-count{grid-column:3;grid-row:2}.status-filter{grid-column:1 / -1;grid-row:3;justify-self:center}.status-filter button{min-width:72px;height:29px}.board{border-radius:9px}.board-grid{background-size:20px 20px}.note{padding:0 12px 12px}.note-toolbar{height:42px;flex-basis:42px}.complete-note,.color-note,.delete-note{width:35px;height:38px;opacity:.68}.note-palette{top:39px;right:-3px;gap:8px;padding:9px}.note-palette button{width:27px;height:27px}.complete-zone{right:10px;bottom:10px;width:calc(var(--note-w) + 20px);height:calc(var(--note-h) + 26px)}.note textarea{font-size:16px;line-height:1.65}.hint{display:none}.footer{justify-content:center;font-size:10px}}@media(min-width:768px)and (max-width:1100px){:root{--note-w: 210px;--note-h: 195px}.app-shell{padding:0 20px}.brand-copy small{display:none}.header-title{gap:10px}.board-wrap{grid-template-rows:82px minmax(0,1fr)}.search-toolbar{display:grid;grid-template-columns:182px minmax(220px,1fr) auto auto;grid-template-rows:38px 38px;gap:3px 10px}.project-control{grid-column:1;grid-row:1}.search-box{grid-column:2;grid-row:1}.align-notes{grid-column:3;grid-row:1}.search-count{grid-column:4;grid-row:1}.status-filter{grid-column:1 / -1;grid-row:2;justify-self:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important}}