/* Generated by tools/build_css.py from style.css for page-competitor-analysis.php: the rules its pages can use, in the same order. Do not edit; change style.css and run the script. */
@font-face { font-family: "Caveat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/caveat-600.woff2") format("woff2"); }
@font-face { font-family: "Selawik"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/selawik-400.woff2") format("woff2"); }
@font-face { font-family: "Selawik"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/selawik-600.woff2") format("woff2"); }
@font-face { font-family: "Selawik"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/selawik-700.woff2") format("woff2"); }
:root {
--accent: #05A5FE;
--accent-text: #0069AD;
--ink: #171717;
--ink-hover: #3A3A3A;
--bg: #FFFFFF;
--soft: #F6F6F7;
--card: #FFFFFF;
--hover: #F1F1F3;
--line: #E7E7EA;
--text: #171717;
--text-2: #626268;
--error: #dc2626;
--warning: #B36B00;
--ok: #15803d;
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(0, 0, 0, .10);
--shadow-lg: 0 2px 4px rgba(0, 0, 0, .04), 0 30px 60px -20px rgba(0, 0, 0, .22);
--ui: "Selawik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
}
body.ss-page {
background: var(--bg);
color: var(--text);
font-family: var(--ui);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
body.ss-page .grid-container { max-width: none; }
body.ss-page .site-content { display: block; }
body.ss-page .content-area { width: 100%; }
body.ss-page .site-main { margin: 0; }
body.ss-page a { color: var(--accent-text); }
body.ss-page:has(.ss-hdr) .site-header,
body.ss-page:has(.ss-hdr) #site-navigation,
body.ss-page:has(.ss-ftr) .site-footer { display: none; }
body.ss-page:has(.ss-skip) .skip-link { display: none; }
html { scroll-padding-top: 76px; }
.ss-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff !important; padding: 10px 14px; border-radius: var(--r-sm); }
.ss-skip:focus { left: 8px; }
.ss-hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ss-hdr-in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ss-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink) !important; }
.ss-mark { width: 30px; height: 30px; border-radius: 8px; background: #171717 url("../img/icon-180.png") center / cover no-repeat; color: transparent; display: grid; place-items: center; font-weight: 600; font-size: 16px; line-height: 1; }
.ss-word { font-weight: 700; font-size: 17px; letter-spacing: -0.03em; }
.ss-nav { display: contents; }
.ss-links { display: flex; gap: 2px; grid-column: 2; }
.ss-links a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink) !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s; }
.ss-links a:hover, .ss-links a[aria-current="page"] { background: var(--hover); }
.ss-acts { grid-column: 3; justify-self: end; }
.ss-btn.ss-btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
.ss-burger { display: none; }
@media (min-width: 901px) {
#ss-nav-toggle { display: none; }
}
.ss-links a:focus-visible, .ss-brand:focus-visible, .ss-ftr a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-ftr { background: var(--bg); border-top: 1px solid var(--line); }
.ss-in.ss-ftr-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 48px; }
.ss-ftr-brand p { margin: 16px 0 20px; color: var(--text-2); font-size: 14px; max-width: 26em; }
.ss-ftr-col h2, .ss-ftr-col h3 { font-family: var(--ui); font-size: 13px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.ss-ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ss-ftr-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--text-2) !important; font-size: 14px; text-decoration: none; transition: color .15s; }
.ss-ftr-col a:hover { color: var(--ink) !important; }
.ss-ftr-col i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.ss-ftr-col i svg { width: 12px; height: 12px; }
.ss-in.ss-ftr-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 28px; padding-left: 24px; padding-right: 24px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13px; }
@media (max-width: 900px) {
.ss-hdr-in { grid-template-columns: 1fr auto; grid-template-rows: 64px auto; height: auto; }
.ss-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; align-items: center; cursor: pointer; border-radius: var(--r-sm); }
.ss-burger i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--ink); }
.ss-burger:hover { background: var(--hover); }
#ss-nav-toggle:focus-visible + .ss-burger { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-nav { display: none; grid-column: 1 / -1; padding: 8px 0 16px; border-top: 1px solid var(--line); max-height: calc(100vh - 80px); overflow-y: auto; }
#ss-nav-toggle:checked ~ .ss-nav { display: block; }
.ss-links { flex-direction: column; gap: 0; }
.ss-links a { height: 48px; padding: 0 4px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--line); }
.ss-acts { margin-top: 16px; justify-self: stretch; }
.ss-acts .ss-btn { width: 100%; min-height: 44px; }
.ss-in.ss-ftr-in { grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
.ss-ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.ss-in.ss-ftr-in { grid-template-columns: 1fr; }
.ss-ftr-col ul { gap: 0; }
}
.ss-main > section { border-bottom: 1px solid var(--line); }
.ss-in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.ss-section > .ss-in { padding-top: 88px; padding-bottom: 88px; }
.ss-soft { background: var(--soft); }
.ss-hero { padding: 0; position: relative; }
.ss-hero .ss-in { position: relative; text-align: center; padding-top: 72px; padding-bottom: 72px; }
.ss-hero .ss-in::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 75%);
opacity: .7;
}
.ss-hero .ss-in > * { position: relative; z-index: 1; }
.ss-hero-simple .ss-in { text-align: left; padding-top: 64px; padding-bottom: 40px; }
.ss-main h1 { font-family: var(--ui); font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.06; letter-spacing: -0.04em; font-weight: 400; margin: 0 auto 20px; max-width: 15em; color: var(--ink); text-wrap: balance; }
.ss-hero-simple h1 { margin-left: 0; max-width: none; }
.ss-main h2 { font-family: var(--ui); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 400; margin: 0 0 12px; color: var(--ink); text-wrap: balance; }
.ss-main h3 { font-family: var(--ui); font-size: 1.05rem; line-height: 1.3; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.ss-lead { font-size: 1.2rem; color: var(--text-2); max-width: 34em; margin: 0 auto 32px; }
.ss-hero-simple .ss-lead { margin-left: 0; }
.ss-sub { color: var(--text-2); max-width: 36em; margin: 0 0 32px; font-size: 1.05rem; }
.ss-note { color: var(--text-2); font-size: 0.9rem; margin: 16px 0 0; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; justify-content: center; }
.ss-hero-simple .ss-actions { justify-content: flex-start; }
.ss-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
box-sizing: border-box; min-height: 44px; padding: 0 22px; border-radius: var(--r-sm);
background: var(--ink); color: #fff !important;
font-family: var(--ui); font-weight: 600; font-size: 15px; text-decoration: none;
border: 1px solid var(--ink); transition: background-color .15s, border-color .15s;
}
.ss-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.ss-btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.ss-btn:focus-visible, .ss-faq summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-btn-quiet { background: var(--card); color: var(--ink) !important; border-color: var(--line); box-shadow: var(--shadow); }
.ss-btn-quiet:hover { background: var(--hover); border-color: #CFCFD4; }
.ss-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 28px; box-shadow: none; }
.ss-tile p { margin: 0; color: var(--text-2); }
.ss-tile ul { margin: 0; padding-left: 1.1em; color: var(--text-2); }
.ss-tile li { margin: 4px 0; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.ss-chip svg { width: 14px; height: 14px; color: var(--accent-text); }
.ss-showcase .ss-in { padding-top: 40px; padding-bottom: 72px; }
.ss-sr { position: absolute; opacity: 0; pointer-events: none; }
.ss-shots { height: 660px; overflow-y: auto; }
.ss-win { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; }
.ss-win-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
.ss-win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D4D4D8; }
.ss-win-bar span { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--text-2); }
@media (max-width: 640px) {
.ft-hero .ss-note a, .ss-tile h3 a { display: inline-block; padding: 5px 0; }
}
.ss-video .ss-in { padding-top: 24px; padding-bottom: 72px; text-align: center; }
.ss-video h2 { margin: 0 0 28px; }
.ss-video-frame { max-width: 960px; margin: 0 auto; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: clamp(8px, 1.6vw, 14px); box-shadow: var(--shadow-lg); }
.ss-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #EEEEF1; }
.ss-video-tx { max-width: 960px; margin: 18px auto 0; text-align: left; color: var(--text-2); font-size: 0.95rem; }
.ss-video-tx summary { cursor: pointer; display: inline-block; padding: 6px 2px; color: var(--text-2); }
.ss-video-tx summary { position: relative; }
.ss-video-tx summary::after { content: ""; position: absolute; inset: -4px 0; }
.ss-video-tx summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.ss-video-tx p { margin: 8px 0 0; max-width: 46em; }
.ss-stage { margin-top: 48px; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 5vw, 56px); }
.ss-stage .ss-win { border-radius: 14px; box-shadow: var(--shadow-lg); }
.ss-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; }
.ss-steps li { counter-increment: step; background: var(--card); padding: 28px; }
.ss-steps li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.ss-steps strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.ss-steps span { color: var(--text-2); }
.ss-faq { display: grid; gap: 10px; max-width: 760px; margin-left: auto; margin-right: auto; }
#faq h2 { text-align: center; }
.ss-faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 20px; }
.ss-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary::after { content: "+"; font-family: var(--mono); color: var(--text-2); }
.ss-faq details[open] summary::after { content: "\2212"; }
.ss-faq details p { margin: 0 0 16px; color: var(--text-2); }
.ss-final .ss-in { text-align: center; padding-top: 96px; padding-bottom: 96px; position: relative; }
.ss-final .ss-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 10%, transparent 70%); opacity: .7; }
.ss-final .ss-in > * { position: relative; }
.ss-final .ss-sub { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
.ss-btn, .ss-tabbar label { transition: none; }
}
.ap { --a-line: #e4e4e7; --a-mut: #686872; --a-err: #c62d33; --a-warn: #a84a07; --a-info: #0a6ebd; --a-ok: #15803d; --a-ink: #18181b;
padding: 22px 24px 26px; font-size: 13px; line-height: 1.4; color: var(--a-ink); text-align: left; background: #fff; }
.ap .ap { padding: 0; }
.ap-grp { padding: 9px 16px; color: var(--a-mut); font-size: 12px; border-bottom: 0.5px solid var(--a-line); }
.ap-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid var(--a-line); }
.ap-row:last-child { border-bottom: 0; }
.ap-scroll { overflow-x: auto; border: 0.5px solid var(--a-line); border-radius: 10px; }
@media (max-width: 720px) {
.ap { padding: 16px; }
}
.ap [hidden] { display: none !important; }
.ap button { font-family: inherit; }
.ap button:focus-visible { outline: 2px solid var(--a-info); outline-offset: -2px; }
button.ap-row { width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 0.5px solid var(--a-line); color: var(--a-ink); cursor: pointer; transition: background-color .15s; font-size: 13px; }
button.ap-row:hover { background: #fafafa; }
.ap-o { color: var(--a-warn); background: #fbeee2; }
@media (max-width: 720px) {
.ss-hero .ss-in { padding-top: 40px; padding-bottom: 48px; }
.ss-section > .ss-in { padding-top: 56px; padding-bottom: 56px; }
.ss-final .ss-in { padding-top: 64px; padding-bottom: 64px; }
.ss-showcase .ss-in { padding-top: 28px; padding-bottom: 40px; }
.ss-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
.ss-actions .ss-btn { width: 100%; }
.ss-stage { margin-top: 32px; padding: 14px 10px; border-radius: 16px; }
.ss-shots, .ap-dlg { box-sizing: border-box; }
.ss-shots { height: min(380px, 50vh); overflow-y: auto; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; }
.ss-shots::after, .ap-dlg::after { content: ""; display: block; position: sticky; bottom: 0; height: 32px; margin-top: -32px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.ss-more, .ss-note a { display: inline-flex; align-items: center; min-height: 44px; }
.ss-faq summary { min-height: 44px; align-items: center; }
.ss-win-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ap { padding: 14px 12px 18px; }
.ap-row { padding: 10px 12px; gap: 10px; }
.ap-lh, .ap-grp { padding-left: 12px; padding-right: 12px; }
.ap-imp { padding: 10px 12px; }
}
.ss-shots, .ap-dlg, .ap-scroll, .ap-chips { scrollbar-width: none; -ms-overflow-style: none; }
.ss-shots::-webkit-scrollbar, .ap-dlg::-webkit-scrollbar, .ap-scroll::-webkit-scrollbar, .ap-chips::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (max-width: 720px) {
.ss-stage .ss-win > .ap { box-sizing: border-box; max-height: min(380px, 50vh); overflow: hidden; }
.ss-stage .ss-win > .ap::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ss-stage .ss-win > .ap::after { content: ""; display: block; position: sticky; bottom: 0; height: 32px; margin-top: -32px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
}
.ss-rel { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 48px 0; border-top: 1px solid var(--line); }
.ss-rel:first-child { border-top: 0; }
@media (max-width: 720px) {
.ss-rel { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
}
.ss-main .ss-tile > h2 { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; font-weight: 600; margin: 0 0 6px; }
.ss-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ss-hero-simple .ss-note a{color:inherit}
.ss-fr-l{list-style:none;margin:0;padding:0}
.ss-fr-l li{position:relative;padding:9px 0 9px 30px;color:var(--text);font-size:16px;line-height:1.5}
.ss-fr-l li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:11px;border:solid #15803d;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ss-empty{max-width:640px}
.ss-story{margin:44px 0}
.ss-story-h{margin:0 0 14px !important;font-size:1.6rem !important;line-height:1.25;color:var(--text) !important}
.ss-story-card{display:flex;gap:24px;align-items:stretch;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:inherit}
.ss-story-pic{flex:none;align-self:flex-start;display:block}
.ss-story-card img{display:block;flex:none;align-self:flex-start;width:150px;height:auto;aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line)}
.ss-story-body{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.ss-story-label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.ss-story-label span{background:#FFE27A;color:#171717;padding:2px 7px;border-radius:4px}
.ss-story-body strong{font-size:1.25rem;line-height:1.3;font-weight:600}
.ss-story-meta{font-size:14px;color:var(--text-2)}
.ss-story-ex{font-size:16px;line-height:1.55;color:var(--text-2)}
.ss-story-body strong a,.ss-post .ss-story-body strong a{color:var(--text);text-decoration:none}
.ss-story-body strong a:hover{text-decoration:underline}
.ss-story-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.ss-story-watch,.ss-post .ss-story-watch{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;background:#FFE27A;color:#171717 !important;border:1px solid #171717;box-shadow:2px 2px 0 #171717;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none !important;transition:background .15s}
.ss-story-watch:hover{background:#ffd84d}
.ss-story-watch svg{flex:none}
@media (max-width:560px) {
.ss-story-card{gap:14px;padding:12px}
.ss-story-card img{width:96px}
.ss-story-ex{display:none}
}
.ss-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:18px}
.ss-rel-i{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);text-decoration:none;transition:border-color .15s}
.ss-rel-i:hover{border-color:var(--accent)}
.ss-rel-i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-rel-k{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.ss-rel-i strong{font-size:1.02rem;line-height:1.4;font-weight:600;color:var(--text)}
.ss-toolbox{display:flex;align-items:center;gap:16px;margin:36px 0;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.ss-toolbox i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff}
.ss-toolbox i svg{width:22px;height:22px}
.ss-toolbox-b{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ss-toolbox-k{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.ss-toolbox-b strong{font-size:1.1rem;line-height:1.3;font-weight:600;color:var(--text)}
.ss-toolbox-b span:last-child{font-size:15px;line-height:1.5;color:var(--text-2)}
.ss-toolbox-go{flex:none;white-space:nowrap}
@media (max-width:560px) {
.ss-toolbox{flex-wrap:wrap;gap:12px;padding:14px}
.ss-toolbox-b{flex:1 1 calc(100% - 60px)}
.ss-toolbox-go{width:100%;justify-content:center}
}
.ss-guide{margin:40px 0;padding:22px 24px 18px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.ss-guide-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 28px}
@media (max-width:560px) {
.ss-guide{padding:18px 16px 14px}
}
.ss-doodled{position:relative;overflow:visible}
.ss-crop{position:relative;overflow:hidden;transform:rotate(-1deg);max-height:340px}
.ss-crop .ss-win-bar{display:none}
.ss-crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.ss-d-report .ss-crop{max-height:360px}
.ss-dd{position:absolute;fill:none;stroke:#ff5b3a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}
.ss-hand{position:absolute;font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:26px;line-height:1.05;color:#cc3314;transform:rotate(-4deg);pointer-events:none;white-space:nowrap}
@media (min-width:1100px) {
.ss-ah{width:110px;height:37px}
.ss-hand{text-align:left}
.ss-dd.k4{left:668px;top:222px;width:76px;transform:scaleX(-1)}
.ss-hand.r2{right:60px;top:56px}
}
@media (min-width:721px) and (max-width:1099px) {
.ss-dd{display:none}
.ss-hand{position:static;display:block;margin:14px 6px 0;transform:none;font-size:24px;text-align:center;white-space:normal}
.ss-hand + .ss-hand{margin-top:12px}
.ss-doodled .ss-crop,.ss-d-fix .ss-crop{width:100%;margin-left:0}
}
@media (min-width:721px) {
.ss-doodled .ss-crop{width:76%}
}
@media (max-width:720px) {
.ss-dd{display:none}
.ss-hand{position:static;display:block;margin:14px 6px 0;transform:none;font-size:24px;text-align:center;white-space:normal}
.ss-hand + .ss-hand{margin-top:12px}
.ss-crop{transform:none;max-height:300px}
}
.ss-hero .ss-actions,.ss-step,.ss-showcase .ss-in{position:relative}
@media (min-width:1100px) {
.ss-hero:not(.ss-hero-simple) .ss-actions{width:fit-content;margin-left:auto;margin-right:auto}
.ss-hand.h1{right:calc(100% + 100px);top:9px;text-align:right}
.ss-dd.h2{right:calc(100% + 22px);top:16px;width:70px;height:23px}
}
@media (max-width:1099px) {
.ss-hero .ss-hand.h1{margin:8px 0 0;text-align:center}
}
@media (min-width:1100px) {
.ss-d-report .ss-crop{width:100%}
}
@media (min-width:1100px) {
.ss-d-report .ss-crop{width:94%;margin-left:3%}
}
.frq-chip{font:inherit;font-size:13px;padding:3px 10px;margin:2px 4px 2px 0;background:#f6f6f7;border:1px solid var(--line);border-radius:999px;color:var(--ink);cursor:pointer}
.frq-chip:hover{background:#ececee}
.frq-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ss-section:has(.frq-grid){padding-top:32px}
.ss-cc{position:fixed;left:16px;bottom:16px;z-index:60;width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:16px 18px}
.ss-cc[hidden]{display:none}
.ss-cc p{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--text-2)}
.ss-cc p strong{color:var(--ink)}
.ss-cc-btns{display:flex;gap:8px;margin-top:12px}
.ss-cc-btns button{flex:1;height:38px;font:inherit;font-size:14px;font-weight:600;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.ss-cc-btns .ss-cc-yes{background:var(--ink);border-color:var(--ink);color:#fff}
.ss-cc-btns button:focus-visible,.ss-cc-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ss-cc-open{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.ss-ftr-legal .ss-cc-open{white-space:nowrap;flex:none}
.ftr-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:36px 0}
.ftr-row + .ftr-row{border-top:1px solid var(--line)}
.ftr-rev .ftr-txt{order:2}
.ftr-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ftr-rev .ftr-vis{order:1}
.ftr-txt .ss-sub{margin:10px 0 16px}
.ftr-txt .ss-fr-l{margin-bottom:12px}
.fm{padding:20px 22px;font-size:14px;color:var(--a-ink)}
.fm-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.fm-head strong{font-weight:600;font-size:16px}
.fm-head span,.fm-eg{color:var(--a-mut);font-size:12px}
.fm-tbl,.fm-set{border:0.5px solid var(--a-line);border-radius:10px;overflow:hidden}
.fm-row,.fm-srow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-top:0.5px solid var(--a-line)}
.fm-row:first-child,.fm-srow:first-child{border-top:0}
.fm-h{background:#f6f6f7;color:var(--a-mut);font-size:12px}
.fm-chip{position:relative;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.fm-chip.ok{background:#ecfdf3;color:#166534}
.fm-chip.warn{background:#fff7ed;color:#a84a07}
.fm-chip.mute{background:#f4f4f5;color:#52525b}
.fm-chip.err{background:#fdecea;color:#c62d33}
.fm-foot{display:flex;justify-content:flex-end;margin-top:14px}
.fm-btn{padding:7px 14px;border:0.5px solid var(--a-line);border-radius:8px;font-size:13px;background:#fff}
.fm-eg{margin:14px 0 0}
.fm-ring::after,.fm-ring2 b::after{content:"";position:absolute;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.fm-ring::after{inset:-9px -12px}
.ftr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin-top:28px}
.ftr-grp h3{margin:0 0 4px;font-size:1.1rem}
.ftr-grp .ss-fr-l li{font-size:15px;padding:6px 0 6px 28px}
.ftr-grp .ss-fr-l li::before{top:12px}
@media (max-width:900px) {
.ftr-row,.ftr-rev{grid-template-columns:1fr;gap:24px;padding:28px 0}
.ftr-rev .ftr-txt,.ftr-rev .ftr-vis{order:0}
.ftr-grid{grid-template-columns:1fr}
}
.ft-hero .ss-in{padding-top:44px;padding-bottom:22px}
.ft-hero h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:8px}
.ft-hero .ss-lead{max-width:none;margin-bottom:16px}
.ft-hero .ss-actions{display:inline-flex;vertical-align:middle;margin-right:22px}
.ft-hero .ss-note{display:inline-block;vertical-align:middle;margin:0 !important}
#fix.ss-section{padding-top:0}
#fix .ftr-row:first-child{padding-top:24px;padding-bottom:24px}
@media (max-width:720px) {
.ft-hero .ss-actions{display:flex;margin:0 0 12px}
.ft-hero .ss-note{display:block}
}
#fix > .ss-in{padding-top:0}
.ft-hero .ss-in{padding-top:64px;padding-bottom:44px}
.ft-hero h1{margin-bottom:16px}
.ft-hero .ss-lead{margin-bottom:28px}
#fix .ftr-row:first-child{padding-top:36px;padding-bottom:24px}
.xa{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;margin-top:32px;box-shadow:var(--shadow-lg)}
.xa > input{position:absolute;opacity:0;pointer-events:none}
.xa-tabs{background:#fafafa;border-right:1px solid var(--line);padding:14px;display:grid;gap:4px;align-content:start}
@media (min-width:901px) {
.xa-tabs{padding-bottom:64px}
}
@media (max-width:900px) {
.xa{grid-template-columns:1fr}
.xa-tabs{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px;scrollbar-width:none}
.xa-tabs::-webkit-scrollbar{display:none}
}
.ss-table-wrap{overflow-x:auto;margin:8px 0 20px;border:1px solid var(--line);border-radius:12px}
.ss-section:has(.frq-grid) > .ss-in{padding-top:12px}
@media (max-width:600px) {
.ss-cc{left:8px;right:8px;bottom:8px;width:auto;padding:12px 14px;border-radius:12px}
.ss-cc #ss-cc-t{display:none}
.ss-cc p{font-size:13px;margin:0}
.ss-cc-btns{margin-top:8px}
.ss-cc-btns button{height:38px;font-size:14px}
.frq-chip{padding:8.5px 12px;font-size:13px}
}
.ss-cc-open,.ss-brand{position:relative}
.ss-cc-open::after,.ss-brand::after{content:"";position:absolute;inset:-10px -6px}
.ss-crumb{margin:0 0 10px !important;font-size:14px;color:var(--text-2)}
.ss-crumb a{color:var(--text-2)}
.seoc-list{columns:2;column-gap:40px}
.seoc-list li{break-inside:avoid}
@media (max-width:900px) {
.seoc-list{columns:1}
}
.ss-hasmenu{position:relative;display:flex}
.ss-chev{width:12px;height:12px;margin-left:5px;flex:0 0 auto;opacity:.6}
.ss-mega{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);padding-top:12px;z-index:60}
.ss-mega-in{width:min(700px,92vw);box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:18px;display:grid;grid-template-columns:1.3fr 1fr;gap:6px 24px;text-align:left}
.ss-hasmenu:hover .ss-mega,.ss-hasmenu:focus-within .ss-mega{display:block}
.ss-mcol .ss-mh{margin:0 0 8px 10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.ss-links .ss-mega a{height:auto;font-weight:500}
.ss-links .ss-mi{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:10px;font-size:14px}
.ss-mi i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.ss-mi i svg{width:15px;height:15px}
.ss-mi b{display:block;font-weight:600;color:var(--ink)}
.ss-mi em{display:block;font-style:normal;font-size:13px;font-weight:400;color:var(--text-2);line-height:1.4}
.ss-links .ss-mega a:hover{background:var(--hover)}
.ss-mega-foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.ss-links .ss-mega-foot a{display:inline-flex;align-items:center;height:36px;padding:0 10px;font-weight:600;font-size:14px;border-radius:8px}
.ss-links .ss-mega a:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.ss-in.ss-ftr-in{grid-template-columns:repeat(4,1fr);gap:32px;align-items:start}
.ss-ftr-brand{grid-column:1/-1;display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ss-ftr-brand p{margin:0;flex:1 1 320px;max-width:36em}
.ss-ftr-col a{align-items:flex-start;line-height:1.35;padding:6px 0}
.ss-ftr-col .ss-ftr-h{font-family:var(--ui);font-size:13px;font-weight:600;margin:0 0 14px;color:var(--ink);line-height:1.3}
.ss-ftr-legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.ss-ftr-legal a,.ss-ftr-legal .ss-cc-open{color:var(--text-2) !important;text-decoration:none;font-size:13px}
@media (min-width:1161px) {
.ss-ftr-legal a{padding:2px 0;margin:-2px 0}
}
.ss-ftr-legal a:hover,.ss-ftr-legal .ss-cc-open:hover{color:var(--ink) !important}
@media (max-width:1160px) {
.ss-ftr-legal{gap:0 14px}
.ss-ftr-legal a,.ss-ftr-legal .ss-cc-open{display:inline-flex;align-items:center;min-height:44px}
.ss-ftr-legal .ss-cc-open::after{inset:0 -6px}
}
@media (max-width:1000px) {
.ss-in.ss-ftr-in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px) {
.ss-hasmenu{display:block}
.ss-hasmenu > a{width:100%}
.ss-chev{display:none}
.ss-mega{display:block;position:static;transform:none;padding:0}
.ss-mega-in{width:auto;box-shadow:none;border:0;border-radius:0;padding:0 0 4px 12px;grid-template-columns:1fr;display:block}
.ss-mcol .ss-mh,.ss-mi i,.ss-mi em,.ss-mega-foot{display:none !important}
.ss-links .ss-mega a.ss-mi{padding:0 4px;height:44px;align-items:center;border-bottom:1px solid var(--line);border-radius:0;font-size:15px}
.ss-links .ss-mi b{font-weight:500;color:var(--text-2)}
.ss-in.ss-ftr-in{grid-template-columns:1fr 1fr}
}
@media (max-width:560px) {
.ss-in.ss-ftr-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.ss-ftr-col a{padding:0;min-height:44px;align-items:center}
}
.ss-stage.ss-sq{box-sizing:border-box;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:clamp(18px,5vw,44px);overflow:hidden;position:relative;margin-top:0}
.ss-sq > .ss-win{width:100%;max-width:100%;max-height:100%;margin:0;overflow:hidden;position:relative}
.ss-sq > .ss-win.ss-crop{width:100%;margin-left:0}
.ss-d-report.ss-sq .ss-hand.r2{position:absolute;left:0;right:0;bottom:10px;text-align:center;margin:0}
.ss-mega-in{grid-template-columns:1.2fr 1.2fr 1fr 1fr;width:min(1120px,94vw)}
.ss-links .ss-mmore a{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;font-size:14px}
@media (max-width:900px) {
.ss-mmore{display:none !important}
}
@media (max-width:900px) {
.ss-mega-in{width:auto;max-width:100%;box-sizing:border-box}
.ss-hasmenu > a{box-sizing:border-box}
.ss-mega-in > .ss-mcol:nth-child(2){display:none}
.ss-links .ss-mega-foot{display:block !important;border-top:0;margin:0;padding:0}
.ss-links .ss-mega-foot a{display:flex;align-items:center;width:100%;box-sizing:border-box;height:44px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink)}
.ss-nav{scrollbar-width:none;-ms-overflow-style:none}
.ss-nav::-webkit-scrollbar{display:none}
}
.ss-hdr-in{position:relative}
@media (min-width:901px) {
.ss-hasmenu{position:static}
.ss-mega{left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);transform:none;padding-top:0}
.ss-mega-in{width:auto;margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0;box-shadow:0 18px 40px rgba(0,0,0,.10)}
.ss-mega::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
}
@media (min-width:901px) {
.ss-mega{left:50%;right:auto;width:min(880px,calc(100vw - 32px));transform:translateX(-50%)}
.ss-mega-in{grid-template-columns:1fr 1fr .8fr;border-top:1px solid var(--line);border-radius:16px;margin-top:6px;max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain}
}
.ftr-row > *,.ftr-vis{min-width:0}
.ss-stage.ss-sq{max-width:100%;min-width:0}
.ss-sq > .ss-win{min-width:0}
.ss-sq .ap{min-width:0;max-width:100%}
.tl{max-width:860px;margin:0 auto}
.tl-form{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.tl-form label{display:block;font-size:14px;font-weight:600;margin:0 0 8px}
.tl-form input[type=text],.tl-form select{width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:16px;color:var(--text)}
.tl-form input[type=text]:focus,.tl-form select:focus{outline:2px solid var(--accent);outline-offset:1px}
.tl-fine{margin:12px 0 0;font-size:13px;color:var(--text-2)}
.tl-copy{margin:16px 0 0}
.tl-out{margin-top:22px}
.tl-wait{color:var(--text-2);margin:0}
.tl-verdict{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);font-weight:600}
.tl-verdict.tl-ok{background:#ecfdf3;border-color:#bbf7d0;color:#166534}
.tl-verdict.tl-warn{background:#fff7ed;border-color:#fed7aa;color:#9a4d06}
.tl-verdict.tl-bad{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.tl-verdict code{font-family:var(--mono);font-size:.92em;background:rgba(0,0,0,.06);padding:1px 6px;border-radius:4px}
.tl-card2{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:20px;margin-bottom:16px}
.tl-card2 h3,.tl-card2 h2{margin:0 0 12px;font-size:17px}
.tl-card2 h2{font-weight:600;letter-spacing:normal;line-height:1.3;text-wrap:wrap}
.tl-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tl-i{display:flex;gap:12px;align-items:flex-start}
.tl-i strong{font-weight:600}
.tl-i p{margin:2px 0 0;color:var(--text-2);font-size:14px;overflow-wrap:anywhere}
.tl-badge{flex:0 0 auto;min-width:54px;text-align:center;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}
.tl-i.tl-ok .tl-badge{background:#ecfdf3;color:#166534}
.tl-i.tl-warn .tl-badge{background:#fff7ed;color:#9a4d06}
.tl-i.tl-bad .tl-badge{background:#fef2f2;color:#b91c1c}
.tl-i.tl-info .tl-badge{background:#eff6ff;color:#1d4ed8}
.tl-scroll{overflow-x:auto}
.tl-tbl{width:100%;border-collapse:collapse;border:0;font-size:14px}
.tl-tbl th{text-align:left;font-weight:600;color:var(--text-2);font-size:12px;padding:8px 10px;border:0;border-bottom:1px solid var(--line);white-space:nowrap}
.tl-tbl td{padding:9px 10px;border:0;border-bottom:1px solid var(--line);vertical-align:top}
.tl-tbl tr:last-child td{border-bottom:0}
.tl-scroll + p{margin-top:18px}
.tl-u{overflow-wrap:anywhere;word-break:break-word;min-width:180px}
.tl-dim{color:var(--text-2);font-size:12px}
.tl-st{display:inline-block;min-width:38px;text-align:center;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.tl-st.tl-ok{background:#ecfdf3;color:#166534}
.tl-st.tl-warn{background:#fff7ed;color:#9a4d06}
.tl-st.tl-bad{background:#fef2f2;color:#b91c1c}
.tl-badtxt{color:#b91c1c}
.tl-plain{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.tl-pre{margin:0;max-height:320px;overflow:auto;background:var(--soft);border-radius:var(--r-sm);padding:14px;font-family:var(--mono);font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tl-snip{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px;display:grid;gap:3px;max-width:640px}
.tl-snip-u{font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
.tl-snip-t{font-size:20px;color:#1a0dab;line-height:1.3}
.tl-snip-d{font-size:14px;color:#4d5156;line-height:1.5}
.tl-ed{margin:18px 0 0}
.tl-ed .tl-form{background:none;border:0;border-radius:0;padding:0}
.tl-ed .tl-form label{margin:14px 0 8px}
.tl-meter{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:8px 0 4px}
.tl-meter span{display:block;height:100%;width:0;background:var(--text-2)}
.tl-meter.tl-ok span{background:var(--ok)}
.tl-meter.tl-warn span{background:var(--warning)}
.tl-meter.tl-bad span{background:#dc2626}
.tl-snip-m{max-width:400px}
.tl-og{display:flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;max-width:560px}
.tl-og img,.tl-og-none{flex:0 0 38%;max-width:38%;aspect-ratio:1.91/1;object-fit:cover;background:var(--soft)}
.tl-og-none{display:grid;place-items:center;color:var(--text-2);font-size:13px}
.tl-og>div:last-child{padding:12px 14px;display:grid;gap:3px;align-content:center;min-width:0}
.tl-og-d{font-size:12px;color:var(--text-2);text-transform:uppercase}
.tl-og strong{font-size:15px}
.tl-og span:last-child{font-size:13px;color:var(--text-2)}
.tl-next{margin:18px 0 0;color:var(--text-2);font-size:14px}
.tl-links{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.tl-links a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:#fff;color:var(--text)}
.tl-links a:hover{border-color:var(--accent)}
@media (max-width:560px) {
.tl-og{flex-direction:column}
.tl-og img,.tl-og-none{flex:none;max-width:100%;width:100%}
}
.tl-i strong{font-size:15px}
.tl-i>div{min-width:0;font-size:15px}
.tl-form select{display:block}
.tl-links a{text-decoration:none}
.tl-more{margin-top:14px}
.tl-miss{color:#B42318;font-weight:600}
.tl-form input[type=text],.tl-form select{box-sizing:border-box}
.ss-tabs-l{display:flex;flex-direction:column;background:var(--soft);border-right:1px solid var(--line)}
.ss-tabs-l button{appearance:none;text-align:left;font:inherit;font-size:16px;font-weight:500;color:var(--text-2);background:transparent;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--line);padding:16px 20px;cursor:pointer;transition:background-color .15s,color .15s}
.ss-tabs-l button:last-child{border-bottom:0}
.ss-tabs-l button:hover{color:var(--ink);background:var(--hover)}
.ss-tabs-l button[aria-selected="true"]{color:var(--ink);background:var(--card);border-left-color:var(--accent)}
.ss-tabs-l button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media (max-width:720px) {
.ss-tabs-l{display:grid;grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line)}
.ss-tabs-l button:last-child:nth-child(odd){grid-column:1/-1}
.ss-tabs-l button{white-space:normal;text-align:center;border-left:0;border-bottom:3px solid transparent;border-right:0;padding:14px 10px;line-height:1.3}
.ss-tabs-l button[aria-selected="true"]{border-bottom-color:var(--accent)}
}
.fm-tbl.c3 .fm-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;justify-content:normal}
.fm-tbl.c3.wide .fm-row{grid-template-columns:1fr 1.2fr 1fr}
.fm-tbl .fm-row > span{min-width:0;text-align:left}
.fm-tbl .fm-row > span:last-child:not(:first-child){text-align:left}
.fm .ss-circ{position:relative;display:inline-block}
.fm .ss-circ::after{content:"";position:absolute;inset:-12px -16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' preserveAspectRatio='none'%3E%3Cpath d='M10 38C8 16 45 5 78 8c32 4 44 22 36 40-8 17-45 21-78 16C18 61 6 52 10 38Z' fill='none' stroke='%23ff5b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ss-d-report.ss-sq .ss-hand.r2.ss-note-d{top:auto;font-size:28px;transform:rotate(-2deg)}
.ss-d-report.ss-sq .ss-dd.r4{display:block;position:absolute;left:50%;bottom:50px;width:46px;height:40px;margin-left:-23px}
@media (max-width:1099px) {
.ss-d-report.ss-sq .ss-dd.r4{display:none}
}
@media (max-width:720px) {
.fm-tbl .fm-row{gap:8px !important;padding:10px !important}
.fm-tbl .fm-row > span{font-size:12px;overflow-wrap:anywhere}
.fm .ss-circ::after{display:none}
.ss-d-report.ss-sq{padding-bottom:56px}
}
.tl-cta{margin:24px 0 0;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);color:var(--text)}
.tl-cta p{margin:0 0 12px;color:var(--text-2)}
.tl-cta .tl-fine{margin:10px 0 0}
.ss-brew-copy{flex:0 0 56px;display:grid;place-items:center;margin:0;padding:0;border:0;border-left:1px solid #3a3a3f;border-radius:0;background:transparent;color:#e7e7ea;cursor:pointer}
.ss-brew-copy:hover{background:#26262a}
.ss-brew-copy:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.ss-brew-copy svg{width:20px;height:20px;grid-area:1/1}
.ss-brew-s{display:block;min-height:1.4em;margin-top:6px;font-size:.85rem;color:var(--text-2)}
.ss-video-sub{max-width:40em;margin:-8px auto 28px}
@media (max-width:1099px) {
.ss-main .ss-hand{font-size:22px;line-height:1.2;margin:12px auto 0;max-width:15em}
.ss-main .ss-hand + .ss-hand{margin-top:4px}
.ss-hero .ss-hand.h1{margin:0 auto 12px}
}
@media (max-width:1099px) {
.ss-hero .ss-dd.h2,.ss-demo .ss-dd.t1,.ss-d-fix .ss-dd.f1,.ss-d-report .ss-dd.r1m,.ss-d-claude .ss-dd.c2m{display:block;position:static;width:54px;height:18px;margin:26px auto 20px;transform:rotate(-90deg)}
.ss-demo .ss-hand.t2,.ss-d-fix .ss-hand.f2,.ss-d-report .ss-hand.r2,.ss-d-claude .ss-hand.c1{margin-top:0}
.ss-hero .ss-actions{display:flex;flex-direction:column;align-items:center}
.ss-hero .ss-hand.h1{order:1;margin:0 auto}
.ss-hero .ss-dd.h2{order:2;transform:rotate(90deg);margin:22px auto 24px}
.ss-hero .ss-actions .ss-btn{order:3}
}
@media (max-width:720px) {
.ss-hero .ss-actions{align-items:stretch}
.ss-hero .ss-dd.h2{align-self:center}
}
.ss-video-frame{position:relative}
.ss-video-play{position:absolute;inset:0;margin:auto;width:max-content;height:64px;display:inline-flex;align-items:center;gap:10px;padding:0 28px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 17px/1 var(--ui);cursor:pointer;box-shadow:var(--shadow-lg)}
.ss-video-play[hidden]{display:none}
.ss-video-play svg{width:20px;height:20px;flex:none}
.ss-video-play:hover{background:#34343a}
.ss-video-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (max-width:640px) {
.ss-video-play{height:56px;padding:0 22px;font-size:16px}
}
@media (max-width:1099px) {
.ss-hero .ss-dd.h2,.ss-demo .ss-dd.t1,.ss-d-fix .ss-dd.f1,.ss-d-report .ss-dd.r1m,.ss-d-claude .ss-dd.c2m{width:40px;height:14px;margin:14px auto}
.ss-hero .ss-actions{gap:12px 10px}
.ss-hero .ss-hand.h1{margin-bottom:-12px}
.ss-hero .ss-dd.h2{margin-bottom:2px}
.ss-hero .ss-hand.h1 br,.ss-d-fix .ss-hand br,.ss-d-report .ss-hand.r2 br{display:none}
}
@media (min-width:600px) and (max-width:1099px) {
.ss-hero:not(.ss-hero-simple) .ss-actions{display:grid;grid-template-columns:auto auto;justify-content:center;max-width:none}
.ss-hero:not(.ss-hero-simple) .ss-actions .ss-hand.h1,.ss-hero:not(.ss-hero-simple) .ss-actions .ss-dd.h2{grid-column:1;justify-self:center}
.ss-hero:not(.ss-hero-simple) .ss-actions .ss-btn{grid-row:3;width:auto;justify-self:end}
.ss-hero:not(.ss-hero-simple) .ss-actions .ss-btn-quiet{justify-self:start}
}
@media (max-width:720px) {
.ss-stage.ss-sq:has(> .ss-hand:not(.ss-lg-only)){padding-bottom:68px}
}
.ss-video-play{width:92px;height:92px;padding:0;justify-content:center;gap:0;border-radius:50%}
.ss-video-play svg{width:38px;height:38px;margin-left:5px}
@media (max-width:640px) {
.ss-video-play{width:76px;height:76px;padding:0}
.ss-video-play svg{width:32px;height:32px}
}
.ss-video-play{width:68px;height:68px}
.ss-video-play svg{width:28px;height:28px;margin-left:4px}
@media (max-width:640px) {
.ss-video-play{width:56px;height:56px}
.ss-video-play svg{width:23px;height:23px;margin-left:3px}
}
.ss-video-play{width:52px;height:52px}
.ss-video-play svg{width:21px;height:21px;margin-left:3px}
@media (max-width:640px) {
.ss-video-play{width:44px;height:44px}
.ss-video-play svg{width:18px;height:18px;margin-left:2px}
}
.ss-video-play svg,.ss-video-play svg{margin:0}
@media (max-width:640px) {
.ss-video-play svg{margin:0}
}
@media (max-width:1099px) {
.ss-hero-simple .ss-actions{gap:12px;align-items:stretch;max-width:420px;margin:0}
.ss-hero-simple .ss-actions .ss-btn{width:100%}
.ss-hero-simple .ss-note{line-height:1.6}
.ss-hero-simple .ss-note a{display:inline;min-height:0}
}
@media (max-width:720px) {
.ss-hero-simple .ss-actions{max-width:none}
}
@media (max-width:720px) {
.ss-note a, p:not(.ss-actions) > .ss-more { display: inline; min-height: 0; }
.ss-note { line-height: 1.6; }
.ss-table-wrap table { min-width: 780px; }
.tl-links a { padding: 11px 16px; }
}
h2:has(+ .ss-faq) { margin-bottom: 24px; }
.tl-form select, .ss-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b6b73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.ss-ftr-copy{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.ss-ftr-soc{display:flex;gap:8px}
.ss-ftr-soc a{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#1c1c1e;box-shadow:inset 0 0 0 1px #2e2e31;color:#fff !important;transition:background .15s}
.ss-ftr-soc a:hover{background:#2c2c2f}
.ss-ftr-soc svg{width:13px;height:13px}
.ss-in.ss-ftr-base{align-items:center}
@media (min-width:1161px) {
.ss-in.ss-ftr-base{display:flex;align-items:center}
.ss-ftr-copy{white-space:nowrap}
.ss-ftr-soc{margin:0 auto}
.ss-ftr-base .ss-ftr-legal{justify-content:flex-end;gap:4px 10px;flex-wrap:nowrap}
.ss-ftr-legal a,.ss-ftr-legal .ss-cc-open{font-size:inherit}
}
@media (max-width:1160px) {
.ss-in.ss-ftr-base{flex-direction:column;align-items:center;text-align:center;gap:4px;padding-top:24px}
.ss-ftr-soc{order:1;gap:12px}
.ss-ftr-base .ss-ftr-legal{order:2;justify-content:center;max-width:420px}
.ss-ftr-base .ss-ftr-legal{display:block;max-width:none;text-wrap:balance}
.ss-ftr-base .ss-ftr-legal>*{margin:0 5px;vertical-align:top}
.ss-ftr-copy{order:3;justify-content:center;padding-bottom:4px}
}
.ss-final h2 + .ss-actions { margin-top: 12px; }
.ss-ftr-brand{background:var(--soft);border:0;border-radius:var(--r-md);padding:20px 24px;justify-content:flex-start}
.ss-ftr-cta{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:560px) {
.ss-ftr-brand{padding:20px}
.ss-ftr-cta{margin-left:0}
}
@media (max-width:900px) {
#screen .ftr-row{padding-bottom:0}
}
.ss-toc{max-width:720px;margin:0 0 28px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md)}
.ss-toc summary{cursor:pointer;list-style:none}
.ss-toc summary::-webkit-details-marker{display:none}
.ss-toc > details > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;font-size:15px;font-weight:600;color:var(--ink)}
.ss-toc summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);margin-top:-3px;flex:none}
.ss-toc details[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.ss-toc summary:focus-visible,.ss-toc a:focus-visible,a.ss-anchor:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:4px}
.ss-toc ol{margin:0;padding:0 14px 12px;list-style:none;counter-reset:toc}
.ss-toc > details > ol{columns:2;column-gap:20px}
.ss-toc > details > ol > li{counter-increment:toc;break-inside:avoid}
.ss-toc li{margin:0;padding:0;font-size:15px;line-height:1.4}
.ss-toc li > a,.ss-toc li > details > summary{display:flex;align-items:baseline;gap:8px;padding:6px 8px;border-radius:8px}
.ss-toc > details > ol > li > a::before,.ss-toc > details > ol > li > details > summary a::before{content:counter(toc);flex:none;min-width:1.2em;color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums}
.ss-toc li > details > summary{justify-content:space-between;align-items:center}
.ss-toc li > details > summary a{display:flex;gap:8px;flex:1;padding:6px 0;margin:-6px 0}
.ss-toc li > details > summary::after{width:40px;height:32px;margin:-4px -6px -4px 0;border:0;transform:none;background:var(--text-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ss-toc li > details[open] > summary::after{margin:-4px -6px -4px 0;transform:rotate(180deg)}
.ss-toc li > details > ol{padding:0 0 4px 34px}
.ss-toc li li{font-size:14px}
.ss-toc li > a:hover,.ss-toc li > details > summary:hover{background:var(--hover)}
@media (max-width:640px) {
.ss-toc > details > ol{columns:1}
.ss-toc li > a,.ss-toc li > details > summary{padding-top:11.5px;padding-bottom:11.5px}
.ss-toc li li > a{padding-top:12.5px;padding-bottom:12.5px}
.ss-toc li > details > summary a{padding:11.5px 0;margin:-11.5px 0}
}
@media (min-width:1200px) {
.ss-toc > details > summary{padding:0 8px 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
.ss-toc > details > summary::after{display:none}
.ss-toc > details > ol{columns:1;padding:0}
.ss-toc li{font-size:14px}
}
.ss-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.ss-cats .ss-chip{text-decoration:none;min-height:36px;padding:6px 14px;font-size:14px;transition:background-color .15s,border-color .15s,color .15s}
.ss-cats .ss-chip{color:var(--ink)}
.ss-cats .ss-chip:hover{background:var(--hover)}
.ss-cats .ss-chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ss-reel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 28px;align-items:start}
.ss-reel-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:30px}
.ss-reel-item:nth-child(even){margin-top:44px}
.ss-reel-no{position:absolute;top:-6px;left:-2px;font-size:3.4rem;font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--text-2);opacity:.5;z-index:0}
.ss-reel-top{margin-bottom:40px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.ss-reel-top:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.ss-reel-pinned{display:grid;grid-template-columns:1.15fr 1fr;gap:10px 34px;align-items:center;padding-top:0;grid-column:1/-1}
.ss-reel-pinned .ss-reel-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ss-reel-item.ss-reel-pinned h2{font-size:1.9rem !important;font-weight:400;letter-spacing:-.035em}
.ss-reel-pinned .ss-reel-desc{font-size:16px !important}
.ss-reel-pin{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:var(--bg);padding:2px 8px;border-radius:4px}
.ss-reel-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ss-reel-pic{position:relative;z-index:1;align-self:stretch}
.ss-reel-pic>a:first-child{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--soft)}
.ss-reel-pic img{display:block;width:100%;height:auto;aspect-ratio:127/76;object-fit:cover}
.ss-reel-pic .ss-reel-play{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;z-index:2}
.ss-reel-kick{margin:6px 0 0 !important;font-size:12px !important;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2) !important}
.ss-reel-kick a{background:#FFE27A;color:#171717;padding:2px 7px;border-radius:4px;text-decoration:none}
html[data-theme="dark"] .ss-reel-kick a{color:#171717 !important}
.ss-reel-item h2{margin:0 !important;font-size:1.2rem !important;line-height:1.3;letter-spacing:-.02em}
.ss-reel-item h2 a{color:var(--text);text-decoration:none}
.ss-reel-item h2 a:hover{text-decoration:underline}
.ss-reel-desc{margin:0 !important;font-size:15px !important;line-height:1.5 !important;color:var(--text-2)}
.ss-reel-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0 0 !important}
@media (max-width:860px) {
.ss-reel-pinned{grid-template-columns:1fr}
}
@media (max-width:700px) {
.ss-reel{grid-template-columns:1fr;gap:34px}
.ss-reel-item,.ss-reel-item:nth-child(even){margin-top:0}
}
.ss-bbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;background:#FFE27A;color:#171717 !important;border:1px solid #171717;box-shadow:2px 2px 0 #171717;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none !important;transition:background .15s}
.ss-bbtn:hover{background:#ffd84d}
.ss-blink{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 4px;color:var(--text) !important;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none !important;border-bottom:2px solid transparent;transition:border-color .15s}
.ss-blink:hover{border-bottom-color:currentColor}
.ss-bbtn svg,.ss-blink svg{flex:none}
.navigation.pagination{margin-top:40px}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.navigation.pagination a,.navigation.pagination span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px}
.navigation.pagination .current{background:var(--ink);border-color:var(--ink);color:var(--bg)}
html[data-theme="dark"] { color-scheme: dark; --accent-text: #74abe2; --ink: #faf9f5; --ink-hover: #e4e2da; --bg: #141413; --soft: #1a1918; --card: #1f1e1d; --hover: #262624; --line: #33322f; --text: #faf9f5; --text-2: #c2c0b6; --error: #fe8181; --warning: #e0a24a; --ok: #65bb30; --shadow: none; --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .ss-skip{color:#141413 !important}
html[data-theme="dark"] .ss-hdr{background:rgba(31,30,29,.92)}
html[data-theme="dark"] .ss-mark{color:transparent;box-shadow:0 0 0 1px rgba(250,249,245,.16)}
html[data-theme="dark"] .ss-btn{color:#141413 !important}
html[data-theme="dark"] .ss-btn-quiet:hover{border-color:#33322f}
html[data-theme="dark"] .ss-win-bar i{background:#262624}
html[data-theme="dark"] .ss-video-frame video{background:#262624}
html[data-theme="dark"] .ap{--a-line:#33322f;--a-mut:#c2c0b6;--a-err:#e17c80;--a-warn:#fab482;--a-info:#7ac0f8;--a-ok:#9aeeb9;--a-ink:#faf9f5;background:#1f1e1d}
html[data-theme="dark"] button.ap-row{background:#1f1e1d}
html[data-theme="dark"] button.ap-row:hover{background:#1a1918}
html[data-theme="dark"] .ap-o{background:#4d3118}
html[data-theme="dark"] .ss-crop::after{background:linear-gradient(rgba(31,30,29,0),#1f1e1d)}
html[data-theme="dark"] .ss-hand{color:#f18a75}
html[data-theme="dark"] .frq-chip{background:#1a1918}
html[data-theme="dark"] .frq-chip:hover{background:#262624}
html[data-theme="dark"] .ss-cc-btns .ss-cc-yes{color:#141413}
html[data-theme="dark"] .fm-h{background:#1a1918}
html[data-theme="dark"] .fm-chip.ok{background:#134427;color:#a8ecc2}
html[data-theme="dark"] .fm-chip.warn{background:#462d0c;color:#fab482}
html[data-theme="dark"] .fm-chip.mute{background:#262624;color:#c2c0b6}
html[data-theme="dark"] .fm-chip.err{background:#461813;color:#e17c80}
html[data-theme="dark"] .fm-btn{background:#1f1e1d}
html[data-theme="dark"] .xa-tabs{background:#1a1918}
html[data-theme="dark"] .ss-mega-in{background:#1f1e1d}
html[data-theme="dark"] .tl-form input[type=text], html[data-theme="dark"] .tl-form select, html[data-theme="dark"] .tl-ta{background:#1f1e1d}
html[data-theme="dark"] .tl-verdict.tl-ok{background:#134427;border-color:#227640;color:#a8ecc2}
html[data-theme="dark"] .tl-verdict.tl-warn{background:#462d0c;border-color:#8a561a;color:#fabf89}
html[data-theme="dark"] .tl-verdict.tl-bad{background:#1a1918;border-color:#691515;color:#ec7f7f}
html[data-theme="dark"] .tl-i.tl-ok .tl-badge{background:#134427;color:#a8ecc2}
html[data-theme="dark"] .tl-i.tl-warn .tl-badge{background:#462d0c;color:#fabf89}
html[data-theme="dark"] .tl-i.tl-bad .tl-badge{background:#1a1918;color:#ec7f7f}
html[data-theme="dark"] .tl-i.tl-info .tl-badge{background:#0c2544;color:#7191ec}
html[data-theme="dark"] .tl-st.tl-ok{background:#134427;color:#a8ecc2}
html[data-theme="dark"] .tl-st.tl-warn{background:#462d0c;color:#fabf89}
html[data-theme="dark"] .tl-st.tl-bad{background:#1a1918;color:#ec7f7f}
html[data-theme="dark"] .tl-badtxt{color:#ec7f7f}
html[data-theme="dark"] .tl-snip-t{color:#8c83f6}
html[data-theme="dark"] .tl-snip-d{color:#c2c0b6}
html[data-theme="dark"] .tl-links a{background:#1f1e1d}
html[data-theme="dark"] .tl-miss{color:#ee8981}
html[data-theme="dark"] .ss-brew-copy:hover{background:#33322f}
html[data-theme="dark"] .ss-video-play{background:#262624}
html[data-theme="dark"] .ss-video-play:focus-visible{outline:3px solid #33322f}
html[data-theme="dark"] .ss-ftr-soc a{background:#262624;box-shadow:inset 0 0 0 1px #3a3936}
html[data-theme="dark"] .ss-ftr-soc a:hover{background:#33322f}
@media (max-width: 720px) {
html[data-theme="dark"] .ss-shots::after, html[data-theme="dark"] .ap-dlg::after{background:linear-gradient(rgba(31,30,29,0), #1f1e1d)}
html[data-theme="dark"] .ss-stage .ss-win > .ap::after{background:linear-gradient(rgba(31,30,29,0), #1f1e1d)}
}
html[data-theme="dark"] .ss-hdr { background: rgba(20, 20, 19, .92); }
html[data-theme="dark"] .ss-btn-quiet { color: var(--ink) !important; }
html[data-theme="dark"] .ss-btn-quiet:hover { border-color: #4a4945; }
html[data-theme="dark"] img[src*="favicon-marketingly"] { background: #f4f3ee; border-radius: 6px; }
.ss-theme { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); cursor: pointer; }
.ss-theme:hover { background: var(--ink-hover); }
.ss-theme:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ss-theme svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.ss-theme .ss-sun, html[data-theme="dark"] .ss-theme .ss-moon { display: none; }
html[data-theme="dark"] .ss-theme .ss-sun { display: block; }
@media (max-width: 560px) {
body:has(.ss-cc:not([hidden])) .ss-theme { display: none; }
}
@media (max-width: 1160px) {
.ss-in.ss-ftr-base { padding-bottom: 76px; }
}
@media (min-width:560px) and (max-width:819px) {
.ss-steps > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:820px) and (max-width:1069px) {
.ss-steps > :last-child:nth-child(3n+1){grid-column:1/-1}
}
@media (max-width: 760px) {
.ss-table-wrap::before, .tl-scroll::before { content: "Swipe sideways to see the whole table"; display: block; position: sticky; left: 0; width: max-content; max-width: 100%; padding: 8px 12px 0; font-size: 12px; color: var(--text-2); }
}
.ss-ink-i{background:#171717}
html[data-theme="dark"] .ss-ink-i{background:#faf9f5;color:#141413}
.tl-count{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
.tl-count.tl-over{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tl-ex{padding:6px 0;margin:-6px 0;border:0;background:none;font:inherit;font-size:14px;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tl-sharebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;margin:0 0 14px}
.tl-sharelab{font-size:14px;font-weight:600}
.tl-shareicons{display:flex;gap:8px}
.tl-ico{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--text);cursor:pointer}
.tl-ico svg{width:17px;height:17px}
.tl-ico:hover{border-color:var(--text)}
.tl-ico:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.tl-sharemsg{font-size:13px;font-weight:600;color:var(--ok)}
.tl-sharemsg:empty{display:none}
html[data-theme="dark"] .tl-ico{background:#1f1e1d}
@media (max-width:720px) {
.tl-sharebar{flex-direction:column;align-items:center;gap:8px}
.tl-sharelab{order:1}
.tl-shareicons{order:2;justify-content:flex-start}
.tl-sharemsg{order:3;text-align:center}
}
.tl-saved{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft)}
.tl-saved p{margin:0;flex:1 1 260px}
.tl-saved .tl-sharebar{flex:0 1 auto;flex-direction:row;justify-content:flex-end;margin:0 0 0 auto;gap:6px 8px}
.tl-saved .tl-sharelab{display:none}
.tl-saved .tl-shareicons{gap:5px}
.tl-saved .tl-ico{width:32px;height:32px}
.tl-saved .tl-ico svg{width:15px;height:15px}
.tl-saved .tl-sharemsg{order:3;flex-basis:100%;text-align:right}
.tl-verify{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.tl-verify-ic{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--text);color:var(--card)}
.tl-verify-ic svg{width:22px;height:22px}
.tl-verify-tx{flex:1 1 auto;min-width:0}
.tl-verify h3{margin:0 0 4px;font-size:18px}
.tl-verify-msg{margin:0;color:var(--text-2)}
.tl-verify-msg.tl-verify-bad{color:var(--text);font-weight:600}
.tl-verify-box{margin-top:16px;min-height:65px;max-width:100%}
.tl-verify-fine{margin:12px 0 0;font-size:13px;color:var(--text-2)}
@media (max-width:560px) {
.tl-verify{flex-direction:column;gap:12px;padding:18px}
}
#table > .ss-in { padding-top: 40px; padding-bottom: 40px; }
.vs-initial { display: grid; place-items: center; background: var(--hover); color: var(--ink); font-weight: 700; font-size: 20px; line-height: 1; border: 1px solid var(--line); }
.ss-promo { position: relative; cursor: pointer; background: var(--ink); color: var(--bg); text-align: center; padding: 9px 16px; font-size: 14px; line-height: 1.4; }
.ss-promo p { margin: 0; }
.ss-promo-code { font-family: var(--mono); font-weight: 700; letter-spacing: .03em; padding: 1px 8px; margin: 0 2px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 16%, transparent); }
.ss-promo a { color: var(--bg) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; white-space: nowrap; }
.ss-promo a::after { content: ""; position: absolute; inset: 0; }
.ss-promo:hover a { text-decoration-thickness: 2px; }
.ss-promo a:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
@media (max-width: 560px) {
.ss-promo { font-size: 13px; padding: 8px 12px; }
.ss-promo a { display: inline-block; margin: 2px 0 0; }
}
.ss-new { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 8px; padding: 0; background: none; color: var(--text, #171717); font-size: .85em; font-weight: 600; line-height: 1.4; letter-spacing: .01em; text-transform: none; white-space: nowrap; }
.ss-new:before { content: ""; width: 1.15em; height: 1.15em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFE27A' stroke='%23A67C00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16%2018a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202m0%20-12a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202m-7%2012a6%206%200%200%201%206%20-6a6%206%200%200%201%20-6%20-6a6%206%200%200%201%20-6%206a6%206%200%200%201%206%206'/%3E%3C/svg%3E") center / contain no-repeat; }
.ss-soon { color: var(--text-2); font-size: 14px; font-weight: 600; }
button.ss-chip{font-family:inherit;cursor:pointer}
@media (max-width:1099px) {
.ss-d-fix .ss-dd.f1,.ss-d-report .ss-dd.r1m,.ss-d-claude .ss-dd.c2m{width:40px;height:14px;margin:16px auto 12px}
.ss-stage.ss-doodled{padding-bottom:10px}
}
@media (max-width:720px) {
.ss-tabs-l button:last-child{border-bottom:3px solid transparent}
.ss-tabs-l button[aria-selected="true"]:last-child{border-bottom-color:var(--accent)}
}
@media (min-width:721px) and (max-width:1099px) {
.ss-d-report .ss-crop,.ss-d-fix .ss-crop{width:100%;margin-left:0}
}
.st-input{width:100%;box-sizing:border-box;height:48px;margin:0 0 18px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--text);font-family:var(--ui);font-size:16px}
.st-input::placeholder{color:#9A9AA2}
.st-input.is-invalid{border-color:var(--error)}
.st-input:focus-visible{outline:2px solid var(--accent-text);outline-offset:1px;border-color:var(--accent-text)}
.st-go{width:100%;min-height:48px;margin-top:4px;border-radius:var(--r-md);font-size:16px}
.st-go[disabled]{opacity:.55;cursor:default}
.st-msg{margin:12px 0 0;font-size:.92rem;line-height:1.5;color:var(--text-2)}
.st-msg:empty{margin:0}
.st-msg.is-bad{color:var(--error)}
#st-form .st-msg.is-bad,#pk-form .st-msg.is-bad,#as-form .st-msg.is-bad{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid color-mix(in srgb, var(--error) 30%, transparent);border-radius:var(--r-md);background:color-mix(in srgb, var(--error) 8%, var(--card));color:var(--text)}
.st-msg a{color:var(--accent-text);text-decoration:underline}
.st-err::before,#st-form .st-msg.is-bad::before,#pk-form .st-msg.is-bad::before,#as-form .st-msg.is-bad::before{content:"";flex:0 0 16px;width:16px;height:16px;margin-top:.12em;background:var(--error);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%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' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.pk-price{grid-column:2;grid-row:1 / span 2;font-size:.95rem;font-weight:600;color:var(--text);white-space:nowrap}
.pk-summary{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.5;color:var(--text-2);min-height:3em}
@media (min-width:861px) {
.pk-summary{display:none}
}
.pk-head{grid-area:head}
.pk-head .ss-lead{margin-bottom:24px}
.ss-msico{width:16px;height:16px;flex-shrink:0}
p a > .ss-msico,li a > .ss-msico{display:inline-block;vertical-align:-3px;margin-right:6px}
.ty-copy{flex:0 0 auto;width:140px;min-height:52px;border-radius:var(--r-md)}
.ty-keybox[data-state="loading"] code{color:var(--text-2);font-family:var(--ui);font-weight:400;user-select:none;word-break:normal}
.ty-keybox[data-state="loading"] .ty-copy{opacity:.45;pointer-events:none}
.ty-keybox[data-state="fallback"] code{font-family:var(--ui);font-weight:400;font-size:.95rem;line-height:1.5;color:var(--text-2);user-select:none;word-break:normal}
.ty-keybox[data-state="fallback"] .ty-copy{display:none}
@media (max-width:560px) {
.ty-copy{width:100%}
}
.wl6 {
--p-paper: #FFFFFF; --p-ink: #1D1D1F; --p-mute: #62626A; --p-line: #E3E3E8;
--sage: #05A5FE; --sage-text: #0069AD;
--nw: #00A6FE; --nw-text: #0069A8; --nw-tint: #E8F6FF;
--H: max(440px, min(560px, calc(100svh - 120px)));
}
.wl6 a:focus-visible, .wl6 summary:focus-visible, .wl6 button:focus-visible, .wl6 input:focus-visible, .wl6 video:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.wl6 figure { margin: 0; }
.wl6 .ss-in, .wl6 .ss-in h2, .wl6 .ss-in h3 { text-align: left; }
.wl6 img { max-width: 100%; height: auto; }
.wl6-story { --stagew: 0px; }
.wl6-step { padding: 24px 0; border-top: 1px solid var(--line); }
.wl6-step:first-child { border-top: 0; padding-top: 0; }
.wl6 figure.wl6-scene { margin: 0 0 16px; }
.wl6-scene figcaption { margin-top: 12px; color: var(--text-2); font-size: .875rem; line-height: 1.5; max-width: 50ch; }
.wl6 .on-sage { display: none; }
.wl6-sw { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 8px; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--ink); }
.wl6-sw input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wl6-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.wl6-strip a { display: block; position: relative; box-sizing: border-box; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; background: var(--card); transition: border-color .15s ease-out, opacity .15s ease-out; }
.wl6-strip a img { display: block; width: 100%; height: 100%; min-height: 44px; object-fit: cover; aspect-ratio: 16 / 9; }
.wl6-strip a:hover { border-color: var(--text-2); }
.wl6-strip a:active { opacity: .75; }
.wl6-strip a[aria-current="true"] { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: transparent; }
.wl6-strip a:focus-visible { outline-offset: 2px; }
.wl6-story.is-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: stretch; }
.wl6-story.is-stage .wl6-step { display: flex; align-items: center; min-height: 340px; box-sizing: border-box; padding: 16px 0; border-top: 0; opacity: .62; transition: opacity .2s ease-out; }
.wl6-story.is-stage .wl6-step.is-active { opacity: 1; }
.wl6-stagecol { min-width: 0; }
.wl6-stage { position: sticky; top: 96px; display: flex; flex-direction: column; height: var(--H); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; }
.wl6-stagehead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.wl6-count { margin: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl6-rail { flex: none; display: flex; gap: 4px; }
.wl6-rail i { width: 24px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .2s ease-out; }
.wl6-rail i.is-done { background: var(--text-2); }
.wl6-rail i.is-now { background: var(--accent-text); }
.wl6-screen { position: relative; flex: 1; min-height: 0; background-color: var(--soft); background-image: radial-gradient(var(--line) 1px, transparent 1.4px); background-size: 16px 16px; }
.wl6-stage .wl6-scene { position: absolute; inset: 0; margin: 0; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease-out, transform .25s ease-out, visibility 0s linear .25s; }
.wl6-stage .wl6-scene.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wl6-stage .wl6-scene figcaption { margin-top: 12px; }
.wl6-stage .wl6-strip a { opacity: 0; transform: translateY(8px); transition: opacity .25s ease-out, transform .25s ease-out, border-color .15s ease-out; }
.wl6-stage .wl6-scene.is-on .wl6-strip a { opacity: 1; transform: none; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(2) { transition-delay: .05s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(3) { transition-delay: .1s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(4) { transition-delay: .15s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(5) { transition-delay: .2s; }
@media (min-width: 960px) {
.wl6-story:not(.is-stage) .wl6-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px 0; }
.wl6-story:not(.is-stage) .wl6-step:first-child { padding-top: 16px; }
.wl6-story:not(.is-stage) .wl6-scene { order: 2; margin: 0; }
}
.wl6-faqcol .ss-faq { margin: 0; max-width: none; gap: 8px; }
.wl6-faqcol .ss-faq summary { min-height: 44px; align-items: center; padding: 8px 0; }
@media (min-width: 481px) and (max-width: 959px) {
.wl6 figure.wl6-scene { max-width: 560px; }
}
@media (max-width: 480px) {
.wl6-step { padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
.wl6 *, .wl6 *::before, .wl6 *::after { transition: none !important; animation: none !important; }
}
.wl6h-lab { margin-top: 32px; text-align: left; }
.wl6h-lab *, .wl6h-lab *::before, .wl6h-lab *::after { box-sizing: border-box; }
.wl6h-stage {
--pos: 58%;
--rep-accent: #00A6FE; --rep-paper: #FFFFFF; --rep-ink: #1D1D1F; --rep-mute: #6B6B73; --rep-line: #E3E3E8; --rep-soft: #F4F4F6; --rep-grey: #C9C9CF; --rep-focus: #0069AD; --rep-ok: #2E7D32;
position: relative; container-type: inline-size; aspect-ratio: 2 / 1; max-width: 840px; margin: 0 auto;
border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--rep-paper); box-shadow: var(--shadow-lg);
user-select: none; -webkit-user-select: none;
}
.wl6h-doc-own::before { background: var(--rep-accent); }
.wl6h-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.wl6h-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.wl6h-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; background: transparent; border: 0; }
.wl6h-range::-moz-range-track { height: 100%; background: transparent; }
.wl6h-range::-moz-range-thumb { width: 1px; height: 100%; background: transparent; border: 0; }
.wl6h-lab:not(.js) .wl6h-range, .wl6h-lab:not(.js) .wl6h-handle, .wl6h-lab:not(.js) .wl6h-dock { display: none; }
.wl6h-sw { display: flex; gap: 8px; }
.wl6h-sw button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--text-2); border-radius: var(--r-sm); background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 3px var(--bg); transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.wl6h-sw button:hover { border-color: var(--ink); }
.wl6h-sw button:active { box-shadow: inset 0 0 0 5px var(--bg); }
.wl6h-sw button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 1px var(--ink); }
@media (max-width: 640px) {
.wl6h-stage { aspect-ratio: 1 / .78; }
.wl6h-sw button { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
.wl6h-grip, .wl6h-clip, .wl6h-handle, .wl6h-sw button, .wl6h-ctl input[type="text"] { transition: none !important; }
}
.wl6-story.is-stage .wl6-step { opacity: 1; border-left: 2px solid var(--line); padding-left: 24px; transition: border-color .2s ease-out; }
.wl6-story.is-stage .wl6-step.is-active { border-left-color: var(--ink); }
.wl6 { --ctl-line: color-mix(in srgb, var(--text-2) 78%, var(--bg)); }
.wl6 .ss-btn-quiet { border-color: var(--ctl-line); }
.wl6h-stage { max-width: 960px; box-shadow: 0 1px 2px rgba(11, 12, 14, .08); }
.wl6 .wl6-screen { background-image: none; }
.wl6 .wl6-stage, .wl6 .wl6-tile, .wl6 .wl6-fit img{ box-shadow: 0 1px 2px rgba(11, 12, 14, .08); }
.wl6 .wl6-strip a { border-color: var(--ctl-line); }
.wl6 .wl6-faqcol .ss-faq details { background: transparent; border: 0; border-bottom: 1px solid var(--ctl-line); border-radius: 0; padding: 0; }
.wl6 .wl6-faqcol .ss-faq details:first-child { border-top: 1px solid var(--ctl-line); }
@media (max-width: 959px) {
.wl6-story:not(.is-stage) .wl6-step { display: flex; flex-direction: column; }
.wl6-story:not(.is-stage) figure.wl6-scene { margin: 12px 0 0; }
}
.wl6h-stage { aspect-ratio: 2.15 / 1; }
@media (max-width: 640px) {
.wl6h-stage { aspect-ratio: 1 / .78; }
}
.wl6 .wl6-faqcol .ss-faq details p { max-width: 50ch; }
.wl6-rail i, .wl6-tile em i { border-radius: var(--r-xs); }
.wl6 .ss-actions { gap: 12px; }
.wl6 .ss-fr-l li { padding: 8px 0 8px 32px; }
.wl6 .ss-fr-l li::before { top: 14px; }
.wl6-stage .wl6-strip a { transition: opacity .2s ease-out, transform .2s ease-out, border-color .15s ease-out; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(2) { transition-delay: .02s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(3) { transition-delay: .04s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(4) { transition-delay: .06s; }
.wl6-stage .wl6-scene.is-on .wl6-strip a:nth-child(5) { transition-delay: .08s; }
.wl6-scene figcaption, .wl6 .wl6h-cap, .wl6-tile > span, .wl6-delta li, .wl6 .ss-note { font-size: 1rem; }
.wl6 .ss-faq summary:hover { background: var(--hover); }
.wl6 .ss-faq summary:active { background: var(--soft); }
.wl6-strip a[aria-current="true"] { border-color: var(--ink); }
.wl6h-stage { aspect-ratio: 16 / 9; max-width: 880px; }
.wl6-story.is-stage .wl6-step { align-items: flex-start; padding-top: 40px; }
@media (max-width: 640px) {
.wl6h-stage { aspect-ratio: 1 / .96; }
}
.wl6h-wrap { position: relative; max-width: 880px; margin: 24px auto 0; }
.wl6h-wrap .wl6h-stage { margin: 0; z-index: 1; }
.wl6h-wrap::before, .wl6h-wrap::after { content: ""; position: absolute; border: 1px solid var(--ctl-line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--card); z-index: 0; }
.wl6h-wrap::before { left: 24px; right: 24px; top: -10px; height: 24px; }
.wl6h-wrap::after { left: 48px; right: 48px; top: -20px; height: 24px; }
.wl6h-prev { left: -68px; }
.wl6h-next { right: -68px; }
.wl6h-count { display: none; margin: 0; text-align: center; font-size: 1rem; color: var(--text-2); }
.wl6h-count b { color: var(--ink); font-weight: 600; margin-right: 8px; }
.wl6h-lab:not(.js) .wl6h-nav, .wl6h-lab:not(.js) .wl6h-count { display: none; }
@media (max-width: 1100px) {
.wl6h-prev { left: 8px; }
.wl6h-next { right: 8px; }
}
@media (max-width: 640px) {
.wl6h-wrap { padding-bottom: 56px; }
.wl6h-prev { left: 0; }
.wl6h-next { right: 0; }
.wl6h-count { display: block; position: absolute; left: 56px; right: 56px; bottom: 0; line-height: 48px; }
.wl6h-wrap::before { left: 16px; right: 16px; }
.wl6h-wrap::after { left: 32px; right: 32px; }
}
.wl6h-stage { --rep-bad: #C5321F; --rep-note-c: #9A9AA2; }
.wl6-crop, .ss-video-frame { box-shadow: 0 1px 2px rgba(11, 12, 14, .08); }
.wl6 .ss-fr-l li::before { border-color: var(--ok); top: 12px; }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/carlito-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../fonts/carlito-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/figtree-var-latin.woff2) format("woff2"); }
.wl6h-doc-own { font-family: "Proxima Nova", "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif; }
@media (max-width: 1100px) {
.wl6h-prev { left: 4px; }
.wl6h-next { right: 4px; }
}
@media (max-width: 640px) {
.wl6h-wrap { padding-bottom: 56px; }
.wl6h-prev { left: 0; }
.wl6h-next { right: 0; }
.wl6h-count { display: block; position: absolute; left: 56px; right: 56px; bottom: 0; line-height: 48px; }
}
.wl6h-wrap { margin-top: 48px; }
.wl6h-wrap::before, .wl6h-wrap::after { border: 0; background: color-mix(in srgb, var(--ink) 7%, var(--bg)); border-radius: var(--r-md) var(--r-md) 0 0; }
.wl6h-wrap::before { left: 20px; right: 20px; top: -8px; height: 16px; }
.wl6h-wrap::after { left: 40px; right: 40px; top: -16px; height: 16px; background: color-mix(in srgb, var(--ink) 3.5%, var(--bg)); }
@media (max-width: 640px) {
.wl6h-wrap::before { left: 12px; right: 12px; }
.wl6h-wrap::after { left: 24px; right: 24px; }
}
@keyframes wl6h-rise { from { opacity: 0; transform: translateY(-20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wl6h-edge1 { from { transform: translateY(12px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes wl6h-edge2 { from { transform: translateY(24px); opacity: .2; } to { transform: none; opacity: 1; } }
.wl6h-wrap::before, .wl6h-wrap::after { display: none; }
.wl6h-wrap { margin-top: 0; }
.wl6h-pager { display: flex; justify-content: center; gap: 4px; max-width: 880px; margin: 24px auto 0; }
.wl6h-pager button { position: relative; width: 72px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.wl6h-pager button::before, .wl6h-pager button::after { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; }
.wl6h-pager button::before { right: 0; background: var(--ctl-line); transition: background-color .15s ease-out; }
.wl6h-pager button::after { width: 0; background: var(--ink); }
.wl6h-pager button:hover::before { background: var(--text-2); }
.wl6h-pager button[aria-pressed="true"]::after { width: 100%; animation: wl6h-fill .26s ease-out; }
@keyframes wl6h-fill { from { width: 0; } to { width: 100%; } }
.wl6h-lab:not(.js) .wl6h-pager { display: none; }
@media (prefers-reduced-motion: reduce) {
.wl6h-pager button[aria-pressed="true"]::after { animation: none; }
}
@media (max-width: 640px) {
.wl6h-pager button { width: 25%; max-width: 72px; }
}
.wl6h-pager button::before { background: color-mix(in srgb, var(--text-2) 38%, var(--bg)); }
.wl6h-pager button:hover::before { background: color-mix(in srgb, var(--text-2) 62%, var(--bg)); }
.wl6 .wl6-fitcol, .wl6 .wl6-faqcol { display: flex; flex-direction: column; }
.wl6 .wl6-fitcol h2, .wl6 .wl6-faqcol h2 { margin: 0 0 24px; font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.wl6 .wl6-faqcol .ss-faq details, .wl6 .wl6-faqcol .ss-faq details:first-child { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.wl6 .wl6-faqcol .ss-faq details:last-child { border-bottom: 0; }
.wl6 .wl6-faqcol .ss-faq summary { min-height: 64px; align-items: center; padding: 16px 24px; }
.wl6 .wl6-faqcol .ss-faq summary::after { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--soft); font-size: 1.125rem; line-height: 1; transition: background-color .15s ease-out; }
.wl6 .wl6-faqcol .ss-faq summary:hover { background: var(--hover); }
.wl6 .wl6-faqcol .ss-faq details[open] { background: var(--soft); }
.wl6 .wl6-faqcol .ss-faq details[open] summary::after { background: var(--card); }
.wl6 .wl6-faqcol .ss-faq details p { margin: 0; padding: 0 24px 24px; max-width: 50ch; }
.wl6-player { position: relative; overflow: hidden; border-radius: var(--r-md); background: #0B0C0E; aspect-ratio: 16 / 9; }
.wl6-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wl6-play { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: flex-start; gap: 0; padding: 0; border: 0; background: linear-gradient(to top, rgba(11, 12, 14, .55), rgba(11, 12, 14, 0) 45%); color: #FFFFFF; cursor: pointer; }
.wl6-player.js .wl6-play { display: block; }
.wl6-player.is-playing .wl6-play { display: none; }
.wl6-play:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.wl6h-wrap { margin-top: 0; }
.wl6h-pager { margin-top: 8px; margin-bottom: 40px; }
@media (max-width: 640px) {
.wl6h-pager { margin-bottom: 36px; }
}
.wl6h-lab { margin-top: 0; }
.wl6h-wrap, .wl6h-dock, .wl6h-cap { max-width: 920px; }
.wl6h-wrap { margin-top: 72px; }
@media (max-width: 640px) {
.wl6h-wrap { margin-top: 64px; }
}
.wl6 { --H: max(420px, min(520px, calc(100svh - 120px))); }
.wl6 .wl6-screen { background-color: var(--card); }
.wl6h-wrap .wl6h-stage { max-width: none; }
.wl6h-pager button::before { background: var(--ctl-line); }
.wl6h-pager button:hover::before { background: var(--text-2); }
.wl6h-pager button:active::before { background: var(--ink); }
.wl6 .wl6-faqcol .ss-faq summary:focus-visible { outline-offset: -4px; }
.wl6-story.is-stage .wl6-step { padding-top: 48px; }
.wl6-story.is-stage .wl6-step { border-left-color: var(--ctl-line); }
.wl6-story.is-stage .wl6-step.is-active { border-left-color: var(--ink); }
.wl6-rail i:not(.is-now):not(.is-done) { background: var(--ctl-line); }
@media (max-width: 1100px) {
.wl6h-wrap { padding: 0 56px; }
.wl6h-prev { left: 0; }
.wl6h-next { right: 0; }
}
@media (max-width: 640px) {
.wl6h-wrap { padding: 0 0 64px; }
.wl6h-count { left: 64px; right: 64px; }
}
.wl6-player { background: var(--card); border: 1px solid var(--ctl-line); }
.wl6-play { background: none; color: var(--ink); }
.wl6-play:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -4px; }
@media (min-width: 960px) {
.wl6 .wl6-fitcol h2, .wl6 .wl6-faqcol h2 { display: flex; align-items: flex-end; min-height: 2.4em; }
}
.wl6 .wl6-faqcol .ss-faq details { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.wl6 .wl6-faqcol .ss-faq details[open] { justify-content: flex-start; }
.wl6 .wl6-faqcol .ss-faq details[open] summary { flex: none; }
@media (max-width: 640px) {
.wl6h-wrap { margin-top: 112px; }
}
.as-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.02em;text-transform:uppercase}
.as-code::placeholder{text-transform:none}
.as-coderow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.as-remove,.as-copy{min-height:48px;margin:0 0 18px;border-radius:var(--r-md);white-space:nowrap}
.as-add{min-height:44px;margin:-10px -6px -10px 0;padding:0 6px;border-radius:var(--r-md);white-space:nowrap}
.as-add[disabled]{opacity:.55;cursor:default}
.as-more{margin:0 0 18px}
.as-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--accent-text)}
.as-more summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:var(--r-md)}
.as-result{margin:16px 0 0;padding:16px;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:var(--r-md);background:var(--soft)}
.as-result[hidden]{display:none}
.as-result-text{margin:0 0 12px;color:var(--text)}
@media (max-width:640px) {
.as-coderow,.as-keyrow{grid-template-columns:minmax(0,1fr)}
.as-remove,.as-copy{width:100%;margin-top:-8px}
}
.ss-rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.ss-rv.ss-rv-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
@media print {
.ss-rv { opacity: 1; transform: none; }
}
.ss-ftr-legal a,.ss-cc-open{-webkit-tap-highlight-color:transparent}
.ss-cc-open{-webkit-user-select:none;user-select:none}
.ss-cc-open::after{background:transparent}
@media (min-width:1161px) {
.ss-in.ss-ftr-base{padding-right:76px}
}
@media (max-width:1160px) {
.ss-in.ss-ftr-base{padding-bottom:16px}
.ss-ftr-base .ss-ftr-copy{max-width:calc(100% - 96px);text-wrap:balance}
}
.navigation.pagination .dots{border:0;min-width:20px;padding:6px 2px;justify-content:center;color:var(--text-2);background:none}
.ss-in > .ftr-grid:first-child{margin-top:0}
.ss-soft .ftr-grid{gap:20px;align-items:start}
.ss-soft .ftr-grp{box-sizing:border-box;min-width:0;padding:28px 30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.ss-soft .ftr-grp > :first-child{margin-top:0}
.ss-soft .ftr-grp > :last-child{margin-bottom:0}
.ss-soft .ftr-grp .tl-h3,.ss-soft .ftr-grp h3{font-size:1.25rem;line-height:1.3;margin:0 0 14px}
.ss-soft .ftr-grp .ss-sub{max-width:none;margin:0 0 14px;font-size:16px;line-height:1.6}
.ss-soft .ftr-grp .ss-fr-l li{font-size:15px;line-height:1.55;padding:7px 0 7px 28px}
.ss-soft .ftr-grp .ss-fr-l li::before{top:13px}
.ss-soft .ftr-grp .ss-fr-l li:first-child{padding-top:0}
.ss-soft .ftr-grp .ss-fr-l li:first-child::before{top:6px}
.ss-soft .ftr-grid + .ss-actions,.ss-soft .ftr-grid + p{margin-top:28px}
@media (min-width:861px) {
.ss-soft .ftr-grid > .ftr-grp:last-child:not(:first-child){position:sticky;top:96px}
}
@media (min-width:861px) {
.ss-soft .ftr-grid:has(> .ftr-grp:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px) {
.ss-soft .ftr-grid{gap:14px}
.ss-soft .ftr-grp{padding:22px 20px}
}
#more .ftr-grid{gap:20px}
#more .ftr-grp{box-sizing:border-box;min-width:0;padding:26px 28px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg)}
#more .ftr-grp h3{margin:0 0 10px;font-size:1.15rem}
#more .ftr-grp .ss-fr-l li{font-size:15px;line-height:1.55}
#more .ftr-grp .ss-fr-l a{color:var(--text-2);text-underline-offset:2px}
#more .ftr-grp .ss-fr-l a:hover{color:var(--accent-text)}
@media (max-width:860px) {
#more .ftr-grp{padding:22px 20px}
}
.ss-follow-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:18px 0 0}
@media (max-width:560px) {
.ss-follow-top{margin-top:14px}
}
.ss-reel-date{white-space:nowrap}
.ss-reel-kick .ss-reel-up{display:block;margin-top:4px}
.dl-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ss-dlb{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px 8px 16px;border-radius:12px;background:#000;border:1px solid #3a3a3c;color:#fff !important;text-decoration:none !important;box-sizing:border-box;transition:background-color .15s}
.ss-dlb:hover{background:#1d1d1f}
.ss-dlb:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.ss-dlb>svg{width:26px;height:26px;flex:none}
.ss-dlb-ms{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:7px;background:#fff}
.ss-dlb-ms .ss-msico{width:18px;height:18px;margin:0}
.ss-dlb small{display:block;font-size:12px;line-height:1.15;opacity:.85}
.ss-dlb b{display:block;font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
html[data-theme="dark"] .ss-dlb{border-color:#4a4945}
@media (max-width:640px) {
.dl-badges{grid-template-columns:minmax(0,1fr)}
}
.ss-ftr-cta{position:relative}
.ss-ftr-nc{position:absolute;left:24px;top:calc(100% + 8px);display:flex;flex-direction:row;align-items:flex-end;gap:3px;font-family:"Caveat","Bradley Hand",cursive;font-weight:600;font-size:24px;line-height:1;color:#cc3314;white-space:nowrap;pointer-events:none}
.ss-nc-ar{flex:none;width:20px;height:18px;margin:0 0 4px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .ss-ftr-nc{color:#f18a75}
@media (min-width:941px) {
.ss-ftr-brand{padding:48px 28px}
}
@media (max-width:940px) {
.ss-ftr-brand{flex-direction:column;align-items:flex-start;gap:16px}
.ss-ftr-brand p{flex:none}
.ss-ftr-cta{margin-left:0;display:grid;grid-template-columns:auto auto;justify-content:start;gap:8px}
.ss-ftr-cta .ss-btn:first-child{grid-column:1;grid-row:1}
.ss-ftr-cta .ss-btn-quiet{grid-column:2;grid-row:1}
.ss-ftr-nc{position:static;flex-direction:row;gap:3px;grid-column:1/-1;grid-row:2;align-items:flex-end;margin:-2px 0 0 14px}
.ss-ftr-nc .ss-nc-ar{transform:none;margin:0 0 4px}
}
@media (max-width:389px) {
.ss-ftr-cta{grid-template-columns:auto}
.ss-ftr-cta .ss-btn:first-child{justify-self:start}
.ss-ftr-cta .ss-btn-quiet{grid-column:1;grid-row:3;justify-self:start}
.ss-ftr-nc{grid-column:1;grid-row:2}
}
@media (max-width:370px) {
.ss-ftr-soc{flex-wrap:wrap;justify-content:center;max-width:160px}
}
@media (max-width:340px) {
.ss-in.ss-ftr-in{grid-template-columns:1fr}
}
.ss-cc-open:hover,.ss-cc-open:focus,.ss-cc-open:active{background:none;box-shadow:none}
.at-copy{display:inline-grid;place-items:center}
.at-copy > span{grid-area:1 / 1}
.ss-feat-logo{display:flex;align-items:center;gap:8px;height:32px;color:var(--ink);opacity:.62;transition:opacity .15s}
.ss-feat-logo--meanceo{font:800 21px/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.ss-feat-logo--zare{white-space:nowrap;font:700 18px/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.01em}
.ss-feat-logo--marketraa{font:800 21px/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.01em}
.ss-feat-logo--tke{font:600 18px/1 Newsreader,"Iowan Old Style",Georgia,serif}
.ss-feat-logo img{display:block;filter:brightness(0)}
.ss-feat-logo--tke img{width:24px;height:24px}
.ss-feat-logo--softwarehope img{width:auto;height:24px}
html[data-theme="dark"] .ss-feat-logo img{filter:brightness(0) invert(1)}
@media (min-width:721px) {
.ss-section .ss-actions:has(> .ss-more){justify-content:flex-start;align-items:center;gap:10px 20px}
}
.ss-review-frame iframe,.ss-review-play{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px}
.ss-review-play{position:relative;padding:0;background:#000;cursor:pointer;overflow:hidden}
.ss-review-play img{display:block;width:100%;height:100%;object-fit:cover}
.ss-review-play:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.ss-ftr .ss-in.ss-ftr-base{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy soc" "legal love";align-items:center;gap:12px 32px;padding:22px 76px 26px 24px;text-align:left}
.ss-ftr .ss-ftr-base .ss-ftr-copy{grid-area:copy;max-width:none;padding:0;justify-content:flex-start;text-wrap:pretty}
.ss-ftr .ss-ftr-base .ss-ftr-soc{grid-area:soc;justify-self:end;margin:0;order:0}
.ss-ftr .ss-ftr-base .ss-ftr-legal{grid-area:legal;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px 16px;max-width:none;order:0}
.ss-ftr .ss-ftr-base .ss-ftr-legal>*{margin:0}
.ss-ftr .ss-ftr-base .ss-ftr-pair{display:inline-flex;gap:4px 16px;white-space:nowrap}
.ss-ftr .ss-ftr-base .ss-ftr-love{grid-area:love;justify-self:end;font-size:13px;color:var(--text-2)}
.ss-ftr-love svg{display:inline-block;color:#e5484d;vertical-align:-1px;margin:0 4px}
.ss-ftr-love a{color:var(--ink) !important;text-decoration:none;white-space:nowrap}
.ss-ftr-love a:hover{text-decoration:underline;text-underline-offset:2px}
@media (max-width:1160px) {
.ss-ftr .ss-in.ss-ftr-base{grid-template-columns:minmax(0,1fr);grid-template-areas:"soc" "legal" "copy" "love";justify-items:center;gap:14px;padding:24px 16px 20px;text-align:center}
.ss-ftr .ss-ftr-base .ss-ftr-soc{justify-self:center;gap:8px;flex-wrap:nowrap;max-width:none;justify-content:center}
.ss-ftr .ss-ftr-base .ss-ftr-soc a{width:40px;height:40px;border-radius:11px}
.ss-ftr .ss-ftr-base .ss-ftr-soc svg{width:19px;height:19px}
.ss-ftr .ss-ftr-base .ss-ftr-legal{gap:0 18px;margin:-6px 0;justify-content:center}
.ss-ftr .ss-ftr-base .ss-ftr-pair{gap:0 18px}
.ss-ftr .ss-ftr-base .ss-ftr-copy,.ss-ftr .ss-ftr-base .ss-ftr-love{justify-self:center;text-align:center;justify-content:center;text-wrap:balance}
.ss-ftr .ss-ftr-base .ss-ftr-love{margin-top:-6px;max-width:calc(100% - 96px);text-wrap:balance}
}
@media (max-width: 760px) {
main[lang="de"] .ss-table-wrap::before, main[lang="de"] .tl-scroll::before { content: "Zur Seite wischen, um die ganze Tabelle zu sehen"; }
}
main[lang="de"] #preise td:nth-child(2) { white-space: nowrap; }
@media (max-width:1160px) {
body.ss-page .ss-bc a,.ss-ftr-cta .ss-btn-sm,.ss-ftr .ss-ftr-base .ss-ftr-soc a,.ss-ftr-legal a,.ss-cc-btns button,
.ss-hero a.ss-chip,.ss-hero .ss-btn,.ss-cats a.ss-chip,a.ss-story-watch,a.ss-bbtn,a.ss-blink,.ck-list .ck-how a,.wls-links a,
.ss-pp-top a,.frq-chip,.ss-sec-badge-link,.tl-seg button,.tl-ex,.at-pack-f a,.navigation.pagination a{position:relative}
body.ss-page .ss-bc a::after,.ss-ftr-cta .ss-btn-sm::after,.ss-ftr .ss-ftr-base .ss-ftr-soc a::after,.ss-ftr-legal a::after,.ss-cc-btns button::after,
.ss-hero a.ss-chip::after,.ss-hero .ss-btn::after,.ss-cats a.ss-chip::after,a.ss-story-watch::after,a.ss-bbtn::after,a.ss-blink::after,.ck-list .ck-how a::after,.wls-links a::after,
.ss-pp-top a::after,.frq-chip::after,.ss-sec-badge-link::after,.tl-seg button::after,.tl-ex::after,.at-pack-f a::after,.navigation.pagination a::after,
.ss-reel-pic .ss-reel-play::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
@media (max-width:960px) {
.ss-pp-toc a{position:relative}
.ss-pp-toc a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}