:root { color-scheme: light; --ink: #172033; --muted: #647089; --faint: #8a95a9; --line: #e5eaf1; --surface: #fff; --soft: #f2f5f9; --blue: #2563eb; --blue-dark: #1e4fd0; --mint: #16a37d; --shadow: 0 20px 55px rgba(41, 56, 82, .08); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #f7f9fc; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.site-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.site-header { min-height: 76px; display: flex; align-items: center; gap: 34px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 31px; height: 31px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 5px; border-radius: 9px; background: #2563eb; box-shadow: 0 6px 14px rgba(37, 99, 235, .2); }
.brand-mark span { height: 2px; display: block; border-radius: 2px; background: #fff; transform: skewY(-13deg); }
.brand-mark span:nth-child(2) { width: 17px; align-self: flex-end; transform: skewY(13deg); }.brand-mark span:nth-child(3) { width: 15px; }
.brand-copy { display: grid; line-height: 1; }.brand-copy strong { font-size: 15px; letter-spacing: .2px; }.brand-copy small { margin-top: 4px; color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: 1.8px; }
.site-nav { display: flex; align-items: center; gap: 23px; margin-left: 12px; }.nav-link { padding: 29px 0 25px; color: var(--muted); font-size: 13px; text-decoration: none; border-bottom: 2px solid transparent; }.nav-link:hover, .nav-link.is-active { color: var(--ink); border-bottom-color: var(--blue); }
.header-status { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 11px; }.header-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(22, 163, 125, .1); }
.hero { min-height: 426px; display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: center; gap: 50px; padding: 72px 0 54px; }.eyebrow { margin: 0 0 14px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.7px; }.hero h1 { margin: 0; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -.8px; }.hero h1 em { color: var(--blue); font-style: normal; }.hero-lede { max-width: 570px; margin: 24px 0 26px; color: var(--muted); font-size: 15px; line-height: 1.9; }.hero-meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--faint); font-size: 11px; }.hero-meta span + span { position: relative; padding-left: 18px; }.hero-meta span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #bcc5d2; transform: translateY(-50%); }.hero-meta b { margin-right: 3px; color: var(--ink); font-size: 15px; }
.hero-orbit { position: relative; height: 260px; }.orbit-line { position: absolute; inset: 12px 12px 12px 0; border: 1px solid #dfe6f0; border-radius: 50%; transform: rotate(-18deg); }.orbit-line::before, .orbit-line::after { content: ""; position: absolute; border: 1px solid #e7edf5; border-radius: 50%; }.orbit-line::before { inset: 26px 28px; transform: rotate(32deg); }.orbit-line::after { inset: 56px 58px; transform: rotate(-18deg); }
.orbit-card { position: absolute; z-index: 1; display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 10px; width: 176px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }.orbit-card span:not(.orbit-icon):not(.orbit-dot) { font-size: 12px; font-weight: 750; }.orbit-card small { grid-column: 2; margin-top: 2px; color: var(--faint); font-size: 10px; }.orbit-card-main { top: 54px; left: 40px; }.orbit-card-side { right: 8px; bottom: 40px; width: 165px; transform: rotate(4deg); }.orbit-icon { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--blue); font-weight: 800; }.orbit-dot { grid-row: span 2; width: 12px; height: 12px; margin-left: 8px; border: 3px solid #b8c7df; border-radius: 50%; }
.tools-section { padding: 38px 0 66px; border-top: 1px solid var(--line); }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }.section-heading h2, .about-section h2 { margin: 0; font-size: 25px; letter-spacing: -.25px; }.tool-controls { display: flex; align-items: center; gap: 11px; }.search-box { width: 190px; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }.search-box span { color: var(--faint); font-size: 20px; line-height: 1; transform: rotate(-20deg); }.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.search-box input::placeholder { color: #a0aabd; }.search-box:focus-within { border-color: #a7c0f7; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }.filters { display: flex; gap: 5px; }.filter-button { padding: 8px 10px; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; }.filter-button:hover, .filter-button.is-active { color: var(--blue); background: #eaf1ff; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.tool-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 25px rgba(40, 57, 87, .035); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }.tool-card:hover { border-color: #cbd8ec; transform: translateY(-2px); box-shadow: var(--shadow); }.tool-visual { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: #eef4ff; }.tool-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; }.tool-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 37, 94, .12), transparent 55%); pointer-events: none; }.tool-status { position: absolute; top: 13px; right: 13px; z-index: 1; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }.tool-status.available { color: #087354; background: #def7ed; }.tool-status.upcoming { color: #7b5d18; background: #fff2c9; }.tool-card-body { padding: 20px 21px 21px; }.tool-card-top { display: flex; align-items: center; gap: 9px; }.tool-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 800; }.audio-mark { color: #fff; background: var(--blue); }.text-mark { color: #77611a; background: #fff0bd; font-size: 10px; }.tool-category { color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .4px; }.tool-card h3 { margin: 15px 0 7px; font-size: 22px; }.tool-card p { min-height: 48px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 17px 0 20px; }.tag-list span { padding: 5px 7px; color: var(--muted); border-radius: 5px; background: var(--soft); font-size: 10px; }.tool-action { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 12px; font-weight: 750; text-decoration: none; }.tool-action:hover { color: var(--blue-dark); }.tool-action span { font-size: 17px; line-height: 10px; }.tool-action.is-disabled { color: var(--faint); cursor: default; }.tool-card-upcoming { background: #fcfdff; }.upcoming-visual { position: relative; height: 169px; display: grid; place-items: center; overflow: hidden; background: #f1f4f8; }.upcoming-visual::before, .upcoming-visual::after { content: ""; position: absolute; width: 240px; height: 240px; border: 1px solid #e1e7ef; border-radius: 50%; }.upcoming-visual::after { width: 130px; height: 130px; }.markdown-symbol { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #d9e0eb; border-radius: 15px; color: #7b8799; background: rgba(255, 255, 255, .75); font-family: Georgia, serif; font-size: 35px; font-weight: 700; }.tools-empty { grid-column: 1 / -1; padding: 52px 0; color: var(--muted); text-align: center; font-size: 13px; }
.about-section { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 25px 28px; border: 1px solid #dfe7f2; border-radius: 12px; background: #eef4ff; }.about-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); background: #dbe8ff; font-size: 19px; }.about-section .eyebrow { margin-bottom: 7px; }.about-section h2 { font-size: 18px; }.about-section p:not(.eyebrow) { max-width: 670px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.about-link { display: inline-flex; gap: 6px; align-items: center; color: var(--blue); font-size: 11px; font-weight: 750; text-decoration: none; white-space: nowrap; }.about-link span { font-size: 16px; }.site-footer { display: flex; align-items: center; gap: 10px; padding: 48px 0 30px; color: var(--faint); font-size: 10px; }.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }.site-footer a { text-decoration: none; }.site-footer a:hover { color: var(--blue); }.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: #c3cad6; }.site-footer .icp-link, .site-footer .icp-link:hover, .site-footer .icp-link:visited { color: var(--faint); }
@media (max-width: 760px) { .site-shell { width: min(100% - 32px, 620px); }.site-header { gap: 18px; }.site-nav { gap: 15px; margin-left: 0; }.header-status { display: none; }.hero { min-height: 0; grid-template-columns: 1fr; gap: 18px; padding: 53px 0 40px; }.hero-orbit { width: min(100%, 390px); height: 210px; margin: 0 auto; transform: scale(.9); transform-origin: top center; }.orbit-card-main { left: 28px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 17px; }.tool-controls { width: 100%; justify-content: space-between; }.search-box { flex: 1; max-width: 230px; }.tool-grid { grid-template-columns: 1fr; }.about-section { grid-template-columns: 42px minmax(0, 1fr); }.about-link { grid-column: 2; }.site-footer { align-items: flex-start; flex-wrap: wrap; }.site-footer nav { width: 100%; margin: 5px 0 0; } }
@media (max-width: 420px) { .site-shell { width: min(100% - 24px, 380px); }.site-header { min-height: 64px; }.nav-link { padding: 23px 0 20px; font-size: 12px; }.hero h1 { font-size: 39px; }.hero-lede { font-size: 14px; }.hero-meta { gap: 9px 15px; }.tool-controls { align-items: flex-start; flex-direction: column; }.search-box { width: 100%; max-width: none; }.filters { width: 100%; }.filter-button { flex: 1; }.tool-card-body { padding: 17px; }.tool-card p { min-height: 0; }.about-section { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }