/* Generated by _src/build.mjs from main.css + pages.css. Do not edit. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/fragment-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/fragment-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("../assets/fonts/raleway-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("../assets/fonts/raleway-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../assets/fonts/raleway-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../assets/fonts/raleway-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../assets/fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--canvas: #ffffff;
--paper: #f5f5f3;
--ink: #1a1a1a;
--night: #0e1314;
--night-2: #152022;
--body: #484848;
--muted: #63696f;
--line: #e6e6e3;
--btn: #58eeff;
--btn-hover: #86f4ff;
--accent: #1d8a94;
--accent-rgb: 29 138 148;
--accent-ink: #14707a;
--accent-tint: #cdebed;
--tag-bg: #14707a;
--tag-fg: #ffffff;
--accent-night: #7dd3d9;
--accent-night-rgb: 125 211 217;
--on-night: #f2f6f6;
--on-night-2: #9aa3a6;
--line-night: rgba(255, 255, 255, 0.1);
--f-display: "Raleway", ui-sans-serif, system-ui, sans-serif;
--f-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
--f-label: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--f-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--gutter: clamp(16px, 4vw, 56px);
--maxw: 1320px;
--nav-h: 76px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--spring: linear(0, 0.033, 0.12, 0.241, 0.381, 0.525, 0.665, 0.791, 0.9, 0.988, 1.056, 1.103, 1.132, 1.146, 1.147, 1.138, 1.123, 1.104, 1.082, 1.061, 1.041, 1.024, 1.009, 0.997, 0.988, 0.983, 0.979, 0.978, 0.979, 0.98, 0.983, 0.986, 0.989, 0.992, 0.995, 0.997, 0.999, 1.001, 1.002, 1.003, 1.003, 1.002, 1.001, 1);
--t-press: 120ms;
--t-hover: 240ms;
--t-ui: 420ms;
--t-enter: 800ms;
--plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 24.5v7M24.5 28h7' stroke='%23e1e1de' stroke-width='1'/%3E%3C/svg%3E");
--plus-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 23.5v9M23.5 28h9' stroke='%23b8bcbe' stroke-width='1.2'/%3E%3C/svg%3E");
--plus-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 24.5v7M24.5 28h7' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
margin: 0;
background: var(--canvas);
color: var(--ink);
font-family: var(--f-body);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
main { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
em { font-style: italic; }
::selection { background: rgb(var(--accent-rgb) / 0.22); color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: fixed; top: 12px; left: 12px; z-index: 300;
padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff;
font: 500 14px var(--f-label);
transform: translateY(-160%);
transition: transform var(--t-ui) var(--ease-out);
}
.skip:focus { transform: none; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(96px, 12vw, 176px); }
.h2 {
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(2.25rem, 1.1rem + 3.9vw, 4.6rem);
line-height: 1.03;
letter-spacing: -0.035em;
text-wrap: balance;
}
.ln-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.lead {
font-size: clamp(1.0625rem, 0.97rem + 0.35vw, 1.25rem);
line-height: 1.55;
color: var(--body);
max-width: 34em;
text-wrap: pretty;
}
.kicker {
position: relative;
display: inline-block;
margin-bottom: 26px;
padding: 7px 11px;
font: 500 12.5px/1 var(--f-label);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-ink);
}
.kicker::before, .kicker::after {
content: "";
position: absolute;
width: 7px; height: 7px;
border: 1.5px solid var(--accent);
transition: translate 700ms var(--spring) 120ms, opacity 300ms ease 120ms;
}
.kicker::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.kicker::after { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.js:not(.reduce-motion) .kicker:not(.is-in)::before { translate: 7px -7px; opacity: 0; }
.js:not(.reduce-motion) .kicker:not(.is-in)::after { translate: -7px 7px; opacity: 0; }
.kicker--dark { color: var(--accent-night); }
.kicker--dark::before, .kicker--dark::after { border-color: var(--accent-night); }
.btn {
--h: 52px;
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
height: var(--h);
padding: 0 7px 0 24px;
border-radius: 999px;
font: 500 15.5px/1 var(--f-label);
letter-spacing: -0.005em;
white-space: nowrap;
isolation: isolate;
transition:
background-color var(--t-hover) var(--ease-out),
border-color var(--t-hover) var(--ease-out),
box-shadow var(--t-ui) var(--ease-out),
scale var(--t-press) var(--ease-out);
}
.btn:active { scale: 0.97; }
.btn__label { position: relative; display: block; line-height: 1.3; }
.btn__label > span { display: block; transition: scale var(--t-ui) var(--spring); }
.btn:hover .btn__label > span, .btn:focus-visible .btn__label > span { scale: 1.05; }
.btn__icon {
display: grid;
place-items: center;
width: 38px; height: 38px;
border-radius: 50%;
overflow: hidden;
background: var(--ink);
color: #fff;
}
.btn__icon svg { width: 16px; height: 16px; transition: scale var(--t-ui) var(--spring); }
.btn:hover .btn__icon svg, .btn:focus-visible .btn__icon svg { scale: 1.15; }
.btn--primary {
background: var(--btn);
color: var(--ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px -12px rgba(0, 184, 204, 0.65);
}
.btn--primary:hover {
background: var(--btn-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 18px 36px -14px rgba(0, 184, 204, 0.8);
}
.btn--ghost {
padding-right: 24px;
border: 1px solid rgba(26, 26, 26, 0.16);
background: rgba(255, 255, 255, 0.7);
}
.btn--ghost:has(.btn__icon) { padding-right: 7px; }
.btn--ghost .btn__icon { background: transparent; color: var(--ink); border: 1px solid rgba(26, 26, 26, 0.14); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; }
.btn--ghost-dark { padding-right: 28px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.24); }
.btn--ghost-dark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.btn--sm { --h: 44px; padding-left: 18px; gap: 10px; font-size: 14.5px; }
.btn--sm .btn__icon { width: 32px; height: 32px; }
.btn--lg { --h: 60px; padding-left: 28px; font-size: 16.5px; }
.btn--lg .btn__icon { width: 46px; height: 46px; }
.btn--lg.btn--ghost, .btn--lg.btn--ghost-dark { padding-right: 28px; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 28px;
padding: 6px 0;
font: 500 15.5px var(--f-label);
background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat;
transition: background-size var(--t-ui) var(--ease-out);
}
.link-arrow svg { width: 18px; height: 18px; transition: translate var(--t-ui) var(--ease-out); }
.link-arrow:hover { background-size: 100% 1.5px; }
.link-arrow:hover svg { translate: 4px 0; }
.link-arrow--dark { color: #fff; }
.status {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 15px 8px 12px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.25);
font: 500 14px/1.2 var(--f-label);
}
.status__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #22c55e;
animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
70%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}
.status--dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--on-night); box-shadow: none; }
.sel { position: relative; display: inline-block; }
.hl { color: var(--accent-ink); font-style: italic; }
.sel__box {
position: absolute;
inset: 0.04em -0.1em -0.02em -0.06em;
border: 2px solid var(--accent);
border-radius: 2px;
pointer-events: none;
}
.sel__box i {
position: absolute;
width: 11px; height: 11px;
background: #fff;
border: 2px solid var(--accent);
border-radius: 2px;
}
.sel__box i:nth-child(1) { left: -6.5px; top: -6.5px; }
.sel__box i:nth-child(2) { right: -6.5px; top: -6.5px; }
.sel__box i:nth-child(3) { left: -6.5px; bottom: -6.5px; }
.sel__box i:nth-child(4) { right: -6.5px; bottom: -6.5px; }
.sel__box::after {
content: attr(data-label);
position: absolute;
left: 50%;
top: calc(100% + 14px);
translate: calc(-50% + var(--lx, 0px)) 0;
padding: 5px 9px;
border-radius: 5px;
background: var(--tag-bg);
color: var(--tag-fg);
font: 400 12px/1.3 var(--f-mono);
font-style: normal;
letter-spacing: 0;
white-space: nowrap;
transition: opacity 300ms ease, translate 600ms var(--spring);
}
.js:not(.reduce-motion) .sel__box:not(.is-labeled)::after { opacity: 0; translate: calc(-50% + var(--lx, 0px)) 8px; }
.sel__box.no-label::after { display: none; }
.sel--dark .hl { color: var(--accent-night); }
.sel--dark .sel__box, .sel--dark .sel__box i { border-color: var(--accent-night); }
.sel--dark .sel__box::after { background: var(--accent-night); color: var(--night); }
.sel--dark .sel__box i { background: var(--night); }
.person { display: flex; align-items: center; gap: 14px; }
.person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.person strong { display: block; font: 500 15.5px/1.3 var(--f-label); }
.person span span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); }
.canvas { position: relative; isolation: isolate; }
.canvas::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(--plus);
background-size: 56px 56px;
background-position: calc(50% - 28px) 0;
-webkit-mask-image: radial-gradient(70% 85% at 78% 50%, #000 15%, transparent 78%);
mask-image: radial-gradient(70% 85% at 78% 50%, #000 15%, transparent 78%);
pointer-events: none;
}
.canvas__glow {
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--plus-hot);
background-size: 56px 56px;
background-position: calc(50% - 28px) 0;
-webkit-mask-image: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
mask-image: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
opacity: 0;
transition: opacity 600ms var(--ease-out);
pointer-events: none;
}
.canvas.is-hover .canvas__glow { opacity: 1; }
.selector { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.selector__box {
position: fixed;
left: 0; top: 0;
width: 0; height: 0;
border: 1.5px solid var(--accent);
border-radius: 3px;
opacity: 0;
contain: layout style;
}
.selector__box i {
position: absolute;
width: 9px; height: 9px;
background: #fff;
border: 1.5px solid var(--accent);
border-radius: 2px;
scale: 0;
}
.selector__box i:nth-child(1) { left: -5px; top: -5px; }
.selector__box i:nth-child(2) { right: -5px; top: -5px; }
.selector__box i:nth-child(3) { left: -5px; bottom: -5px; }
.selector__box i:nth-child(4) { right: -5px; bottom: -5px; }
.selector__tag {
position: fixed;
left: 0; top: 0;
padding: 3px 7px;
border-radius: 4px;
background: var(--tag-bg);
color: var(--tag-fg);
font: 400 11px/1.35 var(--f-mono);
white-space: nowrap;
opacity: 0;
}
@media (hover: none), (pointer: coarse) { .selector { display: none; } }
.intro { display: none; }
.has-intro .intro {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
background: var(--canvas);
}
.intro__logo { width: clamp(120px, 16vw, 200px); height: auto; overflow: visible; }
.has-intro body { overflow: hidden; }
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
height: var(--nav-h);
display: flex;
align-items: center;
color: var(--ink);
transition: color var(--t-ui) var(--ease-out);
}
.nav::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.74);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
opacity: 0;
transition: opacity var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), border-color var(--t-ui);
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-dark { color: #fff; }
.nav.is-dark::before { background: rgba(14, 19, 20, 0.72); border-color: rgba(255, 255, 255, 0.08); }
.nav.menu-open { color: #fff; }
.nav.menu-open::before { opacity: 0; }
.nav__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font: 600 19px/1 var(--f-display); letter-spacing: -0.02em; }
.brand__mark { width: 40px; height: 40px; overflow: visible; }
.brand__mark .logo-tr, .brand__mark .logo-bl { transition: translate 600ms var(--spring); }
.brand:hover .brand__mark .logo-tr { translate: 80px -80px; }
.brand:hover .brand__mark .logo-bl { translate: -80px 80px; }
.nav__links {
position: relative;
display: flex;
gap: 2px;
padding: 5px;
border-radius: 999px;
background: rgba(26, 26, 26, 0.04);
border: 1px solid rgba(26, 26, 26, 0.06);
transition: background-color var(--t-ui), border-color var(--t-ui);
}
.nav.is-dark .nav__links { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); }
.nav__item { position: relative; }
.nav__item--mega { position: static; }
.nav__trigger {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 15px;
border-radius: 999px;
font: 500 14.5px/1.2 var(--f-label);
opacity: 0.75;
transition: opacity var(--t-hover) var(--ease-out);
}
.nav__trigger:hover, .nav__item.is-open > .nav__trigger { opacity: 1; }
.nav__chev { width: 14px; height: 14px; transition: rotate var(--t-ui) var(--ease-out); }
.nav__item.is-open .nav__chev { rotate: 180deg; }
.dd {
position: absolute;
top: calc(100% + 12px);
left: 50%;
z-index: 5;
display: grid;
gap: 2px;
min-width: 220px;
padding: 10px;
border-radius: 18px;
background: #fff;
color: var(--ink);
border: 1px solid var(--line);
box-shadow: 0 30px 60px -28px rgba(10, 20, 22, 0.35), 0 4px 14px -6px rgba(10, 20, 22, 0.12);
translate: -50% -6px;
opacity: 0;
visibility: hidden;
transition: opacity 180ms var(--ease-in), translate 260ms var(--ease-in), visibility 0s linear 260ms;
}
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item.is-open > .dd {
translate: -50% 0;
opacity: 1;
visibility: visible;
transition: opacity 240ms var(--ease-out), translate 420ms var(--ease-out), visibility 0s;
}
.dd--mega { grid-template-columns: 1.15fr 1fr 1fr; gap: 6px 22px; width: min(900px, calc(100vw - 2 * var(--gutter))); padding: 22px; }
.dd__col { display: grid; align-content: start; gap: 2px; }
.dd__head { padding: 6px 10px 10px; font: 500 12px/1.2 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.dd__link {
display: grid;
gap: 3px;
padding: 10px 12px;
border-radius: 12px;
transition: background-color var(--t-hover) var(--ease-out);
}
.dd__link:hover, .dd__link:focus-visible { background: var(--paper); }
.dd__title { font: 500 15px/1.3 var(--f-label); color: var(--ink); }
.dd__kicker { font-size: 13px; line-height: 1.35; color: var(--muted); }
.dd__link--simple { font: 500 14.5px/1.3 var(--f-label); padding: 9px 12px; }
.dd__link, .dd__head { opacity: 0; translate: 0 6px; transition: background-color var(--t-hover) var(--ease-out), opacity 200ms ease, translate 400ms var(--ease-out); }
.nav__item.is-open .dd__link, .nav__item.is-open .dd__head { opacity: 1; translate: 0 0; transition-delay: 0s, 60ms, 60ms; }
.reduce-motion .dd__link, .reduce-motion .dd__head { opacity: 1; translate: none; }
.nav__pill {
position: absolute;
top: 5px; left: 0;
width: 0;
height: calc(100% - 10px);
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.2);
opacity: 0;
pointer-events: none;
}
.nav.is-dark .nav__pill { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.nav__end { display: flex; align-items: center; gap: 10px; }
.nav.is-dark .nav__trigger { color: #fff; }
.burger { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; border-color: rgba(127, 127, 127, 0.35); }
.burger span {
position: absolute;
left: 13px; right: 13px;
height: 1.5px;
background: currentColor;
transition: translate var(--t-ui) var(--ease-out), rotate var(--t-ui) var(--ease-out);
}
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { translate: 0 4px; rotate: 45deg; }
.burger[aria-expanded="true"] span:last-child { translate: 0 -4px; rotate: -45deg; }
.menu {
position: fixed;
inset: 0;
z-index: 55;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
padding: calc(var(--nav-h) + 40px) var(--gutter) 36px;
background: var(--night);
color: #fff;
}
.menu[hidden] { display: none; }
.menu { overflow-y: auto; }
.menu__links { display: grid; gap: 4px; }
.menu__group summary, .menu__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
overflow: hidden;
padding: 6px 0;
font: 600 clamp(36px, 10vw, 56px)/1.1 var(--f-display);
letter-spacing: -0.035em;
list-style: none;
cursor: pointer;
}
.menu__group summary::-webkit-details-marker { display: none; }
.menu__group summary span, .menu__top span { display: block; }
.menu__group .nav__chev { width: 26px; height: 26px; opacity: 0.6; }
.menu__group[open] .nav__chev { rotate: 180deg; }
.menu__sub { display: grid; gap: 2px; padding: 6px 0 18px; }
.menu__subhead { margin-top: 10px; font: 500 12px/1.4 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-night); }
.menu__sublink { padding: 6px 0; font: 500 17px/1.35 var(--f-label); color: var(--on-night); }
.menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (max-width: 899px) {
.nav__links { display: none; }
.burger { display: block; }
}
@media (max-width: 520px) {
.nav__cta { display: none; }
}
.hero {
position: relative;
min-height: 100svh;
display: grid;
align-items: center;
padding: calc(var(--nav-h) + clamp(28px, 6vh, 64px)) 0 clamp(88px, 12vh, 128px);
overflow: clip;
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(280px, 38vw, 540px);
align-items: center;
gap: clamp(24px, 4vw, 64px);
}
.hero__copy { position: relative; z-index: 2; container-type: inline-size; }
.hero__title {
margin-top: 30px;
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(2.3rem, 0.8rem + 3.8vw, 4.5rem);
line-height: 1.02;
letter-spacing: -0.04em;
}
@supports (font-size: 1cqi) { .hero__title { font-size: clamp(2.3rem, 8.4cqi, 4.5rem); } }
.hero__title .hl { padding-right: 0.04em; }
.hero__title .w { display: inline-block; overflow: clip; padding: 0 0.08em 0.16em 0; margin: 0 -0.08em -0.16em 0; }
.hero__title .w > span { display: inline-block; }
.js:not(.reduce-motion) .hero__title .w > span {
animation: word-up 1.15s var(--ease-out) both;
animation-delay: calc(var(--hero-delay, 60ms) + var(--i) * 50ms);
}
@keyframes word-up { from { transform: translateY(118%); } }
.br-lg { display: none; }
@media (min-width: 1100px) { .br-lg { display: inline; } }
.hero__lead {
margin-top: clamp(52px, 5vw, 60px);
max-width: 31em;
font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
color: var(--body);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__scroll {
position: absolute;
left: 50%;
bottom: 28px;
translate: -50% 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font: 400 12px/1 var(--f-mono);
color: var(--muted);
}
.hero__scroll i { position: relative; width: 1px; height: 38px; background: rgba(26, 26, 26, 0.12); overflow: hidden; }
.hero__scroll i::after {
content: "";
position: absolute;
inset: 0;
background: var(--ink);
animation: scrollcue 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollcue {
0% { transform: translateY(-100%); }
55%, 100% { transform: translateY(100%); }
}
.coin { --lit: 1; position: relative; width: 100%; aspect-ratio: 1; justify-self: end; }
.coin__stage { position: absolute; inset: 0; perspective: 1100px; }
.coin__float, .coin__tilt, .coin__scale { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin__edge {
position: absolute;
inset: 0;
border-radius: 50%;
background: #0b1617;
transform: translateZ(calc(var(--z) * 1px));
}
.coin__edge:last-of-type { background: #173235; }
.coin__face {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 50%;
background: radial-gradient(120% 120% at 72% 12%, #2e6066 0%, #1f454a 34%, #132426 72%, #0f1b1c 100%);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), inset 0 -24px 48px rgba(0, 0, 0, 0.32);
}
.coin__sheen {
position: absolute;
inset: -30%;
background: radial-gradient(closest-side, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 70%);
translate: var(--sx, 18%) var(--sy, -22%);
mix-blend-mode: screen;
}
.coin__flat {
position: absolute;
inset: 0;
background: linear-gradient(209deg, #21494e 12%, #101b1c 88%);
opacity: calc(1 - var(--lit));
}
.coin__s, .coin__br { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.coin__s { transform: translateZ(calc(26px * var(--lit))); filter: drop-shadow(0 10px 12px rgb(0 0 0 / calc(0.3 * var(--lit)))); }
.coin__br { transform: translateZ(calc(52px * var(--lit))); filter: drop-shadow(0 12px 14px rgb(0 0 0 / calc(0.32 * var(--lit)))); }
.coin__grip {
position: absolute;
width: 15%; height: 15%;
transform: translateZ(52px);
border-radius: 10px;
touch-action: none;
}
.coin__grip--tr { left: 58.8%; top: 20.4%; cursor: nesw-resize; }
.coin__grip--bl { left: 26.2%; top: 64.6%; cursor: nesw-resize; }
.coin__grip::after {
content: "";
position: absolute;
inset: 0;
border: 1.5px dashed rgb(var(--accent-night-rgb) / 0.9);
border-radius: 10px;
opacity: 0;
transition: opacity var(--t-hover) var(--ease-out);
}
.coin__grip:hover::after, .coin.is-scaling .coin__grip::after { opacity: 1; }
.coin__shadow {
position: absolute;
left: 14%; right: 14%;
bottom: -9%;
height: 10%;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(10 30 32 / calc(0.3 * var(--lit))), transparent);
filter: blur(6px);
pointer-events: none;
}
.coin__readout, .coin__hint {
position: absolute;
left: 50%;
translate: -50% 0;
white-space: nowrap;
font: 400 12px/1.3 var(--f-mono);
pointer-events: none;
}
.coin__readout {
bottom: -17%;
padding: 4px 9px;
border-radius: 5px;
background: var(--tag-bg);
color: var(--tag-fg);
opacity: 0;
transition: opacity 250ms ease;
}
.coin.is-scaling .coin__readout { opacity: 1; }
.coin__hint {
bottom: -17%;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
opacity: 0;
transition: opacity 500ms ease;
}
.coin__hint svg { width: 14px; height: 14px; color: var(--accent-ink); }
.coin.show-hint .coin__hint { opacity: 1; }
.coin.is-scaling .coin__hint { opacity: 0; }
.peer { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; }
.peer__arrow { width: 22px; height: 28px; fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22)); transform-origin: 2px 2px; }
.peer__name, .peer__chat {
position: absolute;
left: 18px;
white-space: nowrap;
font: 500 12.5px/1.3 var(--f-label);
color: var(--tag-fg);
background: var(--tag-bg);
}
.peer__name { top: 22px; padding: 3px 8px; border-radius: 3px 10px 10px 10px; }
.peer__chat {
top: 48px;
padding: 8px 12px;
border-radius: 3px 14px 14px 14px;
opacity: 0;
scale: 0.7;
transform-origin: 0 0;
transition: opacity 250ms ease, scale 600ms var(--spring);
}
.peer.is-chatting .peer__chat { opacity: 1; scale: 1; }
@media (max-width: 899px) {
.hero { min-height: auto; padding-bottom: 72px; }
.hero__lead { margin-top: 56px; }
.hero__inner { grid-template-columns: 1fr; gap: 56px; }
.coin { justify-self: center; width: min(64vw, 280px); margin-bottom: 24px; }
.hero__scroll { display: none; }
.peer { display: none; }
}
.reel { position: relative; height: 270vh; }
.reel__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.reel__media {
position: absolute;
inset: 0;
background: #0b0f10;
clip-path: inset(22% 22% round 24px);
will-change: clip-path;
}
.reel__video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: 50% 50%; }
.reel__frame { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.reel__frame::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 3px; }
.reel__frame i { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--accent); border-radius: 2px; }
.reel__frame i:nth-of-type(1) { left: -5px; top: -5px; }
.reel__frame i:nth-of-type(2) { right: -5px; top: -5px; }
.reel__frame i:nth-of-type(3) { left: -5px; bottom: -5px; }
.reel__frame i:nth-of-type(4) { right: -5px; bottom: -5px; }
.reel__name {
position: absolute;
left: 0;
bottom: calc(100% + 10px);
font: 400 12.5px/1 var(--f-mono);
color: var(--accent-ink);
}
.reel__name b { font-weight: 400; color: var(--accent-ink); }
.reel__dim {
position: absolute;
left: 50%;
top: calc(100% + 12px);
translate: -50% 0;
padding: 4px 9px;
border-radius: 5px;
background: var(--tag-bg);
color: var(--tag-fg);
font: 400 12px/1.3 var(--f-mono);
white-space: nowrap;
}
.reel__ui { position: absolute; left: var(--gutter); bottom: clamp(20px, 4vh, 40px); opacity: 0; }
.reel__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px 11px 14px;
border-radius: 999px;
background: rgba(14, 19, 20, 0.74);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
font: 500 14.5px/1 var(--f-label);
transition: background-color var(--t-hover) var(--ease-out), scale var(--t-press) var(--ease-out);
}
.reel__btn:hover { background: rgba(14, 19, 20, 0.8); }
.reel__btn:active { scale: 0.96; }
.reel__btn svg { width: 20px; height: 20px; }
@media (max-width: 899px) {
.reel { height: auto; padding: 8px var(--gutter) 0; }
.reel__sticky { position: relative; height: auto; overflow: visible; }
.reel__media { position: relative; aspect-ratio: 16 / 10; clip-path: none; border-radius: 18px; overflow: hidden; }
.reel__video { transform: none; }
.reel__frame { inset: 8px var(--gutter) auto; width: auto !important; height: auto !important; aspect-ratio: 16 / 10; transform: none !important; }
.reel__ui { position: absolute; left: calc(var(--gutter) + 12px); bottom: 12px; opacity: 1; }
}
.clients { padding-block: clamp(72px, 9vw, 120px) clamp(16px, 3vw, 40px); }
.clients__title { margin-bottom: 30px; text-align: center; font: 400 12.5px/1 var(--f-mono); color: var(--muted); }
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track .marquee__set { display: flex; align-items: center; gap: clamp(56px, 7vw, 112px); padding-right: clamp(56px, 7vw, 112px); }
.marquee__set li { padding: 10px 4px; }
.marquee__set { --k: 1; }
@media (max-width: 899px) { .marquee__set { --k: 0.82; } }
@media (max-width: 520px) { .marquee__set { --k: 0.7; } }
.marquee__set img { width: auto; height: calc(var(--h, 30) * 1px * var(--k)); filter: brightness(0); opacity: 0.5; transition: opacity var(--t-hover) var(--ease-out); }
.marquee__set li:hover img { opacity: 0.9; }
@keyframes marquee { to { transform: translateX(-50%); } }
.motion-paused .marquee__track { animation-play-state: paused; }
.sec-head { margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head--split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 28px 72px; }
.sec-head--split .h2 { max-width: 12.5em; }
.sec-head__side .link-arrow { margin-top: 20px; }
@media (max-width: 899px) { .sec-head--split { grid-template-columns: 1fr; } }
.svc-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc-cell { position: relative; display: flex; }
.svc {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
padding: 8px;
border-radius: 24px;
background: #fff;
border: 1px solid var(--line);
transition: translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), border-color var(--t-hover);
}
.svc:hover { translate: 0 -6px; border-color: #d6d6d2; box-shadow: 0 34px 60px -34px rgba(14, 40, 44, 0.42); }
.svc__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 17px; background: #e8eded; }
.svc__media video { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.svc:hover .svc__media video { scale: 1.06; }
.svc__num {
position: absolute;
top: 12px; left: 12px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
font: 400 11.5px/1.2 var(--f-mono);
color: var(--ink);
}
.svc__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 12px 12px; }
.svc__for { font: 500 11.5px/1.3 var(--f-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-ink); }
.svc__title { font: 600 clamp(20px, 1.55vw, 24px)/1.15 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
.svc__link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.svc__link:focus-visible { outline: none; }
.svc:has(.svc__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.svc__desc { font-size: 15px; line-height: 1.5; color: var(--body); }
.svc__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font: 500 14px/1 var(--f-label); }
.svc__more svg { width: 16px; height: 16px; transition: translate var(--t-ui) var(--ease-out); }
.svc:hover .svc__more svg { translate: 4px 0; }
@media (max-width: 1099px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
.svc-grid {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
margin-inline: calc(-1 * var(--gutter));
padding: 4px var(--gutter) 16px;
scrollbar-width: none;
}
.svc-grid::-webkit-scrollbar { display: none; }
.svc-cell { flex: 0 0 84%; scroll-snap-align: start; }
}
.cases { position: relative; }
.case {
position: sticky;
top: calc(var(--nav-h) + 12px + var(--i) * 16px);
height: min(76vh, 720px);
min-height: 520px;
margin-bottom: 7vh;
}
.case:last-child { margin-bottom: 0; }
.case__card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
height: 100%;
overflow: hidden;
border-radius: 32px;
background: var(--case-bg);
color: var(--case-fg);
transform-origin: 50% 0;
box-shadow: 0 50px 90px -60px rgba(0, 0, 0, 0.55);
}
.case__info { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(24px, 3.2vw, 48px); }
.case__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case__client { display: inline-flex; align-items: center; gap: 12px; font: 500 15px/1.2 var(--f-label); }
.case__client img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: #fff; }
.case__count { font: 400 12px/1 var(--f-mono); opacity: 0.65; }
.case__tag { margin-bottom: 16px; font: 500 12px/1.3 var(--f-label); letter-spacing: 0.11em; text-transform: uppercase; opacity: 0.7; }
.case__title { font: 600 clamp(28px, 3.1vw, 50px)/1.04 var(--f-display); letter-spacing: -0.035em; text-wrap: balance; }
.case__cta {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 13px 18px 13px 20px;
border-radius: 999px;
background: var(--case-fg);
color: var(--case-bg);
font: 500 14.5px/1 var(--f-label);
}
.case__cta svg { width: 16px; height: 16px; transition: translate var(--t-ui) var(--ease-out); }
.case__card:hover .case__cta svg { translate: 4px 0; }
.case__media {
position: relative;
margin: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) 0;
overflow: hidden;
border-radius: 22px;
background: var(--case-media);
}
.case__zoom { display: block; width: 100%; height: 100%; transition: scale 1.4s var(--ease-out); }
.case__card:hover .case__zoom { scale: 1.035; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__shade { position: absolute; inset: 0; background: #0b0f10; opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
.case { position: relative; top: auto; height: auto; min-height: 0; margin-bottom: 16px; }
.case__card { grid-template-columns: 1fr; border-radius: 26px; }
.case__media { margin: 0 10px 10px; aspect-ratio: 4 / 3; }
.case__shade { display: none; }
}
.stats { padding-block: clamp(96px, 12vw, 168px) clamp(64px, 8vw, 112px); }
.stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 36px 32px 8px 0; }
.stat + .stat { padding-left: 32px; border-left: 1px solid var(--line); }
.stat__num { display: flex; align-items: flex-start; font: 500 clamp(72px, 9.5vw, 150px)/0.92 var(--f-body); letter-spacing: -0.055em; }
.stat__num > span[aria-hidden] { display: inline-flex; align-items: flex-start; }
.stat__suf { margin: 0.04em 0 0 0.03em; font-size: 0.5em; color: var(--accent-ink); }
.stat__label { font: 500 12.5px/1.4 var(--f-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.stat--badge { align-items: flex-start; }
.stat__badge { width: clamp(108px, 10.5vw, 150px); height: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.12)); }
.odo { display: inline-flex; }
.odo__col { display: inline-block; height: 0.92em; clip-path: inset(0 -0.4em); }
.odo__strip { display: flex; flex-direction: column; }
.odo__strip span { display: block; height: 0.92em; text-align: center; }
@media (max-width: 759px) {
.stats__grid { grid-template-columns: 1fr; }
.stat, .stat + .stat { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
.ticker { padding-block: clamp(32px, 5vw, 72px) clamp(96px, 12vw, 160px); overflow: clip; }
.ticker__row { display: flex; }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__set {
display: flex;
align-items: center;
gap: 0.32em;
padding-right: 0.32em;
font: italic 600 clamp(60px, 9.5vw, 156px)/1.08 var(--f-display);
letter-spacing: -0.045em;
white-space: nowrap;
}
.ticker__set .o { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.ticker__star { flex: none; width: 0.42em; height: 0.42em; color: var(--accent); }
.dark {
--inset: 0px;
--rad: 40px;
position: relative;
overflow: clip;
background: var(--night);
color: var(--on-night);
clip-path: inset(0 var(--inset) round var(--rad));
}
.dark::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--plus-night);
background-size: 56px 56px;
background-position: calc(50% - 28px) 0;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
pointer-events: none;
}
.dark .lead { color: var(--on-night-2); }
.caps__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px 64px; }
.caps .lead { margin-top: 26px; }
.caps__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.cap-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px 9px 10px;
border-radius: 999px;
border: 1px solid var(--line-night);
color: var(--on-night-2);
font: 500 14px/1.2 var(--f-label);
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.cap-chip svg { width: 18px; height: 18px; color: var(--accent-night); }
.cap-chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.cap-chip[aria-pressed="true"] { color: #fff; border-color: rgb(var(--accent-night-rgb) / 0.55); background: rgb(var(--accent-night-rgb) / 0.09); }
.orbit {
--cx: 0.3;
--r: 0.26;
--node: 0.105;
--core: 0.15;
--band: calc(var(--core) + 0.05);
position: relative;
width: min(100%, 600px);
aspect-ratio: 1;
justify-self: center;
}
.orbit__glow {
position: absolute;
inset: -10%;
background: radial-gradient(closest-side at 34% 50%, rgba(38, 114, 122, 0.55), rgba(38, 114, 122, 0.14) 55%, transparent 78%);
pointer-events: none;
}
.orbit__ring {
position: absolute;
left: calc((var(--cx) - var(--r)) * 100%);
top: calc((0.5 - var(--r)) * 100%);
width: calc(var(--r) * 200%);
aspect-ratio: 1;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.12);
}
.orbit__core {
position: absolute;
left: calc(var(--cx) * 100%); top: 50%;
width: calc(var(--core) * 100%);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
box-shadow: 0 0 0 10px rgb(var(--accent-night-rgb) / 0.05), 0 24px 40px rgba(0, 0, 0, 0.45);
}
.orbit__core svg { width: 100%; height: 100%; }
.orbit__pill {
position: absolute;
left: calc((var(--cx) - var(--core) / 2 - 0.025) * 100%);
right: 2%;
top: 50%;
height: calc(var(--band) * 100%);
translate: 0 -50%;
border-radius: 999px;
background: linear-gradient(90deg, rgb(var(--accent-night-rgb) / 0.07), rgb(var(--accent-night-rgb) / 0.14));
border: 1px solid rgb(var(--accent-night-rgb) / 0.32);
box-shadow: 0 0 60px -10px rgb(var(--accent-night-rgb) / 0.18);
}
.orbit__label {
position: absolute;
left: calc((var(--cx) + var(--r) + var(--node) / 2 + 0.03) * 100%);
right: 6%;
top: calc((0.5 - var(--band) / 2) * 100%);
height: calc(var(--band) * 100%);
display: flex;
align-items: center;
font: 500 clamp(14px, 1.3vw, 17px)/1.2 var(--f-label);
color: #fff;
text-wrap: balance;
}
.orbit__node {
position: absolute;
left: 0; top: 0;
width: calc(var(--node) * 100%);
aspect-ratio: 1;
margin: calc(var(--node) * -50%) 0 0 calc(var(--node) * -50%);
display: grid;
place-items: center;
border-radius: 50%;
background: #132023;
border: 1px solid rgb(var(--accent-night-rgb) / 0.22);
color: var(--accent-night);
transition: border-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), background-color var(--t-ui);
cursor: pointer;
}
.orbit__node svg { width: 44%; height: 44%; }
.orbit__node.is-active { background: #17292c; border-color: rgb(var(--accent-night-rgb) / 0.75); box-shadow: 0 0 28px rgb(var(--accent-night-rgb) / 0.35); }
.orbit:not(.is-ready) .orbit__node { opacity: 0; }
@media (max-width: 899px) {
.caps__grid { grid-template-columns: 1fr; }
.orbit { width: min(100%, 460px); }
}
.process { padding-top: clamp(40px, 6vw, 80px); }
.process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px 88px; }
.process__aside { position: sticky; top: calc(var(--nav-h) + 48px); align-self: start; }
.daycount { display: flex; align-items: flex-end; gap: 18px; margin: 52px 0 8px; }
.daycount__label { padding-bottom: 0.9em; font: 400 13px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-2); }
.daycount__num {
display: grid;
height: 0.86em;
overflow: hidden;
font: 500 clamp(96px, 11vw, 176px)/0.86 var(--f-body);
letter-spacing: -0.06em;
color: var(--accent-night);
}
.daycount__num > span { grid-area: 1 / 1; }
.daycount__bar { position: relative; flex: 1; height: 2px; margin-bottom: 1.1em; background: var(--line-night); overflow: hidden; border-radius: 2px; }
.daycount__bar span { position: absolute; inset: 0; background: var(--accent-night); transform-origin: 0 50%; transform: scaleX(0.2); }
.steps { position: relative; padding-left: 44px; }
.steps__rail { position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--line-night); }
.steps__fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(var(--accent-night), var(--accent)); transform-origin: 50% 0; transform: scaleY(0); }
.step { position: relative; padding-bottom: clamp(80px, 15vh, 150px); opacity: 0.32; transition: opacity 600ms var(--ease-out); }
.step:last-child { padding-bottom: 8px; }
.step.is-active { opacity: 1; }
.step__dot {
position: absolute;
left: -44px; top: 4px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--night);
border: 2px solid rgba(255, 255, 255, 0.25);
transition: border-color 500ms var(--ease-out), background-color 500ms var(--ease-out), box-shadow 500ms var(--ease-out), scale 600ms var(--spring);
}
.step.is-active .step__dot { scale: 1.15; border-color: var(--accent-night); background: var(--accent-night); box-shadow: 0 0 0 6px rgb(var(--accent-night-rgb) / 0.14), 0 0 26px rgb(var(--accent-night-rgb) / 0.6); }
.step__num { margin-bottom: 14px; font: 400 12.5px/1 var(--f-mono); color: var(--accent-night); }
.step__title { margin-bottom: 14px; font: 600 clamp(28px, 3vw, 44px)/1.05 var(--f-display); letter-spacing: -0.03em; }
.step__text { max-width: 30em; font-size: 18px; color: var(--on-night-2); }
.promise { padding-top: clamp(112px, 14vw, 200px); text-align: center; }
.promise__text {
max-width: 14.5em;
margin-inline: auto;
font: 600 clamp(36px, 5.3vw, 86px)/1.06 var(--f-display);
letter-spacing: -0.04em;
text-wrap: balance;
}
.promise__text .w-mask, .cta__title .w-mask { padding: 0 0.08em 0.16em 0; margin: 0 -0.08em -0.16em 0; }
.promise__sub { margin-top: 44px; font-size: clamp(17px, 1.4vw, 20px); color: var(--on-night-2); }
@media (max-width: 899px) {
.promise .sel__box::after { display: none; }
.process__grid { grid-template-columns: 1fr; }
.process__aside { position: relative; top: auto; }
.daycount { margin-top: 36px; }
.step { padding-bottom: 64px; }
}
.quote { position: relative; display: grid; grid-template-columns: clamp(56px, 8vw, 120px) minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 40px); }
.quote__mark { font: 600 clamp(96px, 12vw, 180px)/0.8 var(--f-display); color: var(--accent); }
.quote__text { font: 500 clamp(24px, 2.65vw, 42px)/1.3 var(--f-display); letter-spacing: -0.022em; text-wrap: pretty; }
.quote__by { grid-column: 2; margin-top: 40px; }
.quote__by img { width: 60px; height: 60px; }
.voices__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: clamp(72px, 9vw, 128px); }
.voice { padding: 28px; border-radius: 24px; background: var(--paper); }
.voice figure { display: flex; flex-direction: column; gap: 28px; }
.voice blockquote { font-size: 15.5px; line-height: 1.62; color: #2f2f2f; }
@media (max-width: 999px) { .voices__more { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .quote { grid-template-columns: 1fr; } .quote__by { grid-column: 1; } }
.audience__grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: center; gap: 40px 64px; }
.audience__hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 400 12.5px/1 var(--f-mono); color: var(--muted); }
.audience__hint svg { width: 14px; height: 14px; color: var(--accent-ink); }
.board {
position: relative;
height: clamp(380px, 34vw, 480px);
border-radius: 28px;
border: 1px dashed rgba(26, 26, 26, 0.16);
background: rgba(255, 255, 255, 0.55);
}
.chip {
position: absolute;
left: var(--x); top: var(--y);
rotate: var(--r);
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 24px 14px 14px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.4);
font: 600 clamp(18px, 1.75vw, 26px)/1 var(--f-display);
letter-spacing: -0.02em;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
transition: box-shadow var(--t-ui) var(--ease-out);
}
.chip i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c); flex: none; }
.chip i svg { width: 58%; height: 58%; fill: none; stroke: var(--ci, var(--ink)); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.can-drag .chip { cursor: grab; }
.chip.is-dragging { cursor: grabbing; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.5); }
@media (max-width: 899px) {
.audience__grid { grid-template-columns: 1fr; }
.audience__hint { display: none; }
.board { height: auto; display: flex; flex-wrap: wrap; gap: 10px; padding: 18px; }
.chip { position: static; rotate: none; font-size: 19px; padding: 12px 20px 12px 12px; }
.chip i { width: 26px; height: 26px; }
}
.faq { padding-top: clamp(64px, 8vw, 120px); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 40px 88px; }
.faq__aside { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq__aside .btn { margin-top: 36px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa__btn {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 38px;
align-items: center;
gap: 12px;
width: 100%;
padding: 26px 0;
text-align: left;
font: 600 clamp(18px, 1.55vw, 22px)/1.3 var(--f-display);
letter-spacing: -0.015em;
}
.qa__num { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.qa__icon {
position: relative;
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--line);
transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), color var(--t-ui);
}
.qa__icon::before, .qa__icon::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 12px; height: 1.5px;
background: currentColor;
translate: -50% -50%;
transition: rotate 600ms var(--spring);
}
.qa__icon::after { rotate: 90deg; }
.qa__btn:hover .qa__icon { border-color: var(--ink); }
.qa.is-open .qa__icon { background: var(--ink); border-color: var(--ink); color: #fff; }
.qa.is-open .qa__icon::after { rotate: 0deg; }
.qa__panel {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 550ms var(--ease-out), visibility 0s linear 550ms;
}
.qa.is-open .qa__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 550ms var(--ease-out), visibility 0s; }
.qa__inner { overflow: hidden; }
.qa__inner p {
padding: 0 50px 28px 56px;
color: var(--body);
opacity: 0;
translate: 0 -10px;
transition: opacity 300ms var(--ease-out), translate 500ms var(--ease-out);
}
.qa.is-open .qa__inner p { opacity: 1; translate: 0 0; transition-delay: 90ms; }
@media (max-width: 899px) {
.faq__grid { grid-template-columns: 1fr; }
.faq__aside { position: relative; top: auto; }
.qa__btn { grid-template-columns: 32px minmax(0, 1fr) 36px; }
.qa__inner p { padding: 0 8px 24px 44px; }
}
.cta {
--inset: 0px;
--rad: 40px;
position: relative;
overflow: hidden;
padding-block: clamp(120px, 15vw, 220px) clamp(112px, 13vw, 190px);
background: var(--night);
color: var(--on-night);
text-align: center;
clip-path: inset(0 var(--inset) round var(--rad) var(--rad) 0 0);
}
.cta__glow {
position: absolute;
left: 0; top: 0;
width: 1000px; height: 1000px;
margin: -500px 0 0 -500px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(38, 114, 122, 0.62), rgba(38, 114, 122, 0.16) 52%, transparent 74%);
pointer-events: none;
}
.cta__inner { position: relative; }
.cta__title {
max-width: 12.5em;
margin: 30px auto 0;
font: 600 clamp(40px, 6.6vw, 108px)/1.02 var(--f-display);
letter-spacing: -0.045em;
text-wrap: balance;
}
.cta .lead { margin: 52px auto 0; color: var(--on-night-2); }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.footer { overflow: hidden; background: var(--night); color: var(--on-night-2); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: 48px; padding-block: 64px 40px; border-top: 1px solid var(--line-night); }
.footer .brand { color: #fff; }
.footer__about { max-width: 22em; margin-top: 22px; font-size: 15px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; }
.footer__social a { display: inline-block; padding: 4px 0; font: 500 14.5px var(--f-label); color: #fff; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.footer__h a { display: inline-block; padding: 6px 0; }
.footer__h { margin-bottom: 10px; font: 500 12px/1.3 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.footer__cols li a {
display: inline-block;
padding: 5px 0;
font-size: 14.5px;
line-height: 1.4;
background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
transition: color var(--t-hover) var(--ease-out), background-size var(--t-ui) var(--ease-out);
}
.footer__cols li a:hover { color: #fff; background-size: 100% 1px; }
.footer__word {
position: relative;
width: fit-content;
margin: clamp(24px, 4vw, 56px) auto 0.14em;
padding: 0.06em 0.08em 0.1em;
color: #fff;
font: 600 15vw/0.86 var(--f-display);
letter-spacing: -0.055em;
white-space: nowrap;
}
.footer__word-text { display: block; }
.footer__word .c-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; }
.footer__br { position: absolute; width: 0.24em; height: auto; color: var(--accent-night); }
.footer__br--tr { right: -0.2em; top: -0.06em; }
.footer__br--bl { left: -0.18em; bottom: -0.08em; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px 36px; border-top: 1px solid var(--line-night); font-size: 14px; }
.footer__tools { display: flex; align-items: center; gap: 22px; }
.motion-toggle, .totop { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 400 12.5px/1 var(--f-mono); color: var(--on-night-2); transition: color var(--t-hover); }
.motion-toggle:hover, .totop:hover { color: #fff; }
.motion-toggle span { color: var(--accent-night); }
.totop svg { width: 14px; height: 14px; rotate: -90deg; }
@media (max-width: 999px) {
.footer__top { grid-template-columns: 1fr; }
.footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.js:not(.reduce-motion) [data-reveal] { opacity: 0; }
.hero-wait { --hero-delay: 1380ms; }
.js:not(.reduce-motion) [data-hero-in] {
animation: rise-in 1s var(--ease-out) both;
animation-delay: calc(var(--hero-delay, 60ms) + var(--d, 0ms));
}
.js:not(.reduce-motion) [data-nav-in] {
animation: drop-in 0.9s var(--ease-out) both;
animation-delay: calc(var(--hero-delay, 60ms) + var(--d, 0ms));
}
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } }
.js:not(.reduce-motion) [data-split] { visibility: hidden; }
.js:not(.reduce-motion) .sel__box { opacity: 0; }
.js:not(.reduce-motion) .coin__stage { opacity: 0; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
transition-delay: 0s !important;
}
.reduce-motion .marquee__track { width: auto; animation: none; }
.reduce-motion .marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 20px; padding: 0 var(--gutter); }
.reduce-motion .marquee__set[aria-hidden] { display: none; }
.reduce-motion .marquee { -webkit-mask-image: none; mask-image: none; }
.reduce-motion .ticker__row { justify-content: center; }
.reduce-motion .ticker__track { flex-wrap: wrap; justify-content: center; width: auto; }
.reduce-motion .ticker__set { flex-wrap: wrap; justify-content: center; font-size: clamp(40px, 6vw, 88px); }
.reduce-motion .ticker__set + .ticker__set { display: none; }
.reduce-motion .reel { height: auto; padding: 0 var(--gutter); }
.reduce-motion .reel__sticky { position: relative; height: auto; overflow: visible; }
.reduce-motion .reel__media { position: relative; aspect-ratio: 16 / 9; clip-path: none; border-radius: 24px; overflow: hidden; }
.reduce-motion .reel__video { transform: none; }
.reduce-motion .reel__frame { display: none; }
.reduce-motion .reel__ui { opacity: 1; left: calc(var(--gutter) + 16px); bottom: 16px; }
.reduce-motion .step { opacity: 1; }
.reduce-motion .steps__fill { transform: none; }
.reduce-motion .daycount { display: none; }
.reduce-motion .dark, .reduce-motion .cta { clip-path: none; border-radius: 0; }
.reduce-motion .peer, .reduce-motion .hero__scroll i::after { display: none; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: vt-out 240ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 560ms var(--ease-out) both; }
::view-transition-group(*) { animation-duration: 620ms; animation-timing-function: var(--ease-out); }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
html.reduce-motion::view-transition-group(*),
html.reduce-motion::view-transition-old(*),
html.reduce-motion::view-transition-new(*) { animation: none !important; }
.tone-paper { background: var(--paper); }
.h2 em, .phero__title em:not(.hl) { font-style: italic; }
.pnote { max-width: 46em; margin-top: 40px; font-size: 15px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font: 400 12.5px/1.5 var(--f-mono); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: #c5c8c9; }
.crumbs a { padding: 2px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: color var(--t-hover), background-size var(--t-ui) var(--ease-out); }
.crumbs a:hover { color: var(--ink); background-size: 100% 1px; }
.crumbs [aria-current] { color: var(--ink); }
.phero { position: relative; padding: calc(var(--nav-h) + clamp(40px, 8vh, 96px)) 0 clamp(80px, 10vw, 136px); overflow: clip; }
.phero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; gap: clamp(40px, 5vw, 88px); }
.phero__copy { position: relative; z-index: 2; container-type: inline-size; }
.phero__eyebrow { margin-top: 28px; font: 500 12.5px/1.3 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.phero__title {
margin-top: 22px;
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(2.3rem, 1rem + 3.4vw, 4.2rem);
line-height: 1.04;
letter-spacing: -0.04em;
text-wrap: balance;
}
@supports (font-size: 1cqi) { .phero__title { font-size: clamp(2.2rem, 8.4cqi, 4.2rem); } }
.phero--solo { padding-bottom: clamp(72px, 9vw, 120px); }
.phero--solo .phero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; gap: 40px clamp(40px, 5vw, 96px); }
.phero--solo .phero__title { letter-spacing: -0.045em; line-height: 1; }
.phero--xl .phero__title { font-size: clamp(3rem, 1rem + 6.4vw, 8rem); }
.phero--lg .phero__title { font-size: clamp(2.6rem, 1rem + 4.4vw, 6rem); }
.phero--md .phero__title { font-size: clamp(2.4rem, 1rem + 3.2vw, 4.6rem); }
@supports (font-size: 1cqi) {
.phero--xl .phero__title { font-size: clamp(3rem, 12.5cqi, 8rem); }
.phero--lg .phero__title { font-size: clamp(2.6rem, 8.6cqi, 6rem); }
.phero--md .phero__title { font-size: clamp(2.4rem, 6.4cqi, 4.6rem); }
}
.phero__side { position: relative; z-index: 2; padding-bottom: 0.4em; }
.phero__side .phero__lead { margin-top: 0; max-width: 28em; }
.phero__side .phero__lead + .phero__lead { margin-top: 14px; }
@media (max-width: 899px) { .phero--solo .phero__inner { grid-template-columns: 1fr; gap: 60px; } }
.phero--solo .phero__inner > .crumbs { grid-column: 1 / -1; margin-bottom: -12px; }
.phero--a-center .phero__inner { align-items: center; }
.phero--a-top .phero__inner { align-items: start; }
.phero--a-top .phero__side { padding-top: 0.55em; padding-bottom: 0; }
.phero--a-top .phero__copy > .phero__title:first-child { margin-top: 0; }
.phero__eyebrow + .phero__title { margin-top: 18px; }
.phero__eyebrow--long { max-width: 30em; font: 500 clamp(16px, 1.3vw, 19px)/1.4 var(--f-label); letter-spacing: -0.005em; text-transform: none; }
.phero__lead { margin-top: clamp(44px, 4vw, 56px); max-width: 32em; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); color: var(--body); text-wrap: pretty; }
.phero__lead + .phero__lead { margin-top: 14px; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.phero__note { display: flex; align-items: center; gap: 10px; margin-top: 26px; font: 500 14px/1.4 var(--f-label); color: var(--muted); }
.phero__note::before { content: ""; flex: none; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.phero .canvas::before, .phero.canvas::before { -webkit-mask-image: radial-gradient(60% 80% at 80% 45%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 80% at 80% 45%, #000 10%, transparent 75%); }
.phero--solo.canvas::before { -webkit-mask-image: radial-gradient(70% 90% at 70% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 90% at 70% 30%, #000 10%, transparent 75%); }
[data-hero-title] .w { display: inline-block; overflow: clip; padding: 0 0.08em 0.16em 0; margin: 0 -0.08em -0.16em 0; }
[data-hero-title] .w > span { display: inline-block; }
[data-hero-title] .hl { padding-right: 0.04em; }
.js:not(.reduce-motion) [data-hero-title] .w > span { animation: word-up 1.1s var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 45ms); }
@media (max-width: 899px) {
.phero__inner { grid-template-columns: 1fr; gap: 64px; }
.phero { padding-bottom: 72px; }
}
.frame { position: relative; margin: 0; }
.frame__media { position: relative; overflow: hidden; border-radius: 20px; background: var(--frame-bg, var(--paper)); }
.frame__media > img, .frame__media > video { width: 100%; height: auto; }
.phero .frame__media { aspect-ratio: var(--ar, 1); }
.phero .frame__media > img, .phero .frame__media > video { height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.frame--contain .frame__media > img { object-fit: contain; }
.frame__name { position: absolute; left: 0; bottom: calc(100% + 12px); font: 400 12.5px/1 var(--f-mono); color: var(--accent-ink); white-space: nowrap; }
.frame__name b { font-weight: 400; }
.frame__box { position: absolute; inset: -7px; border: 1.5px solid var(--accent); border-radius: 4px; pointer-events: none; }
.frame__box i { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--accent); border-radius: 2px; }
.frame__box i:nth-child(1) { left: -5.5px; top: -5.5px; }
.frame__box i:nth-child(2) { right: -5.5px; top: -5.5px; }
.frame__box i:nth-child(3) { left: -5.5px; bottom: -5.5px; }
.frame__box i:nth-child(4) { right: -5.5px; bottom: -5.5px; }
.frame__dim {
position: absolute;
left: 50%;
top: calc(100% + 18px);
translate: -50% 0;
padding: 4px 9px;
border-radius: 5px;
background: var(--tag-bg);
color: var(--tag-fg);
font: 400 12px/1.3 var(--f-mono);
white-space: nowrap;
}
.frame__dim:empty { display: none; }
.frame:not(.phero .frame) .frame__box, .frame:not(.phero .frame) .frame__dim { display: none; }
.psplit__media .frame__name, .pmedia .frame__name { position: static; display: block; margin-bottom: 14px; }
[data-grow] { overflow: clip; will-change: clip-path; }
.chero { padding: calc(var(--nav-h) + clamp(24px, 4vh, 48px)) 0 clamp(40px, 6vw, 80px); }
.chero .crumbs { margin-bottom: 22px; }
.chero__panel {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
min-height: min(80vh, 760px);
overflow: hidden;
border-radius: 32px;
background: var(--case-bg);
color: var(--case-fg);
box-shadow: 0 50px 90px -60px rgba(0, 0, 0, 0.5);
}
.chero__info { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(24px, 3.4vw, 52px); }
.chero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.chero__date { font: 400 12px/1 var(--f-mono); opacity: 0.7; }
.chero__kicker { margin-bottom: 18px; font: 500 12.5px/1.4 var(--f-label); letter-spacing: 0.11em; text-transform: uppercase; opacity: 0.75; }
.chero__title { margin-top: 0; font-size: clamp(2.2rem, 1rem + 3vw, 4rem); }
@supports (font-size: 1cqi) { .chero__title { font-size: clamp(2.1rem, 10cqi, 4rem); } }
.chero__info > div:last-child { container-type: inline-size; }
.chero .hl { color: inherit; }
.chero__media { position: relative; margin: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) 0; overflow: hidden; border-radius: 22px; background: var(--case-media); }
.chero__media img { width: 100%; height: 100%; object-fit: cover; }
.chero__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px 72px; padding-top: clamp(72px, 9vw, 128px); }
.chero__facts { display: grid; gap: 18px; align-content: start; }
.chero__facts div { padding-top: 14px; border-top: 1px solid var(--line); }
.chero__facts dt { font: 400 12px/1.3 var(--f-mono); color: var(--muted); }
.chero__facts dd { margin: 6px 0 0; font: 500 16px/1.4 var(--f-label); }
.chero__intro .lead { max-width: none; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); color: var(--ink); }
.chero__intro .lead + .lead { margin-top: 20px; color: var(--body); font-size: clamp(1.05rem, 0.97rem + 0.3vw, 1.2rem); }
@media (max-width: 899px) {
.chero__panel { grid-template-columns: 1fr; min-height: 0; border-radius: 26px; }
.chero__media { margin: 0 10px 10px; aspect-ratio: 4 / 3; }
.chero__intro { grid-template-columns: 1fr; }
}
.psplit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 88px; align-items: end; }
.psplit__text { display: grid; gap: 20px; padding-bottom: 0.2em; }
.psplit__text .lead { max-width: 36em; }
.psplit__text .link-arrow { justify-self: start; margin-top: 4px; }
.psplit__media { margin-top: clamp(56px, 7vw, 104px); }
.psplit__media .frame__media { border-radius: 28px; }
.ticks { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--body); }
.ticks svg { width: 20px; height: 20px; margin-top: 3px; color: var(--accent); }
@media (max-width: 899px) { .psplit__grid { grid-template-columns: 1fr; } }
.ptext__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 88px; align-items: start; }
.ptext__inner .kicker { grid-column: 1 / -1; margin-bottom: -4px; justify-self: start; }
.ptext__body { display: grid; gap: 18px; padding-top: 8px; }
.ptext__ctas { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px; }
.ptext--center .ptext__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.ptext--center .ptext__inner .kicker { justify-self: center; }
.ptext--center .h2 { max-width: 16em; }
.ptext--center .lead { margin-inline: auto; }
.ptext--center .ptext__ctas { grid-column: 1; justify-content: center; }
@media (max-width: 899px) { .ptext__inner { grid-template-columns: 1fr; } .ptext__ctas { grid-column: 1; } }
.pcards { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 36px); border-radius: 24px; background: var(--paper); }
.tone-paper .pcard { background: #fff; }
.pcard__num { font: 400 12.5px/1 var(--f-mono); color: var(--accent-ink); }
.pcard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-ink); }
.pcard__icon svg { width: 22px; height: 22px; }
.pcard__title { margin-top: auto; padding-top: clamp(16px, 2.2vw, 32px); font: 600 clamp(21px, 1.7vw, 26px)/1.15 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
.pcard__text { font-size: 16px; line-height: 1.55; color: var(--body); }
.pdark .pcard { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-night); }
.pdark .pcard__num { color: var(--accent-night); }
.pdark .pcard__text { color: var(--on-night-2); }
.pdark .pcard__icon { background: rgb(var(--accent-night-rgb) / 0.12); color: var(--accent-night); }
@media (max-width: 1099px) { .pcards--3, .pcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pcards--2, .pcards--3, .pcards--4 { grid-template-columns: 1fr; } }
.pdark + .pdark { margin-top: 0; }
.pdark .lead { color: var(--on-night-2); }
.pcheck__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px 88px; align-items: start; }
.pcheck__aside { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; justify-items: start; gap: 0; }
.pcheck__aside .lead { margin-top: 26px; }
.pcheck__aside .btn { margin-top: 32px; }
.checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.check { display: grid; grid-template-columns: 32px 34px minmax(0, 1fr); align-items: center; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.check__box { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid #cfd3d3; color: #fff; transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out), scale 600ms var(--spring); }
.check__box svg { width: 16px; height: 16px; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 500ms var(--ease-out) 120ms; }
.check__box svg use { stroke-dasharray: inherit; }
.check.is-checked .check__box { background: var(--accent); border-color: var(--accent); scale: 1.06; }
.check.is-checked .check__box svg { stroke-dashoffset: 0; }
.check__num { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.check__text { font: 600 clamp(19px, 1.6vw, 24px)/1.25 var(--f-display); letter-spacing: -0.015em; }
.reduce-motion .check .check__box { background: var(--accent); border-color: var(--accent); }
.reduce-motion .check .check__box svg, .no-js .check .check__box svg { stroke-dashoffset: 0; }
.pchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; align-content: start; }
.pchip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px -24px rgba(0, 0, 0, 0.4); font: 500 16px/1.2 var(--f-label); }
.pchip svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); }
@media (max-width: 899px) {
.pcheck__grid { grid-template-columns: 1fr; }
.pcheck__aside { position: relative; top: auto; }
}
.pdeliv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 88px; align-items: center; }
.pdeliv__copy .lead { margin-top: 26px; }
.panel {
position: relative;
padding: 10px;
border-radius: 20px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 40px 80px -48px rgba(10, 30, 32, 0.35), 0 6px 18px -10px rgba(10, 30, 32, 0.12);
font: 500 14.5px/1.3 var(--f-label);
}
.panel__bar { display: flex; justify-content: space-between; padding: 10px 12px 14px; border-bottom: 1px solid var(--line); font: 400 12px/1 var(--f-mono); color: var(--muted); }
.panel__group { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px; color: var(--ink); }
.panel__group svg { width: 15px; height: 15px; color: var(--accent-ink); }
.panel__list { position: relative; margin: 0; padding: 0 0 6px; list-style: none; }
.layer { position: relative; z-index: 1; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 38px; border-radius: 9px; color: var(--body); transition: color 300ms var(--ease-out); }
.layer__icon svg { width: 15px; height: 15px; color: #9aa1a3; transition: color 300ms var(--ease-out); }
.layer__meta { font: 400 11.5px/1 var(--f-mono); color: var(--muted); }
.layer.is-done { color: var(--ink); }
.layer.is-done .layer__icon svg, .layer.is-current .layer__icon svg { color: var(--accent); }
.layer.is-current { color: var(--ink); }
.panel__sel { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 9px; background: rgb(var(--accent-rgb) / 0.1); box-shadow: inset 0 0 0 1.5px rgb(var(--accent-rgb) / 0.55); opacity: 0; pointer-events: none; }
@media (max-width: 899px) { .pdeliv__grid { grid-template-columns: 1fr; } }
.psteps { padding-top: clamp(96px, 12vw, 176px); }
.psteps .process__aside .lead { margin-top: 24px; }
.step__list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0 0 0 18px; color: var(--on-night-2); }
.step__note { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--accent-night); color: var(--on-night); font-size: 16px; }
.step__text + .step__text { margin-top: 12px; }
.pfit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fitcard { display: grid; align-content: start; gap: 18px; padding: clamp(28px, 3vw, 44px); border-radius: 28px; }
.fitcard--yes { background: #e9f5f5; }
.fitcard--no { background: var(--paper); }
.fitcard__label { display: flex; align-items: center; gap: 12px; font: 500 15px/1.35 var(--f-label); }
.fitcard__label svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; }
.fitcard--yes .fitcard__label svg { background: var(--accent); color: #fff; }
.fitcard--no .fitcard__label svg { background: #fff; color: var(--muted); border: 1px solid var(--line); }
.fitcard ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fitcard li, .fitcard p:not(.fitcard__label) { font: 600 clamp(19px, 1.5vw, 23px)/1.3 var(--f-display); letter-spacing: -0.015em; }
.fitcard li { padding-top: 12px; border-top: 1px solid rgba(26, 26, 26, 0.08); }
.fitcard .link-arrow { justify-self: start; margin-top: 0; }
@media (max-width: 799px) { .pfit__grid { grid-template-columns: 1fr; } }
.svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-grid--3 .svc__media { aspect-ratio: 5 / 4; }
@media (max-width: 1099px) { .svc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-head { margin: clamp(72px, 9vw, 120px) 0 28px; font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--f-display); letter-spacing: -0.02em; }
.exgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ex { display: flex; flex-direction: column; padding: 8px; border-radius: 24px; background: var(--paper); }
.ex__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 17px; background: #e8eded; }
.ex__media img { width: 100%; height: 100%; object-fit: cover; }
.ex__body { display: grid; gap: 10px; padding: 18px 12px 14px; }
.ex__logo img { width: auto; height: 28px; border-radius: 7px; }
.ex__tag { font: 500 11.5px/1.3 var(--f-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-ink); }
.ex__title { font: 600 clamp(19px, 1.5vw, 22px)/1.2 var(--f-display); letter-spacing: -0.015em; }
@media (max-width: 999px) { .exgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .exgrid { grid-template-columns: 1fr; } }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; margin: 0; padding: 0; list-style: none; }
.post__card { display: flex; flex-direction: column; height: 100%; }
.post__media { display: block; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 20px; background: var(--paper); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.post__card:hover .post__media img { scale: 1.05; }
.post__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 4px 0; }
.post__date { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.post__title { font: 600 clamp(20px, 1.6vw, 24px)/1.2 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
.post__text { font-size: 15.5px; line-height: 1.5; color: var(--body); }
.post__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font: 500 14px/1 var(--f-label); }
.post__more svg { width: 16px; height: 16px; transition: translate var(--t-ui) var(--ease-out); }
.post__card:hover .post__more svg, .proj__card--link:hover .post__more svg, .app__card:hover .post__more svg { translate: 4px 0; }
.post-feature { margin-bottom: clamp(56px, 7vw, 96px); }
.post--feature .post__card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; }
.post--feature .post__title { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
.post--feature .post__body { padding: 0; }
.post--feature .post__text { font-size: clamp(16px, 1.2vw, 19px); }
@media (max-width: 999px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post--feature .post__card { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .posts { grid-template-columns: 1fr; } }
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row__link {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr) clamp(180px, 22vw, 300px) 48px;
align-items: center;
gap: 24px;
padding: clamp(24px, 3vw, 40px) 0;
}
.row__num { align-self: start; padding-top: 10px; font: 400 12.5px/1 var(--f-mono); color: var(--muted); }
.row__main { display: grid; gap: 12px; transition: translate var(--t-ui) var(--ease-out); }
.row__kicker { font: 500 12px/1.3 var(--f-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-ink); }
.row__title { font: 600 clamp(26px, 2.8vw, 44px)/1.06 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
.row__text { max-width: 40em; font-size: 16.5px; line-height: 1.55; color: var(--body); }
.row__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 6px; }
.row__meta span { display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--body); }
.row__meta b { font: 400 11.5px/1.3 var(--f-mono); color: var(--muted); }
.row__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--paper); }
.row__media video, .row__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.row__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui), color var(--t-ui); }
.row__go svg { width: 18px; height: 18px; transition: translate var(--t-ui) var(--ease-out), rotate var(--t-ui) var(--ease-out); rotate: -45deg; }
.row__link:hover .row__main { translate: 8px 0; }
.row__link:hover .row__media video, .row__link:hover .row__media img { scale: 1.06; }
.row__link:hover .row__go { background: var(--ink); border-color: var(--ink); color: #fff; }
.row__link:hover .row__go svg { rotate: 0deg; }
@media (max-width: 899px) {
.row__link { grid-template-columns: 1fr; gap: 18px; }
.row__num, .row__go { display: none; }
.row__media { order: -1; }
.row__meta { grid-template-columns: 1fr; }
}
.prose { padding-top: clamp(40px, 5vw, 72px); }
.prose__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr); }
.prose__inner > * { grid-column: 2; }
.prose__inner > .prose__fig, .prose__inner > .prose__pair { grid-column: 1 / -1; }
.prose__inner p { margin-top: 20px; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.7; color: var(--body); }
.prose__inner .ticks { margin-top: 20px; }
.prose__inner .ticks li { font-size: clamp(17px, 1.2vw, 19px); }
.prose__h2 { margin-top: clamp(72px, 9vw, 128px); font: 600 clamp(30px, 3.2vw, 48px)/1.06 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
.prose__h3 { margin-top: 48px; font: 600 clamp(21px, 1.8vw, 27px)/1.2 var(--f-display); letter-spacing: -0.02em; }
.prose__h2 + p, .prose__h3 + p { margin-top: 18px; }
.prose__fig { margin: clamp(48px, 6vw, 88px) 0 0; }
.prose__fig img, .prose__fig video { width: 100%; height: auto; border-radius: clamp(16px, 2vw, 28px); background: var(--paper); }
.prose__fig figcaption { margin-top: 12px; font: 400 12.5px/1.4 var(--f-mono); color: var(--muted); text-align: center; }
.prose__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prose__pair .prose__fig { margin-top: clamp(48px, 6vw, 88px); }
@media (max-width: 899px) { .prose__inner { grid-template-columns: minmax(0, 1fr); } .prose__inner > * { grid-column: 1; } .prose__pair { grid-template-columns: 1fr; } }
.nextcase { padding-top: clamp(40px, 5vw, 72px); }
.nextcase__link {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
grid-template-rows: auto 1fr auto;
gap: 18px 48px;
min-height: 380px;
padding: clamp(24px, 3.4vw, 48px);
overflow: hidden;
border-radius: 32px;
background: var(--case-bg);
color: var(--case-fg);
}
.nextcase__label { font: 400 12.5px/1 var(--f-mono); opacity: 0.7; }
.nextcase__title { grid-row: 2; align-self: center; font: 600 clamp(30px, 3.6vw, 56px)/1.04 var(--f-display); letter-spacing: -0.035em; text-wrap: balance; }
.nextcase__client { grid-row: 3; display: inline-flex; align-items: center; gap: 12px; font: 500 15px/1.2 var(--f-label); }
.nextcase__client img { width: 36px; height: 36px; border-radius: 10px; background: #fff; }
.nextcase__media { grid-column: 2; grid-row: 1 / -1; overflow: hidden; margin: calc(-1 * clamp(10px, 2.4vw, 32px)); border-radius: 22px; }
.nextcase__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease-out); }
.nextcase__link:hover .nextcase__media img { scale: 1.05; }
@media (max-width: 799px) { .nextcase__link { grid-template-columns: 1fr; } .nextcase__media { grid-column: 1; grid-row: auto; margin: 0; aspect-ratio: 4 / 3; } }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 2.6vw, 38px); border-radius: 28px; background: var(--paper); }
.plan--featured { background: #fff; box-shadow: 0 40px 80px -50px rgba(10, 40, 44, 0.45); }
.plan__flag { position: absolute; inset: 0; pointer-events: none; }
.plan__flag .frame__box { inset: -7px; border-radius: 30px; }
.plan__flagtag { position: absolute; left: 50%; top: -7px; translate: -50% -50%; padding: 4px 10px; border-radius: 5px; background: var(--tag-bg); color: var(--tag-fg); font: 400 12px/1.3 var(--f-mono); white-space: nowrap; }
.plan__name { font: 600 26px/1.1 var(--f-display); letter-spacing: -0.02em; }
.plan__for { min-height: 2.9em; font-size: 15px; line-height: 1.45; color: var(--muted); }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 2px; }
.plan__amount { font: 500 clamp(44px, 4.4vw, 64px)/1 var(--f-body); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.plan__per { font: 400 13px/1 var(--f-mono); color: var(--muted); }
.plan__text { font-size: 16px; color: var(--body); }
.plan__list { display: grid; gap: 10px; margin: 6px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line); }
.plan__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--body); }
.plan__list svg { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.plan__cta { margin-top: auto; padding-top: 18px; }
.plan__cta .btn { width: 100%; justify-content: space-between; }
.plans:has(> .plan:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
@media (max-width: 999px) { .plans, .plans:has(> .plan:nth-child(2):last-child) { grid-template-columns: 1fr; max-width: 560px; } }
.poffer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px 88px; align-items: center; }
.poffer__sub { margin: 18px 0 18px; font: 600 clamp(22px, 2vw, 30px)/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--accent-ink); }
.offer { display: grid; gap: 14px; padding: clamp(28px, 3vw, 44px); border-radius: 28px; background: var(--night); color: var(--on-night); }
.offer__kicker { font: 500 12px/1.3 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-night); }
.offer__name { font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--f-display); letter-spacing: -0.02em; color: #fff; }
.offer__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.offer__facts li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-night); font: 400 12px/1.3 var(--f-mono); color: var(--on-night-2); }
.offer .plan__list { border-color: var(--line-night); }
.offer .plan__list li { color: var(--on-night-2); }
.offer .plan__list svg { color: var(--accent-night); }
.offer .btn { justify-self: start; margin-top: 10px; }
@media (max-width: 899px) { .poffer__grid { grid-template-columns: 1fr; } }
.pcontact { padding-top: 0; }
.pcontact__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px 88px; align-items: start; }
.cform { padding: clamp(24px, 3vw, 44px); border-radius: 28px; background: var(--paper); }
.cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.field { display: grid; gap: 9px; }
.field--wide { grid-column: 1 / -1; }
.field label { font: 500 14px/1.3 var(--f-label); }
.field label span { color: var(--muted); font-weight: 400; }
.field__control { position: relative; }
.field input, .field select, .field textarea {
width: 100%;
min-height: 54px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid var(--line);
background: #fff;
color: var(--ink);
font: 400 16px/1.4 var(--f-body);
appearance: none;
transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { padding-right: 44px; cursor: pointer; }
.field__chev { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.field input::placeholder, .field textarea::placeholder { color: #9aa0a3; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cfd3d3; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.1); }
.field__box { position: absolute; inset: -6px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 200ms ease; }
.field__box i { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--accent); border-radius: 2px; scale: 0; transition: scale 500ms var(--spring); }
.field__box i:nth-child(1) { left: -1px; top: -1px; }
.field__box i:nth-child(2) { right: -1px; top: -1px; }
.field__box i:nth-child(3) { left: -1px; bottom: -1px; }
.field__box i:nth-child(4) { right: -1px; bottom: -1px; }
.field__control:focus-within .field__box { opacity: 1; }
.field__control:focus-within .field__box i { scale: 1; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #d64545; }
.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.cform__status { font-size: 15px; color: var(--body); }
.cform__status.is-error { color: #b42318; }
.pcontact__side { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 40px); }
.pcontact__h { font: 600 clamp(28px, 2.6vw, 40px)/1.08 var(--f-display); letter-spacing: -0.03em; }
.reach { width: 100%; text-align: left; display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 16px; padding: 16px 20px 16px 16px; border-radius: 20px; border: 1px solid var(--line); background: #fff; transition: border-color var(--t-hover), box-shadow var(--t-ui) var(--ease-out), translate var(--t-ui) var(--ease-out); }
.reach:hover { border-color: #d6d6d2; box-shadow: 0 24px 50px -30px rgba(14, 40, 44, 0.4); translate: 0 -3px; }
.reach__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-ink); }
.reach__icon svg { width: 24px; height: 24px; }
.reach strong { display: block; font: 600 19px/1.2 var(--f-display); }
.reach span span { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }
.reach__go { width: 20px; height: 20px; transition: translate var(--t-ui) var(--ease-out); }
.reach:hover a.reach__go, a.reach:hover .reach__go { translate: 3px -3px; }
.reach.is-copied .reach__icon { background: var(--accent); color: #fff; }
.cform__copy { margin-top: 0; }
.cform__copy svg { width: 16px; height: 16px; }
@media (max-width: 899px) { .pcontact__grid { grid-template-columns: 1fr; } .pcontact__side { position: relative; top: auto; } }
@media (max-width: 559px) { .cform__grid { grid-template-columns: 1fr; } }
.projects, .apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.proj__card, .app__card { display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: 24px; background: var(--paper); }
.proj__card--link, .app__card { transition: translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), background-color var(--t-hover); }
.proj__card--link:hover, .app__card:hover { translate: 0 -6px; background: #fff; box-shadow: 0 34px 60px -34px rgba(14, 40, 44, 0.42); }
.proj__media, .app__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 17px; background: #e8eded; }
.proj__media img, .app__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.proj__card--link:hover .proj__media img, .app__card:hover .app__media img { scale: 1.05; }
.proj__body, .app__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 12px 14px; }
.proj__top { display: flex; align-items: center; gap: 10px; }
.proj__logo img { width: auto; height: 26px; max-width: 120px; object-fit: contain; }
.proj__client, .app__name { font: 600 19px/1.2 var(--f-display); letter-spacing: -0.015em; }
.proj__tag { font: 500 11.5px/1.35 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.proj__text, .app__text { font-size: 15.5px; line-height: 1.5; color: var(--body); }
.app__icon img { width: 52px; height: 52px; border-radius: 13px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.3); }
@media (max-width: 999px) { .projects, .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .projects, .apps { grid-template-columns: 1fr; } }
.pstatement { padding-top: clamp(96px, 12vw, 176px); }
.pstatement .promise__sub { color: var(--muted); }
.pmedia .frame__media { border-radius: 28px; }
.frame__media--illu { background: #fff; }
.illu { width: 100%; }
.illu > svg { display: block; width: 100%; height: auto; }
.illu__art { display: contents; }
.phero .frame__media--illu { display: grid; place-items: center; }
.phero .frame__media--illu .illu { height: 100%; }
.variant[hidden] { display: none !important; }
[data-shader-host] { position: relative; }
.shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-shader="none"] .shader, .reduce-motion .shader { display: none; }
.review {
position: fixed;
right: 16px; bottom: 16px;
z-index: 90;
display: grid;
gap: 6px;
padding: 8px;
max-width: calc(100vw - 32px);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--line);
box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.35);
font: 500 12.5px/1 var(--f-label);
}
.review__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.review__label { padding: 0 8px 0 6px; color: var(--muted); font: 400 11.5px/1 var(--f-mono); }
.review__opt { padding: 8px 11px; border-radius: 999px; transition: background-color var(--t-hover) var(--ease-out); }
.review__opt:hover { background: var(--paper); }
.review__opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.phead { padding: calc(var(--nav-h) + clamp(40px, 7vh, 88px)) 0 clamp(32px, 4vw, 56px); }
.phead__inner { max-width: 60rem; margin-inline: auto; }
.phead__title { margin-top: 22px; font-size: clamp(2.2rem, 1rem + 3.4vw, 4.4rem); }
.phead__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.phead__meta .person img { width: 40px; height: 40px; }
.phead__facts { display: flex; gap: 18px; font: 400 12.5px/1.4 var(--f-mono); color: var(--muted); }
.phead__cover { margin-top: clamp(40px, 5vw, 72px); overflow: hidden; border-radius: clamp(18px, 2.4vw, 32px); background: var(--paper); }
.phead__cover img { width: 100%; height: auto; max-height: 72vh; object-fit: cover; }
.article { padding-top: clamp(24px, 3vw, 48px); }
.article__grid { display: grid; grid-template-columns: minmax(0, 46rem); justify-content: center; gap: 40px 72px; }
.article--toc .article__grid { grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); }
.toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.toc__title { margin-bottom: 14px; font: 400 12px/1 var(--f-mono); color: var(--muted); }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1.5px solid transparent; font: 500 14px/1.35 var(--f-label); color: var(--muted); transition: color var(--t-hover), border-color var(--t-hover); }
.toc a:hover, .toc a.is-active { color: var(--ink); border-color: var(--accent); }
.article__body { font-size: clamp(17px, 1.15vw, 19px); line-height: 1.75; color: var(--body); }
.article__body > * + * { margin-top: 1.1em; }
.article__body h2 { margin-top: 2.2em; font: 600 clamp(26px, 2.4vw, 36px)/1.15 var(--f-display); letter-spacing: -0.025em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 24px); }
.article__body h3 { margin-top: 1.8em; font: 600 clamp(20px, 1.6vw, 25px)/1.25 var(--f-display); letter-spacing: -0.015em; color: var(--ink); }
.article__body h4 { margin-top: 1.6em; font: 600 18px/1.3 var(--f-label); color: var(--ink); }
.article__body h2 + *, .article__body h3 + *, .article__body h4 + * { margin-top: 0.7em; }
.article__body a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article__body a:hover { text-decoration-thickness: 2px; }
.article__body strong { color: var(--ink); font-weight: 600; }
.article__body ul, .article__body ol { padding-left: 1.3em; }
.article__body li + li { margin-top: 0.45em; }
.article__body li::marker { color: var(--accent); }
.article__body blockquote { margin-left: 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent); font: 500 clamp(19px, 1.5vw, 23px)/1.5 var(--f-display); color: var(--ink); }
.article__body img { width: 100%; height: auto; margin-block: 0.6em; border-radius: 18px; background: var(--paper); }
.article__body figure { margin-inline: 0; }
.article__body figcaption { margin-top: 8px; font: 400 12.5px/1.4 var(--f-mono); color: var(--muted); text-align: center; }
.article__body hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.article__body code { padding: 2px 6px; border-radius: 6px; background: var(--paper); font: 400 0.88em var(--f-mono); }
.article__body pre { overflow-x: auto; padding: 18px; border-radius: 14px; background: var(--night); color: var(--on-night); }
.article__body pre code { padding: 0; background: none; }
.article__body table { width: 100%; border-collapse: collapse; font-size: 15.5px; display: block; overflow-x: auto; }
.article__body th, .article__body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article__body th { font: 500 13px/1.3 var(--f-label); color: var(--ink); background: var(--paper); }
@media (max-width: 1099px) { .article--toc .article__grid { grid-template-columns: minmax(0, 46rem); } .toc { position: relative; top: auto; } }
.fpage { padding-top: clamp(32px, 4vw, 64px); }
.fpage__grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.fpage__nav { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 18px; justify-items: start; }
.fpage__nav ol { display: grid; gap: 2px; margin: 0; padding: 0; border-left: 1px solid var(--line); justify-self: stretch; }
.fpage__nav ol a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 1.5px solid transparent; font: 500 15px/1.35 var(--f-label); color: var(--muted); transition: color var(--t-hover), border-color var(--t-hover); }
.fpage__nav ol a:hover, .fpage__nav ol a.is-active { color: var(--ink); border-color: var(--accent); }
.fgroup + .fgroup { margin-top: clamp(56px, 7vw, 96px); }
.fgroup { scroll-margin-top: calc(var(--nav-h) + 24px); }
.fgroup__title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; font: 600 clamp(24px, 2.2vw, 34px)/1.1 var(--f-display); letter-spacing: -0.02em; }
.fgroup__title span { font: 400 12px/1 var(--f-mono); color: var(--muted); }
@media (max-width: 899px) { .fpage__grid { grid-template-columns: 1fr; } .fpage__nav { position: relative; top: auto; } .fpage__nav ol { display: flex; flex-wrap: wrap; gap: 6px; border: 0; } .fpage__nav ol a { padding: 8px 14px; margin: 0; border: 1px solid var(--line); border-radius: 999px; } }
.stages-wrap { position: relative; isolation: isolate; }
.stages { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.stages__line { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background: var(--line); z-index: -1; }
.stages__line span { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(calc((var(--cur) + 0.5) / 3)); }
.stage__card { position: relative; display: grid; gap: 10px; align-content: start; min-height: 220px; height: 100%; padding: clamp(22px, 2.4vw, 32px); border-radius: 24px; background: #fff; border: 1px solid var(--line); }
a.stage__card { transition: translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), border-color var(--t-hover); }
a.stage__card:hover { translate: 0 -6px; border-color: #d6d6d2; box-shadow: 0 34px 60px -34px rgba(14, 40, 44, 0.42); }
.stage__num { font: 400 12.5px/1 var(--f-mono); color: var(--muted); }
.stage__name { margin-top: auto; padding-top: 28px; font: 600 clamp(22px, 2vw, 30px)/1.1 var(--f-display); letter-spacing: -0.02em; }
.stage__for { font-size: 15px; color: var(--body); }
.stage--done .stage__card { background: var(--paper); border-color: transparent; }
.stage--done .stage__name { color: var(--muted); }
.stage--here .stage__card { background: #e9f5f5; border-color: transparent; }
.stage--here .frame__box { inset: -7px; border-radius: 26px; }
.stage__tag { position: absolute; left: 50%; top: -7px; translate: -50% -50%; padding: 4px 10px; border-radius: 5px; background: var(--tag-bg); color: var(--tag-fg); font: 400 12px/1.3 var(--f-mono); white-space: nowrap; }
.stage--next .stage__card { background: var(--night); color: var(--on-night); border-color: var(--night); }
.stage--next .stage__for, .stage--next .stage__num { color: var(--on-night-2); }
.stage__text { font-size: 15px; line-height: 1.5; color: var(--on-night-2); }
.stage__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 14px/1 var(--f-label); color: var(--accent-night); }
.stage__go svg { width: 16px; height: 16px; transition: translate var(--t-ui) var(--ease-out); }
.stage__card:hover .stage__go svg { translate: 4px 0; }
.nsols { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 16px 40px; align-items: start; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.nsols__label { font: 400 12.5px/1.5 var(--f-mono); color: var(--muted); }
.nsols__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.nsol { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 4px 12px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--paper); transition: background-color var(--t-hover); }
.nsol:hover { background: #ecefee; }
.nsol__kicker { grid-column: 1; font: 500 11.5px/1.3 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.nsol__title { grid-column: 1; font: 600 18px/1.25 var(--f-display); letter-spacing: -0.01em; }
.nsol__text { grid-column: 1; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.nsol svg { grid-column: 2; grid-row: 1 / span 3; width: 18px; height: 18px; transition: translate var(--t-ui) var(--ease-out); }
.nsol:hover svg { translate: 4px 0; }
@media (max-width: 899px) { .stages { grid-template-columns: 1fr; gap: 22px; } .stages__line { display: none; } .stage__card { min-height: 0; } .nsols { grid-template-columns: 1fr; } .nsols__list { grid-template-columns: 1fr; } }
.ncards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ncard__link { display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: 28px; background: var(--paper); transition: translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), background-color var(--t-hover); }
.ncard__link:hover { translate: 0 -6px; background: #fff; box-shadow: 0 34px 60px -34px rgba(14, 40, 44, 0.42); }
.ncard__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 21px; background: #fff; }
.ncard__media img, .ncard__media video { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.ncard__link:hover .ncard__media img, .ncard__link:hover .ncard__media video { scale: 1.05; }
.ncard__body { position: relative; display: grid; gap: 10px; padding: 22px 70px 22px 18px; }
.ncard__kicker { font: 500 12px/1.3 var(--f-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-ink); }
.ncard__title { font: 600 clamp(24px, 2.4vw, 36px)/1.08 var(--f-display); letter-spacing: -0.025em; }
.ncard__text { font-size: 16px; line-height: 1.55; color: var(--body); }
.ncard__go { position: absolute; right: 18px; top: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); transition: background-color var(--t-ui), color var(--t-ui), border-color var(--t-ui); }
.ncard__go svg { width: 18px; height: 18px; rotate: -45deg; transition: rotate var(--t-ui) var(--ease-out); }
.ncard__link:hover .ncard__go { background: var(--ink); border-color: var(--ink); color: #fff; }
.ncard__link:hover .ncard__go svg { rotate: 0deg; }
@media (max-width: 799px) { .ncards { grid-template-columns: 1fr; } }
.faq__aside { display: grid; justify-items: start; }
.faq__all { margin-top: 18px; }
.pmap__sec { padding-block: clamp(96px, 11vw, 168px); }
.mapbox { position: relative; }
.mapbox__scroll { overflow-x: auto; scrollbar-width: none; margin: -24px; padding: 24px; }
.mapbox__scroll::-webkit-scrollbar { display: none; }
.mapbox__map { position: relative; aspect-ratio: var(--ar); min-width: 680px; }
.mapbox__dots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapbox__dots circle { fill: rgb(var(--accent-night-rgb) / 0.17); }
.mapbox__dots circle.hot { fill: rgb(var(--accent-night-rgb) / 0.5); }
.mapbox__leaders line { stroke: rgb(var(--accent-night-rgb) / 0.55); stroke-width: 1; stroke-dasharray: 2 3; }
.mapbox__leaders .spot { fill: var(--accent-night); }
.mpin {
position: absolute;
width: 36px;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 10px 22px -8px rgba(0, 0, 0, 0.6);
transition: scale 500ms var(--spring), box-shadow var(--t-ui) var(--ease-out);
}
.mpin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mpin:hover, .mpin:focus-visible { scale: 1.15; z-index: 2; }
.mpin[aria-pressed="true"] { scale: 1.22; z-index: 3; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgb(var(--accent-night-rgb) / 0.55), 0 14px 28px -10px rgba(0, 0, 0, 0.7); }
.mpin[aria-pressed="true"]::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--accent-night); animation: pinpulse 2.2s var(--ease-out) infinite; }
@keyframes pinpulse { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 1.8; } }
.reduce-motion .mpin[aria-pressed="true"]::after { animation: none; }
.mapbox__cards { position: relative; margin-top: clamp(20px, 2.4vw, 32px); }
.mcard { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 22px; background: var(--night-2); border: 1px solid var(--line-night); }
.mcard[hidden] { display: none; }
.mcard__media { display: block; height: 100%; min-height: 200px; overflow: hidden; background: #0b1213; }
.mcard__media img { display: block; }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; }
.mcard__body { display: grid; gap: 10px; align-content: center; padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 36px); }
.mcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mcard__top strong { font: 600 20px/1.2 var(--f-display); color: #fff; }
.mcard__top span { font: 400 12px/1 var(--f-mono); color: var(--on-night-2); }
.mcard__tag { font: 500 11.5px/1.35 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-night); }
.mcard__text { max-width: 46em; font-size: 15.5px; line-height: 1.55; color: var(--on-night-2); }
.mcard__link { justify-self: start; margin-top: 4px; }
.mcard.is-entering { animation: mcard-in 520ms var(--ease-out) both; }
@keyframes mcard-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 759px) { .mcard { grid-template-columns: 1fr; } .mcard__media { height: auto; aspect-ratio: 16 / 10; } }
.person__initials { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); font: 500 14px/1 var(--f-label); }
.frame--stack .frame__media { background: transparent; overflow: visible; }
.stack { position: relative; }
.stack__card {
--c: calc(var(--slot, var(--i)) - (var(--n) - 1) / 2);
position: absolute;
left: 50%; top: 50%;
width: 78%;
aspect-ratio: 4 / 3;
margin: 0;
overflow: hidden;
border-radius: 18px;
background: #e8eded;
box-shadow: 0 34px 60px -32px rgba(10, 30, 32, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05);
transform:
translate(-50%, -50%)
translate(calc(var(--c) * 9% + var(--px, 0) * (var(--slot, var(--i)) + 1) * 10px), calc(var(--c) * -8% + var(--py, 0) * (var(--slot, var(--i)) + 1) * 10px))
rotate(calc(var(--c) * 3.5deg))
scale(calc(1 - var(--slot, var(--i)) * 0.05));
z-index: calc(10 - var(--slot, var(--i)));
filter: brightness(calc(1 - var(--slot, var(--i)) * 0.05));
transition: transform 900ms var(--ease-out), opacity 450ms ease, filter 600ms ease;
}
.stack__card img { width: 100%; height: 100%; object-fit: cover; }
.stack__card.is-leaving { opacity: 0; transform: translate(-50%, -50%) translate(-16%, 20%) rotate(-7deg) scale(0.94); }
.frame--stack .frame__box { inset: 2% 1%; }
.frame--stack .frame__name { bottom: calc(98% + 12px); }
.frame--stack .frame__dim { top: calc(98% + 14px); }
.journey { position: relative; }
.journey__list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 40px clamp(20px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.jnode { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 18px 18px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 34px -28px rgba(10, 30, 32, 0.4); transition: border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.jnode__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #cfd3d3; background: #fff; font: 400 11.5px/1 var(--f-mono); color: var(--muted); transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out), color 400ms, scale 600ms var(--spring); }
.jnode__text { padding-top: 5px; font: 600 clamp(16px, 1.25vw, 19px)/1.3 var(--f-display); letter-spacing: -0.01em; }
.jnode.is-on { border-color: rgb(var(--accent-rgb) / 0.35); box-shadow: 0 22px 40px -28px rgb(var(--accent-rgb) / 0.55); }
.jnode.is-on .jnode__num { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; scale: 1.08; }
.journey__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.journey__track { fill: none; stroke: #d9dcdb; stroke-width: 1.5; stroke-dasharray: 3 6; }
.journey__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.reduce-motion .jnode .jnode__num { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.exgrid--bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.exgrid--bento .ex:first-child { grid-column: span 2; grid-row: span 2; }
.exgrid--bento .ex:first-child .ex__media { flex: 1; aspect-ratio: auto; min-height: 320px; }
.exgrid--bento .ex:first-child .ex__title { font-size: clamp(24px, 2.2vw, 32px); }
@media (max-width: 999px) { .exgrid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .exgrid--bento .ex:first-child { grid-row: auto; } .exgrid--bento .ex:first-child .ex__media { aspect-ratio: 16 / 10; min-height: 0; } }
@media (max-width: 639px) { .exgrid--bento { grid-template-columns: 1fr; } .exgrid--bento .ex:first-child { grid-column: auto; } }
.frame__media > .variant { width: 100%; height: 100%; }
@media (max-width: 899px) { .stack__card { width: 70%; } }
main { --app-a: var(--accent); --app-b: var(--accent-tint); --app-soft: #eef6f6; --app-ink: var(--ink); }
.ahero { position: relative; padding: calc(var(--nav-h) + clamp(32px, 6vh, 80px)) 0 clamp(72px, 9vw, 128px); overflow: clip; }
.ahero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 88px); }
.ahero__copy { position: relative; z-index: 2; container-type: inline-size; }
.ahero__app { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; padding: 8px 18px 8px 8px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.35); }
.ahero__app img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4); }
.ahero__app strong { display: block; font: 600 18px/1.2 var(--f-display); }
.ahero__app span span { display: block; font-size: 13.5px; color: var(--muted); }
.ahero__title { margin-top: 26px; }
@supports (font-size: 1cqi) { .ahero__title { font-size: clamp(2.3rem, 8.6cqi, 4.4rem); } }
.ahero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.ahero__facts li { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 400 12.5px/1.2 var(--f-mono); color: var(--body); }
.ahero__visual { position: relative; display: grid; place-items: center; min-height: 520px; }
.ahero__halo { position: absolute; inset: 6% 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--app-a) 26%, transparent), transparent 72%); filter: blur(10px); pointer-events: none; }
.ahero__visual > .illu { position: relative; z-index: 1; }
@media (max-width: 899px) { .ahero__inner { grid-template-columns: 1fr; } .ahero__visual { min-height: 0; } }
.afeat__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 40px clamp(48px, 7vw, 112px); }
.afeat__grid--rev .afeat__copy { order: 2; }
.afeat__copy .lead { margin-top: 24px; }
.afeat__copy .ticks { margin-top: 24px; }
.afeat__visual { position: relative; overflow: hidden; border-radius: 32px; background: var(--app-soft); padding: clamp(24px, 4vw, 56px); display: grid; place-items: center; min-height: 420px; }
@media (max-width: 899px) { .afeat__grid { grid-template-columns: 1fr; } .afeat__grid--rev .afeat__copy { order: 0; } .afeat__visual { min-height: 0; } }
.ashow__band { position: relative; overflow: hidden; border-radius: 32px; background: var(--app-soft); padding: clamp(24px, 4vw, 56px) 0; }
.device { position: relative; width: min(100%, var(--device-w, 300px)); aspect-ratio: 9 / 19.5; padding: 2.6%; border-radius: 15% / 7%; background: linear-gradient(145deg, #2a2f31, #0b0d0e 40%, #1b1f21); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 50px 80px -40px rgba(10, 25, 28, 0.55), 0 20px 30px -24px rgba(0, 0, 0, 0.5); }
.device__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12.5% / 5.8%; background: #fff; container-type: inline-size; }
.device__island { position: absolute; top: 3.2%; left: 50%; z-index: 5; width: 31%; height: 3.4%; translate: -50% 0; border-radius: 999px; background: #000; }
.device__status { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; height: 11cqi; padding: 3.4cqi 8cqi 0 9cqi; font: 600 4.3cqi/1 var(--f-body); color: currentColor; }
.device__status::after { content: ""; width: 15cqi; height: 3.6cqi; background: linear-gradient(90deg, currentColor 0 18%, transparent 18% 26%, currentColor 26% 44%, transparent 44% 52%, currentColor 52% 100%); border-radius: 1cqi; opacity: 0.85; }
.cform__copy[hidden] { display: none; }
.cta__qr { display: inline-flex; align-items: center; gap: 16px; margin: 36px auto 0; padding: 12px 20px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); text-align: left; }
.cta__qr img { width: 88px; height: 88px; border-radius: 10px; background: #fff; padding: 4px; }
.cta__qr figcaption { max-width: 13em; font: 500 15px/1.35 var(--f-body); color: var(--on-night); }
@media (max-width: 899px), (hover: none) { .cta__qr { display: none; } }
.faq__ask { margin-top: 28px; font-size: 16px; color: var(--body); }
.faq__aside .faq__ask + .btn { margin-top: 14px; }
.pcard__link { margin-top: 22px; align-self: start; }
.row__media .illu { width: 100%; height: 100%; display: grid; place-items: center; background: #fff; }
.row__media .illu > svg { width: auto; height: 100%; max-width: 100%; }
.chero__h1 { margin: 0; font-weight: inherit; }
.chero__eyebrow { display: block; font: 500 13.5px/1.4 var(--f-label); letter-spacing: 0.01em; opacity: 0.75; }
.chero__h1 .chero__title { display: block; margin-top: 14px; }
.chero__head { container-type: inline-size; }
.chero__tag { display: inline-flex; align-self: flex-start; padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); font: 400 12px/1.2 var(--f-mono); }
.chero__meta .case__client img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: #fff; }
@keyframes csel-in { from { opacity: 0; scale: 1.14; } to { opacity: 1; scale: 1; } }
@keyframes csel-tag { from { opacity: 0; } to { opacity: 1; } }
.js:not(.reduce-motion) .chero .sel__box { animation: csel-in 0.6s var(--ease-out) 1s both; }
.js:not(.reduce-motion) .chero .sel__box:not(.is-labeled)::after { opacity: 1; translate: calc(-50% + var(--lx, 0px)) 0; animation: csel-tag 0.4s ease 1.35s both; }
.cframe { position: relative; width: min(100%, 980px); margin: 0 auto; }
.cframe__name { position: absolute; left: 0; bottom: calc(100% + 12px); font: 400 12.5px/1 var(--f-mono); color: var(--case-fg); opacity: 0.8; white-space: nowrap; }
.cframe__name b { font-weight: 400; }
.cframe__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--case-media); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.5); }
.cframe__media img, .cedit__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chero--card .chero__panel { min-height: 0; }
.chero--card .chero__info { gap: 36px; }
.chero--card .chero__title { font-size: clamp(2.1rem, 10cqi, 3.8rem); }
.chero--card .chero__media { align-self: center; aspect-ratio: 4 / 3; }
.chero--card .chero__media img { object-fit: contain; }
.chero--card .cstats__item { padding: 22px 22px 24px; border-top: 0; border-radius: 20px; background: color-mix(in srgb, var(--case-media) 42%, #fff); }
.cshow__head { display: grid; justify-items: start; gap: 26px; }
.cshow__head .chero__h1 { max-width: 1120px; }
.cshow__head .chero__tag, .cedit__head .chero__tag { margin-top: 30px; }
.chero--showcase .chero__title, .chero--editorial .chero__title { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.6rem); line-height: 1.02; }
.chero--showcase .chero__eyebrow { color: var(--accent-ink); opacity: 1; }
.cshow__stage { display: grid; place-items: center; margin-top: clamp(40px, 5vw, 72px); padding: clamp(48px, 6vw, 96px) clamp(14px, 6vw, 96px) clamp(28px, 6vw, 96px); border-radius: 32px; background: var(--case-bg); }
.chero--editorial { --lap: clamp(64px, 13vw, 220px); padding-bottom: clamp(40px, 6vw, 80px); }
.cedit__band { display: flow-root; margin-top: 22px; padding-top: clamp(56px, 8vw, 120px); background: var(--case-bg); color: var(--case-fg); }
.cedit__head { display: grid; justify-items: center; gap: 24px; text-align: center; }
.cedit__head .chero__meta { justify-content: center; }
.cedit__head .chero__h1 { max-width: 1040px; }
.cedit__head .chero__tag { align-self: center; }
.cedit__stage { margin-top: clamp(48px, 6vw, 88px); margin-bottom: calc(-1 * var(--lap)); }
.cedit__media { overflow: hidden; width: min(100%, 1040px); aspect-ratio: 4 / 3; margin-inline: auto; border-radius: 24px; background: var(--case-media); box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.55); }
.cedit__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: calc(var(--lap) + clamp(48px, 6vw, 88px)) 0 0; border-top: 1.5px solid var(--ink); }
.cedit__facts div { padding-top: 16px; }
.cedit__facts dt { font: 400 12px/1.3 var(--f-mono); color: var(--muted); }
.cedit__facts dd { margin: 6px 0 0; font: 500 16px/1.4 var(--f-label); }
.cedit__intro { max-width: 46rem; margin: clamp(56px, 7vw, 104px) auto 0; }
.cedit__intro .lead { max-width: none; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); color: var(--ink); }
.cedit__intro .lead + .lead { margin-top: 20px; color: var(--body); font-size: clamp(1.05rem, 0.97rem + 0.3vw, 1.2rem); }
.cstats { margin-top: clamp(40px, 5vw, 72px); }
.cstats__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; margin: 0; }
.cstats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.cstats__item dd { margin: 0; font: 600 clamp(34px, 3.6vw, 56px)/1 var(--f-display); letter-spacing: -0.04em; color: var(--ink); }
.cstats__item dt { max-width: 24ch; font: 400 14px/1.45 var(--f-label); color: var(--body); }
.cstats__note { margin-top: 16px; font: 400 12px/1.5 var(--f-mono); color: var(--muted); }
.cfilm { padding-block: clamp(32px, 5vw, 72px) 0; }
.cfilm__panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(36px, 5vw, 88px); padding: clamp(28px, 5vw, 80px); border-radius: 32px; background: var(--film-bg); color: #fff; }
.cfilm__title { color: #fff; font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem); }
.cfilm__text { max-width: 30em; margin-top: 22px; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.cfilm__frame { position: relative; margin: 0; }
.cfilm__frame .cframe__name { color: var(--accent-night); opacity: 1; }
.cfilm__frame .frame__box, .cfilm__frame .frame__box i { border-color: var(--accent-night); }
.cfilm__frame .frame__box i { background: var(--film-bg); }
.cfilm__media { overflow: hidden; aspect-ratio: 1; border-radius: 16px; background: var(--film-bg); }
.cfilm__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cfilm__cap { margin-top: 22px; font: 400 12px/1.4 var(--f-mono); color: rgba(255, 255, 255, 0.62); text-align: center; }
.prose__no { margin-top: clamp(72px, 9vw, 128px); font: 400 12.5px/1 var(--f-mono); color: var(--accent-ink); }
.prose__no + .prose__h2 { margin-top: 16px; }
.prose__cap { grid-column: 1 / -1; margin-top: 12px; font: 400 12.5px/1.4 var(--f-mono); color: var(--muted); text-align: center; }
body:has(.variant[data-variant="Editorial"]:not([hidden])) .prose--case .prose__no { padding-top: 20px; border-top: 1.5px solid var(--ink); }
body:has(.variant[data-variant="Editorial"]:not([hidden])) .prose--case .prose__h2 { font-size: clamp(34px, 4.2vw, 64px); }
.case__media img, .nextcase__media img { object-position: 0% 50%; }
@media (max-width: 899px) {
.chero--card .chero__media { margin: 0 10px 10px; }
.chero--card .chero__info { gap: 28px; }
.cshow__stage { border-radius: 24px; }
.cframe__media { border-radius: 12px; }
.cedit__media { border-radius: 16px; }
.cedit__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cedit__facts div { padding-bottom: 16px; }
.cfilm__panel { grid-template-columns: 1fr; border-radius: 26px; }
.cfilm__frame { order: -1; margin-top: 22px; }
}
@media (max-width: 899px) {
.chero--card .chero__tag { margin-top: 20px; }
.chero__intro .chero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform.is-sent [data-form-status] { color: var(--accent-ink); font-weight: 500; }
@media (max-width: 599px) { .chero--showcase .chero__title, .chero--editorial .chero__title { font-size: clamp(2rem, 9.6vw, 2.5rem); } }
.cb { padding-block: clamp(8px, 2vw, 24px) clamp(80px, 9vw, 120px); }
.cb .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-mono { font-family: "Fragment Mono", monospace; font-size: 12px; color: var(--muted); }
.cb-mono--accent { color: #14707a; }
.cb-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 1120px; }
.cb-form { margin-top: 20px; max-width: 1120px; }
.cb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cb-s { max-width: 1120px; margin: 0; font-family: "Raleway", sans-serif; font-weight: 500; font-size: clamp(26px, 2.65vw, 38px); line-height: 1.85; letter-spacing: -0.01em; color: var(--ink); }
.cb-blank { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }
.cb-blank input, .cb-blank textarea, .cb-combo { font: inherit; color: #14707a; font-style: italic; font-weight: 600; border: 0; border-bottom: 2px solid #cfd3d3; border-radius: 0; background: transparent; padding: 0 2px; outline: none; max-width: 100%; transition: border-color .2s ease; }
.cb-blank input { width: 7.2em; field-sizing: content; min-width: 3ch; }
.cb-blank input[type="email"] { width: 9.6em; }
.cb-blank input::placeholder, .cb-blank textarea::placeholder { color: #9aa3a6; font-weight: 500; }
.cb-blank input:focus, .cb-blank textarea:focus, .cb-combo:focus-visible, .cb-blank input:not(:placeholder-shown), .cb-blank textarea:not(:placeholder-shown) { border-bottom-color: #1d8a94; }
.cb-blank--msg { display: block; margin-top: 10px; }
.cb-blank--msg textarea { display: block; width: 100%; resize: none; field-sizing: content; min-height: 1.85em; line-height: 1.85; }
.cb-combo { display: inline-flex; align-items: baseline; gap: .22em; font-weight: 500; font-style: italic; color: #9aa3a6; cursor: pointer; line-height: inherit; }
.cb-combo.is-set { color: #14707a; font-weight: 600; border-bottom-color: #1d8a94; }
.cb-caret { width: .42em; height: .42em; flex: none; fill: none; stroke: #14707a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cb-menu { position: absolute; left: -8px; top: calc(100% + 22px); z-index: 20; display: flex; flex-direction: column; min-width: 240px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 24px 48px -20px rgba(10, 40, 44, .4); font: 400 16px/1.3 "DM Sans", sans-serif; letter-spacing: 0; }
.cb-menu[hidden] { display: none; }
.cb-menu--up { top: auto; bottom: calc(100% + 18px); }
.cb-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 9px; color: var(--ink); text-align: left; white-space: nowrap; }
.cb-opt:hover, .cb-opt:focus-visible { background: #e6f4f5; color: #0e4f56; outline: none; }
.cb-tick { width: 16px; font-weight: 600; color: #14707a; }
.cb-opt[aria-pressed="true"] .cb-tick::before { content: "✓"; }
.cb-hint { margin-left: -2px; font-size: 14px; color: var(--muted); }
.cb-sel { position: absolute; inset: -6px -8px; border: 1.5px solid #1d8a94; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.cb-sel i { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #1d8a94; border-radius: 2px; }
.cb-sel i:nth-child(1) { left: -5px; top: -5px; } .cb-sel i:nth-child(2) { right: -5px; top: -5px; } .cb-sel i:nth-child(3) { left: -5px; bottom: -5px; } .cb-sel i:nth-child(4) { right: -5px; bottom: -5px; }
.cb-sel b { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 3px 8px; border-radius: 4px; background: #14707a; color: #fff; font: 400 11px/1.3 "Fragment Mono", monospace; font-style: normal; letter-spacing: 0; white-space: nowrap; z-index: 2; }
.cb-blank:focus-within .cb-sel, .cb-form.is-idle:not(:focus-within) [data-cb-field="name"] .cb-sel, .cb-blank.is-bad .cb-sel, .cb-sel--on { opacity: 1; }
.cb-blank.is-bad .cb-sel, .cb-blank.is-bad .cb-sel i { border-color: #c43c3c; }
.cb-blank.is-bad .cb-sel b { background: #9b2c2c; }
.cb-blank.is-bad input, .cb-blank.is-bad textarea { border-bottom-color: #c43c3c; }
.cb-suggest { position: absolute; left: -8px; top: calc(100% + 22px); z-index: 15; display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #fff5e0; box-shadow: 0 14px 30px -18px rgba(60, 40, 0, .5); font: 400 15px/1.3 "DM Sans", sans-serif; letter-spacing: 0; color: #6b4a00; white-space: nowrap; }
.cb-suggest[hidden] { display: none; }
.cb-suggest b { font-weight: 600; }
.cb-suggest button { min-height: 36px; padding: 0 14px; border-radius: 999px; background: #6b4a00; color: #fff; font-size: 14px; font-weight: 600; }
.cb-countrow { display: flex; justify-content: flex-end; min-height: 18px; margin-top: 18px; }
.cb-countrow .is-over { color: #c43c3c; }
.cb-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 36px; padding: 16px 20px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.cb-alert[hidden] { display: none; }
.cb-alert--error { background: #fdecec; color: #9b2c2c; }
.cb-alert--warn { background: #fff5e0; color: #6b4a00; }
.cb-alert b { font-weight: 600; }
[data-cb-summary] { margin: 0 0 28px; }
[data-cb-summary] button { color: #9b2c2c; text-decoration: underline; text-underline-offset: 3px; }
[data-cb-failed] { flex-direction: column; align-items: flex-start; }
.cb-alert__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cb-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.cb-btn--ink { background: var(--ink); color: #fff; }
.cb-btn--line { border: 1.5px solid #9b2c2c; color: #9b2c2c; background: #fff; }
.cb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.cb-privacy { font-size: 14px; color: var(--muted); }
.cb-privacy a { color: #14707a; text-decoration: underline; text-underline-offset: 3px; }
.cb-form.is-sending .cb-s, .cb-form.is-sending .cb-blank { opacity: .55; pointer-events: none; }
.cb-sent { outline: none; }
.cb-sent[hidden] { display: none; }
.cb-s--sent { position: relative; margin-top: 20px; padding: 4px 0; }
.cb-s--sent .cb-sel { inset: -10px -14px; }
.cb-again { margin-top: 34px; font-size: 15px; color: var(--muted); }
.cb-again button, .cb-link { font-weight: 600; color: #14707a; text-decoration: underline; text-underline-offset: 3px; }
.cb-link { color: var(--ink); padding: 0 16px; min-height: 52px; }
.cb-recap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.cb-recap span { padding: 6px 12px; border-radius: 999px; background: var(--paper); font-size: 14px; color: var(--body); }
.cb-recap small { font: 400 11px "Fragment Mono", monospace; color: var(--muted); margin-right: 6px; }
.cb-sent__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.cb-band { background: #e6f4f5; }
.cb-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-block: 64px; }
.cb-band__copy { flex: 1 1 360px; max-width: 520px; }
.cb-band__h { font-family: "Raleway", sans-serif; font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
.cb-band__cards { flex: 1 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cb-band .reach { background: #fff; }
@media (prefers-reduced-motion: reduce) { .cb-sel, .cb-blank input, .cb-blank textarea { transition: none; } }
@media (max-width: 700px) { .cb-top .cb-mono:not(.cb-mono--accent) { display: none; } }
.illu--ai-activation-a,
.illu--ai-activation-b,
.illu--ai-activation-c,
.illu--ai-activation-d {
--il-fs: calc(clamp(9.5px, 1.5625cqi + 5px, 15px) * var(--il-k, 1));
--il-warn: #e2593d;
--il-warn-ink: #b6402a;
--il-warn-tint: #fdebe5;
--il-mid: #e5a03a;
--il-mid-ink: #8f5c10;
--il-mid-tint: #fcf1dd;
--il-soft: #f2f4f3;
--il-skel: #e8ebea;
--il-shadow: 0 2.4em 4.2em -2.6em rgb(12 36 40 / 0.36), 0 0.35em 1.1em -0.45em rgb(12 36 40 / 0.13);
container-type: inline-size;
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(70% 55% at 92% 6%, rgb(var(--accent-rgb) / 0.07), rgb(var(--accent-rgb) / 0) 100%),
#fff;
color: var(--ink);
font-family: var(--f-body);
line-height: 1.3;
letter-spacing: 0;
text-align: left;
}
.illu--ai-activation-b { --il-k: 1.05; }
.illu--ai-activation-c { --il-k: 1.16; }
.variant:has(> .illu--ai-activation-a, > .illu--ai-activation-b, > .illu--ai-activation-c, > .illu--ai-activation-d) { width: 100%; height: 100%; }
.il-ai-stage {
position: relative;
width: 100%;
padding: 7cqi 6.5cqi;
font-size: var(--il-fs);
}
.il-ai-stage svg { display: block; }
.il-ai-card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 1.1em;
box-shadow: var(--il-shadow);
}
.il-ai-skel { display: block; height: 0.42em; border-radius: 99px; background: var(--il-skel); }
.il-ai-win { display: flex; align-items: center; gap: 0.5em; height: 2.5em; padding: 0 0.7em 0 0.9em; border-bottom: 1px solid var(--line); }
.il-ai-win__dots { display: flex; gap: 0.32em; }
.il-ai-win__dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #dfe2e1; }
.il-ai-pin {
position: absolute;
z-index: 4;
display: grid;
place-items: center;
width: 2em;
height: 2em;
border-radius: 50%;
background: var(--accent-ink);
color: #fff;
font: 500 max(8.5px, calc(var(--il-fs) * 0.78))/1 var(--f-label);
box-shadow: 0 0 0 0.2em #fff, 0 0.45em 1em -0.25em rgb(10 40 44 / 0.5);
}
.il-ai-sel {
position: absolute;
inset: -0.42em;
z-index: 3;
border: 1.5px solid var(--accent);
border-radius: 0.3em;
pointer-events: none;
}
.il-ai-sel > i {
position: absolute;
width: max(7px, 0.6em);
height: max(7px, 0.6em);
background: #fff;
border: 1.5px solid var(--accent);
border-radius: 2px;
}
.il-ai-sel > i:nth-child(1) { left: 0; top: 0; translate: -50% -50%; }
.il-ai-sel > i:nth-child(2) { right: 0; top: 0; translate: 50% -50%; }
.il-ai-sel > i:nth-child(3) { left: 0; bottom: 0; translate: -50% 50%; }
.il-ai-sel > i:nth-child(4) { right: 0; bottom: 0; translate: 50% 50%; }
.il-ai-tag {
position: absolute;
left: -1.5px;
top: calc(100% + 0.55em);
padding: 0.38em 0.62em 0.36em;
border-radius: 0.42em;
background: var(--tag-bg);
color: var(--tag-fg);
font: 400 max(9px, calc(var(--il-fs) * 0.74))/1.15 var(--f-mono);
white-space: nowrap;
}
.il-ai-caret { order: -1; flex: none; width: 1.5px; height: 1.15em; margin-right: 0.15em; border-radius: 1px; background: var(--accent); }
.il-ai-send { flex: none; display: grid; place-items: center; margin-left: auto; width: 1.85em; height: 1.85em; border-radius: 0.55em; background: var(--il-soft); color: #a3a9ab; }
.il-ai-send svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.il-ai-a { display: flex; flex-direction: column; }
.il-ai-a__screen { z-index: 1; align-self: flex-end; width: 84%; }
.il-ai-a__crumb { margin-left: 0.35em; font: 500 0.74em/1 var(--f-label); color: var(--muted); }
.il-ai-a__ask {
position: relative;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.36em 0.65em 0.36em 0.52em;
border-radius: 99px;
background: var(--il-soft);
color: #8c9295;
font: 500 0.7em/1 var(--f-label);
}
.il-ai-a__ask svg { width: 1em; height: 1em; fill: currentColor; }
.il-ai-a__pin3 { right: -1.7em; top: -1.45em; }
.il-ai-a__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0.85em; padding: 1em 0.95em 1.05em; }
.il-ai-a__dash { display: flex; flex-direction: column; min-width: 0; }
.il-ai-a__h { font: 600 1.02em/1.2 var(--f-display); letter-spacing: -0.01em; white-space: nowrap; }
.il-ai-a__sub { width: 58%; margin-top: 0.5em; }
.il-ai-a__kpi { display: flex; flex-direction: column; gap: 0.2em; margin-top: 0.9em; padding: 0.65em 0.7em 0.6em; border: 1px solid var(--line); border-radius: 0.65em; }
.il-ai-a__kl { overflow: hidden; font: 500 0.66em/1.2 var(--f-label); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.il-ai-a__kv { font: 500 1.2em/1.1 var(--f-label); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.il-ai-a__spark { width: 100%; height: 1.15em; margin-top: 0.2em; fill: none; stroke: var(--il-warn); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.il-ai-a__spark path { vector-effect: non-scaling-stroke; }
.il-ai-a__side { display: flex; flex-direction: column; min-width: 0; }
.il-ai-a__ai {
position: relative;
flex: 1;
padding: 0.75em 0.8em 0.85em;
border-radius: 0.75em;
background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.1), rgb(var(--accent-rgb) / 0.03));
box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.22);
}
.il-ai-a__aihead { display: flex; align-items: center; gap: 0.35em; font: 500 0.72em/1 var(--f-label); color: var(--accent-ink); }
.il-ai-a__aihead svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.il-ai-a__lines { display: grid; gap: 0.5em; margin-top: 0.8em; }
.il-ai-a__lines i { display: block; height: 0.42em; border-radius: 99px; background: rgb(var(--accent-rgb) / 0.18); transform-origin: left; }
.il-ai-a__lines i:nth-child(2) { width: 90%; }
.il-ai-a__lines i:nth-child(3) { width: 96%; }
.il-ai-a__lines i:nth-child(4) { width: 52%; }
.il-ai-a__pin2 { right: 0.9em; top: -1.05em; }
.il-ai-a__input {
position: relative;
display: flex;
align-items: center;
margin-top: 0.75em;
height: 2.6em;
padding: 0 0.38em 0 0.75em;
border: 1px solid #d9dddc;
border-radius: 0.75em;
background: #fff;
}
.il-ai-a__ph { overflow: hidden; font: 400 0.78em/1 var(--f-body); color: #959b9e; white-space: nowrap; text-overflow: ellipsis; }
.il-ai-a__pin1 { right: 2.7em; top: -1.15em; }
.il-ai-a__input .il-ai-tag { left: auto; right: -1.5px; }
.il-ai-a__report { z-index: 2; width: 55.5%; margin-top: -2.2em; padding: 0.95em 1em 0.35em; }
.il-ai-a__rhead { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding-bottom: 0.75em; }
.il-ai-a__rtitle { font: 600 1.06em/1.15 var(--f-display); letter-spacing: -0.01em; white-space: nowrap; }
.il-ai-a__rtag { padding: 0.36em 0.55em 0.34em; border-radius: 0.38em; background: var(--tag-bg); color: var(--tag-fg); font: 400 max(8.5px, calc(var(--il-fs) * 0.66))/1.1 var(--f-mono); white-space: nowrap; }
.il-ai-a__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "n t s" "n m m" "n b b";
align-items: center;
column-gap: 0.6em;
padding: 0.68em 0 0.72em;
border-top: 1px solid var(--line);
}
.il-ai-a__n {
grid-area: n;
align-self: start;
display: grid;
place-items: center;
width: 2em;
height: 2em;
border-radius: 50%;
background: var(--accent-ink);
color: #fff;
font: 500 max(8.5px, calc(var(--il-fs) * 0.74))/1 var(--f-label);
}
.il-ai-a__t { grid-area: t; min-width: 0; font: 500 0.86em/1.2 var(--f-label); color: var(--ink); }
.il-ai-a__m { grid-area: m; margin-top: 0.22em; font: 400 0.72em/1.25 var(--f-body); color: var(--muted); }
.il-ai-a__sev { grid-area: s; justify-self: end; padding: 0.3em 0.55em; border-radius: 99px; background: var(--il-warn-tint); color: var(--il-warn-ink); font: 500 max(8.5px, calc(var(--il-fs) * 0.64))/1 var(--f-label); }
.il-ai-a__bar { grid-area: b; overflow: hidden; height: 0.38em; margin-top: 0.6em; border-radius: 99px; background: var(--il-soft); }
.il-ai-a__bar i { display: block; width: var(--v, 50%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f29a7c, var(--il-warn)); transform-origin: left; }
.il-ai-a__row--mid .il-ai-a__sev { background: var(--il-mid-tint); color: var(--il-mid-ink); }
.il-ai-a__row--mid .il-ai-a__bar i { background: linear-gradient(90deg, #f3c47c, var(--il-mid)); }
.il-ai-b { display: flex; flex-direction: column; --il-h: 13em; --il-before: #ccd3d4; }
.il-ai-b__card { padding: 1.15em 1.2em 1.7em; }
.il-ai-b__head { display: flex; align-items: center; gap: 0.7em; }
.il-ai-b__icon { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 0.7em; background: var(--accent-tint); color: var(--accent-ink); }
.il-ai-b__icon svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.il-ai-b__hl { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.il-ai-b__title { font: 600 1.1em/1.15 var(--f-display); letter-spacing: -0.01em; white-space: nowrap; }
.il-ai-b__sub { font: 400 0.74em/1.2 var(--f-body); color: var(--muted); }
.il-ai-b__example {
align-self: flex-start;
margin-left: auto;
padding: 0.4em 0.62em 0.38em;
border: 1px dashed rgb(var(--accent-rgb) / 0.7);
border-radius: 0.42em;
background: rgb(var(--accent-rgb) / 0.05);
color: var(--accent-ink);
font: 400 max(9px, calc(var(--il-fs) * 0.7))/1 var(--f-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.il-ai-b__legend { display: flex; gap: 1.1em; margin-top: 1.1em; font: 500 0.72em/1 var(--f-label); color: var(--body); }
.il-ai-b__key { display: inline-flex; align-items: center; gap: 0.45em; }
.il-ai-b__key i { width: 0.85em; height: 0.85em; border-radius: 0.22em; background: var(--il-before); }
.il-ai-b__key--after i { background: var(--accent); }
.il-ai-b__chart { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0.3em; }
.il-ai-b__grid { position: absolute; left: 0; right: 0; top: 2em; height: var(--il-h); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.il-ai-b__grid i { height: 0; border-top: 1px dashed #e3e6e5; }
.il-ai-b__grid i:last-child { border-top: 1px solid #d9dddc; }
.il-ai-b__col { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.il-ai-b__plot { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0.3em; width: 100%; height: var(--il-h); margin-top: 2em; }
.il-ai-b__bar { position: relative; width: 31%; max-width: 2.7em; height: calc(var(--b) * 1%); }
.il-ai-b__bar--a { height: calc(var(--a) * 1%); }
.il-ai-b__bar::before { content: ""; position: absolute; inset: 0; border-radius: 0.38em 0.38em 0.12em 0.12em; background: var(--il-before); transform-origin: bottom; }
.il-ai-b__bar--a::before { background: linear-gradient(180deg, #27a1ab, var(--accent)); }
.il-ai-b__v { position: absolute; left: 50%; bottom: calc(100% + 0.45em); translate: -50% 0; font: 500 max(8.5px, calc(var(--il-fs) * 0.7))/1 var(--f-label); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.il-ai-b__bar--a .il-ai-b__v { color: var(--accent-ink); }
.il-ai-b__col:nth-child(2) .il-ai-b__bar--b .il-ai-b__v { left: calc(100% + 0.15em); color: var(--body); }
.il-ai-b__col:nth-child(2) .il-ai-b__bar--a .il-ai-b__v { display: none; }
.il-ai-b__label { margin-top: 0.65em; max-width: 100%; font: 500 0.74em/1.2 var(--f-label); color: var(--body); text-align: center; }
.il-ai-b__col--drop .il-ai-b__bar--b::before { background: var(--il-warn); }
.il-ai-b__col--drop .il-ai-b__bar--b .il-ai-b__v { bottom: auto; top: 0.5em; color: #fff; }
.il-ai-b__lost {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: calc((64 - 22) / 22 * 100%);
border: 1px dashed rgb(226 89 61 / 0.7);
border-bottom: 0;
border-radius: 0.38em 0.38em 0 0;
background: repeating-linear-gradient(-45deg, rgb(226 89 61 / 0.28) 0 1.5px, rgb(226 89 61 / 0.05) 1.5px 0.42em);
}
.il-ai-b__lost::after { content: "−66%"; position: absolute; left: 50%; bottom: calc(100% + 0.45em); translate: -50% 0; font: 500 max(8.5px, calc(var(--il-fs) * 0.7))/1 var(--f-label); color: var(--il-warn-ink); white-space: nowrap; }
.il-ai-b__col--drop .il-ai-b__label { color: var(--il-warn-ink); }
.il-ai-b__col--drop .il-ai-sel { inset: auto 4% -0.45em; height: calc(64% + 2.2em); }
.il-ai-b__col--drop .il-ai-tag { top: auto; bottom: calc(100% + 0.55em); left: 50%; translate: -50% 0; }
.il-ai-b__fix { z-index: 2; align-self: flex-end; width: 86%; margin: -1.15em -2% 0 0; padding: 0.85em 1em 0.95em; }
.il-ai-b__fixhead { display: flex; align-items: center; gap: 0.5em; font: 500 0.82em/1.2 var(--f-label); color: var(--ink); }
.il-ai-b__fixdot { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0.25em rgb(var(--accent-rgb) / 0.18); }
.il-ai-b__chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.65em; }
.il-ai-b__chip {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.45em 0.7em 0.45em 0.6em;
border-radius: 99px;
background: rgb(var(--accent-rgb) / 0.1);
color: var(--accent-ink);
font: 500 0.74em/1 var(--f-label);
white-space: nowrap;
}
.il-ai-b__chip::before { content: ""; width: 0.7em; height: 0.36em; margin-top: -0.2em; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: -45deg; }
.il-ai-c { display: flex; padding-bottom: calc(7cqi + 2.6em); }
.il-ai-c__app { width: 66%; }
.il-ai-c__bar { display: flex; align-items: center; gap: 0.5em; height: 2.75em; padding: 0 0.9em; border-bottom: 1px solid var(--line); }
.il-ai-c__logo { flex: none; display: grid; place-items: center; width: 1.65em; height: 1.65em; border-radius: 0.5em; background: var(--night); color: var(--accent-night); }
.il-ai-c__logo svg { width: 0.95em; height: 0.95em; fill: currentColor; }
.il-ai-c__name { font: 600 0.88em/1 var(--f-label); }
.il-ai-c__beta { padding: 0.3em 0.5em; border-radius: 99px; background: var(--il-soft); color: var(--muted); font: 500 max(8.5px, calc(var(--il-fs) * 0.62))/1 var(--f-label); }
.il-ai-c__more { margin-left: auto; }
.il-ai-c__thread { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 0.9em 0.5em; }
.il-ai-c__user { align-self: flex-end; max-width: 82%; padding: 0.62em 0.85em; border-radius: 0.95em 0.95em 0.25em 0.95em; background: var(--ink); color: #fff; font: 400 0.8em/1.35 var(--f-body); transform-origin: right bottom; }
.il-ai-c__ai { display: flex; align-items: flex-start; gap: 0.55em; }
.il-ai-c__av { flex: none; display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); }
.il-ai-c__av svg { width: 0.95em; height: 0.95em; fill: currentColor; }
.il-ai-c__bubble { position: relative; flex: 1; min-width: 0; padding: 0.7em 0.85em 0.85em; border-radius: 0.25em 0.95em 0.95em 0.95em; background: var(--il-soft); }
.il-ai-c__answer { display: block; font: 400 0.8em/1.42 var(--f-body); color: var(--ink); }
.il-ai-c__lines { display: grid; gap: 0.45em; margin-top: 0.65em; }
.il-ai-c__lines i { display: block; height: 0.42em; border-radius: 99px; background: #dfe3e2; transform-origin: left; }
.il-ai-c__lines i:nth-child(2) { width: 92%; }
.il-ai-c__lines i:nth-child(3) { width: 58%; }
.il-ai-c__typing { position: absolute; left: 0.85em; top: 0.95em; display: flex; gap: 0.28em; opacity: 0; }
.il-ai-c__typing i { width: 0.45em; height: 0.45em; border-radius: 50%; background: #9aa1a3; }
.il-ai-c__starters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; padding: 0.55em 0.9em 0.75em 3.3em; }
.il-ai-c__fix {
display: inline-flex;
align-items: center;
gap: 0.38em;
padding: 0.42em 0.68em 0.42em 0.52em;
border-radius: 99px;
background: var(--accent-ink);
color: #fff;
font: 500 max(8.5px, calc(var(--il-fs) * 0.68))/1 var(--f-label);
white-space: nowrap;
box-shadow: 0 0.5em 1em -0.5em rgb(20 112 122 / 0.7);
}
.il-ai-c__fix svg { width: 1em; height: 1em; fill: var(--accent-night); }
.il-ai-c__chip { padding: 0.42em 0.7em; border: 1.5px dashed rgb(var(--accent-rgb) / 0.6); border-radius: 99px; background: rgb(var(--accent-rgb) / 0.06); color: var(--accent-ink); font: 500 max(8.5px, calc(var(--il-fs) * 0.68))/1 var(--f-label); white-space: nowrap; }
.il-ai-c__input { position: relative; display: flex; align-items: center; margin: 0 0.9em 0.95em; height: 2.7em; padding: 0 0.4em 0 0.85em; border: 1px solid #d9dddc; border-radius: 0.85em; background: #fff; }
.il-ai-c__ph { overflow: hidden; font: 400 0.8em/1 var(--f-body); color: #959b9e; white-space: nowrap; }
.il-ai-c__note { position: absolute; z-index: 5; display: flex; align-items: flex-start; gap: 0.45em; width: 13.5em; }
.il-ai-c__note--1 { left: calc(100% - 1.6em); top: 30%; }
.il-ai-c__note--2 { right: -7em; top: calc(100% + 0.5em); }
.il-ai-c__pin {
flex: none;
display: grid;
place-items: center;
width: 3.2em;
height: 3.2em;
border-radius: 50% 50% 50% 0.2em;
background: var(--accent-ink);
color: #fff;
font: 500 max(8px, calc(var(--il-fs) * 0.64))/1 var(--f-label);
letter-spacing: 0.02em;
box-shadow: 0 0 0 0.2em #fff, 0 0.5em 1em -0.35em rgb(10 40 44 / 0.5);
}
.il-ai-c__note--2 .il-ai-c__pin { border-radius: 0.2em 50% 50% 50%; }
.il-ai-c__ntext {
display: flex;
flex-direction: column;
gap: 0.3em;
min-width: 0;
padding: 0.6em 0.8em 0.68em;
border: 1px solid var(--line);
border-radius: 0.25em 0.85em 0.85em 0.85em;
background: #fff;
box-shadow: var(--il-shadow);
font: 500 0.82em/1.3 var(--f-label);
color: var(--ink);
}
.il-ai-c__who { font: 400 max(8.5px, calc(var(--il-fs) * 0.64))/1 var(--f-mono); color: var(--muted); }
@container (max-width: 460px) {
.il-ai-stage { padding: 6.5cqi 5.5cqi; }
.il-ai-a { --il-fs: calc(clamp(9.5px, 1.5625cqi + 5px, 15px) * 1.04); }
.il-ai-a__screen { width: 93%; }
.il-ai-a__report { width: 54%; margin-top: -2em; padding: 0.8em 0.75em 0.2em; }
.il-ai-a__crumb, .il-ai-a__rtag, .il-ai-a__m, .il-ai-a__sub { display: none; }
.il-ai-a__row { grid-template-areas: "n t t" "n b s"; padding: 0.6em 0 0.65em; }
.il-ai-a__bar { margin-top: 0; align-self: center; }
.il-ai-a__sev { margin: 0.45em 0 0 0.1em; }
.il-ai-b { --il-h: 11.5em; }
.il-ai-b__card { padding: 1em 0.95em 1.6em; }
.il-ai-b__fix { width: 94%; margin-right: -3%; }
.il-ai-c { --il-fs: calc(clamp(9.5px, 1.5625cqi + 5px, 15px) * 1.1); padding-bottom: calc(5.5cqi + 3.4em); }
.il-ai-c__app { width: 92%; }
.il-ai-c__note { width: 12.5em; }
.il-ai-c__who { display: none; }
.il-ai-c__note--1 { left: auto; right: -1.6em; top: 44%; }
.il-ai-c__note--2 { right: -1em; }
}
@keyframes il-ai-rise { from { opacity: 0; transform: translateY(1.6em); } }
@keyframes il-ai-up { from { opacity: 0; transform: translateY(0.7em); } }
@keyframes il-ai-pop { from { opacity: 0; scale: 0.25; } }
@keyframes il-ai-fade { from { opacity: 0; } }
@keyframes il-ai-fill-x { from { transform: scaleX(0); } }
@keyframes il-ai-fill-y { from { transform: scaleY(0); } }
@keyframes il-ai-sel { from { opacity: 0; scale: 1.08; } }
@keyframes il-ai-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes il-ai-ring { 0% { opacity: 0.6; scale: 1; } 70%, 100% { opacity: 0; scale: 2.2; } }
@keyframes il-ai-typing { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes il-ai-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-0.35em); opacity: 1; } }
@keyframes il-ai-hatch { to { background-position: 2.4em 0; } }
.js:not(.reduce-motion) .illu--ai-activation-a:not(.is-in) :is(.il-ai-card, .il-ai-pin, .il-ai-sel, .il-ai-tag, .il-ai-a__row, .il-ai-a__n) { opacity: 0; }
.js:not(.reduce-motion) .illu--ai-activation-a:not(.is-in) :is(.il-ai-a__bar i, .il-ai-a__lines i) { transform: scaleX(0); }
.js:not(.reduce-motion) .illu--ai-activation-a:not(.is-in) .js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__screen { animation: il-ai-rise 0.9s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__lines i { animation: il-ai-fill-x 0.8s var(--ease-out) 0.5s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__lines i:nth-child(2) { animation-delay: 0.56s; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__lines i:nth-child(3) { animation-delay: 0.62s; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__lines i:nth-child(4) { animation-delay: 0.68s; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__report { animation: il-ai-rise 0.9s var(--ease-out) 0.38s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__row { animation: il-ai-up 0.7s var(--ease-out) 0.52s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__row:nth-of-type(3) { animation-delay: 0.62s; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__row:nth-of-type(4) { animation-delay: 0.72s; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__bar i { animation: il-ai-fill-x 1s var(--ease-out) 0.95s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__row:nth-of-type(3) .il-ai-a__bar i { animation-delay: 1.1s; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__row:nth-of-type(4) .il-ai-a__bar i { animation-delay: 1.25s; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in :is(.il-ai-a__pin1, .il-ai-a__row:nth-of-type(2) .il-ai-a__n) { animation: il-ai-pop 0.65s var(--spring) 1.05s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in :is(.il-ai-a__pin2, .il-ai-a__row:nth-of-type(3) .il-ai-a__n) { animation: il-ai-pop 0.65s var(--spring) 1.2s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in :is(.il-ai-a__pin3, .il-ai-a__row:nth-of-type(4) .il-ai-a__n) { animation: il-ai-pop 0.65s var(--spring) 1.35s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-sel { animation: il-ai-sel 0.6s var(--spring) 1.55s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-sel > i { animation: il-ai-pop 0.5s var(--spring) 1.65s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-tag { animation: il-ai-up 0.55s var(--ease-out) 1.8s both; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-caret { animation: il-ai-blink 1.1s steps(1) 2.4s infinite; }
.il-ai-a__pin1::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--accent); opacity: 0; }
.js:not(.reduce-motion) .illu--ai-activation-a.is-in .il-ai-a__pin1::after { animation: il-ai-ring 2.6s var(--ease-out) 2.4s infinite; }
.js:not(.reduce-motion) .illu--ai-activation-b:not(.is-in) :is(.il-ai-card, .il-ai-b__v, .il-ai-b__lost, .il-ai-sel, .il-ai-tag, .il-ai-b__chip) { opacity: 0; }
.js:not(.reduce-motion) .illu--ai-activation-b:not(.is-in) .il-ai-b__bar::before { transform: scaleY(0); }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__card { animation: il-ai-rise 0.9s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__bar::before { animation: il-ai-fill-y 0.9s var(--ease-out) 0.45s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__bar--a::before { animation-delay: 0.55s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__col:nth-child(3) .il-ai-b__bar::before { animation-delay: 0.57s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__col:nth-child(3) .il-ai-b__bar--a::before { animation-delay: 0.67s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__col:nth-child(4) .il-ai-b__bar::before { animation-delay: 0.69s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__col:nth-child(4) .il-ai-b__bar--a::before { animation-delay: 0.79s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__col:nth-child(5) .il-ai-b__bar::before { animation-delay: 0.81s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__col:nth-child(5) .il-ai-b__bar--a::before { animation-delay: 0.91s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__v { animation: il-ai-up 0.5s var(--ease-out) 1.1s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__lost { animation: il-ai-fade 0.6s var(--ease-out) 1.35s both, il-ai-hatch 6s linear 2.4s infinite; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-sel { animation: il-ai-sel 0.6s var(--spring) 1.5s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-sel > i { animation: il-ai-pop 0.5s var(--spring) 1.6s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-tag { animation: il-ai-up 0.55s var(--ease-out) 1.7s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__fix { animation: il-ai-rise 0.9s var(--ease-out) 1.35s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__chip { animation: il-ai-pop 0.6s var(--spring) 1.62s both; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__chip:nth-child(2) { animation-delay: 1.71s; }
.js:not(.reduce-motion) .illu--ai-activation-b.is-in .il-ai-b__chip:nth-child(3) { animation-delay: 1.8s; }
.js:not(.reduce-motion) .illu--ai-activation-c:not(.is-in) :is(.il-ai-card, .il-ai-c__user, .il-ai-c__av, .il-ai-c__bubble, .il-ai-c__answer, .il-ai-sel, .il-ai-c__note, .il-ai-c__fix, .il-ai-c__chip) { opacity: 0; }
.js:not(.reduce-motion) .illu--ai-activation-c:not(.is-in) .il-ai-c__lines i { transform: scaleX(0); }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__app { animation: il-ai-rise 0.9s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__user { animation: il-ai-pop 0.6s var(--spring) 0.45s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__av { animation: il-ai-pop 0.6s var(--spring) 0.7s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__bubble { animation: il-ai-fade 0.4s var(--ease-out) 0.72s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__typing { animation: il-ai-typing 0.6s linear 0.75s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__typing i { animation: il-ai-dot 0.5s ease-in-out 0.75s 2; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__typing i:nth-child(2) { animation-delay: 0.83s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__typing i:nth-child(3) { animation-delay: 0.91s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__answer { animation: il-ai-up 0.6s var(--ease-out) 1.25s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__lines i { animation: il-ai-fill-x 0.7s var(--ease-out) 1.3s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__lines i:nth-child(2) { animation-delay: 1.35s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__lines i:nth-child(3) { animation-delay: 1.4s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-sel { animation: il-ai-sel 0.6s var(--spring) 1.45s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-sel > i { animation: il-ai-pop 0.5s var(--spring) 1.52s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__input .il-ai-sel { animation-delay: 1.65s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__input .il-ai-sel > i { animation-delay: 1.72s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__note { animation: il-ai-pop 0.6s var(--spring) 1.55s both; transform-origin: left top; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__note--2 { animation-delay: 1.75s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__fix { animation: il-ai-pop 0.6s var(--spring) 1.8s both; transform-origin: left center; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__chip { animation: il-ai-pop 0.5s var(--spring) 1.86s both; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-c__chip:nth-of-type(3) { animation-delay: 1.92s; }
.js:not(.reduce-motion) .illu--ai-activation-c.is-in .il-ai-caret { animation: il-ai-blink 1.1s steps(1) 2.4s infinite; }
.illu--ai-activation-d { --il-fs: calc(clamp(9.5px, 1.5625cqi + 5px, 15px) * 1.06); }
.il-ai-d { flex-direction: column; padding-bottom: 7cqi; --il-before: #ccd3d4; }
.il-ai-d .il-ai-c__app { width: 70%; }
.il-ai-d .il-ai-c__note--1 { z-index: 3; }
.il-ai-d__funnel { --il-h: 6.4em; z-index: 2; align-self: flex-end; width: 62%; margin-top: -9.5em; padding: 0.95em 1em 1.25em; }
.il-ai-d__funnel .il-ai-b__title { font-size: 0.98em; }
.il-ai-d__funnel .il-ai-b__icon { width: 2em; height: 2em; }
.il-ai-d__funnel .il-ai-b__legend { margin-top: 0.75em; }
.il-ai-d__funnel .il-ai-b__plot { margin-top: 1.7em; }
.il-ai-d__funnel .il-ai-b__grid { top: 1.7em; }
.il-ai-d__funnel .il-ai-b__label { font-size: 0.66em; }
@container (max-width: 460px) {
.il-ai-d .il-ai-c__app { width: 90%; }
.il-ai-d__funnel { width: 84%; margin-top: -4.5em; }
.il-ai-d .il-ai-c__note--1 { right: -1.2em; }
}
.js:not(.reduce-motion) .illu--ai-activation-d:not(.is-in) :is(.il-ai-card, .il-ai-c__user, .il-ai-c__av, .il-ai-c__bubble, .il-ai-c__answer, .il-ai-sel, .il-ai-tag, .il-ai-c__note, .il-ai-c__fix, .il-ai-c__chip, .il-ai-b__v, .il-ai-b__lost) { opacity: 0; }
.js:not(.reduce-motion) .illu--ai-activation-d:not(.is-in) .il-ai-c__lines i { transform: scaleX(0); }
.js:not(.reduce-motion) .illu--ai-activation-d:not(.is-in) .il-ai-b__bar::before { transform: scaleY(0); }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__app { animation: il-ai-rise 0.9s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__user { animation: il-ai-pop 0.6s var(--spring) 0.45s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__av { animation: il-ai-pop 0.6s var(--spring) 0.7s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__bubble { animation: il-ai-fade 0.4s var(--ease-out) 0.72s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__typing { animation: il-ai-typing 0.6s linear 0.75s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__answer { animation: il-ai-up 0.6s var(--ease-out) 1.25s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__lines i { animation: il-ai-fill-x 0.7s var(--ease-out) 1.3s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__bubble .il-ai-sel { animation: il-ai-sel 0.6s var(--spring) 1.45s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__note { animation: il-ai-pop 0.6s var(--spring) 1.55s both; transform-origin: left top; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__fix { animation: il-ai-pop 0.6s var(--spring) 1.7s both; transform-origin: left center; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-c__chip { animation: il-ai-pop 0.5s var(--spring) 1.78s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-d__funnel { animation: il-ai-rise 0.9s var(--ease-out) 1.6s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-b__bar::before { animation: il-ai-fill-y 0.9s var(--ease-out) 1.9s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-b__bar--a::before { animation-delay: 2.05s; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-b__v { animation: il-ai-up 0.5s var(--ease-out) 2.5s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-b__lost { animation: il-ai-fade 0.6s var(--ease-out) 2.6s both, il-ai-hatch 6s linear 3.4s infinite; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-b__plot .il-ai-sel { animation: il-ai-sel 0.6s var(--spring) 2.75s both; }
.js:not(.reduce-motion) .illu--ai-activation-d.is-in .il-ai-tag { animation: il-ai-up 0.55s var(--ease-out) 2.9s both; }
.illu--ai-cleanup {
--il-fs: calc(clamp(9.5px, 1.5625cqi + 5px, 15px) * 1.04);
--il-warn: #e2593d; --il-warn-ink: #b6402a; --il-warn-tint: #fdebe5; --il-soft: #f2f4f3; --il-skel: #e8ebea; --il-before: #ccd3d4;
--il-shadow: 0 2.4em 4.2em -2.6em rgb(12 36 40 / 0.36), 0 0.35em 1.1em -0.45em rgb(12 36 40 / 0.13);
container-type: inline-size; position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
background: radial-gradient(70% 55% at 92% 6%, rgb(var(--accent-rgb) / 0.07), rgb(var(--accent-rgb) / 0) 100%), #fff;
color: var(--ink); font-family: var(--f-body); line-height: 1.3; text-align: left;
}
.il-ai-e { display: flex; flex-direction: column; padding-bottom: 7cqi; }
.il-ai-e__app { width: 74%; }
.il-ai-e__url { margin-left: 0.6em; padding: 0.3em 0.7em; border-radius: 99px; background: var(--il-soft); color: var(--muted); font: 400 max(8.5px, calc(var(--il-fs) * 0.62))/1 var(--f-mono); }
.il-ai-e__body { padding: 1em 1em 1.2em; }
.il-ai-e__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.il-ai-e__h { font: 600 1.05em/1 var(--f-display); }
.il-ai-e__btns { position: relative; display: flex; align-items: center; gap: 0.35em; }
.il-ai-e__b { font: 500 0.64em/1 var(--f-label); padding: 0.55em 0.75em; white-space: nowrap; }
.il-ai-e__b--1 { background: #6c5ce7; color: #fff; border-radius: 99px; }
.il-ai-e__b--2 { background: #fff; color: #2b7a4b; border: 1.5px solid #2b7a4b; border-radius: 0.2em; }
.il-ai-e__b--3 { background: #f6c945; color: #4a3700; border-radius: 0.55em; letter-spacing: 0.06em; font-size: 0.58em; }
.il-ai-e__cards { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr; gap: 0.55em; margin-top: 1em; align-items: start; }
.il-ai-e__c { display: flex; flex-direction: column; gap: 0.45em; padding: 0.75em; background: var(--il-soft); }
.il-ai-e__c i { height: 0.42em; border-radius: 99px; background: #d9dddc; }
.il-ai-e__c i:last-child { width: 60%; }
.il-ai-e__c--1 { border-radius: 0.9em; height: 4.2em; }
.il-ai-e__c--2 { border-radius: 0.2em; height: 3.2em; margin-top: 0.6em; box-shadow: 0 0.5em 1em -0.5em rgb(0 0 0 / 0.35); }
.il-ai-e__c--3 { border-radius: 0.5em; height: 4.8em; border: 1.5px dashed #c7cccb; background: #fff; }
.il-ai-e__empty { position: relative; display: flex; align-items: center; gap: 0.6em; margin-top: 0.9em; padding: 0.8em; border-radius: 0.6em; background: #fafbfb; border: 1px solid var(--line); }
.il-ai-e__q { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--il-soft); color: var(--muted); font: 600 0.8em/1 var(--f-label); }
.il-ai-e__et { font: 500 0.72em/1 var(--f-label); color: var(--muted); }
.il-ai-e__note { width: 12.5em; }
.il-ai-e__note--1 { left: auto; right: -3.2em; top: calc(100% + 0.7em); }
.il-ai-e__note--2 { left: calc(100% - 3em); top: 0.2em; }
.il-ai-e__note--2 .il-ai-c__pin { border-radius: 0.2em 50% 50% 50%; }
.il-ai-e__audit { z-index: 2; align-self: flex-end; width: 60%; margin-top: -5.5em; padding: 0.95em 1em 1.1em; }
.il-ai-e__audit .il-ai-b__title { font-size: 0.98em; }
.il-ai-e__audit .il-ai-b__icon { width: 2em; height: 2em; }
.il-ai-e__audit .il-ai-b__legend { margin-top: 0.75em; }
.il-ai-e__rows { display: flex; flex-direction: column; gap: 0.62em; margin: 0.9em 0 0; padding: 0; list-style: none; }
.il-ai-e__row { position: relative; display: grid; grid-template-columns: 6.6em 1fr 3.4em; align-items: center; gap: 0.6em; }
.il-ai-e__lab { font: 500 0.7em/1.1 var(--f-label); color: var(--body); white-space: nowrap; }
.il-ai-e__bars { display: flex; flex-direction: column; gap: 0.18em; }
.il-ai-e__bars i { display: block; height: 0.5em; border-radius: 99px; transform-origin: left; }
.il-ai-e__bar--b { width: calc(var(--b) * 1%); background: var(--il-before); }
.il-ai-e__bar--a { width: calc(var(--a) * 1%); background: linear-gradient(90deg, #27a1ab, var(--accent)); }
.il-ai-e__row--worst .il-ai-e__bar--b { background: var(--il-warn); }
.il-ai-e__num { font: 500 0.7em/1 var(--f-label); color: var(--accent-ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.il-ai-e__row--worst .il-ai-sel { inset: -0.45em -0.5em; }
.il-ai-e__row--worst .il-ai-tag { top: auto; bottom: calc(100% + 0.5em); left: auto; right: -1.5px; }
@container (max-width: 460px) {
.il-ai-stage.il-ai-e { padding: 6.5cqi 5.5cqi; }
.il-ai-e__app { width: 92%; }
.il-ai-e__audit { width: 88%; margin-top: -2.5em; }
.il-ai-e .il-ai-c__who { display: none; }
.il-ai-e__note--1 { left: auto; right: -0.8em; top: calc(100% + 0.5em); }
.il-ai-e__note--2 { left: auto; right: -0.8em; }
.il-ai-e__url { display: none; }
}
.js:not(.reduce-motion) .illu--ai-cleanup:not(.is-in) :is(.il-ai-card, .il-ai-sel, .il-ai-tag, .il-ai-c__note, .il-ai-e__b, .il-ai-e__c, .il-ai-e__empty, .il-ai-e__num) { opacity: 0; }
.js:not(.reduce-motion) .illu--ai-cleanup:not(.is-in) .il-ai-e__bars i { transform: scaleX(0); }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__app { animation: il-ai-rise 0.9s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__b { animation: il-ai-pop 0.55s var(--spring) 0.5s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__b--2 { animation-delay: 0.6s; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__b--3 { animation-delay: 0.7s; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__c { animation: il-ai-up 0.6s var(--ease-out) 0.6s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__c--2 { animation-delay: 0.7s; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__c--3 { animation-delay: 0.8s; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__empty { animation: il-ai-up 0.6s var(--ease-out) 0.9s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__app .il-ai-sel { animation: il-ai-sel 0.6s var(--spring) 1.2s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__empty .il-ai-sel { animation-delay: 1.45s; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-c__note { animation: il-ai-pop 0.6s var(--spring) 1.35s both; transform-origin: left top; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__note--2 { animation-delay: 1.6s; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__audit { animation: il-ai-rise 0.9s var(--ease-out) 1.7s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__bar--b { animation: il-ai-fill-x 0.8s var(--ease-out) 2s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__bar--a { animation: il-ai-fill-x 0.8s var(--ease-out) 2.2s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__num { animation: il-ai-up 0.5s var(--ease-out) 2.5s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-e__audit .il-ai-sel { animation: il-ai-sel 0.6s var(--spring) 2.7s both; }
.js:not(.reduce-motion) .illu--ai-cleanup.is-in .il-ai-tag { animation: il-ai-up 0.55s var(--ease-out) 2.85s both; }
@property --aj-sec { syntax: "<integer>"; inherits: true; initial-value: 52; }
.illu--app-jigsaw-hero,
.illu--app-jigsaw-f1,
.illu--app-jigsaw-f2,
.illu--app-jigsaw-f3,
.illu--app-jigsaw-screens {
--aj-ink: #111827;
--aj-muted: #5f6776;
--aj-line: #e3e8ef;
--aj-pale: #eff3f8;
--aj-slot: #edf1f6;
--aj-acc: var(--app-a, #e8551f);
--aj-acc-2: var(--app-b, #ffb347);
--aj-acc-ink: #c4400d;
--aj-btn: #cf4410;
--aj-shadow: 0 1.6em 3em -1.6em rgb(43 28 18 / 0.42), 0 0.3em 0.9em -0.3em rgb(43 28 18 / 0.16);
--aj-s0: calc(var(--hero-delay, 0ms) + 900ms);
container-type: inline-size;
position: relative;
color: var(--aj-ink);
font-family: var(--f-body);
line-height: 1.25;
text-align: left;
}
.js:not(.reduce-motion) [class*="illu--app-jigsaw"]:not(.is-in) * { animation-play-state: paused !important; }
.aj-stage { position: relative; width: 100%; }
.aj-stage svg { display: block; }
.aj-stage .device { width: 100%; }
.aj-screen { display: flex; flex-direction: column; justify-content: flex-start; color: var(--aj-ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
.aj-screen .device__status { flex: none; color: var(--aj-ink); }
.aj-home { position: absolute; left: 50%; bottom: 2.1cqi; z-index: 6; width: 35cqi; height: 1.4cqi; translate: -50% 0; border-radius: 99px; background: var(--aj-ink); opacity: 0.88; }
.aj-gbar { flex: none; display: flex; align-items: center; gap: 2.2cqi; padding: 1.6cqi 4.4cqi 2.6cqi; }
.aj-gbar svg { display: block; width: 100%; height: 100%; }
.aj-gbar__back { flex: none; width: 5.8cqi; height: 5.8cqi; }
.aj-gbar__lives { display: inline-flex; align-items: center; gap: 0.9cqi; font: 600 3.9cqi/1 var(--f-body); color: var(--aj-acc-ink); letter-spacing: 0.01em; }
.aj-gbar__lives svg { width: 4.4cqi; height: 4.4cqi; }
.aj-gbar__timer { margin-left: auto; display: inline-flex; align-items: center; gap: 1.8cqi; height: 8.6cqi; padding: 0 2.6cqi 0 3.2cqi; border: 1px solid var(--aj-line); border-radius: 2.2cqi; font: 600 3.8cqi/1 var(--f-body); font-variant-numeric: tabular-nums; }
.aj-gbar__timer svg { width: 3.1cqi; height: 3.1cqi; }
.aj-gbar__peek { flex: none; display: grid; place-items: center; width: 8.6cqi; height: 8.6cqi; border: 1px solid var(--aj-line); border-radius: 2.2cqi; }
.aj-gbar__peek svg { width: 4.8cqi; height: 4.8cqi; }
.aj-gbar__peek.is-on { background: var(--aj-ink); border-color: var(--aj-ink); color: #fff; }
.aj-prog { flex: none; position: relative; height: 0.9cqi; margin-bottom: 3.4cqi; background: #e6eaf0; }
.aj-prog i { position: absolute; inset: 0; background: #1f2937; transform: scaleX(var(--v, 1)); transform-origin: 0 50%; }
.aj-boardwrap { position: relative; z-index: 2; flex: none; padding: 0 4.2cqi; }
.aj-board { width: 100%; height: auto; overflow: visible; }
.aj-board text { font-family: var(--f-body); }
.aj-cutline { fill: none; stroke: #fff; stroke-opacity: 0.34; stroke-width: 1.6; }
.aj-slots use { fill: var(--aj-slot); stroke: #d2d9e3; stroke-width: 1.6; stroke-linejoin: round; }
.aj-board__edge { fill: none; stroke: rgb(17 24 39 / 0.08); stroke-width: 1.5; }
.aj-tray__line { stroke: var(--aj-line); stroke-width: 2; }
.aj-tray__label { font-size: 23px; font-weight: 600; letter-spacing: 0.14em; fill: #6b7484; }
.aj-tray__toggle { fill: #d7dee8; }
.aj-tray__toggle.is-on { fill: var(--aj-acc); }
.aj-tray__knob { fill: #fff; }
.aj-tray__done text { font-size: 25px; font-weight: 500; fill: #6b7484; }
.aj-tray__done .aj-tray__btntext { font-size: 26px; font-weight: 600; fill: #fff; }
.aj-tray__btn { fill: var(--aj-btn); }
.aj-hp__sh { fill: #2b1c12; opacity: 0; transform: translate(3px, 10px); }
.aj-hp__rim { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linejoin: round; opacity: 0; }
.aj-hp__flash { fill: #fff; opacity: 0; }
.aj-toast {
position: absolute; z-index: 4; display: flex; align-items: center;
background: #fff; color: var(--aj-ink); border-radius: 1.15em;
font-size: clamp(11.5px, 2.15cqi, 14px);
box-shadow: var(--aj-shadow), 0 0 0 1px rgb(17 24 39 / 0.04);
white-space: nowrap;
}
.aj-toast__text { display: flex; flex-direction: column; gap: 0.2em; line-height: 1.15; }
.aj-toast__text strong { font-weight: 600; font-size: 1.04em; }
.aj-toast__text span { color: var(--aj-muted); font-size: 0.88em; }
.aj-toast { gap: 0.75em; padding: 0.7em 1.15em 0.7em 0.7em; }
.aj-toast__icon { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--aj-acc); color: #fff; box-shadow: 0 0.4em 0.9em -0.3em color-mix(in srgb, var(--aj-acc) 70%, transparent); }
.aj-toast__icon svg { width: 1.35em; height: 1.35em; }
.aj-loose { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0.9cqi 1.1cqi rgb(43 28 18 / 0.32)) drop-shadow(0 0.2cqi 0.3cqi rgb(43 28 18 / 0.2)); }
.aj-hero { --pw: clamp(226px, 44cqi + 46px, 310px); --tw: clamp(102px, 26cqi, 168px); --lw: clamp(74px, 17cqi, 116px); height: calc(var(--pw) * 2.1667 + 8cqi); }
.aj-hero__phone { position: absolute; z-index: 2; top: 3cqi; left: 50%; width: var(--pw); translate: -50% 0; }
.aj-hero__tile { position: absolute; z-index: 1; width: var(--tw); }
.aj-hero__tile--l { left: calc(50% - var(--pw) / 2 - var(--tw) * 0.7); top: 13%; rotate: -8deg; }
.aj-hero__tile--r { left: calc(50% + var(--pw) / 2 - var(--tw) * 0.3); top: 42%; rotate: 7deg; }
.aj-hero__tile .aj-art { width: 100%; height: auto; }
.aj-hero__tile > svg { border-radius: clamp(10px, 2.4cqi, 16px); border: clamp(3px, 0.8cqi, 5px) solid #fff; box-shadow: var(--aj-shadow); background: #fff; }
.aj-hero__loose { position: absolute; z-index: 3; width: var(--lw); }
.aj-hero__loose--a { left: calc(50% - var(--pw) / 2 - var(--lw) * 0.9); top: 2.5%; rotate: -14deg; }
.aj-hero__loose--b { left: calc(50% + var(--pw) / 2 - var(--lw) * 0.3); top: 80%; rotate: 12deg; }
.aj-hero__toast { left: calc(50% + var(--pw) / 2 - 10cqi); top: 19%; }
@container (max-width: 480px) {
.aj-hero__toast { left: auto; right: 0; top: 17%; }
}
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp { animation: var(--aj-d) linear var(--aj-s0) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp--0 { animation-name: aj-h-p0; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp--1 { animation-name: aj-h-p1; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp--2 { animation-name: aj-h-p2; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp--3 { animation-name: aj-h-p3; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp--4 { animation-name: aj-h-p4; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp--5 { animation-name: aj-h-p5; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp--6 { animation-name: aj-h-p6; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp__rim { animation: aj-rim 0.45s ease-out calc(var(--aj-s0) + var(--land)) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp__sh { animation: aj-shadow 0.3s ease-out calc(var(--aj-s0) + var(--land) - 0.08s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hp__flash { animation: aj-flash 0.6s ease-out calc(var(--aj-s0) + var(--land)) both; }
.illu--app-jigsaw-hero .aj-slots use { opacity: 0; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-slots use { animation: aj-slot-out 0.15s linear calc(var(--aj-s0) + var(--land) + 0.05s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-prog i { animation: aj-h-prog var(--aj-d) linear var(--aj-s0) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-tick { animation: aj-tick var(--aj-done) linear var(--aj-s0) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-tick .aj-gbar__t { font-size: 0; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-tick .aj-gbar__t::after { content: "7:" counter(aj-s, decimal-leading-zero); counter-reset: aj-s var(--aj-sec); font-size: 3.8cqi; }
.illu--app-jigsaw-hero .aj-cuts { opacity: 0.4; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-cuts { animation: aj-cuts-soft 0.8s ease-out calc(var(--aj-s0) + var(--aj-done)) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-sheen { animation: aj-sheen 1.3s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--aj-s0) + var(--aj-done)) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-tray__done { animation: aj-fade-in 0.6s ease-out calc(var(--aj-s0) + var(--aj-done) + 0.15s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__toast { animation: aj-pop 0.7s var(--spring) calc(var(--aj-s0) + var(--aj-done) + 0.15s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__toast .aj-toast__icon { animation: aj-pop-icon 0.6s var(--spring) calc(var(--aj-s0) + var(--aj-done) + 0.35s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__tile { animation: aj-rise 1s var(--ease-out) calc(var(--aj-s0) - 0.45s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__tile--r { animation-delay: calc(var(--aj-s0) - 0.3s); }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__tile > svg { animation: aj-bob 7s ease-in-out calc(var(--aj-s0) + 0.6s) infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__tile--r > svg { animation-duration: 8s; animation-direction: reverse; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__loose { animation: aj-drop 1.1s var(--ease-out) calc(var(--aj-s0) - 0.2s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__loose--b { animation-delay: calc(var(--aj-s0) + 0.05s); }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__loose > svg { animation: aj-float 6s ease-in-out calc(var(--aj-s0) + 1s) infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-hero .aj-hero__loose--b > svg { animation-duration: 7s; animation-delay: calc(var(--aj-s0) + 1.6s); }
.aj-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.aj-feat { --pw: clamp(212px, 30cqi + 96px, 276px); --lw: clamp(64px, 13cqi, 96px); height: calc(var(--pw) * 2.1667 + 6cqi); }
.aj-feat__phone { position: absolute; z-index: 2; top: 3cqi; left: 50%; width: var(--pw); translate: -50% 0; }
.aj-tabs { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 2.4cqi 4cqi 7.4cqi; background: #fff; border-top: 1px solid var(--aj-line); }
.aj-tabs span { display: flex; flex-direction: column; align-items: center; gap: 0.9cqi; width: 22cqi; color: var(--aj-muted); }
.aj-tabs svg { width: 5.8cqi; height: 5.8cqi; }
.aj-tabs b { font: 600 2.9cqi/1 var(--f-body); }
.aj-tabs .is-on { color: var(--aj-acc-ink); }
.aj-today { position: relative; flex: 1; display: flex; flex-direction: column; padding: 1.5cqi 6cqi 0; }
.aj-today__head { display: flex; align-items: flex-end; justify-content: space-between; }
.aj-today__kick { display: block; font: 600 3.1cqi/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aj-muted); }
.aj-today__h { display: block; margin-top: 1.4cqi; font: 700 8.6cqi/1 var(--f-body); letter-spacing: -0.02em; }
.aj-streak { display: inline-flex; align-items: center; gap: 0.8cqi; height: 8.4cqi; padding: 0 3cqi 0 2.2cqi; border-radius: 99px; background: color-mix(in srgb, var(--aj-acc) 12%, #fff); color: var(--aj-acc-ink); font: 700 4cqi/1 var(--f-body); }
.aj-streak svg { width: 4.6cqi; height: 4.6cqi; }
.aj-today__sub { display: flex; align-items: center; justify-content: space-between; margin-top: 3cqi; font: 500 3.5cqi/1 var(--f-body); color: var(--aj-muted); }
.aj-dots { display: flex; gap: 1.2cqi; }
.aj-dots i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #d9dfe8; }
.aj-dots i.is-on { background: var(--aj-ink); }
.aj-stack { position: relative; height: 112cqi; margin-top: 10cqi; }
.aj-pick { position: absolute; left: 50%; top: 0; width: 80cqi; margin-left: -40cqi; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 5cqi; background: #fff; box-shadow: 0 3cqi 6cqi -3cqi rgb(17 24 39 / 0.45), 0 0 0 1px rgb(17 24 39 / 0.05); transform-origin: 50% 0; }
.aj-pick__art { width: 100%; height: 100%; }
.aj-pick__info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1cqi; padding: 12cqi 4.6cqi 4.4cqi; background: linear-gradient(transparent, rgb(12 14 30 / 0.72)); color: #fff; }
.aj-pick__info b { font: 600 4.6cqi/1.1 var(--f-body); }
.aj-pick__info span { font: 500 3.1cqi/1 var(--f-body); opacity: 0.85; }
.aj-pick__stamp { position: absolute; top: 5cqi; left: 4.6cqi; display: inline-flex; align-items: center; gap: 1cqi; padding: 1.6cqi 3cqi 1.6cqi 2.2cqi; border: 0.6cqi solid #fff; border-radius: 2.4cqi; background: var(--aj-btn); color: #fff; font: 700 3.6cqi/1 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase; rotate: -10deg; opacity: 0; }
.aj-pick__stamp svg { width: 3.8cqi; height: 3.8cqi; }
.aj-pick--1 { transform: translateY(-4.5cqi) scale(0.91); }
.aj-pick--2 { transform: translateY(-9cqi) scale(0.82); }
.aj-pick--3 { opacity: 0; }
.aj-pick--0 { z-index: 3; } .aj-pick--1 { z-index: 2; } .aj-pick--2 { z-index: 1; }
.aj-acts { display: flex; align-items: center; justify-content: center; gap: 5cqi; margin-top: 3cqi; }
.aj-act { display: grid; place-items: center; width: 13cqi; height: 13cqi; border-radius: 50%; background: #fff; border: 1px solid var(--aj-line); box-shadow: 0 1.4cqi 3cqi -1.6cqi rgb(17 24 39 / 0.3); color: var(--aj-ink); }
.aj-act svg { width: 5.4cqi; height: 5.4cqi; }
.aj-act--play { display: inline-flex; gap: 1.4cqi; width: auto; padding: 0 6cqi 0 5cqi; border-radius: 99px; background: var(--aj-ink); border-color: var(--aj-ink); color: #fff; font: 600 4.2cqi/1 var(--f-body); }
.aj-act--play svg { width: 4.6cqi; height: 4.6cqi; }
.aj-act--save { color: var(--aj-acc); }
.aj-streakcard { position: absolute; z-index: 4; right: calc(50% + var(--pw) / 2 - 13cqi); top: 76%; width: clamp(196px, 38cqi, 236px); padding: 0.95em 1em 1em; border-radius: 1.2em; background: #fff; font-size: clamp(11.5px, 2.15cqi, 13.5px); box-shadow: var(--aj-shadow), 0 0 0 1px rgb(17 24 39 / 0.04); }
.aj-streakcard__top { display: flex; align-items: center; gap: 0.7em; }
.aj-streakcard__flame { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.8em; background: linear-gradient(160deg, var(--aj-acc-2), var(--aj-acc)); color: #fff; }
.aj-streakcard__flame svg { width: 1.45em; height: 1.45em; }
.aj-streakcard__t { display: flex; flex-direction: column; gap: 0.2em; line-height: 1.15; }
.aj-streakcard__t b { font-weight: 600; font-size: 1.08em; }
.aj-streakcard__t span { color: var(--aj-muted); font-size: 0.88em; }
.aj-week { display: flex; justify-content: space-between; margin-top: 0.85em; padding-top: 0.8em; border-top: 1px solid var(--aj-line); }
.aj-week__d { display: flex; flex-direction: column; align-items: center; gap: 0.35em; font-size: 0.8em; font-weight: 600; color: var(--aj-muted); }
.aj-week__d i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--aj-acc); color: #fff; }
.aj-week__d i svg { width: 1.1em; height: 1.1em; }
.aj-week__d.is-today i { background: #fff; box-shadow: inset 0 0 0 0.16em var(--aj-acc); }
.aj-week__d.is-today { color: var(--aj-acc-ink); }
.aj-f1__loose { position: absolute; z-index: 3; width: var(--lw); left: calc(50% + var(--pw) / 2 - var(--lw) * 0.35); top: 9%; rotate: 16deg; }
@container (max-width: 520px) {
.aj-streakcard { right: auto; left: 0; top: 77%; }
}
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick { animation: aj-pick 12s linear infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick__stamp { animation: aj-stamp 12s linear infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--0, .js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--0 .aj-pick__stamp { animation-delay: -6.48s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--1, .js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--1 .aj-pick__stamp { animation-delay: -3.48s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--2, .js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--2 .aj-pick__stamp { animation-delay: -0.48s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--3, .js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-pick--3 .aj-pick__stamp { animation-delay: -9.48s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-streakcard { animation: aj-rise 0.9s var(--ease-out) 0.25s both; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-week__d i { animation: aj-dot 0.5s var(--spring) calc(0.6s + var(--i) * 0.08s) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-week__d.is-today i { animation: aj-dot 0.5s var(--spring) 1.15s both, aj-ring 2.4s ease-in-out 1.8s infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-streak svg, .js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-streakcard__flame svg { animation: aj-flicker 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-f1__loose { animation: aj-drop 1s var(--ease-out) 0.4s both; }
.js:not(.reduce-motion) .illu--app-jigsaw-f1 .aj-f1__loose > svg { animation: aj-float 6.5s ease-in-out 1.4s infinite; }
@keyframes aj-pick {
0% { transform: translateY(-9cqi) scale(0.82); opacity: 0; z-index: 1; }
4%, 21% { transform: translateY(-9cqi) scale(0.82); opacity: 1; z-index: 1; }
25%, 46% { transform: translateY(-4.5cqi) scale(0.91); opacity: 1; z-index: 2; }
50%, 62% { transform: none; opacity: 1; z-index: 3; }
67%, 70% { transform: translateX(6cqi) rotate(4deg); opacity: 1; z-index: 3; }
75% { transform: translateX(125cqi) translateY(4cqi) rotate(20deg); opacity: 1; z-index: 4; }
76%, 100% { transform: translateX(125cqi) translateY(4cqi) rotate(20deg); opacity: 0; z-index: 0; }
}
@keyframes aj-stamp { 0%, 61% { opacity: 0; transform: scale(0.6); } 65%, 75% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; } }
@keyframes aj-dot { from { transform: scale(0); } }
@keyframes aj-ring { 0%, 100% { box-shadow: inset 0 0 0 0.16em var(--aj-acc), 0 0 0 0 color-mix(in srgb, var(--aj-acc) 35%, transparent); } 50% { box-shadow: inset 0 0 0 0.16em var(--aj-acc), 0 0 0 0.4em color-mix(in srgb, var(--aj-acc) 0%, transparent); } }
@keyframes aj-flicker { 0%, 100% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.08, 0.95) rotate(-3deg); } 60% { transform: scale(0.96, 1.06) rotate(2deg); } }
.aj-lib { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 2cqi 5cqi 0; }
.aj-lib__head { display: flex; align-items: center; justify-content: space-between; }
.aj-lib__h { font: 700 8.6cqi/1 var(--f-body); letter-spacing: -0.02em; }
.aj-lib__count { display: inline-flex; align-items: center; gap: 1cqi; height: 7.6cqi; padding: 0 2.8cqi 0 2.2cqi; border-radius: 99px; background: var(--aj-pale); color: var(--aj-ink); font: 600 3.1cqi/1 var(--f-body); }
.aj-lib__count svg { width: 3.8cqi; height: 3.8cqi; color: var(--aj-acc); }
.aj-seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4.6cqi; padding: 0.9cqi; border-radius: 3cqi; background: var(--aj-pale); }
.aj-seg__pill { position: absolute; top: 0.9cqi; bottom: 0.9cqi; left: 0.9cqi; width: calc((100% - 1.8cqi) / 3); border-radius: 2.2cqi; background: #fff; box-shadow: 0 0.6cqi 1.6cqi -0.6cqi rgb(17 24 39 / 0.22); }
.aj-seg__t { position: relative; display: grid; place-items: center; height: 8cqi; font: 600 3.05cqi/1 var(--f-body); color: var(--aj-muted); white-space: nowrap; }
.aj-seg__t--0 { color: var(--aj-ink); }
.aj-lib__view { position: relative; flex: 1; min-height: 0; margin-top: 4.4cqi; }
.aj-lib__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 3.2cqi; }
.aj-lib__grid--prog, .aj-lib__grid--solved { opacity: 0; }
.aj-lib__tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3.6cqi; background: var(--aj-pale); box-shadow: 0 0 0 1px rgb(17 24 39 / 0.05); }
.aj-lib__art { width: 100%; height: 100%; }
.aj-lib__mark { position: absolute; top: 2.4cqi; right: 2.4cqi; display: grid; place-items: center; width: 7.6cqi; height: 7.6cqi; border-radius: 50%; background: rgb(255 255 255 / 0.94); color: var(--aj-acc); box-shadow: 0 0.6cqi 1.4cqi -0.6cqi rgb(17 24 39 / 0.4); }
.aj-lib__mark svg { width: 3.8cqi; height: 3.8cqi; }
.aj-lib__prog, .aj-lib__done { position: absolute; left: 2.4cqi; bottom: 2.4cqi; display: inline-flex; align-items: center; gap: 1.2cqi; height: 7.6cqi; padding: 0 2.6cqi 0 1.2cqi; border-radius: 99px; font: 700 3.1cqi/1 var(--f-body); font-variant-numeric: tabular-nums; }
.aj-lib__prog { background: rgb(255 255 255 / 0.95); color: var(--aj-ink); box-shadow: 0 0.6cqi 1.4cqi -0.6cqi rgb(17 24 39 / 0.4); }
.aj-lib__done { background: rgb(17 24 39 / 0.78); color: #fff; padding-left: 1.6cqi; }
.aj-lib__done svg { width: 3.6cqi; height: 3.6cqi; color: var(--aj-acc-2); }
.aj-ring { width: 5.4cqi; height: 5.4cqi; }
.aj-ring__bg { fill: none; stroke: #e6eaf0; stroke-width: 5; }
.aj-ring__fg { fill: none; stroke: var(--aj-acc); stroke-width: 5; stroke-linecap: round; }
.aj-f2__tile { position: absolute; z-index: 1; width: clamp(96px, 23cqi, 150px); }
.aj-f2__tile > svg { width: 100%; height: auto; border-radius: clamp(9px, 2.2cqi, 14px); border: clamp(3px, 0.7cqi, 5px) solid #fff; box-shadow: var(--aj-shadow); background: #fff; }
.aj-f2__tile--a { left: calc(50% + var(--pw) / 2 - 7cqi); top: 9%; rotate: 9deg; }
.aj-f2__tile--b { right: calc(50% + var(--pw) / 2 - 7cqi); top: 30%; rotate: -8deg; }
.aj-resume { position: absolute; z-index: 4; left: calc(50% + var(--pw) / 2 - 22cqi); top: 70%; display: flex; align-items: center; gap: 0.75em; padding: 0.6em 0.7em 0.6em 0.6em; border-radius: 1.2em; background: #fff; font-size: clamp(11.5px, 2.1cqi, 13.5px); white-space: nowrap; box-shadow: var(--aj-shadow), 0 0 0 1px rgb(17 24 39 / 0.04); }
.aj-resume__thumb { flex: none; width: 3.2em; height: 3.2em; overflow: hidden; border-radius: 0.75em; }
.aj-resume__thumb svg { width: 100%; height: 100%; }
.aj-resume__t { display: flex; flex-direction: column; gap: 0.25em; line-height: 1.15; }
.aj-resume__t b { font-weight: 600; font-size: 1.04em; }
.aj-resume__t > span { color: var(--aj-muted); font-size: 0.86em; }
.aj-resume__bar { display: block; width: 9em; height: 0.36em; margin-top: 0.25em; border-radius: 99px; background: #eceff4; overflow: hidden; }
.aj-resume__bar i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--aj-acc); }
.aj-resume__btn { display: inline-flex; align-items: center; gap: 0.35em; margin-left: 0.2em; padding: 0.6em 0.9em 0.6em 0.75em; border-radius: 99px; background: var(--aj-ink); color: #fff; font-weight: 600; font-size: 0.92em; }
.aj-resume__btn svg { width: 1em; height: 1em; }
@container (max-width: 520px) {
.aj-resume { left: auto; right: 0; top: 74%; }
.aj-resume__bar { width: 6.5em; }
}
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-seg__pill { animation: aj-seg 12s var(--ease-in-out) infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-seg__t { animation: aj-seg-t 12s linear infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-lib__grid { animation: aj-lib-view 12s linear infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-seg__t--1, .js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-lib__grid--prog { animation-delay: -8s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-seg__t--2, .js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-lib__grid--solved { animation-delay: -4s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-lib__grid .aj-ring__fg { animation: aj-ring-fill 1.2s var(--ease-out) both; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-f2__tile { animation: aj-rise 1s var(--ease-out) 0.15s both; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-f2__tile--b { animation-delay: 0.3s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-f2__tile > svg { animation: aj-bob 7s ease-in-out 1.2s infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-f2__tile--b > svg { animation-duration: 8s; animation-direction: reverse; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-resume { animation: aj-rise 0.9s var(--ease-out) 0.45s both; }
.js:not(.reduce-motion) .illu--app-jigsaw-f2 .aj-resume__bar i { animation: aj-bar 1.4s var(--ease-out) 0.9s both; }
@keyframes aj-seg { 0%, 30% { transform: none; } 33.33%, 63.33% { transform: translateX(100%); } 66.67%, 96.67% { transform: translateX(200%); } 100% { transform: none; } }
@keyframes aj-seg-t { 0%, 30% { color: var(--aj-ink); } 33.33%, 96.67% { color: var(--aj-muted); } 100% { color: var(--aj-ink); } }
@keyframes aj-lib-view { 0%, 30% { opacity: 1; transform: none; } 33.33% { opacity: 0; transform: translateY(2.5cqi); } 96.67% { opacity: 0; transform: translateY(2.5cqi); } 100% { opacity: 1; transform: none; } }
@keyframes aj-ring-fill { from { stroke-dasharray: 0 100; } }
@keyframes aj-bar { from { width: 0; } }
.aj-f3 { --fs: clamp(11px, 2.25cqi, 14px); height: 82cqi; }
.aj-f3__card { position: absolute; z-index: 1; left: 6cqi; top: 4cqi; width: 50cqi; rotate: -3deg; }
.aj-f3__frame { position: relative; padding: 1.2cqi; border-radius: 3.4cqi; background: #fff; box-shadow: var(--aj-shadow); }
.aj-f3__clip { overflow: hidden; border-radius: 2.3cqi; }
.aj-f3__art { width: 100%; height: auto; }
.aj-cutline-d { fill: none; stroke: rgb(18 14 40 / 0.4); stroke-width: 1.7; }
.illu--app-jigsaw-f3 .aj-cutline { stroke-opacity: 0.85; stroke-width: 0.75; }
.aj-lvlset--1, .aj-lvlset--2, .aj-lvlset--3 { opacity: 0; }
.aj-sample__hole { fill: rgb(14 14 34 / 0.5); stroke: #fff; stroke-opacity: 0.8; stroke-width: 0.8; }
.aj-sample { transform: translate(-3px, -6px) rotate(-7deg); }
.aj-sample .aj-sample__sh { opacity: 0.4; transform: translate(2px, 5px); }
.aj-sample .aj-sample__rim { opacity: 1; stroke-width: 1.8; }
.aj-f3__badge { position: absolute; left: 3.6cqi; top: 3.6cqi; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 0.85em 0.5em 0.6em; border-radius: 99px; background: #fff; color: var(--aj-ink); font: 600 var(--fs)/1 var(--f-body); box-shadow: 0 0.5em 1.2em -0.5em rgb(17 24 39 / 0.45); }
.aj-f3__badge > svg { width: 1.15em; height: 1.15em; color: var(--aj-acc); }
.aj-f3__counts { display: grid; }
.aj-f3__count { grid-area: 1 / 1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aj-f3__count--1, .aj-f3__count--2, .aj-f3__count--3 { opacity: 0; }
.aj-sheet { position: absolute; z-index: 2; right: 4cqi; top: 19cqi; width: 46cqi; padding: 0.7em 1em 1em; border-radius: 1.5em; background: #fff; color: var(--aj-ink); font-size: var(--fs); box-shadow: var(--aj-shadow), 0 0 0 1px rgb(17 24 39 / 0.04); }
.aj-sheet__grab { display: block; width: 2.8em; height: 0.32em; margin: 0 auto 0.9em; border-radius: 99px; background: #dde2ea; }
.aj-sheet__top { display: flex; flex-direction: column; gap: 0.3em; padding: 0 0.15em; }
.aj-sheet__h { font-weight: 700; font-size: 1.32em; letter-spacing: -0.01em; line-height: 1.1; }
.aj-sheet__sub { color: var(--aj-muted); font-size: 0.9em; }
.aj-lvls { position: relative; display: grid; margin-top: 0.85em; }
.aj-lvls__pill { position: absolute; left: 0; right: 0; top: 0; height: 25%; border-radius: 0.9em; background: color-mix(in srgb, var(--aj-acc) 10%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--aj-acc) 50%, transparent); }
.aj-lvl { position: relative; display: flex; align-items: center; gap: 0.65em; height: 2.9em; padding: 0 0.85em 0 0.75em; }
.aj-lvl b { font-weight: 600; }
.aj-lvl__n { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--aj-muted); }
.aj-lvl--0 .aj-lvl__n { color: var(--aj-acc-ink); }
.aj-lvl__radio { position: relative; flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; box-shadow: inset 0 0 0 0.13em #c8cfda; }
.aj-lvl__radio i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 26%, var(--aj-acc) 29%); opacity: 0; }
.aj-lvl--0 .aj-lvl__radio i { opacity: 1; }
.aj-lvl__glyph { flex: none; width: 1.3em; height: 1.3em; border-radius: 0.22em; background-color: #f1f4f8; background-image: linear-gradient(90deg, #a7b0bf 1px, transparent 1px), linear-gradient(#a7b0bf 1px, transparent 1px); background-size: calc(100% / var(--g)) calc(100% / var(--g)); box-shadow: inset 0 0 0 1px #a7b0bf; }
.aj-sheet__btn { display: flex; align-items: center; justify-content: center; gap: 0.5em; height: 2.9em; margin-top: 0.9em; border-radius: 99px; background: var(--aj-btn); color: #fff; font-weight: 600; }
.aj-sheet__btn svg { width: 1em; height: 1em; }
@container (max-width: 470px) {
.aj-f3 { height: 146cqi; }
.aj-f3__card { left: 50%; top: 2cqi; width: 62cqi; translate: -50% 0; rotate: -2deg; }
.aj-sheet { left: 7cqi; right: 7cqi; top: 70cqi; width: auto; }
}
.js:not(.reduce-motion) .illu--app-jigsaw-f3 .aj-lvls__pill { animation: aj-lvl-pill 12s var(--ease-in-out) infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 :is(.aj-lvlset, .aj-f3__count, .aj-lvl__radio i) { animation: aj-lvl-on 12s linear infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 .aj-lvl__n { animation: aj-lvl-col 12s linear infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 :is(.aj-lvlset--1, .aj-f3__count--1, .aj-lvl--1 .aj-lvl__radio i, .aj-lvl--1 .aj-lvl__n) { animation-delay: -9s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 :is(.aj-lvlset--2, .aj-f3__count--2, .aj-lvl--2 .aj-lvl__radio i, .aj-lvl--2 .aj-lvl__n) { animation-delay: -6s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 :is(.aj-lvlset--3, .aj-f3__count--3, .aj-lvl--3 .aj-lvl__radio i, .aj-lvl--3 .aj-lvl__n) { animation-delay: -3s; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 .aj-sample { animation: aj-sample 3s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 .aj-f3__card { animation: aj-rise 1s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--app-jigsaw-f3 .aj-sheet { animation: aj-rise 1s var(--ease-out) 0.3s both; }
@keyframes aj-lvl-pill { 0%, 22% { transform: none; } 25%, 47% { transform: translateY(100%); } 50%, 72% { transform: translateY(200%); } 75%, 97% { transform: translateY(300%); } 100% { transform: none; } }
@keyframes aj-lvl-on { 0%, 22% { opacity: 1; } 25%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes aj-lvl-col { 0%, 22% { color: var(--aj-acc-ink); } 25%, 97% { color: var(--aj-muted); } 100% { color: var(--aj-acc-ink); } }
@keyframes aj-sample { 0%, 100% { transform: translate(-3px, -6px) rotate(-7deg); } 50% { transform: translate(-4px, -9px) rotate(-9deg); } }
.aj-shows { --sw: clamp(176px, 16.4cqi, 232px); --gap: clamp(14px, 2.6cqi, 36px); padding: 1cqi 0 0.5cqi; }
.aj-shows__row { display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); }
.aj-shot { flex: none; width: var(--sw); margin: 0; }
.aj-shot:nth-child(even) { margin-top: calc(var(--sw) * 0.16); }
.aj-shot figcaption { margin-top: 1.1em; font: 600 clamp(12.5px, 1.1cqi, 14px)/1.3 var(--f-body); text-align: center; color: var(--aj-ink); }
.aj-shot .device { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.12), 0 36px 60px -34px rgb(43 28 18 / 0.5), 0 14px 24px -20px rgb(0 0 0 / 0.45); }
.aj-slotfill { fill: var(--aj-slot); }
.aj-slotline { fill: none; stroke: #d2d9e3; stroke-width: 1.6; stroke-linejoin: round; }
.aj-cutline-slot { fill: none; stroke: #d2d9e3; stroke-width: 1.6; }
.aj-ghost { opacity: 0.32; }
.aj-sp__sh { fill: #2b1c12; opacity: 0.3; transform: translate(2px, 8px); }
.aj-sp__rim { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linejoin: round; }
.aj-boardwrap--zoom { position: relative; }
.aj-zoom { transform: scale(2); }
.aj-zoomchip { position: absolute; top: 3cqi; left: 7.4cqi; display: inline-flex; align-items: center; gap: 1cqi; height: 7.4cqi; padding: 0 2.8cqi 0 2.2cqi; border-radius: 99px; background: rgb(17 24 39 / 0.78); color: #fff; font: 600 3.4cqi/1 var(--f-body); }
.aj-zoomchip svg { width: 3.8cqi; height: 3.8cqi; }
.aj-touch { position: absolute; width: 10cqi; height: 10cqi; border-radius: 50%; background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 0.5cqi rgb(17 24 39 / 0.28), 0 0 0 1.2cqi rgb(255 255 255 / 0.35), 0 1cqi 3cqi rgb(0 0 0 / 0.25); }
.aj-touch--a { left: 22cqi; top: 50cqi; }
.aj-touch--b { left: 62cqi; top: 86cqi; }
.aj-dim { position: absolute; inset: 0; z-index: 3; background: rgb(17 24 39 / 0.38); }
.aj-psheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 3cqi; padding: 2.4cqi 6cqi 11cqi; border-radius: 6cqi 6cqi 0 0; background: #fff; font-size: 3.6cqi; }
.aj-psheet .aj-sheet__grab { width: 11cqi; height: 1.2cqi; margin: 0 auto 1.6cqi; }
.aj-psheet__row { display: flex; align-items: center; gap: 3.4cqi; margin-bottom: 1cqi; }
.aj-psheet__ring { width: 13cqi; height: 13cqi; }
.aj-psheet__row > span { display: flex; flex-direction: column; gap: 1.2cqi; }
.aj-psheet__row b { font: 700 5cqi/1.1 var(--f-body); }
.aj-psheet__row span span { font: 500 3.4cqi/1.2 var(--f-body); color: var(--aj-muted); }
.aj-psheet__btn { display: flex; align-items: center; justify-content: center; gap: 1.4cqi; height: 11cqi; border-radius: 99px; border: 1px solid var(--aj-line); font: 600 3.8cqi/1 var(--f-body); color: var(--aj-ink); }
.aj-psheet__btn svg { width: 3.6cqi; height: 3.6cqi; }
.aj-psheet__btn--main { background: var(--aj-btn); border-color: var(--aj-btn); color: #fff; }
.aj-solved { display: flex; flex-direction: column; gap: 3.2cqi; padding: 4.6cqi 6cqi 0; }
.aj-solved__h { display: flex; align-items: center; justify-content: center; gap: 1.8cqi; font: 700 6cqi/1 var(--f-body); }
.aj-solved__icon { display: grid; place-items: center; width: 7.4cqi; height: 7.4cqi; border-radius: 50%; background: var(--aj-acc); color: #fff; }
.aj-solved__icon svg { width: 4.4cqi; height: 4.4cqi; }
.aj-solved__stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2.8cqi 0; border-radius: 3.4cqi; background: var(--aj-pale); }
.aj-solved__stats > span { display: flex; flex-direction: column; align-items: center; gap: 1cqi; font: 500 2.9cqi/1 var(--f-body); color: var(--aj-muted); }
.aj-solved__stats b { font: 700 4.6cqi/1 var(--f-body); color: var(--aj-ink); font-variant-numeric: tabular-nums; }
.aj-confetti { position: absolute; inset: 0 0 auto; height: 80cqi; z-index: 5; pointer-events: none; }
.aj-confetti i { position: absolute; top: calc(18cqi + mod(var(--i) * 37, 50) * 1cqi); left: calc(6cqi + mod(var(--i) * 53, 88) * 1cqi); width: 1.8cqi; height: 3cqi; border-radius: 0.5cqi; background: var(--aj-acc); rotate: calc(var(--i) * 47deg); opacity: 0; }
.aj-confetti i:nth-child(3n) { background: var(--aj-acc-2); }
.aj-confetti i:nth-child(3n + 1) { background: #5b8def; width: 2.2cqi; height: 2.2cqi; border-radius: 50%; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-shot { animation: aj-rise 1s var(--ease-out) calc(var(--n, 0) * 0.1s) both; }
.aj-shot--1 { --n: 1; } .aj-shot--2 { --n: 2; } .aj-shot--3 { --n: 3; } .aj-shot--4 { --n: 4; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-ghost { animation: aj-ghost 6s ease-in-out 1s infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-zoom { animation: aj-zoom 7s ease-in-out 1s infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-touch { animation: aj-touch 7s ease-in-out 1s infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-touch--b { animation-name: aj-touch-b; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-psheet { animation: aj-sheet-up 0.9s var(--ease-out) 0.7s both; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-psheet__ring .aj-ring__fg { animation: aj-ring-fill 1.4s var(--ease-out) 1.2s both; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-confetti i { animation: aj-confetti 3.6s cubic-bezier(0.2, 0.6, 0.4, 1) calc(1.2s + var(--i) * 0.06s) infinite; }
.js:not(.reduce-motion) .illu--app-jigsaw-screens .aj-sp--tray { animation: none; }
@keyframes aj-ghost { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.08; } }
@keyframes aj-zoom { 0%, 100% { transform: scale(2); } 50% { transform: scale(1.7); } }
@keyframes aj-touch { 0%, 100% { translate: 0 0; } 50% { translate: 4cqi 6cqi; } }
@keyframes aj-touch-b { 0%, 100% { translate: 0 0; } 50% { translate: -4cqi -6cqi; } }
@keyframes aj-sheet-up { from { transform: translateY(100%); } }
@keyframes aj-confetti { 0% { opacity: 0; transform: translateY(-6cqi) scale(0.6); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(22cqi) rotate(160deg); } }
@keyframes aj-rim { from { opacity: 1; } to { opacity: 0; } }
@keyframes aj-slot-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aj-shadow { from { opacity: 0.34; } to { opacity: 0; } }
@keyframes aj-flash { 0% { opacity: 0; } 25% { opacity: 0.55; } 100% { opacity: 0; } }
@keyframes aj-tick { from { --aj-sec: 46; } to { --aj-sec: 52; } }
@keyframes aj-cuts-soft { from { opacity: 1; } to { opacity: 0.4; } }
@keyframes aj-sheen { from { transform: translateX(0); } to { transform: translateX(1100px); } }
@keyframes aj-fade-in { from { opacity: 0; } }
@keyframes aj-pop { from { opacity: 0; transform: translateY(10px) scale(0.86); } }
@keyframes aj-pop-icon { from { transform: scale(0.4) rotate(-30deg); } }
@keyframes aj-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes aj-drop { from { opacity: 0; transform: translateY(-26px) rotate(-10deg) scale(0.9); } }
@keyframes aj-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4cqi); } }
@keyframes aj-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.8cqi) rotate(4deg); } }
.illu--app-jigsaw-hero{--aj-d:5.4s;--aj-done:4.93s}
@keyframes aj-h-p0{0%,4.6%{transform:translate(-358.5px,489px) rotate(-5deg) scale(0.84)}7.2%{transform:translate(-358.5px,463px) rotate(-4deg) scale(0.9)}8.4%{transform:translate(-357.6px,456.9px) rotate(-4deg) scale(0.906)}9.5%{transform:translate(-350.8px,415.1px) rotate(-3.7deg) scale(0.947)}10.7%{transform:translate(-324.6px,311.4px) rotate(-3.2deg) scale(1.045)}11.9%{transform:translate(-242px,150.5px) rotate(-2deg) scale(1.125)}13%{transform:translate(-117.4px,43.7px) rotate(-0.8deg) scale(1.031)}14.2%{transform:translate(-37.1px,9.9px) rotate(-0.2deg) scale(0.994)}15.3%{transform:translate(-4.7px,1.1px) rotate(0deg) scale(0.999)}16.5%{transform:translate(0px,0px) rotate(0deg) scale(1)}17.8%{transform:translate(0px,0px) rotate(0deg) scale(0.975)}19.4%{transform:translate(0px,0px) rotate(0deg) scale(1)}100%{transform:none}}
@keyframes aj-h-p1{0%,6.5%{transform:translate(-104.5px,489px) rotate(4deg) scale(0.84)}8.7%{transform:translate(-119.9px,489px) rotate(4deg) scale(0.84)}10.9%{transform:translate(-193.1px,489px) rotate(4deg) scale(0.84)}13.1%,16.5%{transform:translate(-208.5px,489px) rotate(4deg) scale(0.84)}19.1%{transform:translate(-208.5px,463px) rotate(3.2deg) scale(0.9)}20.2%{transform:translate(-208px,456.9px) rotate(3.2deg) scale(0.906)}21.4%{transform:translate(-204px,415.1px) rotate(3deg) scale(0.947)}22.5%{transform:translate(-188.8px,311.4px) rotate(2.5deg) scale(1.045)}23.7%{transform:translate(-140.7px,150.5px) rotate(1.6deg) scale(1.125)}24.9%{transform:translate(-68.3px,43.7px) rotate(0.7deg) scale(1.031)}26%{transform:translate(-21.6px,9.9px) rotate(0.2deg) scale(0.994)}27.2%{transform:translate(-2.8px,1.1px) rotate(0deg) scale(0.999)}28.3%{transform:translate(0px,0px) rotate(0deg) scale(1)}29.6%{transform:translate(0px,0px) rotate(0deg) scale(0.975)}31.3%{transform:translate(0px,0px) rotate(0deg) scale(1)}100%{transform:none}}
@keyframes aj-h-p2{0%,6.5%{transform:translate(-150.5px,709px) rotate(-3deg) scale(0.84)}8.7%{transform:translate(-165.9px,709px) rotate(-3deg) scale(0.84)}10.9%{transform:translate(-239.1px,709px) rotate(-3deg) scale(0.84)}13.1%,18.3%{transform:translate(-254.5px,709px) rotate(-3deg) scale(0.84)}20.6%{transform:translate(-269.9px,709px) rotate(-3deg) scale(0.84)}22.8%{transform:translate(-343.1px,709px) rotate(-3deg) scale(0.84)}25%,28.3%{transform:translate(-358.5px,709px) rotate(-3deg) scale(0.84)}30.9%{transform:translate(-358.5px,683px) rotate(-2.4deg) scale(0.9)}32.1%{transform:translate(-357.6px,674px) rotate(-2.4deg) scale(0.906)}33.2%{transform:translate(-350.8px,612.3px) rotate(-2.3deg) scale(0.947)}34.4%{transform:translate(-324.6px,459.4px) rotate(-1.9deg) scale(1.045)}35.6%{transform:translate(-242px,222px) rotate(-1.2deg) scale(1.125)}36.7%{transform:translate(-117.4px,64.5px) rotate(-0.5deg) scale(1.031)}37.9%{transform:translate(-37.1px,14.7px) rotate(-0.2deg) scale(0.994)}39%{transform:translate(-4.7px,1.6px) rotate(0deg) scale(0.999)}40.2%{transform:translate(0px,0px) rotate(0deg) scale(1)}41.5%{transform:translate(0px,0px) rotate(0deg) scale(0.975)}43.1%{transform:translate(0px,0px) rotate(0deg) scale(1)}100%{transform:none}}
@keyframes aj-h-p3{0%,6.5%{transform:translate(103.5px,599px) rotate(6deg) scale(0.84)}8.7%{transform:translate(88.1px,599px) rotate(6deg) scale(0.84)}10.9%{transform:translate(14.9px,599px) rotate(6deg) scale(0.84)}13.1%,18.3%{transform:translate(-0.5px,599px) rotate(6deg) scale(0.84)}20.6%{transform:translate(-15.9px,599px) rotate(6deg) scale(0.84)}22.8%{transform:translate(-89.1px,599px) rotate(6deg) scale(0.84)}25%,30.2%{transform:translate(-104.5px,599px) rotate(6deg) scale(0.84)}32.4%{transform:translate(-119.9px,599px) rotate(6deg) scale(0.84)}34.6%{transform:translate(-193.1px,599px) rotate(6deg) scale(0.84)}36.9%,40.2%{transform:translate(-208.5px,599px) rotate(6deg) scale(0.84)}42.8%{transform:translate(-208.5px,573px) rotate(4.8deg) scale(0.9)}43.9%{transform:translate(-208px,565.4px) rotate(4.8deg) scale(0.906)}45.1%{transform:translate(-204px,513.7px) rotate(4.5deg) scale(0.947)}46.2%{transform:translate(-188.8px,385.4px) rotate(3.8deg) scale(1.045)}47.4%{transform:translate(-140.7px,186.2px) rotate(2.4deg) scale(1.125)}48.6%{transform:translate(-68.3px,54.1px) rotate(1deg) scale(1.031)}49.7%{transform:translate(-21.6px,12.3px) rotate(0.3deg) scale(0.994)}50.9%{transform:translate(-2.8px,1.4px) rotate(0deg) scale(0.999)}52%{transform:translate(0px,0px) rotate(0deg) scale(1)}53.3%{transform:translate(0px,0px) rotate(0deg) scale(0.975)}55%{transform:translate(0px,0px) rotate(0deg) scale(1)}100%{transform:none}}
@keyframes aj-h-p4{0%,6.5%{transform:translate(132.5px,489px) rotate(-4deg) scale(0.84)}8.7%{transform:translate(117.1px,489px) rotate(-4deg) scale(0.84)}10.9%{transform:translate(43.9px,489px) rotate(-4deg) scale(0.84)}13.1%,18.3%{transform:translate(28.5px,489px) rotate(-4deg) scale(0.84)}20.6%{transform:translate(13.1px,489px) rotate(-4deg) scale(0.84)}22.8%{transform:translate(-60.1px,489px) rotate(-4deg) scale(0.84)}25%,30.2%{transform:translate(-75.5px,489px) rotate(-4deg) scale(0.84)}32.4%{transform:translate(-90.9px,489px) rotate(-4deg) scale(0.84)}34.6%{transform:translate(-164.1px,489px) rotate(-4deg) scale(0.84)}36.9%,42%{transform:translate(-179.5px,489px) rotate(-4deg) scale(0.84)}44.3%{transform:translate(-194.9px,489px) rotate(-4deg) scale(0.84)}46.5%{transform:translate(-268.1px,489px) rotate(-4deg) scale(0.84)}48.7%,52%{transform:translate(-283.5px,489px) rotate(-4deg) scale(0.84)}54.6%{transform:translate(-283.5px,463px) rotate(-3.2deg) scale(0.9)}55.8%{transform:translate(-282.8px,456.9px) rotate(-3.2deg) scale(0.906)}56.9%{transform:translate(-277.4px,415.1px) rotate(-3deg) scale(0.947)}58.1%{transform:translate(-256.7px,311.4px) rotate(-2.5deg) scale(1.045)}59.3%{transform:translate(-191.4px,150.5px) rotate(-1.6deg) scale(1.125)}60.4%{transform:translate(-92.8px,43.7px) rotate(-0.7deg) scale(1.031)}61.6%{transform:translate(-29.3px,9.9px) rotate(-0.2deg) scale(0.994)}62.7%{transform:translate(-3.8px,1.1px) rotate(0deg) scale(0.999)}63.9%{transform:translate(0px,0px) rotate(0deg) scale(1)}65.2%{transform:translate(0px,0px) rotate(0deg) scale(0.975)}66.9%{transform:translate(0px,0px) rotate(0deg) scale(1)}100%{transform:none}}
@keyframes aj-h-p5{0%,6.5%{transform:translate(86.5px,599px) rotate(3deg) scale(0.84)}8.7%{transform:translate(71.1px,599px) rotate(3deg) scale(0.84)}10.9%{transform:translate(-2.1px,599px) rotate(3deg) scale(0.84)}13.1%,18.3%{transform:translate(-17.5px,599px) rotate(3deg) scale(0.84)}20.6%{transform:translate(-32.9px,599px) rotate(3deg) scale(0.84)}22.8%{transform:translate(-106.1px,599px) rotate(3deg) scale(0.84)}25%,30.2%{transform:translate(-121.5px,599px) rotate(3deg) scale(0.84)}32.4%{transform:translate(-136.9px,599px) rotate(3deg) scale(0.84)}34.6%{transform:translate(-210.1px,599px) rotate(3deg) scale(0.84)}36.9%,42%{transform:translate(-225.5px,599px) rotate(3deg) scale(0.84)}44.3%{transform:translate(-240.9px,599px) rotate(3deg) scale(0.84)}46.5%{transform:translate(-314.1px,599px) rotate(3deg) scale(0.84)}48.7%,53.9%{transform:translate(-329.5px,599px) rotate(3deg) scale(0.84)}56.1%{transform:translate(-344.9px,599px) rotate(3deg) scale(0.84)}58.3%{transform:translate(-418.1px,599px) rotate(3deg) scale(0.84)}60.6%,63.9%{transform:translate(-433.5px,599px) rotate(3deg) scale(0.84)}66.5%{transform:translate(-433.5px,573px) rotate(2.4deg) scale(0.9)}67.6%{transform:translate(-432.5px,565.4px) rotate(2.4deg) scale(0.906)}68.8%{transform:translate(-424.2px,513.7px) rotate(2.3deg) scale(0.947)}70%{transform:translate(-392.6px,385.4px) rotate(1.9deg) scale(1.045)}71.1%{transform:translate(-292.6px,186.2px) rotate(1.2deg) scale(1.125)}72.3%{transform:translate(-141.9px,54.1px) rotate(0.5deg) scale(1.031)}73.4%{transform:translate(-44.9px,12.3px) rotate(0.2deg) scale(0.994)}74.6%{transform:translate(-5.7px,1.4px) rotate(0deg) scale(0.999)}75.7%{transform:translate(0px,0px) rotate(0deg) scale(1)}77%{transform:translate(0px,0px) rotate(0deg) scale(0.975)}78.7%{transform:translate(0px,0px) rotate(0deg) scale(1)}100%{transform:none}}
@keyframes aj-h-p6{0%,6.5%{transform:translate(340.5px,599px) rotate(-6deg) scale(0.84)}8.7%{transform:translate(325.1px,599px) rotate(-6deg) scale(0.84)}10.9%{transform:translate(251.9px,599px) rotate(-6deg) scale(0.84)}13.1%,18.3%{transform:translate(236.5px,599px) rotate(-6deg) scale(0.84)}20.6%{transform:translate(221.1px,599px) rotate(-6deg) scale(0.84)}22.8%{transform:translate(147.9px,599px) rotate(-6deg) scale(0.84)}25%,30.2%{transform:translate(132.5px,599px) rotate(-6deg) scale(0.84)}32.4%{transform:translate(117.1px,599px) rotate(-6deg) scale(0.84)}34.6%{transform:translate(43.9px,599px) rotate(-6deg) scale(0.84)}36.9%,42%{transform:translate(28.5px,599px) rotate(-6deg) scale(0.84)}44.3%{transform:translate(13.1px,599px) rotate(-6deg) scale(0.84)}46.5%{transform:translate(-60.1px,599px) rotate(-6deg) scale(0.84)}48.7%,53.9%{transform:translate(-75.5px,599px) rotate(-6deg) scale(0.84)}56.1%{transform:translate(-90.9px,599px) rotate(-6deg) scale(0.84)}58.3%{transform:translate(-164.1px,599px) rotate(-6deg) scale(0.84)}60.6%,65.7%{transform:translate(-179.5px,599px) rotate(-6deg) scale(0.84)}68%{transform:translate(-194.9px,599px) rotate(-6deg) scale(0.84)}70.2%{transform:translate(-268.1px,599px) rotate(-6deg) scale(0.84)}72.4%,75.7%{transform:translate(-283.5px,599px) rotate(-6deg) scale(0.84)}78.3%{transform:translate(-283.5px,573px) rotate(-4.8deg) scale(0.9)}79.5%{transform:translate(-282.8px,565.4px) rotate(-4.8deg) scale(0.906)}80.6%{transform:translate(-277.4px,513.7px) rotate(-4.5deg) scale(0.947)}81.8%{transform:translate(-256.7px,385.4px) rotate(-3.8deg) scale(1.045)}83%{transform:translate(-191.4px,186.2px) rotate(-2.4deg) scale(1.125)}84.1%{transform:translate(-92.8px,54.1px) rotate(-1deg) scale(1.031)}85.3%{transform:translate(-29.3px,12.3px) rotate(-0.3deg) scale(0.994)}86.4%{transform:translate(-3.8px,1.4px) rotate(0deg) scale(0.999)}87.6%{transform:translate(0px,0px) rotate(0deg) scale(1)}88.9%{transform:translate(0px,0px) rotate(0deg) scale(0.975)}90.6%{transform:translate(0px,0px) rotate(0deg) scale(1)}100%{transform:none}}
@keyframes aj-h-prog{0%{transform:scaleX(0.89)}16.46%{transform:scaleX(0.89)}21.11%{transform:scaleX(0.91)}28.31%{transform:scaleX(0.91)}32.96%{transform:scaleX(0.92)}40.17%{transform:scaleX(0.92)}44.81%{transform:scaleX(0.94)}52.02%{transform:scaleX(0.94)}56.67%{transform:scaleX(0.95)}63.87%{transform:scaleX(0.95)}68.52%{transform:scaleX(0.97)}75.72%{transform:scaleX(0.97)}80.37%{transform:scaleX(0.98)}87.57%{transform:scaleX(0.98)}92.22%{transform:scaleX(1)}100%{transform:none}}
.device.alw-dev {
width: 100%;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), inset 0 0 0 4px rgba(0, 0, 0, 0.5), 0 48px 80px -40px rgba(74, 10, 36, 0.6), 0 22px 34px -26px rgba(40, 0, 14, 0.55);
}
.alw-dev .device__screen { background: #2a0613; }
.device.alw-dev::before { content: ""; position: absolute; right: -1.2%; top: 25%; width: 1.5%; height: 10.5%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #121516, #3b4043 70%, #24282a); }
.device.alw-dev::after { content: ""; position: absolute; left: -1.2%; top: 18.5%; width: 1.5%; height: 15%; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #24282a, #3b4043 30%, #121516) 0 0 / 100% 42% no-repeat, linear-gradient(90deg, #24282a, #3b4043 30%, #121516) 0 100% / 100% 42% no-repeat; }
.alw-dev .device__screen::after { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.alw-scr {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--c, #89003a);
color: #fff;
font-family: var(--f-display);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.alw-scr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 55% at 15% 0%, rgba(255, 255, 255, 0.07), transparent 60%), linear-gradient(180deg, transparent 55%, rgba(20, 0, 8, 0.14)); pointer-events: none; }
.alw-scr .device__status { color: #fff; }
.alw-status--dark { color: #2b1520 !important; }
.alw-scr__main { position: absolute; top: 38cqi; left: 9cqi; right: 8cqi; }
.alw-word { display: block; font: 600 14.4cqi/1.08 var(--f-display); letter-spacing: -0.012em; -webkit-text-stroke: 0.022em currentColor; white-space: nowrap; }
.alw-def { display: block; margin-top: 7cqi; font: 500 6.3cqi/1.3 var(--f-display); letter-spacing: -0.006em; color: rgba(255, 255, 255, 0.95); text-wrap: pretty; }
.alw-l { display: inline-block; }
.alw-ex { position: absolute; top: 46cqi; left: 9cqi; right: 8cqi; }
.alw-ex__label { display: block; font: 600 4.7cqi/1.2 var(--f-display); -webkit-text-stroke: 0.02em currentColor; }
.alw-ex__text { display: block; margin-top: 4.6cqi; font: 500 8.3cqi/1.2 var(--f-display); letter-spacing: -0.012em; text-wrap: pretty; }
.alw-i { display: block; width: 5.4cqi; height: 5.4cqi; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.alw-acts { position: absolute; left: 0; right: 0; bottom: 36cqi; display: flex; justify-content: center; gap: 7.4cqi; }
.alw-act {
position: relative;
display: grid;
place-items: center;
width: 13.6cqi;
height: 13.6cqi;
border-radius: 50%;
color: rgba(255, 255, 255, 0.92);
background: radial-gradient(120% 120% at 28% 18%, rgba(255, 255, 255, 0.07), transparent 55%), rgba(28, 0, 10, 0.36);
box-shadow: inset 0 0.35cqi 0.5cqi rgba(255, 255, 255, 0.05), inset 0 -0.6cqi 1.2cqi rgba(0, 0, 0, 0.18), 0 1.4cqi 3cqi -1cqi rgba(20, 0, 8, 0.35);
}
.alw-act::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 0.35cqi solid rgba(255, 255, 255, 0.55); opacity: 0; pointer-events: none; }
.alw-act .alw-i { grid-area: 1 / 1; width: 5cqi; height: 5cqi; }
.alw-act--save .alw-i--fill { color: #fff; }
.alw-tabs {
position: absolute;
left: 50%;
bottom: 8cqi;
translate: -50% 0;
display: grid;
grid-template-columns: 1fr 1fr;
width: 58cqi;
height: 16.4cqi;
padding: 1.1cqi;
border-radius: 999px;
background: rgba(30, 0, 12, 0.3);
box-shadow: inset 0 0 0 0.3cqi rgba(255, 255, 255, 0.07), inset 0 0.6cqi 1.4cqi rgba(255, 255, 255, 0.03), 0 1.6cqi 4cqi -1.4cqi rgba(20, 0, 8, 0.4);
}
.alw-tab { display: grid; place-content: center; justify-items: center; gap: 1cqi; border-radius: 999px; font: 500 2.9cqi/1 var(--f-display); color: rgba(255, 255, 255, 0.86); }
.alw-tab .alw-i { width: 4.4cqi; height: 4.4cqi; stroke-width: 1.5; }
.alw-tab.is-on { background: rgba(18, 0, 7, 0.5); box-shadow: inset 0 0.4cqi 1cqi rgba(0, 0, 0, 0.3), 0 0 0 0.25cqi rgba(255, 255, 255, 0.05); color: #fff; }
.alw-pill {
position: absolute;
z-index: 4;
display: flex;
align-items: center;
gap: 2.4cqi;
padding: 1.7cqi 3.8cqi 1.7cqi 1.7cqi;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
box-shadow: 0 0 0 1px rgba(137, 0, 58, 0.07), 0 26px 46px -24px rgba(74, 10, 36, 0.55), 0 8px 16px -10px rgba(74, 10, 36, 0.3);
color: #2b0a18;
white-space: nowrap;
}
.alw-pill__icon { flex: none; display: grid; place-items: center; width: max(34px, 8.6cqi); height: max(34px, 8.6cqi); border-radius: 50%; background: #fbe4ed; color: #89003a; }
.alw-pill__icon .alw-i { width: 48%; height: 48%; }
.alw-pill__icon .alw-heart { width: 50%; height: 50%; fill: currentColor; }
.alw-pill__icon--play { position: relative; background: linear-gradient(150deg, #a3104f, #7d123b); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 14px -6px rgba(137, 0, 58, 0.7); }
.alw-pill__icon--play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #c2185b; opacity: 0; }
.alw-pill__col { display: grid; gap: max(3px, 0.7cqi); }
.alw-pill strong { font: 600 max(13px, 3.1cqi)/1.1 var(--f-display); letter-spacing: -0.01em; color: #4a0a24; }
.alw-pill__col > span:not(.alw-wave) { font: 400 max(11.5px, 2.6cqi)/1.2 var(--f-body); color: #84606f; }
.alw-wave { display: flex; align-items: center; gap: max(2px, 0.55cqi); height: max(15px, 4.2cqi); }
.alw-wave i { flex: none; width: max(2.5px, 0.7cqi); height: var(--h); border-radius: 9px; background: linear-gradient(180deg, #b0175a, #7d123b); transform-origin: 50% 50%; }
.alw-heart { display: block; fill: currentColor; }
.alw-spark { display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.alw-panel-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.alw-panel-bg--pink { background: radial-gradient(55% 60% at 82% 16%, rgba(241, 190, 209, 0.8), transparent 70%), radial-gradient(50% 55% at 8% 92%, rgba(227, 190, 241, 0.55), transparent 70%); }
.alw-panel-bg--blush { background: radial-gradient(55% 55% at 14% 12%, rgba(240, 200, 204, 0.85), transparent 70%), radial-gradient(50% 55% at 92% 90%, rgba(241, 190, 209, 0.6), transparent 70%); }
.alw-panel-bg--lilac { background: radial-gradient(60% 60% at 84% 14%, rgba(223, 203, 236, 0.95), transparent 70%), radial-gradient(55% 55% at 6% 78%, rgba(241, 196, 216, 0.6), transparent 70%); }
.alw-hero { position: relative; width: 100%; max-width: 600px; margin-inline: auto; container: alw-hero / inline-size; }
.alw-hero__stage { position: relative; height: 116cqi; }
.alw-hero__main { position: absolute; z-index: 2; left: 42cqi; top: 4cqi; width: 50cqi; }
.alw-hero__back { position: absolute; z-index: 1; left: 5cqi; top: 15cqi; width: 41cqi; rotate: -8deg; }
.alw-hero__back .device.alw-dev { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), inset 0 0 0 4px rgba(0, 0, 0, 0.5), 0 40px 70px -40px rgba(74, 10, 36, 0.5); }
.alw-hero__back .alw-ex { top: 50cqi; }
.alw-hero__audio { left: 0; top: 74cqi; }
.alw-hero__saved { right: -2cqi; top: 58cqi; }
.alw-hero__saved .alw-pill__icon .alw-i { width: 44%; height: 44%; }
.alw-hero__doodle { position: absolute; z-index: 0; left: 0; top: 1cqi; width: 33cqi; height: auto; overflow: visible; }
.alw-doodle__line { fill: none; stroke: #d98aa8; stroke-width: 1.8px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.alw-doodle__heart { fill: #d27a9b; transform-box: fill-box; transform-origin: 50% 50%; }
.alw-hero__spark { position: absolute; z-index: 0; color: #c0507a; }
.alw-hero__spark--1 { left: 0; top: 30cqi; width: 5.6cqi; }
.alw-hero__spark--2 { left: 93cqi; top: 4cqi; width: 4.4cqi; color: #a35d8f; }
.alw-hero__spark--3 { left: 22cqi; top: 109cqi; width: 3.4cqi; }
.alw-hero__h { position: absolute; z-index: 3; }
.alw-hero__h--1 { left: 94cqi; top: 52cqi; width: 4.6cqi; color: #b0175a; }
.alw-hero__h--2 { left: 33cqi; top: 9cqi; width: 3.2cqi; color: #e59ab7; }
.alw-hero__h--3 { left: 2cqi; top: 60cqi; width: 3cqi; color: #9a4c86; }
.alw-hero__h--4 { left: 92cqi; top: 92cqi; width: 3.6cqi; color: #e59ab7; }
.alw-hero__h--5 { left: 35cqi; top: 108cqi; width: 3.8cqi; color: #b0175a; }
.alw-hero__h--6 { left: 63cqi; top: -3cqi; width: 2.8cqi; color: #c86b93; }
@container alw-hero (max-width: 480px) {
.alw-hero__stage { height: 132cqi; }
.alw-hero__main { left: 34cqi; top: 6cqi; width: 58cqi; }
.alw-hero__back { left: 2cqi; top: 20cqi; width: 46cqi; }
.alw-hero__audio { top: 94cqi; left: 0; }
.alw-hero__saved { top: 70cqi; right: -1cqi; }
.alw-hero__h--4 { top: 118cqi; }
.alw-hero__h--5 { left: 24cqi; top: 125cqi; }
.alw-hero__spark--3 { top: 124cqi; }
}
.alw-wall {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
container: alw-wall / inline-size;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
}
.alw-wall__cols { position: absolute; left: 50%; top: 50%; display: flex; align-items: flex-start; gap: 3.6cqi; height: 170%; translate: -47% -50%; rotate: -7deg; }
.alw-wall__col { flex: none; width: max(28.5cqi, 128px); }
.alw-wall__col--1 { translate: 0 -4%; }
.alw-wall__col--2 { translate: 0 -27%; }
.alw-wall__col--3 { translate: 0 -12%; }
.alw-card {
position: relative;
display: block;
margin-bottom: max(3.6cqi, 14px);
overflow: hidden;
border-radius: clamp(14px, 4.2cqi, 26px);
background: radial-gradient(130% 60% at 10% 0%, rgba(255, 255, 255, 0.08), transparent 60%), var(--c);
color: #fff;
font-family: var(--f-display);
container-type: inline-size;
-webkit-font-smoothing: antialiased;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 26px 44px -26px rgba(74, 10, 36, 0.6);
}
.alw-card--word { aspect-ratio: 4 / 5.2; }
.alw-card__w { display: block; margin: 20cqi 10cqi 0; font: 600 15cqi/1.05 var(--f-display); letter-spacing: -0.015em; -webkit-text-stroke: 0.02em currentColor; }
.alw-card__d { display: block; margin: 6cqi 10cqi 0; font: 500 6.6cqi/1.3 var(--f-display); color: rgba(255, 255, 255, 0.92); }
.alw-card__acts { position: absolute; left: 10cqi; bottom: 9cqi; display: flex; gap: 4.4cqi; }
.alw-card__acts i { display: grid; place-items: center; width: 14cqi; height: 14cqi; border-radius: 50%; background: rgba(28, 0, 10, 0.34); color: rgba(255, 255, 255, 0.9); }
.alw-card__acts .alw-i { width: 6cqi; height: 6cqi; }
.alw-card__acts .is-saved .alw-i { color: #fff; }
.alw-card__l { display: block; margin: 13cqi 10cqi 0; font: 600 5.6cqi/1.2 var(--f-display); -webkit-text-stroke: 0.02em currentColor; }
.alw-card__s { display: block; margin: 5cqi 10cqi 0; padding-bottom: 16cqi; font: 500 9.6cqi/1.2 var(--f-display); letter-spacing: -0.012em; }
.alw-fan { position: relative; z-index: 1; width: 100%; container: alw-fan / inline-size; }
.alw-fan__stage { position: relative; height: max(92cqi, 300px); }
.alw-count {
position: absolute;
left: 0;
bottom: 0;
display: grid;
gap: max(4px, 0.8cqi);
width: max-content;
max-width: 100%;
padding: max(16px, 3.8cqi) max(18px, 4.4cqi) max(18px, 4.2cqi);
border-radius: max(18px, 4.6cqi);
background: rgba(255, 255, 255, 0.86);
-webkit-backdrop-filter: blur(18px) saturate(1.5);
backdrop-filter: blur(18px) saturate(1.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 30px 60px -28px rgba(74, 10, 36, 0.6);
}
.alw-count__num { font: 600 max(40px, 12cqi)/0.95 var(--f-display); letter-spacing: -0.035em; color: #89003a; -webkit-text-stroke: 0.012em currentColor; }
.alw-count__txt { font: 400 max(13px, 2.9cqi)/1.25 var(--f-body); color: #6e4b5a; }
.alw-topics { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: max(6px, 1.2cqi); margin: max(8px, 1.6cqi) 0 0; padding: 0; list-style: none; }
.alw-topics li { display: inline-flex; align-items: center; gap: max(5px, 1cqi); padding: max(6px, 1.1cqi) max(10px, 2cqi) max(6px, 1.1cqi) max(8px, 1.5cqi); border-radius: 999px; background: #fbe4ed; font: 500 max(12px, 2.4cqi)/1 var(--f-label); color: #5a0d2e; }
.alw-topics .alw-heart { width: max(9px, 2cqi); color: #b0175a; }
.alw-anat { position: relative; z-index: 1; width: 100%; max-width: 540px; margin-inline: auto; container: alw-anat / inline-size; }
.alw-anat__stage { position: relative; height: 121cqi; }
.alw-anat__phone { position: absolute; z-index: 2; left: 3cqi; top: 4cqi; width: 52cqi; container-type: inline-size; }
.alw-anat__ex { position: absolute; z-index: 1; left: 50cqi; top: 15cqi; width: 46cqi; rotate: 6deg; container-type: inline-size; }
.alw-anat__card { position: relative; aspect-ratio: 1 / 1.16; border-radius: 13cqi; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 34px 60px -30px rgba(74, 10, 36, 0.6); }
.alw-anat__card .alw-ex { top: 17cqi; left: 12cqi; right: 10cqi; }
.alw-anat__card .alw-ex__label { font-size: 6cqi; }
.alw-anat__card .alw-ex__text { margin-top: 5cqi; font-size: 10.6cqi; }
.alw-sel { position: absolute; z-index: 5; border: 1.5px solid #ffb7d0; border-radius: 2px; pointer-events: none; }
.alw-sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #e0558f; }
.alw-sel i:nth-child(1) { left: -4.5px; top: -4.5px; }
.alw-sel i:nth-child(2) { right: -4.5px; top: -4.5px; }
.alw-sel i:nth-child(3) { left: -4.5px; bottom: -4.5px; }
.alw-sel i:nth-child(4) { right: -4.5px; bottom: -4.5px; }
.alw-sel b { position: absolute; left: -1.5px; bottom: calc(100% + 7px); padding: 4px 8px 5px; border-radius: 4px; background: #fff; color: #89003a; font: 400 max(11px, 2.4cqi)/1 var(--f-mono); letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(40, 0, 14, 0.6); }
.alw-sel--round { border-radius: 50%; }
.alw-sel--round i { display: none; }
.alw-sel--word { left: 8cqi; top: 35cqi; width: 84cqi; height: 34cqi; }
.alw-sel--round { width: 17cqi; height: 17cqi; top: 165cqi; }
.alw-sel--speak b { left: auto; right: -1.5px; }
.alw-sel--speak { left: 21.6cqi; }
.alw-sel--save { left: 61.4cqi; }
.alw-sel--ex { left: 6cqi; top: 10cqi; width: 88cqi; height: 58cqi; }
.alw-anat__audio { left: 57cqi; top: 99cqi; }
@container alw-anat (max-width: 400px) {
.alw-anat__stage { height: 132cqi; }
.alw-anat__phone { left: 0; top: 6cqi; width: 57cqi; }
.alw-anat__ex { left: 51cqi; top: 17cqi; width: 48cqi; }
.alw-anat__audio { left: auto; right: 0; top: 108cqi; }
}
.alw-home { position: relative; z-index: 1; width: 100%; max-width: 520px; margin-inline: auto; container: alw-home / inline-size; }
.alw-home__stage { position: relative; height: 98cqi; }
.alw-home__phone { position: absolute; z-index: 2; left: 16cqi; top: 5cqi; width: 68cqi; }
.alw-hs {
position: absolute;
inset: 0;
overflow: hidden;
font-family: var(--f-body);
background:
radial-gradient(70% 40% at 85% 8%, rgba(255, 255, 255, 0.55), transparent 70%),
radial-gradient(80% 45% at 0% 60%, rgba(229, 154, 183, 0.55), transparent 70%),
radial-gradient(90% 50% at 100% 95%, rgba(150, 90, 160, 0.4), transparent 70%),
linear-gradient(170deg, #f7dce7 0%, #ecd3ea 45%, #d9c4e8 100%);
}
.alw-wd { position: absolute; top: 15cqi; left: 6.4cqi; right: 6.4cqi; }
.alw-wd__card {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
height: 42cqi;
padding: 5cqi 5.6cqi 4.4cqi;
border-radius: 6cqi;
overflow: hidden;
color: #fff;
background: radial-gradient(90% 90% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 60%), linear-gradient(150deg, #9c0a47, #7a0f37 60%, #651031);
box-shadow: 0 2cqi 6cqi -2cqi rgba(74, 10, 36, 0.45);
}
.alw-wd__top { display: flex; align-items: center; justify-content: space-between; font: 600 2.8cqi/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.alw-wd__top .alw-heart { width: 3.4cqi; color: #ff9cc0; }
.alw-wd__slides { position: relative; display: grid; align-content: center; }
.alw-wd__slide { grid-area: 1 / 1; display: grid; gap: 1.4cqi; }
.alw-wd__slide:not(:first-child) { opacity: 0; }
.alw-wd__word { font: 600 8.6cqi/1 var(--f-display); letter-spacing: -0.015em; -webkit-text-stroke: 0.02em currentColor; }
.alw-wd__def { font: 500 3.8cqi/1.25 var(--f-display); color: rgba(255, 255, 255, 0.9); }
.alw-wd__days { position: relative; display: flex; justify-content: space-between; font: 600 2.3cqi/1 var(--f-label); color: rgba(255, 255, 255, 0.55); }
.alw-wd__days span { position: relative; z-index: 1; display: grid; place-items: center; width: 5cqi; height: 5cqi; }
.alw-wd__days .alw-wd__d0 { color: #651031; }
.alw-wd__dot { --step: 11.83cqi; position: absolute; left: 0; top: 0; width: 5cqi; height: 5cqi; border-radius: 50%; background: #fff; }
.alw-hs__label { display: block; margin-top: 1.8cqi; text-align: center; font: 500 2.8cqi/1 var(--f-body); color: #3b2030; }
.alw-hs__grid { position: absolute; top: 70cqi; left: 6.4cqi; right: 6.4cqi; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 5cqi; justify-items: center; }
.alw-app { display: grid; justify-items: center; gap: 1.6cqi; width: 100%; }
.alw-app__icon { display: grid; place-items: center; width: 15.4cqi; height: 15.4cqi; border-radius: 3.6cqi; background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)); box-shadow: inset 0 0 0 0.25cqi rgba(255, 255, 255, 0.7), 0 1.2cqi 3cqi -1.4cqi rgba(74, 10, 36, 0.35); }
.alw-app__icon svg { width: 8cqi; height: 8cqi; fill: none; stroke: #8b2a55; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.alw-app__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 2.5cqi/1 var(--f-body); color: #3b2030; }
.alw-app--lw .alw-app__icon { background: linear-gradient(150deg, #951150, #7e0b40 50%, #6a0833); box-shadow: inset 0 0 0 0.25cqi rgba(255, 255, 255, 0.1), 0 1.4cqi 3cqi -1.2cqi rgba(74, 10, 36, 0.6); }
.alw-hs__search { position: absolute; left: 50%; top: 124cqi; translate: -50% 0; display: inline-flex; align-items: center; gap: 1.4cqi; padding: 1.8cqi 3.6cqi 1.8cqi 3cqi; border-radius: 999px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 0.25cqi rgba(255, 255, 255, 0.6); font: 500 2.9cqi/1 var(--f-body); color: #4b2a3a; }
.alw-hs__search svg { width: 3.4cqi; height: 3.4cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.alw-app__l { font: 500 9cqi/1 var(--f-body); color: #fdf3f7; text-shadow: 0.4cqi 0.5cqi 0.8cqi rgba(40, 0, 14, 0.35); }
.alw-home__icon {
position: absolute;
z-index: 3;
left: 4cqi;
top: 58cqi;
display: grid;
place-items: center;
width: 17cqi;
height: 17cqi;
border-radius: 4cqi;
rotate: -10deg;
background: linear-gradient(150deg, #951150, #7e0b40 50%, #6a0833);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 40px -20px rgba(74, 10, 36, 0.7);
container-type: inline-size;
}
.alw-home__icon .alw-app__l { font-size: 58cqi; }
.alw-home__tip { right: -1cqi; top: 33cqi; }
.alw-home__spark { position: absolute; z-index: 0; color: #a35d8f; }
.alw-home__spark--1 { left: 6cqi; top: 26cqi; width: 4.6cqi; }
.alw-home__spark--2 { left: 88cqi; top: 12cqi; width: 3.4cqi; color: #c0507a; }
@container alw-home (max-width: 400px) {
.alw-home__stage { height: 104cqi; }
.alw-home__phone { left: 9cqi; width: 82cqi; }
.alw-home__icon { left: 0; top: 70cqi; width: 16cqi; height: 16cqi; }
.alw-home__tip { display: none; }
}
.alw-band__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(40% 70% at 12% 20%, rgba(241, 190, 209, 0.75), transparent 70%), radial-gradient(40% 70% at 88% 80%, rgba(227, 190, 241, 0.7), transparent 70%), radial-gradient(30% 50% at 50% 100%, rgba(235, 203, 204, 0.8), transparent 70%); }
.alw-band__row { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: clamp(18px, 2vw, 30px); padding: 1% 0 0; }
.alw-band__item { flex: none; display: grid; justify-items: center; gap: 22px; width: clamp(176px, 15.6vw, 232px); }
.alw-band__item:nth-child(1), .alw-band__item:nth-child(5) { margin-top: clamp(20px, 4.4vw, 64px); }
.alw-band__item:nth-child(2), .alw-band__item:nth-child(4) { margin-top: clamp(8px, 1.8vw, 26px); }
.alw-band__cap { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(137, 0, 58, 0.06), 0 12px 24px -18px rgba(74, 10, 36, 0.5); font: 500 14px/1 var(--f-label); color: #4a0a24; white-space: nowrap; }
.alw-band__cap i { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fbe4ed; font: 400 11.5px/1 var(--f-mono); font-style: normal; color: #89003a; }
.alw-lib__title { position: absolute; top: 20cqi; left: 8cqi; font: 600 10cqi/1 var(--f-display); letter-spacing: -0.015em; -webkit-text-stroke: 0.02em currentColor; }
.alw-lib__count { position: absolute; top: 33cqi; left: 8cqi; font: 500 3.6cqi/1 var(--f-display); color: rgba(255, 255, 255, 0.7); }
.alw-lib__list { position: absolute; top: 44cqi; left: 5cqi; right: 5cqi; display: grid; gap: 2.6cqi; margin: 0; padding: 0; list-style: none; }
.alw-lib__list li { position: relative; display: grid; gap: 1.6cqi; padding: 4.2cqi 13cqi 4.4cqi 4.6cqi; border-radius: 4.4cqi; background: rgba(28, 0, 10, 0.26); box-shadow: inset 0 0 0 0.25cqi rgba(255, 255, 255, 0.06); }
.alw-lib__w { font: 600 5.6cqi/1 var(--f-display); -webkit-text-stroke: 0.015em currentColor; }
.alw-lib__d { font: 500 3.7cqi/1.25 var(--f-display); color: rgba(255, 255, 255, 0.78); }
.alw-lib__list .alw-i { position: absolute; right: 4.4cqi; top: 50%; translate: 0 -50%; width: 4.6cqi; height: 4.6cqi; color: #fff; }
.alw-scr--dim::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(10, 0, 4, 0.36); }
.alw-sheet {
position: absolute;
z-index: 6;
left: 0;
right: 0;
bottom: 0;
display: grid;
gap: 4cqi;
padding: 3cqi 5cqi 9cqi;
border-radius: 9cqi 9cqi 0 0;
background: rgba(246, 242, 245, 0.97);
color: #1d1018;
font-family: var(--f-body);
}
.alw-sheet__grab { justify-self: center; width: 10cqi; height: 1.2cqi; border-radius: 9px; background: rgba(60, 30, 45, 0.22); }
.alw-sheet__img { position: relative; display: grid; align-content: start; gap: 3cqi; justify-self: center; width: 70cqi; aspect-ratio: 1; padding: 9cqi 8cqi; border-radius: 4cqi; color: #fff; background: var(--c); box-shadow: 0 3cqi 7cqi -3cqi rgba(74, 10, 36, 0.55); font-family: var(--f-display); }
.alw-sheet__w { font: 600 4cqi/1 var(--f-display); -webkit-text-stroke: 0.02em currentColor; }
.alw-sheet__s { font: 500 6.4cqi/1.2 var(--f-display); letter-spacing: -0.01em; }
.alw-sheet__brand { position: absolute; left: 8cqi; bottom: 6cqi; font: 500 2.8cqi/1 var(--f-display); color: rgba(255, 255, 255, 0.7); }
.alw-sheet__people { display: flex; justify-content: space-between; padding: 0 2cqi; }
.alw-sheet__people span { display: grid; justify-items: center; gap: 1.6cqi; }
.alw-sheet__people i { display: grid; place-items: center; width: 13cqi; height: 13cqi; border-radius: 50%; background: var(--b); font: 600 3.6cqi/1 var(--f-body); font-style: normal; color: #4a0a24; }
.alw-sheet__people b { font: 400 2.9cqi/1 var(--f-body); color: #3b2030; }
.alw-sheet__rows { display: grid; border-radius: 4cqi; background: #fff; overflow: hidden; }
.alw-sheet__rows span { display: flex; align-items: center; justify-content: space-between; padding: 3.4cqi 4.4cqi; font: 400 3.8cqi/1 var(--f-body); }
.alw-sheet__rows span + span { box-shadow: inset 0 1px 0 rgba(60, 30, 45, 0.1); }
.alw-sheet__rows .alw-i { width: 5cqi; height: 5cqi; color: #3b2030; }
@keyframes alw-rise { from { opacity: 0; transform: translateY(7%); } }
@keyframes alw-rise-sm { from { opacity: 0; transform: translateY(14px); } }
@keyframes alw-fade { from { opacity: 0; } }
@keyframes alw-letter { from { opacity: 0; transform: translateY(0.32em); filter: blur(5px); } }
@keyframes alw-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes alw-pill-in { from { opacity: 0; transform: translateY(12px) scale(0.92); } }
@keyframes alw-back-in { from { opacity: 0; transform: translate(10%, 4%) rotate(7deg); } }
@keyframes alw-draw { from { stroke-dashoffset: 1; } }
@keyframes alw-talk { 0%, 100% { transform: scaleY(0.32); } 30% { transform: scaleY(1); } 55% { transform: scaleY(0.5); } 78% { transform: scaleY(0.86); } }
@keyframes alw-ring { 0% { opacity: 0.8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes alw-float { 0% { opacity: 0; transform: translateY(0) scale(0.6) rotate(-10deg); } 18% { opacity: 1; } 75% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-110%) scale(1) rotate(10deg); } }
@keyframes alw-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(0.72) rotate(22deg); opacity: 0.55; } }
@keyframes alw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6%); } }
@keyframes alw-sel-in { from { opacity: 0; transform: scale(1.08); } }
@keyframes alw-up { to { transform: translateY(-50%); } }
@keyframes alw-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes alw-cycle { 0% { opacity: 0; transform: translateY(2.4cqi); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-2.4cqi); } }
@keyframes alw-dot { 0%, 30% { translate: 0 0; } 34%, 63% { translate: var(--step) 0; } 67%, 96% { translate: calc(var(--step) * 2) 0; } 100% { translate: 0 0; } }
@keyframes alw-day1 { 0%, 30%, 100% { color: #651031; } 33%, 97% { color: rgba(255, 255, 255, 0.55); } }
@keyframes alw-day2 { 0%, 31%, 66%, 100% { color: rgba(255, 255, 255, 0.55); } 34%, 63% { color: #651031; } }
@keyframes alw-day3 { 0%, 64%, 99%, 100% { color: rgba(255, 255, 255, 0.55); } 67%, 96% { color: #651031; } }
.js:not(.reduce-motion) .illu--app-lovely-words-hero:not(.is-in) :is(.alw-hero__main, .alw-hero__back, .alw-pill, .alw-heart, .alw-spark, .alw-hero__doodle),
.js:not(.reduce-motion) .illu--app-lovely-words-f1:not(.is-in) :is(.alw-wall__col, .alw-count, .alw-topics li),
.js:not(.reduce-motion) .illu--app-lovely-words-f2:not(.is-in) :is(.alw-anat__phone, .alw-anat__ex, .alw-sel, .alw-pill),
.js:not(.reduce-motion) .illu--app-lovely-words-f3:not(.is-in) :is(.alw-home__phone, .alw-home__icon, .alw-pill, .alw-spark),
.js:not(.reduce-motion) .illu--app-lovely-words-screens:not(.is-in) .alw-band__item { opacity: 0; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main { animation: alw-rise 1s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__back { animation: alw-back-in 1.2s var(--ease-out) 0.3s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-l { animation: alw-letter 0.7s var(--ease-out) calc(0.75s + var(--i) * 0.085s) both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-def { animation: alw-rise-sm 0.8s var(--ease-out) 1.45s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-act { animation: alw-pop 0.6s var(--spring) 1.7s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-act--share { animation-delay: 1.78s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-act--save { animation-delay: 1.86s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-tabs { animation: alw-fade 0.8s var(--ease-out) 1.6s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-act--speak::after { animation: alw-ring 2.4s var(--ease-out) 2.2s infinite; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__main .alw-i--fill { animation: alw-pop 0.6s var(--spring) 3s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__audio { animation: alw-pill-in 0.8s var(--spring) 2.2s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__saved { animation: alw-pill-in 0.8s var(--spring) 3.15s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__doodle { animation: alw-fade 0.3s linear 0.9s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-doodle__line { animation: alw-draw 1.8s var(--ease-in-out) 0.9s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-doodle__heart { animation: alw-pop 0.6s var(--spring) 2.5s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-spark { animation: alw-pop 0.6s var(--spring) 1.2s both, alw-twinkle 4.5s ease-in-out 2s infinite; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__spark--2 { animation-delay: 1.4s, 3.2s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__spark--3 { animation-delay: 1.6s, 2.6s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__h { animation: alw-float 8s ease-in-out 3.2s infinite both; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__h--2 { animation-duration: 9.5s; animation-delay: 4.4s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__h--3 { animation-duration: 10s; animation-delay: 5.6s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__h--4 { animation-duration: 8.5s; animation-delay: 3.8s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__h--5 { animation-duration: 9s; animation-delay: 6.4s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__h--6 { animation-duration: 11s; animation-delay: 5s; }
.js:not(.reduce-motion) .illu--app-lovely-words-hero.is-in .alw-hero__audio .alw-pill__icon--play::after { animation: alw-ring 2.4s var(--ease-out) 2.9s infinite; }
.js:not(.reduce-motion) :is(.illu--app-lovely-words-hero, .illu--app-lovely-words-f2).is-in .alw-wave i { animation: alw-talk 2.2s ease-in-out calc(3s + var(--i) * -0.17s) infinite; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-wall__col { animation: alw-fade 1.2s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-wall__col--2 { animation-delay: 0.25s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-wall__col--3 { animation-delay: 0.4s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-wall__track { animation: alw-up 64s linear infinite; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-wall__col--2 .alw-wall__track { animation: alw-down 72s linear infinite; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-wall__col--3 .alw-wall__track { animation-duration: 80s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-count { animation: alw-pill-in 0.9s var(--spring) 0.7s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-topics li { animation: alw-pill-in 0.7s var(--spring) 1s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-topics li:nth-child(2) { animation-delay: 1.08s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-topics li:nth-child(3) { animation-delay: 1.16s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f1.is-in .alw-topics li:nth-child(4) { animation-delay: 1.24s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-anat__phone { animation: alw-rise 1s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-anat__ex { animation: alw-back-in 1.1s var(--ease-out) 0.35s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-sel { animation: alw-sel-in 0.6s var(--ease-out) 0.9s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-sel--speak { animation-delay: 1.3s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-sel--save { animation-delay: 1.7s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-sel--ex { animation-delay: 2.1s; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-anat__audio { animation: alw-pill-in 0.8s var(--spring) 1.45s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-act--speak::after { animation: alw-ring 2.4s var(--ease-out) 1.6s infinite; }
.js:not(.reduce-motion) .illu--app-lovely-words-f2.is-in .alw-i--fill { animation: alw-pop 0.6s var(--spring) 1.85s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-home__phone { animation: alw-rise 1s var(--ease-out) 0.1s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-home__icon { animation: alw-pop 0.7s var(--spring) 0.8s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-home__tip { animation: alw-pill-in 0.8s var(--spring) 1.1s both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-spark { animation: alw-pop 0.6s var(--spring) 1s both, alw-twinkle 4.5s ease-in-out 2s infinite; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-wd__slide { opacity: 0; animation: alw-cycle 12s var(--ease-in-out) calc(1.2s + var(--n) * 4s) infinite both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-wd__dot { animation: alw-dot 12s var(--ease-in-out) 1.2s infinite both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-wd__d0 { animation: alw-day1 12s linear 1.2s infinite both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-wd__d1 { animation: alw-day2 12s linear 1.2s infinite both; }
.js:not(.reduce-motion) .illu--app-lovely-words-f3.is-in .alw-wd__d2 { animation: alw-day3 12s linear 1.2s infinite both; }
.js:not(.reduce-motion) .illu--app-lovely-words-screens.is-in .alw-band__item { animation: alw-rise 1s var(--ease-out) calc(0.1s + (var(--k) + 2) * 0.1s) both; }
.js:not(.reduce-motion) .illu--app-lovely-words-screens.is-in .alw-band__item > .device { animation: alw-bob 7s ease-in-out calc(1.4s + var(--k) * 0.9s) infinite; }
.illu--app-namaz-takip-hero,
.illu--app-namaz-takip-f1,
.illu--app-namaz-takip-f2,
.illu--app-namaz-takip-f3,
.illu--app-namaz-takip-screens {
--an-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--an-navy: #0f172a;
--an-ink: #1b2233;
--an-text: #2a2421;
--an-slate: #64748b;
--an-line: #e3e8ef;
--an-cream: #fff5ed;
--an-peach: #ffe8d9;
--an-orange: #f29a35;
--an-orange-hi: #f7b45c;
--an-orange-ink: #d95d1b;
--an-green: #2fae74;
--u: 1cqi;
--an-float: 0 2.2em 3.6em -1.8em rgb(28 36 64 / 0.32), 0 0.5em 1.2em -0.5em rgb(28 36 64 / 0.16);
container-type: inline-size;
position: relative;
color: var(--an-ink);
font-family: var(--an-ui);
line-height: 1.2;
letter-spacing: 0;
text-align: left;
-webkit-font-smoothing: antialiased;
}
:where(.illu--app-namaz-takip-hero, .illu--app-namaz-takip-f1, .illu--app-namaz-takip-f2, .illu--app-namaz-takip-f3, .illu--app-namaz-takip-screens) :where(p, ul, ol) { margin: 0; padding: 0; list-style: none; }
.illu--app-namaz-takip-hero svg,
.illu--app-namaz-takip-f1 svg,
.illu--app-namaz-takip-f2 svg,
.illu--app-namaz-takip-f3 svg,
.illu--app-namaz-takip-screens svg { display: block; overflow: visible; }
[class*="illu--app-namaz-takip"] .device { --device-w: 100%; }
[class*="illu--app-namaz-takip"] .device__status { font-family: var(--an-ui); font-weight: 600; }
[class*="illu--app-namaz-takip"] .device__screen { font-family: var(--an-ui); }
@property --an-m { syntax: "<integer>"; inherits: true; initial-value: 59; }
@property --an-s { syntax: "<integer>"; inherits: true; initial-value: 29; }
.an-cd { display: flex; justify-content: center; font-variant-numeric: tabular-nums; counter-reset: an-m var(--an-m) an-s var(--an-s); white-space: nowrap; }
.an-cd b { font: inherit; }
.an-cd__m::before { content: counter(an-m, decimal-leading-zero); }
.an-cd__s::before { content: counter(an-s, decimal-leading-zero); }
@keyframes an-tick-s { from { --an-s: 59; } to { --an-s: 0; } }
@keyframes an-tick-m { from { --an-m: 59; } to { --an-m: 50; } }
.an-cloud { position: absolute; }
.an-cloud path { fill: #f7f9fc; }
.an-bird { position: absolute; }
.an-bird path { fill: #3b4253; }
.an-spark { position: absolute; width: 2.4cqi; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.an-moon { position: absolute; border-radius: 50%; box-shadow: inset -2.5cqi -1.7cqi 0 0.1cqi #fff6e2; filter: drop-shadow(0 0 1.6cqi rgb(255 236 196 / 0.9)); }
.an-home { background: var(--an-cream); color: var(--an-text); }
.an-home__sky { position: absolute; inset: 0 0 auto; height: 66cqi; overflow: hidden; background: linear-gradient(180deg, #86a2c8 0%, #a5bbdb 46%, #c3d4e9 100%); }
.an-home__dawn { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgb(150 140 196 / 0.35) 0%, rgb(247 186 150 / 0.75) 100%); }
.an-home__cloud--1 { left: 10.5cqi; top: 27.5cqi; width: 12.5cqi; }
.an-home__cloud--2 { left: 57cqi; top: 27.5cqi; width: 16cqi; }
.an-home__bird--1 { left: 17cqi; top: 22.6cqi; width: 5.2cqi; }
.an-home__bird--2 { left: 5.4cqi; top: 63cqi; width: 3.8cqi; }
.an-home .device__status { color: #0b0f19; }
.an-home__city { position: absolute; inset: 15cqi 0 auto; text-align: center; font: 600 4.15cqi/1 var(--an-ui); color: #121826; }
.an-home__pager { position: absolute; left: 50%; top: 21.2cqi; display: flex; gap: 1cqi; translate: -50% 0; }
.an-home__pager i { width: 1.3cqi; height: 1.3cqi; border-radius: 1cqi; background: #e2e8f1; }
.an-home__pager i:first-child { width: 4.4cqi; background: #1e293b; }
.an-home__qibla { position: absolute; right: 3.6cqi; top: 17cqi; display: grid; place-items: center; width: 8.6cqi; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.72); box-shadow: inset 0 0 0 0.3cqi rgb(255 255 255 / 0.9), 0 0.6cqi 1.6cqi -0.6cqi rgb(30 41 59 / 0.35); }
.an-home__qibla svg { width: 5.2cqi; fill: none; stroke: #1e293b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.an-home__ring { position: absolute; left: 10cqi; top: 26cqi; width: 80cqi; height: 80cqi; }
.an-home__ring path { fill: none; stroke-width: 0.52; stroke-linecap: round; stroke-dasharray: 0 1.5; }
.an-home__ring-day { stroke: #66779a; }
.an-home__ring-night { stroke: #f0a24c; }
.an-home__sunrig { position: absolute; left: 50cqi; top: 66cqi; width: 0; height: 0; rotate: -28deg; }
.an-home__sun { position: absolute; left: -2.7cqi; top: -42.2cqi; width: 5.4cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #fee6ad, #f8c76f 70%); box-shadow: 0 0 0 1.5cqi rgb(251 210 130 / 0.38), 0 0 5cqi 3.6cqi rgb(250 196 104 / 0.5); }
.an-home__name { position: absolute; inset: 37.6cqi 0 auto; padding-left: 0.42em; text-align: center; font: 600 2.75cqi/1 var(--an-ui); letter-spacing: 0.42em; text-transform: uppercase; color: #4c5568; }
.an-home__at { position: absolute; inset: 42.6cqi 0 auto; text-align: center; font: 700 13.6cqi/1 var(--an-ui); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: #1b2233; }
.an-home__left { position: absolute; inset: 71cqi 0 auto; text-align: center; font: 500 3.25cqi/1 var(--an-ui); color: #6d635e; }
.an-home__cd { position: absolute; inset: 76.4cqi 0 auto; font: 700 13.6cqi/1 var(--an-ui); letter-spacing: -0.01em; color: #231c19; }
.an-home__bars { position: absolute; left: 0; top: 91.2cqi; width: 100cqi; height: 12cqi; }
.an-home__bars > * { position: absolute; left: calc(var(--x) * 1cqi - 0.62cqi); top: 0; width: 1.24cqi; height: calc(var(--h) * 1cqi); border-radius: 0.62cqi; }
.an-home__bars i { background: linear-gradient(180deg, var(--an-orange-hi), var(--an-orange)); }
.an-home__bars b { background: #fff; box-shadow: 0 0 0 0.12cqi rgb(242 154 53 / 0.12); }
.an-times { position: absolute; inset: 111.4cqi 0 auto; }
.an-times li { display: flex; align-items: center; gap: 3.6cqi; height: 11.8cqi; padding: 0 6.2cqi 0 5.6cqi; font: 500 3.8cqi/1 var(--an-ui); color: var(--an-text); }
.an-times svg { flex: none; width: 5cqi; height: 5cqi; fill: none; stroke: #8b7e76; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.an-times b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.an-times .is-current { background: var(--an-peach); color: var(--an-orange-ink); }
.an-times .is-current span, .an-times .is-current b { font-weight: 600; }
.an-times .is-current svg { stroke: currentColor; }
.an-tabs { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 23cqi; padding-top: 3.4cqi; background: #fff; border-top: 0.3cqi solid #eef1f5; }
.an-tabs > span { display: flex; flex-direction: column; align-items: center; gap: 1.1cqi; font: 500 2.5cqi/1 var(--an-ui); color: #a3b0c2; }
.an-tabs svg { width: 5.6cqi; height: 5.6cqi; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.an-tabs .an-fill { fill: currentColor; stroke: none; }
.an-tabs > .is-active { color: var(--an-navy); font-weight: 600; }
.an-tabs__plus i { display: grid; place-items: center; width: 11.6cqi; aspect-ratio: 1; margin-top: -1.4cqi; border-radius: 50%; background: var(--an-navy); box-shadow: 0 1.2cqi 2.4cqi -1cqi rgb(15 23 42 / 0.55); }
.an-tabs__plus svg { width: 5.4cqi; height: 5.4cqi; stroke: #fff; stroke-width: 2.2; }
.an-tabs::after { content: ""; position: absolute; left: 50%; bottom: 2cqi; width: 34cqi; height: 1.3cqi; border-radius: 1cqi; background: #111; translate: -50% 0; }
.an-wdg { position: relative; container-type: inline-size; aspect-ratio: 1; overflow: hidden; border-radius: 22%; color: #121826; font-family: var(--an-ui); background: linear-gradient(180deg, #86b4ec 0%, #b4d0f2 36%, #e6edf5 66%, #f8f0e7 100%); box-shadow: var(--an-float); }
.an-wdg__city { position: absolute; left: 10cqi; top: 10cqi; font: 600 9.6cqi/1 var(--an-ui); }
.an-wdg__cloud--1 { right: 7cqi; top: 7.5cqi; width: 20cqi; }
.an-wdg__cloud--2 { left: -9cqi; bottom: -3cqi; width: 40cqi; }
.an-wdg__cloud--2 path { fill: #fbf6f0; }
.an-wdg__arc { position: absolute; left: 0; top: 18cqi; width: 100cqi; height: 50cqi; }
.an-wdg__arc path { fill: none; stroke: #6d87b0; stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 0 2.6; }
.an-wdg__sun { position: absolute; left: 12.5cqi; top: 28cqi; width: 9cqi; aspect-ratio: 1; border-radius: 50%; background: #f39b25; box-shadow: 0 0 0 2cqi #fde1a9, 0 0 7cqi 4cqi rgb(253 205 120 / 0.6); }
.an-wdg__sun--next { left: 82cqi; top: 54cqi; width: 6.5cqi; background: #fde9a6; box-shadow: 0 0 0 1.4cqi rgb(253 233 170 / 0.55), 0 0 6cqi 3cqi rgb(253 225 150 / 0.55); }
.an-wdg__label { position: absolute; inset: 49cqi 0 auto; text-align: center; font: 600 7.6cqi/1 var(--an-ui); color: #1b2233; }
.an-wdg__cd { position: absolute; inset: 59.5cqi 0 auto; font: 700 17.5cqi/1 var(--an-ui); letter-spacing: -0.01em; color: #121826; }
.an-wdg__ticks { position: absolute; left: 9cqi; right: 9cqi; bottom: 8.6cqi; display: flex; align-items: center; justify-content: space-between; height: 8.6cqi; }
.an-wdg__ticks > * { width: 3.3cqi; height: 100%; border-radius: 2cqi; }
.an-wdg__ticks > :first-child, .an-wdg__ticks > :last-child { height: 62%; }
.an-wdg__ticks > :nth-child(2), .an-wdg__ticks > :nth-last-child(2) { height: 84%; }
.an-wdg__ticks i { background: #f39a2c; }
.an-wdg__ticks b { background: rgb(255 255 255 / 0.95); box-shadow: 0 0 0 0.3cqi rgb(242 154 53 / 0.08); }
.an-qmini { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55em; padding: 1.15em 1.2em 1.2em; border-radius: 1.25em; background: linear-gradient(160deg, #fdf3da 0%, #fde8d4 100%); box-shadow: var(--an-float); color: #7a3a14; font-size: 2.3cqi; }
.an-qmini__icon { display: grid; place-items: center; width: 2.6em; aspect-ratio: 1; margin-bottom: 0.2em; border-radius: 50%; background: rgb(255 255 255 / 0.7); }
.an-qmini__icon svg { width: 1.45em; height: 1.45em; fill: none; stroke: #7a3a14; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.an-qmini__num { font: 500 1.05em/1 var(--an-ui); }
.an-qmini__num b { margin-right: 0.12em; font: 600 2.5em/1 var(--an-ui); letter-spacing: -0.02em; color: #7c3512; }
.an-qmini__sub { font: 500 0.92em/1.3 var(--an-ui); color: #8a4a20; }
.an-hero { position: relative; height: 113cqi; }
.an-hero__sky { position: absolute; left: 6cqi; top: 9cqi; width: 88cqi; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: linear-gradient(180deg, #a7c2e7 0%, #c4d6ee 40%, #ece2d8 72%, #fbefe3 100%); box-shadow: inset 0 -3cqi 8cqi -4cqi rgb(242 161 66 / 0.18); }
.an-hero__orbit { position: absolute; left: 0; top: 3cqi; width: 100cqi; height: 100cqi; }
.an-hero__orbit circle { fill: none; stroke: #9fb3d3; stroke-width: 0.42; stroke-linecap: round; stroke-dasharray: 0 1.9; }
.an-hero__cloud { opacity: 0.9; }
.an-hero__cloud--1 { left: -3cqi; top: 64cqi; width: 24cqi; }
.an-hero__cloud--2 { left: 70cqi; top: 40cqi; width: 19cqi; }
.an-hero__moon { left: 71cqi; top: 13cqi; width: 8.6cqi; aspect-ratio: 1; }
.an-hero__spark--1 { left: 9cqi; top: 22cqi; }
.an-hero__spark--2 { left: 4cqi; top: 50cqi; width: 1.7cqi; }
.an-hero__spark--3 { left: 80cqi; top: 32cqi; width: 2cqi; }
.an-hero__phone { position: absolute; left: 25cqi; top: 0; width: 50cqi; }
.an-hero__widget { position: absolute; left: -3cqi; top: 40cqi; width: 31cqi; rotate: -4deg; }
.an-hero__qada { right: -3cqi; top: 70cqi; width: 30cqi; }
@container (max-width: 520px) {
.an-hero { height: 141cqi; }
.an-hero__sky { left: 8cqi; top: 14cqi; width: 90cqi; }
.an-hero__orbit { left: 3cqi; top: 9cqi; width: 100cqi; height: 100cqi; }
.an-hero__moon { left: 64cqi; top: 10cqi; }
.an-hero__cloud--1 { left: -4cqi; top: 72cqi; }
.an-hero__cloud--2 { left: 76cqi; top: 50cqi; }
.an-hero__spark--3 { left: 80cqi; top: 70cqi; }
.an-hero__phone { left: 33cqi; width: 64cqi; }
.an-hero__widget { left: -2cqi; top: 30cqi; width: 37cqi; }
.an-hero__qada { left: -2cqi; right: auto; top: 82cqi; width: 38cqi; font-size: 3cqi; }
}
@keyframes an-sunrise { from { rotate: -82deg; } }
@keyframes an-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes an-fade-in { from { opacity: 0; } }
@keyframes an-bar-fill { from { background: #fff; } }
@keyframes an-rise { from { opacity: 0; transform: translateY(5cqi); } }
@keyframes an-breathe { 50% { opacity: 0.4; } }
@keyframes an-drift { to { translate: 2.6cqi 0; } }
@keyframes an-glide { to { translate: 1.6cqi -0.7cqi; } }
@keyframes an-float { 50% { translate: 0 -1.1cqi; } }
@keyframes an-twinkle { 50% { opacity: 0.35; scale: 0.7; } }
@keyframes an-glow { 50% { box-shadow: 0 0 0 1.9cqi rgb(251 210 130 / 0.3), 0 0 6.5cqi 4.6cqi rgb(250 196 104 / 0.55); } }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero:not(.is-in) :is(.an-hero__widget, .an-hero__qada, .an-hero__moon) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero:not(.is-in) .an-home__sunrig { rotate: -82deg; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero:not(.is-in) .an-home__dawn { opacity: 1; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero:not(.is-in) .an-home__bars i { background: #fff; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero:not(.is-in) .an-times .is-current { background: transparent; color: var(--an-text); }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__sunrig { animation: an-sunrise 2.4s cubic-bezier(0.2, 0.75, 0.25, 1) 0.45s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__dawn { animation: an-fade-out 2.6s ease-out 0.4s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__bars i { animation: an-bar-fill 0.45s ease-out calc(1s + var(--i) * 0.05s) both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__bars i.is-now { animation: an-bar-fill 0.45s ease-out 1.85s both, an-breathe 2.6s ease-in-out 2.5s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-times .is-current { animation: an-row-in 0.9s ease-out 2s both; }
@keyframes an-row-in { from { background: transparent; color: var(--an-text); } }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero__widget { animation: an-rise 1.1s var(--ease-out) 0.9s both, an-float 7s ease-in-out 2.2s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero__qada { animation: an-rise 1.1s var(--ease-out) 1.15s both, an-float 8s ease-in-out 3s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero__moon { animation: an-fade-in 1.6s ease-out 1.4s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero__cloud--1 { animation: an-drift 19s ease-in-out infinite alternate; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero__cloud--2 { animation: an-drift 23s ease-in-out -8s infinite alternate-reverse; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero { animation: an-tick-s 60s steps(60, jump-none) -30s infinite, an-tick-m 600s steps(10, jump-none) -30s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__cloud--1 { animation: an-drift 16s ease-in-out infinite alternate; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__cloud--2 { animation: an-drift 21s ease-in-out -6s infinite alternate-reverse; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__bird { animation: an-glide 9s ease-in-out infinite alternate; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__bird--2 { animation-duration: 11s; animation-delay: -4s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-home__sun { animation: an-glow 5s ease-in-out 3s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-spark { animation: an-twinkle 4.5s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero__spark--2 { animation-delay: -1.5s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-hero__spark--3 { animation-delay: -3s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-hero.is-in .an-wdg__ticks .is-now { animation: an-breathe 2.6s ease-in-out 2.5s infinite; }
.an-scr { background: #f5f6f8; color: var(--an-navy); }
.an-scr .device__status { color: #0b0f19; }
.an-scr__head { position: absolute; inset: 0 0 auto; height: 66cqi; }
.an-scr__body { position: absolute; inset: 0; padding: 15.2cqi 3.7cqi 0; }
.an-scr__icon { display: grid; place-items: center; width: 10cqi; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.66); }
.an-scr__icon svg { width: 5.4cqi; height: 5.4cqi; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.an-scr__total { display: flex; align-items: baseline; gap: 1.4cqi; margin-top: 4.4cqi; font: 500 3.3cqi/1 var(--an-ui); }
.an-scr__total b { font: 600 9.4cqi/1 var(--an-ui); letter-spacing: -0.035em; }
.an-scr__sub { margin-top: 2.5cqi; font: 500 3.05cqi/1.25 var(--an-ui); }
.an-scr__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4cqi; margin-top: 4.3cqi; }
.an-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.3); height: calc(var(--u) * 8.5); border: calc(var(--u) * 0.3) solid #dde3eb; border-radius: calc(var(--u) * 1.4); background: #fff; font: 500 calc(var(--u) * 3.1)/1 var(--an-ui); color: var(--an-navy); white-space: nowrap; }
.an-btn svg { width: calc(var(--u) * 3.7); height: calc(var(--u) * 3.7); fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.an-btn.is-off { border-color: #eef1f5; background: #fbfcfd; color: #c3cbd6; }
.an-btn[data-label]::after { content: attr(data-label); }
.an-qlist { display: flex; flex-direction: column; gap: 2.6cqi; margin-top: 3.6cqi; }
.an-qc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 2.7) calc(var(--u) * 2.4); align-items: center; padding: calc(var(--u) * 3) calc(var(--u) * 3.1); border: calc(var(--u) * 0.3) solid #e7ecf2; border-radius: calc(var(--u) * 2.4); background: #fff; }
.an-qc__ico { grid-area: 1 / 1; display: grid; place-items: center; width: calc(var(--u) * 8.2); aspect-ratio: 1; border-radius: 50%; background: #f1f5f9; }
.an-qc__ico svg { width: calc(var(--u) * 4.9); height: calc(var(--u) * 4.9); fill: none; stroke: #475569; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.an-qc__name { grid-area: 1 / 1; margin-left: calc(var(--u) * 11.4); font: 500 calc(var(--u) * 3.4)/1 var(--an-ui); color: var(--an-navy); }
.an-qc__count { grid-area: 1 / 2; justify-self: end; display: flex; align-items: baseline; gap: calc(var(--u) * 1); font: 500 calc(var(--u) * 2.85)/1 var(--an-ui); color: var(--an-slate); }
.an-qc__count b { font: 600 calc(var(--u) * 6.8)/1 var(--an-ui); color: var(--an-navy); }
.an-qc__count.is-zero b { color: #7cc08b; }
.an-swap { display: inline-grid; justify-items: end; }
.an-swap > * { grid-area: 1 / 1; }
.an-swap__old { opacity: 0; }
@keyframes an-swap-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-0.55em); } }
@keyframes an-swap-in { from { opacity: 0; transform: translateY(0.55em); } }
.an-tap { position: absolute; left: 50%; top: 50%; width: 9cqi; aspect-ratio: 1; margin: -4.5cqi 0 0 -4.5cqi; border-radius: 50%; background: rgb(15 23 42 / 0.16); box-shadow: 0 0 0 0.5cqi rgb(255 255 255 / 0.75), 0 1cqi 2.4cqi -0.6cqi rgb(15 23 42 / 0.35); opacity: 0; pointer-events: none; }
@keyframes an-tap { 0% { opacity: 0; scale: 1.6; } 22% { opacity: 1; scale: 1; } 42% { scale: 0.82; } 60% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.25; } }
@keyframes an-press { 0%, 30%, 70%, 100% { background: #fff; transform: none; } 42%, 58% { background: #eef2f7; transform: scale(0.97); } }
@keyframes an-ring { 0% { box-shadow: 0 0 0 0 rgb(242 154 53 / 0); } 30% { box-shadow: 0 0 0 0.9cqi rgb(242 154 53 / 0.28); } 100% { box-shadow: 0 0 0 1.8cqi rgb(242 154 53 / 0); } }
.afeat__visual:has(> .illu--app-namaz-takip-f2) { min-height: 0; padding: 0; background: linear-gradient(180deg, #fbe6cf 0%, #fcefe1 52%, #fdf6ee 100%); }
.an-f2 { position: relative; height: 102cqi; overflow: hidden; }
.an-f2__rays { position: absolute; right: -9cqi; top: -7cqi; width: 46cqi; height: 46cqi; fill: none; stroke: #f2c696; stroke-width: 1.5; stroke-linecap: round; opacity: 0.75; }
.an-f2__dunes { position: absolute; left: 0; bottom: 0; width: 100%; height: 26cqi; }
.an-f2__dune--back { fill: #f9e2cb; opacity: 0.7; }
.an-f2__dune--front { fill: #fcefe3; }
.an-f2__spark--1 { left: 13cqi; top: 26cqi; }
.an-f2__spark--2 { left: 84cqi; top: 58cqi; width: 2cqi; }
.an-f2__phone { position: absolute; left: 22.5cqi; top: 9cqi; width: 55cqi; }
.an-qada .an-scr__head { background: linear-gradient(165deg, #fcf3d9 0%, #fbedd2 45%, #fde3d1 100%); }
.an-qada .an-scr__body { color: #7c3512; }
.an-qada .an-scr__sub { color: #8a4a1e; }
@container (max-width: 480px) {
.an-f2 { height: 118cqi; }
.an-f2__phone { left: 16cqi; width: 68cqi; top: 10cqi; }
.an-f2__rays { right: -14cqi; top: -10cqi; width: 54cqi; height: 54cqi; }
}
.js:not(.reduce-motion) .illu--app-namaz-takip-f2:not(.is-in) :is(.an-qc, .an-scr__btns) { opacity: 0; transform: translateY(4cqi); }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2:not(.is-in) .an-swap__old { opacity: 1; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2:not(.is-in) .an-swap__new { opacity: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-scr__btns { animation: an-rise 0.8s var(--ease-out) 0.2s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-qc { animation: an-rise 0.8s var(--ease-out) both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-qc:nth-child(1) { animation-delay: 0.3s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-qc:nth-child(2) { animation-delay: 0.38s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-qc:nth-child(3) { animation-delay: 0.46s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-qc:nth-child(4) { animation-delay: 0.54s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-qc:nth-child(5) { animation-delay: 0.62s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-qc--tap { animation: an-rise 0.8s var(--ease-out) 0.3s both, an-ring 1.5s ease-out 2.15s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-tap { animation: an-tap 1.5s ease-in-out 1.5s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-btn--log { animation: an-press 1.5s ease-in-out 1.5s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-swap__old { animation: an-swap-out 0.45s ease-in 2.15s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-swap__new { animation: an-swap-in 0.6s var(--ease-out) 2.3s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-f2__rays { animation: an-spin 90s linear infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-spark { animation: an-twinkle 4.5s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f2.is-in .an-f2__spark--2 { animation-delay: -2s; }
@keyframes an-spin { to { rotate: 360deg; } }
.afeat__visual:has(> .illu--app-namaz-takip-f1) { min-height: 0; padding: 0; background: linear-gradient(180deg, #d8e5f6 0%, #e7edf8 46%, #fbf2e8 100%); }
.an-f1 { position: relative; height: 102cqi; overflow: hidden; }
.an-f1__cloud--1 { left: 63cqi; top: 9cqi; width: 23cqi; }
.an-f1__cloud--2 { left: 82cqi; top: 25cqi; width: 13cqi; opacity: 0.85; }
.an-f1__spark--1 { left: 66cqi; top: 44cqi; }
.an-f1__spark--2 { left: 92cqi; top: 50cqi; width: 1.8cqi; }
.an-f1__phone { position: absolute; left: 6cqi; top: 9cqi; width: 54cqi; }
.an-f1__float { --u: 1.32cqi; position: absolute; left: 56cqi; top: 64cqi; width: 41cqi; container-type: inline-size; }
.an-f1__float .an-qc { position: relative; border-color: #f0e6dc; box-shadow: var(--an-float); }
.an-f1__tag { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); margin: 0 0 calc(var(--u) * 2.4) calc(var(--u) * 1); padding: calc(var(--u) * 1.5) calc(var(--u) * 2.8) calc(var(--u) * 1.5) calc(var(--u) * 2.2); border-radius: 99px; background: #fff3e4; box-shadow: 0 0.6em 1.4em -0.8em rgb(124 53 18 / 0.35); font: 600 calc(var(--u) * 3.05)/1 var(--an-ui); color: #7c3512; }
.an-f1__tag svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.an-qc__count { position: relative; }
.an-f1__plus { position: absolute; right: -1.2em; top: -1.9em; padding: 0.35em 0.55em; border-radius: 99px; background: var(--an-orange); font: 600 calc(var(--u) * 2.7)/1 var(--an-ui); font-style: normal; color: #fff; opacity: 0; }
.an-logscr .an-scr__head { background: linear-gradient(160deg, #d6e6f8 0%, #dde5f8 50%, #e9e5f6 100%); }
.an-logscr .an-scr__body { color: #1e2a4a; }
.an-logscr .an-scr__total b { color: #1b2547; }
.an-logscr .an-scr__sub { color: #4b587a; }
.an-log { margin-top: 4.2cqi; padding: 1.8cqi 2.4cqi 1.4cqi; border: 0.3cqi solid #e7ecf2; border-radius: 2.4cqi; background: #fff; }
.an-log__row { display: grid; grid-template-columns: 24.5cqi repeat(5, minmax(0, 1fr)); align-items: center; justify-items: center; height: 11.2cqi; }
.an-log__row + .an-log__row { border-top: 0.25cqi solid #f1f4f8; }
.an-log__head { height: 7.6cqi; font: 500 2.7cqi/1 var(--an-ui); color: var(--an-slate); }
.an-log__head .is-today { padding: 1cqi 1.6cqi; border-radius: 3cqi; background: var(--an-navy); font-weight: 600; color: #fff; }
.an-log__p { justify-self: start; display: flex; align-items: center; gap: 1.8cqi; padding-left: 0.6cqi; font: 500 3.2cqi/1 var(--an-ui); color: var(--an-navy); }
.an-log__p svg { width: 4.4cqi; height: 4.4cqi; fill: none; stroke: #64748b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.an-cell { position: relative; display: grid; place-items: center; width: 7.4cqi; aspect-ratio: 1; border-radius: 50%; }
.an-cell svg { width: 5cqi; height: 5cqi; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.an-cell.is-done { background: #e1f3e8; }
.an-cell.is-done svg { stroke: #2b9a62; }
.an-cell.is-next, .an-cell__was { border: 0.35cqi dashed #c5cfdc; }
.an-cell.is-now { border: 0.45cqi solid var(--an-navy); box-shadow: 0 0 0 0.9cqi rgb(15 23 42 / 0.08); }
.an-cell.is-flip > i:not(.an-tap) { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.an-cell__was { opacity: 0; }
.an-cell__now { background: #ffe4d2; }
.an-cell__now svg { stroke: var(--an-orange-ink); }
.an-log__legend { display: flex; gap: 4.2cqi; margin-top: 2.8cqi; padding-left: 1cqi; font: 500 2.6cqi/1 var(--an-ui); color: #4f5b6d; }
.an-log__legend span { display: flex; align-items: center; gap: 1.3cqi; }
.an-log__legend i { width: 2.8cqi; aspect-ratio: 1; border-radius: 50%; }
.an-log__legend .is-done { background: #8fcfa9; }
.an-log__legend .is-missed { background: #f4a77a; }
.an-log__legend .is-next { border: 0.3cqi dashed #b6c1cf; }
.an-qrow { display: flex; align-items: center; gap: 2.6cqi; margin-top: 3.4cqi; padding: 2.4cqi 2.6cqi 2.4cqi 2.8cqi; border: 0.3cqi solid #e7ecf2; border-radius: 2.4cqi; background: #fff; }
.an-qrow .an-qc__ico svg { stroke: #7c3512; }
.an-qrow .an-qc__ico { background: #fdf0e1; }
.an-qrow__t { flex: 1; font: 500 3.4cqi/1 var(--an-ui); color: var(--an-navy); }
.an-qrow__n { display: flex; align-items: baseline; gap: 1cqi; font: 500 2.85cqi/1 var(--an-ui); color: var(--an-slate); }
.an-qrow__n b { font: 600 4.8cqi/1 var(--an-ui); color: #7c3512; }
.an-qrow__go { width: 4.2cqi; height: 4.2cqi; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 480px) {
.an-f1 { height: 133cqi; }
.an-f1__phone { left: 4cqi; width: 64cqi; top: 9cqi; }
.an-f1__float { left: 40cqi; top: 102.5cqi; width: 58cqi; }
.an-f1__cloud--1 { left: 70cqi; top: 12cqi; }
.an-f1__cloud--2 { left: 84cqi; top: 28cqi; }
.an-f1__spark--1 { left: 78cqi; top: 52cqi; }
}
@keyframes an-cell-in { from { opacity: 0; transform: scale(0.4); } }
@keyframes an-plus { 0% { opacity: 0; transform: translateY(0.6em) scale(0.6); } 18% { opacity: 1; transform: none; } 72% { opacity: 1; transform: translateY(-0.5em); } 100% { opacity: 0; transform: translateY(-1.1em); } }
@keyframes an-now { 50% { box-shadow: 0 0 0 1.8cqi rgb(15 23 42 / 0); } }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1:not(.is-in) :is(.an-cell, .an-f1__float, .an-log__legend, .an-qrow) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1:not(.is-in) .an-cell__was { opacity: 1; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1:not(.is-in) .an-cell__now { opacity: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1:not(.is-in) .an-swap__old { opacity: 1; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1:not(.is-in) .an-swap__new { opacity: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-cell { animation: an-cell-in 0.5s var(--spring) calc(0.35s + var(--c) * 0.14s + var(--r) * 0.05s) both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-cell.is-now { animation: an-cell-in 0.5s var(--spring) 1.06s both, an-now 2.4s ease-in-out 3.2s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-log__legend { animation: an-rise 0.8s var(--ease-out) 1.1s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-qrow { animation: an-rise 0.8s var(--ease-out) 1.2s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-f1__float { animation: an-rise 1s var(--ease-out) 0.9s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-cell .an-tap { animation: an-tap 1.4s ease-in-out 1.75s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-cell__was { animation: an-fade-out 0.3s ease-in 2.25s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-cell__now { animation: an-cell-in 0.55s var(--spring) 2.3s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-swap__old { animation: an-swap-out 0.45s ease-in 2.8s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-swap__new { animation: an-swap-in 0.6s var(--ease-out) 2.95s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-f1__plus { animation: an-plus 1.6s ease-out 2.75s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-f1__float .an-qc { animation: an-ring 1.5s ease-out 2.85s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-f1__cloud--1 { animation: an-drift 18s ease-in-out infinite alternate-reverse; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-f1__cloud--2 { animation: an-drift 14s ease-in-out -5s infinite alternate; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-spark { animation: an-twinkle 4.5s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f1.is-in .an-f1__spark--2 { animation-delay: -2.4s; }
.afeat__visual:has(> .illu--app-namaz-takip-f3) { min-height: 0; padding: 0; background: linear-gradient(160deg, #dde9fb 0%, #e2e3fa 55%, #ebe5fb 100%); }
.an-f3 { position: relative; height: 102cqi; overflow: hidden; }
.an-sprig { position: absolute; transform-origin: 50% 100%; }
.an-sprig path { fill: #b7bcef; }
.an-sprig .an-sprig__stem { fill: none; stroke: #b7bcef; stroke-width: 1.6; stroke-linecap: round; }
.an-f3__sprig--1 { left: 1cqi; bottom: -3cqi; width: 15cqi; rotate: -14deg; opacity: 0.75; }
.an-f3__sprig--2 { right: -1cqi; bottom: 4cqi; width: 12cqi; rotate: 16deg; opacity: 0.55; }
.an-f3__spark--1 { left: 30cqi; top: 10cqi; }
.an-f3__spark--2 { left: 92cqi; top: 34cqi; width: 1.8cqi; }
.an-f3__phone { position: absolute; left: 44cqi; top: 9cqi; width: 54cqi; }
.an-f3__new { position: absolute; left: 3cqi; top: 25cqi; width: 41.5cqi; container-type: inline-size; }
.an-vows .an-scr__head { background: linear-gradient(115deg, #d2eef9 0%, #d5e3fb 55%, #dbd8fb 100%); }
.an-vows .an-scr__body { color: #2f3573; }
.an-vows .an-scr__total { color: #3a4278; }
.an-vows .an-scr__total b { color: #2b3170; }
.an-vows .an-scr__sub { color: #4a5585; }
.an-vows__add { margin-top: 4.3cqi; }
.an-vlist { display: flex; flex-direction: column; gap: 2.8cqi; margin-top: 3.6cqi; }
.an-vc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.2cqi 2cqi; align-items: start; padding: 3.2cqi 3.1cqi; border: 0.3cqi solid #e7ecf2; border-radius: 2.4cqi; background: #fff; }
.an-vc__name { font: 500 3.35cqi/1.25 var(--an-ui); color: #111827; }
.an-vc__n { display: flex; justify-self: end; font: 500 3cqi/1.3 var(--an-ui); color: #475569; white-space: nowrap; }
.an-chip { grid-column: 1; justify-self: start; padding: 1.05cqi 2cqi; border-radius: 1.6cqi; background: #f1f5f9; font: 500 2.7cqi/1 var(--an-ui); color: #536073; }
.an-chip--prog { background: #e4edfa; color: #3557a0; }
.an-chip--done { background: #e4f8ef; color: #1f6f53; }
.an-vbar { grid-column: 1 / -1; height: 1.3cqi; margin-top: 1.4cqi; overflow: hidden; border-radius: 1cqi; background: #eef2f6; }
.an-vbar i { display: block; width: 66.67%; height: 100%; border-radius: inherit; background: #86c28e; }
.an-vc__btn { grid-column: 1 / -1; margin-top: 0.4cqi; }
.an-sheet { padding: 4.6cqi 7cqi 7cqi; border-radius: 8cqi; background: #fff; box-shadow: var(--an-float); color: var(--an-navy); }
.an-sheet__grab { display: block; width: 14cqi; height: 1.8cqi; margin: 0 auto 4.4cqi; border-radius: 1cqi; background: #dce1e8; }
.an-sheet__title { font: 600 7.4cqi/1.1 var(--an-ui); letter-spacing: -0.01em; }
.an-sheet__label { margin-top: 6cqi; font: 500 4.5cqi/1 var(--an-ui); color: var(--an-slate); }
.an-sheet__field { display: flex; align-items: center; height: 13cqi; margin-top: 2.4cqi; padding: 0 4cqi; border: 0.55cqi solid #9aa8c4; border-radius: 3.4cqi; background: #f8fafc; font: 500 5.3cqi/1 var(--an-ui); white-space: nowrap; }
.an-sheet__typed { display: inline-block; max-width: 70cqi; overflow: hidden; }
.an-sheet__caret { flex: none; width: 0.55cqi; height: 6.6cqi; margin-left: 0.5cqi; border-radius: 0.3cqi; background: #3b5bdb; }
.an-sheet__step { display: flex; align-items: center; justify-content: space-between; height: 13cqi; margin-top: 2.4cqi; padding: 0 2cqi; border: 0.45cqi solid #e2e8f0; border-radius: 3.4cqi; }
.an-sheet__step span { display: grid; place-items: center; width: 9cqi; aspect-ratio: 1; border-radius: 50%; background: #f1f5f9; }
.an-sheet__step svg { width: 5cqi; height: 5cqi; fill: none; stroke: var(--an-navy); stroke-width: 2.2; stroke-linecap: round; }
.an-sheet__step b { font: 600 7cqi/1 var(--an-ui); font-variant-numeric: tabular-nums; }
.an-sheet__save { display: flex; align-items: center; justify-content: center; height: 13.5cqi; margin-top: 6.4cqi; border-radius: 3.4cqi; background: var(--an-navy); font: 600 5.1cqi/1 var(--an-ui); color: #fff; }
@container (max-width: 480px) {
.an-f3 { height: 122cqi; }
.an-f3__phone { left: 31cqi; width: 66cqi; top: 9cqi; }
.an-f3__phone { left: 17cqi; }
.an-f3__new { display: none; }
}
@keyframes an-vbar { 0% { width: 0; } 34%, 66% { width: 50%; } 100% { width: 66.67%; } }
@keyframes an-type { from { max-width: 0; } }
@keyframes an-blink { 50% { opacity: 0; } }
@keyframes an-sway { 50% { rotate: var(--an-r2); } }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3:not(.is-in) :is(.an-vc, .an-vows__add, .an-f3__new) { opacity: 0; transform: translateY(4cqi); }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3:not(.is-in) .an-vbar i { width: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3:not(.is-in) .an-sheet__typed { max-width: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3:not(.is-in) .an-swap__old { opacity: 1; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3:not(.is-in) .an-swap__new { opacity: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-vows__add { animation: an-rise 0.8s var(--ease-out) 0.15s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-vc { animation: an-rise 0.8s var(--ease-out) 0.25s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-vc:nth-child(2) { animation-delay: 0.35s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-vc:nth-child(3) { animation-delay: 0.45s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-f3__new { animation: an-rise 1s var(--ease-out) 0.5s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-sheet__typed { animation: an-type 1.5s steps(20, end) 1.1s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-sheet__caret { animation: an-blink 1.1s steps(1, end) infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-vbar i { animation: an-vbar 3.2s ease-in-out 0.6s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-tap { animation: an-tap 1.5s ease-in-out 2.15s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-vc--prog .an-vc__btn { animation: an-press 1.5s ease-in-out 2.15s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-swap__old { animation: an-swap-out 0.45s ease-in 2.75s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-swap__new { animation: an-swap-in 0.6s var(--ease-out) 2.9s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-f3__sprig--1 { --an-r2: -10deg; animation: an-sway 9s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-f3__sprig--2 { --an-r2: 19deg; animation: an-sway 11s ease-in-out -3s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-spark { animation: an-twinkle 4.5s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-f3.is-in .an-f3__spark--2 { animation-delay: -2.2s; }
.ashow__band:has(> .illu--app-namaz-takip-screens) { padding: 0; background: linear-gradient(180deg, #c9d9f0 0%, #e2eaf6 40%, #f9f0e6 100%); }
.an-sc { position: relative; height: 54cqi; overflow: hidden; }
.an-sc__sky { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(38 52 104 / 0.16) 0%, rgb(38 52 104 / 0) 17%, rgb(38 52 104 / 0) 83%, rgb(38 52 104 / 0.16) 100%); }
.an-sc__arc { position: absolute; left: 0; top: 0; width: 100cqi; }
.an-sc__arc--d { height: 54cqi; }
.an-sc .an-sc__arc--m { display: none; height: 128cqi; }
.an-sc__arc path { fill: none; stroke-width: 0.3; stroke-linecap: round; stroke-dasharray: 0 0.95; }
.an-sc__arc .is-day { stroke: #ee9f45; }
.an-sc__arc .is-night { stroke: #7586b0; }
.an-sc__rig { --a0: -38deg; --a1: 38.6deg; --an: -9.87deg; position: absolute; left: 50cqi; top: 62cqi; width: 0; height: 0; rotate: var(--an); }
.an-sc__sun { position: absolute; left: -1.75cqi; top: -58.75cqi; width: 3.5cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #fee4a8, #f6b24c 72%); box-shadow: 0 0 0 0.9cqi rgb(251 205 120 / 0.36), 0 0 3.4cqi 2.2cqi rgb(250 190 100 / 0.45); }
.an-sc__moon { width: 3.2cqi; aspect-ratio: 1; box-shadow: inset -0.95cqi -0.6cqi 0 0.05cqi #f2c475; filter: drop-shadow(0 0 0.7cqi rgb(240 190 100 / 0.55)); }
.an-sc__moon--1 { left: 2.6cqi; top: 6cqi; }
.an-sc__moon--2 { left: 94cqi; top: 8.5cqi; width: 2.6cqi; box-shadow: inset -0.8cqi -0.5cqi 0 0.05cqi #f2c475; }
.an-sc__cloud { opacity: 0.95; }
.an-sc__cloud--1 { left: 24cqi; top: 4.5cqi; width: 7cqi; }
.an-sc__cloud--2 { left: 61cqi; top: 15.5cqi; width: 5cqi; opacity: 0.8; }
.an-sc__spark { width: 1.1cqi; }
.an-sc__spark--1 { left: 33cqi; top: 26cqi; }
.an-sc__spark--2 { left: 8cqi; top: 40cqi; width: 0.9cqi; }
.an-sc__spark--3 { left: 91cqi; top: 38cqi; }
.an-mk { position: absolute; z-index: 3; left: calc(var(--x) * 1cqi); top: calc(var(--y) * 1cqi); width: 0; height: 0; }
.an-mk > i { position: absolute; left: -0.8cqi; top: -0.8cqi; width: 1.6cqi; aspect-ratio: 1; border: 0.38cqi solid #ee9f45; border-radius: 50%; background: #fff; }
.an-mk.is-night > i { border-color: #7586b0; }
.an-mk > span { position: absolute; left: 0; bottom: 1.4cqi; padding: 0.55em 0.85em; border-radius: 99px; background: rgb(255 255 255 / 0.84); box-shadow: 0 0.5em 1.2em -0.7em rgb(30 40 80 / 0.4); font: 500 max(11px, 1.05cqi)/1 var(--an-ui); color: #5b6478; white-space: nowrap; translate: -50% 0; }
.an-mk b { font-weight: 600; color: #1b2233; }
.an-mk em { font-style: normal; font-variant-numeric: tabular-nums; }
.an-sc__phone { position: absolute; z-index: 1; }
.an-sc__phone--home { left: 12.25cqi; top: 18cqi; width: 19.5cqi; }
.an-sc__phone--qibla { z-index: 2; left: 39cqi; top: 12cqi; width: 22cqi; }
.an-sc__phone--lock { left: 68.25cqi; top: 18cqi; width: 19.5cqi; }
.an-appicon { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 23%; background: linear-gradient(225deg, #1a3c86 0%, #34508f 40%, #8c7f7d 72%, #e09a49 100%); }
.an-appicon svg { width: 100%; height: 100%; }
.an-appicon__glow { fill: rgb(253 196 82 / 0.45); }
.an-appicon__ring { fill: none; stroke: #fbe2b6; stroke-width: 3.4; stroke-linecap: round; }
.an-appicon__dot { fill: #e4e8ef; opacity: 0.85; }
.an-appicon__moon { fill: #fdecc9; }
.an-appicon__sun-ring { fill: #fde0a0; }
.an-appicon__sun { fill: #f6a02b; }
.an-hs { background: linear-gradient(180deg, #fdf1e3 0%, #fbe5cf 100%); }
.an-hs .device__status { color: #1b1b1b; }
.an-hs__grid { position: absolute; left: 6.5cqi; right: 6.5cqi; top: 15cqi; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4.6cqi 6.4cqi; align-items: start; }
.an-hs__widget { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.an-hs__widget .an-wdg { box-shadow: 0 1.6cqi 3.6cqi -2cqi rgb(120 80 40 / 0.35); }
.an-hs__name { display: block; margin-top: 1.6cqi; text-align: center; font: 500 2.6cqi/1 var(--an-ui); color: #3a3330; }
.an-hs__app { display: flex; flex-direction: column; align-items: center; gap: 1.5cqi; }
.an-hs__app i { width: 100%; aspect-ratio: 1; border-radius: 23%; background: rgb(255 255 255 / 0.55); }
.an-hs__app s { width: 72%; height: 1.5cqi; border-radius: 1cqi; background: rgb(255 255 255 / 0.6); text-decoration: none; }
.an-hs__app.is-ours .an-appicon { width: 100%; box-shadow: 0 1cqi 2cqi -1cqi rgb(26 60 134 / 0.45); }
.an-hs__app.is-ours s { width: auto; height: auto; overflow: visible; background: none; font: 500 2.35cqi/1 var(--an-ui); color: #3a3330; white-space: nowrap; }
.an-qib { background: linear-gradient(180deg, #d8f2e3 0%, #c4ecd6 52%, #aae3c4 100%); color: #111827; }
.an-qib .device__status { color: #0b0f19; }
.an-qib__back { position: absolute; left: 4.4cqi; top: 14.4cqi; display: grid; place-items: center; width: 8.2cqi; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.78); }
.an-qib__back svg { width: 4.8cqi; height: 4.8cqi; fill: none; stroke: #1b2233; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.an-qib__title { position: absolute; left: 15.6cqi; top: 14.2cqi; font: 600 4.4cqi/1 var(--an-ui); }
.an-qib__sub { position: absolute; left: 15.6cqi; top: 19.9cqi; font: 500 2.75cqi/1 var(--an-ui); color: #3e5248; }
.an-qib__dial { position: absolute; left: 10cqi; top: 66cqi; width: 80cqi; aspect-ratio: 1; }
.an-qib__ring { position: absolute; border-radius: 50%; background: rgb(255 255 255 / 0.17); }
.an-qib__ring--1 { inset: 0; }
.an-qib__ring--2 { inset: 14.5%; background: rgb(255 255 255 / 0.2); }
.an-qib__ring--3 { inset: 27.5%; background: rgb(255 255 255 / 0.28); }
.an-qib__cross { position: absolute; inset: 0 0 -24%; background: linear-gradient(rgb(47 174 116 / 0.24), rgb(47 174 116 / 0.24)) 50% 40.3% / 100% 0.3cqi no-repeat, linear-gradient(rgb(47 174 116 / 0.24), rgb(47 174 116 / 0.24)) 50% 0 / 0.3cqi 100% no-repeat; }
.an-qib__rotor { position: absolute; inset: 0; }
.an-qib__cone { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(180deg, #000 10%, rgb(0 0 0 / 0.5) 34%, transparent 56%); mask-image: linear-gradient(180deg, #000 10%, rgb(0 0 0 / 0.5) 34%, transparent 56%); }
.an-qib__cone path { fill: rgb(255 255 255 / 0.62); }
.an-qib__kaaba { position: absolute; left: 41%; top: 1%; display: grid; place-items: center; width: 18%; aspect-ratio: 1; border: 0.5cqi dashed #34b07a; border-radius: 50%; }
.an-qib__kaaba i { width: 56%; aspect-ratio: 1; border-radius: 16%; background: linear-gradient(180deg, #1e293b 0 25%, #f5b454 25% 39%, #1e293b 39%); box-shadow: 0 0.6cqi 1.2cqi -0.5cqi rgb(15 23 42 / 0.5); }
.an-qib__needle { position: absolute; left: 47.3%; top: 22.2%; width: 5.35%; height: 32%; }
.an-qib__needle path { fill: var(--an-green); }
.an-qib__needle circle { fill: #fff; }
.an-qib__ok { position: absolute; inset: 175cqi 0 auto; text-align: center; font: 600 4.7cqi/1.1 var(--an-ui); color: #111827; }
.an-qib__note { position: absolute; left: 9cqi; right: 9cqi; top: 183.5cqi; text-align: center; font: 400 2.15cqi/1.4 var(--an-ui); color: #4d6b5c; }
.an-lock { background: linear-gradient(180deg, #7b86c1 0%, #a59dcc 30%, #e3b0a6 62%, #f5cbb0 82%, #f9dcc5 100%); color: #fff; }
.an-lock .device__status { color: #fff; }
.an-lock__sun { position: absolute; left: 50%; top: 140cqi; width: 60cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 238 205 / 0.95) 0%, rgb(255 216 165 / 0.55) 32%, rgb(255 216 165 / 0) 68%); translate: -50% 0; }
.an-lock__pad { position: absolute; left: 50%; top: 13.5cqi; width: 4.6cqi; height: 4.6cqi; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; translate: -50% 0; }
.an-lock__time { position: absolute; inset: 20.5cqi 0 auto; text-align: center; font: 600 23cqi/1 var(--an-ui); letter-spacing: -0.025em; color: rgb(255 255 255 / 0.94); font-variant-numeric: tabular-nums; }
.an-note { position: absolute; left: 3.4cqi; right: 3.4cqi; top: 55cqi; display: grid; grid-template-columns: 10.6cqi minmax(0, 1fr) auto; gap: 1cqi 3cqi; padding: 3.6cqi 4cqi 4cqi 3.6cqi; border-radius: 6cqi; background: rgb(255 255 255 / 0.62); -webkit-backdrop-filter: blur(3cqi) saturate(1.3); backdrop-filter: blur(3cqi) saturate(1.3); box-shadow: 0 1.8cqi 4cqi -2.2cqi rgb(60 50 110 / 0.4); color: #111827; }
.an-note .an-appicon { grid-row: 1 / span 2; align-self: start; width: 10.6cqi; border-radius: 2.5cqi; }
.an-note__title { font: 600 4.1cqi/1.2 var(--an-ui); }
.an-note__when { font: 500 3.2cqi/1.4 var(--an-ui); color: #4b5563; }
.an-note__body { grid-column: 2 / -1; font: 400 3.8cqi/1.3 var(--an-ui); color: #1f2937; }
@container (max-width: 640px) {
.an-sc { height: 128cqi; }
.an-sc .an-sc__arc--d { display: none; }
.an-sc .an-sc__arc--m { display: block; }
.an-sc__arc path { stroke-width: 0.6; stroke-dasharray: 0 1.9; }
.an-sc__rig { --a0: -35.4deg; --a1: 36deg; --an: -9.28deg; top: 72cqi; }
.an-sc__sun { left: -3cqi; top: -65cqi; width: 6cqi; }
.an-sc__moon--1 { left: 3cqi; top: 8cqi; width: 5cqi; box-shadow: inset -1.5cqi -1cqi 0 0.1cqi #f2c475; }
.an-sc__moon--2 { left: 91cqi; top: 10cqi; width: 4.4cqi; box-shadow: inset -1.3cqi -0.9cqi 0 0.1cqi #f2c475; }
.an-sc__cloud--1 { left: 20cqi; top: 4cqi; width: 13cqi; }
.an-sc__cloud--2 { left: 74cqi; top: 4cqi; width: 9cqi; }
.an-sc__spark { width: 2cqi; }
.an-sc__spark--1 { left: 12cqi; top: 34cqi; }
.an-sc__spark--3 { left: 86cqi; top: 34cqi; }
.an-mk { left: calc(var(--xm) * 1cqi); top: calc(var(--ym) * 1cqi); }
.an-mk > i { left: -1.4cqi; top: -1.4cqi; width: 2.8cqi; border-width: 0.65cqi; }
.an-mk > span { bottom: 2.4cqi; font-size: 3cqi; }
.an-mk em { display: none; }
.an-mk--fajr > span, .an-mk--isha > span { top: 2.4cqi; bottom: auto; }
.an-mk--fajr > span { translate: -22% 0; }
.an-mk--isha > span { translate: -78% 0; }
.an-sc__phone--qibla { left: 26cqi; top: 22cqi; width: 48cqi; }
.an-sc__phone--home { left: 0; top: 44cqi; width: 36cqi; rotate: -4deg; }
.an-sc__phone--lock { left: 64cqi; top: 44cqi; width: 36cqi; rotate: 4deg; }
}
@keyframes an-sun-day { 0% { rotate: var(--a0); opacity: 0; } 5%, 95% { opacity: 1; } 100% { rotate: var(--a1); opacity: 0; } }
@keyframes an-compass { 0% { rotate: 46deg; } 55% { rotate: -7deg; } 78% { rotate: 2.5deg; } 100% { rotate: 0deg; } }
@keyframes an-wobble { 0%, 100% { rotate: 0deg; } 30% { rotate: 1.6deg; } 65% { rotate: -1.2deg; } }
@keyframes an-drop { from { opacity: 0; transform: translateY(-7cqi) scale(0.96); } }
@keyframes an-mk-in { from { opacity: 0; transform: translateY(1cqi); } }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens:not(.is-in) :is(.an-sc__phone, .an-mk, .an-sc__rig, .an-note, .an-qib__ok) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens:not(.is-in) .an-qib__rotor { rotate: 46deg; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc { animation: an-tick-s 60s steps(60, jump-none) -30s infinite, an-tick-m 600s steps(10, jump-none) -30s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__phone { animation: an-rise 1.1s var(--ease-out) 0.15s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__phone--home { animation-delay: 0.35s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__phone--lock { animation-delay: 0.5s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-mk { animation: an-mk-in 0.7s var(--ease-out) both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-mk--fajr { animation-delay: 0.3s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-mk--sunrise { animation-delay: 0.42s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-mk--dhuhr { animation-delay: 0.54s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-mk--asr { animation-delay: 0.66s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-mk--maghrib { animation-delay: 0.78s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-mk--isha { animation-delay: 0.9s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__rig { animation: an-sun-day 48s linear -17.6s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-qib__rotor { animation: an-compass 2.2s cubic-bezier(0.3, 0.7, 0.3, 1) 0.9s both, an-wobble 8s ease-in-out 3.4s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-qib__ok { animation: an-fade-in 0.8s ease-out 2.5s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-note { animation: an-drop 0.9s var(--spring) 1.5s both; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-wdg__ticks .is-now { animation: an-breathe 2.6s ease-in-out 2.5s infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__cloud--1 { animation: an-drift 20s ease-in-out infinite alternate; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__cloud--2 { animation: an-drift 16s ease-in-out -6s infinite alternate-reverse; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-spark { animation: an-twinkle 4.5s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__spark--2 { animation-delay: -1.5s; }
.js:not(.reduce-motion) .illu--app-namaz-takip-screens.is-in .an-sc__spark--3 { animation-delay: -3s; }
.reduce-motion [class*="illu--app-namaz-takip"] *,
.reduce-motion [class*="illu--app-namaz-takip"] *::before,
.reduce-motion [class*="illu--app-namaz-takip"] *::after { animation: none !important; }
.illu--app-ritmik-hero,
.illu--app-ritmik-f1,
.illu--app-ritmik-f2,
.illu--app-ritmik-f3,
.illu--app-ritmik-screens {
--ar-ink: #181509;
--ar-note: #23201a;
--ar-muted: rgba(24, 21, 9, 0.66);
--ar-faint: rgba(24, 21, 9, 0.08);
--ar-green: #0c6c5f;
--ar-green-ink: #0a5648;
--ar-mint: #e4f2ea;
--ar-indigo: #6f6cf0;
--ar-indigo-ink: #4f4cd6;
--ar-lav: #ebeafd;
--ar-coral: #ff6a3a;
--ar-coral-ink: #b83b12;
--ar-yellow: #ffc63d;
--ar-lime: #c7f04a;
--ar-blue: #4f8df7;
--ar-teal: #2bb39f;
--ar-cream: #fdf3df;
--ar-app: #f2f5ec;
--ar-staff: #c2bbac;
--ar-beat: 0.625s;
--ar-start: 2.4s;
--ar-shadow: 0 1.5em 3em -1.5em rgb(24 21 9 / 0.34), 0 0.25em 0.8em rgb(24 21 9 / 0.07);
container-type: inline-size;
position: relative;
width: 100%;
color: var(--ar-ink);
font-family: var(--f-body);
line-height: 1.25;
letter-spacing: 0;
text-align: left;
}
.illu--app-ritmik-f2 { --ar-beat: 0.714s; }
.ar-ic { display: block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-ic .f { fill: currentColor; stroke: none; }
.ar-sys { display: block; width: 100%; height: auto; overflow: visible; color: var(--ar-note); }
.ar-staff line { stroke: var(--ar-staff); stroke-width: 1.8; }
.ar-clef rect, .ar-sig text { fill: currentColor; }
.ar-sig text { font: 600 21px/1 var(--f-body); stroke: currentColor; stroke-width: 0.7px; paint-order: stroke; }
.ar-stem { stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ar-head, .ar-beam, .ar-dot, .ar-ev--rest circle, .ar-ev--rest rect { fill: currentColor; }
.ar-head.is-open { fill: #fff; stroke: currentColor; stroke-width: 2; }
.ar-flag { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.ar-qrest { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ar-restline, .ar-hook { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ar-artic { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ar-tenuto { stroke-width: 2.8; }
.ar-trem { stroke-width: 3.4; }
.ar-bar line, .ar-repeat line, .ar-simile line { stroke: currentColor; }
.ar-repeat circle, .ar-simile circle { fill: currentColor; }
.ar-simnum rect { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 2.4; }
.ar-simnum text { font: 600 13px var(--f-body); fill: currentColor; }
.ar-mlabel { font: 600 10.5px var(--f-body); letter-spacing: 0.1em; fill: var(--ar-indigo); }
.ar-volta path { fill: none; stroke: var(--ar-indigo); stroke-width: 1.5; }
.ar-volta text { font: 600 11px var(--f-body); fill: var(--ar-indigo); }
.ar-count { font: 600 11px var(--f-body); fill: rgb(24 21 9 / 0.42); }
.ar-selbg, .ar-hit { fill: var(--ar-lav); }
.ar-hit { opacity: 0; }
.ar-np circle { fill: var(--ar-green); }
.ar-np path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.ar-ev.is-sel { color: var(--ar-indigo-ink); }
.ar-hiddenm { opacity: 0.28; }
.ar-staff--hp line { stroke: color-mix(in oklab, #23201a 22%, #fff); }
.ar-bar--hp line { stroke: color-mix(in oklab, #23201a 38%, #fff); }
.ar-hphead { font: 600 19px var(--f-body); fill: currentColor; text-anchor: middle; dominant-baseline: central; }
.ar-hptick, .ar-hpbeat { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: 0.16; }
.ar-hplegend text { font: 600 10px var(--f-body); fill: currentColor; opacity: 0.5; }
.ar-pick { display: block; width: 100%; height: 100%; color: var(--ar-note); overflow: visible; }
.ar-phone { --device-w: var(--ar-dw, 300px); }
.ar-scr { display: flex; flex-direction: column; background: var(--ar-app); color: var(--ar-ink); font-family: var(--f-body); }
.ar-status { flex: none; color: var(--ar-ink); }
.ar-homebar { position: absolute; left: 50%; bottom: 1.8cqi; z-index: 6; width: 34cqi; height: 1.3cqi; translate: -50% 0; border-radius: 99px; background: rgb(24 21 9 / 0.82); }
.ar-tb { flex: none; display: flex; align-items: center; gap: 1.8cqi; padding: 1.2cqi 4cqi 3cqi; }
.ar-tb__sp { flex: 1; }
.ar-ib { display: grid; place-items: center; width: 8.8cqi; height: 8.8cqi; border-radius: 50%; background: #fff; color: var(--ar-ink); font-size: 4.3cqi; box-shadow: 0 0.4cqi 1.2cqi rgb(24 21 9 / 0.1); }
.ar-ib.is-on { background: var(--ar-mint); color: var(--ar-green); box-shadow: inset 0 0 0 1px rgb(12 108 95 / 0.18); }
.ar-seg { display: flex; gap: 0.6cqi; padding: 0.8cqi; border-radius: 99px; background: rgb(24 21 9 / 0.07); font-size: 3.9cqi; }
.ar-seg i { display: grid; place-items: center; width: 8.4cqi; height: 7.2cqi; border-radius: 99px; color: rgb(24 21 9 / 0.64); }
.ar-seg i.is-on { background: #fff; color: var(--ar-ink); box-shadow: 0 0.3cqi 0.9cqi rgb(24 21 9 / 0.12); }
.ar-play { position: relative; display: grid; place-items: center; width: 9.8cqi; height: 9.8cqi; border-radius: 50%; background: var(--ar-green); color: #fff; font-size: 4.2cqi; box-shadow: 0 1cqi 2.4cqi -0.6cqi rgb(12 108 95 / 0.6); }
.ar-play__ring { position: absolute; inset: 0; border-radius: 50%; border: 0.5cqi solid var(--ar-green); opacity: 0; }
.ar-page { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 3cqi; padding: 5cqi 4.6cqi 0; overflow: hidden; border-radius: 4.2cqi 4.2cqi 0 0; background: #fff; box-shadow: 0 0.6cqi 2.4cqi rgb(24 21 9 / 0.06), 0 0 0 1px rgb(24 21 9 / 0.04); }
.ar-page__head { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; }
.ar-title { font: 700 5.6cqi/1.15 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; white-space: nowrap; }
.ar-tags { display: flex; gap: 1.2cqi; }
.ar-tags i { padding: 1.2cqi 2.3cqi; border: 1px solid rgb(24 21 9 / 0.14); border-radius: 99px; font: 600 2.7cqi/1 var(--f-body); font-style: normal; color: var(--ar-muted); white-space: nowrap; }
.ar-tags i.is-on { border-color: #cfe6da; background: var(--ar-mint); color: var(--ar-green); }
.ar-sec { display: flex; align-items: center; gap: 2cqi; margin: 4.2cqi 0 0.6cqi; font: 600 3.1cqi/1 var(--f-body); color: var(--ar-ink); }
.ar-sec::before { content: ""; width: 1.1cqi; height: 3.4cqi; border-radius: 1cqi; background: var(--ar-green); }
.ar-sec::after { content: ""; flex: 1; height: 1px; background: rgb(24 21 9 / 0.1); }
.ar-row { margin: 0 -1.2cqi; }
.ar-textline { display: flex; align-items: center; margin: -0.6cqi 0 0.6cqi 1.4cqi; font: 500 3.15cqi/1.3 var(--f-body); color: #4d493d; white-space: nowrap; }
.ar-textline::before { content: "T"; display: grid; place-items: center; width: 4.4cqi; height: 4.4cqi; margin-right: 1.8cqi; border-radius: 1.2cqi; background: var(--ar-lav); color: var(--ar-indigo-ink); font: 700 2.6cqi/1 var(--f-body); }
.ar-caret { width: 0.45cqi; height: 3.8cqi; margin-left: 0.4cqi; border-radius: 1px; background: var(--ar-indigo); opacity: 0; }
.ar-card { position: absolute; z-index: 3; border-radius: 1.4em; background: #fff; box-shadow: var(--ar-shadow); font-size: clamp(10px, 2.25cqi, 13.5px); }
.ar-staffbg {
position: absolute; inset: 4% -6% 6%; z-index: 0; pointer-events: none;
background-image: repeating-linear-gradient(to bottom,
rgb(12 108 95 / 0.13) 0 1.5px, transparent 1.5px 13px,
rgb(12 108 95 / 0.13) 13px 14.5px, transparent 14.5px 26px,
rgb(12 108 95 / 0.13) 26px 27.5px, transparent 27.5px 39px,
rgb(12 108 95 / 0.13) 39px 40.5px, transparent 40.5px 52px,
rgb(12 108 95 / 0.13) 52px 53.5px, transparent 53.5px 96px);
-webkit-mask-image: radial-gradient(60% 52% at 50% 46%, #000 30%, transparent 78%);
mask-image: radial-gradient(60% 52% at 50% 46%, #000 30%, transparent 78%);
}
.ar-flt { position: absolute; z-index: 1; display: block; width: 7cqi; pointer-events: none; }
.ar-flt svg { display: block; width: 100%; height: auto; }
.ar-hero { position: relative; display: grid; place-items: center; padding: 2cqi 0 4cqi; --ar-dw: clamp(250px, 52cqi, 316px); }
.ar-hero__phone { position: relative; z-index: 2; width: var(--ar-dw); }
.ar-phone--hero .ar-page { padding-bottom: 6cqi; }
.ar-flt--1 { left: 9%; top: 6%; width: 5.4cqi; color: var(--ar-coral); rotate: -12deg; opacity: 0.75; }
.ar-flt--2 { right: 6%; top: 3%; width: 8cqi; color: var(--ar-indigo); rotate: 8deg; opacity: 0.7; }
.ar-flt--3 { right: 13%; top: 46%; width: 5cqi; color: var(--ar-blue); rotate: 10deg; opacity: 0.55; }
.ar-flt--4 { left: 4%; bottom: 10%; width: 8.4cqi; color: var(--ar-yellow); rotate: -8deg; opacity: 0.85; }
.ar-metro { left: 0; top: 15%; display: grid; grid-template-columns: 4.6em auto; align-items: center; gap: 0.75em 0.9em; width: max-content; padding: 1em 1.3em 1.1em 1em; }
.ar-metro__art { width: 4.6em; }
.ar-metroart { display: block; width: 100%; height: auto; overflow: visible; }
.ar-metroart__body { fill: var(--ar-teal); stroke: var(--ar-ink); stroke-width: 2.2; stroke-linejoin: round; }
.ar-metroart__face { fill: var(--ar-cream); stroke: var(--ar-ink); stroke-width: 1.6; stroke-linejoin: round; }
.ar-metroart__ticks { fill: none; stroke: var(--ar-ink); stroke-width: 1.4; stroke-linecap: round; opacity: 0.55; }
.ar-metroart__rod { fill: none; stroke: #8f8a7c; stroke-width: 2.6; stroke-linecap: round; }
.ar-metroart__weight { fill: var(--ar-lime); stroke: var(--ar-ink); stroke-width: 1.7; }
.ar-metroart__pivot { fill: var(--ar-green); stroke: var(--ar-ink); stroke-width: 1.6; }
.ar-metroart__base { fill: #1f8e7f; stroke: var(--ar-ink); stroke-width: 2; }
.ar-metroart__pend { transform-box: view-box; transform-origin: 32px 55px; rotate: -14deg; }
.ar-metro__txt { display: flex; flex-direction: column; gap: 0.3em; }
.ar-metro__bpm { display: flex; align-items: baseline; gap: 0.3em; }
.ar-metro__bpm b { font: 600 2.7em/0.9 var(--f-body); letter-spacing: -0.04em; }
.ar-metro__bpm small { font: 600 0.82em/1 var(--f-body); letter-spacing: 0.08em; color: var(--ar-muted); }
.ar-metro__name { font: 600 0.92em/1 var(--f-body); color: var(--ar-green); }
.ar-beats { grid-column: 1 / -1; display: flex; gap: 0.38em; }
.ar-beats i { flex: 1; height: 0.46em; border-radius: 99px; background: rgb(255 198 61 / 0.32); }
.ar-beats i:first-child { background: var(--ar-yellow); }
.ar-menu { position: absolute; right: 0; bottom: 8%; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5em; font-size: clamp(10px, 2.15cqi, 13px); }
.ar-menu__item { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.68em 1.1em 0.68em 0.85em; border-radius: 99px; background: #fff; box-shadow: 0 0.9em 1.8em -0.9em rgb(24 21 9 / 0.38), 0 0 0 1px rgb(24 21 9 / 0.05); white-space: nowrap; }
.ar-menu__item b { font-weight: 600; }
.ar-menu__item .ar-ic { width: 1.2em; height: 1.2em; }
.ar-menu__item.is-on { background: var(--ar-mint); color: var(--ar-green-ink); box-shadow: 0 0.9em 1.8em -0.9em rgb(12 108 95 / 0.5), inset 0 0 0 1.5px var(--ar-green); }
.ar-pro { width: 1em !important; height: 1em !important; color: #d39c12; }
.ar-menu__fab { display: grid; place-items: center; width: 3.1em; height: 3.1em; margin-top: 0.15em; border-radius: 50%; background: var(--ar-ink); color: #fff; font-size: 1em; box-shadow: 0 0.9em 1.6em -0.6em rgb(24 21 9 / 0.55); }
.ar-menu__fab .ar-ic { width: 1.2em; height: 1.2em; }
@container (max-width: 520px) {
.ar-hero { --ar-dw: clamp(240px, 70cqi, 300px); padding-top: 6cqi; }
.ar-metro { top: 2%; left: -1%; }
.ar-menu { bottom: 6%; right: -1%; }
.ar-flt--1 { top: 30%; left: 2%; }
.ar-flt--3 { top: 58%; right: 3%; }
}
.ar-feat { position: relative; --ar-dw: clamp(236px, 54cqi, 292px); height: calc(var(--ar-dw) * 2.1667 * 0.8 + 7cqi); margin-bottom: calc(-1 * clamp(24px, 4vw, 56px)); }
.ar-feat__phone { position: absolute; z-index: 2; top: 7cqi; left: 50%; width: var(--ar-dw); translate: -50% 0; }
.ar-feat .ar-staffbg { inset: 0 -12% 10%; }
.ar-feat .ar-phone { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.12), 0 40px 70px -36px rgb(10 40 32 / 0.5), 0 18px 28px -22px rgb(0 0 0 / 0.4); }
.ar-edhead { flex: none; display: flex; align-items: center; gap: 2cqi; padding: 1.4cqi 5cqi 3.2cqi; }
.ar-edhead b { flex: 1; text-align: center; font: 600 4.1cqi/1 var(--f-body); }
.ar-edhead__back { display: grid; place-items: center; width: 9cqi; font-size: 5.4cqi; }
.ar-play--sm { width: 9cqi; height: 9cqi; font-size: 3.8cqi; }
.ar-edmeta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1.8cqi; padding: 0 5cqi; }
.ar-prog { display: block; width: 100%; height: 1.4cqi; overflow: hidden; border-radius: 99px; background: rgb(111 108 240 / 0.16); }
.ar-prog i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ar-indigo); transform-origin: left; }
.ar-left { font: 600 2.9cqi/1 var(--f-body); color: var(--ar-muted); }
.ar-hint { flex: none; padding: 3.4cqi 5cqi 0; font: 500 3.1cqi/1 var(--f-body); color: var(--ar-muted); }
.ar-edstaff { flex: none; padding: 1cqi 7cqi 0 4cqi; }
.ar-sheet { position: absolute; left: 0; right: 0; top: 41.5%; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 2.5cqi; padding: 2.2cqi 5cqi; border-radius: 6.5cqi 6.5cqi 0 0; background: #fbfbf7; box-shadow: 0 -2cqi 6cqi rgb(24 21 9 / 0.1), 0 -1px 0 rgb(24 21 9 / 0.05); }
.ar-grab { align-self: center; width: 10cqi; height: 1.2cqi; border-radius: 99px; background: rgb(24 21 9 / 0.16); }
.ar-sheet__nav { display: flex; align-items: center; gap: 2cqi; }
.ar-sq { display: grid; place-items: center; width: 8.6cqi; height: 8.6cqi; border: 1px solid rgb(24 21 9 / 0.14); border-radius: 2.6cqi; background: #fff; font-size: 4cqi; }
.ar-x { display: grid; place-items: center; font-size: 4.6cqi; color: var(--ar-muted); }
.ar-slabel { font: 600 2.6cqi/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-muted); }
.ar-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqi; }
.ar-nc { display: flex; flex-direction: column; align-items: center; gap: 0.8cqi; padding: 2.4cqi 1cqi 0.6cqi; border: 1.5px solid rgb(24 21 9 / 0.13); border-radius: 3cqi; background: #fff; }
.ar-nc b { font: 600 3.3cqi/1 var(--f-body); }
.ar-nc__g { width: 11cqi; }
.ar-vals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqi; }
.ar-vc { display: flex; flex-direction: column; align-items: center; gap: 0.4cqi; padding: 1.2cqi 0.4cqi 1.8cqi; border: 1.5px solid rgb(24 21 9 / 0.13); border-radius: 2.6cqi; background: #fff; }
.ar-vc__g { width: 8.4cqi; }
.ar-vc b { font: 600 2.5cqi/1 var(--f-body); }
:is(.ar-nc, .ar-vc, .ar-mods i).is-on { border-color: var(--ar-indigo); background: #f3f2fe; color: var(--ar-indigo-ink); box-shadow: inset 0 0 0 0.5px var(--ar-indigo); }
.ar-mods { display: flex; gap: 1.6cqi; }
.ar-mods i { padding: 1.7cqi 2.8cqi; border: 1.5px solid rgb(24 21 9 / 0.13); border-radius: 99px; background: #fff; font: 600 2.9cqi/1 var(--f-body); font-style: normal; white-space: nowrap; }
.ar-mods em { margin-right: 0.6cqi; font-style: normal; }
.ar-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqi; }
.ar-moves span { display: flex; align-items: center; justify-content: center; gap: 1.6cqi; padding: 3cqi 1cqi; border: 1.5px solid rgb(24 21 9 / 0.13); border-radius: 99px; background: #fff; font: 600 3.1cqi/1 var(--f-body); white-space: nowrap; }
.ar-moves .ar-ic { width: 3.6cqi; height: 3.6cqi; }
.ar-tnote { left: 0; top: 23%; display: flex; align-items: center; gap: 0.8em; padding: 0.85em 1.25em 0.85em 0.85em; }
.ar-tnote__ic { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 0.75em; background: var(--ar-lav); color: var(--ar-indigo-ink); font: 700 1.1em/1 var(--f-body); }
.ar-tnote__txt { display: flex; flex-direction: column; gap: 0.35em; }
.ar-card small { font: 600 0.76em/1 var(--f-body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ar-muted); }
.ar-tnote b { display: flex; align-items: center; font: 600 1.06em/1.2 var(--f-body); white-space: nowrap; }
.ar-card .ar-caret { width: 2px; height: 1.15em; margin-left: 2px; opacity: 1; }
.ar-stitle { right: 0; top: 64%; display: flex; flex-direction: column; gap: 0.55em; width: 13em; padding: 0.95em 1.1em 0.5em; }
.ar-stitle__row { display: flex; align-items: center; gap: 0.6em; }
.ar-stitle__row::before { content: ""; width: 0.32em; height: 1.1em; border-radius: 1em; background: var(--ar-green); }
.ar-stitle__row b { font: 600 1.1em/1 var(--f-body); }
.ar-stitle__line { flex: 1; height: 1px; background: rgb(24 21 9 / 0.12); }
.ar-stitle__mini { display: block; margin: 0 -0.4em; }
.ar-tempo { display: inline-flex; align-items: center; gap: 1.2cqi; padding: 1.3cqi 2.6cqi 1.3cqi 2cqi; border-radius: 99px; background: var(--ar-mint); color: var(--ar-green); font: 600 3.1cqi/1 var(--f-body); }
.ar-tempo .ar-ic { width: 3.4cqi; height: 3.4cqi; }
.ar-loopzone { position: relative; margin: 4.4cqi -2.2cqi 1.4cqi; padding: 3.4cqi 1.2cqi 0.6cqi; border-radius: 3.2cqi; background: rgb(12 108 95 / 0.045); box-shadow: inset 0 0 0 1px rgb(12 108 95 / 0.2); }
.ar-loopzone__tag { position: absolute; top: -2.4cqi; left: 3cqi; display: inline-flex; align-items: center; gap: 1cqi; padding: 1cqi 2.2cqi 1cqi 1.8cqi; border-radius: 99px; background: var(--ar-green); color: #fff; font: 600 2.5cqi/1 var(--f-body); }
.ar-loopzone__tag .ar-ic { width: 3cqi; height: 3cqi; }
.ar-row--hidden { position: relative; }
.ar-hidtag { position: absolute; left: 50%; top: 55%; display: inline-flex; align-items: center; gap: 1.2cqi; padding: 1.4cqi 2.6cqi; translate: -50% -50%; border-radius: 99px; background: #fff; color: var(--ar-muted); font: 600 2.7cqi/1 var(--f-body); box-shadow: 0 0.6cqi 2cqi rgb(24 21 9 / 0.12), 0 0 0 1px rgb(24 21 9 / 0.06); }
.ar-hidtag .ar-ic { width: 3.4cqi; height: 3.4cqi; }
.ar-trainer { right: 0; top: 9%; width: 14.6em; padding: 1em 1.1em 1.1em; }
.ar-trainer__head { display: flex; align-items: center; gap: 0.5em; color: var(--ar-green); font: 600 0.92em/1 var(--f-body); }
.ar-trainer__head .ar-ic { width: 1.15em; height: 1.15em; }
.ar-trainer__now { display: flex; align-items: baseline; gap: 0.35em; margin-top: 0.7em; }
.ar-trainer__now b { font: 600 2.5em/0.9 var(--f-body); letter-spacing: -0.04em; }
.ar-trainer__now small { font: 600 0.8em/1 var(--f-body); letter-spacing: 0.08em; color: var(--ar-muted); }
.ar-trainer__now span { margin-left: auto; font: 600 0.82em/1 var(--f-body); color: var(--ar-muted); }
.ar-ladder { display: flex; gap: 0.32em; margin-top: 0.9em; }
.ar-ladder i { flex: 1; display: flex; flex-direction: column; gap: 0.4em; font-style: normal; }
.ar-ladder i::before { content: ""; height: 0.45em; border-radius: 99px; background: rgb(24 21 9 / 0.1); }
.ar-ladder i.is-done::before { background: var(--ar-green); }
.ar-ladder i.is-cur::before { background: linear-gradient(90deg, var(--ar-coral) 0 72%, rgb(255 106 58 / 0.22) 72%); }
.ar-ladder span { font: 600 0.78em/1 var(--f-body); color: var(--ar-muted); }
.ar-ladder .is-cur span { color: var(--ar-coral-ink); }
.ar-heads { display: flex; align-items: center; gap: 0.55em; margin-top: 0.9em; padding: 0.6em 0.75em; border-radius: 0.75em; background: #fff0e8; color: var(--ar-coral-ink); font: 600 0.86em/1 var(--f-body); }
.ar-heads__dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--ar-coral); box-shadow: 0 0 0 0.25em rgb(255 106 58 / 0.25); }
.ar-mix { left: 0; bottom: 16%; width: 13.6em; padding: 0.95em 1.1em 1.05em; }
.ar-mix__row { display: flex; align-items: center; gap: 0.7em; margin-top: 0.75em; color: var(--ar-muted); }
.ar-mix__row .ar-ic { width: 1.3em; height: 1.3em; }
.ar-slider { position: relative; flex: 1; height: 0.45em; border-radius: 99px; background: rgb(24 21 9 / 0.1); }
.ar-slider__fill { position: absolute; inset: 0 auto 0 0; width: 62%; border-radius: inherit; background: var(--ar-green); }
.ar-slider__knob { position: absolute; left: 62%; top: 50%; width: 1.35em; height: 1.35em; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0.15em 0.5em rgb(24 21 9 / 0.3), 0 0 0 1px rgb(24 21 9 / 0.06); }
.ar-hhead { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 1.4cqi 4.6cqi 3.2cqi 5.4cqi; }
.ar-logo { display: block; width: auto; height: 6.2cqi; overflow: visible; color: var(--ar-green); }
.ar-logo__staff path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ar-logo__head { fill: currentColor; }
.ar-logo__r { fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.ar-logo text { font: 600 18px/1 var(--f-body); letter-spacing: -0.02em; fill: currentColor; }
.ar-prac { position: relative; overflow: hidden; margin: 0 4cqi; padding: 4.4cqi 4.6cqi 4cqi; border-radius: 5cqi; background: var(--ar-green); color: #fff; box-shadow: 0 3cqi 6cqi -3cqi rgb(12 108 95 / 0.7); }
.ar-prac::after { content: ""; position: absolute; right: -6cqi; top: 4cqi; width: 46cqi; height: 16cqi; opacity: 0.12; background: repeating-linear-gradient(to bottom, #fff 0 1px, transparent 1px 3.2cqi); transform: rotate(-8deg); }
.ar-prac__top { display: flex; justify-content: space-between; font: 600 2.6cqi/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
.ar-prac__name { display: block; margin-top: 2.2cqi; font: 700 7cqi/1 Georgia, "Times New Roman", serif; }
.ar-path { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 4.4cqi 0.6cqi 0; }
.ar-path::before { content: ""; position: absolute; left: 1cqi; right: 1cqi; top: 50%; height: 0.5cqi; translate: 0 -50%; background: rgb(255 255 255 / 0.25); border-radius: 99px; }
.ar-path i { position: relative; width: 3.4cqi; height: 3.4cqi; border-radius: 50%; background: #2c8577; box-shadow: inset 0 0 0 0.5cqi rgb(255 255 255 / 0.35); }
.ar-path i.is-cur { background: var(--ar-lime); box-shadow: 0 0 0 1.3cqi rgb(199 240 74 / 0.28); }
.ar-path__ends { display: flex; justify-content: space-between; margin-top: 2cqi; font: 600 2.6cqi/1 var(--f-body); color: rgb(255 255 255 / 0.72); }
.ar-prac__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 3.6cqi; }
.ar-prac__tempo { display: inline-flex; align-items: center; gap: 1.2cqi; font: 500 3cqi/1 var(--f-body); color: rgb(255 255 255 / 0.8); }
.ar-prac__tempo b { color: #fff; font-weight: 600; }
.ar-prac__tempo .ar-ic { width: 3cqi; height: 3cqi; }
.ar-prac__go { display: grid; place-items: center; width: 10cqi; height: 10cqi; border-radius: 50%; background: var(--ar-lime); color: var(--ar-ink); font-size: 4cqi; }
.ar-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; margin: 3.4cqi 4cqi 0; }
.ar-qc { display: flex; flex-direction: column; gap: 1.1cqi; min-height: 30cqi; padding: 3.6cqi; border-radius: 4.6cqi; color: #fff; }
.ar-qc--new { background: var(--ar-coral); }
.ar-qc--open { background: var(--ar-indigo); }
.ar-qc i { display: grid; place-items: center; width: 8cqi; height: 8cqi; margin-bottom: auto; border-radius: 2.4cqi; background: rgb(255 255 255 / 0.22); font-size: 4.2cqi; }
.ar-qc b { font: 600 3.7cqi/1.1 var(--f-body); }
.ar-qc small { font: 500 2.55cqi/1.3 var(--f-body); color: rgb(255 255 255 / 0.85); }
.ar-hlabel { margin: 4.4cqi 5cqi 2.2cqi; font: 600 2.6cqi/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-muted); }
.ar-hlabel--green { color: var(--ar-green); }
.ar-hlabel span { color: var(--ar-muted); }
.ar-files { display: flex; flex-direction: column; gap: 3cqi; margin: 0 4cqi; }
.ar-file { overflow: hidden; padding: 3.4cqi 3.6cqi 0; border-radius: 4cqi; background: #fff; box-shadow: 0 0.5cqi 2cqi rgb(24 21 9 / 0.06), 0 0 0 1px rgb(24 21 9 / 0.04); }
.ar-file__top { display: flex; align-items: center; justify-content: space-between; }
.ar-file__top b { font: 600 3.6cqi/1 var(--f-body); }
.ar-file__acts { display: flex; gap: 2.2cqi; color: var(--ar-muted); font-size: 4cqi; }
.ar-file__acts .is-fav { color: #d39c12; fill: var(--ar-yellow); }
.ar-file__score { margin: 0.4cqi -1.4cqi 0; }
.ar-file__foot { display: flex; align-items: center; gap: 1.4cqi; margin: 0.6cqi -3.6cqi 0; padding: 2cqi 3.6cqi; border-top: 1px solid rgb(24 21 9 / 0.06); background: #fbfdf8; }
.ar-file__foot i { padding: 1cqi 2.2cqi; border: 1px solid rgb(24 21 9 / 0.14); border-radius: 99px; font: 600 2.5cqi/1 var(--f-body); font-style: normal; }
.ar-file__foot i.is-on { border-color: #cfe6da; background: var(--ar-mint); color: var(--ar-green); }
.ar-file__foot u { margin-left: auto; font: 600 2.5cqi/1 var(--f-body); color: var(--ar-muted); text-decoration: none; }
.ar-stats { right: 0; top: 8%; width: 13.4em; padding: 1em 1.1em 0.95em; }
.ar-stats__total { display: block; margin-top: 0.5em; font: 600 1.55em/1 var(--f-body); letter-spacing: -0.02em; }
.ar-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 0.45em; height: 5.6em; margin-top: 0.85em; }
.ar-bars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.4em; height: 100%; }
.ar-bars i { display: block; width: 100%; height: calc(var(--v) / 54 * 4.2em); border-radius: 0.35em; background: rgb(12 108 95 / 0.2); transform-origin: bottom; }
.ar-bars .is-today i { background: var(--ar-green); }
.ar-bars em { font: 600 0.72em/1 var(--f-body); font-style: normal; color: var(--ar-muted); }
.ar-folders { left: 0; top: 44%; display: flex; flex-direction: column; width: 12.4em; padding: 0.95em 0.95em 0.6em; }
.ar-folders small { margin: 0 0 0.45em 0.2em; }
.ar-fold { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.2em; border-top: 1px solid rgb(24 21 9 / 0.06); }
.ar-fold .ar-ic { width: 1.25em; height: 1.25em; color: var(--c); fill: color-mix(in srgb, var(--c) 18%, transparent); }
.ar-fold b { font: 600 0.95em/1 var(--f-body); }
.ar-fold u { margin-left: auto; padding: 0.3em 0.55em; border-radius: 99px; background: rgb(24 21 9 / 0.05); font: 600 0.78em/1 var(--f-body); color: var(--ar-muted); text-decoration: none; }
.ar-sync { right: 3%; bottom: 12%; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.75em 1.15em 0.75em 0.9em; border-radius: 99px; font: 600 0.95em/1 var(--f-body); }
.ar-sync .ar-ic { width: 1.3em; height: 1.3em; color: var(--ar-blue); }
.ar-f1 { height: calc(var(--ar-dw) * 2.1667 * 0.87 + 7cqi); }
@container (min-width: 401px) {
.ar-f1 .ar-feat__phone, .ar-f3 .ar-feat__phone { left: auto; right: 5cqi; translate: none; }
.ar-f2 .ar-feat__phone { left: 5cqi; translate: none; }
.ar-tnote { left: 3cqi; top: 21%; }
.ar-stitle { left: 6cqi; right: auto; top: 49%; }
.ar-trainer { right: 2cqi; top: 12%; }
.ar-mix { left: auto; right: 4cqi; bottom: 20%; }
.ar-stats { left: 3cqi; right: auto; top: 10%; }
.ar-folders { left: 7cqi; top: 49%; }
.ar-sync { right: 1cqi; bottom: 13%; }
}
@container (max-width: 400px) {
.ar-feat { --ar-dw: clamp(220px, 70cqi, 270px); }
.ar-card { font-size: clamp(9.5px, 2.9cqi, 12px); }
.ar-tnote { top: 2%; }
.ar-trainer { top: 2%; right: -1%; }
.ar-stats { top: 2%; right: -1%; }
.ar-folders { top: auto; bottom: 4%; left: -1%; }
.ar-stitle { top: auto; bottom: 3%; right: -1%; }
.ar-mix { bottom: 4%; }
.ar-sync { bottom: 30%; right: -1%; }
}
.ar-show { --pw: clamp(200px, 17.6cqi, 252px); --gap: clamp(16px, 2.6cqi, 36px); position: relative; }
.ar-show__row { display: flex; align-items: flex-start; gap: var(--gap); width: max-content; margin-left: 50%; translate: -50% 0; padding: 1cqi 0 0; }
.ar-show__item { display: flex; flex-direction: column; align-items: center; gap: 16px; width: var(--pw); margin: 0; }
.ar-show__item .ar-phone { --ar-dw: var(--pw); }
.ar-show__item:nth-child(1), .ar-show__item:nth-child(5) { padding-top: calc(var(--pw) * 0.16); }
.ar-show__item:nth-child(2), .ar-show__item:nth-child(4) { padding-top: calc(var(--pw) * 0.07); }
.ar-show figcaption { font: 400 12.5px/1 var(--f-mono); color: var(--body, #484848); white-space: nowrap; }
.ar-show figcaption::before { content: "# "; color: var(--accent, #1d8a94); }
.ar-lhead { flex: none; padding: 4.2cqi 5cqi 3.2cqi; }
.ar-display { font: 600 8.4cqi/1 var(--f-body); letter-spacing: 0.01em; text-transform: uppercase; color: var(--ar-green); }
.ar-search { flex: none; display: flex; align-items: center; gap: 2cqi; margin: 0 4cqi; padding: 2.8cqi 4cqi; border-radius: 99px; background: #fff; color: var(--ar-muted); font: 500 3.3cqi/1 var(--f-body); box-shadow: 0 0.4cqi 1.4cqi rgb(24 21 9 / 0.08); }
.ar-search .ar-ic { width: 3.8cqi; height: 3.8cqi; }
.ar-utabs { flex: none; display: flex; gap: 5cqi; margin: 4.4cqi 5cqi 3.4cqi; font: 600 3.4cqi/1 var(--f-body); color: var(--ar-muted); }
.ar-utabs i { position: relative; font-style: normal; }
.ar-utabs i.is-on { color: var(--ar-ink); }
.ar-utabs i.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2.2cqi; height: 0.8cqi; border-radius: 99px; background: var(--ar-indigo); }
.ar-quick--float { position: absolute; left: 0; right: 0; bottom: 6cqi; z-index: 5; }
.ar-quick--float .ar-qc { flex-direction: row; align-items: center; gap: 2cqi; min-height: 0; padding: 3cqi; box-shadow: 0 3cqi 6cqi -2cqi rgb(24 21 9 / 0.4); }
.ar-quick--float .ar-qc i { width: 7cqi; height: 7cqi; margin: 0; font-size: 3.8cqi; }
.ar-quick--float .ar-qc b { font-size: 3.4cqi; }
.ar-chips { flex: none; display: flex; gap: 1.8cqi; margin: 3.4cqi 4cqi 0; }
.ar-chips i { padding: 2cqi 3.4cqi; border: 1px solid rgb(24 21 9 / 0.1); border-radius: 99px; background: #fff; font: 600 3cqi/1 var(--f-body); font-style: normal; }
.ar-chips i.is-on { border-color: var(--ar-indigo); background: var(--ar-indigo); color: #fff; }
.ar-lc { flex: none; margin: 0 4cqi 3cqi; padding: 3.6cqi; border-radius: 4.6cqi; color: #fff; }
.ar-lc--green { background: var(--ar-green); }
.ar-lc--indigo { background: var(--ar-indigo); }
.ar-lc--coral { background: var(--ar-coral); }
.ar-lc__top { display: flex; align-items: center; gap: 2cqi; }
.ar-lc__top b { margin-right: auto; font: 600 4.4cqi/1 var(--f-body); }
.ar-lc__sig { padding: 1.1cqi 2.2cqi; border-radius: 99px; background: rgb(255 255 255 / 0.22); font: 600 2.6cqi/1 var(--f-body); }
.ar-lc__play { display: grid; place-items: center; width: 8cqi; height: 8cqi; border-radius: 50%; background: rgb(255 255 255 / 0.22); font-size: 3.4cqi; }
.ar-lc__score { margin-top: 2.6cqi; padding: 0.6cqi 1.6cqi; border-radius: 3cqi; background: #fff; }
.ar-lc small { display: block; margin-top: 2.2cqi; font: 500 2.8cqi/1 var(--f-body); color: rgb(255 255 255 / 0.86); }
.ar-phone--metronome .ar-scr { background: #edf2e6; }
.ar-mt { position: relative; flex: 1; min-height: 0; }
.ar-mt__scale { position: absolute; left: 50%; bottom: 13cqi; width: 0; height: 70%; transform-origin: 0 100%; rotate: -9deg; }
.ar-mt__mark { position: absolute; right: 2.2cqi; top: calc(6% + var(--i) * 13%); display: flex; align-items: center; gap: 1.8cqi; font: 600 2.7cqi/1 var(--f-body); color: rgb(24 21 9 / 0.64); }
.ar-mt__mark i { width: 3.4cqi; height: 0.45cqi; border-radius: 99px; background: rgb(24 21 9 / 0.2); }
.ar-mt__arm { position: absolute; left: 50%; bottom: 13cqi; width: 2cqi; height: 70%; translate: -50% 0; transform-origin: 50% 100%; rotate: -9deg; }
.ar-mt__rod { position: absolute; inset: 0; border-radius: 99px; background: var(--ar-ink); }
.ar-mt__weight { position: absolute; left: 50%; top: 21%; display: grid; place-items: center; width: 10cqi; height: 6.4cqi; translate: -50% 0; border-radius: 1.8cqi; background: var(--ar-lime); color: var(--ar-ink); font: 700 4.4cqi/1 var(--f-body); box-shadow: 0 0.8cqi 1.8cqi rgb(24 21 9 / 0.25); }
.ar-mt__pivot { position: absolute; left: 50%; bottom: 7cqi; display: grid; place-items: center; width: 12cqi; height: 12cqi; translate: -50% 0; border-radius: 50%; background: var(--ar-green); color: #fff; font-size: 4.6cqi; box-shadow: 0 1.4cqi 3cqi -1cqi rgb(12 108 95 / 0.7); }
.ar-mt__bpm { position: absolute; left: 5cqi; bottom: 14cqi; display: flex; flex-direction: column; align-items: flex-start; gap: 1.8cqi; }
.ar-mt__bpm b { font: 600 7.6cqi/1 var(--f-body); letter-spacing: -0.04em; }
.ar-mt__bpm strong { margin-top: 1cqi; font: 600 3.3cqi/1 var(--f-body); }
.ar-mt__bpm small { font: 500 2.6cqi/1 var(--f-body); color: var(--ar-muted); }
.ar-mt__sounds { position: absolute; right: 4cqi; bottom: 14cqi; display: flex; flex-direction: column; gap: 1.2cqi; padding: 1.4cqi; border-radius: 99px; background: #fff; box-shadow: 0 0.8cqi 2.4cqi rgb(24 21 9 / 0.1); }
.ar-mt__sounds i { display: grid; place-items: center; width: 7.6cqi; height: 7.6cqi; border-radius: 50%; color: var(--ar-ink); font-size: 3.8cqi; }
.ar-mt__sounds i.is-on { background: var(--ar-indigo); color: #fff; }
.ar-mt__foot { flex: none; padding: 4.4cqi 5cqi 9cqi; border-radius: 6cqi 6cqi 0 0; background: #fff; box-shadow: 0 -1cqi 4cqi rgb(24 21 9 / 0.06); }
.ar-beats--mt { gap: 2cqi; margin-bottom: 4.4cqi; }
.ar-beats--mt i { height: 1.5cqi; }
.ar-mt__steps { display: flex; align-items: flex-end; gap: 4cqi; }
.ar-mt__steps > span { display: flex; flex-direction: column; gap: 1.8cqi; }
.ar-mt__steps small { font: 600 2.1cqi/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-muted); white-space: nowrap; }
.ar-step { display: flex; align-items: center; gap: 2cqi; }
.ar-step i { display: grid; place-items: center; width: 7cqi; height: 7cqi; border: 1px solid rgb(24 21 9 / 0.14); border-radius: 2cqi; font-size: 3.2cqi; }
.ar-step b { font: 600 3.6cqi/1 var(--f-body); }
.ar-mt__steps .ar-mt__sig { margin-left: auto; gap: 0; padding-left: 3cqi; border-left: 1px solid rgb(24 21 9 / 0.12); }
.ar-mt__sig b { font: 600 4.6cqi/0.95 var(--f-body); }
.ar-row--hp { margin: 0.8cqi -1.2cqi 1.6cqi; }
.ar-paper { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 5cqi; padding: 5.4cqi 4cqi 3cqi; border-radius: 1.6cqi; background: #fff; box-shadow: 0 2.4cqi 6cqi -2.4cqi rgb(24 21 9 / 0.28), 0 0 0 1px rgb(24 21 9 / 0.05); }
.ar-paper__title { margin-bottom: 1.6cqi; font: 700 4.5cqi/1.15 Georgia, "Times New Roman", serif; }
.ar-paper .ar-row { margin: 0 -1.2cqi 0.6cqi; }
.ar-paper__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font: 500 2.3cqi/1 var(--f-body); color: var(--ar-muted); }
.ar-paper__foot u { color: var(--ar-indigo-ink); }
.ar-logo--sm { height: 3.4cqi; }
.ar-export { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; padding: 4cqi 5cqi 9cqi; }
.ar-btn { display: flex; align-items: center; justify-content: center; gap: 1.6cqi; padding: 3.2cqi 1cqi; border: 1px solid rgb(24 21 9 / 0.12); border-radius: 99px; background: #fff; font: 600 3.2cqi/1 var(--f-body); white-space: nowrap; }
.ar-btn--green { border-color: transparent; background: var(--ar-green); color: #fff; }
.ar-btn .ar-ic { width: 3.8cqi; height: 3.8cqi; }
.ar-ib--sm { width: 8.4cqi; height: 8.4cqi; }
@keyframes ar-pop { from { opacity: 0; transform: translateY(-5px); } }
@keyframes ar-draw { from { transform: scaleX(0); } }
@keyframes ar-fade { from { opacity: 0; } }
@keyframes ar-rise { from { opacity: 0; transform: translateY(1.4em); } }
@keyframes ar-from-left { from { opacity: 0; transform: translateX(-1.6em); } }
@keyframes ar-from-right { from { opacity: 0; transform: translateX(1.6em); } }
@keyframes ar-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ar-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ar-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ar-flash { 0%, 5% { color: var(--ar-coral-ink); } 6.2%, 100% { color: var(--ar-note); } }
@keyframes ar-plate { 0%, 5% { opacity: 1; } 6.2%, 100% { opacity: 0; } }
@keyframes ar-swing { 0%, 100% { rotate: -16deg; } 50% { rotate: 16deg; } }
@keyframes ar-beat4 { 0%, 21% { background: var(--ar-yellow); } 25%, 100% { background: rgb(255 198 61 / 0.32); } }
@keyframes ar-ring { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
.ar-staff line, .ar-volta path { transform-box: fill-box; transform-origin: left center; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-staff line { animation: ar-draw 0.9s var(--ease-out) 0.35s both; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in :is(.ar-ev, .ar-clef, .ar-sig, .ar-repeat, .ar-bar, .ar-simile, .ar-mlabel) { animation: ar-pop 0.5s var(--ease-out) both; animation-delay: calc(0.55s + var(--n, 0) * 30ms); }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in :is(.ar-repeat, .ar-simile) { animation-delay: 1.3s; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-sec { animation: ar-fade 0.6s var(--ease-out) both; animation-delay: calc(0.4s + var(--d, 0) * 0.25s); }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-textline { animation: ar-fade 0.4s var(--ease-out) 1.45s both; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-type { animation: ar-type 1.1s steps(26, end) 1.6s both; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-caret { animation: ar-blink 1s step-end 1.6s infinite; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-metro { animation: ar-from-left 0.9s var(--ease-out) 0.7s both; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-menu__item { animation: ar-from-right 0.7s var(--ease-out) both; animation-delay: calc(1s + var(--k) * 80ms); }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-menu__fab { animation: ar-pop 0.6s var(--ease-out) 1.45s both; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-flt { animation: ar-bob 6s ease-in-out infinite; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-flt--2 { animation-duration: 7.4s; animation-delay: -2s; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-flt--3 { animation-duration: 6.6s; animation-delay: -3.4s; }
.js:not(.reduce-motion) .illu--app-ritmik-hero.is-in .ar-flt--4 { animation-duration: 8s; animation-delay: -1.2s; }
.js:not(.reduce-motion) :is(.illu--app-ritmik-hero, .illu--app-ritmik-f2).is-in .ar-ev.ar-pl:not(.ar-ev--beam, .ar-ev--rest) {
animation: ar-pop 0.5s var(--ease-out) both, ar-flash calc(var(--ar-beat) * 8) linear infinite;
animation-delay: calc(0.55s + var(--n, 0) * 30ms), calc(var(--ar-start) + var(--t) * var(--ar-beat));
}
.js:not(.reduce-motion) :is(.illu--app-ritmik-hero, .illu--app-ritmik-f2).is-in .ar-hit {
animation: ar-plate calc(var(--ar-beat) * 8) linear infinite;
animation-delay: calc(var(--ar-start) + var(--t) * var(--ar-beat));
}
.js:not(.reduce-motion) :is(.illu--app-ritmik-hero, .illu--app-ritmik-f2, .illu--app-ritmik-screens).is-in .ar-metroart__pend {
animation: ar-swing calc(var(--ar-beat) * 2) ease-in-out var(--ar-start) infinite;
}
.js:not(.reduce-motion) :is(.illu--app-ritmik-hero, .illu--app-ritmik-screens).is-in .ar-beats i {
animation: ar-beat4 calc(var(--ar-beat) * 4) linear infinite;
}
.js:not(.reduce-motion) :is(.illu--app-ritmik-hero, .illu--app-ritmik-screens).is-in .ar-beats i:nth-child(n) { animation-delay: calc(var(--ar-start) + var(--ar-beat) * var(--b, 0)); }
.ar-beats i:nth-child(2) { --b: 1; }
.ar-beats i:nth-child(3) { --b: 2; }
.ar-beats i:nth-child(4) { --b: 3; }
.js:not(.reduce-motion) :is(.illu--app-ritmik-hero, .illu--app-ritmik-f2).is-in .ar-play__ring {
animation: ar-ring calc(var(--ar-beat) * 2) var(--ease-out) var(--ar-start) infinite;
}
@keyframes ar-phone-in { from { opacity: 0; transform: translateY(9%); } }
@keyframes ar-sheet-in { from { transform: translateY(70%); } }
@keyframes ar-pick { 0% { transform: scale(0.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ar-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes ar-grow-y { from { transform: scaleY(0); } }
@keyframes ar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ar-glow { 0%, 100% { box-shadow: 0 0 0 0.25em rgb(255 106 58 / 0.28); } 50% { box-shadow: 0 0 0 0.5em rgb(255 106 58 / 0.08); } }
@keyframes ar-node { 0%, 100% { box-shadow: 0 0 0 1.3cqi rgb(199 240 74 / 0.28); } 50% { box-shadow: 0 0 0 2.4cqi rgb(199 240 74 / 0.06); } }
@keyframes ar-arm { 0%, 100% { rotate: -16deg; } 50% { rotate: -2deg; } }
@keyframes ar-pan { from { transform: translateX(calc((5 * var(--pw) + 4 * var(--gap) - 100cqi) / 2 + 4cqi)); } to { transform: translateX(calc((5 * var(--pw) + 4 * var(--gap) - 100cqi) / -2 - 4cqi)); } }
.js:not(.reduce-motion) :is(.illu--app-ritmik-f1, .illu--app-ritmik-f2, .illu--app-ritmik-f3):not(.is-in) :is(.ar-feat__phone, .ar-card) { opacity: 0; }
.js:not(.reduce-motion) :is(.illu--app-ritmik-f1, .illu--app-ritmik-f2, .illu--app-ritmik-f3).is-in .ar-feat__phone { animation: ar-phone-in 1s var(--ease-out) both; }
.js:not(.reduce-motion) :is(.illu--app-ritmik-f1, .illu--app-ritmik-f3).is-in .ar-card { animation: ar-from-left 0.8s var(--ease-out) 0.45s both; }
.js:not(.reduce-motion) :is(.illu--app-ritmik-f1, .illu--app-ritmik-f3).is-in .ar-card + .ar-card { animation-delay: 0.65s; }
.js:not(.reduce-motion) .illu--app-ritmik-f3.is-in .ar-sync { animation: ar-rise 0.8s var(--ease-out) 0.9s both; }
.js:not(.reduce-motion) .illu--app-ritmik-f2.is-in .ar-card { animation: ar-from-right 0.8s var(--ease-out) 0.45s both; }
.js:not(.reduce-motion) .illu--app-ritmik-f2.is-in .ar-mix { animation-delay: 0.7s; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-sheet { animation: ar-sheet-in 0.9s var(--ease-out) 0.35s both; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in :is(.ar-nc, .ar-vc, .ar-mods i).is-on { animation: ar-pick 0.5s var(--ease-out) 1.05s both; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-vc.is-on { animation-delay: 1.2s; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-mods i.is-on { animation-delay: 1.35s; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-selbg { animation: ar-fade 0.5s var(--ease-out) 0.9s both; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-tenuto { animation: ar-fade 0.4s var(--ease-out) 1.4s both; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-prog i { animation: ar-fill 0.9s var(--ease-out) 0.5s both; }
.ar-np { transform-box: fill-box; transform-origin: center; }
.ar-np-at { pointer-events: none; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-np { animation: ar-pop 0.4s var(--ease-out) 1s both, ar-pulse 2.4s ease-in-out 2.4s infinite; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-np-at + .ar-np-at .ar-np { animation-delay: 1.1s, 3.6s; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-type { animation: ar-type 1.1s steps(20, end) 1.1s both; }
.js:not(.reduce-motion) .illu--app-ritmik-f1.is-in .ar-caret { animation: ar-blink 1s step-end 1.1s infinite; }
.ar-ladder i { position: relative; }
.ar-ladder i.is-cur::before { background: rgb(255 106 58 / 0.22); }
.ar-ladder i.is-cur::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0.45em; border-radius: 99px; background: var(--ar-coral); transform-origin: left; transform: scaleX(0.72); }
.js:not(.reduce-motion) .illu--app-ritmik-f2.is-in .ar-ladder i.is-cur::after { animation: ar-fill calc(var(--ar-beat) * 8) linear var(--ar-start) infinite; }
.js:not(.reduce-motion) .illu--app-ritmik-f2.is-in .ar-heads__dot { animation: ar-glow var(--ar-beat) ease-in-out var(--ar-start) infinite; }
.js:not(.reduce-motion) .illu--app-ritmik-f3.is-in .ar-bars i { animation: ar-grow-y 0.8s var(--ease-out) both; animation-delay: calc(0.7s + var(--k) * 60ms); }
.js:not(.reduce-motion) .illu--app-ritmik-f3.is-in .ar-path i.is-cur { animation: ar-node 2.4s ease-in-out 1.6s infinite; }
.js:not(.reduce-motion) .illu--app-ritmik-screens:not(.is-in) .ar-show__item { opacity: 0; }
.js:not(.reduce-motion) .illu--app-ritmik-screens.is-in .ar-show__item { animation: ar-rise 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
.js:not(.reduce-motion) .illu--app-ritmik-screens.is-in .ar-mt__arm { animation: ar-arm calc(var(--ar-beat) * 2) ease-in-out var(--ar-start) infinite; }
@container (max-width: 1100px) {
.js:not(.reduce-motion) .illu--app-ritmik-screens.is-in .ar-show__row { animation: ar-pan 30s ease-in-out 1.5s infinite alternate; }
}
:is(.reduce-motion, html:not(.js)) .ar-ev.is-cur { color: var(--ar-coral-ink); }
:is(.reduce-motion, html:not(.js)) .ar-hit.is-cur { opacity: 1; }
.illu--app-voca-hero,
.illu--app-voca-f1,
.illu--app-voca-f2,
.illu--app-voca-f3,
.illu--app-voca-screens {
--av-navy: #14143f;
--av-yellow: #ffce4a;
--av-yellow-hi: #ffe36b;
--av-orange: #ec8f1c;
--av-orange-ink: #9a5207;
--av-green: #1f9f5f;
--av-green-soft: #7dd1a9;
--av-blue: #0f7fe5;
--av-blue-edge: #0a63b5;
--av-word: #3a414d;
--av-text: #1f2333;
--av-muted: #626875;
--av-btn: #4b5185;
--av-edge: #c9cde0;
--av-shadow: 0 1.6em 3em -1.6em rgb(20 20 63 / 0.35), 0 0.35em 0.9em -0.4em rgb(20 20 63 / 0.18);
container-type: inline-size;
position: relative;
color: var(--av-text);
font-family: var(--f-body);
line-height: 1.25;
letter-spacing: 0;
text-align: left;
}
.av-scr { color: var(--av-text); font-family: var(--f-body); }
.av-scr p { margin: 0; }
.av-scr svg, .av-float svg { display: block; }
.av-card {
--c: #d9f1fd;
--e: #b2e0f7;
position: relative;
border-radius: 6cqi;
background: var(--c);
border: 0.35cqi solid color-mix(in srgb, var(--e) 70%, #fff);
box-shadow: 0 1.4cqi 0 var(--e), 0 4cqi 7cqi -3cqi rgb(30 40 80 / 0.22);
}
.av-card--sky { --c: #d9f1fd; --e: #b2e0f7; }
.av-card--mint { --c: #dcfdea; --e: #b3eecb; }
.av-card--lilac { --c: #f5defe; --e: #e3c0f9; }
.av-card__word { font: 500 11cqi/1.05 var(--f-body); color: var(--av-word); letter-spacing: -0.01em; }
.av-card__ipa { margin-top: 2.2cqi !important; font: 400 4.4cqi/1.2 var(--f-body); color: #646a76; }
.av-card__pos { margin-top: 1.4cqi !important; font: 400 4.4cqi/1.2 var(--f-body); color: var(--av-word); }
.av-card__def { margin-top: 4cqi !important; font: 400 5.4cqi/1.35 var(--f-body); color: var(--av-text); }
.av-card__label { font: 600 3.3cqi/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: #3d8fb8; }
.av-card__ex { margin: 2.2cqi 0 5.5cqi !important; font: 400 5.6cqi/1.38 var(--f-body); color: var(--av-text); }
.av-syn { display: flex; flex-wrap: wrap; gap: 1.8cqi; margin-top: 2.6cqi !important; }
.av-syn span { padding: 1.4cqi 3.2cqi; border-radius: 99px; background: #fff; box-shadow: 0 0.7cqi 0 rgb(0 60 100 / 0.12); font: 500 3.9cqi/1.1 var(--f-body); color: #555c68; }
.av-stamp {
display: inline-block;
padding: 0.5em 1em 0.46em;
border-radius: 0.55em;
background: var(--av-orange);
box-shadow: 0 0.22em 0 var(--av-orange-ink);
color: #fff;
font: 600 1em/1 var(--f-body);
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.av-stamp--know { background: var(--av-green); box-shadow: 0 0.22em 0 #137544; }
.av-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6cqi; margin: 0; padding: 0; list-style: none; }
.av-week li { display: grid; justify-items: center; gap: 1.2cqi; }
.av-week span { font: 600 3.3cqi/1 var(--f-body); color: var(--av-text); }
.av-week i {
position: relative;
display: block;
width: 6.4cqi;
height: 6.4cqi;
border-radius: 50%;
background: #e7d6c1;
}
.av-week .is-done i {
border-radius: 0;
background: #5aaee0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 12.4l3 3 5.8-6.4' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 26'%3E%3Cpath d='M12 2.4Q15.83.21 17.64 4.23Q22.03 4.71 21.13 9.03Q24.4 12 21.13 14.97Q22.03 19.29 17.64 19.77Q15.83 23.79 12 21.6Q8.17 23.79 6.36 19.77Q1.97 19.29 2.87 14.97Q-.4 12 2.87 9.03Q1.97 4.71 6.36 4.23Q8.17.21 12 2.4Z'/%3E%3C/svg%3E") center / 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 26'%3E%3Cpath d='M12 2.4Q15.83.21 17.64 4.23Q22.03 4.71 21.13 9.03Q24.4 12 21.13 14.97Q22.03 19.29 17.64 19.77Q15.83 23.79 12 21.6Q8.17 23.79 6.36 19.77Q1.97 19.29 2.87 14.97Q-.4 12 2.87 9.03Q1.97 4.71 6.36 4.23Q8.17.21 12 2.4Z'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.av-week .is-freeze i {
background: #f3c9a6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M5.5 8.25l13 7.5M5.5 15.75l13-7.5M10 5.5l2 2 2-2M10 18.5l2-2 2 2'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.av-week .is-today i { background: #fff; box-shadow: inset 0 0 0 0.7cqi var(--av-orange); }
.av-week .is-today span { color: var(--av-orange-ink); }
:is(.av-hero__phone, .av-f1__phone, .av-band__ph) { padding: calc(var(--device-w) * 0.026); }
.av-ava { display: block; overflow: hidden; background: var(--av-yellow); }
.av-ava svg { width: 100%; height: 100%; }
.av-ava--sq { border-radius: 26%; }
.av-ava--round { border-radius: 50%; }
.av-actions { display: flex; justify-content: center; gap: 7cqi; }
.av-actions span { display: grid; place-items: center; width: 12cqi; height: 12cqi; border-radius: 50%; background: var(--av-btn); color: #fff; box-shadow: 0 0.9cqi 0 #353a69; }
.av-actions svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.av-tabs {
position: absolute;
inset: auto 3.5cqi 3.5cqi;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 2.4cqi 2cqi 2.2cqi;
border-radius: 7cqi;
background: #fff;
box-shadow: 0 0 0 0.3cqi rgb(20 20 63 / 0.06), 0 3cqi 6cqi -3cqi rgb(20 20 63 / 0.25);
}
.av-tabs span { display: grid; justify-items: center; gap: 1cqi; font: 600 3cqi/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: #9aa0ab; }
.av-tabs svg { width: 6.6cqi; height: 6.6cqi; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.av-tabs .is-on { color: var(--av-navy); }
.av-float {
position: absolute;
z-index: 4;
display: flex;
align-items: center;
gap: 0.7em;
padding: 0.75em 1.05em 0.75em 0.75em;
border-radius: 1.1em;
background: #fff;
box-shadow: 0 0.18em 0 rgb(20 20 63 / 0.08), var(--av-shadow);
font-size: var(--av-fs, 15px);
white-space: nowrap;
}
.av-float__txt { display: grid; gap: 0.18em; }
.av-float__txt strong { font: 600 1em/1.1 var(--f-body); color: var(--av-navy); }
.av-hero__streak .av-float__txt strong { font-size: 1.3em; line-height: 1; letter-spacing: -0.01em; }
.av-float__txt small { font: 500 0.78em/1.1 var(--f-body); color: var(--av-muted); }
.av-flame { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 0.75em; background: #fff1dc; }
.av-flame svg { width: 1.55em; height: 1.55em; overflow: visible; }
.av-flame__out { fill: #f58a1f; }
.av-flame__in { fill: #ffd04a; }
.av-ring { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; }
.av-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.av-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.av-ring__track { stroke: #eef0f6; }
.av-ring__bar { stroke: var(--av-blue); stroke-dasharray: 70 100; }
.av-ring b { position: relative; font: 600 0.95em/1 var(--f-body); color: var(--av-navy); }
.av-bird { display: block; width: 100%; height: auto; overflow: visible; }
.av-bird__happy { display: none; }
.av-bird--hi .av-bird__open { display: none; }
.av-bird--hi .av-bird__happy { display: inline; }
.av-bird__wave { transform-box: view-box; transform-origin: 138px 160px; }
.illu--app-voca-hero { width: 100%; }
.av-hero {
--pw: clamp(250px, 56cqi, 330px);
--av-fs: clamp(12px, calc(var(--pw) * 0.047), 15.5px);
position: relative;
display: grid;
place-items: center;
padding: 5% 0 4%;
}
.av-hero__stage { position: relative; width: var(--pw); translate: -12% 0; }
.av-hero__phone { --device-w: var(--pw); position: relative; z-index: 2; width: 100%; }
.av-hero__peek {
position: absolute;
z-index: 1;
right: -60%;
top: 11%;
width: 88%;
aspect-ratio: 1;
-webkit-mask: radial-gradient(circle closest-side, #000 99.2%, transparent 100%), linear-gradient(#000 0 50%, transparent 50%);
mask: radial-gradient(circle closest-side, #000 99.2%, transparent 100%), linear-gradient(#000 0 50%, transparent 50%);
}
.av-hero__sun {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 40% 32%, var(--av-yellow-hi), var(--av-yellow) 68%);
box-shadow: inset 0 -1.4em 2.6em -1.6em rgb(214 140 0 / 0.4);
}
.av-hero__bird { position: absolute; left: 21%; bottom: -5%; width: 74%; transform-origin: 50% 100%; }
.av-hero__bird svg { rotate: 6deg; }
.av-learn { background: linear-gradient(180deg, #fbfcff 0%, #f1f5fb 100%); color: var(--av-navy); }
.av-learn__top { display: flex; align-items: center; gap: 2.4cqi; margin: 3.5cqi 4cqi 0; padding: 2.4cqi 2.6cqi; border-radius: 5cqi; background: #fff; box-shadow: 0 0.8cqi 0 #e4e7f0, 0 2cqi 5cqi -3cqi rgb(20 20 63 / 0.2); }
.av-learn__top .av-ava { flex: none; width: 11cqi; height: 11cqi; }
.av-learn__top .av-week { flex: 1; }
.av-learn__deck { position: relative; margin: 7cqi 6cqi 0; height: 112cqi; perspective: 240cqi; }
.av-learn__under { position: absolute; inset: 3cqi 1cqi -1cqi; rotate: -4.5deg; }
.av-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.av-flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqi 7cqi 7cqi; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.av-flip__front { justify-content: center; }
.av-flip__front .av-card__word { font-size: 14cqi; }
.av-flip__front .av-card__ipa { font-size: 5cqi; }
.av-flip__front .av-card__pos { font-size: 5cqi; }
.av-flip__back { justify-content: center; transform: rotateY(180deg); visibility: hidden; }
.av-flip__back .av-card__def { margin: 2.4cqi 0 7cqi !important; font-size: 7.2cqi; font-weight: 500; line-height: 1.22; }
.av-flip__back .av-card__ex { margin-bottom: 7cqi !important; font-size: 5.5cqi; }
.av-flip__back .av-syn span { font-size: 4.3cqi; }
.av-card__tag { position: absolute; top: 6cqi; left: 7cqi; padding: 1.3cqi 2.8cqi; border-radius: 99px; background: rgb(255 255 255 / 0.7); font: 600 3.2cqi/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: #3d8fb8; }
.av-card__sound { position: absolute; left: 7cqi; bottom: 7cqi; display: inline-flex; align-items: center; gap: 1.6cqi; font: 500 3.7cqi/1 var(--f-body); color: #4f87ab; }
.av-card__sound svg { width: 5cqi; height: 5cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.av-learn .av-actions { margin-top: 9cqi; }
.av-hero__streak { left: -31%; top: 21%; }
.av-spark { position: absolute; z-index: 3; width: 5%; aspect-ratio: 1; background: var(--av-yellow); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.av-spark--1 { right: -60%; top: 6%; width: 8%; }
.av-spark--2 { right: -16%; top: 3%; width: 5.4%; background: #7cc9ec; }
.av-spark--3 { right: -68%; top: 57%; width: 5.8%; background: #f5a033; }
.av-hero__goal { left: -27%; bottom: 13%; }
@container (max-width: 520px) {
.av-hero { --pw: clamp(250px, 68cqi, 300px); padding-top: 11%; }
.av-hero__stage { translate: -13% 0; }
.av-hero__streak { left: -9%; top: -4.5%; }
.av-hero__goal { left: auto; right: -13%; bottom: 13%; }
.av-hero__peek { right: -50%; top: 5%; width: 72%; }
}
@container (max-width: 360px) {
.av-hero { --pw: 236px; }
.av-hero__stage { translate: -8% 0; }
.av-hero__streak { left: -4%; }
.av-hero__goal { right: -6%; }
.av-hero__peek { right: -40%; width: 62%; }
}
@keyframes av-rise { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
@keyframes av-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes av-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-peek { from { transform: translate(-30%, 40%) rotate(-14deg); } to { transform: none; } }
@keyframes av-wave { 0%, 100% { rotate: 0deg; } 20% { rotate: 16deg; } 40% { rotate: -6deg; } 60% { rotate: 14deg; } 80% { rotate: -2deg; } }
@keyframes av-flip-loop { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes av-face-front { 0%, 45% { visibility: visible; } 45.01%, 95% { visibility: hidden; } 95.01%, 100% { visibility: visible; } }
@keyframes av-face-back { 0%, 45% { visibility: hidden; } 45.01%, 95% { visibility: visible; } 95.01%, 100% { visibility: hidden; } }
@keyframes av-ring-fill { from { stroke-dasharray: 0 100; } }
@keyframes av-flicker { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.93, 1.07); } }
@keyframes av-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.45em; } }
@keyframes av-badge { from { opacity: 0; transform: scale(0.3) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes av-today { 0%, 100% { box-shadow: inset 0 0 0 0.7cqi var(--av-orange), 0 0 0 0 rgb(236 143 28 / 0.45); } 60% { box-shadow: inset 0 0 0 0.7cqi var(--av-orange), 0 0 0 1.8cqi rgb(236 143 28 / 0); } }
@keyframes av-sparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.55) rotate(45deg); } }
.js:not(.reduce-motion) .illu--app-voca-hero:not(.is-in) :is(.av-hero__phone, .av-float, .av-week i, .av-learn__deck, .av-hero__bird, .av-spark) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-spark { animation: av-pop 0.5s var(--spring) 1.5s both, av-sparkle 2.8s var(--ease-in-out) 2.2s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-spark--2 { animation-delay: 1.65s, 3.1s; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-spark--3 { animation-delay: 1.8s, 2.6s; }
.js:not(.reduce-motion) .illu--app-voca-hero:not(.is-in) .av-hero__sun { transform: scale(0.4); opacity: 0; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-hero__phone { animation: av-rise 1s var(--ease-out) 0.15s both; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-hero__sun { animation: av-pop 1s var(--spring) 0.7s both; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-week i { animation: av-badge 0.5s var(--spring) both; animation-delay: calc(0.75s + var(--i, 0) * 70ms); }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-week li:nth-child(2) i { --i: 1; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-week li:nth-child(3) i { --i: 2; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-week li:nth-child(4) i { --i: 3; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-week li:nth-child(5) i { --i: 4; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-week li:nth-child(6) i { --i: 5; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-week li:nth-child(7) i { animation: av-badge 0.5s var(--spring) 1.17s both, av-today 2.4s var(--ease-out) 2.4s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-learn__deck { animation: av-rise 0.8s var(--ease-out) 0.55s both; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-flip { animation: av-flip-loop 10s var(--ease-in-out) 3.6s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-flip__front { animation: av-face-front 10s linear 3.6s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-flip__back { animation: av-face-back 10s linear 3.6s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-hero__bird { animation: av-fade 0.25s linear 1s both; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-hero__bird svg { animation: av-peek 0.9s var(--spring) 1s both; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-bird__wave { animation: av-wave 1.6s var(--ease-in-out) 1.6s both, av-wave 1.6s var(--ease-in-out) 10s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-hero__streak { animation: av-pop 0.6s var(--spring) 1.35s both, av-float 6s var(--ease-in-out) 3s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-hero__goal { animation: av-pop 0.6s var(--spring) 1.55s both, av-float 7s var(--ease-in-out) 3.6s infinite; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-ring__bar { animation: av-ring-fill 1.4s var(--ease-out) 1.7s both; }
.js:not(.reduce-motion) .illu--app-voca-hero.is-in .av-flame svg { animation: av-flicker 1.8s var(--ease-in-out) 2s infinite; transform-origin: 50% 90%; }
.illu--app-voca-f1 {
width: 100%;
margin-bottom: calc(-1 * clamp(24px, 4vw, 56px));
}
.av-f1 {
--pw: clamp(252px, 60cqi, 318px);
--av-fs: clamp(12px, calc(var(--pw) * 0.046), 15px);
position: relative;
height: clamp(440px, calc(var(--pw) * 1.72), 560px);
overflow: hidden;
}
.av-f1__phone { --device-w: var(--pw); position: absolute; left: 50%; top: 16%; width: var(--pw); translate: -40% 0; }
.av-prog { background: linear-gradient(180deg, #fffdf6 0%, #f6f7fb 60%); }
.av-prog__title { margin: 2.5cqi 6cqi 0 !important; font: 600 8cqi/1.1 var(--f-body); color: var(--av-navy); letter-spacing: -0.01em; }
.av-prog__streak { margin: 4cqi 4.5cqi 0; padding: 4.5cqi 4.5cqi 4cqi; border-radius: 6cqi; background: #fff; box-shadow: 0 1cqi 0 #ece6d8, 0 3cqi 6cqi -4cqi rgb(80 50 0 / 0.25); }
.av-prog__row { display: flex; align-items: center; gap: 3.4cqi; margin-bottom: 4.5cqi; }
.av-prog__flame { display: grid; place-items: center; flex: none; width: 15cqi; height: 15cqi; border-radius: 4.5cqi; background: linear-gradient(180deg, #fff3df, #ffe6c2); }
.av-prog__flame svg { width: 64%; height: 64%; overflow: visible; transform-origin: 50% 90%; }
.av-prog__count { display: grid; gap: 1cqi; }
.av-prog__num { display: block; height: 9.6cqi; overflow: hidden; font: 600 9.6cqi/1 var(--f-body); color: var(--av-navy); letter-spacing: -0.02em; }
.av-roll { display: grid; transform: translateY(-50%); }
.av-roll span { display: block; height: 9.6cqi; }
.av-prog__unit { font: 500 3.9cqi/1 var(--f-body); color: var(--av-muted); }
.av-prog__best { margin-left: auto; display: grid; justify-items: center; gap: 0.8cqi; padding: 2cqi 3cqi; border-radius: 3.5cqi; background: #f5f6fa; font: 500 3.1cqi/1 var(--f-body); color: var(--av-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.av-prog__best b { font: 600 5.2cqi/1 var(--f-body); color: var(--av-navy); letter-spacing: 0; }
.av-prog__cal { margin: 4.5cqi 4.5cqi 0; padding: 4.5cqi 4.5cqi 5cqi; border-radius: 6cqi; background: #fff; box-shadow: 0 1cqi 0 #e6e8f0, 0 3cqi 6cqi -4cqi rgb(20 20 63 / 0.2); }
.av-prog__month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.4cqi !important; font: 600 4.6cqi/1 var(--f-body); color: var(--av-navy); }
.av-prog__month small { display: inline-flex; align-items: center; gap: 1.2cqi; font: 500 3cqi/1 var(--f-body); color: var(--av-muted); }
.av-prog__month small i { width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: #5aaee0; }
.av-prog__month small i.is-freeze { margin-left: 1.6cqi; background: #f3c9a6; }
.av-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.6cqi 1.2cqi; margin: 0; padding: 0; list-style: none; }
.av-cal li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 500 3.5cqi/1 var(--f-body); color: #a3a8b3; }
.av-cal .av-cal__h { aspect-ratio: auto; padding-bottom: 0.6cqi; font: 600 3cqi/1 var(--f-body); color: var(--av-muted); }
.av-cal .is-done { background: #5aaee0; color: #fff; font-weight: 600; }
.av-cal .is-freeze { background: #f3c9a6; color: #fff; font-weight: 600; }
.av-cal .is-today { color: var(--av-orange-ink); font-weight: 600; box-shadow: inset 0 0 0 0.6cqi var(--av-orange); }
.av-prog__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; margin: 4.5cqi 4.5cqi 0; }
.av-prog__stats span { display: grid; gap: 1.2cqi; padding: 4cqi; border-radius: 5cqi; background: #fff; box-shadow: 0 1cqi 0 #e6e8f0; font: 500 3.4cqi/1.1 var(--f-body); color: var(--av-muted); }
.av-prog__stats b { font: 600 7cqi/1 var(--f-body); color: var(--av-navy); }
.av-note {
position: absolute;
z-index: 3;
left: 2%;
top: 2.5%;
display: flex;
align-items: flex-start;
gap: 0.75em;
width: min(19.5em, 74%);
padding: 0.8em 0.95em 0.85em 0.8em;
border-radius: 1.25em;
background: rgb(255 255 255 / 0.86);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
box-shadow: 0 0 0 1px rgb(20 20 63 / 0.05), var(--av-shadow);
font-size: var(--av-fs);
}
.av-note__body { display: grid; gap: 0.18em; min-width: 0; }
.av-note__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; font: 600 0.74em/1.1 var(--f-body); color: var(--av-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.av-note__head small { font: 400 0.95em/1 var(--f-body); text-transform: none; letter-spacing: 0; }
.av-note__title { font: 600 0.98em/1.25 var(--f-body); color: var(--av-navy); }
.av-note__text { font: 400 0.88em/1.3 var(--f-body); color: #4a505c; white-space: normal; }
.av-appicon { position: relative; flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 0.62em; background: var(--av-yellow); overflow: hidden; }
.av-appicon i { position: absolute; width: 58%; height: 66%; left: 27%; top: 15%; border-radius: 0.2em; background: #f3a521; border: 0.09em solid #020136; rotate: 9deg; }
.av-appicon b { position: relative; display: grid; place-items: center; width: 60%; height: 68%; border-radius: 0.2em; background: #fffcec; border: 0.09em solid #020136; translate: -6% 2%; font: 600 0.5em/0.95 var(--f-body); color: #020136; text-align: center; letter-spacing: 0.02em; }
.av-f1__cheer { position: absolute; z-index: 3; right: 3%; top: 31%; display: grid; justify-items: end; gap: 0.5em; font-size: var(--av-fs); }
.av-f1__cheer .av-ava { width: 4.6em; height: 4.6em; box-shadow: 0 0 0 0.25em #fff, var(--av-shadow); }
.av-bubble { position: relative; padding: 0.55em 0.9em; border-radius: 1em 1em 0.3em 1em; background: var(--av-navy); color: #fff; font: 600 0.92em/1 var(--f-body); white-space: nowrap; box-shadow: var(--av-shadow); }
@container (max-width: 460px) {
.av-f1 { --pw: clamp(240px, 74cqi, 300px); height: calc(var(--pw) * 1.78); }
.av-f1__phone { top: 19%; translate: -50% 0; }
.av-note { left: 0; top: 2%; width: 88%; }
.av-f1__cheer { right: 0; top: 40%; }
}
@container (max-width: 300px) {
.av-f1__cheer { display: none; }
}
@keyframes av-note-in { from { opacity: 0; transform: translateY(-60%) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes av-roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes av-cell { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes av-today-done { from { background: #fff; box-shadow: inset 0 0 0 0.6cqi var(--av-orange); color: var(--av-orange-ink); } to { background: #5aaee0; box-shadow: inset 0 0 0 0 var(--av-orange), 0 0 0 1.2cqi rgb(90 174 224 / 0.22); color: #fff; } }
@keyframes av-flare { 0% { transform: scale(1); } 40% { transform: scale(1.32) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes av-cheer-in { from { opacity: 0; transform: translateY(30%) scale(0.7); } to { opacity: 1; transform: none; } }
.av-week .av-f1__today i { border-radius: 0; background: #5aaee0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 12.4l3 3 5.8-6.4' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 26'%3E%3Cpath d='M12 2.4Q15.83.21 17.64 4.23Q22.03 4.71 21.13 9.03Q24.4 12 21.13 14.97Q22.03 19.29 17.64 19.77Q15.83 23.79 12 21.6Q8.17 23.79 6.36 19.77Q1.97 19.29 2.87 14.97Q-.4 12 2.87 9.03Q1.97 4.71 6.36 4.23Q8.17.21 12 2.4Z'/%3E%3C/svg%3E") center / 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 26'%3E%3Cpath d='M12 2.4Q15.83.21 17.64 4.23Q22.03 4.71 21.13 9.03Q24.4 12 21.13 14.97Q22.03 19.29 17.64 19.77Q15.83 23.79 12 21.6Q8.17 23.79 6.36 19.77Q1.97 19.29 2.87 14.97Q-.4 12 2.87 9.03Q1.97 4.71 6.36 4.23Q8.17.21 12 2.4Z'/%3E%3C/svg%3E") center / 100% no-repeat; }
.av-week .av-f1__today span { color: var(--av-text); }
.av-cal .is-today { background: #5aaee0; color: #fff; box-shadow: 0 0 0 1.2cqi rgb(90 174 224 / 0.22); }
.js:not(.reduce-motion) .illu--app-voca-f1:not(.is-in) :is(.av-f1__phone, .av-note, .av-f1__cheer, .av-cal li[style]) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-voca-f1:not(.is-in) .av-roll { transform: none; }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-f1__phone { animation: av-rise 1s var(--ease-out) both; }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-cal li[style] { animation: av-cell 0.45s var(--spring) both; animation-delay: calc(0.55s + var(--i) * 55ms); }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-cal .is-today { animation: av-today-done 0.5s var(--ease-out) 1.75s both; }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-week .av-f1__today i { animation: av-badge 0.55s var(--spring) 1.75s both; }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-roll { animation: av-roll 0.6s var(--ease-out) 1.95s both; }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-prog__flame svg { animation: av-flare 0.8s var(--ease-out) 1.95s both, av-flicker 1.8s var(--ease-in-out) 3s infinite; }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-note { animation: av-note-in 0.8s var(--spring) 0.45s both; }
.js:not(.reduce-motion) .illu--app-voca-f1.is-in .av-f1__cheer { animation: av-cheer-in 0.7s var(--spring) 2.2s both; }
.illu--app-voca-f2 { width: 100%; }
.av-f2 {
--av-fs: clamp(13px, 2.9cqi, 15.5px);
position: relative;
height: clamp(460px, 110cqi, 580px);
}
.av-f2__deck { position: absolute; z-index: 1; right: 3%; top: 1%; width: 56%; aspect-ratio: 4 / 5; }
.av-wc {
--F: translate(0, 0) rotate(0deg) scale(1);
--M: translate(-5%, 3.5%) rotate(-5deg) scale(0.95);
--B: translate(5%, 7%) rotate(5deg) scale(0.9);
position: absolute;
inset: 0;
container-type: inline-size;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 0 14%;
border-radius: 9% / 7.2%;
background: var(--c);
border: 1px solid color-mix(in srgb, var(--e) 70%, #fff);
box-shadow: 0 0.45em 0 var(--e), 0 1.6em 2.6em -1.4em rgb(30 40 80 / 0.32);
font-size: var(--av-fs);
transform-origin: 50% 90%;
}
.av-wc p { margin: 0 11cqi; }
.av-wc__word { font: 500 13cqi/1.05 var(--f-body); color: var(--av-word); letter-spacing: -0.01em; }
.av-wc__ipa { margin-top: 3.2cqi !important; font: 400 5.4cqi/1.2 var(--f-body); color: #646a76; }
.av-wc__pos { margin-top: 2cqi !important; font: 400 5.4cqi/1.2 var(--f-body); color: var(--av-word); }
.av-wc__def { margin-top: 5.5cqi !important; font: 400 6.6cqi/1.38 var(--f-body); color: var(--av-text); }
.av-wc__stamp { position: absolute; right: 9cqi; bottom: 10cqi; font-size: 5.2cqi; rotate: 4deg; }
.av-wc--left .av-wc__stamp { rotate: -4deg; }
.av-wc--1 { z-index: 3; transform: translate(3%, -1%) rotate(4deg); }
.av-wc--2 { z-index: 2; transform: var(--M); }
.av-wc--3 { z-index: 1; transform: var(--B); }
.av-wc--2 .av-wc__stamp, .av-wc--3 .av-wc__stamp { opacity: 0; }
.av-coach { position: absolute; z-index: 2; left: 0; top: 1%; display: grid; justify-items: start; gap: 0.6em; font-size: var(--av-fs); }
.av-coach .av-ava { width: 3.5em; height: 3.5em; margin-left: 0.5em; box-shadow: 0 0 0 0.2em #fff, 0 0.6em 1.2em -0.6em rgb(20 20 63 / 0.4); }
.av-coach__bubble { position: relative; display: grid; gap: 0.55em; margin: 0; padding: 0.85em 1em 0.95em; border-radius: 1em; background: #fff; box-shadow: 0 0.22em 0 var(--av-edge), var(--av-shadow); }
.av-coach__bubble::before { content: ""; position: absolute; left: 1.3em; top: -0.42em; width: 0.9em; height: 0.9em; background: #fff; rotate: 45deg; border-radius: 0.15em; }
.av-coach__bubble strong { position: relative; font: 600 1em/1.1 var(--f-body); color: var(--av-navy); }
.av-coach__bubble span { display: inline-flex; align-items: center; gap: 0.35em; font: 600 0.86em/1 var(--f-body); white-space: nowrap; }
.av-coach__bubble svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.av-coach__r { color: var(--av-orange-ink); }
.av-coach__l { color: #137544; }
.av-words {
position: absolute;
z-index: 2;
left: 0;
bottom: 1%;
width: min(54%, 17.5em);
padding: 1.05em 1.05em 0.6em;
border-radius: 1.25em;
background: #fff;
box-shadow: 0 0.3em 0 #e3e6ef, var(--av-shadow);
font-size: var(--av-fs);
}
.av-words p { margin: 0; }
.av-words__head { display: flex; align-items: baseline; justify-content: space-between; font: 600 1.06em/1.1 var(--f-body); color: var(--av-navy); }
.av-words__head span { padding: 0.25em 0.55em; border-radius: 99px; background: #eef6fd; font-size: 0.78em; color: var(--av-blue); }
.av-words__tabs { display: flex; gap: 0.3em; margin: 0.85em 0 0.4em !important; padding: 0.22em; border-radius: 99px; background: #f2f3f8; }
.av-words__tabs span { flex: 1 1 auto; padding: 0.45em 0.55em; border-radius: 99px; text-align: center; font: 500 0.76em/1 var(--f-body); color: var(--av-muted); white-space: nowrap; }
.av-words__tabs .is-on { background: #fff; color: var(--av-navy); box-shadow: 0 1px 3px rgb(20 20 63 / 0.12); }
.av-words__list { margin: 0; padding: 0; list-style: none; }
.av-words__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: 0 -0.45em; padding: 0.62em 0.45em; border-radius: 0.6em; border-top: 1px solid #f0f1f5; }
.av-words__row:first-child { border-top: 0; }
.av-words__w { font: 500 0.92em/1.1 var(--f-body); color: var(--av-word); }
.av-words__s { display: inline-flex; align-items: center; gap: 0.4em; font: 500 0.8em/1 var(--f-body); white-space: nowrap; }
.av-words__s::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.av-words__s.is-know { color: #137544; }
.av-words__s.is-practice { color: var(--av-orange-ink); }
.av-words__row:nth-child(n + 4) { opacity: 0.55; }
@container (max-width: 380px) {
.av-f2 { height: auto; display: grid; gap: 2.4em; justify-items: center; padding: 0.5em 0 0.4em; }
.av-coach { position: relative; top: auto; width: auto; grid-template-columns: auto auto; align-items: center; justify-self: start; margin-bottom: -0.6em; }
.av-coach__bubble::before { left: -0.42em; top: 1.2em; }
.av-f2__deck { position: relative; right: auto; top: auto; width: 78%; }
.av-words { position: relative; left: auto; bottom: auto; width: 100%; max-width: 20em; }
}
@keyframes av-deck-r {
0%, 20% { transform: var(--F); opacity: 1; z-index: 4; }
27% { transform: translate(150%, -8%) rotate(22deg); opacity: 1; z-index: 4; }
29% { transform: translate(165%, -9%) rotate(24deg); opacity: 0; z-index: 4; }
31% { transform: var(--B); opacity: 0; z-index: 1; }
34%, 53.3% { transform: var(--B); opacity: 1; z-index: 1; }
63.3%, 86.6% { transform: var(--M); opacity: 1; z-index: 2; }
96.6%, 100% { transform: var(--F); opacity: 1; z-index: 3; }
}
@keyframes av-deck-l {
0%, 20% { transform: var(--F); opacity: 1; z-index: 4; }
27% { transform: translate(-150%, -8%) rotate(-22deg); opacity: 1; z-index: 4; }
29% { transform: translate(-165%, -9%) rotate(-24deg); opacity: 0; z-index: 4; }
31% { transform: var(--B); opacity: 0; z-index: 1; }
34%, 53.3% { transform: var(--B); opacity: 1; z-index: 1; }
63.3%, 86.6% { transform: var(--M); opacity: 1; z-index: 2; }
96.6%, 100% { transform: var(--F); opacity: 1; z-index: 3; }
}
@keyframes av-deck-stamp { 0%, 12% { opacity: 0; transform: scale(1.7); } 16%, 29% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: none; } }
@keyframes av-row-flash { 0%, 23% { background: transparent; } 28% { background: #fff4d6; } 50%, 100% { background: transparent; } }
.js:not(.reduce-motion) .illu--app-voca-f2:not(.is-in) :is(.av-f2__deck, .av-words, .av-coach .av-ava, .av-coach__bubble) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-coach .av-ava { animation: av-pop 0.6s var(--spring) 0.45s both; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-coach__bubble { animation: av-pop 0.6s var(--spring) 0.6s both; transform-origin: 1.6em 0; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-f2__deck { animation: av-rise 0.9s var(--ease-out) both; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-words { animation: av-rise 0.9s var(--ease-out) 0.25s both; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-wc { animation: av-deck-r 9s var(--ease-in-out) var(--d, 0s) infinite both; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-wc--left { animation-name: av-deck-l; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-wc__stamp { opacity: 0; animation: av-deck-stamp 9s var(--ease-out) var(--d, 0s) infinite both; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-wc--2 { --d: -6s; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-wc--3 { --d: -3s; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-words__row--1 { animation: av-row-flash 9s linear infinite; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-words__row--2 { animation: av-row-flash 9s linear -6s infinite; }
.js:not(.reduce-motion) .illu--app-voca-f2.is-in .av-words__row--3 { animation: av-row-flash 9s linear -3s infinite; }
.illu--app-voca-f3 { width: 100%; }
.av-f3 {
--av-fs: clamp(12px, 2.65cqi, 15.5px);
position: relative;
height: 110cqi;
font-size: var(--av-fs);
}
.av-steps { margin: 0; padding: 0; list-style: none; }
.av-f3__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.av-f3__path path { fill: none; stroke: #c3c8dc; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 10; vector-effect: non-scaling-stroke; }
.av-step {
position: absolute;
width: 70cqi;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.35em 0.8em;
padding: 0.95em 1em 1em 0.95em;
border-radius: 1.15em;
background-color: #fff;
color: var(--av-navy);
border: 1px solid #dfe2ec;
box-shadow: 0 0.32em 0 var(--av-edge), 0 1.2em 2.2em -1.4em rgb(20 20 63 / 0.35);
}
.av-step--3 { top: 18cqi; left: 30cqi; }
.av-step--2 { top: 50cqi; left: 15cqi; }
.av-step--1 { top: 82cqi; left: 0; }
.av-step__icon { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); }
.av-step__icon svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.av-step__text { display: grid; gap: 0.25em; min-width: 0; }
.av-step__text strong { font: 600 1.06em/1.15 var(--f-body); }
.av-step__text small { font: 400 0.88em/1.3 var(--f-body); opacity: 0.78; }
.av-step__words { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.35em; }
.av-step__words i { padding: 0.32em 0.65em; border-radius: 99px; background: color-mix(in srgb, currentColor 9%, transparent); font: 500 0.8em/1.1 var(--f-body); font-style: normal; }
.av-step__tick { position: absolute; top: 0.8em; right: 0.8em; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--av-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat; }
.av-step--3 { background-color: var(--av-blue); color: #fff; border-color: var(--av-blue); box-shadow: 0 0.32em 0 var(--av-blue-edge), 0 1.4em 2.4em -1.2em rgb(15 127 229 / 0.55); }
.av-step--3 .av-step__tick { background-color: rgb(255 255 255 / 0.28); }
.av-f3__hop { position: absolute; z-index: 3; left: 31.5cqi; top: -0.6cqi; width: 16.5cqi; }
.av-f3__bird { width: 100%; height: auto; }
.av-f3__say {
position: absolute;
left: 98%;
top: 4%;
padding: 0.55em 0.85em;
border-radius: 1em 1em 1em 0.3em;
background: #fff;
box-shadow: 0 0.2em 0 var(--av-edge), var(--av-shadow);
color: var(--av-navy);
font: 600 0.9em/1 var(--f-body);
white-space: nowrap;
}
@container (max-width: 420px) {
.av-f3 { height: auto; display: grid; gap: 1.1em; padding-top: 17cqi; }
.av-steps { display: grid; gap: 1.1em; }
.av-step { position: relative; inset: auto; width: auto; }
.av-f3__path { display: none; }
.av-step--3 { order: 1; margin-left: 10cqi; }
.av-step--2 { order: 2; margin-left: 5cqi; margin-right: 5cqi; }
.av-step--1 { order: 3; margin-right: 10cqi; }
.av-f3__hop { left: 12cqi; top: 0; width: 17cqi; }
.av-f3__say { left: 112%; top: 10%; }
}
@keyframes av-step-on { from { background-color: #fff; color: var(--av-navy); border-color: #dfe2ec; box-shadow: 0 0.32em 0 var(--av-edge), 0 1.2em 2.2em -1.4em rgb(20 20 63 / 0.35); } to { background-color: var(--av-blue); color: #fff; border-color: var(--av-blue); box-shadow: 0 0.32em 0 var(--av-blue-edge), 0 1.4em 2.4em -1.2em rgb(15 127 229 / 0.55); } }
@keyframes av-step-off { from { background-color: var(--av-blue); color: #fff; border-color: var(--av-blue); box-shadow: 0 0.32em 0 var(--av-blue-edge), 0 1.4em 2.4em -1.2em rgb(15 127 229 / 0.55); } to { background-color: #fff; color: var(--av-navy); border-color: #dfe2ec; box-shadow: 0 0.32em 0 var(--av-edge), 0 1.2em 2.2em -1.4em rgb(20 20 63 / 0.35); } }
@keyframes av-tick { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes av-hop {
0% { translate: -30cqi 64cqi; transform: scale(0.4); opacity: 0; }
7% { translate: -30cqi 64cqi; transform: none; opacity: 1; }
27% { translate: -30cqi 64cqi; transform: scale(1.06, 0.9); }
37% { translate: -22.5cqi 40cqi; transform: none; }
45% { translate: -15cqi 32cqi; transform: scale(1.06, 0.92); }
50%, 59% { translate: -15cqi 32cqi; transform: none; }
62% { translate: -15cqi 32cqi; transform: scale(1.06, 0.9); }
72% { translate: -7.5cqi 8cqi; transform: none; }
80% { translate: 0 0; transform: scale(1.06, 0.92); }
86%, 100% { translate: 0 0; transform: none; opacity: 1; }
}
@keyframes av-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4%) rotate(-2deg); } }
@keyframes av-step-in { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
.js:not(.reduce-motion) .illu--app-voca-f3:not(.is-in) :is(.av-step, .av-f3__hop, .av-f3__say, .av-f3__path) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-f3__path { animation: av-fade 0.8s var(--ease-out) 0.5s both; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-step { animation: av-step-in 0.7s var(--ease-out) both; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-step--3 { animation: av-step-in 0.7s var(--ease-out) 0.2s both, av-step-on 0.35s var(--ease-out) 3s both; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-step--1 { animation: av-step-in 0.7s var(--ease-out) both, av-step-on 0.35s var(--ease-out) 0.85s both, av-step-off 0.35s var(--ease-out) 1.9s forwards; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-step--2 { animation: av-step-in 0.7s var(--ease-out) 0.1s both, av-step-on 0.35s var(--ease-out) 1.9s both, av-step-off 0.35s var(--ease-out) 3s forwards; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-step--1 .av-step__tick { animation: av-tick 0.45s var(--spring) 1.95s both; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-step--2 .av-step__tick { animation: av-tick 0.45s var(--spring) 3.05s both; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-step--3 .av-step__tick { animation: av-tick 0.45s var(--spring) 3.4s both; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-f3__hop { animation: av-hop 3.2s var(--ease-in-out) 0.75s both; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-f3__bird { transform-origin: 50% 100%; animation: av-bob 3.2s var(--ease-in-out) 4.4s infinite; }
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-f3__say { animation: av-pop 0.55s var(--spring) 3.7s both; }
@container (max-width: 420px) {
.js:not(.reduce-motion) .illu--app-voca-f3.is-in .av-f3__hop { animation: av-pop 0.6s var(--spring) 0.6s both; }
}
.illu--app-voca-screens {
width: 100%;
margin-bottom: calc(-1 * clamp(24px, 4vw, 56px));
}
.av-band {
--c: clamp(250px, 21.6cqi, 300px);
--s: calc(var(--c) * 0.9);
--o: calc(var(--c) * 0.84);
position: relative;
height: calc(var(--c) * 2.08);
overflow: hidden;
}
.av-band__row { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.2cqi, 30px); padding-top: 2px; }
.av-band__ph { flex: none; }
.av-band__ph--c { --device-w: var(--c); width: var(--c); }
.av-band__ph--s { --device-w: var(--s); width: var(--s); margin-top: calc(var(--c) * 0.17); }
.av-band__ph--o { --device-w: var(--o); width: var(--o); margin-top: calc(var(--c) * 0.34); }
.av-topics { background: #f7f7f9; color: var(--av-navy); }
.av-topics__head { display: flex; align-items: center; gap: 3cqi; margin: 3cqi 6cqi 5cqi !important; font: 500 7.4cqi/1 var(--f-body); }
.av-topics__head svg { width: 6cqi; height: 6cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.av-topic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3cqi; margin: 0 5cqi 3.2cqi; padding: 3.2cqi 3.4cqi; border-radius: 4.5cqi; background: #fff; border: 0.35cqi solid #d6dae7; box-shadow: 0 1cqi 0 #b9bed6; }
.av-topic--all { background: var(--av-blue); border-color: var(--av-blue); box-shadow: 0 1cqi 0 var(--av-blue-edge); color: #fff; }
.av-topic__ic { display: grid; place-items: center; width: 10.5cqi; height: 10.5cqi; border-radius: 50%; background: rgb(255 255 255 / 0.25); color: var(--av-navy); }
.av-topic--all .av-topic__ic { color: #fff; }
.av-topic__ic svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.av-topic__ic--lemon { background: #fff3c4; }
.av-topic__ic--sky { background: #dcf2fb; }
.av-topic__ic--lilac { background: #ece9ff; }
.av-topic__t { display: grid; gap: 1cqi; min-width: 0; }
.av-topic__t strong { font: 500 4.6cqi/1.1 var(--f-body); }
.av-topic__t small { overflow: hidden; font: 400 3.4cqi/1.2 var(--f-body); color: var(--av-muted); white-space: nowrap; text-overflow: ellipsis; }
.av-topic--all small { color: rgb(255 255 255 / 0.85); }
.av-topic__check { width: 6cqi; height: 6cqi; border-radius: 50%; background: rgb(255 255 255 / 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }
.av-topic__lock { width: 6.6cqi; height: 6.6cqi; border-radius: 50%; background: #eef0f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='11' width='11' height='8.5' rx='2' fill='%23656a7a'/%3E%3Cpath d='M9 11V8.6a3 3 0 0 1 6 0V11' fill='none' stroke='%23656a7a' stroke-width='2'/%3E%3C/svg%3E") center / 62% no-repeat; }
.av-topics__label { margin: 5cqi 6cqi 2.8cqi !important; font: 500 3.3cqi/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: #6b7080; }
.av-topics__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; margin: 0 5cqi; }
.av-tile { display: grid; align-content: start; gap: 2.4cqi; min-height: 31cqi; padding: 3.4cqi; border-radius: 4.5cqi; background: #fff; border: 0.35cqi solid #d6dae7; box-shadow: 0 1cqi 0 #b9bed6; }
.av-tile strong { font: 500 4.2cqi/1.15 var(--f-body); }
.av-tile small { font: 400 3.3cqi/1 var(--f-body); color: var(--av-muted); }
.av-study { background: #fff; }
.av-study__bird { position: relative; z-index: 2; width: 52cqi; margin: 5cqi 0 -5.5cqi 9cqi; }
.av-study__card { margin: 0 6cqi; height: 96cqi; padding: 20cqi 7cqi 7cqi; }
.av-study__card .av-card__word { font-size: 12.5cqi; }
.av-study .av-actions { margin-top: 8cqi; }
.av-quiz { background: #f8f8fa; }
.av-quiz__bar { display: flex; align-items: center; gap: 4cqi; margin: 2cqi 5cqi 5cqi; }
.av-quiz__x { position: relative; flex: none; width: 10.5cqi; height: 10.5cqi; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.3cqi #ececf1, 0 1cqi 2cqi rgb(0 0 0 / 0.06); }
.av-quiz__x::before, .av-quiz__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4.4cqi; height: 0.55cqi; border-radius: 1cqi; background: #3a3d55; translate: -50% -50%; rotate: 45deg; }
.av-quiz__x::after { rotate: -45deg; }
.av-quiz__prog { flex: 1; height: 2.6cqi; border-radius: 99px; background: #ececf0; overflow: hidden; }
.av-quiz__prog i { display: block; width: 80%; height: 100%; border-radius: inherit; background: var(--av-orange); transform-origin: 0 50%; }
.av-quiz__q { margin: 0 5cqi; min-height: 56cqi; padding: 7cqi 6cqi 6cqi; }
.av-quiz__label { font: 500 3.4cqi/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: #3796c0; }
.av-quiz__text { margin-top: 3.4cqi !important; font: 400 6.3cqi/1.25 var(--f-body); color: var(--av-navy); }
.av-quiz__pos { margin-top: 3.4cqi !important; font: 400 3.8cqi/1 var(--f-body); color: var(--av-muted); }
.av-quiz__opts { display: grid; gap: 3.2cqi; margin: 6.5cqi 5cqi 0; padding: 0; list-style: none; }
.av-quiz__opts li { padding: 4.2cqi; border-radius: 5.5cqi; background: #fff; border: 0.5cqi solid transparent; box-shadow: 0 1cqi 0 #e4e5eb, 0 0 0 0.3cqi #efeff3; text-align: center; font: 400 4.7cqi/1 var(--f-body); color: #6b6f86; }
.av-quiz__opts .av-quiz__ok { border-color: var(--av-green-soft); box-shadow: 0 1.1cqi 0 var(--av-green-soft); color: #2f9e69; font-weight: 500; }
.av-quiz__cheer { position: absolute; z-index: 3; left: 0; bottom: 11cqi; width: 40cqi; }
.av-quiz__cheer .av-bird { position: relative; }
.av-quiz__nice { position: absolute; left: 92%; bottom: 22%; padding: 3cqi 4.4cqi; border-radius: 4cqi; background: #fff; border: 0.4cqi solid #c9cde0; box-shadow: 0 1cqi 0 #b9bed6; font: 500 4.4cqi/1 var(--f-body); color: var(--av-navy); white-space: nowrap; }
.av-confetti { position: absolute; inset: -14% -10% 30%; }
.av-confetti i { position: absolute; width: 3cqi; height: 1.4cqi; border-radius: 0.4cqi; background: #3aa0f0; }
.av-confetti i:nth-child(1) { left: 6%; top: 34%; rotate: -30deg; }
.av-confetti i:nth-child(2) { left: 26%; top: 6%; background: #f2788a; rotate: 20deg; }
.av-confetti i:nth-child(3) { left: 56%; top: 0; background: var(--av-yellow); rotate: -60deg; }
.av-confetti i:nth-child(4) { left: 82%; top: 16%; background: #3aa0f0; rotate: 40deg; }
.av-confetti i:nth-child(5) { left: 94%; top: 46%; background: #f2788a; rotate: -20deg; }
.av-confetti i:nth-child(6) { left: 0; top: 64%; background: var(--av-yellow); rotate: 70deg; }
.av-confetti i:nth-child(7) { left: 44%; top: 24%; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: var(--av-green-soft); }
.av-home { background: radial-gradient(130% 70% at 15% 0%, #5cb2f3 0%, #2589e6 45%, #1667c8 100%); color: #fff; }
.av-home .device__status { color: #fff; }
.av-home__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6.4cqi 5cqi; margin: 6cqi 6cqi 0; }
.av-home__grid > i { aspect-ratio: 1; border-radius: 26%; background: rgb(255 255 255 / 0.2); }
.av-home__grid > i:nth-child(3n) { background: rgb(255 255 255 / 0.14); }
.av-widget { position: relative; grid-column: span 2; grid-row: span 2; aspect-ratio: 1; overflow: hidden; padding: 5.2cqi 4.6cqi; border-radius: 6.5cqi; background: #e4fbef; color: #10131a; box-shadow: 0 3cqi 6cqi -2cqi rgb(0 30 80 / 0.4); }
.av-widget__word { font: 600 7.4cqi/1.05 var(--f-body); letter-spacing: -0.01em; }
.av-widget__def { margin-top: 2.2cqi !important; max-width: 96%; font: 500 4.1cqi/1.28 var(--f-body); }
.av-widget__bird { position: absolute; right: -1cqi; bottom: -7cqi; width: 19cqi; rotate: -8deg; }
.av-home__dock { position: absolute; left: 4cqi; right: 4cqi; bottom: 4cqi; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5.6cqi; padding: 4cqi 5cqi; border-radius: 9cqi; background: rgb(255 255 255 / 0.22); }
.av-home__dock i { aspect-ratio: 1; border-radius: 26%; background: rgb(255 255 255 / 0.4); }
.av-onb { background: linear-gradient(180deg, #d6eff9 0%, #e8f6fb 45%, #f2fafd 100%); color: var(--av-navy); }
.av-onb__bar { display: flex; align-items: center; gap: 1.6cqi; margin: 2.5cqi 6cqi 6cqi; }
.av-onb__bar svg { flex: none; width: 5cqi; height: 5cqi; margin-right: 2cqi; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.av-onb__bar i { flex: 1; height: 1.6cqi; border-radius: 99px; background: #fff; }
.av-onb__bar i.is-on { background: #75c6e4; }
.av-onb__tip { display: flex; align-items: flex-start; gap: 3cqi; margin: 0 5cqi; }
.av-onb__tip .av-ava { flex: none; width: 24cqi; height: 24cqi; }
.av-onb__bubble { flex: 1; padding: 3.6cqi 4cqi; border-radius: 4.5cqi; background: #fff; box-shadow: 0 1cqi 0 #b9c3dc; font: 400 3.9cqi/1.35 var(--f-body); color: #2a2d45; }
.av-onb__bubble strong { display: block; margin-bottom: 1.4cqi; font: 500 5cqi/1.1 var(--f-body); color: var(--av-navy); }
.av-onb__card { margin: 10cqi 8cqi 0 9cqi; height: 80cqi; padding: 13cqi 7cqi 7cqi; rotate: 5deg; transform-origin: 50% 100%; }
.av-onb__card .av-card__word { font-size: 10.5cqi; }
.av-onb__stamp { position: absolute; left: 50%; bottom: 9cqi; translate: -50% 0; font-size: 4.4cqi; rotate: -3deg; }
.av-onb__btn { position: absolute; left: 5cqi; right: 5cqi; bottom: 7cqi; padding: 4.6cqi; border-radius: 99px; background: #04043a; color: #fff; text-align: center; font: 500 4.6cqi/1 var(--f-body); }
@keyframes av-ok { from { border-color: transparent; box-shadow: 0 1cqi 0 #e4e5eb, 0 0 0 0.3cqi #efeff3; color: #6b6f86; } to { border-color: var(--av-green-soft); box-shadow: 0 1.1cqi 0 var(--av-green-soft); color: #2f9e69; } }
@keyframes av-press { 0%, 100% { transform: none; } 40% { transform: scale(0.96); } }
@keyframes av-twinkle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4cqi) rotate(25deg); } }
@keyframes av-burst { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes av-prog { from { transform: scaleX(0.6); } to { transform: none; } }
@keyframes av-sway { 0%, 100% { rotate: 5deg; translate: 0 0; } 50% { rotate: 9deg; translate: 3cqi 0; } }
.js:not(.reduce-motion) .illu--app-voca-screens:not(.is-in) :is(.av-band__ph, .av-quiz__cheer, .av-quiz__nice, .av-confetti) { opacity: 0; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-band__ph { animation: av-rise 1s var(--ease-out) both; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in :is(.av-band__ph--2, .av-band__ph--4) { animation-delay: 0.12s; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in :is(.av-band__ph--1, .av-band__ph--5) { animation-delay: 0.24s; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-quiz__ok { animation: av-press 0.35s var(--ease-out) 1.25s both, av-ok 0.3s var(--ease-out) 1.4s both; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-quiz__prog i { animation: av-prog 0.7s var(--ease-out) 1.5s both; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-quiz__cheer { animation: av-rise 0.7s var(--spring) 1.6s both; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-confetti { animation: av-burst 0.6s var(--spring) 1.8s both; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-confetti i { animation: av-twinkle 2.6s var(--ease-in-out) 2.4s infinite; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-confetti i:nth-child(2n) { animation-duration: 3.2s; animation-delay: 2.7s; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-quiz__nice { animation: av-pop 0.5s var(--spring) 2s both; }
.js:not(.reduce-motion) .illu--app-voca-screens.is-in .av-onb__card { animation: av-sway 4.5s var(--ease-in-out) 1.6s infinite; }
.il-solutions { display: block; width: 100%; height: auto; overflow: visible; --ils-k: 1; --ils-tag: 1; }
@media (max-width: 700px) { .il-solutions { --ils-k: 1.7; --ils-tag: 1.35; } }
.il-solutions text { font-family: var(--f-label); fill: var(--ink); }
.il-solutions .il-card { fill: #fff; stroke: var(--muted); stroke-opacity: 0.4; stroke-width: calc(2px * var(--ils-k)); }
.il-solutions .il-card--acc { stroke: var(--accent); stroke-opacity: 1; stroke-width: calc(2.5px * var(--ils-k)); }
.il-solutions .il-card--dash { stroke-dasharray: calc(7px * var(--ils-k)) calc(6px * var(--ils-k)); }
.il-solutions .il-paper { fill: var(--paper); }
.il-solutions .il-bar { fill: var(--line); }
.il-solutions .il-bar--d { fill: var(--muted); fill-opacity: 0.3; }
.il-solutions .il-shape { fill: var(--muted); fill-opacity: 0.2; }
.il-solutions .il-acc { fill: var(--accent); }
.il-solutions .il-tint { fill: var(--accent-tint); }
.il-solutions .il-tint--soft { fill-opacity: 0.45; }
.il-solutions .il-white { fill: #fff; }
.il-solutions .il-ico { fill: none; stroke: var(--muted); stroke-opacity: 0.75; stroke-width: calc(2.5px * var(--ils-k)); stroke-linecap: round; stroke-linejoin: round; }
.il-solutions .il-ico--acc { stroke: var(--accent); stroke-opacity: 1; }
.il-solutions .il-ico--dash { stroke-dasharray: calc(4px * var(--ils-k)) calc(4px * var(--ils-k)); stroke-linecap: butt; }
.il-solutions .il-wck { fill: none; stroke: #fff; stroke-width: calc(4px * var(--ils-k)); stroke-linecap: round; stroke-linejoin: round; }
.il-solutions .il-sep { fill: none; stroke: var(--line); stroke-width: calc(2px * var(--ils-k)); }
.il-solutions .il-line { fill: none; stroke: var(--muted); stroke-opacity: 0.6; stroke-width: calc(2px * var(--ils-k)); stroke-linecap: round; stroke-linejoin: round; }
.il-solutions .il-line--acc { stroke: var(--accent); stroke-opacity: 1; stroke-width: calc(2.5px * var(--ils-k)); }
.il-solutions .il-dash { fill: none; stroke: var(--muted); stroke-opacity: 0.55; stroke-width: calc(2px * var(--ils-k)); stroke-dasharray: calc(6px * var(--ils-k)) calc(6px * var(--ils-k)); }
.il-solutions .il-dash--acc { stroke: var(--accent); stroke-opacity: 1; stroke-width: calc(2.5px * var(--ils-k)); }
.il-solutions .il-dot { fill: none; stroke: var(--muted); stroke-opacity: 0.45; stroke-width: calc(2px * var(--ils-k)); stroke-linecap: round; stroke-dasharray: 0 calc(8px * var(--ils-k)); }
.il-solutions .il-node { fill: #fff; stroke: var(--muted); stroke-opacity: 0.7; stroke-width: calc(2px * var(--ils-k)); }
.il-solutions .il-node--acc { stroke: var(--accent); stroke-opacity: 1; stroke-width: calc(2.5px * var(--ils-k)); }
.il-solutions .il-cov { fill: none; stroke: #fff; stroke-width: calc(9px * var(--ils-k)); stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: -1; opacity: 0; }
.il-solutions .il-cov--paper { stroke: var(--paper); }
.il-solutions .il-a-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.il-solutions .il-sel { fill: none; stroke: var(--accent); stroke-width: calc(2px * var(--ils-k)); }
.il-solutions .il-hd { fill: #fff; stroke: var(--accent); stroke-width: calc(2px * var(--ils-k)); scale: var(--ils-k); }
.il-solutions .il-tag { scale: var(--ils-tag); }
.il-solutions .il-tag rect { fill: var(--accent-ink); }
.il-solutions .il-tag text { fill: #fff; font-family: var(--f-mono); font-size: 22px; letter-spacing: 0; }
.il-solutions .il-funnel { fill: url(#ilcf-grad); }
.il-solutions .il-edge { fill: none; stroke: var(--accent); stroke-width: calc(2px * var(--ils-k)); stroke-linecap: round; }
.il-solutions .il-stop-a { stop-color: var(--accent-tint); stop-opacity: 1; }
.il-solutions .il-stop-b { stop-color: var(--accent-tint); stop-opacity: 0.55; }
.il-solutions .il-lost { fill: var(--muted); fill-opacity: 0.38; }
.il-solutions .il-lost.il-o2 { fill-opacity: 0.26; }
.il-solutions .il-lost.il-o3 { fill-opacity: 0.17; }
.il-solutions .il-lost.il-o4 { fill-opacity: 0.1; }
.il-solutions .il-stage { font-size: 22px; font-weight: 500; letter-spacing: 0.08em; }
.il-solutions .il-big { font-family: var(--f-display); font-size: 56px; font-weight: 600; letter-spacing: -0.02em; }
.il-solutions .il-sub { font-size: 24px; fill: var(--muted); }
.il-solutions .il-drop { font-family: var(--f-mono); font-size: 22px; fill: var(--muted); }
.il-solutions .il-label { font-size: 24px; font-weight: 500; }
.il-solutions .il-site { font-size: 20px; font-weight: 500; }
.il-solutions .il-site--muted { fill: var(--muted); }
.il-solutions .il-grid { fill: none; stroke: #fff; stroke-width: calc(2px * var(--ils-k)); }
.il-solutions .il-chart { fill: none; stroke: var(--accent); stroke-width: calc(3.5px * var(--ils-k)); stroke-linecap: round; stroke-linejoin: round; }
.il-solutions .il-loop { opacity: 0; }
.il-solutions .il-loop--acc { fill: var(--accent); }
.il-solutions .il-ring { fill: none; stroke: var(--accent); stroke-width: calc(2px * var(--ils-k)); }
.il-solutions :is(.il-a-pop, .il-hd, .il-ring) { transform-box: fill-box; transform-origin: center; }
.il-solutions .il-tag { transform-box: fill-box; transform-origin: center; }
.il-solutions .il-tag--left { transform-origin: left center; }
.il-solutions .il-tag--right { transform-origin: right center; }
.il-solutions .il-s1 { --ils-d: 90ms; }   .il-solutions .il-s2 { --ils-d: 180ms; }  .il-solutions .il-s3 { --ils-d: 270ms; }
.il-solutions .il-s4 { --ils-d: 360ms; }  .il-solutions .il-s5 { --ils-d: 450ms; }  .il-solutions .il-s6 { --ils-d: 540ms; }
.il-solutions .il-s7 { --ils-d: 630ms; }  .il-solutions .il-s8 { --ils-d: 720ms; }  .il-solutions .il-s9 { --ils-d: 810ms; }
.il-solutions .il-s10 { --ils-d: 900ms; } .il-solutions .il-s11 { --ils-d: 990ms; } .il-solutions .il-s12 { --ils-d: 1080ms; }
.il-solutions .il-s13 { --ils-d: 1170ms; } .il-solutions .il-s14 { --ils-d: 1260ms; } .il-solutions .il-s15 { --ils-d: 1350ms; }
.il-solutions .il-s16 { --ils-d: 1440ms; } .il-solutions .il-s17 { --ils-d: 1530ms; } .il-solutions .il-s18 { --ils-d: 1620ms; }
.js:not(.reduce-motion) .illu:not(.is-in) > .il-solutions :is(.il-a-rise, .il-a-fade, .il-a-pop, .il-a-draw, .il-a-wipe, .il-dash) { opacity: 0; }
.js:not(.reduce-motion) .illu:not(.is-in) > .il-solutions .il-cov { opacity: 1; stroke-dashoffset: 0; }
.js:not(.reduce-motion) .illu:not(.is-in) > .il-solutions .il-hd { transform: scale(0); }
.js:not(.reduce-motion) .illu:not(.is-in) > .il-solutions .il-tag { opacity: 0; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-a-rise { animation: ils-rise 700ms var(--ease-out) var(--ils-d, 0ms) both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-a-fade { animation: ils-fade 600ms var(--ease-out) var(--ils-d, 0ms) both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-a-pop { animation: ils-pop 560ms cubic-bezier(0.34, 1.5, 0.64, 1) var(--ils-d, 0ms) both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-a-draw { animation: ils-draw 650ms var(--ease-out) var(--ils-d, 0ms) both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-a-draw.il-slow { animation-duration: 900ms; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-cov { animation: ils-uncover 650ms var(--ease-out) var(--ils-d, 0ms) both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-hd { animation: ils-handle 520ms cubic-bezier(0.34, 1.8, 0.64, 1) var(--ils-d, 0ms) both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-tag { animation: ils-tag 600ms var(--ease-out) var(--ils-d, 0ms) both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-a-wipe { animation: ils-wipe 1100ms var(--ease-out) var(--ils-d, 0ms) both; }
@keyframes ils-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ils-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ils-pop { 0% { opacity: 0; transform: scale(0.6); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ils-draw { 0% { opacity: 0; stroke-dashoffset: 1; } 2% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes ils-uncover { 0% { opacity: 1; stroke-dashoffset: 0; } 99% { opacity: 1; stroke-dashoffset: -1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes ils-handle { from { transform: scale(0); } to { transform: none; } }
@keyframes ils-tag { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes ils-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-loop--run { animation: ils-travel var(--ils-loop, 5s) var(--ease-in-out) 2.2s infinite both; }
.js:not(.reduce-motion) .illu.is-in > .il-solutions .il-ring { animation: ils-ring 2.6s var(--ease-out) 2.2s infinite both; }
@keyframes ils-travel {
0% { opacity: 0; transform: translateX(0); }
12% { opacity: 1; }
80% { opacity: 1; }
92%, 100% { opacity: 0; transform: translateX(var(--ils-run, 400px)); }
}
@keyframes ils-ring { 0% { opacity: 0; transform: scale(1); } 8% { opacity: 0.6; } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.il-solutions .il-ring { opacity: 0; }
.il-solutions .il-run-mvp { --ils-run: 46px; --ils-loop: 2.6s; }
.il-solutions .il-run-cf { --ils-run: 660px; --ils-loop: 6s; }
.il-solutions .il-run-fs { --ils-run: 498px; --ils-loop: 5.5s; }