:root{--bg:#fafaf9;--surface:#fff;--sunken:#f2f2f0;--ink:#18181b;--muted:#5f5f67;--faint:#8a8a92;--line:#e4e4e0;--line-strong:#cfcfca;--focus:#2563eb;--radius:10px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0f10;--surface:#17171a;--sunken:#1d1d21;--ink:#ececee;--muted:#a0a0a8;--faint:#75757d;--line:#29292d;--line-strong:#3a3a40;--focus:#7aa2ff;color-scheme:dark}}:root[data-theme=dark]{--bg:#0f0f10;--surface:#17171a;--sunken:#1d1d21;--ink:#ececee;--muted:#a0a0a8;--faint:#75757d;--line:#29292d;--line-strong:#3a3a40;--focus:#7aa2ff;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;margin:0;overflow-x:clip}a{color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}h1,h2,h3{margin:0;line-height:1.25}h1{letter-spacing:-.01em;font-size:26px;font-weight:650}h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;font-size:13px;font-weight:600}h3{font-size:15px;font-weight:600}p{margin:0}code,pre{font-family:var(--mono);font-size:12.5px}.wrap{max-width:1240px;margin:0 auto;padding:0 16px}@media (width>=720px){.wrap{padding:0 28px}}.top{border-bottom:1px solid var(--line);background:var(--bg);z-index:10;position:sticky;top:0}.top .wrap{align-items:center;gap:16px;height:52px;display:flex}.brand{align-items:baseline;gap:8px;font-weight:650;text-decoration:none;display:flex}.brand small{color:var(--muted);font-size:13px;font-weight:400}.top nav{align-items:center;gap:4px;margin-left:auto;display:flex}.top nav a,.icon-btn{color:var(--muted);cursor:pointer;font-size:14px;font:inherit;background:0 0;border:0;border-radius:8px;padding:6px 10px;font-size:14px;text-decoration:none}.top nav a:hover,.icon-btn:hover,.top nav a[aria-current=page]{color:var(--ink);background:var(--sunken)}.chip{border:1px solid var(--line);background:var(--surface);height:28px;color:var(--muted);font:inherit;cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 11px;font-size:13px;display:inline-flex}.chip:hover{color:var(--ink);border-color:var(--line-strong)}.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.tag{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:12px;display:inline-block}.tag.proposal{border-style:dashed}select,input[type=search]{border:1px solid var(--line);background:var(--surface);height:34px;color:var(--ink);font:inherit;border-radius:8px;max-width:100%;padding:0 10px;font-size:14px}.btn{border:1px solid var(--line);background:var(--surface);height:32px;color:var(--ink);font:inherit;cursor:pointer;border-radius:8px;align-items:center;padding:0 12px;font-size:13px;text-decoration:none;display:inline-flex}.btn:hover{border-color:var(--line-strong)}.hero{gap:8px;padding:36px 0 20px;display:grid}.hero p{color:var(--muted);max-width:62ch}.filters{gap:10px;padding:12px 0 20px;display:grid}.filter-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.filter-row .label{color:var(--faint);flex:none;width:44px;font-size:12px}.moods{scrollbar-width:thin;flex-wrap:nowrap;padding-bottom:2px;overflow-x:auto}@media (width>=720px){.moods{flex-wrap:wrap;overflow:visible}}.count{color:var(--faint);margin-left:auto;font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px;padding-bottom:60px;display:grid}.look-card{gap:10px;text-decoration:none;display:grid}.look-card .pv-shell{border-radius:var(--radius);border:1px solid var(--line);transition:border-color .15s;overflow:hidden}.look-card:hover .pv-shell{border-color:var(--line-strong)}.card-meta{gap:4px;display:grid}.card-meta .row{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.card-meta .zh{color:var(--muted);font-size:13px}.card-meta .feel{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px;display:-webkit-box;overflow:hidden}.empty{color:var(--muted);padding:40px 0}.crumbs{color:var(--muted);padding:20px 0 0;font-size:13px}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}.detail-head{gap:10px;padding:12px 0 20px;display:grid}.detail-head .title{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.detail-head .title .zh{color:var(--muted);font-size:18px}.detail-head .feel{max-width:70ch;font-size:16px}.detail-head .feel-en{color:var(--muted);max-width:70ch}.tags{flex-wrap:wrap;gap:6px;display:flex}.pv-stage{gap:12px;display:grid}@media (width>=900px){.pv-stage.two{grid-template-columns:1fr 1fr}}.pv-stage figure{gap:6px;margin:0;display:grid}.pv-stage figcaption{color:var(--faint);justify-content:space-between;font-size:12px;display:flex}.pv-stage .pv-shell{border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}.sections{gap:36px;padding:32px 0 80px;display:grid}@media (width>=900px){.sections .split{grid-template-columns:1fr 1fr;gap:36px;display:grid}}.swatches{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.swatch{border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:inherit;border-radius:8px;grid-template-columns:36px 1fr;align-items:center;gap:10px;padding:6px;display:grid}.swatch:hover{border-color:var(--line-strong)}.swatch i{border-radius:6px;width:36px;height:36px;box-shadow:inset 0 0 0 1px #7f7f7f40}.swatch b{font-size:13px;font-weight:500;display:block}.swatch span{font-family:var(--mono);color:var(--muted);font-size:12px}.swatch em{color:var(--faint);font-size:11.5px;font-style:normal;line-height:1.35;display:block}table.kv{border-collapse:collapse;width:100%;font-size:13.5px}table.kv th,table.kv td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:8px 0}table.kv th{color:var(--muted);width:38%;padding-right:12px;font-weight:500}table.kv td{font-family:var(--mono);font-size:12.5px}.type-sample{border:1px solid var(--line);border-radius:8px;gap:6px;margin-bottom:12px;padding:14px;display:grid}.type-sample .d{font-size:26px;line-height:1.2}.type-sample .b{font-size:15px}.type-sample small{font-family:var(--mono);color:var(--faint);font-size:11.5px}ul.plain{gap:6px;margin:0;padding-left:18px;display:grid}.dodont{gap:16px;display:grid}@media (width>=720px){.dodont{grid-template-columns:1fr 1fr}}.dodont>div{border:1px solid var(--line);border-radius:8px;padding:14px 16px}.dodont h3{margin-bottom:8px}.dodont .do h3:before{content:"✓ ";color:#3f8f5a}.dodont .dont h3:before{content:"✕ ";color:#c2493d}.code{border:1px solid var(--line);background:var(--sunken);border-radius:8px;position:relative}.code pre{max-height:420px;margin:0;padding:14px;line-height:1.55;overflow:auto}.code .btn{height:28px;position:absolute;top:8px;right:8px}.export-tabs{gap:6px;margin-bottom:10px;display:flex}.note{color:var(--muted);font-size:13px}.pager{border-top:1px solid var(--line);justify-content:space-between;gap:12px;padding-top:12px;font-size:14px;display:flex}.pager a{color:var(--muted);text-decoration:none}.pager a:hover{color:var(--ink)}.compare-bar{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:20px 0;display:grid}.compare-bar select{width:100%}.compare-cols{gap:24px;padding-bottom:80px;display:grid}@media (width>=900px){.compare-cols{grid-template-columns:1fr 1fr}}.cmp-col{align-content:start;gap:16px;display:grid}.cmp-col [data-slug]{display:none}.cmp-col [data-slug].on{gap:16px;display:grid}.mini-swatches{flex-wrap:wrap;gap:4px;display:flex}.mini-swatches i{border-radius:6px;width:28px;height:28px;box-shadow:inset 0 0 0 1px #7f7f7f40}.toast{background:var(--ink);color:var(--bg);opacity:0;pointer-events:none;border-radius:8px;padding:8px 14px;font-size:13px;transition:opacity .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.on{opacity:1}.foot{border-top:1px solid var(--line);color:var(--faint);padding:20px 0 32px;font-size:12.5px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.sections>*,.split>*,.compare-cols>*,.cmp-col>*,.cmp-col [data-slug]>*,.pv-stage>*{min-width:0}table.kv{table-layout:fixed}table.kv td{overflow-wrap:anywhere}.sections .split{gap:36px;display:grid}.code pre{padding-top:44px}.top nav a.back{color:var(--faint)}@media (width<=420px){.brand small{display:none}.top nav a,.icon-btn{padding:6px 8px}}.pv{aspect-ratio:16/9;background:var(--p-canvas);color:var(--p-ink);font-family:var(--p-body);isolation:isolate;position:relative;overflow:hidden;container-type:inline-size}.pv-web{grid-template-columns:1.25fr 1fr;align-items:center;gap:4cqi;padding:5cqi 5.5cqi;display:grid}.pv-web .copy{align-content:center;gap:1.8cqi;min-width:0;display:grid}.pv-web .eyebrow{color:var(--p-muted);letter-spacing:.08em;text-transform:uppercase;font-size:2.2cqi}.pv-web h4{font-family:var(--p-display);letter-spacing:-.01em;color:var(--p-ink);margin:0;font-size:7cqi;font-weight:600;line-height:1.1}.pv-web p{color:var(--p-muted);margin:0;font-size:2.9cqi;line-height:1.7}.pv-web mark{background:var(--p-hl-wash);color:var(--p-ink);box-shadow:inset 0 -.25cqi 0 var(--p-hl);border-radius:.3cqi;padding:0 .3cqi}.pv-web .pv-card{background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-radius-lg);box-shadow:var(--p-shadow);gap:2cqi;min-width:0;padding:3.6cqi;display:grid}.pv-web.glass .pv-card{background:var(--p-glass-fill);backdrop-filter:blur(var(--p-blur)) saturate(160%)}.pv-web .pv-card .k{color:var(--p-muted);font-size:2.4cqi}.pv-web .pv-card .v{font-family:var(--p-display);font-size:5cqi;font-weight:600;line-height:1.1}.pv-web .pv-card .bar{background:var(--p-line);border-radius:99px;height:.9cqi;overflow:hidden}.pv-web .pv-card .bar i{background:var(--p-accent);border-radius:inherit;width:62%;height:100%;display:block}.pv-web .actions{flex-wrap:wrap;gap:1.4cqi;display:flex}.pv-web .b1,.pv-web .b2{font:inherit;border-radius:var(--p-radius);border:1px solid #0000;padding:1.3cqi 2.6cqi;font-size:2.5cqi;font-weight:600}.pv-web .b1{background:var(--p-accent);color:var(--p-accent-ink)}.pv-web .b2{color:var(--p-ink);border-color:var(--p-line);background:0 0}.pv-web .mono{font-family:var(--p-mono);color:var(--p-muted);font-variant-numeric:tabular-nums;font-size:2.2cqi}.pv-web.pixel{image-rendering:pixelated;background:linear-gradient(var(--p-bg), var(--p-bg))}.pv-web.pixel .pv-card{box-shadow:0 -.5cqi 0 var(--p-line), 0 .5cqi 0 var(--p-line), -.5cqi 0 0 var(--p-line), .5cqi 0 0 var(--p-line), 0 1.6cqi 0 #00000040;border:0;border-radius:0}.pv-web.pixel h4,.pv-web.pixel .eyebrow{color:#f7eedb}.pv-web.pixel p{color:#b9b2a6}.pv-web.pixel mark{color:#2a2130;box-shadow:none;background:#dfeab8;border-radius:0}.pv-web.pixel .b1,.pv-web.pixel .b2{border-radius:0}.pv-web.pixel .b1{box-shadow:inset 0 -.8cqi #a06b45,inset 0 .4cqi #ead2a0,0 0 0 .4cqi #2a2130}.pv-web.pixel .b2{color:#2a2130;background:#ead2a0;border:0;box-shadow:0 0 0 .4cqi #2a2130}.pv-web.pixel .bar,.pv-web.pixel .bar i{border-radius:0}.pv-web.pixel:before{content:"";z-index:-1;background:repeating-linear-gradient(90deg,#8fbf5c 0 2cqi,#5d9150 2cqi 4cqi);height:22%;position:absolute;inset:auto 0 0}.pv-film{display:block}.pv-film .light{z-index:-1;background:radial-gradient(38% 48% at var(--p-light), color-mix(in oklab, var(--p-light-color) 42%, transparent), transparent 72%);animation:6s ease-in-out infinite alternate pv-breathe;position:absolute;inset:0}.pv-film .safe{border:1px dashed color-mix(in oklab, var(--p-ink) 14%, transparent);pointer-events:none;position:absolute;inset:5%}.pv-film .meta{font-family:var(--p-mono);color:var(--p-muted);letter-spacing:.04em;justify-content:space-between;font-size:1.6cqi;display:flex;position:absolute;top:7%;left:7%;right:7%}.pv-film .title{font-family:var(--p-display);letter-spacing:-.01em;color:var(--p-ink);font-size:7.2cqi;font-weight:600;line-height:1.08;position:absolute;top:36%;left:7%;right:7%}.pv-film .title .u{background:var(--p-accent);border-radius:99px;width:9cqi;height:.5cqi;margin-top:2cqi;display:block}.pv-film .caption{text-align:center;color:var(--p-ink);text-shadow:0 0 1cqi #00000059;font-size:2.6cqi;position:absolute;bottom:15%;left:0;right:0}.pv-film .bars{height:2cqi;box-shadow:0 0 0 1px color-mix(in oklab, var(--p-ink) 15%, transparent);border-radius:.4cqi;display:flex;position:absolute;bottom:6.5%;left:7%;right:7%;overflow:hidden}.pv-film .bars i{flex:1}.pv-film.glass .tiles{gap:1.6cqi;display:flex;position:absolute;top:34%;right:7%}.pv-film .tiles i{border-radius:calc(var(--p-radius) * .5);background:var(--p-glass-fill);border:1px solid var(--p-line);width:8cqi;height:8cqi;backdrop-filter:blur(var(--p-blur));display:block}.pv-film .tiles i:nth-child(2){box-shadow:inset 0 0 0 .3cqi var(--p-accent)}.pv-film .grain{z-index:3;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:.6s steps(3,end) infinite pv-grain;position:absolute;inset:-50%}.pv-film .vignette{z-index:2;pointer-events:none;background:radial-gradient(75% 75%,#0000 55%,#0000008c);position:absolute;inset:0}.pv-film .scan{z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#0000 1px 3px);position:absolute;inset:0}.pv.play .title{animation:var(--pv-enter,none) both}.pv[data-entrance=mask-rise]{--pv-enter:pv-mask-rise .9s cubic-bezier(.16,1,.3,1)}.pv[data-entrance=fade-up]{--pv-enter:pv-fade-up .6s ease-out}.pv[data-entrance=blur-in]{--pv-enter:pv-blur-in 1.2s ease-out}.pv[data-entrance=typewriter] .title .t{white-space:nowrap;vertical-align:bottom;max-width:100%;display:inline-block;overflow:hidden}.pv.play[data-entrance=typewriter] .title .t{animation:1.2s steps(14,end) both pv-type}.pv.play[data-entrance=typewriter] .title{animation:none}.pv[data-entrance=typewriter] .title .t:after{content:"";background:var(--p-accent);vertical-align:-.08em;width:.08em;height:.9em;margin-left:.06em;animation:1s step-end infinite pv-blink;display:inline-block}@keyframes pv-mask-rise{0%{clip-path:inset(0 0 100%);transform:translateY(30%)}to{clip-path:inset(0);transform:none}}@keyframes pv-fade-up{0%{opacity:0;transform:translateY(18%)}to{opacity:1;transform:none}}@keyframes pv-blur-in{0%{opacity:0;filter:blur(14px);transform:translateY(6%)}to{opacity:1;filter:blur();transform:none}}@keyframes pv-type{0%{max-width:0}to{max-width:100%}}@keyframes pv-blink{50%{opacity:0}}@keyframes pv-breathe{0%{opacity:.75}to{opacity:1}}@keyframes pv-grain{0%{transform:translate(0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-2%)}}@media (width<=480px){.pv-stage .pv-web{aspect-ratio:auto;grid-template-columns:1fr;gap:5cqi;padding:6cqi}.pv-stage .pv-web h4{font-size:8cqi}.pv-stage .pv-web p{font-size:3.8cqi}.pv-stage .pv-web .pv-card .k,.pv-stage .pv-web .mono{font-size:3.2cqi}.pv-stage .pv-web .pv-card .v{font-size:5.6cqi}.pv-stage .pv-web .b1,.pv-stage .pv-web .b2{padding:2.4cqi 4cqi;font-size:3.6cqi}.pv-stage .pv-web .eyebrow{font-size:3cqi}}@media (prefers-reduced-motion:reduce){.pv *,.pv{animation:none!important}}