:root{--bg: #0a0a0f;--bg-card: #12121a;--bg-hover: #1a1a2e;--text: #e8e8f0;--text-dim: #8888a0;--text-muted: #555568;--accent: #f0c040;--border: #2a2a3a;--radius: 12px;--radius-sm: 8px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{font-family:var(--font);background:radial-gradient(ellipse at 50% 0%,#12121a,#0a0a0f 70%);color:var(--text);line-height:1.5;min-height:100vh;display:flex;flex-direction:column}.page{flex:1;display:flex;flex-direction:column;max-width:min(540px,90vw);margin:0 auto;width:100%;padding:0 clamp(12px,2.5vw,32px)}.header{text-align:center;padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,40px)}.brand{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1vw,12px)}.brand-icon{font-size:clamp(22px,3vw,40px)}.brand-name{font-size:clamp(20px,3vw,38px);font-weight:800;letter-spacing:-.5px}.brand-tagline{font-size:clamp(12px,1.4vw,18px);color:var(--text-dim);margin-top:clamp(4px,.6vw,10px);font-weight:400}.grid{flex:1;display:flex;flex-direction:column;gap:clamp(8px,1vw,16px);padding-bottom:clamp(24px,3.5vw,48px)}.card{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(12px,1.8vw,26px);cursor:pointer;transition:all .2s;text-align:left;width:100%;font-family:var(--font);color:var(--text)}.card:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.card:disabled{opacity:.5;cursor:not-allowed;border-style:dashed}.card-icon{width:clamp(36px,4.5vw,60px);height:clamp(36px,4.5vw,60px);border-radius:var(--radius-sm);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:clamp(18px,2.2vw,32px);flex-shrink:0}.card-body{flex:1;min-width:0}.card-title{font-size:clamp(13px,1.5vw,20px);font-weight:700;margin-bottom:clamp(2px,.3vw,6px);display:flex;align-items:center;gap:clamp(4px,.6vw,10px)}.card-desc{font-size:clamp(12px,1.2vw,16px);color:var(--text-dim);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-tags{display:flex;gap:clamp(4px,.5vw,8px);margin-top:clamp(4px,.6vw,10px);flex-wrap:wrap}.tag{font-size:clamp(10px,1vw,14px);padding:clamp(1px,.15vw,3px) clamp(5px,.7vw,10px);border-radius:5px;background:var(--bg);color:var(--text-muted)}.card-arrow{font-size:clamp(14px,1.6vw,22px);color:var(--text-muted);flex-shrink:0;font-weight:700}.card:hover:not(:disabled) .card-arrow{color:var(--accent);transform:translate(3px)}.footer{text-align:center;padding:clamp(14px,2vw,28px);font-size:clamp(11px,1vw,14px);color:var(--text-muted);border-top:1px solid var(--border)}.footer a{color:var(--text-dim);text-decoration:none}.footer a:hover{color:var(--accent)}.footer-sep{margin:0 clamp(6px,.8vw,12px)}@media(min-width:1920px){.page{max-width:min(720px,80vw)}}@media(min-width:2560px){.page{max-width:min(900px,70vw)}}@media(max-width:480px){.header{padding:clamp(24px,6vw,32px) 0 clamp(16px,4vw,24px)}.page{padding:0 clamp(12px,3vw,16px)}.grid{gap:clamp(6px,1.5vw,8px);padding-bottom:clamp(20px,5vw,24px)}.card{padding:clamp(10px,2.5vw,14px);gap:clamp(8px,2vw,12px)}.card-icon{width:clamp(32px,8vw,38px);height:clamp(32px,8vw,38px);font-size:clamp(16px,4vw,20px)}.card-title{font-size:clamp(12px,3vw,14px)}.card-desc{font-size:clamp(11px,2.5vw,13px)}}@media(max-width:360px){.header{padding:20px 0 14px}.brand-name{font-size:clamp(18px,5vw,20px)}.brand-icon{font-size:20px}.brand-tagline{font-size:11px}.page{padding:0 10px}.card{padding:10px;gap:8px}.card-icon{width:30px;height:30px;font-size:15px}.card-title{font-size:12px}.card-desc{font-size:11px}.card-arrow{font-size:13px}.tag{font-size:10px;padding:1px 5px}.footer{font-size:10px;padding:12px}}