/* @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.site */ /* Snippist — semantic tokens (SNIPPIST-DESIGN-SYSTEM.md §5, §8, §9, §28) One source for every artboard. Light is the default; a root with .t-dark switches the theme. */ :root, .t-light { --bg-canvas: #F7F6F2; --bg-surface: #FFFFFF; --bg-surface-subtle: #EFEEE9; --bg-surface-pressed: #E6E5E0; --bg-inverse: #0D0E11; --text-primary: #0B0C0E; --text-secondary: #60636B; --text-tertiary: #8C8E94; --text-inverse: #F7F6F2; --text-accent: #0060FF; --icon-primary: #0B0C0E; --icon-secondary: #60636B; --icon-accent: #0060FF; --action-primary-fill: #0B0C0E; --action-primary-text: #F7F6F2; --action-secondary-fill: #FFFFFF; --action-secondary-text: #0B0C0E; --action-accent: #0060FF; --selection-border: #0060FF; --selection-fill: #E3EDFF; --divider-default: rgba(11, 12, 14, 0.12); --divider-strong: rgba(11, 12, 14, 0.22); --overlay-scrim: rgba(0, 0, 0, 0.48); --overlay-media-chrome: rgba(0, 0, 0, 0.32); --feedback-success: #167A46; --feedback-warning: #9A5B00; --feedback-error: #C93333; --feedback-info: #0060FF; /* component tokens (proposed, not yet in the DS doc) */ --wave-idle: #8C8E94; --text-on-media: #F7F6F2; --spark: #C7FF3D; --brand-blue: #0060FF; /* the logo blue; UI accent = the same blue since 2026-09-23 (option A) */ --shadow-low: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-floating: 0 8px 28px rgba(0, 0, 0, 0.14); } .t-dark { --bg-canvas: #0D0E11; --bg-surface: #14161A; --bg-surface-subtle: #1B1D22; --bg-surface-pressed: #25282E; --bg-inverse: #F7F6F2; --text-primary: #F7F6F2; --text-secondary: #B8BBC2; --text-tertiary: #7C8089; --text-inverse: #0B0C0E; --text-accent: #4D8FFF; --icon-primary: #F7F6F2; --icon-secondary: #B8BBC2; --icon-accent: #4D8FFF; --action-primary-fill: #F7F6F2; --action-primary-text: #0B0C0E; --action-secondary-fill: #1B1D22; --action-secondary-text: #F7F6F2; --action-accent: #4D8FFF; --selection-border: #4D8FFF; --selection-fill: #0B2A66; --divider-default: rgba(247, 246, 242, 0.12); --divider-strong: rgba(247, 246, 242, 0.22); --overlay-scrim: rgba(0, 0, 0, 0.54); --overlay-media-chrome: rgba(0, 0, 0, 0.38); --feedback-success: #62D894; --feedback-warning: #FFBF5B; --feedback-error: #FF7777; --feedback-info: #4D8FFF; --wave-idle: #60636B; --text-on-media: #F7F6F2; --spark: #C7FF3D; --brand-blue: #0060FF; --shadow-low: none; --shadow-floating: none; } /* motion tokens */ :root { --motion-instant: 80ms; --motion-fast: 120ms; --motion-standard: 200ms; --motion-emphasized: 320ms; --motion-reveal: 520ms; --motion-hero: 700ms; } @keyframes ds-spin { to { transform: rotate(360deg); } } .ds-spin { animation: ds-spin 900ms linear infinite; transform-origin: 50% 50%; } @media (prefers-reduced-motion: reduce) { .ds-spin { animation-duration: 2400ms; } } @media(prefers-color-scheme:dark){:root{ --bg-canvas: #0D0E11; --bg-surface: #14161A; --bg-surface-subtle: #1B1D22; --bg-surface-pressed: #25282E; --bg-inverse: #F7F6F2; --text-primary: #F7F6F2; --text-secondary: #B8BBC2; --text-tertiary: #7C8089; --text-inverse: #0B0C0E; --text-accent: #4D8FFF; --icon-primary: #F7F6F2; --icon-secondary: #B8BBC2; --icon-accent: #4D8FFF; --action-primary-fill: #F7F6F2; --action-primary-text: #0B0C0E; --action-secondary-fill: #1B1D22; --action-secondary-text: #F7F6F2; --action-accent: #4D8FFF; --selection-border: #4D8FFF; --selection-fill: #0B2A66; --divider-default: rgba(247, 246, 242, 0.12); --divider-strong: rgba(247, 246, 242, 0.22); --overlay-scrim: rgba(0, 0, 0, 0.54); --overlay-media-chrome: rgba(0, 0, 0, 0.38); --feedback-success: #62D894; --feedback-warning: #FFBF5B; --feedback-error: #FF7777; --feedback-info: #4D8FFF; --wave-idle: #60636B; --text-on-media: #F7F6F2; --spark: #C7FF3D; --brand-blue: #0060FF; --shadow-low: none; --shadow-floating: none;}} body{margin:0} a{color:var(--text-accent)}a:hover{color:var(--text-primary)} .sn-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sn-input::placeholder{color:var(--text-tertiary)} .sn-input:focus{outline:none;border-color:var(--action-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--action-accent) 32%,transparent)} .sn-wide{display:flex}.sn-narrow{display:none} @media (max-width:560px){.sn-wide{display:none}.sn-narrow{display:flex}} @keyframes sn-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}} @keyframes sn-up{from{transform:translateY(100%)}to{transform:translateY(0)}} .sn-dot{animation:sn-pulse 2.4s ease-in-out infinite} .sn-sheet{animation:sn-up 320ms cubic-bezier(.2,.8,.2,1)} .sn-scroll{scrollbar-width:none}.sn-scroll::-webkit-scrollbar{display:none} @keyframes sn-head{from{left:27%}to{left:43%}} @keyframes sn-pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}} .sn-head{animation:sn-head 6s linear infinite} .sn-pop{animation:sn-pop 360ms cubic-bezier(.2,.8,.2,1) both} .sn-cap{right:52px}@media (max-width:760px){.sn-cap{right:43px}.sn-cap>span{font-size:11px!important;padding:5px 8px!important}} .sn-wild{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head prev" "ctrl prev";column-gap:clamp(40px,7vw,112px);row-gap:40px;align-items:center} .sn-w-head{grid-area:head;align-self:end}.sn-w-prev{grid-area:prev}.sn-w-ctrl{grid-area:ctrl;align-self:start} @media (max-width:760px){.sn-wild{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "prev" "ctrl";row-gap:32px}.sn-w-prev{justify-self:center}.sn-w-ctrl{justify-self:center}} @keyframes sn-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .sn-marquee{animation:sn-marquee 220s linear infinite} .sn-nav{gap:22px}@media (max-width:560px){.sn-nav{gap:10px}} .sn-arts{grid-auto-columns:clamp(280px,24vw,352px)}@media (max-width:560px){.sn-arts{grid-auto-columns:82%}} .sn-arr:hover{border-color:var(--text-primary)}.sn-art-ig:hover{text-decoration:underline} @media (prefers-reduced-motion:reduce){.sn-dot,.sn-sheet,.sn-head,.sn-pop,.sn-marquee{animation:none}} body{margin:0} a{color:var(--text-accent)}a:hover{color:var(--text-primary)} .sn-ap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"photo info";column-gap:clamp(32px,5vw,80px);align-items:start} .sn-ap-photo{grid-area:photo;position:sticky;top:24px}.sn-ap-info{grid-area:info} .sn-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .sn-soc{display:flex}.sn-ig:hover{border-color:var(--text-primary)} @media (max-width:560px){.sn-soc{display:none}.sn-more-line{display:none}.sn-more-img{width:76px!important}} @media (max-width:820px){.sn-ap{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "info";row-gap:24px}.sn-ap-photo{position:relative;top:0}.sn-more{grid-template-columns:minmax(0,1fr)}} body{margin:0} a.ss-i.ss-i{color:var(--text-secondary)}a.ss-i.ss-i:hover{color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 8%,transparent)} a.ss-l.ss-l{color:var(--text-secondary)}a.ss-l.ss-l:hover{color:var(--text-primary)} body{margin:0} body{margin:0} .fr a{color:var(--text-accent)} .sn-soc{display:flex}@media (max-width:560px){.sn-soc{display:none}} .fr-m{display:none!important} .fr-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);column-gap:clamp(32px,5vw,80px);align-items:center} .fr-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .fr-step{flex-direction:column} .fr-found{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,72px);row-gap:28px;align-items:start} .fr-apply{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);row-gap:24px;align-items:center} .fr-faq{display:grid;grid-template-columns:minmax(0,0.75fr) minmax(0,1.25fr);column-gap:clamp(32px,5vw,72px);row-gap:20px;align-items:start} .fr-strip{scrollbar-width:none;scroll-snap-type:x mandatory}.fr-strip::-webkit-scrollbar{display:none} .fr-root{scrollbar-width:none}.fr-root::-webkit-scrollbar{display:none} @keyframes fr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes fr-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}} @keyframes fr-up{from{transform:translateY(110%)}to{transform:none}} .fr-float{animation:fr-float 7s ease-in-out infinite} .fr-dot{animation:fr-pulse 2.4s ease-in-out infinite} .fr-barin{animation:fr-up 320ms cubic-bezier(.2,.8,.2,1) both} @media (max-width:900px){ .fr-d{display:none!important} .fr-m{display:flex!important} .fr-steps{grid-template-columns:minmax(0,1fr);gap:10px} .fr-step{flex-direction:row;align-items:flex-start;gap:14px!important;padding:16px!important;border-radius:20px!important} .fr-step-n{display:none!important} .fr-found{grid-template-columns:minmax(0,1fr)} .fr-apply{grid-template-columns:minmax(0,1fr)} .fr-faq{grid-template-columns:minmax(0,1fr)} } @media (prefers-reduced-motion:reduce){.fr-float,.fr-dot,.fr-barin{animation:none}} body{margin:0} .fa a{color:var(--text-accent)} .fa-input::placeholder{color:var(--text-tertiary)} .fa-input:focus{outline:none;border-color:var(--action-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--action-accent) 30%,transparent)} .fa-scroll{scrollbar-width:none}.fa-scroll::-webkit-scrollbar{display:none} @keyframes fa-bar{from{background-position:0 0}to{background-position:28px 0}} @keyframes fa-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .fa-moving{background-image:linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.22) 75%,transparent 75%);background-size:28px 28px;animation:fa-bar 900ms linear infinite} .fa-step{animation:fa-in 280ms cubic-bezier(.2,.8,.2,1) both} @media (prefers-reduced-motion:reduce){.fa-moving,.fa-step{animation:none}} body{margin:0} .sn-soc{display:flex}@media (max-width:560px){.sn-soc{display:none}} .fc a{color:var(--text-accent)} .fc-input::placeholder{color:var(--text-tertiary)} .fc-input:focus{outline:none;border-color:var(--action-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--action-accent) 30%,transparent)} .fc-root{scrollbar-width:none}.fc-root::-webkit-scrollbar{display:none} .fc-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);align-items:start} .fc-side{position:sticky;top:24px} @keyframes fc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}} .fc-dot{animation:fc-pulse 1.8s ease-in-out infinite} @media (max-width:900px){.fc-grid{grid-template-columns:minmax(0,1fr);row-gap:20px}.fc-side{position:relative;top:0}} @media (prefers-reduced-motion:reduce){.fc-dot{animation:none}} body{margin:0} .sn-soc{display:flex}@media (max-width:560px){.sn-soc{display:none}} .fc a{color:var(--text-accent)} .c0,a.c0{background: var(--bg-canvas); color: var(--text-primary); font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c1,a.c1{position: relative; overflow: hidden; padding-bottom: 64px; border-radius: 0 0 clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px); background: var(--bg-canvas); color: var(--text-primary);} .c2,a.c2{position: relative; z-index: 3; max-width: 1280px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;} .c3,a.c3{display: flex; padding: 11px 0;} .c4,a.c4{width: 151px;} .c5,a.c5{ height: 22px;} .c6,a.c6{ line-height: 0; flex-shrink: 0;} .c7,a.c7{display: block; overflow: visible;} .c8,a.c8{fill: var(--text-on-media);} .c9,a.c9{ display: inline;} .c10,a.c10{fill: var(--brand-blue);} .c11,a.c11{display: flex; align-items: center;} .c12,a.c12{display: flex; align-items: center; font-size: 15px; line-height: 20px; font-weight: 500;} .c13,a.c13{padding: 12px 0; color: var(--text-secondary); text-decoration: none;} .c14,a.c14{width: 1px; height: 20px; background: var(--divider-strong);} .c15,a.c15{margin-right: -8px; display: flex;} .c16,a.c16{ gap: 0;} .c17,a.c17{display: flex; align-items: center; font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c18,a.c18{width: 40px;} .c19,a.c19{ height: 40px;} .c20,a.c20{ display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none;} .c21,a.c21{width: 20px;} .c22,a.c22{ height: 20px;} .c23,a.c23{ flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit;} .c24,a.c24{display: block;} .c25,a.c25{min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 19px; font-weight: 500; text-decoration: none;} .c26,a.c26{width: 18px;} .c27,a.c27{ height: 18px;} .c28,a.c28{position: relative; z-index: 1; margin-top: 4px; height: clamp(356px, 30vw, 440px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.2vw, 18px);} .c29,a.c29{ margin: 44px 0 0;} .c30,a.c30{ box-shadow: 0 0 0 2px var(--brand-blue), 0 28px 64px rgba(0, 0, 0, 0.5);} .c31,a.c31{ box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);} .c32,a.c32{position: relative; flex: 0 0 auto; width: clamp(172px, 15vw, 224px); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #1B1D22;} .c33,a.c33{display: block; width: 100%; height: 100%; object-fit: cover;} .c34,a.c34{position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;} .c35,a.c35{max-width: 100%; min-height: 26px; box-sizing: border-box; padding: 5px 9px; display: flex; align-items: center; gap: 5px; border-radius: 13px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font-size: 12px; line-height: 16px;} .c36,a.c36{font-weight: 600; white-space: nowrap;} .c37,a.c37{opacity: 0.6;} .c38,a.c38{position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; cursor: pointer;} .c39,a.c39{ background: rgba(0, 0, 0, 0.42);} .c40,a.c40{ background: var(--brand-blue);} .c41,a.c41{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media);} .c42,a.c42{position: absolute; top: 45px; right: 1px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none;} .c43,a.c43{display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));} .c44,a.c44{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 32px; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;} .c45,a.c45{ margin: 14px 0 0;} .c46,a.c46{ margin: 0px 0 0;} .c47,a.c47{ margin: 22px 0 0;} .c48,a.c48{ margin: 52px 0 0;} .c49,a.c49{position: relative; z-index: 2; margin-top: clamp(-180px, -11vw, -110px); padding: clamp(86px, 7vw, 120px) 20px 0; display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(to bottom, rgba(13, 14, 17, 0) 0, rgba(13, 14, 17, 0.9) 50px, var(--bg-canvas) 96px);} .c50,a.c50{height: 30px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--divider-default); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary);} .c51,a.c51{width: 7px; height: 7px; border-radius: 999px; background: var(--spark);} .c52,a.c52{ font-size: clamp(46px, 6.6vw, 100px);} .c53,a.c53{margin: 18px 0 0; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.24em; line-height: 0.98; font-weight: 600; letter-spacing: -0.045em;} .c54,a.c54{ color: inherit;} .c55,a.c55{white-space: nowrap;} .c56,a.c56{ color: var(--text-tertiary);} .c57,a.c57{margin: 20px 0 0; max-width: 33em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.42; color: var(--text-secondary); text-wrap: pretty;} .c58,a.c58{margin: 28px 0 0; width: 100%; max-width: 520px; flex-direction: column; gap: 14px;} .c59,a.c59{display: flex; flex-wrap: wrap; gap: 10px;} .c60,a.c60{ border: 1px solid var(--divider-strong);} .c61,a.c61{ border: 1px solid var(--feedback-error);} .c62,a.c62{flex: 1 1 240px; min-width: 0; height: 56px; box-sizing: border-box; margin: 0; padding: 0 18px; border-radius: 18px; background: rgba(247, 246, 242, 0.06); color: var(--text-primary); font: inherit; font-size: 16px; line-height: 20px;} .c63,a.c63{flex: 1 1 auto; height: 56px; margin: 0; padding: 0 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.006em; cursor: pointer;} .c64,a.c64{display: flex; align-items: flex-start; justify-content: center; gap: 10px; text-align: left; font-size: 13px; line-height: 18px; color: var(--text-secondary);} .c65,a.c65{flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--action-accent);} .c66,a.c66{color: var(--text-primary);} .c67,a.c67{box-sizing: border-box; width: 100%; min-height: 88px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; border-radius: 18px; background: rgba(247, 246, 242, 0.06); border: 1px solid var(--divider-default); text-align: left;} .c68,a.c68{flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: var(--feedback-success); color: #0B0C0E; display: flex; align-items: center; justify-content: center;} .c69,a.c69{min-width: 0; display: flex; flex-direction: column; gap: 2px;} .c70,a.c70{font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary);} .c71,a.c71{font-size: 14px; line-height: 19px; color: var(--text-secondary); overflow-wrap: anywhere;} .c72,a.c72{font-weight: 600; color: var(--text-primary);} .c73,a.c73{ color: var(--feedback-error);} .c74,a.c74{ color: var(--feedback-success);} .c75,a.c75{ color: var(--text-secondary);} .c76,a.c76{margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 19px; font-weight: 500;} .c77,a.c77{margin: 26px 0 0; width: 100%; max-width: 520px;} .c78,a.c78{box-sizing: border-box; width: 100%; min-height: 72px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; border-radius: 18px; background: rgba(247, 246, 242, 0.06); border: 1px solid var(--divider-default); text-align: left;} .c79,a.c79{margin-top: 20px; min-height: 44px; box-sizing: border-box; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; border: 1px solid var(--divider-default); color: var(--text-primary); font-size: 14px; line-height: 18px; font-weight: 500; text-decoration: none;} .c80,a.c80{color: var(--text-accent);} .c81,a.c81{max-width: 1240px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px);} .c82,a.c82{padding: 0 20px; display: flex; flex-direction: column; gap: 10px;} .c83,a.c83{margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.035em;} .c84,a.c84{list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0 20px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(300px, 78%), 1fr); gap: clamp(14px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;} .c85,a.c85{scroll-snap-align: start; display: flex; flex-direction: column;} .c86,a.c86{position: relative; aspect-ratio: 4 / 5; box-sizing: border-box; padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; border-radius: 28px; background: var(--bg-surface); box-shadow: var(--shadow-low); overflow: hidden;} .c87,a.c87{display: flex; align-items: center; gap: 12px;} .c88,a.c88{width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; object-fit: cover; object-position: 50% 30%;} .c89,a.c89{min-width: 0; display: flex; flex-direction: column;} .c90,a.c90{font-size: 16px; line-height: 22px; font-weight: 600;} .c91,a.c91{font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c92,a.c92{flex-grow: 1; display: flex; align-items: center;} .c93,a.c93{position: relative; width: 100%; height: 96px; display: flex; align-items: center; justify-content: space-between;} .c94,a.c94{position: absolute; top: 0; bottom: 0; left: 27%; width: 16%; border-radius: 8px; background: var(--selection-fill);} .c95,a.c95{ height: 27px;} .c96,a.c96{ background: var(--wave-idle);} .c97,a.c97{position: relative; flex-shrink: 0; width: clamp(2px, 0.22vw, 3px); border-radius: 1px;} .c98,a.c98{ height: 31px;} .c99,a.c99{ height: 29px;} .c100,a.c100{ height: 34px;} .c101,a.c101{ height: 52px;} .c102,a.c102{ height: 86px;} .c103,a.c103{ height: 81px;} .c104,a.c104{ height: 75px;} .c105,a.c105{ height: 72px;} .c106,a.c106{ height: 73px;} .c107,a.c107{ height: 56px;} .c108,a.c108{ height: 41px;} .c109,a.c109{ height: 63px;} .c110,a.c110{ height: 47px;} .c111,a.c111{ height: 61px;} .c112,a.c112{ background: var(--action-accent);} .c113,a.c113{ height: 53px;} .c114,a.c114{ height: 38px;} .c115,a.c115{ height: 70px;} .c116,a.c116{ height: 60px;} .c117,a.c117{ height: 55px;} .c118,a.c118{ height: 54px;} .c119,a.c119{ height: 58px;} .c120,a.c120{ height: 48px;} .c121,a.c121{ height: 46px;} .c122,a.c122{ height: 49px;} .c123,a.c123{ height: 67px;} .c124,a.c124{ height: 36px;} .c125,a.c125{ height: 77px;} .c126,a.c126{ height: 80px;} .c127,a.c127{ height: 74px;} .c128,a.c128{ height: 42px;} .c129,a.c129{ height: 68px;} .c130,a.c130{ height: 69px;} .c131,a.c131{ height: 50px;} .c132,a.c132{ height: 82px;} .c133,a.c133{ height: 35px;} .c134,a.c134{ height: 21px;} .c135,a.c135{ height: 45px;} .c136,a.c136{position: absolute; top: -6px; bottom: -6px; left: 27%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text-primary);} .c137,a.c137{display: flex; align-items: center; justify-content: space-between; gap: 12px;} .c138,a.c138{display: flex; flex-direction: column;} .c139,a.c139{font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-accent);} .c140,a.c140{font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums;} .c141,a.c141{margin-top: 20px; display: flex; align-items: baseline; gap: 14px;} .c142,a.c142{font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums;} .c143,a.c143{display: flex; flex-direction: column; gap: 6px;} .c144,a.c144{margin: 0; font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em;} .c145,a.c145{margin: 0; font-size: 16px; line-height: 22px; color: var(--text-secondary); text-wrap: pretty;} .c146,a.c146{position: relative; aspect-ratio: 4 / 5; box-sizing: border-box; padding: clamp(12px, 1.4vw, 18px); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; border-radius: 28px; background: var(--bg-surface); box-shadow: var(--shadow-low); overflow: hidden;} .c147,a.c147{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;} .c148,a.c148{position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--bg-surface-subtle);} .c149,a.c149{position: absolute; left: 6px; bottom: 6px; height: 18px; box-sizing: border-box; padding: 0 5px; display: flex; align-items: center; border-radius: 6px; background: rgba(0, 0, 0, 0.45); color: #F7F6F2; font-size: 11px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums;} .c150,a.c150{ animation-delay: 400ms;} .c151,a.c151{position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 3px var(--action-accent);} .c152,a.c152{position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--action-accent); color: #FFFFFF;} .c153,a.c153{ animation-delay: 580ms;} .c154,a.c154{ animation-delay: 760ms;} .c155,a.c155{ animation-delay: 940ms;} .c156,a.c156{ animation-delay: 220ms;} .c157,a.c157{ animation-delay: 1120ms;} .c158,a.c158{ animation-delay: 1300ms;} .c159,a.c159{ animation-delay: 1480ms;} .c160,a.c160{ animation-delay: 1660ms;} .c161,a.c161{padding: 0 6px 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;} .c162,a.c162{font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em;} .c163,a.c163{position: relative; aspect-ratio: 4 / 5; box-sizing: border-box; padding: clamp(16px, 1.6vw, 20px); display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 28px; background: var(--bg-canvas); color: var(--text-primary); overflow: hidden;} .c164,a.c164{position: relative; flex-grow: 1; min-height: 0; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #1B1D22;} .c165,a.c165{margin: 0 clamp(8px, 1.2vw, 16px); border-radius: clamp(28px, 3vw, 44px); overflow: hidden; background: var(--bg-canvas); color: var(--text-primary);} .c166,a.c166{max-width: 1160px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) 20px;} .c167,a.c167{display: flex; flex-direction: column; gap: 10px;} .c168,a.c168{margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;} .c169,a.c169{margin: 8px 0 0; max-width: 30em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c170,a.c170{position: relative; margin: 0; width: clamp(260px, 25vw, 330px); aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #1B1D22; box-shadow: 0 32px 72px rgba(0, 0, 0, 0.55);} .c171,a.c171{position: absolute; top: 10px; left: 10px; height: 26px; box-sizing: border-box; padding: 0 10px; display: flex; align-items: center; gap: 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font-size: 12px; line-height: 16px; white-space: nowrap;} .c172,a.c172{font-weight: 600;} .c173,a.c173{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media);} .c174,a.c174{width: 100%; max-width: 480px; display: flex; flex-direction: column;} .c175,a.c175{display: flex; align-items: center; gap: 12px; color: var(--text-primary);} .c176,a.c176{flex-shrink: 0; overflow: visible;} .c177,a.c177{stroke: var(--action-accent);} .c178,a.c178{fill: var(--action-accent); stroke: none;} .c179,a.c179{fill: color-mix(in srgb, var(--action-accent) 16%, transparent);} .c180,a.c180{font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;} .c181,a.c181{margin-left: auto; font-size: 14px; line-height: 19px; color: var(--text-secondary); font-variant-numeric: tabular-nums;} .c182,a.c182{position: relative; height: 44px; margin: 2px 0 0;} .c183,a.c183{ left: 12.57%;} .c184,a.c184{ color: var(--text-primary);} .c185,a.c185{ font-weight: 500;} .c186,a.c186{ font-weight: 600;} .c187,a.c187{position: absolute; top: 0; transform: translateX(-50%); height: 44px; margin: 0; padding: 0 4px; border: 0; background: transparent; font: inherit; font-size: 13px; line-height: 18px; cursor: pointer;} .c188,a.c188{ left: 31.29%;} .c189,a.c189{ left: 50.00%;} .c190,a.c190{ left: 68.71%;} .c191,a.c191{ left: 87.43%;} .c192,a.c192{margin: 6px 0 0; min-height: 3em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c193,a.c193{margin: 8px 0 0; max-width: 32em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c194,a.c194{list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 260px), 1fr)); gap: clamp(10px, 1.4vw, 20px);} .c195,a.c195{display: flex;} .c196,a.c196{position: relative; width: 100%; aspect-ratio: 9 / 16; margin: 0; padding: 0; display: block; overflow: hidden; border: 0; border-radius: 18px; background: #1B1D22; color: var(--text-on-media); font: inherit; text-align: left; cursor: pointer;} .c197,a.c197{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} .c198,a.c198{position: absolute; top: 10px; left: 10px; height: 24px; box-sizing: border-box; padding: 0 9px; display: flex; align-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 11px; line-height: 14px; font-weight: 600;} .c199,a.c199{position: absolute; top: 10px; right: 10px; height: 24px; box-sizing: border-box; padding: 0 8px 0 6px; display: flex; align-items: center; gap: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 11px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums;} .c200,a.c200{position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; display: flex; flex-direction: column; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));} .c201,a.c201{font-size: 14px; line-height: 18px; font-weight: 600;} .c202,a.c202{font-size: 13px; line-height: 17px; opacity: 0.8;} .c203,a.c203{max-width: 1240px; margin: 0 auto; padding: 0 0 clamp(72px, 9vw, 128px);} .c204,a.c204{padding: 0 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;} .c205,a.c205{flex-shrink: 0; gap: 8px;} .c206,a.c206{ opacity: 0.36;} .c207,a.c207{ opacity: 1;} .c208,a.c208{width: 48px; height: 48px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--divider-strong); border-radius: 999px; background: transparent; color: var(--text-primary); cursor: pointer;} .c209,a.c209{list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0 20px 8px; display: grid; grid-auto-flow: column; gap: clamp(14px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;} .c210,a.c210{position: relative; scroll-snap-align: start; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: #1B1D22; color: var(--text-on-media);} .c211,a.c211{ object-position: 50% 40%;} .c212,a.c212{position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px;} .c213,a.c213{height: 28px; box-sizing: border-box; padding: 0 11px; display: flex; align-items: center; border-radius: 999px; background: rgba(0, 96, 255, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12px; line-height: 16px; font-weight: 600;} .c214,a.c214{height: 28px; box-sizing: border-box; padding: 0 11px; display: flex; align-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12px; line-height: 16px; font-weight: 600;} .c215,a.c215{height: 28px; box-sizing: border-box; padding: 0 11px 0 9px; display: flex; align-items: center; gap: 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12px; line-height: 16px; font-weight: 600;} .c216,a.c216{position: absolute; left: 0; right: 0; bottom: 0; padding: 72px clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 8px; background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 20%, rgba(0, 0, 0, 0));} .c217,a.c217{font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em;} .c218,a.c218{font-size: 15px; line-height: 21px; opacity: 0.86; text-wrap: pretty;} .c219,a.c219{margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px;} .c220,a.c220{display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 19px; font-weight: 500;} .c221,a.c221{position: relative; z-index: 2; align-self: flex-start; min-height: 36px; margin: -6px 0 -8px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-on-media); font-size: 14px; line-height: 19px; font-weight: 500; text-decoration: none; opacity: 0.86;} .c222,a.c222{width: 16px;} .c223,a.c223{ height: 16px;} .c224,a.c224{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .c225,a.c225{width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--text-on-media); color: #0B0C0E;} .c226,a.c226{position: absolute; inset: 0; z-index: 1; border-radius: 24px;} .c227,a.c227{ object-position: 50% 35%;} .c228,a.c228{ object-position: 50% 30%;} .c229,a.c229{ object-position: 50% 50%;} .c230,a.c230{position: relative; margin: 0 clamp(8px, 1.2vw, 16px); border-radius: clamp(28px, 3vw, 44px); overflow: hidden; background: var(--bg-canvas); color: var(--text-primary);} .c231,a.c231{position: relative; height: clamp(190px, 17vw, 250px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000000 55%, transparent); mask-image: linear-gradient(to bottom, #000000 55%, transparent);} .c232,a.c232{position: absolute; top: clamp(28px, 3vw, 44px); left: 0; display: flex; gap: 12px; width: max-content;} .c233,a.c233{flex-shrink: 0; width: clamp(96px, 8.4vw, 124px); aspect-ratio: 9 / 16; border-radius: 14px; object-fit: cover; opacity: 0.9;} .c234,a.c234{position: relative; max-width: 960px; margin: 0 auto; padding: 0 20px clamp(56px, 7vw, 96px); display: flex; flex-direction: column; align-items: center; text-align: center;} .c235,a.c235{margin: 18px 0 0; font-size: clamp(46px, 7vw, 104px); line-height: 0.96; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance;} .c236,a.c236{margin: 20px 0 0; max-width: 30em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.42; color: var(--text-secondary); text-wrap: pretty;} .c237,a.c237{margin: 28px 0 0; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 14px;} .c238,a.c238{max-width: 1240px; margin: 0 auto; padding: clamp(32px, 4vw, 48px) 20px clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c239,a.c239{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;} .c240,a.c240{width: 123.5px;} .c241,a.c241{fill: var(--text-primary);} .c242,a.c242{color: var(--text-secondary);} .c243,a.c243{ gap: 4px 18px;} .c244,a.c244{display: flex; flex-wrap: wrap; gap: 4px 20px;} .c245,a.c245{position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; box-sizing: border-box; background: rgba(5, 6, 8, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text-primary); font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c246,a.c246{position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: transparent; cursor: default;} .c247,a.c247{position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(247, 246, 242, 0.12); color: var(--text-primary); cursor: pointer;} .c248,a.c248{position: relative; z-index: 1; margin: 0; width: min(92vw, calc(min(78vh, 760px) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000000; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);} .c249,a.c249{display: block; width: 100%; height: 100%; object-fit: cover; background: #000000;} .c250,a.c250{position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); cursor: pointer;} .c251,a.c251{position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); cursor: pointer;} .c252,a.c252{position: relative; z-index: 1; width: min(92vw, calc(min(78vh, 760px) * 9 / 16)); display: flex; align-items: center; justify-content: space-between; gap: 12px;} .c253,a.c253{flex-shrink: 0; min-height: 44px; box-sizing: border-box; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--divider-strong); color: var(--text-primary); font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap;} .c254,a.c254{position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; background: var(--overlay-scrim); color: var(--text-primary); font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c255,a.c255{flex-grow: 1; margin: 0; padding: 0; border: 0; background: transparent; cursor: default;} .c256,a.c256{box-sizing: border-box; padding: 10px 20px 34px; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: var(--bg-surface); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);} .c257,a.c257{align-self: center; width: 36px; height: 5px; border-radius: 3px; background: var(--divider-strong);} .c258,a.c258{margin-top: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;} .c259,a.c259{margin: 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em;} .c260,a.c260{margin: 0; font-size: 15px; line-height: 20px; color: var(--text-secondary);} .c261,a.c261{flex-shrink: 0; width: 44px; height: 44px; margin: -8px -10px 0 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); cursor: pointer;} .c262,a.c262{margin: 20px 0 0; display: flex; flex-direction: column; gap: 16px;} .c263,a.c263{margin: 0; height: 56px; padding: 0 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.006em; cursor: pointer;} .c264,a.c264{margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px;} .c265,a.c265{width: 100%; height: 56px; box-sizing: border-box; margin: 0; padding: 0 18px; border-radius: 18px; background: var(--bg-surface-subtle); color: var(--text-primary); font: inherit; font-size: 16px; line-height: 20px;} .c266,a.c266{display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 18px; color: var(--text-secondary);} .c267,a.c267{margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 19px; font-weight: 500;} .c268,a.c268{margin: 4px 0 0; height: 56px; padding: 0 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.006em; cursor: pointer;} .c269,a.c269{max-width: 1240px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;} .c270,a.c270{display: flex; align-items: center; gap: 10px;} .c271,a.c271{min-height: 44px; box-sizing: border-box; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--divider-strong); color: var(--text-primary); font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none;} .c272,a.c272{max-width: 1240px; margin: 0 auto; padding: clamp(4px, 1.6vw, 24px) 20px clamp(56px, 7vw, 96px);} .c273,a.c273{position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; background: #1B1D22;} .c274,a.c274{position: absolute; left: 14px; bottom: 14px; height: 30px; box-sizing: border-box; padding: 0 12px 0 10px; display: flex; align-items: center; gap: 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font-size: 13px; line-height: 18px; font-weight: 600;} .c275,a.c275{display: flex; flex-wrap: wrap; gap: 8px;} .c276,a.c276{height: 30px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: color-mix(in srgb, var(--action-accent) 18%, transparent); color: var(--text-accent); font-size: 13px; line-height: 18px; font-weight: 600;} .c277,a.c277{height: 30px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--divider-default); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary);} .c278,a.c278{margin: 14px 0 0; font-size: clamp(52px, 7vw, 104px); line-height: 0.94; font-weight: 600; letter-spacing: -0.045em;} .c279,a.c279{margin: 18px 0 0; max-width: 24em; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; font-weight: 500; text-wrap: balance;} .c280,a.c280{margin: 14px 0 0; max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty;} .c281,a.c281{margin: 14px 0 0; max-width: 34em; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c282,a.c282{flex-shrink: 0; margin-top: 2px;} .c283,a.c283{margin-top: 18px; align-self: flex-start; min-height: 44px; box-sizing: border-box; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; border: 1px solid var(--divider-strong); color: var(--text-primary); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;} .c284,a.c284{color: var(--text-tertiary);} .c285,a.c285{margin-top: 28px; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 22px; background: var(--bg-surface);} .c286,a.c286{display: flex; align-items: center; gap: 14px;} .c287,a.c287{flex-shrink: 0; width: 56px; height: 56px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--action-primary-fill); color: var(--action-primary-text); cursor: pointer;} .c288,a.c288{min-width: 0; flex-grow: 1; display: flex; flex-direction: column;} .c289,a.c289{font-size: 17px; line-height: 22px; font-weight: 600;} .c290,a.c290{flex-shrink: 0; min-height: 44px; box-sizing: border-box; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--divider-strong); color: var(--text-primary); font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap;} .c291,a.c291{position: relative; height: 56px; display: flex; align-items: center; justify-content: space-between;} .c292,a.c292{ height: 12px;} .c293,a.c293{ height: 17px;} .c294,a.c294{ height: 19px;} .c295,a.c295{ height: 8px;} .c296,a.c296{flex-shrink: 0; width: clamp(2px, 0.24vw, 3px); border-radius: 1px;} .c297,a.c297{ height: 13px;} .c298,a.c298{ height: 23px;} .c299,a.c299{ height: 14px;} .c300,a.c300{ height: 24px;} .c301,a.c301{ height: 9px;} .c302,a.c302{ height: 26px;} .c303,a.c303{ height: 25px;} .c304,a.c304{ height: 28px;} .c305,a.c305{ height: 11px;} .c306,a.c306{ height: 30px;} .c307,a.c307{ height: 15px;} .c308,a.c308{ height: 44px;} .c309,a.c309{ height: 33px;} .c310,a.c310{ height: 32px;} .c311,a.c311{ height: 37px;} .c312,a.c312{ height: 10px;} .c313,a.c313{ height: 39px;} .c314,a.c314{ height: 43px;} .c315,a.c315{ height: 51px;} .c316,a.c316{ height: 7px;} .c317,a.c317{position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;} .c318,a.c318{display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; color: var(--text-secondary); font-variant-numeric: tabular-nums;} .c319,a.c319{margin: 36px 0 0; font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.012em;} .c320,a.c320{list-style: none; margin: 14px 0 0; padding: 0; max-width: 540px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;} .c321,a.c321{position: relative; width: 100%; aspect-ratio: 9 / 16; margin: 0; padding: 0; display: block; overflow: hidden; border: 0; border-radius: 16px; background: #1B1D22; color: var(--text-on-media); font: inherit; cursor: pointer;} .c322,a.c322{position: absolute; top: 8px; left: 8px; height: 22px; box-sizing: border-box; padding: 0 8px; display: flex; align-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 11px; line-height: 14px; font-weight: 600;} .c323,a.c323{position: absolute; right: 8px; bottom: 8px; height: 24px; box-sizing: border-box; padding: 0 8px 0 6px; display: flex; align-items: center; gap: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 11px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums;} .c324,a.c324{margin-top: 36px; padding: clamp(18px, 2vw, 24px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-radius: 22px; border: 1px solid var(--divider-default);} .c325,a.c325{flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px;} .c326,a.c326{font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.012em;} .c327,a.c327{font-size: 15px; line-height: 20px; color: var(--text-secondary);} .c328,a.c328{flex: 0 0 auto; min-height: 56px; box-sizing: border-box; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.006em; text-decoration: none;} .c329,a.c329{max-width: 1240px; margin: 0 auto; padding: 0 20px clamp(56px, 7vw, 96px);} .c330,a.c330{margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;} .c331,a.c331{list-style: none; margin: 0; padding: 0;} .c332,a.c332{width: 100%; box-sizing: border-box; padding: 12px; display: flex; align-items: center; gap: 16px; border-radius: 22px; background: var(--bg-surface); color: var(--text-primary); text-decoration: none;} .c333,a.c333{flex-shrink: 0; width: clamp(96px, 9vw, 132px); aspect-ratio: 3 / 4; border-radius: 14px; object-fit: cover;} .c334,a.c334{min-width: 0; flex-grow: 1; display: flex; flex-direction: column; gap: 5px;} .c335,a.c335{font-size: 13px; line-height: 18px; color: var(--text-secondary);} .c336,a.c336{font-size: clamp(22px, 2vw, 28px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;} .c337,a.c337{font-size: 15px; line-height: 20px; color: var(--text-secondary); text-wrap: pretty;} .c338,a.c338{margin-top: 2px; display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 19px; font-weight: 500;} .c339,a.c339{flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--action-primary-fill); color: var(--action-primary-text);} .c340,a.c340{max-width: 1240px; margin: 0 auto; padding: 28px 20px clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; border-top: 1px solid var(--divider-default); font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c341,a.c341{position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; box-sizing: border-box; background: rgba(5, 6, 8, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} .c342,a.c342{position: relative; z-index: 1; width: min(92vw, calc(min(78vh, 760px) * 9 / 16)); display: flex; flex-direction: column;} .c343,a.c343{height: auto;} .c344,a.c344{ overflow-y: visible;} .c345,a.c345{ position: relative; background: var(--bg-canvas); color: var(--text-primary); font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c346,a.c346{ height: min(100svh, 860px);} .c347,a.c347{position: relative; min-height: 620px; overflow: hidden; flex-direction: column; justify-content: flex-end; border-radius: 0 0 28px 28px; background: #0D0E11; color: var(--text-primary);} .c348,a.c348{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;} .c349,a.c349{position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 14, 17, 0.6) 0, rgba(13, 14, 17, 0) 20%, rgba(13, 14, 17, 0) 34%, rgba(13, 14, 17, 0.82) 58%, #0D0E11 80%);} .c350,a.c350{position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;} .c351,a.c351{height: 36px; margin: 0; padding: 0 14px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(247, 246, 242, 0.32); border-radius: 999px; background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; cursor: pointer;} .c352,a.c352{position: absolute; z-index: 2; top: 76px; left: 20px; height: 28px; box-sizing: border-box; padding: 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font-size: 12px; line-height: 16px;} .c353,a.c353{position: relative; z-index: 1; padding: 0 20px 26px; display: flex; flex-direction: column; align-items: flex-start;} .c354,a.c354{min-height: 30px; box-sizing: border-box; padding: 5px 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; line-height: 18px; font-weight: 600;} .c355,a.c355{ background: var(--spark);} .c356,a.c356{flex-shrink: 0; width: 7px; height: 7px; border-radius: 999px;} .c357,a.c357{margin: 14px 0 0; font-size: 46px; line-height: 0.98; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance;} .c358,a.c358{margin: 14px 0 0; font-size: 17px; line-height: 1.42; color: var(--text-secondary); text-wrap: pretty;} .c359,a.c359{margin-top: 22px; width: 100%; height: 56px; padding: 0 22px; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 17px; line-height: 22px; font-weight: 600; cursor: pointer;} .c360,a.c360{margin-top: 12px; align-self: center; font-size: 13px; line-height: 18px; color: var(--text-secondary);} .c361,a.c361{position: relative; overflow: hidden; padding-bottom: clamp(48px, 6vw, 88px); border-radius: 0 0 clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px); background: var(--bg-canvas); color: var(--text-primary);} .c362,a.c362{display: flex; align-items: center; gap: 22px; font-size: 15px; line-height: 20px; font-weight: 500;} .c363,a.c363{margin: 0 -6px; display: flex;} .c364,a.c364{height: 40px; margin: 0 0 0 4px; padding: 0 16px; border: 1px solid var(--divider-strong); border-radius: 999px; background: transparent; color: var(--text-primary); font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer;} .c365,a.c365{position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 24px 20px 0;} .c366,a.c366{min-height: 30px; box-sizing: border-box; padding: 5px 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--divider-default); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary);} .c367,a.c367{margin: 18px 0 0; font-size: clamp(44px, 5.4vw, 80px); line-height: 0.98; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance;} .c368,a.c368{margin: 20px 0 0; max-width: 31em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.42; color: var(--text-secondary); text-wrap: pretty;} .c369,a.c369{margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;} .c370,a.c370{min-width: 280px; height: 56px; padding: 0 26px; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; cursor: pointer;} .c371,a.c371{min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;} .c372,a.c372{margin: 18px 0 0; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c373,a.c373{height: clamp(318px, 28vw, 420px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.4vw, 20px);} .c374,a.c374{ width: clamp(148px, 11vw, 176px);} .c375,a.c375{ margin: 34px 0 0;} .c376,a.c376{ animation-delay: -3.4s;} .c377,a.c377{position: relative; flex: 0 0 auto; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #1B1D22; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);} .c378,a.c378{position: absolute; top: 10px; left: 10px; right: 10px; display: flex;} .c379,a.c379{max-width: 100%; height: 26px; box-sizing: border-box; padding: 0 9px; display: flex; align-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .c380,a.c380{ width: clamp(170px, 14vw, 214px);} .c381,a.c381{ animation-delay: 0s;} .c382,a.c382{ animation-delay: -2.1s;} .c383,a.c383{padding: 28px 0 0; flex-direction: column; gap: 12px;} .c384,a.c384{padding: 0 20px; display: flex; align-items: baseline; justify-content: space-between;} .c385,a.c385{font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.015em;} .c386,a.c386{font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;} .c387,a.c387{padding: 0 20px 4px; display: flex; gap: 10px; overflow-x: auto; scroll-padding: 0 20px;} .c388,a.c388{position: relative; flex: 0 0 auto; width: 136px; aspect-ratio: 9 / 16; margin: 0; border-radius: 16px; overflow: hidden; background: #1B1D22; scroll-snap-align: start;} .c389,a.c389{position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex;} .c390,a.c390{max-width: 100%; height: 22px; box-sizing: border-box; padding: 0 8px; display: flex; align-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-on-media); font-size: 11px; line-height: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .c391,a.c391{max-width: 1240px; margin: 0 auto; padding: clamp(40px, 8vw, 112px) 20px 0;} .c392,a.c392{font-size: 14px; line-height: 19px; font-weight: 600; color: var(--text-accent);} .c393,a.c393{margin: 0; font-size: clamp(32px, 4.4vw, 60px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;} .c394,a.c394{margin: clamp(20px, 3.4vw, 44px) 0 0; padding: 0; list-style: none;} .c395,a.c395{min-width: 0; box-sizing: border-box; padding: clamp(20px, 2vw, 28px); display: flex; gap: 14px; border-radius: 24px; background: var(--bg-surface); box-shadow: var(--shadow-low);} .c396,a.c396{display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;} .c397,a.c397{width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--selection-fill); color: var(--icon-accent);} .c398,a.c398{min-width: 0; display: flex; flex-direction: column; gap: 6px;} .c399,a.c399{font-size: 14px; line-height: 19px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums;} .c400,a.c400{margin: 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em;} .c401,a.c401{margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c402,a.c402{max-width: 1240px; margin: 0 auto; padding: clamp(40px, 7vw, 96px) 20px 0;} .c403,a.c403{ background: var(--bg-canvas);} .c404,a.c404{ background: var(--bg-surface);} .c405,a.c405{ border: 0;} .c406,a.c406{ border: 1px solid var(--divider-default);} .c407,a.c407{position: relative; overflow: hidden; box-sizing: border-box; padding: clamp(22px, 4vw, 56px); border-radius: clamp(26px, 3vw, 40px); color: var(--text-primary);} .c408,a.c408{position: absolute; right: -30%; top: -30%; width: 90%; aspect-ratio: 1; border-radius: 999px; background: radial-gradient(closest-side, rgba(0, 96, 255, 0.34), rgba(0, 96, 255, 0));} .c409,a.c409{position: relative;} .c410,a.c410{display: flex; flex-direction: column; align-items: flex-start;} .c411,a.c411{height: 34px; box-sizing: border-box; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; background: rgba(0, 96, 255, 0.18); border: 1px solid rgba(77, 143, 255, 0.45); font-size: 13px; line-height: 18px; font-weight: 600;} .c412,a.c412{width: 38.8px;} .c413,a.c413{ display: none;} .c414,a.c414{margin-top: 20px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--text-accent);} .c415,a.c415{margin: 10px 0 0; font-size: clamp(32px, 4.2vw, 58px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;} .c416,a.c416{margin: 16px 0 0; max-width: 30em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.42; color: var(--text-secondary); text-wrap: pretty;} .c417,a.c417{margin-top: 24px; width: min(100%, 300px); box-sizing: border-box; padding: 10px; display: flex; align-items: center; gap: 12px; border-radius: 20px; background: var(--bg-surface-subtle); border: 1px solid var(--divider-default);} .c418,a.c418{flex-shrink: 0; width: 56px; height: 72px; border-radius: 12px; object-fit: cover; object-position: 50% 30%;} .c419,a.c419{align-self: flex-start; height: 24px; box-sizing: border-box; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--brand-blue); color: #FFFFFF; font-size: 11px; line-height: 14px; font-weight: 600;} .c420,a.c420{font-size: 12px; line-height: 16px; color: var(--text-secondary);} .c421,a.c421{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;} .c422,a.c422{ border-top: 0;} .c423,a.c423{padding: 16px 0; display: flex; gap: 14px;} .c424,a.c424{flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(77, 143, 255, 0.16); color: var(--icon-accent);} .c425,a.c425{min-width: 0; display: flex; flex-direction: column; gap: 3px;} .c426,a.c426{font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em;} .c427,a.c427{font-size: 15px; line-height: 1.42; color: var(--text-secondary); text-wrap: pretty;} .c428,a.c428{ border-top: 1px solid var(--divider-default);} .c429,a.c429{margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--divider-default); font-size: 13px; line-height: 18px; color: var(--text-secondary); text-wrap: pretty;} .c430,a.c430{display: flex; flex-direction: column; align-items: flex-start; gap: 10px;} .c431,a.c431{margin: 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;} .c432,a.c432{margin: 6px 0 0; max-width: 28em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c433,a.c433{margin-top: 8px; min-height: 32px; box-sizing: border-box; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--bg-surface-subtle); font-size: 14px; line-height: 19px; font-weight: 600;} .c434,a.c434{ background: var(--feedback-success);} .c435,a.c435{width: 7px; height: 7px; border-radius: 999px;} .c436,a.c436{box-sizing: border-box; padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 16px; border-radius: clamp(24px, 2.4vw, 32px); background: var(--bg-surface); box-shadow: var(--shadow-low); border: 1px solid var(--divider-default);} .c437,a.c437{font-size: 14px; line-height: 19px; font-weight: 600;} .c438,a.c438{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px;} .c439,a.c439{flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--selection-fill); color: var(--icon-accent);} .c440,a.c440{font-size: 16px; line-height: 21px; font-weight: 600;} .c441,a.c441{margin-top: 4px; width: 100%; height: 56px; padding: 0 22px; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 17px; line-height: 22px; font-weight: 600; cursor: pointer;} .c442,a.c442{font-size: 13px; line-height: 18px; color: var(--text-secondary); text-align: center;} .c443,a.c443{margin-top: 2px; padding-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; border-top: 1px solid var(--divider-default); font-size: 15px; line-height: 20px;} .c444,a.c444{min-height: 44px; margin: 0; padding: 0 4px; border: 0; background: transparent; color: var(--text-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;} .c445,a.c445{max-width: 1240px; margin: 0 auto; padding: clamp(48px, 8vw, 112px) 20px clamp(40px, 7vw, 96px);} .c446,a.c446{margin: 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1; font-weight: 600; letter-spacing: -0.035em;} .c447,a.c447{min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;} .c448,a.c448{border-top: 1px solid var(--divider-default);} .c449,a.c449{border-bottom: 1px solid var(--divider-default);} .c450,a.c450{margin: 0;} .c451,a.c451{width: 100%; min-height: 60px; margin: 0; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; font-weight: 600; text-align: left; cursor: pointer;} .c452,a.c452{flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bg-surface-subtle);} .c453,a.c453{margin: 0; padding: 0 44px 18px 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty;} .c454,a.c454{ padding: 28px 20px clamp(36px, 4vw, 56px);} .c455,a.c455{max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; border-top: 1px solid var(--divider-default); font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c456,a.c456{display: flex; flex-wrap: wrap; gap: 0 20px;} .c457,a.c457{position: sticky; z-index: 20; bottom: 0; box-sizing: border-box; padding: 10px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--divider-default); background: var(--bg-canvas);} .c458,a.c458{width: 100%; height: 54px; padding: 0 8px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 17px; line-height: 22px; font-weight: 600; cursor: pointer;} .c459,a.c459{height: 38px; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; border-radius: 13px; background: color-mix(in srgb, var(--action-primary-text) 14%, transparent); font-size: 13px; line-height: 17px; font-weight: 600; white-space: nowrap;} .c460,a.c460{ height: 100vh;} .c461,a.c461{ border-radius: 0;} .c462,a.c462{ box-shadow: none;} .c463,a.c463{width: 100%; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-primary); font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c464,a.c464{flex-shrink: 0; height: 56px; box-sizing: border-box; padding: 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px;} .c465,a.c465{width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--icon-primary); cursor: pointer;} .c466,a.c466{width: 44px; height: 44px;} .c467,a.c467{font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-secondary);} .c468,a.c468{flex-shrink: 0; padding: 0 20px 4px; display: flex; gap: 4px;} .c469,a.c469{ background: var(--bg-surface-subtle);} .c470,a.c470{flex: 1 1 0; height: 4px; border-radius: 999px;} .c471,a.c471{flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;} .c472,a.c472{box-sizing: border-box; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 20px;} .c473,a.c473{margin-bottom: -10px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--text-accent);} .c474,a.c474{margin: 0; font-size: 30px; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance;} .c475,a.c475{margin: -8px 0 0; font-size: 16px; line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c476,a.c476{box-sizing: border-box; padding: 14px; display: flex; gap: 14px; border-radius: 18px; background: var(--bg-canvas);} .c477,a.c477{flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--selection-fill); color: var(--icon-accent);} .c478,a.c478{font-size: 14px; line-height: 1.4; color: var(--text-secondary);} .c479,a.c479{display: flex; flex-direction: column; gap: 12px;} .c480,a.c480{margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px;} .c481,a.c481{height: 34px; box-sizing: border-box; padding: 0 12px 0 6px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--divider-default); font-size: 14px; line-height: 18px; font-weight: 500;} .c482,a.c482{width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bg-surface-subtle); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;} .c483,a.c483{align-self: flex-start; min-height: 32px; box-sizing: border-box; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--bg-surface-subtle); font-size: 14px; line-height: 19px; font-weight: 600;} .c484,a.c484{width: 7px; height: 7px; border-radius: 999px; background: var(--feedback-success);} .c485,a.c485{display: flex; flex-direction: column; gap: 8px;} .c486,a.c486{width: 100%; height: 56px; box-sizing: border-box; margin: 0; padding: 0 16px; border-radius: 16px; border: 1px solid var(--divider-strong); background: var(--bg-canvas); color: var(--text-primary); font: inherit; font-size: 17px; line-height: 22px;} .c487,a.c487{display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--bg-surface-subtle);} .c488,a.c488{ background: transparent;} .c489,a.c489{ background: var(--action-primary-fill);} .c490,a.c490{ color: var(--action-primary-text);} .c491,a.c491{flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 0 6px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer;} .c492,a.c492{position: relative; display: block;} .c493,a.c493{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);} .c494,a.c494{position: absolute; left: 16px; top: 0; height: 56px; display: flex; align-items: center; font-size: 17px; color: var(--text-secondary);} .c495,a.c495{width: 100%; height: 56px; box-sizing: border-box; margin: 0; padding: 0 16px 0 36px; border-radius: 16px; border: 1px solid var(--divider-strong); background: var(--bg-canvas); color: var(--text-primary); font: inherit; font-size: 17px; line-height: 22px;} .c496,a.c496{ border: 1.5px solid var(--divider-default);} .c497,a.c497{ border: 1.5px solid var(--selection-border);} .c498,a.c498{ background: var(--selection-fill);} .c499,a.c499{width: 100%; box-sizing: border-box; margin: 0; padding: 16px; display: flex; align-items: center; gap: 14px; border-radius: 18px; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;} .c500,a.c500{ border: 2px solid var(--divider-strong);} .c501,a.c501{ border: 2px solid var(--selection-border);} .c502,a.c502{flex-shrink: 0; width: 22px; height: 22px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 999px;} .c503,a.c503{ background: var(--selection-border);} .c504,a.c504{width: 10px; height: 10px; border-radius: 999px;} .c505,a.c505{min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px;} .c506,a.c506{flex-shrink: 0; height: 24px; box-sizing: border-box; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--brand-blue); color: #FFFFFF; font-size: 11px; line-height: 14px; font-weight: 600;} .c507,a.c507{display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 21px; cursor: pointer;} .c508,a.c508{flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--action-accent);} .c509,a.c509{box-sizing: border-box; min-height: 68px; padding: 10px 6px 10px 10px; display: flex; align-items: center; gap: 12px; border-radius: 18px; border: 1px solid var(--divider-default); background: var(--bg-surface);} .c510,a.c510{flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--selection-fill); color: var(--icon-accent);} .c511,a.c511{font-size: 16px; line-height: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .c512,a.c512{flex-shrink: 0; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;} .c513,a.c513{width: 100%; min-height: 96px; box-sizing: border-box; margin: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--divider-strong); border-radius: 18px; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer;} .c514,a.c514{display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 21px; font-weight: 600;} .c515,a.c515{display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;} .c516,a.c516{position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: var(--bg-surface-subtle);} .c517,a.c517{position: absolute; left: 6px; bottom: 6px; height: 20px; box-sizing: border-box; padding: 0 6px; display: flex; align-items: center; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: #F7F6F2; font-size: 11px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums;} .c518,a.c518{position: absolute; top: 0; right: 0; width: 40px; height: 40px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer;} .c519,a.c519{width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #F7F6F2;} .c520,a.c520{aspect-ratio: 3 / 4; box-sizing: border-box; margin: 0; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--divider-strong); border-radius: 14px; background: transparent; color: var(--text-primary); font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; cursor: pointer;} .c521,a.c521{box-sizing: border-box; padding: 10px 6px 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: 16px; background: color-mix(in srgb, var(--feedback-error) 9%, var(--bg-surface)); border: 1px solid color-mix(in srgb, var(--feedback-error) 40%, transparent);} .c522,a.c522{flex-shrink: 0; color: var(--feedback-error);} .c523,a.c523{min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px;} .c524,a.c524{font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .c525,a.c525{font-size: 13px; line-height: 18px; color: var(--feedback-error);} .c526,a.c526{flex-shrink: 0; width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--icon-secondary); cursor: pointer;} .c527,a.c527{height: 6px; border-radius: 999px; background: var(--bg-surface-subtle); overflow: hidden;} .c528,a.c528{ width: 0%;} .c529,a.c529{ width: 1%;} .c530,a.c530{ width: 2%;} .c531,a.c531{ width: 3%;} .c532,a.c532{ width: 4%;} .c533,a.c533{ width: 5%;} .c534,a.c534{ width: 6%;} .c535,a.c535{ width: 7%;} .c536,a.c536{ width: 8%;} .c537,a.c537{ width: 9%;} .c538,a.c538{ width: 10%;} .c539,a.c539{ width: 11%;} .c540,a.c540{ width: 12%;} .c541,a.c541{ width: 13%;} .c542,a.c542{ width: 14%;} .c543,a.c543{ width: 15%;} .c544,a.c544{ width: 16%;} .c545,a.c545{ width: 17%;} .c546,a.c546{ width: 18%;} .c547,a.c547{ width: 19%;} .c548,a.c548{ width: 20%;} .c549,a.c549{ width: 21%;} .c550,a.c550{ width: 22%;} .c551,a.c551{ width: 23%;} .c552,a.c552{ width: 24%;} .c553,a.c553{ width: 25%;} .c554,a.c554{ width: 26%;} .c555,a.c555{ width: 27%;} .c556,a.c556{ width: 28%;} .c557,a.c557{ width: 29%;} .c558,a.c558{ width: 30%;} .c559,a.c559{ width: 31%;} .c560,a.c560{ width: 32%;} .c561,a.c561{ width: 33%;} .c562,a.c562{ width: 34%;} .c563,a.c563{ width: 35%;} .c564,a.c564{ width: 36%;} .c565,a.c565{ width: 37%;} .c566,a.c566{ width: 38%;} .c567,a.c567{ width: 39%;} .c568,a.c568{ width: 40%;} .c569,a.c569{ width: 41%;} .c570,a.c570{ width: 42%;} .c571,a.c571{ width: 43%;} .c572,a.c572{ width: 44%;} .c573,a.c573{ width: 45%;} .c574,a.c574{ width: 46%;} .c575,a.c575{ width: 47%;} .c576,a.c576{ width: 48%;} .c577,a.c577{ width: 49%;} .c578,a.c578{ width: 50%;} .c579,a.c579{ width: 51%;} .c580,a.c580{ width: 52%;} .c581,a.c581{ width: 53%;} .c582,a.c582{ width: 54%;} .c583,a.c583{ width: 55%;} .c584,a.c584{ width: 56%;} .c585,a.c585{ width: 57%;} .c586,a.c586{ width: 58%;} .c587,a.c587{ width: 59%;} .c588,a.c588{ width: 60%;} .c589,a.c589{ width: 61%;} .c590,a.c590{ width: 62%;} .c591,a.c591{ width: 63%;} .c592,a.c592{ width: 64%;} .c593,a.c593{ width: 65%;} .c594,a.c594{ width: 66%;} .c595,a.c595{ width: 67%;} .c596,a.c596{ width: 68%;} .c597,a.c597{ width: 69%;} .c598,a.c598{ width: 70%;} .c599,a.c599{ width: 71%;} .c600,a.c600{ width: 72%;} .c601,a.c601{ width: 73%;} .c602,a.c602{ width: 74%;} .c603,a.c603{ width: 75%;} .c604,a.c604{ width: 76%;} .c605,a.c605{ width: 77%;} .c606,a.c606{ width: 78%;} .c607,a.c607{ width: 79%;} .c608,a.c608{ width: 80%;} .c609,a.c609{ width: 81%;} .c610,a.c610{ width: 82%;} .c611,a.c611{ width: 83%;} .c612,a.c612{ width: 84%;} .c613,a.c613{ width: 85%;} .c614,a.c614{ width: 86%;} .c615,a.c615{ width: 87%;} .c616,a.c616{ width: 88%;} .c617,a.c617{ width: 89%;} .c618,a.c618{ width: 90%;} .c619,a.c619{ width: 91%;} .c620,a.c620{ width: 92%;} .c621,a.c621{ width: 93%;} .c622,a.c622{ width: 94%;} .c623,a.c623{ width: 95%;} .c624,a.c624{ width: 96%;} .c625,a.c625{ width: 97%;} .c626,a.c626{ width: 98%;} .c627,a.c627{ width: 99%;} .c628,a.c628{ width: 100%;} .c629,a.c629{display: block; height: 100%; border-radius: 999px; background: var(--text-primary);} .c630,a.c630{display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; color: var(--text-secondary); font-variant-numeric: tabular-nums;} .c631,a.c631{margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary);} .c632,a.c632{flex: 1 1 0; min-width: 0; min-height: 48px; margin: 0; padding: 0 8px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; cursor: pointer;} .c633,a.c633{font-weight: 500; color: var(--text-tertiary);} .c634,a.c634{flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 0 2px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; cursor: pointer;} .c635,a.c635{display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 19px; font-weight: 600;} .c636,a.c636{font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums;} .c637,a.c637{width: 100%; min-height: 112px; box-sizing: border-box; margin: 0; padding: 14px 16px; resize: none; border-radius: 16px; border: 1px solid var(--divider-strong); background: var(--bg-canvas); color: var(--text-primary); font: inherit; font-size: 17px; line-height: 23px;} .c638,a.c638{box-sizing: border-box; padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; border-radius: 16px; background: color-mix(in srgb, var(--feedback-error) 11%, transparent); font-size: 15px; line-height: 21px;} .c639,a.c639{border-radius: 18px; background: var(--bg-canvas);} .c640,a.c640{min-height: 56px; box-sizing: border-box; padding: 10px 6px 10px 14px; display: flex; align-items: center; gap: 12px;} .c641,a.c641{font-size: 13px; line-height: 17px; color: var(--text-secondary);} .c642,a.c642{font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere;} .c643,a.c643{flex-shrink: 0; min-height: 44px; margin: 0; padding: 0 10px; border: 0; background: transparent; color: var(--text-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;} .c644,a.c644{display: flex; flex-direction: column; gap: 14px;} .c645,a.c645{ border: 1.5px dashed var(--divider-strong);} .c646,a.c646{width: 300px; max-width: 100%; height: 65px; box-sizing: border-box; padding: 0 14px; display: flex; align-items: center; gap: 12px; border-radius: 10px; background: var(--bg-canvas); color: var(--text-secondary); font-size: 13px; line-height: 17px;} .c647,a.c647{font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;} .c648,a.c648{height: 10px; border-radius: 999px; background: var(--bg-surface-subtle); overflow: hidden;} .c649,a.c649{ background-color: var(--action-accent);} .c650,a.c650{ background-color: var(--feedback-error);} .c651,a.c651{display: block; height: 100%; border-radius: 999px;} .c652,a.c652{font-size: 14px; line-height: 19px; color: var(--text-secondary); font-variant-numeric: tabular-nums;} .c653,a.c653{display: flex; flex-direction: column; border-radius: 18px; background: var(--bg-canvas);} .c654,a.c654{position: relative; min-height: 56px; box-sizing: border-box; padding: 8px 8px 8px 10px; display: flex; align-items: center; gap: 12px;} .c655,a.c655{flex-shrink: 0; width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--selection-fill); color: var(--icon-accent);} .c656,a.c656{width: 100%; height: 100%; object-fit: cover;} .c657,a.c657{font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .c658,a.c658{font-size: 13px; line-height: 17px; font-variant-numeric: tabular-nums;} .c659,a.c659{flex-shrink: 0; width: 26px; height: 26px; margin-right: 6px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--feedback-success); color: var(--bg-surface);} .c660,a.c660{flex-shrink: 0; margin-right: 7px; color: var(--action-accent);} .c661,a.c661{flex-shrink: 0; margin-right: 7px; color: var(--feedback-error);} .c662,a.c662{position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 999px; background: var(--divider-default);} .c663,a.c663{display: block; height: 100%; border-radius: 999px; background: var(--action-accent);} .c664,a.c664{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px;} .c665,a.c665{display: flex; gap: 14px; font-size: 16px; line-height: 1.45; color: var(--text-secondary);} .c666,a.c666{flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 13px; font-weight: 600;} .c667,a.c667{color: var(--text-primary); font-weight: 600;} .c668,a.c668{margin: 0; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c669,a.c669{width: 300px; max-width: 100%; height: 65px; box-sizing: border-box; padding: 0 14px; display: flex; align-items: center; gap: 12px; border-radius: 10px; border: 1.5px dashed var(--divider-strong); background: var(--bg-canvas); color: var(--text-secondary); font-size: 13px; line-height: 17px;} .c670,a.c670{box-sizing: border-box; padding: 14px; display: flex; gap: 12px; border-radius: 16px; background: var(--bg-canvas); font-size: 14px; line-height: 1.45; color: var(--text-secondary);} .c671,a.c671{flex-shrink: 0; margin-top: 1px; color: var(--icon-secondary);} .c672,a.c672{box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 18px; background: var(--bg-canvas);} .c673,a.c673{height: 32px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--divider-default); font-size: 14px; line-height: 18px; font-weight: 500;} .c674,a.c674{font-size: 14px; line-height: 1.45; color: var(--text-secondary);} .c675,a.c675{margin: 0; display: flex; flex-direction: column; gap: 12px;} .c676,a.c676{display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c677,a.c677{flex-shrink: 0; box-sizing: border-box; padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--divider-default); background: var(--bg-surface);} .c678,a.c678{ opacity: 0.4;} .c679,a.c679{width: 100%; height: 56px; box-sizing: border-box; margin: 0; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.006em; cursor: pointer;} .c680,a.c680{width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; cursor: pointer;} .c681,a.c681{ background: var(--bg-canvas); color: var(--text-primary); font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c682,a.c682{max-width: 1240px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;} .c683,a.c683{height: 30px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--bg-surface-subtle); font-size: 13px; line-height: 17px; font-weight: 600; color: var(--text-secondary);} .c684,a.c684{max-width: 1240px; margin: 0 auto; padding: 8px 20px 0;} .c685,a.c685{margin: 0; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em;} .c686,a.c686{position: relative; width: 100%; aspect-ratio: 9 / 16; margin: 6px 0 0; overflow: hidden; border-radius: 24px; background: #0D0E11; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);} .c687,a.c687{display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer;} .c688,a.c688{position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: 0; padding: 0; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(247, 246, 242, 0.92); color: #0B0C0E; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); cursor: pointer;} .c689,a.c689{position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;} .c690,a.c690{height: 28px; box-sizing: border-box; padding: 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #F7F6F2; font-size: 12px; line-height: 16px;} .c691,a.c691{height: 28px; box-sizing: border-box; padding: 0 10px; display: flex; align-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #F7F6F2; font-size: 12px; line-height: 16px; font-weight: 600;} .c692,a.c692{height: 56px; box-sizing: border-box; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font-size: 17px; line-height: 22px; font-weight: 600; text-decoration: none;} .c693,a.c693{display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px;} .c694,a.c694{box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; gap: 14px; border-radius: 24px; background: var(--bg-surface); border: 1px solid var(--divider-default);} .c695,a.c695{box-sizing: border-box; min-height: 56px; padding: 6px 6px 6px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 16px; background: var(--bg-canvas);} .c696,a.c696{font-size: 18px; line-height: 23px; font-weight: 600;} .c697,a.c697{min-height: 44px; margin: 0; padding: 0 16px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;} .c698,a.c698{position: relative; overflow: hidden; box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; gap: 14px; border-radius: 24px; color: var(--text-primary);} .c699,a.c699{position: absolute; right: -40%; top: -60%; width: 100%; aspect-ratio: 1; border-radius: 999px; background: radial-gradient(closest-side, rgba(0, 96, 255, 0.32), rgba(0, 96, 255, 0));} .c700,a.c700{position: relative; align-self: flex-start; height: 30px; box-sizing: border-box; padding: 0 12px 0 9px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(0, 96, 255, 0.18); border: 1px solid rgba(77, 143, 255, 0.45); font-size: 13px; line-height: 17px; font-weight: 600;} .c701,a.c701{width: 35.6px;} .c702,a.c702{position: relative; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.015em;} .c703,a.c703{position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;} .c704,a.c704{display: flex; gap: 10px; font-size: 15px; line-height: 1.42; color: var(--text-secondary);} .c705,a.c705{flex-shrink: 0; margin-top: 1px; color: var(--icon-accent);} .c706,a.c706{margin: 0; box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; gap: 22px; border-radius: 24px; background: var(--bg-surface); border: 1px solid var(--divider-default);} .c707,a.c707{display: flex; flex-direction: column; gap: 4px;} .c708,a.c708{font-size: 15px; line-height: 1.45; color: var(--text-secondary);} .c709,a.c709{display: flex; gap: 6px;} .c710,a.c710{ color: var(--action-accent);} .c711,a.c711{ color: var(--icon-secondary);} .c712,a.c712{flex: 1 1 0; min-width: 0; height: 52px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: var(--bg-surface-subtle); cursor: pointer;} .c713,a.c713{flex: 1 1 0; min-width: 0; min-height: 40px; margin: 0; padding: 0 4px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; cursor: pointer;} .c714,a.c714{position: absolute; left: 16px; top: 0; height: 56px; display: flex; align-items: center; font-size: 17px; font-weight: 600; color: var(--text-secondary);} .c715,a.c715{ padding: 0 16px 0 34px;} .c716,a.c716{ padding: 0 16px 0 46px;} .c717,a.c717{width: 100%; height: 56px; box-sizing: border-box; margin: 0; border-radius: 16px; border: 1px solid var(--divider-strong); background: var(--bg-canvas); color: var(--text-primary); font: inherit; font-size: 17px; line-height: 22px; font-variant-numeric: tabular-nums;} .c718,a.c718{width: 100%; min-height: 112px; box-sizing: border-box; margin: 0; padding: 14px 16px; resize: vertical; border-radius: 16px; border: 1px solid var(--divider-strong); background: var(--bg-canvas); color: var(--text-primary); font: inherit; font-size: 17px; line-height: 23px;} .c719,a.c719{width: 100%; height: 56px; margin: 0; padding: 0 22px; border: 0; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font: inherit; font-size: 17px; line-height: 22px; font-weight: 600; cursor: pointer;} .c720,a.c720{flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--feedback-success); color: var(--bg-surface);} .c721,a.c721{border-radius: 16px; background: var(--bg-canvas);} .c722,a.c722{min-height: 48px; box-sizing: border-box; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 20px;} .c723,a.c723{font-weight: 600; text-align: right;} .c724,a.c724{align-self: flex-start; min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: transparent; color: var(--text-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;} .c725,a.c725{max-width: 560px; margin: 0 auto; padding: clamp(8px, 4vh, 48px) 0 8px; display: flex; flex-direction: column; gap: 16px;} .c726,a.c726{margin: -8px 0 0; font-size: clamp(34px, 3.8vw, 48px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;} .c727,a.c727{margin: 0; font-size: 17px; line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c728,a.c728{align-self: flex-start; min-height: 34px; box-sizing: border-box; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--selection-fill); font-size: 14px; line-height: 19px; font-weight: 600;} .c729,a.c729{width: 7px; height: 7px; border-radius: 999px; background: var(--action-accent);} .c730,a.c730{box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 6px; border-radius: 18px; background: var(--bg-surface); border: 1px solid var(--divider-default);} .c731,a.c731{font-size: 13px; line-height: 17px; font-weight: 600; color: var(--text-secondary);} .c732,a.c732{font-size: 16px; line-height: 1.45;} .c733,a.c733{box-sizing: border-box; padding: 18px; border-radius: 22px; background: var(--bg-surface); border: 1px solid var(--divider-default);} .c734,a.c734{position: relative; padding: 0 0 20px 42px; font-size: 16px; line-height: 22px;} .c735,a.c735{ display: block;} .c736,a.c736{ background: var(--divider-default);} .c737,a.c737{position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px;} .c738,a.c738{position: absolute; left: 0; top: 0; width: 28px; height: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--bg-surface);} .c739,a.c739{width: 10px; height: 10px; border-radius: 999px; background: var(--action-accent);} .c740,a.c740{display: block; font-weight: 600;} .c741,a.c741{display: block; margin-top: 2px; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c742,a.c742{ border: 2px solid var(--action-accent);} .c743,a.c743{margin-top: 2px; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--divider-default);} .c744,a.c744{height: 30px; box-sizing: border-box; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; line-height: 17px; font-weight: 600;} .c745,a.c745{ color: #FFFFFF;} .c746,a.c746{height: 56px; box-sizing: border-box; padding: 0 22px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font-size: 17px; line-height: 22px; font-weight: 600; text-decoration: none;} .c747,a.c747{min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text-primary); font-size: 16px; line-height: 20px; font-weight: 600; text-decoration: none;} .c748,a.c748{margin: 4px 0 0; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c749,a.c749{max-width: 1240px; margin: 40px auto 0; padding: 22px 20px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--divider-default); font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c750,a.c750{padding: 12px 0;} .c751,a.c751{color: var(--text-secondary); text-decoration: none;} .c752,a.c752{min-height: 100vh;} .c753,a.c753{ box-sizing: border-box; display: flex; flex-direction: column; background: var(--bg-canvas); color: var(--text-primary); font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;} .c754,a.c754{width: 100%; max-width: 1280px; box-sizing: border-box; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;} .c755,a.c755{padding: 12px 0; color: var(--text-secondary); font-size: 15px; line-height: 20px; font-weight: 500; text-decoration: none;} .c756,a.c756{flex: 1 0 auto; width: 100%; max-width: 560px; box-sizing: border-box; margin: 0 auto; padding: clamp(32px, 8vh, 96px) 20px 48px; display: flex; flex-direction: column; align-items: flex-start;} .c757,a.c757{ background: color-mix(in srgb, var(--feedback-error) 14%, transparent);} .c758,a.c758{ color: var(--bg-surface);} .c759,a.c759{width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 999px;} .c760,a.c760{margin: 24px 0 0; font-size: clamp(36px, 4.2vw, 52px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;} .c761,a.c761{margin: 16px 0 0; font-size: 18px; line-height: 1.45; color: var(--text-secondary); text-wrap: pretty;} .c762,a.c762{margin: 28px 0 0; padding: 0; width: 100%; list-style: none; display: flex; flex-direction: column;} .c763,a.c763{position: relative; padding: 0 0 22px 44px; font-size: 16px; line-height: 22px;} .c764,a.c764{margin-top: 20px; min-width: min(100%, 260px); height: 56px; box-sizing: border-box; padding: 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--action-primary-fill); color: var(--action-primary-text); font-size: 16px; line-height: 20px; font-weight: 600; text-decoration: none;} .c765,a.c765{margin: 20px 0 0; font-size: 14px; line-height: 19px; color: var(--text-secondary);} .c766,a.c766{width: 100%; max-width: 1240px; box-sizing: border-box; margin: 0 auto; padding: 24px 20px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--divider-default); font-size: 14px; line-height: 19px; color: var(--text-secondary);} /* Общие правила доступности и загрузки поверх точной геометрии канваса. @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.site */ @font-face{font-family:'Instrument Sans';src:url('/assets/fonts/InstrumentSans-VF.woff2') format('woff2');font-weight:400 700;font-display:swap} :root{color-scheme:light dark}body{background:var(--bg-canvas);color:var(--text-primary)} sn-if{display:contents}[hidden]{display:none!important} :focus-visible{outline:3px solid var(--text-accent);outline-offset:4px} input[type=range]:focus-visible{opacity:1!important;outline-offset:0} .sn-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} body.modal-open{overflow:hidden} button:disabled{opacity:.6;cursor:wait} [data-tone=error]{color:var(--feedback-error)}[data-tone=ok]{color:var(--feedback-success)} video{pointer-events:none}video[controls]{pointer-events:auto} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}} /* @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.site.free */ .free-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--overlay-scrim);backdrop-filter:blur(6px)} .free-overlay>#canvas-root{width:100%;height:100%}.free-overlay .fa{height:100%!important} .free-message{box-sizing:border-box;max-width:560px;margin:16px auto;padding:12px 16px;border-radius:12px;background:var(--bg-surface-subtle);color:var(--text-primary);font:500 15px/1.45 'Instrument Sans',sans-serif;overflow-wrap:anywhere} .free-retry{display:block;margin:16px auto;padding:12px 24px;border-radius:14px;background:var(--action-primary-fill);color:var(--action-primary-text);border:0;cursor:pointer} [data-slot=turnstile]{padding:0!important;border:0!important;min-height:65px} .fa [data-row] video{width:100%;height:100%;object-fit:cover}.fa [data-row]>div{min-width:0} @media(min-width:681px){.free-overlay>#canvas-root{width:560px;height:min(780px,calc(100dvh - 48px))}.free-overlay .fa{border-radius:28px}} @media(max-width:680px){.free-overlay>#canvas-root{height:100dvh}.fa-step{overflow-wrap:anywhere}} .fc{overflow-wrap:anywhere} /* @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.site */ dialog[data-canvas-dialog]{margin:0;border:0;width:100%;height:100%;max-width:none;max-height:none} dialog[data-canvas-dialog]:not([open]){display:none} dialog[data-canvas-dialog]::backdrop{background:transparent} /* Положение ползунка задают SVG-атрибуты; встроенных стилей нет. @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.site */ .sn-w-slider{position:relative;margin-top:18px;min-height:44px} .sn-w-slider>svg{display:block;width:100%;overflow:visible} .sn-w-slider>input{position:absolute;left:12.5714%;top:0;width:74.8571%;height:100%;margin:0;opacity:0;cursor:pointer;touch-action:pan-y} .sn-w-slider:focus-within{outline:3px solid var(--text-accent);outline-offset:4px;border-radius:12px} .sn-w-slider>input:focus-visible{opacity:0!important} .sn-w-end{fill:none;stroke:var(--text-tertiary);stroke-width:1.7} .sn-w-rest,.sn-w-fill{fill:none;stroke-linecap:round;stroke-linejoin:round} .sn-w-rest{stroke:var(--divider-default);stroke-width:4}.sn-w-fill{stroke:var(--action-accent)} [data-wild-dot]{fill:var(--divider-strong)}.sn-w-dot-passed{visibility:hidden} [data-wild-thumb]{filter:drop-shadow(0 2px 3px #0005)} .sn-w-round{fill:var(--bg-surface);stroke:var(--divider-strong)} .sn-w-back,.sn-w-front,.sn-w-hole,.sn-w-rays,.sn-w-spark{display:none} [data-level="2"] .sn-w-round{stroke:var(--action-accent);stroke-width:2.6} [data-level="3"] .sn-w-round,[data-level="4"] .sn-w-round{fill:var(--action-accent);stroke:none} [data-level="3"] .sn-w-hole,[data-level="4"] .sn-w-hole,[data-level="5"] .sn-w-hole{display:block;fill:var(--bg-surface)} [data-level="4"] .sn-w-rays{display:block;fill:none;stroke:var(--action-accent);stroke-width:2.2;stroke-linecap:round} [data-level="5"] .sn-w-round{display:none} [data-level="5"] .sn-w-back{display:block;fill:var(--bg-canvas);stroke:var(--action-accent);stroke-width:1.6} [data-level="5"] .sn-w-front{display:block;fill:var(--action-accent)} [data-level="5"] .sn-w-spark{display:block;fill:var(--spark);stroke:var(--text-primary);stroke-width:1.2} .sn-w-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .16s ease-out} .sn-w-video.sn-w-active{opacity:1} @media(prefers-reduced-motion:reduce){.sn-w-video{transition:none}} /* Compact home header retains every social link at 320px. @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.site */ @media(max-width:360px){body[data-page=Main] header{padding-left:12px;padding-right:12px;gap:8px}body[data-page=Main] header>a{width:108px;flex-shrink:0}body[data-page=Main] header>a>div{width:108px}body[data-page=Main] header>a svg{width:108px;height:auto}body[data-page=Main] header .sn-nav{gap:8px}body[data-page=Main] header .sn-nav nav{font-size:14px}}