@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap";@import "https://fonts.googleapis.com/css2?family=Yomogi&display=swap";:root{color:#242522;background:#f7f6f2;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{font:inherit;cursor:pointer;border:0}.app-shell{max-width:1440px;margin:auto;padding:0 5.5vw}.topbar{border-bottom:1px solid #deded8;justify-content:space-between;align-items:center;height:84px;display:flex}.brand{letter-spacing:-.04em;align-items:center;gap:10px;font-size:20px;font-weight:700;display:flex}.brand-mark{color:#fff;background:#252622;border-radius:50%;place-items:center;width:28px;height:28px;font-size:14px;display:grid}.topbar-meta{align-items:center;gap:24px;display:flex}.save-state,.board-hint,footer{color:#8b8d84;letter-spacing:.04em;font:11px DM Mono,monospace}.save-dot,.live-dot{background:#78a972;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}.add-button{color:#fff;background:#252622;border-radius:5px;padding:12px 17px;font-size:13px;font-weight:600}.add-button span{vertical-align:-1px;font-size:18px}.intro{justify-content:space-between;align-items:end;padding:67px 0 48px;display:flex}.eyebrow{color:#a2917e;letter-spacing:.14em;margin:0 0 16px;font:11px DM Mono,monospace}.intro h1{letter-spacing:-.065em;margin:0 0 18px;font-size:clamp(34px,4vw,58px);line-height:1}.intro h1 em{color:#ad765e;font-family:Playfair Display,serif;font-weight:600}.subtitle{color:#797b73;margin:0;font-size:14px}.count-card{text-align:right}.count-card span{letter-spacing:-.08em;font-size:58px;line-height:.8;display:block}.count-card small{color:#a3a49e;letter-spacing:.15em;font:10px DM Mono,monospace}.board-wrap{border-top:1px solid #deded8}.board-heading{color:#9b9c95;letter-spacing:.12em;justify-content:space-between;align-items:center;height:50px;font:11px DM Mono,monospace;display:flex}.board{background-color:#fbfaf7;background-image:radial-gradient(#dddcd5 .8px,#0000 .8px);background-size:22px 22px;border:1px solid #e3e2dc;border-radius:6px;min-height:570px;position:relative;overflow:hidden}.empty-state{text-align:center;place-content:center;display:grid;position:absolute;inset:0}.empty-icon{color:#c7a993;font-size:34px;transform:rotate(-15deg)}.empty-state h2{letter-spacing:-.04em;margin:13px 0 7px;font-size:19px}.empty-state p{color:#999a93;margin:0 0 20px;font-size:13px}.empty-add{color:#ad765e;background:0 0;font-size:13px;font-weight:600}.note{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:2px 2px 5px;width:206px;height:176px;padding:17px 17px 14px;transition:box-shadow .15s,transform .15s;position:absolute;transform:rotate(-1.2deg);box-shadow:3px 5px #28281e0d,0 8px 18px #32322814}.note:nth-of-type(odd){transform:rotate(1.4deg)}.note.dragging{z-index:5;cursor:grabbing;transform:rotate(0)scale(1.03);box-shadow:8px 14px 25px #3232282e}.yellow{background:#f6e6a8}.coral{background:#f2c1a9}.mint{background:#bfe0d1}.lavender{background:#d4cbe6}.note-tools{color:#32322873;justify-content:space-between;align-items:center;display:flex}.grip{cursor:grab;font-size:17px}.delete{color:#32322873;background:0 0;min-width:36px;min-height:36px;padding:7px;font-size:22px;line-height:16px}.delete:hover{color:#8c5149}.note textarea{resize:none;color:#393a31;background:0 0;border:0;outline:0;width:100%;height:108px;padding:8px 0 0;font:15px/1.55 DM Sans,sans-serif}.note textarea::placeholder{color:#3c3c326b}.note-date{color:#3c3c3259;font:9px DM Mono,monospace;position:absolute;bottom:12px;right:15px}.pink{background:#f5c5d5}.blue{background:#bedcf4}.green{background:#bfe0c4}.color-toolbar{flex-wrap:wrap;align-items:center;gap:12px;padding:14px 0 0;font-size:13px;display:flex}.color-toolbar span{color:#797b73}.color-toolbar .empty-add{border:1px solid #c7a993;border-radius:6px;min-height:44px;padding:8px 12px}select{font:inherit;color:#393a31;cursor:pointer;background:#fbfaf7;border:1px solid #b4b3a7;border-radius:6px;min-height:44px;padding:0 8px}.note{padding:8px 12px 12px}.note-color{touch-action:manipulation;background:#ffffff59;width:104px;font-size:14px}.note-tools .delete{min-width:44px;min-height:44px}.note-tools .grip{flex:1;place-items:center;min-height:44px;display:grid}.note textarea{touch-action:auto;-webkit-user-select:text;user-select:text;height:108px;font-size:16px}button:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;outline:2px solid #65533e}.empty-state[hidden]{display:none}footer{justify-content:space-between;align-items:center;height:74px;display:flex}.board .note{flex-direction:column;max-width:none;padding-bottom:44px;display:flex;transform:none}.board .note textarea{flex:1;height:auto;min-height:0;font-family:Yomogi,Hiragino Maru Gothic ProN,cursive;font-size:20px;line-height:1.6}.note-tools{flex-shrink:0}.resize-handle{color:#65533e;cursor:nwse-resize;touch-action:none;background:0 0;width:44px;height:44px;font-size:20px;position:absolute;bottom:0;right:0}.board .note.resizing{z-index:6;box-shadow:0 8px 24px #3333}.board-controls{flex-wrap:wrap;align-items:end;gap:12px;padding:18px 0;display:flex}.board-controls label,#categoryNames label{flex-direction:column;gap:5px;max-width:100%;font-size:13px;display:flex}.board-controls input[type=search],#categoryNames input{width:100%;min-width:0;min-height:44px;font:inherit;background:#fff;border:1px solid #b4b3a7;border-radius:6px;padding:10px}.board-controls button,.import-label{color:#393a31;background:#ebe8df;border-radius:6px;min-height:44px;padding:10px 12px;font-size:13px}.board-controls button:disabled{opacity:.45;cursor:default}.board-controls .check-label{flex-direction:row;align-items:center;min-height:44px}input[type=checkbox]{accent-color:#65533e;width:22px;height:22px}.import-label{cursor:pointer;justify-content:center;position:relative;overflow:hidden}.import-label input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.import-label:focus-within{outline:2px solid #65533e}.category-settings summary{cursor:pointer;padding:12px 0;font-size:14px}#categoryNames{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;display:grid}#boardStatus{color:#65533e;font-size:13px;line-height:1.6}.note-done{cursor:pointer;touch-action:manipulation;align-items:center;gap:6px;height:44px;font-size:13px;display:flex;position:absolute;bottom:0;left:12px}.completed textarea{opacity:.65;text-decoration:line-through}.board-controls select{max-width:100%}.theme-toggle{min-height:44px;color:inherit;background:0 0;border:1px solid #b4b3a7;border-radius:6px;padding:8px 12px;font-size:13px}.theme-toggle span{margin-right:4px;font-size:17px}.dark-mode{color:#edf0ed;background:#1b1d22}.dark-mode .topbar,.dark-mode .board-wrap{border-color:#3a3d45}.dark-mode .brand-mark,.dark-mode .add-button{color:#1b1d22;background:#edf0ed}.dark-mode .board{background-color:#24272e;background-image:radial-gradient(#4b505b .8px,#0000 .8px);border-color:#454a55}.dark-mode .subtitle,.dark-mode .color-toolbar span,.dark-mode .empty-state p,.dark-mode .board-heading,.dark-mode footer{color:#b4b9c0}.dark-mode .empty-icon,.dark-mode .empty-add,.dark-mode #boardStatus{color:#e4ad87}.dark-mode select,.dark-mode .board-controls input[type=search],.dark-mode #categoryNames input{color:#edf0ed;background:#2d3139;border-color:#5a616d}.dark-mode .board-controls button,.dark-mode .import-label{color:#edf0ed;background:#363b45}.dark-mode .theme-toggle{color:#edf0ed;border-color:#5a616d}.dark-mode .color-toolbar .empty-add{border-color:#a8795d}.dark-mode .note textarea{color:#292b2d}@media (width<=700px){.app-shell{padding:0 18px}.topbar{height:70px}.topbar-meta{gap:10px}.save-state{display:none}.add-button{padding:12px 13px}.intro{align-items:start;padding:42px 0 35px}.intro h1{font-size:37px}.subtitle{max-width:240px;line-height:1.7}.count-card span{font-size:43px}.board-heading{height:45px}.board-hint{display:none}.board{min-height:calc(100vh - 280px)}.note{width:calc(100% - 40px);max-width:206px;height:176px}.empty-state p{padding:0 22px;line-height:1.7}footer{height:60px}}