:root{font-family:Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;color:#293e36;background:#f7f8f5;font-synthesis:none;font-weight:500;--note-width:240px;--note-height:230px}*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #2e7864;outline-offset:4px}.header{min-height:88px;border-bottom:1px solid #dfe4df;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 5vw;background:#fff}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:27px;font-weight:800;letter-spacing:.1em}.brand-icon{color:#52765b;font-size:34px}.brand-sub{font-size:11px;letter-spacing:.16em;margin-left:10px;font-weight:600}#save-status{font-size:13px;color:#65756c}main{max-width:1600px;margin:auto;padding:48px 5vw 20px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.18em;color:#788679;margin:0 0 12px}h1{font-size:30px;letter-spacing:.05em;margin:0;display:flex;align-items:center;gap:16px}#count{font-size:13px;letter-spacing:0;font-weight:500;background:#e9ede7;border-radius:20px;padding:5px 12px;white-space:nowrap}.description{font-size:14px;color:#738076;margin:12px 0 0}.add-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border:0;border-radius:8px;padding:12px 24px;color:#fff;background:#294c3e;box-shadow:0 3px 5px #263e3610;font-weight:700;white-space:nowrap}.add-button:hover{background:#3c6350}.add-button span{font-size:24px;font-weight:400}.board-frame{border:1px solid #dce2d9;border-radius:12px;overflow:hidden;background:#f0f3ec}.board-caption{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#607260;border-bottom:1px solid #dfe5dc}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#76916b;margin-right:10px}.board-label{font-size:10px;letter-spacing:.18em}#board{position:relative;min-height:490px;background-image:radial-gradient(#cbd4c6 1px,transparent 1px);background-size:22px 22px;isolation:isolate}.board-footer{display:flex;gap:24px;flex-wrap:wrap;padding:15px 24px;border-top:1px solid #dfe5dc;font-size:12px;color:#758070;background:#f6f8f2}.footnote{text-align:center;font-size:12px;color:#8a958a;letter-spacing:.08em;margin:22px 0}#empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:#7c8979;pointer-events:none}#empty-state[hidden]{display:none}.empty-icon{width:68px;height:68px;background:#e4eacb;border-radius:3px 3px 18px;box-shadow:3px 5px #d9e0d0;font-size:34px;display:grid;place-items:center;transform:rotate(-7deg);color:#84905f;margin-bottom:20px}h2{font-size:18px;font-weight:500;margin:8px 0}#empty-state p{font-size:13px;line-height:1.8}.note{position:absolute;width:var(--note-width);height:var(--note-height);background:#f8e99a;border-radius:3px 3px 16px;box-shadow:2px 5px 9px #35432b18;display:flex;flex-direction:column;overflow:hidden;border:1px solid #00000007}.note[data-color="1"]{background:#d9e8c4}.note[data-color="2"]{background:#f3d6c9}.note[data-color="3"]{background:#d0e3eb}.note.dragging{box-shadow:4px 12px 20px #35432b30;z-index:2}.note-header{display:flex;align-items:center;min-height:48px;border-bottom:1px solid #00000009}.drag-handle{align-self:stretch;flex:1;border:0;background:transparent;text-align:left;padding:0 16px;cursor:grab;touch-action:none;color:#596447;font-size:20px}.drag-handle:active{cursor:grabbing}.delete-note{width:44px;height:44px;border:0;background:transparent;color:#626850;font-size:23px}.delete-note:hover{background:#00000008}.note textarea{width:100%;flex:1;min-height:0;border:0;outline:none;background:transparent;resize:none;padding:14px 18px 18px;color:#3f4939;font-size:16px;line-height:1.8}.note textarea:focus{box-shadow:inset 0 0 0 2px #50674444}.note textarea::placeholder{color:#7a8165}.create-controls{flex-shrink:0}.new-color-label{display:block;font-size:13px;color:#607260;margin-bottom:8px}.create-actions{display:flex;gap:10px;align-items:center}.color-select{font:inherit;font-size:14px;min-height:48px;max-width:100%;border:1px solid #aebcac;border-radius:6px;padding:8px 10px;background:#fff;color:#293e36;cursor:pointer}.color-select:focus-visible{outline:3px solid #2e7864;outline-offset:2px}.note-color{width:108px;min-height:44px;padding:6px;border-color:#00000020;background:transparent}.note-header{flex-shrink:0}.drag-handle{min-width:44px;padding:0 12px}.delete-note{flex-shrink:0}.note[data-color="2"]{background:#f4d0df}.project-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #dce2d9}.project-controls label{font-size:14px;font-weight:700}.project-controls select{flex:1;min-width:150px;max-width:360px}.project-controls button,.project-controls select,dialog button,dialog input{font:inherit;min-height:48px;border:1px solid #aebcac;border-radius:6px;padding:10px 12px;background:#fff;color:#294c3e}.project-controls select:focus-visible,dialog input:focus-visible{outline:3px solid #2e7864;outline-offset:2px}dialog{width:min(440px,calc(100% - 32px));border:1px solid #aebcac;border-radius:12px;padding:24px;color:#294c3e}dialog::backdrop{background:#172a2466}dialog h2{font-weight:700;margin:0 0 20px}dialog label{display:block;margin-bottom:8px}dialog input{width:100%}dialog p{font-size:14px;line-height:1.8;overflow-wrap:anywhere}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}#submit-project{background:#294c3e;color:#fff}@media(max-width:480px){.project-controls label{width:100%}.project-controls select{max-width:none;width:100%;flex-basis:100%}.project-controls button{flex:1;padding:10px 8px;font-size:14px}}.status-filters{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}.status-filters button{min-height:48px;min-width:88px;border:1px solid #aebcac;border-radius:6px;background:#fff;color:#294c3e;padding:10px 18px}.status-filters button[aria-pressed=true]{background:#294c3e;color:#fff;border-color:#294c3e}#done-zone{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;min-height:78px;padding:16px 20px;margin:0 16px 16px;border:2px dashed #81977b;border-radius:10px;background:#f0f5e9;color:#34523e}#done-zone>span{font-size:13px}#done-count{font-size:13px;font-weight:500;margin-left:8px}.drag-active #done-zone{box-shadow:0 4px 12px #294c3e22}.note.drag-preview{position:fixed;z-index:1000;pointer-events:none;transform:none;opacity:.9;box-shadow:4px 12px 20px #35432b40}.drag-active .note.dragging{opacity:.25}#done-zone.drag-over{background:#cfe5ba;border-style:solid;box-shadow:0 0 0 3px #52765b33}.complete-note{flex-shrink:0;min-height:44px;align-self:flex-start;margin:0 12px 6px;padding:6px 12px;background:#fff5;border:1px solid #00000020;border-radius:6px;color:#34523e;font-size:14px}.note.is-done textarea{text-decoration:line-through;color:#5c6659}.note.is-done .complete-note{background:#294c3e;color:#fff;border-color:#294c3e}.note.is-done{border:2px solid #52765b}.search-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px;font-size:14px}.search-controls label{font-weight:700}.search-controls input{flex:1;min-width:120px;max-width:440px;min-height:48px;border:1px solid #aebcac;border-radius:6px;padding:10px 12px;font:inherit;font-size:16px;background:#fff;color:#293e36}.search-controls input:focus-visible{outline:3px solid #2e7864;outline-offset:2px}.search-controls button{min-height:48px;padding:8px 14px;border:1px solid #aebcac;border-radius:6px;background:#fff;color:#293e36}.search-controls button:disabled{opacity:.5;cursor:default}#search-count{white-space:nowrap;font-variant-numeric:tabular-nums}.note[hidden],#no-results[hidden]{display:none}#no-results{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:#607260}#no-results p{font-size:14px;line-height:1.8}@media(max-width:480px){.search-controls{gap:10px}.search-controls label{width:100%}.search-controls input{max-width:none}#search-count{width:100%}}.note textarea{font-family:Yomogi,Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;font-size:20px;font-weight:400;line-height:1.7}.note{transform:rotate(-1deg);transform-origin:center;box-shadow:0 1px 2px #35432b18,2px 5px 7px #35432b24,4px 9px 12px -6px #35432b35;background-image:linear-gradient(175deg,#ffffff18 0%,transparent 35%,#00000005 100%);transition:box-shadow .16s ease}.note:nth-of-type(2n){transform:rotate(1deg)}.note:nth-of-type(3n){transform:rotate(-.6deg)}.note.dragging{box-shadow:0 2px 4px #35432b18,4px 10px 16px #35432b30,7px 15px 20px -7px #35432b38}@media(prefers-reduced-motion:reduce){.note{transition:none}}@media(max-width:900px){.toolbar{flex-wrap:wrap}}@media(max-width:480px){.create-controls{width:100%}.create-actions .color-select{flex:0 0 112px}.create-actions .add-button{flex:1;min-width:0;padding:12px;gap:6px}}@media(min-width:1400px){#board{min-height:570px}}@media(max-width:800px){main{padding:32px 24px 16px}.header{padding:18px 24px}.brand-sub{display:none}h1{font-size:26px}.board-caption{padding:16px}.board-footer{padding:14px 16px}}@media(max-width:480px){:root{--note-width:260px}.header{min-height:72px;padding:14px 20px}.brand{font-size:23px}#save-status{font-size:11px;max-width:140px;text-align:right}main{padding:28px 16px 12px}.toolbar{align-items:stretch;flex-direction:column;gap:20px;margin-bottom:20px}h1{font-size:25px;gap:12px}.eyebrow{font-size:9px;letter-spacing:.12em}.description{font-size:13px}.add-button{width:100%;min-height:52px}.board-caption{font-size:12px}.board-label{display:none}#board{min-height:420px}.board-footer{gap:8px 16px;font-size:11px}.footnote{font-size:11px}}:root{color-scheme:light}.header{flex-wrap:wrap}.brand{flex-wrap:wrap;min-width:0}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap}#theme-toggle{min-height:48px;padding:10px 16px;border:1px solid #aebcac;border-radius:8px;background:#fff;color:#294c3e;white-space:nowrap}:root[data-theme=dark]{color-scheme:dark;background:#151c19;color:#e4eee7}[data-theme=dark] .header,[data-theme=dark] dialog{background:#1e2923;color:#e4eee7;border-color:#46594d}[data-theme=dark] :is(#save-status,.eyebrow,.description,.new-color-label,.footnote,#empty-state,#no-results){color:#afc1b4}[data-theme=dark] .brand-icon{color:#a5c794}[data-theme=dark] :is(.board-frame,.board-caption,.board-footer,.project-controls){border-color:#46594d}[data-theme=dark] .board-frame{background:#202b25}[data-theme=dark] #board{background-image:radial-gradient(#43574a 1px,transparent 1px)}[data-theme=dark] :is(.board-caption,.board-footer){background:#243229;color:#bdcdbf}[data-theme=dark] #count{background:#334638;color:#e4eee7}[data-theme=dark] :is(.project-controls button,.project-controls select,.search-controls input,.search-controls button,.status-filters button,#new-note-color,#theme-toggle,dialog input,dialog button){background:#29392f;color:#e4eee7;border-color:#718774}[data-theme=dark] :is(.add-button,#submit-project,.status-filters button[aria-pressed=true]){background:#b0d2a0;color:#192b20;border-color:#b0d2a0}[data-theme=dark] .add-button:hover{background:#c4e3b5}[data-theme=dark] #done-zone{background:#293e2e;color:#d6e7d5;border-color:#90ad87}[data-theme=dark] #done-zone.drag-over{background:#3d6043;border-color:#c0e3af}[data-theme=dark] .empty-icon{background:#42583b;color:#d2dfb9;box-shadow:3px 5px #19251b}[data-theme=dark] .note{color-scheme:light;box-shadow:0 2px 4px #0005,3px 8px 14px #0006}[data-theme=dark] .note.is-done{border-color:#a0c78e}[data-theme=dark] :is(button,input,select,a):focus-visible{outline-color:#b0d2a0}[data-theme=dark] .note :is(button,select):focus-visible{outline-color:#294c3e}[data-theme=dark] dialog::backdrop{background:#0009}@media(max-width:480px){.header-actions{width:100%;justify-content:space-between;gap:8px}.header-actions #save-status{max-width:none;text-align:left}.brand{font-size:21px;gap:8px}}
