*{box-sizing:border-box}html{background:#0d1117;margin:0;padding:0}body{color:#f0f6fc;background:#0d1117;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.page{min-height:100vh}.header{background:#0d1117;border-bottom:1px solid #30363d;justify-content:space-between;align-items:center;height:72px;padding:0 6vw;display:flex}.logo{letter-spacing:-.8px;font-size:22px;font-weight:800}.header-right{color:#8b949e;align-items:center;gap:8px;font-size:14px;display:flex}.live-dot{background:#3fb950;border-radius:50%;width:8px;height:8px}.add-button{color:#fff;background:#238636;border:1px solid #2ea043;border-radius:7px;margin-left:18px;padding:8px 14px;font-size:13px;font-weight:600;transition:background .2s,transform .2s}.add-button:hover{background:#2ea043;transform:translateY(-1px)}.hero-button{color:#fff;background:#ff5a1f;border:0;border-radius:7px;margin-top:28px;padding:12px 18px;font-weight:700;transition:transform .2s,opacity .2s}.hero-button:hover{opacity:.9;transform:translateY(-1px)}.hero{max-width:1100px;margin:0 auto;padding:90px 24px 60px}.eyebrow{color:#8b949e;letter-spacing:2px;margin:0 0 20px;font-size:12px;font-weight:700}.hero h1{letter-spacing:-4px;max-width:800px;margin:0;font-size:clamp(42px,6vw,78px);line-height:.98}.hero h1 span{color:#ff5a1f}.subtitle{color:#8b949e;max-width:560px;margin-top:25px;font-size:18px;line-height:1.6}.wall-section{max-width:1250px;margin:0 auto;padding:0 24px}.wall-header{justify-content:space-between;margin-bottom:14px;display:flex}.wall-label{color:#8b949e;letter-spacing:1.5px;font-size:12px;font-weight:700}.wall-count{color:#6e7681;margin-left:12px;font-size:12px}.wall{background:#010409;border:1px solid #30363d;border-radius:10px;grid-template-columns:repeat(14,minmax(0,1fr));gap:7px;width:100%;padding:18px;display:grid;position:relative;overflow:visible}.wall-box{aspect-ratio:1;border-radius:5px;width:100%;min-width:0;transition:transform .15s,border-color .15s,background .15s;position:relative;overflow:visible}.wall-box.empty{background:#161b22;border:1px solid #21262d;justify-content:center;align-items:center;display:flex}.wall-box.empty:hover{background:#1c222b;border-color:#30363d}.wall-box.filled{cursor:pointer;background:#238636;border:1px solid #2ea043}.wall-box.filled:hover{z-index:100;background:#2ea043;border-color:#56d364;transform:scale(1.08)}.wall-profile-picture{object-fit:cover;border-radius:4px;width:100%;height:100%;display:block}.wall-letter{color:#fff;justify-content:center;align-items:center;width:100%;height:100%;font-size:14px;font-weight:800;display:flex}.portfolio-card{z-index:9999;pointer-events:none;background:#11161d;border:1px solid #303842;border-radius:12px;width:300px;max-width:300px;padding:10px;animation:.12s ease-out cardIn;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%);box-shadow:0 20px 50px #0000008c,0 5px 15px #0000004d}@keyframes cardIn{0%{opacity:0;transform:translate(-50%)translateY(5px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.portfolio-card img{object-fit:cover;background:#161b22;border-radius:8px;width:100%;max-width:100%;height:150px;max-height:150px;display:block}.card-image-wrapper{background:#161b22;border-radius:8px;width:100%;height:150px;overflow:hidden}.card-image{object-fit:cover;width:100%;max-width:100%;height:100%;display:block}.card-letter{color:#fff;background:#238636;border-radius:8px;justify-content:center;align-items:center;width:100%;height:150px;font-size:40px;font-weight:800;display:flex}.card-content{min-width:0;padding:10px 4px 4px}.card-content h3{color:#fff;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:16px;line-height:1.2;overflow:hidden}.card-domain{color:#8b949e;text-overflow:ellipsis;white-space:nowrap;margin:4px 0 0;font-size:12px;overflow:hidden}.card-description{color:#b8c0ca;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:9px 0 10px;font-size:12px;line-height:1.4;display:-webkit-box;overflow:hidden}.visit{color:#58a6ff;font-size:12px;font-weight:600;display:inline-block}.card-icon{color:#fff;background:#238636;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-weight:800;display:flex}.bottom-info{color:#6e7681;max-width:1250px;margin:0 auto;padding:35px 24px 80px;font-size:14px}.modal-overlay{z-index:10000;background:#010409bf;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:#161b22;border:1px solid #30363d;border-radius:12px;width:100%;max-width:480px;max-height:90vh;padding:30px;position:relative;overflow-y:auto;box-shadow:0 25px 80px #00000080}.modal-close{color:#8b949e;cursor:pointer;background:0 0;border:0;font-size:26px;position:absolute;top:14px;right:16px}.modal-close:hover{color:#fff}.modal-eyebrow{color:#ff5a1f;letter-spacing:1.5px;margin:0 0 8px;font-size:11px;font-weight:800}.modal h2{letter-spacing:-1px;margin:0;font-size:30px}.modal-subtitle{color:#8b949e;margin:8px 0 25px;font-size:14px}.modal label{color:#c9d1d9;margin-bottom:7px;font-size:13px;font-weight:600}.modal input,.modal textarea{color:#f0f6fc;resize:vertical;background:#0d1117;border:1px solid #30363d;border-radius:7px;outline:none;width:100%;margin-bottom:18px;padding:12px;font-size:14px}.modal input:focus,.modal textarea:focus{border-color:#58a6ff}.modal input[type=file]{cursor:pointer;padding:9px}.form-error{color:#f85149;margin:-5px 0 15px;font-size:13px}.submit-button{color:#fff;cursor:pointer;background:#238636;border:0;border-radius:7px;padding:13px;font-weight:700;transition:background .2s}.submit-button:hover{background:#2ea043}.submit-button:disabled{opacity:.6;cursor:not-allowed}.profile-preview{color:#8b949e;align-items:center;gap:10px;margin:-5px 0 18px;font-size:12px;display:flex}@media (width<=900px){.wall{grid-template-columns:repeat(10,minmax(0,1fr))}.portfolio-card{width:280px}}@media (width<=600px){.header{padding:0 20px}.header-right>span:not(.live-dot){display:none}.add-button{margin-left:5px}.hero{padding:60px 20px 45px}.hero h1{letter-spacing:-2px}.hero-button{width:100%}.wall-section{padding:0 12px}.wall{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:12px}.portfolio-card{width:240px;max-width:240px}.portfolio-card img,.card-image-wrapper{height:120px;max-height:120px}.card-letter{height:120px}.modal{max-height:92vh;padding:24px}}.click-hint{color:#ff5a1f;margin:10px 0 0;font-size:12px;font-weight:700}.wall-box.filled{cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}.wall-box.filled:hover{z-index:100;background:#2ea043;border-color:#56d364;transform:scale(1.08);box-shadow:0 0 0 2px #3fb95033}.wall-box.empty span{opacity:1;color:#fff;font-size:14px}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;background:#010409d1;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:linear-gradient(145deg,#171c24 0%,#11161d 100%);border:1px solid #30363d;border-radius:18px;width:100%;max-width:520px;max-height:90vh;padding:34px;animation:.2s ease-out modalIn;position:relative;overflow-y:auto;box-shadow:0 30px 100px #000000a6,0 0 0 1px #ffffff05}@keyframes modalIn{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-close{color:#8b949e;background:#0d1117;border:1px solid #30363d;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;font-size:20px;line-height:1;transition:background .2s,color .2s,border-color .2s;display:flex;position:absolute;top:18px;right:18px}.modal-close:hover{color:#fff;background:#21262d;border-color:#484f58}.modal-eyebrow{color:#ff5a1f;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 9px;font-size:11px;font-weight:800}.modal h2{color:#f0f6fc;letter-spacing:-1.5px;margin:0;font-size:32px;line-height:1.1}.modal-subtitle{color:#8b949e;margin:10px 45px 28px 0;font-size:14px;line-height:1.5}.modal form{flex-direction:column;display:flex}.modal label{color:#c9d1d9;letter-spacing:.1px;margin-bottom:8px;font-size:12px;font-weight:700}.modal input,.modal textarea{color:#f0f6fc;background:#0d1117;border:1px solid #30363d;border-radius:9px;outline:none;width:100%;margin-bottom:20px;padding:13px 14px;font-size:14px;transition:border-color .2s,box-shadow .2s,background .2s}.modal input::placeholder,.modal textarea::placeholder{color:#484f58}.modal input:hover,.modal textarea:hover{border-color:#484f58}.modal input:focus,.modal textarea:focus{background:#0f141b;border-color:#ff5a1f;box-shadow:0 0 0 3px #ff5a1f1a}.modal textarea{resize:vertical;min-height:100px}.modal input[type=file]{color:#8b949e;cursor:pointer;background:#0d1117;border:1px dashed #3b434d;margin-bottom:14px;padding:10px}.modal input[type=file]:hover{background:#11161d;border-color:#ff5a1f}.profile-preview{color:#8b949e;background:#0d1117;border:1px solid #30363d;border-radius:10px;align-items:center;gap:12px;margin:-2px 0 20px;padding:10px 12px;font-size:12px;display:flex}.profile-preview img{object-fit:cover;border:2px solid #30363d;border-radius:50%;width:44px;height:44px}.form-error{color:#f85149;background:#f8514914;border:1px solid #f8514940;border-radius:8px;margin:-5px 0 16px;padding:10px 12px;font-size:12px;line-height:1.4}.submit-button{color:#fff;cursor:pointer;background:#ff5a1f;border:0;border-radius:9px;width:100%;padding:14px 16px;font-size:14px;font-weight:800;transition:transform .2s,background .2s,box-shadow .2s}.submit-button:hover{background:#ff6a35;transform:translateY(-1px);box-shadow:0 8px 25px #ff5a1f33}.submit-button:active{transform:translateY(0)}.submit-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.optional{color:#6e7681;font-weight:400}@media (width<=600px){.modal-overlay{padding:12px}.modal{border-radius:15px;max-width:100%;padding:26px 22px}.modal h2{font-size:28px}.modal-subtitle{margin-right:25px}.modal-close{top:14px;right:14px}}.header-right{align-items:center;gap:18px;display:flex}.header-stat{color:#8b949e;white-space:nowrap;align-items:center;gap:5px;font-size:13px;display:flex}.header-stat span:nth-child(2){color:#f0f6fc;font-weight:700}.stat-dot{background:#238636;border-radius:50%;width:7px;height:7px}.stat-icon{font-size:12px;color:#8b949e!important}.online-stat{color:#8b949e}.online-stat span:nth-child(2){color:#3fb950}.live-dot{background:#3fb950;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #3fb9501a}.wall-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px;max-width:1250px;margin:0 auto;padding:0 24px;display:grid}.wall-column{min-width:0}.wall-layout .wall-section{max-width:none;padding:0}.wall-instruction{color:#6e7681;font-size:12px}.analytics-panel{background:#0d1117;border:1px solid #30363d;border-radius:12px;width:100%;position:sticky;top:24px;overflow:hidden}.analytics-heading{border-bottom:1px solid #21262d;justify-content:space-between;align-items:flex-start;padding:18px;display:flex}.analytics-eyebrow{color:#6e7681;letter-spacing:1.5px;margin:0 0 5px;font-size:10px;font-weight:800}.analytics-heading h2{color:#f0f6fc;letter-spacing:-.4px;margin:0;font-size:21px}.analytics-live{color:#3fb950;letter-spacing:1px;background:#3fb95014;border:1px solid #3fb95040;border-radius:5px;padding:4px 7px;font-size:9px;font-weight:800}.leaderboard{scrollbar-width:thin;scrollbar-color:#30363d transparent;max-height:440px;padding:8px 0;overflow:hidden auto}.leaderboard::-webkit-scrollbar{width:6px}.leaderboard::-webkit-scrollbar-track{background:0 0}.leaderboard::-webkit-scrollbar-thumb{background:#30363d;border-radius:999px}.leaderboard::-webkit-scrollbar-thumb:hover{background:#484f58}.leaderboard-row{grid-template-columns:28px 40px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px 16px;transition:background .15s,transform .15s;display:grid}.leaderboard-row:hover{background:#161b22}.leaderboard-row-top{background:#11161d;border:1px solid #30363d;border-radius:11px;grid-template-columns:28px 54px minmax(0,1fr) auto;gap:13px;margin:8px 10px 12px;padding:16px;box-shadow:inset 0 1px #ffffff06,0 8px 24px #0000002e}.leaderboard-row-top:hover{background:#161b22;transform:translateY(-1px)}.leaderboard-row-top .rank{color:#ff5a1f;font-size:12px}.rank{color:#6e7681;font-size:11px;font-weight:800}.leader-avatar{color:#f0f6fc;background:#161b22;border:1px solid #30363d;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:13px;font-weight:800;display:flex;overflow:hidden}.leader-avatar img{object-fit:cover;width:100%;height:100%;display:block}.leaderboard-row-top .leader-avatar{border-radius:10px;width:54px;height:54px}.leader-info{flex-direction:column;gap:4px;min-width:0;display:flex}.leader-info strong{color:#f0f6fc;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:750;overflow:hidden}.leader-info span{color:#8b949e;white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.leaderboard-row-top .leader-info strong{letter-spacing:-.2px;font-size:16px}.leaderboard-row-top .leader-info span{font-size:12px}.leader-clicks{flex-direction:column;align-items:flex-end;min-width:42px;display:flex}.leader-clicks strong{color:#ff5a1f;font-size:15px;line-height:1}.leader-clicks span{color:#8b949e;margin-top:4px;font-size:10px}.leaderboard-row-top .leader-clicks strong{font-size:22px}.leaderboard-row-top .leader-clicks span{color:#6e7681;font-size:10px}.analytics-footer{border-top:1px solid #21262d;grid-template-columns:1fr 1fr;display:grid}.footer-stat{align-items:center;gap:8px;min-width:0;padding:14px;display:flex}.footer-stat+.footer-stat{border-left:1px solid #21262d}.footer-dot{background:#6e7681;border-radius:50%;flex-shrink:0;width:7px;height:7px}.footer-dot.online{background:#3fb950;box-shadow:0 0 0 3px #3fb9501a}.footer-stat div{flex-direction:column;min-width:0;display:flex}.footer-stat strong{color:#f0f6fc;font-size:14px;line-height:1.1}.footer-stat span:not(.footer-dot){color:#6e7681;white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:9px;overflow:hidden}.analytics-empty{text-align:center;color:#6e7681;padding:30px 18px;font-size:12px}@media (width<=1000px){.wall-layout{grid-template-columns:1fr}.analytics-panel{position:static}.leaderboard{grid-template-columns:1fr 1fr;display:grid}.leaderboard-row{border-bottom:1px solid #21262d}}@media (width<=700px){.header-right{gap:8px}.header-stat{font-size:11px}.header-stat:not(.online-stat),.wall-instruction{display:none}.leaderboard{grid-template-columns:1fr}}@media (width<=500px){.wall-layout{padding:0 14px}.analytics-footer{grid-template-columns:1fr}.footer-stat+.footer-stat{border-top:1px solid #21262d;border-left:0}}.footer{color:#6e7681;border-top:1px solid #21262d;justify-content:center;align-items:center;gap:8px;max-width:1250px;margin:0 auto;padding:30px 24px 40px;font-size:13px;display:flex}.footer a{color:#8b949e;font-weight:600;text-decoration:none;transition:color .2s}.footer a:hover{color:#58a6ff}.site-footer{color:#6e7681;border-top:1px solid #21262d;justify-content:center;align-items:center;gap:7px;max-width:1100px;margin:0 auto;padding:28px 24px 36px;font-size:12px;display:flex}.site-footer strong{color:#c9d1d9;font-weight:600}.footer-divider{color:#30363d;margin:0 2px}.site-footer a{color:#8b949e;font-weight:600;text-decoration:none;transition:color .18s,transform .18s}.site-footer a:hover{color:#ff5a1f}.free-badge{color:#ff6a32;letter-spacing:1px;background:#ff5a1f14;border:1px solid #ff5a1f59;border-radius:999px;align-items:center;margin-bottom:18px;padding:6px 10px;font-size:11px;font-weight:800;display:inline-flex}@media (width<=600px){.site-footer{padding:24px 20px 30px}}.portfolio-card{width:320px;max-width:min(320px,100vw - 32px);padding:12px}.card-image-wrapper{background:#0d1117;border-radius:9px;justify-content:center;align-items:center;width:100%;height:180px;display:flex;overflow:hidden}.card-image{object-fit:contain;object-position:center;border-radius:8px;width:100%;max-width:100%;height:100%;max-height:100%;display:block}.portfolio-card img{object-fit:contain;object-position:center;background:#0d1117;border-radius:8px;width:100%;max-width:100%;height:180px;max-height:180px;display:block}.wall-box:nth-child(-n+14) .portfolio-card{top:calc(100% + 12px);bottom:auto}@media (width<=600px){.portfolio-card{width:270px;max-width:calc(100vw - 24px)}.card-image-wrapper,.portfolio-card img,.card-image{height:150px;max-height:150px}}
