@import"https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@300;400;600;700&display=swap";:root{color-scheme:light;--bg: #f5ebe0;--bg-deep: #edede9;--ink: #4b3f35;--muted: #6f6258;--primary: #d5bdaf;--primary-dark: #bca293;--accent: #d6ccc2;--card: #e3d5ca;--border: #d6ccc2;--shadow: 0 18px 40px rgba(75, 63, 53, .12)}*{box-sizing:border-box}body{margin:0;font-family:Manrope,system-ui,-apple-system,sans-serif;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),radial-gradient(ellipse at 40% 0%,#ede3d4 0%,var(--bg) 65%),radial-gradient(ellipse at 85% 95%,rgba(213,189,175,.45) 0%,transparent 55%);background-size:200px 200px,auto,auto;background-repeat:repeat,no-repeat,no-repeat;color:var(--ink)}.app{max-width:1100px;margin:0 auto;padding:32px 20px 60px}.header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:32px}.header .peer-drawing{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:6px;white-space:nowrap}.bell-button{position:absolute;right:0;top:0}.eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:.7rem;color:var(--muted);margin:0 0 8px}h1{font-family:"DM Serif Display",serif;font-size:2.2rem;margin:0}.canvas-panel{background:var(--card);border-radius:24px;padding:20px;border:1px solid var(--border);box-shadow:inset 0 1px #ffffff80,0 20px 48px #4b3f3521,0 4px 12px #4b3f3512}.canvas-frame{width:100%;aspect-ratio:3 / 4;background:#f5ebe0;border-radius:18px;overflow:hidden;border:1px solid #d6ccc2;position:relative}.canvas-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 20% 20%,rgba(75,63,53,.03) 0,transparent 55%),radial-gradient(circle at 80% 30%,rgba(75,63,53,.025) 0,transparent 50%),repeating-linear-gradient(0deg,rgba(75,63,53,.02) 0,rgba(75,63,53,.02) 1px,transparent 1px,transparent 6px),repeating-linear-gradient(90deg,rgba(75,63,53,.015) 0,rgba(75,63,53,.015) 1px,transparent 1px,transparent 5px);mix-blend-mode:multiply;pointer-events:none}canvas{width:100%;height:100%;touch-action:none;display:block;position:relative;z-index:1}.canvas-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);font-weight:600;background:linear-gradient(135deg,#f5ebe0e6,#edede9bf);pointer-events:none}.canvas-placeholder p{margin:0;font-size:1rem}.stamp-preview{position:absolute;width:36px;height:36px;transform:translate(-50%,-50%);z-index:3;pointer-events:none}.stamp-preview img{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(75,63,53,.18))}.stamp-picker{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:0 8px 28px #4b3f352e,0 2px 8px #4b3f351a;z-index:20;display:grid;grid-template-columns:repeat(4,40px);gap:6px;animation:stampPickerIn .15s ease}@keyframes stampPickerIn{0%{opacity:0;transform:translate(-50%) translateY(-4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.stamp-picker-btn{width:40px;height:40px;padding:4px;border-radius:10px;border:2px solid transparent;background:#4b3f3512;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}.stamp-picker-btn:hover{background:#4b3f3524}.stamp-picker-btn.active{border-color:#b5785a;background:#b5785a26}.stamp-picker-btn img{width:28px;height:28px;display:block}.tools{margin-top:18px;display:flex;flex-direction:column;gap:14px}.tool-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.tool-row.caption{position:relative}.drawing-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e16128c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawing-modal{position:relative;background:var(--card);border-radius:20px;width:min(92vw,420px);border:1px solid var(--border);box-shadow:0 24px 60px #00000040;overflow:hidden;animation:slideUp .25s ease}@keyframes slideUp{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}.drawing-modal img{width:100%;display:block}.drawing-modal-close{position:absolute;top:10px;right:10px;z-index:2;background:#f5ebe0d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.drawing-modal-meta{padding:12px 16px}.drawing-modal-meta p{margin:0 0 4px;color:var(--ink);font-size:.9rem}.name-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e161259;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:50}.name-modal{background:var(--card);border-radius:20px;padding:24px;width:min(92vw,360px);border:1px solid var(--border);box-shadow:0 20px 40px #0000002e;text-align:left}.name-modal h2{margin:0 0 6px;font-size:1.4rem;font-family:"DM Serif Display",serif}.name-modal p{margin:0 0 16px;color:var(--muted);font-size:.9rem}.name-form{display:flex;gap:10px;align-items:center}.name-form input{flex:1;border-radius:999px;border:1px solid var(--border);padding:10px 14px;font-family:inherit;font-size:.9rem}.label{font-size:.8rem;color:var(--muted);min-width:64px}button{border:none;padding:10px 16px;border-radius:999px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease}button.primary{background:var(--primary);color:#fff}button.primary:disabled{background:#f1b4c3;cursor:not-allowed}button.secondary{background:#edede9;color:var(--ink);border:1px solid #d6ccc2;box-shadow:0 2px 6px #4b3f3517,0 1px 2px #4b3f350f}button.secondary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #4b3f3524,0 2px 4px #4b3f3514}button.secondary:active{transform:translateY(0);box-shadow:0 1px 3px #4b3f3514}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;box-shadow:0 2px 7px #4b3f3521,0 1px 2px #4b3f3514}.icon-button:hover{transform:translateY(-1px);box-shadow:0 4px 14px #4b3f3530,0 2px 4px #4b3f351a}.icon-button:active{transform:translateY(0);box-shadow:0 1px 4px #4b3f351a}.icon-button svg{width:18px;height:18px}.send-button{position:relative;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;box-shadow:0 10px 24px #4b3f352e;overflow:visible}.send-button.sent{animation:inkLift .45s ease}.send-button:hover:not(:disabled){box-shadow:0 14px 28px #4b3f353d}@keyframes inkLift{0%{transform:translateY(0);opacity:1;box-shadow:none}45%{transform:translateY(-3px);opacity:.85;box-shadow:0 8px 16px #4b3f352e}to{transform:translateY(0);opacity:1;box-shadow:none}}.confetti{position:absolute;left:50%;top:-14px;width:120px;height:80px;pointer-events:none;overflow:visible;transform:translate(-50%)}.confetti-piece{position:absolute;top:20px;color:#d24a4a;animation:confettiPop 3.5s ease-out forwards;opacity:.9;transform:translate(0) scale(.6) rotate(var(--pop-rot, 0deg));will-change:transform,opacity}.confetti-piece:nth-child(3n){color:#f2a0b0}.confetti-piece:nth-child(4n){color:#f26d6d}@keyframes confettiPop{0%{transform:translate(0) scale(.2) rotate(var(--pop-rot, 0deg));opacity:0}25%{transform:translate(var(--pop-x, 0px),var(--pop-y, -10px)) scale(1) rotate(var(--pop-rot, 0deg));opacity:.95}75%{opacity:.7}to{transform:translate(calc(var(--pop-x, 0px) + 10px),calc(var(--pop-y, -10px) + 60px)) scale(.5) rotate(calc(var(--pop-rot, 0deg) + 180deg));opacity:0}}.reactions{display:flex;gap:8px;margin-top:8px;align-items:center}.reaction{border:none;background:#edede9;padding:6px 10px;border-radius:999px;cursor:pointer;font-size:.85rem;box-shadow:0 2px 6px #4b3f3517,0 1px 2px #4b3f350f;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.reaction:hover{transform:translateY(-1px);box-shadow:0 4px 10px #4b3f3524,0 2px 4px #4b3f3514}.reaction:active{transform:translateY(0);box-shadow:0 1px 3px #4b3f3514}.reaction.active{background:#d5bdaf}.reaction.subtle{background:transparent;color:var(--muted);font-size:.75rem}.colors{display:flex;gap:8px;align-items:center}.color{width:30px;height:30px;aspect-ratio:1 / 1;border-radius:999px;border:2px solid transparent;padding:0;min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #00000014;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}.color.active{border-color:var(--ink);box-shadow:0 0 0 2px #fff9,0 6px 12px #4b3f352e;transform:translateY(-1px)}.color:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 0 0 1px #00000014,0 4px 10px #4b3f3526}.caption input{flex:1;min-width:180px;padding:10px 12px;border-radius:12px;border:1px solid #d6ccc2;font-family:inherit;background:#f5ebe0;color:var(--ink)}.hint{margin:0;font-size:.85rem;color:var(--muted)}.thread{margin-top:36px}.thread-header{display:flex;align-items:center;justify-content:space-between}.thread-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.card{background:var(--card);border-radius:18px;border:1px solid var(--border);overflow:hidden;box-shadow:inset 0 1px #ffffff73,0 4px 16px #4b3f351a,0 1px 4px #4b3f350f}.card img{width:100%;display:block}.card-meta{padding:12px;font-size:.8rem;color:var(--muted)}.meta-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.author{font-size:.75rem;color:var(--muted);text-transform:lowercase}.card-meta p{margin:6px 0 0;color:var(--ink)}.reaction-summary{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.reaction-chip{background:#d24a4a1f;color:var(--ink);border-radius:999px;padding:4px 8px;font-size:.75rem}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--accent) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:8px}.skeleton-image{width:100%;aspect-ratio:3 / 4;border-radius:0;display:block}.skeleton-text{height:13px;width:55%}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);background:var(--ink);color:#f5ebe0;padding:10px 20px;border-radius:999px;font-size:.85rem;font-weight:600;z-index:100;animation:toastIn .2s ease;white-space:nowrap}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.peer-drawing{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);font-weight:600;white-space:nowrap}.peer-dot{width:8px;height:8px;border-radius:50%;background:#f26d6d;animation:peerPulse 1.2s ease-in-out infinite;flex-shrink:0}@keyframes peerPulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.card-image-wrapper{position:relative;cursor:pointer}.replay-indicator{position:absolute;top:10px;right:10px;background:#f5ebe0d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 4px 8px #0000001a;opacity:.8;transition:opacity .2s ease,transform .2s ease}.card-image-wrapper:hover .replay-indicator{opacity:1;transform:scale(1.1)}.replay-indicator svg{width:14px;height:14px}.drawing-modal-content{position:relative;aspect-ratio:3 / 4;background:var(--bg);cursor:pointer}.replay-wrapper{width:100%;height:100%}.replay-wrapper canvas{width:100%;height:100%;display:block}.muted{color:var(--muted)}.error{color:#c0392b}.carousel{margin-top:36px}.carousel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.carousel-counter{font-size:.8rem;color:var(--muted);font-weight:600}.carousel-track{display:flex;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;gap:16px;padding-bottom:8px}.carousel-track::-webkit-scrollbar{display:none}.carousel-slide{flex:0 0 min(320px,82vw);scroll-snap-align:start}.carousel-dots{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:14px}.carousel-dot{width:8px;height:8px;min-width:8px;min-height:8px;border-radius:50%;background:var(--border);padding:0;border:none;cursor:pointer;transition:background .2s,transform .2s}.carousel-dot.active{background:var(--ink);transform:scale(1.25)}