:root{font-family:DM Sans,Noto Sans JP,sans-serif;color:#25241f;background:#f4f1ea;font-synthesis:none;text-rendering:optimizeLegibility;--paper: #f8f6f0;--ink: #25241f;--muted: #7b786e;--line: rgba(45, 43, 37, .1);--accent: #26382d;--note-width: 236px;--note-height: 218px}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:#f4f1ea}body{min-height:100vh;min-height:100dvh;overflow-x:hidden}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto auto auto 1fr auto}.projectbar{position:relative;z-index:17;padding:10px clamp(22px,4vw,64px) 0}.projectbar-inner{min-width:0;display:flex;align-items:center;gap:7px}.project-tabs{min-width:0;display:flex;flex:1;gap:6px;overflow-x:auto;padding:2px 1px 4px;scrollbar-width:thin;scrollbar-color:rgba(76,72,62,.18) transparent}.project-tab{max-width:210px;min-height:38px;padding:0 15px;flex:0 0 auto;overflow:hidden;border:1px solid transparent;border-radius:9px;color:#77736a;background:transparent;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.project-tab:hover{color:#34322d;background:#fffefa8f}.project-tab.is-active{border-color:#37524029;color:#314b3a;background:#eef2eb}.new-project-button,.project-action{min-height:38px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(47,44,37,.11);border-radius:9px;color:#5f5b52;background:#fffefab8;cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease}.new-project-button{padding:0 13px;gap:6px;font-size:12px;font-weight:600}.arrange-button{width:auto;padding:0 12px;gap:6px;font-size:12px;font-weight:600}.new-project-button svg,.project-action svg{width:18px;height:18px}.project-action{width:38px;padding:0}.new-project-button:hover,.project-action:hover{color:#314b3a;border-color:#37524038;background:#fffefa}.project-action:disabled{color:#aaa69d;border-color:#2f2c2512;background:#f5f3ed94;cursor:not-allowed}.project-delete-action:hover{color:#8b453d;border-color:#8b453d38}.project-divider{width:1px;height:24px;flex:0 0 auto;margin:0 2px;background:#2f2c251f}.statusbar{position:relative;z-index:15;padding:10px clamp(22px,4vw,64px) 0;display:flex;justify-content:center}.status-filter{padding:4px;display:inline-grid;grid-template-columns:repeat(3,minmax(82px,1fr));gap:3px;border:1px solid rgba(47,44,37,.1);border-radius:11px;background:#e8e5dccc}.status-filter button{min-height:36px;padding:0 14px;border:0;border-radius:8px;color:#77736a;background:transparent;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s ease,background .15s ease,box-shadow .15s ease}.status-filter button:hover{color:#34322d}.status-filter button.is-active{color:#26382d;background:#fffefa;box-shadow:0 2px 7px #302c241a}.topbar{position:relative;z-index:20;min-height:82px;padding:18px clamp(22px,4vw,64px);display:grid;grid-template-columns:1fr minmax(220px,420px) 1fr;align-items:center;gap:20px;border-bottom:1px solid rgba(48,46,40,.08);background:#f8f6f0e0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:13px;min-width:0}.search-box{position:relative;width:100%;height:44px;color:#858176}.search-box input{width:100%;height:100%;padding:0 44px 0 43px;border:1px solid rgba(47,44,37,.12);border-radius:10px;outline:0;color:#33312c;background:#fffefac2;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;appearance:none;-webkit-appearance:none}.search-box input::-webkit-search-cancel-button{display:none}.search-box input::placeholder{color:#969187}.search-box input:focus{border-color:#36524061;background:#fffefa;box-shadow:0 0 0 3px #40664f1a}.search-icon{position:absolute;z-index:1;top:12px;left:13px;width:20px;height:20px;pointer-events:none}.search-clear{position:absolute;z-index:2;top:4px;right:4px;width:36px;height:36px;display:grid;place-content:center;padding:0;border:0;border-radius:8px;color:#77736a;background:transparent;cursor:pointer}.search-clear:hover{color:#3f3d37;background:#efede6}.search-clear svg{width:20px;height:20px}.brand-mark{position:relative;width:31px;height:31px;flex:0 0 auto}.brand-mark span{position:absolute;display:block;width:20px;height:22px;border:1px solid rgba(37,36,31,.24);border-radius:3px;box-shadow:0 2px 4px #29261f14}.brand-mark span:nth-child(1){top:1px;left:2px;background:#f3a7a0;transform:rotate(-8deg)}.brand-mark span:nth-child(2){top:3px;right:1px;background:#a9c9e5;transform:rotate(7deg)}.brand-mark span:nth-child(3){left:6px;bottom:0;background:#f0d46c;transform:rotate(-1deg)}.brand-name{font-size:20px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}.add-button{min-height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff;background:var(--accent);border:0;border-radius:8px;box-shadow:0 5px 14px #26382d33;font-weight:600;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.add-button svg{width:19px;height:19px}.add-button:hover{background:#31493a;box-shadow:0 7px 18px #26382d40;transform:translateY(-1px)}.add-button:active{transform:translateY(1px)}.add-button:focus-visible,.status-filter button:focus-visible,.project-tab:focus-visible,.new-project-button:focus-visible,.project-action:focus-visible,.drag-handle:focus-visible,.complete-button:focus-visible,.note-color-button:focus-visible,.color-option:focus-visible,.note-color-option:focus-visible,.search-clear:focus-visible,.delete-button:focus-visible,.note-text:focus-visible{outline:3px solid rgba(64,102,79,.35);outline-offset:3px}[hidden]{display:none!important}.add-menu{position:relative;flex:0 0 auto;justify-self:end}.color-menu{position:absolute;z-index:1200;padding:9px;border:1px solid rgba(47,44,37,.12);border-radius:12px;background:#fffefafa;box-shadow:0 16px 38px #2c28212e,0 3px 8px #2c282114;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.add-color-menu{top:calc(100% + 10px);right:0;width:176px}.color-menu-title{margin:2px 8px 7px;color:#77736a;font-size:11px;font-weight:600}.color-option{width:100%;min-height:40px;padding:0 9px;display:flex;align-items:center;gap:10px;border:0;border-radius:8px;color:#3f3d37;background:transparent;font-size:13px;font-weight:600;cursor:pointer}.color-option:hover{background:#f2efe8}.color-swatch{width:22px;height:22px;flex:0 0 auto;border:1px solid rgba(42,40,34,.12);border-radius:6px;box-shadow:inset 0 1px #ffffff5c}.color-yellow{background:#f3d96f}.color-pink{background:#eeaaa1}.color-blue{background:#a9cee8}.color-green{background:#b9d8b2}.board-wrap{min-height:0;padding:clamp(18px,2.4vw,34px) clamp(18px,4vw,64px) 20px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:start;gap:18px}.board{position:relative;isolation:isolate;width:100%;min-height:max(560px,calc(100vh - 278px));min-height:max(560px,calc(100dvh - 278px));overflow:hidden;border:1px solid rgba(43,41,35,.1);border-radius:18px;background-color:#efede6;box-shadow:inset 0 1px #ffffffb8,0 14px 40px #3631280f}.project-dialog{width:min(430px,calc(100vw - 32px));padding:0;border:1px solid rgba(47,44,37,.13);border-radius:18px;color:#33312c;background:#fffefa;box-shadow:0 24px 70px #25221c3d}.project-dialog::backdrop{background:#23211c57;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.project-dialog form{padding:24px}.dialog-heading{display:flex;align-items:flex-start;gap:13px}.dialog-icon{width:42px;height:42px;flex:0 0 auto;display:grid;place-content:center;border-radius:11px;color:#4f705a;background:#e9f0e7}.dialog-icon svg{width:24px;height:24px}.dialog-icon-danger{color:#8a4b43;background:#f6e8e5}.dialog-heading h2{margin:1px 0 5px;font-size:18px}.dialog-heading p{margin:0;color:#837f75;font-size:12px;line-height:1.6}.project-name-field{margin-top:23px;display:grid;gap:7px}.project-name-field span{color:#666259;font-size:12px;font-weight:600}.project-name-field input{width:100%;height:46px;padding:0 13px;border:1px solid rgba(47,44,37,.17);border-radius:9px;outline:0;color:#33312c;background:#fbfaf6;font-size:14px}.project-name-field input:focus{border-color:#3652406b;box-shadow:0 0 0 3px #40664f1a}.dialog-actions{margin-top:24px;display:flex;justify-content:flex-end;gap:8px}.dialog-actions button{min-height:42px;padding:0 17px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}.dialog-cancel{border:1px solid rgba(47,44,37,.13);color:#68645b;background:#fff}.dialog-primary,.dialog-danger{border:1px solid transparent;color:#fff;background:#314b3a}.dialog-danger{background:#8a4b43}.delete-warning{margin-top:20px;padding:12px 13px;border-radius:9px;color:#7b4a43;background:#faf0ed;font-size:12px;line-height:1.65}.completed-drop-zone{position:sticky;top:24px;min-height:180px;padding:24px 16px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed rgba(73,105,83,.3);border-radius:16px;color:#607265;background:#e2eae085;text-align:center;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.completed-drop-zone.is-drag-over{border-color:#52755e;background:#cee2cdeb;box-shadow:0 12px 28px #37503e2e;transform:scale(1.025)}.completed-icon{width:42px;height:42px;margin-bottom:12px;display:grid;place-content:center;border-radius:50%;color:#52755e;background:#ffffffb8;box-shadow:0 3px 10px #37503e1a}.completed-icon svg{width:24px;height:24px}.completed-drop-zone strong{color:#405448;font-size:15px}.drop-instruction{margin-top:5px;color:#7a887e;font-size:11px}.completed-drop-zone em{margin-top:14px;padding:5px 10px;border-radius:999px;color:#52705c;background:#fff9;font-size:11px;font-style:normal;font-weight:600}.board-grid{position:absolute;z-index:-1;inset:0;background-image:radial-gradient(circle,rgba(59,56,48,.15) 1px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 78%,transparent 100%)}.empty-state{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;padding:30px;color:var(--muted);text-align:center;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}.empty-state.is-hidden{opacity:0;visibility:hidden}.no-results{position:absolute;z-index:2;inset:0;display:grid;place-content:center;justify-items:center;padding:30px;color:#858176;text-align:center;pointer-events:none}.no-results svg{width:34px;height:34px;margin-bottom:12px;color:#9a958a}.no-results p{margin:0 0 5px;color:#555249;font-size:15px;font-weight:600}.no-results span{font-size:12px}.empty-illustration{position:relative;width:88px;height:72px;margin-bottom:22px}.empty-note{position:absolute;width:45px;height:47px;border:1px solid rgba(53,50,42,.16);border-radius:4px 4px 7px;box-shadow:0 8px 16px #322e2517}.empty-note-one{left:4px;top:11px;background:#efaaa2;transform:rotate(-10deg)}.empty-note-two{right:3px;top:7px;background:#abcbe5;transform:rotate(9deg)}.empty-note-three{left:23px;bottom:1px;background:#f1d76e;transform:rotate(-1deg)}.empty-title{margin:0 0 7px;color:#555249;font-size:17px;font-weight:600}.empty-copy{margin:0;font-size:13px}.notes-layer{position:absolute;inset:0}.sticky-note{--note-color: #f3d96f;--rotation: -.55deg;position:absolute;width:var(--note-width);height:var(--note-height);display:grid;grid-template-rows:44px 1fr;overflow:hidden;border:1px solid rgba(61,56,39,.12);border-radius:5px 5px 9px;background-color:var(--note-color);background-image:linear-gradient(155deg,rgba(255,255,255,.2),transparent 38%),linear-gradient(to bottom,transparent 78%,rgba(80,70,42,.035));box-shadow:0 1px 1px #2f2a1f17,0 5px 9px #2f2a1f1a,0 16px 26px -12px #2f2a1f4d;transform:translate3d(var(--x, 0),var(--y, 0),0) rotate(var(--rotation, 0deg));transform-origin:center;transition:box-shadow .18s ease,filter .18s ease;will-change:transform}.sticky-note:nth-child(4n+1){--rotation: -.7deg}.sticky-note:nth-child(4n+2){--rotation: .55deg}.sticky-note:nth-child(4n+3){--rotation: -.38deg}.sticky-note:nth-child(4n){--rotation: .72deg}.sticky-note.is-dragging{z-index:1000!important;filter:saturate(1.03);box-shadow:0 3px 5px #312d221a,0 16px 25px #312d2233,0 30px 44px -18px #312d2261;cursor:grabbing}.sticky-note.is-drag-source{opacity:.28;filter:saturate(.6)}.sticky-note.drag-ghost{position:fixed;z-index:3000!important;top:0;left:0;margin:0;pointer-events:none;opacity:.96;transform:translate3d(var(--ghost-x, 0),var(--ghost-y, 0),0) rotate(var(--rotation, 0deg));transition:none}.sticky-note.is-arranging{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,filter .18s ease}.sticky-note.is-new{animation:note-in .23s cubic-bezier(.2,.8,.2,1)}@keyframes note-in{0%{opacity:0;scale:.93}to{opacity:1;scale:1}}.note-toolbar{min-width:0;padding:5px 7px 0 8px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(69,62,39,.08)}.drag-handle,.complete-button,.note-color-button,.delete-button{width:38px;height:38px;flex:0 0 auto;display:grid;place-content:center;border:0;border-radius:8px;color:#312e238c;background:transparent;cursor:grab}.complete-button{width:34px;height:34px;flex:0 0 auto;display:grid;place-content:center;padding:0;border:1px solid rgba(49,46,35,.25);border-radius:50%;color:transparent;background:#ffffff2e;cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease,transform .15s ease}.complete-button svg{width:19px;height:19px}.complete-button:hover{border-color:#314e3a9e;color:#314e3a80;transform:scale(1.05)}.sticky-note.is-completed{filter:saturate(.62)}.sticky-note.is-completed .complete-button{border-color:#4f755c;color:#fff;background:#5d856a;box-shadow:0 2px 6px #2e4b3733}.sticky-note.is-completed .note-text{color:#272a2294}.sticky-note.is-completed.has-content .note-text{text-decoration:line-through;text-decoration-thickness:1.5px}.sticky-note.is-completed .note-text::placeholder{color:transparent}.sticky-note.is-completed .note-label{color:#2e5038b3}.sticky-note.completion-pulse{animation:completion-pulse .28s ease-out}@keyframes completion-pulse{50%{scale:1.035}}.note-color-button{width:34px;height:34px;flex:0 0 auto;display:grid;place-content:center;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}.note-color-button>span{width:17px;height:17px;border:2px solid rgba(255,255,255,.62);border-radius:50%;box-shadow:0 0 0 1px #312e2347}.drag-handle{grid-template-columns:repeat(2,3px);gap:3px;touch-action:none}.drag-handle span{width:3px;height:3px;border-radius:50%;background:currentColor}.note-label{flex:1;overflow:hidden;color:#3632247a;font-size:10px;font-weight:700;letter-spacing:.16em;text-overflow:ellipsis;white-space:nowrap}.delete-button{cursor:pointer;transition:color .14s ease,background .14s ease}.delete-button svg{width:23px;height:23px}.drag-handle:hover,.note-color-button:hover,.delete-button:hover{color:#25231be0;background:#fff3}.note-color-menu{top:43px;right:9px;display:grid;grid-template-columns:repeat(4,36px);gap:4px}.note-color-option{width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}.note-color-option:before{content:"";width:22px;height:22px;display:block;margin:auto;border:1px solid rgba(42,40,34,.15);border-radius:50%;background:var(--swatch-color);box-shadow:inset 0 1px #ffffff6b;transition:transform .14s ease}.note-color-option:hover{background:#2a282212}.note-color-option:hover:before{transform:scale(1.1)}.delete-button:hover{color:#7c3f36}.note-text{width:100%;min-width:0;min-height:0;padding:17px 19px 25px;resize:none;border:0;outline:0;color:#27251ee0;background:transparent;font-family:Yomogi,Hiragino Maru Gothic ProN,Yu Gothic,cursive;font-size:17px;font-weight:400;line-height:1.8}.note-text::placeholder{color:#443f2d61}.note-fold{position:absolute;right:0;bottom:0;width:22px;height:22px;background:linear-gradient(135deg,#a08f482e 0 49%,#ffffff8c 51% 100%);border-radius:5px 0 7px;pointer-events:none}.footer{min-height:58px;padding:14px clamp(22px,4vw,64px) 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8b877d;font-size:11px;letter-spacing:.02em}.footer p{margin:0}.save-dot{width:6px;height:6px;display:inline-block;margin:0 8px 1px 0;border-radius:50%;background:#6a9278;box-shadow:0 0 0 3px #6a92781f}.count{font-variant-numeric:tabular-nums}@media(max-width:767px){:root{--note-width: min(236px, calc(100vw - 56px) );--note-height: 210px}.topbar{min-height:70px;padding:12px 16px;grid-template-columns:1fr auto;gap:12px}.statusbar{padding:9px 12px 0}.projectbar{padding:8px 12px 0}.projectbar-inner{width:100%;display:grid;grid-template-columns:minmax(0,1fr) repeat(4,42px);gap:5px}.project-tabs{width:100%}.project-tab{max-width:145px;min-height:42px;padding:0 12px}.new-project-button,.project-action{min-height:42px}.new-project-button{width:42px;padding:0}.new-project-button span,.project-divider{display:none}.project-action{width:42px}.arrange-button{width:42px;padding:0}.arrange-button span{display:none}.status-filter{width:100%;grid-template-columns:repeat(3,1fr)}.status-filter button{min-height:42px;padding:0 7px}.search-box{grid-column:1 / -1;grid-row:2;height:46px}.search-clear{width:38px;height:38px}.brand{gap:9px}.brand-mark{width:27px;height:27px}.brand-mark span{width:17px;height:20px}.brand-name{font-size:17px}.add-button{min-width:48px;min-height:48px;padding:0 14px;border-radius:10px}.add-button span{display:none}.add-button svg{width:22px;height:22px}.board-wrap{padding:12px 12px 10px}.workspace{grid-template-columns:1fr}.board{min-height:max(560px,calc(100dvh - 294px));border-radius:14px}.project-dialog form{padding:20px}.board-grid{background-size:20px 20px}.sticky-note{grid-template-rows:48px 1fr}.note-toolbar{padding:5px 6px 0;justify-content:space-between;gap:0}.note-label{display:none}.drag-handle,.complete-button,.note-color-button,.delete-button{width:44px;height:44px}.add-color-menu{width:184px}.color-option{min-height:46px;font-size:14px}.note-color-menu{top:47px}.note-text{padding:13px 17px 24px;font-size:18px;line-height:1.75}.footer{min-height:48px;padding:10px 16px 13px}.footer .count{display:none}}@media(max-width:1100px){.workspace{grid-template-columns:1fr}.completed-drop-zone{position:relative;top:auto;min-height:126px}body.is-dragging-note .completed-drop-zone{position:fixed;z-index:2000;right:16px;bottom:16px;left:16px;min-height:112px;padding:13px;background:#e2eae0f5;box-shadow:0 16px 38px #2d403238}body.is-dragging-note .completed-icon{width:34px;height:34px;margin-bottom:6px}body.is-dragging-note .drop-instruction,body.is-dragging-note .completed-drop-zone em{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}