:root{font-family:Inter,Hiragino Sans,Yu Gothic UI,system-ui,sans-serif;color:#e8edf4;background:#111a28;font-synthesis:none;text-rendering:optimizeLegibility;--bar-height: 76px;--filter-height: 54px;--status-height: 42px;--note-width: 220px;--note-height: 188px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%}body{min-height:100dvh;overflow:hidden}button,textarea{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{min-height:100dvh;display:grid;grid-template-rows:var(--bar-height) var(--filter-height) minmax(0,1fr) var(--status-height);background:#152131}.topbar{z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(20px,3vw,48px);background:#101b2af5;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px #00000029}.brand,.topbar-actions,.hint,.statusbar p{display:flex;align-items:center}.brand{gap:13px;flex:0 0 auto}.brand-name{font-size:1.05rem;font-weight:750;letter-spacing:.01em}.brand-mark{position:relative;width:34px;height:30px;display:block}.brand-mark i{position:absolute;width:19px;height:19px;border-radius:3px;box-shadow:0 3px 7px #0000003d;transform:rotate(-5deg)}.brand-mark i:nth-child(1){left:0;top:2px;background:#ffd65a}.brand-mark i:nth-child(2){left:8px;top:8px;background:#fd7b72;transform:rotate(4deg)}.brand-mark i:nth-child(3){left:15px;top:3px;background:#4fceb7;transform:rotate(8deg)}.topbar-actions{gap:26px}.theme-toggle{position:relative;flex:0 0 auto;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#f6c947;background:#ffffff0e;cursor:pointer;overflow:hidden;transition:color .2s ease,background .2s ease,transform .2s ease}.theme-toggle:hover{background:#ffffff1a;transform:rotate(8deg)}.theme-toggle:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}.theme-sun,.theme-moon{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .2s ease,transform .25s ease}.theme-sun{font-size:1.2rem}.theme-moon{color:#50627a;font-size:1rem;opacity:0;transform:translateY(22px)}.search-box{position:relative;flex:0 1 360px;min-width:210px;margin-left:auto}.search-box input{width:100%;height:42px;padding:0 38px 0 42px;border:1px solid rgba(255,255,255,.1);border-radius:11px;outline:0;color:#e8edf4;background:#ffffff0e;font-size:.9rem;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.search-box input::placeholder{color:#8290a3}.search-box input:focus{border-color:#7dd3fcb8;background:#ffffff13;box-shadow:0 0 0 3px #7dd3fc1f}.search-icon{position:absolute;z-index:1;top:50%;left:16px;width:14px;height:14px;border:2px solid #8795a8;border-radius:50%;transform:translateY(-58%);pointer-events:none}.search-icon:after{content:"";position:absolute;width:6px;height:2px;right:-5px;bottom:-3px;border-radius:2px;background:#8795a8;transform:rotate(45deg)}.add-control{position:relative}.hint{gap:8px;margin:0;color:#8997aa;font-size:.875rem}.hint-icon{font-size:1.15rem;transform:rotate(-45deg)}.add-button{min-height:44px;display:inline-flex;align-items:center;gap:9px;padding:0 18px;border:0;border-radius:10px;color:#17202a;background:#f6c947;font-weight:750;cursor:pointer;box-shadow:0 7px 20px #f6c94726;transition:transform .16s ease,filter .16s ease}.add-button span:first-child{font-size:1.4rem;font-weight:400;line-height:1}.add-button .chevron{margin-left:1px;font-size:.85rem;transition:transform .16s ease}.add-button[aria-expanded=true] .chevron{transform:rotate(180deg)}.add-button:hover{filter:brightness(1.06);transform:translateY(-1px)}.add-button:active{transform:translateY(1px)}.add-button:focus-visible,.delete-button:focus-visible,.note textarea:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}.new-note-colors{position:absolute;z-index:30;top:calc(100% + 10px);right:0;width:190px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#182538;box-shadow:0 18px 38px #00000052}.new-note-colors[hidden]{display:none}.new-note-colors p{margin:3px 7px 8px;color:#9eabbc;font-size:.78rem}.new-note-options{display:grid;gap:3px}.new-note-options button{min-height:42px;display:flex;align-items:center;gap:11px;width:100%;padding:0 9px;border:0;border-radius:8px;color:#e8edf4;background:transparent;font-size:.9rem;text-align:left;cursor:pointer}.new-note-options button:hover,.new-note-options button:focus-visible{outline:none;background:#ffffff14}.menu-swatch{width:22px;height:22px;border-radius:6px;background:var(--swatch);box-shadow:inset 0 0 0 1px #0000001a}.filterbar{z-index:8;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,3vw,48px);background:#152235;border-bottom:1px solid rgba(255,255,255,.07)}.project-tools{min-width:0;display:flex;align-items:center;gap:7px}.project-tools select{width:clamp(150px,18vw,240px);height:40px;padding:0 34px 0 12px;border:1px solid rgba(255,255,255,.11);border-radius:9px;outline:0;color:#e6ebf2;background:#1d2c40;font-size:.88rem;font-weight:650;cursor:pointer}.project-tools select:focus-visible{border-color:#7dd3fc;box-shadow:0 0 0 3px #7dd3fc1f}.project-action{min-height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#9eabba;background:#ffffff0a;font-size:.78rem;cursor:pointer}.project-action:hover{color:#eefedf;background:#ffffff14}.project-action.primary{width:38px;padding:0;color:#f6c947;font-size:1.2rem}.project-action.danger:hover{color:#ffaaa4;border-color:#ff938b4d}.project-action:disabled{opacity:.35;cursor:not-allowed}.project-action:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}.filter-tabs{display:inline-flex;padding:4px;border-radius:10px;background:#060e1959}.view-tools{display:flex;align-items:center;gap:9px}.filter-tabs button{min-width:78px;min-height:36px;padding:0 14px;border:0;border-radius:7px;color:#8f9caf;background:transparent;font-size:.86rem;font-weight:650;cursor:pointer}.filter-tabs button:hover{color:#dce3ec}.filter-tabs button[aria-pressed=true]{color:#17202a;background:#f6c947;box-shadow:0 3px 10px #0003}.filter-tabs button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}.align-button{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border:1px solid rgba(255,255,255,.11);border-radius:10px;color:#aeb9c7;background:#ffffff0b;font-size:.82rem;font-weight:650;cursor:pointer}.align-button:hover{color:#fff;background:#ffffff17}.align-button:active{transform:translateY(1px)}.align-button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}.align-icon{display:grid;grid-template-columns:repeat(2,6px);gap:2px}.align-icon i{width:6px;height:6px;border:1px solid currentColor;border-radius:1px}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 220px;background:#152235}.board{position:relative;overflow:auto;min-height:0;background-color:#1a293c;background-image:radial-gradient(circle,rgba(225,235,248,.17) 1px,transparent 1.2px),linear-gradient(135deg,rgba(255,255,255,.018),transparent 45%);background-size:27px 27px,100% 100%;scrollbar-color:#56667b transparent}.board:after{content:"";position:fixed;inset:calc(var(--bar-height) + var(--filter-height)) 220px var(--status-height) 0;pointer-events:none;box-shadow:inset 0 22px 45px #00000014,inset 0 -12px 35px #00000014}.note-layer{position:relative;min-width:100%;min-height:100%}.empty-state{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90%,420px);text-align:center;color:#91a0b3;pointer-events:none;transition:opacity .2s ease}.empty-state[hidden]{display:none}.empty-icon{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 18px;border:1px dashed #637188;border-radius:13px;font-size:1.75rem;color:#a8b5c5;transform:rotate(-4deg)}.empty-state h1{margin:0 0 9px;color:#c7d0db;font-size:1.1rem;font-weight:650}.empty-state p{margin:0;font-size:.9rem}.search-empty-icon:before{content:"";width:18px;height:18px;border:2px solid currentColor;border-radius:50%}.search-empty-icon:after{content:"";width:10px;height:2px;margin:17px 0 0 -4px;background:currentColor;transform:rotate(45deg)}.note{--paper: #ffe36e;--ink: #342d1e;position:absolute;width:var(--note-width);height:var(--note-height);padding:34px 17px 17px;border:1px solid rgba(77,58,18,.08);border-radius:2px 2px 7px 3px;color:var(--ink);background:linear-gradient(105deg,rgba(255,255,255,.18),transparent 38%,rgba(77,58,18,.025) 100%),var(--paper);box-shadow:0 2px 2px #040b1438,0 9px 13px -4px #040b1454,6px 14px 24px -12px #040b1466;transform:rotate(var(--tilt, 0deg));transform-origin:center;touch-action:none;animation:note-in .22s ease-out both;transition:box-shadow .18s ease,transform .18s ease}.note:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,rgba(255,255,255,.16),transparent 13%),linear-gradient(to top,rgba(77,58,18,.055),transparent 8%);pointer-events:none}.note:after{content:"";position:absolute;right:0;bottom:0;width:22px;height:22px;border-radius:8px 0 7px;background:linear-gradient(135deg,#0000001a,#ffffff59);clip-path:polygon(100% 0,0 100%,100% 100%);pointer-events:none}.note.dragging{z-index:1000!important;transform:rotate(0) scale(1.025);box-shadow:0 5px 8px #040b1433,0 26px 42px #040b1466;cursor:grabbing}.note.search-hidden{display:none}.note.just-aligned{animation:align-settle .28s ease-out}.note.completed{filter:saturate(.6);opacity:.82}.note.completed textarea{text-decoration:line-through;text-decoration-thickness:2px;opacity:.62}.drag-handle{position:absolute;inset:0 0 auto;height:35px;cursor:grab}.drag-handle:before{content:"";position:absolute;top:13px;left:17px;width:30px;height:4px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.22}.note-colors{position:absolute;z-index:4;top:6px;left:55px;display:flex;gap:2px}.color-swatch{position:relative;width:25px;height:25px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.color-swatch:before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #00000024}.color-swatch[aria-pressed=true]:after{content:"";position:absolute;inset:2px;border:2px solid currentColor;border-radius:50%;opacity:.55}.color-swatch:focus-visible{outline:2px solid currentColor;outline-offset:1px}.note textarea{position:relative;z-index:1;display:block;width:100%;height:100%;padding:0 0 34px;border:0;outline:0;resize:none;color:inherit;background:transparent;font-family:Klee,Klee One,Hannotate SC,YuKyokasho,Yu Kyokasho,HG教科書体,cursive;font-size:1.05rem;font-weight:500;line-height:1.62;letter-spacing:.035em;cursor:text}.note textarea::placeholder{color:currentColor;opacity:.45}.delete-button{position:absolute;z-index:3;top:7px;right:7px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:currentColor;font-size:1.15rem;line-height:1;opacity:.48;cursor:pointer}.delete-button:hover{opacity:1;background:#00000017}.complete-button{position:absolute;z-index:5;left:12px;bottom:10px;min-height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 9px 0 6px;border:1px solid currentColor;border-radius:999px;color:inherit;background:#ffffff2e;font-size:.76rem;font-weight:700;opacity:.62;cursor:pointer}.complete-button span:first-child{display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;font-size:.68rem}.complete-button:hover{opacity:1;background:#ffffff4d}.complete-button[aria-pressed=true]{opacity:.9;color:#fff;background:#286c60;border-color:#286c60}.complete-button:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}.done-zone{position:relative;align-self:stretch;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;margin:18px 18px 18px 0;border:2px dashed #53647a;border-radius:16px;color:#8f9db0;background:#0a142147;text-align:center;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}.done-zone-icon{display:grid;place-items:center;width:46px;height:46px;border:2px solid currentColor;border-radius:50%;font-size:1.35rem}.done-zone div{display:grid;gap:5px}.done-zone strong{color:#c4ceda;font-size:.92rem}.done-zone div span{font-size:.76rem}.done-count{position:absolute;top:12px;right:12px;min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#9fe2d3;background:#47c9a721;font-size:.78rem;font-weight:700}.done-zone.drag-active{border-color:#6f8da1;background:#47c9a712;color:#a8c5cc}.done-zone.drag-over{border-color:#47c9a7;background:#47c9a72b;color:#7de0c6;transform:scale(.98)}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(20px,3vw,48px);color:#8290a3;background:#111b2a;border-top:1px solid rgba(255,255,255,.06);font-size:.78rem}.statusbar p{gap:8px;margin:0}.status-dot{width:7px;height:7px;border-radius:50%;background:#47c9a7;box-shadow:0 0 0 4px #47c9a71a}.project-dialog{width:min(90vw,430px);padding:0;border:1px solid rgba(255,255,255,.12);border-radius:16px;color:#e8edf4;background:#182638;box-shadow:0 28px 70px #00000073}.project-dialog::backdrop{background:#050b14b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.project-dialog form{display:grid;gap:14px;padding:24px}.dialog-heading{display:flex;align-items:center;gap:13px;margin-bottom:4px}.dialog-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#17202a;background:#f6c947;font-size:1.2rem}.dialog-heading h2{margin:0 0 3px;font-size:1.05rem}.dialog-heading p{margin:0;color:#8f9caf;font-size:.78rem}.project-dialog label{color:#aeb9c7;font-size:.82rem;font-weight:650}.project-dialog input{height:46px;padding:0 13px;border:1px solid rgba(255,255,255,.13);border-radius:10px;outline:0;color:#fff;background:#101c2b;font-size:1rem}.project-dialog input:focus{border-color:#7dd3fc;box-shadow:0 0 0 3px #7dd3fc1f}.dialog-error{min-height:18px;margin:-5px 0 0;color:#ffaaa4;font-size:.78rem}.dialog-actions{display:flex;justify-content:flex-end;gap:9px}.dialog-actions button{min-height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#bac4d0;background:transparent;cursor:pointer}.dialog-actions .dialog-save{border-color:#f6c947;color:#17202a;background:#f6c947;font-weight:750}@keyframes note-in{0%{opacity:0;transform:translateY(10px) rotate(var(--tilt))}}@keyframes align-settle{0%{transform:scale(.97) rotate(var(--tilt))}60%{transform:scale(1.015) rotate(var(--tilt))}to{transform:scale(1) rotate(var(--tilt))}}@media(max-width:767px){:root{--bar-height: 122px;--filter-height: 110px;--status-height: 40px;--note-width: 206px;--note-height: 180px}.topbar{flex-wrap:wrap;align-content:center;padding:9px 14px;gap:8px 10px}.brand{gap:8px}.brand-mark{transform:scale(.86);transform-origin:left center;width:30px}.brand-name{font-size:.92rem}.topbar-actions{gap:8px}.search-box{order:3;flex-basis:100%;min-width:0;margin-left:0}.search-box input{height:44px}.hint{display:none}.add-button{min-height:48px;padding:0 14px;border-radius:12px}.add-button span:last-child{font-size:.88rem}.note{padding:38px 15px 15px}.drag-handle{height:40px}.note-colors{top:5px;left:42px;gap:0}.color-swatch{width:29px;height:30px}.delete-button{width:38px;height:38px;top:3px;right:3px}.statusbar{padding:0 14px}.statusbar p:first-child{max-width:68%}.filterbar{flex-wrap:wrap;align-content:center;justify-content:center;gap:7px;padding:7px 10px}.project-tools{width:100%}.project-tools select{flex:1;width:auto;min-width:0;height:42px}.project-action{width:40px;min-height:42px;padding:0;font-size:0}.project-action:before{font-size:1rem}#rename-project:before{content:"✎"}#delete-project:before{content:"×"}.project-action.primary{width:40px;font-size:1.2rem}.filter-tabs{width:100%}.filter-tabs button{flex:1;min-width:0;min-height:40px;padding-inline:8px}.view-tools{width:100%;gap:7px}.view-tools .filter-tabs{flex:1;width:auto}.align-button{min-height:48px;padding:0 12px}.workspace{grid-template-columns:1fr;grid-template-rows:76px minmax(0,1fr)}.done-zone{grid-row:1;flex-direction:row;justify-content:flex-start;gap:10px;margin:8px 14px;padding:0 14px;text-align:left}.done-zone-icon{width:34px;height:34px;font-size:1rem}.done-zone div{gap:1px}.done-count{top:50%;right:14px;transform:translateY(-50%)}.done-zone.drag-over{transform:scale(.985)}.board:after{inset:calc(var(--bar-height) + var(--filter-height) + 76px) 0 var(--status-height)}.complete-button{min-height:34px;bottom:8px}}@media(min-width:768px)and (max-width:980px){.hint{display:none}.search-box{flex-basis:280px}}@media(max-width:520px){.brand-name{display:none}.add-button{padding-inline:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}html[data-theme=light]{color-scheme:light;color:#27364a;background:#e7edf4}html[data-theme=light] .app-shell{background:#e7edf4}html[data-theme=light] .topbar{background:#f8fafdf7;border-bottom-color:#d9e1ea;box-shadow:0 8px 28px #22344914}html[data-theme=light] .brand-name{color:#26364b}html[data-theme=light] .hint{color:#738297}html[data-theme=light] .theme-toggle{color:#465a73;border-color:#d5dee8;background:#edf2f7}html[data-theme=light] .theme-toggle:hover{background:#e3eaf2}html[data-theme=light] .theme-sun{opacity:0;transform:translateY(-22px)}html[data-theme=light] .theme-moon{opacity:1;transform:translateY(0)}html[data-theme=light] .search-box input{color:#26364b;border-color:#d4dde7;background:#fff}html[data-theme=light] .search-box input::placeholder{color:#8290a2}html[data-theme=light] .search-box input:focus{border-color:#4da8ce;background:#fff}html[data-theme=light] .new-note-colors{color:#26364b;border-color:#d5dee8;background:#fff;box-shadow:0 18px 38px #22344929}html[data-theme=light] .new-note-options button{color:#35465b}html[data-theme=light] .new-note-options button:hover,html[data-theme=light] .new-note-options button:focus-visible{background:#edf2f7}html[data-theme=light] .filterbar{background:#eef3f8;border-bottom-color:#d6dee8}html[data-theme=light] .project-tools select{color:#2c3b50;border-color:#ced8e3;background:#fff}html[data-theme=light] .project-action,html[data-theme=light] .align-button{color:#5f7085;border-color:#ccd6e1;background:#ffffffb3}html[data-theme=light] .project-action:hover,html[data-theme=light] .align-button:hover{color:#25364c;background:#fff}html[data-theme=light] .filter-tabs{background:#dfe6ee}html[data-theme=light] .filter-tabs button{color:#65758a}html[data-theme=light] .filter-tabs button:hover{color:#26364b}html[data-theme=light] .workspace{background:#e5ebf2}html[data-theme=light] .board{background-color:#dfe7ef;background-image:radial-gradient(circle,rgba(48,69,92,.16) 1px,transparent 1.2px),linear-gradient(135deg,rgba(255,255,255,.35),transparent 45%)}html[data-theme=light] .board:after{box-shadow:inset 0 18px 35px #364c620d,inset 0 -12px 30px #364c620d}html[data-theme=light] .empty-state{color:#78889a}html[data-theme=light] .empty-state h1{color:#526376}html[data-theme=light] .empty-icon{color:#718399;border-color:#98a8ba}html[data-theme=light] .done-zone{color:#74869a;border-color:#9baaba;background:#ffffff59}html[data-theme=light] .done-zone strong{color:#526477}html[data-theme=light] .done-zone.drag-active{border-color:#63a99a;background:#47c9a717}html[data-theme=light] .statusbar{color:#708095;background:#f0f4f8;border-top-color:#d7dfe8}html[data-theme=light] .project-dialog{color:#26364b;border-color:#d2dbe5;background:#f9fbfd}html[data-theme=light] .project-dialog::backdrop{background:#1f2d3e73}html[data-theme=light] .project-dialog label{color:#596a7f}html[data-theme=light] .project-dialog input{color:#26364b;border-color:#ccd6e1;background:#fff}