*, *::before, *::after { box-sizing: border-box; } html { max-width: 100%; overflow-x: hidden; } body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } img, canvas, svg { max-width: 100%; } button, input, select, textarea { max-width: 100%; } .panel, .tool-panel, .workspace, .field-row, .panel-head, .panel-head .btn-row, .page-hero-inner, .section-head, .stat-grid, .field, .btn-row, .pct-row, .quality-row, .page-hero-text, .page-hero-media { min-width: 0; } .workspace { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .workspace > * { min-width: 0; } .panel-head { align-items: center; } .panel-head h3 { min-width: 0; overflow-wrap: anywhere; } .panel-head .btn-row { flex-wrap: wrap; justify-content: flex-end; } .field-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: end; gap: 12px; } .field-row > .field { min-width: 0; } .lock-btn { width: 40px; min-width: 40px; } .field label { overflow-wrap: anywhere; word-break: normal; } .field input[type="number"], .field select { min-width: 0; max-width: 100%; } .drop-zone { width: 100%; min-width: 0; } .drop-zone b, .drop-zone span { max-width: 100%; overflow-wrap: anywhere; word-break: normal; } .img-preview-wrap { width: 100%; min-width: 0; display: grid; place-items: center; text-align: center; } .img-preview-wrap .empty-note { width: 100%; max-width: 32ch; margin: 0; padding: 32px 20px; text-align: center; overflow-wrap: anywhere; word-break: normal; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; } .btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .pct-row { align-items: center; } .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-card { min-width: 0; } .stat-card b, .stat-card span { overflow-wrap: anywhere; } .page-hero-inner { min-width: 0; } .page-hero-text { flex: 1 1 320px; } .page-hero-media { min-width: 0; width: 100%; } .page-hero-media img { width: 100%; height: auto; } .site-header .inner, .header-actions, .brand { min-width: 0; } .brand { flex-shrink: 1; } .brand span:not(.brand-mark) { overflow-wrap: anywhere; } .header-actions { flex-shrink: 0; } @media (max-width: 980px) { .workspace { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .container, .layout { width: 100%; max-width: 100%; padding-inline: 16px; } .page-hero { padding: 22px 18px; } .page-hero-inner { display: flex; flex-direction: column; align-items: stretch; } .page-hero-text, .page-hero-media { width: 100%; max-width: none; flex: 1 1 auto; } .panel { width: 100%; max-width: 100%; padding: 16px; } .panel-head { align-items: flex-start; } .panel-head .btn-row { width: 100%; justify-content: flex-start; } .panel-head .btn-row .btn { flex: 0 1 auto; } .field-row { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 8px; } .lock-btn { width: 40px; min-width: 40px; } .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .img-preview-wrap { min-height: 220px; } .img-preview-wrap .empty-note { max-width: 28ch; padding: 28px 14px; } .btn-row .btn-solid, .btn-row .btn-outline { max-width: 100%; } } @media (max-width: 480px) { .container, .layout { padding-inline: 12px; } .panel { padding: 14px; } .field-row { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 6px; } .lock-btn { width: 38px; min-width: 38px; } .stat-grid { grid-template-columns: minmax(0, 1fr); } .pct-row .btn { flex: 1 1 calc(50% - .5rem); min-width: 0; } .panel-head .btn-row .btn { flex: 1 1 auto; } .img-preview-wrap .empty-note { max-width: 24ch; padding-inline: 8px; } } @media (max-width: 360px) { .field-row { grid-template-columns: minmax(0, 1fr); } .field-row .lock-btn { justify-self: center; order: 2; } .field-row .field:first-child { order: 1; } .field-row .field:last-child { order: 3; } .stat-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.ir-flow-steps{ display:flex; align-items:center; gap:4px; margin:-4px 0 20px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); overflow-x:auto; scrollbar-width:none; } .ir-flow-steps::-webkit-scrollbar{display:none} .ir-flow-step{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; color:var(--muted-2); font-size:.82rem; font-weight:700; white-space:nowrap; transition:color .2s ease; } .ir-flow-step b{ width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--white); border:2px solid var(--line); color:var(--muted-2); font-family:var(--font-mono); font-size:.74rem; font-style:normal; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; flex-shrink:0; } .ir-flow-step.is-active{color:var(--ink)} .ir-flow-step.is-active b{ background:var(--navy); border-color:var(--navy); color:var(--white); transform:scale(1.06); } .ir-flow-line{ flex:1 0 20px; height:2px; min-width:16px; border-radius:2px; background:var(--line); position:relative; overflow:hidden; } .ir-flow-line::after{ content:""; position:absolute; inset:0; background:var(--navy); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .ir-flow-line.is-active::after{ transform:scaleX(1); } .ir-hero-actions{ display:flex; align-items:center; gap:16px; margin-top:22px; flex-wrap:wrap; } .ir-cta{ padding:1rem 1.7rem; font-size:.98rem; font-weight:700; box-shadow:0 10px 26px -10px color-mix(in srgb, var(--navy) 55%, transparent); } .ir-cta .icon{ width:18px; height:18px; transition:transform .18s ease; } .ir-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px color-mix(in srgb, var(--navy) 60%, transparent); } .ir-cta:hover .icon{ transform:translateX(3px); } .ir-cta:active{ transform:translateY(0); } .ir-hero-note{ display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.8rem; font-weight:600; } .ir-hero-note .icon{ width:15px; height:15px; color:var(--green-ok); flex-shrink:0; } @media (max-width:640px){ .ir-cta{ width:100%; justify-content:center; } .ir-hero-note{ width:100%; justify-content:center; } } .tool-panel{ box-shadow:var(--shadow-card); transition:border-color .18s ease, box-shadow .18s ease; } .tool-panel:focus-within{ border-color:color-mix(in srgb,var(--navy) 28%,var(--line)); box-shadow:0 10px 30px -20px color-mix(in srgb,var(--navy) 30%,transparent); } .drop-zone{ min-height:240px; border-width:2px; } .drop-zone b{font-size:1rem} .drop-zone span{max-width:52ch; line-height:1.5} .drop-zone::after{ content:"Choose a file or drag it here"; display:block; margin-top:2px; padding:.35rem .7rem; border-radius:999px; background:var(--white); border:1px solid var(--line); color:var(--navy); font-size:.72rem; font-weight:650; } .drop-zone:hover::after,.drop-zone.is-dragover::after{ border-color:var(--navy); } .field-row{gap:10px} .field input[type="number"], .field select{ min-height:42px; } .lock-btn{ width:42px; height:42px; margin-bottom:0; } .pct-row .btn{ min-height:38px; } .ir-output-status{ display:flex; align-items:center; gap:8px; min-height:34px; margin-top:12px; padding:8px 10px; border-radius:10px; background:var(--surface); color:var(--muted); font-size:.76rem; } .ir-status-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--muted-2); } .ir-output-status.is-ready{ color:var(--green-ok); background:color-mix(in srgb,var(--green-ok) 9%,var(--surface)); } .ir-output-status.is-ready .ir-status-dot{ background:var(--green-ok); } .ir-primary-action .btn{ width:100%; justify-content:center; min-height:46px; font-size:.92rem; } .img-preview-wrap{ min-height:260px; background: linear-gradient(45deg,color-mix(in srgb,var(--surface-2) 55%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--surface-2) 55%,transparent) 75%), linear-gradient(45deg,color-mix(in srgb,var(--surface-2) 55%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--surface-2) 55%,transparent) 75%), var(--surface); background-size:20px 20px; background-position:0 0,10px 10px; } .stat-card{ min-height:76px; display:flex; flex-direction:column; justify-content:center; } .stat-card b{font-size:1.3rem; overflow-wrap:anywhere} .ir-upsell{ border-style:solid; } #resize-editor{padding-top:30px} #resize-editor + .section{padding-top:38px} @media (max-width:980px){ .workspace{gap:16px} .tool-panel{padding:20px} } @media (max-width:680px){ .page-hero{padding:22px} .page-hero h1{font-size:1.8rem} .page-hero p.lead{font-size:.92rem} .ir-hero-actions{margin-top:16px} .ir-hero-actions .btn{width:100%;justify-content:center} .ir-hero-note{width:100%;text-align:center} #resize-editor{padding-top:20px} .workspace{gap:12px} .tool-panel{padding:15px;border-radius:16px} .panel-head{margin-bottom:12px} .panel-head h3{font-size:.96rem} .panel-head .btn-row{width:100%} .panel-head .btn-row .btn{flex:1;justify-content:center} .drop-zone{ min-height:190px; padding:18px 12px; } .drop-zone .icon{width:28px;height:28px} .drop-zone b{font-size:.9rem;line-height:1.35} .drop-zone span{font-size:.73rem} .drop-zone::after{font-size:.68rem} .field-row{gap:8px} .field label{font-size:.74rem} .field input[type="number"], .field select{font-size:.88rem;padding:.58rem .65rem} .lock-btn{width:40px;height:40px} .pct-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .pct-row .btn{width:100%;padding:.45rem .25rem} .stat-grid{gap:8px} .stat-card{padding:12px 10px} .stat-card b{font-size:1.05rem} .stat-card span{font-size:.7rem} .img-preview-wrap{min-height:210px} .ir-primary-action{ position:sticky; bottom:70px; z-index:20; padding-top:4px; padding-bottom:4px; background:linear-gradient(to bottom,transparent,var(--white) 24%); } .ir-primary-action .btn{ box-shadow:0 8px 22px -10px rgba(20,23,28,.45); } .ir-flow-steps{margin:-2px 0 16px;padding:11px 12px;gap:3px} .ir-flow-step{font-size:.72rem;gap:7px} .ir-flow-step b{width:24px;height:24px;font-size:.66rem} .ir-flow-line{flex-basis:12px} } @media (max-width:420px){ .page-hero{padding:18px} .page-hero h1{font-size:1.62rem} .tool-panel{padding:13px} .field-row{align-items:flex-end} .lock-btn{width:38px;height:38px} .img-preview-wrap{min-height:190px} .ir-output-status{font-size:.7rem} } @media (prefers-reduced-motion:reduce){ .tool-panel,.ir-primary-action .btn{transition:none} } img{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; } img:not(a img):not(button img){ pointer-events:none; } .page-hero-media img{ pointer-events:none; } img[src^="blob:"], img[src^="data:"], img.allow-save{ -webkit-touch-callout:default; -webkit-user-select:auto; user-select:auto; -webkit-user-drag:auto; pointer-events:auto; } @media (min-width: 900px){ .page-hero-inner{ display:block; } .page-hero-text{ max-width: 640px; } .page-hero-media{ position:relative; z-index:1; display:block; flex:none; width:auto; max-width:none; margin: 36px -40px 0; padding-inline: 32px; border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-card); background: transparent; } .page-hero-media img{ display:block; width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover; } .ir-hero-actions .ir-cta{ display:none; } } .sidebar-search{ display:flex; align-items:center; gap:.5rem; margin: 0 0 16px 10px; padding: .55rem .75rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-s); transition: border-color .15s ease, box-shadow .15s ease; } .sidebar-head{ position:relative; z-index:2; flex-shrink:0; background: var(--white); padding-bottom: 2px; } .sidebar-head::after{ content:""; position:absolute; left:0; right:0; top:100%; height:16px; background: linear-gradient(to bottom, var(--white), transparent); pointer-events:none; } .sidebar-head .sidebar-back{ margin-bottom: 12px; } .sidebar-head .sidebar-search{ margin-bottom: 14px; } .sidebar-head .sidebar-title{ margin-bottom: 8px; } .sidebar-search:focus-within{ border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 14%, transparent); } .sidebar-search .icon{ width:16px; height:16px; color: var(--muted-2); flex-shrink:0; } .sidebar-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:.86rem; color: var(--ink); -webkit-appearance:none; appearance:none; } .sidebar-search input::placeholder{ color: var(--muted-2); } .sidebar-search input::-webkit-search-cancel-button{ cursor:pointer; } .cat-link[hidden]{ display:none; } .dock button.dock-item{ border:0; background:transparent; font-family:inherit; cursor:pointer; } .dock-item.is-whatsapp:hover{ background: color-mix(in srgb, #25d366 14%, transparent); color:#128c4a; } .sidebar-empty{ margin: 8px 0 0 10px; font-size:.82rem; color: var(--muted); } @media (pointer: coarse){ .sidebar-search input{ font-size:16px; } } .theme-toggle .icon-moon{ opacity: 0; transform: rotate(-180deg); } .theme-toggle:hover{ border-color: var(--navy); background: var(--surface); } @property --lt-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; } :root{ --lt-fg:#047857; --lt-bg:rgba(236,253,245,.72); --lt-glow:rgba(16,185,129,.45); --lt-tag-fg:#059669; --lt-tag-bg:rgba(16,185,129,.14); --lt-pop-bg:rgba(255,255,255,.88); --lt-pop-bd:rgba(16,185,129,.28); --lt-pop-fg:#0f172a; --lt-pop-mut:#475569; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --lt-fg:#86efac; --lt-bg:rgba(6,40,28,.62); --lt-glow:rgba(16,185,129,.55); --lt-tag-fg:#6ee7b7; --lt-tag-bg:rgba(74,222,128,.14); --lt-pop-bg:rgba(15,23,22,.9); --lt-pop-bd:rgba(74,222,128,.28); --lt-pop-fg:#f1f5f9; --lt-pop-mut:#94a3b8; } } :root[data-theme="dark"]{ --lt-fg:#86efac; --lt-bg:rgba(6,40,28,.62); --lt-glow:rgba(16,185,129,.55); --lt-tag-fg:#6ee7b7; --lt-tag-bg:rgba(74,222,128,.14); --lt-pop-bg:rgba(15,23,22,.9); --lt-pop-bd:rgba(74,222,128,.28); --lt-pop-fg:#f1f5f9; --lt-pop-mut:#94a3b8; } .live-top-bar{ position:relative; display:inline-flex; flex-shrink:0; } .live-top-bar[hidden]{ display:none!important; } .lt-pill{ appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:.55rem; height:40px; padding:0 14px 0 13px; border:0; border-radius:999px; color:var(--lt-fg); background:var(--lt-bg); -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5); box-shadow:0 6px 18px -6px var(--lt-glow), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .25s ease, box-shadow .25s ease; -webkit-tap-highlight-color:transparent; } .lt-pill::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:1; background:conic-gradient(from var(--lt-a), #10b981, #34d399 25%, #a3e635 45%, rgba(16,185,129,0) 62%, #10b981); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation:ltSpin 4.5s linear infinite; } .lt-pill::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%); transform:translateX(-130%); animation:ltShine 6s ease-in-out infinite; } .lt-pill:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -6px var(--lt-glow), inset 0 1px 0 rgba(255,255,255,.28); } .lt-pill:active{ transform:scale(.97); } .lt-pill:focus-visible{ outline:2px solid #10b981; outline-offset:3px; } .lt-pill[aria-expanded="true"]{ box-shadow:0 0 0 4px rgba(16,185,129,.16), 0 10px 22px -6px var(--lt-glow); } .lt-dot{ position:relative; width:10px; height:10px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle at 35% 35%, #bbf7d0, #10b981 70%); box-shadow:0 0 10px rgba(16,185,129,.95); } .lt-dot::before,.lt-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #10b981; animation:ltRipple 2.2s ease-out infinite; } .lt-dot::after{ animation-delay:1.1s; } .lt-src{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .lt-odo, .lt-pop-num{ --h:1.2em; display:inline-flex; align-items:center; height:var(--h); line-height:var(--h); overflow:hidden; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:800; } .lt-odo{ font-size:1rem; color:var(--lt-fg); } .lt-d{ display:inline-block; height:var(--h); overflow:hidden; } .lt-d > i{ display:block; font-style:normal; transform:translateY(calc(var(--n,0) * var(--h) * -1)); transition:transform .7s cubic-bezier(.2,.9,.2,1); } .lt-d > i > span{ display:block; height:var(--h); line-height:var(--h); text-align:center; } .lt-s{ display:inline-block; } .lt-tag{ display:none; font-size:.62rem; font-weight:800; letter-spacing:.14em; color:var(--lt-tag-fg); padding:3px 6px; border-radius:6px; background:var(--lt-tag-bg); } @media (min-width:700px){ .lt-tag{ display:inline-block; } } @media (max-width:480px){ .lt-pill{ padding:0 11px 0 11px; gap:.45rem; } } .lt-pop{ position:fixed; top:0; left:0; z-index:1200; width:248px; padding:14px 16px 12px; border-radius:18px; color:var(--lt-pop-fg); background:var(--lt-pop-bg); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border:1px solid var(--lt-pop-bd); box-shadow:0 24px 48px -16px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:var(--ax,50%) 0; transition:opacity .2s ease, transform .25s cubic-bezier(.2,.9,.2,1), visibility 0s linear .25s; pointer-events:none; } .lt-pop.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; } .lt-pop::before{ content:""; position:absolute; top:-6px; left:calc(var(--ax,50%) - 6px); width:12px; height:12px; transform:rotate(45deg); background:var(--lt-pop-bg); border-left:1px solid var(--lt-pop-bd); border-top:1px solid var(--lt-pop-bd); border-radius:3px 0 0 0; } .lt-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .lt-pop-live{ display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:800; letter-spacing:.14em; color:var(--lt-tag-fg); } .lt-pop-live i{ width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 8px #10b981; animation:ltBlink 1.4s ease-in-out infinite; } .lt-trend{ font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(148,163,184,.16); color:var(--lt-pop-mut); } .lt-trend.up{ background:rgba(16,185,129,.16); color:#10b981; } .lt-trend.down{ background:rgba(244,63,94,.14); color:#f43f5e; } .lt-pop-num{ --h:1.15em; font-size:2.4rem; margin-top:6px; } .lt-pop-sub{ font-size:.82rem; color:var(--lt-pop-mut); margin-top:2px; } .lt-spark-wrap{ position:relative; height:48px; margin:12px 0 8px; } .lt-spark{ width:100%; height:100%; display:block; overflow:visible; } .lt-spark-dot{ position:absolute; right:-4px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.25), 0 0 10px #10b981; transition:top .5s ease; } .lt-pop-foot{ font-size:.7rem; color:var(--lt-pop-mut); opacity:.85; } @keyframes ltSpin{ to{ --lt-a:360deg; } } @keyframes ltShine{ 0%,62%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } } @keyframes ltRipple{ 0%{ transform:scale(1); opacity:.85; } 100%{ transform:scale(3.2); opacity:0; } } @keyframes ltBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } @media (prefers-reduced-motion:reduce){ .lt-pill::before,.lt-pill::after,.lt-dot::before,.lt-dot::after,.lt-pop-live i{ animation:none; } .lt-d > i,.lt-pop{ transition:none; } } @media (max-width:520px){ .live-top-bar{ height:36px; padding:0 10px 0 9px; gap:.38rem; } .wtz-lang-menu .wtz-lang-trigger{ height:36px; padding:0 .55rem 0 .25rem!important; gap:.3rem; } .wtz-lang-menu .wtz-lang-trigger .icon{ width:26px; height:26px; padding:4px; } .wtz-lang-trigger .wtz-lang-code{ font-size:.76rem; } } @media (max-width:440px){ .wtz-lang-trigger .wtz-lang-code{ display:none; } } @media (max-width:340px){ .live-top-bar{ padding:0 8px; } .wtz-lang-menu .wtz-lang-trigger{ padding:0 .3rem!important; } } .wtz-lang-list{ padding:0; width:300px; max-height:min(72vh,560px); overflow:hidden; flex-direction:column; } .wtz-lang-menu.open .wtz-lang-list{ display:flex; } .wtz-lang-head{ flex-shrink:0; padding:10px 10px 8px; background:var(--white); border-bottom:1px solid var(--line); } .wtz-lang-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:8px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); } .wtz-lang-top b{ color:var(--navy); font-size:.8rem; font-weight:700; } .wtz-lang-search{ display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.42rem .75rem; transition:border-color .15s ease, box-shadow .15s ease; } .wtz-lang-search:focus-within{ border-color:var(--navy); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent); } .wtz-lang-search svg{ width:16px; height:16px; color:var(--muted-2); flex-shrink:0; } .wtz-lang-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:.88rem; } .wtz-lang-search input::placeholder{ color:var(--muted-2); } .wtz-lang-search button{ border:0; background:var(--line); color:var(--muted); width:18px; height:18px; border-radius:50%; font-size:.6rem; line-height:1; cursor:pointer; display:none; padding:0; } .wtz-lang-search.has-q button{ display:grid; place-items:center; } .wtz-lang-items{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:.35rem; } .wtz-lang-items a[hidden]{ display:none; } .wtz-lang-items a{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .wtz-lang-items a small{ font-family:var(--font-mono); font-size:.66rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; } .wtz-lang-items a.active::after{ content:"✓"; color:var(--navy); font-weight:700; } .wtz-lang-items a.active small{ display:none; } .wtz-lang-empty{ padding:22px 14px; text-align:center; color:var(--muted); font-size:.85rem; } .wtz-lang-empty[hidden]{ display:none; } @media (max-width:680px){ .wtz-lang-menu{ position:static; } .wtz-lang-list{ position:fixed; left:10px; right:10px; top:calc(var(--header-h,68px) + 6px); width:auto; max-height:min(76vh,600px); border-radius:16px; } .wtz-lang-items{ display:grid; grid-template-columns:1fr 1fr; gap:2px; align-content:start; } .wtz-lang-items a{ padding:.6rem .7rem; } .wtz-lang-items a small{ display:none; } .wtz-lang-search input{ font-size:16px; } } .sidebar-search{ border-radius: 999px; padding: .6rem .95rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); } .sidebar-search:hover{ border-color: color-mix(in srgb, var(--navy) 40%, var(--line)); } .sidebar-search:focus-within .icon{ color: var(--navy); } .sidebar-search input::-webkit-search-cancel-button{ opacity:.6; } .sidebar-search input::-webkit-search-cancel-button:hover{ opacity:1; } .sidebar-title{ display:flex; align-items:center; gap:.5rem; } .sidebar-title::after{ content:""; flex:1; height:1px; margin-right:10px; background: linear-gradient(to right, var(--line), transparent); } .cat-link{ line-height:1.3; border-left:3px solid transparent; transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease; } .cat-link:hover{ transform: translateX(3px); } .cat-link:hover .icon{ color: var(--navy); } .cat-link:hover::before{ background: var(--navy); box-shadow: 0 0 0 1px var(--navy); } .cat-link.is-active{ border-left-color: var(--amber); box-shadow: 0 4px 14px color-mix(in srgb, var(--navy) 28%, transparent); font-weight:600; } .cat-link:focus-visible{ outline: 2px solid var(--navy); outline-offset: 2px; } .peg-rail{ border-left-color: color-mix(in srgb, var(--line) 80%, transparent); } .sidebar-scroll{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; scroll-behavior: smooth; overscroll-behavior: contain; } .sidebar-scroll::-webkit-scrollbar{ width:6px; } .sidebar-scroll::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover{ background: var(--muted-2); } .sidebar-note{ border-left:3px solid var(--amber); } .dock{ box-shadow: 0 -6px 18px rgba(0,0,0,.08); } .dock-item{ border-radius: 12px; } @media (max-width: 900px){ .sidebar{ box-shadow: 8px 0 32px rgba(0,0,0,.25); } .cat-link{ min-height: 44px; } .cat-link:hover{ transform:none; } } @media (prefers-reduced-motion: reduce){ .cat-link, .cat-link:hover, .sidebar-scroll{ transition:none; transform:none; scroll-behavior:auto; } } .sidebar-scroll > .sidebar-search{ position: sticky; top: 0; z-index: 5; } .sidebar-scroll > .sidebar-search::before{ content:""; position:absolute; z-index:-1; top:-2px; bottom:-16px; left:-14px; right:-4px; background: var(--white); pointer-events:none; } @media (max-width: 900px){ .sidebar-scroll > .sidebar-search::before{ left:-26px; right:-16px; } } .sidebar-search{ min-height: 44px; background: color-mix(in srgb, var(--ink) 6%, var(--white)); border: 1.5px solid color-mix(in srgb, var(--ink) 30%, var(--white)); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 14%, transparent); } .sidebar-search:hover{ border-color: color-mix(in srgb, var(--ink) 50%, var(--white)); } .sidebar-search:focus-within{ background: var(--white); border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 25%, transparent); } .sidebar-search .icon{ color: color-mix(in srgb, var(--ink) 65%, var(--white)); width:18px; height:18px; } .sidebar-search input{ color: var(--ink); font-weight:500; } .sidebar-search input::placeholder{ color: color-mix(in srgb, var(--ink) 55%, var(--white)); opacity:1; } .sidebar-search{ border: 2px solid #98a1ae !important; border: 2px solid var(--muted-2) !important; border-style: solid !important; } .sidebar-search:hover{ border-color: var(--ink) !important; } .sidebar-search:focus-within{ border-color: var(--navy) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 28%, transparent) !important; } .wtz-sg-fab{position:fixed;right:18px;bottom:90px;z-index:9990;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;background:var(--amber,#f59e0b);color:#1b1b1b;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .15s ease,box-shadow .15s ease} .wtz-sg-fab:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.26)} .wtz-sg-fab:focus-visible{outline:3px solid var(--navy,#1f3a5f);outline-offset:3px} .wtz-sg-fab svg{width:24px;height:24px} .wtz-sg-tip{position:absolute;right:58px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink,#16202c);color:#fff;font:600 .74rem var(--font-body,Inter,system-ui,sans-serif);padding:.35rem .6rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s} .wtz-sg-fab:hover .wtz-sg-tip{opacity:1} @media (max-width:520px){.wtz-sg-fab{right:14px;width:44px;height:44px}.wtz-sg-tip{display:none}} @media (prefers-reduced-motion:reduce){.wtz-sg-fab{transition:none}}
@property --lt-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; } :root{ --lt-fg:#047857; --lt-bg:rgba(236,253,245,.72); --lt-glow:rgba(16,185,129,.45); --lt-tag-fg:#059669; --lt-tag-bg:rgba(16,185,129,.14); --lt-pop-bg:rgba(255,255,255,.88); --lt-pop-bd:rgba(16,185,129,.28); --lt-pop-fg:#0f172a; --lt-pop-mut:#475569; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --lt-fg:#86efac; --lt-bg:rgba(6,40,28,.62); --lt-glow:rgba(16,185,129,.55); --lt-tag-fg:#6ee7b7; --lt-tag-bg:rgba(74,222,128,.14); --lt-pop-bg:rgba(15,23,22,.9); --lt-pop-bd:rgba(74,222,128,.28); --lt-pop-fg:#f1f5f9; --lt-pop-mut:#94a3b8; } } :root[data-theme="dark"]{ --lt-fg:#86efac; --lt-bg:rgba(6,40,28,.62); --lt-glow:rgba(16,185,129,.55); --lt-tag-fg:#6ee7b7; --lt-tag-bg:rgba(74,222,128,.14); --lt-pop-bg:rgba(15,23,22,.9); --lt-pop-bd:rgba(74,222,128,.28); --lt-pop-fg:#f1f5f9; --lt-pop-mut:#94a3b8; } .live-top-bar{ position:relative; display:inline-flex; flex-shrink:0; } .live-top-bar[hidden]{ display:none!important; } .lt-pill{ appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:.55rem; height:40px; padding:0 14px 0 13px; border:0; border-radius:999px; color:var(--lt-fg); background:var(--lt-bg); -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5); box-shadow:0 6px 18px -6px var(--lt-glow), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .25s ease, box-shadow .25s ease; -webkit-tap-highlight-color:transparent; } .lt-pill::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:1; background:conic-gradient(from var(--lt-a), #10b981, #34d399 25%, #a3e635 45%, rgba(16,185,129,0) 62%, #10b981); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation:ltSpin 4.5s linear infinite; } .lt-pill::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%); transform:translateX(-130%); animation:ltShine 6s ease-in-out infinite; } .lt-pill:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -6px var(--lt-glow), inset 0 1px 0 rgba(255,255,255,.28); } .lt-pill:active{ transform:scale(.97); } .lt-pill:focus-visible{ outline:2px solid #10b981; outline-offset:3px; } .lt-pill[aria-expanded="true"]{ box-shadow:0 0 0 4px rgba(16,185,129,.16), 0 10px 22px -6px var(--lt-glow); } .lt-dot{ position:relative; width:10px; height:10px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle at 35% 35%, #bbf7d0, #10b981 70%); box-shadow:0 0 10px rgba(16,185,129,.95); } .lt-dot::before,.lt-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #10b981; animation:ltRipple 2.2s ease-out infinite; } .lt-dot::after{ animation-delay:1.1s; } .lt-src{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .lt-odo, .lt-pop-num{ --h:1.2em; display:inline-flex; align-items:center; height:var(--h); line-height:var(--h); overflow:hidden; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:800; } .lt-odo{ font-size:1rem; color:var(--lt-fg); } .lt-d{ display:inline-block; height:var(--h); overflow:hidden; } .lt-d > i{ display:block; font-style:normal; transform:translateY(calc(var(--n,0) * var(--h) * -1)); transition:transform .7s cubic-bezier(.2,.9,.2,1); } .lt-d > i > span{ display:block; height:var(--h); line-height:var(--h); text-align:center; } .lt-s{ display:inline-block; } .lt-tag{ display:none; font-size:.62rem; font-weight:800; letter-spacing:.14em; color:var(--lt-tag-fg); padding:3px 6px; border-radius:6px; background:var(--lt-tag-bg); } @media (min-width:700px){ .lt-tag{ display:inline-block; } } @media (max-width:480px){ .lt-pill{ padding:0 11px 0 11px; gap:.45rem; } } .lt-pop{ position:fixed; top:0; left:0; z-index:1200; width:248px; padding:14px 16px 12px; border-radius:18px; color:var(--lt-pop-fg); background:var(--lt-pop-bg); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border:1px solid var(--lt-pop-bd); box-shadow:0 24px 48px -16px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:var(--ax,50%) 0; transition:opacity .2s ease, transform .25s cubic-bezier(.2,.9,.2,1), visibility 0s linear .25s; pointer-events:none; } .lt-pop.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; } .lt-pop::before{ content:""; position:absolute; top:-6px; left:calc(var(--ax,50%) - 6px); width:12px; height:12px; transform:rotate(45deg); background:var(--lt-pop-bg); border-left:1px solid var(--lt-pop-bd); border-top:1px solid var(--lt-pop-bd); border-radius:3px 0 0 0; } .lt-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .lt-pop-live{ display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:800; letter-spacing:.14em; color:var(--lt-tag-fg); } .lt-pop-live i{ width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 8px #10b981; animation:ltBlink 1.4s ease-in-out infinite; } .lt-trend{ font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(148,163,184,.16); color:var(--lt-pop-mut); } .lt-trend.up{ background:rgba(16,185,129,.16); color:#10b981; } .lt-trend.down{ background:rgba(244,63,94,.14); color:#f43f5e; } .lt-pop-num{ --h:1.15em; font-size:2.4rem; margin-top:6px; } .lt-pop-sub{ font-size:.82rem; color:var(--lt-pop-mut); margin-top:2px; } .lt-spark-wrap{ position:relative; height:48px; margin:12px 0 8px; } .lt-spark{ width:100%; height:100%; display:block; overflow:visible; } .lt-spark-dot{ position:absolute; right:-4px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.25), 0 0 10px #10b981; transition:top .5s ease; } .lt-pop-foot{ font-size:.7rem; color:var(--lt-pop-mut); opacity:.85; } @keyframes ltSpin{ to{ --lt-a:360deg; } } @keyframes ltShine{ 0%,62%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } } @keyframes ltRipple{ 0%{ transform:scale(1); opacity:.85; } 100%{ transform:scale(3.2); opacity:0; } } @keyframes ltBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } @media (prefers-reduced-motion:reduce){ .lt-pill::before,.lt-pill::after,.lt-dot::before,.lt-dot::after,.lt-pop-live i{ animation:none; } .lt-d > i,.lt-pop{ transition:none; } } .hdr-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; padding:0; border-radius:var(--radius-s); background:var(--white); border:1px solid var(--line); color:var(--navy); transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; } .hdr-icon-btn .icon{ width:18px; height:18px; } .hdr-icon-btn:hover{ border-color:var(--navy); background:var(--surface); transform:translateY(-1px); box-shadow:0 6px 14px -8px color-mix(in srgb, var(--navy) 55%, transparent); } .hdr-icon-btn:active{ transform:scale(.95); } .hdr-icon-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; } .hdr-login-text{ display:none!important; } @media (max-width: 520px){ .hdr-icon-btn, .menu-toggle, .theme-toggle{ width:34px; height:34px; } .hdr-icon-btn .icon{ width:17px; height:17px; } .header-actions{ gap:5px; } } @media (max-width: 440px){ .wtz-lang-trigger .wtz-lang-code{ display:none; } } .site-header .inner{ min-width:0; } .brand{ min-width:0; } .brand-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .header-actions{ flex-shrink:0; } @media (max-width: 900px){ .site-header .inner{ gap:10px; } .brand{ margin-right:auto; flex:1 1 auto; } } @media (max-width: 520px){ .container{ padding-inline:12px; } .site-header .inner{ gap:8px; } .header-actions{ gap:6px; } .menu-toggle, .theme-toggle{ width:36px; height:36px; } .brand{ gap:.4rem; } .brand-name{ font-size:1.2rem; } .live-top-bar{ height:34px; padding:0 10px 0 9px; gap:.38rem; } .live-top-count{ font-size:.7rem; } .live-top-label{ display:none; } .wtz-lang-menu .wtz-lang-trigger{ height:36px; padding:0 .55rem 0 .25rem!important; gap:.3rem; } .wtz-lang-menu .wtz-lang-trigger .icon{ width:26px; height:26px; padding:4px; } .wtz-lang-trigger .wtz-lang-code{ font-size:.76rem; } } @media (max-width: 440px){ .brand-name{ display:visible; } .brand{ flex:1 1 auto; } } @media (max-width: 340px){ .live-top-bar{ padding:0 8px; } .wtz-lang-trigger .wtz-lang-code{ display:none; } .wtz-lang-menu .wtz-lang-trigger{ padding:0 .3rem!important; } } @media (max-width: 339px){ .brand span:not(.brand-mark), .brand-name{ display:none !important; } } @media (max-width: 680px){ #hdrSettings, #hdrAccount{ display:none !important; } } .wtz-lang-list{ padding:0; width:300px; max-height:min(72vh,560px); overflow:hidden; flex-direction:column; } .wtz-lang-menu.open .wtz-lang-list{ display:flex; } .wtz-lang-head{ flex-shrink:0; padding:10px 10px 8px; background:var(--white); border-bottom:1px solid var(--line); } .wtz-lang-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:8px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); } .wtz-lang-top b{ color:var(--navy); font-size:.8rem; font-weight:700; } .wtz-lang-search{ display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.42rem .75rem; transition:border-color .15s ease, box-shadow .15s ease; } .wtz-lang-search:focus-within{ border-color:var(--navy); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent); } .wtz-lang-search svg{ width:16px; height:16px; color:var(--muted-2); flex-shrink:0; } .wtz-lang-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:.88rem; } .wtz-lang-search input::placeholder{ color:var(--muted-2); } .wtz-lang-search button{ border:0; background:var(--line); color:var(--muted); width:18px; height:18px; border-radius:50%; font-size:.6rem; line-height:1; cursor:pointer; display:none; padding:0; } .wtz-lang-search.has-q button{ display:grid; place-items:center; } .wtz-lang-items{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:.35rem; } .wtz-lang-items a[hidden]{ display:none; } .wtz-lang-items a{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .wtz-lang-items a small{ font-family:var(--font-mono); font-size:.66rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; } .wtz-lang-items a.active::after{ content:"✓"; color:var(--navy); font-weight:700; } .wtz-lang-items a.active small{ display:none; } .wtz-lang-empty{ padding:22px 14px; text-align:center; color:var(--muted); font-size:.85rem; } .wtz-lang-empty[hidden]{ display:none; } @media (max-width:680px){ .wtz-lang-menu{ position:static; } .wtz-lang-list{ position:fixed; left:10px; right:10px; top:calc(var(--header-h,68px) + 6px); width:auto; max-height:min(76vh,600px); border-radius:16px; } .wtz-lang-items{ display:grid; grid-template-columns:1fr 1fr; gap:2px; align-content:start; } .wtz-lang-items a{ padding:.6rem .7rem; } .wtz-lang-items a small{ display:none; } .wtz-lang-search input{ font-size:16px; } } .page-hero-badges{ display:none!important; }