@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Reggae+One&family=Yomogi&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap";:root{color:#28302d;font-synthesis:none;text-rendering:optimizelegibility;--ink:#28302d;--muted:#7a827d;--green:#245846;--line:#dce1d9;background:#f6f7f2;font-family:DM Sans,Zen Kaku Gothic New,sans-serif}*{box-sizing:border-box}body{background:#f6f7f2;min-width:320px;min-height:100vh;margin:0}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{grid-template-rows:auto auto auto 1fr auto;min-height:100vh;display:grid}.topbar{border-bottom:1px solid var(--line);background:#fcfdf9eb;justify-content:space-between;align-items:center;gap:24px;min-height:108px;padding:22px clamp(24px,4vw,64px);display:flex}.brand{align-items:center;gap:16px;display:flex}.brand-mark{border:2px solid var(--green);background:#e8b94c;border-radius:5px;flex:none;width:42px;height:42px;position:relative;transform:rotate(-3deg);box-shadow:5px 5px #d9ead9}.brand-mark:after{content:"";border-top:0 solid #0000;border-bottom:10px solid #f8f0cf;border-left:10px solid #0000;border-right:0 solid #0000;position:absolute;bottom:-2px;right:-2px}h1{letter-spacing:-.04em;margin:0 0 2px;font-size:24px;line-height:1.1}.brand p{color:var(--muted);letter-spacing:.08em;margin:0;font-size:12px}.theme-toggle{border:1px solid var(--line);color:#385747;cursor:pointer;background:#fff;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;font-size:22px;line-height:1;transition:transform .2s,background .2s;display:grid;box-shadow:0 3px 10px #28302d14}.theme-toggle:hover{transform:rotate(-12deg)scale(1.05)}.theme-toggle:focus-visible{outline-offset:2px;outline:3px solid #75a993}.search-box{background:#fff;border:1px solid #d5dcd4;border-radius:22px;align-items:center;gap:8px;width:clamp(190px,24vw,320px);height:44px;padding:0 13px;transition:border-color .16s,box-shadow .16s;display:flex;box-shadow:0 2px 8px #2e3c330a}.search-box:focus-within{border-color:#75a993;box-shadow:0 0 0 3px #75a9932e}.search-box span{color:#76817b;font-size:24px;line-height:1;transform:rotate(-15deg)}.search-box input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0;font-size:14px}.search-box input::placeholder{color:#9aa19d}.search-box input::-webkit-search-cancel-button{cursor:pointer}.add-controls{align-items:center;gap:14px;display:flex}.add-button{color:#fff;background:var(--green);cursor:pointer;border:0;border-radius:8px;min-height:48px;padding:0 22px;font-weight:700;transition:transform .16s,box-shadow .16s,background .16s;box-shadow:0 4px #173f32,0 8px 18px #24584626}.add-button span{margin-right:7px;font-size:20px;line-height:0}.add-button:hover{background:#1e4c3c;transform:translateY(-1px)}.add-button:active{transform:translateY(3px);box-shadow:0 1px #173f32}.add-button:focus-visible,.note button:focus-visible,.note textarea:focus-visible,.color-swatch:focus-visible{outline-offset:3px;outline:3px solid #75a993}.new-color-picker,.note-color-picker{align-items:center;display:flex}.new-color-picker{border:1px solid var(--line);background:#fff;border-radius:20px;gap:7px;padding:7px 9px}.color-swatch{--swatch:#f4d972;background:var(--swatch);cursor:pointer;border:2px solid #28302d24;border-radius:50%;width:24px;height:24px;padding:0;transition:transform .15s,box-shadow .15s;box-shadow:inset 0 1px 1px #ffffffbf}.color-swatch:hover{transform:scale(1.1)}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--green);transform:scale(.88)}.color-swatch--pink{--swatch:#efb7b7}.color-swatch--white{--swatch:#fffef7}.color-swatch--green{--swatch:#beddbb}.project-bar{border-bottom:1px solid var(--line);background:#fafbf7;align-items:center;gap:12px;min-height:58px;padding:8px clamp(24px,4vw,64px);display:flex}.project-label{color:#8a928d;letter-spacing:.12em;flex:none;font-size:10px;font-weight:700}.project-list{scrollbar-width:thin;align-items:center;gap:6px;min-width:0;padding:3px 1px;display:flex;overflow-x:auto}.project-tab{color:#69736d;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;flex:none;max-width:220px;height:38px;padding:0 16px;font-size:13px;font-weight:700;overflow:hidden}.project-tab:hover{background:#eef2ec}.project-tab[aria-pressed=true]{color:#245846;background:#e4eee7;border-color:#b9cbbf;box-shadow:inset 3px 0 #4f876d}.project-actions{flex:none;align-items:center;gap:6px;margin-left:auto;display:flex}.project-actions button{color:#5f6e66;cursor:pointer;background:#fff;border:1px solid #d5dcd4;border-radius:7px;min-width:36px;height:36px;padding:0 10px;font-size:14px;font-weight:700}.project-actions button:hover{background:#f1f6f2;border-color:#91ad9d}.project-actions button:last-child{color:#fff;border-color:var(--green);background:var(--green);padding:0 14px}.project-actions button:disabled{opacity:.35;cursor:not-allowed}.project-actions button:focus-visible,.project-tab:focus-visible{outline-offset:2px;outline:3px solid #75a993}.status-filter{border-bottom:1px solid var(--line);background:#f2f4ef;justify-content:center;align-items:center;gap:14px;min-height:54px;padding:8px clamp(24px,4vw,64px);display:flex}.status-filter>span{color:#8a928d;letter-spacing:.12em;font-size:11px}.status-filter>div{background:#fff;border:1px solid #d7ddd5;border-radius:22px;padding:4px;display:flex}.status-filter button{color:#69736d;cursor:pointer;background:0 0;border:0;border-radius:17px;min-width:82px;height:34px;padding:0 16px;font-size:13px;font-weight:700}.status-filter button[aria-pressed=true]{color:#fff;background:var(--green);box-shadow:0 2px 5px #2458462e}.status-filter button:focus-visible{outline-offset:2px;outline:3px solid #75a993}.board-wrap{padding:28px clamp(24px,4vw,64px)}.board{background:#fbfcf8;border:1px solid #d7ddd4;border-radius:14px;width:100%;height:clamp(560px,100vh - 205px,900px);min-height:560px;position:relative;overflow:hidden;box-shadow:0 12px 34px #2e3c330f,inset 0 1px #fff}.board-grid{opacity:.65;background-image:linear-gradient(#e5e9e1 1px,#0000 1px),linear-gradient(90deg,#e5e9e1 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0%,#000c 70%,#0000 100%);mask-image:linear-gradient(#000 0%,#000c 70%,#0000 100%)}#notes-layer{position:absolute;inset:0}.completion-zone{z-index:1;color:#557365;background:#deefe473;border:2px dashed #91af9f;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;width:300px;height:245px;padding:20px;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;display:flex;position:absolute;bottom:24px;right:24px}.completion-zone strong{margin-top:8px;font-size:15px}.completion-zone small{color:#7b9186;margin-top:5px;font-size:11px}.completion-icon{border:2px solid #7ca18d;border-radius:50%;place-items:center;width:38px;height:38px;font-size:21px;font-weight:700;display:grid}.completion-zone--active{background:#b7e0c7cc;border-color:#2f7559;transform:scale(1.02);box-shadow:0 0 0 6px #4f8b6a1f}.empty-state{z-index:0;text-align:center;width:min(440px,80%);color:var(--muted);position:absolute;top:50%;left:50%;transform:translate(-50%,-54%)}.empty-state[hidden]{display:none}.empty-state h2{color:#4d5752;margin:20px 0 8px;font-size:18px}.empty-state p{margin:0;font-size:14px;line-height:1.8}.empty-note{border:2px dashed #acb6ae;border-radius:5px;width:62px;height:62px;display:inline-block;position:relative;transform:rotate(-4deg)}.empty-note:before,.empty-note:after{content:"";background:#c0c8c1;position:absolute}.empty-note:before{width:24px;height:2px;top:24px;left:17px}.empty-note:after{width:2px;height:24px;top:13px;left:28px}.note{--paper:#f4d972;background:linear-gradient(135deg,#ffffff21,transparent 48%,#52462109),var(--paper);transform-origin:50% 10%;border:1px solid #4b45281a;border-radius:2px 3px 9px 2px;flex-direction:column;width:230px;height:190px;padding:12px 14px 18px;transition:box-shadow .18s,transform .18s,background .2s;display:flex;position:absolute;transform:rotate(-1.1deg);box-shadow:2px 3px 3px #2f363021,7px 12px 20px #2f363029,inset -1px 0 1px #ffffffb3}.note:after{content:"";background:linear-gradient(135deg,#ffffff8c 0 48%,#5c543726 51% 100%);border-radius:14px 0 8px;width:24px;height:24px;position:absolute;bottom:0;right:0;box-shadow:-2px -2px 4px #5246210a}.note--pink{--paper:#efb7b7;transform:rotate(.8deg)}.note--white{--paper:#fffef7;transform:rotate(-.55deg)}.note--green{--paper:#beddbb;transform:rotate(1.05deg)}.note:hover{box-shadow:3px 4px 4px #2f363024,9px 16px 25px #2f363030,inset -1px 0 1px #ffffffb3}.note--dragging{cursor:grabbing;transform:rotate(2deg)scale(1.025);box-shadow:5px 8px 8px #2f363026,14px 26px 40px #2f363040}.note--entering{animation:.24s ease-out note-in}.note--leaving{pointer-events:none;animation:.18s ease-in forwards note-out}.note[hidden]{display:none}.note--completed{filter:saturate(.6);opacity:.82}.note--completed textarea{-webkit-text-decoration:line-through #28302d80;text-decoration:line-through #28302d80;text-decoration-thickness:1.5px}.note--completed:before{content:"完了";color:#245846;letter-spacing:.12em;border:1px solid #24584673;border-radius:3px;padding:3px 8px;font-family:Zen Kaku Gothic New,sans-serif;font-size:10px;font-weight:700;position:absolute;bottom:14px;right:14px;transform:rotate(-6deg)}.note-toolbar{justify-content:space-between;align-items:center;height:30px;display:flex}.note-color-picker{gap:5px}.note-color-picker .color-swatch{border-width:1px;width:16px;height:16px}.note-color-picker .color-swatch[aria-pressed=true]{box-shadow:0 0 0 1px #ffffffe6,0 0 0 3px #245846cc}.drag-handle,.delete-button,.complete-button{color:#24302a8c;cursor:pointer;background:0 0;border:0}.drag-handle{touch-action:none;cursor:grab;grid-template-columns:repeat(3,3px);align-content:center;gap:4px;width:36px;height:38px;margin:-6px 0 0 -10px;padding:10px 9px;display:grid}.drag-handle span{background:currentColor;border-radius:50%;width:3px;height:3px}.complete-button{border:1.5px solid #24584666;border-radius:50%;width:30px;height:30px;padding:0;font-size:16px;font-weight:700}.complete-button[aria-pressed=true]{color:#fff;border-color:var(--green);background:var(--green)}.delete-button{border-radius:50%;width:32px;height:38px;margin:-6px -9px 0 0;font-size:25px;line-height:1}.delete-button:hover{color:#782e2e;background:#ffffff4d}.note textarea{resize:none;color:#343a36;letter-spacing:.035em;background:0 0;border:0;outline:0;flex:1;width:100%;font-family:Yomogi,Zen Kaku Gothic New,cursive;font-size:18px;line-height:1.65}.note textarea::placeholder{color:#343a3673}.footer{color:#8a928d;border-top:1px solid var(--line);letter-spacing:.1em;background:#f2f4ef;justify-content:space-between;align-items:center;gap:20px;min-height:46px;padding:0 clamp(24px,4vw,64px);font-size:10px;display:flex}.footer p{margin:0}.status-dot{background:#5b9b77;border-radius:50%;width:6px;height:6px;margin-right:7px;display:inline-block;box-shadow:0 0 0 3px #5b9b771f}@keyframes note-in{0%{opacity:0;transform:translateY(12px)scale(.94)rotate(-2deg)}}@keyframes note-out{to{opacity:0;transform:translateY(10px)scale(.9)rotate(3deg)}}@media (width<=900px){.topbar{flex-wrap:wrap}.search-box{order:3;width:100%}}@media (width<=767px){.topbar{gap:10px;min-height:148px;padding:12px 20px}.brand{gap:12px}.brand-mark{width:36px;height:36px;box-shadow:4px 4px #d9ead9}h1{font-size:21px}.brand p{display:none}.add-controls{flex-direction:column-reverse;align-items:stretch;gap:7px}.new-color-picker{justify-content:center;padding:5px 7px}.new-color-picker .color-swatch{width:22px;height:22px}.add-button{min-height:44px;padding:0 16px}.search-box{height:42px}.project-bar{flex-wrap:wrap;gap:7px;padding:8px 14px}.project-label{display:none}.project-list{order:2;width:100%}.project-actions{justify-content:flex-end;width:100%;margin-left:0}.status-filter{min-height:52px}.board-wrap{padding:18px 20px}.board{height:calc(100svh - 350px);min-height:680px}.completion-zone{width:280px;height:225px;bottom:18px;right:18px}.footer{min-height:46px;padding:0 20px}}@media (width<=480px){.topbar{gap:8px;padding:10px 12px}.brand-mark{display:none}h1{font-size:18px}.add-controls{width:134px}.add-button{padding:0 10px;font-size:13px}.new-color-picker{gap:6px}.new-color-picker .color-swatch{width:21px;height:21px}.project-bar{padding:7px 10px}.project-actions button{height:34px}.project-actions button:last-child{order:-1;margin-right:auto}.project-list{padding-bottom:2px}.project-tab{max-width:180px;height:36px}.status-filter{gap:7px;padding:7px 10px}.status-filter>span{display:none}.status-filter button{min-width:0;padding:0 16px}.board-wrap{padding:12px}.board{border-radius:10px;height:calc(100svh - 326px);min-height:720px}.completion-zone{width:calc(100% - 24px);height:220px;bottom:12px;right:12px}.note{width:min(230px,100vw - 48px);height:184px}.drag-handle,.delete-button{min-width:34px;min-height:38px}.footer{padding:0 14px}.footer p:first-child{white-space:nowrap;text-overflow:ellipsis;max-width:220px;overflow:hidden}}.note{aspect-ratio:2;width:300px;height:auto}@media (width<=480px){.note{aspect-ratio:2;width:min(300px,100vw - 48px);height:auto}}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#e8e1d4;--muted:#9c948b;--green:#845069;--line:#3a3038;background:#120f14;font-family:Reggae One,Zen Kaku Gothic New,cursive}[data-theme=dark] body{color:#e8e1d4;background:#120f14;font-family:Reggae One,Zen Kaku Gothic New,cursive}[data-theme=dark] .topbar{background:#19141bf5;border-color:#3a3038}[data-theme=dark] .brand-mark{background:#b68645;border-color:#a86884;box-shadow:5px 5px #4b2939}[data-theme=dark] .brand-mark:after{border-color:#0000 #0000 #d5bd86}[data-theme=dark] .brand p,[data-theme=dark] .project-label,[data-theme=dark] .status-filter>span{color:#a99ba5}[data-theme=dark] .theme-toggle,[data-theme=dark] .search-box,[data-theme=dark] .new-color-picker,[data-theme=dark] .project-actions button,[data-theme=dark] .status-filter>div{color:#eadde5;background:#261f28;border-color:#51414c;box-shadow:0 4px 16px #0000004d}[data-theme=dark] .theme-toggle{color:#efc778}[data-theme=dark] .search-box input{color:#f1e8ed}[data-theme=dark] .search-box input::placeholder{color:#8d7d87}[data-theme=dark] .project-bar{background:#19151b;border-color:#3a3038}[data-theme=dark] .project-tab{color:#b7aab2}[data-theme=dark] .project-tab:hover{background:#2c232a}[data-theme=dark] .project-tab[aria-pressed=true]{color:#f1d4e2;background:#3c2733;border-color:#704b60;box-shadow:inset 3px 0 #b06d8d}[data-theme=dark] .project-actions button:hover{background:#342731;border-color:#895b72}[data-theme=dark] .project-actions button:last-child,[data-theme=dark] .add-button,[data-theme=dark] .status-filter button[aria-pressed=true]{background:#79425e;border-color:#8d516f;box-shadow:0 3px #432233}[data-theme=dark] .status-filter{background:#151217;border-color:#3a3038}[data-theme=dark] .status-filter button{color:#c2b6bd}[data-theme=dark] .board-wrap{background:radial-gradient(circle at 50% 0,#211923,#120f14 68%)}[data-theme=dark] .board{background:#1b171d;border-color:#493d47;box-shadow:0 16px 42px #0006,inset 0 1px #ffffff08}[data-theme=dark] .board-grid{opacity:.35;background-image:linear-gradient(#493b46 1px,#0000 1px),linear-gradient(90deg,#493b46 1px,#0000 1px)}[data-theme=dark] .completion-zone{color:#c495ac;background:#4a253957;border-color:#754c61}[data-theme=dark] .completion-zone small{color:#a78395}[data-theme=dark] .completion-icon{border-color:#a56584}[data-theme=dark] .empty-state,[data-theme=dark] .empty-state h2{color:#a99ba5}[data-theme=dark] .footer{color:#9b8c95;background:#171318;border-color:#3a3038}[data-theme=dark] .note textarea{letter-spacing:.055em;font-family:Reggae One,Zen Kaku Gothic New,cursive;font-size:16px}[data-theme=dark] .note{box-shadow:3px 5px 5px #00000059,10px 18px 28px #0000006b}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}