:root{--background:#0a0a0a;--background-2:#0f0f10;--card:#161617;--card-hover:#1c1c1e;--border:#262629;--foreground:#f5f5f7;--muted:#a1a1aa;--muted-2:#6b6b70;--accent:#1bb67a;--radius:14px;--max:1800px}[data-theme=light]{--background:#f6f6f7;--background-2:#fff;--card:#fff;--card-hover:#efefef;--border:#e2e2e6;--foreground:#161617;--muted:#55555c;--muted-2:#8a8a92;--accent:#109e69}*{box-sizing:border-box;margin:0;padding:0}body,html{background:var(--background);color:var(--foreground);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.shell{max-width:var(--max);margin:0 auto;padding:0 24px}.header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:hsla(0,0%,4%,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}.brand{font-weight:700;font-size:18px;letter-spacing:-.02em}.brand .dot{color:var(--accent)}.search{flex:1 1;max-width:520px;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 14px}.search input{flex:1 1;background:transparent;border:none;outline:none;color:var(--foreground);font-size:14px}.search input::placeholder{color:var(--muted-2)}.search button{background:var(--foreground);color:#000;border:none;border-radius:7px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;opacity:.5}.search button:not(:disabled){opacity:1}.hero{padding:64px 0 28px}.hero h1{font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.05}.hero p{color:var(--muted);font-size:16px;margin-top:14px;max-width:720px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px}.chip{padding:7px 14px;font-size:13px}.chip.active{background:var(--foreground);color:#000;border-color:var(--foreground)}.tabs{gap:18px;margin:18px 0;border-bottom:1px solid var(--border)}.tab{padding:10px 2px;border-bottom:2px solid transparent}.tab.active{border-color:var(--foreground)}.grid{display:grid;grid-gap:18px;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));padding-bottom:80px}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s;display:flex;flex-direction:column}.card:hover{border-color:#3a3a3f;transform:translateY(-2px)}.card .thumb{aspect-ratio:16/10;background:#000;position:relative;overflow:hidden}.card .thumb img{width:100%;height:100%;object-fit:cover}.card .meta{padding:14px 16px 16px}.card .meta .name{font-weight:600;font-size:15px}.card .meta .sub{color:var(--muted);font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatches{display:flex;gap:4px;margin-top:12px}.swatch{width:18px;height:18px;border-radius:5px;border:1px solid hsla(0,0%,100%,.08)}.detail-wrap{padding:28px 0 80px}.back{color:var(--muted);font-size:14px;margin-bottom:20px;display:inline-block}.back:hover{color:var(--foreground)}.detail-hero{display:grid;grid-template-columns:1.1fr 1fr;grid-gap:32px;gap:32px;align-items:start}@media (max-width:900px){.detail-hero{grid-template-columns:1fr}}.detail-shot{border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;background:#000}.detail-shot img{width:100%;display:block}.detail-title{font-size:40px;font-weight:700;letter-spacing:-.03em}.detail-sub{color:var(--muted);font-size:16px;margin-top:8px}.visit{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--accent);font-size:14px}.section{margin-top:40px}.section h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}.colorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:10px;gap:10px}.colorrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px}.colorrow .chipbg{width:34px;height:34px;border-radius:8px;border:1px solid hsla(0,0%,100%,.1);flex:none}.colorrow .cn{font-size:13px;font-weight:600}.colorrow .ch{font-size:12px;color:var(--muted);font-family:ui-monospace,monospace}.featured-badge{background:linear-gradient(135deg,#ffd76a,#ff9a3c);color:#1a1206;font-weight:700;font-size:11px;letter-spacing:.03em;padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 14px rgba(255,170,60,.35)}.title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.md-top{background:linear-gradient(180deg,rgba(27,182,122,.06),rgba(27,182,122,0));border:1px solid rgba(27,182,122,.25);border-radius:16px;padding:22px 24px}.md-top-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}.md-top-head h2{color:var(--accent)}.md-top-hint{color:var(--muted-2);font-size:12px}.gradgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-gap:14px;gap:14px}.gradcard{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}.gradbar{height:84px;width:100%}.gname{font-weight:600;font-size:14px;padding:12px 14px 2px}.grole{font-size:12px;color:var(--muted);padding:0 14px 14px;line-height:1.5}.colorcopy{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.colorcopy:hover{border-color:#3a3a3f;background:var(--card-hover)}.colorcopy .chipbg{width:34px;height:34px;border-radius:8px;border:1px solid hsla(0,0%,100%,.1);flex:none}.colorcopy .ccn{display:flex;flex-direction:column}.colorcopy .cn{font-size:13px;font-weight:600}.colorcopy .ch{font-size:12px;color:var(--muted);font-family:ui-monospace,monospace}.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:14px;gap:14px}.typecard{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}.typecard .fam{font-size:18px;font-weight:600}.typecard .det{color:var(--muted);font-size:13px;margin-top:8px;line-height:1.5}.typecard .sub{color:var(--muted-2);font-size:12px;margin-top:8px;font-family:ui-monospace,monospace}.token-table{width:100%;border-collapse:collapse;font-size:13px}.token-table td,.token-table th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border)}.token-table th{color:var(--muted);font-weight:600}.token-table td.mono{font-family:ui-monospace,monospace;color:var(--muted)}.comp{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:12px}.comp .cname{font-weight:600;font-size:15px}.comp .crole{color:var(--accent);font-size:12px;margin:4px 0 10px}.comp .cdesc{color:var(--muted);font-size:14px;line-height:1.6}.dodont{display:grid;grid-template-columns:1fr 1fr;grid-gap:18px;gap:18px}@media (max-width:700px){.dodont{grid-template-columns:1fr}}.dodont ul{list-style:none;display:flex;flex-direction:column;gap:10px}.dodont li{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5}.dodont .do li{border-left:3px solid var(--accent)}.dodont .dont li{border-left:3px solid #f0506e}.similar{display:flex;flex-wrap:wrap;gap:10px}.similar .chip{background:var(--card)}.md-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.copy-btn{background:var(--foreground);color:#000;border:none;border-radius:8px;padding:8px 16px;font-weight:600;font-size:13px;cursor:pointer}.copy-btn.copied{background:var(--accent);color:#fff}pre.md{background:#0c0c0d;border:1px solid var(--border);border-radius:12px;padding:22px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;line-height:1.7;color:#d4d4d8;overflow:auto;max-height:70vh;white-space:pre-wrap;word-break:break-word}pre.md h-open{color:#f0a868}.footer{border-top:1px solid var(--border);padding:40px 0;color:var(--muted-2);font-size:13px}.eyebrow{left:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:999px;pointer-events:none}.eyebrow,.md-fab{position:absolute;top:10px;z-index:3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.md-fab{right:10px;background:hsla(0,0%,4%,.72);color:var(--foreground);border:1px solid hsla(0,0%,100%,.18);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s}.card:hover .md-fab{opacity:1;transform:translateY(0)}.md-fab:hover{background:var(--accent);border-color:var(--accent);color:#fff}.copy-btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.drawer-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:flex-end}.drawer{width:min(640px,92vw);height:100%;background:var(--background-2);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:slidein .2s ease}@keyframes slidein{0%{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);gap:12px}.drawer-title{font-weight:700;font-size:16px}.drawer-sub{color:var(--muted);font-size:13px;margin-top:3px}.drawer pre.md{border:none;border-radius:0;max-height:none;flex:1 1}.header-actions{display:flex;gap:8px;align-items:center}.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--foreground);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:16px;transition:background .15s,transform .1s}.icon-btn:hover{background:var(--card-hover);transform:translateY(-1px)}.subbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 14px;flex-wrap:wrap}.tabs{display:flex;gap:4px}.tab{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;font-weight:600;padding:7px 12px;border-radius:8px;transition:all .15s}.tab.active,.tab:hover{color:var(--foreground)}.tab.active{background:var(--card)}.cats{display:flex;gap:6px;flex-wrap:wrap}.chip{background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:all .15s}.chip:hover{color:var(--foreground);border-color:#3a3a3f}.chip.active{background:var(--accent);border-color:var(--accent);font-weight:600}.chip.active,.chip.active:hover{color:#04130c}.star{position:absolute;top:10px;left:10px;z-index:3;background:rgba(0,0,0,.55);border:none;color:#fff;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:15px;transition:transform .1s,background .15s}.star:hover{background:rgba(0,0,0,.75);transform:scale(1.08)}.star.on{color:#ffd76a}.cmp-btn{position:absolute;top:10px;left:48px;z-index:3;background:rgba(0,0,0,.55);border:none;color:#fff;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;transition:background .15s,transform .1s}.cmp-btn:hover{background:rgba(0,0,0,.75);transform:scale(1.08)}.feat-tag{position:absolute;bottom:10px;left:10px;z-index:3;background:linear-gradient(135deg,#ffd76a,#ff9a3c);color:#1a1206;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;box-shadow:0 2px 10px rgba(255,170,60,.35)}.card.compare-on{outline:2px solid var(--accent);outline-offset:2px}.compare-bar{display:flex;align-items:center;gap:10px;padding:14px 0;flex-wrap:wrap}.compare-bar>span{color:var(--muted);font-size:13px}.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:22px;gap:22px}.compare-modal{width:min(1000px,94vw);max-height:90vh;overflow:auto;background:var(--background-2);border:1px solid var(--border);border-radius:16px;padding:22px;animation:slidein .2s ease}.compare-col{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}.compare-img{width:100%;border-radius:8px;margin-bottom:12px;border:1px solid var(--border)}.compare-col .name{font-weight:700;font-size:16px}.compare-col .sub{margin-top:2px}.cblock,.compare-col .sub{color:var(--muted);font-size:13px}.cblock{margin-top:8px;line-height:1.5}.cblock b,.fmt-select{color:var(--foreground)}.fmt-select{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer}.loading{color:var(--muted-2);padding:30px 0;font-size:13px}.empty,.loading{text-align:center}.empty{color:var(--muted);padding:60px 0;font-size:15px}.foot-hint{color:var(--muted-2);font-size:12px;margin-top:6px}.foot-hint b{color:var(--muted)}*{transition:background-color .2s ease,border-color .2s ease,color .2s ease}@media (max-width:640px){.shell{padding:0 14px}.header-inner{height:auto;flex-wrap:wrap;gap:10px;padding:10px 0}.brand{font-size:16px;flex:1 1 auto}.search{flex:1 1 100%;max-width:none;order:3}.header-actions{gap:6px}.icon-btn{width:34px;height:34px;font-size:14px}.hero{padding:32px 0 18px}.hero h1{font-size:clamp(26px,8vw,36px)}.hero p{font-size:14px}.filters{gap:7px;margin:16px 0 4px}.chip{padding:9px 14px;font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding-bottom:60px}.card .meta{padding:11px 12px 13px}.card .meta .name{font-size:14px}.card .meta .sub{font-size:12px}.md-fab{opacity:1;transform:none;padding:5px 9px;font-size:11px}.cmp-btn,.star{width:34px;height:34px;font-size:16px}.cmp-btn{left:52px}.detail-wrap{padding:18px 0 60px}.detail-title{font-size:28px}.detail-sub{font-size:14px}.detail-hero{gap:18px}.eyebrow{font-size:10px;padding:3px 7px}.section{margin-top:28px}.section h2{font-size:19px}.md-top{padding:16px;border-radius:12px}.md-top-head{flex-direction:column;align-items:flex-start;gap:4px}.colorgrid,.gradgrid{grid-template-columns:1fr 1fr}.typegrid{grid-template-columns:1fr}pre.md{font-size:12px;padding:14px;max-height:60vh;-webkit-text-size-adjust:100%}.token-table{display:block;overflow-x:auto;white-space:nowrap}.token-table td,.token-table th{padding:8px 10px}.subbar{gap:10px}.tabs{gap:2px;overflow-x:auto}.tab{padding:7px 10px;font-size:13px}.compare-grid{grid-template-columns:1fr;gap:14px}.compare-modal{padding:16px}.drawer{width:100vw}.footer{padding:30px 0;font-size:12px}}@media (max-width:380px){.grid{grid-template-columns:1fr 1fr}.colorgrid,.gradgrid{grid-template-columns:1fr}}@media (hover:none){.md-fab{opacity:1;transform:none}.card:hover{transform:none;border-color:var(--border)}}