@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--paper:#0b0d12;--ink:#f3f4f7;--muted:#a7acb9;--orange:#bcff6b;--line:#272c36}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans TC',sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.wrap{max-width:1400px;margin:auto;padding-left:64px;padding-right:64px}.header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0d;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:13px;font-size:23px;font-weight:800}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:3px;color:var(--muted)}.brand-mark{width:42px;height:42px;background:var(--orange);color:#121812;border-radius:12px;font-size:34px;line-height:36px;text-align:center;font-weight:800;letter-spacing:-5px;padding-right:5px;box-shadow:0 0 28px #bcff6b18}.brand-mark span{color:#34402c}nav{display:flex;gap:30px;align-items:center;font-size:13px;color:#b6bbc6}nav a:hover{color:var(--orange)}.blog-link{border:1px solid #39402e;border-radius:6px;padding:10px 16px;color:#d5e9bc}.hero{--feature-color:#b39aff;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;min-height:560px;position:relative;isolation:isolate;padding-top:55px;padding-bottom:45px}.hero:before{content:'';position:absolute;inset:-92px 0 -10px;background:radial-gradient(ellipse at 78% 48%,color-mix(in srgb,var(--feature-color) 15%,transparent),transparent 62%);z-index:-1;transition:background .3s}.hero-copy{position:relative;z-index:1;min-width:0}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:var(--orange)}.eyebrow>span:first-child{display:inline-block;width:6px;height:6px;background:var(--orange);margin-right:9px;vertical-align:middle}.edition{color:#a7acb9;border-left:1px solid #5b5d66;padding-left:15px;margin-left:10px;letter-spacing:1px}.hero-kicker{font-size:11px;letter-spacing:2px;color:var(--feature-color);margin-top:39px}h1{font-size:54px;letter-spacing:-2px;line-height:1.3;margin:15px 0 22px;font-weight:900}.accent{display:block;font-size:30px;color:var(--feature-color);letter-spacing:-1px;margin-top:8px}.intro{color:#b7bac8;line-height:1.95;font-size:15px;max-width:440px;min-height:60px}.hero-actions{display:flex;gap:12px;margin-top:29px;flex-wrap:wrap}.primary,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:5px;padding:14px 23px;font-weight:700;font-size:13px;transition:transform .2s,background .2s}.primary{background:var(--orange);color:#18200f;box-shadow:0 4px 28px #bcff6b12}.primary:hover{background:#d1ff9c;transform:translateY(-2px)}.secondary-button{background:#ffffff0c;border:1px solid #ffffff19}.secondary-button:hover{background:#ffffff18}.feature-select{display:flex;align-items:center;gap:9px;margin-top:40px}.feature-select button{padding:10px 13px;background:transparent;color:#8d92a0;border:1px solid #373c47;cursor:pointer;border-radius:4px;font-size:11px;position:relative}.feature-select button[aria-pressed=true]{color:var(--ink);background:#ffffff0b;border-color:var(--feature-color)}.feature-select button[aria-pressed=true]:after{content:'';height:2px;background:var(--feature-color);position:absolute;bottom:-1px;left:0;right:0}.feature-select>span{font-size:10px;color:#8e94a3;margin-left:8px}.hero-art{position:relative;min-width:0;height:430px;display:grid;align-items:center}.main-art{position:relative;transform:rotate(-6deg);animation:float 7s ease-in-out infinite;border:1px solid #ffffff16;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px #0008,0 0 65px color-mix(in srgb,var(--feature-color) 12%,transparent)}.main-art img{display:block;width:100%;height:auto}.orbit{position:absolute;inset:25px;border:1px solid color-mix(in srgb,var(--feature-color) 17%,transparent);border-radius:50%;transform:rotate(-25deg)}.orbit-two{inset:0 60px;transform:rotate(30deg)}.art-label{position:absolute;top:8px;right:20px;font-size:9px;letter-spacing:4px;color:#9691aa}.art-coordinate{position:absolute;bottom:20px;left:15px;font-size:8px;letter-spacing:3px;color:#848894}.art-chip{position:absolute;right:-5px;bottom:65px;background:#171b24e8;backdrop-filter:blur(10px);border:1px solid #ffffff25;border-radius:10px;padding:15px 23px;color:var(--feature-color);font-size:13px;box-shadow:0 12px 35px #0006;transform:rotate(5deg)}.collection-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:20px;padding-bottom:20px;font-size:12px}.collection-strip>span:first-child{font-weight:600}.collection-strip>span:nth-child(2){color:var(--muted);font-size:11px;letter-spacing:2px}.collection-strip i{font-style:normal;color:#4c515c;margin:0 10px}.collection-strip a{color:var(--orange);font-size:11px}.tools{padding-top:56px;padding-bottom:70px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}h2{font-size:28px;letter-spacing:-.7px;margin:9px 0 0}.section-heading>p{color:var(--muted);font-size:12px}.toolbar{display:flex;gap:20px;justify-content:space-between;padding-bottom:19px}.filters{display:flex;gap:7px;flex-wrap:wrap}.filters button{border:1px solid transparent;background:transparent;border-radius:5px;padding:9px 15px;color:var(--muted);cursor:pointer;font-size:12px;transition:background .2s}.filters button:hover{background:#ffffff0b;color:var(--ink)}.filters button.active{border-color:#bcff6b44;background:#bcff6b12;color:var(--orange)}.search{display:flex;align-items:center;gap:9px;border:1px solid #343944;border-radius:5px;background:#14171e;padding:0 12px;max-width:240px}.search:focus-within{border-color:var(--orange)}.search span{font-size:25px;color:var(--muted)}.search input{border:0;background:transparent;width:100%;font-size:12px;padding:10px 0;min-width:0}.search input:focus-visible{outline-offset:2px}.result-count{font-size:10px;color:var(--muted);margin:0 0 20px;letter-spacing:1px}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}.tool-card{padding:0 18px 18px;background:#14171e;border:1px solid #252a34;border-radius:10px;display:flex;flex-direction:column;min-width:0;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative}.tool-card:hover,.tool-card:focus-within{transform:translateY(-7px);border-color:var(--tone);box-shadow:0 14px 38px #0006}.card-cover{display:block;position:relative;overflow:hidden;margin:0 -18px 15px;border-radius:9px 9px 0 0;aspect-ratio:5/3;background:#101319}.card-cover img{display:block;width:100%;height:auto;transition:transform .5s}.tool-card:hover .card-cover img{transform:scale(1.07)}.cover-category{position:absolute;left:12px;top:12px;background:#0b0d12b3;border:1px solid #ffffff19;backdrop-filter:blur(6px);padding:4px 7px;font-size:9px;border-radius:3px;color:var(--tone)}.cover-play{display:grid;place-items:center;position:absolute;right:12px;bottom:12px;width:32px;height:32px;border-radius:50%;background:var(--tone);color:#12151b;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}.tool-card:hover .cover-play,.tool-card:focus-within .cover-play{opacity:1;transform:translateY(0)}.card-top{display:flex;justify-content:space-between;align-items:center}.tool-icon{font-size:13px;font-weight:700;color:var(--tone)}.badge{font-size:9px;color:var(--muted)}.tool-card h3{font-size:16px;margin:10px 0 9px;line-height:1.5}.tool-card p{font-size:11px;line-height:1.9;color:var(--muted);margin:0 0 16px}.tags{font-size:9px;color:#858d9d;margin-top:auto;padding-bottom:15px;line-height:1.7}.card-actions{border-top:1px solid #292e39;padding-top:13px;display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:10px}.card-actions a:first-child{font-weight:700;color:var(--tone)}.card-actions a:hover{text-decoration:underline}.card-actions a.secondary,.pending{color:var(--muted);font-size:9px}.about{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:45px;padding-bottom:45px;display:grid;grid-template-columns:1fr 1fr;gap:70px;background:linear-gradient(110deg,#bcff6b04,transparent)}.about h2{font-size:25px;line-height:1.7}.about>div{min-width:0}.about>div>p:not(.eyebrow){color:var(--muted);line-height:2;font-size:13px}.about a{display:inline-block;font-size:12px;margin-top:12px;font-weight:600;color:var(--orange)}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:30px;padding-bottom:30px}.footer-brand{font-size:16px;font-weight:700}.footer-brand span{font-size:9px;letter-spacing:1px;margin-left:9px;color:var(--orange)}footer p,footer small{font-size:10px;color:var(--muted)}#empty{text-align:center;padding:50px 15px;color:var(--muted)}#empty button{border:1px solid var(--line);border-radius:6px;background:#1c212b;color:var(--ink);padding:10px 16px;cursor:pointer}#empty button:hover{border-color:var(--orange)}[hidden]{display:none!important}@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(-4deg)}}@media(min-width:1500px){.hero{min-height:630px}h1{font-size:64px}.hero-art{height:480px}}@media(max-width:1100px){.wrap{padding-left:36px;padding-right:36px}h1{font-size:43px}.accent{font-size:25px}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-art{height:370px}.feature-select>span{display:none}.toolbar{flex-wrap:wrap}.section-heading>p{max-width:230px;line-height:1.8}}@media(max-width:800px){.hero{grid-template-columns:1fr 1fr;gap:14px;min-height:500px}.hero-art{height:300px}.hero-actions{gap:8px}.primary,.secondary-button{padding:12px 15px;font-size:12px}.art-label{letter-spacing:2px;font-size:7px}.art-chip{padding:10px 13px;font-size:10px;bottom:30px}.art-coordinate{display:none}.collection-strip>span:nth-child(2){display:none}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about{gap:30px}nav{gap:16px}}@media(max-width:600px){.wrap{padding-left:22px;padding-right:22px}.header{height:82px}.brand{font-size:18px}.brand-mark{width:36px;height:36px;line-height:30px;font-size:29px}nav{gap:12px}nav a{font-size:10px}nav a:nth-child(2){display:none}.blog-link{padding:8px}.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:30px;overflow:hidden}.hero-kicker{margin-top:27px}h1{font-size:41px}.accent{font-size:25px}.intro{font-size:13px;min-height:0}.hero-actions{margin-top:22px}.feature-select{margin-top:26px}.hero-art{height:265px;width:min(100%,400px);margin:auto}.main-art{margin:0 14px}.art-label{top:5px;right:25px}.art-chip{right:6px;bottom:6px}.orbit{inset:10px}.hero:before{inset:0;background:radial-gradient(ellipse at 65% 70%,color-mix(in srgb,var(--feature-color) 17%,transparent),transparent 65%)}.collection-strip{font-size:10px;padding-top:16px;padding-bottom:16px}.collection-strip a{font-size:10px}.tools{padding-top:34px;padding-bottom:40px}.section-heading{display:block}.section-heading h2{font-size:25px}.section-heading>p{max-width:none;font-size:11px}.filters{gap:3px}.filters button{padding:8px 9px;font-size:11px}.search{max-width:none;width:100%;height:40px}.toolbar{gap:13px}.tool-grid{gap:15px 12px}.tool-card{padding:0 12px 14px}.card-cover{margin:0 -12px 12px}.tool-card h3{font-size:14px}.tool-card p{font-size:10px}.cover-category{font-size:8px;top:7px;left:7px}.badge{font-size:8px}.cover-play{opacity:1;transform:none;width:25px;height:25px;right:8px;bottom:8px}.tags{font-size:8px}.card-actions{font-size:9px}.about{grid-template-columns:1fr;gap:15px;padding-top:30px;padding-bottom:30px}.about h2{font-size:23px}footer{flex-wrap:wrap;gap:5px}footer p{width:100%;order:3}}@media(max-width:380px){.header{height:auto;min-height:82px;flex-wrap:wrap;gap:14px;padding-top:16px;padding-bottom:16px}nav{width:100%;justify-content:space-between}h1{font-size:35px}.accent{font-size:22px}.edition{font-size:9px}.tool-grid{grid-template-columns:1fr}.tool-card h3{font-size:17px}.tool-card p{font-size:12px}.card-cover{aspect-ratio:2/1}.card-cover img{height:100%;object-fit:cover}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.tool-card:hover,.tool-card:focus-within{transform:none}}
