/*! Fwdpage © 2026 @christophtisch @perfectborn. All rights reserved. */
:root, .site-header[data-chrome="light"]{ --acc:#7f66e5; --bg:#ffffff; --fg:#0b0b0b; --muted:#666; --card:#ffffff; --soft:#f6f6f8; --border:#0b0b0b; --ok:#15803d; --warn:#b45309; --no:#b91c1c; --no-solid:#b91c1c; --radius:14px; --radius-s:10px; --shadow:0 2px 6px rgba(0,0,0,.06); --tr:.2s ease; } html[data-theme="dark"], .site-header[data-chrome="dark"]{ --bg:#0e0d12; --fg:#f2f1f7; --muted:#9b98a8; --card:#16141d; --soft:#1d1a26; --border:#e9e7f2; --ok:#4ade80; --warn:#fbbf24; --no:#f87171; --no-solid:#dc2626; --shadow:0 2px 6px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]){ --bg:#0e0d12; --fg:#f2f1f7; --muted:#9b98a8; --card:#16141d; --soft:#1d1a26; --border:#e9e7f2; --ok:#4ade80; --warn:#fbbf24; --no:#f87171; --no-solid:#dc2626; --shadow:0 2px 6px rgba(0,0,0,.45); } } *{box-sizing:border-box} [hidden]{display:none !important} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--fg); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; min-height:100vh; display:flex; flex-direction:column; } a{color:var(--acc); text-decoration:none} h1,h2,h3{line-height:1.25; margin:0 0 12px} h1{font-size:clamp(26px,4.5vw,36px); letter-spacing:-.02em} h2{font-size:20px} h3{font-size:17px} p{margin:8px 0} .muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center} .narrow{max-width:560px; margin:0 auto; width:100%} .acc{color:var(--acc)} .site-header{ display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:2px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:50; } .nav-auth,.nav-burger{margin-left:auto} .site-header .theme-toggle-alt{display:none} .nav-tools{display:contents} .admin-link{ display:inline-flex; align-items:center; gap:10px; color:var(--muted); text-decoration:none; font-weight:700; font-size:13.5px; } .admin-link::before{content:'|'; color:var(--muted); font-weight:400} @media (hover:hover){ .admin-link:hover{color:var(--acc)} } .admin-mod-toggle{margin-left:8px; font:inherit; font-size:12px; font-weight:700; border:1px solid var(--no); color:var(--no); background:transparent; border-radius:999px; padding:2px 10px; cursor:pointer; line-height:1.5} .admin-mod-toggle.on{background:var(--no-solid); color:#fff} .mod-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px} .mod-ctl-box{margin:6px 0 10px} .mod-tag{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--no); border:1px solid var(--no); border-radius:6px; padding:0 5px} .mod-btn{font:inherit; font-size:12px; font-weight:600; border:1px solid var(--no); color:var(--no); background:transparent; border-radius:8px; padding:3px 9px; cursor:pointer; line-height:1.3} .mod-btn:hover{background:color-mix(in srgb, var(--no) 12%, transparent)} .mod-btn-danger{background:var(--no-solid); color:#fff} .mod-btn-danger:hover{background:var(--no-solid); filter:brightness(.92)} .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); font-weight:700} .brand svg{width:26px; height:26px; fill:var(--acc); transition:transform var(--tr)} body:has(.profile:not(.single-page)) .brand svg{fill:var(--fg)} .brand:hover svg{transform:rotate(-8deg)} .nav-auth{display:flex; align-items:center; gap:8px} .site-header .btn{font-weight:700; color:var(--fg)} @media (hover:hover){ .site-header .btn-ghost:hover{color:var(--acc); border-color:transparent; transform:none; box-shadow:none} } #theme-toggle,#theme-toggle-alt{font-size:18px; line-height:1} .header-landing{position:sticky; top:0; border-bottom-color:transparent; background:transparent; padding:28px 32px 10px; transition:background var(--tr), border-color var(--tr), padding var(--tr)} .header-landing .brand{gap:0; transition:gap var(--tr)} .header-landing .brand svg{width:48px; height:48px; transition:width var(--tr), height var(--tr)} .header-landing .brand span{display:inline-block; vertical-align:middle; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width var(--tr), opacity var(--tr)} .header-landing.header-scrolled{background:var(--bg); border-bottom-color:var(--border); padding:14px 22px} .header-landing.header-scrolled .brand{gap:10px} .header-landing.header-scrolled .brand svg{width:26px; height:26px} .header-landing.header-scrolled .brand span{max-width:160px; opacity:1} .brand-rot{display:inline-block; overflow:hidden; height:1.35em} .brand-rot-inner{display:block; transition:transform .4s cubic-bezier(.7,0,.3,1)} .brand-rot-item{display:block; height:1.35em; line-height:1.35em; white-space:nowrap} .nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:38px; padding:8px 10px; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; } @media (hover:hover){ .nav-burger:hover span{background:var(--acc)} } .nav-burger span{display:block; height:2px; background:var(--fg); border-radius:2px; transition:transform var(--tr), opacity var(--tr), background var(--tr)} .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .site-main{flex:1; width:100%; max-width:880px; margin:0 auto; padding:28px 20px 56px} body:has(#admin-root) .site-main{max-width:1120px} /* Footer Desktop = Spread (© links · Claim mittig · Nav rechts), Nav aber
   ZWEIZEILIG via max-width (Besitzer R99 – „wieder wie zuvor, nur Nav 2-zeilig
   rechts“); Mobile = zentrierter Stapel (Media-Query unten). */ .site-footer{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:12px 20px; padding:24px 22px; font-size:13px; background:transparent; color:var(--muted); border-top:0; } .site-footer .muted{color:var(--muted)} .foot-copy{justify-self:start} .footer-claim{justify-self:center; text-align:center; letter-spacing:.01em} .footer-claim .claim-cookies{display:none} .footer-claim .claim-yours{display:inline} .nf-auth{display:none} body.is-auth .nf-guest{display:none} body.is-auth .nf-auth{display:block} .ce-mark{margin:0 0 8px} .ce-mark .ico{width:42px; height:42px; color:#b45309} .card-scan-cta{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin:0 0 16px; padding:10px 14px; background:var(--soft); border-radius:12px; font-size:14px} .vcard-stage{position:relative; margin:12px 0; text-align:center} #vcard-canvas{border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.12); max-width:100%; --card-long:min(440px,70vh)} #vcard-canvas.is-port{height:var(--card-long); width:auto} #vcard-canvas.is-land{width:var(--card-long); height:auto} .vc-view-rotate{position:absolute; top:10px; right:10px; width:34px; height:34px; min-height:0; padding:0; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--tr); box-shadow:0 2px 8px rgba(0,0,0,.12)} .vcard-stage:hover .vc-view-rotate, .vc-view-rotate:focus-visible{opacity:1} .vc-view-rotate:hover{color:var(--fg); border-color:var(--fg)} .vc-view-rotate .ico{width:18px; height:18px; margin:0} @media (hover:none){ .vc-view-rotate{opacity:1} } .vcard-opts{margin-top:14px; align-items:center} .vc-color-lab{display:inline-flex; align-items:center; gap:6px; margin:0} .vcard-opts input[type=color]{width:30px; height:30px; padding:2px} .vcard-actions{margin-top:14px; align-items:center; flex-wrap:wrap} .vc-header-link-lab{margin-top:12px} .modal.vcard-overlay{max-width:min(94vw,660px); width:auto; text-align:center} .vcard-ov-top{display:flex; justify-content:flex-end; min-height:38px; margin-bottom:14px} .vcard-ov-close{width:38px; height:38px; min-height:0; border-radius:50%; border:0; padding:0; background:var(--soft); color:var(--muted); font-size:18px; line-height:1; cursor:pointer} .vcard-ov-close:hover{color:var(--fg); background:var(--border)} .vcard-ov-stage{margin:0 0 12px; text-align:center} .vcard-ov-actions{margin-top:4px; align-items:center; justify-content:center} .vcard-ov-canvas{display:block; margin:0 auto; max-width:92vw; border-radius:16px; box-shadow:0 8px 28px rgba(0,0,0,.18); --card-long:min(58vh,440px)} .vcard-ov-canvas.is-port{height:var(--card-long); width:auto} .vcard-ov-canvas.is-land{width:var(--card-long); height:auto} @media (max-width:760px){ .modal.vcard-overlay{max-width:98vw; padding:10px 8px 14px} .vcard-ov-top{margin-bottom:10px} .vcard-ov-canvas.is-port{height:auto; width:auto; max-width:93vw; max-height:78vh} .vcard-ov-canvas.is-land{height:auto; width:auto; max-width:94vw; max-height:72vh} } .card-page{text-align:center} .card-page .single-nav{text-align:left} .card-page-title{margin:8px 0 6px} .card-page-intro{margin:0 0 16px} .vcard-page-stage{min-height:240px; margin:6px 0 16px; text-align:center} #card-page-canvas{display:block; margin:0 auto; max-width:92vw; border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.12); --card-long:min(70vh,520px)} #card-page-canvas.is-port{height:var(--card-long); width:auto} #card-page-canvas.is-land{width:var(--card-long); height:auto} .vcard-page-actions{align-items:center; justify-content:center} .card-page #card-page-save{display:none} .card-page:not(.card-page-ready) .vcard-page-stage, .card-page:not(.card-page-ready) .vcard-page-actions{visibility:hidden} .site-footer nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 18px; justify-self:end; /* Reihen-Abstand über margin-bottom der Items statt row-gap (R130, Besitzer):
     der 0-hohe .nav-break (Gruppen-Umbruch nach „Sprache") bekäme bei row-gap
     den Abstand BEIDSEITIG → Reihe1→2 = 6px, eine natürliche Umbruch-Lücke nur
     3px → bei 3-zeiliger Legal-Reihe ungleich. Über Item-Margins ist der Break
     (kein a/button) abstandslos → überall gleich 3px. margin-bottom:-3 am nav
     hebt den Überhang der LETZTEN Reihe wieder auf (©/Claim bleiben bündig). */ margin-bottom:-3px; } .site-footer nav a, .site-footer nav button{margin-bottom:3px} .site-footer .nav-break{flex-basis:100%; height:0; margin:0} html.is-preview .site-footer{display:none} .site-footer a{color:var(--muted); text-decoration:none; transition:color var(--tr)} @media (hover:hover){ .site-footer nav a:hover{color:var(--acc)} } .footer-lang{ background:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit; color:var(--muted); transition:color var(--tr); } @media (hover:hover){ .footer-lang:hover{color:var(--acc)} } .lang-note{display:none} .lang-list{display:flex; flex-direction:column; gap:8px; margin-top:14px} .lang-list .lang-opt{justify-content:flex-start; text-align:left} .lang-list .lang-opt.is-active{color:var(--acc); border-color:var(--acc)} .lang-list .lang-soon{opacity:.5; color:var(--muted); cursor:default} .lang-list .lang-soon:hover{border-color:var(--border); box-shadow:none} @media (max-width:720px){ /* Mobil zentrierter Stapel statt Spread-Grid (Besitzer R98/R99): Nav oben
     zentriert, darunter Claim + © */ .site-footer{display:flex; flex-direction:column; align-items:center; gap:8px} .site-footer nav{order:-1; justify-content:center; justify-self:auto; max-width:100%} .foot-copy,.footer-claim{justify-self:auto} } .card{ background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin:16px 0; } .grid{display:grid; gap:18px} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .row{display:flex; align-items:center} .row.gap{gap:10px} .row.between{justify-content:space-between; flex-wrap:wrap; gap:10px} .card .row.between{align-items:center; margin-bottom:8px} .card .row.between h2{margin:0} #editor-app .row select{width:auto} #btn-post{margin-left:auto} p:has(> #btn-logout-all){ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:14px; } html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} .hero{padding:26px 0 6px} .hero .lead{max-width:560px; font-size:17px} #login,#register{scroll-margin-top:84px} .masthead{padding:30px 0 10px; text-align:center} .masthead h1{font-size:clamp(32px,6vw,54px); margin:10px 0 12px} .masthead .lead{max-width:620px; font-size:18px; margin:0 auto} .masthead-claim{font-size:14.5px; margin:18px auto 0} .masthead-claim b{display:none} .masthead-cta{display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin:26px 0 8px} .masthead-demo{margin:14px 0 0} .btn-big{padding:13px 26px; font-size:16.5px; min-height:52px; border-radius:var(--radius)} .masthead-cta a[href="#register"], .masthead-cta a[href="#login"]{display:none} .masthead-cta .btn-primary{background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:none} @media (hover:hover){ .masthead-cta .btn-primary:hover{background:var(--acc); border-color:var(--acc); opacity:.9; transform:translateY(-1px); box-shadow:none} } .masthead .usp-row{justify-content:center; margin-top:22px} .masthead-anim{ --mouth:104px; --cookie:32px; position:relative; height:150px; max-width:520px; margin:0 auto; overflow:hidden; } .masthead-logo{ position:absolute; left:10px; top:50%; width:110px; height:auto; fill:var(--acc); transform:translateY(-50%) rotate(-3deg); transform-origin:50% 50%; animation:mh-chomp .9s ease-in-out infinite; } @keyframes mh-chomp{ 0%,100%{transform:translateY(-50%) rotate(-3deg) scale(1)} 45% {transform:translateY(-50%) rotate(9deg) scale(1.07)} } .cookie{ position:absolute; top:50%; left:var(--mouth); font-size:var(--cookie); line-height:1; opacity:0; transform:translate(480px, -50%); animation:mh-cookie 3.6s linear infinite; } .cookie.c2{animation-delay:.9s} .cookie.c3{animation-delay:1.8s} .cookie.c4{animation-delay:2.7s} @keyframes mh-cookie{ 0% {opacity:1; transform:translate(480px, -50%) rotate(0deg) scale(1)} 70% {opacity:1; transform:translate(66px, -50%) rotate(-260deg) scale(1)} 82% {opacity:1; transform:translate(24px, -50%) rotate(-330deg) scale(.85)} 92%,100%{opacity:0; transform:translate(0, -50%) rotate(-360deg) scale(0)} } .crumb{ position:absolute; top:50%; left:calc(var(--mouth) + 6px); width:6px; height:6px; border-radius:50%; background:#b07d3f; opacity:0; animation:mh-crumb 3.6s linear infinite; } .crumb.cr1{--dx:-16px; --dy:-28px} .crumb.cr2{--dx:10px; --dy:-34px; animation-delay:.9s} .crumb.cr3{--dx:-6px; --dy:30px; animation-delay:1.8s} @keyframes mh-crumb{ 0%,86%{opacity:0; transform:translate(0,0) scale(.5)} 90% {opacity:.9; transform:translate(calc(var(--dx)*.4), calc(var(--dy)*.4)) scale(1)} 100% {opacity:0; transform:translate(var(--dx), var(--dy)) scale(.7)} } @media (prefers-reduced-motion: reduce){ .masthead-logo{animation:none} .cookie,.crumb{display:none} } @media (max-width:520px){ .masthead-anim{--mouth:78px; --cookie:24px; height:110px} .masthead-logo{width:84px} } .usp-row{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:16px 0 4px} .usp-row li{ border:2px solid var(--border); border-radius:999px; padding:5px 13px; font-size:13.5px; background:var(--card); box-shadow:var(--shadow); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:2px solid var(--border); border-radius:var(--radius-s); background:var(--card); color:var(--fg); padding:9px 16px; font:inherit; font-weight:600; font-size:14.5px; line-height:1.4; white-space:nowrap; cursor:pointer; text-decoration:none; transition:transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr); } .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--acc); border-color:var(--acc); color:#fff} .btn-ghost{background:transparent; border-color:transparent; color:var(--muted)} @media (hover:hover){ .btn-ghost:hover{color:var(--ink-acc, var(--acc)); box-shadow:none} } .btn-small{padding:6px 11px; font-size:13px} .btn-danger{color:var(--no)} label.check-inline[for="login-remember"]{width:100%; flex-wrap:wrap} label.check-inline[for="login-remember"] > span:not(.muted){white-space:nowrap} label.check-inline[for="login-remember"] > .muted{flex-basis:100%; text-align:left; margin:2px 0 0} #login-form button[type="submit"]{width:100%} #btn-logout-all{width:100%; min-height:44px; padding:9px 16px; font-size:14.5px; background:var(--card); border-color:var(--border); color:var(--fg)} #register-form button[type="submit"], #btn-claim{width:100%} #btn-logout-all + .muted{display:block; text-align:center; margin-top:6px} label{display:block; font-size:13px; font-weight:700; margin:14px 0 5px} .check-inline{display:flex; align-items:center; gap:8px; font-weight:400; margin:12px 0 0; width:fit-content; max-width:100%} .check-inline input[type="checkbox"]{width:18px; margin:0} input,select,textarea{ width:100%; font:inherit; color:var(--fg); background:var(--bg); border:2px solid var(--border); border-radius:var(--radius-s); padding:9px 12px; transition:border-color var(--tr), box-shadow var(--tr); } #editor-app textarea,#settings-root textarea{display:block} textarea{resize:vertical; max-height:480px; overflow-y:auto} textarea[rows="2"]{max-height:150px} textarea[rows="3"]{max-height:210px} textarea[rows="4"]{max-height:280px} textarea[rows="5"]{max-height:360px} input[type="color"]{ width:44px; height:44px; padding:3px; cursor:pointer; vertical-align:middle; border-radius:50%; } input[type="color"]::-webkit-color-swatch-wrapper{padding:0} input[type="color"]::-webkit-color-swatch{border:none; border-radius:50%} input[type="color"]::-moz-color-swatch{border:none; border-radius:50%} .tag.dev-tag{display:none} body.is-admin .tag.dev-tag{display:inline-block} input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); } input:not([type="checkbox"]):not([type="color"]):not([type="file"]),select{ min-height:44px; line-height:1.4; } input[type="range"]{ border:0; padding:0; min-height:44px; background:transparent; box-shadow:none; accent-color:var(--acc); } input[type="range"]:focus{border:0; box-shadow:none} .range-marks{display:flex; justify-content:space-between; font-size:11px; margin:-6px 2px 0} .btn{min-height:44px} .btn-small{min-height:34px} form .btn{margin-top:16px} .row .btn{margin-top:0} .card .row + .row,.fields .row + .row{margin-top:12px} select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:34px; } .box-editor-item .meta select{padding-right:30px; background-position:right 8px center; background-size:14px} .card.narrow{margin-left:auto; margin-right:auto} .social-edit-rows{display:flex; flex-direction:column; gap:6px} .social-edit-rows + .btn{margin-top:12px} .btn:disabled{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important} input[type="checkbox"]{ appearance:none; -webkit-appearance:none; width:18px; height:18px; min-height:0; padding:0; margin:0; flex:0 0 auto; border:2px solid var(--border); border-radius:5px; background:var(--bg); cursor:pointer; display:inline-grid; place-content:center; transition:background var(--tr), border-color var(--tr); } input[type="checkbox"]:checked{background:var(--acc); border-color:var(--acc)} input[type="checkbox"]:checked::before{ content:''; width:10px; height:10px; background:#fff; clip-path:polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 80% 0%, 38% 67%); } .form-result{min-height:1.4em; font-size:14px} .form-result a{word-break:break-all} .form-result:empty{display:none; min-height:0; margin:0} .check-state{min-height:1.2em; font-size:13px; margin:4px 0 0} .wizard-step .check-state:empty{min-height:0; margin:0} .state-available{color:var(--ok)} .state-reserved{color:var(--warn)} .state-taken,.state-restricted,.state-invalid,.state-policy{color:var(--no)} .tag{ display:inline-block; padding:2px 9px; border:1.5px solid var(--acc); color:var(--acc); border-radius:999px; font-size:12px; vertical-align:middle; } .profile-handle .tag{font-size:10.5px; padding:1px 7px; border-width:1px} @supports (color: oklch(from red l c h)){ :root, .profile{ --ink-acc: oklch(from var(--acc) min(l, 0.6) c h); } html[data-theme="dark"], html[data-theme="dark"] .profile{ --ink-acc: oklch(from var(--acc) max(l, 0.62) c h); } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]), html:not([data-theme="light"]):not([data-theme="dark"]) .profile{ --ink-acc: oklch(from var(--acc) max(l, 0.62) c h); } } a, .acc, .tag:not(.tag-plus){ color: var(--ink-acc, var(--acc)); } .tag:not(.tag-plus){ border-color: var(--ink-acc, var(--acc)); } } .tag-plus{background:var(--acc); color:#fff; font-weight:700} .badge-verified{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--acc); color:#fff; font-size:13px; vertical-align:middle; margin-left:4px; position:relative; top:-2px; } .badge-verified .ico{stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round} html[data-theme="dark"] .badge-verified{color:#000} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .badge-verified{color:#000} } .site-verified-inline{ display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; flex:0 0 auto; border:1.5px solid var(--ink-acc, var(--acc)); border-radius:50%; color:var(--ink-acc, var(--acc)); } .site-verified-inline .ico{ width:8px; height:8px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round } .cc-input-wrap{ position:relative; } .cc-field-badge{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; } .cc-field-badge .ico{ width:9px; height:9px; } .cc-value.cc-value-verified{ padding-right:34px; } .field-verify-wrap{ position:relative; flex:1; min-width:0; } .field-verify-wrap > input{ width:100%; } .website-verify-badge{ position:absolute; right:10px; top:50%; transform:translateY(-50%); } #f-import-url.has-verify{ padding-right:34px; } .social-chip.social-chip-wide{ width:auto; border-radius:999px; padding:0 12px; gap:6px; } .social-chip .chip-label{ font-size:13px; font-weight:600; line-height:1; } .social-chip .site-verified-inline{ width:13px; height:13px; } .contact-row{ display:flex; flex-direction:column; gap:6px; } .cc-main{ align-items:flex-start; } .cc-main .social-drag{ height:44px; display:inline-flex; align-items:center; } .cc-stack{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; } .cc-verify{ display:inline-flex; align-items:center; gap:8px; } @supports (color: oklch(from red l c h)){ .profile{ --acc-safe: oklch(from var(--acc) clamp(0, l, 0.72) c h); --chk-bg: oklch(from var(--acc) clamp(0, l, 0.6) c h); --chk-fg: #fff; } html[data-theme="dark"] .profile{ --acc-safe: oklch(from var(--acc) clamp(0.5, l, 1) c h); --chk-bg: oklch(from var(--acc) clamp(0.5, l, 0.72) c h); --chk-fg: #000; } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .profile{ --acc-safe: oklch(from var(--acc) clamp(0.5, l, 1) c h); --chk-bg: oklch(from var(--acc) clamp(0.5, l, 0.72) c h); --chk-fg: #000; } } .profile .avatar:not(.avatar-img), .tag-plus{ background:var(--acc-safe, var(--acc)); color:oklch(from var(--acc-safe, var(--acc)) clamp(0, (0.62 - l) * 1000, 1) 0 h); } .profile .badge-verified{ background:var(--chk-bg); color:var(--chk-fg); } .profile input[type="checkbox"]:checked{ background:var(--chk-bg); border-color:var(--chk-bg); } .profile input[type="checkbox"]:checked::before{ background:var(--chk-fg); } @media (hover:hover){ .profile a.box-link:hover{ border-color:var(--acc-safe, var(--acc)); } } input[type="checkbox"]:checked::before{ background:oklch(from var(--acc) clamp(0, (0.62 - l) * 1000, 1) 0 h); } } .profile{max-width:620px; margin:0 auto} .profile.has-banner{margin-top:8px} .profile-head{padding:14px 0 6px} .profile-head > p:last-child{margin-bottom:0} .profile-head > p:has(#share-btn){margin-bottom:0} .guest-follow-cta{margin:6px 0 0} .guest-follow-cta .guest-cta-link{font-weight:600} body.is-auth .guest-follow-cta{display:none} .avatar{ width:86px; height:86px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:var(--acc); color:#fff; font-size:36px; font-weight:700; border:2px solid var(--border); box-shadow:var(--shadow); position:relative; z-index:2; } .profile .avatar.avatar-rounded{border-radius:14px} .modal .avatar.avatar-rounded{border-radius:14px} .profile .avatar.avatar-cutout{border:0; background:transparent; box-shadow:none} .profile .avatar-dark{display:none} html[data-theme="dark"] .profile .avatar-light{display:none} html[data-theme="dark"] .profile .avatar-dark{display:flex} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .profile .avatar-light{display:none} html:not([data-theme="light"]) .profile .avatar-dark{display:flex} } html[data-theme="dark"] .profile .avatar.avatar-invert{filter:invert(1)} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .profile .avatar.avatar-invert{filter:invert(1)} } .profile.has-banner .banner{margin-bottom:0} .profile.has-banner .profile-head{padding-top:0} .profile-name{font-size:26px; margin-bottom:2px} .profile-handle{color:var(--muted); margin-top:0} .profile-bio{max-width:460px; margin:10px auto 0} .box-stack{display:flex; flex-direction:column; gap:16px; margin-top:16px} .box{ background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:16px 18px 13px; box-shadow:var(--shadow); margin:0; transition:transform var(--tr), border-color var(--tr), box-shadow var(--tr); } .box h3{margin-bottom:8px} .box p:last-child{margin-bottom:0} .box-text-notitle > p:first-child{margin-top:0} .section-about, .section-highlights, .section-press{padding:16px 18px 16px} .section-about h2, .section-highlights h2, .section-press h2{margin-bottom:8px} .section-about > :last-child, .section-highlights > :last-child, .section-press > :last-child{margin-bottom:0} .profile:not(.single-page) .box-socials, .profile:not(.single-page) .box-posts{padding-bottom:16px} body[data-posts-hide-empty] .profile:not(.single-page) .box-posts[data-posts-empty="1"]{display:none} .profile:not(.single-page) .box-posts{padding-left:16px; padding-right:16px} .profile:not(.single-page) .box-posts > h3{margin-left:2px; margin-right:2px} .profile:not(.single-page) .box-posts h3{margin-bottom:12px} .draft-hint{margin-top:13px} @media (max-width:720px){ .draft-hint-you{display:block} } .profile:not(.single-page) .box-posts:not(:has(.draft-hint)){padding-bottom:16px} a.box-link{ display:flex; justify-content:space-between; align-items:center; gap:12px; text-decoration:none; color:var(--fg); font-weight:600; } .profile a.box-link{padding-top:14px; padding-bottom:14px} @media (hover:hover){ a.box-link:hover{transform:translateY(-2px); border-color:var(--acc)} } .box-link-host{color:var(--muted); font-size:13px; font-weight:400; white-space:nowrap} .box-link-arrow{color:var(--muted); font-size:14px; font-weight:400; white-space:nowrap; opacity:0; transition:opacity .15s ease} a.box-link:hover .box-link-arrow{opacity:1} @media (hover:none){.box-link-arrow{opacity:.5}} .box-link-img{ width:46px; height:46px; object-fit:cover; flex:0 0 auto; border:1.5px solid var(--border); border-radius:var(--radius-s); } .box-link-label{flex:1} .coupon{ display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; border:2px dashed var(--ink-acc, var(--acc)); color:var(--ink-acc, var(--acc)); border-radius:8px; padding:5px 12px; font-size:15px; letter-spacing:.06em; } .countdown{font-variant-numeric:tabular-nums} .custom-escaped{ background:var(--soft); border-radius:8px; padding:10px 12px; overflow:auto; font-size:13px; white-space:pre-wrap; word-break:break-word; } .subscribe-hint{margin-top:26px} .subscribe-card summary{ cursor:pointer; font-size:18px; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; } .subscribe-card summary::-webkit-details-marker{display:none} .sub-fold{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); transition:background var(--tr), color var(--tr); } .sub-fold::before{content:'▸'; transition:transform var(--tr)} .sub-fold:hover{background:var(--soft); color:var(--fg)} .subscribe-card[open] .sub-fold::before{transform:rotate(90deg)} .subscribe-card .subscribe-body{margin-top:10px} .subscribe-card .sub-acct-row{margin-top:10px} .subscribe-card .sub-acct-state{display:block; margin-bottom:8px} .subscribe-card .sub-acct-gate, .subscribe-card .sub-guest-gate{margin-top:10px} .report-row{display:flex; justify-content:center; align-items:center; gap:14px; margin:30px 0 4px} .report-link{ background:none; border:0; padding:0; cursor:pointer; color:var(--muted); font-size:12px; text-decoration:none; } .report-link:hover{color:var(--no)} .post-admin{margin:4px 0 0; display:flex; gap:12px} .post-media + .post-admin{margin-top:14px} .post-admin button{ background:none; border:0; padding:0; cursor:pointer; color:var(--muted); font-size:12px; text-decoration:none; min-height:0; } @media (hover:hover){ .post-admin button:hover{color:var(--ink-acc, var(--acc))} } .badge-s{width:16px; height:16px; font-size:10px; margin-left:4px} .avatar-wrap{ position:relative; display:block; width:fit-content; margin:0 auto 14px; cursor:pointer; z-index:2; } .avatar-wrap .avatar{z-index:auto} .avatar-edit-badge{ position:absolute; right:5%; bottom:5%; width:28px; height:28px; border-radius:50%; background:var(--fg); color:var(--bg); border:2px solid var(--bg); box-shadow:0 1px 4px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; z-index:1; opacity:0; transition:opacity var(--tr); pointer-events:none; } .avatar-edit-badge .ico{width:14px; height:14px} .avatar-wrap::after{ content:""; position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.22); opacity:0; transition:opacity var(--tr); pointer-events:none; } .avatar-wrap-rounded::after{border-radius:14px} .avatar-wrap:hover .avatar-edit-badge{opacity:1} .avatar-wrap:hover::after{opacity:1} .avatar-wrap.avatar-drop{outline:2px dashed var(--acc-safe, var(--acc)); outline-offset:5px; border-radius:50%} .avatar-wrap.avatar-drop.avatar-wrap-rounded{border-radius:14px} @media (hover:none){ .avatar-edit-badge{opacity:1} } .feed-controls select{width:auto} .feed-controls .feed-own{margin:0} .feed-view-toggle{display:inline-flex; align-items:center; gap:6px} .feed-view-toggle .tg-ico{font-size:14px; line-height:1} .backlink{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--border); border-radius:999px; font-size:13px; font-weight:600; color:var(--muted); } @media (hover:hover){ .backlink:hover{color:var(--ink-acc, var(--acc)); border-color:var(--acc-safe, var(--acc))} } .profile.single-page{max-width:560px} .profile.single-page .box:not(.box-link){padding:14px 20px 13px} .profile.single-page .box:not(.box-posts):not(.box-link){padding-top:16px} .profile.single-page .post-item:first-child{padding-top:0} #following-root .post-item:first-child{padding-top:0} .profile.single-page > p:has(> .backlink){margin:0 0 16px} .single-nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center} .profile.single-page .box-stack{margin-top:0} .single-author{display:flex; align-items:center; gap:4px; margin:0 0 14px; font-size:20px; font-weight:700} .single-author a{color:var(--fg); display:inline-flex; align-items:center; gap:10px} @media (hover:hover){ .single-author a:hover{color:var(--ink-acc, var(--acc))} } .single-author .badge-verified{top:0; margin-left:0; flex:0 0 auto} #plus-upgrade-badge{display:none} .card-folded h2 #plus-upgrade-badge{display:inline-block; margin-left:8px} #editor-app section.card, #admin-app section.card{position:relative} .card-fold{ min-height:0; padding:2px 10px; font-size:17px; position:absolute; top:17px; right:14px; } .card-head-keep{padding-right:44px} .card-folded > :not(.card-head-keep){display:none} #editor-app .card-folded > :not(.card-head-keep), #admin-app .card-folded > :not(.card-head-keep){display:none} .card-folded .card-head-keep:not(h2) > :not(h2):not(.card-fold):not(.follow-bio){display:none} .card-folded .boxes-head h2{margin-bottom:0} .card-folded{cursor:pointer} .card-head-clickable{cursor:pointer} [data-pv-edit]{cursor:pointer} .profile-bio-add{font-style:italic} @media (hover:hover){ [data-pv-edit]:hover{outline:2px dashed var(--acc-safe, var(--acc)); outline-offset:4px; border-radius:6px} } [data-pv-edit][contenteditable="true"]{outline:2px solid var(--acc); outline-offset:4px; cursor:text} .card-folded .card-head-keep{margin-bottom:0} .card-folded h2{margin-bottom:0} .editor-topbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px} .save-state{font-size:13px; color:var(--ok); min-width:90px; text-align:right} .box-editor-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px} .box-editor-item{ border:2px solid var(--border); border-radius:var(--radius); background:var(--card); padding:14px; box-shadow:var(--shadow); transition:opacity var(--tr), border-color var(--tr); } .box-editor-item.dragging{opacity:.45; border-style:dashed} .box-editor-item.collapsed .fields,.box-editor-item.collapsed .meta{display:none} .box-editor-item .head{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .btn.card-fold,.btn.box-fold{ font-size:0; padding:0; min-width:0; min-height:0; width:30px; height:30px; border-radius:50%; border:0; box-shadow:none; background:transparent; color:var(--muted); display:inline-flex; } .btn.box-fold{position:relative; margin-left:auto} .btn.card-fold:hover,.btn.box-fold:hover{ background:var(--soft); color:var(--fg); border:0; box-shadow:none; transform:none; } .btn.card-fold::before,.btn.box-fold::before{ content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; background-color:currentColor; transform:translate(-50%,-50%); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.29 12 12.87 7.41 8.29 6 9.7 12 15.7 18 9.7z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.29 12 12.87 7.41 8.29 6 9.7 12 15.7 18 9.7z'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--tr); } .card-folded .card-fold::before, .box-editor-item.collapsed .box-fold::before{transform:translate(-50%,-50%) rotate(-90deg)} .btn.btn-del{color:var(--muted); background:transparent; border-color:transparent; display:inline-flex; align-items:center; gap:5px; box-shadow:none} .btn.btn-del .ico{width:15px; height:15px} .btn.btn-del:hover{color:var(--no); background:transparent; border-color:transparent; box-shadow:none; transform:none} .btn.btn-x{font-size:15px; padding:0; min-width:0; min-height:0; width:34px; height:34px; flex:0 0 auto; border-radius:50%; color:var(--muted); background:transparent; border-color:transparent; box-shadow:none; display:inline-flex; align-items:center; justify-content:center} .btn.btn-x:hover{color:var(--no); background:var(--soft); border-color:transparent; box-shadow:none; transform:none} .boxes-head{display:flex; flex-wrap:wrap; align-items:center; gap:16px 10px; margin-bottom:14px} .boxes-head h2{margin:0} .boxes-head #btn-collapse-all{margin:-5px 0} .boxes-head .addbtns{display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%; width:auto} .boxes-head .addbtns .btn{padding:8px 14px; font-size:13.5px; min-height:38px} #editor-app h2:has(.tag),#admin-app h2:has(.tag){display:flex; align-items:center; flex-wrap:wrap; gap:9px} .post-edit-list li > .row.gap{align-items:center} .post-edit-list li .check-inline{margin:0} .preview-card{padding-top:16px; padding-bottom:14px} .preview-card > .row.between{margin-bottom:0} .preview-card #preview-wrap{margin-top:16px} html.is-preview .site-main{padding-bottom:18px} .post-edit-list{display:flex; flex-direction:column; gap:10px} .post-audience-note{margin:12px 0 0; display:flex; align-items:center; gap:6px} .post-audience-note .ico{flex:0 0 auto} .card:not(.card-folded):has(> #post-audience-note:not([hidden])){padding-bottom:12px} .box-editor-item .head input[type="text"]{flex:1; min-width:160px} .box-editor-item .head .btn-del{margin-left:auto} .drag-handle{cursor:grab; font-size:18px; color:var(--muted); user-select:none; touch-action:none} .type-pill{font-size:11px; text-transform:uppercase; letter-spacing:.08em; border:1.5px solid var(--border); border-radius:999px; padding:2px 8px; color:var(--muted); flex:0 0 auto; width:74px; text-align:center; box-sizing:border-box; margin-right:4px} .box-editor-item .fields{margin-top:10px} .box-editor-item .meta{ display:flex; gap:8px 12px; flex-wrap:wrap; margin-top:12px; align-items:center; background:var(--soft); border-radius:var(--radius-s); padding:8px 12px; } .box-editor-item .meta .check-inline{margin:0} .box-editor-item .meta > .box-slug{margin-left:auto; padding-right:6px; display:inline-flex; align-items:center; gap:8px} .box-slug-suggest{background:none; border:0; padding:0; min-height:0; cursor:pointer; font:inherit; font-size:13px; color:var(--acc)} .box-slug-suggest:hover{text-decoration:underline} .box-slug-val{cursor:pointer; border-radius:3px; border-bottom:1px dashed transparent; outline:none} .box-slug-val:hover{color:var(--fg); border-bottom-color:var(--border)} .box-slug-val[contenteditable="true"]{ cursor:text; color:var(--fg); border-bottom-color:transparent; outline:2px solid var(--acc); outline-offset:2px; background:var(--bg); } .box-editor-item .meta select{width:auto; min-height:34px; padding:4px 10px; font-size:13.5px; background-color:var(--card)} .status-published,.status-draft{font-size:13px} .status-published{color:var(--ok); font-weight:700} .status-draft{color:var(--warn); font-weight:700} .stats{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:0} @media (max-width:900px){ .stats{grid-template-columns:repeat(3,1fr)} } @media (max-width:560px){ .stats{grid-template-columns:repeat(2,1fr)} } .stats div{border:2px solid var(--border); border-radius:var(--radius-s); padding:12px; background:var(--card)} .stats dt{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em} .stats dd{margin:4px 0 0; font-size:24px; font-weight:700} .toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--fg); color:var(--bg); border-radius:var(--radius-s); padding:10px 18px; font-size:14px; box-shadow:var(--shadow); z-index:200; } .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:300; animation:fwd-fade .18s ease; } .modal{max-width:420px; width:100%; margin:0; animation:fwd-pop .18s ease} .modal-actions{margin-top:16px} .modal.avatar-confirm{max-width:500px} .modal.avatar-confirm .modal-actions{flex-wrap:wrap; justify-content:center} .auth-modal{position:relative; max-height:min(86vh, 720px); overflow-y:auto} .modal-x{ position:absolute; top:10px; right:12px; width:32px; height:32px; min-height:0; border:0; background:none; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; padding:0; border-radius:50%; } .modal-x:hover{color:var(--fg); background:var(--soft)} .share-sys{display:inline-flex; align-items:center; gap:6px} .share-sys .ico{margin:0} .share-modal{position:relative} .share-copy-corner{position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:5px; padding:5px 10px} .share-copy-corner .ico{margin:0} @media (max-width:720px), (hover:none){ .share-modal .share-sys-text, .share-modal .share-copy-corner-text{display:none} } .linklike{ background:none; border:0; padding:0; font:inherit; font-size:inherit; color:var(--acc); cursor:pointer; } .linklike:hover{opacity:.8} .auth-switch{margin-top:14px} .btn-danger-solid{background:var(--no-solid); border-color:var(--no-solid); color:#fff} body.modal-open{overflow:hidden} @keyframes fwd-fade{from{opacity:0}} @keyframes fwd-pop{from{opacity:0; transform:translateY(8px) scale(.97)}} .ico{width:1em; height:1em; fill:currentColor; vertical-align:-0.125em} .ico.pin-tilt{transform:rotate(45deg)} .box-lock .ico{width:22px; height:22px} .subscribe-card summary span{display:inline-flex; align-items:center; gap:8px} .subscribe-card summary .ico{color:var(--acc)} .sub-result-mark{margin:0 0 6px; line-height:1} .sub-icon{width:56px; height:56px} .sub-result-mark.is-ok{color:var(--ok)} .sub-result-mark.is-acc{color:var(--acc)} .sub-result-mark.is-warn{color:var(--warn)} :focus-visible{outline:3px solid var(--acc-safe, var(--acc)); outline-offset:2px} @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} } @media (max-width:720px){ .grid-2{grid-template-columns:1fr} .site-main{padding:20px 14px 48px} .editor-topbar{flex-direction:column; align-items:center; text-align:center} .editor-topbar h1{text-align:center} .editor-topbar .row{justify-content:center; flex-wrap:wrap; width:100%} .editor-topbar .save-state{min-width:0; text-align:center} .post-edit-list li{flex-direction:column; align-items:stretch} .post-edit-list li > .row.gap{flex-wrap:wrap; justify-content:flex-start} .post-edit-list li > .row.gap select{flex:1 1 auto} .boxes-head .addbtns{width:100%} .nav-burger{display:flex} .nav-auth{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:6px; background:var(--bg); border-bottom:2px solid var(--border); padding:10px 14px 14px; box-shadow:var(--shadow); z-index:60; } .nav-auth.open{display:flex; animation:fwd-fade .18s ease} .nav-auth .btn{justify-content:flex-start; width:100%; font-size:17px; padding:14px 16px} body.is-auth.nav-menu-open::before{content:""; position:fixed; inset:0; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:49; animation:fwd-fade .18s ease} body:not(.is-auth) .nav-burger{display:none} body.is-auth .nav-tools{display:inline-flex; align-items:center; gap:12px; margin-left:auto} body.is-auth .theme-toggle-alt{display:inline-flex} body.is-auth .nav-tools .nav-burger{margin-left:0} body.is-auth .nav-auth #theme-toggle{display:none} body:not(.is-auth) .nav-auth{ display:flex; position:static; flex-direction:row; align-items:center; gap:8px; background:none; border:0; padding:0; box-shadow:none; z-index:auto; -webkit-backdrop-filter:none; backdrop-filter:none; } body:not(.is-auth) .nav-auth .btn{justify-content:center; width:auto; font-size:13px; padding:6px 11px} } .banner{ height:210px; border:2px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:20px; position:relative; background:var(--soft); } .banner img,.banner video{width:100%; height:100%; object-fit:cover; display:block} .banner-video .banner-vid-ctl{position:absolute; left:10px; bottom:10px; width:28px; height:28px; z-index:2; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; cursor:pointer; background:rgba(0,0,0,.5); color:#fff; padding:0} .banner-video .banner-vid-ctl .ico{width:14px; height:14px; fill:#fff} .banner-video .banner-vid-ctl:hover{background:rgba(0,0,0,.7)} .parallax img{will-change:transform; transform:scale(1.2)} .avatar-img{ width:112px; height:112px; border-radius:50%; object-fit:cover; border:2px solid var(--border); display:block; margin:0 auto 12px; } .avatar-img, .banner img{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; pointer-events:none; } .slider{ position:relative; border:2px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:16px 0 18px; background:var(--soft); } .slider .slides{display:flex; transition:transform .35s ease} .slider .slides img{width:100%; flex:0 0 100%; object-fit:cover; max-height:340px; display:block} .slider-btn{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; cursor:pointer; border:2px solid var(--border); background:var(--card); color:var(--fg); display:flex; align-items:center; justify-content:center; padding:0; line-height:1; transition:transform var(--tr), opacity var(--tr); opacity:0; } .slider-btn .ico{width:20px; height:20px} .slider:hover .slider-btn,.slider:has(.slider-btn:focus-visible) .slider-btn{opacity:1} .slider-btn:hover{transform:translateY(-50%) scale(1.08)} .slider-btn.prev{left:10px} .slider-btn.next{right:10px} @media (hover:none){.slider-btn{opacity:1}} .highlight-list,.press-list{margin:0; padding-left:18px} .highlight-list li,.press-list li{margin:8px 0; line-height:1.45; padding-left:2px} .highlight-list li:first-child,.press-list li:first-child{margin-top:0} .highlight-list li:last-child,.press-list li:last-child{margin-bottom:0} .highlight-list li::marker,.press-list li::marker{color:var(--acc)} .sub-row input{flex:1} .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .custom-html{overflow-wrap:anywhere} .custom-html > :first-child{margin-top:0} .custom-html > :last-child{margin-bottom:0} .custom-html img{max-width:100%; height:auto; border-radius:var(--radius-s)} .custom-html pre{background:var(--soft); padding:10px; border-radius:var(--radius-s); overflow:auto} .custom-html blockquote{border-left:3px solid var(--acc); margin:8px 0; padding:4px 12px; color:var(--muted)} .plus-theme-minimal .card,.plus-theme-minimal .box,.plus-theme-minimal .banner,.plus-theme-minimal .slider{ border-width:1px; box-shadow:none; } .plus-theme-electric .card,.plus-theme-electric .box{box-shadow:5px 5px 0 var(--acc)} .plus-theme-mono .avatar,.plus-theme-mono .avatar-img,.plus-theme-mono .banner,.plus-theme-mono .slider{filter:grayscale(1)} .plus-theme-noir .card,.plus-theme-noir .box{ background:var(--fg); color:var(--bg); border-color:var(--fg); } .plus-theme-noir .box a,.plus-theme-noir .card a,.plus-theme-noir .muted{color:var(--bg); opacity:.85} html[data-theme="dark"] .plus-theme-noir .card, html[data-theme="dark"] .plus-theme-noir .box{ background:#101010; color:#f0f0f0; border-color:rgba(255,255,255,.12); } html[data-theme="dark"] .plus-theme-noir .box a, html[data-theme="dark"] .plus-theme-noir .card a, html[data-theme="dark"] .plus-theme-noir .muted{color:#f0f0f0; opacity:.85} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .plus-theme-noir .card, html:not([data-theme="light"]):not([data-theme="dark"]) .plus-theme-noir .box{ background:#101010; color:#f0f0f0; border-color:rgba(255,255,255,.12); } html:not([data-theme="light"]):not([data-theme="dark"]) .plus-theme-noir .box a, html:not([data-theme="light"]):not([data-theme="dark"]) .plus-theme-noir .card a, html:not([data-theme="light"]):not([data-theme="dark"]) .plus-theme-noir .muted{color:#f0f0f0; opacity:.85} } .glass{position:relative} .glass::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(420px 320px at 12% 8%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%), radial-gradient(520px 380px at 88% 30%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 70%), radial-gradient(460px 360px at 28% 94%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 70%); } @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){ .glass .card,.glass .box{ background:color-mix(in srgb, var(--card) 62%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); } .glass input,.glass select,.glass textarea{ background-color:color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } } .feed-head{display:flex; justify-content:space-between; align-items:center; margin:26px 0 4px} .feed-head h2{margin:0} @media (max-width:720px){ .home-continue{display:block; margin-top:2px} } #home-session-user{color:inherit; font-weight:700} #home-session{margin-top:0} html.is-auth #home-hero, html.is-auth #home-demo-hint, html.is-auth #home-auth, html.is-auth .auth-guided{display:none !important} .home-preload-skel{display:none} html.is-auth .home-preload-skel{display:flex; align-items:center; justify-content:center; min-height:46vh} .home-preload-logo{width:54px; height:54px; opacity:.5; animation:preloadPulse 1.3s ease-in-out infinite} @keyframes preloadPulse{0%,100%{opacity:.3; transform:scale(.96)} 50%{opacity:.65; transform:scale(1)}} @media (prefers-reduced-motion: reduce){ .home-preload-logo{animation:none} } html.is-auth #nav-auth [data-nav-guest]{display:none} @media (min-width:721px){ html.is-auth #nav-auth > :not(#theme-toggle){animation:navFadeIn .26s ease both} } @keyframes navFadeIn{from{opacity:0; transform:translateY(-2px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion: reduce){ html.is-auth #nav-auth > :not(#theme-toggle){animation:none} } #home-session-edit{display:inline-flex; align-items:center; gap:6px} #home-session-edit .ico{margin:0} .home-actions-compact .home-edit-text{display:none} .feed-item{display:block; text-decoration:none; color:var(--fg); position:relative; padding-bottom:13px} @media (hover:hover){ .feed-item:hover{transform:translateY(-2px); border-color:var(--acc)} } .feed-meta{margin:0 0 8px; line-height:1.45} .feed-body{margin:0; font-weight:600; line-height:1.4; overflow-wrap:anywhere} .feed-tok{color:var(--ink-acc, var(--acc))} .feed-item .post-content{overflow-wrap:anywhere} .feed-item .feed-body + .muted{margin-top:5px} .feed-item .coupon{margin-top:8px} .feed-list.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; grid-auto-rows:1px; align-items:start; margin-top:16px} .feed-list.grid .feed-item{margin:0} .feed-list.grid.grid-single{grid-template-columns:minmax(0,1fr)} .feed-list:not(.grid) .feed-item{margin:16px 0} @media (max-width:720px){ .feed-list.grid{grid-template-columns:minmax(0,1fr)} .feed-view-toggle{display:none} .feed-head{flex-direction:column; align-items:stretch; gap:8px} .feed-head .feed-controls{justify-content:flex-start} } .feed-newbar{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 auto 14px; padding:8px 16px; cursor:pointer; background:var(--acc); color:#fff; border:0; border-radius:999px; font-weight:700; font-size:14px; box-shadow:var(--shadow); transition:transform var(--tr), opacity var(--tr); } .feed-newbar .ico{width:16px; height:16px} .feed-newbar:hover{opacity:.9; transform:translateY(-1px)} .feed-new-badge{ margin-left:auto; margin-right:-4px; align-self:center; background:var(--acc); color:#fff; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:700; animation:feed-new-pulse 1.4s ease-in-out infinite; } @keyframes feed-new-pulse{ 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent)} 50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--acc) 0%, transparent)} } .feed-newinline{ margin:-2px 0 10px; font-size:13px; font-weight:600; color:var(--acc); animation:feed-newinline-pulse 1.6s ease-in-out infinite; } .feed-newinline .feed-newinline-link{color:var(--acc); font-weight:700} @keyframes feed-newinline-pulse{0%,100%{opacity:1} 50%{opacity:.5}} .post-quick{margin:0 0 14px} .post-quick textarea{margin-bottom:10px; display:block} .post-quick .btn{margin-top:0} .post-quick .row select{width:auto} .post-quick .row .btn{margin-left:auto} .qp-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-right:auto; align-self:flex-end; } .qp-meta .char-count{margin:0} .qp-meta .check-inline{margin:0; font-size:12px; gap:6px} .qp-meta .check-inline input[type="checkbox"]{width:15px; height:15px} .qp-meta .check-inline input[type="checkbox"]:checked::before{width:8px; height:8px} #f-bio + .char-count{text-align:left; margin-top:2px} .post-quick .row .qp-meta ~ .btn{margin-left:0} #editor-app .row .qp-meta ~ #btn-post{margin-left:0} .post-list{list-style:none; margin:0; padding:0} .post-item{border-bottom:1px solid var(--soft); padding:10px 0} .post-item:last-child{border-bottom:0; padding-bottom:0} .profile:not(.single-page) .box-posts .post-item{ border:1px solid var(--border); border-radius:10px; padding:11px 16px; margin-bottom:16px; } .profile:not(.single-page) .box-posts .post-item:not(:has(.post-src-badge)){padding-top:12px} .profile:not(.single-page) .box-posts .post-item:last-child{ margin-bottom:0; padding-bottom:11px; } .profile:not(.single-page) .box-posts .post-item:has(.post-media), .profile:not(.single-page) .box-posts .post-item:last-child:has(.post-media){padding-bottom:14px} body[data-post-media-pos="above"] .profile:not(.single-page) .box-posts .post-item:has(.post-media), body[data-post-media-pos="above"] .profile:not(.single-page) .box-posts .post-item:last-child:has(.post-media), body[data-post-media-pos="above"] .profile.single-page.posts-cards .box-posts .post-item:has(.post-media), body[data-post-media-pos="above"] .profile.single-page.posts-cards .box-posts .post-item:has(.post-media):last-child{padding-bottom:11px} body[data-post-media-pos="above"] .profile:not(.single-page) .box-posts .post-item:has(.post-admin), body[data-post-media-pos="above"] .profile:not(.single-page) .box-posts .post-item:last-child:has(.post-admin), body[data-post-media-pos="above"] .profile.single-page.posts-cards .box-posts .post-item:has(.post-admin), body[data-post-media-pos="above"] .profile.single-page.posts-cards .box-posts .post-item:has(.post-admin):last-child{padding-bottom:14px} .post-item .post-content{margin:0 0 4px; white-space:pre-wrap; overflow-wrap:anywhere} .post-src-badge{display:inline-flex; align-items:center; gap:6px; margin-top:8px; max-width:100%; padding:4px 9px; border:1px solid var(--border); border-radius:999px; background:var(--soft); font-family:inherit; font-size:11px; font-weight:600; line-height:1.3; letter-spacing:.03em; color:var(--muted); cursor:pointer} @media (hover:hover){ .post-src-badge[data-href]:hover{border-color:var(--acc-safe); color:var(--fg)} } .post-src-logo{width:15px; height:15px; border-radius:3px; object-fit:cover; flex:0 0 auto} .post-src-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .post-src-via{opacity:.7; letter-spacing:.04em; text-transform:lowercase; font-weight:500} .post-src-avatar{width:16px; height:16px; border-radius:50%; object-fit:cover; flex:0 0 auto} body[data-og-badge-pos="top"] .post-src-badge{margin:0 0 8px} body[data-og-badge-pos="top"] .feed-item .feed-meta:has(+ .post-src-badge:not(.post-src-shared)){margin-bottom:6px} .post-src-badge.post-src-shared{padding:0; border:0; background:none; border-radius:0; gap:6px; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--fg)} .post-src-badge.post-src-shared:not(:has(.post-src-logo)){gap:4px} .post-src-badge.post-src-shared:not([data-href]){cursor:default} .post-src-shared .post-src-shared-pre{color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; flex:0 0 auto} .post-src-shared .post-src-logo-sq{width:18px; height:18px; border-radius:4px} @media (hover:hover){ .post-src-shared[data-href]:hover .post-src-name{color:var(--ink-acc)} } .post-src-badge.post-src-shared:not(.post-src-shared-ov){display:flex; width:fit-content; margin:0 0 8px} .feed-meta:has(+ .post-src-badge.post-src-shared){margin-bottom:3px} .post-item > .post-src-badge.post-src-shared{margin-top:4px} .media-ov-author .media-ov-via-row{flex-basis:100%; display:flex; margin-top:3px} .media-ov-author .post-src-shared-ov{margin:0; font-size:12px} .media-ov-author .post-src-shared-ov .post-src-shared-pre{font-size:12px} .media-ov-author .post-src-shared-ov .post-src-logo-sq{width:16px; height:16px} .media-ov-author .post-src-shared-ov .post-src-name{font-size:12px} .post-share-embed{margin:8px 0 2px; padding:11px 13px 9px; border:1px solid var(--soft); border-radius:6px; background:var(--soft); --emb-media-radius:4px} html[data-theme="dark"] .post-share-embed{border-color:var(--border)} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .post-share-embed{border-color:var(--border)} } .post-share-embed:last-child{margin-bottom:0} .post-share-embed:has(+ time), .post-share-embed:has(+ .post-share){margin-bottom:3px} .post-item > .post-media:has(+ time), .post-item > .post-media:has(+ .post-share){margin-bottom:3px} .post-share-embed .post-share-text{margin:0 0 7px} .post-share-embed .post-share-text:last-child{margin-bottom:0} .post-share-embed:has(.post-media){padding-bottom:13px} .post-share-embed .post-media{margin-top:7px; margin-bottom:0} .post-share-embed .post-media:first-child{margin-top:0} .post-share-embed .post-media-single, .post-share-embed .post-media-video .post-video, .post-share-embed .post-gallery.pg-slideshow{border-radius:var(--emb-media-radius)} .post-content:empty{display:none} .post-content:empty + .post-share-embed, .post-item:has(> .post-content:empty) .post-share-embed{margin-top:2px; margin-bottom:4px; padding:0; border:0; background:none; --emb-media-radius:6px} .post-share-gone{display:flex; align-items:center; gap:6px; padding:9px 13px; color:var(--muted); font-size:13px} .post-share-author{display:flex; align-items:center; flex-wrap:wrap; gap:4px 7px; max-width:100%; margin:0 0 7px} .post-share-by, .post-share-who{display:inline-flex; align-items:center; gap:0; margin:0; padding:0; border:0; background:none; font-family:inherit; cursor:pointer; text-align:left} .post-share-by{color:var(--muted); font-size:12px} @media (hover:hover){ .post-share-by:hover{color:var(--ink-acc)} } .post-share-who .post-src-avatar{width:20px; height:20px; margin-right:6px} .post-share-avatar-initial{display:inline-flex; align-items:center; justify-content:center; background:var(--acc-safe); color:#fff; font-size:10px; font-weight:700; line-height:1} .post-share-name{font-weight:600; font-size:13px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14em} @media (hover:hover){ .post-share-who:hover .post-share-name{color:var(--ink-acc)} } .feed-item .post-share-nav{pointer-events:none} .post-share-author .badge-verified{width:10px; height:10px; font-size:7px; margin-left:3px; top:0; flex:0 0 auto} .post-share-date{color:var(--muted)} .post-share-via{display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; order:10; flex-basis:100%; margin-top:-2px} .post-share-via .post-src-name{font-weight:600; font-size:12px; color:var(--fg)} .post-share-via .post-src-logo{width:16px; height:16px; border-radius:4px; margin:0} .share-embed-orig{position:absolute; top:8px; right:8px; z-index:3; max-width:calc(100% - 16px); padding:5px 9px; background:rgba(0,0,0,.62); color:#fff; font-size:12px; font-weight:600; line-height:1.3; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .18s ease; pointer-events:none} .post-share-embed .post-media:hover .share-embed-orig{opacity:1} @media (hover:none){ .share-embed-orig{opacity:1} } .post-media-extlink{cursor:pointer} .post-media-extlink .post-image-link{display:block; line-height:0} .post-extlink-hint{position:absolute; top:8px; right:8px; z-index:3; max-width:calc(100% - 16px); padding:5px 9px; background:rgba(0,0,0,.62); color:#fff; font-size:12px; font-weight:600; line-height:1.3; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .18s ease; pointer-events:none} .post-media-extlink:hover .post-extlink-hint{opacity:1} @media (hover:none){ .post-extlink-hint{opacity:1} } .qp-share-preview{margin:8px 0 12px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card)} .qp-share-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px} .qp-share-label{font-size:12px; font-weight:600; color:var(--muted)} .qp-share-x{border:0; background:none; cursor:pointer; color:var(--muted); font-size:15px; line-height:1; padding:2px 4px} .qp-share-x:hover{color:var(--no)} .qp-share-preview .post-share-embed{margin:0; background:var(--soft)} .share-embed-active textarea{height:72px} body[data-share-embed-preview="inside"] .share-embed-active textarea{border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0; margin-bottom:0} body[data-share-embed-preview="inside"] .share-embed-active .qp-share-preview{margin-top:0; border-top:0; border-top-left-radius:0; border-top-right-radius:0} .qp-link-action{margin:0 0 8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap} .qp-link-action:has(> .qp-image-og[hidden]){display:none} body[data-composer-hints="0"] .qp-imglink-note, body[data-composer-hints="0"] .qp-share-own-note{display:none} body[data-share-embed-image="0"]:not([data-share-embed-img-off="disable"]) .share-embed-active .qp-image-controls{display:none} body[data-share-embed-image="0"][data-share-embed-img-off="disable"] .share-embed-active .qp-image-btn{opacity:.4; pointer-events:none} .post-item:has(.post-media) .post-content{margin-bottom:5px} .post-share{display:inline-flex; align-items:center; gap:5px; vertical-align:middle; margin-right:10px; padding:0; border:0; background:none; color:var(--muted); cursor:pointer; line-height:1; font-size:13px} .post-share .ico{width:15px; height:15px; margin:0} @media (hover:hover){ .post-share:hover{color:var(--acc)} } @media (hover:none){ .post-share{color:var(--muted)} } .profile.single-page.posts-cards .box-posts h3{margin-bottom:12px} .profile.single-page.posts-cards .box-posts{padding:16px 16px 13px} .profile.single-page.posts-cards .box-posts:not(:has(.draft-hint)){padding-bottom:16px} .profile.single-page.posts-cards .box-posts .post-item{ border:1px solid var(--border); border-radius:10px; padding:11px 16px; margin-bottom:14px; } .profile.single-page.posts-cards .box-posts .post-item:first-child{padding-top:11px} .profile.single-page.posts-cards .box-posts .post-item:not(:has(.post-src-badge)){padding-top:12px} .profile.single-page.posts-cards .box-posts .post-item:last-child{margin-bottom:0; padding-bottom:11px} .profile.single-page.posts-cards .box-posts .post-item:has(.post-media), .profile.single-page.posts-cards .box-posts .post-item:has(.post-media):last-child{padding-bottom:14px} .post-content a,.profile-bio a{text-decoration:none; font-weight:600} @media (hover:hover){ .post-content a:hover,.profile-bio a:hover{color:var(--ink-acc, var(--acc)); opacity:.85} } .post-image,.feed-post-image{display:block; max-width:100%; height:auto; border-radius:6px; border:1px solid var(--border)} .post-image{margin:6px 0 0} .feed-post-image{margin:8px 0 0} .post-media{position:relative; margin:6px 0 0} .feed-item .post-media{margin:8px 0 0} .post-media-single{border:1px solid var(--border); border-radius:6px; overflow:hidden; max-height:var(--post-img-maxh, none)} .post-media-single .post-image{margin:0; border:0; border-radius:0} .post-media.pic-on{background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden; min-height:var(--eff-minh, var(--post-img-minh, 0))} .post-media.pic-on > .post-image{margin:0; border:0; border-radius:0} .post-media.pic-crop, .post-media.pic-expand{ display:flex; flex-direction:column; justify-content:center; align-items:stretch; max-height:var(--eff-maxh, none)} .post-media.pic-crop > .post-image, .post-media.pic-expand > .post-image{width:100%; height:auto} .post-media.pic-expand.pic-open{max-height:none} .post-media.pic-expand:not(.pic-open)::after{content:''; position:absolute; left:0; right:0; bottom:0; height:48px; pointer-events:none; background:linear-gradient(transparent, var(--card))} .post-media.pic-shrink{display:inline-block; width:auto; max-height:none; overflow:visible} .post-media.pic-shrink > .post-image{display:block; max-height:var(--eff-maxh, none); width:auto; max-width:100%; height:auto} .pic-expand-btn{margin:6px 0 0} .post-media-video{position:relative} .post-video{display:block; width:100%; border:1px solid var(--border); border-radius:6px; max-height:var(--post-img-maxh, none); background:var(--card)} .post-media-video.vp-posterfit .post-video{object-fit:contain} .post-media-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; pointer-events:none; background:rgba(0,0,0,.5)} .post-media-play .ico{width:24px; height:24px; fill:#fff; margin-left:3px} .post-video-tap{cursor:pointer} .post-media-video:has(.vp-clickplay){cursor:default} .vp-host{position:relative; display:block; line-height:0} .vp-host .post-video{border-radius:6px} .vp-expand{position:absolute; top:8px; right:8px; z-index:3; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; pointer-events:none; opacity:0; transition:opacity var(--tr), background var(--tr)} .vp-expand .ico{width:17px; height:17px; fill:#fff} .vp-host:not(.vp-in-overlay):hover .vp-expand{opacity:1} .vp-in-overlay .vp-expand{display:none} .vp-host:not(.vp-clickplay) .vp-expand{display:none} .vp-clickplay .vp-expand{pointer-events:auto; cursor:pointer; width:38px; height:38px; background:rgba(0,0,0,.6)} .vp-clickplay .vp-expand:hover{background:rgba(0,0,0,.82)} .vp-clickplay .vp-expand .ico{width:19px; height:19px} .vp-clickplay .vp-expand:focus-visible{opacity:1; outline:2px solid #fff; outline-offset:2px} .vp-big{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; border:0; cursor:pointer; display:none; align-items:center; justify-content:center; width:74px; height:74px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; transition:background var(--tr), opacity var(--tr)} .vp-big:hover{background:rgba(0,0,0,.7)} .vp-big .ico{width:34px; height:34px; fill:#fff; margin-left:3px} .vp-in-overlay .vp-big{display:flex} .vp-in-overlay.vp-playing .vp-big{display:none} .vp-host.vp-in-overlay:has(.vp-bar:hover) .vp-big{opacity:.55} .vp-bar{position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:8px; padding:8px 10px; box-sizing:border-box; border-radius:0 0 6px 6px} .vp-bar::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:0 0 6px 6px; background:linear-gradient(transparent, rgba(0,0,0,.6)); opacity:0; transition:opacity var(--tr)} .vp-btn{border:0; background:transparent; color:#fff; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 auto} .vp-btn .ico{width:18px; height:18px; fill:#fff} .vp-pp{background:rgba(0,0,0,.55); border-radius:50%; width:34px; height:34px} .vp-pp:hover{background:rgba(0,0,0,.72)} .vp-pp .ico{margin-left:1px} .vp-host.vp-playing:not(.vp-in-overlay) .vp-pp{opacity:0; transition:opacity var(--tr)} .vp-host.vp-playing:not(.vp-in-overlay).vp-hint .vp-pp, .vp-host.vp-playing:not(.vp-in-overlay) .vp-bar:hover .vp-pp{opacity:1} .vp-ext{display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; opacity:0; transition:opacity var(--tr)} .vp-host:not(.vp-in-overlay).vp-hint .vp-ext, .vp-host.vp-playing:not(.vp-in-overlay) .vp-bar:hover .vp-ext{opacity:1} .vp-host:not(.vp-in-overlay).vp-hint .vp-bar::before, .vp-host.vp-playing:not(.vp-in-overlay) .vp-bar:hover::before{opacity:1} .vp-time{color:#fff; font-size:12px; font-variant-numeric:tabular-nums; flex:0 0 auto; white-space:nowrap} .vp-bar .vp-seek{flex:1 1 auto; min-width:40px; min-height:0 !important; height:5px; -webkit-appearance:none; appearance:none; background:rgba(255,255,255,.4); border-radius:999px; cursor:pointer; margin:0; padding:0} .vp-seek::-webkit-slider-runnable-track{height:5px; border-radius:999px; background:transparent} .vp-seek::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:12px; height:12px; margin-top:-3.5px; border-radius:50%; background:#fff; border:0; cursor:pointer} .vp-seek::-moz-range-track{height:5px; border-radius:999px; background:rgba(255,255,255,.4)} .vp-seek::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:0; cursor:pointer} .vp-in-overlay .vp-bar{height:24%; min-height:54px; align-items:flex-end} .vp-in-overlay .vp-pp{opacity:0; transition:opacity var(--tr)} .vp-in-overlay .vp-bar:hover .vp-pp, .vp-in-overlay.vp-peek .vp-pp, .vp-in-overlay .vp-bar:hover .vp-ext, .vp-in-overlay.vp-peek .vp-ext{opacity:1} .vp-in-overlay .vp-bar:hover::before, .vp-in-overlay.vp-peek .vp-bar::before{opacity:1} .vp-in-overlay.vp-playing:hover .vp-pp, .vp-in-overlay.vp-playing:hover .vp-ext{opacity:1} .vp-in-overlay.vp-playing:hover .vp-bar::before{opacity:1} body[data-video-paused-controls="1"] .vp-in-overlay.vp-paused .vp-pp, body[data-video-paused-controls="1"] .vp-in-overlay.vp-paused .vp-ext{opacity:1} body[data-video-paused-controls="1"] .vp-in-overlay.vp-paused .vp-bar::before{opacity:1} body[data-video-paused-controls="1"] .vp-host.vp-paused:not(.vp-in-overlay) .vp-ext, body[data-video-paused-controls="1"] .vp-host.vp-paused:not(.vp-in-overlay) .vp-bar::before{opacity:1} .vp-host:not(.vp-in-overlay) .vp-full{display:none} .vp-host:fullscreen{width:100vw; height:100vh; max-width:none; max-height:none; background:#000} .vp-host:fullscreen .post-video{width:100%; height:100%; max-width:none; max-height:none; border-radius:0; object-fit:contain} .vp-host:-webkit-full-screen{width:100vw; height:100vh; max-width:none; max-height:none; background:#000} .vp-host:-webkit-full-screen .post-video{width:100%; height:100%; max-width:none; max-height:none; border-radius:0; object-fit:contain} @media (hover:none){ .vp-ext, .vp-bar::before, .vp-pp, .vp-expand{opacity:1 !important} } .vp-feed .post-video{pointer-events:none} .post-image-fill{width:100%; object-fit:cover} .post-media-zoom{cursor:pointer} body[data-post-img-style="full"] .profile:not(.single-page) .box-posts .post-item .post-media-single, body[data-post-img-style="full"] .profile:not(.single-page) .box-posts .post-item .post-media:has(.pg-slideshow){ margin-left:-14px; margin-right:-14px; border-left:0; border-right:0; border-radius:0; overflow:hidden; } body[data-post-img-style="full"] .profile:not(.single-page) .box-posts .post-item .post-media:has(.pg-slideshow) .pg-slideshow{ border-left:0; border-right:0; border-radius:0; } body[data-post-img-style="full"] .profile:not(.single-page) .box-posts .post-item .post-media-single:last-child, body[data-post-img-style="full"] .profile:not(.single-page) .box-posts .post-item .post-media:last-child:has(.pg-slideshow){ margin-bottom:-12px; border-bottom:0; border-radius:0 0 10px 10px; } body[data-post-img-style="full"] .profile:not(.single-page) .box-posts .post-item .post-media:last-child:has(.pg-slideshow) .pg-slideshow{ border-radius:0 0 10px 10px; } .post-media-bg.post-media-single, .post-media-bg .post-image, .post-media-bg .pg-cell, .post-media-bg .pg-cell img, .post-media-bg .pg-slideshow, .post-media-bg .pg-slideshow > img{background:#fff} .post-image-bg{background:#fff} .post-media-count{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.66); color:#fff; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; pointer-events:none} .pg-count{position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.66); color:#fff; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; pointer-events:none} body[data-pill-center="1"] .pg-count{left:50%; right:auto; transform:translateX(-50%)} body[data-pill-center="1"] .media-ov-counter{top:auto; bottom:11px; left:50%; right:auto; transform:translateX(-50%)} .post-media img, .media-ov-img{-webkit-user-drag:none; user-select:none} body[data-feed-pill-side="left"] .post-media-count{left:8px; right:auto} .post-gallery.pg-grid{display:grid; gap:1px; grid-template-columns:repeat(2,1fr); border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--border)} .pg-grid.pg-n1{grid-template-columns:1fr} .pg-grid.pg-n2 .pg-cell{aspect-ratio:3 / 4} .pg-grid.pg-n3 .pg-cell:first-child{grid-column:1 / -1; aspect-ratio:2/1} .pg-grid .pg-cell{position:relative; margin:0; padding:0; border:0; aspect-ratio:1; overflow:hidden; cursor:pointer; background:var(--soft)} .pg-grid .pg-cell img{width:100%; height:100%; object-fit:cover; display:block} .pg-grid .pg-more{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); color:#fff; font-weight:800; font-size:22px} .post-gallery.pg-slideshow{position:relative; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--soft)} .pg-slideshow > img{display:block; width:100%; max-height:var(--post-img-maxh, 70vh); object-fit:contain; cursor:pointer} .pg-slideshow > img.post-image-fill{object-fit:cover} .pg-slideshow.pg-sized > img{height:100%; max-height:none} .pg-nav{position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; transition:opacity var(--tr), background var(--tr)} .pg-nav .ico{width:20px; height:20px} .pg-nav:hover{background:rgba(0,0,0,.72)} .pg-prev{left:8px} .pg-next{right:8px} .pg-slideshow .pg-nav, .media-ov-main .pg-nav{opacity:0} .pg-slideshow:hover .pg-nav, .pg-slideshow:has(.pg-nav:focus-visible) .pg-nav, .media-ov-main:hover .pg-nav, .media-ov-main.nav-on .pg-nav, .media-ov-prev:focus-visible, .media-ov-next:focus-visible{opacity:1} @media (hover:none){ .pg-slideshow .pg-nav, .media-ov-main .pg-nav{opacity:1} } .pg-dots{position:absolute; bottom:11px; left:0; right:0; display:flex; gap:5px; justify-content:center} .pg-dot{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.45); box-shadow:0 0 0 1px rgba(255,255,255,.6)} .pg-dot.on{background:rgba(0,0,0,.82); box-shadow:0 0 0 1px rgba(255,255,255,.9)} html[data-theme="dark"] .pg-dot{background:rgba(255,255,255,.45); box-shadow:0 0 0 1px rgba(0,0,0,.6)} html[data-theme="dark"] .pg-dot.on{background:rgba(255,255,255,.82); box-shadow:0 0 0 1px rgba(0,0,0,.9)} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .pg-dot{background:rgba(255,255,255,.45); box-shadow:0 0 0 1px rgba(0,0,0,.6)} html:not([data-theme="light"]):not([data-theme="dark"]) .pg-dot.on{background:rgba(255,255,255,.82); box-shadow:0 0 0 1px rgba(0,0,0,.9)} } .media-overlay{background:rgba(0,0,0,.86); padding:18px} .media-ov-inner{position:relative; display:flex; flex-direction:column; max-width:min(96vw,1100px); max-height:92vh; background:transparent} .media-ov-inner.has-card{background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden} @media (min-width:760px){ .media-ov-inner.has-card{flex-direction:row; align-items:stretch} } .media-ov-main{position:relative; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0} .has-card .media-ov-main{flex:1; background:#000; min-height:46vh} @media (max-width:759px){ .has-card .media-ov-main{min-height:38vh} } .media-ov-img{max-width:100%; max-height:92vh; object-fit:contain; display:block; border-radius:12px} .has-card .media-ov-img{border-radius:0} .media-ov-vhost{display:flex; align-items:center; justify-content:center; max-width:100%; max-height:92vh} .media-ov-vhost .vp-host{max-width:100%; max-height:92vh} .media-ov-vhost .post-video{max-width:100%; max-height:92vh; width:auto; object-fit:contain; border:0; border-radius:12px; background:var(--card)} .media-ov-vhost .vp-host.vp-playing .post-video{background:#000} .media-ov-vhost .post-video:not([poster]){background:#000} .has-card .media-ov-vhost .post-video{border-radius:0} .media-ov-white .media-ov-img{background:#fff} body[data-image-bg-scope="box"]:not([data-overlay-size="fixed"]) .media-ov-white .media-ov-main{background:#fff} .has-card .media-ov-img.media-ov-fill{width:100%; height:100%; object-fit:cover} .media-ov-counter{position:absolute; top:10px; left:12px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:2px 9px; border-radius:999px; opacity:0; transition:opacity var(--tr)} .media-ov-main:hover .media-ov-counter, .media-ov-main.nav-on .media-ov-counter{opacity:1} @media (hover:none){ .media-ov-main .media-ov-counter{opacity:1} } .media-ov-close{position:absolute; top:-4px; right:-4px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; padding:0; background:rgba(0,0,0,.6); color:#fff; font-size:18px; cursor:pointer; line-height:1} .media-ov-close:hover{background:#3a3a3a} .has-card .media-ov-close{top:8px; right:8px} .media-ov-share{position:absolute; top:-4px; right:40px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center} .media-ov-share:hover{background:#3a3a3a} .media-ov-share .ico{width:18px; height:18px; margin:0} .has-card .media-ov-share{top:8px; right:54px} .media-ov-card{background:var(--card); color:var(--fg); padding:16px 18px; overflow:auto} @media (min-width:760px){ .media-ov-card{width:330px; flex:0 0 330px} } .media-ov-author{display:flex; align-items:center; flex-wrap:wrap; gap:0; margin-bottom:6px} .media-ov-author b{font-size:15px} .media-ov-name{color:inherit; text-decoration:none} @media (hover:hover){ .media-ov-name:hover{color:var(--ink-acc, var(--acc))} } .media-ov-author .feed-avatar{top:0} .media-ov-author .badge-verified{width:12px; height:12px; font-size:8px; margin-left:3px; top:0; flex:0 0 auto; transform:none} .media-ov-date{margin:0 0 10px} .media-ov-text{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5} .media-ov-text .extlink{display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom} body[data-overlay-size="fixed"] .media-overlay .media-ov-inner{ width:min(var(--ov-w,92vw),1100px); height:var(--ov-h,92vh); max-width:calc(100vw - 36px); max-height:calc(100vh - 36px)} body[data-overlay-size="fixed"] .media-overlay .media-ov-main{flex:1 1 auto; min-height:0; background:var(--card)} body[data-overlay-size="fixed"] .media-overlay .media-ov-inner:not(.has-card) .media-ov-main{border-radius:16px; overflow:hidden} body[data-overlay-size="fixed"] .media-overlay .media-ov-img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:contain} body[data-overlay-size="fixed"][data-overlay-fill="per_image"] .media-overlay .media-ov-img.media-ov-fill{object-fit:cover} body[data-overlay-size="fixed"][data-overlay-fill="cover"] .media-overlay .media-ov-img{object-fit:cover} body[data-overlay-size="fixed"][data-overlay-fill-color="system"][data-overlay-image-white="off"][data-overlay-image-extent="box"] .media-overlay.media-ov-white .media-ov-main{background:#fff} body[data-overlay-size="fixed"] .media-overlay .media-ov-vhost{width:100%; height:100%; max-width:none; max-height:none; background:#000} body[data-overlay-size="fixed"] .media-overlay .media-ov-vhost .vp-host{ width:auto; height:auto; max-width:100%; max-height:100%; background:#000} body[data-overlay-size="fixed"] .media-overlay .media-ov-vhost .post-video{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain} body[data-overlay-size="fixed"][data-overlay-fill-color="black"] .media-overlay .media-ov-main, body[data-overlay-size="fixed"][data-overlay-fill-color="black"] .media-overlay .media-ov-vhost .post-video{background:#000} body[data-overlay-size="fixed"][data-overlay-fill-color="white"] .media-overlay .media-ov-main, body[data-overlay-size="fixed"][data-overlay-fill-color="white"] .media-overlay .media-ov-vhost, body[data-overlay-size="fixed"][data-overlay-fill-color="white"] .media-overlay .media-ov-vhost .vp-host, body[data-overlay-size="fixed"][data-overlay-fill-color="white"] .media-overlay .media-ov-vhost .post-video{background:#fff} body[data-overlay-size="fixed"][data-overlay-fill-color="black"][data-overlay-image-white="off"] .media-overlay .media-ov-img{background:#000} body[data-overlay-size="fixed"][data-overlay-fill-color="white"][data-overlay-image-white="off"] .media-overlay .media-ov-img{background:#fff} body[data-overlay-size="fixed"][data-overlay-image-white="off"][data-overlay-image-extent="image"] .media-overlay.media-ov-white .media-ov-img{ width:auto; height:auto; max-width:100%; max-height:100%} body[data-overlay-size="fixed"][data-overlay-image-white="flagged"] .media-overlay.media-ov-white .media-ov-img{background:#fff} body[data-overlay-size="fixed"][data-overlay-image-white="all"] .media-overlay .media-ov-img{background:#fff} body[data-overlay-size="fixed"][data-overlay-image-white="flagged"][data-overlay-image-extent="image"] .media-overlay.media-ov-white .media-ov-img, body[data-overlay-size="fixed"][data-overlay-image-white="all"][data-overlay-image-extent="image"] .media-overlay .media-ov-img{ width:auto; height:auto; max-width:100%; max-height:100%} body[data-image-bg-scope="image"] .pg-slideshow > img.post-image-bg, body[data-image-bg-scope="image"] .post-media-bg .pg-slideshow > img{ width:auto; max-width:100%; height:auto; max-height:100%} body[data-image-bg-scope="image"] .post-media-bg .pg-slideshow{background:var(--soft)} body[data-image-bg-scope="image"] .post-media-bg.post-media-single .post-image, body[data-image-bg-scope="image"] .post-media-single > .post-image.post-image-bg{ width:auto; max-width:100%; height:auto; margin-left:auto; margin-right:auto; display:block} body[data-image-bg-scope="image"] .post-media-bg.post-media-single, body[data-image-bg-scope="image"] .post-media-single:has(> .post-image.post-image-bg){background:var(--soft)} body[data-image-bg-scope="image"] .post-media-bg .pg-cell, body[data-image-bg-scope="image"] .pg-cell:has(> img.post-image-bg){ display:flex; align-items:center; justify-content:center; background:var(--soft)} body[data-image-bg-scope="image"] .post-media-bg .pg-cell img, body[data-image-bg-scope="image"] .pg-cell > img.post-image-bg{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain} .qp-image-controls{display:inline-flex; gap:8px; align-items:center} .qp-image-controls .btn{min-height:44px} .qp-image-controls .qp-image-btn{width:44px; padding-left:0; padding-right:0; display:inline-flex; align-items:center; justify-content:center} .qp-image-controls .qp-image-btn .ico{width:20px; height:20px} .row:has(> .qp-image-controls) > select{max-width:128px; padding-right:24px} .qp-image-thumbs{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 0} .qp-image-thumbs:empty{margin:0} .qp-thumb{position:relative; display:inline-block} .qp-thumb[draggable="true"]{cursor:grab} .qp-thumb.qp-thumb-dragging{opacity:.45} .qp-thumb img{display:block; width:74px; height:74px; object-fit:cover; border-radius:10px; border:1px solid var(--border)} .qp-thumb.qp-thumb-sel img{border:2px solid var(--acc)} .qp-thumb-vid{display:block; width:128px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--border); background:#000} .qp-thumb-poster .qp-poster-img{display:block; width:128px; height:72px; object-fit:contain; border-radius:10px; border:1px solid var(--border); background:#000} .qp-thumb-x{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--fg); cursor:pointer; line-height:1; font-size:13px} .qp-image-opts{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:6px 0 12px} .qp-image-opts .qp-layout-lab{display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--muted)} .qp-image-opts .qp-layout{width:auto} .qp-image-opts .qp-opts-for{font-weight:600; color:var(--fg)} .qp-image-opts .check-inline{margin:0} .qp-video-opts{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 12px} .qp-video-opts .check-inline{margin:0} .qp-vloopcount-lab{gap:6px} .post-edit-image{display:block; max-width:120px; max-height:80px; border-radius:8px; border:1px solid var(--border); margin:4px 0} .social-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px} .box-socials h3{margin-bottom:12px} .social-chip{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:2px solid var(--border); background:var(--card); color:var(--fg); font-weight:800; font-size:15px; text-decoration:none; transition:transform var(--tr), border-color var(--tr); } @media (hover:hover){ .social-chip:hover{transform:translateY(-2px); border-color:var(--acc-safe, var(--acc)); color:var(--ink-acc, var(--acc))} } .social-chip svg{width:20px; height:20px; fill:currentColor} .social-row-auto{display:grid; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr)); gap:10px} .social-row-auto .social-chip{width:100%; height:auto; aspect-ratio:1} .social-chip-copy{padding:0; cursor:pointer; font:inherit; -webkit-appearance:none; appearance:none} .post-edit-list{list-style:none; margin:14px 0 0; padding:0} .post-edit-list li{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border:1px solid var(--border); border-radius:10px; padding:12px 14px; } .post-edit-list p{margin:0; overflow-wrap:anywhere} #post-expiry,#post-visibility{width:auto} @media (max-width:720px){ .post-quick .row > select, #post-visibility, #post-expiry{flex:1 1 calc(50% - 40px); max-width:none; width:auto; min-width:0} } #post-content{display:block; margin-bottom:12px} #og-url{flex:1; min-width:220px; width:auto} .bar-chart{ display:flex; align-items:flex-end; gap:3px; height:120px; border-bottom:2px solid var(--border); padding-bottom:2px; } .bar-chart .bar{flex:1; min-height:2px; background:var(--acc); border-radius:3px 3px 0 0} .stats-list{list-style:none; padding:0; margin:12px 0 0} .stats-list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--soft); padding:7px 0; } .stats-list li:last-child{border-bottom:0; padding-bottom:0} #editor-app .card[aria-labelledby="stats-title"]:not(.card-folded){padding-bottom:12px} .thumb-list{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px} .thumb-list .thumb{position:relative; display:inline-block; cursor:grab} .thumb-list .thumb.dragging{opacity:.45; cursor:grabbing} .thumb-list img{ width:72px; height:72px; object-fit:cover; display:block; border:2px solid var(--border); border-radius:var(--radius-s); } .thumb-remove{ position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%; border:2px solid var(--border); background:var(--card); color:var(--fg); cursor:pointer; line-height:1; font-size:14px; } .claim-block{ margin-top:16px; padding:14px; border:2px dashed var(--border); border-radius:var(--radius-s); } .claim-item{border-bottom:1px solid var(--soft); padding:10px 0} .claim-item:last-child{border-bottom:0} .wizard-slug.field-at{margin-top:5px} #btn-claim{margin-top:12px} #start-auth > .card, #home-auth > .card{margin:0} #start-auth, #home-auth{margin-top:26px; align-items:start} .card p:has(> #btn-logout-all){margin-bottom:0} .auth-guided{margin-top:10px; text-align:center} @media (min-width:721px){ .auth-guided{width:50%; margin-left:auto} } body[data-home-style="lively"]:not(.is-auth) .site-main:has(#home-hero.lv-wrap){max-width:none; padding:0} .lv-wrap{--acc2:#ff7a1a; --lv-soft:color-mix(in srgb, var(--acc) 8%, var(--card)); --lv-soft2:color-mix(in srgb, var(--acc2) 12%, var(--card)); display:block; width:100%} .lv-in{max-width:1140px; margin:0 auto; padding:0 24px} .lv-hero{position:relative; overflow:hidden} .lv-hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; padding-top:32px; padding-bottom:48px} .lv-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--fg); border:2px solid var(--border); border-radius:999px; padding:5px 13px; margin:0 0 18px} .lv-pulse{width:8px; height:8px; border-radius:50%; background:var(--acc2); animation:lvPulse 2s ease-in-out infinite} @keyframes lvPulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.55); opacity:.5}} .lv-h1{font-size:clamp(40px,6vw,68px); line-height:.98; letter-spacing:-.03em; font-weight:800; margin:0 0 16px} .lv-w1{color:var(--acc)} .lv-w2{color:var(--acc2)} .lv-lead{font-size:18px; color:var(--muted); max-width:430px; margin:0 0 22px; line-height:1.5} .lv-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center} .lv-cta-center{justify-content:center} .lv-wrap .lv-btn-primary{background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:none} @media (hover:hover){ .lv-wrap .lv-btn-primary:hover{background:var(--acc); border-color:var(--acc); color:#fff; opacity:.92; transform:translateY(-1px); box-shadow:none} } .lv-usp{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:22px 0 0} .lv-usp li{display:inline-flex; align-items:center; gap:6px; border:2px solid var(--border); border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; background:var(--card)} .lv-usp li .ico{color:var(--acc)} .lv-wl-open{margin:16px 0 0} .lv-hero-visual{position:relative; display:flex; flex-direction:column; align-items:center; gap:12px} .lv-deco{position:absolute; z-index:0; border-radius:30px; pointer-events:none} .lv-deco-a{width:148px; height:148px; background:var(--acc2); top:2px; right:14px; transform:rotate(12deg); opacity:.92} .lv-deco-b{width:116px; height:116px; background:var(--acc); bottom:54px; left:6px; transform:rotate(-10deg); opacity:.88} .lv-phone{position:relative; z-index:1; width:248px; height:506px; border-radius:40px; background:var(--card); border:2.5px solid var(--border); box-shadow:10px 10px 0 var(--border); padding:13px 12px; overflow:hidden} .lv-phone-notch{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:90px; height:15px; border-radius:0 0 11px 11px; background:var(--border); opacity:.85; z-index:2} .lv-screen{position:relative; height:100%; border-radius:28px; overflow:hidden; background:var(--lv-soft)} .lv-pp{position:absolute; inset:0; padding:30px 13px 13px; opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; pointer-events:none} .lv-pp.active{opacity:1; transform:none} .lv-pp-head{text-align:center; margin-bottom:10px} .lv-avatar{width:56px; height:56px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; background:var(--acc); color:#fff; font-weight:800; font-size:23px} .lv-name{font-weight:800; font-size:17px; display:inline-flex; align-items:center; gap:4px; justify-content:center} .lv-vf{width:15px; height:15px; border-radius:50%; background:var(--acc); color:#fff; font-size:9px; line-height:1; display:inline-flex; align-items:center; justify-content:center} .lv-handle{font-size:12px; color:var(--acc); font-weight:700; margin-top:2px} .lv-bio{font-size:11.5px; color:var(--muted); margin-top:3px} .lv-box{border:2px solid var(--border); border-radius:12px; background:var(--card); padding:9px 11px; margin-top:8px; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:8px} .lv-box .lv-bi{width:20px; height:20px; border-radius:6px; flex:0 0 auto; background:var(--acc)} .lv-box-link::after{content:"↗"; margin-left:auto; color:var(--acc); font-weight:800} .lv-box-action{flex-direction:column; align-items:flex-start; gap:5px; background:var(--acc); color:#fff; border-color:var(--acc)} .lv-box-action .lv-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; background:rgba(255,255,255,.22); border-radius:6px; padding:2px 8px} .lv-pp .lv-el{opacity:0} .lv-pp.active .lv-el{animation:lvRise .5s ease both; animation-delay:calc(var(--i,0) * .1s)} @keyframes lvRise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}} .lv-phone-cap{font-size:14px; font-weight:700; text-align:center; margin:2px 0 0; min-height:20px} .lv-cap-label{display:none} .lv-cap-label.active{display:inline} .lv-cap-sub{color:var(--muted); font-weight:500} .lv-dots{display:flex; gap:6px; justify-content:center} .lv-dot-i{width:7px; height:7px; border-radius:50%; background:var(--border); opacity:.3; transition:opacity .3s, transform .3s, background .3s} .lv-dot-i.active{opacity:1; background:var(--acc2); transform:scale(1.3)} .lv-section{padding:54px 0; text-align:center} .lv-h2{font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.02em; margin:0 0 8px} .lv-sub{color:var(--muted); font-size:16px; max-width:540px; margin:0 auto 28px; line-height:1.5} .lv-chips{display:flex; flex-wrap:wrap; gap:12px; justify-content:center} .lv-chip{display:inline-flex; align-items:center; gap:9px; border:2px solid var(--border); border-radius:14px; background:var(--card); padding:12px 16px; font-weight:700; font-size:15px} .lv-chip .lv-sq{width:14px; height:14px; border-radius:4px; background:var(--c, var(--acc))} .lv-grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px} .lv-type{border:2px solid var(--border); border-top:5px solid var(--acc); border-radius:16px; background:var(--card); padding:18px 14px; text-align:center} .lv-type .lv-avatar{width:46px; height:46px; font-size:19px; margin-bottom:8px} .lv-type h3{margin:0; font-size:16px; font-weight:800} .lv-type p{margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.45} .lv-feedshow{background:var(--lv-soft2)} .lv-feed{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left} .lv-postcard{border:2px solid var(--border); border-radius:16px; background:var(--card); padding:14px} .lv-pc-head{display:flex; align-items:center; gap:8px; margin-bottom:9px} .lv-pc-av{width:34px; height:34px; border-radius:50%; flex:0 0 auto; background:var(--c, var(--acc)); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center} .lv-pc-name{font-weight:800; font-size:14px; line-height:1.1} .lv-pc-handle{font-size:11.5px; color:var(--muted)} .lv-pc-body{font-size:14px; line-height:1.5; margin:0 0 10px} .lv-pc-media{height:84px; border-radius:10px; background:var(--c, var(--acc)); opacity:.92; margin:0 0 10px} .lv-pc-chip{display:inline-block; font-size:11.5px; font-weight:700; border:1.5px dashed var(--c, var(--acc)); color:var(--c, var(--acc)); border-radius:7px; padding:2px 9px; margin:0 0 10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .lv-pc-actions{display:flex; gap:14px; font-size:12.5px; color:var(--muted); font-weight:600; border-top:1.5px solid var(--soft); padding-top:9px} .lv-pc-actions b{color:var(--acc)} .lv-final{background:var(--acc); color:#fff; padding:56px 0} .lv-final .lv-h2{color:#fff} .lv-final .lv-sub{color:rgba(255,255,255,.9)} .lv-wrap .lv-final .lv-btn-primary{background:#fff; border-color:#fff; color:var(--acc)} @media (hover:hover){ .lv-wrap .lv-final .lv-btn-primary:hover{background:#fff; border-color:#fff; color:var(--acc); opacity:.92} } .lv-final .lv-btn-line{display:inline-flex; background:transparent; border:2px solid rgba(255,255,255,.85); color:#fff} @media (hover:hover){ .lv-final .lv-btn-line:hover{background:rgba(255,255,255,.14); border-color:#fff; color:#fff} } .lv-wrap [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; transition-delay:calc(var(--r,0) * .06s)} .lv-wrap [data-reveal].in{opacity:1; transform:none} @media (max-width:820px){ .lv-hero-in{grid-template-columns:1fr; text-align:center; gap:24px} .lv-lead{margin-left:auto; margin-right:auto} .lv-cta, .lv-usp, .lv-chips{justify-content:center} .lv-hero-visual{order:-1} .lv-grid-4{grid-template-columns:1fr 1fr} .lv-feed{grid-template-columns:1fr} } @media (max-width:480px){ .lv-grid-4{grid-template-columns:1fr} .lv-phone{width:232px; height:474px} } @media (prefers-reduced-motion: reduce){ .lv-pp{transition:none} .lv-pp .lv-el, .lv-pp.active .lv-el{animation:none; opacity:1} .lv-pulse{animation:none} .lv-wrap [data-reveal]{opacity:1; transform:none; transition:none} } .foot-discover{display:none} option.feed-opt-hide{display:none} .admin-table{width:100%; border-collapse:collapse; font-size:14px; margin-top:10px} .admin-table td{padding:8px 6px; border-bottom:1px solid var(--soft); vertical-align:middle; text-align:left} #user-list td.u-name{font-weight:600} #user-list .u-handle{white-space:nowrap} #user-list .u-hist{font-size:11px; font-weight:400; color:var(--muted); white-space:normal; margin-top:2px; line-height:1.3} #user-list .u-more{text-align:center; padding-top:14px; border-bottom:0} #user-list .u-more .btn{margin:0} #user-list td.u-email{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #user-list td.u-type{white-space:nowrap} #user-list .user-actions{display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:flex-end} #user-list .user-actions .btn{margin:0; padding:5px 9px; font-size:12.5px; min-height:30px} #user-list .user-actions select{height:30px; padding:2px 8px; max-width:150px; margin:0; font-size:12.5px} .pill-ok{color:var(--ok); font-weight:600} .pill-no{color:var(--muted)} .row.wrap{flex-wrap:wrap} @media (max-width:720px){ .banner{height:140px} .slider .slides img{max-height:220px} .admin-table{font-size:13px; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch} #user-list{display:block} #user-list tr{display:block; padding:10px 0; border-bottom:1px solid var(--soft)} #user-list td{display:block; border:0; padding:1px 0} #user-list td.u-email{max-width:none; white-space:normal; word-break:break-all} #user-list .user-actions{justify-content:flex-start; margin-top:8px} } .box-locked{display:flex;gap:14px;align-items:flex-start;border-style:dashed;opacity:.88} .box-locked .box-lock{font-size:22px;line-height:1.3} .box-locked h3{margin:0 0 4px;font-size:16px} .box-locked p{margin:0} .box-owner-wrap{display:flex; flex-direction:column; gap:6px} .box-owner-tag{align-self:flex-start; display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:11.5px; font-weight:600} .box-owner-tag .ico{width:13px; height:13px} .box-info-link{flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; color:var(--muted); transition:color .13s ease, background .13s ease} @media (hover:hover){ .box-info-link:hover{color:var(--ink-acc, var(--acc)); background:var(--soft)} } .box-info-link .ico{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} .box-lock-ind{font-size:15px;width:18px;flex:0 0 auto;text-align:center} .narrow .card > :last-child{margin-bottom:0} .narrow .card li:last-child > :last-child{margin-bottom:0} #tag-root .card{padding-bottom:14px} #tag-root .card:has(.post-media):not(:has(.tag-post-foot)){padding-bottom:20px} .t-time{ display:inline-block; opacity:0; transform:translateX(-6px); transition:opacity var(--tr), transform var(--tr) } time:hover .t-time{ opacity:1; transform:none } @media (hover: none){ .t-time{ opacity:1; transform:none } } #following-root .follow-card{padding-bottom:16px} #following-root .follow-card.card-folded{padding-bottom:20px} #following-root h2 a{color:var(--fg); text-decoration:none; display:inline-flex; align-items:center; gap:10px} @media (hover:hover){ #following-root h2 a:hover{color:var(--acc)} } .follow-avatar{ width:28px; height:28px; border-radius:50%; flex:0 0 28px; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; background:var(--soft); color:#fff; font-size:13px; font-weight:700; line-height:1; } #following-root .follow-card h2{ display:flex; align-items:center; gap:4px; margin:0; flex:0 0 auto; white-space:nowrap; } #following-root .follow-card .card-head-keep{ display:flex; align-items:center; gap:12px; padding-right:40px; min-width:0; } .follow-bio{ flex:1 1 auto; min-width:0; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; -webkit-mask-image:linear-gradient(to right, #000 75%, transparent); mask-image:linear-gradient(to right, #000 75%, transparent); } @media (max-width:600px){ .follow-bio{display:none} } #following-root .follow-card .badge-verified{top:0; margin-left:0; flex:0 0 auto} #following-root .follow-card .card-fold{ top:20px; right:20px; } .feed-avatar{ width:20px; height:20px; border-radius:50%; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; background:var(--soft); color:#fff; font-size:10px; font-weight:700; line-height:1; vertical-align:middle; margin-right:6px; position:relative; top:-1px; } .feed-meta .badge-verified{width:10px; height:10px; font-size:7px; top:-1px; margin-left:3px} .feed-actions{display:flex; gap:12px; margin-top:10px} .feed-hidden-hint{margin:-4px 0 10px} .feed-hidden-hint .linklike{color:var(--muted); font-size:inherit} @media (hover:hover){ .feed-hidden-hint .linklike:hover{color:var(--acc)} } .hidden-list{display:flex; flex-direction:column; gap:8px; margin:6px 0; padding:6px; max-height:50vh; overflow:auto} .modal:has(.hidden-list){max-width:min(94vw,540px)} .hidden-row{display:flex; align-items:center; justify-content:space-between; gap:10px} .hidden-row span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .hidden-row .btn{flex:0 0 auto} .feed-actions .linklike{color:var(--muted); font-size:12px; text-decoration:none} @media (hover:hover){ .feed-actions .linklike:hover{color:var(--acc)} } .follow-card{position:relative} .follow-toolbar{display:flex; align-items:center; gap:10px; margin:4px 0 2px} .follow-search{flex:1 1 auto; min-width:0; min-height:38px; padding:7px 12px} .follow-toolbar .btn{flex:0 0 auto} .load-more{display:block; margin:16px auto} .feed-meta a, .feed-meta .feed-user{color:var(--acc); font-weight:600; text-decoration:none} .feed-meta a:hover{opacity:.8} .wizard{max-width:600px; margin:14px auto 48px; width:100%} .wizard-head{margin:4px 0 26px} .wizard-progress{height:8px; border-radius:999px; background:var(--soft); overflow:hidden} .wizard-progress-bar{ height:100%; width:0; border-radius:999px; background:var(--acc); transition:width .35s ease; } .wizard-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:8px 0 0} .wizard-skip-all{ background:none; border:0; padding:0; color:var(--muted); cursor:pointer; font:inherit; font-size:13px; } @media (hover:hover){ .wizard-skip-all:hover{color:var(--acc)} } .wizard-step{animation:wz-in .28s ease} .wz-ta-wrap{position:relative} .wz-ta-wrap textarea{margin-bottom:0; display:block; resize:vertical} .wz-ta-count{position:absolute; right:10px; bottom:9px; margin:0; pointer-events:none; background:var(--bg); padding:0 5px; border-radius:7px} @keyframes wz-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion: reduce){.wizard-step{animation:none}} .wizard-kicker{color:var(--muted); font-weight:600; margin:0 0 6px} .wizard-step h1, .wizard-step > p.muted{text-wrap:balance} .wizard-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px} .wizard-actions.center{justify-content:center} .wizard-actions .btn{margin-top:0} .wizard-alt{margin-top:22px; margin-bottom:0} .wizard-alt-next{margin-top:2px} .wizard-emoji{font-size:54px; line-height:1; margin:8px 0 14px; color:var(--acc)} .ta-right{text-align:right; margin-top:4px} .wizard-slug{ display:flex; align-items:center; margin-top:14px; border:2px solid var(--border); border-radius:var(--radius-s); background:var(--bg); transition:border-color var(--tr), box-shadow var(--tr); } .wizard-slug:focus-within{ border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); } .wizard-slug-prefix{padding-left:12px; color:var(--muted); white-space:nowrap; font-weight:600} .wizard-slug input,.wizard-slug input:focus{ border:0; box-shadow:none; outline:none; background:transparent; flex:1; min-width:0; padding-left:2px; } .type-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px} .type-card{ display:flex; flex-direction:column; gap:2px; position:relative; margin:0; border:2px solid var(--border); border-radius:var(--radius); padding:14px; cursor:pointer; font-weight:400; font-size:15px; transition:border-color var(--tr), background var(--tr); } @media (hover:hover){ .type-card:hover{border-color:var(--acc)} } .type-card input{position:absolute; opacity:0; pointer-events:none} .type-card:has(input:checked){border-color:var(--acc); background:var(--soft)} .type-emoji{font-size:22px; line-height:1.2} @media (max-width:480px){.type-grid{grid-template-columns:1fr}} .int-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px} .int-chip{margin:0; cursor:pointer} .int-chip input{position:absolute; opacity:0; pointer-events:none} .int-chip span{ display:inline-block; padding:7px 14px; border:2px solid var(--border); border-radius:999px; background:var(--card); font-size:14px; font-weight:600; transition:border-color var(--tr), color var(--tr), background var(--tr); } @media (hover:hover){ .int-chip:hover span{border-color:var(--acc)} } .int-chip input:checked + span{border-color:var(--acc); color:var(--acc); background:var(--soft)} .int-chip input:disabled:not(:checked) + span{opacity:.35; cursor:not-allowed} .wizard-avatar{ display:flex; align-items:center; justify-content:center; overflow:hidden; width:128px; height:128px; border-radius:50%; margin:18px auto 6px; border:2px dashed var(--border); background:var(--soft); cursor:pointer; font-size:34px; padding:0; transition:border-color var(--tr); } @media (hover:hover){ .wizard-avatar:hover{border-color:var(--acc)} } .wizard-avatar img{width:100%; height:100%; object-fit:cover} #wz-avatar-hint .ico{color:var(--muted)} .suggest-list{display:flex; flex-direction:column; gap:10px; margin-top:14px; color:var(--muted)} .suggest-item{ display:flex; align-items:center; gap:10px; color:var(--fg); border:2px solid var(--border); border-radius:var(--radius); padding:10px 12px; } .suggest-avatar{ width:44px; height:44px; border-radius:50%; flex:0 0 44px; object-fit:cover; display:flex; align-items:center; justify-content:center; background:var(--soft); color:#fff; font-weight:700; font-size:18px; } .suggest-info{flex:1; min-width:0} .suggest-info b{display:flex; align-items:center; gap:3px} .suggest-av-link{flex:0 0 44px; display:block; width:44px; height:44px; line-height:0} .suggest-name{color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} @media (hover:hover){ .suggest-name:hover{color:var(--acc)} } .suggest-info .badge-verified{top:0; margin-left:0; flex:0 0 auto; width:14px; height:14px; font-size:9px} .suggest-info .muted{ display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .suggest-item .btn{flex:0 0 auto} .start-page{max-width:980px; margin:18px auto 40px; width:100%} .start-page h1{margin-bottom:6px} .start-lead{max-width:560px; margin:0 auto 6px} #settings-root .form-result:empty{display:none; min-height:0; margin:0} #settings-root select{width:100%; max-width:none} @media (min-width:721px){ #settings-root section[aria-labelledby="privacy-title"] select{max-width:380px} } #settings-root .guestvis-legend{list-style:none; padding-left:0; margin:8px 0} #settings-root .guestvis-legend li{margin:0 0 4px} #settings-root .guestvis-legend li:last-child{margin:0} #settings-root .card > :last-child{margin-bottom:0} #settings-root #vr-verified{margin-bottom:0} #settings-root .notify-mech-note{display:none} #settings-root #card-settings > p:has(> #btn-card-regen){margin-bottom:0} .private-lock-note{margin:26px 0} .private-own-note{margin:0 0 14px} .private-admin-note{margin:0 0 14px; color:var(--no); font-weight:600} .private-admin-note .ico{vertical-align:-2px} #settings-root input + .btn, #settings-root textarea + .btn{margin-top:10px} #account-card .grid.grid-2 + .grid.grid-2, #account-card .acct-row, #account-card .acct-row + .grid.grid-2{ margin-top:24px; padding-top:14px; border-top:2px solid var(--border); } #account-card .btn-danger{border-color:var(--no)} .file-input{ position:absolute; width:1px; height:1px; padding:0; border:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; min-height:0; } .file-btn{display:inline-flex; align-items:center; gap:7px; margin:2px 0 0; cursor:pointer} .file-btn .ico{font-size:15px} .file-input:focus-visible + .file-btn{ border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); } .btn-share{display:inline-flex; align-items:center; gap:5px} .btn-share .ico{margin:0} #follow-btn{margin-right:8px} .post-item{scroll-margin-top:70px} .feed-item .feed-actions{ display:flex; justify-content:flex-start; align-items:center; gap:16px; margin-top:9px; } .feed-share, .feed-report{display:inline-flex; align-items:center; gap:5px} .feed-share .ico, .feed-report .ico{width:16px; height:16px} .feed-more{ display:inline-flex; align-items:center; gap:16px; opacity:0; transform:translateX(-8px); pointer-events:none; transition:opacity var(--tr), transform var(--tr); } .feed-item:hover .feed-more, .feed-item:has(:focus-visible) .feed-more{opacity:1; transform:none; pointer-events:auto} @media (hover: none){ .feed-more{opacity:1; transform:none; pointer-events:auto} } .char-count{margin:4px 0 6px; text-align:right; font-size:12.5px; color:var(--muted)} .char-count.char-low{color:var(--no)} .box-text.text-folded p{ max-height:320px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent); } .text-fold-toggle{margin-top:6px} .post-list-folded{ max-height:360px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 76%, transparent); mask-image:linear-gradient(#000 76%, transparent); } .post-fold-toggle{margin-top:10px} .post-teaser-more{display:inline-flex; align-items:center; gap:8px; margin-top:12px} .post-teaser-more .post-teaser-arrow{font-weight:700} .post-teaser-count{display:inline-flex; align-items:center; justify-content:center; min-width:20px; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:700; background:color-mix(in srgb, var(--ink-acc, var(--acc, #7f66e5)) 14%, transparent); color:var(--ink-acc, var(--acc, #7f66e5))} .post-teaser-link{margin-top:12px} .post-teaser-link .post-teaser-count{margin:0 1px} .tag-post-foot{margin:10px 0 0; align-items:center} .tag-post-foot .tag-post-link{font-size:13px} #tag-root .card:hover .feed-more, #tag-root .card:has(:focus-visible) .feed-more{opacity:1; transform:none; pointer-events:auto} .profile.single-page.posts-wide{max-width:620px} .profile.single-page .box-posts{position:relative} .box-posts .post-list.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px; grid-auto-rows:1px; align-items:start} .box-posts .post-list.grid .post-item{margin:0 0 16px} .box-posts .post-list.grid.grid-single{grid-template-columns:1fr} .profile:not(.single-page) .box-posts{position:relative} .posts-view-toggle{position:absolute; top:12px; right:16px; z-index:1; display:inline-flex; align-items:center; gap:6px} .posts-view-toggle .tg-ico{font-size:14px; line-height:1} @media (max-width:720px){ .posts-view-toggle{display:none} } .box-posts .post-list.grid{margin-bottom:-16px} @media (max-width:720px){ .box-posts .post-list.grid{grid-template-columns:1fr} } .subpage{margin:30px auto 48px} .subpage h1{margin-bottom:10px} .single-actions{ display:flex; justify-content:center; align-items:center; gap:14px; margin:24px 0 6px; } .single-actions .report-link{font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; line-height:1.4} .single-actions .report-link:hover{color:var(--no)} .single-actions .report-link .ico{width:16px; height:16px} .about-page{max-width:720px; margin:0 auto 56px; padding:0 4px} .about-hero{margin:40px 0 8px; position:relative} .about-hero::before{content:""; position:absolute; left:50%; top:-70px; transform:translateX(-50%); width:min(94vw,1040px); height:320px; border-radius:50%; pointer-events:none; z-index:-1; background:radial-gradient(closest-side, color-mix(in srgb, var(--acc) 7%, transparent), color-mix(in srgb, var(--acc) 3%, transparent) 55%, transparent)} .about-cta-btn{margin-top:26px} .about-hero-cta{display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap} .about-hero h1{font-size:clamp(36px, 6vw, 52px); margin-bottom:12px; letter-spacing:-.035em} .about-hero .muted{max-width:560px; margin-left:auto; margin-right:auto} .about-section{margin:56px 0} .about-section h2{font-size:clamp(24px,2.6vw,29px); margin-bottom:6px; letter-spacing:-.025em} .about-section h3{margin:0 0 5px; font-size:16px} .about-page .grid-2{gap:24px 36px; margin-top:18px} .about-roadmap{list-style:none; padding:0; margin:14px 0} .about-roadmap li{display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--border)} .about-roadmap li:last-child{border-bottom:0} .about-roadmap .tag{flex:0 0 auto} .about-zeros{display:flex; justify-content:center; gap:44px; margin:26px 0 6px} .about-zeros div{text-align:center} .about-zeros b{display:block; font-size:44px; line-height:1.1; color:var(--acc); font-variant-numeric:tabular-nums; letter-spacing:-.03em; font-weight:800} .about-zeros div:nth-child(2) b{color:#ff5f1f} .about-zeros span{font-size:13px; color:var(--muted)} .about-demo{max-width:560px; margin:22px auto 0; text-align:left} .about-demo-duo{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); grid-template-rows:auto 1fr; grid-template-areas:"demo notes" "demo ctrl"; gap:18px 32px; align-items:start; margin-top:22px; text-align:left} .about-demo-duo .about-demo{grid-area:demo; margin-top:0} .about-demo-notes{grid-area:notes; display:flex; flex-direction:column; gap:18px; padding-top:8px} .about-demo-ctrl{grid-area:ctrl; align-self:start; padding-left:62px} .about-demo-ctrl .about-demo-controls{margin-top:0; justify-content:flex-start} .about-demo-ctrl .about-demo-hint{text-align:left} .adn-item{display:flex; gap:14px; align-items:flex-start} .adn-vis{width:48px; min-height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center} .adn-mini-avatar{position:relative; width:34px; height:34px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:700} .adn-mini-vf{position:absolute; right:-4px; bottom:-3px; width:15px; height:15px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; border:2px solid var(--bg)} .adn-mini-vf .ico{width:7px; height:7px; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round} html[data-theme="dark"] .adn-mini-vf{color:#000} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .adn-mini-vf{color:#000} } .adn-mini-boxes{display:flex; flex-direction:column; gap:3px; width:38px} .adn-mini-boxes i{display:block; height:9px; border:1.5px solid var(--border); border-radius:3px; background:var(--card)} .adn-mini-boxes i:first-child{border-color:var(--acc)} .adn-mini-boxes i:nth-child(2){width:80%} .adn-mini-coupon{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9px; border:1.5px dashed var(--acc); color:var(--acc); border-radius:6px; padding:3px 5px; letter-spacing:.04em} .adn-mini-follow{font-size:10.5px; font-weight:600; border:1px solid var(--border); border-radius:8px; padding:4px 9px; background:var(--card); color:var(--fg); white-space:nowrap} .adn-mini-swatches{display:flex; gap:4px} .adn-mini-swatches i{width:12px; height:12px; border-radius:50%; display:block} .adn-item h3{font-size:15.5px; margin:0 0 3px; letter-spacing:-.01em} .adn-item p{font-size:13.5px; color:var(--muted); line-height:1.5; margin:0} @media (max-width:900px){ .about-demo-duo{grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"demo" "ctrl" "notes"; gap:26px} .about-demo-notes{padding-top:0; max-width:640px; margin-inline:auto; width:100%} .about-demo-ctrl{padding-left:0} .about-demo-ctrl .about-demo-controls{justify-content:center} .about-demo-ctrl .about-demo-hint{text-align:center} } .about-demo-act{display:flex; gap:6px; justify-content:center; align-items:center; margin:12px 0 0} .about-demo-act .btn{pointer-events:none} .about-demo-soc .social-chip{pointer-events:none} .about-demo-subrow{display:flex; align-items:center; gap:9px; margin:0; font-size:15.5px} .about-demo-bell{color:var(--acc); display:inline-flex} .about-demo-bell .ico{width:17px; height:17px} .about-demo-chev{margin-left:auto; color:var(--muted); font-weight:400; font-size:15px} .about-demo-post{border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-top:10px; background:var(--card)} .about-demo-post-text{margin:0 0 5px; font-size:13.5px; line-height:1.5} .about-demo-post-text .acc{color:var(--acc)} .about-demo-post-meta{margin:0; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:4px} .about-demo-post-meta .ico{width:12px; height:12px} .about-demo-stage{position:relative; overflow:hidden; border:1px solid var(--border); border-radius:18px; padding:14px; background:var(--bg); color:var(--fg); transition:background var(--tr), color var(--tr); box-shadow:0 20px 46px -26px color-mix(in srgb, var(--acc) 26%, transparent); -webkit-user-select:none; user-select:none; cursor:default} #about-demo-card.demo-light .badge-verified{color:#fff} #about-demo-card.demo-dark .badge-verified{color:#000} .about-demo-stage::after{content:""; position:absolute; inset:0; z-index:5} .about-demo-stage.demo-dark{ --bg:#0e0d12; --fg:#f2f1f7; --muted:#9b98a8; --card:#16141d; --soft:#1d1a26; --border:#2c2836; --shadow:0 2px 6px rgba(0,0,0,.45); } .about-demo-stage.demo-light{ --bg:#ffffff; --fg:#16161c; --muted:#63636e; --card:#faf9fc; --soft:#f2f1f6; --border:#e5e5e5; --shadow:0 1px 2px rgba(0,0,0,.06); } .about-demo-stage > *{position:relative; z-index:1} .about-demo-stage.glass::before{position:absolute; z-index:0} .about-demo-stage .banner{height:132px; margin-bottom:0; background: radial-gradient(circle at 78% 16%, rgba(255,255,255,.3), transparent 46%), linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 30%, #0b0b14))} .about-demo-stage .profile-head{padding-top:0} .about-demo-stage .avatar{width:84px; height:84px; font-size:34px; margin:-30px auto 10px} .about-demo-stage .profile-name{font-size:23px; font-weight:700; margin:0 0 2px} .about-demo-stage .profile-bio{margin-top:6px; font-size:14.5px} .about-demo-stage .box-stack{margin-top:16px; gap:12px} .about-demo-stage .box-link{pointer-events:none} .about-demo-stage a.box-link{padding-top:14px; padding-bottom:14px} .about-demo-stage .box-socials, .about-demo-stage .box-posts{padding-bottom:16px} .about-demo-stage .box-posts{padding-left:16px; padding-right:16px} .about-demo-stage .box h3{margin-bottom:8px} .about-demo-stage .box-socials h3, .about-demo-stage .box-posts h3{margin-bottom:12px} .about-demo-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:center; margin-top:14px} .about-demo-controls .swatch{width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0} .about-demo-controls .swatch[aria-pressed="true"]{border-color:var(--fg)} .about-demo-hint{margin-top:8px} .about-models{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:18px; text-align:left} .about-models h3{margin:0 0 6px} .stats-ip{display:inline} @media (max-width:640px){ .about-models-lead{text-wrap:balance} .stats-ip{display:block} } @media (max-width:720px){.about-models{grid-template-columns:1fr}} .about-steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:18px; text-align:left} .about-steps .num{display:flex; width:30px; height:30px; border-radius:50%; background:var(--acc); color:#fff; align-items:center; justify-content:center; margin-bottom:8px; font-size:15px} @media (max-width:600px){ .about-steps{grid-template-columns:1fr} .about-zeros{gap:20px} .about-zeros b{font-size:30px} } .auth-consent{margin:10px 0 0; line-height:1.5} label.auth-consent-check{display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-weight:500; text-align:left} label.auth-consent-check input{margin:2px 0 0; flex:0 0 auto; width:15px; height:15px; accent-color:var(--acc); cursor:pointer; min-height:0} .waitlist-box{max-width:380px; margin:12px auto 0} .waitlist-box .form-result{text-align:center} .btn-icon{display:inline-flex; align-items:center; justify-content:center; padding:0 10px} .btn-icon .ico{width:16px; height:16px} .btn-icon-label{display:none} .nav-mobile-only{display:none} @media (max-width:720px){ .btn-icon-label{display:inline} .nav-auth .nav-mobile-only{display:inline-flex} .nav-auth .btn-icon{padding:10px 12px} .nav-auth .nav-edit .ico{display:none} } .help-page{max-width:720px; margin:0 auto 56px; padding:0 4px} .help-search input{max-width:440px; margin:16px auto 0} .help-nav{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px} .help-nav a{font-size:13px; padding:5px 12px; border:1px solid var(--border); border-radius:999px; color:var(--fg); transition:border-color var(--tr), color var(--tr)} @media (hover:hover){ .help-nav a:hover{border-color:var(--acc); color:var(--acc)} } .help-section{margin:42px 0; scroll-margin-top:84px} .help-section h2{display:flex; align-items:center; gap:10px; font-size:21px; margin-bottom:6px} .help-section h2 .ico{color:var(--acc); flex:0 0 auto} .faq-item{border-bottom:1px solid var(--border); scroll-margin-top:84px} .faq-item summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; font-weight:600} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'▸'; color:var(--muted); flex:0 0 auto; transition:transform var(--tr)} .faq-item[open] summary::after{transform:rotate(90deg)} .faq-a{padding:0 0 14px; color:var(--muted); font-size:14px; line-height:1.55} .faq-a p{margin:0 0 10px} .faq-a p:last-child{margin-bottom:0} .faq-a b{color:var(--fg)} .help-support form{max-width:520px} .legal-page{max-width:720px; margin:30px auto 56px; padding:0 4px} .legal-page h1{margin-bottom:6px} .legal-meta{color:var(--muted); font-size:13px; margin-bottom:22px} .legal-binding{margin-top:-14px; font-style:italic; display:none} .legal-toc{border:1px solid var(--border); border-radius:14px; padding:14px 18px; margin:0 0 26px; font-size:14px} .legal-toc b{display:block; margin-bottom:6px} .legal-toc ol{margin:0; padding-left:20px} .legal-toc li{margin:3px 0} .legal-page section{margin:30px 0; scroll-margin-top:70px} .legal-page h2{font-size:19px; margin-bottom:8px} .legal-page h3{font-size:15.5px; margin:16px 0 5px} .legal-page p, .legal-page li{font-size:14.5px; line-height:1.6; color:var(--fg)} .legal-page .muted, .legal-page p.muted{color:var(--muted)} .legal-page ul{padding-left:20px} .legal-page li{margin:4px 0} .legal-todo{display:inline-block; background:color-mix(in srgb, var(--acc) 14%, var(--card)); color:var(--acc); border:1px dashed var(--acc); border-radius:6px; padding:0 6px; font-style:normal} .legal-table{width:100%; border-collapse:collapse; font-size:13.5px; margin:10px 0} .legal-table th, .legal-table td{border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top} .legal-table th{background:color-mix(in srgb, var(--acc) 10%, var(--soft))} .guest-gate{display:none} .auth-gated .guest-gate{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:58vh; padding:48px 22px; } .guest-gate-inner{max-width:440px} .guest-gate-logo{width:54px; height:54px; fill:var(--acc); margin:0 auto 18px; display:block} .guest-gate h1{font-size:clamp(24px,5vw,32px); margin:0 0 12px; line-height:1.15} .guest-gate p{color:var(--muted); margin:0 0 22px; line-height:1.5} .guest-gate-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .guest-gate-wl{margin-top:18px} .test-gate{display:none} .test-gated .gated-content{display:none} .test-gated .test-gate{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:58vh; padding:48px 22px; } .test-gate-inner{max-width:440px} .test-gate .ico{width:46px; height:46px; color:var(--muted); margin:0 auto 16px; display:block} .test-gate h1{font-size:clamp(24px,5vw,32px); margin:0 0 12px; line-height:1.15} .test-gate p{margin:0; line-height:1.5} .unavailable-page{padding:34px 22px} .unavailable-page .ico{width:40px; height:40px; color:var(--muted); margin:0 auto 14px; display:block} .unavailable-page h1{font-size:clamp(20px,4.4vw,26px); margin:0 0 10px; line-height:1.2} .unavailable-page p{margin:0 0 20px} .review-editor-banner{border-color:var(--warn); margin-bottom:18px} .review-editor-banner .ico{width:26px; height:26px; color:var(--warn); margin:0 0 8px; display:block} .review-editor-banner h2{margin:0 0 8px} .review-editor-banner p{margin:0 0 8px} .soft-review-banner{display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:11px 14px; border:1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); background:color-mix(in srgb, var(--warn) 12%, var(--card)); border-radius:var(--radius); font-size:13.5px; color:var(--fg)} .soft-review-banner .ico{flex:0 0 auto; width:18px; height:18px; color:var(--warn)} .post-media-gone{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; padding:20px 16px; border-radius:6px; background:var(--soft); color:var(--muted); font-size:14px; text-align:center; } .post-media-gone .ico{width:18px; height:18px; flex:0 0 auto} .post-media-gone.post-media-pending .ico{color:var(--acc)} .box-stack.gast-gate{position:relative} body:not(.is-auth) .gast-gate > .box{filter:blur(7px); pointer-events:none; user-select:none} .box-ghost{display:flex; flex-direction:column; gap:11px; min-height:62px; justify-content:center} .box-ghost .ghost-bar{height:13px; border-radius:7px; background:var(--soft); width:78%} .box-ghost .ghost-bar.short{width:46%} @media (prefers-reduced-motion: no-preference){ .box-ghost .ghost-bar{ background:linear-gradient(100deg, var(--soft) 30%, var(--border) 50%, var(--soft) 70%); background-size:300% 100%; animation:ghost-shimmer 1.5s ease-in-out infinite; } } @keyframes ghost-shimmer{0%{background-position:120% 0}100%{background-position:-20% 0}} .gast-gate-cta{display:none} body:not(.is-auth) .gast-gate.gb-overlay .gast-gate-cta{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; position:absolute; inset:0; padding:22px 16px; text-align:center; border-radius:var(--radius); background:linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg) 78%, transparent) 50%, transparent 100%); } .gast-gate-heading{font-weight:700; font-size:17px; margin:0; max-width:340px; text-wrap:balance} body:not(.is-auth) .gast-gate.gb-blur > .box{filter:blur(9px)} @media (prefers-reduced-motion: no-preference){ .gast-gate-cta{transition:opacity var(--tr)} } .mb-ghost{align-items:center; padding-top:16px; padding-bottom:16px} .mb-ghost .box-lock{font-size:18px; line-height:1} .mb-ghost-line{margin:0; font-size:16px} .box-members.mb-hidden{display:none} .members-collective-hint{margin:14px 0 0} .members-collective-hint .ico{vertical-align:-2px} body.is-auth .members-collective-hint{display:none} body:not(.is-auth) .box-stack.members-below .box-members{order:1} .blocked-note{padding:64px 22px 48px; display:flex; flex-direction:column; align-items:center; gap:18px} .blocked-note p{margin:0; font-size:16px} .guest-landing{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:48vh; padding:44px 22px} .guest-landing h1{font-size:clamp(22px,4.5vw,30px); margin:0 0 12px; line-height:1.15} .guest-landing p{color:var(--muted); margin:0 0 22px; line-height:1.5} .tag-cloud{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px} .tag-chip{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--fg); font-weight:600; transition:border-color var(--tr), transform var(--tr)} @media (hover:hover){ .tag-chip:hover{border-color:var(--acc); transform:translateY(-1px)} } .tag-chip-hash{color:var(--acc)} .tag-chip-n{color:var(--muted); font-size:12.5px; font-weight:500} .explore-suggest{margin-top:32px} .explore-suggest h2{font-size:18px; margin:0} .tag-more{margin-top:32px} .tag-more h2{font-size:18px; margin:0 0 4px} .maint-gate{display:none} .maint-gated .gated-content{display:none} .maint-gated .maint-gate{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:58vh; padding:48px 22px; } .maint-gate-inner{max-width:440px} .maint-gate-logo{width:54px; height:54px; fill:var(--acc); margin:0 auto 18px; display:block} .maint-gate h1{font-size:clamp(24px,5vw,32px); margin:0 0 12px; line-height:1.15} .maint-gate p{color:var(--muted); margin:0 0 22px; line-height:1.5} .maint-gate-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .maint-flag{display:inline-flex; align-items:center; gap:5px; margin-left:10px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--no-solid); color:#fff; white-space:nowrap; vertical-align:middle} .user-notice{display:inline-flex; align-items:center; margin-left:10px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--soft); color:var(--muted); white-space:nowrap; vertical-align:middle} .notice-bar{display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; font-size:13.5px; font-weight:600; text-align:center; background:color-mix(in srgb, var(--warn) 16%, var(--card)); color:var(--fg); border-bottom:1px solid var(--border)} .notice-bar .ico{color:var(--warn); flex:0 0 auto; width:18px; height:18px} .notice-flag{display:inline-flex; align-items:center; margin-left:10px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--soft); color:var(--muted); vertical-align:middle} body:not(.is-auth) .notice-auth-only{display:none} @media (max-width:720px){ .site-header{flex-wrap:wrap} .maint-flag,.user-notice,.notice-flag{order:5; flex-basis:100%; margin:8px 0 0; border-radius:10px; justify-content:center} } @media (max-width:400px){ body.is-admin .site-header{gap:6px; padding:14px 12px} body.is-admin .admin-link{font-size:12px; gap:5px} body.is-admin .admin-mod-toggle{font-size:11px; padding:2px 7px; margin-left:3px} body.is-admin .nav-tools{gap:6px} } .brand-tiles{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:18px 0 4px} .brand-tile{flex:1 1 150px; max-width:200px; border:1px solid var(--border); border-radius:14px; padding:24px 16px 14px; display:flex; flex-direction:column; align-items:center; gap:12px} .brand-tile svg.bl-mark{width:60px; height:60px} .brand-tile span{display:block} .brand-tile-accent{background:var(--soft)} .brand-tile-accent svg.bl-mark{fill:var(--acc)} .brand-tile-light{background:#fff} .brand-tile-light svg.bl-mark{fill:#16161c} .brand-tile-light span{color:#5b5b66} .brand-tile-dark{background:#16161c; border-color:#16161c} .brand-tile-dark svg.bl-mark{fill:#fff} .brand-tile-dark span{color:#fff} .brand-downloads{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0} .brand-colors{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px} .brand-color{display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:14px; padding:10px 14px} .brand-color-chip{width:34px; height:34px; border-radius:50%; flex:0 0 auto} .brand-color-chip-bordered{box-shadow:inset 0 0 0 1px var(--border)} .brand-color code{color:var(--muted)} .brand-snippet{background:var(--soft); border:1px solid var(--border); border-radius:14px; padding:14px 16px; overflow-x:auto; margin:10px 0} .brand-snippet code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.55; white-space:pre} .brand-rule{border:1px solid var(--border); border-radius:14px; padding:16px 18px} .brand-rule h3{display:flex; align-items:center; gap:8px; margin:0 0 6px} .brand-rule ul{margin:0; padding-left:20px} .brand-rule li{margin:7px 0; line-height:1.45; color:var(--muted)} .brand-rule-do h3 .ico{color:var(--ok)} .brand-rule-dont h3 .ico{color:var(--no)} body[data-home-style="motion"]:not(.is-auth) .site-main:has(#home-hero.mo-wrap), body[data-home-style="motion2"]:not(.is-auth) .site-main:has(#home-hero.mo-wrap){max-width:none; padding:0} .mo-wrap{--mo-or:#ff5f1f; --mo-lift:0 2px 6px rgba(0,0,0,.05), 0 18px 42px -20px color-mix(in srgb, var(--acc) 25%, transparent); display:block; width:100%; overflow-x:clip} .mo-in{max-width:1180px; margin:0 auto; padding:0 28px} .mo-wrap .ico{width:1em; height:1em; fill:currentColor; vertical-align:-.12em} .mo-wrap h1,.mo-wrap h2,.mo-wrap h3,.mo-wrap h4,.mo-wrap h5,.mo-wrap p{margin:0} .mo-a{color:var(--acc); font-weight:700; cursor:pointer} .mo-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:120; background:var(--acc); transform-origin:0 50%; transform:scaleX(0)} @supports (animation-timeline: scroll(root)){ .mo-progress{animation:moPgrow linear both; animation-timeline:scroll(root)} } @keyframes moPgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} .mo-hero{position:relative; padding:56px 0 56px; min-height:88vh; display:flex; align-items:center; overflow:clip} .mo-topglow{position:absolute; left:50%; top:0; transform:translate(-50%,-56%); width:min(80vw,940px); height:320px; border-radius:50%; background:var(--acc); opacity:.06; filter:blur(90px); pointer-events:none; z-index:-1} .mo-heroGrid{display:grid; grid-template-columns:1.16fr .84fr; gap:30px; align-items:center; width:100%} .mo-big{font-size:clamp(40px,5.4vw,96px); line-height:1.08; letter-spacing:-.045em; font-weight:900} .mo-ln{display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em} .mo-ln > span{display:block; transform:translateY(112%); animation:moLineup .85s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0s)} @keyframes moLineup{to{transform:none}} .mo-hi{position:relative; white-space:nowrap; padding:0 .07em; color:#fff} .mo-hi::before{content:""; position:absolute; left:-.03em; right:-.03em; top:9%; bottom:5%; z-index:-1; transform:rotate(-1.6deg); background:var(--mo-or); border-radius:6px} .mo-big .mo-hi{color:var(--mo-or); padding:0} .mo-big .mo-hi::before{display:none} .mo-wrap .mo-sub{font-size:18.5px; line-height:1.55; color:var(--muted); max-width:470px; margin-top:26px; font-weight:500} .mo-sub b{color:var(--fg); font-weight:800} .mo-cta{display:flex; align-items:center; gap:14px; margin-top:32px; flex-wrap:wrap} .mo-wrap .mo-btn-big{font-size:16px; padding:13px 26px; font-weight:700; min-height:48px} .mo-wrap .btn-primary{background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:none} .mo-wrap .mo-final .btn-primary{background:#fff; border-color:#fff; color:var(--acc)} @media (hover:hover){ .mo-wrap .mo-final .btn-primary:hover{background:#fff; border-color:#fff; color:var(--acc); opacity:.9; transform:translateY(-1px)} } .mo-final > .mo-in > .mo-cta .btn:not(.btn-primary){background:transparent; border-color:#fff; color:#fff} @media (hover:hover){ .mo-wrap .mo-final > .mo-in > .mo-cta .btn:not(.btn-primary):hover{background:rgba(255,255,255,.16); border-color:#fff; color:#fff} } .mo-final .mo-a{color:#fff; text-decoration:underline; text-underline-offset:2px} .mo-final .mo-wlbox .mo-a{color:var(--acc); text-decoration:none} .mo-wrap .mo-final .mo-wlbox .btn-primary{background:var(--acc); border-color:var(--acc); color:#fff} @media (hover:hover){ .mo-wrap .mo-final .mo-wlbox .btn-primary:hover{background:var(--acc); border-color:var(--acc); color:#fff; opacity:.9} } @media (hover:hover){ .mo-wrap .btn-primary:hover{background:var(--acc); border-color:var(--acc); opacity:.9; transform:translateY(-1px); box-shadow:none} } .mo-fadeup{opacity:0; transform:translateY(20px); animation:moFup .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0s)} @keyframes moFup{to{opacity:1; transform:none}} @supports (animation-timeline: view()){ .mo-heroGrid{animation:moHeroOut linear both; animation-timeline:view(); animation-range:exit 0% exit 85%} @keyframes moHeroOut{to{opacity:.15; transform:translateY(-46px)}} } .mo-stage{position:relative; display:flex; justify-content:center; align-items:center; min-height:640px} .mo-blob{position:absolute; width:430px; height:430px; background:var(--acc); z-index:0; border-radius:46% 54% 58% 42% / 52% 46% 54% 48%; animation:moBlob 16s ease-in-out infinite} .mo-b2{width:120px; height:120px; background:var(--mo-or); left:2%; top:6%; animation-delay:-6s} @keyframes moBlob{0%,100%{border-radius:46% 54% 58% 42% / 52% 46% 54% 48%}50%{border-radius:56% 44% 46% 54% / 44% 58% 44% 56%}} .mo-phone{position:relative; z-index:2; width:324px; border-radius:44px; padding:11px; background:#17141f; border:2px solid var(--border); box-shadow:0 34px 70px -30px rgba(0,0,0,.45); transform:rotate(2.5deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s cubic-bezier(.2,.7,.2,1); will-change:transform} .mo-screen{position:relative; border-radius:34px; overflow:hidden; background:var(--bg); min-height:600px} .mo-statusbar{display:flex; justify-content:space-between; align-items:center; padding:12px 20px 2px; font-size:12px; font-weight:700; color:#f2f1f7; position:relative; z-index:5} .mo-stk{position:absolute; z-index:5; font-size:12.5px; font-weight:900; padding:8px 14px; border-radius:999px; background:var(--mo-or); color:#fff; transform:rotate(-7deg); top:2%; right:2%; animation:moPop .55s cubic-bezier(.2,.7,.2,1) .45s both} .mo-chip{position:absolute; z-index:5; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:var(--card); border:2px solid var(--border); box-shadow:var(--shadow); font-size:12.5px; font-weight:800; white-space:nowrap; line-height:1.3; animation:moPop .55s cubic-bezier(.2,.7,.2,1) both} .mo-chip small{display:block; font-size:11px; color:var(--muted); font-weight:600; margin-top:1px} .mo-cic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; color:#fff} .mo-cic .ico{width:15px; height:15px} .mo-c1{top:6%; left:-64px; transform:rotate(-3deg); animation-delay:.55s} .mo-c1 .mo-cic{background:var(--acc)} .mo-c2{bottom:7%; right:-52px; transform:rotate(2.5deg); animation-delay:.65s} .mo-c2 .mo-cic{background:var(--mo-or)} .mo-mbars{display:flex; align-items:flex-end; gap:2px; height:14px} .mo-mbars i{width:3.5px; background:#fff; border-radius:2px} .mo-mbars i:nth-child(1){height:45%}.mo-mbars i:nth-child(2){height:75%}.mo-mbars i:nth-child(3){height:100%} @keyframes moPop{from{opacity:0; transform:scale(.7)}} .mo-pf{padding:0 14px 18px} .mo-bn{height:96px; margin:-34px -14px 0; background:#241f38; border-bottom:2px solid var(--border)} .mo-avatar{width:74px; height:74px; border-radius:50%; margin:0 auto; position:relative; display:flex; align-items:center; justify-content:center; background:var(--acc); color:#fff; font-size:30px; font-weight:700; border:2px solid var(--border); box-shadow:var(--shadow); z-index:2} .mo-avatar.mo-sq{border-radius:14px} img.mo-avatar, img.mo-avatar-l, img.mo-mav, img.mo-fav{object-fit:cover} .mo-bn + .mo-pfhead .mo-avatar{margin-top:-25px} .mo-pfhead{text-align:center} .mo-pfhead:first-child{padding-top:14px} .mo-name{font-size:17.5px; font-weight:800; letter-spacing:-.02em; margin-top:9px; display:flex; align-items:center; justify-content:center} .mo-pfhead .mo-vf{width:15px; height:15px; margin-left:4px} .mo-pfhead .mo-vf .ico{width:9px; height:9px} .mo-vf{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--acc); color:#fff; margin-left:5px; position:relative; top:-1px; flex:0 0 auto} .mo-vf .ico{width:10px; height:10px} .mo-vf .ico, .mo-bigvf .ico{stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round} html[data-theme="dark"] .mo-vf{color:#000} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .mo-vf{color:#000} } .mo-handle{font-size:12.5px; color:var(--muted); margin-top:2px; font-weight:500; display:flex; align-items:center; justify-content:center; gap:7px} .mo-tg{display:inline-block; font-size:10.5px; font-weight:600; padding:1px 8px; border-radius:999px; border:1.5px solid var(--acc); color:var(--acc)} .mo-tg.mo-plus{background:var(--acc); color:#fff; font-weight:700} .mo-wrap .mo-bio{font-size:13px; color:var(--fg); opacity:.82; line-height:1.5; margin:10px 6px 0; font-weight:500} .mo-act{display:flex; gap:6px; justify-content:center; align-items:center; margin-top:13px} .mo-b{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:9px; border:2px solid var(--border); background:var(--card); color:var(--fg)} .mo-b.mo-gh{border-color:transparent; background:transparent; color:var(--muted); padding:6px 7px} .mo-b .ico{width:14px; height:14px} .mo-wrap .mo-gcta{font-size:11px; color:var(--muted); margin-top:11px; font-weight:500} .mo-bx{display:block; margin:12px 0 0; background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:13px 14px 12px; box-shadow:var(--shadow); text-align:left; color:var(--fg)} .mo-bx h4{font-size:13.5px; font-weight:800; letter-spacing:-.01em; margin:0} .mo-desc{font-size:12px; color:var(--muted); margin-top:3px; font-weight:500} .mo-bx.mo-link{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; padding-bottom:14px} .mo-host{font-size:11.5px; color:var(--muted); font-weight:400; white-space:nowrap} .mo-coupon{display:inline-block; margin-top:9px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; border:2px dashed var(--acc); color:var(--acc); border-radius:8px; padding:4px 12px; font-size:13.5px; letter-spacing:.06em} .mo-cd{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); margin-top:8px; font-weight:500; font-variant-numeric:tabular-nums} .mo-cd .ico{width:12px; height:12px} .mo-post{border:1px solid var(--border); border-radius:10px; padding:11px 13px; margin-top:9px; font-size:12.5px; line-height:1.5; font-weight:400} .mo-hl{color:var(--acc)} .mo-pimg{height:106px; border-radius:8px; margin-top:9px; background:var(--soft); border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); position:relative; overflow:hidden} .mo-pimg .ico{width:22px; height:22px; opacity:.5} .mo-pimg-l{height:170px} .mo-pimg img,.mo-fimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block} .mo-prow{display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--muted); margin-top:8px; font-weight:400} .mo-prow .ico{width:12px; height:12px} .mo-prow span{display:inline-flex; align-items:center; gap:4px} .mo-soc{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap} .mo-soc i{width:38px; height:38px; border-radius:50%; border:2px solid var(--border); background:var(--card); color:var(--fg); display:flex; align-items:center; justify-content:center; font-style:normal} .mo-soc i svg{width:18px; height:18px} .mo-subrow{display:flex; align-items:center; justify-content:space-between; gap:10px} .mo-subrow h4{display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:700} .mo-bell{color:var(--acc); display:inline-flex} .mo-bell .ico{width:17px; height:17px} .mo-chev{color:var(--muted); font-weight:400; font-size:15px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; flex:0 0 auto} .mo-mini{display:flex; align-items:center; gap:10px; margin:6px 2px 4px; text-align:left} .mo-mav{width:40px; height:40px; border-radius:50%; flex:0 0 auto; background:var(--acc); display:grid; place-items:center; color:#fff; font-size:16px; font-weight:700; border:2px solid var(--border)} .mo-mini b{font-size:14px; display:flex; align-items:center; font-weight:800} .mo-mini .mo-vf{width:12px; height:12px; margin-left:3px} .mo-mini .mo-vf .ico{width:7px; height:7px} .mo-mini small{display:block; color:var(--muted); font-size:11.5px; font-weight:500} .mo-wrap .mo-note{font-size:11.5px; color:var(--muted); text-align:center; margin-top:12px; line-height:1.5; font-weight:500} .mo-note b{color:var(--fg)} .mo-marq{overflow:hidden; border-width:3px 0; border-style:solid; border-color:var(--border); background:var(--card)} .mo-mrow{display:inline-flex; align-items:center; gap:30px; white-space:nowrap; padding:15px 0; font-weight:900; font-size:19px; letter-spacing:-.02em; animation:moMarq 32s linear infinite} .mo-sep{display:inline-flex; align-items:center} .mo-sep svg{width:20px; height:20px; fill:var(--mo-or)} @keyframes moMarq{to{transform:translateX(-50%)}} .mo-manifest{padding:10vh 0; margin:7vh auto 0; width:min(1560px, calc(100% - 48px)); border-radius:72px 44px 64px 48px; background:color-mix(in srgb, var(--acc) 8%, var(--bg))} .mo-scrub{font-size:clamp(27px,3.8vw,50px); line-height:1.22; letter-spacing:-.035em; font-weight:850; max-width:1020px} .mo-w{display:inline-block} @supports (animation-timeline: view()){ .mo-w{opacity:.12; animation:moWIn linear both; animation-timeline:view(); animation-range:entry 88% cover 32%} @keyframes moWIn{to{opacity:1}} .mo-manifest{animation:moSecShrink linear both; animation-timeline:view(); animation-range:exit 50% exit 100%} @keyframes moSecShrink{to{transform:scale(.93); opacity:.5}} } .mo-hl2{font-style:normal; color:var(--mo-or)} .mo-sec{font-size:clamp(34px,4.6vw,58px); letter-spacing:-.04em; line-height:.98; font-weight:900} .mo-wrap .mo-secsub{color:var(--muted); font-size:17px; line-height:1.55; margin-top:16px; max-width:560px; font-weight:500} .mo-story{position:relative; padding:12vh 0 5vh} .mo-shead{max-width:680px; margin-bottom:6vh} .mo-sgrid{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start} .mo-spin{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center} .mo-swrap{position:relative; translate:-120px 0} .mo-sblob{position:absolute; left:50%; top:50%; width:390px; height:390px; transform:translate(-50%,-50%); z-index:0; background:var(--sc,var(--acc)); border-radius:46% 54% 58% 42% / 52% 46% 54% 48%; transition:background .6s ease; animation:moBlob 18s ease-in-out infinite; display:none} .mo-slwrap{position:absolute; left:50%; top:50%; width:330px; height:320px; margin:-160px 0 0 -165px; z-index:0; pointer-events:none; --lgx:240px; --lgds:1.12; --lgs0:1.18; rotate:-45deg; scale:1.18; translate:0 0; transition:translate 1.5s cubic-bezier(.25,.8,.25,1), scale 1.5s cubic-bezier(.25,.8,.25,1), rotate 1.5s cubic-bezier(.25,.8,.25,1)} .mo-slogo, .mo-sldisk{position:absolute; inset:0; width:100%; height:100%; fill:var(--sc, var(--mo-or)); transition:fill .6s ease} .mo-sldisk{transition:fill .6s ease, scale 1.1s cubic-bezier(.3,.8,.3,1)} .mo-story.mo-lgpre[data-scene="1"] .mo-slwrap{ translate:calc(var(--lgx)*.22) 0; rotate:-26deg; scale:calc(var(--lgs0)*.55 + var(--lgds)*.45)} .mo-story.mo-lgin[data-scene="1"] .mo-slwrap{ translate:var(--lgx) 0; rotate:8deg; scale:var(--lgds)} .mo-story.mo-lgin[data-scene="1"] .mo-sldisk{scale:0; transition-delay:0s, .35s} .mo-sglow{position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; z-index:0} .mo-sglow1{width:520px; height:520px; left:50%; top:50%; margin:-270px 0 0 -274px; background:var(--sc,var(--acc)); opacity:.32; transition:background .6s ease; animation:moGlowDrift 16s ease-in-out infinite} .mo-sglow2{width:340px; height:340px; right:-220px; bottom:-90px; background:var(--mo-or); opacity:.22; animation:moGlowDrift 19s ease-in-out -6s infinite reverse} .mo-sphone{position:relative; z-index:1; width:314px; border-radius:44px; padding:11px; background:#17141f; border:2px solid var(--border); box-shadow:0 34px 70px -30px rgba(0,0,0,.45)} .mo-sscreen{position:relative; border-radius:34px; overflow:hidden; background:var(--bg); height:584px} .mo-scene{position:absolute; inset:0; padding:26px 14px 16px; opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; overflow:hidden} .mo-story[data-scene="1"] .mo-scene[data-s="1"], .mo-story[data-scene="2"] .mo-scene[data-s="2"], .mo-story[data-scene="3"] .mo-scene[data-s="3"], .mo-story[data-scene="4"] .mo-scene[data-s="4"]{opacity:1; transform:none} .mo-chart{display:flex; align-items:flex-end; gap:8px; height:128px; padding:12px 6px 0; margin-top:6px} .mo-bar{flex:1; height:100%; border-radius:6px 6px 2px 2px; background:var(--acc); transform:scaleY(.08); transform-origin:bottom; transition:transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i)*60ms)} .mo-bar.mo-top{background:var(--mo-or)} .mo-story[data-scene="4"] .mo-bar{transform:scaleY(var(--v))} .mo-chart2{display:flex; gap:8px; font-size:10px; color:var(--muted); font-weight:600; padding:0 6px} .mo-chart2 span{flex:1; text-align:center} .mo-steps{padding:2vh 0 12vh} .mo-step{min-height:84vh; display:flex; flex-direction:column; justify-content:center; position:relative; opacity:.3; transition:opacity .45s ease} .mo-step.mo-active{opacity:1} .mo-step h3{font-size:clamp(28px,3.2vw,44px); letter-spacing:-.035em; font-weight:900; line-height:1.02; margin-bottom:14px} .mo-step p{color:var(--muted); font-size:16.5px; line-height:1.6; max-width:430px; font-weight:500} .mo-tags{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap} .mo-tags span{font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; border:2px solid var(--border); color:var(--fg); background:var(--card); transition:border-color .5s ease, color .5s ease} .mo-step.mo-active .mo-tags span{border-color:var(--nc,var(--acc)); color:var(--nc,var(--acc))} .mo-zoom{padding:12vh 0 7vh; position:relative; overflow-x:clip} .mo-zhead{max-width:760px; margin:0 0 6vh} .mo-browser{max-width:960px; margin:0 auto; border-radius:16px; overflow:hidden; border:2px solid var(--border); background:var(--bg); box-shadow:0 30px 70px -30px rgba(0,0,0,.35)} @supports (animation-timeline: view()){ .mo-zoom{perspective:1200px} .mo-browser{animation:moZoomIn linear both; animation-timeline:view(); animation-range:entry 5% cover 42%; transform-origin:50% 16%} @keyframes moZoomIn{from{transform:scale(.84) rotateX(8deg) translateY(46px); opacity:.35}to{transform:none; opacity:1}} } .mo-bbar{display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:2px solid var(--border); background:var(--card)} .mo-bbar i,.mo-pbar i{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--border)} .mo-bbar i:nth-child(1),.mo-pbar i:nth-child(1){background:#ff5f57} .mo-bbar i:nth-child(2),.mo-pbar i:nth-child(2){background:#febc2e} .mo-bbar i:nth-child(3),.mo-pbar i:nth-child(3){background:#28c840} .mo-url{flex:1; min-width:0; margin:0 0 0 6px; text-align:center; font-size:12.5px; color:var(--muted); background:var(--soft); border:1.5px solid var(--border); padding:5px 12px; border-radius:8px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mo-url b{color:var(--fg); font-weight:800} .mo-demo-toggle{position:relative; z-index:7; flex:0 0 auto; margin-left:2px; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); background:var(--card); color:var(--fg); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:border-color .2s ease} @media (hover:hover){ .mo-demo-toggle:hover{border-color:var(--acc)} } .mo-dt-ic{width:14px; height:14px; border-radius:50%; border:1.6px solid currentColor; background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%)} .mo-zoom .mo-browser[data-demo-theme="light"]{--bg:#ffffff; --fg:#16161c; --muted:#63636e; --card:#fcfcfe; --soft:#f2f1f6; --border:#e5e5e5; background:var(--bg); color:var(--fg)} .mo-zoom .mo-browser[data-demo-theme="dark"]{--bg:#0e0d12; --fg:#f2f1f7; --muted:#9b98a8; --card:#16141d; --soft:#1d1a26; --border:#2c2836; background:var(--bg); color:var(--fg)} .mo-zoom .mo-browser[data-demo-theme="light"] .mo-vf{color:#fff} .mo-zoom .mo-browser[data-demo-theme="dark"] .mo-vf{color:#000} .mo-bbody{padding:0 24px 30px} .mo-pcol{max-width:620px; margin:0 auto} .mo-banner{height:190px; border:2px solid var(--border); border-radius:var(--radius); background:#241f38; margin-top:22px} .mo-avatar-l{width:86px; height:86px; font-size:36px; margin-top:-30px} .mo-pcol .mo-name{font-size:24px; margin-top:10px} .mo-pcol .mo-vf{width:20px; height:20px; top:-2px} .mo-pcol .mo-vf .ico{width:12px; height:12px} .mo-pcol .mo-handle{font-size:14px} .mo-pcol .mo-tg{font-size:11.5px; padding:1.5px 9px} .mo-pcol .mo-bio{font-size:14.5px; max-width:440px; margin-inline:auto} .mo-pcol .mo-b{font-size:13.5px; padding:7px 15px} .mo-pcol .mo-b .ico{width:15px; height:15px} .mo-pcol .mo-act{gap:4px} .mo-pcol .mo-b.mo-gh{padding-inline:11px} .mo-pcol .mo-act > .mo-b:first-child{margin-right:8px} .mo-pcol .mo-gcta{font-size:12.5px} .mo-pcol .mo-bx{margin-top:14px} .mo-pcol .mo-bx:has(.mo-post){padding-bottom:16px} .mo-pcol .mo-bx h4{font-size:15px} .mo-pcol .mo-subrow h4{font-size:17px} .mo-pcol .mo-bell .ico{width:19px; height:19px} .mo-pcol .mo-desc{font-size:13px} .mo-pcol .mo-host{font-size:12.5px} .mo-pcol .mo-post{font-size:13.5px} .mo-pcol .mo-prow{font-size:12.5px} .mo-pcol .mo-soc i{width:44px; height:44px} .mo-pcol .mo-soc i svg{width:20px; height:20px} .mo-hsticky .mo-hhead{width:100%; padding-top:0; padding-bottom:40px} .mo-feat{color:var(--mo-or, #ff5f1f); font-weight:650} .mo-hsticky .mo-hfoot{width:100%; padding-top:36px; padding-bottom:0} .mo-hsticky{position:relative} .mo-hfoot .mo-secsub{margin-top:0; max-width:620px} @supports (animation-timeline: view()){ .mo-hwrap{height:300vh; view-timeline-name:--mo-h} .mo-hsticky{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden} .mo-htrack{animation:moSlideX linear both; animation-timeline:--mo-h; animation-range:contain 0% contain 100%} @keyframes moSlideX{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100vw - 56px))}} } .mo-htrack{display:flex; gap:20px; width:max-content; padding:0 28px; align-items:stretch} .mo-hviewport{position:relative; width:100%} .mo-hviewport::before, .mo-hviewport::after{content:""; position:absolute; top:0; bottom:0; width:76px; z-index:2; pointer-events:none} .mo-hviewport::before{left:0; background:linear-gradient(90deg, var(--bg), transparent)} .mo-hviewport::after{right:0; background:linear-gradient(270deg, var(--bg), transparent)} .mo-hglow{position:absolute; border-radius:50%; filter:blur(84px); pointer-events:none; z-index:0} .mo-hglow1{width:620px; height:430px; left:50%; top:50%; margin:-235px 0 0 -330px; background:var(--acc); opacity:.1; animation:moGlowDrift 22s ease-in-out infinite} .mo-hglow2{width:300px; height:300px; right:4%; bottom:7%; background:var(--mo-or); opacity:.06; animation:moGlowDrift 26s ease-in-out -9s infinite reverse} .mo-hsticky .mo-hhead, .mo-hsticky .mo-hfoot{position:relative; z-index:1} .mo-hviewport{z-index:1} .mo-mp{width:300px; flex:0 0 auto; border:2px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--mo-lift); overflow:hidden; scroll-snap-align:center; text-align:center; position:relative} .mo-mbn{height:74px; border-bottom:2px solid var(--border)} .mo-mp .mo-avatar{width:62px; height:62px; font-size:24px; margin-top:-24px} .mo-mp .mo-name{font-size:15.5px} .mo-mp .mo-vf{width:13px; height:13px; margin-left:3px} .mo-mp .mo-vf .ico{width:8px; height:8px} .mo-mbody{padding:0 14px 16px} .mo-mp.mo-plain .mo-mbody{padding-top:42px} .mo-mp.mo-plain .mo-avatar{margin-top:0} .mo-mp .mo-tg{font-size:8.5px; padding:0.5px 6px; border-width:1px} .mo-mp .mo-bx{padding:11px 12px} .mo-mp .mo-bx h4{font-size:12.5px} .mo-mp .mo-host{font-size:10.5px} .mo-mbio{font-size:12px; color:var(--muted); line-height:1.4; margin:7px 0 3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .mo-typ{position:absolute; top:10px; left:10px; z-index:3; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--card); border:2px solid var(--border); box-shadow:var(--shadow)} .mo-darkcard{--bg:#0e0d12; --fg:#f2f1f7; --muted:#9b98a8; --card:#16141d; --soft:#1d1a26; --border:#2c2836; background:var(--card); color:var(--fg)} .mo-darkcard .mo-vf{color:#000} html[data-theme="dark"] .mo-mp:not(.mo-darkcard){ --bg:#edecf3; --fg:#1c1b24; --muted:#6d6a78; --card:#f3f2f8; --soft:#e6e4ef; --border:#dedbe8; background:var(--card); color:var(--fg)} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .mo-mp:not(.mo-darkcard){ --bg:#edecf3; --fg:#1c1b24; --muted:#6d6a78; --card:#f3f2f8; --soft:#e6e4ef; --border:#dedbe8; background:var(--card); color:var(--fg)} } html[data-theme="dark"] .mo-mp:not(.mo-darkcard) .mo-vf{color:#fff} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .mo-mp:not(.mo-darkcard) .mo-vf{color:#fff} } .mo-duo{padding:11vh 0 4vh} .mo-duogrid{display:grid; grid-template-columns:1.05fr .95fr; gap:22px; margin-top:6vh; align-items:start} .mo-panel{border:2px solid var(--border); border-radius:var(--radius); background:var(--bg); box-shadow:var(--mo-lift); overflow:hidden} .mo-pbar{display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:2px solid var(--border); background:var(--card)} .mo-pbar i{width:9px; height:9px} .mo-pbar .mo-url{font-size:11px; padding:3px 10px} .mo-pin2{padding:16px 16px 18px} .mo-pin2 h5{font-size:15px; font-weight:800; letter-spacing:-.02em; margin-bottom:2px} .mo-h5gap{margin-top:14px} .mo-wrap .mo-psub{font-size:11px; color:var(--muted); font-weight:500; margin-bottom:12px} .mo-fcols{columns:2; column-gap:10px} .mo-fitem{break-inside:avoid; border:1px solid var(--border); border-radius:10px; background:var(--card); padding:10px 12px; margin-bottom:10px; font-size:11.5px; line-height:1.5; text-align:left} .mo-fmeta{display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; margin-bottom:6px; font-size:11px; color:var(--muted); font-weight:400; line-height:1.45} .mo-fago{white-space:nowrap} .mo-fav{width:20px; height:20px; border-radius:50%; background:var(--acc); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex:0 0 auto; margin-right:2px; position:relative; top:-1px} .mo-fuser{color:var(--acc); font-weight:600} .mo-fmeta .mo-vf{width:10px; height:10px; margin-left:-1px; top:-1px} .mo-fmeta .mo-vf .ico{width:6px; height:6px} .mo-fimg{height:64px; border-radius:7px; margin-top:7px; background:var(--soft); border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); position:relative; overflow:hidden} .mo-fimg .ico{width:16px; height:16px; opacity:.5} .mo-fimg.mo-fimg-l{height:130px} .mo-fitem .mo-coupon{font-size:11px; padding:3px 9px; margin-top:7px} .mo-fitem .mo-cd{font-size:9.5px; margin-top:6px} .mo-fitem .mo-cd .ico{width:10px; height:10px} .mo-fhost{font-size:10px; color:var(--muted); font-weight:500; margin-top:5px} .mo-facts{display:flex; align-items:center; gap:12px; margin-top:8px; font-size:10.5px; color:var(--muted)} .mo-facts span{display:inline-flex; align-items:center; gap:4px} .mo-facts .ico{width:12px; height:12px} .mo-fflag{opacity:.75} .mo-tagchips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px} .mo-tagchips span{font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:999px; border:1.5px solid var(--border); color:var(--fg); background:var(--card)} .mo-tagchips span.mo-on{border-color:var(--acc); color:var(--acc)} .mo-duocol{min-width:0} .mo-wrap .mo-dnote{font-size:12.5px; color:var(--muted); font-weight:500; margin:12px 8px 0; line-height:1.5} .mo-dnote b{color:var(--fg)} .mo-bento{padding:12vh 0 4vh; position:relative} .mo-bridge{position:absolute; left:50%; bottom:0; width:min(74vw,880px); height:360px; transform:translate(-50%,55%); border-radius:50%; background:var(--acc); opacity:.09; filter:blur(80px); pointer-events:none; z-index:-1} .mo-bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:6vh} .mo-bcard{position:relative; border:2px solid var(--border); border-radius:var(--radius); background:var(--card); padding:24px 24px 22px; min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease} @media (hover:hover){ .mo-bcard:hover{transform:translateY(-3px); border-color:var(--acc)} } .mo-wide{grid-column:span 2} .mo-bic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:auto; flex:0 0 auto; background:color-mix(in srgb, var(--acc) 14%, var(--card)); border:2px solid var(--border); color:var(--acc)} .mo-bic.mo-or{background:color-mix(in srgb, var(--mo-or) 14%, var(--card)); color:var(--mo-or)} .mo-bic .ico{width:20px; height:20px} .mo-bic .mo-mbars i{background:var(--acc); width:4px} .mo-bic .mo-mbars{height:18px} .mo-bcard h3{font-size:19px; font-weight:800; letter-spacing:-.02em; margin:18px 0 7px} .mo-bcard p{color:var(--muted); font-size:14px; line-height:1.55; font-weight:500} .mo-huge{font-size:clamp(60px,7vw,100px); font-weight:900; letter-spacing:-.05em; line-height:1; color:var(--acc); margin-bottom:auto} .mo-cnote{font-size:12.5px; color:var(--muted); margin-top:10px; font-weight:600} .mo-cbite{position:relative; display:inline-block; width:86px; height:22px; margin-right:2px; vertical-align:-6px; overflow:hidden} .mo-cbite-logo{position:absolute; left:0; top:50%; width:18px; height:18px; fill:var(--acc); transform:translateY(-50%) rotate(-3deg); animation:moChomp .9s ease-in-out infinite} @keyframes moChomp{0%,100%{transform:translateY(-50%) rotate(-3deg) scale(1)}45%{transform:translateY(-50%) rotate(9deg) scale(1.07)}} .mo-ck{position:absolute; top:50%; left:16px; font-size:12px; line-height:1; opacity:0; transform:translate(66px,-50%); animation:moCk 3.2s linear infinite} .mo-ck2{animation-delay:1.6s} @keyframes moCk{ 0% {opacity:1; transform:translate(66px,-50%) rotate(0deg) scale(1)} 72% {opacity:1; transform:translate(12px,-50%) rotate(-280deg) scale(.9)} 90%,100%{opacity:0; transform:translate(0,-50%) rotate(-320deg) scale(0)} } .mo-ctrl{padding:9vh 0 3vh; position:relative} .mo-cgrid{display:grid; grid-template-columns:1fr 1.05fr; gap:52px; align-items:start; margin-top:5vh} .mo-tcard{border:2px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:20px 22px; display:flex; gap:16px; align-items:flex-start; margin-bottom:14px} .mo-tcard .mo-bic{width:40px; height:40px; margin:0} .mo-bigvf{width:40px; height:40px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; flex:0 0 auto} .mo-bigvf .ico{width:22px; height:22px} html[data-theme="dark"] .mo-bigvf{color:#000} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .mo-bigvf{color:#000} } .mo-tcard h3{font-size:17px; font-weight:800; letter-spacing:-.02em; margin-bottom:5px} .mo-tcard p{font-size:13.5px; color:var(--muted); line-height:1.55; font-weight:500} .mo-setcard{border:2px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:22px 24px 24px} .mo-setcard h4{font-size:18px; font-weight:700; margin-bottom:16px} .mo-slab{display:block; font-size:14px; font-weight:700; margin-top:14px} .mo-mut{font-weight:500; color:var(--muted); font-size:12.5px} .mo-fsel{display:flex; justify-content:space-between; align-items:center; gap:10px; border:2px solid var(--border); border-radius:var(--radius-s); background:var(--bg); padding:9px 12px; font-size:14px; font-weight:500; margin-top:6px} .mo-fsel i{color:var(--muted); font-style:normal; font-size:12px} .mo-wrap .mo-setnote{font-size:12px; color:var(--muted); margin-top:14px; line-height:1.5; font-weight:500} .mo-nums{padding:9vh 0 0; position:relative} .mo-ngrid{display:grid; grid-template-columns:.9fr 1fr 1.35fr .8fr; gap:16px; text-align:center; margin-top:6vh} .mo-wrap .mo-nlead{text-align:center; margin:7vh auto 0; max-width:640px; font-size:clamp(16.5px,1.9vw,20px); line-height:1.55; font-weight:600; color:var(--muted)} .mo-wrap .mo-nlead b{color:var(--fg)} .mo-ncell{padding:32px 24px 28px; border:2px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--mo-lift)} .mo-ncell b{display:block; font-size:clamp(38px,4.6vw,60px); font-weight:900; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; color:var(--acc)} .mo-ncell:nth-child(2) b{color:var(--mo-or)} .mo-ncell b em{font-style:normal} .mo-ncell span{display:block; margin-top:9px; font-size:13.5px; color:var(--muted); font-weight:600} .mo-outro{padding:0 0 8vh; text-align:center} .mo-wrap .mo-outro-claim{font-weight:900; letter-spacing:-.04em; font-size:clamp(21px,2.7vw,31px); line-height:1.1} .mo-outro-claim .mo-hi{color:var(--mo-or); padding:0} .mo-outro-claim .mo-hi::before{display:none} .mo-wrap .mo-outro-sub{margin-top:9px; font-size:13px; color:var(--muted); font-weight:600} .mo-final{position:relative; padding:8vh 0; min-height:62vh; display:flex; flex-direction:column; justify-content:center; text-align:center; overflow:clip; background:var(--acc); color:#fff; margin:5vh auto 56px; width:min(1560px, calc(100% - 48px)); border-radius:56px 72px 48px 64px} .mo-final.mo-rv{transform:translateY(56px) scale(.98); transition-duration:.95s} .mo-final .mo-in{width:100%} .mo-final h2.mo-final-soft{transition:transform .6s cubic-bezier(.2,.7,.2,1)} .mo-final:hover h2.mo-final-soft{transform:translateY(-8px)} .mo-final::before{content:""; position:absolute; inset:-25%; pointer-events:none; background:radial-gradient(42% 55% at 28% 32%, rgba(255,255,255,.13), transparent 70%), radial-gradient(38% 50% at 74% 72%, rgba(255,95,31,.16), transparent 72%); animation:moFinalDrift 24s ease-in-out infinite alternate} @keyframes moFinalDrift{ 0%{transform:translate(0,0) rotate(0deg)} 100%{transform:translate(4%,-3%) rotate(4deg)} } .mo-fb1{position:absolute; left:-90px; bottom:-60px; width:340px; height:340px; background:#fff; opacity:.12; border-radius:46% 54% 58% 42% / 52% 46% 54% 48%; animation:moBlob 17s ease-in-out infinite} .mo-fb2{position:absolute; right:-80px; top:-50px; width:260px; height:260px; background:var(--mo-or); opacity:.9; border-radius:56% 44% 46% 54% / 44% 58% 44% 56%; animation:moBlob 15s ease-in-out -5s infinite} .mo-final h2{position:relative; font-size:clamp(42px,6.6vw,92px); letter-spacing:-.045em; font-weight:900; line-height:.95} .mo-final h2.mo-final-soft{font-size:clamp(48px,6.8vw,96px); letter-spacing:-.045em; font-weight:900; line-height:1} .mo-wrap .mo-fsub{position:relative; color:rgba(255,255,255,.88); font-size:18px; margin:20px auto 30px; max-width:520px; line-height:1.55; font-weight:500} .mo-wl{position:relative; max-width:560px; margin:0 auto} .mo-wlbox{margin-top:18px; text-align:left; background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:18px 20px 13px; box-shadow:var(--shadow)} .mo-wrap .mo-wlbox .form-result{color:var(--fg); margin-top:8px} .mo-wrap .mo-wlbox .wl-consent{margin-top:12px} .mo-ctac{justify-content:center} .mo-wrap .mo-fhint{position:relative; margin-top:20px; font-size:13px; color:rgba(255,255,255,.8); font-weight:600} .mo-wrap .mo-fhint1{margin-top:16px; margin-bottom:-10px; text-wrap:balance} .mo-ok{color:#fff} .mo-hero-dev{display:block; min-height:auto; padding:52px 0 0; overflow:visible} .mo-devcopy{text-align:center; max-width:880px} .mo-devcopy .mo-sub{margin-inline:auto} .mo-devcopy .mo-cta{justify-content:center} .mo-devwrap{position:relative; margin-top:6vh} .mo-dblob1{width:300px; height:300px; left:-120px; top:-60px} .mo-dblob2{width:220px; height:220px; right:-94px; top:100px; background:var(--mo-or)} .mo-devbox{position:relative; width:min(78%,940px); margin:0 auto} .mo-dev{position:relative; z-index:1; width:100%; background:#17141f; border:2px solid var(--border); border-bottom:0; padding:12px 12px 0; border-radius:calc(76px - var(--mo-devp,0)*10px) calc(76px - var(--mo-devp,0)*10px) 0 0; transform-origin:50% 100%; will-change:transform} .mo-devscreen{background:var(--bg); overflow:hidden; border-radius:calc(64px - var(--mo-devp,0)*9px) calc(64px - var(--mo-devp,0)*9px) 0 0} .mo-devbar{color:var(--fg); padding:22px 34px 6px; font-size:clamp(15px,2.2vw,27px); font-weight:700; letter-spacing:.02em} .mo-devcam{width:.5em; height:.5em; border-radius:50%; background:#1c1926; box-shadow:inset 0 0 0 .14em #2e2a3c, 0 0 0 2px rgba(0,0,0,.06); flex:0 0 auto} .mo-devsig{display:inline-flex; align-items:center; gap:.5em} .mo-sig{display:inline-flex; align-items:flex-end; gap:.13em} .mo-sig i{width:.16em; background:currentColor; border-radius:.08em} .mo-sig i:nth-child(1){height:.34em; opacity:.55} .mo-sig i:nth-child(2){height:.52em; opacity:.8} .mo-sig i:nth-child(3){height:.7em} .mo-batt{position:relative; width:1.2em; height:.6em; border:.09em solid currentColor; border-radius:.18em; display:inline-flex; align-items:center; padding:.07em; margin-right:.2em} .mo-batt::after{content:""; position:absolute; right:-.2em; top:50%; transform:translateY(-50%); width:.11em; height:.28em; background:currentColor; border-radius:0 .08em .08em 0} .mo-batt i{display:block; width:72%; height:100%; background:currentColor; border-radius:.06em} .mo-devbx{margin:20px 34px 0; border:2.5px solid var(--border); border-radius:22px; background:var(--card); box-shadow:var(--shadow); padding:24px 28px 16px} #mo-pix{display:block; width:100%; height:auto} .mo-devword{position:relative; z-index:1; display:block; text-align:left; font-weight:900; letter-spacing:-.045em; line-height:1.15; min-height:1.15em; font-size:clamp(34px,6.4vw,78px); padding:.36em 0} .mo-devbx-hero{position:relative; overflow:hidden; padding-left:46px; padding-top:16px; padding-bottom:16px} .mo-devbx-hero .mo-devhost{position:absolute; z-index:1; right:26px; bottom:12px} .mo-devglow{position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none} .mo-devglow1{width:240px; height:240px; left:-90px; top:-110px; background:var(--acc); opacity:calc(.32 - var(--mo-devp,0)*.4); translate:calc(var(--mo-devp,0)*-230px) 0; animation:moGlowDrift 11s ease-in-out infinite} .mo-devglow2{width:230px; height:230px; right:-120px; top:-16px; background:var(--mo-or); opacity:calc(.3 - var(--mo-devp,0)*.38); translate:calc(var(--mo-devp,0)*230px) 0; animation:moGlowDrift 13s ease-in-out -4s infinite reverse} .mo-dev .mo-devglow{scale:calc(1 + var(--mo-devp,0)*.29)} @keyframes moGlowDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,12px) scale(1.08)}} .mo-devdot{color:var(--mo-or)} .mo-devcaret{display:inline-block; width:.055em; height:.8em; margin-left:.07em; background:var(--mo-or); border-radius:2px; vertical-align:-.04em; animation:moCaret 1.05s steps(1) infinite} @keyframes moCaret{0%,55%{opacity:1}56%,100%{opacity:0}} .mo-devhost{display:block; font-size:clamp(13px,1.7vw,20px); color:var(--muted); text-align:right; margin-top:6px} .mo-devbx2{height:58px; border-bottom:0; border-radius:22px 22px 0 0; box-shadow:none} .mo-dc1{position:absolute; top:-22px; left:-28px; z-index:3; transform:rotate(-3deg); animation-delay:.55s} .mo-dc2{position:absolute; top:150px; right:-34px; z-index:3; transform:rotate(2.5deg); animation-delay:.65s} .mo-rv{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0s)} .mo-rv.mo-vis{opacity:1; transform:none} @media (max-width:1024px){ .mo-wrap .mo-sec, .mo-wrap .mo-sec span, .mo-wrap .mo-step h3, .mo-wrap .mo-final h2, .mo-wrap .mo-final-soft, .mo-wrap .mo-bcard h3, .mo-wrap .mo-tcard h3, .mo-wrap .mo-nlead, .mo-wrap .mo-outro-claim{text-wrap:balance} .mo-wrap .mo-sub, .mo-wrap .mo-secsub, .mo-wrap .mo-note, .mo-wrap .mo-dnote, .mo-wrap .mo-step p, .mo-wrap .mo-bcard p, .mo-wrap .mo-tcard p, .mo-wrap .mo-fsub, .mo-wrap .mo-outro-sub{text-wrap:pretty} } @media (max-width:1024px){ .mo-heroGrid{grid-template-columns:1fr; gap:52px; text-align:center} .mo-sub{margin-inline:auto} .mo-cta{justify-content:center} .mo-c1{left:-14px}.mo-c2{right:-8px} .mo-sgrid{grid-template-columns:1fr; gap:0} .mo-swrap{translate:0 0} .mo-spin{position:sticky; top:62px; height:auto; z-index:3; --mo-fade:clamp(22px, 3.5vh, 44px); padding:4vh 0 var(--mo-fade)} .mo-spin::before{content:""; position:absolute; left:50%; transform:translateX(-50%); width:100vw; top:0; bottom:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, var(--bg) 0, var(--bg) calc(100% - var(--mo-fade)), transparent 100%)} .mo-sphone{width:min(64vw, 236px, calc(30vh + 18px)); padding:9px; border-radius:36px} .mo-sscreen{width:auto; height:auto; aspect-ratio:226 / 452; border-radius:28px} .mo-scene{padding:20px 13px 14px} .mo-scene .mo-bx h4{font-size:12px} .mo-scene .mo-host{font-size:9px} .mo-scene .mo-bx{padding:10px 12px} .mo-scene .mo-bx.mo-link{flex-direction:column; align-items:flex-start; gap:3px; padding-top:11px; padding-bottom:11px} .mo-scene .mo-cd{flex-wrap:wrap} .mo-scene .mo-cd > span, .mo-scene .mo-cd > b{white-space:nowrap} .mo-sglow1{width:440px; height:440px; margin:-232px 0 0 -234px; filter:blur(58px); opacity:.42} .mo-sglow2{width:300px; height:300px; right:-46px; bottom:-34px; filter:blur(54px); opacity:.3} .mo-slwrap{display:none} .mo-step{min-height:60vh; padding:0; opacity:.85; display:flex; flex-direction:column; justify-content:center; text-align:center} .mo-step.mo-active{opacity:1} .mo-step p{margin-inline:auto} .mo-tags{justify-content:center} .mo-steps{padding:1vh 0 8vh} .mo-cgrid{grid-template-columns:1fr; gap:30px} .mo-duogrid{grid-template-columns:1fr} .mo-bgrid{grid-template-columns:1fr 1fr} .mo-wide{grid-column:span 2} .mo-ngrid{grid-template-columns:1fr 1fr} .mo-blob.mo-dblob2{width:170px; height:170px; top:60px; right:-70px} .mo-devglow2{top:-73px} } @media (max-width:900px){ .mo-hviewport::before, .mo-hviewport::after{width:26px} .mo-hglow{display:none} } @supports not (animation-timeline: view()){ @media (max-width:900px){ .mo-htrack{overflow-x:auto; width:auto; scroll-snap-type:x mandatory; padding-top:26px; padding-bottom:46px} .mo-hwrap{height:auto} .mo-hsticky{position:static; height:auto; overflow:visible} .mo-hsticky .mo-hhead{padding-top:9vh; padding-bottom:26px} } } @media (max-width:640px){ .mo-in{padding:0 20px} .mo-hero{padding-top:24px; min-height:auto} .mo-wrap .mo-sub{font-size:16.5px; line-height:1.6; margin-top:22px} .mo-devwrap{margin-top:80px} .mo-devbox{width:87%} .mo-dev{width:100%; padding:8px 8px 0; border-radius:calc(46px - var(--mo-devp,0)*6px) calc(46px - var(--mo-devp,0)*6px) 0 0} .mo-blob.mo-dblob1{left:-30px; width:200px; height:200px} .mo-blob.mo-dblob2{right:-20px; width:130px; height:130px; top:70px} .mo-devscreen{border-radius:calc(38px - var(--mo-devp,0)*5px) calc(38px - var(--mo-devp,0)*5px) 0 0} .mo-devglow1{width:150px; height:150px; left:-55px; top:-56px; filter:blur(30px); translate:calc(var(--mo-devp,0)*-120px) 0} .mo-devglow2{width:150px; height:150px; right:-55px; top:-6px; filter:blur(30px); translate:calc(var(--mo-devp,0)*120px) 0} .mo-devbx{margin:12px 14px 0; padding:12px 14px 8px} .mo-devhost{font-size:11px} .mo-dc1{left:-6px; top:-34px} .mo-dc2{right:-4px; top:auto; bottom:-6px} .mo-big{font-size:clamp(38px,11vw,52px)} .mo-blob{width:320px; height:320px} .mo-c1{top:4%; left:-4px}.mo-c2{bottom:4%; right:-2px} .mo-stk{right:-2px} .mo-phone{width:272px} .mo-mrow{font-size:15px} .mo-bgrid{grid-template-columns:1fr} .mo-wide{grid-column:span 1} .mo-bcard{min-height:0; justify-content:flex-start} .mo-bic{margin-bottom:0} .mo-huge{margin-bottom:0} .mo-bcard h3{margin-top:14px} .mo-cnote{display:flex; flex-direction:column; align-items:flex-start; gap:3px} .mo-cbite{vertical-align:0} .mo-manifest{padding:10vh 0 9vh} .mo-story{padding:9vh 0 7vh} .mo-zoom{padding:10vh 0 9vh} .mo-duo{padding:9vh 0 9vh} .mo-bento{padding:10vh 0 9vh} .mo-ctrl{padding:9vh 0 9vh} .mo-nums{padding:9vh 0 0} .mo-pin2{padding:20px 16px 22px} .mo-manifest{width:calc(100% - 20px); border-radius:38px 26px 34px 28px} .mo-final{width:calc(100% - 20px); border-radius:32px 40px 28px 36px; margin-bottom:28px} .mo-devbx-hero{padding-left:24px; padding-top:12px; padding-bottom:12px} .mo-devbx-hero .mo-devhost{right:14px; bottom:8px} .mo-sglow1{width:400px; height:400px; margin:-212px 0 0 -214px; filter:blur(54px)} .mo-slwrap{width:236px; height:229px; margin:-114px 0 0 -118px; --lgx:64px; --lgds:.8; --lgs0:1.62; scale:1.62} .mo-sglow2{width:280px; height:280px; right:-42px; bottom:-40px; filter:blur(50px)} .mo-ngrid{grid-template-columns:1fr 1fr; gap:10px} .mo-fcols{columns:1} } @media (prefers-reduced-motion: reduce){ .mo-wrap *,.mo-wrap *::before,.mo-wrap *::after,.mo-progress{animation:none !important; transition:none !important} .mo-rv,.mo-fadeup,.mo-ln > span,.mo-stk,.mo-chip{opacity:1 !important; transform:none !important} .mo-w{opacity:1 !important} .mo-bar{transform:scaleY(var(--v)) !important} .mo-step{opacity:1} .mo-hwrap{height:auto} .mo-hsticky{position:static; height:auto; overflow:visible} .mo-hglow{display:none} .mo-htrack{overflow-x:auto; width:auto; padding-bottom:46px} .mo-sgrid{grid-template-columns:1fr} .mo-swrap{translate:0 0} .mo-spin{position:static; height:auto; padding:0; z-index:auto} .mo-spin::before{content:none} .mo-sglow{display:none} .mo-slwrap{display:none} .mo-steps{padding:0} .mo-step{min-height:auto; opacity:1} .mo-heroGrid,.mo-browser{animation:none !important} } .mo-v2 .mo-big{font-weight:800} .mo-v2 .mo-scrub{font-weight:650} .mo-v2 .mo-sec{font-weight:800} .mo-v2 .mo-step h3{font-weight:800} .mo-v2 .mo-mrow{font-weight:800} .mo-v2 .mo-stk{font-weight:800} .mo-v2 .mo-devword{font-weight:800} .mo-v2 .mo-huge{font-weight:800} .mo-v2 .mo-ncell b{font-weight:800} .mo-v2 .mo-outro-claim{font-weight:800} .mo-v2 .mo-final h2, .mo-v2 .mo-final h2.mo-final-soft{font-weight:800} .mo-v2 .mo-sub b{font-weight:700} .mo-v2 .mo-bcard h3, .mo-v2 .mo-tcard h3{font-weight:750} .mo-v2 [aria-hidden="true"]{-webkit-user-select:none; user-select:none; cursor:default} .mo-v2 .mo-browser, .mo-v2 .mo-panel, .mo-v2 .mo-setcard{position:relative} .mo-v2 .mo-stage::after, .mo-v2 .mo-devwrap::after, .mo-v2 .mo-spin::after, .mo-v2 .mo-browser::after, .mo-v2 .mo-mp::after, .mo-v2 .mo-panel::after, .mo-v2 .mo-setcard::after{content:""; position:absolute; inset:0; z-index:6} .mo-v2 .mo-slwrap{rotate:-6deg; transition:translate 2s cubic-bezier(.45,.05,.18,1), scale 2s cubic-bezier(.45,.05,.18,1), rotate 2s cubic-bezier(.45,.05,.18,1)} .mo-v2 .mo-story.mo-lgpre[data-scene="1"] .mo-slwrap{ translate:0 0; rotate:-6deg; scale:var(--lgs0)} .mo-v2 .mo-story.mo-lgin[data-scene="1"] .mo-slwrap{ translate:var(--lgx) 0; rotate:2deg; scale:var(--lgds)} .mo-v2 .mo-sldisk{display:none} .mo-v2 .mo-panel .mo-pin2{max-height:318px; overflow:hidden} .mo-v2 .mo-panel::after{background:linear-gradient(180deg, transparent 55%, var(--bg) 97%)} .mo-v2 .mo-duocta{text-align:center; margin-top:30px; font-size:14.5px; font-weight:600} .mo-brick{display:flex; align-items:center; justify-content:flex-start; min-height:44px; margin-bottom:auto; flex:0 0 auto} .mo-brick-pw{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; font-weight:700; letter-spacing:.14em; color:var(--fg); text-decoration:line-through; text-decoration-thickness:2.5px; text-decoration-color:var(--mo-or)} .mo-brick-de{font-size:13px; font-weight:800; border:2px solid var(--fg); border-radius:7px; padding:3px 8px; letter-spacing:.05em} .mo-brick-bars{display:flex; align-items:flex-end; gap:3.5px; height:24px} .mo-brick-bars i{width:6px; border-radius:2.5px; background:var(--acc)} .mo-brick-bars i:nth-child(1){height:45%} .mo-brick-bars i:nth-child(2){height:72%} .mo-brick-bars i:nth-child(3){height:100%; background:var(--mo-or)} .mo-brick-sel{display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--border); background:var(--bg); border-radius:9px; padding:5px 10px; font-size:11px; font-weight:600; color:var(--fg); white-space:nowrap} .mo-brick-sel i{font-style:normal; color:var(--muted); font-size:9px} .mo-brick-json{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:600; border:1.5px solid var(--border); border-radius:8px; padding:4.5px 9px; color:var(--acc); background:var(--card)} .mo-brick-play{width:38px; height:27px; border:2px solid var(--mo-or); border-radius:8px; display:grid; place-items:center} .mo-brick-play i{width:0; height:0; border-style:solid; border-width:5px 0 5px 8.5px; border-color:transparent transparent transparent var(--mo-or); display:block; margin-left:2px} .mo-brick-via{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.01em; border:1.5px solid var(--border); border-radius:999px; padding:4.5px 10px; background:var(--card); color:var(--muted)} .mo-brick-via .ico{width:12px; height:12px; color:var(--acc)} .mo-brick-handle{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; border:1.5px solid var(--border); border-radius:999px; padding:4.5px 10px; background:var(--card); white-space:nowrap} .mo-brick-handle b{color:var(--acc); font-weight:800} .mo-brick-handle .ico{width:11px; height:11px; color:var(--muted)} .mo-v2 .mo-tcard > span:first-child{flex:0 0 92px; display:flex; align-items:center; justify-content:flex-start; min-height:40px} @media (max-width:640px){ .mo-brick{margin-bottom:0; min-height:0} .mo-v2 .mo-tcard > span:first-child{flex-basis:78px} } .about-feedpanels{margin:20px 0 24px; -webkit-user-select:none; user-select:none; cursor:default} .about-feedpanels .mo-duogrid{margin-top:0} .about-feedpanels .mo-fcols{columns:1} .about-feedpanels .mo-panel{position:relative} .about-feedpanels .mo-panel::after{content:""; position:absolute; inset:0; z-index:6} .about-feedpanels .mo-pin2{padding:12px 16px 6px}