:root{font-family:Noto Sans JP,sans-serif;color:#24342d;background:#ece8dc;font-synthesis:none;--header-height: 76px;--note-width: 250px;--note-height: 210px;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%}body{min-height:100vh;overflow:hidden}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{min-height:100vh;background:#f4f1e9}.topbar{height:var(--header-height);padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#faf8f2f0;border-bottom:1px solid #dedacf;box-shadow:0 3px 16px #343a2d0d;position:relative;z-index:100}.brand{display:inline-flex;align-items:center;gap:13px;color:#26392f;text-decoration:none;font:700 20px/1 DM Sans,Noto Sans JP,sans-serif;white-space:nowrap}.brand-mark{width:36px;height:36px;border-radius:9px;position:relative;display:block;background:#5d806c;box-shadow:inset 0 -3px #00000014}.brand-mark span{position:absolute;width:13px;height:13px;border-radius:3px;box-shadow:0 2px 4px #0000001a}.brand-mark span:nth-child(1){background:#f2cb62;left:7px;top:7px;transform:rotate(-5deg)}.brand-mark span:nth-child(2){background:#e89b7f;right:6px;top:9px;transform:rotate(5deg)}.brand-mark span:nth-child(3){background:#b8d8c5;left:10px;bottom:6px;transform:rotate(3deg)}.header-actions{display:flex;align-items:center;gap:clamp(16px,2.5vw,34px)}.save-status{display:inline-flex;align-items:center;gap:8px;color:#6f7973;font-size:13px;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:#739982;box-shadow:0 0 0 3px #dfe9e2}.theme-toggle{position:relative;width:42px;height:42px;flex:0 0 42px;border:1px solid #d8d5cc;border-radius:9px;background:#f5f2ea;color:#4d6659;cursor:pointer;box-shadow:inset 0 1px #ffffffb3;transition:background .2s,color .2s,transform .18s}.theme-toggle:hover{background:#ebe7dd;transform:translateY(-1px)}.theme-toggle:focus-visible{outline:3px solid rgba(49,94,76,.35);outline-offset:2px}.sun-icon,.moon-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .2s,transform .25s}.sun-icon{width:15px;height:15px;border:2px solid currentColor;border-radius:50%;box-shadow:0 -9px 0 -6px currentColor,0 9px 0 -6px currentColor,9px 0 0 -6px currentColor,-9px 0 0 -6px currentColor,6px 6px 0 -6px currentColor,-6px -6px 0 -6px currentColor,6px -6px 0 -6px currentColor,-6px 6px 0 -6px currentColor}.moon-icon{width:19px;height:19px;border-radius:50%;box-shadow:-6px 3px 0 0 currentColor;opacity:0;transform:translate(-35%,-55%) rotate(-20deg)}.add-note-control{position:relative}.add-button{border:0;border-radius:9px;background:#315e4c;color:#fff;min-height:42px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;cursor:pointer;box-shadow:0 4px 10px #315e4c2e;transition:.18s ease}.add-button:hover{background:#264e3e;transform:translateY(-1px)}.add-button:active{transform:translateY(1px)}.add-button span:first-child{font:400 24px/1 sans-serif;margin-top:-2px}.menu-chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 0 0 3px}.add-button[aria-expanded=true] .menu-chevron{transform:rotate(225deg);margin-top:4px}.add-button:focus-visible,.delete-note:focus-visible,.note-text:focus-visible{outline:3px solid rgba(49,94,76,.35);outline-offset:2px}.add-color-menu{position:absolute;top:calc(100% + 9px);right:0;width:174px;padding:7px;background:#fffdf8;border:1px solid #ded9ce;border-radius:11px;box-shadow:0 13px 30px #2d342d2b;z-index:110}.add-color-menu[hidden]{display:none}.add-color-menu button{width:100%;min-height:42px;padding:0 10px;border:0;border-radius:7px;background:transparent;display:flex;align-items:center;gap:10px;color:#344239;font-weight:600;cursor:pointer}.add-color-menu button:hover,.add-color-menu button:focus-visible{background:#f1eee6;outline:none}.color-swatch{width:23px;height:23px;border-radius:6px;border:1px solid rgba(60,57,45,.12);box-shadow:inset 0 1px #ffffff8c}.color-swatch.yellow,[data-color=yellow]{--swatch: #f5d77d}.color-swatch.pink,[data-color=pink]{--swatch: #eab199}.color-swatch.blue,[data-color=blue]{--swatch: #b9d5e7}.color-swatch.green,[data-color=green]{--swatch: #b9d9c6}.color-swatch{background:var(--swatch)}.board{position:relative;height:calc(100vh - var(--header-height));min-height:400px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;background-color:#f3f0e8}.board-grid{position:fixed;inset:var(--header-height) 0 0;pointer-events:none;opacity:.5;background-image:radial-gradient(#c8c5ba 1px,transparent 1px);background-size:26px 26px}.empty-state{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none;padding:24px;transition:opacity .2s}.empty-state.hidden{opacity:0;visibility:hidden}.empty-illustration{width:116px;height:100px;position:relative;margin-bottom:22px}.paper{position:absolute;display:block;width:82px;height:78px;border-radius:3px}.paper-back{left:10px;top:10px;background:#e8af93;transform:rotate(-8deg);box-shadow:0 9px 18px #493f3021}.paper-front{left:25px;top:4px;background:#f4d574;transform:rotate(5deg);box-shadow:0 10px 22px #493f302b;padding:24px 16px}.paper-front:after{content:"";position:absolute;right:0;bottom:0;border:11px solid transparent;border-right-color:#d4b957;border-bottom-color:#d4b957}.paper-front i{display:block;height:3px;margin-bottom:8px;border-radius:2px;background:#675b3638}.empty-state h1{font-size:clamp(20px,3vw,25px);margin:0 0 10px;color:#31433a}.empty-state p{margin:0;color:#7d827e;font-size:14px}.note{position:absolute;width:var(--note-width);height:var(--note-height);padding:11px 14px 15px;background:var(--note-color, #f5d77d);border-radius:3px;box-shadow:0 2px 3px #3731211f,0 9px 18px #37312124,2px 16px 28px #37312114,inset 0 1px #ffffff7a,inset 0 -1px #53482b14;transform:rotate(var(--note-rotation, -.7deg));transform-origin:center;transition:box-shadow .18s,transform .18s;overflow:hidden}.note:nth-of-type(4n+1){--note-rotation: -.8deg}.note:nth-of-type(4n+2){--note-rotation: .65deg}.note:nth-of-type(4n+3){--note-rotation: -.35deg}.note:nth-of-type(4n){--note-rotation: .9deg}.note[data-color=yellow]{--note-color: #f5d77d}.note[data-color=pink]{--note-color: #eab199}.note[data-color=blue]{--note-color: #b9d5e7}.note[data-color=green]{--note-color: #b9d9c6}.note.dragging{z-index:50;box-shadow:0 5px 8px #2d2c2221,0 22px 38px #2d2c223d;transform:rotate(calc(var(--note-rotation, 0deg) + 1deg)) scale(1.025);transition:box-shadow .18s,transform .18s}.note-toolbar{height:25px;display:flex;align-items:flex-start;justify-content:space-between}.drag-handle{width:38px;height:29px;margin:-4px 0 0 -7px;display:grid;grid-template-columns:repeat(2,3px);grid-template-rows:repeat(3,3px);gap:4px;place-content:center;cursor:grab;touch-action:none}.drag-handle:active{cursor:grabbing}.drag-handle i{width:3px;height:3px;border-radius:50%;background:#403d305c}.note-colors{display:flex;align-items:center;gap:5px;margin-top:-1px}.note-colors button{width:22px;height:22px;padding:0;border:2px solid rgba(255,255,255,.72);border-radius:50%;background:var(--swatch);box-shadow:0 1px 3px #38352b33;cursor:pointer;transition:transform .14s,box-shadow .14s}.note-colors button:hover{transform:scale(1.12)}.note-colors button.selected{box-shadow:0 0 0 2px #314037ad,0 1px 3px #38352b33;transform:scale(1.06)}.note-colors button:focus-visible{outline:3px solid rgba(49,94,76,.38);outline-offset:2px}.delete-note{width:32px;height:32px;margin:-5px -7px 0 0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;opacity:.55;transition:.15s}.delete-note:hover{background:#5f3e321a;opacity:1}.delete-note span{width:14px;height:16px;position:relative;border:2px solid currentColor;border-top:0;border-radius:0 0 3px 3px}.delete-note span:before{content:"";position:absolute;width:16px;height:2px;background:currentColor;left:-3px;top:-4px;border-radius:2px}.delete-note span:after{content:"";position:absolute;width:6px;height:2px;background:currentColor;left:2px;top:-7px;border-radius:2px}.note-text{width:100%;height:calc(100% - 25px);resize:none;border:0;padding:5px 4px;background:transparent;color:#3c3d34;font-size:15px;line-height:1.7;outline:none}.note-text::placeholder{color:#3f3d316b}.note-corner{position:absolute;width:0;height:0;right:0;bottom:0;border:12px solid transparent;border-right-color:#58513624;border-bottom-color:#58513624;pointer-events:none}:root[data-theme=dark]{color-scheme:dark;color:#e5ebe7;background:#171c19}:root[data-theme=dark] .app-shell{background:#181d1a}:root[data-theme=dark] .topbar{background:#1b221ef5;border-bottom-color:#354039;box-shadow:0 3px 18px #00000038}:root[data-theme=dark] .brand{color:#eef3ef}:root[data-theme=dark] .save-status{color:#a5afa9}:root[data-theme=dark] .status-dot{background:#8ab59a;box-shadow:0 0 0 3px #30443a}:root[data-theme=dark] .theme-toggle{background:#2a332e;border-color:#414d46;color:#d9c976;box-shadow:inset 0 1px #ffffff0d}:root[data-theme=dark] .theme-toggle:hover{background:#344039}:root[data-theme=dark] .sun-icon{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.7)}:root[data-theme=dark] .moon-icon{opacity:1;transform:translate(-35%,-55%) rotate(-20deg) scale(1)}:root[data-theme=dark] .board{background-color:#1d2420}:root[data-theme=dark] .board-grid{opacity:.32;background-image:radial-gradient(#59625c 1px,transparent 1px)}:root[data-theme=dark] .empty-state h1{color:#dce5df}:root[data-theme=dark] .empty-state p{color:#939f98}:root[data-theme=dark] .add-color-menu{background:#28302c;border-color:#455049;box-shadow:0 15px 35px #00000059}:root[data-theme=dark] .add-color-menu button{color:#e6ebe8}:root[data-theme=dark] .add-color-menu button:hover,:root[data-theme=dark] .add-color-menu button:focus-visible{background:#354039}:root[data-theme=dark] .note{box-shadow:0 3px 5px #00000047,0 12px 24px #0000004d,2px 19px 35px #00000029,inset 0 1px #ffffff52,inset 0 -1px #2e26161f}@media(max-width:767px){:root{--header-height: 68px;--note-width: min(230px, calc(100vw - 32px) );--note-height: 225px}.topbar{padding:0 14px;gap:10px}.brand{font-size:17px;gap:9px}.brand-mark{width:33px;height:33px}.save-status{display:none}.theme-toggle{width:46px;height:46px;flex-basis:46px}.add-button{min-height:46px;padding:0 14px}.add-color-menu button{min-height:46px}.note{padding:10px 12px 14px}.note-toolbar{height:82px;position:relative}.drag-handle{width:44px;height:36px}.note-colors{position:absolute;top:36px;left:50%;transform:translate(-50%);gap:4px}.note-colors button{width:44px;height:44px;border-width:3px}.delete-note{width:44px;height:44px;margin-top:-8px;margin-right:-8px}.note-text{height:calc(100% - 82px);font-size:16px}}@media(max-width:420px){.brand>span:last-child{display:none}.add-button{min-width:142px}.header-actions{gap:8px}.empty-state{padding-bottom:70px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}