@font-face{font-family:Cabbia;src:url('assets/cabbia-regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:CabbiaBook;src:url('assets/cabbia-book.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Caveat;src:url('assets/caveat.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{font-family:Arial,Helvetica,sans-serif;color:#283b39;background:#c7d7df;font-synthesis:none;--ink:#283b39;--muted:#687975;--accent:#315b4e;--paper-size:108px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.32;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #266e87;outline-offset:3px}a{color:inherit}[hidden]{display:none!important}svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.city-scene{position:fixed;inset:0;z-index:-2}.city-scene img{width:100%;height:100%;object-fit:cover}.city-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#f5f4eb77,#edf1e720 25%,#eaf0e210 75%,#f5f4eb88)}
.site-header{height:90px;flex-shrink:0;display:flex;align-items:center;gap:0;padding:18px 2vw 18px 3vw}.brand{font:italic 17px Georgia,serif;text-decoration:none;letter-spacing:.3px;margin-right:auto}.city-button{display:flex;align-items:center;gap:7px;background:#ffffff70;min-height:28px;padding:4px 13px;border-radius:18px 0 0 18px;font:13px Georgia,serif}.languages{display:flex;align-items:center;background:#ffffff70;border-radius:0 18px 18px 0;padding:0 8px;min-height:28px;position:relative}.languages:before{content:'';height:16px;width:1px;background:#61796d55;margin-right:8px}.languages button{background:none;position:relative;min-width:33px;height:28px;padding:4px 7px;font:13px Georgia,serif}.languages button[aria-pressed=true]:after{content:'';position:absolute;bottom:2px;left:7px;right:7px;height:1.5px;background:var(--accent)}
.wall-shell{width:78vw;margin:4px 0 0;transform-origin:left center;transform:perspective(3200px) rotateY(9deg);display:flex;flex-direction:column;position:relative}.whiteboard{background:#fcfcf8;border:8px solid #e4e6de;border-bottom-width:5px;border-radius:8px 8px 0 0;box-shadow:0 0 0 1px #a3aba1,0 20px 38px -12px #263f4f55,inset 0 1px 6px #444d4524;height:calc(100svh - 166px);min-height:440px;display:flex;flex-direction:column;position:relative}.whiteboard:before,.whiteboard:after{content:'';position:absolute;top:6px;width:4px;height:4px;border-radius:50%;background:#89978b;box-shadow:0 1px white}.whiteboard:before{left:6px}.whiteboard:after{right:6px}.board-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 32px 12px}h1{font:400 clamp(22px,1.85vw,31px)/1.15 Cabbia,Arial,sans-serif;letter-spacing:-.4px;margin:0}.board-subtitle{font:400 clamp(18px,1.65vw,27px)/1.15 CabbiaBook,Arial,sans-serif;margin:5px 0 0}.board-date{font-size:11px;white-space:nowrap;color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.notes-viewport{position:relative;flex:1;min-height:0}.notes-area{height:100%;overflow:auto;padding:42px 30px 32px;scrollbar-width:none;touch-action:pan-y;cursor:grab;overscroll-behavior-y:auto}.notes-area::-webkit-scrollbar{display:none}.notes-area.dragging{cursor:grabbing;user-select:none}.batch-arrow{position:absolute;left:calc(50% - 17px);width:34px;height:26px;border-radius:15px;background:#edf1e5ee;box-shadow:0 1px 5px #30493630;z-index:300;font-size:19px;line-height:1}.batch-up{top:0}.batch-down{bottom:0}.notes{position:relative;width:100%;min-height:100%}.note{width:var(--paper-size);aspect-ratio:1;min-height:0;position:absolute;z-index:var(--order,1);transform:rotate(var(--angle,-2deg));container-type:inline-size;transition:transform .22s ease;isolation:isolate;cursor:pointer;outline-offset:5px;touch-action:pan-y}.note.opened{z-index:100000;transform:translate(var(--shift-x,0px),var(--shift-y,0px)) rotate(0deg) scale(1.22)}.sheet{position:absolute;inset:0;transform-origin:center top;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.25,.65,.25,1),clip-path .5s ease;pointer-events:none}.sheet-front,.sheet-back{position:absolute;inset:0;background:var(--note);border-radius:1px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 1px 1px #4a392c28,1px var(--curl,3px) 4px -2px #423f3544;background-image:linear-gradient(177deg,#00000009 0%,transparent 19%,#ffffff12 72%,#00000008 97%)}.sheet-front{padding:16px 10px 8px;pointer-events:auto}.sheet-back{transform:none;opacity:0;pointer-events:none;color:#536d5d;text-align:right;padding:5px;font-size:16px}.sheet.turned{transform:translateY(-20%) rotate(-2deg);clip-path:inset(0 0 72% 0 round 1px)}.sheet.turned .sheet-front{pointer-events:none;opacity:0}.sheet.turned .sheet-back{pointer-events:auto;opacity:1;background-image:linear-gradient(180deg,#ffffff26,#00000012 20%,#00000033 28%,transparent 30%)}.note.stacked:before{content:'';position:absolute;inset:3px -3px -4px 2px;background:var(--note);box-shadow:0 2px 2px #293c3429;transform:rotate(3deg);border-bottom:2px solid #ffffff75}.magnet{position:absolute;top:-5px;left:var(--pin-x,50%);width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#c8ccc3,#969e95 68%,#727a70);border:1px solid #72857b80;box-shadow:0 2px 2px #233b4766;z-index:200;pointer-events:none}.note .handwritten{font:500 clamp(13px,17cqw,20px)/1.05 Caveat,cursive;display:block;white-space:pre-wrap;overflow-wrap:anywhere}.note .heart{font:18px Caveat,cursive;display:block;margin-top:4px}.page-next{position:absolute;bottom:0;left:0;width:100%;height:25%;background:transparent;text-align:right;padding:3px 6px;font-size:8px;color:#496153}.note:not(.opened) .page-next{pointer-events:none}.note.closing{pointer-events:none}
.note[data-color=pink]{--note:#f3adc3}.note[data-color=yellow]{--note:#f3dc7a}.note[data-color=mint]{--note:#bce3ca}.note[data-color=blue]{--note:#a9d6ec}.note[data-color=peach]{--note:#f4c3a2}.note[data-color=lilac]{--note:#cbbbe7}.note[data-color=green]{--note:#d3dfa0}.note[data-color=coral]{--note:#efa8a0}.note[data-color=cream]{--note:#eee1b5}.note[data-color=aqua]{--note:#a9ddd6}
.board-bottom{padding:9px 24px;min-height:30px;font-size:10px;color:#687975}.date-strip{height:26.4px;min-height:26.4px;display:flex;align-items:stretch;background:#bac8a9;border:1px solid #e4e6de;border-top:0;border-radius:0 0 7px 7px;box-shadow:0 10px 20px #263f4f25;width:100%;padding:0 6px;margin:0}.days{display:grid;grid-template-columns:repeat(7,1fr);flex:1;min-width:0}.day,.week-arrow{background:transparent;min-height:0;padding:0;position:relative}.day{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:2px}.day .weekday{font-size:9px;text-transform:uppercase;letter-spacing:.3px}.day .daynumber{font:18px Georgia,serif}.week-arrow{width:38px;flex-shrink:0;font-size:19px}.day[aria-pressed=true]{background:#365c4d;color:white}.day.is-today:after{content:'';position:absolute;bottom:1px;left:50%;width:2px;height:2px;border-radius:50%;background:currentColor}.week-caption{position:absolute;left:12px;top:100%;padding:4px 0}.week-caption button{background:#ffffffb0;font-size:10px;text-decoration:underline;padding:4px 8px;border-radius:3px}.empty-state{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#87998b}.empty-state h2{font:26px Georgia;margin:10px}.empty-state p{font-size:13px}.empty-drawing{font:80px Caveat}footer{display:flex;justify-content:flex-end;margin-top:auto;padding:10px 2vw;min-height:35px}footer button{font-size:10px;background:transparent;padding:4px 0}
@media(hover:hover) and (pointer:fine){.note:not(.opened):hover{z-index:99999;transform:rotate(var(--angle)) translateY(-1px)}.date-strip button:hover{background:#d0d9c3}.languages button:hover{color:#33755b}}
@media(max-width:1100px){:root{--paper-size:98px}.site-header{height:76px}.brand{font-size:14px}.wall-shell{width:80vw;transform:perspective(2200px) rotateY(9deg)}.whiteboard{height:calc(100svh - 150px);min-height:440px}.board-heading{padding:22px 22px 12px}.board-date{font-size:9px}.notes-area{padding:42px 20px 32px}h1{font-size:26px}.board-subtitle{font-size:21px}.day{gap:4px}.day .weekday{font-size:8px}.day .daynumber{font-size:16px}.week-arrow{width:27px}}
@media(max-width:700px){:root{--paper-size:88px}.site-header{height:auto;min-height:80px;flex-wrap:wrap;padding:12px 15px;row-gap:10px}.brand{width:100%;font-size:15px}.city-button{margin-left:auto}.wall-shell{transform:none;width:calc(100% - 24px);margin:4px auto 0}.whiteboard{height:calc(100svh - 160px);min-height:380px;border-width:6px;border-bottom-width:4px}.board-heading{padding:18px 16px 8px}.board-date{display:none}h1{font-size:24px}.board-subtitle{font-size:19px}.notes-area{padding:36px 14px 28px}.note{padding:14px 7px 7px}.note .heart{font-size:15px;margin-top:2px}.note .handwritten{font-size:clamp(12px,18cqw,18px)}.board-bottom{font-size:9px;padding:8px 12px}.date-strip{padding:0 1px}.week-arrow{width:22px}.day{gap:3px}.day .weekday{font-size:7px;letter-spacing:0}.day .daynumber{font-size:14px}footer{padding:10px 15px}.city-scene img{object-position:66% center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
dialog{border:0;padding:0;color:var(--ink);box-shadow:0 20px 70px #122d4444}dialog::backdrop{background:#173b4666}dialog[open]{animation:appear .18s ease-out}.icon-button{width:44px;height:44px;background:#e6eadd;border-radius:50%;font-size:23px;display:grid;place-items:center}.info-dialog{max-width:440px;width:calc(100vw - 32px);padding:32px;border-radius:9px;max-height:calc(100svh - 24px);overflow:auto;background:#fcfcf5}.info-dialog .close-dialog{margin:-14px -14px 12px auto}.info-dialog h2{font:30px/1.2 Georgia;margin:15px 0}.info-dialog p{font-size:13px;line-height:1.75}.info-dialog label{display:block;font-size:12px;margin:24px 0 8px}.info-dialog input{width:100%;min-height:48px;border:1px solid #a8b8a8;border-radius:4px;background:white;padding:10px;font-size:16px}.primary{padding:14px 20px;background:var(--accent);color:white;border-radius:4px;min-height:48px;width:100%}.text-button{padding:14px 0;background:none;text-decoration:underline;font-size:12px}.small{font-size:11px!important;color:var(--muted)}#city-error{color:#a63342;min-height:0;margin:8px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{position:fixed;bottom:0;background:#fff;padding:10px}@keyframes appear{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.sheet-front:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.paper-edge{position:absolute;bottom:0;left:0;right:0;height:var(--curl,4px);background:linear-gradient(180deg,transparent,#ffffff36);border-radius:0 0 48% 12%;box-shadow:0 3px 3px -3px #352c2b70;transform:skewY(-.8deg);pointer-events:none}.sheet.curl-forward{animation:peelForward .5s ease both}.sheet.curl-back{animation:peelBack .5s ease both}@keyframes peelForward{0%{transform:none;clip-path:inset(0)}35%{transform:perspective(500px) rotateX(32deg) skewX(-3deg);clip-path:inset(0 0 9% 0 round 2px)}65%{transform:translateY(-8%) perspective(500px) rotateX(57deg) skewX(-2deg);clip-path:inset(0 0 38% 0 round 5px)}100%{transform:translateY(-20%) rotate(-2deg);clip-path:inset(0 0 72% 0 round 1px)}}@keyframes peelBack{0%{transform:translateY(-20%) rotate(-2deg);clip-path:inset(0 0 72% 0 round 1px)}45%{transform:translateY(-6%) perspective(500px) rotateX(45deg) skewX(-2deg);clip-path:inset(0 0 22% 0 round 4px)}100%{transform:none;clip-path:inset(0)}}

.sheet-front{border-radius:0 0 2% 1%;border-bottom:1px solid #5f503012}.sheet.curl-forward .sheet-front{animation:paperFrontOut .5s linear both}.sheet.curl-forward .sheet-back{animation:paperBackIn .5s linear both}.sheet.curl-back .sheet-front{animation:paperBackIn .5s linear both}.sheet.curl-back .sheet-back{animation:paperFrontOut .5s linear both}@keyframes paperFrontOut{0%,45%{opacity:1}55%,100%{opacity:0}}@keyframes paperBackIn{0%,45%{opacity:0}55%,100%{opacity:1}}