@import url('/ovo-assets/ovo-theme.css?v=1');
:root { color-scheme: light; --ink: #654e48; --soft-ink: #8d7770; --pink: #f9dbe3; --yellow: #fff0bd; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fffaf3; font-family: 'Segoe UI', 'Microsoft YaHei', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #b9607b; outline-offset: 5px; }
.site-shell { max-width: 1240px; padding: 0 48px; margin: 0 auto; }
.nav { height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #eddfd433; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 35px; font-weight: 800; letter-spacing: -2px; }
.brand-api { font-size: 12px; font-weight: 600; margin-left: 8px; letter-spacing: 1.5px; }
.nav nav { display: flex; align-items: center; gap: 38px; font-size: 14px; }
.nav nav a { padding: 9px 0; position: relative; }
.nav nav a:hover { color: #ad526d; }
.nav .active:after { content: ''; position: absolute; height: 4px; border-radius: 9px; background: #edb5c4; left: 6px; right: 6px; bottom: 0; }
.nav-login { padding: 12px 19px; border: 1px solid #e5d9ca; border-radius: 14px; background: #fffdf8; font-size: 13px; font-weight: 600; }
.nav-login span { margin-left: 12px; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 560px; gap: 10px; padding: 49px 0 42px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #967d63; font-size: 10px; letter-spacing: 1.8px; background: #fff4d7; border: 1px solid #f1e6c9; padding: 8px 13px; border-radius: 99px; }
.tiny-flower { font-size: 17px; color: #bfa067; line-height: 1; }
h1 { margin: 23px 0 23px; font-size: clamp(36px, 4.2vw, 53px); line-height: 1.47; letter-spacing: 1px; font-weight: 800; }
.pink-word { color: #b56580; position: relative; white-space: nowrap; }
.pink-word svg { position: absolute; bottom: -10px; left: 0; width: 100%; height: 19px; fill: none; stroke: #edc1ca; stroke-linecap: round; stroke-width: 3; }
.hero-description { font-size: 14px; color: var(--soft-ink); line-height: 2; margin: 0 0 27px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 22px; min-height: 49px; padding: 13px 21px; border: 1px solid transparent; border-radius: 14px; font-size: 14px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 6px 12px #73564b0a; }
.button-pink { background: #f7d6df; border-color: #edc1cd; color: #78465b; box-shadow: 0 4px 0 #eac2cc55; }
.button-cream { background: #fff6dd; border-color: #eee1bd; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 23px; font-size: 11px; color: #988479; }
.mini-face { font-family: Georgia, serif; font-size: 17px; font-weight: bold; background: #f3ecd9; border-radius: 50%; padding: 3px 6px 5px; color: #857053; }
.note-star { color: #b09864; margin-left: 4px; font-size: 19px; }
.hero-art { position: relative; height: 425px; isolation: isolate; }
.art-orbit { position: absolute; width: 380px; height: 350px; top: 38px; left: 52%; transform: translateX(-50%) rotate(-15deg); border-radius: 47% 53% 59% 41%; background: #fff3d8; border: 1px solid #f8eacf; z-index: -2; }
.art-orbit:after { content: ''; position: absolute; inset: -20px; border-radius: 50%; border: 1px dashed #ebdcc6; }
.mascot { position: absolute; border: 2px solid #c9996b55; box-shadow: inset -12px -14px 0 #c8965d0a, 0 18px 20px -12px #8966551a; }
.mascot-yellow { width: 188px; height: 186px; top: 80px; right: 17px; background: #ffedb1; border-radius: 47% 49% 40% 44%; transform: rotate(12deg); }
.mascot-pink { width: 224px; height: 213px; left: 42px; top: 166px; background: #f9d7df; border-color: #daa4ad70; border-radius: 44% 48% 43% 42%; transform: rotate(-11deg); }
.mascot-face { position: absolute; top: 43%; left: 24%; right: 24%; display: flex; justify-content: space-between; align-items: center; color: #76534f; }
.mascot-face i { width: 13px; height: 18px; border: 3px solid #76534f; border-radius: 50%; background: transparent; }
.mascot-face b { font: bold 29px/1 Georgia, serif; transform: translateY(4px); }
.cheek { position: absolute; top: 60%; width: 29px; height: 13px; border-radius: 50%; background: #eca9b680; }
.cheek.left { left: 12%; }.cheek.right { right: 12%; }
.mascot-foot { position: absolute; width: 40px; height: 22px; border-radius: 40% 40% 50% 50%; bottom: -9px; background: inherit; z-index: -1; border-bottom: 2px solid #c9996b33; }
.foot-left { left: 28px; transform: rotate(8deg); }.foot-right { right: 28px; transform: rotate(-8deg); }
.sprout { position: absolute; top: -33px; left: 95px; width: 4px; height: 41px; background: #a9b986; transform: rotate(11deg); border-radius: 9px; }
.sprout i { position: absolute; width: 29px; height: 16px; background: #c0cd9e; border: 1px solid #a9b986; border-radius: 2px 100% 2px 100%; top: 3px; left: -26px; transform: rotate(4deg); }
.sprout i + i { left: 1px; top: -2px; transform: rotate(-72deg); }
.floating-note { position: absolute; z-index: 3; background: #fffef8; border: 1px solid #eaddcb; border-radius: 12px; box-shadow: 0 5px 0 #eadbc42b; padding: 12px 17px; font-size: 12px; letter-spacing: .5px; }
.note-top { top: 34px; left: 26px; transform: rotate(-9deg); }.note-top span { color: #c59b5c; margin-right: 7px; font-size: 18px; }
.note-bottom { right: 0; bottom: 28px; transform: rotate(7deg); font-family: Georgia, serif; font-style: italic; font-size: 14px; }.heart { color: #b96e83; font-size: 22px; vertical-align: -2px; margin-right: 6px; }
.spark { position: absolute; color: #ceb375; font-size: 35px; }.spark-one { top: 25px; right: 47px; }.spark-two { bottom: 50px; left: 4px; font-size: 45px; }.spark-three { right: -4px; top: 257px; font-size: 24px; color: #dba9b6; }
.art-caption { position: absolute; bottom: -4px; left: 131px; color: #ac9682; font: italic 14px Georgia, serif; letter-spacing: .6px; }
.connection { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 21px 27px; border: 1px solid #eadfce; border-radius: 18px; background: #fffdf8; }
.connection-label { display: flex; gap: 15px; align-items: center; }.connection-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #faf0db; font-size: 23px; color: #a48a57; }
.connection-label strong { display: block; font-size: 14px; margin-bottom: 5px; }.connection-label div > span { font-size: 10px; color: #948278; letter-spacing: .3px; }
.address { display: flex; align-items: center; gap: 42px; padding: 10px 11px 10px 20px; background: #f9f5ee; border: 1px solid #eee5d9; border-radius: 11px; }.address code { font: 12px Consolas, monospace; color: #806b60; }.address button { display: flex; gap: 6px; align-items: center; padding: 7px 10px; background: #fffdf8; border: 1px solid #e9dfd1; border-radius: 7px; color: #806b60; font-size: 11px; cursor: pointer; }.address svg { width: 13px; height: 13px; }
.features { padding-top: 52px; }.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 21px; }.section-heading h2 { font-size: 18px; font-weight: 650; margin: 0; }.section-heading > span { font-size: 9px; letter-spacing: 1.4px; color: #9c897d; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 19px; }.feature { position: relative; padding: 24px 25px; border: 1px solid #eaddd1; border-radius: 19px; transition: transform .2s; }.feature:hover { transform: translateY(-4px); }.feature-pink { background: #fbedef; border-color: #efdadc; }.feature-yellow { background: #fff5d9; border-color: #eee2be; }.feature-white { background: #f5f3e9; border-color: #e7e2d1; }.feature-icon { display: grid; place-items: center; background: #ffffff9c; border: 1px solid #ffffff; width: 39px; height: 39px; border-radius: 12px; font-size: 26px; color: #a76c7e; }.feature-yellow .feature-icon { color: #a88a49; }.feature-white .feature-icon { color: #87936a; }.feature-number { position: absolute; top: 39px; right: 24px; font-size: 9px; color: #a18b7d; letter-spacing: 1px; }.feature h3 { font-size: 16px; margin: 22px 0 10px; }.feature p { font-size: 12px; line-height: 1.9; color: #947e73; margin: 0 0 21px; }.feature-link { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }.feature-link span { font-size: 19px; }
.closing { display: flex; align-items: center; gap: 21px; border: 1px solid #eedfc9; background: repeating-linear-gradient(90deg,#fff1d400 0 31px,#ecd8ad17 31px 32px),#fff3db; margin-top: 31px; padding: 28px 32px; border-radius: 19px; }.closing-flower { font-size: 49px; color: #d0b076; }.closing h2 { margin: 0 0 7px; font-size: 18px; }.closing p { margin: 0; color: #9c836b; font-size: 12px; }.closing .button { margin-left: auto; min-height: 44px; font-size: 12px; }.button-white { background: #fffdf8; border-color: #e9d9bd; }
.footer { display: flex; align-items: center; gap: 20px; padding: 32px 0; margin-top: 21px; border-top: 1px solid #eee3d5; color: #a18d7e; font-size: 10px; }.footer-brand { font: bold 26px Georgia, serif; color: #81665b; }.footer-brand span { font: 9px 'Segoe UI',sans-serif; letter-spacing: 1px; }.footer-end { margin-left: auto; letter-spacing: .6px; }.footer-end span { margin-left: 15px; color: #c49d72; font-size: 17px; }
.copy-status { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #654e48; color: #fffaf3; border-radius: 12px; padding: 12px 20px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; }.copy-status.visible { opacity: 1; }.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; background: white; padding: 10px 20px; }.skip-link:focus { top: 12px; }
@media(min-width:1400px) { .hero { min-height: 585px; } }
@media(max-width:1000px) { .site-shell { padding: 0 28px; }.hero { grid-template-columns: 1.1fr 1fr; }.hero-art { transform: scale(.85); transform-origin: center right; margin-left: -55px; }.hero-copy { z-index: 4; }.nav nav { gap: 24px; }.feature { padding: 21px 18px; }.feature-number { right: 18px; font-size: 8px; }.feature h3 { font-size: 14px; }.address { gap: 20px; } }
@media(max-width:720px) { .site-shell { padding: 0 22px; }.nav { height: 85px; gap: 10px; }.brand { font-size: 29px; gap: 8px; }.brand img { width: 35px; height: 35px; }.brand-api { font-size: 10px; }.nav nav { display: none; }.nav-login { font-size: 12px; padding: 10px 12px; }.hero { grid-template-columns: 1fr; padding: 32px 0; gap: 8px; }.hero-copy { text-align: center; }h1 { font-size: clamp(34px,8vw,46px); margin-top: 22px; }.eyebrow { font-size: 8px; letter-spacing: 1.2px; }.hero-description { font-size: 13px; }.hero-actions,.hero-note { justify-content: center; }.button { font-size: 12px; padding: 12px 15px; gap: 13px; }.hero-art { width: 370px; height: 390px; max-width: 100%; margin: -8px auto -28px; transform: scale(.88); transform-origin: center; }.mascot-yellow { right: -1px; }.mascot-pink { left: 5px; }.art-orbit { width: 310px; height: 315px; top: 50px; }.note-top { left: 0; }.note-bottom { right: -4px; bottom: 2px; }.spark-one { right: 15px; }.spark-two { left: -15px; bottom: 31px; }.spark-three { right: -13px; }.art-caption { display: none; }.connection { flex-direction: column; align-items: stretch; gap: 17px; padding: 19px; }.connection-label { gap: 12px; }.address { justify-content: space-between; gap: 10px; padding-left: 11px; }.address code { font-size: 11px; }.features { padding-top: 35px; }.section-heading { display: block; }.section-heading h2 { font-size: 16px; margin-bottom: 9px; }.section-heading > span { font-size: 8px; }.feature-grid { grid-template-columns: 1fr; gap: 13px; }.feature { padding: 23px; }.feature h3 { font-size: 17px; margin-top: 19px; }.feature p { font-size: 13px; }.feature-number { right: 24px; font-size: 10px; }.feature-link { font-size: 12px; }.closing { flex-wrap: wrap; padding: 22px; gap: 15px; }.closing-flower { font-size: 34px; }.closing h2 { font-size: 15px; }.closing p { font-size: 11px; }.closing .button { margin-left: 49px; }.footer { flex-wrap: wrap; gap: 10px 15px; }.footer > span:not(.footer-end) { font-size: 9px; }.footer-end { width: 100%; margin-left: 0; font-size: 9px; } }
.hero > * { min-width: 0; }
.hero { overflow-x: clip; }
@media(max-width:720px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .nav { flex-wrap: wrap; height: auto; padding: 19px 0 12px; row-gap: 17px; }
  .nav nav { display: flex; order: 3; width: 100%; justify-content: center; gap: 32px; font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }