:root{--color-bg: #E2EFDA;--color-card-bg: #FAFAFA;--color-text: #1a1a1a;--color-border: #2C1810;--primary: var(--color-red);--color-red: #A31F23;--color-red-hover: #C4262A;--color-orange: #F2952E;--color-orange-hover: #FFAD4D;--font-heading: "Bangers", system-ui, cursive;--font-body: "Fredoka", system-ui, sans-serif;--border-width: 3px;--border-radius: 16px;--shadow-offset: 4px;--card-width: 400px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow-x:hidden}#app{width:100%;display:flex;justify-content:center;padding:20px}h1,h2,h3{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:1px}.card{background:var(--color-card-bg);border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--color-border);width:100%;max-width:var(--card-width);padding:24px;display:flex;flex-direction:column;align-items:center;position:relative;transition:transform .3s ease}.card-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;position:relative}.step-badge{background:#fad6b4;border:2px solid var(--color-border);border-radius:20px;padding:4px 12px;font-family:var(--font-heading);font-size:1.1rem;color:#dc6829}.divider{width:100%;height:3px;background-color:var(--color-border);margin-bottom:20px}.form-group{width:100%;margin-bottom:16px;text-align:left}.form-label{display:block;font-weight:500;margin-bottom:8px;font-size:.95rem}.comic-input{width:100%;padding:12px 16px;font-family:var(--font-body);font-size:1rem;border:var(--border-width) solid var(--color-border);border-radius:8px;outline:none;background:#fff;transition:all .2s}.comic-input:focus{box-shadow:2px 2px 0 var(--color-border);transform:translate(-1px,-1px)}.comic-input::placeholder{color:#aaa}.btn{width:100%;padding:14px;font-family:var(--font-body);font-weight:700;font-size:1.1rem;border:var(--border-width) solid var(--color-border);border-radius:12px;cursor:pointer;text-align:center;box-shadow:2px 2px 0 var(--color-border);transition:all .1s ease;margin-bottom:12px;position:relative;-webkit-user-select:none;user-select:none}.btn:active{box-shadow:0 0 0 var(--color-border);transform:translate(2px,2px)}.btn-primary{background-color:var(--color-red);color:#fff}.btn-primary:hover{background-color:var(--color-red-hover)}.btn-secondary{background-color:var(--color-orange);color:var(--color-border)}.btn-secondary:hover{background-color:var(--color-orange-hover)}.btn-text{background:transparent;border:none;box-shadow:none;color:#666;font-weight:500;padding:8px;width:auto;margin:0 auto;display:block}.btn-text:active{transform:none}.checkbox-group{display:flex;align-items:center;gap:10px;margin-bottom:24px;width:100%}.comic-checkbox{appearance:none;width:20px;height:20px;border:2px solid var(--color-border);border-radius:4px;cursor:pointer;display:grid;place-content:center}.comic-checkbox:before{content:"";width:10px;height:10px;transform:scale(0);background-color:var(--color-red);transition:.12s transform ease-in-out}.comic-checkbox:checked:before{transform:scale(1)}.fade-in{animation:fadeIn .4s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.intro-logo{background:linear-gradient(to bottom,#721215,#8a1a1d);width:100%;height:140px;border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);display:flex;justify-content:center;align-items:center;margin-bottom:24px;position:relative;box-shadow:inset 0 0 20px #00000080}.nerds-text{font-family:var(--font-heading);font-size:3.5rem;color:#fff;text-shadow:3px 3px 0px #000;letter-spacing:2px;transform:rotate(-3deg)}.subtitle{font-family:cursive;color:#555;margin-bottom:32px;font-size:.9rem;font-style:italic}.task-item{width:100%;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #ddd}.task-item:last-child{border-bottom:none}.task-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}.task-number{background:var(--color-red);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-family:var(--font-heading);font-size:1.1rem;flex-shrink:0}.task-info{flex-grow:1}.task-title{font-family:var(--font-heading);font-size:1.2rem;margin-bottom:4px}.task-desc{font-size:.85rem;color:#666;margin-bottom:8px}.task-action-btn{padding:4px 8px;background:#eee;border:1px solid #333;border-radius:4px;font-size:.8rem;cursor:pointer;display:inline-block;margin-bottom:8px}.success-icon{width:60px;height:60px;background:var(--color-red);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:2rem;margin-bottom:20px}.status-box{width:100%;background:#fad6b4;border:2px solid var(--color-border);border-radius:12px;padding:16px;margin-bottom:16px}.status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.status-badge{background:var(--color-red);color:#fff;padding:4px 12px;border-radius:8px;font-family:var(--font-heading);font-size:.9rem;border:2px solid var(--color-border)}.progress-bar-container{width:100%;height:12px;background:#fff;border:2px solid var(--color-border);border-radius:6px;margin-bottom:4px;overflow:hidden}.progress-bar{height:100%;width:0%;background:var(--color-orange)}.invite-box{width:100%;background:#fff;border:2px solid var(--color-border);border-radius:12px;padding:16px;margin-bottom:24px;text-align:center}.invite-link{background:#fad6b4;padding:12px;border:2px solid var(--color-border);border-radius:8px;font-family:monospace;font-size:.8rem;margin-bottom:12px;word-break:break-all;cursor:text;-webkit-user-select:text;user-select:text}.error-msg{color:red;font-size:.8rem;margin-top:4px;font-weight:700;display:block}.copy-feedback{color:#2e7d32;font-size:.8rem;margin-top:4px;font-weight:700;height:1.2em}.nft-calendar-badge{position:fixed;top:20px;right:20px;width:140px;height:140px;z-index:9999;display:flex;justify-content:center;align-items:center;background-image:url(/paw.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;filter:drop-shadow(0 0 5px rgba(160,32,240,.5));transition:transform .2s ease;cursor:pointer}.nft-calendar-badge:hover{transform:scale(1.1) rotate(10deg);filter:drop-shadow(0 0 10px rgba(0,255,204,.8))}.nft-content{width:70%;height:70%;background-image:url(/nft-calendar-logo.svg);background-size:contain;background-repeat:no-repeat;background-position:center;transform:rotate(-10deg)}.paw{position:fixed;width:40px;height:40px;background-image:url(/paw.svg);background-size:contain;background-repeat:no-repeat;pointer-events:none;z-index:-1;opacity:0;animation:pawFade 4s ease-in-out forwards}@keyframes pawFade{0%{opacity:0;transform:scale(.5) rotate(var(--rotation));filter:drop-shadow(0 0 0px rgba(255,255,255,0))}20%{opacity:.3;transform:scale(1) rotate(var(--rotation));filter:drop-shadow(0 0 10px rgba(255,255,255,.8))}80%{opacity:.3;transform:scale(1) rotate(var(--rotation));filter:drop-shadow(0 0 5px rgba(255,255,255,.5))}to{opacity:0;transform:scale(.8) rotate(var(--rotation));filter:drop-shadow(0 0 0px rgba(255,255,255,0))}}