:root{font-family:Noto Sans JP,sans-serif;color:#20211f;background:#f5f4ef}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#f5f4ef}button,textarea{font:inherit}.app-shell{min-height:100vh;padding:36px clamp(24px,6vw,96px) 42px;display:flex;flex-direction:column;gap:28px}.topbar{display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow{margin:0 0 5px;font-family:DM Mono,monospace;font-size:10px;letter-spacing:.13em;color:#777972}h1{margin:0;font:600 clamp(32px,4vw,52px)/.98 "Playfair Display",serif;letter-spacing:-.045em}h1 em{font-weight:600;color:#e77954}.new-note-controls{display:flex;align-items:center;gap:12px}.new-color-picker{display:flex;gap:6px}.color-swatch{width:22px;height:22px;padding:0;border:2px solid rgba(38,36,29,.2);border-radius:50%;cursor:pointer;transition:transform .15s,box-shadow .15s}.color-swatch:hover{transform:scale(1.12)}.color-swatch.selected{border-color:#31312d;box-shadow:0 0 0 2px #f5f4ef,0 0 0 4px #31312d}.color-swatch.yellow{background:#f5dc76}.color-swatch.pink{background:#efa8ad}.color-swatch.blue{background:#9cc8e2}.color-swatch.green{background:#9fd1ae}.theme-toggle{min-height:38px;padding:0 11px;border:1px solid #c9c3b8;border-radius:5px;background:#fffdf8;color:#454640;font-size:12px;cursor:pointer}.add-button{min-height:48px;border:0;border-radius:6px;padding:0 18px;color:#fffdf8;background:#252724;font-size:14px;font-weight:700;cursor:pointer;box-shadow:3px 3px #d5d4cd;transition:transform .15s,box-shadow .15s}.add-button span{font-size:22px;font-weight:400;vertical-align:-1px;margin-right:6px}.add-button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px #d5d4cd}.add-button:active{transform:translate(1px,1px);box-shadow:1px 1px #d5d4cd}.status-filter{display:flex;gap:7px}.status-filter button{min-height:34px;padding:0 13px;border:1px solid #c9c3b8;border-radius:999px;background:transparent;color:#706b62;font-size:12px;cursor:pointer}.status-filter button.selected{border-color:#30322f;background:#30322f;color:#fffdf8}.project-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border:1px solid #ddd7cc;border-radius:6px;background:#fffdf894}.project-bar label{color:#777269;font:10px DM Mono,monospace;letter-spacing:.1em}.project-bar select{min-width:170px;min-height:34px;padding:0 28px 0 10px;border:1px solid #c9c3b8;border-radius:4px;background:#fffdf8;color:#373833}.project-bar button{min-height:34px;padding:0 10px;border:1px solid #c9c3b8;border-radius:4px;background:transparent;color:#5d5b54;font-size:12px;cursor:pointer}.project-bar button:hover{background:#f1ede5}.project-bar .align-button{margin-left:auto;border-color:#667d8a;color:#36515f;font-weight:700}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}.board-area{flex:1;min-height:650px;display:flex;flex-direction:column}.board-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px 2px;color:#74766f;font:10px DM Mono,monospace;letter-spacing:.1em}.count-label{display:flex;align-items:center;gap:8px;white-space:nowrap}.live-dot{width:7px;height:7px;border-radius:50%;background:#e77954}.search-box{display:flex;align-items:center;gap:6px;min-width:190px;height:32px;padding:0 10px;border:1px solid #d1c9bd;border-radius:4px;background:#fffdf8a6;color:#8a7562;font:16px/1 sans-serif}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#4b463e;font:12px Noto Sans JP,sans-serif}.search-box input::placeholder{color:#9b958b}.board{position:relative;flex:1;min-height:610px;overflow:hidden;border:8px solid #b9865e;border-radius:5px;background-color:#e2bd92;background-image:radial-gradient(ellipse at 18% 14%,rgba(255,250,230,.48) 0 1px,transparent 2px),radial-gradient(ellipse at 72% 62%,rgba(139,91,55,.18) 0 1px,transparent 2px),radial-gradient(ellipse at 42% 76%,rgba(255,248,222,.34) 0 1px,transparent 2px),linear-gradient(115deg,rgba(148,99,60,.07) 25%,transparent 25% 50%,rgba(255,249,225,.16) 50% 75%,transparent 75%);background-size:11px 9px,13px 11px,17px 15px,8px 8px;box-shadow:inset 0 0 20px #80533124,0 2px 8px #35342e1f}.empty-state{position:absolute;inset:0;display:grid;place-content:center;margin:0;text-align:center;color:#92938c;font-size:14px;line-height:1.8;pointer-events:none}.done-area{min-height:270px;padding:16px;border:2px dashed #a5a393;border-radius:6px;background:#fffdf88c;transition:background .15s,border-color .15s,transform .15s}.done-area.drag-over{border-color:#5a8065;background:#e2f0e1;transform:scale(1.015)}.done-title{display:flex;align-items:center;gap:8px}.done-title span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#5f956d;color:#fff;font-weight:700}.done-title h2{margin:0;font:600 18px Noto Sans JP,sans-serif}.done-hint{margin:8px 0 15px;color:#818078;font-size:11px;line-height:1.55}.done-board{display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px;min-height:175px}.done-board .note{position:relative;width:100%;height:180px;left:auto!important;top:auto!important;opacity:.72;filter:saturate(.72)}.note.completed .note-text{text-decoration:line-through;color:#30312ba3}.note.completed .note-grip{display:none}.note{position:absolute;width:212px;height:212px;padding:28px 18px 14px;display:flex;flex-direction:column;border:1px solid rgba(62,58,43,.13);box-shadow:4px 6px #57361e2e,8px 13px 18px #4530203d;touch-action:none;transform:rotate(var(--tilt, 0deg));transition:box-shadow .16s,transform .16s}.note[data-color=yellow]{background:linear-gradient(135deg,#fff0a0,#f3d55d)}.note[data-color=pink]{background:linear-gradient(135deg,#ffc6ca,#e9969d)}.note[data-color=blue]{background:linear-gradient(135deg,#c7e8f6,#8ebdd9)}.note[data-color=green]{background:linear-gradient(135deg,#c3e9ca,#92cfa2)}.note:hover,.note:focus-within{z-index:2;box-shadow:5px 8px #57361e30,11px 17px 22px #4530204d}.note.dragging{z-index:5;transform:rotate(2deg) scale(1.02);box-shadow:8px 12px #57361e2b,14px 20px 25px #45302052}.note-grip{position:absolute;left:0;right:0;top:0;height:25px;display:flex;justify-content:center;align-items:center;gap:3px;cursor:grab}.note-grip:active{cursor:grabbing}.note-grip span{width:3px;height:3px;border-radius:50%;background:#2c292059}.delete-button{position:absolute;top:7px;right:8px;width:27px;height:27px;padding:0;border:0;border-radius:50%;background:#ffffff61;color:#282722b8;font-size:21px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}.note:hover .delete-button,.note:focus-within .delete-button{opacity:1}.delete-button:hover{background:#ffffffb3}.complete-button{position:absolute;top:7px;right:40px;width:27px;height:27px;padding:0;border:1px solid rgba(40,39,34,.35);border-radius:50%;background:#ffffff40;color:#282722b3;font-weight:700;cursor:pointer;opacity:0}.note:hover .complete-button,.note:focus-within .complete-button,.note.completed .complete-button{opacity:1}.complete-button.is-complete{border-color:#42764d;background:#42764d;color:#fff}.note-text{width:100%;height:100%;min-height:0;resize:none;border:0;outline:0;background:transparent;color:#30312b;font:20px/1.45 Yomogi,Noto Sans JP,cursive;letter-spacing:.025em}.note-text::placeholder{color:#30312b85}.note-colors{display:flex;gap:7px;padding:4px 0 7px}.note-colors .color-swatch{width:17px;height:17px}.note-colors .color-swatch.selected{box-shadow:0 0 0 1px #ffffffc7,0 0 0 3px #31312d}.note-footer{display:flex;justify-content:space-between;align-items:end;margin-top:1px;color:#30312b80;font:9px DM Mono,monospace;letter-spacing:.08em}.resize-mark{font:19px/1 sans-serif;transform:rotate(90deg)}@media(max-width:900px){.workspace{grid-template-columns:1fr}.done-area{min-height:220px}.done-board .note{width:184px}}@media(max-width:767px){.app-shell{padding:25px 24px 28px;gap:20px}.board-area{min-height:620px}.board{min-height:580px}.topbar{align-items:center}.add-button{min-height:50px;padding:0 15px;font-size:13px}.note{width:184px;height:184px;padding:28px 15px 12px}.note-text{font-size:18px}.delete-button{opacity:1;width:34px;height:34px;top:5px;right:5px}.complete-button{opacity:1;width:34px;height:34px;right:45px;top:5px}.note-colors .color-swatch{width:21px;height:21px}}@media(max-width:440px){.app-shell{padding:20px 16px 24px}.topbar{align-items:end;gap:12px}.new-note-controls{gap:9px}.new-color-picker{position:absolute;top:72px;right:16px}.eyebrow{font-size:8px}h1{font-size:34px}.add-button{min-height:52px;width:54px;padding:0;font-size:0}.add-button span{font-size:27px;margin:0}.board-area{min-height:630px;margin-top:22px}.board-caption{gap:8px}.search-box{min-width:0;flex:1}.board{min-height:590px}.note{width:168px;height:168px;padding:26px 13px 10px}.note-text{font-size:16px;line-height:1.4}.note-footer{font-size:8px}.note-colors{gap:6px;padding:2px 0 5px}.note-colors .color-swatch{width:19px;height:19px}}body.dark-mode{background:#1c211f;color:#edf0e8}body.dark-mode .app-shell{background:#1c211f}body.dark-mode .eyebrow,body.dark-mode .board-caption,body.dark-mode .project-bar label{color:#b7c0b4}body.dark-mode .theme-toggle,body.dark-mode .project-bar,body.dark-mode .project-bar select,body.dark-mode .project-bar button,body.dark-mode .search-box{background:#28302d;border-color:#4d5952;color:#edf0e8}body.dark-mode .search-box input{color:#f3f5ef}body.dark-mode .search-box input::placeholder{color:#a4aca4}body.dark-mode .status-filter button{border-color:#56645b;color:#d7ddd4}body.dark-mode .status-filter button.selected{background:#d7a063;border-color:#d7a063;color:#20231f}body.dark-mode .board{border-color:#765744;background-color:#9e734f;box-shadow:inset 0 0 20px #23191261}body.dark-mode .done-area{border-color:#65736a;background:#2b3530cc}body.dark-mode .done-hint,body.dark-mode .empty-state{color:#b8c0b4}body.dark-mode .note{box-shadow:4px 6px #00000047,8px 13px 18px #00000061}body.dark-mode .color-swatch.selected{box-shadow:0 0 0 2px #28302d,0 0 0 4px #edf0e8}