:root, :root[data-theme="light"]{ color-scheme: light; --white: #ffffff; --surface: #f5f6f8; --surface-2: #eceef2; --ink: #14171c; --muted: #667085; --muted-2: #98a1ae; --line: #e5e8ee; --navy: #1f3a5f; --navy-ink: #14293f; --amber: #f5a623; --amber-ink: #b97300; --amber-soft: #fff3de; --green-ok: #2f9e6a; --danger: #c0392b; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --header-h: 68px; --shadow-card: 0 1px 2px rgba(20,23,28,.04), 0 8px 24px -12px rgba(20,23,28,.10); --shadow-card-hover: 0 4px 10px rgba(20,23,28,.06), 0 16px 32px -12px rgba(20,23,28,.16); } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; } body{ margin:0; padding-top: var(--header-h); overflow-x:hidden; overflow-x:clip; max-width:100vw; font-family: var(--font-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family: inherit; cursor:pointer; } input,select,textarea{ font-family:inherit; } h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.1; letter-spacing:-0.01em; } p{ margin:0; } :focus-visible{ outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; } .eyebrow{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--amber-ink); background: var(--amber-soft); padding:.3rem .6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; } .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--amber); } .container{ max-width: 1240px; margin-inline:auto; padding-inline: 32px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } .icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; } .icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .site-header{ position: fixed; top:0; left:0; right:0; z-index: 60; height: var(--header-h); background: color-mix(in srgb, var(--white) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease; } .site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(20,23,28,.35); } .site-header .inner{ height:100%; display:flex; align-items:center; gap: 22px; } .brand{ display:flex; align-items:center; gap:.55rem; font-family: var(--font-display); font-weight:700; font-size:1.15rem; flex-shrink:0; margin-right:6px; } .brand-mark{ width:34px; height:34px; border-radius: 9px; overflow:hidden; display:grid; place-items:center; position:relative; flex-shrink:0; } .brand-mark .icon{ width:100%; height:100%; object-fit:contain; color: var(--white); } .menu-toggle{ display:none; width:38px; height:38px; border-radius: var(--radius-s); border:1px solid var(--line); background: var(--white); align-items:center; justify-content:center; flex-shrink:0; } .primary-nav{ display:flex; align-items:center; gap: 2px; } .primary-nav a{ font-size:.92rem; font-weight:500; color: var(--muted); padding: .5rem .8rem; border-radius: 999px; transition: color .15s ease, background .15s ease; white-space:nowrap; } .primary-nav a:hover{ color: var(--ink); background: var(--surface); } .header-search{ flex:1; display:flex; align-items:center; gap:.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; max-width: 360px; margin-left: auto; transition: border-color .15s ease, box-shadow .15s ease; } .header-search:focus-within{ border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31,58,95,.10); } .header-search .icon{ width:17px; height:17px; color: var(--muted-2); flex-shrink:0; } .header-search input{ border:0; background:transparent; outline:0; font-size:.88rem; width:100%; min-width:0; color: var(--ink); } .header-search input::placeholder{ color: var(--muted-2); } .header-search kbd{ font-family: var(--font-mono); font-size:.68rem; color: var(--muted-2); border:1px solid var(--line); background: var(--white); padding: .1rem .35rem; border-radius:5px; flex-shrink:0; } .header-actions{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; } .btn{ font-size:.88rem; font-weight:600; padding: .58rem 1.05rem; border-radius: 999px; border: 1px solid transparent; display:inline-flex; align-items:center; gap:.4rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; white-space:nowrap; } .btn-ghost{ color: var(--ink); border-color: var(--line); background: var(--white); } .btn-ghost:hover{ border-color: var(--navy); } .btn-solid{ color: var(--white); background: var(--navy); } .btn-solid:hover{ background: var(--navy-ink); box-shadow: 0 8px 18px -8px rgba(31,58,95,.55); } .btn-solid .icon{ width:16px; height:16px; } .btn-outline{ color: var(--navy); border-color: var(--line); background: var(--white); font-size:.82rem; padding:.5rem .85rem; } .btn-outline:hover{ border-color: var(--navy); background: var(--surface); } .btn-small{ font-size:.78rem; padding:.45rem .8rem; } .layout > main{ min-width:0; } .layout{ display:grid; grid-template-columns: 250px minmax(0,1fr); gap: 40px; max-width: 1240px; margin-inline:auto; padding-inline: 32px; align-items:start; } .sidebar{ position: sticky; top: calc(var(--header-h) + 24px); height: calc(100vh - var(--header-h) - 48px); height: calc(100dvh - var(--header-h) - 48px); display:flex; flex-direction:column; padding: 20px 4px 0; } .sidebar-scroll{ flex:1; min-height:0; overflow-y:auto; margin: 0 -4px; padding: 0 4px 16px; scrollbar-width: thin; } .sidebar-foot{ position:relative; flex-shrink:0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--white); } .sidebar-foot::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:28px; background: linear-gradient(to top, var(--white), transparent); pointer-events:none; } .dock{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap:2px; padding:4px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); } .dock-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; padding: .65rem .1rem; border-radius: 10px; font-size:.68rem; font-weight:500; letter-spacing:0; text-align:center; color: var(--muted); transition: background .18s ease, color .18s ease, transform .12s ease; } .dock-item .icon{ width:22px; height:22px; stroke-width:1.7; color: currentColor; flex-shrink:0; transition: transform .18s ease; } .dock-item:hover{ background: color-mix(in srgb, var(--navy) 9%, transparent); color: var(--navy); } .dock-item:hover .icon{ transform: translateY(-2px); } .dock-item:active{ transform: scale(.96); } .dock-item:focus-visible{ outline: 2px solid var(--navy); outline-offset: 2px; } .dock-label{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dock-item.is-premium .icon{ color: var(--amber-ink); } .dock-item.is-premium:hover{ background: var(--amber-soft); color: var(--amber-ink); } .dock-item.is-refer .icon{ color: var(--amber-ink); } .dock-item.is-refer:hover{ background: var(--amber-soft); color: var(--amber-ink); } .dock-item.is-refer:hover .icon{ transform: translateY(-2px) scale(1.1); } .mini-pill{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:var(--amber-ink); background:var(--amber-soft); padding:.15rem .4rem; border-radius:999px; margin-left:.35rem; vertical-align:middle; } .ir-locked-note{ padding:16px; border:1px dashed var(--line); border-radius:var(--radius-m); color:var(--muted); font-size:.88rem; background:var(--surface); } .ir-locked-note a{ color:var(--navy); font-weight:600; text-decoration:underline; } .ir-upsell{ position:relative; overflow:hidden; display:grid; gap:18px; padding:22px 20px; border:1px solid color-mix(in srgb, var(--amber) 50%, var(--line)); border-radius: var(--radius-l); background: linear-gradient(155deg, var(--amber-soft), var(--surface) 72%); box-shadow: var(--shadow-card); } .ir-upsell[hidden]{ display:none; } .ir-upsell::before{ content:""; position:absolute; top:-70px; right:-70px; width:200px; height:200px; border-radius:50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--amber) 30%, transparent), transparent); pointer-events:none; } .ir-upsell > *{ position:relative; } .ir-upsell-head{ display:flex; align-items:flex-start; gap:14px; } .ir-upsell-crown{ width:42px; height:42px; border-radius:13px; background: var(--amber); color:#14293f; display:grid; place-items:center; flex-shrink:0; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--amber) 80%, transparent); } .ir-upsell-crown .icon{ width:22px; height:22px; fill:currentColor; stroke-width:2; } .ir-upsell-title{ margin:0 0 4px; font-family: var(--font-display); font-size:1.12rem; line-height:1.25; color: var(--ink); } .ir-upsell-text{ margin:0; font-size:.88rem; line-height:1.55; color: var(--muted); } .ir-upsell-perks{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:10px 16px; } .ir-upsell-perks li{ display:flex; align-items:flex-start; gap:8px; font-size:.85rem; line-height:1.4; color: var(--ink); } .ir-upsell-perks .icon{ width:16px; height:16px; margin-top:2px; flex-shrink:0; color: var(--green-ok); stroke-width:2.4; } .ir-upsell-plans{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; padding-top:6px; } .ir-upsell-plans[hidden]{ display:none; } .ir-plan{ position:relative; display:grid; gap:3px; padding:14px 14px 12px; border:1px solid var(--line); border-radius: var(--radius-m); background: var(--white); } .ir-plan.is-best{ border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); } .ir-plan-name{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color: var(--muted); } .ir-plan-price{ font-family: var(--font-display); font-size:1.55rem; font-weight:700; line-height:1.1; color: var(--ink); } .ir-plan-price small{ font-family: var(--font-body); font-size:.78rem; font-weight:500; color: var(--muted); } .ir-plan-note{ font-size:.74rem; color: var(--muted); } .ir-plan-save{ position:absolute; top:-10px; right:12px; padding:.18rem .55rem; border-radius:999px; background: var(--amber); color:#14293f; font-family: var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; } .ir-upsell-btn{ width:100%; justify-content:center; gap:.5rem; padding:.85rem 1.2rem; font-size:.95rem; } .ir-upsell-btn .icon{ width:18px; height:18px; } .ir-inline-note{ margin-top:10px; padding:10px 14px; border-radius:var(--radius-s); background:var(--amber-soft); color:var(--amber-ink); font-size:.82rem; display:none; } .batch-thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--surface-2); } .dock-item.is-donate:hover .icon{ transform: translateY(-2px) scale(1.12); } .dock-avatar{ position:relative; width:22px; height:22px; display:grid; place-items:center; flex-shrink:0; transition: transform .18s ease; } .dock-avatar img, .dock-initials{ width:22px; height:22px; border-radius:50%; object-fit:cover; } .dock-avatar img[hidden], .dock-initials[hidden]{ display:none; } .dock-initials{ display:grid; place-items:center; background: var(--navy); color: var(--white); font-family: var(--font-display); font-size:.6rem; font-weight:700; line-height:1; } .dock-item.is-account.is-signed-in{ color: var(--ink); } .dock-item.is-account.is-signed-in .dock-avatar .icon{ display:none; } .dock-item.is-account.is-signed-in .dock-avatar::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#22c55e; border:2px solid var(--surface); box-sizing:border-box; } .dock-item:hover .dock-avatar{ transform: translateY(-2px); } .dock-item:hover .dock-avatar .icon{ transform:none; } .dock-crown{ position:absolute; top:-7px; right:-8px; width:15px; height:15px; padding:1px; border-radius:50%; background: var(--amber); color: var(--white); stroke:currentColor; fill:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; box-sizing:border-box; border:1.5px solid var(--surface); pointer-events:none; } .dock-crown[hidden]{ display:none; } @media (pointer: coarse){ .dock-item{ min-height: 44px; } } .sidebar-title{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); margin: 0 0 10px 10px; } .peg-rail{ position: relative; padding-left: 14px; border-left: 2px dashed var(--line); } .cat-link{ position:relative; display:flex; align-items:center; gap:.65rem; padding: .62rem .7rem; border-radius: var(--radius-s); font-size:.86rem; font-weight:500; color: var(--muted); margin-bottom: 2px; transition: background .15s ease, color .15s ease; } .cat-link::before{ content:""; position:absolute; left:-16.5px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background: var(--surface-2); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--line); transition: background .15s ease, box-shadow .15s ease; } .cat-link .icon{ width:17px; height:17px; color: var(--muted-2); transition: color .15s ease; flex-shrink:0; } .cat-link:hover{ background: var(--surface); color: var(--ink); } .cat-link.is-active{ background: var(--navy); color: var(--white); } .cat-link.is-active .icon{ color: var(--white); } .cat-link.is-active::before{ background: var(--amber); box-shadow: 0 0 0 1px var(--amber); } .sidebar-note{ margin: 22px 10px 0; padding: 14px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); font-size: .8rem; color: var(--muted); } .sidebar-note strong{ display:block; color: var(--ink); font-size:.85rem; margin-bottom:3px; } .sidebar-back{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color: var(--navy); margin: 0 0 18px 10px; } .sidebar-back .icon{ width:14px; height:14px; transform:rotate(180deg); } .sidebar-backdrop{ display:none; } .breadcrumb{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color: var(--muted-2); margin: 24px 0 18px; } .breadcrumb a{ color: var(--muted); font-weight:500; } .breadcrumb a:hover{ color: var(--navy); } .breadcrumb .icon{ width:13px; height:13px; } .page-hero{ position: relative; padding: 40px; background-image: radial-gradient(var(--surface-2) 1.4px, transparent 1.4px); background-size: 22px 22px; background-position: -6px -6px; border-radius: var(--radius-l); overflow: hidden; } .page-hero-inner{ position:relative; z-index:1; display:flex; align-items:flex-start; gap: 20px; flex-wrap:wrap; justify-content:space-between; } .page-hero-text{ max-width: 560px; } .page-hero .tool-icon-lg{ width:52px; height:52px; border-radius: 13px; background: var(--white); border: 1px solid var(--line); display:grid; place-items:center; color: var(--navy); box-shadow: var(--shadow-card); } .page-hero-title-row{ display:flex; align-items:center; gap:14px; margin-top:0; } .page-hero-title-row .tool-icon-lg{ flex-shrink:0; } .page-hero h1{ font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-top: 0; } .page-hero p.lead{ font-size: 1rem; color: var(--muted); margin-top: 12px; max-width: 54ch; line-height:1.6; } .page-hero-badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top: 18px; } .page-hero-media{ flex: 1 1 320px; max-width: 420px; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); background: var(--white); } .page-hero-media img{ display:block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; } .badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:600; color: var(--green-ok); background: color-mix(in srgb, var(--green-ok) 12%, transparent); padding:.35rem .65rem; border-radius:999px; } .badge .icon{ width:13px; height:13px; } .bottom-nav{ display:none; position: fixed; left:0; right:0; bottom:0; z-index: 70; background: color-mix(in srgb, var(--white) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(20,23,28,.35); padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-nav-inner{ display:flex; align-items:stretch; justify-content:space-around; max-width: 560px; margin-inline:auto; } .bottom-nav-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding: 8px 4px 7px; font-size:.68rem; font-weight:600; color: var(--muted-2); background:transparent; border:0; transition: color .15s ease; } .bottom-nav-item .icon{ width:22px; height:22px; stroke-width:1.7; } .bottom-nav-item:hover{ color: var(--ink); } .bottom-nav-item.is-active{ color: var(--navy); } .bottom-nav-item.is-active .icon{ color: var(--navy); } .bottom-nav-avatar{ position:relative; width:22px; height:22px; display:grid; place-items:center; flex-shrink:0; } .bottom-nav-avatar img{ width:22px; height:22px; border-radius:50%; object-fit:cover; } .bottom-nav-avatar img[hidden]{ display:none; } .bottom-nav-item.has-photo .bottom-nav-avatar .icon:not(.bottom-nav-crown){ display:none; } .bottom-nav-item.is-signed-in .bottom-nav-avatar::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border-radius:50%; background:#22c55e; border:2px solid var(--white); box-sizing:border-box; } .bottom-nav-avatar .bottom-nav-crown{ position:absolute; top:-7px; right:-8px; width:15px; height:15px; padding:1px; border-radius:50%; background: var(--amber); color: var(--white); fill: currentColor; stroke-width:2.6; box-sizing:border-box; border:1.5px solid var(--white); pointer-events:none; } .bottom-nav-avatar .bottom-nav-crown[hidden]{ display:none; } .mobile-search-overlay{ display:none; position: fixed; inset:0; z-index: 85; background: var(--white); flex-direction:column; } .mobile-search-overlay.is-open{ display:flex; } .mobile-search-head{ display:flex; align-items:center; gap:.6rem; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); flex-shrink:0; } .mobile-search-back{ display:flex; align-items:center; gap:.35rem; flex-shrink:0; font-size:.85rem; font-weight:600; color: var(--navy); background:transparent; border:0; padding: 8px 2px; } .mobile-search-back .icon{ width:16px; height:16px; transform: rotate(180deg); } .mobile-search-field{ flex:1; display:flex; align-items:center; gap:.55rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .68rem 1rem; } .mobile-search-field .icon{ width:18px; height:18px; color: var(--muted-2); flex-shrink:0; } .mobile-search-field input{ border:0; background:transparent; outline:0; font-size:.95rem; width:100%; color: var(--ink); } .mobile-search-results{ flex:1; overflow-y:auto; padding: 8px 12px 24px; } .mobile-search-results li a{ display:flex; align-items:center; gap: 14px; padding: 13px 12px; border-radius: var(--radius-m); } .mobile-search-results li a:active{ background: var(--surface); } .mobile-search-results li a .tool-icon{ width:38px; height:38px; border-radius:10px; background: var(--surface); display:grid; place-items:center; color: var(--navy); flex-shrink:0; } .mobile-search-results li a .tool-icon .icon{ width:18px; height:18px; } .mobile-search-results li a span.name{ font-size:.92rem; font-weight:600; color: var(--ink); } .mobile-search-empty{ text-align:center; color: var(--muted-2); font-size:.85rem; padding: 40px 20px; } .section{ padding: 48px 0 8px; scroll-margin-top: calc(var(--header-h) + 20px); } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 22px; flex-wrap:wrap; } .section-head h2{ font-size: 1.35rem; margin-top:6px; } .section-head p{ color: var(--muted); font-size:.9rem; margin-top:6px; max-width: 46ch; } .workspace{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items:start; } .panel{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px; position:relative; } .panel::before{ content:""; position:absolute; top:-6px; left: 30px; width:11px; height:11px; border-radius:50%; background: var(--white); border: 2px solid var(--amber); } .panel-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 14px; flex-wrap:wrap; } .panel-head h3{ font-size: 1rem; } .panel-head .btn-row{ display:flex; gap:.5rem; } .drop-zone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; min-height: 220px; border: 2px dashed var(--line); border-radius: 14px; padding: 24px; background: var(--surface); color: var(--muted); cursor:pointer; transition: border-color .15s ease, background .15s ease; } .drop-zone:hover, .drop-zone.is-dragover{ border-color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, var(--surface)); } .drop-zone .icon{ width:32px; height:32px; color: var(--muted-2); } .drop-zone b{ color: var(--ink); font-size:.95rem; } .drop-zone span{ font-size:.8rem; color: var(--muted-2); } .drop-zone input[type="file"]{ display:none; } .img-preview-wrap{ border:1px solid var(--line); border-radius: 14px; overflow:hidden; background: var(--surface); position:relative; min-height: 220px; display:flex; align-items:center; justify-content:center; } .img-preview-wrap img, .img-preview-wrap canvas{ display:block; max-width:100%; max-height: 360px; } .img-preview-wrap .empty-note{ padding: 40px 20px; } .img-preview-remove{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background: var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--ink); } .img-preview-remove:hover{ border-color: var(--danger); color: var(--danger); } .img-preview-remove .icon{ width:14px; height:14px; } .field-row{ display:flex; align-items:flex-end; gap: 12px; margin-top: 16px; } .field{ flex:1; min-width:0; } .field label{ display:block; font-size:.78rem; font-weight:600; color: var(--muted); margin-bottom:6px; } .field input[type="number"], .field select{ width:100%; border:1px solid var(--line); border-radius: var(--radius-s); padding:.6rem .75rem; font-size:.92rem; font-family: var(--font-mono); color: var(--ink); background: var(--white); outline:0; transition: border-color .15s ease, box-shadow .15s ease; } .field select{ font-family: var(--font-body); } .field input[type="number"]:focus, .field select:focus{ border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31,58,95,.08); } .lock-btn{ flex-shrink:0; width:40px; height:40px; border-radius: var(--radius-s); border:1px solid var(--line); background: var(--white); display:grid; place-items:center; color: var(--muted); margin-bottom:1px; } .lock-btn .icon{ width:17px; height:17px; } .lock-btn.is-active{ border-color: var(--navy); background: var(--navy); color: var(--white); } .pct-row{ display:flex; gap:.5rem; margin-top:12px; flex-wrap:wrap; } .quality-row{ margin-top:16px; } .quality-row label{ display:flex; justify-content:space-between; font-size:.78rem; font-weight:600; color: var(--muted); margin-bottom:6px; } .quality-row input[type="range"]{ width:100%; accent-color: var(--navy); } .quality-row.is-disabled{ opacity:.45; pointer-events:none; } .stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .stat-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px; } .stat-card b{ display:block; font-family: var(--font-mono); font-size: 1.5rem; color: var(--ink); } .stat-card span{ font-size:.76rem; color: var(--muted); } .stat-card b.is-down{ color: var(--green-ok); } .empty-note{ font-size:.82rem; color: var(--muted-2); padding: 6px 0; } .history-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; max-height: 520px; overflow-y: auto; padding: 4px 4px 8px; margin: -4px -4px -8px; scrollbar-width: thin; } .history-card{ position:relative; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); padding: 10px; } .history-card .hc-thumb{ width:100%; height:100px; object-fit:cover; border-radius:8px; background: var(--surface); display:block; } .history-card .hc-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; margin-top:9px; font-size:.72rem; color: var(--muted); } .history-card .hc-meta b{ color: var(--ink); font-family: var(--font-mono); font-size:.76rem; } .history-card .hc-format{ font-family: var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color: var(--amber-ink); background: var(--amber-soft); padding:.15rem .4rem; border-radius:999px; margin-top:6px; display:inline-block; } .history-card .hc-actions{ display:flex; gap:6px; margin-top:9px; } .history-card .hc-actions .btn{ flex:1; justify-content:center; padding:.4rem .5rem; font-size:.74rem; } .history-card .hc-remove{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background: var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--muted); } .history-card .hc-remove .icon{ width:11px; height:11px; } .history-card .hc-remove:hover{ border-color: var(--danger); color: var(--danger); } @media (max-width: 680px){ .history-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:10px; max-height: 420px; } } .history-card .hc-thumb-placeholder{ width:100%; height:100px; border-radius:8px; background: var(--surface); display:flex; align-items:center; justify-content:center; color: var(--muted-2); } .history-card .hc-thumb-placeholder .icon{ width:28px; height:28px; } .tool-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .tool-card{ position:relative; display:flex; flex-direction:column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 18px 14px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .tool-card::before{ content:""; position:absolute; top:-6px; left: 22px; width:11px; height:11px; border-radius:50%; background: var(--white); border: 2px solid var(--amber); transition: background .18s ease; } .tool-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(31,58,95,.3); } .tool-card:hover::before{ background: var(--amber); } .tool-card .tool-icon{ width:44px; height:44px; border-radius: 11px; background: var(--surface); display:grid; place-items:center; color: var(--navy); margin-bottom: 14px; transition: background .18s ease, color .18s ease; } .tool-card:hover .tool-icon{ background: var(--navy); color: var(--white); } .tool-card h3{ font-size: 1.02rem; font-weight:600; font-family: var(--font-body); } .tool-card p{ flex:1; font-size:.83rem; color: var(--muted); margin-top:6px; line-height:1.5; } .tool-card .tool-use{ margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); font-size:.8rem; font-weight:600; color: var(--navy); display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .tool-card .tool-arrow{ width:26px; height:26px; border-radius:50%; background: var(--surface); display:grid; place-items:center; transition: background .18s ease, color .18s ease; } .tool-card .tool-arrow .icon{ width:13px; height:13px; transition: transform .15s ease; } .tool-card:hover .tool-arrow{ background: var(--navy); color: var(--white); } .tool-card:hover .tool-arrow .icon{ transform: translateX(2px); } .guide-table{ width:100%; border-collapse: collapse; margin-top: 16px; font-size: .86rem; } .guide-table th, .guide-table td{ text-align:left; padding: 10px 14px; border-bottom: 1px solid var(--line); } .guide-table th{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted-2); font-weight:600; } .guide-table td{ color: var(--ink); } .guide-table td:last-child, .guide-table th:last-child{ color: var(--muted); font-weight:400; } .guide-table tr:last-child td{ border-bottom:0; } .steps-list{ counter-reset: step; margin-top: 16px; display:grid; gap: 12px; } .steps-list li{ list-style:none; padding-left: 0; display:flex; gap: 14px; align-items:flex-start; } .steps-list li::before{ counter-increment: step; content: counter(step); flex-shrink:0; width: 26px; height:26px; border-radius:50%; background: var(--navy); color: var(--white); font-family: var(--font-mono); font-size:.78rem; display:grid; place-items:center; } .steps-list li span{ font-size:.9rem; color: var(--muted); line-height:1.6; padding-top:2px; } .site-footer{ margin-top: 80px; border-top: 1px solid var(--line); background: var(--surface); } .footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; padding: 48px 0 36px; } .footer-brand p{ color: var(--muted); font-size:.85rem; margin-top: 12px; line-height:1.6; max-width: 32ch; } .footer-social{ display:flex; gap:.5rem; margin-top:18px; } .footer-social a{ width:34px; height:34px; border-radius:50%; background:var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--muted); transition: color .15s ease, border-color .15s ease; } .footer-social a:hover{ color: var(--navy); border-color: var(--navy); } .footer-social .icon{ width:15px; height:15px; } .footer-col h4{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-2); margin-bottom:14px; } .footer-col a{ display:block; font-size:.86rem; color: var(--muted); padding: 6px 0; transition: color .15s ease; } .footer-col a:hover{ color: var(--navy); } .footer-bottom{ border-top: 1px solid var(--line); padding: 20px 0 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; } .footer-bottom p{ font-size:.8rem; color: var(--muted-2); } .footer-bottom .legal{ display:flex; gap:18px; } .footer-bottom .legal a{ font-size:.8rem; color: var(--muted-2); } .footer-bottom .legal a:hover{ color: var(--navy); } .to-top{ position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 44px; height:44px; border-radius:50%; background: var(--navy); color: var(--white); border:0; display:grid; place-items:center; box-shadow: 0 10px 22px -8px rgba(31,58,95,.55); opacity:0; transform: translateY(10px); pointer-events:none; transition: opacity .2s ease, transform .2s ease, background .15s ease; } .to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; } .to-top:hover{ background: var(--navy-ink); } @media (min-width: 1400px){ .page-hero-media{ max-width: 520px; } } @media (max-width: 1180px){ .container{ padding-inline: 24px; } .layout{ padding-inline: 24px; gap: 28px; } } @media (max-width: 1080px){ .primary-nav{ display:none; } .header-search{ max-width: 260px; } .layout{ grid-template-columns: 210px minmax(0,1fr); gap: 24px; } .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 32px; } } @media (max-width: 980px){ .workspace{ grid-template-columns: 1fr; } } @media (max-width: 900px){ .layout{ grid-template-columns: 1fr; padding-inline: 24px; } .menu-toggle{ display:inline-flex; } .brand{ margin-right: auto; } .sidebar{ position: fixed; top:0; left:0; bottom:0; width: min(270px, 82vw); z-index: 90; background: var(--white); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .25s ease; padding: 20px 16px 0; height:auto; overflow:hidden; } .sidebar-scroll{ margin: 0 -16px; padding: 0 16px 16px; } .sidebar.is-open{ transform: translateX(0); } .sidebar-backdrop{ display:block; position: fixed; inset:0; background: rgba(20,23,28,.35); z-index: 80; opacity:0; pointer-events:none; transition: opacity .2s ease; } .sidebar-backdrop.is-open{ opacity:1; pointer-events:auto; } .header-search{ max-width: none; } } @media (max-width: 680px){ .container{ padding-inline: 18px; } .layout{ padding-inline: 18px; } .site-header .inner{ gap: 12px; } .header-search{ display:none; } .header-actions .btn-ghost:not(.theme-toggle){ display:none; } .page-hero{ padding: 26px; border-radius: var(--radius-m); } .page-hero-media{ max-width: 100%; } .panel{ padding: 18px; } .stat-grid{ grid-template-columns: 1fr 1fr; } .tool-grid{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .tool-card{ padding: 16px 14px 12px; } .tool-card .tool-use{ margin-top: 12px; padding-top: 10px; font-size:.76rem; } .footer-top{ grid-template-columns: 1fr; gap: 28px; padding: 36px 0 24px; } .footer-bottom{ flex-direction:column; align-items:flex-start; gap: 12px; } .to-top{ right: 16px; bottom: 16px; width: 40px; height: 40px; } .bottom-nav{ display:block; } body{ padding-bottom: 62px; } .to-top{ bottom: 78px; } } @media (max-width: 420px){ .brand span:not(.brand-mark){ display:none; } .stat-grid{ grid-template-columns: 1fr; } } .reviews-summary{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .reviews-summary .stars{ color: var(--amber); font-size:1.1rem; letter-spacing:2px; } .reviews-summary .avg{ font-family: var(--font-display); font-weight:700; font-size:1.3rem; } .reviews-summary .count{ color: var(--muted); font-size:.85rem; } .reviews-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px; } .review-card{ padding: 20px; border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); } .review-card .stars{ color: var(--amber); font-size:.85rem; letter-spacing:1px; } .review-card p{ font-size:.88rem; color: var(--ink); line-height:1.6; margin-top:10px; } .review-card .who{ display:flex; align-items:center; gap:.6rem; margin-top:16px; } .review-avatar{ width:32px; height:32px; border-radius:50%; background: var(--surface-2); color: var(--navy); display:grid; place-items:center; font-weight:700; font-size:.78rem; font-family: var(--font-display); flex-shrink:0; overflow:hidden; } .review-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .review-card .who b{ font-size:.85rem; display:block; } .review-card .who span{ font-size:.76rem; color: var(--muted-2); } .reviews-empty{ color: var(--muted); font-size:.88rem; padding: 20px 0; } @media (max-width: 900px){ .reviews-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 680px){ .reviews-grid{ grid-template-columns: 1fr; } .reviews-summary{ gap:10px; } } .review-modal-backdrop{ position:fixed; inset:0; background: rgba(20,23,28,.5); z-index: 200; display:none; align-items:center; justify-content:center; padding: 20px; } .review-modal-backdrop.is-open{ display:flex; } .review-modal{ width:100%; max-width: 420px; background: var(--white); border-radius: var(--radius-l); padding: 28px; box-shadow: var(--shadow-card-hover); position:relative; max-height: 90vh; overflow-y:auto; } .review-modal h3{ font-size:1.2rem; } .review-modal p.sub{ color: var(--muted); font-size:.86rem; margin-top:6px; } .review-modal-close{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background: var(--surface); display:grid; place-items:center; font-size:14px; } .review-modal-close:hover{ background: var(--surface-2); } .star-picker{ display:flex; gap:6px; margin: 16px 0 4px; font-size:1.6rem; } .star-picker button{ background:none; border:none; padding:0; color: var(--line); line-height:1; transition: color .1s ease; } .star-picker button.is-active, .star-picker button:hover, .star-picker button:hover ~ button{ color: var(--amber); } .review-field{ margin-top:14px; } .review-field label{ font-size:.8rem; font-weight:600; display:block; margin-bottom:6px; } .review-field input, .review-field textarea{ width:100%; border:1px solid var(--line); border-radius: var(--radius-s); padding:.65rem .85rem; font-size:.88rem; font-family:inherit; outline:0; background: var(--white); color: var(--ink); transition: border-color .15s ease; } .review-field input:focus, .review-field textarea:focus{ border-color: var(--navy); } .review-field textarea{ resize: vertical; min-height:90px; } .review-modal-actions{ margin-top:18px; display:flex; align-items:center; gap:12px; } .review-modal-msg{ font-size:.8rem; margin-top:10px; } .review-modal-msg.ok{ color: var(--green-ok); } .review-modal-msg.err{ color: var(--danger); } .hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; overflow:hidden; } .ad-slot{ width:100%; max-width:100%; box-sizing:border-box; margin: 28px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; } .ad-slot[hidden]{ display:none; margin:0; } .ad-slot-label{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted-2); } .ad-slot-inner{ width:100%; max-width:100%; box-sizing:border-box; height:90px; max-height:90px; position:relative; display:flex; align-items:center; justify-content:center; background: var(--surface); border:1px dashed var(--line); border-radius: var(--radius-m); overflow:hidden; } .ad-slot--leaderboard .ad-slot-inner{ height:90px; max-height:90px; } .ad-slot--incontent .ad-slot-inner{ height:250px; max-height:250px; } .ad-slot--sidebar .ad-slot-inner{ height:250px; max-height:250px; } .ad-unit-group{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; } .ad-unit-group ins.adsbygoogle{ margin:0 auto; } .ad-slot-inner ins.adsbygoogle, .ad-slot-inner ins.adsbygoogle iframe{ width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; } @media (max-width:680px){ .ad-slot--leaderboard .ad-slot-inner{ height:50px; max-height:50px; } .ad-slot--incontent .ad-slot-inner{ height:100px; max-height:100px; } .ad-slot--sidebar .ad-slot-inner{ height:100px; max-height:100px; } } .ad-popup{ position: fixed; right:20px; bottom:20px; z-index:150; width:300px; max-width: calc(100vw - 32px); background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-card-hover); padding:10px 10px 12px; display:none; flex-direction:column; gap:6px; transform: translateY(16px); opacity:0; transition: transform .25s ease, opacity .25s ease; box-sizing:border-box; } .ad-popup[hidden]{ display:none; } .ad-popup.is-open{ display:flex; } .ad-popup.is-visible{ transform: translateY(0); opacity:1; } .ad-popup-head{ display:flex; align-items:center; justify-content:space-between; } .ad-popup-close{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background: var(--surface); color: var(--ink); font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .ad-popup-close:hover{ background: var(--surface-2); } .ad-popup .ad-slot-inner{ height:100px; max-height:100px; border-style:dashed; } @media (max-width:420px){ .ad-popup{ right:12px; bottom:12px; left:12px; width:auto; } } .theme-toggle{ display:flex; align-items:center; justify-content:center; position:relative; width: 38px; height: 38px; padding: 0; border-radius: var(--radius-s); background: var(--white); border: 1px solid var(--line); flex-shrink: 0; } .theme-toggle .icon{ position:absolute; width: 18px; height: 18px; transition: opacity .3s ease, transform .3s ease; } .theme-toggle .icon-sun{ opacity: 1; transform: rotate(0deg); } .theme-toggle .icon-moon{ opacity: 0; transform: rotate(-180deg); } .theme-toggle:hover{ border-color: var(--navy); background: var(--surface); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --white: #0d0d0d; --surface: #262626; --surface-2: #333333; --ink: #ffffff; --muted: #cccccc; --muted-2: #aaaaaa; --line: #555555; --navy: #4adec8; --navy-ink: #5aebd6; --amber: #4adec8; --amber-ink: #5aebd6; --amber-soft: #1a2a3a; --green-ok: #4ade80; --danger: #ff6b6b; --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --shadow-card-hover: 0 4px 10px rgba(0,0,0,.4), 0 16px 32px -12px rgba(0,0,0,.6); } :root:not([data-theme="light"]) .theme-toggle .icon-sun{ opacity: 0; transform: rotate(180deg); } :root:not([data-theme="light"]) .theme-toggle .icon-moon{ opacity: 1; transform: rotate(0deg); } :root:not([data-theme="light"]) .site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(0,0,0,.8); } :root:not([data-theme="light"]) .header-search:focus-within{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); } :root:not([data-theme="light"]) .btn-solid:hover{ box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--navy) 45%, transparent); } :root:not([data-theme="light"]) .field input:focus, :root:not([data-theme="light"]) .field select:focus, :root:not([data-theme="light"]) .review-field input:focus, :root:not([data-theme="light"]) .review-field textarea:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent); } :root:not([data-theme="light"]) .tool-card, :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .faq-pop{ background: linear-gradient(160deg, #1c1f24 0%, #141618 100%); border-color: #2e3238; } :root:not([data-theme="light"]) .tool-card:hover{ border-color: color-mix(in srgb, var(--navy) 55%, transparent); box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--navy) 25%, transparent), var(--shadow-card-hover); } :root:not([data-theme="light"]) .tool-card .tool-icon{ background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); } :root:not([data-theme="light"]) .tool-card:hover .tool-icon{ background: var(--navy); color: var(--white); } :root:not([data-theme="light"]) .review-modal-backdrop, :root:not([data-theme="light"]) .sidebar-backdrop{ background: rgba(0,0,0,.65); } :root:not([data-theme="light"]) .to-top, :root:not([data-theme="light"]) .faq-fab{ box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--navy) 35%, transparent); } } :root[data-theme="dark"]{ color-scheme: dark; --white: #0d0d0d; --surface: #262626; --surface-2: #333333; --ink: #ffffff; --muted: #cccccc; --muted-2: #aaaaaa; --line: #555555; --navy: #4adec8; --navy-ink: #5aebd6; --amber: #4adec8; --amber-ink: #5aebd6; --amber-soft: #1a2a3a; --green-ok: #4ade80; --danger: #ff6b6b; --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --shadow-card-hover: 0 4px 10px rgba(0,0,0,.4), 0 16px 32px -12px rgba(0,0,0,.6); } :root[data-theme="dark"] .theme-toggle .icon-sun{ opacity: 0; transform: rotate(180deg); } :root[data-theme="dark"] .theme-toggle .icon-moon{ opacity: 1; transform: rotate(0deg); } :root[data-theme="dark"] .site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(0,0,0,.8); } :root[data-theme="dark"] .header-search:focus-within{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); } :root[data-theme="dark"] .btn-solid:hover{ box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--navy) 45%, transparent); } :root[data-theme="dark"] .field input:focus, :root[data-theme="dark"] .field select:focus, :root[data-theme="dark"] .review-field input:focus, :root[data-theme="dark"] .review-field textarea:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent); } :root[data-theme="dark"] .tool-card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .faq-pop{ background: linear-gradient(160deg, #1c1f24 0%, #141618 100%); border-color: #2e3238; } :root[data-theme="dark"] .tool-card:hover{ border-color: color-mix(in srgb, var(--navy) 55%, transparent); box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--navy) 25%, transparent), var(--shadow-card-hover); } :root[data-theme="dark"] .tool-card .tool-icon{ background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); } :root[data-theme="dark"] .tool-card:hover .tool-icon{ background: var(--navy); color: var(--white); } :root[data-theme="dark"] .review-modal-backdrop, :root[data-theme="dark"] .sidebar-backdrop{ background: rgba(0,0,0,.65); } :root[data-theme="dark"] .to-top, :root[data-theme="dark"] .faq-fab{ box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--navy) 35%, transparent); } @media (max-width: 520px){ .header-actions{ gap:.4rem; } .header-actions .btn-solid{ padding:.5rem .8rem; font-size:.8rem; white-space:nowrap; } .header-actions .btn-solid .icon{ display:none; } } .page-hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 22px; } .guide{ position:relative; } .guide-nav{ position: sticky; top: var(--header-h); z-index: 20; display:flex; gap:.4rem; margin-bottom: 34px; padding: 10px 0; background: color-mix(in srgb, var(--white) 97%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .guide-nav::-webkit-scrollbar{ display:none; } .guide-nav a{ flex-shrink:0; font-size:.82rem; font-weight:500; color: var(--muted); background: var(--white); border:1px solid var(--line); padding:.4rem .8rem; border-radius:999px; transition: border-color .15s ease, color .15s ease, background .15s ease; white-space:nowrap; } .guide-nav a:hover{ border-color: var(--navy); color: var(--navy); } .guide-nav a.is-active{ background: var(--navy); border-color: var(--navy); color: var(--white); } .g-sec{ position:relative; padding: 0 0 46px 62px; scroll-margin-top: calc(var(--header-h) + 80px); } .g-sec::before{ content:""; position:absolute; left:17px; top:46px; bottom:8px; border-left: 2px dashed var(--line); } .g-sec:last-of-type{ padding-bottom: 0; } .g-sec:last-of-type::before{ display:none; } .g-num{ position:absolute; left:0; top:-3px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: var(--surface); border:1px solid var(--line); color: var(--navy); font-family: var(--font-mono); font-size:.72rem; transition: background .2s ease, color .2s ease, border-color .2s ease; } .g-sec.is-active .g-num{ background: var(--navy); border-color: var(--navy); color: var(--white); } .g-sec h2{ font-size: 1.45rem; margin-top: 12px; } .g-sec h3{ font-family: var(--font-body); font-weight:600; } .g-sec p{ font-size:.94rem; color: var(--muted); line-height:1.75; margin-top:12px; } .g-sec p.g-lead{ font-size:1.04rem; color: var(--ink); line-height:1.7; } .use-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-top:18px; } .use-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding:18px 16px 16px; } .use-icon{ width:38px; height:38px; border-radius:10px; background: var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--navy); } .use-icon .icon{ width:18px; height:18px; } .use-card h3{ font-size:.98rem; line-height:1.3; margin-top:14px; } .use-card p{ font-size:.85rem; line-height:1.6; margin-top:8px; } .table-wrap{ margin-top:16px; border:1px solid var(--line); border-radius: var(--radius-m); overflow-x:auto; background: var(--white); } .table-wrap .guide-table{ margin-top:0; } .table-wrap .guide-table th{ background: var(--surface); } .steps-list{ padding-left:0; } .steps-list li{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding:14px 16px; align-items:center; } .steps-list li span{ padding-top:0; } .def-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:20px; } .def-card{ position:relative; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); padding:20px 18px 18px; } .def-card::before{ content:""; position:absolute; top:-6px; left:20px; width:11px; height:11px; border-radius:50%; background: var(--white); border:2px solid var(--amber); } .def-card h3{ font-size:1rem; } .def-card p{ font-size:.87rem; line-height:1.65; margin-top:8px; } .flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; } .flow span{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:.4rem .75rem; border-radius:999px; background: var(--amber-soft); color: var(--amber-ink); } .flow i{ font-style:normal; color: var(--muted-2); } .tip-list{ display:grid; gap:10px; margin-top:16px; } .tip-list li{ position:relative; list-style:none; padding:13px 16px 13px 50px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); font-size:.9rem; line-height:1.6; color: var(--muted); } .tip-list li::before{ content:""; position:absolute; left:15px; top:14px; width:22px; height:22px; border-radius:50%; background: color-mix(in srgb, var(--navy) 14%, transparent); } .tip-list li::after{ content:""; position:absolute; left:15px; top:14px; width:22px; height:22px; background: var(--navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .note-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px; } .note{ border:1px solid var(--line); border-radius: var(--radius-m); padding:18px; } .note h3{ display:flex; align-items:center; gap:.5rem; font-size:1rem; } .note h3 .icon{ width:18px; height:18px; } .note p{ font-size:.87rem; line-height:1.65; margin-top:10px; } .note--privacy{ background: color-mix(in srgb, var(--green-ok) 8%, var(--white)); border-color: color-mix(in srgb, var(--green-ok) 35%, var(--line)); } .note--privacy h3 .icon{ color: var(--green-ok); } .note--limits{ background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); } .note--limits h3 .icon{ color: var(--amber-ink); } @media (max-width: 900px){ .def-grid, .note-grid{ grid-template-columns: 1fr; } } @media (max-width: 680px){ .g-sec{ padding-left: 48px; padding-bottom: 38px; } .g-sec::before{ left:14px; top:40px; } .g-num{ width:30px; height:30px; font-size:.66rem; } .g-sec h2{ font-size:1.25rem; } .guide-nav{ margin-bottom: 26px; } } .faq-fab, .faq-pop, .to-top{ --ad-lift: 0px; } .ad-popup.is-open ~ .faq-fab, .ad-popup.is-open ~ .faq-pop, .ad-popup.is-open ~ .to-top{ --ad-lift: 170px; } .faq-fab{ position:fixed; right:24px; bottom: calc(24px + var(--ad-lift)); z-index:60; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background: linear-gradient(145deg, var(--navy), var(--navy-ink)); color: var(--white); cursor:pointer; box-shadow: 0 10px 22px -8px rgba(20,41,63,.6), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .18s ease; } .faq-fab:hover{ transform: translateY(-2px) scale(1.05); } .faq-fab:active{ transform: scale(.95); } .faq-fab:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; } .faq-fab-ic{ grid-area:1/1; width:20px; height:20px; stroke-width:1.8; transition: transform .28s ease, opacity .2s ease; } .faq-fab-ic-x{ opacity:0; transform: rotate(-90deg) scale(.6); } .faq-fab.is-open .faq-fab-ic-chat{ opacity:0; transform: rotate(90deg) scale(.6); } .faq-fab.is-open .faq-fab-ic-x{ opacity:1; transform:none; } .faq-fab::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--navy); opacity:0; pointer-events:none; } .faq-fab.has-unread::after{ animation: faqRing 2.4s ease-out infinite; } @keyframes faqRing{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.65); opacity:0; } } .faq-fab-badge{ position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background: var(--danger); border:2px solid var(--white); } .faq-fab:not(.has-unread) .faq-fab-badge{ display:none; } .to-top{ bottom: calc(24px + 44px + 12px + var(--ad-lift)); } .faq-pop{ position:fixed; right:24px; bottom: calc(24px + 44px + 14px + var(--ad-lift)); z-index:160; width: min(380px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 180px)); max-height: min(640px, calc(100dvh - 180px)); display:flex; flex-direction:column; background: var(--white); color: var(--ink); border:1px solid var(--line); border-radius:24px; box-shadow: 0 30px 70px -20px rgba(20,23,28,.5), 0 0 0 1px rgba(20,23,28,.03); overflow:hidden; outline:none; transform-origin: bottom right; animation: faqPop .24s cubic-bezier(.2,.9,.3,1.1); } .faq-pop[hidden]{ display:none; } @keyframes faqPop{ from{ opacity:0; transform: translateY(14px) scale(.96); } to{ opacity:1; transform:none; } } .faq-pop-head{ position:relative; display:flex; align-items:center; gap:10px; padding:16px; background: linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--navy) 80%, #000)); color: var(--white); flex-shrink:0; overflow:hidden; } .faq-pop-head::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--white) 24%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000); mask-image: linear-gradient(100deg, transparent 35%, #000); opacity:.7; pointer-events:none; } .faq-pop-head > *{ position:relative; } .faq-pop-avatar{ width:44px; height:44px; border-radius:50%; background: var(--amber); color:#14293f; display:grid; place-items:center; flex-shrink:0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 18%, transparent); } .faq-pop-avatar .icon{ width:24px; height:24px; } .faq-pop-title{ flex:1; min-width:0; margin-left:2px; } .faq-pop-title h2{ font-family: var(--font-display); font-size:1.05rem; line-height:1.2; color: inherit; margin:0; } .faq-pop-status{ display:flex; align-items:center; gap:7px; margin-top:4px; font-size:.78rem; opacity:.88; } .faq-pop-status i{ position:relative; width:8px; height:8px; border-radius:50%; background: var(--green-ok); flex-shrink:0; } .faq-pop-status i::after{ content:""; position:absolute; inset:0; border-radius:50%; background: var(--green-ok); animation: faqLive 1.8s ease-out infinite; } @keyframes faqLive{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } } .faq-pop-btn{ width:34px; height:34px; border-radius:50%; border:0; background: color-mix(in srgb, var(--white) 16%, transparent); color: inherit; display:grid; place-items:center; flex-shrink:0; cursor:pointer; transition: background .15s ease; } .faq-pop-btn:hover{ background: color-mix(in srgb, var(--white) 28%, transparent); } .faq-pop-btn:focus-visible{ outline:2px solid currentColor; outline-offset:2px; } .faq-pop-btn .icon{ width:16px; height:16px; transition: transform .3s ease; } .faq-pop-btn.faq-reset:hover .icon{ transform: rotate(-140deg); } .faq-chat{ position:relative; flex:1 1 auto; min-height:96px; overflow-y:auto; overscroll-behavior: contain; scroll-behavior:smooth; background: var(--surface); padding:14px 14px 16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; } .faq-day{ align-self:center; padding:3px 10px; border-radius:999px; font-family: var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted-2); background: color-mix(in srgb, var(--line) 60%, transparent); } .faq-msg{ display:flex; align-items:flex-end; gap:8px; animation: faqMsgIn .22s ease; } .faq-msg.is-user{ justify-content:flex-end; } .faq-msg-av{ width:26px; height:26px; border-radius:50%; background: var(--amber); color:#14293f; display:grid; place-items:center; flex-shrink:0; } .faq-msg-av .icon{ width:15px; height:15px; } .faq-bubble{ position:relative; max-width: calc(100% - 34px); padding:10px 14px; border-radius:18px 18px 18px 6px; background: var(--white); border:1px solid var(--line); color: var(--ink); font-size:.88rem; line-height:1.55; box-shadow: 0 1px 2px rgba(20,23,28,.05); overflow-wrap:anywhere; } .faq-time{ margin-top:5px; font-size:.64rem; line-height:1; color: var(--muted-2); } .faq-msg.is-user .faq-bubble{ max-width:86%; background: linear-gradient(145deg, var(--navy), color-mix(in srgb, var(--navy) 82%, #000)); border-color: transparent; color: var(--white); border-radius:18px 18px 6px 18px; box-shadow: 0 8px 16px -10px rgba(20,41,63,.7); } .faq-msg.is-user .faq-time{ color: inherit; opacity:.6; text-align:right; } .faq-typing{ display:inline-flex; gap:4px; padding:5px 2px; } .faq-typing span{ width:6px; height:6px; border-radius:50%; background: var(--muted-2); animation: faqDot 1s infinite ease-in-out; } .faq-typing span:nth-child(2){ animation-delay:.15s; } .faq-typing span:nth-child(3){ animation-delay:.3s; } @keyframes faqDot{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } } @keyframes faqMsgIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } } .faq-ask{ flex:0 0 auto; display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px; background: var(--white); border-top:1px solid var(--line); min-height:0; box-shadow: 0 -10px 20px -16px rgba(20,23,28,.25); } .faq-search{ display:flex; align-items:center; gap:8px; height:42px; padding:0 8px 0 14px; border-radius:999px; background: var(--surface); border:1px solid var(--line); color: var(--muted-2); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .faq-search:focus-within{ background: var(--white); border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 16%, transparent); color: var(--navy); } .faq-search > .icon{ width:16px; height:16px; flex-shrink:0; } .faq-search input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font: inherit; font-size:.88rem; color: var(--ink); } .faq-search input::placeholder{ color: var(--muted-2); } .faq-search-clear{ width:24px; height:24px; padding:0; border:0; border-radius:50%; background: var(--surface-2); color: var(--muted); display:grid; place-items:center; flex-shrink:0; cursor:pointer; } .faq-search-clear:hover{ background: var(--line); color: var(--ink); } .faq-search-clear[hidden]{ display:none; } .faq-search-clear .icon{ width:12px; height:12px; } .faq-ask-label{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-family: var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); } .faq-chips{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-height: min(180px, 25vh); overflow-y:auto; overscroll-behavior: contain; padding:2px 4px 2px 0; scrollbar-width:thin; } .faq-chips.has-more{ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); } .faq-chip{ display:inline-flex; align-items:center; gap:8px; max-width:100%; text-align:left; padding:9px 12px 9px 14px; border-radius:18px; border:1px solid var(--line); background: var(--surface); color: var(--navy); font: inherit; font-weight:600; font-size:.84rem; line-height:1.35; cursor:pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; } .faq-chip:hover{ border-color: var(--navy); background: var(--white); box-shadow: 0 8px 16px -12px rgba(20,41,63,.6); transform: translateY(-1px); } .faq-chip:active{ transform:none; } .faq-chip:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; } .faq-chip[hidden]{ display:none; } .faq-chip .icon{ width:14px; height:14px; flex-shrink:0; opacity:.5; transition: transform .15s ease, opacity .15s ease; } .faq-chip:hover .icon{ transform: translateX(2px); opacity:1; } .faq-chip-done{ display:none; color: var(--green-ok); } .faq-chip.is-asked{ color: var(--muted); font-weight:500; } .faq-chip.is-asked .faq-chip-go{ display:none; } .faq-chip.is-asked .faq-chip-done{ display:block; opacity:1; } .faq-empty{ margin:0; padding:6px 2px; font-size:.84rem; color: var(--muted); } .faq-empty[hidden]{ display:none; } .faq-link{ padding:0; border:0; background:none; font: inherit; font-weight:600; color: var(--navy); text-decoration:underline; cursor:pointer; } @media (max-width: 680px){ .ad-popup.is-open ~ .faq-fab, .ad-popup.is-open ~ .faq-pop, .ad-popup.is-open ~ .to-top{ --ad-lift: calc(170px + env(safe-area-inset-bottom, 0px)); } .faq-fab{ right:16px; bottom: calc(78px + var(--ad-lift)); width:40px; height:40px; } .faq-fab-ic{ width:18px; height:18px; } .to-top{ bottom: calc(78px + 40px + 10px + var(--ad-lift)); } .faq-pop{ right:16px; width: min(360px, calc(100vw - 32px)); bottom: calc(78px + 40px + 12px + var(--ad-lift)); max-height: min(640px, calc(100vh - 250px)); max-height: min(640px, calc(100dvh - 250px)); } .faq-search input{ font-size:16px; } } @media (max-height: 560px){ .faq-chips{ max-height:100px; } } @media (prefers-reduced-motion: reduce){ .faq-pop, .faq-msg, .faq-typing span, .faq-pop-status i::after, .faq-fab.has-unread::after{ animation:none; } .faq-chat{ scroll-behavior:auto; } .faq-fab, .faq-fab-ic, .faq-chip, .faq-pop-btn .icon{ transition:none; } } .ir-plan-status{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:700 .68rem/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--muted)} .ir-plan-status.is-premium{background:var(--amber-soft);color:var(--amber-ink)} .ir-limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0} .ir-limit{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0} .ir-limit b{display:block;font-size:.82rem;color:var(--ink)} .ir-limit b.is-premium-value{color:var(--green,#35d98a)} .ir-limit b.is-premium-value::before{content:"✓ ";font-weight:900} .ir-limit span{display:block;margin-top:3px;font-size:.72rem;color:var(--muted)} .ir-premium-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;padding:14px;border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line));border-radius:var(--radius-m);background:linear-gradient(145deg,var(--amber-soft),var(--surface))} .ir-premium-controls[hidden]{display:none} .ir-premium-control{min-width:0} .ir-premium-control label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;font-size:.78rem;font-weight:650;color:var(--ink)} .ir-premium-control input,.ir-premium-control select{width:100%;box-sizing:border-box} .ir-premium-control select{ min-height:46px; padding:10px 42px 10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink); font:600 .86rem/1.25 var(--font-body); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23757b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:18px; transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease; } .ir-premium-control select:hover{border-color:color-mix(in srgb,var(--amber) 55%,var(--line))} .ir-premium-control select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 18%,transparent)} .ir-premium-control select option{background:var(--white);color:var(--ink)} .ir-plan-note{margin:18px 0 22px!important;padding:0 2px;line-height:1.55} .ir-premium-controls{margin-top:18px} .ir-premium-check{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:.8rem;color:var(--ink)} .ir-premium-check input{width:16px!important;height:16px} .ir-plan-table{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--white)} .ir-plan-table table{width:100%;border-collapse:collapse;min-width:650px} .ir-plan-table th,.ir-plan-table td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:.82rem} .ir-plan-table th{background:var(--surface);font-family:var(--font-display);font-size:.86rem} .ir-plan-table tr:last-child td{border-bottom:0} .ir-plan-table td:nth-child(2),.ir-plan-table td:nth-child(3){text-align:center;font-weight:650} .ir-check{color:var(--green-ok);font-weight:800} .ir-cross{color:var(--muted-2)} .ir-feature-note{margin-top:10px;font-size:.75rem;line-height:1.5;color:var(--muted)} .ir-premium-lock{display:inline-flex;align-items:center;gap:5px;margin-left:5px;padding:2px 7px;border-radius:999px;background:var(--amber-soft);color:var(--amber-ink);font:700 .6rem/1 var(--font-mono);text-transform:uppercase} @media (max-width:700px){ .ir-limits{grid-template-columns:1fr 1fr} .ir-premium-controls{grid-template-columns:1fr;gap:14px;padding:13px} .ir-limit:last-child{grid-column:1/-1} .ir-premium-control select{min-height:48px;font-size:.84rem;padding-left:12px;padding-right:40px} } @media (max-width:430px){ .ir-limits{grid-template-columns:1fr} .ir-limit:last-child{grid-column:auto} .ir-plan-table th,.ir-plan-table td{padding:10px} } .ir-premium-control select#irTargetSize{width:100%;min-height:48px;padding:12px 42px 12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;box-sizing:border-box;cursor:pointer;} .ir-premium-control select#irTargetSize:focus{outline:2px solid var(--green,#35d98a);outline-offset:1px;}
.wtz-lang-menu{position:relative;display:inline-flex} .wtz-lang-menu .wtz-lang-trigger{display:inline-flex!important;align-items:center;gap:.25rem;padding:.45rem .65rem;font-weight:600;font-size:.8rem;letter-spacing:.02em} .wtz-lang-menu .wtz-lang-trigger{height:40px;padding:0 .8rem 0 .3rem!important;gap:.45rem;justify-content:center;border-radius:999px;flex-shrink:0;cursor:pointer;color:var(--navy); background:linear-gradient(180deg,var(--white) 0%,color-mix(in srgb,var(--navy) 7%,var(--white)) 100%); border:1px solid color-mix(in srgb,var(--navy) 25%,var(--line)); box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 14px -8px color-mix(in srgb,var(--navy) 45%,transparent); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease} .wtz-lang-menu .wtz-lang-trigger .icon{width:28px;height:28px;padding:5px;box-sizing:border-box;border-radius:8px;background:var(--navy);color:var(--white);stroke-width:1.7;pointer-events:none;flex:none;transition:transform .25s ease,background .18s ease,color .18s ease} .wtz-lang-trigger .wtz-lang-code{font-size:.82rem;font-weight:700;letter-spacing:.05em;line-height:1;text-transform:uppercase} .wtz-lang-menu .wtz-lang-trigger:hover{transform:translateY(-1px);border-color:var(--navy);box-shadow:0 2px 4px rgba(0,0,0,.14),0 10px 20px -8px color-mix(in srgb,var(--navy) 55%,transparent)} .wtz-lang-menu .wtz-lang-trigger:hover .icon{transform:rotate(-8deg) scale(1.06)} .wtz-lang-menu .wtz-lang-trigger:active{transform:scale(.96)} .wtz-lang-menu.open .wtz-lang-trigger{background:var(--navy);border-color:var(--navy-ink);color:var(--white);box-shadow:0 0 0 4px color-mix(in srgb,var(--navy) 18%,transparent),0 8px 18px -8px color-mix(in srgb,var(--navy) 60%,transparent)} .wtz-lang-menu.open .wtz-lang-trigger .icon{background:var(--white);color:var(--navy)} .wtz-lang-menu .wtz-lang-trigger:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:999px} @media (prefers-reduced-motion:reduce){.wtz-lang-menu .wtz-lang-trigger,.wtz-lang-menu .wtz-lang-trigger .icon{transition:none}} .wtz-lang-list{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:170px;max-height:min(70vh,520px);overflow-y:auto;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px -12px rgba(31,58,95,.35);padding:.35rem;z-index:60} .wtz-lang-menu.open .wtz-lang-list{display:block} .wtz-lang-list a{display:block;padding:.5rem .7rem;border-radius:8px;font-size:.85rem;color:var(--ink);text-decoration:none;white-space:nowrap} .wtz-lang-list a:hover{background:var(--line)} .wtz-lang-list a.active{font-weight:700;color:var(--navy)} [dir="rtl"] .wtz-lang-list{right:auto;left:0} <style id="wtz-free-premium-cards"> .wtz-plan-compare{margin:18px 0 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .wtz-plan-card{min-width:0;border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--white);box-shadow:var(--shadow-card);overflow:hidden} .wtz-plan-card.premium{border-color:color-mix(in srgb,var(--green-ok) 55%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--green-ok) 9%,var(--white)),var(--white) 72%)} .wtz-plan-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .wtz-plan-card h4{margin:0;font:700 1.05rem/1.2 var(--font-display);color:var(--ink)} .wtz-plan-badge{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:5px 9px;border-radius:999px;font:700 .62rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2);color:var(--muted)} .wtz-plan-card.premium .wtz-plan-badge{background:color-mix(in srgb,var(--green-ok) 16%,var(--white));color:var(--green-ok)} .wtz-plan-list{list-style:none;padding:0;margin:0;display:grid;gap:8px} .wtz-plan-list li{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:.82rem;line-height:1.35} .wtz-plan-list .tick{flex:0 0 auto;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--green-ok) 14%,var(--white));color:var(--green-ok);font-weight:900;font-size:.72rem} .wtz-plan-list .no{background:var(--surface-2);color:var(--muted-2)} .wtz-plan-highlight{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--surface);color:var(--ink);font-size:.78rem;font-weight:650} .wtz-plan-note{margin:14px 0 4px;text-align:center;color:var(--muted);font-size:.8rem;line-height:1.5} .wtz-plan-note strong{color:var(--ink)} @media(max-width:700px){.wtz-plan-compare{grid-template-columns:1fr;gap:12px}.wtz-plan-card{padding:16px}.wtz-plan-card h4{font-size:1rem}.wtz-plan-list li{font-size:.8rem}}