:root {
  color-scheme: light;
  --page: #f5f1e5;
  --page-deep: #ebe5d1;
  --ink: #27362f;
  --muted: #6c786e;
  --quiet: #95a093;
  --card: rgba(255, 253, 246, .82);
  --card-solid: #fffdf6;
  --line: rgba(69, 91, 72, .16);
  --sage: #4b785b;
  --sage-dark: #2f5d42;
  --mint: #d8ead3;
  --sun: #efc967;
  --coral: #d87860;
  --lavender: #d8d8eb;
  --shadow: 0 22px 60px rgba(77, 78, 52, .12);
  --radius: 25px;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; opacity: .26; pointer-events: none; background-image: radial-gradient(rgba(69, 91, 72, .16) .7px, transparent .7px); background-size: 17px 17px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
.page-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 88px; }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { position: relative; display: inline-block; width: 28px; height: 28px; border: 2px solid var(--sage-dark); border-radius: 50% 50% 48% 48%; transform: rotate(-8deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: -7px; width: 10px; height: 10px; border-top: 2px solid var(--sage-dark); border-radius: 5px 5px 0 0; }
.brand-mark::before { left: 1px; transform: rotate(-25deg); }
.brand-mark::after { right: 1px; transform: rotate(25deg); }
.brand-mark span { position: absolute; top: 9px; width: 4px; height: 6px; border-radius: 50%; background: var(--sage-dark); }
.brand-mark span:first-child { left: 7px; }.brand-mark span:last-child { right: 7px; }
.brand-name { font-size: 21px; font-weight: 900; letter-spacing: -.05em; }
.brand-note { margin-left: 1px; padding: 4px 7px; border-radius: 7px; color: var(--sage); background: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.site-nav { display: flex; gap: 30px; margin-left: auto; margin-right: 28px; color: var(--muted); font-size: 13px; font-weight: 750; }
.site-nav a { position: relative; padding: 8px 0; }.site-nav a::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; border-radius: 2px; background: var(--sun); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.theme-button { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--sage-dark); background: var(--card); box-shadow: 0 5px 16px rgba(77, 78, 52, .06); }

.hero { position: relative; display: grid; grid-template-columns: 1fr .82fr; align-items: center; min-height: 520px; padding: 56px 6.5% 54px; overflow: hidden; border: 1px solid var(--line); border-radius: 38px; background: linear-gradient(120deg, rgba(255, 253, 246, .84), rgba(228, 240, 216, .72)); box-shadow: var(--shadow); }
.hero::before { content: ""; position: absolute; right: -18%; bottom: -63%; width: 80%; height: 115%; border: 1px solid rgba(75, 120, 91, .12); border-radius: 50%; transform: rotate(-16deg); }
.hero-copy { position: relative; z-index: 1; max-width: 545px; }
.eyebrow { margin: 0; color: var(--sage); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
h1, h2, h3, p { margin: 0; }
h1 { margin-top: 17px; font-size: clamp(50px, 7vw, 87px); line-height: .96; letter-spacing: -.09em; }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 475px; margin-top: 23px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 29px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; padding: 0 19px; border: 0; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }.button:focus-visible, .theme-button:focus-visible, .filter-tab:focus-visible, .search-box:focus-within { outline: 3px solid rgba(61, 118, 83, .3); outline-offset: 3px; }
.primary-button { color: #fff; background: var(--sage-dark); box-shadow: 0 10px 20px rgba(47, 93, 66, .2); }.primary-button:hover { box-shadow: 0 13px 24px rgba(47, 93, 66, .27); }
.ghost-button { color: var(--sage-dark); background: rgba(255, 253, 246, .62); border: 1px solid var(--line); }
.hero-stats { display: flex; align-items: center; gap: 14px; margin-top: 36px; }.hero-stats div { display: grid; gap: 3px; }.hero-stats strong { color: var(--sage-dark); font-size: 17px; letter-spacing: -.03em; }.hero-stats span { color: var(--quiet); font-size: 10px; }.hero-stats i { width: 1px; height: 25px; background: var(--line); }
.hero-art { position: relative; width: min(100%, 425px); aspect-ratio: 1; justify-self: end; }
.sun-disc { position: absolute; top: 13%; right: 8%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #f4cf76; box-shadow: 0 0 0 18px rgba(244, 207, 118, .15), 0 25px 50px rgba(218, 165, 74, .2); }
.orbit { position: absolute; border: 1px solid rgba(75, 120, 91, .26); border-radius: 50%; transform: rotate(-23deg); }.orbit-one { inset: 5% -8% 24% 6%; }.orbit-two { inset: 21% -3% 7% 19%; transform: rotate(25deg); border-color: rgba(216, 120, 96, .28); }
.hero-cat { position: absolute; z-index: 2; right: 19%; bottom: 19%; width: 150px; height: 147px; border-radius: 48% 48% 42% 45%; background: #967157; box-shadow: inset 18px -8px 0 rgba(73, 54, 45, .17), 18px 22px 0 rgba(73, 54, 45, .08); transform: rotate(-7deg); }.hero-cat::before { content: ""; position: absolute; left: 32px; bottom: 5px; width: 88px; height: 60px; border-radius: 50%; background: #f4e2c1; }.cat-ear { position: absolute; top: -29px; width: 47px; height: 55px; border-radius: 65% 20% 20% 20%; background: #80604f; }.cat-ear.left { left: 20px; transform: rotate(-31deg); }.cat-ear.right { right: 20px; transform: rotate(31deg) scaleX(-1); }.cat-eye { position: absolute; z-index: 2; top: 48px; width: 12px; height: 17px; border-radius: 50%; background: #8cc06c; box-shadow: inset 3px 0 #38503b; }.cat-eye.left { left: 50px; }.cat-eye.right { right: 50px; }.cat-nose { position: absolute; z-index: 2; top: 70px; left: 69px; width: 11px; height: 9px; border-radius: 50%; background: #d5867e; }.cat-tail { position: absolute; z-index: -1; right: -50px; bottom: 10px; width: 87px; height: 45px; border: 15px solid #967157; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(33deg); }
.art-note, .art-spark { position: absolute; z-index: 3; font-weight: 900; }.note-one { left: 3%; top: 26%; padding: 8px 12px; border-radius: 11px 11px 11px 3px; color: var(--sage-dark); background: #e2f0d7; transform: rotate(-11deg); }.note-two { right: 1%; bottom: 14%; color: var(--coral); font-size: 14px; letter-spacing: .08em; transform: rotate(8deg); }.spark-one { left: 16%; bottom: 19%; color: #d3a648; font-size: 26px; }.spark-two { right: 8%; top: 14%; color: var(--coral); font-size: 21px; }

.library-section { padding: 100px 2px 48px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }.section-heading h2 { margin-top: 9px; font-size: clamp(29px, 4vw, 43px); letter-spacing: -.07em; }.section-intro { max-width: 230px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: right; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 30px; }.filter-tabs { display: flex; gap: 7px; flex-wrap: wrap; }.filter-tab { border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }.filter-tab:hover { color: var(--sage-dark); }.filter-tab[aria-selected="true"] { color: var(--sage-dark); border-color: rgba(75, 120, 91, .16); background: var(--mint); }
.search-box { display: flex; align-items: center; gap: 7px; width: 190px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--quiet); background: rgba(255, 253, 246, .7); }.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.search-box input::placeholder { color: #9ba59a; }
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }.app-card { position: relative; display: flex; min-height: 315px; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 30px rgba(77, 78, 52, .06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.app-card.is-link:hover { border-color: rgba(75, 120, 91, .35); box-shadow: 0 18px 40px rgba(77, 78, 52, .13); transform: translateY(-5px); }.app-card.is-muted { opacity: .8; }.app-card:focus-within { outline: 3px solid rgba(61, 118, 83, .25); outline-offset: 3px; }
.card-art { position: relative; min-height: 169px; overflow: hidden; background: #dcebd2; }.card-art::after { content: ""; position: absolute; right: -23%; bottom: -53%; width: 80%; aspect-ratio: 1; border: 1px solid rgba(47, 93, 66, .16); border-radius: 50%; }.art-mint { background: linear-gradient(135deg, #d9ecd7, #eff0d1); }.art-coral { background: linear-gradient(135deg, #f3ddc4, #f0c0aa); }.art-lavender { background: linear-gradient(135deg, #deddf0, #cadfe5); }.mini-window { position: absolute; top: 25px; left: 25px; width: 105px; height: 75px; border: 5px solid rgba(255, 253, 246, .78); border-radius: 14px; background: #9cc9bd; transform: rotate(-7deg); }.mini-window::after { content: ""; position: absolute; right: 12px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: #eecb6d; box-shadow: -33px 9px 0 -8px #759b74; }.mini-cat { position: absolute; z-index: 2; right: 34px; bottom: 20px; width: 64px; height: 58px; border-radius: 48% 48% 38% 42%; background: #967157; transform: rotate(6deg); }.mini-cat::before { content: ""; position: absolute; left: 18px; bottom: 3px; width: 32px; height: 19px; border-radius: 50%; background: #f4e2c1; }.mini-cat::after { content: ""; position: absolute; top: -14px; left: 13px; width: 16px; height: 20px; border-radius: 70% 20% 20% 20%; background: #80604f; box-shadow: 23px 0 #80604f; }.mini-play { position: absolute; top: 28px; right: 27px; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: var(--sage-dark); background: rgba(255, 253, 246, .8); font-size: 21px; box-shadow: 0 6px 16px rgba(66, 87, 64, .12); }.mini-orbit { position: absolute; right: 0; bottom: 15px; width: 150px; height: 45px; border: 1px solid rgba(75, 120, 91, .23); border-radius: 50%; transform: rotate(-19deg); }.mini-plus { position: absolute; top: 38px; left: 44px; color: rgba(75, 120, 91, .72); font-size: 43px; font-weight: 300; }.mini-lines { position: absolute; right: 37px; bottom: 36px; width: 87px; height: 52px; border-top: 2px solid rgba(78, 91, 130, .28); border-bottom: 2px solid rgba(78, 91, 130, .28); transform: rotate(14deg); }.mini-lines::after { content: ""; position: absolute; top: 24px; right: 10px; left: -11px; border-top: 2px solid rgba(78, 91, 130, .28); }
.card-content { display: flex; flex: 1; flex-direction: column; padding: 17px 18px 16px; }.card-kicker { display: flex; align-items: center; justify-content: space-between; color: var(--quiet); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }.status { display: inline-flex; align-items: center; gap: 5px; color: var(--sage); }.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.status.pending { color: #c29b47; }.card-content h3 { margin-top: 9px; font-size: 20px; letter-spacing: -.05em; }.card-content p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.65; }.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }.tag-row { display: flex; gap: 5px; flex-wrap: wrap; }.tag { padding: 5px 7px; border-radius: 6px; color: var(--sage); background: rgba(216, 234, 211, .68); font-size: 10px; font-weight: 800; }.card-arrow { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: var(--sage-dark); background: var(--mint); font-size: 17px; transition: transform .2s ease; }.app-card.is-link:hover .card-arrow { transform: translate(2px, -2px); }.soon-label { color: #a98c59; font-size: 11px; font-weight: 800; }.hidden { display: none !important; }
.empty-state { display: grid; place-items: center; gap: 6px; min-height: 180px; margin-top: 22px; border: 1px dashed var(--line); border-radius: 19px; color: var(--muted); text-align: center; }.empty-state strong { color: var(--ink); font-size: 14px; }.empty-state span:last-child { font-size: 12px; }.empty-icon { color: var(--sun); font-size: 31px; }

.about-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; padding: 67px 2px 86px; }.about-card, .guide-card { position: relative; overflow: hidden; min-height: 260px; padding: 29px; border: 1px solid var(--line); border-radius: var(--radius); }.about-card { background: var(--sage-dark); color: #eff6e6; }.about-card .eyebrow { color: #bddeb9; }.about-card h2 { margin-top: 18px; color: #f5f5dc; font-size: clamp(26px, 3.5vw, 37px); line-height: 1.12; letter-spacing: -.07em; }.about-card p:last-child { max-width: 355px; margin-top: 20px; color: rgba(245, 245, 220, .75); font-size: 13px; line-height: 1.8; }.guide-card { display: grid; grid-template-columns: 48px 1fr; gap: 15px; background: rgba(255, 253, 246, .72); }.guide-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: var(--sage-dark); background: var(--mint); font-size: 27px; font-weight: 300; }.guide-card h3 { margin-top: 10px; font-size: 22px; letter-spacing: -.05em; }.guide-card p:last-of-type { max-width: 455px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }.guide-card code { padding: 2px 5px; border-radius: 5px; color: var(--sage-dark); background: #e5efdc; font-size: 11px; }.guide-lines { position: absolute; right: 26px; bottom: 27px; display: grid; gap: 7px; width: 110px; opacity: .45; transform: rotate(-7deg); }.guide-lines span { height: 2px; background: var(--sun); }.guide-lines span:nth-child(2) { width: 80%; background: var(--coral); }.guide-lines span:nth-child(3) { width: 54%; background: var(--sage); }
.site-footer { display: flex; justify-content: space-between; padding: 20px 2px 28px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 11px; }.site-footer b { color: var(--coral); }

body[data-theme="dark"] { --page: #1f2b25; --page-deep: #17211c; --ink: #eff3df; --muted: #b7c4b3; --quiet: #8e9e91; --card: rgba(39, 56, 46, .8); --card-solid: #27382e; --line: rgba(217, 235, 209, .16); --sage: #a2c49c; --sage-dark: #8ec18b; --mint: #35533f; --sun: #edc768; --coral: #e38b74; --lavender: #646b8d; --shadow: 0 22px 60px rgba(0, 0, 0, .16); }.dark body::before { opacity: .12; }.dark .hero { background: linear-gradient(120deg, rgba(47, 66, 53, .84), rgba(54, 76, 57, .7)); }.dark .primary-button { color: #1f2b25; background: #b9d8ac; }.dark .ghost-button, .dark .search-box { background: rgba(36, 53, 43, .58); }.dark .card-art { filter: saturate(.8) brightness(.8); }.dark .about-card { background: #35553e; }

@media (max-width: 850px) { .hero { grid-template-columns: 1fr; min-height: 700px; padding-top: 48px; }.hero-art { width: min(75vw, 380px); margin: 6px auto -65px; }.app-grid { grid-template-columns: repeat(2, 1fr); }.about-section { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .page-shell { width: min(100% - 28px, 1240px); }.site-header { min-height: 73px; }.brand-note, .site-nav { display: none; }.hero { min-height: 680px; padding: 39px 24px 25px; border-radius: 27px; }.hero-lede { font-size: 14px; }.hero-art { width: 100%; margin-top: 10px; }.hero-cat { right: 22%; bottom: 17%; transform: scale(.83) rotate(-7deg); transform-origin: bottom right; }.library-section { padding-top: 72px; }.section-heading { align-items: start; flex-direction: column; gap: 10px; }.section-intro { text-align: left; }.library-toolbar { align-items: stretch; flex-direction: column-reverse; }.search-box { width: 100%; }.app-grid { grid-template-columns: 1fr; }.app-card { min-height: 290px; }.about-section { padding: 52px 2px 64px; }.about-card, .guide-card { min-height: 280px; padding: 23px; }.site-footer { flex-direction: column; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }