@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap'); /* Gensou AI — base rules. * Page-level resets, fonts and colours all come from the pages' own * (carried over verbatim from the design handoff). Only two things live here: * the image frames that replace the prototype's , and the * visibility switch the runtime uses for conditional blocks. */ /* Conditional blocks (`sc-if`). !important so it beats the inline `display:flex` / `display:block` the markup sets on those elements. */ [data-dc-hidden] { display: none !important; } [data-gensou-notice] { position: fixed; z-index: 1000; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); box-sizing: border-box; padding: 13px 15px; border: 1px solid rgba(44, 183, 150, 0.42); border-radius: 8px; background: #141417; color: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); font: 500 13px/1.7 'Noto Sans JP', sans-serif; opacity: 0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; } [data-gensou-notice][data-tone='error'] { border-color: rgba(255, 166, 158, 0.48); } [data-gensou-notice][data-visible='true'] { opacity: 1; transform: translateY(0); } /* Image frames. Same box the prototype's placeholder occupied: fills its container, falls back to 3/2 when the container height is indefinite. Drop a real file in by putting its path in src/images.json under the slot id — it renders as a plain with object-fit:cover. */ .img-slot { display: block; position: relative; width: 100%; height: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(127, 127, 127, 0.08); } .img-slot > img, .img-slot > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .img-slot > video { background: #0b0b0d; } .media-label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: clamp(16px, 2vw, 26px); color: #fff; text-align: left; text-shadow: 0 3px 24px rgba(0, 0, 0, 0.78); background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 36%, rgba(0, 0, 0, 0.72)); pointer-events: none; } .media-label strong { font: 600 clamp(22px, 2.8vw, 44px)/0.95 'Manrope', 'Noto Sans JP', sans-serif; letter-spacing: 0; text-transform: none; } .media-label.is-hero strong { font-size: clamp(44px, 7vw, 110px); } .media-label span { font: 500 10px/1.2 'Manrope', 'Noto Sans JP', sans-serif; letter-spacing: 0; opacity: 0.82; } .theme-toggle { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 9px; background: transparent; color: #141417; cursor: pointer; } .language-switch { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 3px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; background: rgba(0, 0, 0, 0.04); } .language-switch button { min-width: 58px; height: 28px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #6b6b72; font: 700 11px/1 'Noto Sans JP', sans-serif; cursor: pointer; } .language-switch button[aria-pressed='true'] { background: #fff; color: #141417; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } html[data-theme='dark'] .language-switch { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); } html[data-theme='dark'] .language-switch button { color: #a9a9b0; } html[data-theme='dark'] .language-switch button[aria-pressed='true'] { background: #303035; color: #fff; } .theme-toggle::before { content: '☾'; font: 600 18px/1 system-ui, sans-serif; } html[data-theme='dark'] .theme-toggle { border-color: rgba(255, 255, 255, 0.18); color: #fff; } html[data-theme='dark'] .theme-toggle::before { content: '☼'; } html[data-theme='dark'] .site-nav-logo { filter: brightness(0) invert(1); background: transparent !important; } html[data-theme='dark'] .site-nav-search, html[data-theme='dark'] .site-nav-drawer-toggle, html[data-theme='dark'] .site-nav-login { border-color: rgba(255, 255, 255, 0.28) !important; color: #fff !important; } html[data-theme='dark'] .site-nav-search > span:first-child { border-color: #fff !important; } html[data-theme='dark'] .site-nav-drawer-toggle > span { background: #fff !important; } .nav-menu-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; box-sizing: border-box; border-radius: 7px; } .nav-menu-icon--feature { border: 1px solid rgba(44, 183, 150, 0.24); background: rgba(44, 183, 150, 0.13); color: #0f766e; } .nav-menu-icon--feature svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .nav-menu-icon--model { border: 1px solid rgba(0, 0, 0, 0.09); background: #fff; } .nav-menu-icon--model img { display: block; width: 17px; height: 17px; object-fit: contain; } html[data-theme='dark'] .nav-menu-icon--feature { border-color: rgba(44, 183, 150, 0.3); background: rgba(44, 183, 150, 0.12); color: #63d6bb; } html[data-theme='dark'] .nav-menu-icon--model { border-color: rgba(255, 255, 255, 0.12); background: #f6f6f7; } @media (max-width: 700px) { .site-nav-primary { gap: 10px !important; padding-inline: 14px !important; } .site-nav-pricing, .site-nav-start, .site-nav-assets, .site-nav-credit { display: none !important; } .site-nav-login { padding-inline: 12px !important; } .language-switch button { min-width: 34px; padding-inline: 6px; font-size: 0; } .language-switch button[data-language-option='en']::after { content: 'EN'; font-size: 10px; } .language-switch button[data-language-option='ja']::after { content: 'JA'; font-size: 10px; } } html[data-theme='dark'] body, html[data-theme='dark'] body > div { background: #0b0b0d !important; color: #f5f5f7 !important; } html[data-theme='dark'] body [style*="background:#FFFFFF"] { background: #18181b !important; } html[data-theme='dark'] body [style*="background:#F4F4F5"] { background: #131315 !important; } html[data-theme='dark'] body [style*="background:#F0F0F1"] { background: #202024 !important; } html[data-theme='dark'] body [style*="background:#F7F7F8"] { background: #111113 !important; } html[data-theme='dark'] body [style*="background:rgba(255,255,255"] { background: rgba(24, 24, 27, 0.94) !important; } html[data-theme='dark'] body [style*="background:linear-gradient(180deg,rgba(255,255,255"] { background: linear-gradient( 180deg, rgba(11, 11, 13, 0.5), rgba(11, 11, 13, 0.16) 40%, rgba(11, 11, 13, 0.94) ) !important; } html[data-theme='dark'] body [style*="color:#141417"] { color: #f5f5f7 !important; } html[data-theme='dark'] body [style*="color:#3A3A3D"] { color: #d0d0d4 !important; } html[data-theme='dark'] body [style*="color:#6B6B72"] { color: #8e8e96 !important; } html[data-theme='dark'] body [style*="border:1px solid rgba(0,0,0"] { border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme='dark'] .pricing-page .pricing-plan-card { background: #18181b !important; color: #f5f5f7 !important; } html[data-theme='dark'] .pricing-page .pricing-hero-cta { background: #fff !important; color: #141417 !important; } html[data-theme='dark'] .pricing-page .pricing-segment-option { color: #f5f5f7 !important; } html[data-theme='dark'] .pricing-page .pricing-segment-option[style*="background:#E7E7E9"] { background: #34343a !important; } html[data-theme='dark'] .studio-page aside { border-color: rgba(255, 255, 255, 0.08) !important; } .studio-page .media-label.is-hero { inset: 72px auto auto 24px; width: min(300px, 30%); height: auto; padding: 0; justify-content: flex-start; background: none; } .studio-page .media-label.is-hero strong { font-size: clamp(30px, 4vw, 52px); line-height: 0.92; } @media (max-width: 700px) { .studio-page .media-label.is-hero { display: none; } } .img-slot::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1.5px dashed currentColor; opacity: 0.35; } .img-slot.is-filled::after { display: none; } .img-slot-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 12px; text-align: center; font: 13px/1.3 system-ui, -apple-system, sans-serif; color: inherit; } .img-slot-empty svg { opacity: 0.45; } .img-slot-empty .cap { max-width: 90%; font-weight: 500; letter-spacing: 0.01em; opacity: 0.75; } .account-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; } .account-summary-item { min-width: 0; padding: 14px 16px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: #f7f7f8; } .account-summary-item span, .account-history-body span { display: block; color: #6b6b72; font-size: 11.5px; } .account-summary-item strong { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 15px; } .account-history { margin-top: 20px; } .account-history[hidden] { display: none; } .account-media-tab { min-height: 38px; padding: 0 15px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 7px; background: #fff; color: #303035; font: 700 12.5px/1 'Noto Sans JP', sans-serif; cursor: pointer; } .account-media-tab.is-active { border-color: rgba(44, 183, 150, 0.55); background: rgba(44, 183, 150, 0.16); color: #145f4e; } .account-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .account-history-card { min-width: 0; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: #fff; } .account-history-media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #111113; color: #8e8e96; font-size: 12px; } button.account-history-media { padding: 0; border: 0; cursor: zoom-in; } .account-history-media video, .account-history-media img { width: 100%; height: 100%; object-fit: cover; } .account-history-play { position: absolute; inset: 50% auto auto 50%; display: grid; width: 52px; height: 52px; place-items: center; padding: 0; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: rgba(10, 10, 12, 0.76); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); cursor: pointer; transition: transform 160ms ease, background-color 160ms ease; } .account-history-play:hover, .account-history-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: #128a6f; outline: none; } .account-history-play span { width: 0; height: 0; margin-left: 4px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #fff; } .history-video-player { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; box-sizing: border-box; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: rgba(8, 8, 10, 0.9); backdrop-filter: blur(8px); } .history-video-player__panel { position: relative; width: min(960px, 100%); max-height: calc(100dvh - 40px); } .history-video-player__panel video { display: block; width: 100%; max-height: calc(100dvh - 40px); border-radius: 8px; background: #000; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); object-fit: contain; } .history-video-player__close { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(20, 20, 23, 0.82); color: #fff; font-size: 27px; line-height: 38px; cursor: pointer; } @media (max-width: 700px) { .account-history-play { width: 48px; height: 48px; } .history-video-player { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); } .history-video-player__panel, .history-video-player__panel video { max-height: calc(100dvh - 24px); } } .account-history-body { position: relative; padding: 13px 14px 14px; } .account-history-body strong { display: -webkit-box; min-height: 2.9em; overflow: hidden; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .account-history-body > span { margin-top: 7px; } .account-history-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .account-history-action { min-height: 32px; padding: 0 10px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; background: #f7f7f8; color: #303035; font: 700 11px/1 'Noto Sans JP', sans-serif; cursor: pointer; } .account-history-action:hover { border-color: rgba(44, 183, 150, 0.65); background: #effaf7; } .account-history-action:disabled { cursor: wait; opacity: 0.6; } .account-history-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; } .account-history-pagination > span { min-width: 150px; color: #5f5f66; font: 700 12px/1.4 'Noto Sans JP', sans-serif; text-align: center; } [data-custom-workspace] select { background-color: transparent !important; color: #141417 !important; -webkit-text-fill-color: #141417 !important; opacity: 1 !important; color-scheme: light; } [data-custom-workspace] select option { background-color: #fff; color: #141417; -webkit-text-fill-color: #141417; } html[data-theme='dark'] [data-custom-workspace] select { background-color: transparent !important; color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; color-scheme: dark; } html[data-theme='dark'] [data-custom-workspace] select option { background-color: #242428; color: #f5f5f7; -webkit-text-fill-color: #f5f5f7; } .account-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .account-api-keys { margin: 18px 0 24px; } .account-api-panel { overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: #fff; color: #141417; } .account-api-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .account-api-kicker { display: block; margin-bottom: 6px; color: #128a6f; font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .1em; } .account-api-header h2 { margin: 0; font: 900 19px 'Zen Kaku Gothic New', sans-serif; letter-spacing: 0; } .account-api-header p { margin: 5px 0 0; color: #6b6b72; font-size: 12px; line-height: 1.65; } .account-api-header > a { flex: 0 0 auto; color: #128a6f; font-size: 12px; font-weight: 700; text-decoration: none; } .account-api-loading, .account-api-empty { margin: 0; padding: 18px 20px; color: #6b6b72; font-size: 12px; } .account-api-loading[data-tone='error'] { color: #b42318; } .account-api-form { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(280px, 1fr); align-items: center; gap: 20px; padding: 18px 20px; } .account-api-form strong, .account-api-form span { display: block; } .account-api-form strong { font-size: 13px; } .account-api-form span { margin-top: 4px; color: #6b6b72; font-size: 11px; line-height: 1.55; } .account-api-form-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .account-api-form input { width: 100%; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 11px; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 6px; background: #fff; color: #141417; font: 500 12px 'Noto Sans JP', sans-serif; } .account-api-button { min-height: 40px; padding: 0 13px; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 6px; background: #fff; color: #141417; font: 700 12px 'Noto Sans JP', sans-serif; cursor: pointer; white-space: nowrap; } .account-api-button--primary { border-color: #141417; background: #141417; color: #fff; } .account-api-button--danger { min-height: 32px; color: #b42318; } .account-api-button:disabled { cursor: default; opacity: .5; } .account-api-message { margin: -4px 20px 16px; color: #6b6b72; font-size: 11px; } .account-api-message:empty { display: none; } .account-api-message[data-tone='warning'] { color: #8a5b08; } .account-api-message[data-tone='error'] { color: #b42318; } .account-api-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; margin: 0 20px 18px; padding: 14px; border: 1px solid rgba(44, 183, 150, .5); border-radius: 7px; background: #effaf7; } .account-api-secret[hidden] { display: none; } .account-api-secret > strong, .account-api-secret > span { grid-column: 1 / -1; } .account-api-secret > strong { font-size: 13px; } .account-api-secret > span { color: #4f625d; font-size: 11px; } .account-api-secret code { min-width: 0; overflow-wrap: anywhere; font: 700 12px/1.7 'IBM Plex Mono', monospace; user-select: all; } .account-api-existing { border-top: 1px solid rgba(0, 0, 0, .08); } .account-api-existing > summary { padding: 15px 20px; font-size: 12px; font-weight: 700; cursor: pointer; } .account-api-list { border-top: 1px solid rgba(0, 0, 0, .08); } .account-api-row { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) auto; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid rgba(0, 0, 0, .06); } .account-api-row:last-child { border-bottom: 0; } .account-api-row > div:first-child { min-width: 0; } .account-api-row strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .account-api-row code { display: block; margin-top: 4px; color: #6b6b72; font: 500 10px 'IBM Plex Mono', monospace; overflow-wrap: anywhere; } .account-api-row-stats { color: #6b6b72; font-size: 10.5px; line-height: 1.55; } .account-api-row[data-revoked='true'] { opacity: .56; } .account-api-revoked { color: #6b6b72; font-size: 10px; font-weight: 700; } .account-feature-list { grid-column: 1 / -1; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: #fff; } .account-feature-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .account-feature-row:last-child { border-bottom: 0; } .account-feature-row strong { display: block; font-size: 14px; } .account-feature-row p { margin: 4px 0 0; color: #6b6b72; font-size: 12px; line-height: 1.6; } .account-feature-action, .account-inline-form button, .owner-templates__head button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 7px; background: #fff; color: #141417; font: 700 12px 'Noto Sans JP', sans-serif; cursor: pointer; } .account-feature-action:disabled { cursor: default; opacity: .55; } .account-inline-form { display: flex; gap: 7px; margin-top: 10px; } .account-inline-form[hidden] { display: none; } .account-inline-form input { min-width: 0; flex: 1; height: 34px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.12); border-radius: 7px; padding: 0 10px; } .account-notice-list { margin-top: 12px; border-top: 1px solid rgba(0,0,0,.08); } .account-notice-list[hidden] { display: none; } .account-notice-list article { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); } .account-notice-list article strong { font-size: 12px; } .account-notice-list article p { white-space: pre-wrap; } .promo-banner { display: flex; min-height: 46px; box-sizing: border-box; align-items: center; gap: 14px; padding: 7px clamp(14px, 2.2vw, 28px); background: #dfff38; color: #101212; font-size: 13px; border-bottom: 1px solid rgba(0, 0, 0, 0.14); } .promo-banner[hidden] { display: none; } .promo-banner__badge { padding: 5px 9px; border-radius: 5px; background: #0b0b0d; color: #fff; font: 700 10px 'IBM Plex Mono', monospace; white-space: nowrap; } .promo-banner strong { font-size: 14px; } .promo-banner > span:not(.promo-banner__badge) { flex: 1; color: #303024; } .promo-banner a { padding: 8px 14px; border-radius: 6px; background: #0b0b0d; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; } .promo-banner button { width: 32px; height: 32px; border: 0; background: transparent; color: #0b0b0d; font-size: 22px; cursor: pointer; } .pricing-campaign { display: grid; grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr); gap: clamp(28px, 4vw, 68px); align-items: center; max-width: 1440px; margin: 34px auto 0; padding: 54px clamp(24px, 4vw, 70px) 44px; overflow: hidden; border-top: 1px solid #d9dcda; border-bottom: 1px solid #d9dcda; background: #f4f6f4; color: #141417; } .pricing-campaign__eyebrow { color: #167d68; font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .12em; } .pricing-campaign h1 { max-width: 650px; margin: 18px 0 0; color: #141417; font: 900 clamp(38px, 4vw, 56px)/1.05 'Zen Kaku Gothic New', sans-serif; letter-spacing: 0; } .pricing-campaign h1 em { display: block; color: #141417; font-style: normal; } .pricing-campaign p { max-width: 560px; margin: 22px 0 0; color: #5f6361; font-size: 14px; line-height: 1.85; } .pricing-campaign__notes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 25px; color: #5f6361; font-size: 11px; } .pricing-campaign__notes span { display: inline-flex; align-items: center; gap: 7px; } .pricing-campaign__notes b { color: #167d68; font: 800 11px 'IBM Plex Mono', monospace; } .pricing-showcase { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2, 175px); gap: 10px; min-width: 0; } .pricing-showcase__item { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(20,20,23,.12); background: #dfe3e0; } .pricing-showcase__item--wide { grid-row: 1 / 3; } .pricing-showcase__item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; } .pricing-showcase__item:hover img { transform: scale(1.025); } .pricing-showcase__item figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; padding: 9px 11px; background: rgba(11,13,12,.78); color: #fff; font: 700 9px 'IBM Plex Mono', monospace; letter-spacing: .08em; } .pricing-showcase__item figcaption span { color: #8be0ca; } .pricing-plans { max-width: 1440px !important; } .pricing-plans__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; } .pricing-section-index { display: block; margin-bottom: 12px; color: #8a8b90; font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .12em; } .pricing-plans__head h2 { max-width: 760px; font-size: clamp(30px, 3.8vw, 52px) !important; line-height: 1.12; } .pricing-billing-switch { display: inline-grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(0,0,0,.1); background: #fff; cursor: pointer; } .pricing-billing-switch__option { min-width: 64px; padding: 8px 12px; text-align: center; font-size: 12px; font-weight: 800; transition: background .2s ease, color .2s ease; } .pricing-billing-switch b { padding: 0 8px 0 5px; color: #dc263e; font: 800 10px 'IBM Plex Mono', monospace; } .pricing-plans__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch; gap: 0 !important; border-top: 1px solid #d8dbd9; border-left: 1px solid #d8dbd9; } .pricing-plan-card { position: relative; min-width: 0; border: 0 !important; border-right: 1px solid #d8dbd9 !important; border-bottom: 1px solid #d8dbd9 !important; border-radius: 0 !important; padding: 24px !important; background: #fff !important; box-shadow: none !important; } .pricing-plan-card--recommended { z-index: 1; margin: -8px 0; padding-top: 32px !important; border: 2px solid #159b7e !important; background: #f2f8f5 !important; box-shadow: 0 18px 38px rgba(20,86,71,.11) !important; } .pricing-plan-card__ribbon { margin: -32px -24px 21px; padding: 8px 12px; background: #159b7e; color: #fff; font-size: 10px; font-weight: 900; text-align: left; letter-spacing: .04em; } .pricing-plan-name { font: 900 21px 'Archivo', 'Noto Sans JP', sans-serif !important; } .pricing-credit-panel { min-height: 118px; border: 0 !important; border-top: 1px solid rgba(0,0,0,.09) !important; border-bottom: 1px solid rgba(0,0,0,.09) !important; border-radius: 0 !important; background: transparent !important; padding: 16px 0 !important; } .pricing-price-block { margin-top: 20px; } .pricing-regular-price { min-height: 22px; color: #8a8b90; font: 700 14px 'Archivo', sans-serif; text-decoration: line-through; text-decoration-thickness: 2px; } .pricing-sale-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .pricing-sale-price { color: #dc263e; font: 800 clamp(29px, 2.3vw, 36px) 'Archivo', sans-serif; } .pricing-sale-period { color: #6b6b72; font-size: 12px; } .pricing-equivalent { min-height: 20px; margin-top: 5px; color: #128a6f; font-size: 11.5px; font-weight: 700; } .pricing-discount-line { display: flex; align-items: center; gap: 8px; min-height: 25px; margin-top: 10px; } .pricing-discount-badge { padding: 3px 7px; border-radius: 2px; background: #ffe5e9; color: #d71939; font: 800 10px 'IBM Plex Mono', monospace; white-space: nowrap; } .pricing-plan-card > a[data-dc-on] { border-radius: 3px !important; } .pricing-plan-card .pricing-legacy-details { border-radius: 0 !important; background: transparent !important; } .pricing-plan-card:last-child { background: #171918 !important; color: #fff; } .pricing-page[data-pricing-ready='true'] .pricing-plan-card { animation: pricing-card-in .42s ease both; } .pricing-page[data-pricing-ready='true'] .pricing-plan-card:nth-child(2) { animation-delay: .04s; } .pricing-page[data-pricing-ready='true'] .pricing-plan-card:nth-child(3) { animation-delay: .08s; } .pricing-page[data-pricing-ready='true'] .pricing-plan-card:nth-child(4) { animation-delay: .12s; } @keyframes pricing-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 980px) { .pricing-campaign { grid-template-columns: 1fr; margin-top: 20px; padding: 38px 24px 28px; } .pricing-showcase { grid-template-rows: repeat(2, 145px); } } @media (max-width: 640px) { .pricing-campaign { margin-inline: 0; padding: 32px 16px 22px; } .pricing-campaign h1 { font-size: 38px; } .pricing-showcase { grid-template-columns: 1.1fr .9fr; grid-template-rows: repeat(2, 105px); } .pricing-plans__grid { border-left: 0; } .pricing-plan-card { border-left: 1px solid #d8dbd9 !important; } .pricing-plan-card--recommended { margin: 8px 0; } .pricing-billing-switch { width: 100%; grid-template-columns: 1fr 1fr auto; } } html[data-theme='dark'] .pricing-page { background: #101112 !important; color: #f6f7f7 !important; } html[data-theme='dark'] .pricing-plan-card { background: #181a1b !important; border-color: rgba(255,255,255,.12) !important; color: #f6f7f7 !important; } html[data-theme='dark'] .pricing-credit-panel, html[data-theme='dark'] .pricing-plan-card .pricing-legacy-details { background: #222526 !important; border-color: rgba(255,255,255,.1) !important; } .owner-templates { margin-top: 18px; } .owner-templates__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .owner-templates__head strong { display: block; font-size: 14px; } .owner-templates__head span { display: block; margin-top: 4px; color: #6b6b72; font-size: 11px; } .owner-templates__rail { display: grid; grid-auto-columns: minmax(190px, 23%); grid-auto-flow: column; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .owner-templates__loading { min-height: 120px; display: grid; place-items: center; color: #6b6b72; font-size: 12px; } .owner-template-region-editor{display:grid;grid-template-columns:minmax(260px,430px) minmax(220px,1fr);gap:14px;margin-top:12px;padding:12px;border:1px solid rgba(0,0,0,.09);border-radius:8px;background:#f7f7f8} .owner-template-region-stage{position:relative;min-height:220px;border-radius:7px;overflow:hidden;background:#111} .owner-template-region-stage video{display:block;width:100%;height:100%;min-height:220px;max-height:360px;object-fit:contain} .owner-template-region-overlay{position:absolute;inset:0;touch-action:none;pointer-events:none} .owner-template-region-overlay[data-drawing='true']{pointer-events:auto;cursor:crosshair;background:rgba(0,0,0,.03)} .owner-template-region-mark{position:absolute;display:grid;place-items:center;box-sizing:border-box;border:2px solid #2cb796;background:rgba(44,183,150,.2);color:#fff;font:900 12px 'IBM Plex Mono',monospace;text-shadow:0 1px 3px #000;pointer-events:none} .owner-template-region-side{display:grid;align-content:start;gap:9px} .owner-template-region-side>strong{font-size:13px}.owner-template-region-side>p{margin:0;color:#6b6b72;font-size:11px;line-height:1.65} .owner-template-region-side>button{width:fit-content;border:0;border-radius:7px;padding:8px 11px;background:#2cb796;color:#06241d;font-weight:800;cursor:pointer}.owner-template-region-side>button:disabled{opacity:.55;cursor:default} .owner-template-region-list{display:grid;gap:6px}.owner-template-region-list label{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:5px}.owner-template-region-list input{min-width:0;border:1px solid rgba(0,0,0,.1);border-radius:6px;padding:7px;font:500 11px 'Noto Sans JP',sans-serif}.owner-template-region-list button{border:0;background:transparent;color:#b42318;font-size:10px;font-weight:800;cursor:pointer} .owner-template-face-editor .owner-template-region-stage video{aspect-ratio:9/16;max-height:420px}.owner-template-face-editor .owner-template-region-side{align-content:center}.owner-template-face-editor .owner-template-region-side>strong{font-size:16px}.owner-template-face-editor .owner-template-region-side>p{max-width:42ch;font-size:12px} .owner-template { display: block; overflow: hidden; padding: 0; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background: #fff; color: #141417; text-align: left; cursor: pointer; scroll-snap-align: start; } .owner-template video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; object-fit: cover; } .owner-template--portrait video { aspect-ratio: 9 / 16; object-fit: cover; } .owner-template > span { display: block; padding: 9px 10px; } .owner-template strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .owner-template small { display: block; margin-top: 3px; color: #6b6b72; } .owner-template--selected { border-color: #2cb796; box-shadow: inset 0 0 0 1px #2cb796; } .dance-maker-entry { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; background: #f7f7f8; } .dance-maker-entry strong { display: block; font-size: 14px; } .dance-maker-entry span { display: block; margin-top: 4px; color: #6b6b72; font-size: 11px; } .dance-maker-entry a { flex: 0 0 auto; min-height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 7px; background: #2cb796; color: #06241d; font-size: 13px; font-weight: 900; text-decoration: none; } @media (max-width: 640px) { .dance-maker-entry { align-items: stretch; flex-direction: column; } .dance-maker-entry a { width: 100%; } } html[data-theme='dark'] .account-feature-list, html[data-theme='dark'] .owner-template { border-color: rgba(255,255,255,.1); background: #18181b; color: #f5f5f7; } html[data-theme='dark'] .dance-maker-entry { border-color: rgba(255,255,255,.1); background: #18181b; color: #f5f5f7; } html[data-theme='dark'] .account-feature-row, html[data-theme='dark'] .account-notice-list, html[data-theme='dark'] .account-notice-list article { border-color: rgba(255,255,255,.1); } html[data-theme='dark'] .account-feature-action, html[data-theme='dark'] .account-inline-form input, html[data-theme='dark'] .account-inline-form button, html[data-theme='dark'] .owner-templates__head button { border-color: rgba(255,255,255,.14); background: #222226; color: #f5f5f7; } .account-tool-card { min-width: 0; padding: 18px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: #fff; } .account-tool-card > strong { display: block; font-size: 15px; } .account-tool-card > p { margin: 7px 0 14px; color: #6b6b72; font-size: 12px; line-height: 1.7; } .account-tool-card > input { width: 100%; min-height: 40px; box-sizing: border-box; margin-top: 10px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 7px; background: #fff; color: #141417; font: 700 13px 'IBM Plex Mono', monospace; } .account-tool-presets { display: flex; flex-wrap: wrap; gap: 6px; } .account-tool-total { margin-top: 12px; font: 700 13px 'IBM Plex Mono', monospace; } .account-tool-primary { width: 100%; min-height: 42px; margin-top: 12px; border: 0; border-radius: 7px; background: #141417; color: #fff; font: 700 13px 'Noto Sans JP', sans-serif; cursor: pointer; } .account-tool-primary--line { background: #06c755; color: #fff; } .account-line-result { display: grid; gap: 8px; margin-top: 12px; color: #3a3a3d; font-size: 12px; } .account-line-result code { width: fit-content; padding: 8px 10px; border-radius: 6px; background: #f0f0f1; color: #141417; font: 700 18px 'IBM Plex Mono', monospace; letter-spacing: 0.06em; user-select: all; } .account-line-result a { width: fit-content; color: #078c3c; font-weight: 700; } .reference-dropzone { display: grid; min-height: 118px; place-content: center; gap: 5px; box-sizing: border-box; padding: 16px 12px; border: 1px dashed rgba(44, 183, 150, 0.65); border-radius: 8px; background: rgba(44, 183, 150, 0.05); color: #3a3a3d; text-align: center; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; } .reference-dropzone:hover, .reference-dropzone-active .reference-dropzone { border-color: #128a6f; background: rgba(44, 183, 150, 0.13); } .reference-dropzone strong { color: #141417; font-size: 12.5px; } .reference-section-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6b6b72;padding:0 4px 8px} .reference-dropzone--compact{min-height:72px;padding:10px 12px} .reference-thumb{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#fff} .reference-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in} .reference-thumb button,.reference-file-list button{position:absolute;top:5px;right:5px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(20,20,23,.82);color:#fff;font-size:15px;line-height:24px;cursor:pointer} .reference-preview-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));box-sizing:border-box;background:rgba(8,8,10,.9);backdrop-filter:blur(8px);cursor:zoom-out} .reference-preview-modal>img{display:block;max-width:min(1100px,100%);max-height:calc(100dvh - 40px);width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 24px 80px rgba(0,0,0,.45)} .reference-preview-close{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(20,20,23,.78);color:#fff;font-size:28px;line-height:40px;cursor:pointer} .reference-file-list{display:grid;gap:6px;margin-top:8px} .reference-file-list>div{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 26px;align-items:center;gap:8px;min-height:46px;padding:4px 5px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:#fff;overflow:hidden} .reference-file-list video{width:54px;height:38px;object-fit:cover;border-radius:5px;background:#111} .reference-file-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#3a3a3d} .reference-file-list button{position:relative;inset:auto} .reference-file-list--audio>div{grid-template-columns:minmax(0,1fr) 26px} .generation-count{display:inline-grid;grid-template-columns:30px 52px 30px;align-items:center;height:32px;border:1px solid rgba(0,0,0,.09);border-radius:8px;overflow:hidden;background:#fff} .generation-count button{height:100%;border:0;background:rgba(0,0,0,.04);font-size:16px;cursor:pointer} .generation-count strong{text-align:center;font:700 11px 'IBM Plex Mono',monospace} .reference-dropzone span, .reference-dropzone small { color: #6b6b72; font-size: 10.5px; line-height: 1.5; } .saved-reference-library { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; background: rgba(255, 255, 255, 0.72); } .saved-reference-heading { display: grid; gap: 2px; } .saved-reference-heading strong { color: #141417; font-size: 11.5px; } .saved-reference-heading span, .saved-reference-empty { color: #6b6b72; font-size: 10px; line-height: 1.5; } .saved-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: 176px; overflow-y: auto; } .saved-reference-item { position: relative; aspect-ratio: 1 / 1; min-width: 0; } .saved-reference-use { width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 7px; background: #fff; cursor: pointer; } .saved-reference-use:hover { border-color: #2cb796; box-shadow: inset 0 0 0 1px #2cb796; } .saved-reference-use img { width: 100%; height: 100%; object-fit: cover; } .saved-reference-delete { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 23, 0.82); color: #fff; font-size: 13px; line-height: 20px; cursor: pointer; } html[data-theme='dark'] .reference-dropzone { border-color: rgba(70, 210, 177, 0.55); background: rgba(44, 183, 150, 0.08); } html[data-theme='dark'] .reference-dropzone strong { color: #f5f5f7; } html[data-theme='dark'] .saved-reference-library, html[data-theme='dark'] .saved-reference-use { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); } html[data-theme='dark'] .saved-reference-heading strong { color: #f5f5f7; } .account-status { width: fit-content; padding: 3px 7px; border-radius: 999px; background: rgba(44, 183, 150, 0.14); color: #128a6f !important; } .account-status--failed { background: rgba(180, 35, 24, 0.12); color: #b42318 !important; } .account-state { display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #6b6b72; } .account-state strong { color: #141417; font-size: 15px; } .account-state span { max-width: 440px; font-size: 13px; line-height: 1.7; } .account-action { margin-top: 10px; padding: 10px 18px; border: 0; border-radius: 8px; background: #2cb796; color: #06241d; font: 700 13px/1 'Noto Sans JP', sans-serif; cursor: pointer; } .account-avatar { display: grid; width: 92px; height: 92px; place-items: center; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: #2cb796; color: #06241d; font: 900 30px/1 'Zen Kaku Gothic New', sans-serif; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } html[data-theme='dark'] .account-summary-item, html[data-theme='dark'] .account-history-card, html[data-theme='dark'] .account-tool-card, html[data-theme='dark'] .account-api-panel { border-color: rgba(255, 255, 255, 0.1); background: #18181b; } html[data-theme='dark'] .account-api-header, html[data-theme='dark'] .account-api-existing, html[data-theme='dark'] .account-api-list, html[data-theme='dark'] .account-api-row { border-color: rgba(255,255,255,.1); } html[data-theme='dark'] .account-api-form input, html[data-theme='dark'] .account-api-button { border-color: rgba(255,255,255,.14); background: #222226; color: #f5f5f7; } html[data-theme='dark'] .account-api-button--primary { background: #f5f5f7; color: #141417; } html[data-theme='dark'] .account-api-secret { border-color: rgba(44,183,150,.5); background: rgba(44,183,150,.12); } html[data-theme='dark'] .account-history-actions { border-color: rgba(255, 255, 255, 0.1); } html[data-theme='dark'] .account-history-action, html[data-theme='dark'] .account-tool-card > input, html[data-theme='dark'] .account-media-tab { border-color: rgba(255, 255, 255, 0.12); background: #222226; color: #f5f5f7; } html[data-theme='dark'] .account-media-tab.is-active { border-color: rgba(44, 183, 150, 0.55); background: rgba(44, 183, 150, 0.2); color: #8be0ca; } html[data-theme='dark'] .account-line-result, html[data-theme='dark'] .account-line-result code { color: #f5f5f7; } html[data-theme='dark'] .account-line-result code { background: #222226; } html[data-theme='dark'] .account-state strong { color: #f5f5f7; } html[data-theme='dark'] .account-avatar { border-color: #0b0b0d; } @media (max-width: 700px) { .owner-template-region-editor{grid-template-columns:1fr} .account-summary { grid-template-columns: 1fr; } .account-history-grid { grid-template-columns: 1fr; } .account-tools { grid-template-columns: 1fr; } .account-api-header, .account-api-form { grid-template-columns: 1fr; } .account-api-header { flex-direction: column; } .account-api-form-controls { grid-template-columns: 1fr; } .account-api-row { grid-template-columns: minmax(0, 1fr) auto; } .account-api-row-stats { grid-column: 1 / -1; grid-row: 2; } .account-api-secret { grid-template-columns: 1fr; } .account-api-secret > * { grid-column: 1 !important; } .promo-banner { flex-wrap: wrap; gap: 8px 10px; } .promo-banner { position: relative; } .promo-banner > span:not(.promo-banner__badge) { order: 5; flex-basis: 100%; padding-right: 26px; font-size: 11px; } .promo-banner a { margin-left: auto; } .promo-banner button { position: absolute; right: 7px; bottom: 4px; width: 24px; height: 24px; font-size: 18px; } .account-feature-row { gap: 10px; padding: 14px; } .owner-templates__rail { grid-auto-columns: 74%; } } @media (max-width: 1120px) { .pricing-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { .pricing-campaign { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px; } .pricing-campaign h1 { font-size: clamp(28px, 9vw, 40px); } .pricing-plans__head { display: block; } .pricing-plans__grid { grid-template-columns: 1fr !important; } .pricing-plan-card { padding: 18px !important; } .pricing-plan-card__ribbon { margin: -18px -18px 16px; } } .preview-generation-close { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: #3a3a3d; font: 500 19px/1 system-ui, sans-serif; cursor: pointer; } [data-preview-generation] { position: fixed; right: 20px; bottom: 20px; z-index: 1200; width: min(390px, calc(100vw - 28px)); box-sizing: border-box; padding: 20px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 60px rgba(6, 36, 29, 0.18); color: #141417; font-family: 'Noto Sans JP', sans-serif; backdrop-filter: blur(18px); } [data-preview-generation][data-tone='error'] { border-color: rgba(180, 35, 24, 0.28); } [data-preview-generation][data-tone='complete'] { border-color: rgba(44, 183, 150, 0.38); } .preview-generation-content { display: grid; gap: 9px; } .preview-generation-job{display:grid;gap:7px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.13)} .preview-generation-job:last-child{border-bottom:0} .preview-generation-percent{font:700 13px 'IBM Plex Mono',monospace;color:inherit} .preview-generation-job>strong{padding-right:32px;font-family:'Zen Kaku Gothic New',sans-serif;font-size:16px;font-weight:900} .preview-generation-job>p{margin:0;color:#6b6b72;font-size:12.5px;line-height:1.7} .preview-generation-kicker { color: #128a6f; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; } .preview-generation-content > strong { padding-right: 32px; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 16px; font-weight: 900; } .preview-generation-content > p { margin: 0; color: #6b6b72; font-size: 12.5px; line-height: 1.7; } .preview-generation-progress { position: relative; display: block; width: 100%; height: 3px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: rgba(44, 183, 150, 0.18); } .preview-generation-progress::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--progress,2%);border-radius:inherit;background:currentColor;transition:width .45s ease} .preview-generation-progress::after { content: ''; display: block; width: 42%; height: 100%; border-radius: inherit; background: #2cb796; animation: preview-generation-loading 1.15s ease-in-out infinite alternate; } .preview-generation-content video { width: 100%; margin-top: 4px; border-radius: 6px; background: #0b0b0d; } .preview-generation-actions { display: flex; gap: 8px; } .preview-generation-actions a { flex: 1 1 0; padding: 9px 10px; border-radius: 6px; background: #141417; color: #fff; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; } .preview-generation-actions a:last-child { background: #2cb796; color: #06241d; } @keyframes preview-generation-loading { from { transform: translateX(0); } to { transform: translateX(138%); } } @media (max-width: 700px) { [data-preview-generation] { right: 14px; bottom: 14px; } } .preview-generation-image{display:block;width:min(100%,560px);max-height:65vh;object-fit:contain;margin-top:14px;border-radius:6px;background:#111} .community-coming-soon{min-height:70vh;display:grid;place-items:center;padding:80px 24px;background:var(--page-bg,#fff);color:var(--text,#111)} .community-coming-soon__inner{width:min(720px,100%);text-align:center} .community-coming-soon__eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:#2cb796;text-transform:uppercase} .community-coming-soon h1{font-size:clamp(36px,6vw,72px);line-height:1.05;margin:18px 0 20px;letter-spacing:0} .community-coming-soon p{font-size:17px;line-height:1.8;color:#6b6f76;margin:0 auto 30px;max-width:620px} .community-coming-soon__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .community-coming-soon__actions a{padding:13px 20px;border:1px solid #d8dcdf;border-radius:6px;color:inherit;text-decoration:none;font-weight:800} .community-coming-soon__actions a:first-child{background:#2cb796;border-color:#2cb796;color:#07140f} .affiliate-app-open{overflow:hidden} .affiliate-app-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:32px;background:rgba(10,14,13,.56);backdrop-filter:blur(4px)} .affiliate-app-modal{position:relative;width:min(620px,calc(100vw - 64px));max-height:calc(100dvh - 64px);overflow:auto;background:#fff;color:#141417;border:1px solid rgba(255,255,255,.45);border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.28)} .affiliate-app-close{position:absolute;z-index:2;top:16px;right:16px;width:42px;height:42px;border:1px solid rgba(0,0,0,.15);border-radius:50%;background:#fff;color:#141417;font-size:28px;line-height:1;cursor:pointer} .affiliate-app-media{position:relative;width:min(220px,100%);aspect-ratio:9/16;margin:0 auto;background:#0b0c0c url('/assets/imported/gensou/videos/poodle-dishwashing-template.jpg') center/cover no-repeat;overflow:hidden} .affiliate-app-video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .12s ease} .affiliate-app-video.is-ready{opacity:1} .affiliate-app-media>span{position:absolute;left:20px;bottom:18px;padding:8px 12px;border-radius:6px;background:#2cb796;color:#06241d;font-size:12px;font-weight:900} .affiliate-app-content{padding:22px 24px 24px} .affiliate-app-kicker{display:block;margin-bottom:18px;color:#128a6f;font:800 12px 'IBM Plex Mono',monospace;letter-spacing:.08em} .affiliate-app-tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(0,0,0,.12);border-radius:7px;overflow:hidden} .affiliate-app-tabs button{min-height:48px;border:0;border-right:1px solid rgba(0,0,0,.1);background:#f5f6f5;color:#68686f;font:700 13px 'Noto Sans JP',sans-serif;cursor:pointer} .affiliate-app-tabs button:last-child{border-right:0} .affiliate-app-tabs button[aria-selected=true]{background:#fff;color:#128a6f;box-shadow:inset 0 -3px #2cb796} .affiliate-app-panel{padding:26px 2px 4px} .affiliate-app-panel h2{margin:0 0 10px;font:900 28px/1.3 'Zen Kaku Gothic New',sans-serif;letter-spacing:0} .affiliate-app-panel p{margin:0;color:#67676e;font-size:14px;line-height:1.8} .affiliate-app-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px} .affiliate-app-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 17px;border-radius:7px;background:#141417;color:#fff;text-decoration:none;font-size:13px;font-weight:800} .affiliate-app-actions a+ a{background:#2cb796;color:#06241d} .affiliate-app-referral{display:block;margin-top:24px;color:#85858b;font-size:11px;text-align:center} @media(max-width:620px){.affiliate-app-overlay{place-items:center;padding:16px}.affiliate-app-modal{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px)}.affiliate-app-media{width:min(150px,100%);aspect-ratio:9/16}.affiliate-app-close{top:10px;right:10px;width:38px;height:38px}.affiliate-app-content{padding:16px 18px 20px}.affiliate-app-kicker{margin-bottom:12px}.affiliate-app-tabs button{min-height:42px}.affiliate-app-panel{padding-top:16px}.affiliate-app-panel h2{font-size:20px}.affiliate-app-actions{display:grid}.affiliate-app-actions a{width:100%}} .site-nav-avatar{width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:#2cb796;color:#06241d;cursor:pointer;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(0,0,0,.08);font:800 13px 'Noto Sans JP',sans-serif} .gensou-global-footer{position:relative;z-index:1;background:#2cb796;color:#06241d;font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif} .gensou-global-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px;padding:56px clamp(16px,3vw,40px) 40px} .gensou-global-footer__brand{min-width:0} .gensou-global-footer__brand h2{margin:0;font:900 clamp(22px,2.2vw,30px)/1.35 'Zen Kaku Gothic New',sans-serif;letter-spacing:0;text-wrap:balance} .gensou-global-footer__brand p{max-width:24em;margin:16px 0 0;font-size:13px;line-height:1.9;opacity:.75} .gensou-global-footer__column{display:flex;min-width:0;flex-direction:column;gap:11px} .gensou-global-footer__column strong{margin-bottom:3px;font:400 10.5px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.62} .gensou-global-footer a{color:#06241d;text-decoration:none} .gensou-global-footer__column a{font-size:13.5px} .gensou-global-footer__meta,.gensou-global-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(16px,3vw,40px) 30px} .gensou-global-footer__meta>span{font-size:12.5px;opacity:.75} .gensou-global-footer nav{display:flex;gap:22px} .gensou-global-footer__meta nav a{font-size:13px} .gensou-global-footer__legal{padding-top:16px;padding-bottom:16px;background:#fff;color:#6b6b72} .gensou-global-footer__legal>span,.gensou-global-footer__legal a{color:#6b6b72;font-size:12px} @media(max-width:640px){.gensou-global-footer__grid{grid-template-columns:1fr 1fr;gap:28px 20px;padding-top:40px}.gensou-global-footer__brand{grid-column:1/-1}.gensou-global-footer__meta nav,.gensou-global-footer__legal nav{flex-wrap:wrap;gap:12px 18px}} .discord-invite{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:150;display:grid;box-sizing:border-box;width:258px;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px 7px 9px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:rgba(20,20,22,.34);color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 18px rgba(0,0,0,.13);font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%)} .discord-invite::before{position:absolute;top:-30px;left:12px;width:110px;height:36px;border-radius:50%;background:rgba(255,255,255,.09);filter:blur(18px);content:'';pointer-events:none} .discord-invite>img{position:relative;display:block;width:20px;height:16px;object-fit:contain;opacity:.82;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))} .discord-invite__copy{position:relative;display:block;min-width:0;margin:0} .discord-invite__copy strong{display:block;font-size:11.5px;font-weight:600;line-height:1.25;letter-spacing:0;white-space:nowrap} .discord-invite__copy span{display:block;margin-top:1px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.3;letter-spacing:0} .discord-invite>a{position:relative;display:flex;align-items:center;justify-content:center;min-height:28px;margin:0;padding:0 10px;border:1px solid rgba(255,255,255,.11);border-radius:3px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.88);font-size:10.5px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background-color .16s ease,transform .16s ease,box-shadow .16s ease} .discord-invite>a:hover{background:#5865f2;color:#fff;box-shadow:0 5px 14px rgba(88,101,242,.3);transform:translateY(-1px)} html[data-theme='dark'] .discord-invite{border-color:rgba(255,255,255,.1);background:rgba(20,20,22,.34);color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 18px rgba(0,0,0,.13)} @media(max-width:640px){.discord-invite{left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:250px;grid-template-columns:18px minmax(0,1fr) auto;gap:6px;padding:6px 7px;border-radius:3px}.discord-invite>img{width:18px;height:15px}.discord-invite__copy strong{font-size:10.5px}.discord-invite__copy span{font-size:8.5px;line-height:1.25}.discord-invite>a{min-height:26px;padding:0 8px;border-radius:2px;font-size:10px}} .site-nav-avatar img{display:block;width:100%;height:100%;object-fit:cover} html[data-theme='dark'] .site-nav-avatar{border-color:rgba(255,255,255,.28);color:#fff} /* style-hover rules */ .scp0:hover{background:rgba(0,0,0,0.05) !important;color:#141417 !important} .scp1:hover{border-color:rgba(255,255,255,0.24) !important} .scp2:hover{background:rgba(0,0,0,0.06) !important;color:#141417 !important} .scp3:hover{border-color:rgba(255,255,255,0.4) !important} .scp4:hover{background:#3ECBAB !important} .scp5:hover{opacity:0.85 !important} .scp6:hover{color:#141417 !important;background:rgba(0,0,0,0.05) !important} .scp7:hover{color:#141417 !important} .scp8:hover{background:rgba(0,0,0,0.05) !important} .scp9:hover{background:rgba(0,0,0,0.06) !important} .scpa:hover{background:rgba(0,0,0,0.08) !important} .scpb:hover{text-decoration:underline !important} .scpc:hover{background:rgba(0,0,0,0.13) !important} .scpd:hover{border-color:rgba(255,255,255,0.3) !important} .scpe:hover{color:#128A6F !important} .scpf:hover{border-color:rgba(217,255,63,0.75) !important;background:#F4F4F5 !important} .scpg:hover{border-color:rgba(44,183,150,0.55) !important;background:#F4F4F5 !important} .scph:hover{background:rgba(44,183,150,0.3) !important} .scpi:hover{background:#fff !important} .scpj:hover{background:#F4F4F5 !important} .scpk:hover{border-color:rgba(44,183,150,0.5) !important;color:#141417 !important} .scpl:hover{background:rgba(0,0,0,0.07) !important} .scpm:hover{background:#EAF8F3 !important} .scpn:hover{background:#12907F !important} .scpo:hover{background:rgba(0,0,0,0.14) !important} .account-manage-panel{margin-top:26px}.account-manage-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.account-manage-button{min-height:44px;padding:0 20px;border:1px solid #4a4b4c;border-radius:3px;background:transparent;color:#e8e8e3;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .16s ease,color .16s ease}.account-manage-button:hover{border-color:#9a9b9c}.account-manage-button.is-danger{border-color:#5a2f30;color:#e08a8a}.account-manage-button.is-danger:hover{border-color:#a34a4c;color:#f0a0a0}.account-manage-button:disabled{opacity:.55;cursor:default} .retention-overlay{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px;background:rgba(8,9,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.retention-dialog{width:min(100%,420px);padding:28px 24px;border:1px solid #3a3b3c;border-radius:6px;background:#141516;color:#e8e8e3}.retention-dialog h3{margin:0 0 12px;font-size:18px;font-weight:700}.retention-dialog p{margin:0 0 10px;font-size:13px;line-height:1.8;color:#cfcfca}.retention-dialog small{display:block;margin-bottom:18px;color:#8d8e8e;font-size:11px;line-height:1.6}.retention-dialog div{display:grid;gap:10px}.retention-accept{min-height:48px;border:1px solid #eeeee9;border-radius:3px;background:#eeeee9;color:#111213;font-size:13px;font-weight:700;cursor:pointer}.retention-accept:hover{background:#fff}.retention-decline{min-height:42px;border:1px solid #4a4b4c;border-radius:3px;background:transparent;color:#9a9b9c;font-size:12px;cursor:pointer}.retention-decline:hover{color:#d6d6d1;border-color:#7a7b7c}