:root{color-scheme:dark;--bg:#090b0d;--surface:#0d1013;--line:rgba(192,208,224,.10);--text:#e8eaed;--muted:#90959d;--faint:#68717b;--blue:#aec5da;--font:'DM Sans',Arial,sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}a{color:inherit;text-decoration:none}button,select,input{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:5px}button{color:inherit}::selection{background:#324657;color:#fff}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-weight:400;letter-spacing:-.052em;line-height:1.08}h2{font-size:clamp(32px,3.7vw,50px)}p{color:var(--muted)}.site-shell{max-width:1440px;margin:auto;padding:0 64px}.site-header{height:112px;display:flex;align-items:center;gap:30px;border-bottom:1px solid rgba(255,255,255,.025);position:relative;z-index:5}.wordmark{font-weight:700;font-size:1.0625rem;letter-spacing:.19em;display:inline-flex;align-items:center;gap:9px}.brand-mark{width:5px;height:5px;background:#a4b8cb;margin-top:1px}.desktop-nav{display:flex;gap:25px;margin:auto;font-size:0.8125rem;color:#a0a3a8;align-self:stretch;align-items:center}.desktop-nav a{height:100%;display:flex;align-items:center;position:relative;transition:color .2s}.desktop-nav a:hover,.desktop-nav a[aria-current]{color:#f0f3f6}.desktop-nav a[aria-current]:after{content:'';position:absolute;bottom:19px;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,#afc5d5,transparent);box-shadow:0 6px 20px #6d98bb}.about-link{font-size:0.8125rem;border:1px solid #2c3035;border-radius:5px;padding:9px 16px;display:flex;gap:25px;transition:background .2s}.about-link:hover{background:#15191e}.menu-toggle{display:none}.mobile-nav[hidden]{display:none}.hero{position:relative;min-height:650px;display:flex;align-items:center;padding:64px 0 96px}.hero-copy{position:relative;z-index:2;width:48%}.eyebrow{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.17em;color:#8b929b;margin-bottom:22px;font-weight:400}.hero h1{font-size:clamp(60px,6.5vw,88px);letter-spacing:-.065em;line-height:1.01;margin-bottom:28px}.hero h1>span{color:#82878f}.hero-copy>p:not(.eyebrow){max-width:385px;font-size:1rem;line-height:1.65}.hero-actions{display:flex;gap:12px;margin-top:32px}.button{border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:13px 18px;font-size:0.8125rem;transition:background .2s,transform .2s;border:1px solid #32363c;line-height:1.5}.button:hover{transform:translateY(-2px)}.primary{background:#e9ebed;color:#101317;border-color:#e9ebed}.primary:hover{background:#fff}.secondary{background:transparent}.secondary:hover{background:#15191e}.scroll-cue{font-family:var(--mono);font-size:0.625rem;letter-spacing:.13em;color:#777f88;display:flex;align-items:center;gap:25px;margin-top:57px;width:max-content}.scroll-cue span:last-child{font-size:1rem}.flow-art{position:absolute;width:66%;right:-28px;top:70px;bottom:40px;pointer-events:none}.flow-art svg{width:100%;height:100%;overflow:visible}.art-key{position:absolute;right:35px;top:10px;color:#68727c;font-family:var(--mono);font-size:0.5625rem;letter-spacing:.11em;line-height:1.8}.art-caption{position:absolute;right:25px;bottom:50px;color:#78828e;font-size:0.75rem;line-height:1.5}.art-index{position:absolute;right:0;top:38%;font-family:var(--mono);font-size:0.625rem;color:#9fa9b2}.art-index i{display:block;height:100px;width:1px;background:linear-gradient(#8b98a8,#29313b);margin:13px auto}.manifesto-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:0.6875rem;color:#848d97;font-family:var(--mono);letter-spacing:.07em}.manifesto-strip span:nth-child(2){font:0.8125rem var(--font);letter-spacing:0}.manifesto-strip span:last-child{color:#58616b}.home-section{display:grid;grid-template-columns:35% 60%;gap:5%;align-items:center;min-height:425px;padding:60px 0;border-bottom:1px solid var(--line)}.section-copy{max-width:320px}.section-copy h2{margin-bottom:23px}.section-copy>p:not(.eyebrow){font-size:0.9375rem;line-height:1.7;max-width:290px}.text-link{display:inline-flex;gap:23px;align-items:center;font-size:0.8125rem;margin-top:26px}.text-link span{font-size:1.375rem;color:#a8adb4;transition:transform .2s}.text-link:hover span{transform:translateX(5px)}.section-visual{min-width:0}.panel{border:1px solid #242a31;border-radius:7px;background:linear-gradient(130deg,rgba(21,27,33,.35),rgba(9,11,13,.25));overflow:hidden;box-shadow:0 15px 60px #00000012}.panel-head{min-height:49px;display:flex;justify-content:space-between;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding:0 22px;font-size:0.8125rem}.file-name{font-family:var(--mono);font-size:0.6875rem;color:#b9bec4}.file-icon{color:#657381;margin-right:9px}.code-tabs{display:flex;gap:22px;height:49px}.code-tabs button{background:none;border:0;position:relative;font-size:0.6875rem;color:#78828d;padding:0}.code-tabs button[aria-selected=true]{color:#b2c9de}.code-tabs button[aria-selected=true]:after{content:'';height:1px;position:absolute;left:0;right:0;bottom:0;background:#9bb8d0}.code-lines{padding:20px 21px;font-family:var(--mono);font-size:0.6875rem;line-height:1.8;overflow-x:auto;height:292px}.code-lines>div{display:flex;white-space:pre}.code-lines i{width:34px;flex-shrink:0;font-size:0.625rem;font-style:normal;color:#56616b;user-select:none}.code-lines code{font:inherit;color:#afb8c4}.code-lines b{font-weight:400;color:#b497d4}.code-lines .function{color:#8faac9}.code-lines .comment{color:#75818a}.code-lines .string{color:#99b0a3}.code-footer{border-top:1px solid var(--line);padding:10px 20px;display:flex;justify-content:space-between;color:#77838e;font-size:0.625rem;gap:10px}.tiny-dot{display:inline-block;border:1px solid #9ab5a9;border-radius:50%;width:6px;height:6px;margin-right:6px}.code-footer>span:last-child{font-family:var(--mono);font-size:0.5625rem;letter-spacing:.03em}.code-state{height:292px;padding:34px}.code-state h3{font-size:1.6875rem;margin-bottom:14px}.code-state p:not(.eyebrow){font-size:0.875rem;max-width:400px}.code-state .micro{display:block;margin-top:22px}.micro{font-family:var(--mono);font-size:0.625rem;letter-spacing:.07em;color:#81909e}.demo-tag{border:1px solid #39434c;border-radius:3px;padding:3px 7px;font:0.5625rem var(--mono);letter-spacing:.06em;color:#a6b2bf;white-space:nowrap}.equity-chart{padding:24px 22px 12px}.equity-chart svg{width:100%;display:block;overflow:visible}.chart-axis{display:flex;justify-content:space-between;color:#78828c;font:0.625rem var(--mono);margin:2px 35px 4px 0}.chart-axis span:nth-child(2){font-size:0.5rem;letter-spacing:.11em}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding:20px 0}.stats>div{padding:0 22px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats strong{font-size:1.5rem;font-weight:450;letter-spacing:-.03em;line-height:1.25;display:block}.stats span{font-size:0.625rem;display:block;color:#85909a;margin-top:6px}.research-art{height:310px;position:relative;margin:0 15px}.orbit{border:1px solid rgba(127,153,180,.1);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg)}.orbit-1{width:230px;height:160px}.orbit-2{width:350px;height:235px}.orbit-3{width:460px;height:280px}.research-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:95px;height:95px;border:1px solid #445261;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#1b242c66,#0d1116);box-shadow:0 0 45px #6684a21a}.research-core>span{font-size:2.25rem;line-height:1;color:#bed0e2}.research-core small{font:0.5rem var(--mono);color:#899baa;letter-spacing:.15em;margin-top:8px}.orbit-label{position:absolute;border:1px solid #28313a;border-radius:4px;padding:5px 10px;font-size:0.6875rem;color:#b2bac3;background:#0b0e11}.ol-1{top:3%;left:42%}.ol-2{top:29%;left:0}.ol-3{top:30%;right:0}.ol-4{bottom:11%;left:7%}.ol-5{bottom:10%;right:1%}.orbit-point{position:absolute;width:5px;height:5px;background:#bfdcf2;border-radius:50%;box-shadow:0 0 11px #a8d7ff70}.op-1{top:15%;right:30%}.op-2{bottom:21%;left:54%}.op-3{bottom:30%;left:18%;width:3px;height:3px}.books-section{min-height:440px}.book-stage{position:relative;display:flex;justify-content:center;align-items:center;height:355px;perspective:1000px}.book-cover{width:250px;height:325px;background:linear-gradient(115deg,#252d34,#11171c 12%,#10151a 65%,#0b0f12);border:1px solid #52606a;border-left:4px solid #929da5;transform:rotateY(-18deg) rotateZ(-2deg);box-shadow:25px 20px 35px #0008,-4px 0 8px #cad6e31c;position:relative;padding:23px 24px;border-radius:3px 5px 5px 3px}.book-top{font:0.4375rem var(--mono);letter-spacing:.1em;color:#93a1ac;display:flex;justify-content:space-between}.book-title{font-size:2.8125rem;letter-spacing:-.04em;line-height:1;margin-top:27px}.book-title em{font-style:normal;color:#8296a6}.book-rule{height:1px;background:#4d5d6b66;width:40px;margin:21px 0 13px}.book-cover p{font:0.5625rem/1.6 var(--mono);color:#93a1ad}.book-bottom{font:0.5rem var(--mono);letter-spacing:.16em;display:flex;justify-content:space-between;position:absolute;bottom:19px;left:24px;right:21px}.book-bottom span{font-size:0.375rem;color:#708290;letter-spacing:.03em}.book-spine{height:277px;width:37px;border:1px solid #293640;color:#72818c;writing-mode:vertical-rl;transform:rotateZ(-4deg);font:0.5625rem var(--mono);letter-spacing:.19em;padding:23px 11px;position:absolute;left:calc(50% - 154px);background:#11171a}.book-side-note{position:absolute;right:-9px;writing-mode:vertical-rl;font:0.5rem var(--mono);letter-spacing:.12em;color:#596773}.tools-panel{padding-bottom:10px}.tool-flow{padding:5px 22px}.tool-flow>div{display:flex;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.tool-flow>div:last-child{border:0}.tool-step{font:0.625rem var(--mono);color:#718293}.tool-flow h4{font-size:0.875rem;font-weight:450}.tool-flow p{font-size:0.75rem;color:#7e8a95;margin-top:3px}.tool-symbol{margin-left:auto;font-size:1.375rem;color:#617b90}.video-band{padding:45px 0;display:flex;align-items:center;justify-content:space-between;gap:40px;border-bottom:1px solid var(--line)}.video-band h2{font-size:2.1875rem}.video-band .eyebrow{margin-bottom:13px}.video-band p{max-width:255px;font-size:0.875rem}.circle-link{border:1px solid #3c4854;border-radius:50%;width:65px;height:65px;display:grid;place-items:center;font-size:1.5625rem;transition:background .2s}.circle-link:hover{background:#1b2730}.about-section{padding:65px 0;display:grid;grid-template-columns:40% 60%;border-bottom:1px solid var(--line)}.quote{margin:auto;position:relative}.quote-mark{font-size:7.5rem;position:absolute;top:-52px;left:-40px;font-family:Georgia;color:#273540}.quote blockquote{font-size:2.25rem;line-height:1.18;letter-spacing:-.035em;position:relative;margin:0 0 25px}.quote blockquote em{font-style:normal;color:#8e9cab}.quote .eyebrow{font-size:0.625rem;margin:0}.footer-top{padding:34px 0;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.footer-top .wordmark{font-size:0.9375rem}.footer-motto{font-size:0.6875rem;color:#75818b}.footer-top>a:last-child{margin-left:auto;font-size:0.6875rem;color:#8b959e}.footer-bottom{display:flex;justify-content:space-between;font:0.5625rem var(--mono);letter-spacing:.025em;color:#6d7883;padding:23px 0 30px}.skip-link{position:fixed;top:-100px;left:20px;background:white;color:black;padding:10px;z-index:100}.skip-link:focus{top:10px}.page-intro{padding:70px 0 50px;max-width:760px}.page-intro h1{font-size:clamp(44px,6vw,70px);margin-bottom:23px}.page-intro>p:last-child{font-size:1.0625rem;max-width:570px}dialog{background:#10151a;border:1px solid #344453;border-radius:10px;color:var(--text);width:min(560px,calc(100% - 32px));padding:38px;box-shadow:0 40px 100px #0008}dialog::backdrop{background:#030608cc;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:1.6875rem;color:#a0aeba}#dialog-body h2{font-size:2.1875rem;margin-bottom:20px}#dialog-body p{font-size:0.9375rem}main:focus{outline:none}
.approach-feature{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:65px;padding:25px 0 65px;border-bottom:1px solid var(--line)}.approach-feature h2{font-size:2.3125rem;margin-bottom:23px}.approach-feature>div>p:not(.eyebrow){font-size:0.9375rem;max-width:400px}.pill-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:25px}.pill-row span{font-size:0.625rem;padding:5px 10px;border:1px solid #29343e;border-radius:3px;color:#9eaebc}.principles{display:grid;grid-template-columns:repeat(4,1fr);padding:55px 0;gap:30px;border-bottom:1px solid var(--line)}.principle h3{font-size:1.6875rem;margin:20px 0 15px}.principle p{font-size:0.875rem;line-height:1.75}.closing-note{padding:70px 0}.closing-note h2{font-size:2.8125rem}.closing-note h2 span{color:#7f8c98}.demo-banner{border:1px solid #2e3a46;border-left:2px solid #9fb2c3;background:#11181e;display:flex;gap:17px;align-items:center;padding:16px 19px;margin-bottom:26px;flex-wrap:wrap}.demo-banner p{font-size:0.75rem;color:#a9b6c3;flex:1}.connection-status{font:0.625rem var(--mono);color:#8796a4}.journal-performance-top{padding:29px 28px 3px;display:flex;align-items:center;justify-content:space-between}.journal-performance-top .eyebrow{margin-bottom:14px}.journal-performance-top h2{font-size:2.6875rem}.journal-performance-top p{margin-top:8px;font-size:0.8125rem}.journal-performance-top p span{color:#7c8b97;margin-left:9px;font-size:0.6875rem}.positive{color:#a5c7b5!important}.negative{color:#cd9995!important}.period-control{display:flex;border:1px solid #303a44;border-radius:4px;padding:3px;gap:3px}.period-control button{background:none;border:0;border-radius:3px;padding:7px 16px;font:0.6875rem var(--mono);color:#899baa}.period-control button[aria-pressed=true]{background:#26323d;color:#e4edf4}.journal-performance .equity-chart{padding:28px 29px 18px}.journal-performance .stats>div{padding-left:29px}.journal-performance .stats strong{font-size:1.875rem}.journal-performance .stats span{font-size:0.75rem}.trades-head{display:flex;align-items:center;justify-content:space-between;margin:45px 0 20px;gap:20px}.trades-head h2{font-size:1.75rem}.trades-head p{font-size:0.75rem;margin-top:7px}.trade-controls{display:flex;gap:13px;align-items:flex-end}.symbol-label{font-size:0.625rem;color:#8c9aa7;display:flex;flex-direction:column;gap:5px}select{border:1px solid #303c48;border-radius:4px;background:#11171d;padding:10px 29px 10px 13px;font-size:0.75rem;color:#c2ced9}.trade-controls .button{padding:10px 15px;font-size:0.75rem}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-weight:400;font-size:0.625rem;color:#899aaa;padding:15px 20px;border-bottom:1px solid var(--line);background:#11181d}td{font-size:0.75rem;padding:15px 20px;border-bottom:1px solid var(--line);color:#a9b7c3}td strong{font-size:0.8125rem;color:#d8e2ea;font-weight:500}td small{display:block;font-size:0.5625rem;color:#677b8c;margin-top:4px}td.numeric{font-family:var(--mono)}.numeric{text-align:right}.direction{font-size:0.6875rem;color:#b2c0cc}.row-detail{border:1px solid #293b49;border-radius:4px;background:transparent;width:31px;height:31px;font-size:1rem}.row-detail:hover{background:#253340}tbody tr:hover{background:#131c2366}.table-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;font-size:0.625rem;color:#8093a3}.table-footer>div{display:flex;gap:15px;align-items:center}.table-footer button{background:#151e25;border:1px solid #293d4c;border-radius:4px;width:29px;height:29px}.data-footnote{font-size:0.625rem;color:#758592;margin-top:17px;line-height:1.8;max-width:800px}.journal-method{display:grid;grid-template-columns:1fr 1.8fr;gap:50px;margin:65px 0}.journal-method h3{font-size:1.5625rem}details{border-bottom:1px solid var(--line);padding:0 0 15px;margin-bottom:17px}summary{cursor:pointer;color:#bcc8d3;font-size:0.875rem}details p{font-size:0.8125rem;margin-top:15px;line-height:1.8}.trade-result{font-size:2.3125rem;letter-spacing:-.05em;margin:17px 0 22px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-grid dt{font-size:0.625rem;color:#7f94a6}.detail-grid dd{font-size:0.75rem;margin:4px 0 0;color:#c3d2df}.dialog-note{border-top:1px solid var(--line);margin-top:25px;padding-top:20px;font-size:0.6875rem!important}.muted{color:#8393a0}.collection-empty{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:70px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:45px 0 65px;min-height:435px}.empty-copy h2{font-size:2.4375rem;margin-bottom:23px}.empty-copy>p:not(.eyebrow){font-size:0.9375rem;max-width:370px}.availability{display:inline-block;color:#95a6b4;font:0.625rem var(--mono);border:1px solid #2b3b47;border-radius:4px;padding:8px 11px;margin-top:27px}.collection-bottom{display:flex;justify-content:space-between;align-items:center;padding:38px 0 60px}.collection-bottom>span{font-size:0.8125rem;color:#8595a3}.collection-bottom .text-link{margin:0}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.content-card{padding:27px;border:1px solid #2b3944;border-radius:5px;position:relative;background:linear-gradient(145deg,#15212a55,transparent)}.content-card h2{font-size:1.8125rem;margin:25px 0 18px}.content-card>p:not(.eyebrow){font-size:0.875rem}.card-number{font:0.625rem var(--mono);color:#647887;position:absolute;top:28px;right:25px}.text-button{background:none;padding:0;border:0;cursor:pointer}.video-preview{height:310px;background:radial-gradient(ellipse at bottom right,#253a4c70,transparent 70%),#0c1115;border:1px solid #2a3b48;border-radius:5px;position:relative;overflow:hidden;padding:28px}.video-graticule{position:absolute;inset:0;background-image:linear-gradient(#60788b0c 1px,transparent 1px),linear-gradient(90deg,#60788b0c 1px,transparent 1px);background-size:32px 32px}.video-overline{position:relative;font-size:0.5rem}.video-preview-title{font-size:2.5rem;line-height:1.13;letter-spacing:-.04em;margin-top:44px;position:relative}.video-preview-title em{color:#8ba2b6;font-style:normal}.video-play{position:absolute;right:32px;top:135px;width:50px;height:50px;border:1px solid #718b9e80;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;color:#b7cbdb}.video-preview-bottom{position:absolute;bottom:20px;left:28px;right:28px;display:flex;justify-content:space-between;font:0.4375rem var(--mono);letter-spacing:.1em;color:#778e9f}.video-embed{width:100%;aspect-ratio:16/9;border:0;margin-bottom:20px}.article-body p+p{margin-top:20px}.about-feature{display:grid;grid-template-columns:1fr 1.2fr;gap:100px;padding:25px 0 65px;align-items:center}.about-monogram{position:relative;min-height:380px;background:radial-gradient(ellipse at 50% 60%,#31425055,transparent 75%);border:1px solid #25333e;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11.25rem;line-height:1;letter-spacing:-.09em;color:#a5b9c8;font-weight:500}.about-monogram>span{font-size:2.5rem;font-weight:400;letter-spacing:-.04em;margin:70px 0 0 8px;color:#7a94a8}.about-monogram small{font:0.5625rem var(--mono);position:absolute;bottom:30px;letter-spacing:.12em;color:#728ea3}.about-story h2{font-size:2.5rem;margin-bottom:26px}.about-story>p:not(.eyebrow){font-size:0.9375rem;line-height:1.85;margin-top:20px}.about-destinations{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:45px 0 60px;border-top:1px solid var(--line)}.about-destinations a{position:relative}.about-destinations h3{font-size:1.5625rem;margin:15px 0 11px}.about-destinations p{font-size:0.75rem}.destination-arrow{position:absolute;right:10px;top:31px;color:#95aabd;font-size:1.375rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.approach-feature{gap:35px;grid-template-columns:1fr 1.15fr}.approach-feature h2{font-size:2rem}.principles{gap:22px}.principle p{font-size:0.75rem}.collection-empty{gap:35px}.empty-copy h2{font-size:2.0625rem}.about-feature{gap:50px}.about-monogram{min-height:340px;font-size:8.75rem}.video-preview-title{font-size:2.0625rem}.video-play{right:20px;width:43px;height:43px}.video-preview{padding:23px}.trade-controls{gap:8px}td,th{padding:14px}.connection-status{width:100%}}
@media(max-width:800px){.approach-feature{grid-template-columns:1fr;padding-top:0;gap:30px}.principles{grid-template-columns:1fr 1fr;gap:35px}.principle p{font-size:0.875rem}.collection-empty{grid-template-columns:1fr;gap:30px;padding:35px 0}.collection-empty>div:last-child{max-width:550px;width:100%;margin:auto}.empty-copy h2{font-size:2.25rem}.collection-bottom{gap:25px}.about-feature{gap:35px;grid-template-columns:1fr 1.25fr}.about-monogram{font-size:6.875rem;min-height:340px}.about-monogram>span{font-size:1.6875rem;margin-top:50px}.about-monogram small{font-size:0.375rem}.about-story h2{font-size:1.875rem}.about-story>p:not(.eyebrow){font-size:0.8125rem}.about-destinations{gap:18px}.about-destinations h3{font-size:1.3125rem}.destination-arrow{right:0}.trades-head{align-items:flex-start;flex-direction:column}.trade-controls{width:100%;justify-content:space-between}.journal-method{grid-template-columns:1fr;gap:25px}.journal-performance-top h2{font-size:2.375rem}.journal-performance .stats strong{font-size:1.6875rem}.journal-performance .stats span{font-size:0.625rem}.journal-performance .stats>div{padding-left:20px}.journal-performance-top .eyebrow{font-size:0.5625rem}.content-grid{grid-template-columns:1fr 1fr}.closing-note h2{font-size:2.375rem}}
@media(max-width:480px){.principles{gap:32px 22px;padding:38px 0}.principle h3{font-size:1.5rem}.principle p{font-size:0.75rem}.approach-feature h2{font-size:1.9375rem}.approach-feature>div>p:not(.eyebrow){font-size:0.875rem}.closing-note{padding:45px 0}.closing-note h2{font-size:2rem}.demo-banner{padding:15px;gap:11px}.demo-banner p{flex-basis:100%;font-size:0.6875rem}.connection-status{font-size:0.5625rem}.journal-performance-top{padding:22px 17px 0;flex-wrap:wrap;gap:20px}.journal-performance-top h2{font-size:2.3125rem}.journal-performance-top p span{font-size:0.5625rem}.period-control button{padding:6px 20px}.journal-performance .equity-chart{padding:22px 17px 12px}.journal-performance .stats>div{padding:0 10px}.journal-performance .stats strong{font-size:1.25rem}.journal-performance .stats span{font-size:0.5rem}.trade-controls .button{font-size:0.625rem}.symbol-label select{font-size:0.6875rem}.trade-controls{gap:6px}.trades-head{margin-top:32px}.table-footer{font-size:0.5625rem;padding:13px 12px}.table-footer>div{gap:8px}.data-footnote{font-size:0.5625rem}.journal-method{margin:40px 0}.collection-bottom{display:block;padding:30px 0 40px}.collection-bottom .text-link{display:flex;margin-top:12px}.collection-bottom>span{font-size:0.75rem}.empty-copy h2{font-size:2rem}.empty-copy>p:not(.eyebrow){font-size:0.875rem}.availability{font-size:0.5625rem}.video-preview{height:280px;padding:22px}.video-preview-title{font-size:2.1875rem}.video-play{width:43px;height:43px;right:22px;top:125px}.video-preview-bottom{left:22px;right:22px;font-size:0.375rem}.about-feature{grid-template-columns:1fr;padding-top:0;gap:35px}.about-monogram{min-height:280px;font-size:9.375rem}.about-monogram>span{font-size:2.3125rem}.about-monogram small{font-size:0.5rem}.about-story h2{font-size:2.1875rem}.about-story>p:not(.eyebrow){font-size:0.875rem}.about-destinations{grid-template-columns:1fr;padding:0 0 30px;gap:0}.about-destinations a{padding:27px 0;border-bottom:1px solid var(--line)}.about-destinations h3{font-size:1.6875rem;margin-top:10px}.about-destinations p{font-size:0.8125rem}.destination-arrow{top:60px}.content-grid{grid-template-columns:1fr}.detail-grid{gap:17px 12px}.detail-grid dd{font-size:0.6875rem}}
@media(min-width:1441px){.hero{min-height:720px}.hero h1{font-size:5.875rem}.flow-art{top:45px}}
@media(max-width:1100px){.site-shell{padding:0 38px}.desktop-nav{gap:17px;font-size:0.75rem}.site-header{gap:20px}.hero{min-height:620px}.hero h1{font-size:4.5rem}.hero-actions{flex-wrap:wrap}.flow-art{right:-15px;width:63%}.hero-copy{width:51%}.art-caption{right:5px}.home-section{grid-template-columns:36% 59%}.stats>div{padding:0 13px}.stats strong{font-size:1.3125rem}.orbit-3{width:95%}.orbit-2{width:75%}.orbit-1{width:52%}.code-lines{font-size:0.625rem}.about-link{gap:12px;padding:8px 12px}.wordmark{font-size:0.9375rem}.art-key{right:10px}}
@media(max-width:800px){.site-shell{padding:0 25px}.site-header{height:85px}.desktop-nav,.about-link{display:none}.menu-toggle{display:flex;flex-direction:column;gap:6px;margin-left:auto;background:none;border:1px solid #2d363e;border-radius:4px;padding:13px 11px}.menu-toggle span{width:19px;height:1px;background:#ccd7e1}.mobile-nav{background:#0d1116;border:1px solid #26323d;padding:20px;position:absolute;left:25px;right:25px;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:6px}.mobile-nav a{padding:11px;font-size:0.875rem;color:#a2b0bc}.mobile-nav a[aria-current]{color:#fff}.hero{padding:48px 0 60px;min-height:600px}.hero h1{font-size:4rem}.hero-copy{width:65%}.hero-copy>p:not(.eyebrow){font-size:0.9375rem;max-width:330px}.flow-art{width:67%;right:-15px;top:80px;opacity:.65}.art-key{display:none}.art-caption{bottom:40px;font-size:0.625rem}.art-index{display:none}.hero-actions{gap:10px}.button{font-size:0.75rem;padding:12px 14px;gap:15px}.manifesto-strip span:nth-child(2){display:none}.home-section{grid-template-columns:1fr;gap:30px;padding:45px 0}.section-copy{max-width:none}.section-copy>p:not(.eyebrow){max-width:420px}.section-copy h2 br{display:none}.section-copy h2{font-size:2.375rem;margin-bottom:16px}.eyebrow{margin-bottom:15px}.text-link{margin-top:17px}.section-visual{max-width:620px;width:100%}.code-lines{font-size:0.75rem;height:300px}.stats strong{font-size:1.625rem}.stats>div{padding:0 22px}.research-art{height:320px}.orbit-3{width:90%}.orbit-2{width:68%}.orbit-1{width:47%}.book-stage{height:370px}.books-section .section-visual{background:radial-gradient(ellipse at center,#1a252d33,transparent 65%)}.video-band{gap:20px}.video-band h2{font-size:1.875rem}.video-band p{max-width:205px;font-size:0.8125rem}.about-section{gap:40px;grid-template-columns:1fr 1fr}.about-section h2{font-size:2.1875rem}.quote blockquote{font-size:1.75rem}.quote-mark{font-size:5.625rem;left:-20px;top:-40px}.footer-bottom{font-size:0.5rem}.page-intro{padding-top:50px}.page-intro h1{font-size:3.3125rem}}
@media(max-width:480px){.site-shell{padding:0 22px}.site-header{height:78px}.hero{display:block;min-height:740px;padding:40px 0 35px}.hero-copy{width:100%}.hero h1{font-size:3.8125rem}.hero-copy>p:not(.eyebrow){max-width:310px;font-size:0.875rem}.hero .eyebrow{font-size:0.5625rem;letter-spacing:.14em}.flow-art{width:108%;top:385px;bottom:0;right:-13px;height:310px;opacity:.8}.art-caption{bottom:20px;right:10px;font-size:0.5625rem}.hero-actions{gap:8px;margin-top:25px}.button{font-size:0.6875rem;padding:12px;gap:11px}.scroll-cue{margin-top:268px;font-size:0.5rem}.manifesto-strip{font-size:0.5rem;padding:14px 0}.home-section{padding:38px 0;gap:27px}.section-copy h2{font-size:2.125rem}.section-copy>p:not(.eyebrow){font-size:0.875rem}.eyebrow{font-size:0.625rem}.code-lines{font-size:0.5625rem;padding:15px 12px;height:250px}.code-lines i{width:26px;font-size:0.5rem}.code-tabs{gap:17px}.panel-head{padding:0 14px;font-size:0.75rem}.file-name{font-size:0.625rem}.code-tabs button{font-size:0.625rem}.code-footer{padding:10px 12px;font-size:0.5rem}.code-footer>span:last-child{font-size:0.4375rem}.code-state{padding:25px;height:250px}.code-state h3{font-size:1.5rem}.code-state p:not(.eyebrow){font-size:0.75rem}.code-state .micro{font-size:0.5rem}.equity-chart{padding:22px 14px 10px}.stats{padding:17px 0}.stats>div{padding:0 11px}.stats strong{font-size:1.3125rem}.stats span{font-size:0.5rem}.chart-axis{font-size:0.5rem;margin-right:25px}.chart-axis span:nth-child(2){font-size:0.375rem}.research-art{height:270px;margin:0}.orbit-label{font-size:0.5625rem;padding:4px 7px}.orbit-3{height:225px}.orbit-2{height:180px}.orbit-1{height:125px}.research-core{width:72px;height:72px}.research-core>span{font-size:1.75rem}.research-core small{font-size:0.375rem}.ol-1{top:6%;left:39%}.ol-2{left:0}.ol-4{left:0;bottom:11%}.ol-5{right:0;bottom:11%}.book-side-note{right:0;font-size:0.375rem}.book-stage{height:345px}.book-cover{width:225px;height:307px;padding:20px}.book-spine{left:calc(50% - 139px)}.book-title{font-size:2.625rem}.tool-flow{padding:5px 16px}.tool-flow>div{gap:14px}.tool-flow p{font-size:0.6875rem}.video-band{display:grid;grid-template-columns:1fr auto;gap:20px;padding:35px 0}.video-band p{grid-column:1;grid-row:2;max-width:270px}.video-band .circle-link{grid-column:2;grid-row:1/3;width:50px;height:50px}.about-section{grid-template-columns:1fr;padding:40px 0;gap:65px}.quote{margin:0 0 0 26px}.quote blockquote{font-size:2.125rem}.footer-top{gap:13px;padding:25px 0;flex-wrap:wrap}.footer-top .wordmark{font-size:0.8125rem}.footer-motto{font-size:0.5625rem}.footer-top>a:last-child{font-size:0.625rem}.footer-bottom span:nth-child(2){display:none}.page-intro h1{font-size:2.75rem}.page-intro>p:last-child{font-size:0.9375rem}.page-intro{padding:43px 0 34px}dialog{padding:30px 24px}}
.journal-overview{max-width:1060px;margin:0 auto;padding-bottom:45px}.journal-overview .page-intro{padding:48px 0 30px}.journal-overview .page-intro h1{font-size:3rem;margin-bottom:14px}.journal-overview .page-intro>p:last-child{font-size:0.9375rem}.account-identity{display:flex;align-items:center;gap:50px;padding:22px 0 27px;border-top:1px solid var(--line)}.account-identity>div{min-width:0}.account-identity .eyebrow{font-size:0.625rem;margin-bottom:7px}.account-identity h2{font-size:1.5625rem;letter-spacing:-.025em;overflow-wrap:anywhere}.account-identity>div>p:not(.eyebrow){font-size:1.0625rem;color:#b5c0cb;overflow-wrap:anywhere}.account-identity>.demo-tag{margin-left:auto}.journal-demo-note{font-size:0.75rem;color:#8d9ca8;margin-top:12px}.video-library{padding-bottom:55px}.featured-video{border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-bottom:25px;background:var(--surface)}.featured-player{display:block;width:100%;aspect-ratio:16/9;border:0;background:#060709}.video-caption{padding:27px 30px;display:flex;align-items:center;justify-content:space-between;gap:30px}.video-caption>div{min-width:0}.video-caption .eyebrow{margin-bottom:12px}.video-caption h2{font-size:1.8125rem;line-height:1.4;letter-spacing:0;text-align:start;overflow-wrap:anywhere}.video-caption .text-link{margin:0;white-space:nowrap}.video-caption p:not(.eyebrow){margin-top:12px}.table-scroll{position:relative}.section-copy{min-width:0}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stats>div{min-width:0}
@media(max-width:600px){.journal-overview .page-intro h1{font-size:2.375rem}.account-identity{gap:20px;flex-wrap:wrap}.account-identity h2{font-size:1.3125rem}.account-identity>div>p:not(.eyebrow){font-size:0.9375rem}.account-identity>.demo-tag{margin-left:0}.video-caption{padding:22px;display:block}.video-caption h2{font-size:1.5rem}.video-caption .text-link{margin-top:18px}}
@media(max-width:800px){.home-section{grid-template-columns:minmax(0,1fr)}.section-copy h2 br{display:initial}}
@media(max-width:480px){.hero h1{font-size:clamp(47px,15.6vw,61px)}}
@media(max-width:350px){.site-shell{padding:0 18px}.panel-head{padding:0 10px;gap:7px}.stats>div{padding:0 7px}.stats strong{font-size:1.125rem}.stats span{font-size:0.5rem}.code-tabs{gap:12px}.file-name{font-size:0.5625rem}.book-cover{width:205px}.book-spine{left:calc(50% - 125px)}.table-footer{flex-wrap:wrap}.trade-controls{flex-wrap:wrap}}
.section-copy>p:not(.eyebrow),.about-story>p:not(.eyebrow),.empty-copy>p:not(.eyebrow){font-size:1rem;line-height:1.75}.section-copy>p:not(.eyebrow){max-width:330px}.text-link{min-height:44px}.menu-toggle{min-width:44px;min-height:44px;justify-content:center}.code-tabs button,.period-control button{min-height:44px}.mobile-nav a[aria-current="page"]{background:#1b2732;border-radius:4px}.video-player-slot{aspect-ratio:16/9;background:#0c1116}.video-poster{position:relative;display:block;width:100%;height:100%;aspect-ratio:16/9;padding:0;border:0;overflow:hidden;background:#11171d;color:#fff;cursor:pointer}.video-poster img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.8);transition:filter .2s}.video-poster:hover img{filter:brightness(1)}.video-poster:focus-visible{outline:3px solid #d3eaff;outline-offset:-5px}.video-play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:1px solid #d9e7f3aa;border-radius:50%;background:#09131dcc;color:#fff;box-shadow:0 5px 25px #0005}.video-poster-label{position:absolute;left:20px;bottom:18px;padding:5px 9px;background:#09131dd9;color:#fff;font:0.6875rem var(--mono);letter-spacing:.12em}@media(max-width:480px){.video-play-badge{width:50px;height:50px}.video-poster-label{left:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.flow-art circle{display:none}}
:root { --motion-ease: cubic-bezier(.2,.75,.25,1); }
@keyframes section-arrive { from { opacity: .2; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.reveal-in { animation: section-arrive .7s var(--motion-ease) backwards; }
.hero-copy > :is(.eyebrow,h1,p,.hero-actions), .page-intro > * { animation: hero-arrive .65s var(--motion-ease) backwards; }
.hero-copy h1, .page-intro h1 { animation-delay: .07s; }
.hero-copy > p:not(.eyebrow), .page-intro > p:last-child { animation-delay: .14s; }
.hero-actions { animation-delay: .21s; }
.button, .about-link, .circle-link { transition: border-color .25s ease, background-color .25s ease, transform .25s var(--motion-ease), box-shadow .25s ease; }
.panel, .content-card { transition: border-color .3s ease; }
.desktop-nav a::before { content: ''; position: absolute; bottom: 19px; left: 15%; right: 15%; height: 1px; background: #afc5d5; transform: scaleX(0); transition: transform .25s var(--motion-ease); }
.desktop-nav a:hover::before, .desktop-nav a:focus-visible::before { transform: scaleX(1); }
.text-link { position: relative; width: fit-content; }
.text-link::after { content: ''; position: absolute; left: 0; bottom: 5px; width: calc(100% - 40px); height: 1px; background: #afcce3; scale: 0 1; transform-origin: left; transition: scale .25s ease; }
.text-link:hover::after, .text-link:focus-visible::after { scale: 1 1; }
.code-tabs button, .period-control button, .mobile-nav a { transition: color .2s ease, background-color .2s ease; }
.menu-toggle span { transition: transform .25s var(--motion-ease); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.panel:focus-within, .content-card:focus-within { border-color: #617b90; }
@media (hover:hover) and (pointer:fine) {
.button:hover, .about-link:hover { border-color: #a0b6c8; }
.button:hover, .about-link:hover, .circle-link:hover { transform: translateY(-3px); box-shadow: 0 6px 22px #a8c9e414; }
.circle-link:hover { background-color: #1d2a35; border-color: #a0b6c8; }
.panel:hover, .content-card:hover { border-color: #506578; }
.period-control button:hover, .mobile-nav a:hover { background-color: #273847; }
}
@keyframes star-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes star-breathe { 0%,100% { filter: drop-shadow(0 0 3px #91bddd44); } 50% { filter: drop-shadow(0 0 12px #b7ddfa9c); } }
.research-star { display: block; transform-origin: center; animation: star-turn 18s linear infinite, star-breathe 4s ease-in-out infinite; }
.research-art { isolation: isolate; background: none; border: 0; box-shadow: none; }
.research-art::before { content: ''; position: absolute; inset: -20px; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(220px circle at var(--light-x,50%) var(--light-y,50%),#82b7d54a,transparent 80%); mask-image: radial-gradient(ellipse closest-side at center,#000 25%,transparent 100%); transition: opacity .4s ease; }
.research-core { transition: border-color .4s ease, box-shadow .4s ease, background .4s ease, scale .4s var(--motion-ease), rotate .4s var(--motion-ease); }
.research-art .orbit { transition: border-color .4s ease, transform .6s var(--motion-ease); }
.research-art .orbit-label { transition: border-color .4s ease, color .4s ease; }
.research-art:focus-visible { outline: 2px solid #b9d8ef; outline-offset: 8px; }
.research-art:focus-visible::before { opacity: 1; }
.research-art:focus-visible .research-core { border-color: #b7d9f2; box-shadow: 0 0 65px #8ebce838, inset 0 0 18px #b8ddff15; }
@media (hover:hover) and (pointer:fine) {
.research-art:hover::before { opacity: 1; }
.research-art:hover .research-core { border-color: #c9e8ff; background: radial-gradient(#28475a88,#101921); box-shadow: 0 0 75px #8ebce852, inset 0 0 24px #b8ddff25; scale: 1.08; rotate: var(--tilt-y,0deg); }
.research-art:hover .orbit { border-color: #789eba88; transform: translate(-50%,-50%) rotate(calc(-12deg + var(--tilt-y,0deg))) scale(1.035); }
.research-art:hover .orbit-label { border-color: #698ba5; color: #e3f1fc; }
}
html.a11y-reduce-motion .site-shell *, html.a11y-reduce-motion .site-shell *::before, html.a11y-reduce-motion .site-shell *::after { animation: none !important; transition: none !important; translate: none !important; }
html.a11y-reduce-motion .research-art { transform: none !important; }
html.a11y-reduce-motion .research-core { scale: none !important; rotate: none !important; }
html.a11y-reduce-motion .research-art .orbit { transform: translate(-50%,-50%) rotate(-12deg) !important; }
html.a11y-reduce-motion .research-art::before { display: none; }
html.a11y-reduce-motion :is(.button,.about-link,.circle-link):hover { transform: none; }
@media (prefers-reduced-motion:reduce) {
.site-shell *, .site-shell *::before, .site-shell *::after { animation: none !important; transition: none !important; translate: none !important; }
.research-art { transform: none !important; }
.research-core { scale: none !important; rotate: none !important; }
.research-art .orbit { transform: translate(-50%,-50%) rotate(-12deg) !important; }
.research-art::before { display: none; }
:is(.button,.about-link,.circle-link):hover { transform: none; }
}
.off-screen, .off-screen *, .off-screen *::before, .off-screen *::after { animation-play-state: paused !important; }
.equity-chart[data-interactive] { position: relative; outline-offset: -5px; }
.equity-chart[data-interactive] > svg { cursor: crosshair; }
.equity-chart[data-interactive]:focus-visible { outline: 2px solid #bad9ef; border-radius: 6px; }
.chart-cursor { pointer-events: none; }
.chart-tooltip { position: absolute; z-index: 4; width: 190px; max-width: calc(100% - 16px); pointer-events: none; padding: 13px 15px; border: 1px solid #526c80; border-radius: 7px; background: #101b25f5; box-shadow: 0 8px 28px #0007; color: #e6f0f7; text-align: left; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip span, .chart-tooltip small { display: block; }
.tooltip-kicker { font: .625rem var(--mono); letter-spacing: .06em; color: #b4c6d5; }
.chart-tooltip > strong { display: block; font-size: 1.4rem; font-weight: 500; margin: 4px 0 0; line-height: 1.25; }
.tooltip-label { font-size: .6875rem; color: #b0bfcd; }
.tooltip-equity { display: flex !important; justify-content: space-between; gap: 12px; border-top: 1px solid #384b5b; padding-top: 8px; margin-top: 8px; font-size: .6875rem; }
.tooltip-equity b { font-weight: 500; }
.chart-tooltip small { color: #99acbc; font-size: .625rem; margin-top: 5px; }
.chart-interaction-hint { font-size: .6875rem; margin: 0 29px 16px; color: #96aaba; }
.a11y-high-contrast .chart-tooltip { background: #000; border-color: #fff; }
.a11y-large-text .chart-tooltip { width: 290px; }
.a11y-large-text .tooltip-equity { flex-wrap: wrap; }
.playlist-layout { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(300px,1fr); gap: 22px; align-items: start; }
.playlist-feature { margin: 0; min-width: 0; }
.playlist-feature .video-caption { display: block; padding: 24px; }
.playlist-feature .video-caption h2 { font-size: 1.6rem; }
.playlist-feature .video-caption .text-link { margin-top: 12px; }
.playlist-player-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid var(--line); gap: 15px; color: #92a8b9; font-size: .75rem; }
.playlist-player-footer > div { display: flex; gap: 8px; }
.playlist-player-footer button { width: 44px; height: 44px; border: 1px solid #3a5062; border-radius: 5px; background: #111b24; color: #ccdeec; }
.playlist-player-footer button:not(:disabled):hover { background: #25394a; }
.playlist-queue { border: 1px solid #2b3a46; border-radius: 7px; background: #0d1318; overflow: hidden; min-width: 0; }
.playlist-heading { padding: 24px 20px; border-bottom: 1px solid #273641; display: flex; gap: 15px; justify-content: space-between; align-items: center; }
.playlist-heading .eyebrow { font-size: .625rem; margin-bottom: 7px; }
.playlist-heading h2 { font-size: 1.25rem; letter-spacing: -.03em; }
.playlist-heading > span { white-space: nowrap; font-size: .6875rem; color: #9aaebd; }
.playlist-queue ol { list-style: none; padding: 8px; margin: 0; max-height: 520px; overflow-y: auto; }
.playlist-queue li + li { margin-top: 5px; }
.playlist-item { width: 100%; min-height: 92px; padding: 12px 9px; display: flex; align-items: center; gap: 12px; background: transparent; color: #b2c2cf; border: 1px solid transparent; border-radius: 5px; text-align: left; }
.playlist-item[aria-current] { background: #1a2a37; border-color: #506d83; }
.playlist-item:hover { background: #172531; }
.playlist-number { font: .6875rem var(--mono); color: #8099ad; }
.playlist-item img { width: 76px; height: 46px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.playlist-item-copy { min-width: 0; }
.playlist-item strong { display: block; font-size: .875rem; font-weight: 450; line-height: 1.5; text-align: start; overflow-wrap: anywhere; }
.playlist-item small { display: block; color: #9bbad0; font: .5625rem var(--mono); letter-spacing: .08em; margin-top: 8px; }
.playlist-empty { padding: 45px 0; }
.playlist-empty p { margin-top: 15px; }
.a11y-large-text .playlist-layout { grid-template-columns: minmax(0,1fr); }
.a11y-large-text .playlist-item { flex-wrap: wrap; }
.a11y-large-text .playlist-item-copy { flex-basis: 100%; }
.a11y-high-contrast .playlist-queue, .a11y-high-contrast .playlist-item[aria-current] { background: #000; border-color: #fff; }
@media(max-width:900px) { .playlist-layout { grid-template-columns: minmax(0,1fr); } .playlist-queue ol { max-height: 350px; } .playlist-heading { padding: 20px; } }
@media(max-width:480px) { .playlist-feature .video-caption { padding: 20px; } .playlist-feature .video-caption h2 { font-size: 1.4rem; } .playlist-item { gap: 10px; padding: 10px 6px; } .playlist-item img { width: 72px; } .playlist-player-footer { padding: 12px 20px; } .chart-interaction-hint { font-size: .625rem; margin: 0 17px 14px; } }
.journal-source-line { display:flex; flex-wrap:wrap; gap:12px 28px; margin:0 0 24px; color:#97a7b6; font-size:.75rem; }
.journal-source-line b { color:#dbe5ed; font-weight:500; margin-left:5px; }
.account-data-status { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.account-data-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #2d5144; border-radius: 5px; background: #10231b; color: #bce8cf; font: .5625rem var(--mono); letter-spacing: .06em; }
.account-data-badge i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #6fdfa3; box-shadow: 0 0 7px #6fdfa32b; }
.account-data-status small { font-size: .6875rem; color: #a4b5ae; }
.a11y-high-contrast .account-data-badge { background: #000; border-color: #fff; }
@media(max-width:600px) { .account-data-status { margin-left: 0; align-items: flex-start; } }
.editorial-about { align-items: start; }
.about-portrait { margin: 0; min-width: 0; }
.about-portrait img { display: block; width: 100%; height: auto; border-radius: 6px; }
.about-portrait figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 15px; color: #a5b7c6; font: .5625rem var(--mono); letter-spacing: .07em; }
.about-portrait figcaption span { color: #8d9eac; }
.editorial-about .about-story p { max-width: 65ch; line-height: 1.85; }
.editorial-approach > div:first-child > p { max-width: 58ch; font-size: 1rem; line-height: 1.85; margin-top: 20px; }
.story-chapter { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 8%; padding: 54px 0; border-top: 1px solid var(--line); }
.chapter-heading .micro { display: block; color: #8ea7ba; margin-bottom: 18px; }
.chapter-heading h2 { font-size: clamp(1.75rem,3vw,2.625rem); line-height: 1.15; max-width: 13ch; }
.chapter-copy { max-width: 66ch; }
.chapter-copy p { font-size: 1.0625rem; line-height: 1.9; color: #b0bac4; }
.chapter-copy p + p { margin-top: 23px; }
.editorial-closing h2 { line-height: 1.2; }
.a11y-large-text .story-chapter { grid-template-columns: minmax(0,1fr); gap: 26px; }
.a11y-large-text .chapter-heading h2 { max-width: none; }
@media(max-width:800px) {
.editorial-about { grid-template-columns: minmax(0,1fr); gap: 36px; }
.about-portrait { width: min(100%,480px); }
.story-chapter { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 38px 0; }
.chapter-heading h2 { max-width: 22ch; }
.chapter-copy p { font-size: 1rem; line-height: 1.85; }
}
.journal-summary { margin: 32px 0 34px; }
.summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.summary-heading h2 { font-size: 1rem; letter-spacing: -.02em; font-weight: 500; }
.summary-heading > span { font: .5625rem var(--mono); letter-spacing: .06em; color: #9bacbf; }
.journal-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) minmax(0,1.3fr); gap: 12px; }
.journal-metric { min-width: 0; padding: 22px 18px 17px; border: 1px solid #2b3c4c; border-radius: 10px; background: #0a1118; display: flex; flex-direction: column; }
.journal-metric h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: #a7bdd1; font: .5625rem var(--mono); line-height: 1.5; text-transform: uppercase; letter-spacing: .035em; }
.journal-metric h3 > span { color: #aecbff; font-size: .875rem; }
.journal-metric > strong { display: block; font-size: clamp(1.25rem,2.1vw,1.75rem); line-height: 1.25; font-weight: 500; color: #e0ecff; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.journal-metric p { color: #96aabe; font-size: .625rem; line-height: 1.5; margin: auto 0 0; padding-top: 16px; }
.summary-sparkline { display: block; width: 100%; height: 48px; margin: 10px 0 -4px; overflow: visible; }
.journal-metric-total h3 { margin-bottom: 10px; }
.journal-metric-total p { padding-top: 8px; }
.summary-source { font-size: .6875rem; line-height: 1.6; color: #96aabe; margin-top: 12px; }
.stats.period-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.a11y-high-contrast .journal-metric { background: #000; border-color: #fff; }
.a11y-large-text .journal-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.a11y-large-text .journal-metric-total { grid-column: 1 / -1; }
@media(max-width:1000px) {
.journal-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.journal-metric-total { grid-column: 1 / -1; }
.summary-sparkline { height: 54px; max-width: 360px; }
.journal-metric > strong { font-size: 1.6rem; }
}
@media(max-width:480px) {
.journal-summary-grid { gap: 10px; }
.journal-metric { padding: 18px 15px 15px; }
.journal-metric h3 { margin-bottom: 14px; }
.journal-metric > strong { font-size: 1.5rem; }
.summary-heading > span { font-size: .5rem; }
}
:root {
--bg: #030304;
--surface: #0a0a0c;
--line: rgba(255,255,255,.07);
--line-strong: rgba(255,255,255,.13);
--text: #f5f5f7;
--muted: #8e8e97;
--faint: #56565e;
--accent: #b4a5ff;
--aura-1: #5b3df5;
--aura-2: #a855f7;
--aura-3: #3b82f6;
--blue: var(--accent);
--accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
--accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
--font: 'Inter Tight', 'Inter', Arial, sans-serif;
--r-lg: 28px;
--r-md: 20px;
--ease-out: cubic-bezier(.16,1,.3,1);
--gutter: 64px;
}
:root[data-accent="ember"] { --accent: #ff7a93; --aura-1: #b3163f; --aura-2: #ff5a3c; --aura-3: #7c1d6f; }
:root[data-accent="mono"] { --accent: #e4e4e7; --aura-1: #3f3f46; --aura-2: #27272a; --aura-3: #52525b; }
html { scroll-padding-top: 96px; overflow-x: clip; }
body { background: var(--bg); letter-spacing: -.006em; overflow-x: clip; }
::selection { background: var(--accent-30); color: #fff; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.048em; line-height: 1; }
h4 { font-weight: 500; }
h2 { font-size: clamp(38px, 5.4vw, 80px); }
p { color: var(--muted); }
.eyebrow { color: #6f6f78; letter-spacing: .18em; }
button:focus-visible, a:focus-visible, select:focus-visible { outline-color: var(--accent); }
:is(h1, h2, blockquote) > span:not(.w):not(.line), .page-intro h1 span, .wd > span { background: linear-gradient(180deg, #a3a3ad 0%, #45454d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-split-done] > span:not(.w) { background: none; color: inherit; }
.hero h1 .dim > span { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.18)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-split] .w { display: inline-block; overflow-x: visible; overflow-y: clip; overflow-clip-margin: .02em; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
[data-split] .w > span { display: inline-block; }
.motion-ok [data-split] .w > span { transform: translateY(110%); transition: transform 1.1s var(--ease-out) calc(var(--wi) * 55ms); }
.motion-ok .in [data-split] .w > span, .motion-ok [data-split].in .w > span, .motion-ok .in[data-split] .w > span { transform: none; }
:is(.hero, .page-intro, .section-head, .feature-copy, .closing, .manifesto, .journey-head) .eyebrow {
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px; padding: 7px 15px 7px 12px;
border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.025);
color: #c7c7cf; font-size: .625rem; letter-spacing: .18em; backdrop-filter: blur(12px);
}
:is(.hero, .page-intro, .section-head, .feature-copy, .closing, .manifesto, .journey-head) .eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.site-header { position: sticky; top: 0; z-index: 30; height: 84px; border-bottom: 1px solid transparent; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); transition: background-color .4s ease, border-color .4s ease; }
.is-scrolled .site-header { background: rgba(3,3,4,.7); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); }
.wordmark { font-weight: 600; letter-spacing: .2em; }
.brand-mark { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); }
.desktop-nav { align-self: center; height: auto; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); color: #8a8a93; backdrop-filter: blur(12px); }
.desktop-nav a { height: auto; padding: 8px 15px; border-radius: 999px; transition: color .2s, background-color .2s; }
.desktop-nav a::before, .desktop-nav a[aria-current]::after { display: none; }
.desktop-nav a:hover { color: #fff; }
.desktop-nav a[aria-current] { color: #fff; background: rgba(255,255,255,.08); }
.about-link { border-radius: 999px; border-color: #fff; background: #fff; color: #000; font-weight: 500; gap: 14px; padding: 9px 18px; transition: background .2s, translate .35s var(--ease-out); }
.about-link:hover { background: #e4e4e7; }
.menu-toggle { border-color: var(--line-strong); border-radius: 999px; }
.mobile-nav { background: rgba(10,10,12,.96); backdrop-filter: blur(16px); border-color: var(--line-strong); border-radius: var(--r-md); top: 84px; }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--aura-1), var(--accent)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px var(--accent); }
.button { border-radius: 999px; padding: 15px 26px; gap: 14px; font-size: .9375rem; font-weight: 500; border-color: var(--line-strong); transition: background .2s, box-shadow .3s ease, translate .35s var(--ease-out), scale .3s var(--ease-out); }
.button:hover { transform: none; scale: 1.04; }
.primary { background: #fff; color: #000; border-color: #fff; }
.primary:hover { background: #fff; box-shadow: 0 0 50px 0 var(--accent-30); }
.secondary { background: rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.secondary:hover { background: rgba(255,255,255,.09); }
.text-link { font-weight: 500; }
.text-link span { color: var(--muted); }
.text-link::after { background: var(--accent) !important; }
.circle-link { border-color: var(--line-strong); }
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: min(calc(100svh - 84px), 1000px); padding: 20px 0 130px; isolation: isolate; overflow: visible clip; }
.hero-aura { position: absolute; z-index: -3; left: 50%; top: 46%; width: min(900px, 90vw); height: min(640px, 70vw); translate: -50% -50%; mix-blend-mode: screen; opacity: .55; pointer-events: none; }
.hero-aura i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(45deg, color-mix(in srgb, var(--aura-1) 55%, transparent), color-mix(in srgb, var(--aura-2) 45%, transparent), color-mix(in srgb, var(--aura-3) 45%, transparent)); filter: blur(100px); animation: aura-spin 20s linear infinite; }
@keyframes aura-spin { to { rotate: 360deg; } }
.hero-field { position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); height: 100%; mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 80%); opacity: .8; }
.hero-fade { position: absolute; z-index: -1; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); bottom: 0; height: 200px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-copy { width: auto; max-width: 1180px; display: flex; flex-direction: column; align-items: center; }
.hero-badge { position: relative; overflow: hidden; }
.hero-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22), transparent 70%); translate: -100% 0; animation: shimmer 5s ease-in-out 3s infinite; }
@keyframes shimmer { 0%, 70% { translate: -100% 0; } 100% { translate: 100% 0; } }
.hero h1 { font-size: clamp(56px, 11.2vw, 172px); line-height: .86; letter-spacing: -.06em; margin: 0 0 38px; }
.hero h1 > span { color: inherit; }
.hero h1 .line { display: block; overflow-x: visible; overflow-y: clip; padding: 0 .04em .1em; margin-bottom: -.1em; }
.hero h1 .line > span { display: inline-block; }
.hero-copy > p:not(.eyebrow) { max-width: 600px; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.5; color: #a1a1aa; font-weight: 450; letter-spacing: -.015em; }
.hero-actions { justify-content: center; margin-top: 44px; flex-wrap: wrap; gap: 12px; }
.scroll-cue { position: absolute; bottom: 36px; left: 50%; translate: -50% 0; margin: 0; flex-direction: column; gap: 12px; font-size: .5625rem; letter-spacing: .3em; color: var(--faint); }
.scroll-cue i { display: block; width: 1px; height: 44px; background: linear-gradient(var(--accent), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.flow-art, .art-caption, .art-index, .art-key { display: none; }
.marquee { overflow: hidden; margin: 0 calc(var(--gutter) * -1); padding: 24px 0; border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 50s linear infinite; }
.marquee span { font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.035em; color: #d4d4d8; white-space: nowrap; }
.marquee i { font-style: normal; color: var(--accent); font-size: .875rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.manifesto { padding: clamp(120px, 16vw, 220px) 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.manifesto-text { max-width: 1120px; font-size: clamp(32px, 4.8vw, 76px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; color: #fff; }
.manifesto-text .w { transition: color .5s ease, text-shadow .5s ease; }
.motion-ok .manifesto-text .w:not(.lit) { color: #26262c; }
.motion-ok .manifesto-text .w.lit { color: #fff; text-shadow: 0 0 40px var(--accent-30); }
.journey { position: relative; margin: 0 calc(var(--gutter) * -1); }
.journey-sticky { padding: 40px var(--gutter) 90px; }
.journey-head { max-width: 760px; margin-bottom: 56px; }
.journey-head h2 { font-size: clamp(40px, 5.6vw, 86px); line-height: .92; letter-spacing: -.056em; margin-bottom: 22px; }
.journey-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.journey-step { position: relative; min-height: 340px; padding: 36px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #060607); display: flex; flex-direction: column; overflow: hidden; }
.journey-when { display: inline-flex; align-items: center; gap: 10px; font: .6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.journey-when::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--accent); box-shadow: 0 0 12px var(--accent-30); }
.journey-index { position: absolute; top: 18px; right: 26px; font-size: 96px; font-weight: 600; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); }
.journey-step h3 { margin-top: auto; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; letter-spacing: -.045em; }
.journey-step p { margin-top: 14px; font-size: 1rem; line-height: 1.6; max-width: 34ch; }
.journey-progress { display: none; }
.journey.is-horizontal .journey-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 84px; padding-bottom: 40px; }
.journey.is-horizontal .journey-rail { display: flex; align-items: center; gap: 80px; width: max-content; will-change: transform; }
.journey.is-horizontal .journey-head { flex: 0 0 min(560px, 42vw); margin: 0; }
.journey.is-horizontal .journey-track { display: flex; gap: 20px; }
.journey.is-horizontal .journey-step { width: min(420px, 32vw); min-height: min(460px, 58vh); flex-shrink: 0; }
.journey.is-horizontal .journey-progress { display: block; height: 1px; margin-top: 44px; background: var(--line); }
.journey-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--accent); }
.motion-ok .journey-step { transition: border-color .4s ease, translate .6s var(--ease-out); }
.journey-step:hover { border-color: var(--line-strong); }
.lessons { padding: 150px 0 60px; }
.section-head { max-width: 860px; margin: 0 auto 80px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head h2 { font-size: clamp(44px, 6.4vw, 100px); line-height: .9; letter-spacing: -.058em; margin-bottom: 24px; }
.section-head > p:not(.eyebrow) { max-width: 520px; font-size: 1.0625rem; line-height: 1.7; }
.lesson-stack { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; }
.lesson { position: sticky; top: calc(120px + var(--i) * 16px); min-height: 400px; margin-bottom: 16vh; padding: clamp(32px, 5vw, 64px); border: 1px solid var(--line-strong); border-radius: 36px; background: radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in srgb, var(--aura-1) 16%, transparent), transparent 60%), linear-gradient(180deg, #0f0f13, #08080a); display: flex; flex-direction: column; transform-origin: 50% 0; scale: calc(1 - var(--depth, 0) * .08); filter: brightness(calc(1 - var(--depth, 0) * .55)); box-shadow: 0 -20px 60px rgba(0,0,0,.5); }
.lesson:last-child { margin-bottom: 0; }
.lesson-number { font-size: clamp(56px, 7vw, 110px); font-weight: 600; letter-spacing: -.06em; line-height: .85; background: linear-gradient(180deg, var(--accent), transparent 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lesson blockquote { margin: auto 0 0; padding-top: 40px; font-size: clamp(26px, 3.2vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; color: #f4f4f5; max-width: 26ch; }
.lesson-source { margin-top: 28px; font: .6875rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.motion-ok .lesson blockquote { opacity: 0; translate: 0 24px; transition: opacity 1s ease .15s, translate 1.1s var(--ease-out) .15s; }
.motion-ok .lesson.in blockquote { opacity: 1; translate: 0 0; }
.feature { padding: 150px 0 40px; text-align: center; }
.feature-copy { max-width: 780px; margin: 0 auto 70px; display: flex; flex-direction: column; align-items: center; }
.feature-copy h2 { font-size: clamp(44px, 6.6vw, 100px); line-height: .9; letter-spacing: -.058em; margin-bottom: 26px; }
.feature-copy > p:not(.eyebrow) { max-width: 520px; font-size: 1.0625rem; line-height: 1.7; }
.feature-copy .text-link { margin-top: 26px; }
.stage { max-width: 1080px; margin: 0 auto; padding: 10px; border: 1px solid var(--line-strong); border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); text-align: left; box-shadow: 0 50px 140px -30px color-mix(in srgb, var(--aura-1) 45%, transparent), 0 0 0 1px rgba(0,0,0,.6); transform-origin: 50% 0; }
.stage > .panel { border-radius: 23px; }
.motion-ok .stage { transition: transform 1.5s var(--ease-out), opacity 1.2s ease; }
.motion-ok .stage:not(.in) { transform: perspective(1600px) rotateX(22deg) scale(.9) translateY(40px); opacity: .25; }
.motion-ok .stage .equity-chart polyline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1) .4s; }
.motion-ok .stage .equity-chart.draw polyline { stroke-dashoffset: 0; }
.motion-ok .stage .equity-chart path { opacity: 0; transition: opacity 1.4s ease 1.6s; }
.motion-ok .stage .equity-chart.draw path { opacity: 1; }
.desk { padding: 170px 0 20px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 18px; }
.tile { grid-column: span 6; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #060607); overflow: hidden; min-width: 0; transition: border-color .4s ease, translate .5s var(--ease-out); }
.tile:hover { border-color: var(--line-strong); translate: 0 -4px; }
.tile-research, .tile-projects { grid-column: span 7; }
.tile-books, .tile-videos { grid-column: span 5; }
.tile-visual { position: relative; flex: 1; min-height: 330px; display: grid; place-items: center; padding: 28px; overflow: hidden; }
.tile-visual > * { transition: scale .8s var(--ease-out); }
.tile:hover .tile-visual > * { scale: 1.03; }
.tile-copy { padding: 0 36px 36px; }
.tile h3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.02; letter-spacing: -.045em; margin: 14px 0 14px; }
.tile-copy > p:not(.eyebrow) { font-size: .9375rem; line-height: 1.7; max-width: 440px; }
.tile-cta { display: inline-flex; gap: 14px; align-items: center; margin-top: 22px; font-size: .875rem; font-weight: 500; }
.tile-cta span { color: var(--accent); transition: translate .3s var(--ease-out); }
.tile:hover .tile-cta span { translate: 6px 0; }
.tile .research-art { width: 100%; margin: 0; }
.tile .book-stage { height: 330px; width: 100%; }
.tile .book-side-note { display: none; }
.tile .tools-panel { width: 100%; }
.video-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); background: #0a0a0c; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.05); }
.video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85)); }
.video-thumb-play { position: absolute; z-index: 1; left: 50%; top: 45%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #000; font-size: 1.125rem; padding-left: 4px; box-shadow: 0 0 40px var(--accent-30); transition: scale .4s var(--ease-out); }
.tile:hover .video-thumb-play { scale: 1.12; }
.video-thumb-title { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; font-size: 1rem; font-weight: 500; color: #fff; text-align: start; }
.spot, .content-card, .about-destinations a, .journal-metric { position: relative; isolation: isolate; }
:is(.spot, .content-card, .about-destinations a, .journal-metric)::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--accent-12), transparent 65%); }
@media (hover: hover) and (pointer: fine) { :is(.spot, .content-card, .about-destinations a, .journal-metric):hover::after { opacity: 1; } }
.closing { padding: 200px 0 170px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing blockquote { margin: 0 0 34px; font-size: clamp(44px, 7.6vw, 120px); font-weight: 600; line-height: .9; letter-spacing: -.06em; }
.closing > p:not(.eyebrow) { max-width: 520px; font-size: 1.0625rem; line-height: 1.7; }
.closing .hero-actions { margin-top: 38px; }
.site-footer { border-top: 1px solid var(--line); }
.footer-top { border-color: var(--line); }
.footer-motto, .footer-bottom { color: var(--faint); }
.panel, .playlist-queue, .content-card, .journal-performance { background: linear-gradient(180deg, #0c0c0f, #070708); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.panel-head { border-bottom-color: var(--line); }
.code-tabs button { color: #6b6b74; }
.code-tabs button[aria-selected=true] { color: #fff; }
.code-tabs button[aria-selected=true]:after { background: var(--accent); }
.code-lines code { color: #b8b8c1; }
.code-lines b { color: var(--accent); }
.code-lines .function { color: #e4e4e7; }
.code-lines .string { color: #a3a3ad; }
.code-lines i { color: #3a3a41; }
.tiny-dot { border-color: var(--accent); }
.demo-tag, .availability, .pill-row span { border-color: var(--line-strong); border-radius: 999px; color: #a1a1aa; }
.equity-chart polyline, .summary-sparkline polyline { stroke: var(--accent); }
.equity-chart circle, .summary-sparkline circle { fill: #fff; }
#chart-fill stop, #summary-fill stop { stop-color: var(--accent); }
.stats strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.stats > div { border-right-color: var(--line); }
.orbit { border-color: rgba(255,255,255,.07); }
.orbit-label { background: #0a0a0c; border-color: var(--line-strong); border-radius: 999px; padding: 5px 12px; }
.research-core { border-color: rgba(255,255,255,.2); background: radial-gradient(#1b1a24, #070708); box-shadow: 0 0 70px var(--accent-30); }
.research-core > span { color: #fff; }
.orbit-point { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.research-art::before { background: radial-gradient(220px circle at var(--light-x,50%) var(--light-y,50%), var(--accent-30), transparent 80%); }
.motion-ok .orbit-1 { animation: orbit-turn 40s linear infinite; }
.motion-ok .orbit-2 { animation: orbit-turn 60s linear infinite reverse; }
@keyframes orbit-turn { to { transform: translate(-50%,-50%) rotate(348deg); } }
.book-cover { background: linear-gradient(115deg, #2a2833, #121116 12%, #0d0d10 65%, #08080a); border-color: #3f3f46; border-left-color: #b4b4bd; }
.book-title em { color: #6f6f78; }
.book-spine { background: #0d0d10; border-color: #27272a; }
.motion-ok .tile-books .book-cover { animation: book-float 7s ease-in-out infinite; }
@keyframes book-float { 50% { translate: 0 -10px; } }
.tool-flow > div { border-bottom-color: var(--line); }
.tool-symbol { color: var(--accent); }
select, .period-control, .table-footer button, .row-detail { background: #0c0c0f; border-color: var(--line-strong); border-radius: 999px; }
.period-control button { border-radius: 999px; color: #85858e; }
.period-control button[aria-pressed=true] { background: #fff; color: #000; }
th { background: #0c0c0f; border-bottom-color: var(--line); }
tbody tr:hover { background: rgba(255,255,255,.03); }
dialog { background: #0c0c0f; border-color: var(--line-strong); border-radius: var(--r-md); }
dialog::backdrop { background: rgba(0,0,0,.8); }
.demo-banner { background: #0c0c0f; border-color: var(--line); border-left-color: var(--accent); border-radius: 14px; }
.playlist-item[aria-current] { background: #18181c; border-color: #3f3f46; }
.playlist-item:hover { background: #121215; }
.chart-tooltip { background: rgba(10,10,12,.96); border-color: #3f3f46; }
.page-intro { max-width: 1040px; margin: 0 auto; padding: 120px 0 100px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; isolation: isolate; }
.page-intro::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 40%; width: min(700px, 90vw); height: 380px; translate: -50% -50%; border-radius: 50%; background: linear-gradient(45deg, color-mix(in srgb, var(--aura-1) 40%, transparent), color-mix(in srgb, var(--aura-3) 30%, transparent)); filter: blur(110px); opacity: .45; pointer-events: none; }
.page-intro h1 { font-size: clamp(52px, 9vw, 144px); line-height: .88; letter-spacing: -.06em; margin-bottom: 32px; }
.page-intro > p:last-child { max-width: 580px; font-size: 1.1875rem; line-height: 1.6; color: #a1a1aa; }
.journal-overview .page-intro { padding-bottom: 70px; }
.journal-metric { background: linear-gradient(180deg, #0c0c0f, #070708); border-color: var(--line); border-radius: 18px; }
.journal-metric h3 { color: #85858e; }
.journal-metric h3 > span { color: var(--accent); }
.journal-metric > strong { color: #fff; }
.journal-metric p { color: #6f6f78; }
.journal-source-line, .summary-source, .data-footnote, .journal-demo-note { color: var(--muted); }
.journal-source-line b { color: #e4e4e7; }
.content-grid { gap: 18px; }
.content-card { padding: 32px; border-radius: var(--r-lg); }
.collection-empty { border: 1px solid var(--line); border-radius: 32px; padding: 56px; background: linear-gradient(180deg, #0b0b0e, #050506); }
.video-preview { border-color: var(--line); border-radius: var(--r-md); background: radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--aura-1) 25%, transparent), transparent 70%), #0a0a0c; }
.video-preview-title em { color: #6f6f78; }
.approach-feature, .principles { border-bottom-color: var(--line); }
.story-chapter { border-top-color: var(--line); padding: 90px 0; }
.chapter-heading .micro { color: var(--accent); }
.chapter-heading h2 { font-size: clamp(34px, 4vw, 60px); line-height: .98; }
.chapter-copy p { color: #a9a9b2; font-size: 1.125rem; }
.closing-note h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: .95; }
.about-portrait img { border-radius: var(--r-lg); filter: grayscale(.25) contrast(1.05); }
.about-portrait figcaption { color: #8e8e97; }
.about-portrait figcaption span { color: var(--faint); }
.about-destinations { gap: 18px; border-top: 0; }
.about-destinations a { padding: 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0c0c0f, #060607); transition: border-color .3s ease; }
.about-destinations a:hover { border-color: var(--line-strong); }
.about-destinations .micro { color: var(--accent); }
.a11y-launcher { background: #0c0c0f; border-color: var(--line-strong); color: #e4e4e7; }
.a11y-launcher:hover { background: #18181c; }
@keyframes rd-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes rd-fade-up { from { opacity: 0; translate: 0 40px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-bloom { from { opacity: 0; scale: .7; } to { opacity: .55; scale: 1; } }
@keyframes rd-page { from { opacity: 0; translate: 0 16px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes rd-section { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
.hero-copy > :is(.eyebrow, p, .hero-actions), .page-intro > * { animation: rd-fade-up 1.2s var(--ease-out) backwards; }
.hero-copy > .eyebrow { animation-delay: .2s; }
.hero h1 .line > span { animation: rd-rise 1.2s var(--ease-out) backwards; }
.hero h1 .line:nth-child(1) > span { animation-delay: .3s; }
.hero h1 .line:nth-child(2) > span { animation-delay: .42s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .54s; }
.hero-copy > p:not(.eyebrow) { animation-delay: .65s; }
.hero-copy > .hero-actions { animation-delay: .8s; }
.page-intro > .eyebrow { animation-delay: .1s; }
.page-intro > h1 { animation-delay: .22s; }
.page-intro > p:last-child { animation-delay: .38s; }
.hero-aura { animation: rd-bloom 2s ease backwards; }
.hero-field { animation: rd-fade 2.4s ease .4s backwards; }
main.page-enter { animation: rd-page .8s var(--ease-out); }
html.intro .site-header { animation: rd-fade 1.4s ease .6s backwards; }
html.intro .hero-aura { animation: rd-bloom 3s cubic-bezier(.3,.6,.2,1) .1s backwards; }
html.intro .hero-field { animation: rd-fade 3s ease 1s backwards; }
html.intro .hero-copy > .eyebrow { animation-delay: .9s; }
html.intro .hero h1 .line:nth-child(1) > span { animation-delay: 1.05s; }
html.intro .hero h1 .line:nth-child(2) > span { animation-delay: 1.2s; }
html.intro .hero h1 .line:nth-child(3) > span { animation-delay: 1.35s; }
html.intro .hero-copy > p:not(.eyebrow) { animation-delay: 1.6s; }
html.intro .hero-copy > .hero-actions { animation-delay: 1.8s; }
html.intro .scroll-cue { animation: rd-fade 1s ease 2.4s backwards; }
html.intro .marquee { animation: rd-fade 1.2s ease 2.1s backwards; }
.motion-ok [data-reveal]:not(.feature):not(.tile) { opacity: 0; translate: 0 40px; transition: opacity 1.1s ease, translate 1.2s var(--ease-out); }
.motion-ok [data-reveal].in:not(.feature):not(.tile) { opacity: 1; translate: 0 0; }
.motion-ok .tile { opacity: 0; translate: 0 50px; scale: .96; transition: opacity 1s ease, translate 1.2s var(--ease-out), scale 1.2s var(--ease-out), border-color .4s ease; }
.motion-ok .tile.in { opacity: 1; translate: 0 0; scale: 1; }
.motion-ok .tile.in:hover { translate: 0 -4px; }
.motion-ok .bento .tile:nth-child(even) { transition-delay: .12s, .12s, .12s, 0s; }
.reveal-in { animation: rd-section 1.1s var(--ease-out) backwards; }
@media (max-width: 1100px) {
:root { --gutter: 38px; }
.desktop-nav { gap: 0; }
.desktop-nav a { padding: 8px 11px; }
}
@media (max-width: 900px) {
.tile-research, .tile-books, .tile-videos, .tile-projects { grid-column: span 12; }
}
@media (max-width: 800px) {
:root { --gutter: 25px; }
.site-header { height: 72px; }
.mobile-nav { top: 72px; }
.hero { min-height: min(calc(100svh - 72px), 900px); padding: 20px 0 110px; }
.hero-copy { width: 100%; }
.hero h1 { font-size: clamp(50px, 14vw, 110px); }
.hero-aura { width: 110vw; height: 90vw; }
.manifesto { padding: 110px 0; }
.journey-step { min-height: 280px; padding: 28px; }
.lessons, .desk { padding-top: 110px; }
.lesson { min-height: 320px; top: calc(96px + var(--i) * 10px); border-radius: 28px; }
.feature { padding: 110px 0 20px; }
.feature-copy { margin-bottom: 48px; }
.stage { padding: 6px; border-radius: 24px; }
.stage > .panel { border-radius: 19px; }
.closing { padding: 130px 0 110px; }
.page-intro { padding: 80px 0 70px; }
.page-intro h1 { font-size: clamp(46px, 13vw, 96px); }
.collection-empty { padding: 32px; }
}
@media (max-width: 480px) {
:root { --gutter: 22px; }
.hero h1 { font-size: 13.6vw; }
.hero-copy > p:not(.eyebrow) { font-size: 1.0625rem; }
.hero .eyebrow { font-size: .5rem; letter-spacing: .12em; }
.button { padding: 13px 20px; font-size: .875rem; }
.tile-copy { padding: 0 24px 28px; }
.tile-visual { padding: 18px; min-height: 260px; }
.journey-index { font-size: 72px; }
.about-destinations a { padding: 24px; border-bottom: 1px solid var(--line); }
}
.journey-step { background: radial-gradient(ellipse 90% 60% at 0% 100%, color-mix(in srgb, var(--aura-1) 14%, transparent), transparent 70%), linear-gradient(180deg, #0d0d10, #060607); }
.journey-step:last-child { border-color: var(--accent-30); background: radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--aura-2) 26%, transparent), transparent 70%), radial-gradient(ellipse 90% 60% at 0% 100%, color-mix(in srgb, var(--aura-1) 22%, transparent), transparent 70%), linear-gradient(180deg, #111016, #07070a); }
.journey-step:last-child .journey-index { -webkit-text-stroke-color: var(--accent-30); }
.closing { position: relative; isolation: isolate; }
.closing::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 45%; width: min(820px, 92vw); height: 420px; translate: -50% -50%; border-radius: 50%; background: linear-gradient(45deg, color-mix(in srgb, var(--aura-1) 45%, transparent), color-mix(in srgb, var(--aura-2) 35%, transparent), color-mix(in srgb, var(--aura-3) 30%, transparent)); filter: blur(120px); opacity: .5; pointer-events: none; }
.motion-ok .closing::before { animation: aura-spin 26s linear infinite; }
.hero h1, .hero .eyebrow, .page-intro h1, .section-head h2, .feature-copy h2, .manifesto-text, .closing blockquote,
.tools-block-head h2, .analyzer-copy h2, .lg-subhead h2, .lg-kpi strong, .lab-read dd, .tl-hero strong {
-webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.button, .scroll-cue, .site-header, .mobile-nav, .eyebrow, .tools-tabs, .lg-seg, .lab-pick, .lab-resample, .tl-chips, .soon-badge, .lg-chip, .lab-chip, .text-link, .tile-cta {
-webkit-user-select: none; user-select: none; }
.hw { padding: 150px 0 20px; }
.hw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hw-steps a { position: relative; display: grid; gap: 12px; align-content: start; min-height: 230px; padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #070708); color: var(--text); transition: border-color .35s, transform .5s var(--ease-out); }
.hw-steps a:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-4px); }
.hw-n { font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--accent); }
.hw-steps strong { font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; margin-top: auto; }
.hw-steps em { font-style: normal; font-size: 14.5px; color: var(--muted); }
.hw-steps i { position: absolute; top: 24px; right: 24px; font-style: normal; color: var(--faint); transition: color .3s, transform .4s var(--ease-out); }
.hw-steps a:hover i { color: var(--accent); transform: translateX(4px); }
.hw-steps li:not(:last-child) a::after { content: ""; position: absolute; top: 50%; right: -13px; width: 14px; height: 1px; background: color-mix(in srgb, var(--accent) 50%, transparent); }
.tn { padding: 150px 0 20px; }
.tn-card { max-width: 1000px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #070708); transition: border-color .5s, background .5s; }
.tn-card[data-tn="now"] { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--aura-1) 20%, transparent), transparent 70%), linear-gradient(180deg, #0e0d14, #070708); }
.tn-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin: 0 auto 34px; max-width: 520px; border: 1px solid var(--line-strong); border-radius: 999px; background: #050506; }
.tn-switch button { position: relative; z-index: 1; padding: 13px 10px; border: 0; background: none; border-radius: 999px; font: 500 15px var(--font); color: var(--muted); cursor: pointer; transition: color .35s; }
.tn-switch button[aria-pressed="true"] { color: #0b0a12; }
.tn-switch i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #c9c9d2; transition: transform .5s var(--ease-out), background-color .5s; }
.tn-card[data-tn="now"] .tn-switch i { transform: translateX(100%); background: var(--accent); }
.tn-rows { margin: 0; display: grid; }
.tn-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.tn-row dt { font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tn-row dd { margin: 0; display: grid; }
.tn-row dd > span, .tn-foot > span { grid-area: 1 / 1; transition: opacity .45s ease, transform .55s var(--ease-out), filter .45s; transition-delay: calc(var(--i, 0) * 70ms); }
.tn-row dd > span { font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.035em; line-height: 1.2; }
.tn-then { color: #9a9aa4; }
.tn-now { color: #fff; }
.tn-card[data-tn="then"] .tn-now, .tn-card[data-tn="now"] .tn-then { opacity: 0; transform: translateY(10px); filter: blur(4px); pointer-events: none; }
.tn-card[data-tn="now"] .tn-row dt { color: var(--accent); }
.tn-foot { display: grid; margin: 12px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.tn-foot .tn-now { color: var(--accent); }
.hc { max-width: 1000px; margin: 0 auto; padding: 160px 0 60px; text-align: center; display: grid; justify-items: center; gap: 38px; }
.hc blockquote { margin: 0; font-size: clamp(28px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; color: #fff; }
.hc blockquote span { color: var(--accent); }
.hc-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 1000px) { .hw-steps { grid-template-columns: 1fr 1fr; } .hw-steps li a::after { display: none; } }
@media (max-width: 640px) { .hw-steps { grid-template-columns: 1fr; } .hw-steps a { min-height: 0; } .hw-steps strong { margin-top: 18px; } .tn-row { grid-template-columns: 1fr; gap: 8px; } .tn-switch button { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .tn-row dd > span, .tn-foot > span { transition: none; } }
.hw-mini { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: left; }
.hw-mini a { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #09090b; color: var(--text); transition: border-color .3s, transform .4s var(--ease-out); }
.hw-mini a:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); }
.hw-mini span { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--accent); }
.hw-mini b { font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
.hw-mini em { font-style: normal; font-size: 13px; color: var(--muted); }
.lab-more { gap: 28px; flex-wrap: wrap; }
.tn { padding-top: 130px; }
.hc { padding-top: 130px; }
@media (max-width: 900px) { .hw-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) {
.mobile-nav { position: fixed; left: 16px; right: 16px; top: 78px; z-index: 60; max-height: calc(100dvh - 96px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.site-header { z-index: 61; }
}
.about-social { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.about-social .eyebrow { margin-bottom: 16px; }
.about-social-links { display: flex; flex-wrap: wrap; gap: 12px; }
.social-link { display: inline-flex; align-items: center; gap: 14px; min-width: 220px; padding: 14px 18px 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #0c0c0f, #060607); transition: border-color .3s ease, transform .4s var(--ease-out), box-shadow .4s ease; }
.social-link svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.social-link svg .dot { fill: var(--accent); stroke: none; }
.social-link span { display: grid; gap: 1px; }
.social-link b { font-weight: 500; font-size: .95rem; color: var(--text); }
.social-link small { justify-self: start; font: .6875rem var(--mono); letter-spacing: .04em; color: var(--muted); }
.social-link i { margin-left: auto; font-style: normal; color: var(--faint); transition: color .3s ease, transform .4s var(--ease-out); }
.social-link:hover, .social-link:focus-visible { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); box-shadow: 0 22px 44px -28px var(--accent); }
.social-link:hover i, .social-link:focus-visible i { color: var(--accent); transform: translate(2px, -2px); }
html[dir="rtl"] .social-link i { margin-left: 0; margin-right: auto; }
@media (max-width: 480px) { .social-link { flex: 1 1 100%; } }
html[dir="rtl"] .social-link small { justify-self: end; }
.lg { --up: #3ddc97; --down: #ff5c6c; --lg-s1: linear-gradient(180deg, #0d0d10, #070708); padding-bottom: 40px; }
.lg .up { color: var(--up); } .lg .down { color: var(--down); }
.lg-mono { font: 500 11px/1.4 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lg-intro { padding-bottom: 50px; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.lg-chip { font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 999px; white-space: nowrap; }
.lg-chip:nth-child(2) { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.lg-seg { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: #0c0c0f; margin-bottom: 18px; }
.lg-seg button { position: relative; z-index: 1; padding: 9px 18px; border: 0; background: none; border-radius: 999px; font-size: 14px; color: var(--muted); cursor: pointer; transition: color .3s; }
.lg-seg button[aria-pressed=true] { color: #0b0a12; }
.lg-seg > i { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--sw, 0); transform: translateX(var(--sx, 0)); border-radius: 999px; background: var(--accent); transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.lg-w { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--lg-s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color .35s ease; }
.lg-w:hover { border-color: var(--line-strong); }
.lg-w > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-w > p { color: var(--muted); font-size: 13.5px; margin: 0; }
.lg-kpis { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--lg-s1); margin-bottom: 12px; }
.lg-kpi { display: grid; gap: 10px; padding: 22px 22px 24px; border-right: 1px solid var(--line); }
.lg-kpi:last-child { border-right: 0; }
.lg-kpi strong { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.lg-kpi small { font-size: .55em; color: var(--muted); letter-spacing: 0; }
.lg-curve { margin-bottom: 12px; }
.lg-chart { position: relative; height: clamp(220px, 30vw, 380px); margin: 14px 0 6px; cursor: crosshair; touch-action: pan-y; }
.lg-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lg-base { stroke: rgba(255,255,255,.2); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.lg-line { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 4 4; }
.motion-ok .lg-line { stroke-dashoffset: 4; transition: stroke-dashoffset 2.4s var(--ease-out) .25s; }
.motion-ok .lg-area { opacity: 0; transition: opacity 1.4s ease 1s; }
.motion-ok .in .lg-line { stroke-dashoffset: 0; } .motion-ok .in .lg-area { opacity: 1; }
.lg-cross { position: absolute; inset: 0; pointer-events: none; }
.lg-cross[hidden] { display: none; }
.lg-cross::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: rgba(255,255,255,.18); }
.lg-cross i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #070708; border: 1.5px solid var(--accent); }
.lg-cross span, .lg-cells i[data-tip]:hover::after, .lg-daybars i:hover::after { font: 500 11px/1 'IBM Plex Mono', monospace; white-space: nowrap; padding: 8px 10px; border-radius: 8px; background: #16161b; border: 1px solid var(--line-strong); color: var(--text); pointer-events: none; }
.lg-cross span { position: absolute; left: var(--x); top: 0; transform: translateX(12px); }
.lg-cross.flip span { transform: translateX(calc(-100% - 12px)); }
.lg-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.lg-daily { grid-column: span 12; }
.lg-daybars { display: flex; align-items: center; gap: 4px; height: 200px; margin-top: 10px; }
.lg-daybars i { position: relative; flex: 1; height: 50%; display: flex; }
.lg-daybars i::before { content: ''; position: absolute; left: 0; right: 0; height: calc(var(--h) * 100%); border-radius: 3px; transition: opacity .2s, transform 1s var(--ease-out); }
.lg-daybars i.up { align-self: flex-start; } .lg-daybars i.up::before { bottom: 0; background: var(--up); transform-origin: bottom; }
.lg-daybars i.down { align-self: flex-end; } .lg-daybars i.down::before { top: 0; background: var(--down); transform-origin: top; }
.lg-daybars:hover i::before { opacity: .35; } .lg-daybars i:hover::before { opacity: 1; }
.lg-daybars i:hover::after { content: attr(data-tip); position: absolute; left: 50%; top: -30px; transform: translateX(-50%); z-index: 5; }
.lg-daybars i.down:hover::after { top: auto; bottom: -30px; }
.motion-ok .lg-daybars i::before { transform: scaleY(0); } .motion-ok .in .lg-daybars i::before { transform: none; }
.lg-cal { grid-column: span 6; }
.lg-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.lg-legend i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.lg-legend i.up { background: var(--up); } .lg-legend i.down { background: var(--down); }
.lg-calendar { display: flex; gap: 26px; margin: 12px 0 4px; flex-wrap: wrap; }
.lg-month { display: grid; gap: 10px; }
.lg-month > span { font-size: 12.5px; color: var(--muted); }
.lg-cells { display: grid; grid-template-rows: repeat(5, 22px); grid-auto-flow: column; grid-auto-columns: 22px; gap: 6px; }
.lg-cells i { grid-row: var(--row); position: relative; border-radius: 5px; background: rgba(255,255,255,.05); outline: 1px solid transparent; outline-offset: 2px; transition: transform .2s ease, outline-color .2s; }
.lg-cells i.up { background: color-mix(in srgb, var(--up) calc(var(--a) * 100%), rgba(255,255,255,.05)); }
.lg-cells i.down { background: color-mix(in srgb, var(--down) calc(var(--a) * 100%), rgba(255,255,255,.05)); }
.lg-cells i:hover { transform: scale(1.15); outline-color: rgba(255,255,255,.55); z-index: 2; }
.lg-cells i[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; }
.lg-week, .lg-hist { grid-column: span 3; }
.lg-week ul { list-style: none; padding: 0; display: grid; gap: 12px; margin: 10px 0 auto; }
.lg-week li { display: grid; grid-template-columns: 34px 1fr 64px; gap: 10px; align-items: center; font-size: 13.5px; }
.lg-week b { font: 500 12px 'IBM Plex Mono', monospace; text-align: right; }
.lg-div { position: relative; height: 8px; background: rgba(255,255,255,.04); border-radius: 99px; }
.lg-div::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,.2); }
.lg-div i { position: absolute; top: 0; bottom: 0; width: calc(var(--v) * 50%); border-radius: 99px; }
.lg-div i.up { left: 50%; background: var(--up); transform-origin: left; }
.lg-div i.down { right: 50%; background: var(--down); transform-origin: right; }
.lg-histo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 170px; margin: 10px 0 auto; }
.lg-histo div { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 6px; text-align: center; }
.lg-histo i { align-self: end; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 4px 4px 2px 2px; background: var(--up); opacity: .85; transform-origin: bottom; transition: transform 1.2s var(--ease-out); }
.lg-histo i.down { background: var(--down); }
.lg-histo span, .lg-histo small { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--faint); }
.lg-histo span { color: var(--muted); }
.motion-ok .lg-histo i { transform: scaleY(0); } .motion-ok .in .lg-histo i { transform: none; }
.lg-subhead { display: grid; gap: 14px; margin: 110px 0 34px; }
.lg-subhead h2 { font-size: clamp(32px, 4vw, 56px); letter-spacing: -.05em; line-height: 1; }
.lg-subhead p { max-width: 520px; }
.lg-stats .lg-ring, .lg-stats .lg-pf { grid-column: span 3; }
.lg-stats .lg-range { grid-column: span 6; }
.lg-ring-box { position: relative; width: 100%; max-width: 132px; aspect-ratio: 1; margin: 8px auto 0; display: grid; place-items: center; }
.lg-ring-box svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lg-ring-box circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.lg-ring-box .lg-ring-val { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--val) var(--len); }
.motion-ok .lg-ring-val { stroke-dasharray: 0 var(--len); transition: stroke-dasharray 1.8s var(--ease-out) .3s; }
.motion-ok .in .lg-ring-val { stroke-dasharray: var(--val) var(--len); }
.lg-ring-box strong { font-size: 26px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lg-ring > p { text-align: center; }
.lg-mid { font-size: clamp(40px, 3.6vw, 56px); font-weight: 500; letter-spacing: -.05em; line-height: 1; margin: 20px 0 auto; font-variant-numeric: tabular-nums; }
.lg-meter { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.lg-meter i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--accent); border-radius: inherit; transform-origin: left; }
.lg-scale { display: flex; justify-content: space-between; font: 500 10px 'IBM Plex Mono', monospace; color: var(--faint); }
.lg-bars { display: grid; gap: 22px; margin: 16px 0 auto; }
.lg-bars div { display: grid; gap: 10px; }
.lg-bars strong { font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.lg-bars i { display: block; height: 6px; border-radius: 99px; width: calc(var(--v) * 100%); background: var(--up); transform-origin: left; }
.lg-bars i.down { background: var(--down); }
.motion-ok .lg-meter i, .motion-ok .lg-bars i, .motion-ok .lg-div i { transform: scaleX(0); transition: transform 1.6s var(--ease-out) .35s; }
.motion-ok .in .lg-meter i, .motion-ok .in .lg-bars i, .motion-ok .in .lg-div i { transform: scaleX(1); }
.lg-log { margin-top: 12px; }
.lg-log-scroll { max-height: 420px; overflow-y: auto; margin-top: 8px; scrollbar-width: thin; scrollbar-color: #222 transparent; }
.lg-log table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.lg-log th { position: sticky; top: 0; background: #0b0b0e; text-align: left; font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 10px 0; border-bottom: 1px solid var(--line); }
.lg-log td { padding: 11px 0; border-bottom: 1px solid var(--line); color: #b4b4bc; }
.lg-log th:not(:first-child), .lg-log td:not(:first-child) { text-align: right; }
.lg-log tr:hover td { color: var(--text); }
.lg-log td.up { color: var(--up); } .lg-log td.down { color: var(--down); }
.lg .journal-demo-note { margin-top: 26px; }
@media (max-width: 1180px) {
.lg-cal { grid-column: span 12; }
.lg-week, .lg-hist { grid-column: span 6; }
.lg-kpis { grid-template-columns: repeat(3, 1fr); }
.lg-kpi:nth-child(3) { border-right: 0; }
.lg-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
.lg-w { padding: 20px; }
.lg-grid { gap: 10px; }
.lg-week, .lg-hist, .lg-stats .lg-range { grid-column: span 12; }
.lg-stats .lg-ring, .lg-stats .lg-pf { grid-column: span 6; }
.lg-kpis { grid-template-columns: repeat(2, 1fr); }
.lg-kpi { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); padding: 18px; }
.lg-kpi:nth-child(2n) { border-right: 0 !important; }
.lg-kpi:nth-last-child(-n+2) { border-bottom: 0; }
.lg-daybars { gap: 2px; height: 150px; }
.lg-cells { grid-template-rows: repeat(5, 18px); grid-auto-columns: 18px; gap: 5px; }
.lg-seg button { padding: 9px 14px; }
}
.about-portrait img { filter: grayscale(1) contrast(1.05) brightness(.94); transition: filter .9s ease; }
.about-portrait:hover img, .about-portrait:active img { filter: grayscale(0) contrast(1.02); }
.lab { padding: 150px 0 40px; --lab-hi: #efeaff; --lab-mid: var(--accent); --lab-lo: #3a2a8a; }
.lab .up { color: #3ddc97; } .lab .down { color: #ff5c6c; }
.lab-mono { font: 500 11px/1.4 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lab-chip { font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; white-space: nowrap; }
.lab-duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; }
.lab-w { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, #0d0d10, #070708); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color .35s ease; }
.lab-w:hover { border-color: var(--line-strong); }
.lab-w > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lab-plot { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.lab-ylab { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 10px; color: var(--faint); }
.lab-xlab { grid-column: 2; text-align: center; font-size: 10px; color: var(--faint); }
.lab-grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; aspect-ratio: 26 / 12; cursor: crosshair; }
.lab-grid i { border-radius: 2px; background: color-mix(in oklab, var(--lab-hi) calc(max(var(--v) - .62, 0) * 260%), color-mix(in oklab, var(--lab-mid) calc(var(--v) * 100%), #111116)); outline: 1px solid transparent; transition: outline-color .15s; }
.lab-grid i:hover { outline-color: #fff; position: relative; z-index: 2; }
.motion-ok .lab-surface .lab-grid i { opacity: 0; transform: scale(.4); transition: opacity .6s ease, transform .8s var(--ease-out); transition-delay: calc(var(--v) * .9s); }
.motion-ok .lab-surface.in .lab-grid i { opacity: 1; transform: none; }
.lab-ring { position: absolute; z-index: 3; left: calc((var(--ci, 0) + .5) / var(--cols) * 100%); top: calc((var(--cj, 0) + .5) / var(--rows) * 100%); width: calc(3 / var(--cols) * 100%); height: calc(3 / var(--rows) * 100%); transform: translate(-50%, -50%); border: 1.5px solid #fff; border-radius: 6px; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 50%, transparent); opacity: 0; pointer-events: none; transition: left .7s var(--ease-out), top .7s var(--ease-out), opacity .4s; }
.lab-surface[data-picked] .lab-ring { opacity: 1; }
.lab-tip { position: absolute; z-index: 4; left: calc((var(--ci, 0) + .5) / var(--cols) * 100%); top: calc(var(--cj, 0) / var(--rows) * 100%); transform: translate(-50%, calc(-100% - 8px)); font: 500 11px/1 'IBM Plex Mono', monospace; white-space: nowrap; padding: 8px 10px; border-radius: 8px; background: #16161b; border: 1px solid var(--line-strong); color: var(--text); pointer-events: none; }
.lab-tip.flip { transform: translate(-90%, calc(-100% - 8px)); }
.lab-pick { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.lab-pick button, .lab-resample { padding: 10px 17px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.02); font-size: 13.5px; color: var(--text); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.lab-pick button:hover, .lab-resample:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lab-pick button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #0b0a12; }
.lab-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 16px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lab-read > div { background: #0b0b0e; padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.lab-read dt { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.lab-read dd { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.lab-read-4 { grid-template-columns: repeat(4, 1fr); }
.lab-read-4 dd { font-size: 18px; }
.lab-note { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 14px; min-height: 4.6em; }
.lab-boot .lab-note { min-height: 0; }
.lab-chart { position: relative; height: clamp(230px, 24vw, 320px); margin-top: 16px; }
.lab-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lab-start { stroke: rgba(255,255,255,.2); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.lab-paths polyline { fill: none; stroke: color-mix(in srgb, var(--accent) 11%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.lab-band { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.lab-mid { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.lab-actual { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; stroke-linejoin: round; }
.motion-ok .lab-boot polyline { stroke-dashoffset: 4; transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: calc(var(--k, 0) * 25ms); }
.motion-ok .lab-boot .lab-mid { transition-delay: .9s; } .motion-ok .lab-boot .lab-actual { transition-delay: 1.2s; transition-duration: 2s; }
.motion-ok .lab-boot .lab-band { opacity: 0; transition: opacity 1s ease .8s; }
.motion-ok .lab-boot.in .lab-chart:not(.pending) polyline { stroke-dashoffset: 0; }
.motion-ok .lab-boot.in .lab-chart:not(.pending) .lab-band { opacity: 1; }
.lab-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.lab-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 7px; vertical-align: middle; }
.lab-legend i.a { background: #fff; } .lab-legend i.m { background: var(--accent); } .lab-legend i.b { height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.lab-resample { margin-left: auto; }
@media (max-width: 1080px) { .lab-duo { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
.lab { padding-top: 110px; }
.lab-w { padding: 20px; }
.lab-read, .lab-read-4 { grid-template-columns: repeat(2, 1fr); }
.lab-read > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lab-grid { gap: 1px; }
.lab-resample { margin-left: 0; }
}
.tools-page { --card: #0c0c0f; --card-2: #121216; --hover: #1a1a20; --line-3: rgba(255,255,255,.2); --accent-ink: #0b0a12;
--mono: 'IBM Plex Mono', monospace; --sans: var(--font); --up: #3ddc97; --down: #ff5c6c; --r-lg: 20px; --bg: #050506; padding-bottom: 40px; }
.tools-page .up { color: var(--up); } .tools-page .down { color: var(--down); }
.tools-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -20px 0 90px; }
.tools-tabs a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.02); font-size: 14.5px; color: var(--text); transition: border-color .25s, background-color .25s; }
.tools-tabs a span { font: 500 10.5px var(--mono); color: var(--faint); }
.tools-tabs a small { font: 500 10.5px var(--mono); color: var(--accent); padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tools-tabs a:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tools-block { padding-bottom: 120px; scroll-margin-top: 100px; }
.tools-block-head { display: grid; gap: 14px; margin-bottom: 30px; max-width: 720px; }
.tools-block-head h2 { font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -.05em; line-height: 1; }
.tools-block-head p { max-width: 560px; }
.tools-page .tl-card, .tools-page .analyzer-card { background: linear-gradient(180deg, #0d0d10, #070708); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.tools-page .tl-card h2 { letter-spacing: -.035em; }
.tools-page .lx-bar { top: 84px; background: #030304; }
.tools-page .lx-item dd, .tools-page .at-fine { color: var(--muted); }
.analyzer-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.analyzer-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 50%, color-mix(in srgb, var(--aura-1) 22%, transparent), transparent 70%); pointer-events: none; }
.analyzer-copy { position: relative; display: grid; gap: 16px; justify-items: start; }
.analyzer-copy h2 { font-size: clamp(44px, 6vw, 88px); letter-spacing: -.055em; line-height: .95; }
.analyzer-copy p { max-width: 420px; }
.soon-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.soon-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.motion-ok .soon-badge i { animation: soon-pulse 2s ease-in-out infinite; }
@keyframes soon-pulse { 50% { opacity: .25; transform: scale(.7); } }
.analyzer-visual { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 200px; filter: blur(.4px); -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.analyzer-visual i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); opacity: .55; }
.motion-ok .analyzer-visual i { animation: soon-bar 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -90ms); transform-origin: bottom; }
@keyframes soon-bar { 50% { transform: scaleY(.55); } }
@media (max-width: 900px) { .analyzer-card { grid-template-columns: 1fr; } .analyzer-visual { height: 120px; } }
@media (max-width: 640px) { .tools-page .lx-bar { top: 72px; } .tools-tabs { margin-bottom: 60px; } .tools-block { padding-bottom: 90px; } }
.tl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-card { display: flex; flex-direction: column; gap: 22px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); scroll-margin-top: 20px; }
.tl-card:hover { border-color: var(--line-strong); }
.tl-wide { grid-column: 1 / -1; }
.tl-card header { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
.tl-n { grid-row: span 2; font: 500 11px var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); }
.tl-card h2 { font-size: 24px; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.tl-card header p { font-size: 14px; color: var(--muted); }
.tl-body { display: grid; gap: 20px; }
.tl-wide .tl-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.tl-wide .tl-bars, .tl-wide .tl-cap { grid-column: 1 / -1; }
.tl-inputs { display: grid; gap: 16px; }
.tl-field { display: grid; gap: 8px; }
.tl-label { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tl-input { display: flex; align-items: center; height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); transition: border-color .2s; }
.tl-input:focus-within { border-color: var(--accent); }
.tl-input input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 500 18px var(--sans); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.tl-input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tl-input em { font: 500 11px var(--mono); color: var(--faint); text-transform: uppercase; }
.tl-field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: none; margin: 0; cursor: pointer; }
.tl-field input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
.tl-field input[type=range]::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
.tl-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--accent); }
.tl-field input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chips button { display: grid; gap: 1px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 13.5px; font-weight: 600; text-align: left; transition: all .2s; }
.tl-chips small { font: 500 10px var(--mono); color: var(--faint); }
.tl-chips button:hover { border-color: var(--line-3); }
.tl-chips button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tl-chips button[aria-pressed=true] small { color: rgba(13,18,0,.6); }
.tl-outs { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tl-out { flex: 1 1 110px; display: grid; gap: 8px; padding: 14px 16px; background: var(--bg); align-content: start; }
.tl-out strong { font-size: 20px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tl-hero { flex-basis: 100%; padding: 18px 16px; }
.tl-hero strong { font-size: clamp(36px, 4vw, 52px); letter-spacing: -.045em; line-height: 1; color: var(--accent); }
.tl-hero strong.up { color: var(--up); } .tl-hero strong.down { color: var(--down); }
.tl-hero strong.tl-zero { color: var(--down); }
.tl-split { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; }
.tl-split i { background: var(--up); transition: flex .4s var(--ease-out); } .tl-split i + i { background: var(--down); }
.tl-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; }
.tl-bars i { position: relative; flex: 1; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--hover); transition: height .45s var(--ease-out), background-color .2s; }
.tl-bars i.on { background: var(--accent); }
.tl-bars i:hover { background: var(--line-3); }
.tl-bars i b { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 500 10px var(--mono); color: var(--faint); }
.tl-bars i.on b { color: var(--accent); }
.tl-bars i:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 var(--mono); padding: 7px 9px; border-radius: 8px; background: var(--hover); border: 1px solid var(--line-strong); z-index: 5; }
.tl-cap { font-size: 13px; color: var(--muted); margin-top: 18px; }
.tl-curve { width: 100%; height: 140px; overflow: visible; }
.tl-curve-line { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.tl-curve-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.at-fine { margin-top: 18px; font-size: 13px; color: var(--faint); max-width: 70ch; }
.lx-bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 0; margin-bottom: 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
.lx-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; min-width: 260px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--faint); transition: border-color .2s; }
.lx-search:focus-within { border-color: var(--accent); color: var(--accent); }
.lx-search svg { width: 16px; height: 16px; }
.lx-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: 400 15px var(--sans); }
.lx-letters { display: flex; flex-wrap: wrap; gap: 2px; }
.lx-letters a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font: 500 12px var(--mono); color: var(--muted); transition: all .2s; }
.lx-letters a:hover { background: var(--accent); color: var(--accent-ink); }
.lx-count { margin-left: auto; font: 500 11px var(--mono); color: var(--faint); text-transform: uppercase; }
.lx-item { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; transition: background-color .2s; }
.lx-item:hover dt { color: var(--accent); }
.lx-item dt { display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; transition: color .2s; }
.lx-letter { width: 18px; font: 500 11px var(--mono); color: var(--faint); scroll-margin-top: 90px; }
.lx-item dd { font-size: 16px; line-height: 1.65; color: #bdbdba; max-width: 64ch; }
.lx-link { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.lx-link:hover { color: var(--accent); }
.lx-empty { padding: 40px 0; color: var(--muted); }
@media (max-width: 1180px) {
.tl-grid { grid-template-columns: 1fr; } .tl-wide .tl-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.lx-item { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 640px) {
.tl-card, .at-quote { padding: 20px; }
.lx-search { min-width: 0; flex: 1; }
.lx-count { display: none; }
.tl-bars { gap: 2px; }
.tl-bars i b { font-size: 8px; }
}
.tools-page .tl-chips button { background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.tools-page .tl-chips button:hover { border-color: var(--line-3); background: rgba(255,255,255,.03); }
.tools-page .tl-chips button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tools-page .tl-chips button small { color: var(--faint); }
.tools-page .tl-chips button[aria-pressed=true] small { color: rgba(11,10,18,.6); }
.tools-page dl, .tools-page dd, .tools-page ol, .tools-page ul { margin: 0; padding: 0; }
.tools-page .lx-bar { gap: 12px 16px; }
.lx-toggle { height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.lx-toggle:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lx-groups { display: grid; gap: 10px; margin-top: 14px; }
.lx-cat { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #070708); overflow: hidden; transition: border-color .3s; }
.lx-cat:hover, .lx-cat[open] { border-color: var(--line-strong); }
.lx-cat summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.lx-cat summary::-webkit-details-marker { display: none; }
.lx-cat-n { font: 500 11px var(--mono); color: var(--faint); }
.lx-cat-name { display: grid; gap: 3px; min-width: 0; }
.lx-cat-name b { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.03em; color: var(--text); }
.lx-cat-name small { font-size: 13.5px; color: var(--muted); }
.lx-cat-peek { font-size: 13px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; transition: opacity .3s; }
.lx-cat[open] .lx-cat-peek { opacity: 0; }
.lx-cat-count { font: 500 11px var(--mono); color: var(--accent); padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lx-chev { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; position: relative; transition: transform .4s var(--ease-out), border-color .2s; }
.lx-chev::before, .lx-chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--text); border-radius: 2px; transition: transform .4s var(--ease-out); }
.lx-chev::after { transform: rotate(90deg); }
.lx-cat[open] .lx-chev { transform: rotate(180deg); border-color: var(--accent); }
.lx-cat[open] .lx-chev::after { transform: rotate(0deg); }
.lx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border-top: 1px solid var(--line); }
.tools-page .lx-grid .lx-item { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 20px 24px; border: 0; background: #09090b; }
.lx-grid .lx-item:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
.lx-grid .lx-item dt { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.lx-grid .lx-item dd { font-size: 15px; line-height: 1.6; }
.motion-ok .lx-cat[open] .lx-grid { animation: lx-open .45s var(--ease-out); }
@keyframes lx-open { from { opacity: 0; transform: translateY(-6px); } }
.fx-groups { display: grid; gap: 44px; }
.fx-group > header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.fx-group h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.fx-group header p { font-size: 14px; color: var(--muted); }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; align-items: start; }
.fx-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #070708); transition: border-color .3s; }
.fx-card:hover, .fx-card[open] { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.fx-card summary { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n name more" "fx fx fx"; gap: 14px 12px; align-items: center; padding: 20px 22px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.fx-card summary::-webkit-details-marker { display: none; }
.fx-n { grid-area: n; font: 500 10.5px var(--mono); padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.fx-name { grid-area: name; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.fx-more { grid-area: more; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); transition: color .2s; }
.fx-card:hover .fx-more, .fx-card[open] .fx-more { color: var(--accent); }
.fx-card[open] .fx-more::after { content: " \00D7"; }
.fx-formula { grid-area: fx; display: block; white-space: nowrap; line-height: 2.2; min-height: 64px; padding: 14px 16px; border-radius: 12px; background: #050506; border: 1px solid var(--line); font: 400 clamp(17px, 1.6vw, 20px)/1.2 var(--font); letter-spacing: 0; color: var(--text); overflow-x: auto; }
.fx-formula var, .fx-body var { font-style: italic; color: #d9d3ff; }
.fx-formula sub { font-size: .6em; color: var(--muted); }
.fx-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .88em; margin: 0 .15em; }
.fx-frac > span { padding: 0 .25em; white-space: nowrap; }
.fx-frac > span:first-child { border-bottom: 1.5px solid currentColor; padding-bottom: .12em; }
.fx-frac > span:last-child { padding-top: .12em; }
.fx-bar { display: inline-block; border-top: 1.5px solid currentColor; line-height: 1.1; padding-top: .05em; }
.fx-sqrt { display: inline-flex; align-items: flex-start; }
.fx-sqrt > span { border-top: 1.5px solid currentColor; padding: .05em .1em 0; margin-left: .05em; }
.fx-body { display: grid; gap: 14px; padding: 0 22px 22px; }
.motion-ok .fx-card[open] .fx-body { animation: lx-open .4s var(--ease-out); }
.fx-why { font-size: 14.5px; line-height: 1.6; color: #c4c4cc; }
.fx-vars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fx-vars div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 9px 12px; background: #09090b; font-size: 13.5px; }
.fx-vars dt { font: italic 500 13px var(--font); color: #d9d3ff; }
.fx-vars dd { color: var(--muted); }
.fx-ex { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.fx-ex > span:first-child { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.fx-ex b { color: var(--accent); font-weight: 600; }
.fx-tool { justify-self: start; font-size: 13.5px; color: var(--text); border-bottom: 1px solid var(--line-3); padding-bottom: 2px; }
.fx-tool:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) {
.lx-cat summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.lx-cat-peek { display: none; }
.lx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.lx-cat summary { padding: 18px; gap: 12px; }
.lx-cat-name small { display: none; }
.tools-page .lx-grid .lx-item { padding: 18px; }
.fx-group > header { flex-direction: column; gap: 4px; }
.lx-toggle { display: none; }
}
.fx-v { white-space: nowrap; }
.fx-frac { line-height: 1.25; }
.fx-ex-t { font: 400 14.5px/1.5 var(--font); color: var(--muted); letter-spacing: 0; text-transform: none; }
.ex-list { display: grid; gap: 14px; }
.ex-card { display: grid; gap: 22px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #070708); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); scroll-margin-top: 100px; }
.ex-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.ex-tag { font: 500 11px var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); margin-top: 6px; }
.ex-head h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.ex-head p { margin-top: 8px; max-width: 620px; font-size: 15px; line-height: 1.6; }
.ex-chip { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; white-space: nowrap; }
.ex-zero { stroke: rgba(255,255,255,.14); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.ex-curves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ex-curve { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #09090b; color: var(--text); text-align: left; cursor: pointer; transition: border-color .25s, transform .35s var(--ease-out), background-color .25s, opacity .4s; }
.ex-curve:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-3px); background: #0e0d14; }
.ex-curve-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.ex-curve-top b { font: 600 13px var(--mono); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.06); }
.ex-verdict { font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.ex-curve svg { width: 100%; height: 110px; display: block; overflow: visible; }
.ex-curve polyline { fill: none; stroke: #e8e6f5; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 4 4; }
.motion-ok .ex-curve polyline { stroke-dashoffset: 4; animation: ex-draw 1.4s var(--ease-out) forwards; }
@keyframes ex-draw { to { stroke-dashoffset: 0; } }
.ex-curve-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.ex-curve-stats b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.revealed .ex-curve { cursor: default; transform: none; }
.revealed .ex-curve.is-flip { opacity: .55; }
.revealed .ex-curve.is-flip .ex-verdict { color: var(--muted); }
.revealed .ex-curve.is-edge { border-color: var(--up); background: rgba(61,220,151,.05); opacity: 1; }
.revealed .ex-curve.is-edge polyline { stroke: var(--up); }
.revealed .ex-curve.is-edge .ex-verdict { color: var(--up); }
.revealed .ex-curve.picked { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
.revealed .ex-curve.picked.is-flip { border-color: var(--down); }
.revealed .ex-curve.picked.is-flip .ex-verdict { color: var(--down); }
.ex-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.ex-reveal { flex: 1 1 420px; font-size: 15px; line-height: 1.6; color: #c4c4cc; }
.ex-reveal b { font-weight: 600; }
.ex-actions { display: flex; align-items: center; gap: 14px; }
.ex-score { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.ex-btn { height: 42px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; }
.ex-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ex-btn-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; height: 48px; padding: 0 24px; font-size: 15px; }
.ex-btn-solid:hover { background: #c9bdff; color: var(--accent-ink); }
.ex-bt { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.ex-bt-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: 60px 20px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; }
.ex-bt-empty p { font-size: 13.5px; }
.ex-bt-main { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #09090b; }
.ex-bt-chart { flex: 1; width: 100%; min-height: 240px; height: auto; display: block; overflow: visible; }
.ex-oos-bg { fill: color-mix(in srgb, var(--accent) 5%, transparent); }
.ex-cut { stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ex-crowd polyline { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ex-best-is, .ex-best-oos { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 4 4; stroke-dashoffset: 4; }
.ex-best-is { stroke: var(--accent); }
.ex-best-oos.up { stroke: var(--up); } .ex-best-oos.down { stroke: var(--down); }
.ex-bt.drawn .ex-best-is { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out); }
.ex-bt.drawn .ex-best-oos { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out) 1.1s; }
.ex-bt-labels { display: flex; justify-content: space-between; margin-top: 8px; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ex-bt-labels span:last-child { color: var(--accent); }
.ex-bt-side { display: grid; gap: 12px; align-content: start; }
.ex-bt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ex-bt-stats div { display: grid; gap: 6px; padding: 12px 14px; background: #09090b; align-content: start; }
.ex-bt-stats dt { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ex-bt-stats dd { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ex-scatter-box { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #09090b; }
.ex-scatter { width: 100%; height: auto; display: block; }
.ex-dot { fill: rgba(255,255,255,.35); }
.ex-dot-best { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.ex-scatter-box figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ex-scatter-box b { color: var(--text); }
.ex-bt-verdict { grid-column: 1 / -1; font-size: 15px; line-height: 1.6; color: var(--text); padding: 14px 16px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 0 10px 10px 0; }
.lab-more { display: flex; justify-content: center; margin-top: 34px; }
.lx-try { color: var(--accent) !important; }
@media (max-width: 1080px) { .ex-curves { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-bt { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ex-head { grid-template-columns: auto minmax(0, 1fr); } .ex-chip { grid-column: 2; justify-self: start; } .ex-curve { padding: 12px; } .ex-curve svg { height: 80px; } .ex-curve-stats { font-size: 11.5px; gap: 2px 10px; } }
.ex-head h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ex-help { width: 26px; height: 26px; flex-shrink: 0; display: inline-grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 50%; background: transparent; color: var(--accent); font: 600 13px/1 var(--font); letter-spacing: 0; cursor: pointer; transition: background-color .2s, color .2s, transform .3s var(--ease-out); }
.ex-help:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); transform: scale(1.08); }
.ex-help[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
.ex-help-panel { margin-top: 16px; max-width: 760px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, #09090b); font-family: 'Heebo', 'Rubik', Arial, sans-serif; text-align: right; }
.ex-help-panel p, .ex-help-panel li { font-size: 15px; line-height: 1.75; color: #d4d4dc; margin: 0; }
.ex-help-panel p + p, .ex-help-panel ol + p, .ex-help-panel p + ol { margin-top: 10px; }
.ex-help-panel b { color: #fff; font-weight: 600; }
.ex-help-panel ol { margin: 6px 0 0; padding: 0 20px 0 0; list-style: decimal; }
.ex-help-panel li + li { margin-top: 4px; }
.motion-ok .ex-help-panel:not([hidden]) { animation: lx-open .35s var(--ease-out); }
.tools-page[data-tools] .tools-block { display: none; }
.tools-page[data-active="calculators"] #calculators, .tools-page[data-active="experiments"] #experiments, .tools-page[data-active="formulas"] #formulas, .tools-page[data-active="lexicon"] #lexicon, .tools-page[data-active="analyzer"] #analyzer { display: block; }
.motion-ok .tools-page[data-active] .tools-block { animation: tt-in .5s var(--ease-out); }
@keyframes tt-in { from { opacity: 0; transform: translateY(10px); } }
.tools-page .tools-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: -10px 0 26px; scroll-margin-top: 100px; }
.tools-page .tools-tabs a { position: relative; display: grid; align-content: start; gap: 12px; padding: 22px; min-height: 190px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #0d0d10, #070708); color: var(--text); transition: border-color .3s, background-color .3s, transform .4s var(--ease-out); }
.tools-page .tools-tabs a:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-3px); }
.tt-n { font: 500 10.5px var(--mono); color: var(--faint); }
.tt-name { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.tt-name small { font: 500 10.5px var(--mono); letter-spacing: 0; color: var(--accent); padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tools-tabs em { font-style: normal; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tools-hint { text-align: center; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 60px; }
.tools-page[data-active]:not([data-active=""]) .tools-hint { display: none; }
.tools-page[data-active]:not([data-active=""]) .tools-tabs { position: sticky; top: 92px; z-index: 12; margin-bottom: 70px; padding: 6px; gap: 4px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(5,5,6,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tools-page[data-active]:not([data-active=""]) .tools-tabs a { min-height: 0; padding: 12px 14px; gap: 0; border-color: transparent; background: transparent; transform: none; }
.tools-page[data-active]:not([data-active=""]) .tools-tabs em, .tools-page[data-active]:not([data-active=""]) .tt-n { display: none; }
.tools-page[data-active]:not([data-active=""]) .tt-name { font-size: 15px; justify-content: center; }
.tools-page[data-active]:not([data-active=""]) .tools-tabs a:hover { background: rgba(255,255,255,.04); }
.tools-page .tools-tabs a[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; }
.tools-page[data-active]:not([data-active=""]) .lx-bar { top: 160px; }
@media (max-width: 1080px) { .tools-page .tools-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools-page .tools-tabs a:last-child { grid-column: 1 / -1; } .tools-page .tools-tabs a { min-height: 150px; } }
@media (max-width: 900px) {
.tools-page[data-active]:not([data-active=""]) .tools-tabs { display: flex; overflow-x: auto; scrollbar-width: none; top: 78px; }
.tools-page[data-active]:not([data-active=""]) .tools-tabs a { flex: 0 0 auto; }
.tools-page[data-active]:not([data-active=""]) .lx-bar { top: 146px; }
}
@media (max-width: 640px) { .tools-page .tools-tabs { grid-template-columns: 1fr; } .tools-page .tools-tabs a { min-height: 0; } }
.tools-page .tools-tabs a .tt-name { font-family: var(--font); color: var(--text); }
.tools-page .tools-tabs a[aria-current="true"] .tt-name { color: #fff; }
.tools-page[data-active]:not([data-active=""]) .tools-tabs a:not([aria-current="true"]) .tt-name { color: var(--muted); }
@media (max-width: 900px) { .tools-page[data-active]:not([data-active=""]) .tools-tabs { flex-wrap: nowrap; justify-content: flex-start; } }
.tools-tabs.tt-morph { animation: tt-morph .45s var(--ease-out); }
@keyframes tt-morph { from { opacity: .3; transform: scale(.97); } }
.tools-page[data-active]:not([data-active=""]) .tools-tabs a[aria-current="true"]::after { content: "×"; margin-left: 8px; font-size: 14px; color: var(--muted); }
.tools-page[data-active]:not([data-active=""]) .tools-tabs a[aria-current="true"] { display: flex; align-items: center; justify-content: center; }
.tools-page .tools-tabs a .tt-name { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.tools-page[data-active]:not([data-active=""]) .tools-tabs a .tt-name { font-size: 15px; letter-spacing: -.01em; }
.analyzer-locked { margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: #050506; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.analyzer-locked img { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.copy-page { --card: #0c0c0f; --mono: 'IBM Plex Mono', monospace; --up: #3ddc97; --warn: #f5c36b; --down: #ff5c6c; --r: 20px; padding-bottom: 60px; }
.copy-page .page-intro { padding-bottom: 60px; }
.copy-page h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.25; }
.copy-page p { color: var(--muted); }
.cp-hero { display: grid; justify-items: center; gap: 26px; margin-bottom: 150px; }
.cp-mirror { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .55fr) minmax(0, 1fr); align-items: center; width: min(920px, 100%); margin: 0; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--aura-1) 16%, transparent), transparent 70%), linear-gradient(180deg, #0d0d10, #060607); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.cp-mirror figcaption { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.cp-acct { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 18px; background: #09090b; }
.cp-acct-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; color: var(--text); }
.cp-acct-head em { font: 500 9.5px var(--mono); font-style: normal; letter-spacing: .12em; color: var(--faint); }
.cp-acct svg { width: 100%; height: 74px; overflow: visible; }
.cp-acct path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cp-dst path { stroke: color-mix(in srgb, var(--accent) 70%, #fff); opacity: .85; }
.cp-order { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); font: 500 11px var(--mono); letter-spacing: .06em; }
.cp-side { color: var(--up); }
.cp-qty { color: var(--text); }
.cp-qty::before { content: 'QTY '; color: var(--faint); }
.cp-state { justify-self: end; color: var(--accent); }
.cp-wire { position: relative; height: 2px; margin: 0 -1px; background: linear-gradient(90deg, var(--line-strong), color-mix(in srgb, var(--accent) 50%, transparent), var(--line-strong)); }
.cp-wire span { position: absolute; top: 14px; left: 50%; translate: -50% 0; font: 500 9px var(--mono); letter-spacing: .14em; color: var(--faint); white-space: nowrap; }
.cp-wire i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); opacity: 0; }
.motion-ok .cp-wire i { animation: cp-pulse 2.7s linear infinite; }
.motion-ok .cp-wire i:nth-child(2) { animation-delay: -.9s; }
.motion-ok .cp-wire i:nth-child(3) { animation-delay: -1.8s; }
@keyframes cp-pulse { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.motion-ok .cp-acct path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: cp-draw 5.2s ease-in-out infinite; }
.motion-ok .cp-dst path { animation-delay: .35s; }
@keyframes cp-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.motion-ok .cp-order { animation: cp-fill 5.2s ease-in-out infinite; }
.motion-ok .cp-dst .cp-order { animation-delay: .35s; }
@keyframes cp-fill { 0%, 30% { opacity: .25; } 40%, 88% { opacity: 1; } 100% { opacity: .25; } }
.cp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cp-pills li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--text); background: rgba(255,255,255,.02); }
.cp-pills li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.cp-block { padding-bottom: 140px; }
.cp-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 38px; }
.cp-head h2 { font-size: clamp(36px, 4.6vw, 66px); letter-spacing: -.05em; line-height: 1; }
.cp-head p:not(.eyebrow) { max-width: 580px; font-size: 1.0625rem; line-height: 1.6; }
.cp-compare { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #0d0d10, #070708); }
.cp-compare-head, .cp-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); }
.cp-compare-head span { padding: 18px 24px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cp-compare-head span:last-child { color: var(--accent); }
.cp-row { border-top: 1px solid var(--line); }
.cp-row > span { padding: 20px 24px; font-size: 15.5px; line-height: 1.5; }
.cp-k { color: var(--text); font-weight: 500; }
.cp-a { color: var(--faint); }
.cp-b { color: var(--text); background: color-mix(in srgb, var(--accent) 5%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 22%, transparent); }
.cp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.cp-steps li { position: relative; display: grid; align-content: start; gap: 12px; padding: 26px 22px 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: border-color .3s, transform .4s var(--ease-out); }
.cp-steps li:not(:last-child) .cp-n::after { content: ''; position: absolute; top: 38px; right: -13px; width: 14px; height: 1px; background: color-mix(in srgb, var(--accent) 50%, transparent); transition: background-color .4s, box-shadow .4s; }
.motion-ok .cp-steps li[data-reveal] { transition: opacity 1.1s ease, translate 1.2s var(--ease-out), transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out); transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s, 0s, 0s; }
.cp-n { font: 500 11px var(--mono); color: var(--accent); letter-spacing: .08em; }
.cp-steps p { font-size: 14.5px; line-height: 1.55; }
.cp-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-ctl { display: grid; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.cp-who { justify-self: start; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cp-you .cp-who { color: var(--up); background: color-mix(in srgb, var(--up) 11%, transparent); }
.cp-me .cp-who { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cp-ctl p { font-size: 15px; line-height: 1.5; }
.cp-sizer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #0d0d10, #070708); }
.cp-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 30px; }
.cp-field { display: grid; gap: 8px; align-content: start; }
.cp-field > span { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-field small { font-size: 12.5px; color: var(--faint); }
.cp-field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #050506; color: var(--text); font: 500 17px var(--mono); }
.cp-field input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.cp-mult { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: #050506; }
.cp-mult button { padding: 8px 0; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 500 14px var(--mono); cursor: pointer; transition: background-color .2s, color .2s; }
.cp-mult button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.cp-out { display: grid; align-content: center; gap: 0; margin: 0; padding: 18px 30px; border-left: 1px solid var(--line); background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--aura-1) 14%, transparent), transparent 70%); }
.cp-out > div { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cp-out dt { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-out dd { display: flex; align-items: baseline; gap: 12px; margin: 0; direction: ltr; }
.cp-out b { font: 600 clamp(28px, 3vw, 38px) var(--font); letter-spacing: -.04em; color: var(--text); }
.cp-out dd span { font: 500 12.5px var(--mono); color: var(--muted); }
.cp-verdict { grid-column: 1 / -1; margin: 0; padding: 16px 30px; border-top: 1px solid var(--line); font-size: 15px; }
.cp-verdict::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-inline-end: 10px; border-radius: 50%; vertical-align: 1px; background: currentColor; }
.cp-verdict[data-tone="ok"] { color: var(--up); }
.cp-verdict[data-tone="warn"] { color: var(--warn); }
.cp-verdict[data-tone="bad"] { color: var(--down); }
.cp-note { margin-top: 16px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.cp-risks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: r; border-top: 1px solid var(--line); }
.cp-risks li { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.4fr) 24px; gap: 0 20px; align-items: baseline; padding: 26px 16px; margin: 0 -16px; border-bottom: 1px solid var(--line); border-radius: 14px; counter-increment: r; cursor: pointer; outline: none; transition: background-color .4s, box-shadow .4s; }
.cp-risks li::before { transition: color .4s, text-shadow .4s; }
.cp-risks h3, .cp-risks li > p { transition: color .4s; }
.cp-plus { position: relative; align-self: center; width: 12px; height: 12px; justify-self: end; }
.cp-plus::before, .cp-plus::after { content: ''; position: absolute; top: 50%; left: 0; width: 12px; height: 1.5px; margin-top: -.75px; background: var(--down); transition: transform .5s var(--ease-out); }
.cp-plus::after { transform: rotate(90deg); }
.cp-more { grid-column: 2 / 4; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease-out), opacity .4s, margin .6s var(--ease-out); }
.cp-more > p { overflow: hidden; margin: 0; padding-inline-start: 16px; border-inline-start: 2px solid color-mix(in srgb, var(--down) 60%, transparent); color: var(--text) !important; font-size: 15.5px; max-width: 760px; }
.cp-risks li.open, .cp-risks li:focus-visible { background: color-mix(in srgb, var(--down) 5%, transparent); }
:is(.cp-risks li.open, .cp-risks li:focus-visible) .cp-more { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
:is(.cp-risks li.open, .cp-risks li:focus-visible) .cp-plus::after { transform: rotate(0); }
@media (hover: hover) and (pointer: fine) {
.cp-risks li:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--down) 8%, transparent), transparent 70%); box-shadow: inset 2px 0 0 var(--down); }
html[dir="rtl"] .cp-risks li:hover { background: linear-gradient(270deg, color-mix(in srgb, var(--down) 8%, transparent), transparent 70%); box-shadow: inset -2px 0 0 var(--down); }
.cp-risks li:hover::before { color: color-mix(in srgb, var(--down) 70%, #fff); text-shadow: 0 0 14px var(--down); }
.cp-risks li:hover h3 { color: color-mix(in srgb, var(--down) 25%, #fff); }
.cp-risks li:hover .cp-more { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.cp-risks li:hover .cp-plus::after { transform: rotate(0); }
}
.cp-risks li::before { content: '0' counter(r); font: 500 11px var(--mono); color: var(--down); letter-spacing: .08em; }
.cp-risks p { font-size: 16px; line-height: 1.55; }
.cp-costs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cp-costs > div { display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.cp-costs p { font-size: 14.5px; line-height: 1.5; }
.cp-costs > div { border-style: solid; background: linear-gradient(180deg, #0d0d10, #070708); }
.cp-costs .cp-k { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cp-val { font: 600 clamp(30px, 3vw, 42px)/1.05 var(--font); letter-spacing: -.045em; color: var(--text); direction: ltr; unicode-bidi: isolate; }
.cp-costs > div:nth-child(2) .cp-val { color: var(--accent); }
.cp-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cp-rules li { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 26px; border: 1px solid color-mix(in srgb, var(--down) 22%, var(--line)); border-radius: var(--r); background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--down) 7%, transparent), transparent 70%), var(--card); overflow: hidden; }
.cp-rn { font: 600 64px/1 var(--font); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--down) 55%, transparent); margin-bottom: 6px; }
.cp-rules h3 { font-size: 21px; }
.cp-rules p { font-size: 15px; line-height: 1.55; }
.cp-tbd { justify-self: start; margin-top: 6px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); }
.cp-faq { display: grid; gap: 10px; max-width: 900px; }
.cp-faq details { border: 1px solid var(--line); border-radius: 18px; background: var(--card); transition: border-color .3s; }
.cp-faq details[open], .cp-faq details:hover { border-color: var(--line-strong); }
.cp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; font-size: 17px; color: var(--text); -webkit-user-select: none; user-select: none; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary i { position: relative; flex: none; width: 14px; height: 14px; }
.cp-faq summary i::before, .cp-faq summary i::after { content: ''; position: absolute; top: 50%; left: 0; width: 14px; height: 1.5px; margin-top: -.75px; background: var(--accent); transition: transform .3s var(--ease-out); }
.cp-faq summary i::after { transform: rotate(90deg); }
.cp-faq details[open] summary i::after { transform: rotate(0); }
.cp-faq details p { padding: 0 24px 22px; max-width: 720px; font-size: 15.5px; line-height: 1.6; }
.cp-close { display: grid; justify-items: center; gap: 22px; padding: 90px 20px; margin-bottom: 60px; text-align: center; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--aura-1) 18%, transparent), transparent 70%), #070708; }
.cp-close h2 { font-size: clamp(40px, 5.4vw, 78px); letter-spacing: -.055em; line-height: .98; }
.cp-close p { max-width: 520px; font-size: 1.0625rem; }
.cp-close .hc-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.cp-legal { max-width: 900px; margin: 0 auto; font-size: 12.5px; line-height: 1.7; color: var(--faint) !important; text-align: center; }
@media (max-width: 1080px) {
.cp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-steps li:last-child { grid-column: 1 / -1; }
.cp-steps li .cp-n::after { display: none; }
.cp-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-rules { grid-template-columns: 1fr; }
.cp-sizer { grid-template-columns: 1fr; }
.cp-out { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
.cp-hero { margin-bottom: 100px; }
.cp-mirror { grid-template-columns: 1fr; gap: 0; padding-bottom: 40px; }
.cp-wire { width: 2px; height: 64px; margin: 0 auto; background: linear-gradient(180deg, var(--line-strong), color-mix(in srgb, var(--accent) 50%, transparent), var(--line-strong)); }
.cp-wire span { top: 50%; left: 16px; translate: 0 -50%; }
.cp-wire i { left: 50% !important; margin: 0 0 0 -4px; top: 0; }
@keyframes cp-pulse-v { 0% { top: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
.motion-ok .cp-wire i { animation-name: cp-pulse-v; }
.cp-block { padding-bottom: 100px; }
.cp-compare-head { display: none; }
.cp-row { grid-template-columns: 1fr 1fr; }
.cp-k { grid-column: 1 / -1; padding-bottom: 4px !important; font-size: 13px !important; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) !important; }
.cp-a, .cp-b { padding-top: 8px !important; font-size: 14.5px !important; }
.cp-a::before, .cp-b::before { display: block; margin-bottom: 6px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cp-a::before { content: 'Portfolio management'; color: var(--faint); }
.cp-b::before { content: 'Copy'; color: var(--accent); }
.cp-steps, .cp-control, .cp-costs, .cp-rules { grid-template-columns: 1fr; }
.cp-inputs { grid-template-columns: 1fr; padding: 22px; }
.cp-out { padding: 10px 22px; }
.cp-verdict { padding: 16px 22px; }
.cp-risks li { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 8px 12px; padding: 22px 12px; margin: 0 -12px; }
.cp-risks li > p { grid-column: 2; }
.cp-plus { grid-column: 3; grid-row: 1; }
.cp-more { grid-column: 2 / 4; }
.cp-close { padding: 60px 20px; }
}
.cp-costs > div, .cp-rules li, .cp-ctl, .cp-steps li { transition: transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out), background-color .4s; }
.cp-costs > div::before, .cp-rules li::before, .cp-ctl::before, .cp-steps li::before { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--glow, var(--accent)), transparent); transform: scaleX(0); opacity: 0; transition: transform .7s var(--ease-out), opacity .4s; }
.cp-rules li { --glow: var(--down); }
.cp-you { --glow: var(--up); }
.cp-rules .spot::after { background: radial-gradient(380px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--down) 12%, transparent), transparent 65%); }
.cp-you.spot::after { background: radial-gradient(380px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--up) 9%, transparent), transparent 65%); }
.cp-val { display: inline-block; transition: transform .6s var(--ease-out), text-shadow .6s, color .4s; transform-origin: left center; }
html[dir="rtl"] .cp-val { transform-origin: right center; }
.cp-costs .cp-k, .cp-who { transition: color .4s, background-color .4s, letter-spacing .6s var(--ease-out); }
.cp-rn { display: inline-block; justify-self: start; transition: color .5s, transform .7s var(--ease-out), text-shadow .6s, -webkit-text-stroke-color .4s; }
@media (hover: hover) and (pointer: fine) {
.cp-costs > div:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.cp-costs > div:hover .cp-val { transform: scale(1.06); text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent); }
.cp-costs > div:hover .cp-k { color: var(--accent); letter-spacing: .16em; }
.cp-rules li:hover { border-color: color-mix(in srgb, var(--down) 60%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--down) 45%, transparent); }
.cp-rules li:hover .cp-rn { color: color-mix(in srgb, var(--down) 85%, #fff); -webkit-text-stroke-color: transparent; text-shadow: 0 0 34px color-mix(in srgb, var(--down) 60%, transparent); transform: translateY(-4px) scale(1.08); }
.cp-ctl:hover { border-color: color-mix(in srgb, var(--glow, var(--accent)) 45%, transparent); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--glow, var(--accent)) 45%, transparent); }
.cp-ctl:hover .cp-who { letter-spacing: .16em; }
:is(.cp-costs > div, .cp-rules li, .cp-ctl, .cp-steps li):hover::before { transform: scaleX(1); opacity: 1; }
.motion-ok :is(.cp-costs > div, .cp-rules li, .cp-ctl, .cp-steps li):hover { transform: translateY(-6px); }
}
.cp-n { display: inline-block; justify-self: start; padding: 3px 0; border-radius: 999px; transition: padding .5s var(--ease-out), background-color .4s, color .4s, box-shadow .5s; }
.cp-steps h3 { transition: color .4s; }
.cp-row > span { transition: background-color .4s, color .4s, box-shadow .4s; }
.cp-t { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1px; transition: background-size .6s var(--ease-out), color .4s; }
html[dir="rtl"] .cp-t { background-position: 100% 55%; }
@media (hover: hover) and (pointer: fine) {
.cp-steps li:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.cp-steps li:hover .cp-n { padding: 3px 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.cp-steps li:hover .cp-n::after { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cp-row:hover > span { background-color: rgba(255,255,255,.025); }
.cp-row:hover .cp-k { box-shadow: inset 2px 0 0 var(--accent); color: var(--accent); }
html[dir="rtl"] .cp-row:hover .cp-k { box-shadow: inset -2px 0 0 var(--accent); }
.cp-row:hover .cp-t { background-size: 100% 1px; color: color-mix(in srgb, var(--faint) 80%, transparent); }
.cp-row:hover .cp-b { background-color: color-mix(in srgb, var(--accent) 12%, transparent); text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
}
html[dir="rtl"] .cp-b { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent) 22%, transparent); }
html[dir="rtl"] .cp-out { border-left: 0; border-right: 1px solid var(--line); }
html[dir="rtl"] .cp-steps li:not(:last-child) .cp-n::after { right: auto; left: -13px; }
html[dir="rtl"] .cp-mirror { direction: rtl; }
html[dir="rtl"] .cp-wire { transform: scaleX(-1); }
html[dir="rtl"] .cp-wire span { transform: scaleX(-1); }
html[dir="rtl"] .cp-acct svg, html[dir="rtl"] .cp-order { direction: ltr; }
html[dir="rtl"] .cp-out dd { justify-content: flex-end; }
html[dir="rtl"] .cp-mult, html[dir="rtl"] .cp-field input { direction: ltr; }
html[dir="rtl"] .cp-field input { text-align: right; }
@media (max-width: 1080px) { html[dir="rtl"] .cp-out { border-right: 0; } }
@media (max-width: 700px) { html[lang="he"] .cp-a::before { content: 'ניהול תיקים'; } html[lang="he"] .cp-b::before { content: 'העתקה'; } html[dir="rtl"] .cp-wire, html[dir="rtl"] .cp-wire span { transform: none; } html[dir="rtl"] .cp-wire span { left: auto; right: 16px; } }
.cp-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin: 0 0 22px; padding: 0; list-style: none; }
.cp-lane { position: relative; display: grid; align-content: start; gap: 8px; padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out); }
.cp-lane + .cp-lane::before { content: '⟶'; position: absolute; top: 50%; left: -27px; translate: 0 -50%; font-size: 18px; color: var(--faint); }
html[dir="rtl"] .cp-lane + .cp-lane::before { content: '⟵'; left: auto; right: -27px; }
.cp-lane:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 30px 60px -40px var(--accent); }
.cp-lane.cp-you:first-child { border-style: dashed; }
.cp-lane.cp-me { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--card); }
.cp-lane p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.cp-straddle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(80% 90% at 100% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--card); }
.cp-str-copy h3 { margin: 6px 0 12px; font-size: 28px; }
.cp-str-copy > p { margin: 0 0 14px; line-height: 1.65; }
.cp-str-copy ul { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.cp-str-copy li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--muted); }
.cp-str-copy li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); translate: 0 -2px; }
.cp-warn { margin: 0 !important; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 12px; font-size: 13.5px; line-height: 1.55; background: color-mix(in srgb, var(--warn) 6%, transparent); }
.cp-warn b { color: var(--warn); font-weight: 500; }
.cp-str-vis { position: relative; display: grid; gap: 14px; margin: 0; padding: 22px 22px 34px; border: 1px solid var(--line-strong); border-radius: 22px; background: #09090b; }
.cp-str-vis figcaption { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.cp-str-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-str-acct { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); transition: border-color .4s, opacity .4s; }
.cp-str-head { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text); }
.cp-str-head em { font: 500 9px var(--mono); font-style: normal; letter-spacing: .12em; color: var(--faint); }
.cp-str-side { display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--mono); letter-spacing: .08em; }
.cp-str-acct.win .cp-str-side span { color: var(--up); } .cp-str-acct.lose .cp-str-side span { color: var(--down); }
.cp-str-side b { padding: 3px 9px; border-radius: 99px; font-weight: 500; }
.cp-str-acct.win b { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.cp-str-acct.lose b { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.cp-str-price { width: 100%; height: 70px; overflow: visible; }
.cp-str-price path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cp-str-live { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--up) 35%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--up) 6%, transparent); }
.cp-str-live i { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--up); box-shadow: 0 0 12px var(--up); }
.cp-str-live span { font-size: 14px; color: var(--text); } .cp-str-live em { font-style: normal; font-size: 12px; color: var(--muted); }
.motion-ok .cp-str-price { animation: cp-str-wipe 6s var(--ease-out) infinite; }
@keyframes cp-str-wipe { 0% { clip-path: inset(-10px 100% -10px -10px); } 40%, 100% { clip-path: inset(-10px -10px -10px -10px); } }
.motion-ok .cp-str-side b { animation: cp-str-b 6s ease infinite; }
@keyframes cp-str-b { 0%, 38% { opacity: 0; transform: scale(.8); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.motion-ok .cp-str-acct.win { animation: cp-str-win 6s ease infinite; }
@keyframes cp-str-win { 0%, 38% { border-color: var(--line); } 46%, 92% { border-color: color-mix(in srgb, var(--up) 50%, transparent); } 100% { border-color: var(--line); } }
.motion-ok .cp-str-acct.lose { animation: cp-str-lose 6s ease infinite; }
@keyframes cp-str-lose { 0%, 38% { opacity: 1; } 46%, 92% { opacity: .45; } 100% { opacity: 1; } }
.motion-ok .cp-str-live { animation: cp-str-live 6s ease infinite; }
@keyframes cp-str-live { 0%, 52% { opacity: .25; transform: translateY(6px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: .25; } }
@media (max-width: 900px) { .cp-straddle { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cp-str-head { flex-direction: column; gap: 3px; } .cp-str-side { flex-wrap: wrap; gap: 6px; } .cp-lanes { grid-template-columns: 1fr; gap: 26px; } .cp-lane + .cp-lane::before, html[dir="rtl"] .cp-lane + .cp-lane::before { content: '↓'; top: -22px; left: 50%; right: auto; translate: -50% 0; } }
.sera-page { --sr: #91D9DE; --sr-2: #4FA9C2; --sr-ink: #0B0D10; --sr-soft: color-mix(in srgb, var(--sr) 14%, transparent); --up: #3DBE73; --down: #E5686A; --warn: #E0A542; --mono: 'IBM Plex Mono', monospace; --card: #14161A; --win: #111317; --line: #2A3138; --line-strong: #3A434B; --text: #F5F6FA; --muted: #9AA3A7; --faint: #687277; color: var(--text); padding-bottom: 40px; }
body:has(.sera-page) { background: #0B0D10; }
.sera-page h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.25; }
.sera-page p { color: var(--muted); }
.sera-page .up { color: var(--up); } .sera-page .down { color: var(--down); }
.sera-page svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sr-cap { margin: 14px 0 0; text-align: center; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint) !important; }
.sr-hero { position: relative; display: grid; justify-items: center; gap: 64px; padding: clamp(120px, 16vh, 170px) 0 150px; isolation: isolate; }
.sr-aurora { position: absolute; inset: -80px -30vw 20%; z-index: -2; pointer-events: none; overflow: hidden; -webkit-mask: radial-gradient(60% 60% at 50% 35%, #000 30%, transparent 75%); mask: radial-gradient(60% 60% at 50% 35%, #000 30%, transparent 75%); }
.sr-aurora i { position: absolute; width: 48vw; height: 48vw; max-width: 720px; max-height: 720px; border-radius: 50%; filter: blur(90px); opacity: .32; }
.sr-aurora i:nth-child(1) { left: 22%; top: 0; background: var(--sr); }
.sr-aurora i:nth-child(2) { left: 46%; top: 10%; background: var(--sr-2); opacity: .26; }
.sr-aurora i:nth-child(3) { left: 34%; top: 26%; background: #5FC9B8; opacity: .14; }
.motion-ok .sr-aurora i { animation: sr-drift 18s ease-in-out infinite alternate; }
.motion-ok .sr-aurora i:nth-child(2) { animation-duration: 23s; animation-delay: -6s; }
.motion-ok .sr-aurora i:nth-child(3) { animation-duration: 27s; animation-delay: -12s; }
@keyframes sr-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8vw, 4vw) scale(1.12); } 100% { transform: translate(6vw, -3vw) scale(.92); } }
.sr-grid { position: absolute; inset: 0 -20vw 30%; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask: radial-gradient(50% 55% at 50% 30%, #000, transparent 80%); mask: radial-gradient(50% 55% at 50% 30%, #000, transparent 80%); }
.motion-ok .sr-grid { animation: sr-grid 30s linear infinite; }
@keyframes sr-grid { to { background-position: 0 64px, 64px 0; } }
.sr-hero-copy { display: grid; justify-items: center; gap: 22px; text-align: center; max-width: 780px; }
.sr-soon { border-color: color-mix(in srgb, var(--sr) 45%, transparent) !important; color: var(--sr) !important; }
.sr-soon i { background: var(--sr) !important; box-shadow: 0 0 12px var(--sr); }
.sr-word { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 .02em; margin: 0; font-size: clamp(76px, 13vw, 176px); font-weight: 600; letter-spacing: -.055em; line-height: .9; }
.sera-page .sr-word .ch { display: inline-block; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--sr) 60%, #fff) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-word em { margin-left: .28em; font-style: normal; font-size: .26em; font-weight: 400; letter-spacing: -.01em; color: var(--muted); }
.motion-ok .sr-word .ch { animation: sr-rise 1.1s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 100ms); }
.motion-ok .sr-word em { animation: sr-fade 1.2s ease both .6s; }
@keyframes sr-rise { from { opacity: 0; transform: translateY(.45em) rotate(4deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sr-fade { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.sr-lead { margin: 0; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; color: var(--text) !important; }
.sr-sub { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.6; }
.sr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.sr-pills a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--text); background: rgba(255,255,255,.02); text-decoration: none; transition: border-color .3s, background-color .3s, transform .4s var(--ease-out); }
.sr-pills svg { width: 17px; height: 17px; color: var(--sr); }
.sr-pills a:hover, .sr-pills a:focus-visible { border-color: color-mix(in srgb, var(--sr) 55%, transparent); background: var(--sr-soft); transform: translateY(-2px); }
.sr-stage { width: min(1040px, 100%); perspective: 1400px; }
.sr-window { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: clamp(420px, 44vw, 540px); border: 1px solid var(--line-strong); border-radius: 18px; background: var(--win); overflow: hidden; box-shadow: 0 60px 140px -50px color-mix(in srgb, var(--sr) 45%, transparent), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .6s var(--ease-out); transform-style: preserve-3d; font-family: var(--font); }
.sr-window::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.05), transparent 30%); }
.aw-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.aw-brand { font-weight: 600; font-size: 15px; color: var(--text); } .aw-brand small { font-weight: 400; font-size: 10.5px; color: var(--muted); }
.aw-tabs { display: flex; gap: 4px; }
.aw-tabs button { position: relative; padding: 8px 16px; border: 1px solid transparent; border-radius: 10px; background: none; font: 500 13px var(--font); color: var(--muted); cursor: pointer; transition: color .3s, background-color .3s, border-color .3s; }
.aw-tabs button:hover { color: var(--text); }
.aw-tabs button.on { color: var(--text); background: rgba(255,255,255,.05); border-color: var(--line-strong); }
.aw-tabs button i { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1.5px; border-radius: 2px; background: var(--sr); transform: scaleX(0); transform-origin: left; }
.motion-ok .aw-tabs button.on i { animation: aw-prog 4.6s linear both; }
.sr-window:hover .aw-tabs button.on i { animation-play-state: paused; }
@keyframes aw-prog { to { transform: scaleX(1); } }
.aw-dots { justify-self: end; display: flex; gap: 8px; } .aw-dots i { width: 11px; height: 11px; border-radius: 50%; background: #f5b83d; } .aw-dots i:nth-child(2) { background: #3ecf6b; } .aw-dots i:nth-child(3) { background: #ff5f57; }
.aw-body { position: relative; overflow: hidden; }
.aw-pane { position: absolute; inset: 0; padding: 26px 30px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .55s ease, transform .7s var(--ease-out), visibility 0s .55s; }
.sr-window[data-view="home"] [data-pane="home"], .sr-window[data-view="copier"] [data-pane="copier"], .sr-window[data-view="journal"] [data-pane="journal"], .sr-window[data-view="guardian"] [data-pane="guardian"] { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .1s, transform .7s var(--ease-out) .1s, visibility 0s; }
.aw-pane h4 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--text); } .aw-pane h4 small { font-size: 13px; color: var(--muted); font-weight: 400; }
.aw-pane small { font-size: 11px; color: var(--muted); }
.aw-foot { display: flex; justify-content: space-between; padding: 9px 18px; border-top: 1px solid var(--line); font: 500 9.5px var(--mono); letter-spacing: .1em; color: var(--faint); }
.aw-foot i, .aw-conn i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); vertical-align: 1px; }
[data-pane="home"] { display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.aw-sm { font-size: 34px; font-weight: 700; color: #8b8d96; letter-spacing: -.06em; } .aw-sm sub { font-size: 14px; }
[data-pane="home"] p { margin: 0; font-size: 14px; }
.aw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); gap: 12px; margin-top: 18px; text-align: left; }
.aw-cards div { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #15161b; transition: transform .5s var(--ease-out), border-color .3s; }
.aw-cards svg { width: 20px; height: 20px; color: #c8cad2; margin-bottom: 10px; } .aw-cards b { font-size: 16px; color: var(--text); }
.motion-ok .sr-window[data-view="home"] .aw-cards div { animation: aw-in .8s var(--ease-out) both; } .aw-cards div:nth-child(2) { animation-delay: .12s !important; } .aw-cards div:nth-child(3) { animation-delay: .24s !important; }
@keyframes aw-in { from { opacity: 0; transform: translateY(16px); } }
.aw-conn { margin-top: 18px !important; font-size: 11px !important; color: var(--muted); }
.aw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.aw-seg { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; font: 500 11.5px var(--font); } .aw-seg em { padding: 5px 11px; border-radius: 7px; font-style: normal; color: var(--muted); } .aw-seg em.on { color: var(--text); background: color-mix(in srgb, var(--up) 18%, transparent); }
.aw-master { display: grid; grid-template-columns: auto 1.4fr 1fr 1fr; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #14151a; margin-bottom: 12px; }
.aw-master > span:not(.aw-n) { display: grid; gap: 2px; } .aw-master b { font-size: 14px; color: var(--text); font-weight: 600; }
.aw-n { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--muted); }
.aw-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.aw-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto .8fr; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text); }
.aw-row:first-child { border-top: 0; } .aw-row > span:first-child { display: grid; } .aw-row b { font-weight: 600; font-size: 12.5px; } .aw-row small { font-size: 9.5px; }
.aw-ok { color: var(--up); font-size: 11.5px; }
.aw-toggle { position: relative; width: 30px; height: 16px; border-radius: 99px; background: #2a2c33; } .aw-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .3s; } .aw-toggle.on { background: var(--up); } .aw-toggle.on::after { transform: translateX(14px); }
.aw-pos, .aw-mpos { display: grid; } .aw-pos em, .aw-mpos em { grid-area: 1 / 1; font-style: normal; } .aw-pos em:last-child, .aw-mpos em:last-child { opacity: 0; color: var(--up); }
.motion-ok .sr-window[data-view="copier"] .aw-mpos em:first-child, .motion-ok .sr-window[data-view="copier"] .aw-pos em:first-child { animation: aw-a 4.6s both; }
.motion-ok .sr-window[data-view="copier"] .aw-mpos em:last-child, .motion-ok .sr-window[data-view="copier"] .aw-pos em:last-child { animation: aw-b 4.6s both; }
.motion-ok .sr-window[data-view="copier"] .aw-row { animation: aw-flash 4.6s both; }
.motion-ok .sr-window[data-view="copier"] .aw-row, .motion-ok .sr-window[data-view="copier"] .aw-row em { animation-delay: calc(var(--i) * 90ms + 150ms) !important; }
@keyframes aw-a { 0%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes aw-b { 0%, 22% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes aw-flash { 0%, 22% { background: transparent; } 26% { background: color-mix(in srgb, var(--up) 14%, transparent); } 50%, 100% { background: transparent; } }
.aw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.aw-kpis span { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #14151a; } .aw-kpis small { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .aw-kpis b { font-size: 20px; font-weight: 500; color: var(--text); } .aw-kpis b.up { color: var(--up); }
.aw-curve { width: 100%; height: calc(100% - 118px); min-height: 150px; overflow: visible; }
.aw-curve line { stroke: rgba(255,255,255,.12); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.aw-curve .a { fill: url(#awfill); stroke: none; } .aw-curve .l { stroke: var(--sr); stroke-width: 2; vector-effect: non-scaling-stroke; }
.motion-ok .sr-window[data-view="journal"] .aw-curve { animation: sr-wipe 1.8s var(--ease-out) both .2s; }
.motion-ok .sr-window[data-view="journal"] .aw-curve .a { animation: sr-fadein 1.4s ease both .9s; }
@keyframes sr-wipe { from { clip-path: inset(-20px 100% -20px -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes sr-fadein { from { opacity: 0; } }
.aw-limit { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #14151a; margin-bottom: 12px; }
.aw-limit > div:first-child { display: grid; gap: 3px; } .aw-limit b { color: var(--text); font-size: 14.5px; }
.aw-meter { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #23252c; overflow: hidden; } .aw-meter i { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, var(--warn), var(--down)); transform-origin: left; }
.aw-lim-row { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px var(--mono); color: var(--muted); }
.aw-lock { opacity: 0; color: var(--down); }
.motion-ok .sr-window[data-view="guardian"] .aw-meter i { animation: aw-meter 4.6s var(--ease-out) both; }
.motion-ok .sr-window[data-view="guardian"] .aw-lock { animation: aw-b 4.6s both; animation-timing-function: steps(1); }
@keyframes aw-meter { 0% { width: 8%; } 45%, 100% { width: 100%; } }
.aw-check { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; padding: 0 4px; font-size: 13px; }
.aw-check i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 5px; font-style: normal; font-size: 11px; color: var(--up); }
.motion-ok .sr-window[data-view="guardian"] .aw-check { animation: aw-in .7s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + .3s); }
.sr-block { padding-bottom: 150px; scroll-margin-top: 100px; }
.sr-head { max-width: 640px; margin-bottom: 48px; }
.sr-head h2 { margin: 14px 0 18px; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
.sr-head h2 span { color: var(--muted); }
.sr-head > p { font-size: 17px; line-height: 1.6; }
.sr-block .eyebrow { color: var(--sr); }
.sr-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.sr-split.rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sr-split.rev > header { order: 2; }
.sr-split .sr-head { margin-bottom: 0; }
.sr-facts { display: grid; gap: 2px; margin: 30px 0 0; }
.sr-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); transition: padding .4s var(--ease-out); }
.sr-facts div:hover { padding-left: 10px; }
.sr-facts dt { font: 500 12px var(--mono); letter-spacing: .06em; color: var(--text); transition: color .3s; } .sr-facts div:hover dt { color: var(--sr); }
.sr-facts dd { margin: 0; font-size: 14.5px; color: var(--muted); }
.sr-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sr-mod { position: relative; display: grid; align-content: start; gap: 8px; min-height: 360px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%), var(--card); color: inherit; text-decoration: none; overflow: hidden; transition: transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out); }
.sr-mod::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--sr), transparent); opacity: 0; transition: opacity .5s; }
.sr-mod.spot::after { background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--sr) 11%, transparent), transparent 65%); }
.sr-mod:hover, .sr-mod:focus-visible { transform: translateY(-8px); border-color: color-mix(in srgb, var(--sr) 35%, transparent); box-shadow: 0 40px 80px -46px var(--sr); outline: none; }
.sr-mod:hover::before, .sr-mod:focus-visible::before { opacity: 1; }
.sr-mod-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 26px; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(255,255,255,.03); color: #d3d5dc; transition: color .4s, border-color .4s, background-color .4s, transform .6s var(--ease-out), box-shadow .5s; }
.sr-mod-ic svg { width: 24px; height: 24px; }
.sr-mod:hover .sr-mod-ic { color: var(--sr); border-color: color-mix(in srgb, var(--sr) 50%, transparent); background: var(--sr-soft); transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 30px -6px var(--sr); }
.sr-mod .sr-tick { stroke-dasharray: 12; stroke-dashoffset: 0; }
.sr-mod:hover .sr-tick { animation: sr-tick .6s var(--ease-out); }
@keyframes sr-tick { from { stroke-dashoffset: 12; } }
.sr-mod-arrow { position: absolute; top: 26px; right: 26px; width: 22px; height: 22px; color: var(--faint); transition: color .3s, transform .5s var(--ease-out); } .sr-mod-arrow svg { width: 100%; height: 100%; }
.sr-mod:hover .sr-mod-arrow { color: var(--sr); transform: translate(3px, -3px); }
.sr-mod h3 { margin: 0; font-size: 24px; }
.sr-mod .sr-tag { margin: 0 0 6px; color: var(--sr); font-size: 14px; }
.sr-mod p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.sr-mod ul { display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.sr-mod li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); transition: color .3s, transform .5s var(--ease-out); transition-delay: calc(var(--j, 0) * 40ms); }
.sr-mod li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); transition: background-color .3s, box-shadow .3s; }
.sr-mod:hover li { color: var(--text); transform: translateX(4px); } .sr-mod:hover li::before { background: var(--sr); box-shadow: 0 0 8px var(--sr); }
.sr-mod li:nth-child(2) { --j: 1; } .sr-mod li:nth-child(3) { --j: 2; } .sr-mod li:nth-child(4) { --j: 3; } .sr-mod li:nth-child(5) { --j: 4; }
.motion-ok .sr-mods [data-reveal] { transition-delay: calc(var(--i) * 90ms); }
.sr-net { padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(70% 60% at 50% 52%, color-mix(in srgb, var(--sr) 7%, transparent), transparent 70%), var(--card); }
.sr-net-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.sr-seg { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: #09090b; }
.sr-seg button, .sr-share-tabs button { padding: 8px 16px; border: 0; border-radius: 9px; background: none; font: 500 13px var(--font); color: var(--muted); cursor: pointer; transition: color .3s, background-color .3s, box-shadow .3s; }
.sr-seg button:hover, .sr-share-tabs button:hover { color: var(--text); }
.sr-seg button[aria-pressed="true"] { color: var(--text); background: rgba(255,255,255,.07); }
.sr-net[data-mode="live"] [data-net="live"] { background: color-mix(in srgb, var(--up) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 40%, transparent); }
.sr-net[data-mode="monitor"] [data-net="monitor"] { background: color-mix(in srgb, var(--sr) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sr) 40%, transparent); }
.sr-net-state { display: grid; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); } .sr-net-state em { grid-area: 1 / 1; font-style: normal; opacity: 0; transition: opacity .3s; }
.sr-net[data-mode="live"] [data-s="live"], .sr-net[data-mode="monitor"] [data-s="monitor"], .sr-net[data-mode="off"] [data-s="off"] { opacity: 1; }
.sr-net-stage { position: relative; height: 430px; margin-top: 10px; }
.sr-net-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sr-net-stage path { vector-effect: non-scaling-stroke; transition: stroke .4s, opacity .4s, stroke-width .3s; }
.sr-net-stage .bg { stroke: rgba(255,255,255,.1); stroke-width: 1.2; }
.sr-net-stage .flow { stroke: var(--up); stroke-width: 2; stroke-dasharray: 2 12; opacity: 0; }
.sr-net[data-mode="live"] .flow { opacity: .9; }
.motion-ok .sr-net[data-mode="live"] .flow { animation: sr-flow 1.1s linear infinite; }
.sr-net[data-mode="monitor"] .flow { opacity: .55; stroke: var(--sr); stroke-dasharray: 1 7; }
.sr-net[data-mode="off"] .bg { stroke: rgba(255,255,255,.05); }
@keyframes sr-flow { to { stroke-dashoffset: -14; } }
.sr-net.focus .flow:not(.hi) { opacity: .15; } .sr-net .flow.hi { stroke-width: 3; opacity: 1; }
.sr-master { position: absolute; z-index: 2; display: grid; place-items: center; place-content: center; gap: 1px; width: 124px; height: 124px; translate: -50% -50%; border: 1px solid color-mix(in srgb, var(--sr) 45%, transparent); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1a1d26, #0c0d11); box-shadow: 0 0 60px -12px color-mix(in srgb, var(--sr) 60%, transparent); text-align: center; transition: border-color .4s, box-shadow .4s, opacity .4s; }
.sr-master b { font-size: 16px; color: var(--text); } .sr-master small { font: 500 10px var(--mono); color: var(--muted); }
.sr-order { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; padding: 4px 10px; border-radius: 99px; font: 600 10px var(--mono); font-style: normal; letter-spacing: .08em; white-space: nowrap; color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); opacity: 0; }
.sr-ring { position: absolute; inset: -1px; border: 1px solid var(--sr); border-radius: 50%; opacity: 0; pointer-events: none; }
.motion-ok .sr-net[data-mode="live"] .sr-ring { animation: sr-ring 3.3s ease-out infinite; } .motion-ok .sr-net[data-mode="live"] .sr-ring + .sr-ring { animation-delay: 1.1s; }
@keyframes sr-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
.sr-net[data-mode="live"] .sr-order { opacity: 1; }
.motion-ok .sr-net[data-mode="live"] .sr-order { animation: sr-order 3.3s ease infinite; }
@keyframes sr-order { 0%, 10% { opacity: 0; transform: translateY(-6px); } 18%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; } }
.sr-net[data-mode="off"] .sr-master { border-color: var(--line-strong); box-shadow: none; opacity: .6; }
.sr-fol { position: absolute; z-index: 2; display: grid; gap: 4px; min-width: 150px; padding: 12px 14px; translate: -50% -50%; border: 1px solid var(--line-strong); border-radius: 13px; background: #101116; cursor: default; transition: border-color .35s, transform .45s var(--ease-out), box-shadow .45s, opacity .4s; }
.sr-fol b { font-size: 13px; color: var(--text); } .sr-fol small { font: 500 10px var(--mono); color: var(--faint); }
.sr-fst { display: grid; font: 500 11px var(--font); } .sr-fst em { grid-area: 1 / 1; font-style: normal; opacity: 0; transition: opacity .3s; }
.sr-fst .flat { color: var(--muted); } .sr-fst .fill { color: var(--up); } .sr-fst .mon { color: var(--sr); } .sr-fst .off { color: var(--faint); }
.sr-net[data-mode="live"] .flat { opacity: 1; } .sr-net[data-mode="monitor"] .mon { opacity: 1; } .sr-net[data-mode="off"] .off { opacity: 1; }
.motion-ok .sr-net[data-mode="live"] .sr-fst .flat { animation: sr-st-a 3.3s both infinite; animation-delay: calc(var(--i) * 60ms); }
.motion-ok .sr-net[data-mode="live"] .sr-fst .fill { animation: sr-st-b 3.3s both infinite; animation-delay: calc(var(--i) * 60ms); }
.motion-ok .sr-net[data-mode="live"] .sr-fol { animation: sr-fol 3.3s both infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes sr-st-a { 0%, 22% { opacity: 1; } 26%, 74% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes sr-st-b { 0%, 22% { opacity: 0; } 26%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes sr-fol { 0%, 22% { border-color: var(--line-strong); } 26% { border-color: color-mix(in srgb, var(--up) 60%, transparent); box-shadow: 0 0 34px -10px var(--up); } 60%, 100% { border-color: var(--line-strong); box-shadow: none; } }
.sr-net[data-mode="off"] .sr-fol { opacity: .55; }
.sr-fol:hover, .sr-fol.hi { transform: scale(1.06); border-color: color-mix(in srgb, var(--sr) 60%, transparent) !important; box-shadow: 0 20px 50px -20px var(--sr) !important; z-index: 3; }
.sr-guard { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); transition: border-color .5s, box-shadow .5s; }
.sr-guard.locked { border-color: color-mix(in srgb, var(--down) 35%, transparent); box-shadow: 0 40px 90px -50px var(--down); }
.sr-g-head, .sr-g-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sr-g-head > div, .sr-g-row > span { display: grid; gap: 3px; }
.sr-g-head b, .sr-g-row b { font-size: 16px; color: var(--text); font-weight: 600; }
.sr-g-head small, .sr-g-row small { font-size: 13px; color: var(--muted); }
.sr-mini { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sr); }
.sr-switch { position: relative; flex: none; width: 44px; height: 24px; padding: 0; border: 0; border-radius: 99px; background: #2a2c33; cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.sr-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease-out); }
.sr-switch.on { background: var(--up); } .sr-switch.on::after { transform: translateX(20px); }
.sr-switch:hover { box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.sr-g-meter { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #08090b; }
.sr-g-nums { display: flex; justify-content: space-between; } .sr-g-nums span { display: grid; gap: 2px; } .sr-g-nums span + span { text-align: right; }
.sr-g-nums small { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sr-g-nums strong { font: 500 28px var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sr-g-nums span:first-child strong { color: var(--warn); transition: color .3s; } .sr-guard.locked .sr-g-nums span:first-child strong { color: var(--down); }
.sr-g-track { position: relative; height: 10px; border-radius: 99px; background: #1d1f25; }
.sr-g-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--warn), var(--down)); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--down) 70%, transparent); }
.sr-g-mark { position: absolute; right: 0; top: -5px; bottom: -5px; width: 2px; border-radius: 2px; background: var(--down); }
.sr-g-lock { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: var(--muted); background: rgba(255,255,255,.02); transition: color .3s, background-color .3s; }
.sr-g-lock svg { width: 18px; height: 18px; flex: none; }
.sr-g-lock { color: transparent; } .sr-g-lock svg { color: var(--faint); }
.sr-guard.locked .sr-g-lock { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); } .sr-guard.locked .sr-g-lock svg { color: var(--down); }
.motion-ok .sr-guard.locked .sr-g-lock svg { animation: sr-shake .5s ease; }
@keyframes sr-shake { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.sr-guard.off .sr-g-meter { opacity: .35; }
.sr-g-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sr-g-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); transition: color .3s; }
.sr-g-list i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 6px; font-style: normal; font-size: 12px; color: var(--up); transition: background-color .3s, border-color .3s, transform .4s var(--ease-out); }
.sr-guard.locked .sr-g-list li { color: var(--text); transition-delay: calc(var(--i) * 150ms); }
.sr-guard.locked .sr-g-list i { background: color-mix(in srgb, var(--up) 16%, transparent); border-color: color-mix(in srgb, var(--up) 50%, transparent); transform: scale(1.1); transition-delay: calc(var(--i) * 150ms); }
.sr-g-rows { display: grid; } .sr-g-row { padding: 14px 0; border-top: 1px solid var(--line); transition: padding .4s var(--ease-out); } .sr-g-row:hover { padding-left: 8px; }
.sr-journal { display: grid; gap: 14px; }
.sr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; }
.sr-kpi { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 20px 22px; border-left: 1px solid var(--line); transition: background-color .3s; }
.sr-kpi:first-child { border-left: 0; } .sr-kpi:hover { background: rgba(255,255,255,.025); }
.sr-kpi small { grid-column: 1 / -1; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sr-kpi strong { font: 500 30px var(--font); letter-spacing: -.03em; }
.sr-kpi em { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; color: var(--faint); }
.sr-kpi > svg { width: 80px; height: 30px; color: var(--sr); overflow: visible; } .sr-kpi > svg path { stroke-width: 1.4; }
.sr-gauge { width: 60px !important; height: 34px !important; } .sr-gauge .t { stroke: color-mix(in srgb, var(--down) 70%, transparent); stroke-width: 5; } .sr-gauge .g { stroke: var(--up); stroke-width: 5; stroke-linecap: butt; stroke-dasharray: var(--v) 100; }
.motion-ok .in .sr-gauge .g { animation: sr-gauge 1.4s var(--ease-out) both .4s; } @keyframes sr-gauge { from { stroke-dasharray: 0 100; } }
.sr-pf { display: flex; gap: 3px; width: 80px; } .sr-pf i { height: 6px; width: var(--w); border-radius: 3px; background: var(--up); } .sr-pf i + i { background: var(--down); }
.sr-j-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
.sr-j-curve, .sr-cal { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.sr-j-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.sr-j-title b { font-size: 16px; color: var(--text); font-weight: 600; } .sr-j-title span { font-size: 12.5px; color: var(--muted); } .sr-j-title span b { font-size: 12.5px; font-weight: 600; } .sr-j-title span b.up { color: var(--up); } .sr-j-title span b.down { color: var(--down); }
.sr-j-plot { position: relative; height: 300px; }
.sr-j-plot svg { width: 100%; height: 100%; overflow: visible; }
.sr-j-plot line { stroke: rgba(255,255,255,.12); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.sr-j-plot .a { fill: url(#srfill); stroke: none; } .sr-j-plot .l { stroke: var(--sr); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sr) 50%, transparent)); }
.motion-ok [data-reveal]:not(.in) .sr-j-plot svg, .motion-ok [data-reveal]:not(.in) .sr-pt { clip-path: inset(0 100% 0 0); opacity: 0; } .motion-ok .in .sr-j-plot svg { animation: sr-wipe 2.2s var(--ease-out) both .3s; } .motion-ok .in .sr-pt { animation: sr-fadein .6s ease both; animation-delay: calc(.4s + var(--k, 0) * 110ms); }
.sr-pt { position: absolute; width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: #0b0c0f; box-shadow: 0 0 0 1.5px var(--sr); transition: transform .3s var(--ease-out), background-color .3s, box-shadow .3s; }
.sr-pt.on { transform: scale(1.8); background: var(--sr); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sr) 25%, transparent), 0 0 20px var(--sr); }
.sr-cal-h, .sr-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.sr-cal-h span { padding-bottom: 6px; text-align: center; font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sr-cal-g > * { display: grid; place-content: center; gap: 1px; aspect-ratio: 1 / .9; border: 1px solid var(--line); border-radius: 9px; background: #0e0f13; font: 500 11px var(--font); color: var(--muted); text-align: center; }
.sr-cal-g .short { display: none; }
.sr-cal-g .out { opacity: .3; } .sr-cal-g .we { opacity: .6; }
.sr-cal-g button { padding: 0; cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; }
.sr-cal-g button b { font-weight: 600; font-size: 11px; color: var(--text); } .sr-cal-g button em { font-style: normal; font-size: 9.5px; font-variant-numeric: tabular-nums; }
.sr-cal-g .win { background: color-mix(in srgb, var(--up) 16%, #0e0f13); border-color: color-mix(in srgb, var(--up) 22%, transparent); } .sr-cal-g .win em { color: var(--up); }
.sr-cal-g .loss { background: color-mix(in srgb, var(--down) 14%, #0e0f13); border-color: color-mix(in srgb, var(--down) 20%, transparent); } .sr-cal-g .loss em { color: var(--down); }
.sr-cal-g button:hover, .sr-cal-g button.on, .sr-cal-g button:focus-visible { transform: scale(1.1); z-index: 1; border-color: var(--text); box-shadow: 0 10px 26px -10px #000; outline: none; }
.sr-share { display: grid; justify-items: center; gap: 18px; }
.sr-share-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: #09090b; }
.sr-share-tabs button[aria-pressed="true"] { color: var(--text); background: var(--sr-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sr) 40%, transparent); }
.sr-tilt { width: min(440px, 100%); perspective: 1100px; }
.sr-card { position: relative; display: grid; gap: 14px; padding: 30px 28px 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: radial-gradient(120% 80% at 0% 0%, #10141b, #040506 70%); box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 30px 80px -50px var(--sr); transform-style: preserve-3d; transition: transform .6s var(--ease-out); overflow: hidden; color: #e8ecf2; }
.sr-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), rgba(145,217,222,.14), transparent 55%); opacity: .7; transition: opacity .4s; }
.sr-card::before { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); transform: translateX(-60%); pointer-events: none; }
.motion-ok .sr-tilt:hover .sr-card::before { animation: sr-sheen 1.3s var(--ease-out); }
@keyframes sr-sheen { to { transform: translateX(60%); } }
.sr-card p { margin: 0; color: inherit; }
.sr-card .sp { font: 500 8.5px var(--font); letter-spacing: .32em; color: #9aa3ad; line-height: 1.9; } .sr-card .r { text-align: right; }
.sr-card header, .sr-c-top, .sr-card footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sr-card h4 { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #fff; } .sr-card h4 span { font-size: 17px; font-weight: 400; color: #b9c0c9; margin-left: 6px; }
.sr-std { font-size: 7.5px !important; }
.sr-c-top { margin-top: 10px; }
.sr-big { font-size: 52px; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 2px 0 0 !important; font-variant-numeric: tabular-nums; transition: color .3s; }
.sr-big.up { color: var(--sr); } .sr-big.down { color: var(--down); } .sr-big small { font-size: .6em; color: #e8ecf2; } .sr-big em { font-style: normal; font-size: .36em; color: #9aa3ad; }
.sr-after { font-size: 12px; color: var(--sr) !important; opacity: .85; }
.sr-c-chart { width: 100%; height: 110px; color: var(--sr); } .sr-c-chart path { stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sr-c-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .sr-c-stats div { display: grid; gap: 4px; padding: 0 8px; border-left: 1px solid rgba(255,255,255,.08); } .sr-c-stats div:first-child { border-left: 0; padding-left: 0; }
.sr-c-stats small { font-size: 7.5px; letter-spacing: .1em; color: #9aa3ad; } .sr-c-stats b { font-size: 16px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; } .sr-c-stats em { font-style: normal; font-size: 7.5px; color: #7d8590; letter-spacing: .06em; }
.sr-card footer { align-items: flex-end; margin-top: 8px; } .sr-hidden { font-size: 8px; color: #7d8590 !important; align-self: flex-end; }
.sr-card.swap [data-c], .sr-card.swap [data-c-big] { animation: sr-swap .5s var(--ease-out); }
@keyframes sr-swap { 0% { opacity: 1; } 35% { opacity: 0; transform: translateY(6px); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }
.sr-close, .sr-download { position: relative; display: grid; justify-items: center; gap: 22px; padding: 60px 0 110px; text-align: center; }
.sr-download h2 { margin: 0; font-size: clamp(46px, 7vw, 92px); line-height: .98; letter-spacing: -.05em; } .sera-page .sr-download h2 span { background: linear-gradient(90deg, var(--sr), #b4a5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-download > p { max-width: 520px; font-size: 17px; }
.sr-download .soon-badge { border-color: color-mix(in srgb, var(--sr) 45%, transparent); color: var(--sr); } .sr-close .soon-badge i { background: var(--sr); }
.sr-orbit { position: relative; display: grid; place-items: center; width: 250px; height: 250px; margin-bottom: 10px; }
.sr-orbit b { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border: 1px solid color-mix(in srgb, var(--sr) 50%, transparent); border-radius: 28px; font-size: 34px; font-weight: 700; letter-spacing: -.06em; color: #d9dde5; background: radial-gradient(circle at 50% 30%, #1a1e28, #0a0b0e); box-shadow: 0 0 70px -10px color-mix(in srgb, var(--sr) 70%, transparent); } .sr-orbit b sub { font-size: 14px; color: var(--sr); }
.sr-o { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 50%; } .sr-o:nth-child(2) { inset: 30px; border-style: dashed; border-color: color-mix(in srgb, var(--sr) 25%, transparent); } .sr-o:nth-child(3) { inset: -40px; border-color: var(--line); }
.sr-orbit i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px; border: 1px solid var(--line-strong); border-radius: 13px; background: #0d0e12; color: var(--sr); transform: rotate(calc(var(--i) * 90deg)) translateX(125px) rotate(calc(var(--i) * -90deg)); }
.sr-orbit i svg { width: 19px; height: 19px; }
.motion-ok .sr-orbit i { animation: sr-orbit 24s linear infinite; }
.motion-ok .sr-o:nth-child(2) { animation: sr-spin 40s linear infinite reverse; }
@keyframes sr-orbit { from { transform: rotate(calc(var(--i) * 90deg)) translateX(125px) rotate(calc(var(--i) * -90deg)); } to { transform: rotate(calc(var(--i) * 90deg + 360deg)) translateX(125px) rotate(calc(var(--i) * -90deg - 360deg)); } }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.motion-ok .sr-orbit b { animation: sr-breathe 4s ease-in-out infinite; } @keyframes sr-breathe { 50% { box-shadow: 0 0 110px -6px color-mix(in srgb, var(--sr) 80%, transparent); } }
.sr-legal { max-width: 760px; margin: 0 auto; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--faint) !important; }
@media (max-width: 1100px) { .sr-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-mod { min-height: 0; } }
@media (max-width: 960px) {
.sr-split, .sr-split.rev { grid-template-columns: 1fr; } .sr-split.rev > header { order: 0; }
.sr-j-grid { grid-template-columns: 1fr; } .sr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-kpi:nth-child(3) { border-left: 0; } .sr-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
.sr-hero { gap: 44px; padding: 100px 0 100px; }
.sr-block { padding-bottom: 100px; }
.sr-mods { grid-template-columns: 1fr; }
.sr-window { height: 440px; } .aw-bar { grid-template-columns: 1fr auto; } .aw-tabs { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; } .aw-tabs button { padding: 7px 11px; font-size: 12px; } .aw-dots { grid-row: 1; grid-column: 2; }
.aw-pane { padding: 18px 16px; } .aw-cards { grid-template-columns: 1fr; width: 100%; } .aw-cards div { padding: 11px 14px; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; } .aw-cards svg { margin: 0; grid-row: span 2; } .aw-cards small { display: none; }
.aw-master { grid-template-columns: auto 1fr 1fr; } .aw-master > span:nth-child(3) { display: none; }
.aw-row { grid-template-columns: 1.3fr 1fr auto .8fr; } .aw-row .aw-ok { display: none; } .aw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aw-kpis b { font-size: 16px; } .aw-curve { height: calc(100% - 170px); min-height: 110px; }
.aw-foot span:last-child { display: none; }
.sr-net { padding: 14px; } .sr-net-stage { height: 480px; }
.sr-master { width: 90px; height: 90px; } .sr-fol { min-width: 0; width: 112px; padding: 9px 10px; } .sr-fol b { font-size: 11.5px; }
.sr-facts div { grid-template-columns: 1fr; gap: 4px; }
.sr-cal-g .full { display: none; } .sr-cal-g .short { display: block; }
.sr-kpi strong { font-size: 24px; } .sr-kpi > svg, .sr-pf { display: none; } .sr-j-plot { height: 220px; }
.sr-big { font-size: 42px; } .sr-card { padding: 24px 20px 20px; } .sr-c-stats b { font-size: 13px; }
.sr-orbit { transform: scale(.8); }
}
.sera-page .eyebrow { color: var(--sr); }
.sera-page .sr-head.center { margin-inline: auto; text-align: center; }
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1px solid var(--line-strong); border-radius: 12px; font: 500 15px var(--font); color: var(--text); background: rgba(255,255,255,.03); text-decoration: none; cursor: pointer; transition: transform .4s var(--ease-out), border-color .3s, background-color .3s, box-shadow .4s; }
.sr-btn svg { width: 18px; height: 18px; }
.sr-btn:hover, .sr-btn:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sr) 55%, transparent); background: var(--sr-soft); }
.sr-btn.primary { color: var(--sr-ink); background: var(--sr); border-color: var(--sr); font-weight: 600; box-shadow: 0 14px 40px -18px var(--sr); }
.sr-btn.primary:hover, .sr-btn.primary:focus-visible { background: color-mix(in srgb, var(--sr) 88%, #fff); box-shadow: 0 20px 50px -18px var(--sr); }
.sr-btn.sm { min-height: 38px; padding: 8px 16px; font-size: 13.5px; border-radius: 10px; }
.sr-btn.wide { width: 100%; }
.sr-btn.is-soon { opacity: .55; cursor: default; pointer-events: none; }
.sr-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sr-subnav { position: sticky; top: 92px; z-index: 20; display: flex; align-items: center; gap: 18px; margin: 18px 0 0; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, #0B0D10 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sr-brand, .sr-foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.sr-brand b, .sr-foot-brand b { display: inline-flex; align-items: baseline; justify-content: center; width: 32px; height: 32px; padding-top: 4px; border: 1px solid color-mix(in srgb, var(--sr) 45%, transparent); border-radius: 9px; font-size: 15px; font-weight: 700; letter-spacing: -.05em; background: #14161A; }
.sr-brand b sub, .sr-foot-brand b sub { font-size: 9px; color: var(--sr); }
.sr-brand span, .sr-foot-brand span { font-weight: 600; font-size: 15px; } .sr-brand small, .sr-foot-brand small { font-weight: 400; font-size: 11px; color: var(--muted); }
.sr-subnav-links { display: flex; gap: 2px; margin-inline: auto; }
.sr-subnav-links a { padding: 8px 12px; border-radius: 9px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .25s, background-color .25s; }
.sr-subnav-links a:hover, .sr-subnav-links a:focus-visible { color: var(--text); background: rgba(255,255,255,.05); }
.sr-hero { padding-top: clamp(80px, 11vh, 120px); }
.sr-version { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--sr) 40%, transparent); border-radius: 999px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--sr); background: color-mix(in srgb, var(--sr) 6%, transparent); }
.sr-version i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px var(--up); }
.sr-title { margin: 0; font-size: clamp(54px, 8.4vw, 118px); font-weight: 600; line-height: .95; letter-spacing: -.055em; }
.sera-page .sr-hero .sr-title > span { background: linear-gradient(90deg, var(--sr), #C9F0F2 60%, var(--sr)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion-ok .sr-title { animation: sr-rise 1.1s var(--ease-out) both .1s; }
.sr-hero .sr-sub { max-width: 640px; }
.sr-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: -24px 0 0; padding: 0; list-style: none; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sr-trust-row li { display: inline-flex; align-items: center; gap: 9px; }
.sr-trust-row li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sr); }
.sr-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-h3 { margin: 0 0 10px; font-size: clamp(26px, 3vw, 36px) !important; letter-spacing: -.035em !important; }
.sr-share-row { margin-top: 90px; }
.sr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sr-steps li { position: relative; display: grid; align-content: start; gap: 10px; padding: 28px 26px 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); transition: transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out); }
.sr-steps li:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--sr) 35%, transparent); box-shadow: 0 34px 70px -44px var(--sr); }
.sr-steps .spot::after, .sr-trust-card.spot::after, .sr-plan.spot::after { background: radial-gradient(380px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--sr) 10%, transparent), transparent 65%); }
.sr-n { font: 500 13px var(--mono); color: var(--sr); }
.sr-steps h3 { margin: 18px 0 0; }
.sr-steps p { margin: 0; font-size: 15px; line-height: 1.6; }
.sr-tip { max-width: 760px; margin: 18px 0 0 !important; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 12px; font-size: 14.5px; background: color-mix(in srgb, var(--warn) 6%, transparent); }
.sr-tip b { color: var(--warn); font-weight: 500; }
.sr-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sr-trust-card { display: grid; align-content: start; gap: 10px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); transition: transform .6s var(--ease-out), border-color .4s; }
.sr-trust-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--sr) 35%, transparent); }
.sr-trust-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--sr); background: rgba(255,255,255,.02); transition: transform .5s var(--ease-out), background-color .3s; }
.sr-trust-card:hover .sr-trust-ic { transform: rotate(-8deg) scale(1.06); background: var(--sr-soft); }
.sr-trust-ic svg { width: 22px; height: 22px; }
.sr-trust-card h3 { font-size: 17px !important; }
.sr-trust-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.sr-docs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px !important; }
.sr-docs span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); }
.sr-docs em { font: 500 9.5px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sr-plan { display: grid; gap: 22px; width: min(440px, 100%); margin: 0 auto; padding: 32px 30px 26px; border: 1px solid color-mix(in srgb, var(--sr) 40%, transparent); border-radius: 22px; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--sr) 10%, transparent), transparent 70%), var(--card); box-shadow: 0 50px 100px -60px var(--sr); }
.sr-plan-head { display: grid; gap: 8px; }
.sr-mini { font: 500 11px var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--sr) !important; }
.sr-plan-head strong { font-size: 38px; font-weight: 600; line-height: 1.05; letter-spacing: -.04em; }
.sr-plan-head small { font-size: 13px; color: var(--faint); }
.sr-plan ul { display: grid; gap: 12px; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
.sr-plan li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.sr-plan li svg { flex: none; width: 18px; height: 18px; color: var(--up); stroke-width: 2; }
.sr-plan-note { margin: 0; text-align: center; font-size: 13.5px; }
.sr-plan-note a { color: var(--sr); }
.sr-faq { margin-inline: 0; }
.sera-page .cp-faq details { border-radius: 14px; }
.sera-page .cp-faq summary i::before, .sera-page .cp-faq summary i::after { background: var(--sr); }
.sr-download { padding: 40px 0 70px; scroll-margin-top: 150px; }
.sr-latest { margin: -8px 0 0 !important; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--faint) !important; }
.sr-reqs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(860px, 100%); margin: 14px 0 0; }
.sr-reqs div { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: start; }
.sr-reqs dt { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sr-reqs dd { margin: 0; font-size: 14px; color: var(--text); }
.sera-page .sr-download h2 span { background: linear-gradient(90deg, var(--sr), #C9F0F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-foot { display: grid; justify-items: center; gap: 12px; padding: 40px 0 10px; border-top: 1px solid var(--line); text-align: center; }
.sr-foot p { margin: 0; font-size: 14px; }
.sr-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.sr-foot-links a, .sr-foot-links span { font-size: 13.5px; color: var(--muted); text-decoration: none; }
.sr-foot-links a { color: var(--sr); }
.sr-foot .sr-legal { margin-top: 10px; }
.sr-block, .sr-download { scroll-margin-top: 160px; }
@media (max-width: 1100px) { .sr-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .sr-mods, .sr-steps { grid-template-columns: 1fr; } .sr-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.sr-subnav { top: 76px; padding: 6px 6px 6px 12px; gap: 10px; }
.sr-subnav-links { display: none; }
.sr-brand { margin-inline-end: auto; }
.sr-trust { grid-template-columns: 1fr; }
.sr-trust-row { margin-top: -10px; gap: 6px 16px; }
.sr-plan-head strong { font-size: 32px; }
}
.sr-hero .sr-hero-copy { max-width: 1120px; }
.sr-title { text-wrap: balance; }
.sera-page .sr-hero .sr-tagline { color: var(--text); margin: 4px 0 0; font-size: clamp(30px, 4.6vw, 60px); line-height: 1; letter-spacing: -.045em; }
.sr-subnav .soon-badge { padding: 7px 12px; font-size: 10px; }
.sr-faq-split { align-items: start; }
.sr-faq-split .sr-faq { max-width: none; }
.sr-btn.is-locked { gap: 8px; cursor: default; color: var(--muted); }
.sr-btn.is-locked:hover { transform: none; border-color: var(--line-strong); background: rgba(255,255,255,.03); }
.sr-btn.is-locked svg { width: 15px; height: 15px; color: var(--faint); }
.sr-btn.is-locked em { font: 500 9.5px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sr-locked { color: var(--faint) !important; }
.sr-count { display: grid; justify-items: center; gap: 12px; margin-top: 10px; }
.sr-count-label { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sr); }
.sr-count-cells { display: flex; align-items: flex-start; gap: 10px; }
.sr-count-cells > i { padding-top: 18px; font-style: normal; font-size: 26px; color: var(--faint); }
.sr-cell { display: grid; justify-items: center; gap: 6px; min-width: 92px; padding: 16px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(145,217,222,.07), transparent 70%), var(--card); }
.sr-cell b { font: 600 44px var(--font); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.sr-cell small { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sr-count.done .sr-cell b { color: var(--sr); }
@media (max-width: 760px) { .sr-cell { min-width: 64px; padding: 12px 8px 10px; } .sr-cell b { font-size: 30px; } .sr-count-cells { gap: 6px; } .sr-count-cells > i { font-size: 18px; padding-top: 12px; } }
.rq-form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--card, #0c0c0f); }
.rq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rq-field { display: grid; gap: 7px; min-width: 0; }
.rq-field.wide { grid-column: 1 / -1; }
.rq-field > span { font-size: 13px; color: var(--muted); }
.rq-field em { font-style: normal; color: var(--faint); }
.rq-field input, .rq-field select, .rq-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; font: 15px var(--font); color: var(--text); background: rgba(0,0,0,.35); transition: border-color .25s, box-shadow .25s; }
.rq-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.rq-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px; }
html[dir="rtl"] .rq-field select { background-position: 20px 52%, 15px 52%; }
.rq-field select option { color: #111; }
.rq-field :is(input, select, textarea):focus { outline: none; border-color: color-mix(in srgb, var(--rq, var(--accent)) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq, var(--accent)) 18%, transparent); }
.rq-checks { display: grid; gap: 10px; }
.rq-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--text); cursor: pointer; }
.rq-check input { position: absolute; opacity: 0; pointer-events: none; }
.rq-check i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--line-strong); border-radius: 6px; transition: background-color .2s, border-color .2s; }
.rq-check i::after { content: '✓'; font-size: 12px; font-style: normal; color: #0b0d10; opacity: 0; transition: opacity .2s; }
.rq-check input:checked + i { background: var(--rq, var(--accent)); border-color: var(--rq, var(--accent)); }
.rq-check input:checked + i::after { opacity: 1; }
.rq-check input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq, var(--accent)) 30%, transparent); }
.rq-error { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: #ffb4b8 !important; background: rgba(229,104,106,.1); }
.rq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.rq-send { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 12px; font: 600 15px var(--font); color: #0b0d10; background: var(--rq, var(--accent)); cursor: pointer; transition: transform .35s var(--ease-out), box-shadow .35s; box-shadow: 0 14px 40px -18px var(--rq, var(--accent)); }
.rq-send:hover, .rq-send:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 50px -18px var(--rq, var(--accent)); }
.rq-send span { transition: translate .3s var(--ease-out); } .rq-send:hover span { translate: 4px 0; }
.rq-note { flex: 1 1 260px; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.rq-done { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid color-mix(in srgb, #3DBE73 40%, transparent); border-radius: 14px; background: rgba(61,190,115,.07); }
.rq-done b { font-weight: 600; color: #6fe0a0; } .rq-done p { margin: 0; font-size: 14px; }
.rq-to { color: var(--text); font-family: var(--mono); font-size: 13px; }
.rq-copy { justify-self: start; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 10px; font: 500 13px var(--font); color: var(--text); background: rgba(255,255,255,.04); cursor: pointer; }
.rq-form.sent .rq-actions { opacity: .5; }
.sera-page .rq-form { --rq: var(--sr); }
.rq-block .cp-head { margin-bottom: 36px; }
@media (max-width: 700px) { .rq-grid { grid-template-columns: 1fr; } }
.new-desk { padding-top: 120px; }
.tile-sera { grid-column: span 7; --sr: #91D9DE; --line-strong: #3A434B; background: radial-gradient(90% 70% at 50% 30%, rgba(145,217,222,.12), transparent 70%), linear-gradient(180deg, #101317, #07080a); }
.tile-sera:hover { border-color: rgba(145,217,222,.45); }
.tile-sera .eyebrow, .tile-sera .tile-cta span { color: #91D9DE; }
.tile-sera .sr-orbit { transform: scale(.85); margin: 0; }
.tile-copy { grid-column: span 5; }
.tile-copy .cp-mirror { width: 100%; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); padding: 18px 14px 30px; }
.tile-copy .cp-acct { padding: 12px; gap: 10px; }
.tile-copy .cp-acct svg { height: 50px; }
.tile-copy .cp-order { padding: 7px 8px; gap: 6px; font-size: 9.5px; }
.tile-copy .cp-wire span { display: none; }
@media (max-width: 900px) { .tile-sera, .tile-copy { grid-column: 1 / -1; } }
.footer-social { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.footer-social + a { margin-inline-start: 0 !important; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); transition: color .25s, border-color .25s, transform .35s var(--ease-out); }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.footer-social svg .dot { fill: currentColor; stroke: none; }
.tile-sera svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile-copy .cp-acct-head { font-size: 12px; white-space: nowrap; }
.tile-copy .cp-acct-head em { display: none; }
.rq-done[hidden], .rq-error[hidden] { display: none; }
.hx { --up: #3ddc97; --down: #ff5c6c; --mx: 0; --my: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding: clamp(40px, 7vh, 80px) 0 40px; isolation: isolate; }
.hx-glow { position: absolute; z-index: -2; top: -260px; bottom: -160px; left: 50%; width: max(100vw, 1500px); transform: translateX(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hx-glow i { position: absolute; inset: 0; transition: transform 1.4s var(--ease-out); }
.hx-glow i:first-child { background: radial-gradient(ellipse 38% 46% at 30% 22%, rgba(91,61,245,.42), rgba(91,61,245,.12) 45%, transparent 72%); transform: translate(calc(var(--mx) * 40px), calc(var(--my) * 30px)); }
.hx-glow i:last-child { background: radial-gradient(ellipse 40% 42% at 72% 62%, rgba(124,92,255,.30), rgba(124,92,255,.08) 50%, transparent 74%); transform: translate(calc(var(--mx) * -50px), calc(var(--my) * -30px)); }
.hx-copy { position: relative; z-index: 2; max-width: 980px; }
.hx-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 8px 14px 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 11px var(--mono); letter-spacing: .14em; color: #c7c7cf; background: rgba(255,255,255,.03); backdrop-filter: blur(8px); }
.hx-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(61,220,151,.6); }
.motion-ok .hx-badge i { animation: hx-ping 2.4s ease-out infinite; }
@keyframes hx-ping { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(61,220,151,0); } }
.hx h1 { margin: 0; font-size: clamp(56px, 9.6vw, 150px); font-weight: 600; line-height: .9; letter-spacing: -.06em; }
.hx-line { display: block; }
.hx .hx-w { display: inline-block; }
.sera-page .hx-w { color: inherit; }
.hx h1 > .hx-accent .hx-w, .hx h1 .hx-accent .hx-w { background: linear-gradient(100deg, #8f7bff 0%, #c9bfff 40%, #ffffff 55%, #b4a5ff 75%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion-ok .hx .hx-accent .hx-w { animation: hx-shine 6s ease-in-out 2.4s infinite; }
@keyframes hx-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.motion-ok .hx .hx-w { opacity: 0; transform: translateY(.35em); filter: blur(12px); }
.motion-ok .hx.go .hx-w { opacity: 1; transform: none; filter: none; transition: opacity .9s ease, transform 1.1s var(--ease-out), filter .9s ease; transition-delay: calc(var(--i) * 260ms + 150ms); }
.hx-sub { max-width: 600px; margin: 26px 0 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--muted); }
.hx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hx-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 50px; padding: 13px 22px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text); background: rgba(255,255,255,.03); backdrop-filter: blur(8px); transition: transform .4s var(--ease-out), background-color .3s, border-color .3s, box-shadow .4s; }
.hx-btn:hover, .hx-btn:focus-visible { transform: translateY(-2px); border-color: rgba(180,165,255,.5); background: rgba(180,165,255,.08); }
.hx-btn.primary { color: #0a0a0c; background: #f5f5f7; border-color: #f5f5f7; box-shadow: 0 18px 50px -20px rgba(180,165,255,.9); }
.hx-btn.primary:hover { background: #fff; box-shadow: 0 24px 60px -18px rgba(180,165,255,1); }
.hx-btn span { transition: translate .3s var(--ease-out); } .hx-btn:hover span { translate: 4px 0; }
.motion-ok .hx :is(.hx-badge, .hx-sub, .hx-cta) { opacity: 0; translate: 0 18px; }
.motion-ok .hx.go :is(.hx-badge, .hx-sub, .hx-cta) { opacity: 1; translate: 0 0; transition: opacity 1s ease, translate 1.1s var(--ease-out); }
.motion-ok .hx.go .hx-sub { transition-delay: .7s; } .motion-ok .hx.go .hx-cta { transition-delay: .85s; }
.hx-chart { position: relative; margin: -40px 0 0; padding: 0; }
.hx-plot { position: relative; height: clamp(240px, 34vh, 380px); cursor: crosshair; }
.hx-area { position: absolute; inset: 0 0 50px; }
.hx-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx-plot .l { fill: none; stroke: url(#hxline); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px rgba(180,165,255,.7)); }
.hx-plot .a { fill: url(#hxfill); }
.motion-ok .hx .hx-plot svg { clip-path: inset(-30px 100% -30px -30px); }
.motion-ok .hx.go .hx-plot svg { clip-path: inset(-30px -30px -30px -30px); transition: clip-path 2.6s cubic-bezier(.65, 0, .25, 1) .5s; }
.hx-head { position: absolute; z-index: 2; width: 0; height: 0; }
.hx-head i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(180,165,255,.25), 0 0 30px 6px rgba(180,165,255,.8); }
.motion-ok .hx-head i { animation: hx-beat 2s ease-in-out infinite; }
@keyframes hx-beat { 50% { box-shadow: 0 0 0 12px rgba(180,165,255,.08), 0 0 40px 10px rgba(180,165,255,.9); } }
.motion-ok .hx .hx-head { opacity: 0; } .motion-ok .hx.go .hx-head { opacity: 1; transition: opacity .5s ease 3s; }
.hx-bars { position: absolute; left: 1.2%; right: 1.2%; bottom: 0; height: 40px; display: flex; align-items: flex-end; gap: 3px; }
.hx-bars i { flex: 1; height: max(3px, var(--h)); border-radius: 3px 3px 1px 1px; background: var(--up); opacity: .55; }
.hx-bars i.down { background: var(--down); }
.motion-ok .hx .hx-bars i { transform: scaleY(0); transform-origin: bottom; }
.motion-ok .hx.go .hx-bars i { transform: none; transition: transform .6s var(--ease-out); transition-delay: calc(.6s + var(--i) * 70ms); }
.hx-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.35), transparent); opacity: 0; pointer-events: none; transition: opacity .2s; }
.hx-chart.hovering .hx-cross { opacity: 1; }
.hx-tip { position: absolute; z-index: 3; display: grid; gap: 2px; min-width: 120px; padding: 10px 12px; margin: -12px 0 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(10,10,14,.92); backdrop-filter: blur(10px); transform: translateY(-100%); pointer-events: none; font-size: 12px; }
.hx-tip.flip { margin-left: 0; transform: translate(calc(-100% - 16px), -100%); }
.hx-tip small { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hx-tip b { font-size: 18px; font-weight: 600; } .hx-tip em { font-style: normal; color: var(--muted); }
.hx .up { color: var(--up); } .hx .down { color: var(--down); }
.hx-stats { position: relative; z-index: 3; display: inline-flex; margin-top: 34px; gap: 2px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(10,10,14,.6); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(0,0,0,.9); }
.hx-stats div { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; min-width: 128px; }
.hx-stats div + div { border-left: 1px solid var(--line); border-radius: 0; }
.hx-stats small { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hx-stats b { font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hx-stats em { font-style: normal; font-size: 16px; color: var(--faint); }
.motion-ok .hx .hx-stats { opacity: 0; translate: 0 14px; } .motion-ok .hx.go .hx-stats { opacity: 1; translate: 0 0; transition: opacity 1s ease .9s, translate 1.1s var(--ease-out) .9s; }
.hx-chart figcaption { margin-top: 12px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.hx-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hx-door { position: relative; display: grid; gap: 6px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%), #08080a; overflow: hidden; transition: transform .5s var(--ease-out), border-color .35s, box-shadow .5s; }
.hx-door::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(180,165,255,.8), transparent); opacity: 0; transition: opacity .4s; }
.hx-door:hover, .hx-door:focus-visible { transform: translateY(-5px); border-color: rgba(180,165,255,.4); box-shadow: 0 30px 60px -36px rgba(180,165,255,.8); outline: none; }
.hx-door:hover::before { opacity: 1; }
.hx-k { font: 500 10.5px var(--mono); letter-spacing: .14em; color: #b4a5ff; }
.hx-door b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.hx-d { font-size: 13.5px; color: var(--muted); }
.hx-go { position: absolute; top: 18px; right: 20px; color: var(--faint); transition: color .3s, transform .4s var(--ease-out); }
.hx-door:hover .hx-go { color: #fff; transform: translate(3px, -3px); }
.hx-door.sera { border-color: rgba(145,217,222,.28); background: radial-gradient(120% 90% at 100% 0%, rgba(145,217,222,.12), transparent 60%), #08090b; }
.hx-door.sera .hx-k { color: #91D9DE; }
.hx-door.sera:hover { border-color: rgba(145,217,222,.55); box-shadow: 0 30px 60px -36px rgba(145,217,222,.8); }
.motion-ok .hx .hx-door { opacity: 0; translate: 0 20px; } .motion-ok .hx.go .hx-door { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate 1s var(--ease-out), transform .5s var(--ease-out), border-color .35s, box-shadow .5s; }
.motion-ok .hx.go .hx-door:nth-child(1) { transition-delay: 1.2s, 1.2s, 0s, 0s, 0s; } .motion-ok .hx.go .hx-door:nth-child(2) { transition-delay: 1.32s, 1.32s, 0s, 0s, 0s; } .motion-ok .hx.go .hx-door:nth-child(3) { transition-delay: 1.44s, 1.44s, 0s, 0s, 0s; }
html[dir="rtl"] .hx-go { right: auto; left: 20px; }
html[dir="rtl"] .hx-stats div + div { border-left: 0; border-right: 1px solid var(--line); }
@media (max-width: 960px) {
.hx-chart { margin-top: 0; }
.hx-stats { display: flex; width: 100%; }
.hx-stats div { flex: 1; min-width: 0; padding: 12px; }
.hx-stats b { font-size: 22px; }
.hx-doors { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .hx h1 { font-size: clamp(46px, 14vw, 64px); } .hx-plot { height: 220px; } .hx-stats small { font-size: 9px; } .hx-stats b { font-size: 19px; } }
.hx h1 .hx-line:not(.hx-accent) > .hx-w { background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
@media (min-width: 961px) {
.hx { gap: 26px; }
.hx h1 { font-size: clamp(64px, 8.2vw, 128px); }
.hx-copy { max-width: 760px; }
.hx-chart { margin-top: -330px; margin-left: 34%; }
.hx-plot { height: clamp(300px, 40vh, 400px); }
}
.hx-tip[hidden] { display: none; }
@media (min-width: 961px) { html[dir="rtl"] .hx-chart { margin: -330px 48% 0 0; } }
html[dir="rtl"] .hx-door b { text-align: right; }
.hx-plot { direction: ltr; }
.hx-stats { flex-wrap: wrap; }
.hx-stats-k { flex-basis: 100%; padding: 10px 18px 0; font: 500 10px var(--mono); letter-spacing: .14em; color: #b4a5ff; }
.hx-dd { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; }
.hx-dd svg { width: 100%; height: 100%; overflow: visible; }
.hx-dd path { fill: rgba(255,92,108,.28); stroke: rgba(255,92,108,.7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hx-dd span { position: absolute; left: 0; top: -14px; font: 500 9px var(--mono); letter-spacing: .14em; color: rgba(255,92,108,.75); }
.motion-ok .hx .hx-dd svg { clip-path: inset(-10px 100% -10px -10px); }
.motion-ok .hx.go .hx-dd svg { clip-path: inset(-10px -10px -10px -10px); transition: clip-path 2.6s cubic-bezier(.65, 0, .25, 1) .5s; }
.hx-area { bottom: 64px !important; }
.hx-stats { display: inline-grid; grid-template-columns: repeat(3, auto); width: auto; }
.hx-stats-k { grid-column: 1 / -1; }
@media (max-width: 960px) { .hx-stats { display: grid; width: 100%; } }
.pb { position: relative; padding: 150px 0 40px; }
.pb-head { max-width: 1120px; margin-bottom: 54px; }
.pb-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 11px var(--mono); letter-spacing: .16em; color: #ff8a96; }
.pb-k i { width: 7px; height: 7px; border-radius: 50%; background: #ff5c6c; box-shadow: 0 0 12px #ff5c6c; }
.pb-head h2, .me-copy h2 { margin: 0; font-size: clamp(38px, 5vw, 76px); font-weight: 600; line-height: .98; letter-spacing: -.05em; }
.pb-head p { max-width: 560px; margin: 22px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pb-card { position: relative; min-height: 300px; perspective: 1200px; outline: none; cursor: pointer; }
.pb-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s cubic-bezier(.2, .8, .2, 1), border-color .4s, box-shadow .6s; }
.pb-front { background: radial-gradient(120% 80% at 0% 0%, rgba(255,92,108,.10), transparent 60%), #0a0a0c; }
.pb-back { background: radial-gradient(120% 80% at 100% 0%, rgba(180,165,255,.16), transparent 60%), #0c0b12; border-color: rgba(180,165,255,.35); transform: rotateY(180deg); }
.pb-card:hover .pb-front, .pb-card:focus-visible .pb-front, .pb-card.flipped .pb-front { transform: rotateY(-180deg); }
.pb-card:hover .pb-back, .pb-card:focus-visible .pb-back, .pb-card.flipped .pb-back { transform: rotateY(0); box-shadow: 0 34px 70px -40px rgba(180,165,255,.9); }
.pb-n { font: 500 12px var(--mono); color: var(--faint); }
.pb-x, .pb-v { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; }
.pb-x { color: #ff5c6c; background: rgba(255,92,108,.12); } .pb-v { color: #3ddc97; background: rgba(61,220,151,.12); }
html[dir="rtl"] :is(.pb-x, .pb-v) { right: auto; left: 22px; }
.pb-face h3 { margin: 18px 0 0; font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.pb-face p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pb-hint { margin-top: auto; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
@media (hover: none) { .pb-hint::after { content: ''; } }
.motion-ok .pb-grid [data-reveal] { transition-delay: calc(var(--i) * 100ms); }
.pb-turn { max-width: 900px; margin: 70px 0 0 !important; font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; line-height: 1.25; letter-spacing: -.03em; color: var(--text) !important; }
.pb-turn span { background: linear-gradient(100deg, #8f7bff, #c9bfff 60%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.me { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding: 150px 0 40px; }
.me-photo { position: relative; margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 50px 100px -50px rgba(124,92,255,.7); }
.me-photo img { display: block; width: 100%; height: auto; filter: grayscale(.25) contrast(1.05); transition: transform 1.2s var(--ease-out), filter .6s; }
.me:hover .me-photo img { transform: scale(1.03); filter: grayscale(0) contrast(1.05); }
.me-photo figcaption { position: absolute; left: 18px; bottom: 16px; font: 500 11px var(--mono); letter-spacing: .16em; color: #fff; }
.me-copy .pb-k { color: #b4a5ff; } .me-copy .pb-k i { background: #b4a5ff; box-shadow: 0 0 12px #b4a5ff; }
.me-copy > p:not(.pb-k) { max-width: 560px; margin: 20px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.me-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.me-social { font-size: 14px; color: var(--muted); transition: color .25s; } .me-social:hover { color: var(--text); }
@media (max-width: 1100px) { .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pb { padding-top: 100px; } .pb-grid { grid-template-columns: 1fr; } .pb-card { min-height: 250px; } .me { grid-template-columns: 1fr; padding-top: 100px; } .me-photo { max-width: 420px; } }
.rs .page-intro h1 span { color: var(--muted); }
.rs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-bottom: 120px; }
.rs-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 28px 26px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), #08080a; color: inherit; text-decoration: none; transition: transform .5s var(--ease-out), border-color .35s, box-shadow .5s; }
.rs-card:hover, .rs-card:focus-visible { transform: translateY(-6px); border-color: rgba(180,165,255,.4); box-shadow: 0 34px 70px -40px rgba(180,165,255,.8); outline: none; }
.rs-n { font: 500 12px var(--mono); color: var(--faint); }
.rs-topic { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #b4a5ff; }
.rs-card h2 { margin: 6px 0 0; font-size: 27px; font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.rs-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.rs-more { display: inline-flex; gap: 10px; margin-top: auto; font-size: 13.5px; color: var(--text); }
.rs-more i { font-style: normal; color: #b4a5ff; transition: translate .3s var(--ease-out); }
.rs-card:hover .rs-more i { translate: 4px 0; } .rs-card[dir="rtl"]:hover .rs-more i { translate: -4px 0; }
.motion-ok .rs-grid [data-reveal] { transition-delay: calc(var(--i) * 90ms); }
.ar-wrap { padding: 60px 0 120px; }
.ar { max-width: 720px; margin: 0 auto; }
.ar-back { display: inline-block; margin-bottom: 40px; font-size: 14px; color: var(--muted); transition: color .25s; } .ar-back:hover { color: var(--text); }
.ar-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ar-meta span:first-child { color: #b4a5ff; }
.ar h1 { margin: 0; font-size: clamp(40px, 6vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.ar-lead { margin: 24px 0 0; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; color: var(--text) !important; opacity: .82; }
.ar-body { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.ar-body p { margin: 0 0 22px; font-size: 18px; line-height: 1.8; color: #c4c4cc; }
.ar-body h2 { margin: 48px 0 16px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--text); }
.ar-body blockquote { margin: 40px 0; padding: 6px 0 6px 24px; border-left: 2px solid #b4a5ff; font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; line-height: 1.35; letter-spacing: -.02em; color: var(--text); }
.ar[dir="rtl"] .ar-body blockquote { padding: 6px 24px 6px 0; border-left: 0; border-right: 2px solid #b4a5ff; }
.ar[lang="he"] .ar-body p { font-size: 18.5px; }
.ar-sign { margin: 40px 0 0; font-size: 16px; color: var(--muted); }
.ar-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 90px auto 0; }
.ar-next .rs-card { min-height: 0; }
.ar-next .rs-card h2 { font-size: 22px; }
@media (max-width: 960px) { .rs-grid { grid-template-columns: 1fr; } .rs-card { min-height: 0; } .ar-next { grid-template-columns: 1fr; } }
.ar-f { margin: 26px 0; padding: 18px 20px; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 14px; background: #0b0b10; font: 500 15px/1.6 var(--mono); color: #d9d3ff; white-space: pre; }
.ar-body ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ar-body li { position: relative; padding-inline-start: 22px; font-size: 17px; line-height: 1.7; color: #c4c4cc; }
.ar-body li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: #b4a5ff; }
.ar-fig { margin: 36px -40px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #070709; }
.ar-svg svg { display: block; width: 100%; height: auto; }
.ar-fig figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 860px) { .ar-fig { margin: 30px 0; padding: 10px; } }
.lang-toggle { display: inline-grid; place-items: center; min-width: 44px; height: 40px; padding: 0 12px; margin-inline: auto 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--text); font: 600 14px/1 'Heebo', var(--font); cursor: pointer; transition: border-color .2s, background-color .2s; }
.lang-toggle:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.desktop-nav ~ .lang-toggle { margin-inline: 0 10px; }
@media (max-width: 800px) { .lang-toggle { margin-inline: auto 10px !important; height: 44px; } .menu-toggle { margin-left: 0 !important; } }
html[lang="he"] body, html[lang="he"] button, html[lang="he"] input { font-family: 'Heebo', var(--font); }
html[lang="he"] :is(h1, h2, h3, blockquote, .manifesto-text, .tn-row dd > span, .hc blockquote, .door-copy h3) { letter-spacing: -.025em; }
html[lang="he"] .eyebrow, html[lang="he"] .lg-mono, html[lang="he"] .lab-mono, html[lang="he"] .tl-label, html[lang="he"] .tn-row dt, html[lang="he"] .fx-more, html[lang="he"] .ex-chip, html[lang="he"] .lab-chip, html[lang="he"] .lg-chip { letter-spacing: .04em; }
html[dir="rtl"] :is(.code-lines, .panel-head, .code-footer, svg, .fx-formula, .lab-plot, .lab-grid, .lab-chart, .lg-chart, .lg-daybars, .lg-cells, .lg-calendar, .tl-bars, .tl-curve, .ex-bt-chart, .ex-scatter, .analyzer-locked, .tl-input, .lg-kpi strong, .lab-read dd, .ex-bt-stats dd, .ex-curve-stats, .fx-vars dt) { direction: ltr; }
html[dir="rtl"] .tl-input { flex-direction: row; }
html[dir="rtl"] .hw-mini { text-align: right; }
html[dir="rtl"] .fx-vars div, html[dir="rtl"] .lx-item dd, html[dir="rtl"] .fx-body, html[dir="rtl"] .fx-why { text-align: right; }
html[dir="rtl"] :is(.button > span:last-child, .text-link > span, .door-cta > span, .rw-cta > span, .tile-cta > span, .why-arrow, .hw-steps i) { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .tn-switch i { left: auto; right: 5px; }
html[dir="rtl"] .tn-card[data-tn="now"] .tn-switch i { transform: translateX(-100%); }
html[lang="he"] body *:not(.code-lines):not(.code-lines *):not(code):not(.panel-head *):not(.code-footer *) { font-family: 'Heebo', 'Inter Tight', Arial, sans-serif !important; }
html[lang="he"] :is(.eyebrow, .lg-mono, .lab-mono, .tl-label, .tn-row dt, .fx-more, .ex-chip, .lab-chip, .lg-chip, .soon-badge, .tt-n, .hw-n, .lx-cat-n, .lx-count, .scroll-cue span, .tools-hint, .ex-score, .tl-n, .fx-n, .ex-tag, .door-n, .hw-mini span) { letter-spacing: .02em !important; }
html { font-size: calc(100% * var(--a11y-text-scale, 1)); }
:where(a, button, input, select, summary):focus-visible { outline: 3px solid #c7e7ff; outline-offset: 5px; }
body { padding-bottom: 56px; }
#accessibility-widget { font-family: 'DM Sans', Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.a11y-launcher { position: fixed; z-index: 40; bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #8299ad; border-radius: 50%; background: #141e27; color: #e8f1f8; box-shadow: 0 3px 14px #0005; cursor: pointer; }
.a11y-launcher:hover { background: #25465f; }
#accessibility-panel { box-sizing: border-box; position: fixed; inset: auto auto 16px 16px; margin: 0; width: min(320px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px; border: 1px solid #617b90; border-radius: 10px; background: #111b24; color: #f4f7fa; font: 15px/1.5 Arial, sans-serif; text-align: right; }
#accessibility-panel::backdrop { background: #03070b99; backdrop-filter: blur(3px); }
.a11y-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#accessibility-heading { color: #fff; font: 600 20px/1.35 Arial, sans-serif; letter-spacing: 0; margin: 0 0 5px; }
#accessibility-description { font-size: 14px; color: #bfcddb; margin: 0; }
.a11y-close { min-width: 44px; min-height: 44px; background: #1c2b38; border: 1px solid #567087; border-radius: 7px; color: #fff; font: 28px/1 Arial, sans-serif; }
.a11y-text-size { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.a11y-text-size legend { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.a11y-text-size>div { display: flex; align-items: center; gap: 10px; direction: ltr; }
.a11y-text-size button { flex: 1; min-height: 44px; border: 1px solid #5b7891; border-radius: 7px; color: #fff; background: #1c3041; font: 600 18px/1 Arial, sans-serif; }
.a11y-text-size button:disabled { opacity: .5; }
#a11y-text-value { min-width: 65px; text-align: center; font-size: 17px; color: #fff; }
.a11y-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 9px 0; border-bottom: 1px solid #354b5b; cursor: pointer; }
.a11y-option strong { display: block; font-size: 15px; font-weight: 600; color: #f2f6fa; }
.a11y-option small { display: block; font-size: 13px; color: #bbcad7; margin-top: 3px; }
.a11y-option input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #b9ddf8; cursor: pointer; margin: 8px; }
.a11y-reset { display: block; width: 100%; min-height: 44px; margin-top: 14px; padding: 9px; font: 600 14px/1.5 Arial, sans-serif; border: 1px solid #6a879e; border-radius: 6px; background: #1c3041; color: #fff; }
.a11y-help, .a11y-system-motion { color: #b9c9d6; font-size: 13px; margin-top: 14px; }
#a11y-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.a11y-highlight-links .site-shell a { text-decoration: underline !important; text-underline-offset: .22em; text-decoration-thickness: 2px; }
.a11y-high-contrast { --bg: #000; --surface: #000; --text: #fff; --muted: #fff; --faint: #ddd; --line: #b9c3cc; }
.a11y-high-contrast .site-shell { background: #000; }
.a11y-high-contrast .site-shell :is(p, span, a, h1, h2, h3, h4, strong, small, em, code, b, i, blockquote, label, button, summary, select) { color: #fff !important; }
.a11y-high-contrast .site-shell :is(button, select, .panel, .button, .orbit-label, .mobile-nav, .demo-tag, .availability) { background: #000 !important; border-color: #fff !important; }
.a11y-high-contrast .site-shell :is(.primary, [aria-pressed="true"]) { background: #fff !important; color: #000 !important; }
.a11y-high-contrast .site-shell .primary span { color: #000 !important; }
.a11y-high-contrast .equity-chart text { fill: #fff; }
.a11y-high-contrast .equity-chart polyline { stroke: #fff; stroke-width: 2.5; }
.a11y-high-contrast .chart-axis { color: #fff; }
.a11y-reduce-motion, .a11y-reduce-motion * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
.a11y-reduce-motion .flow-art circle { display: none; }
.a11y-large-text .desktop-nav, .a11y-large-text .about-link { display: none; }
.a11y-large-text .menu-toggle { display: flex; flex-direction: column; gap: 6px; margin-left: auto; background: none; border: 1px solid #708494; padding: 14px 12px; }
.a11y-large-text .menu-toggle span { width: 20px; height: 2px; background: #e5eef5; }
.a11y-large-text .mobile-nav:not([hidden]) { position: relative; display: grid; grid-template-columns: 1fr; left: auto; right: auto; padding: 20px; border: 1px solid #657584; background: #0d1116; gap: 12px; }
.a11y-large-text .mobile-nav a { display: block; font-size: 1rem; padding: 10px; }
.a11y-large-text :is(.hero-copy, .section-copy) { width: 100%; max-width: none; }
.a11y-large-text .hero-copy>p:not(.eyebrow), .a11y-large-text .section-copy>p:not(.eyebrow) { max-width: 42rem; }
.a11y-large-text .hero h1 { font-size: clamp(2.3rem, 6vw, 5.875rem); overflow-wrap: anywhere; }
.a11y-large-text .hero { padding-bottom: 45px; }
.a11y-large-text .flow-art { opacity: .2; }
.a11y-large-text :is(.hero-actions, .panel-head, .code-footer, .video-band, .footer-top, .footer-bottom, .manifesto-strip, .collection-bottom, .video-caption, .journal-performance-top) { flex-wrap: wrap; height: auto; }
.a11y-large-text .panel-head { padding-block: 14px; }
.a11y-large-text :is(.home-section, .about-section, .approach-feature, .collection-empty, .about-feature, .content-grid, .about-destinations, .principles) { grid-template-columns: minmax(0, 1fr); }
.a11y-large-text :is(h1, h2, h3, p, a) { overflow-wrap: anywhere; }
.a11y-large-text .section-copy h2 br { display: initial; }
.a11y-large-text .code-lines, .a11y-large-text .code-state { height: auto; min-height: 292px; }
.a11y-large-text .code-tabs { gap: 18px; }
.a11y-large-text .book-stage { height: auto; min-height: 420px; }
.a11y-large-text .book-cover { width: min(100%, 23rem); height: auto; min-height: 400px; transform: none; }
.a11y-large-text .book-title, .a11y-large-text .quote blockquote { overflow-wrap: anywhere; }
.a11y-large-text .book-bottom { position: static; margin-top: 30px; gap: 15px; flex-wrap: wrap; }
.a11y-large-text .book-side-note, .a11y-large-text .book-spine { display: none; }
.a11y-large-text .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 0; }
.a11y-large-text .research-art { min-height: 380px; }
.a11y-large-text .orbit-label { max-width: 48%; }
.a11y-large-text .quote { margin: 30px 0 0 30px; }
.a11y-large-text .about-monogram { overflow: hidden; }
.a11y-large-text .video-caption .text-link { white-space: normal; }
@media(max-width:480px) { .a11y-launcher { bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; } #accessibility-panel { inset: auto auto 12px 12px; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 16px; } .a11y-large-text .hero { min-height: auto; } .a11y-large-text .scroll-cue { margin-top: 45px; } .a11y-large-text .flow-art { display: none; } .a11y-large-text .manifesto-strip span:last-child { display: none; } }