/* Hallmark · macrostructure: Ecosystem Index · tone: modern, playful discovery · anchor hue: 39 · genre: modern-minimal · theme: Coral, existing squirrel brand orange · nav: N13 · footer: Ft2 · enrichment: existing brand SVG · audience: Chinese English learners · use: discover and open a suitable tool */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 */
@import url('./tokens.css?v=e2f5734a8265');
*{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--space-lg)}body{overflow-x:clip;margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-body)/1.6 var(--font-body)}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button,a,kbd{font-style:normal}button,nav a,.text-link,.dark-link,footer a{white-space:nowrap}button{transition:transform var(--dur-micro) var(--ease-out)}button:active{transform:translateY(1px)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{font-style:normal;min-width:0;overflow-wrap:anywhere}h1,h2{font-family:var(--font-display)}img{max-width:100%;display:block}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}button{border:0;background:var(--color-transparent)}[hidden]{display:none!important}.shell{width:min(1320px,100% - 40px);margin-inline:auto}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%)}.skip:focus{position:fixed;padding:var(--space-md);background:var(--color-paper);z-index:10}
.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);border-bottom:1px solid var(--color-rule)}.brand{display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0}.brand strong{font-size:21px;letter-spacing:.02em;line-height:1.3}.brand strong span{display:block;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.13em;color:var(--color-muted)}.topbar nav{display:none;gap:var(--space-xl);font-size:var(--text-sm)}.topbar nav a{min-height:44px;display:flex;align-items:center;color:var(--color-muted)}.topbar nav .active{color:var(--color-ink);font-weight:600}.search-trigger{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);min-height:44px;border:1px solid var(--color-control);border-radius:var(--radius-pill);font-size:var(--text-sm);color:var(--color-muted)}.search-trigger span,.search-trigger kbd{display:none}kbd{font:11px var(--font-mono);border:1px solid var(--color-rule);border-radius:4px;padding:4px}
.hero{display:grid;gap:var(--space-md);padding-block:var(--space-xl)}h1{font-size:var(--text-display);line-height:1.22;font-weight:800;letter-spacing:-.055em}.accent-word{color:var(--color-accent-text)}.hero-copy p{color:var(--color-muted);margin-block:var(--space-lg);font-size:var(--text-sm)}.text-link{display:inline-flex;align-items:center;gap:var(--space-xl);min-height:44px;font-size:var(--text-sm);font-weight:650}.text-link span{font-size:24px}.mascot-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:268px;isolation:isolate}.mascot-button{position:relative;z-index:1;display:block;width:180px;height:188px;padding:0;transform-origin:50% 90%}.mascot-button img{width:180px;height:174px;object-fit:contain;position:relative;z-index:1;transform-origin:50% 92%;transition:transform var(--dur-short) var(--ease-out)}.mascot-shadow{display:block;width:110px;height:10px;background:var(--color-rule);border-radius:50%;margin-inline:auto;position:relative;top:-3px}.mascot-note{position:absolute;left:0;top:8px;font-size:var(--text-sm);border:1px solid var(--color-rule);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-md);background:var(--color-surface);color:var(--color-muted);z-index:2}.mascot-hint{position:absolute;bottom:8px;color:var(--color-muted);font-size:var(--text-xs);z-index:1}.stage-word{position:absolute;font-family:var(--font-display);font-size:clamp(90px,12vw,160px);font-weight:800;letter-spacing:-.06em;color:var(--color-rule);z-index:-1;bottom:0;right:0;line-height:1}.mascot-button.is-near img{transform:rotate(-5deg) translateY(-3px)}
.spotlight{background:var(--color-dark);color:var(--color-on-dark)}.spotlight-inner{padding-block:var(--space-xl);display:grid;gap:var(--space-lg)}.spotlight-heading h2{font-size:var(--text-title);font-weight:600;line-height:1.3;letter-spacing:-.04em}.accent-dot{color:var(--color-accent)}.spotlight-heading p{font-size:var(--text-sm);color:var(--color-muted-dark);margin-block:var(--space-sm) var(--space-md);max-width:23em}.dark-link{border-bottom:1px solid var(--color-dark-rule);padding:var(--space-xs) 0;min-height:44px;display:inline-flex;gap:var(--space-xl);align-items:center;font-size:var(--text-sm)}.spotlight-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.spot-card{min-width:0}.spot-image{height:176px;overflow:clip;background:var(--color-soft);border-radius:var(--radius-sm);display:block}.spot-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform var(--dur-short) var(--ease-out)}.spot-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-sm)}.spot-meta strong{font-size:var(--text-sm);font-weight:600}.spot-meta span{font-size:var(--text-xs);color:var(--color-muted-dark)}.spot-card>a{display:block}
.catalog{padding-block:var(--space-xl) var(--space-2xl);scroll-margin-top:var(--space-lg)}.catalog-head{display:grid;gap:var(--space-lg);margin-bottom:var(--space-xl)}.catalog-head h2{font-size:var(--text-title);letter-spacing:-.035em;line-height:1.3}.catalog-head p{margin-top:var(--space-xs);font-size:var(--text-sm);color:var(--color-muted)}.inline-search{display:flex;align-items:center;gap:var(--space-sm);border-bottom:1px solid var(--color-control);min-height:48px}.inline-search input{width:100%;min-width:0;border:0;background:var(--color-transparent);color:var(--color-ink);font-size:var(--text-sm);padding:var(--space-xs) 0}.inline-search input::placeholder{color:var(--color-muted)}.catalog-layout{display:grid;gap:var(--space-lg)}aside h3{font-weight:500;font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-sm)}#categories{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.category{font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.category .cat-count{font-variant-numeric:tabular-nums;color:var(--color-muted);font-size:var(--text-xs)}.category[aria-pressed=true]{background:var(--color-accent-soft);color:var(--color-accent-text);font-weight:600}.category img{width:22px;height:22px;object-fit:contain;flex-shrink:0}.category .category-label{flex:1;text-align:left}.aside-brand{display:none}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md);border-bottom:1px solid var(--color-rule);padding-bottom:var(--space-sm)}#kind-filters{display:flex;gap:var(--space-xs)}#kind-filters button{font-size:var(--text-sm);padding:var(--space-xs) var(--space-md);min-height:44px;border-radius:var(--radius-pill)}#kind-filters button[aria-pressed=true]{background:var(--color-ink);color:var(--color-paper)}select{max-width:100%;min-height:44px;background:var(--color-transparent);color:var(--color-muted);border:0;font-size:var(--text-xs);padding:var(--space-xs)}.result-caption{display:flex;justify-content:space-between;gap:var(--space-md);font-size:var(--text-xs);color:var(--color-muted);padding-block:var(--space-md)}#kind-help{display:none}.resource-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl) var(--space-lg)}.resource{min-width:0;display:flex;flex-direction:column}.resource-visual{height:180px;background:var(--color-soft);color:var(--color-muted);border-radius:var(--radius-md);overflow:clip;display:block;position:relative;border:1px solid var(--color-rule)}.resource-visual>img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform var(--dur-short) var(--ease-out)}.resource-type{position:absolute;right:var(--space-xs);bottom:var(--space-xs);padding:2px var(--space-xs);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-muted);font-size:11px}.typographic-cover{height:100%;padding:var(--space-lg);display:flex;flex-direction:column;justify-content:space-between}.typographic-cover strong{font:600 24px/1.2 var(--font-display);letter-spacing:-.04em;color:var(--color-ink);overflow-wrap:anywhere}.typographic-cover span{font-size:var(--text-xs)}.resource[data-kind=skill] .resource-visual{background:var(--color-dark-raised);color:var(--color-muted-dark);border-color:var(--color-dark-raised)}.resource[data-kind=skill] .typographic-cover strong{color:var(--color-on-dark)}.resource-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs);margin-top:var(--space-sm)}.resource h3{font-size:var(--text-body);font-weight:650;line-height:1.45}.resource-top>a{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;font-size:20px}.resource .description{font-size:var(--text-sm);line-height:1.65;color:var(--color-muted);margin-block:var(--space-2xs) var(--space-sm)}.resource-status{font-size:11px;color:var(--color-muted);margin-top:auto;padding-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.status-mark{width:5px;height:5px;border-radius:50%;background:var(--color-control)}.resource-status.experienced .status-mark{background:var(--color-accent)}.resource details{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-xs)}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}details p{padding:var(--space-sm);background:var(--color-soft);color:var(--color-muted);border-radius:var(--radius-sm);overflow-wrap:anywhere}.empty{text-align:center;padding-block:var(--space-2xl)}.empty p{margin:var(--space-md) 0;color:var(--color-muted)}.empty button{min-height:44px;padding:var(--space-sm) var(--space-lg);background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-sm)}.principles{display:grid;gap:var(--space-lg);border-top:1px solid var(--color-rule);padding-block:var(--space-xl)}.principles h2{font-size:var(--text-lg);font-weight:600}.principles p{max-width:48em;color:var(--color-muted);font-size:var(--text-sm)}.principles a{font-size:var(--text-sm);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}footer{border-top:1px solid var(--color-rule);display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:space-between;font-size:var(--text-xs);color:var(--color-muted);padding-block:var(--space-lg)}
dialog{position:fixed;inset:0;margin:auto;height:fit-content;max-height:80dvh;width:min(620px,calc(100% - 32px));border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:var(--space-lg);background:var(--color-paper);color:var(--color-ink);overflow:auto}dialog::backdrop{background:var(--color-backdrop)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}.dialog-top h2{font-size:var(--text-lg)}.dialog-top button{min-height:44px;font-size:var(--text-sm)}.dialog-field{display:block;margin-top:var(--space-lg)}.dialog-field input{width:100%;min-height:48px;padding:var(--space-sm);border:1px solid var(--color-control);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink)}#command-count,.dialog-hint{font-size:var(--text-xs);color:var(--color-muted);margin-block:var(--space-sm)}#command-results{display:grid;gap:var(--space-2xs)}.command-result{display:flex;justify-content:space-between;align-items:center;min-height:48px;gap:var(--space-md);padding:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-sm)}.command-result strong{overflow-wrap:anywhere}.command-result span{font-size:var(--text-xs);color:var(--color-muted);white-space:nowrap}.command-result.is-active{background:var(--color-accent-soft);color:var(--color-accent-text)}
@media(min-width:40rem){.shell{width:min(1320px,100% - 64px)}.hero{grid-template-columns:1.2fr minmax(0,1fr);align-items:center;padding-block:var(--space-xl)}.mascot-stage{min-height:270px}.spotlight-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-head{grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:center}#kind-help{display:block}.search-trigger span,.search-trigger kbd{display:inline}.search-trigger svg{display:none}.mascot-note{left:8%;top:0}.principles{grid-template-columns:1fr 1.6fr}.principles a{grid-column:2}}
@media(min-width:64rem){.topbar nav{display:flex}.hero{padding-block:48px;grid-template-columns:1.2fr minmax(0,1fr)}.hero-copy p{font-size:var(--text-body);margin-block:var(--space-md)}.mascot-stage{min-height:280px}.mascot-button{width:216px;height:228px}.mascot-button img{width:216px;height:208px}.mascot-note{left:10%;top:8px}.mascot-hint{bottom:0}.stage-word{bottom:-8px;right:8%}.spotlight-inner{grid-template-columns:minmax(0,.82fr) minmax(0,2fr);align-items:center}.spotlight-heading p{max-width:18em}.spotlight-cards{gap:var(--space-lg)}.spot-image{height:184px}.catalog{padding-top:var(--space-2xl)}.catalog-layout{grid-template-columns:176px minmax(0,1fr);gap:var(--space-xl)}#categories{display:grid;gap:var(--space-xs)}.category{width:100%}.category img{width:24px;height:24px}.aside-brand{display:flex;gap:var(--space-xs);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-rule);font-size:11px;color:var(--color-muted);align-items:center}.resource-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.resource-visual{height:172px}}
@media(hover:hover) and (pointer:fine){.resource-visual:hover>img,.spot-image:hover img{transform:scale(1.025)}nav a:hover,.text-link:hover,.resource h3 a:hover{color:var(--color-accent-text)}.category:hover{background:var(--color-soft)}.dark-link:hover{color:var(--color-accent)}.search-trigger:hover{border-color:var(--color-ink)}}
button:disabled,input:disabled,select:disabled{opacity:.55;cursor:not-allowed}a:active{opacity:.8}.spotlight :focus-visible{outline-color:var(--color-on-dark)}.hero{padding-bottom:var(--space-2xl)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.mascot-button.is-near img,.resource-visual:hover>img,.spot-image:hover img{transform:none}}