@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";
:root{--color-primary-50:#f5f3ff;--color-primary-100:#ede9fe;--color-primary-200:#ddd6fe;--color-primary-300:#c4b5fd;--color-primary-400:#a78bfa;--color-primary-500:#8b5cf6;--color-primary-600:#7c3aed;--color-primary-700:#6d28d9;--color-primary-800:#5b21b6;--color-primary-900:#4c1d95;--color-accent-50:#fffbeb;--color-accent-100:#fef3c7;--color-accent-200:#fde68a;--color-accent-300:#fcd34d;--color-accent-400:#fbbf24;--color-accent-500:#f59e0b;--color-accent-600:#d97706;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-500:#ef4444;--color-danger-600:#dc2626;--color-gray-50:#fafaf9;--color-gray-100:#f5f5f4;--color-gray-200:#e7e5e4;--color-gray-300:#d6d3d1;--color-gray-400:#a8a29e;--color-gray-500:#78716c;--color-gray-600:#57534e;--color-gray-700:#44403c;--color-gray-800:#292524;--color-gray-900:#1c1917;--color-cat-environment:#3b82f6;--color-cat-internal:#f59e0b;--color-cat-people:#ef4444;--color-cat-effective-efficient:#22c55e;--color-cat-effective-inefficient:#f59e0b;--color-cat-ineffective-efficient:#3b82f6;--color-cat-ineffective-inefficient:#ef4444;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-size-6xl:3.75rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000d;--shadow-xl:0 20px 25px -5px #00000014, 0 8px 10px -6px #0000000a;--shadow-glow:0 0 20px #8b5cf626;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.35s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--max-width-sm:24rem;--max-width-md:28rem;--max-width-lg:32rem;--max-width-xl:36rem;--max-width-2xl:42rem;--max-width-4xl:56rem;--max-width-6xl:72rem;--max-width-7xl:80rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-gray-800);background:linear-gradient(135deg, var(--color-primary-50) 0%, #fff 40%, var(--color-accent-50) 100%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;min-height:100vh;line-height:1.6}h1,h2,h3,h4,h5,h6{color:var(--color-gray-900);font-weight:700;line-height:1.25}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}p{color:var(--color-gray-600);line-height:1.7}a{color:var(--color-primary-600);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-700)}.container{width:100%;max-width:var(--max-width-7xl);padding:0 var(--space-4);margin:0 auto}.container-sm{max-width:var(--max-width-md)}.container-lg{max-width:var(--max-width-4xl)}.card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md);transition:all var(--transition-base);background:#ffffffd9;border:1px solid #fff9}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.card-interactive{cursor:pointer}.card-interactive:hover{border-color:var(--color-primary-200);box-shadow:var(--shadow-lg), var(--shadow-glow);transform:translateY(-2px)}.card-highlighted{border-color:var(--color-primary-300);background:linear-gradient(135deg,#8b5cf60a 0%,#ffffffe6 100%)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-family);font-size:var(--font-size-base);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;-webkit-user-select:none;user-select:none;border:none;font-weight:600;line-height:1.5;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";pointer-events:none;background:linear-gradient(#ffffff26,#0000);position:absolute;inset:0}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);color:#fff;box-shadow:0 2px 8px #8b5cf64d}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #8b5cf666}.btn-secondary{color:var(--color-gray-700);border:1px solid var(--color-gray-200);box-shadow:var(--shadow-sm);background:#fffc}.btn-secondary:hover:not(:disabled){border-color:var(--color-primary-200);color:var(--color-primary-700);background:#fff}.btn-success{background:linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);color:#fff;box-shadow:0 2px 8px #22c55e4d}.btn-danger{background:linear-gradient(135deg, var(--color-danger-500) 0%, var(--color-danger-600) 100%);color:#fff;box-shadow:0 2px 8px #ef44444d}.btn-ghost{color:var(--color-gray-600);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--color-gray-100);color:var(--color-gray-800)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg);border-radius:var(--radius-xl)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.btn-block{width:100%}.btn-icon{border-radius:var(--radius-full);width:2.5rem;height:2.5rem;padding:0}.form-group{margin-bottom:var(--space-5)}.form-label{font-size:var(--font-size-sm);color:var(--color-gray-700);margin-bottom:var(--space-2);font-weight:600;line-height:1.5;display:block}.form-description{font-size:var(--font-size-xs);color:var(--color-gray-500);margin-bottom:var(--space-2);line-height:1.5}.form-input,.form-textarea,.form-select{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-gray-800);border:1.5px solid var(--color-gray-200);border-radius:var(--radius-lg);transition:all var(--transition-fast);background:#ffffffe6;outline:none}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-primary-400);background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-gray-400)}.form-textarea{resize:vertical;min-height:100px;line-height:1.6}.form-input-lg{padding:var(--space-4) var(--space-5);font-size:var(--font-size-lg)}.radio-group{gap:var(--space-3);flex-direction:column;display:flex}.radio-card{align-items:center;gap:var(--space-3);padding:var(--space-4);border:1.5px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);background:#fffc;display:flex}.radio-card:hover{border-color:var(--color-primary-300);background:#fffffff2}.radio-card.selected{border-color:var(--color-primary-500);background:var(--color-primary-50);box-shadow:0 0 0 3px #8b5cf61a}.radio-card input[type=radio]{display:none}.radio-indicator{border-radius:var(--radius-full);border:2px solid var(--color-gray-300);width:1.25rem;height:1.25rem;transition:all var(--transition-fast);flex-shrink:0;position:relative}.radio-card.selected .radio-indicator{border-color:var(--color-primary-500);background:var(--color-primary-500)}.radio-card.selected .radio-indicator:after{content:"";border-radius:var(--radius-full);background:#fff;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio-label{font-size:var(--font-size-sm);color:var(--color-gray-700);font-weight:500;line-height:1.4}.matrix-grid{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.matrix-cell{padding:var(--space-4);text-align:center;border-radius:var(--radius-lg);border:2px solid var(--color-gray-200);cursor:pointer;transition:all var(--transition-base);font-weight:600;font-size:var(--font-size-sm);justify-content:center;align-items:center;gap:var(--space-1);flex-direction:column;min-height:80px;display:flex}.matrix-cell:hover{border-color:var(--color-primary-300);transform:scale(1.02)}.matrix-cell.selected{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #8b5cf626}.matrix-cell[data-quadrant=efektif-efisien]{background:#22c55e14}.matrix-cell[data-quadrant=efektif-efisien].selected{border-color:var(--color-success-500);background:#22c55e26}.matrix-cell[data-quadrant=efektif-tidak-efisien]{background:#f59e0b14}.matrix-cell[data-quadrant=efektif-tidak-efisien].selected{border-color:var(--color-accent-500);background:#f59e0b26}.matrix-cell[data-quadrant=tidak-efektif-efisien]{background:#3b82f614}.matrix-cell[data-quadrant=tidak-efektif-efisien].selected{background:#3b82f61f;border-color:#3b82f6}.matrix-cell[data-quadrant=tidak-efektif-tidak-efisien]{background:#ef444414}.matrix-cell[data-quadrant=tidak-efektif-tidak-efisien].selected{border-color:var(--color-danger-500);background:#ef44441f}.matrix-cell-label{font-size:var(--font-size-xs);color:var(--color-gray-500);font-weight:400}.badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);border-radius:var(--radius-full);font-weight:600;line-height:1.4;display:inline-flex}.badge-primary{background:var(--color-primary-100);color:var(--color-primary-700)}.badge-success{background:var(--color-success-100);color:var(--color-success-600)}.badge-warning{background:var(--color-accent-100);color:var(--color-accent-600)}.badge-danger{background:var(--color-danger-100);color:var(--color-danger-600)}.badge-neutral{background:var(--color-gray-100);color:var(--color-gray-600)}.count-display{align-items:baseline;gap:var(--space-2);display:flex}.count-number{font-size:var(--font-size-5xl);background:linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:900;line-height:1}.count-label{font-size:var(--font-size-lg);color:var(--color-gray-500);font-weight:500}.progress-bar{background:var(--color-gray-100);border-radius:var(--radius-full);width:100%;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));border-radius:var(--radius-full);height:100%;transition:width var(--transition-slow)}.stepper{justify-content:center;align-items:center;gap:var(--space-2);margin-bottom:var(--space-8);display:flex}.stepper-step{align-items:center;gap:var(--space-2);display:flex}.stepper-circle{border-radius:var(--radius-full);width:2rem;height:2rem;font-size:var(--font-size-sm);transition:all var(--transition-base);border:2px solid var(--color-gray-200);color:var(--color-gray-400);background:#fff;justify-content:center;align-items:center;font-weight:700;display:flex}.stepper-step.active .stepper-circle{border-color:var(--color-primary-500);background:var(--color-primary-500);color:#fff}.stepper-step.completed .stepper-circle{border-color:var(--color-success-500);background:var(--color-success-500);color:#fff}.stepper-label{font-size:var(--font-size-sm);color:var(--color-gray-400);font-weight:500;display:none}.stepper-step.active .stepper-label,.stepper-step.completed .stepper-label{color:var(--color-gray-700)}.stepper-line{background:var(--color-gray-200);border-radius:var(--radius-full);width:2rem;height:2px}.stepper-step.completed+.stepper-line{background:var(--color-success-500)}@media (min-width:640px){.stepper-label{display:block}.stepper-line{width:3rem}}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;padding:var(--space-4);animation:fadeIn var(--transition-base) ease-out;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);max-width:var(--max-width-2xl);width:100%;max-height:90vh;animation:slideUp var(--transition-base) ease-out;background:#fff;overflow-y:auto}.modal-header{padding:var(--space-6);border-bottom:1px solid var(--color-gray-100);justify-content:space-between;align-items:center;display:flex}.modal-body{padding:var(--space-6)}.modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-gray-100);gap:var(--space-3);justify-content:flex-end;display:flex}.drawer-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;animation:fadeIn var(--transition-fast) ease-out;background:#0006;position:fixed;inset:0}.drawer{width:min(480px,90vw);box-shadow:var(--shadow-xl);z-index:101;animation:slideInRight var(--transition-base) ease-out;background:#fff;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0}.drawer-header{padding:var(--space-6);border-bottom:1px solid var(--color-gray-100);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.drawer-body{padding:var(--space-6);flex:1;overflow-y:auto}.drawer-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-gray-100);gap:var(--space-2);flex-wrap:wrap;flex-shrink:0;display:flex}.bubble{padding:var(--space-3) var(--space-4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);font-size:var(--font-size-sm);color:var(--color-gray-700);cursor:pointer;transition:all var(--transition-base);word-break:break-word;max-width:240px;animation:bubblePopIn var(--transition-spring) ease-out;background:#ffffffe6;border:1px solid #ffffff80;align-items:center;line-height:1.4;display:inline-flex;position:absolute}.bubble:hover{box-shadow:var(--shadow-lg);z-index:10;transform:scale(1.05)}.bubble.cat-lingkungan{border-left:3px solid var(--color-cat-environment)}.bubble.cat-internal{border-left:3px solid var(--color-cat-internal)}.bubble.cat-people{border-left:3px solid var(--color-cat-people)}.bubble.cat-pinned{border:2px solid var(--color-accent-400);background:var(--color-accent-50)}.bubble.cat-discussed{opacity:.6}.bubble-canvas{border-radius:var(--radius-xl);background:linear-gradient(135deg,#8b5cf608 0%,#fbbf2408 50%,#8b5cf608 100%);width:100%;min-height:400px;position:relative;overflow:hidden}.empty-state{padding:var(--space-12) var(--space-6);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{margin-bottom:var(--space-4);opacity:.5;font-size:3rem}.empty-state-title{font-size:var(--font-size-lg);color:var(--color-gray-700);margin-bottom:var(--space-2);font-weight:600}.empty-state-text{font-size:var(--font-size-sm);color:var(--color-gray-500);max-width:320px}.page-participant{min-height:100vh;padding:var(--space-6) var(--space-4);flex-direction:column;align-items:center;display:flex}.page-header{text-align:center;margin-bottom:var(--space-8)}.page-header .eyebrow{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary-500);margin-bottom:var(--space-2);font-weight:700}.page-header h1{margin-bottom:var(--space-3)}.page-header .subtitle{font-size:var(--font-size-lg);color:var(--color-gray-500);max-width:480px;margin:0 auto}.display-layout{color:#fff;background:linear-gradient(135deg,#0f0a1e 0%,#1a1033 50%,#0f0a1e 100%);flex-direction:column;min-height:100vh;display:flex}.display-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid #ffffff1a;flex-shrink:0;justify-content:space-between;align-items:center;max-height:20vh;display:flex}.display-header h2{color:#fff;font-size:var(--font-size-xl)}.display-header .count-number{-webkit-text-fill-color:#fff;font-size:var(--font-size-3xl);background:0 0}.display-header .count-label{color:#fff9;font-size:var(--font-size-sm)}.display-main{flex:1;display:flex;overflow:hidden}.display-bubble-area{padding:var(--space-4);flex:1;position:relative;overflow:hidden}.display-panel{background:#ffffff0d;border-left:1px solid #ffffff1a;flex-shrink:0;width:280px;overflow-y:auto}.display-panel.collapsed{border:none;width:0;overflow:hidden}.activity-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:var(--space-5);align-items:center;gap:var(--space-4);transition:all var(--transition-base);cursor:pointer;color:inherit;background:#ffffffd9;border:1px solid #fff9;text-decoration:none;display:flex}.activity-card:hover{box-shadow:var(--shadow-lg), var(--shadow-glow);border-color:var(--color-primary-200);transform:translateY(-2px)}.activity-card-number{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));width:3rem;height:3rem;font-weight:800;font-size:var(--font-size-lg);color:var(--color-primary-600);flex-shrink:0;justify-content:center;align-items:center;display:flex}.activity-card.completed .activity-card-number{background:linear-gradient(135deg, var(--color-success-500), var(--color-success-600));color:#fff}.activity-card-body{flex:1;min-width:0}.activity-card-title{font-size:var(--font-size-base);color:var(--color-gray-800);margin-bottom:var(--space-1);font-weight:600}.activity-card-desc{font-size:var(--font-size-sm);color:var(--color-gray-500);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;display:-webkit-box;overflow:hidden}.activity-card-arrow{color:var(--color-gray-300);font-size:var(--font-size-xl);transition:transform var(--transition-fast);flex-shrink:0}.activity-card:hover .activity-card-arrow{color:var(--color-primary-400);transform:translate(4px)}.success-icon{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--color-success-500), var(--color-success-600));color:#fff;width:5rem;height:5rem;margin:0 auto var(--space-6);animation:bubblePopIn var(--transition-spring) ease-out;justify-content:center;align-items:center;font-size:2.5rem;display:flex}.qr-container{padding:var(--space-4);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);background:#fff;display:inline-block}.stats-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.stat-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm);background:#ffffffe6;border:1px solid #fff9}.stat-value{font-size:var(--font-size-4xl);background:linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:900;line-height:1.1}.stat-label{font-size:var(--font-size-sm);color:var(--color-gray-500);margin-top:var(--space-1)}.commitment-wall{gap:var(--space-4);padding:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.commitment-card{border-radius:var(--radius-xl);padding:var(--space-5);transition:all var(--transition-base);cursor:pointer;animation:bubblePopIn var(--transition-spring) ease-out;background:linear-gradient(135deg,#8b5cf614,#fbbf240d);border:1px solid #8b5cf626}.commitment-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.commitment-text{font-size:var(--font-size-base);color:var(--color-gray-800);margin-bottom:var(--space-3);font-weight:500;line-height:1.5}.commitment-author{font-size:var(--font-size-xs);color:var(--color-gray-500)}.cause-chain{gap:var(--space-3);padding:var(--space-4);flex-direction:column;display:flex}.cause-chain-node{align-items:flex-start;gap:var(--space-3);display:flex}.cause-chain-indicator{flex-direction:column;flex-shrink:0;align-items:center;gap:0;display:flex}.cause-chain-dot{border-radius:var(--radius-full);background:var(--color-primary-400);flex-shrink:0;width:12px;height:12px}.cause-chain-line{background:var(--color-primary-200);width:2px;height:24px}.cause-chain-node:first-child .cause-chain-dot{background:var(--color-danger-500);width:16px;height:16px}.cause-chain-node:last-child .cause-chain-dot{background:var(--color-success-500);width:16px;height:16px}.cause-chain-content{flex:1}.cause-chain-step{font-size:var(--font-size-xs);color:var(--color-primary-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1);font-weight:700}.cause-chain-text{font-size:var(--font-size-sm);color:var(--color-gray-700);line-height:1.4}.columns-display{gap:var(--space-4);padding:var(--space-4);grid-template-columns:repeat(3,1fr);height:100%;display:grid}.column-section{border-radius:var(--radius-xl);padding:var(--space-4);background:#ffffff0d;flex-direction:column;display:flex}.column-header{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;padding-bottom:var(--space-3);margin-bottom:var(--space-3);text-align:center;border-bottom:2px solid #ffffff1a;font-weight:700}.column-items{gap:var(--space-2);flex-direction:column;flex:1;display:flex;overflow-y:auto}.matrix-display{border-radius:var(--radius-xl);background:#ffffff1a;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:2px;height:100%;min-height:400px;display:grid;overflow:hidden}.matrix-quadrant{padding:var(--space-4);flex-direction:column;align-items:center;display:flex;position:relative}.matrix-quadrant-label{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3);text-align:center;font-weight:700}.matrix-quadrant-count{font-size:var(--font-size-3xl);margin-bottom:var(--space-2);font-weight:900}.matrix-dots{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.matrix-dot{border-radius:var(--radius-full);color:#fff;cursor:pointer;width:28px;height:28px;transition:transform var(--transition-fast);animation:bubblePopIn var(--transition-spring) ease-out;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:flex}.matrix-dot:hover{z-index:10;transform:scale(1.3)}.participant-list{padding:var(--space-4)}.participant-list-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.participant-search{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:#fff;font-size:var(--font-size-sm);margin-bottom:var(--space-3);background:#ffffff1a;border:1px solid #ffffff26;outline:none}.participant-search::placeholder{color:#fff6}.participant-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);display:flex}.participant-item:hover{background:#ffffff1a}.participant-avatar{border-radius:var(--radius-full);background:var(--color-primary-500);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:11px;font-weight:700;display:flex}.participant-name{font-size:var(--font-size-sm);color:#ffffffe6;font-weight:500}.participant-unit-label{font-size:var(--font-size-xs);color:#ffffff80}.view-toggle{border-radius:var(--radius-lg);background:#ffffff1a;gap:2px;padding:2px;display:flex}.view-toggle-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);color:#fff9;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;font-weight:600}.view-toggle-btn.active{color:#fff;background:#fff3}.pinned-area{border-radius:var(--radius-xl);padding:var(--space-4);margin:var(--space-3);background:#fbbf241a;border:1px dashed #fbbf244d;justify-content:center;align-items:center;min-height:80px;display:flex}.pinned-area.has-content{align-items:flex-start;gap:var(--space-3);flex-direction:column}.pinned-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent-400);font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes bubblePopIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}to{transform:scale(1)}}@keyframes floatBubble{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes spin{to{transform:rotate(360deg)}}.animate-float{animation:4s ease-in-out infinite floatBubble}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-fadeIn{animation:fadeIn var(--transition-base) ease-out}.animate-slideUp{animation:slideUp var(--transition-base) ease-out}.spinner{border-radius:var(--radius-full);border:2px solid #ffffff4d;border-top-color:#fff;width:1.25rem;height:1.25rem;animation:.6s linear infinite spin}.spinner-dark{border-color:var(--color-gray-200);border-top-color:var(--color-primary-500)}@media (max-width:640px){h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}.matrix-grid{gap:var(--space-2)}.matrix-cell{padding:var(--space-3);min-height:70px;font-size:var(--font-size-xs)}.columns-display{grid-template-columns:1fr}.display-panel{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.commitment-wall{grid-template-columns:1fr}}@media (max-width:480px){.page-participant{padding:var(--space-4) var(--space-3)}.card,.activity-card{padding:var(--space-4)}.stats-grid{grid-template-columns:1fr}}.text-center{text-align:center}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs)}.text-lg{font-size:var(--font-size-lg)}.text-muted{color:var(--color-gray-500)}.font-bold{font-weight:700}.font-semibold{font-weight:600}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.w-full{width:100%}.relative{position:relative}