@layer reset,tokens,base,layout,components,utilities;@layer components{.hero{position:relative;padding-block:var(--space-5) var(--space-6);text-align:center}.hero__glyphs{position:absolute;inset-block-start:0;inset-inline-end:0;margin:0;font-size:clamp(5rem,18vw,11rem);line-height:1;color:var(--color-accent);opacity:.07;pointer-events:none;user-select:none}.hero__title{font-size:var(--text-hero);letter-spacing:-.02em;margin-block-end:var(--space-3)}.hero__accent{color:var(--color-accent)}.hero__lede{font-size:var(--text-lg);color:var(--color-muted);max-inline-size:38rem;margin-inline:auto}.hero--search{padding-block-end:var(--space-5)}.hero__search{max-inline-size:42rem;margin-inline:auto;margin-block-start:var(--space-4);text-align:start}.discover{margin-block-start:var(--space-6)}.discover__hint{color:var(--color-muted);font-size:var(--text-sm);margin-block-start:calc(-1 * var(--space-2))}.discover__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--space-2)}.discover__item{position:relative}.discover-card__speak{display:grid;place-items:center;position:absolute;inset-block-start:var(--space-2);inset-inline-end:var(--space-2);z-index:1;inline-size:36px;block-size:36px;padding:0;border:none;border-radius:var(--radius-full);background:transparent;color:var(--color-muted);transition:background var(--duration-fast) var(--ease-out)}.discover-card__speak:hover,.discover-card__speak:focus-visible{background:var(--color-surface-hover);color:var(--color-text)}.discover-card__speak svg{inline-size:18px;block-size:18px}.discover-card{display:grid;gap:2px;block-size:100%;padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:inherit;text-decoration:none;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.discover-card:hover,.discover-card:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-2px);color:inherit}.discover-card__hanzi{font-size:var(--text-xl)}.discover-card__reading{color:var(--color-accent);font-size:var(--text-sm)}.discover-card__gloss{color:var(--color-muted);font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.discover-card__badge{justify-self:start;margin-block-start:var(--space-1);padding:.05em .6em;border:1px solid var(--color-border-strong);border-radius:var(--radius-full);font-size:.7rem;color:var(--color-faint)}.daily-idiom{margin-block-start:var(--space-5)}.daily-idiom__body{position:relative;max-inline-size:42rem}.daily-idiom__card{display:grid;gap:var(--space-1);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-inline-start:3px solid var(--color-accent);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;max-inline-size:42rem;transition:box-shadow var(--duration-base) var(--ease-out)}.daily-idiom__card:hover,.daily-idiom__card:focus-visible{box-shadow:var(--shadow-md);color:inherit}.daily-idiom__hanzi{font-size:var(--text-2xl)}.daily-idiom__reading{color:var(--color-accent)}.daily-idiom__gloss{color:var(--color-muted);font-size:var(--text-sm)}.how{margin-block-start:var(--space-6)}.how__steps{display:grid;gap:var(--space-2);padding-inline-start:1.2em;color:var(--color-muted);max-inline-size:42rem}.button{display:inline-flex;align-items:center;min-block-size:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text);font-weight:600;font-size:var(--text-sm);text-decoration:none;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.button:hover{background:var(--color-surface-hover);color:var(--color-text)}.button:active{transform:scale(.98)}.button--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.button--primary:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong);color:var(--color-on-accent)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-3)}.feature-card{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}.feature-card:hover,.feature-card:focus-visible{border-color:var(--color-border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px);color:inherit}.feature-card__icon{inline-size:1.75rem;block-size:1.75rem;color:var(--color-accent)}.feature-card__title{margin:0;font-size:var(--text-lg)}.feature-card__desc{margin:0;color:var(--color-muted);font-size:var(--text-sm)}}