:root{--cork-1:#b9895f;--cork-2:#a3744c;--frame:#5a3a26;--ink:#2b211a;--paper-edge:#0000002e;--note-yellow:#f4d160;--note-pink:#f0a6b8;--note-blue:#9bc9d8;--note-green:#a8cf8e;--cream:#fbf6ec;--danger:#b3492f;--font-hand:"Kalam", cursive;--font-display:"Caveat", cursive;--font-ui:"Inter", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-ui);color:var(--ink);background:var(--cork-1)}#root{min-height:100vh}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}.page{background:radial-gradient(circle at 12% 18%, #0000001a 0, transparent 3%), radial-gradient(circle at 78% 8%, #00000014 0, transparent 2.4%), radial-gradient(circle at 35% 62%, #00000017 0, transparent 2.6%), radial-gradient(circle at 88% 70%, #00000012 0, transparent 2.2%), radial-gradient(circle at 55% 90%, #00000014 0, transparent 2.4%), repeating-linear-gradient(0deg, var(--cork-1) 0px, var(--cork-2) 2px, var(--cork-1) 4px), linear-gradient(160deg, var(--cork-1), var(--cork-2));border:18px solid var(--frame);border-image:linear-gradient(160deg,#6b4631,#43291a) 1;min-height:100vh;padding:40px 32px 70px}.masthead{margin-bottom:28px;align-items:center;gap:14px;max-width:720px;margin-inline:auto;display:flex}.masthead__text{flex:1}.masthead__user{align-items:center;display:flex}.masthead__user .cl-userButtonAvatarBox{border:2px solid var(--cream);width:38px;height:38px;box-shadow:0 3px 8px #0000004d}.masthead__pin{font-size:30px;transform:rotate(-12deg)}.masthead h1{font-family:var(--font-display);color:var(--cream);text-shadow:0 2px #00000040;margin:0;font-size:46px;font-weight:700;line-height:1}.masthead__tag{font-family:var(--font-ui);color:#fbf6ecd9;letter-spacing:.02em;margin:4px 0 0;font-size:13px}.composer{background:var(--cream);border-radius:4px;max-width:520px;margin:0 auto 40px;padding:18px;position:relative;box-shadow:0 10px 24px #00000047,inset 0 2px #fff6}.composer:before{content:"";background:radial-gradient(circle at 35% 30%,#e8e8e8,#8a8a8a 70%);border-radius:50%;width:22px;height:22px;position:absolute;top:-10px;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #0006}.composer__input{resize:none;width:100%;font-family:var(--font-hand);color:var(--ink);background:0 0;border:none;font-size:19px;line-height:1.4}.composer__input::placeholder{color:#2b211a73}.composer__input:focus{outline:none}.composer__row{border-top:1px dashed #00000026;justify-content:space-between;align-items:center;margin-top:8px;padding-top:12px;display:flex}.composer__swatches{gap:8px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;padding:0;transition:transform .12s,border-color .12s}.swatch:hover{transform:scale(1.12)}.swatch--active{border-color:var(--ink);transform:scale(1.15)}.swatch--yellow{background:var(--note-yellow)}.swatch--pink{background:var(--note-pink)}.swatch--blue{background:var(--note-blue)}.swatch--green{background:var(--note-green)}.composer__submit{background:var(--ink);color:var(--cream);font-family:var(--font-ui);cursor:pointer;border:none;border-radius:20px;padding:9px 18px;font-size:13px;font-weight:600;transition:filter .15s}.composer__submit:hover:not(:disabled){filter:brightness(1.2)}.composer__submit:disabled{opacity:.6;cursor:progress}.composer__error{color:var(--danger);font-size:13px;font-family:var(--font-ui);margin:8px 0 0}.corkboard{flex-wrap:wrap;justify-content:center;gap:28px 24px;max-width:1080px;margin:0 auto;display:flex}.sticky-note{width:200px;min-height:180px;transform:rotate(var(--tilt,0deg));border-radius:2px;flex-direction:column;padding:22px 16px 16px;transition:transform .15s,box-shadow .15s;display:flex;position:relative;box-shadow:0 10px 18px #00000047,inset 0 1px #ffffff40}.sticky-note:hover{transform:rotate(var(--tilt,0deg)) translateY(-4px) scale(1.02);z-index:2;box-shadow:0 16px 26px #00000052,inset 0 1px #ffffff40}.sticky-note__pin{filter:drop-shadow(0 3px 2px #00000059);font-size:20px;position:absolute;top:-14px;left:50%;transform:translate(-50%)rotate(-8deg)}.sticky-note__text{font-family:var(--font-hand);color:var(--ink);word-break:break-word;white-space:pre-wrap;flex:1;margin:4px 0 0;font-size:18px;line-height:1.35}.sticky-note__delete{cursor:pointer;width:24px;height:24px;color:var(--ink);background:#00000014;border:none;border-radius:50%;align-self:flex-end;margin-top:8px;font-size:12px;line-height:1;transition:background .15s}.sticky-note__delete:hover:not(:disabled){background:#0000002e}.sticky-note__delete:disabled{cursor:progress;opacity:.6}.sticky-note--skeleton{background:#fbf6ec80;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.5}50%{opacity:.85}}.board-state{text-align:center;max-width:520px;font-family:var(--font-ui);color:var(--ink);background:#fbf6eceb;border-radius:6px;margin:40px auto 0;padding:28px 20px;font-size:14px;box-shadow:0 8px 18px #0003}.board-state--error{color:var(--danger);background:#fbf6eceb}.footer{text-align:center;font-family:var(--font-ui);color:#fbf6eccc;letter-spacing:.04em;margin-top:44px;font-size:12px}@media (width<=560px){.page{border-width:10px;padding:28px 16px 50px}.masthead h1{font-size:36px}.sticky-note{width:42vw;min-height:150px}}.gate{background:repeating-linear-gradient(0deg, var(--cork-1) 0px, var(--cork-2) 2px, var(--cork-1) 4px), linear-gradient(160deg, var(--cork-1), var(--cork-2));border:18px solid var(--frame);border-image:linear-gradient(160deg,#6b4631,#43291a) 1;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.gate__card{background:var(--cream);text-align:center;border-radius:6px;max-width:380px;padding:40px 36px;position:relative;box-shadow:0 16px 32px #00000052,inset 0 1px #fff6}.gate__pin{filter:drop-shadow(0 3px 2px #00000059);font-size:26px;position:absolute;top:-16px;left:50%;transform:translate(-50%)rotate(-8deg)}.gate__title{font-family:var(--font-display);color:var(--ink);margin:8px 0 0;font-size:42px;line-height:1}.gate__tag{font-family:var(--font-ui);color:#2b211aa6;margin:6px 0 20px;font-size:13px}.gate__copy{font-family:var(--font-hand);color:var(--ink);margin:0 0 24px;font-size:17px;line-height:1.4}.gate__button{background:var(--ink);color:var(--cream);font-family:var(--font-ui);cursor:pointer;border:none;border-radius:22px;padding:12px 26px;font-size:14px;font-weight:600;transition:filter .15s,transform .1s}.gate__button:hover{filter:brightness(1.2);transform:translateY(-1px)}