:root{--ink:#1e3148;--ink-soft:#4a5d7a;--ink-mute:#8493a8;--cream:#e8dbb8;--cream-soft:#f5efde;--paper:#fff;--paper-tint:#fafaf7;--line:#1e314814;--line-strong:#1e314829;--shadow-sm:0 1px 2px #1e31480f, 0 0 0 1px #1e31480a;--shadow-md:0 4px 14px #1e314814, 0 1px 3px #1e31480f;--shadow-lg:0 18px 42px #1e314824, 0 4px 8px #1e31480d}[data-theme=dark]{--ink:#e6ecf3;--ink-soft:#aab8c7;--ink-mute:#7d8b9d;--cream:#d4c69b;--cream-soft:#d4c69b1f;--paper:#161f2a;--paper-tint:#1e2935;--line:#ffffff0f;--line-strong:#ffffff24;--shadow-sm:0 1px 2px #0006, 0 0 0 1px #ffffff08;--shadow-md:0 4px 14px #0006;--shadow-lg:0 18px 42px #00000080}[data-theme=dark] body{background:#0f1822}[data-theme=dark] .top-band{background:linear-gradient(90deg, var(--cream) 0%, var(--cream) 65%, #d4c69b4d 65%, #d4c69b4d 100%);opacity:.5}[data-theme=dark] .hero{background:radial-gradient(80% 50% at 50% -10%,#d4c69b14,#0000 60%),#0f1822}[data-theme=dark] .hero h1 .accent:after{background:#d4c69b40}[data-theme=dark] .hero-mark,[data-theme=dark] .hero-cta{background:var(--cream);color:#0f1822}[data-theme=dark] .card-shot{filter:brightness(.72)contrast(.92)saturate(.9)}[data-theme=dark] .card-shot:after{content:"";pointer-events:none;background:linear-gradient(#0000 0%,#0f182240 100%);position:absolute;inset:0}[data-theme=dark] .card:hover .card-shot{filter:brightness(.85)contrast(.95)saturate()}[data-theme=dark] .card{background:var(--paper);border-color:var(--line-strong)}[data-theme=dark] .card-foot{background:var(--paper)}[data-theme=dark] .badge{color:var(--ink-soft);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff14}[data-theme=dark] .badge.tag{color:var(--ink-mute);background:#ffffff0f}[data-theme=dark] .badge.new{background:var(--cream);color:#0f1822}[data-theme=dark] .card.featured .card-shot{filter:none;background:linear-gradient(135deg,#1a2940 0%,#25334a 100%)}[data-theme=dark] .card.featured .card-foot{background:linear-gradient(180deg, transparent 0%, var(--paper) 60%)}[data-theme=dark] .status-dot{box-shadow:0 0 0 2px var(--paper)}[data-theme=dark] .filter-bar{border-bottom-color:var(--line);background:#0f1822e0}[data-theme=dark] .pill{background:var(--paper-tint);border-color:var(--line-strong)}[data-theme=dark] .pill:hover{border-color:var(--cream);color:var(--cream)}[data-theme=dark] .pill.active{background:var(--cream);color:#0f1822;border-color:var(--cream)}[data-theme=dark] .pill-count{color:var(--ink-mute);background:#ffffff0f}[data-theme=dark] .pill.active .pill-count{color:#0f1822;background:#0f18222e}[data-theme=dark] .dark-toggle,[data-theme=dark] .filter-search input{background:var(--paper-tint);border-color:var(--line-strong)}[data-theme=dark] .filter-search input:focus{border-color:var(--cream)}[data-theme=dark] .filter-sort select{background-color:var(--paper-tint);border-color:var(--line-strong)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{background:var(--paper);color:var(--ink);margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;font-weight:400;line-height:1.6;transition:background .2s,color .2s}a{color:inherit}.top-band{background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 65%, var(--cream) 65%, var(--cream) 100%);height:4px}.hero{background:radial-gradient(ellipse 80% 50% at 50% -10%, #e8dbb82e, transparent 60%), var(--paper);border-bottom:1px solid var(--line);position:relative}.hero-corner{z-index:5;position:absolute;top:20px;right:24px}.dark-toggle{border:1px solid var(--line-strong);background:var(--paper);width:38px;height:38px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);border-radius:999px;justify-content:center;align-items:center;font-family:inherit;font-size:16px;transition:all .18s;display:flex}.dark-toggle:hover{border-color:var(--ink);transform:rotate(15deg)}.dark-toggle-icon{line-height:1}.hero-inner{grid-template-columns:1fr auto;align-items:end;gap:48px;max-width:1320px;margin:0 auto;padding:72px 32px 48px;display:grid}.hero-left{flex-direction:column;gap:14px;display:flex}.hero-eyebrow{letter-spacing:3px;text-transform:uppercase;color:var(--ink-mute);font-size:12px;font-weight:600}.hero-mark{background:var(--ink);width:56px;height:56px;color:var(--cream);border-radius:14px;justify-content:center;align-items:center;margin-bottom:8px;font-family:ui-serif,Garamond,serif;font-size:30px;font-style:italic;font-weight:800;display:inline-flex}.hero h1{letter-spacing:-.025em;color:var(--ink);margin:0;font-size:clamp(38px,5.5vw,64px);font-weight:800;line-height:1.05}.hero h1 .accent{display:inline-block;position:relative}.hero h1 .accent:after{content:"";background:var(--cream);z-index:-1;border-radius:2px;height:12px;position:absolute;bottom:4px;left:0;right:0}.hero .tagline{color:var(--ink-soft);max-width:640px;margin:8px 0 0;font-size:18px;line-height:1.65}.hero .philosophy{color:var(--ink-mute);max-width:580px;margin:4px 0 0;font-size:14.5px;font-style:italic;line-height:1.7}.hero-right{flex-direction:column;align-items:flex-end;gap:14px;display:flex}.hero-cta{background:var(--ink);color:var(--cream);letter-spacing:.01em;box-shadow:var(--shadow-md);border-radius:999px;align-items:center;gap:8px;padding:13px 22px;font-size:14.5px;font-weight:600;text-decoration:none;transition:transform .18s,box-shadow .18s;display:inline-flex}.hero-cta:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.hero-cta-sub{color:var(--ink-mute);letter-spacing:.02em;font-size:12px}.hero-meta{max-width:1320px;color:var(--ink-mute);flex-wrap:wrap;align-items:baseline;gap:28px;margin:0 auto;padding:0 32px 32px;font-size:13.5px;display:flex}.hero-meta strong{color:var(--ink);font-weight:600}.hero-meta .dot{color:var(--cream)}.filter-bar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(180%)blur(14px);z-index:10;background:#ffffffe0;max-width:1320px;margin:0 auto;padding:24px 32px 4px;position:sticky;top:0}[data-theme=dark] .filter-bar{background:#0f1922d9}.filter-row{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.filter-search{flex:1;min-width:240px;max-width:460px;position:relative}.filter-search input{border:1px solid var(--line-strong);background:var(--paper);width:100%;color:var(--ink);border-radius:999px;outline:none;padding:9px 14px 9px 36px;font-family:inherit;font-size:14px;transition:border-color .15s}.filter-search input:focus{border-color:var(--ink)}.filter-search-icon{color:var(--ink-mute);pointer-events:none;font-size:16px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.filter-sort{color:var(--ink-mute);align-items:center;gap:8px;font-size:13px;display:flex}.filter-sort select{border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238493a8' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;border-radius:8px;padding:7px 28px 7px 12px;font-family:inherit;font-size:13.5px}.filter-count{color:var(--ink-mute);align-items:center;gap:12px;margin-left:auto;font-size:13px;display:flex}.filter-count strong{color:var(--ink);font-weight:700}.filter-clear{border:1px solid var(--line-strong);color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:999px;padding:5px 11px;font-family:inherit;font-size:12px;transition:border-color .15s,color .15s}.filter-clear:hover{border-color:var(--ink);color:var(--ink)}.filter-pills{flex-wrap:wrap;gap:8px;padding:4px 0 18px;display:flex}.pill{border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-soft);cursor:pointer;letter-spacing:.01em;border-radius:10px;align-items:center;gap:8px;padding:8px 14px;font-family:inherit;font-size:13.5px;font-weight:600;transition:all .15s;display:inline-flex}.pill:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}.pill.active{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:var(--shadow-sm)}.pill-count{background:var(--cream-soft);color:var(--ink-soft);font-feature-settings:"tnum" 1;text-align:center;border-radius:999px;min-width:22px;padding:2px 7px;font-size:11px;font-weight:700}.pill.active .pill-count{color:var(--cream);background:#e8dbb838}@media (max-width:720px){.filter-bar{padding:16px 20px 4px;position:relative}.filter-count{width:100%;margin-left:0}}.section{max-width:1320px;margin:0 auto;padding:36px 32px 12px}.section-head{align-items:baseline;gap:14px;margin-bottom:22px;display:flex}.section-head .marker{background:var(--ink);border-radius:2px;width:4px;height:22px;transform:translateY(4px)}.section-head h2{letter-spacing:-.005em;color:var(--ink);margin:0;font-size:21px;font-weight:700}.section-head .en{color:var(--ink-mute);letter-spacing:.04em;font-size:13px}.section-head .count{color:var(--ink-mute);font-feature-settings:"tnum" 1;margin-left:auto;font-size:12px}.bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:210px;gap:14px;display:grid}.card{background:var(--paper);box-shadow:var(--shadow-sm);color:inherit;border:1px solid var(--line);cursor:pointer;border-radius:14px;flex-direction:column;text-decoration:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .2s;display:flex;position:relative;overflow:hidden}.card:hover{box-shadow:var(--shadow-lg);border-color:var(--line-strong);transform:translateY(-3px)}.card-shot{background-color:var(--paper-tint);background-image:linear-gradient(135deg, var(--paper-tint) 0%, var(--cream-soft) 100%);background-position:top;background-size:cover;flex:1;transition:transform .4s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}.card:hover .card-shot{transform:scale(1.03)}.card-shot .shot-fallback{color:var(--ink-mute);opacity:0;pointer-events:none;justify-content:center;align-items:center;font-size:48px;transition:opacity .2s;display:flex;position:absolute;inset:0}.card-shot[data-emoji]:not([style*=screenshots\/]) .shot-fallback{opacity:.45}.card-foot{background:var(--paper);border-top:1px solid var(--line);padding:14px 16px}.card-title{color:var(--ink);align-items:center;gap:8px;font-size:14.5px;font-weight:700;line-height:1.35;display:flex}.card-title .emoji{flex-shrink:0;font-size:16px;line-height:1}.card-title-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.status-dot{width:8px;height:8px;box-shadow:0 0 0 2px var(--paper);border-radius:999px;flex-shrink:0;margin-left:6px;display:inline-block}.status-ok{background:#22c55e}.status-warn{background:#f59e0b}.status-down{background:#ef4444}.status-unknown{background:var(--ink-mute);opacity:.4}.status-ok:after{content:"";background:#22c55e;border-radius:999px;width:8px;height:8px;animation:2s ease-in-out infinite status-pulse;display:block}@keyframes status-pulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:0;transform:scale(2.2)}}.card-desc{color:var(--ink-soft);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:4px;font-size:12px;line-height:1.5;display:-webkit-box;overflow:hidden}.card-url{color:var(--ink-mute);letter-spacing:.01em;margin-top:8px;font-family:ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:10.5px}.c-2x1{grid-column:span 2}.c-2x2{grid-area:span 2/span 2}.c-3x2{grid-area:span 2/span 3}.c-1x2{grid-row:span 2}.c-3x1{grid-column:span 3}.card.featured .card-foot{background:linear-gradient(180deg, #fff0 0%, var(--paper) 60%);border-top:0;padding:32px 24px 22px;position:absolute;bottom:0;left:0;right:0}.card.featured .card-title{font-size:20px}.card.featured .card-desc{-webkit-line-clamp:3;margin-top:6px;font-size:13.5px}.card.featured .card-shot{background:linear-gradient(135deg, var(--ink) 0%, #2a4360 100%)}.badge{background:var(--paper);color:var(--ink);letter-spacing:.02em;z-index:2;border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:600;position:absolute;top:12px;right:12px;box-shadow:0 1px 3px #0000001a}.badge.new{background:var(--ink);color:var(--cream)}.badge.tag{color:var(--ink-soft);background:#ffffffeb;font-weight:500}.audience-tag{letter-spacing:.06em;text-transform:uppercase;z-index:2;border-radius:4px;padding:2px 7px;font-size:9.5px;font-weight:700;position:absolute;top:12px;left:12px}.audience-tag.internal{color:var(--ink);background:#e8dbb8f2}.audience-tag.client{color:#fff;background:#7882b4e6}@media (max-width:1100px){.bento{grid-template-columns:repeat(4,1fr)}.c-3x2{grid-area:span 2/span 4}.c-3x1{grid-column:span 4}.c-2x2{grid-column:span 2}.hero-inner{grid-template-columns:1fr;align-items:start;gap:24px}.hero-right{align-items:flex-start}}@media (max-width:720px){.hero-inner{padding:48px 20px 32px}.section{padding:24px 20px 8px}.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;gap:10px}.c-3x2,.c-3x1,.c-2x2,.c-2x1,.c-1x2{grid-area:auto/span 2}.card.featured .card-foot{padding:22px 18px 16px}.card.featured .card-title{font-size:17px}}@media (max-width:480px){.bento{grid-template-columns:1fr}.c-3x2,.c-3x1,.c-2x2,.c-2x1,.c-1x2{grid-column:span 1}}.empty-state{text-align:center;color:var(--ink-mute);padding:60px 24px}.empty-state p{margin:4px 0}.empty-state .empty-sub{opacity:.8;font-size:13px}footer{border-top:1px solid var(--line);max-width:1320px;color:var(--ink-mute);flex-wrap:wrap;justify-content:space-between;gap:12px;margin:60px auto 0;padding:32px;font-size:13px;display:flex}footer .brand{color:var(--ink);font-weight:600}footer .ver{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}footer a{color:var(--ink-soft);text-decoration:underline;-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong);text-underline-offset:3px}footer a:hover{color:var(--ink)}