.landing{background-color:var(--bg-body);background-image:radial-gradient(var(--border-medium) 1px, transparent 1px);background-size:24px 24px;flex-direction:column;min-height:100vh;display:flex;position:relative}.landing:before{content:"";background:radial-gradient(circle at 50% 30%, transparent 10%, var(--bg-body) 80%);pointer-events:none;z-index:1;position:absolute;inset:0}.landing-hero{max-width:var(--max-width-wide);gap:var(--space-3xl);width:100%;padding:var(--space-3xl) var(--space-md);z-index:2;grid-template-columns:1.15fr .85fr;align-items:center;margin:0 auto;display:grid;position:relative}.hero-content{text-align:left}.landing-logo{margin-bottom:var(--space-sm);font-size:4rem;animation:4s ease-in-out infinite float;display:inline-block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.landing-hero h1{font-size:3.6rem;font-family:var(--font-heading);margin-bottom:var(--space-md);background:linear-gradient(135deg, var(--cinnamon-primary), #6b3c2a);-webkit-text-fill-color:transparent;text-wrap:balance;-webkit-background-clip:text;background-clip:text;font-weight:700;line-height:1.15}.landing-hero .subtitle{color:var(--text-secondary);max-width:520px;margin:0 0 var(--space-xl) 0;text-wrap:pretty;font-size:1.25rem;line-height:1.7}.landing-cta-group{gap:var(--space-md);flex-wrap:wrap;justify-content:flex-start;display:flex}.btn{padding:var(--space-sm) var(--space-xl);font-size:1.05rem;font-family:var(--font-heading);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);border:none;justify-content:center;align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--cinnamon-primary);color:var(--text-inverse);box-shadow:0 4px 14px #9b583c40}.btn-primary:hover{background:var(--cinnamon-primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px #9b583c59}.btn-secondary{background:var(--bg-card);color:var(--cinnamon-primary);border:2px solid var(--border-medium)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--cinnamon-primary);transform:translateY(-2px)}.hero-preview-container{justify-content:center;align-items:center;width:100%;display:flex}.mock-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);width:100%;max-width:360px;box-shadow:var(--shadow-xl);transition:transform var(--transition-slow);position:relative;overflow:hidden}.mock-card:hover{transform:translateY(-4px)rotate(1deg)}.mock-card-header{background:var(--bg-sidebar);border-bottom:1px solid var(--border-light);padding:var(--space-sm) var(--space-md);align-items:center;gap:6px;display:flex}.mock-dot{border-radius:var(--radius-full);width:10px;height:10px}.mock-dot.red{background:#e2726e}.mock-dot.yellow{background:#e7b066}.mock-dot.green{background:#81b880}.mock-title{color:var(--text-secondary);font-size:.75rem;font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;margin-left:8px;overflow:hidden}.mock-card-body{padding:var(--space-lg);gap:var(--space-md);flex-direction:column;display:flex}.mock-input-group{flex-direction:column;gap:4px;display:flex}.mock-avatar-anon{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.mock-speech-bubble{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px;padding:var(--space-md);color:var(--text-primary);box-shadow:var(--shadow-sm);font-size:.95rem;line-height:1.5}.mock-drawing-canvas{background:var(--bg-elevated);border:2px dashed var(--border-medium);border-radius:var(--radius-md);justify-content:center;align-items:center;height:180px;display:flex;position:relative;overflow:hidden}.mock-doodle{width:140px;height:140px}.doodle-stroke-1{stroke-dasharray:400;stroke-dashoffset:400px;animation:6s ease-in-out infinite draw-doodle-1}.doodle-stroke-2{stroke-dasharray:300;stroke-dashoffset:300px;animation:6s ease-in-out infinite draw-doodle-2}.doodle-stroke-3{stroke-dasharray:200;stroke-dashoffset:200px;animation:6s ease-in-out infinite draw-doodle-3}@keyframes draw-doodle-1{0%,10%{stroke-dashoffset:400px}45%,to{stroke-dashoffset:0}}@keyframes draw-doodle-2{0%,30%{stroke-dashoffset:300px}65%,to{stroke-dashoffset:0}}@keyframes draw-doodle-3{0%,50%{stroke-dashoffset:200px}85%,to{stroke-dashoffset:0}}.canvas-status{color:var(--text-tertiary);font-size:.7rem;font-family:var(--font-mono);box-shadow:var(--shadow-sm);background:#ffffffd9;border-radius:4px;padding:2px 6px;position:absolute;bottom:8px;right:8px}.mock-card-footer{border-top:1px solid var(--border-light);padding:var(--space-md) var(--space-lg);background:var(--bg-sidebar);gap:var(--space-md);justify-content:center;display:flex}.moderator-pill{border-radius:var(--radius-full);box-shadow:var(--shadow-sm);align-items:center;gap:4px;padding:4px 10px;font-size:.75rem;font-weight:700;display:inline-flex}.moderator-pill.approved{background:var(--color-success-bg);color:var(--color-success);border:1px solid #5b8c5a33}.moderator-pill.safety-100{background:var(--color-info-bg);color:var(--color-info);border:1px solid #5b7fa533}.landing-features{padding:var(--space-3xl) var(--space-md);max-width:var(--max-width-wide);z-index:2;margin:0 auto;position:relative}.section-title{text-align:center;font-family:var(--font-heading);margin-bottom:var(--space-xs);color:var(--text-primary);text-wrap:balance;padding-bottom:2rem;font-size:2.2rem}.section-subtitle{text-align:center;max-width:580px;margin:0 auto var(--space-3xl);color:var(--text-secondary);text-wrap:pretty;font-size:1.1rem;line-height:1.6}.features-bento-grid{gap:var(--space-lg);grid-template-columns:repeat(12,1fr);display:grid}.bento-card{border-radius:var(--radius-lg);border:1px solid var(--border-light);background:var(--bg-card);padding:var(--space-xl);transition:all var(--transition-base);box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:relative;overflow:hidden}.bento-card:hover{box-shadow:var(--shadow-md), 0 12px 24px #9b583c0d;border-color:var(--cinnamon-secondary);transform:translateY(-4px)}.col-span-4{grid-column:span 4}.col-span-6{grid-column:span 6}.col-span-8{grid-column:span 8}.bento-card-content{gap:var(--space-sm);z-index:2;flex-direction:column;height:100%;display:flex;position:relative}.icon-wrapper{background:var(--bg-body);border:1px solid var(--border-light);color:var(--cinnamon-primary);border-radius:var(--radius-md);width:48px;height:48px;margin-bottom:var(--space-sm);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.bento-card:hover .icon-wrapper{background:var(--cinnamon-primary);color:var(--text-inverse);transform:scale(1.05);box-shadow:0 4px 12px #9b583c26}.bento-card h3{font-family:var(--font-heading);color:var(--text-primary);margin-bottom:2px;font-size:1.25rem}.bento-card p{color:var(--text-secondary);font-size:.92rem;line-height:1.6}.bento-bg-gradient{filter:blur(80px);opacity:.12;pointer-events:none;z-index:1;width:240px;height:240px;transition:opacity var(--transition-base);border-radius:50%;position:absolute;top:0;right:0}.bento-card:hover .bento-bg-gradient{opacity:.22}.cinnamon-glow{background:radial-gradient(circle, var(--cinnamon-primary) 0%, transparent 70%);top:-80px;right:-80px}.spice-glow{background:radial-gradient(circle, var(--cinnamon-secondary) 0%, transparent 70%);bottom:-80px;left:-80px}.drawing-spotlight .bento-card-content,.slideshow-spotlight .bento-card-content{align-items:center;gap:var(--space-xl);flex-direction:row}.spotlight-text{flex:1}.mini-canvas-preview{background:var(--bg-body);border:1px solid var(--border-light);border-radius:var(--radius-md);flex-shrink:0;width:160px;height:120px;position:relative;overflow:hidden}.mini-canvas-preview:before{content:"";border:2px solid var(--cinnamon-primary);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%);border-radius:50% 40% 60% 50%/40% 50% 50% 60%;width:60px;height:50px;animation:4s linear infinite draw-stroke;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes draw-stroke{0%{clip-path:polygon(0 0,0 0,0 100%,0% 100%)}50%,to{clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}}.landing-how{padding:var(--space-3xl) var(--space-md);background:var(--bg-card);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);z-index:2;position:relative;overflow:hidden}.landing-how:after{content:"";background-image:radial-gradient(var(--border-medium) 1px, transparent 1px);opacity:.15;pointer-events:none;background-size:20px 20px;position:absolute;inset:0}.landing-how h2{text-align:center}.steps{gap:var(--space-2xl);flex-direction:column;max-width:680px;margin:0 auto;display:flex;position:relative}.steps:before{content:"";background:linear-gradient(to bottom, var(--cinnamon-primary) 0%, var(--cinnamon-secondary) 50%, var(--border-medium) 100%);z-index:1;width:2px;position:absolute;top:10px;bottom:10px;left:25px}.step{gap:var(--space-lg);z-index:2;transition:transform var(--transition-base);align-items:flex-start;display:flex;position:relative}.step:hover{transform:translate(4px)}.step-number{border-radius:var(--radius-full);background:var(--bg-elevated);border:3px solid var(--cinnamon-primary);width:50px;height:50px;color:var(--cinnamon-primary);font-family:var(--font-heading);box-shadow:var(--shadow-sm), 0 0 16px #9b583c0d;transition:all var(--transition-base);flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;font-weight:700;display:flex}.step:hover .step-number{background:var(--cinnamon-primary);color:var(--text-inverse);transform:scale(1.08);box-shadow:0 0 20px #9b583c33}.step-content{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-base);flex:1}.step:hover .step-content{border-color:var(--cinnamon-secondary);box-shadow:var(--shadow-md)}.step-content h3{font-size:1.15rem;font-family:var(--font-heading);color:var(--text-primary);margin-bottom:var(--space-xs)}.step-content p{color:var(--text-secondary);font-size:.92rem;line-height:1.6}.landing-footer{text-align:center;padding:var(--space-xl) var(--space-md);border-top:1px solid var(--border-light);background:var(--bg-card);z-index:2;position:relative}.landing-footer p{color:var(--text-tertiary);font-size:.85rem}.landing-footer .footer-content{justify-content:center;align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:inline-flex}.landing-footer .footer-author{color:var(--text-primary);font-weight:700}.landing-footer .twitter-link{color:var(--text-secondary);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;margin-left:2px;display:inline-flex}.landing-footer .twitter-link:hover{color:var(--cinnamon-primary);transform:scale(1.1)}.landing-footer .twitter-icon{width:14px;height:14px}@media (max-width:992px){.landing-hero{gap:var(--space-2xl);text-align:center;padding-top:100px;padding-bottom:var(--space-2xl);grid-template-columns:1fr}.hero-content{text-align:center;flex-direction:column;align-items:center;display:flex}.landing-hero h1{font-size:2.8rem}.landing-hero .subtitle{margin:0 auto var(--space-xl) auto}.landing-cta-group{justify-content:center}.col-span-8,.col-span-6{grid-column:span 12}.col-span-4{grid-column:span 6}}@media (max-width:768px){.drawing-spotlight .bento-card-content,.slideshow-spotlight .bento-card-content{align-items:flex-start;gap:var(--space-md);flex-direction:column}.mini-canvas-preview{width:100%;height:120px}.landing-how{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}}@media (max-width:600px){.landing-hero{padding-top:80px;padding-bottom:var(--space-xl)}.landing-hero h1{font-size:2.2rem}.landing-logo{font-size:3rem}.landing-features{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}.section-title{font-size:1.75rem}.section-subtitle{margin-bottom:var(--space-xl);font-size:.95rem}.features-bento-grid{gap:var(--space-md);grid-template-columns:1fr}.col-span-8,.col-span-6,.col-span-4{grid-column:span 1}.bento-card{padding:var(--space-lg)}.steps:before{left:20px}.step-number{width:40px;height:40px;font-size:1.1rem}.step-content{padding:var(--space-md)}}.landing-dashboard-section{padding-top:100px;padding-bottom:var(--space-3xl);width:100%;max-width:1000px;margin:0 auto}.dashboard-container{padding:0 var(--space-md)}.home-dashboard{gap:var(--space-2xl);flex-direction:column;display:flex}.dashboard-welcome{align-items:center;gap:var(--space-lg);background:var(--bg-card);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);display:flex}.welcome-avatar-container{flex-shrink:0}.dashboard-avatar{border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--cinnamon-primary);width:64px;height:64px}.dashboard-avatar-placeholder{border-radius:var(--radius-full);background:var(--cinnamon-light);width:64px;height:64px;color:var(--cinnamon-dark);border:2px solid var(--cinnamon-primary);justify-content:center;align-items:center;font-size:1.8rem;font-weight:700;display:flex}.welcome-text h2{color:var(--text-primary);margin-bottom:4px;font-size:1.6rem}.welcome-text p{margin:0}.quick-actions-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.quick-action-card{gap:var(--space-md);padding:var(--space-lg);color:inherit;cursor:pointer;align-items:flex-start;text-decoration:none;transition:transform .2s,box-shadow .2s;display:flex}.quick-action-card:hover{box-shadow:var(--shadow-md);border-color:var(--cinnamon-primary);transform:translateY(-2px)}.action-icon{background:var(--bg-body);border-radius:var(--radius-md);width:48px;height:48px;box-shadow:inset 0 0 0 1px var(--border-light);justify-content:center;align-items:center;font-size:2rem;display:flex}.action-details h3{color:var(--text-primary);margin-bottom:4px;font-size:1.1rem}.action-details p{color:var(--text-secondary);margin:0;font-size:.85rem;line-height:1.4}.sent-tracker-section{padding:var(--space-xl)}.tracker-header{justify-content:space-between;align-items:center;gap:var(--space-md);border-bottom:1px solid var(--border-light);padding-bottom:var(--space-lg);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.tracker-title-container h3{margin-bottom:4px;font-size:1.3rem}.tracker-title-container p{margin:0}.tracker-tabs{background:var(--bg-body);border-radius:var(--radius-md);border:1px solid var(--border-light);padding:4px;display:flex}.tracker-tab{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);font-family:var(--font-body);color:var(--text-secondary);cursor:pointer;align-items:center;gap:var(--space-xs);background:0 0;border:none;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.tracker-tab.active{background:var(--bg-card);color:var(--cinnamon-dark);box-shadow:var(--shadow-sm)}.tab-count{background:var(--border-medium);color:var(--text-secondary);border-radius:var(--radius-full);padding:2px 6px;font-size:.75rem;font-weight:700}.tracker-tab.active .tab-count{background:var(--cinnamon-light);color:var(--cinnamon-dark)}.tracker-list{gap:var(--space-lg);flex-direction:column;display:flex}.tracker-item{padding:var(--space-lg);background:var(--bg-card);transition:border-color .2s}.tracker-item-header{justify-content:space-between;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md);display:flex}.recipient-info{align-items:center;gap:var(--space-sm);display:flex}.recipient-avatar{border-radius:var(--radius-full);object-fit:cover;width:40px;height:40px}.recipient-avatar-placeholder{border-radius:var(--radius-full);background:var(--border-light);width:40px;height:40px;color:var(--text-secondary);justify-content:center;align-items:center;font-weight:700;display:flex}.recipient-link{color:var(--cinnamon-dark);text-decoration:none}.recipient-link:hover{text-decoration:underline}.tracker-item-meta{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.tracker-item-body{padding:var(--space-md);border-radius:var(--radius-md);margin-bottom:var(--space-md);border:1px solid var(--border-light)}.question-text{color:var(--text-primary);margin:0;font-size:1.05rem;font-weight:500;line-height:1.5}.tracker-item-answer{padding:var(--space-md);border-radius:var(--radius-md);margin-top:var(--space-md)}.answer-header{align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs);display:flex}.answer-text{margin:0 0 var(--space-xs);color:var(--text-primary);font-size:.95rem;line-height:1.5}.answer-footer{text-align:right;color:var(--text-tertiary)}.tracker-item-pending-status{align-items:center;gap:var(--space-xs);justify-content:flex-end;display:flex}.pending-indicator-spinner{border:2px solid var(--border-medium);border-top-color:var(--cinnamon-primary);border-radius:var(--radius-full);width:14px;height:14px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tracker-empty-state{text-align:center;padding:var(--space-2xl) var(--space-md)}.empty-state-emoji{margin-bottom:var(--space-md);font-size:3rem;display:block}.tracker-empty-state h4{margin-bottom:var(--space-xs)}.tracker-empty-state p{margin:0}.tracker-footer-link{margin-top:var(--space-xl);border-top:1px solid var(--border-light);padding-top:var(--space-lg)}@media (max-width:768px){.landing-dashboard-section{padding-top:80px}.dashboard-welcome{text-align:center;padding:var(--space-md);flex-direction:column}.tracker-header{flex-direction:column;align-items:stretch}.tracker-tabs{justify-content:center}.tracker-tab{flex:1;justify-content:center}}@media (max-width:480px){.landing-dashboard-section{padding-top:40px}.tracker-item-header{align-items:flex-start;gap:var(--space-xs);flex-direction:column}.tracker-item-meta{align-items:flex-start}}.home-announcements-wrapper{top:var(--space-md);right:var(--space-md);z-index:1000;position:absolute}.home-announcements-btn{border:1px solid var(--border-light);color:var(--text-primary);border-radius:var(--radius-full);cursor:pointer;width:44px;height:44px;transition:all var(--transition-fast);background:#ffffff1a;justify-content:center;align-items:center;display:flex;position:relative}.home-announcements-btn:hover{border-color:var(--cinnamon-primary);color:var(--cinnamon-primary);background:#fff3;transform:scale(1.05)}.home-announcements-badge{color:#fff;border-radius:var(--radius-full);border:2px solid var(--bg-body);background:linear-gradient(135deg,#ec4899,#a855f7);padding:2px 6px;font-size:.7rem;font-weight:700;animation:2s infinite pulse-badge;position:absolute;top:-4px;right:-4px}@keyframes pulse-badge{0%{box-shadow:0 0 #ec489966}70%{box-shadow:0 0 0 6px #ec489900}to{box-shadow:0 0 #ec489900}}.home-announcements-popover{border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-card);box-shadow:var(--shadow-xl);padding:var(--space-md);width:calc(100vw - 32px);max-width:400px;color:var(--text-primary);top:70px;right:var(--space-md);opacity:0;transition-behavior:allow-discrete;margin:0;transition-property:opacity,transform,display,overlay;transition-duration:.25s;transition-timing-function:cubic-bezier(.16,1,.3,1);position:fixed;bottom:auto;left:auto;transform:translateY(-10px)scale(.95)}.home-announcements-popover:popover-open{opacity:1;transform:translateY(0)scale(1)}@starting-style{.home-announcements-popover:popover-open{opacity:0;transform:translateY(-10px)scale(.95)}}.home-announcements-popover::backdrop{transition:display .25s allow-discrete, overlay .25s allow-discrete, background-color .25s ease-out;background-color:#0000}.home-announcements-popover:popover-open::backdrop{background-color:#00000026}@starting-style{.home-announcements-popover:popover-open::backdrop{background-color:#0000}}.popover-header{margin-bottom:var(--space-sm);border-bottom:1px solid var(--border-light);padding-bottom:var(--space-xs);justify-content:space-between;align-items:center;display:flex}.popover-header h3{font-family:var(--font-heading);color:var(--cinnamon-primary);margin:0;font-size:1.05rem;font-weight:700}.popover-close-btn{color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;padding:4px 8px;font-size:.95rem}.popover-close-btn:hover{color:var(--cinnamon-primary);background:var(--bg-card-hover)}.popover-body{gap:var(--space-sm);max-height:340px;margin-bottom:var(--space-sm);flex-direction:column;padding-right:2px;display:flex;overflow-y:auto}.popover-body::-webkit-scrollbar{width:5px}.popover-body::-webkit-scrollbar-track{background:var(--bg-body);border-radius:var(--radius-full)}.popover-body::-webkit-scrollbar-thumb{background:var(--cinnamon-secondary);border-radius:var(--radius-full)}.popover-announcement-card{padding:var(--space-sm) var(--space-md);background:var(--bg-elevated);border-radius:var(--radius-md);border:1px solid var(--border-light);transition:all var(--transition-fast);flex-direction:column;gap:2px;display:flex}.popover-announcement-card:hover{border-color:var(--cinnamon-secondary);box-shadow:var(--shadow-sm)}.popover-announcement-title{color:var(--text-primary);margin:0;font-size:.95rem;font-weight:700}.popover-announcement-time{color:var(--text-tertiary);margin-bottom:2px;font-size:.72rem}.popover-announcement-content{color:var(--text-secondary);font-size:.88rem;line-height:1.5}@media (max-width:480px){.home-announcements-popover{right:var(--space-sm);left:var(--space-sm);width:auto}}.demo-simulator-wrapper{gap:var(--space-md);flex-direction:column;width:100%;max-width:440px;margin:0 auto;display:flex}.simulator-controls{justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}.submission-toggle{background:var(--bg-card-hover);border-radius:var(--radius-full);border:1px solid var(--border-light);padding:3px;display:flex}.toggle-btn{font-size:.78rem;font-family:var(--font-heading);color:var(--text-secondary);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;padding:6px 14px;font-weight:600}.toggle-btn.active{background:var(--cinnamon-primary);color:var(--text-inverse);box-shadow:var(--shadow-sm)}.restart-btn{border:1px solid var(--border-medium);font-size:.78rem;font-family:var(--font-heading);color:var(--cinnamon-primary);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);background:0 0;padding:6px 12px;font-weight:600}.restart-btn:hover{background:var(--bg-card-hover);border-color:var(--cinnamon-primary)}.simulator-steps-bar{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-light);justify-content:space-between;padding:8px 16px;display:flex;position:relative}.step-indicator-btn{cursor:pointer;opacity:.5;transition:all var(--transition-fast);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:3px;padding:4px;display:flex}.step-indicator-btn.active{opacity:1}.step-indicator-btn.completed{opacity:.8}.step-dot-index{border-radius:var(--radius-full);background:var(--border-medium);width:20px;height:20px;color:var(--text-secondary);font-family:var(--font-heading);transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.step-indicator-btn.active .step-dot-index{background:var(--cinnamon-primary);color:var(--text-inverse)}.step-indicator-btn.completed .step-dot-index{background:var(--cinnamon-secondary);color:var(--text-inverse)}.step-dot-label{color:var(--text-secondary);text-align:center;word-break:break-word;max-width:100%;font-size:.62rem;font-weight:600;display:block}.step-indicator-btn.active .step-dot-label{color:var(--cinnamon-primary);font-weight:700}.simulator-screen-frame{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-lg);flex-direction:column;display:flex;overflow:hidden}.screen-frame-header{background:var(--bg-sidebar);border-bottom:1px solid var(--border-light);padding:8px var(--space-md);align-items:center;gap:var(--space-md);display:flex}.window-dots{flex-shrink:0;gap:5px;display:flex}.win-dot{border-radius:var(--radius-full);width:9px;height:9px}.win-dot.win-dot.r{background:#e2726e}.win-dot.win-dot.y{background:#e7b066}.win-dot.win-dot.g{background:#81b880}.window-address{background:var(--bg-elevated);border:1px solid var(--border-light);padding:2px var(--space-sm);color:var(--text-secondary);font-size:.68rem;font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;text-align:center;border-radius:4px;flex:1;overflow:hidden}.screen-viewport{padding:var(--space-md);background:var(--bg-card);flex-direction:column;justify-content:flex-start;height:430px;display:flex;position:relative;overflow-y:auto}.demo-simulator-wrapper .cinnamon-share-card{border-radius:var(--radius-lg)!important;min-height:10.5rem!important;margin-bottom:.5rem!important;padding:1rem 1rem 2.25rem!important}.demo-simulator-wrapper .cinnamon-share-card-mascot{bottom:.15rem!important}.demo-simulator-wrapper .cinnamon-share-mascot-wrapper svg{width:32px!important;height:32px!important}.demo-simulator-wrapper .cinnamon-share-card-text{max-width:95%!important;font-size:.95rem!important}.view-ask{gap:var(--space-md);flex-direction:column;height:100%;display:flex}.mock-profile-header{align-items:center;gap:var(--space-sm);border-bottom:1px solid var(--border-light);padding-bottom:var(--space-sm);display:flex}.mock-profile-header h4{font-family:var(--font-heading);color:var(--text-primary);margin-bottom:2px;font-size:.95rem}.mock-profile-header p{color:var(--text-secondary);font-size:.72rem}.ask-form-mock{flex-direction:column;width:100%;display:flex}.mode-toggle-container-mock{background:var(--bg-sidebar);border:1px solid var(--border-medium);border-radius:var(--radius-full);margin-bottom:var(--space-md);gap:4px;padding:4px;display:flex}.mode-toggle-btn-mock{font-family:var(--font-body);color:var(--text-secondary);border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-fast);justify-content:center;align-items:center;gap:var(--space-xs);background:0 0;border:none;flex:1;padding:6px 12px;font-size:13px;font-weight:600;display:flex}.mode-toggle-btn-mock.active{background:var(--bg-elevated);color:var(--cinnamon-primary);box-shadow:var(--shadow-sm)}.question-box-mock{width:100%;margin-bottom:var(--space-md);position:relative}.question-textarea-mock{border-radius:var(--radius-lg);width:100%;min-height:150px;padding:var(--space-md);background:var(--bg-card);border:1.5px solid var(--border-medium);text-align:left;color:var(--text-primary);font-size:.95rem;font-family:var(--font-body);white-space:pre-wrap;line-height:1.5;display:block;box-shadow:inset 0 2px 4px #00000005}.char-counter-mock{bottom:var(--space-sm);right:var(--space-sm);color:var(--text-tertiary);font-size:.75rem;font-family:var(--font-mono);position:absolute}.text-typed-content{white-space:normal;max-width:0;animation:5.5s steps(40,end) infinite forwards type-ask-text;display:inline-block;overflow:hidden}@keyframes type-ask-text{0%,10%{max-width:0}75%,to{max-width:100%}}.typing-cursor{color:var(--cinnamon-primary);font-weight:100;animation:.8s infinite blink-cursor}@keyframes blink-cursor{50%{opacity:0}}.doodle-drawing-canvas{background:var(--bg-card);border:2px dashed var(--border-medium);border-radius:var(--radius-lg);justify-content:center;align-items:center;height:150px;display:flex;position:relative;overflow:hidden}.demo-canvas-svg{width:110px;height:110px}.drawing-bread-path{stroke-dasharray:200;stroke-dashoffset:200px;animation:5.5s cubic-bezier(.4,0,.2,1) infinite forwards draw-bread}@keyframes draw-bread{0%,10%{stroke-dashoffset:200px}70%,to{stroke-dashoffset:0}}.drawing-eye-1,.drawing-eye-2,.drawing-mouth{opacity:0;animation:5.5s infinite forwards draw-eyes}@keyframes draw-eyes{0%,65%{opacity:0}75%,to{opacity:1}}.pencil-svg-pointer{offset-path:path("M 35 25 C 35 15, 42 12, 50 12 C 58 12, 65 15, 65 25 C 65 37, 72 50, 67 70 C 65 74, 55 76, 50 76 C 45 76, 35 74, 33 70 C 28 50, 35 37, 35 25 Z");offset-rotate:0deg;transform-origin:0 0;z-index:10;animation:5.5s linear infinite forwards pencil-trace-bread}@keyframes pencil-trace-bread{0%,10%{offset-distance:0%;opacity:1}70%{offset-distance:100%;opacity:1}75%,to{offset-distance:100%;opacity:0}}.demo-submit-btn{animation:5.5s infinite forwards button-click-effect;padding:10px 16px!important;font-size:.95rem!important}@keyframes button-click-effect{0%,82%{transform:scale(1);box-shadow:0 4px 14px #9b583c40}85%{transform:scale(.97);box-shadow:0 2px 4px #9b583c1a}88%,to{transform:scale(1)}}.view-inbox{gap:var(--space-md);flex-direction:column;display:flex}.mock-inbox-header{border-bottom:1px solid var(--border-light);padding-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.mock-inbox-header h3{font-family:var(--font-heading);color:var(--text-primary);font-size:1.05rem}.mock-inbox-header p{color:var(--text-secondary);font-size:.7rem}.inbox-count-badge{background:var(--cinnamon-secondary);color:var(--text-inverse);border-radius:var(--radius-full);padding:2px 8px;font-size:.68rem;font-weight:700;animation:2s infinite pulse-badge}.inbox-cards-list{gap:var(--space-md);flex-direction:column;display:flex}.incoming-card{animation:.6s cubic-bezier(.16,1,.3,1) forwards card-slide-in;border-color:var(--cinnamon-secondary)!important;box-shadow:0 4px 20px #d98a6c26!important}@keyframes card-slide-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.received-doodle{background:#fff;width:90px;height:90px}.stroke-replaying-bread{stroke-dasharray:200;stroke-dashoffset:200px;animation:4s linear infinite forwards replay-bread}@keyframes replay-bread{0%{stroke-dashoffset:200px}75%,to{stroke-dashoffset:0}}.inbox-card-actions-mock{gap:var(--space-sm);justify-content:flex-end;display:flex}.mock-btn-secondary{border:1px solid var(--border-medium);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:4px;padding:4px 10px;font-size:.72rem}.mock-btn-primary{background:var(--cinnamon-primary);color:var(--text-inverse);cursor:pointer;border:none;border-radius:4px;padding:4px 10px;font-size:.72rem}.mock-ghost-card{opacity:.3;pointer-events:none}.view-answer{justify-content:center;align-items:center;height:100%;display:flex}.answering-overlay{justify-content:center;width:100%;display:flex}.zoomed-card-active{width:100%;max-width:380px;animation:.5s cubic-bezier(.16,1,.3,1) forwards zoom-focus-card;border:2px solid var(--cinnamon-primary)!important;box-shadow:var(--shadow-xl), 0 0 24px #9b583c26!important}@keyframes zoom-focus-card{0%{transform:scale(.97)}to{transform:scale(1.02)}}.textarea-answer-mock{border-radius:var(--radius-md);width:100%;min-height:64px;padding:var(--space-sm) var(--space-md);background:var(--bg-card-hover);border:1.5px solid var(--border-medium);color:var(--text-primary);font-size:.88rem;font-family:var(--font-body);text-align:left;line-height:1.4;display:block;position:relative}.text-typed-answer{white-space:normal;max-width:0;animation:4.5s steps(30,end) infinite forwards type-reply-text;display:inline-block;overflow:hidden}@keyframes type-reply-text{0%,15%{max-width:0}75%,to{max-width:100%}}.typing-cursor-reply{color:var(--cinnamon-primary);font-weight:100;animation:.8s infinite blink-cursor}.demo-answer-btn{animation:4.5s infinite forwards button-click-effect-ans;padding:5px 12px!important;font-size:.82rem!important}@keyframes button-click-effect-ans{0%,82%{transform:scale(1)}85%{transform:scale(.95)}88%,to{transform:scale(1)}}.view-public{gap:var(--space-md);flex-direction:column;display:flex}.public-profile-header{align-items:center;gap:var(--space-sm);border-bottom:1px solid var(--border-light);padding-bottom:var(--space-sm);display:flex}.public-profile-header h3{font-family:var(--font-heading);color:var(--text-primary);margin-bottom:2px;font-size:.95rem}.public-profile-header p{color:var(--text-secondary);font-size:.7rem}.public-cards-container{justify-content:center;padding:4px 0;display:flex}.max-width-card-mock{max-width:360px;margin:0 auto}.marshmallow-card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:2px solid var(--border-medium);transition:transform var(--transition-base), box-shadow var(--transition-base);flex-direction:column;display:flex;overflow:hidden}.marshmallow-heart-badge-demo{z-index:10;border-radius:var(--radius-full);width:28px;height:28px;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);background:#fff;justify-content:center;align-items:center;display:flex;position:absolute;top:10px;right:10px}.marshmallow-answer-box{padding:var(--space-lg);background:var(--bg-elevated);text-align:left}.marshmallow-answer-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.mock-avatar-mini{border-radius:var(--radius-full);background:var(--cinnamon-primary);width:40px;height:40px;color:var(--text-inverse);font-family:var(--font-heading);box-shadow:var(--shadow-sm);border:2px solid var(--cinnamon-primary);justify-content:center;align-items:center;font-size:.9rem;font-weight:600;display:flex}.marshmallow-author-name{font-family:var(--font-heading);color:var(--cinnamon-primary);margin-bottom:2px;font-size:1.02rem;font-weight:600;line-height:1.3;display:block}.marshmallow-answer-content{font-family:var(--font-body);color:var(--text-secondary);white-space:pre-wrap;padding-left:2px;font-size:1.05rem;line-height:1.6}.marshmallow-card-footer{background:var(--bg-card-hover);padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--border-light);color:var(--text-tertiary);justify-content:space-between;align-items:center;font-size:.75rem;font-weight:500;display:flex}.footer-sender-info{align-items:center;gap:4px;display:flex}.marshmallow-save-btn{margin-top:var(--space-sm);cursor:not-allowed;border-radius:var(--radius-sm);align-self:flex-end;border:1px solid var(--border-medium)!important;color:var(--text-primary)!important;background:0 0!important;padding:6px 12px!important;font-size:.78rem!important}@media (max-width:480px){.simulator-steps-bar{padding:6px var(--space-xs)!important}.step-dot-label{display:none!important}.step-indicator-btn{padding:2px!important}.step-dot-index{width:24px!important;height:24px!important;font-size:.85rem!important}.demo-simulator-wrapper{gap:var(--space-sm)!important}.screen-viewport{padding:var(--space-sm)!important;height:400px!important}.ask-form-mock .btn-lg{padding:8px 12px!important;font-size:.88rem!important}.demo-simulator-wrapper .cinnamon-share-card{min-height:6.5rem!important;margin-bottom:.2rem!important;padding:.4rem .4rem 1.5rem!important}.demo-simulator-wrapper .cinnamon-share-card-inner{min-height:4.2rem!important;padding:.3rem var(--space-xs)!important}.demo-simulator-wrapper .cinnamon-share-card-text{font-size:.76rem!important}.demo-simulator-wrapper .cinnamon-share-mascot-wrapper svg{width:24px!important;height:24px!important}.demo-simulator-wrapper .received-doodle{width:42px!important;height:42px!important}.demo-simulator-wrapper .drawing-card-wrapper{padding:1px!important}.mock-avatar-mini{width:24px!important;height:24px!important;font-size:.7rem!important}.textarea-answer-mock{height:32px!important;min-height:32px!important;padding:4px 8px!important;font-size:.75rem!important}.marshmallow-answer-box{margin-top:2px!important;padding:4px 8px!important}.view-public-parent .public-profile-header{margin-bottom:2px!important;padding-bottom:0!important}.public-preview-share-card{min-height:5rem!important;margin-bottom:0!important}.view-public-parent .marshmallow-card{padding:4px var(--space-xs)!important}.view-public-parent .marshmallow-card-footer{margin-top:2px!important;padding-top:2px!important}.view-public-parent .marshmallow-save-btn{margin-top:2px!important;padding:2px 6px!important;font-size:.72rem!important}}.simulator-controls{margin-bottom:var(--space-xs)}.workflow-toggle{background:var(--bg-card-hover);border:1px solid var(--border-medium);border-radius:var(--radius-full);gap:2px;padding:3px;display:flex;box-shadow:inset 0 2px 4px #00000008}.toggle-btn-small{font-family:var(--font-header);color:var(--text-tertiary);border-radius:var(--radius-full);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:4px 10px;font-size:.76rem;font-weight:700;transition:all .2s}.toggle-btn-small.active{background:var(--cinnamon-primary);color:#fff;box-shadow:0 2px 6px #7d4e3a40}.doodle-drawing-canvas-layout{gap:var(--space-xs);background:var(--bg-elevated);border:1.5px solid var(--border-medium);border-radius:var(--radius-lg);padding:var(--space-sm);grid-template-rows:auto 32px;grid-template-columns:36px 1fr;display:grid;position:relative}.canvas-mock-toolbar{border-right:1.5px solid var(--border-light);padding-right:var(--space-xs);flex-direction:column;grid-area:1/1/span 2;justify-content:flex-start;align-items:center;gap:6px;display:flex}.canvas-toolbar-btn{border-radius:var(--radius-sm);cursor:default;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;width:24px;height:24px;font-size:.85rem;transition:all .15s;display:flex}.canvas-toolbar-btn.active{background:var(--bg-card-hover);border-color:var(--border-medium);box-shadow:inset 0 1px 3px #0000000d}.canvas-mock-palette{padding-top:var(--space-xs);border-top:1.5px solid var(--border-light);grid-area:2/2;align-items:center;gap:6px;display:flex}.palette-color-dot{border:1px solid var(--border-medium);border-radius:50%;width:12px;height:12px;transition:transform .15s}.palette-color-dot.active{box-shadow:0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--cinnamon-secondary);transform:scale(1.3)}.palette-color-wheel{cursor:default;margin-left:auto;font-size:.85rem}.screen-viewport{overflow:hidden!important}.drawing-bread-crust-path{stroke-dasharray:280;stroke-dashoffset:280px;animation:2.9s linear forwards draw-crust-anim}@keyframes draw-crust-anim{0%{stroke-dashoffset:280px}to{stroke-dashoffset:0}}.drawing-bread-face-path{opacity:0;animation:1.4s linear 4.6s forwards draw-face-anim}@keyframes draw-face-anim{0%{opacity:0}25%,to{opacity:1}}.cursor-crust-trace{offset-path:path("M 50 22 C 40 22, 30 25, 30 38 C 30 45, 33 48, 33 52 C 33 60, 28 72, 32 78 C 35 81, 65 81, 68 78 C 72 72, 67 60, 67 52 C 67 48, 70 45, 70 38 C 70 25, 60 22, 50 22 Z");offset-rotate:0deg;animation:2.9s linear forwards trace-crust}.cursor-bucket-trace{offset-path:path("M 50 22 Q 45 35 50 40");offset-rotate:0deg;animation:.8s ease-out forwards trace-bucket}.cursor-face-trace{offset-path:path("M 44 48 M 56 48 M 46 54 Q 50 57 54 54");offset-rotate:0deg;animation:1.3s linear forwards trace-face}@keyframes trace-crust{0%{offset-distance:0%;opacity:1}to{offset-distance:100%;opacity:1}}@keyframes trace-bucket{0%{offset-distance:0%;opacity:1}to{offset-distance:100%;opacity:1}}@keyframes trace-face{0%{offset-distance:0%;opacity:1}to{offset-distance:100%;opacity:1}}.bucket-click-pop{animation:.3s forwards click-pop}@keyframes click-pop{0%{transform:scale(1)}50%{transform:scale(1.3)rotate(-15deg)}to{transform:scale(1)}}.mod-actions-btn-group{gap:var(--space-xs);margin-top:var(--space-md);display:flex;position:relative}.mod-approve-click-action{position:relative}.mock-mouse-cursor{z-index:20;pointer-events:none;font-size:1.1rem;animation:4s ease-in-out infinite forwards mouse-move-click;position:absolute}@keyframes mouse-move-click{0%{opacity:0;transform:translate(60px,40px)}15%{opacity:1}50%,65%{transform:translate(12px,8px)scale(1)}70%{transform:translate(12px,8px)scale(.85)}75%,to{transform:translate(12px,8px)scale(1)}}.animate-moderator-card{animation:4s ease-in-out infinite forwards mod-card-flow}@keyframes mod-card-flow{0%,70%{opacity:1;transform:translateY(0)scale(1)}85%,to{opacity:0;transform:translate(100px)scale(.9)}}.mini-canvas-grid-bg{background-image:radial-gradient(var(--border-medium) 1px, transparent 1px);opacity:.15;pointer-events:none;background-size:8px 8px;position:absolute;inset:0}.mini-canvas-svg-content{width:100%;height:100%;padding:var(--space-xs);display:block}.mini-canvas-brush-stroke{stroke-dasharray:50;stroke-dashoffset:50px;animation:4s ease-in-out infinite forwards draw-brush-spotlight}@keyframes draw-brush-spotlight{0%,20%{stroke-dashoffset:50px}70%,to{stroke-dashoffset:0}}.mini-canvas-pencil{animation:4s ease-in-out infinite forwards float-pencil-spotlight}@keyframes float-pencil-spotlight{0%,20%{opacity:0;transform:translate(-20px,5px)rotate(0)}25%{opacity:1}70%{opacity:1;transform:translate(0)rotate(15deg)}80%,to{opacity:0;transform:translate(5px,-5px)rotate(0)}}.demo-simulator-wrapper .cinnamon-share-card{min-height:8.5rem!important;margin-bottom:.25rem!important;padding:.6rem .6rem 2rem!important}.demo-simulator-wrapper .cinnamon-share-card-inner{min-height:5.6rem!important;padding:.4rem var(--space-xs)!important}.demo-simulator-wrapper .received-doodle{background:0 0!important;width:60px!important;height:60px!important}.demo-simulator-wrapper .drawing-card-wrapper{padding:2px!important}.mock-inbox-header{margin-bottom:var(--space-xs)!important;padding-bottom:4px!important}.mock-inbox-header h3{font-size:.95rem!important}.mock-inbox-header p{font-size:.7rem!important}.question-card-container{padding:var(--space-xs) var(--space-sm)!important}.question-card-actions-area{padding-top:var(--space-xs)!important;margin-top:var(--space-xs)!important}.textarea-answer-mock{height:42px!important;min-height:42px!important;padding:6px 10px!important;font-size:.8rem!important}.view-public-parent{overflow-y:hidden!important}.view-public-parent .public-profile-header{margin-bottom:4px!important;padding-bottom:0!important}.view-public-parent .public-profile-header h3{font-size:.95rem!important}.view-public-parent .public-profile-header p{font-size:.7rem!important}.public-preview-share-card{min-height:7rem!important;margin-bottom:0!important}.view-public-parent .marshmallow-card-wrapper{margin-top:0!important}.view-public-parent .marshmallow-card{padding:var(--space-xs) var(--space-sm)!important}.view-public-parent .marshmallow-answer-box{margin-top:4px!important;padding:6px 10px!important}.view-public-parent .marshmallow-card-footer{margin-top:2px!important;padding-top:2px!important}