:root{font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#26302b;background:#f7f8fa;font-synthesis:none;--ink:#26302b;--muted:#747e79;--line:#e2e6e5;--green:#43634e;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button{transition:background .16s,transform .15s var(--ease)}button:active{transform:scale(.98)}button:disabled{opacity:.4;cursor:default}button[hidden],[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid #557d60;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.skip-link{position:fixed;top:-60px;left:20px;background:#26302b;color:white;padding:15px;z-index:20}.skip-link:focus{top:10px}::selection{background:#dbe7df}.site-header,main,footer{max-width:1560px;padding-inline:56px;margin:auto}.site-header{height:91px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-size:24px;font-weight:650;letter-spacing:2px}.brand svg{width:40px;height:40px}.brand-en{display:block;font-size:7px;letter-spacing:1.8px;margin-top:4px;font-weight:400}.site-header nav{display:flex;gap:32px;font-size:12px}.site-header nav a{padding:12px 0}.site-header nav [aria-current]{border-bottom:1px solid var(--ink)}.intro{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;padding:54px 0 45px}.eyebrow{margin:0 0 18px;font-size:9px;letter-spacing:2px}.intro h1{font-size:clamp(30px,3.1vw,47px);line-height:1.4;font-weight:500;letter-spacing:-2px;margin:0 0 17px}.intro h1 span{color:#627c69}.intro-description{font-size:13px;line-height:1.9;color:var(--muted);margin:0}.intro-aside{max-width:235px;font-size:11px;color:var(--muted);text-align:right;line-height:1.8}.intro-icon{display:block;font-size:35px;line-height:1.3;color:#6d8173}.intro-aside a{font-size:10px;border-bottom:1px solid var(--line);padding-bottom:7px}.collection{display:grid;grid-template-columns:177px minmax(0,1fr);gap:33px;border-top:1px solid var(--line);padding-top:28px}.sidebar{font-size:12px}.collection-switch{padding-bottom:21px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px}.collection-switch button,.library-filters button{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;background:none;border-radius:7px;padding:13px 12px;text-align:left;line-height:1.4;width:100%;font-size:12px}.collection-switch button[aria-pressed=true]{background:var(--ink);color:white}.collection-switch small,.library-filters small{font:10px ui-monospace,monospace;opacity:.6}.sidebar-label{margin:25px 12px 11px;font-size:10px;color:var(--muted)}.library-filters{display:flex;flex-direction:column;gap:3px}.library-filters button{font-size:11px;padding:12px}.library-filters button[aria-pressed=true]{background:#e6ece7;color:#294b34}.library-filters button:hover{background:#edf0ec}.sidebar-guide{border-top:1px solid var(--line);margin-top:30px;padding:25px 12px}.sidebar-guide>span{font-size:13px;font-weight:500}.sidebar-guide p{font-size:10px;line-height:2;color:var(--muted);margin:15px 0}.sidebar-guide a{font-size:10px;color:var(--green)}.toolbar{display:flex;gap:12px}.search{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:45px;border:1px solid var(--line);background:white;border-radius:7px;padding:0 14px}.search svg{width:18px;flex:none;color:var(--muted)}.search input{width:100%;height:100%;border:0;background:none;font-size:12px;outline:none!important;color:var(--ink)}.search:focus-within{border-color:#6f9179;box-shadow:0 0 0 2px #dce7db}#autoplayButton{border:1px solid var(--line);border-radius:7px;background:transparent;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:10px;white-space:nowrap}.toggle-dot{width:22px;height:12px;border-radius:20px;background:#c7ceca;position:relative}.toggle-dot::after{content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:white;transition:transform .2s var(--ease)}[aria-pressed=true]>.toggle-dot{background:#668a71}[aria-pressed=true]>.toggle-dot::after{transform:translateX(10px)}.category-filters{display:flex;gap:7px;flex-wrap:wrap;padding-top:18px}.category-filters button{display:flex;gap:7px;align-items:center;font-size:11px;border:1px solid var(--line);border-radius:6px;background:white;padding:7px 10px}.category-filters small{font:9px ui-monospace,monospace;color:#9aa29d}.category-filters button[aria-pressed=true]{background:#e5ede6;border-color:#cad7cd;color:#34543b}.catalog-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;font-size:10px;line-height:1.8;color:var(--muted);padding:22px 0 17px}#resultCount{white-space:nowrap;font-weight:500;color:#405147}#motionHint{text-align:right;max-width:440px}.effect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.effect-card{border:1px solid #dfe5e1;border-radius:12px;overflow:hidden;background:white;min-width:0;transition:border-color .2s}.effect-card:focus-within{border-color:#6d8f77}.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 15px;font-size:9px;color:#748079;border-bottom:1px solid #edf0ed;background:white}.card-top>span:first-child{color:#4f6b55}.preview-surface{position:relative;background:#edf0f1;overflow:hidden}.preview-content{height:360px;position:relative}.live-frame{border:0;width:100%;height:100%;display:block;background:#f1f3f5}.preview-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;color:#8b9690;pointer-events:none;background:#f1f3f5}.loaded .preview-loading{display:none}.preview-loading>span,.spinner{display:inline-block;width:17px;height:17px;border:1.5px solid #d5ddd8;border-top-color:#597560;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.card-body{padding:17px 17px 0}.card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.card-heading h2{font-size:14px;font-weight:550;margin:0;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.play-sample{font-size:10px;flex:none;background:#f0f4ef;border:1px solid #dbe4dc;color:#47624e;border-radius:5px;padding:6px 9px;white-space:nowrap}.card-body>p{font-size:10px;color:#929b94;margin:8px 0 15px}.card-actions{display:flex;gap:17px;align-items:center;border-top:1px solid #edf0ed;font-size:10px;min-height:44px}.card-actions button{display:flex;align-items:center;gap:16px;background:none;border:0;font-size:11px;padding:12px 0;font-weight:550;color:#334f3b;margin-right:auto}.card-actions a{padding:12px 0;color:#7c887f;white-space:nowrap}.card-actions a:hover{text-decoration:underline}.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:29px;padding-top:22px;border-top:1px solid var(--line);font-size:11px}.pagination button,.state-box button{border:1px solid var(--line);background:white;border-radius:6px;padding:11px 16px;font-size:11px}.state-box{text-align:center;color:var(--muted);padding:65px 20px;font-size:13px;line-height:1.8}.state-box h2{color:var(--ink);font-size:20px;font-weight:500}.state-box a{text-decoration:underline}.how-to{margin-top:80px;padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:60px}.how-to>div>span{font:10px ui-monospace,monospace;color:#9bac9e}.how-to h2{font-size:19px;font-weight:500;margin:18px 0 12px}.how-to p{font-size:12px;line-height:1.9;color:var(--muted);max-width:320px}.credits{display:grid;grid-template-columns:1fr 1.25fr;gap:12%;padding:70px 0}.credits h2{font-size:35px;font-weight:450;line-height:1.6;letter-spacing:-1px;margin:0 0 20px}.credits>div>p:not(.eyebrow){font-size:12px;line-height:2;color:var(--muted);max-width:350px}.credits>div>a{font-size:11px;color:var(--green);text-decoration:underline;text-underline-offset:4px}.license-list{display:grid;grid-template-columns:1fr 1fr;gap:23px 26px}.license-list article{border-top:1px solid var(--line);padding-top:14px}.license-list article>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.license-list article>div>a{font-size:13px;font-weight:500}.license-list article>div>span{font-size:9px;white-space:nowrap;color:var(--muted)}.license-list article p{font-size:10px;line-height:1.8;color:var(--muted)}.license-list article>a{font-size:9px;color:var(--green)}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-block:28px;font-size:10px;color:var(--muted)}footer>span{font-size:9px;letter-spacing:1px}dialog{width:calc(100% - 50px);max-width:1380px;max-height:94dvh;border:1px solid #ffffff44;border-radius:14px;padding:0;background:#f7f8fa;color:var(--ink);box-shadow:0 30px 100px #122e2330;overflow:auto}dialog::backdrop{background:#1c292775}.dialog-shell{padding:24px}.dialog-header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:0 0 23px}.dialog-header p{font-size:10px;color:#6b8273;margin:0 0 8px}.dialog-header h2{font-size:25px;font-weight:500;line-height:1.4;margin:0}.dialog-header>button{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:none;font-size:23px;flex:none}.detail-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}.detail-preview{min-width:0}.detail-stage{height:480px;border:1px solid var(--line);border-radius:9px;background:white}.detail-controls{display:flex;align-items:center;gap:10px;margin-top:15px}.detail-controls button{background:white;border:1px solid var(--line);border-radius:5px;padding:9px 13px;font-size:11px}.detail-controls a{font-size:11px;margin-left:auto;color:var(--green)}.detail-preview>p{font-size:12px;line-height:1.8;color:var(--muted);margin:20px 0 12px}.detail-preview>a{font-size:11px;text-decoration:underline;text-underline-offset:4px}.source-pane{min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #dce2de;border-radius:9px;background:white}.source-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-bottom:1px solid #e7ece8;background:#eff3f0}.source-toolbar>label{flex:1;min-width:0}.source-toolbar select{width:100%;border:0;background:transparent;font-size:11px;padding:8px 0;color:#3d5143;text-overflow:ellipsis;outline:none}.source-toolbar button{border:1px solid #cbdacf;background:white;font-size:11px;border-radius:5px;white-space:nowrap;padding:8px 12px;color:#45664e}.source-scroll{height:400px;overflow:auto;background:#1f2925;color:#d4e4d9;scrollbar-color:#5a7062 #1f2925;scrollbar-width:thin}pre{margin:0;padding:22px;font:11px/1.9 "Cascadia Code",Consolas,ui-monospace,monospace;white-space:pre;tab-size:2}.source-meta{display:flex;justify-content:space-between;gap:12px;padding:12px 15px;color:var(--muted);font-size:9px;line-height:1.6;overflow-wrap:anywhere}.source-meta span{min-width:0}.download-demo{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#e5ede5;padding:16px 17px;font-size:12px;margin-top:auto;color:#33563c}.download-demo:hover{background:#d8e5d9}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,8px);opacity:0;pointer-events:none;z-index:30;margin:0;padding:12px 20px;background:#263b2c;color:white;font-size:12px;border-radius:7px;transition:opacity .18s,transform .2s var(--ease);max-width:90vw;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1650px){.site-header,main,footer{max-width:1720px}.effect-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-content{height:285px}}
@media(max-width:1150px){.site-header,main,footer{padding-inline:32px}.collection{grid-template-columns:153px minmax(0,1fr);gap:23px}.intro h1{font-size:34px}.intro-aside{max-width:180px}.intro-description{font-size:12px}.card-actions{gap:12px;font-size:9px}.card-actions button{font-size:10px}.preview-content{height:270px}.detail-layout{grid-template-columns:1fr 1fr}.detail-stage{height:370px}.credits{gap:7%}.license-list{grid-template-columns:1fr}}
@media(max-width:800px){.site-header,main,footer{padding-inline:22px}.site-header{height:80px}.brand{font-size:21px;gap:10px}.brand svg{width:32px;height:32px}.brand-en{font-size:6px}.site-header nav{gap:19px;font-size:11px}.intro{display:block;padding:35px 0 30px}.eyebrow{font-size:8px;letter-spacing:1.4px}.intro h1{font-size:32px;letter-spacing:-1.5px}.intro-description{font-size:12px}.intro-aside{max-width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:20px;margin-top:24px;font-size:10px}.intro-icon{display:none}.intro-aside p{margin:0}.intro-aside a{font-size:9px;flex:none}.collection{display:block;padding-top:20px}.collection-switch{flex-direction:row;padding-bottom:17px;gap:9px}.collection-switch button{width:auto;gap:20px;background:#ecf0ed;padding:11px 13px;font-size:12px}.sidebar-label,.sidebar-guide{display:none}.library-filters{flex-direction:row;overflow:auto;padding:14px 0 19px;scrollbar-width:none;gap:6px}.library-filters button{flex:none;width:auto;padding:8px 11px;background:#fff;border:1px solid #e2e7e3;border-radius:5px;font-size:10px;gap:9px}.toolbar{gap:9px}.search{height:43px;padding-inline:10px}.search input{font-size:11px}#autoplayButton{font-size:9px;padding:0 10px;gap:6px}.category-filters{gap:6px;padding-top:14px}.category-filters button{font-size:10px;padding:7px 9px}.category-filters small{font-size:8px}.catalog-meta{font-size:9px;gap:20px;padding:18px 0 14px}#motionHint{max-width:230px}.effect-grid{gap:16px}.preview-content{height:290px}.card-heading h2{font-size:13px}.card-body{padding:15px 14px 0}.card-actions{gap:16px;font-size:10px}.card-actions button{font-size:11px}.how-to{gap:25px;margin-top:50px;padding:30px 0}.how-to h2{font-size:16px;margin:12px 0 10px}.how-to p{font-size:10px}.credits{padding:45px 0;gap:30px}.credits h2{font-size:28px}.credits>div>p:not(.eyebrow){font-size:11px}.license-list article>div>a{font-size:12px}.license-list article>div>span{font-size:8px}footer{font-size:9px;gap:12px;flex-wrap:wrap}footer>span{display:none}dialog{width:calc(100% - 20px);max-height:95dvh}.dialog-shell{padding:16px}.dialog-header h2{font-size:21px}.detail-layout{grid-template-columns:1fr}.detail-stage{height:420px}.detail-controls{font-size:10px}.detail-preview>p{font-size:11px;margin-top:15px}.source-scroll{height:270px}pre{font-size:10px;padding:16px}.source-meta{font-size:8px}.download-demo{font-size:11px}}
@media(max-width:600px){.category-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.category-filters button{flex-shrink:0}.effect-grid{grid-template-columns:1fr}.intro h1{font-size:31px}.intro h1 span{display:block}.intro-description{max-width:350px}.desktop{display:none}.catalog-meta{flex-direction:column;gap:5px}#motionHint{max-width:none;text-align:left}.preview-content{height:360px}.how-to{grid-template-columns:1fr;gap:20px}.how-to>div{display:grid;grid-template-columns:25px 100px 1fr;gap:12px;align-items:baseline}.how-to h2{font-size:14px;margin:0}.how-to p{margin:0;font-size:11px}.credits{grid-template-columns:1fr}.credits h2{font-size:29px}.credits>div>p:not(.eyebrow){max-width:none}.license-list{grid-template-columns:1fr 1fr;gap:24px 20px}.license-list article>div{display:block}.license-list article>div>span{display:block;margin-top:7px}.detail-stage{height:420px}.dialog-header{padding-bottom:18px}.card-actions a{padding:14px 0}.pagination button{padding:11px 15px}.intro-aside{gap:10px}.intro-aside p{max-width:220px;font-size:9px}.library-filters button{font-size:10px}.source-toolbar select{font-size:10px}.source-toolbar button{font-size:10px}}
@media(max-width:370px){.site-header,main,footer{padding-inline:16px}.site-header nav{gap:13px;font-size:10px}.intro h1{font-size:29px}.how-to>div{grid-template-columns:20px 80px 1fr}.detail-controls{gap:7px}.detail-controls button{padding:9px 10px}.search{gap:6px}#autoplayButton{padding:0 8px}.intro-aside a{font-size:8px}}
.selection-note{display:flex;align-items:baseline;gap:16px;margin:0 0 20px;padding:0 0 17px;border-bottom:1px solid var(--line)}
.selection-note>span{font-size:14px;font-weight:600;white-space:nowrap}
.selection-note p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
.card-top b{font:11px ui-monospace,monospace;color:#405e49;margin-right:7px}
.curated-card .card-body{padding-top:20px}
.curated-card .card-heading h2{font-size:16px;font-weight:550;letter-spacing:-.3px}
.card-body>.curation-reason{font-size:12px;line-height:1.85;color:#64736a;margin:10px 0 7px;min-height:44px}
.card-body>.interaction-hint{font-size:11px;line-height:1.8;color:#586e5e;margin:0 0 16px}
.preview-content{height:var(--preview-height,360px)}
@media(min-width:601px) and (max-width:1023px){.effect-grid{grid-template-columns:1fr}.preview-content{height:var(--preview-height,380px)}}
@media(max-width:800px){.selection-note{display:block;margin-bottom:17px}.selection-note p{margin-top:6px;font-size:11px}.collection-switch{gap:7px}.collection-switch button{flex:1;gap:6px;padding:11px 10px;font-size:11px;white-space:nowrap}.collection-switch small{font-size:9px}.curated-card .card-heading h2{font-size:15px}.card-body>.curation-reason{min-height:0;font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}