@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700&family=Yomogi&display=swap";:root{color:#18342a;background:#f5f1e8;font-family:Noto Sans JP,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 14% 8%,rgba(232,190,100,.14),transparent 24rem),#f5f1e8}button,textarea{font:inherit}button{cursor:pointer}.app-shell{width:min(1180px,calc(100% - 64px));margin:0 auto;padding:42px 0 72px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{display:grid;width:48px;height:48px;place-items:center;color:#fff7d0;background:#244639;border-radius:14px 14px 14px 3px;box-shadow:4px 4px #d7b55c;font-size:24px}.eyebrow{margin:0 0 1px;color:#a27e24;font:500 11px/1 DM Mono,monospace;letter-spacing:.12em}h1{margin:0;font-size:clamp(22px,2.6vw,30px);letter-spacing:.04em}.add-button{min-height:50px;padding:0 19px;color:#fff;background:#d76943;border:0;border-radius:10px;box-shadow:3px 4px #a9422d;font-weight:700;transition:transform .15s,box-shadow .15s}.add-button:hover{transform:translate(-1px,-1px);box-shadow:5px 6px #a9422d}.add-button:active{transform:translate(2px,3px);box-shadow:1px 1px #a9422d}.add-button span{font-size:21px;vertical-align:-1px}.creation-tools{display:flex;align-items:center;gap:14px}.new-note-colors,.note-colors{display:flex;align-items:center;gap:7px}.new-note-colors>span{color:#6a776f;font-size:12px}.color-choice{--choice-color: #f9df77;width:22px;height:22px;padding:0;background:var(--choice-color);border:2px solid transparent;border-radius:50%;box-shadow:inset 0 0 0 1px #2a352e29}.color-choice[data-color=yellow]{--choice-color: #f9df77}.color-choice[data-color=pink]{--choice-color: #f4b6a6}.color-choice[data-color=blue]{--choice-color: #b9d1f1}.color-choice[data-color=green]{--choice-color: #a8d9c5}.color-choice:hover{transform:scale(1.12)}.color-choice.is-selected,.color-choice[aria-pressed=true]{border-color:#244639;box-shadow:0 0 0 2px #f5f1e8,0 0 0 4px #244639}.project-panel{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:26px;padding:13px 15px;background:#ffffff6b;border:1px solid #d4cdbd;border-radius:13px}.project-select-wrap{display:grid;gap:4px;min-width:min(100%,300px)}.project-select-wrap label{color:#647168;font-size:11px;font-weight:700}.project-select-wrap select{min-height:38px;width:min(300px,100%);padding:0 32px 0 10px;color:#18342a;background:#fffdf8;border:1px solid #bdb7aa;border-radius:7px;font-size:14px;font-weight:700}.project-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.project-button{min-height:38px;padding:0 11px;color:#53635a;background:#fffdf8;border:1px solid #c8c2b3;border-radius:7px;font-size:12px;font-weight:700}.project-button:hover{border-color:#486958;color:#244639}.project-button-primary{color:#fff;background:#2f704e;border-color:#2f704e}.project-button-primary:hover{color:#fff;background:#245e3f}.project-button-danger:hover{color:#a4402d;border-color:#b95d4a}.project-button:disabled{cursor:not-allowed;color:#a5aaa5;background:#eeeae1;border-color:#ded8cc}.theme-button[aria-pressed=true]{color:#fff7d0;background:#244639;border-color:#244639}.intro{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:34px 0 14px}.intro p{margin:0;font:400 24px/1.5 Yomogi,cursive}.intro span{color:#6a776f;font-size:12px}.search-panel{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;margin:0 0 14px}.search-field{display:flex;align-items:center;width:min(380px,100%);min-height:42px;padding:0 12px;color:#6b776d;background:#ffffff8f;border:1px solid #c8c2b3;border-radius:10px}.search-field:focus-within{border-color:#244639;box-shadow:0 0 0 3px #24463924}.search-field span{margin:0 9px 2px 1px;font-size:23px;line-height:1}.search-field input{width:100%;min-width:0;color:#18342a;background:transparent;border:0;outline:0;font-size:14px}.search-field input::placeholder{color:#879087}.search-count{flex:none;color:#53635a;font:500 13px/1 DM Mono,monospace}.status-switcher{display:flex;padding:3px;background:#d6cfc09e;border-radius:9px}.status-button{min-height:32px;padding:0 11px;color:#5f6b63;background:transparent;border:0;border-radius:7px;font-size:12px;font-weight:700}.status-button.is-selected,.status-button[aria-pressed=true]{color:#fff;background:#244639;box-shadow:0 1px 3px #23372c38}.completion-dropzone{display:flex;align-items:center;gap:13px;min-height:82px;margin:0 0 16px;padding:12px 16px;color:#426352;background:#d6eadc78;border:2px dashed #8cb59d;border-radius:14px;transition:background .16s,border-color .16s,transform .16s}.completion-dropzone.is-drag-over{background:#d7eadc;border-color:#2e7b52;transform:scale(1.01)}.completion-drop-icon{display:grid;width:38px;height:38px;flex:none;place-items:center;color:#fff;background:#4d9b71;border-radius:50%;font-size:22px;font-weight:700}.completion-dropzone h2{margin:0;font-size:15px}.completion-dropzone p{margin:2px 0 0;color:#688073;font-size:12px}.completed-count{margin-left:auto;color:#2c7550;font:500 13px/1 DM Mono,monospace}.board{position:relative;min-height:660px;overflow:hidden;border:1px solid #c8c2b3;border-radius:18px;background-color:#e9e4d9;background-image:radial-gradient(#c8c2b3 1px,transparent 1px);background-size:20px 20px;box-shadow:inset 0 0 0 8px #fff3,0 12px 24px #2c393014}.empty-state{position:absolute;inset:50% auto auto 50%;width:max-content;max-width:calc(100% - 40px);color:#788078;text-align:center;transform:translate(-50%,-50%)}.empty-state span{color:#d1a94b;font-size:24px}.empty-state p{margin:8px 0;font-size:14px}.empty-state.is-hidden{display:none}.note{--paper: #f9df77;--tilt: -1.2deg;position:absolute;display:flex;flex-direction:column;width:250px;min-height:210px;padding:12px 16px 16px;overflow:hidden;background:var(--paper);box-shadow:2px 3px 2px #483a191f,7px 11px 15px #483a1938;touch-action:none;transform:rotate(var(--tilt));transition:box-shadow .16s,transform .16s}.note[data-color=yellow]{--paper: #f9df77}.note[data-color=pink]{--paper: #f4b6a6}.note[data-color=blue]{--paper: #b9d1f1}.note[data-color=green]{--paper: #a8d9c5}.note:nth-of-type(4n+1){--tilt: -1.4deg}.note:nth-of-type(4n+2){--tilt: 1deg}.note:nth-of-type(4n+3){--tilt: -.6deg}.note:nth-of-type(4n+4){--tilt: 1.35deg}.note:focus-within,.note:focus{outline:3px solid rgba(36,70,57,.42);outline-offset:3px;z-index:2}.note.is-dragging{cursor:grabbing;box-shadow:4px 6px 4px #483a1924,13px 20px 24px #483a194d;transform:rotate(1.8deg) translateY(-3px);z-index:20}.note.is-filtered{visibility:hidden;pointer-events:none}.note.is-completed{filter:saturate(.62)}.note.is-completed .note-text{color:#647067;opacity:.75;text-decoration:line-through;text-decoration-thickness:2px}.note-top{display:flex;justify-content:space-between;align-items:center;min-height:28px}.note-actions{display:flex;align-items:center;gap:6px}.note-colors{gap:6px;margin:1px 0 3px}.note-colors .color-choice{width:16px;height:16px}.note-colors .color-choice.is-selected{box-shadow:0 0 0 1px var(--paper),0 0 0 3px #244639}.drag-handle{width:42px;min-height:32px;color:#36493999;cursor:grab;font-size:24px;line-height:24px;letter-spacing:-5px;-webkit-user-select:none;user-select:none}.delete-button{display:grid;width:32px;height:32px;place-items:center;color:#75564b;background:#ffffff61;border:0;border-radius:50%;font-size:23px;line-height:1}.delete-button:hover{color:#fff;background:#bd5139}.complete-button{display:grid;width:32px;height:32px;place-items:center;color:#49735a;background:#ffffff61;border:2px solid rgba(54,102,70,.45);border-radius:50%;font-size:18px;font-weight:700;line-height:1}.complete-button:hover{color:#fff;background:#4d9b71;border-color:#4d9b71}.note.is-completed .complete-button{color:#fff;background:#3f8a62;border-color:#3f8a62;box-shadow:0 0 0 2px #ffffff6b}.note-text{width:100%;flex:1;min-height:145px;padding:5px 1px;resize:none;color:#33443a;background:transparent;border:0;outline:0;font:400 20px/1.7 Yomogi,cursive}.note-text::placeholder{color:#3243378c}.note-fold{position:absolute;right:0;bottom:0;width:0;height:0;border-top:24px solid rgba(124,105,44,.18);border-left:24px solid transparent}@media(max-width:767px){.app-shell{width:min(100% - 28px,540px);padding:20px 0 42px}.topbar{align-items:flex-start;gap:12px}.brand{gap:10px}.brand-mark{width:40px;height:40px;border-radius:11px 11px 11px 3px;font-size:20px}.eyebrow{font-size:9px}h1{font-size:19px}.add-button{min-height:48px;padding:0 13px;border-radius:9px;font-size:14px;white-space:nowrap}.creation-tools{align-items:flex-end;gap:9px}.new-note-colors{display:grid;grid-template-columns:repeat(4,18px);gap:7px}.new-note-colors>span{grid-column:1 / -1}.new-note-colors .color-choice{width:18px;height:18px}.project-panel{align-items:stretch;flex-direction:column;gap:10px;margin-top:20px;padding:11px}.project-select-wrap,.project-select-wrap select{width:100%}.project-actions{justify-content:flex-start}.project-button{min-height:42px;padding:0 12px}.intro{display:block;margin:28px 0 11px}.intro p{font-size:20px}.intro span{display:block;margin-top:3px;font-size:11px}.search-panel{margin-bottom:11px}.search-field{min-height:46px}.search-field input{font-size:16px}.search-count{font-size:12px}.status-switcher{order:3}.status-button{min-height:38px;padding:0 12px;font-size:13px}.completion-dropzone{min-height:78px;margin-bottom:13px;padding:11px 12px;gap:10px}.completion-drop-icon{width:36px;height:36px}.completion-dropzone p{font-size:11px}.board{min-height:620px;border-radius:14px}.note{width:min(300px,calc(100% - 28px));min-height:218px;padding:13px 17px 17px}.note-text{min-height:125px;font-size:20px}.drag-handle{width:48px;min-height:38px;font-size:27px}.delete-button{width:38px;height:38px;font-size:26px}.complete-button{width:38px;height:38px;font-size:20px}}@media(min-width:768px)and (max-width:1279px){.app-shell{width:min(100% - 48px,1050px);padding-top:32px}.board{min-height:620px}}body.dark-theme{color:#e7f0e8;background:radial-gradient(circle at 14% 8%,rgba(91,142,114,.14),transparent 24rem),#14201b}.dark-theme .project-panel{background:#28372fb8;border-color:#526459}.dark-theme .project-select-wrap label,.dark-theme .intro span,.dark-theme .new-note-colors>span{color:#b7c7bb}.dark-theme .project-select-wrap select{color:#e8f1e9;background:#26362e;border-color:#65766b}.dark-theme .project-button{color:#d6e3d8;background:#2a3a32;border-color:#5b6d61}.dark-theme .project-button:hover{color:#fff;background:#354b40;border-color:#8a9b90}.dark-theme .project-button-primary{color:#fff;background:#397957;border-color:#397957}.dark-theme .project-button-danger:hover{color:#ffc4b8;border-color:#ce7967}.dark-theme .project-button:disabled{color:#859088;background:#303b35;border-color:#4c5a51}.dark-theme .color-choice.is-selected,.dark-theme .color-choice[aria-pressed=true]{box-shadow:0 0 0 2px #14201b,0 0 0 4px #c8dbc9}.dark-theme .theme-button[aria-pressed=true]{color:#173024;background:#f3d477;border-color:#f3d477}.dark-theme .search-field{color:#bed0c1;background:#2b3b32d1;border-color:#5b6d61}.dark-theme .search-field:focus-within{border-color:#a8d9c5;box-shadow:0 0 0 3px #a8d9c52e}.dark-theme .search-field input{color:#eff7f0}.dark-theme .search-field input::placeholder{color:#9caf9f}.dark-theme .search-count{color:#c8d7cb}.dark-theme .status-switcher{background:#455449c2}.dark-theme .status-button{color:#cbd9ce}.dark-theme .status-button.is-selected,.dark-theme .status-button[aria-pressed=true]{color:#183426;background:#a8d9c5}.dark-theme .completion-dropzone{color:#c4e5cd;background:#2f563e80;border-color:#6eaa82}.dark-theme .completion-dropzone.is-drag-over{background:#386c4d;border-color:#b6e6c6}.dark-theme .completion-dropzone p{color:#b3cdb9}.dark-theme .completed-count{color:#bce9c8}.dark-theme .board{border-color:#536258;background-color:#26322c;background-image:radial-gradient(#536258 1px,transparent 1px);box-shadow:inset 0 0 0 8px #ffffff09,0 12px 24px #00000047}.dark-theme .empty-state{color:#b7c3b9}.dark-theme .empty-state span{color:#f0c960}.dark-theme .note{box-shadow:2px 3px 2px #00000038,7px 11px 15px #0006}.dark-theme .note.is-dragging{box-shadow:4px 6px 4px #00000047,13px 20px 24px #00000080}.dark-theme .note:focus-within,.dark-theme .note:focus{outline-color:#ceead3bf}