:root{font-family:Klee,Klee One,Hannotate SC,YuKyokasho,Yu Gothic,cursive;color:#f8fbff;background:#101d32;font-synthesis:none;text-rendering:optimizeLegibility;--header-height: 88px;--workflow-height: 74px;--note-width: 232px;--note-height: 220px}*{box-sizing:border-box}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html,body,#app{width:100%;min-height:100%;margin:0}body{overflow:hidden}button,textarea,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}.topbar{height:var(--header-height);padding:0 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#101d32;border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:1000}.brand{display:flex;align-items:center;gap:14px;min-width:0}.theme-toggle{width:44px;height:44px;flex:0 0 auto;border:1px solid #60758f;border-radius:12px;background:#1a2940;color:#ffd75e;font-size:1.4rem;cursor:pointer}.theme-toggle:focus-visible{outline:3px solid #ffd75e;outline-offset:2px}.brand-mark{width:38px;height:38px;flex:0 0 auto;border-radius:6px 6px 12px;background:#ffd75e;box-shadow:5px 5px #fc835f;transform:rotate(-4deg)}.brand h1{margin:0;font-size:1.35rem;letter-spacing:.08em;line-height:1.15}.brand p{margin:5px 0 0;color:#9cacbf;font-size:.84rem}.topbar-actions{display:flex;align-items:center;gap:20px}.save-status{color:#92a4ba;font-size:.8rem;white-space:nowrap}.search-control{height:46px;width:286px;display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#ffffff12}.search-icon{color:#b8c5d4;font-size:1.25rem;line-height:1;transform:rotate(-18deg)}.search-input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:.95rem}.search-input::placeholder{color:#8fa1b7}.search-input::-webkit-search-cancel-button{cursor:pointer;filter:invert(1);opacity:.7}.search-control:focus-within{border-color:#ffffff8c;box-shadow:0 0 0 3px #ffffff14}.search-count{color:#d3deea;font-size:.78rem;white-space:nowrap}.create-color-picker{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#ffffff0f}.create-color-button{width:24px;height:24px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff38;transition:transform .15s ease,border-color .15s ease}.create-color-button:hover{transform:scale(1.12)}.create-color-button[aria-pressed=true]{border-color:#fff;transform:scale(1.12)}.create-color-button:focus-visible{outline:3px solid #fff;outline-offset:3px}.add-button{min-height:48px;padding:0 21px;display:inline-flex;align-items:center;gap:9px;border:0;border-radius:14px;background:#f8fbff;color:#101d32;font-weight:800;cursor:pointer;box-shadow:0 6px #9fb0c5;transition:transform .15s ease,box-shadow .15s ease}.add-button span:first-child{font-size:1.45rem;line-height:1}.add-button:hover{transform:translateY(-2px);box-shadow:0 8px #9fb0c5}.add-button:active{transform:translateY(4px);box-shadow:0 2px #9fb0c5}.add-button:focus-visible,.delete-button:focus-visible,.note-text:focus-visible{outline:3px solid #fff;outline-offset:3px}.workflow-bar{height:var(--workflow-height);padding:10px 34px;display:flex;align-items:center;gap:18px;position:relative;z-index:900;background:#0d1829;border-bottom:1px solid rgba(255,255,255,.1)}.project-controls{min-width:0;display:flex;align-items:center;gap:6px}.project-select{width:178px;height:46px;min-width:0;padding:0 34px 0 13px;border:1px solid rgba(255,255,255,.16);border-radius:12px;outline:0;color:#f8fbff;background:#1a2940;cursor:pointer}.project-select:focus-visible{outline:3px solid #ffd75e;outline-offset:2px}.project-action{height:42px;padding:0 9px;display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.14);border-radius:10px;color:#dce6f1;background:#ffffff12;cursor:pointer}.project-action:hover{background:#ffffff21}.project-action:focus-visible{outline:3px solid #ffd75e;outline-offset:2px}.project-action:disabled{opacity:.38;cursor:not-allowed}.project-action-danger:not(:disabled):hover{color:#fff;background:#a6454f}.view-controls{display:flex;align-items:center;gap:8px}.align-button{min-height:46px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#e4edf6;background:#ffffff12;font-weight:800;cursor:pointer}.align-button span:first-child{font-size:1.2rem}.align-button:hover{background:#ffffff24}.align-button:focus-visible{outline:3px solid #ffd75e;outline-offset:2px}.align-button:disabled{opacity:.38;cursor:not-allowed}.status-filters{display:inline-flex;padding:4px;border-radius:13px;background:#ffffff12}.status-filter{min-height:38px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:#9eb0c4;font-weight:700;cursor:pointer}.status-filter.active{background:#f7fafc;color:#101d32}.status-filter:focus-visible{outline:3px solid #ffd75e;outline-offset:2px}.completion-zone{height:52px;max-width:560px;flex:1;display:flex;align-items:center;gap:10px;padding:0 17px;border:2px dashed #71849a;border-radius:14px;color:#d6e0eb;background:#ffffff0b;transition:border-color .15s ease,background .15s ease,transform .15s ease}.completion-zone.drag-over{border-color:#94dda8;background:#94dda82e;transform:scale(1.01)}.completion-zone-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#94dda8;color:#173324;font-weight:900}.completion-zone-label{font-weight:800}.completed-count{color:#9fb0c5;font-size:.82rem}.completion-zone-hint{margin-left:auto;color:#8295aa;font-size:.78rem}.board{position:relative;height:calc(100dvh - var(--header-height) - var(--workflow-height));min-height:0;overflow:auto;overscroll-behavior:contain;background-color:#c79668;background-image:linear-gradient(#fff4de57,#fff4de57),url(/wood-board.png);background-position:center;background-size:cover;background-repeat:no-repeat;touch-action:pan-x pan-y}.project-dialog{width:min(420px,calc(100vw - 32px));padding:0;border:1px solid rgba(255,255,255,.15);border-radius:18px;color:#f8fbff;background:#14233a;box-shadow:0 24px 70px #0208148c}.project-dialog::backdrop{background:#040a14ad;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.project-form{display:grid;gap:12px;padding:24px}.project-form h2{margin:0 0 5px;font-size:1.22rem}.project-form label{color:#b8c6d7;font-size:.86rem}.project-form input{width:100%;height:48px;padding:0 13px;border:1px solid #60758f;border-radius:11px;outline:0;color:#fff;background:#0d192b}.project-form input:focus{border-color:#ffd75e;box-shadow:0 0 0 3px #ffd75e29}.project-error{min-height:1.2em;margin:-3px 0 0;color:#ffabb1;font-size:.82rem}.project-dialog-actions{display:flex;justify-content:flex-end;gap:9px}.dialog-button{min-height:44px;padding:0 17px;border:0;border-radius:11px;font-weight:800;cursor:pointer}.dialog-button-secondary{color:#d5e0eb;background:#ffffff17}.dialog-button-primary{color:#14233a;background:#ffd75e}.dialog-button:focus-visible{outline:3px solid #fff;outline-offset:2px}.board-grid{position:fixed;inset:calc(var(--header-height) + var(--workflow-height)) 0 0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,250,236,.28) 1.15px,transparent 1.15px);background-size:26px 26px}.notes-layer{position:relative;min-width:100%;min-height:100%}.empty-state{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;color:#9fb0c5;pointer-events:none;transition:opacity .2s ease}.empty-state[hidden]{display:none}.empty-icon{display:grid;place-items:center;width:58px;height:58px;border:2px dashed #6f849c;border-radius:16px;font-size:2rem}.empty-state h2{margin:19px 0 6px;color:#dbe6f1;font-size:1rem}.empty-state p{margin:0;font-size:.85rem}.note{--note-rotation: -.65deg;position:absolute;width:var(--note-width);height:var(--note-height);color:#17233a;border-radius:4px 4px 18px;background-image:linear-gradient(105deg,rgba(255,255,255,.14),transparent 32%),linear-gradient(to bottom,rgba(255,255,255,.09),transparent 18%);box-shadow:2px 3px 3px #030a1829,9px 14px 22px #030a184d,0 1px #ffffff59 inset;overflow:hidden;touch-action:none;transform:rotate(var(--note-rotation));transform-origin:50% 12%;animation:note-in .2s ease-out both;transition:box-shadow .15s ease,transform .15s ease}.note:nth-child(4n+2){--note-rotation: .8deg}.note:nth-child(4n+3){--note-rotation: -.35deg}.note:nth-child(4n+4){--note-rotation: .45deg}.note.search-hidden{display:none}.note.completed{opacity:.76;filter:saturate(.58)}.note.completed .note-text{text-decoration:line-through;text-decoration-thickness:2px}.note.completed:before{content:"✓";position:absolute;right:18px;bottom:14px;z-index:1;color:#17233a6b;font-size:2rem;font-weight:900;pointer-events:none}.note:after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;background:#0000001f;clip-path:polygon(100% 0,0 100%,100% 100%);pointer-events:none}.note.dragging{z-index:999!important;box-shadow:18px 26px 38px #030a1866,0 1px #ffffff59 inset;transform:rotate(0) scale(1.015);animation:none}.note.dragging .note-text{cursor:grabbing;-webkit-user-select:none;user-select:none;pointer-events:none}.note-yellow{background:#ffd75e}.note-pink{background:#ff9fbd}.note-blue{background:#7ad7ee}.note-green{background:#94dda8}.note-toolbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:7px 9px 5px 15px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.note.dragging .note-toolbar{cursor:grabbing}.color-palette{display:flex;align-items:center;gap:5px}.color-button{width:20px;height:20px;padding:0;border:2px solid rgba(23,35,58,.2);border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff40;transition:transform .15s ease,border-color .15s ease}.color-button:hover{transform:scale(1.15)}.color-button[aria-pressed=true]{border-color:#17233a;transform:scale(1.15)}.color-button-yellow{background:#ffd75e}.color-button-pink{background:#ff9fbd}.color-button-blue{background:#7ad7ee}.color-button-green{background:#94dda8}.color-button:focus-visible{outline:3px solid #fff;outline-offset:2px}.complete-button{width:38px;height:38px;flex:0 0 auto;border:2px solid rgba(23,35,58,.25);border-radius:50%;background:#ffffff57;color:#17233a80;font-size:1.15rem;font-weight:900;cursor:pointer}.complete-button[aria-pressed=true]{border-color:#204b31;background:#64be7d;color:#fff}.complete-button:focus-visible{outline:3px solid #fff;outline-offset:2px}.delete-button{width:38px;height:38px;border:0;border-radius:10px;background:#ffffff57;color:#182640;cursor:pointer;font-size:1.35rem;line-height:1;transition:background .15s ease,transform .15s ease}.delete-button:hover{background:#ffffffb3;transform:rotate(4deg)}.note-text{display:block;width:100%;height:calc(100% - 48px);padding:8px 17px 20px;border:0;outline:0;resize:none;background:transparent;color:#17233a;font-size:1rem;font-family:Klee,Klee One,Hannotate SC,YuKyokasho,Yu Gothic,cursive;font-weight:600;letter-spacing:.035em;line-height:1.72}.note-text::placeholder{color:#17233a7a}@keyframes note-in{0%{opacity:0;transform:scale(.86) rotate(calc(var(--note-rotation) - 2deg))}to{opacity:1;transform:scale(1) rotate(var(--note-rotation))}}@media(max-width:1080px){:root{--workflow-height: 132px}.save-status{display:none}.topbar-actions{gap:10px}.search-control{width:220px}.workflow-bar{flex-wrap:wrap;gap:8px 12px}.completion-zone{max-width:none;flex-basis:100%}}@media(max-width:767px){:root{--header-height: 136px;--workflow-height: 184px;--note-width: 174px;--note-height: 190px}.topbar{padding:8px 14px 12px;gap:8px;flex-wrap:wrap;align-content:center}.brand{gap:10px}.brand-mark{width:32px;height:32px;box-shadow:4px 4px #fc835f}.brand h1{font-size:1.08rem}.brand p,.save-status{display:none}.topbar-actions{width:100%;gap:7px}.search-control{min-width:0;width:auto;flex:1;height:44px;padding:0 9px}.search-count{font-size:.72rem}.create-color-picker{gap:5px;padding:6px;border-radius:12px}.create-color-button{width:22px;height:22px}.add-button{min-height:48px;padding:0 15px;border-radius:13px}.workflow-bar{padding:8px 14px;flex-direction:column;align-items:stretch;gap:7px}.project-controls{width:100%}.project-select{width:auto;flex:1;height:44px}.project-action{width:44px;height:44px;padding:0;justify-content:center}.project-action-label{display:none}.view-controls,.status-filters{align-self:center}.status-filter{min-height:36px;padding:0 14px}.align-button{min-height:44px;padding:0 11px}.completion-zone{width:100%;max-width:none;min-height:50px;padding:0 12px}.completion-zone-hint{font-size:.72rem}.note-toolbar{height:50px;padding:4px 6px 3px 8px}.color-palette{gap:3px}.color-button{width:16px;height:16px}.complete-button,.delete-button{width:42px;height:42px}.note-text{height:calc(100% - 50px);padding:5px 13px 16px;font-size:1rem}.board-grid{background-size:22px 22px}}@media(max-width:390px){.brand-mark,.search-icon{display:none}.search-control{padding:0 7px}.add-button span:last-child{display:none}.add-button{width:50px;padding:0;justify-content:center}.project-dialog-actions .dialog-button{flex:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root[data-theme=light]{color:#17233a;background:#f3f6fa}[data-theme=light] .topbar{background:#f3f6fa;border-color:#d4dde8}[data-theme=light] .workflow-bar{background:#e6edf5;border-color:#c8d3e0}[data-theme=light] .brand p,[data-theme=light] .save-status,[data-theme=light] .search-icon,[data-theme=light] .search-count,[data-theme=light] .completed-count,[data-theme=light] .completion-zone-hint{color:#52657b}[data-theme=light] .search-control,[data-theme=light] .create-color-picker,[data-theme=light] .status-filters{background:#fff;border-color:#b9c7d7}[data-theme=light] .search-input{color:#17233a}[data-theme=light] .search-input::placeholder{color:#60758f}[data-theme=light] .search-input::-webkit-search-cancel-button{filter:none}[data-theme=light] .search-control:focus-within{border-color:#346cac;box-shadow:0 0 0 3px #346cac22}[data-theme=light] .create-color-button[aria-pressed=true]{border-color:#17233a}[data-theme=light] .project-select,[data-theme=light] .project-action,[data-theme=light] .align-button,[data-theme=light] .theme-toggle{background:#fff;color:#17233a;border-color:#b9c7d7}[data-theme=light] .project-action:hover,[data-theme=light] .align-button:hover{background:#d5e3f2}[data-theme=light] .status-filter{color:#52657b}[data-theme=light] .status-filter.active{color:#fff;background:#203d61}[data-theme=light] .completion-zone{color:#203d61;border-color:#71849a;background:#ffffff70}[data-theme=light] .completion-zone.drag-over{border-color:#387a4a;background:#94dda870}[data-theme=light] .empty-state,[data-theme=light] .empty-state h2{color:#203047}[data-theme=light] .empty-icon{border-color:#52657b}[data-theme=light] .project-dialog{color:#17233a;background:#f3f6fa;border-color:#b9c7d7}[data-theme=light] .project-form label{color:#52657b}[data-theme=light] .project-form input{background:#fff;color:#17233a}[data-theme=light] .project-error{color:#a82737}[data-theme=light] .dialog-button-secondary{color:#17233a;background:#dde5ef}[data-theme=light] .project-action-danger:not(:disabled):hover{color:#fff;background:#a6454f}